@charset "UTF-8";

/* --- reset --- */
*{margin:0;padding:0}
html,body{width:100%;height:100%}
body,h1,h2,h3,h4,input,button{font-family:Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif;color:#383d41}
body{background-color:#fff;*word-break:break-all;-ms-word-break:break-all; font-size:1.8vw; line-height:150%; font-weight:bold; letter-spacing: -0.5px;}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select{vertical-align:middle}
img{vertical-align:top; width:100%;}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{cursor:pointer; border:0 none; background-color:transparent;}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline}
option{padding-right:6px}
hr{display:none}
legend{*width:0}
table{border-collapse:collapse;border-spacing:0}
caption{font-size:0; width:0; height:0; position:absolute; top:-1px; left:-1px; z-index: -1;}
input::-ms-clear{display:none}

/* --- option --- */
.ir{display:block; text-indent:150%; overflow:hidden; white-space:nowrap}
.blind{position:absolute; z-index:201; top:0; left:0; right:0; bottom:0; background-color:#000; opacity:0.5;}

.repeat{background:url(../images/i_repeat_off.png) no-repeat center center; background-size:100% 100%; cursor:pointer;}
.repeat.on{background:url(../images/i_repeat_on.png) no-repeat center center; background-size:100% 100%; }


/* --- layout --- */
#container_pc{margin:0 auto; width:1020px; height:680px; overflow:hidden;}
#header{width:100%; height:81px; }
#header.st2{height:77px;}
#content{width:100%; height:493px;}
#content.st2{height:496px;}
#footer{width:100%; height:106px;}

#container_pc.bg_1{background:url(../images/m_00/bg_main.png) no-repeat 0 0}
#container_pc.bg_2{background:url(../images/m_00/bg_main2.png) no-repeat 0 0}

/* --- header --- */
#header h1.title{float:left; margin-left:20px; width:201px; height:81px; background:url(../images/m_00/class1.png) no-repeat 0 0;}
#header h2{float:left; margin:12px 0 0 14px; width:140px; height:30px; background:url(../images/m_00/chapter2.png) no-repeat 0 0;}
#header ul.snb{float:right; margin:12px 16px 0 0;}
#header ul.snb>li{float:left; line-height:28px; margin-left:1px; font-size:16px;}
#header ul.snb li.dic{margin-left:0; width:81px; background:url(../images/m_00/btn_dic.png) no-repeat 0 0;}
#header ul.snb li.lan_select{position:relative; width:92px; background:url(../images/m_00/btn_lan.png) no-repeat 0 0;}
#header ul.snb li.lan_select>p{padding-right:25px; width:calc(100% - 25px); height:28px; text-align:center; color:#fff; background:url(../images/m_00/lan_down.png) no-repeat 95% center}
#header ul.snb li.lan_select .lan_box{position:absolute; z-index: 50; width:calc(100% - 3px);  text-align:center; border:1px #8bae30 solid; background-color:#fff; display:none;}
#header ul.snb li.lan_select .lan_box ul{width:calc(100% - 2px); border:1px #cde9a6 solid;}
#header ul.snb li.lan_select .lan_box ul li{padding:2px 0; border-top:1px #cde9a6 solid; cursor:pointer;}
#header ul.snb li.lan_select .lan_box ul li:first-child{border:0 none;}
#header ul.snb li.lan_select .lan_box ul li:hover,
#header ul.snb li.lan_select .lan_box ul li.on{background-color:#89C92C;}
#header ul.snb li.lan_select:hover>p{background:url(../images/m_00/lan_up.png) no-repeat 95% center}
#header ul.snb li.lan_select:hover .lan_box{display:block}
#header ul.snb li.help{width:30px; background:url(../images/m_00/btn_help.png) no-repeat 0 0;}
#header ul.snb li.home{width:30px; background:url(../images/m_00/btn_home.png) no-repeat 0 0; background-size:100% 100%;}

/* --- content --- */
#content .chapter{margin:0 auto; padding-top:15px; width:780px;}
#content .chapter h2{height:30px; background:url(../images/m_00/chapter2.png) no-repeat 0 0;}
#content .chapter .mobile{margin-top:6px; width:100%; height:428px; background:url(../images/m_00/mobile_1.png) no-repeat 0 0;}
#content .chapter .mobile .screen{padding:18px 0 0 61px; position:relative; }
#content .chapter .mobile .screen .top{height:55px; width:678px; background:url(../images/m_00/pc_top.png) no-repeat 0 0;}
#content .chapter .mobile .screen .top .s_target{float:left; margin-left:19px; padding-left:39px; line-height:55px; font-weight:initial; color:#fff; background:url(../images/m_00/i_target.png) no-repeat 0 11px;}
#content .chapter .mobile .screen .top .snb2{float:right;}
#content .chapter .mobile .screen .top .snb2 li{float:left; line-height:55px;}
#content .chapter .mobile .screen .top .snb2 li.sub_book a{padding:0 10px;width:60px; background:url(../images/m_00/i_book.png) no-repeat 0 center;}
#content .chapter .mobile .screen .top .snb2 li.sub_mp3{background:url(../images/m_00/top_bar.png) no-repeat 0 14px;}
#content .chapter .mobile .screen .top .snb2 li.sub_mp3 a{padding:0 10px;width:60px; background:url(../images/m_00/i_mp3.png) no-repeat center;}
#content .chapter .mobile .screen .con_info{position:relative; top:-1px;width:678px; displa}
#content .chapter .mobile .screen .con_info img{width:100%; vertical-align: top;}
#content .chapter .mobile .screen .m_frame{width:248px; height:223px; position:absolute; top:63px; right:-20px; z-index:10; background:url(../images/m_00/a_frame.png) no-repeat 0 0;}

#content .con_area{position:relative; margin:0 auto; width:907px;}
#content .con_area .mobile2{margin:0 auto; padding-top:17px; width:907px; height:451px; background:url(../images/m_00/mobile2.png) no-repeat 0 0;}
#content .con_area .mobile2 .iframe{margin-left:34px; width:830px; height:421px; }
#content .con_area .mobile2 .iframe iframe{width:100%; height:100%;}

#content .con_area button.btn_subti{float:right; margin-right:17px; width:108px; height:29px; background:url(../images/m_00/btn_text.png) no-repeat 0 0}
#content .con_area .text_box{position:absolute; width:930px; display:none;}
#content .con_area .text_box .text_con{float:left; padding:10px 12px 0 14px; width:868px; height:107px; background:url(../images/m_00/text_con.png) no-repeat 0 0; overflow:hidden;}
#content .con_area .text_box .text_con>p{padding-right:15px; height: 87px; font-size:16px; line-height: 24px; color:#fff; overflow-y: scroll; }
#content .con_area .text_box button.close_sub{position:absolute; top:0; right:0; width:40px; height:43px; background:url(../images/m_00/btn_close.png) no-repeat 0 0;}

/* --- footer --- */
#footer h1.logo{float:left; margin:17px 118px 0 20px; width:139px; height:69px; background:url(../images/m_00/logo.png) no-repeat 0 0;}
#footer .gnb{float:left;}
#footer .gnb li{float:left; margin-left:11px; width:78px; height:78px; background:url(../images/m_00/gnb_bg.png) no-repeat 0 0;}
#footer .gnb li:first-child{margin-left:0;}
#footer .gnb li a{height:78px;}
#footer .gnb li.talk1 a{background:url(../images/m_00/gnb1.png) no-repeat 20px center;}
#footer .gnb li.talk2 a{background:url(../images/m_00/gnb2.png) no-repeat 20px center;}
#footer .gnb li.pron a{background:url(../images/m_00/gnb3.png) no-repeat center;}
#footer .gnb li.acti a{background:url(../images/m_00/gnb4.png) no-repeat 20px center;}
#footer .gnb li.eval a{background:url(../images/m_00/gnb5.png) no-repeat 26px center;}
#footer .start{float:right;}
#footer .start a{ width:117px; height:106px; background:url(../images/m_00/start.png) no-repeat center; }