@charset "utf-8";
/* CSS Document */

@import url(../css/frt/basic.css);
html,body{ background:#eee;}
/* 공통 */
#skipnavi a {display:block;left:0;overflow:hidden;position:absolute;top:-10000px;}
#skipnavi a:hover,#skipnavi a:focus,#skipnavi a:active {padding:15px 0;background-color:#3760c9;color:#fff;font-size:120%;width:100%;text-align:center;top:0px;z-index:500;}
#wrap{ width:100%; min-width:328px;  overflow:hidden;font-family:"nanumttf_r","nanumeot_r";color:#666;}
.grd1{background:#fff; float:left;}
.grd2{background:url(img/mg2.gif) top right no-repeat #fff;float:left;} /*인포 */
.grd3{background:url(img/mg3.gif) top right no-repeat #3760c9;float:left; color:#fff;} /* 웹툰 */
.grd4{background:url(img/mg4.gif) top right no-repeat #8f98ad;float:left;color:#fff; position:relative;} /* 동영상 */
.grd5{background:url(img/mg5.gif) bottom right no-repeat #fff;float:left;} /*이벤트*/
.grd6{background:url(img/mg6.gif) top right no-repeat #fff;float:left;border-top:1px solid #ccc;}
.grd7{background:url(img/mg7.gif) top right no-repeat #fff;float:left; border-top:1px solid #ccc;}
.grd8{background:#fff; float:left;} /* 블로그 */
.wstyle2 h2,
.wstyle3 h2{ padding:30px 0 0 30px;}
.wstyle2 p{ padding:16px 0 0 30px; width:50%; font-size:110%; line-height:1.4em;}
.wstyle2>span{ padding:15px 0 0 30px; display:block;}
.wstyle2 p>span{padding:0!important; display:inline; }
.wstyle2 span a{ padding-right:5px;}
.wstyle3 h2{ float:left;}
.wstyle3{ position:relative;}
.wstyle3 p{position:absolute; top:30px; right:25px;}
.wstyle3 ul{ padding:15px 30px 0 30px; clear:both;}
.wstyle3 ul a{ background:url(img/m_icon4.gif) 0 5px no-repeat; margin-bottom:5px; padding-left:10px; font-size:110%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block; line-height:140%; width:97%; padding-top:5px;}
.grd1{ position:relative; z-index:10;}
.grd1 p{ position:absolute; bottom:0; left:0;}
.grd1 ul{}
.grd1 ul li{ position:absolute; bottom:7.8%; width:25.5%;}
.grd1 ul li img{ width:100%;}
.grd1 ul li.m1_1{ left:9%;}
.grd1 ul li.m1_2{ left:37%;}
.grd1 ul li.m1_3{ right:10%;}
.grd3 strong{ font-size:110%; font-weight:800;font-family:"nanumttf","nanumeot";}
.grd4>span{padding:5px 0 0 30px!important;}
.grd4>span{ display:block; position:absolute; right:20px; bottom:30px; text-align:right;}
.grd4>span img{ width:80%;}
.grd4>p>span{ display:block;}
.topbtn{ display:block; position:absolute; right:0; bottom:0;}/*맨위로 버튼 */
.infoimg{ width:100%; overflow:hidden;}
.infoimg li img{ width:100%;}
.sh_sns{ position:absolute; right:30px; top:30px; line-height:21px;}
.sh_sns a{ padding-left:2px;}
.minfo{ position:absolute; right:0; top:0;}
.grd2{ position:relative;}
.mov_caption{border:1px solid #ccc; background:#fafafa;padding:20px 0 20px 20px;margin:20px 0;}
.cap_box{height:150px; overflow-y:auto; line-height:1.6em;}


/* 모바일 */
.contents{max-width:480px; margin:0 auto; overflow:hidden;}
#top{ width:100%; min-height:56px; border-bottom:1px solid #d6d6d6; background:#fff; z-index:90; position:relative;}
.topwrap{ margin:0 auto; width:100%; position:relative;}
.logo{ text-align:left;padding:13px 0;}
.logo img{width:234px;}
.gohome{ position:absolute; right:50px; top:10px;}
.gohome a{ display:inline-block;text-align:center;border:1px solid #e5e5e5; padding:8px 8px;}
.gomenu{ position:absolute; right:10px; top:10px;}
.gomenu a{ display:inline-block;  background:#3760c9; text-align:center;}
#nav{width:100%; padding:0; text-align:left; display:none; position:absolute; z-index:100; top:45px;}
#nav li{font-weight:800; letter-spacing:-1px;}
#nav li a{ color:#fff; font-size:130%; padding:15px 0 15px 30px; display:block;  background:url(img/m_navbg.png) 97% 14px no-repeat #3f4450;border-bottom:1px solid #555;  }
#nav li ul{width:100%; }
#nav li ul li a{ padding-left:50px; font-size:120%;background:url(img/m_navbg2.png) 35px 14px no-repeat #333740; border-bottom:1px solid #444;}
.subwrap{ width:100%; background:#fff; overflow:hidden; text-align:left;margin:0 auto; position:relative; }
#subcon{padding:40px 0 50px 30px; margin-right:30px; font-size:90%;}
#subcon h3{ background:url(img/m_icon0.png) 0 bottom  no-repeat; color:#222;font-family:"nanumttf","nanumeot"; font-weight:600; font-size:200%; line-height:1.6em; margin-bottom:30px;letter-spacing:-0.05em; margin-top:25px;}
#subcon h4{ background:url(img/iconset.png) 0 -197px no-repeat;color:#333;font-family:"nanumttf","nanumeot"; font-weight:600; font-size:160%; line-height:1.6em; margin:40px 0 10px 0; padding-left:25px;letter-spacing:-0.05em;}
#subcon h5{ color:#3760c9; font-weight:600; font-size:140%; line-height:1.6em; margin:30px 0 5px 0; letter-spacing:-0.05em;}
#subcon h6,
#subcon .p01{ background:url(img/iconset.png) 7px -392px no-repeat;color:#444;font-size:120%; font-weight:500; line-height:1.6em; margin:15px 0 5px 0; padding-left:17px;letter-spacing:-0.05em;}
#subcon .p02{ color:#666; margin:5px 0; margin-left:17px; font-size:110%; line-height:1.6em;}
.c_position{background:url(img/iconset.png) 0 -798px no-repeat; padding-left:17px; color:#666; font-size:100%; text-align:right; float:right; margin-top:-30px;}
.leftbox{ display:none;}
.listbox{ padding:20px 25px; font-size:120%; border:1px solid #ccc;}
.listbox li{ margin-bottom:5px;}
.box01{ padding:20px 25px; color:#596071; font-size:110%; font-weight:600;background:#fafafa; border:1px solid #dee1e5;letter-spacing:-0.1em;}
.box02{ padding:15px 25px; color:#555; font-size:110%; font-weight:600;background:#fff; border:1px dashed #ccc;letter-spacing:-0.1em;}
.box03{ vertical-align:middle; padding:5px 0 0px 25px;}
.box03 span{ border:1px solid #ccc; padding:10px 15px; display:inline-block; margin-bottom:5px; vertical-align:middle;}
.box03 span.bg{ background:#eee;}
.wstyle1{width:100%;}
.wstyle2{width:100%; height:180px;}
.wstyle3{width:100%; height:220px; border-top:1px solid #ccc;}
.imgW{ width:100%;}
.ti08{text-indent:-0.8em; padding-left:10px;}
.ti09{text-indent:-0.9em; padding-left:10px;}
.ti10{text-indent:-1.0em; padding-left:10px;}
.ti11{text-indent:-1.1em; padding-left:11px;}
.ti12{text-indent:-1.2em; padding-left:12px;}
.ti13{text-indent:-1.3em; padding-left:13px;}
.footer{ clear:both; width:100%; border-top:1px solid #c6c6c6; margin:50px auto 0 auto; padding:20px 0; position:relative; color:#666;}
.footer address{ font-style:normal;}
.sns{ position:absolute; right:0; top:-40px;}
.sns li{ float:left;}
.footer .info{ float:left; display:inline-block; text-align:left;}
.img img{ width:100%;}
#subcon sup{ font-size:110%; line-height:0.75em;}

/* 1-2 통합 */
.mod1 #top,
.mod2 #top{ min-height:82px;}
.mod1 .logo,
.mod2 .logo{ text-align:left;  width:240px; border-bottom:none; float:left;}
.mod1 .gohome,
.mod2 .gohome{height:82px; padding:0; width:60px;position:absolute; top:0;border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5;}
.mod1 .gohome a,
.mod2 .gohome a{ display:inline-block;padding:30px 20px; border:none;}
.mod1 #nav,
.mod2 #nav{width:360px; float:right; padding:30px 0 0 0;position:relative; top:0; left:0;  display:block;  text-align:right; }
.mod1 #nav li,
.mod2 #nav li{text-align:center; background:url(img/navbg.gif) left 5px  no-repeat; padding:0 15px 0 20px; font-size:130%; font-weight:800; letter-spacing:-1px;display:inline;  }
.mod1 #nav li:first-child,
.mod2 #nav li:first-child{ background:none; padding:0 15px 0 0;}
.mod1 #nav li ul,
.mod2 #nav li ul{ display:none;}
.mod1 #nav li a,
.mod2 #nav li a{ color:#333; font-size:100%;; padding:0; display:inline; border:none; background:none; }
.mod1 #nav li a:hover,
.mod2 #nav li a:hover{ color:#3760c9;}
.mod1 #nav li.on a,
.mod2 #nav li.on a{color:#3760c9; text-decoration:underline;}
.mod1 #nav li.end,
.mod2 #nav li.end{ padding-right:0;}
.mod1 .contents,
.mod2 .contents{ margin-top:30px;}
.mod1 .leftbox,
.mod2 .leftbox{width:245px; float:left; display:block;}
.mod1 .leftbox h2,
.mod2 .leftbox h2{ background:#3760c9; color:#fff; padding:30px 0; text-align:center; font-size:200%; font-weight:800;font-family:"nanumttf","nanumeot";}
.mod1 .submenu li,
.mod2 .submenu li{ width:100%; float:left;}
.mod1 .submenu li a,
.mod2 .submenu li a{ padding:16px 0 16px 30px; background:#f2f2f2; border-bottom:1px solid #ccc; display:block;font-size:120%; color:#666;}
.mod1 .submenu li.on a,
.mod2 .submenu li.on a{ background:#fff; color:#3760c9; font-weight:800;}
.mod1 #subcon,
.mod2 #subcon{min-height:500px; float:right; width:100%;}
.mod1 .footer,
.mod2 .footer{ margin-top:30px;}
.mod1 .sns,
.mod2 .sns{ top:20px;}
.mod1 .grd4>span,
.mod2 .grd4>span,
.mod3 .grd4>span{ bottom:20px; right:20px;}
.mod1 .grd4>span img,
.mod2 .grd4>span img,
.mod3 .grd4>span img{ width:100%;}
.mod1 .wstyle2 p,
.mod2 .wstyle2 p,
.mod3 .wstyle2 p{ width:200px; }
.mod1 .wstyle2>span,
.mod2 .wstyle2>span,
.mod3 .wstyle2>span{ padding:30px 0 0 30px; display:inline-block}
.mod1 .grd3 strong,
.mod2 .grd3 strong,
.mod3 .grd3 strong{ display:block;}
.grd4>span{padding:10px 0 0 30px;}
.grd4 p{ width:100%;}
.mod1 .wstyle2 p span,
.mod2 .wstyle2 p span,
.mod3 .wstyle2 p span{ display:block;}
.mod1 .infoimg li,
.mod2 .infoimg li{ width:49%; float:left;}
.mod1 .sh_sns,
.mod2 .sh_sns,
.mod3 .sh_sns{right:30px; top:50px;}
.mod1 #subcon,
.mod2 #subcon,
.mod3 #subcon{ font-size:100%;}
.mod1 .grd4>p>span,
.mod2 .grd4>p>span,
.mod3 .grd4>p>span{ display:inline;}
.mod1 #subcon h3,
.mod2 #subcon h3,
.mod3 #subcon h3{ margin-top:0px;}


/* 1025 */
.mod1 .topwrap,
.mod1 .contents,
.mod1 .subwrap,
.mod1 .footer{max-width:984px}
.mod1 .logo{ padding:16px 0;}
.mod1 .logo img{width:302px;}
.mod1 .gohome{left:550px; }
.mod1 .subwrap{background:url(img/slbg.gif) left repeat-y #fff;}
.mod1 .leftbox{width:245px; }
.mod1 #subcon{max-width:676px;}
.mod1 .wstyle1{width:492px;height:440px;}
.mod1 .wstyle2{width:246px; height:220px;}
.mod1 .grd6{border-right:1px solid #ccc;width:245px; border-top:none;}
.mod1 .grd7{border-right:1px solid #ccc;width:245px; border-top:none;}
.mod1 .wstyle3{width:492px;height:219px;}


/* 738-1024 */
.mod2 .topwrap,
.mod2 .contents,
.mod2 .subwrap,
.mod2 .footer{max-width:738px}
.mod2 .logo{ padding:20px 0;}
.mod2 .logo img{width:280px;}
.mod2 .gohome{ left:310px; }
.mod2 .subwrap{background:url(img/slbg.gif) -50px 0 repeat-y #fff;}
.mod2 .leftbox{width:195px; }
.mod2 #subcon{max-width:473px;}
.mod2 .wstyle1{width:492px;height:440px;}
.mod2 .wstyle2{width:246px; height:220px;}
.mod2 .grd6{border-left:1px solid #ccc;width:245px;border-top:none;}
.mod2 .grd7{border-right:1px solid #ccc;width:245px;border-top:none;}
.mod2 .wstyle3{width:492px;height:219px;}
.mod2 .submenu li span{ display:block;}
/* 492-738*/
.mod3 .topwrap,
.mod3 .contents,
.mod3 .subwrap,
.mod3 .footer{max-width:492px}
.mod3 .logo{ text-align:left;}
.mod3 .wstyle1{width:492px;height:440px;}
.mod3 .wstyle2{width:246px; height:220px;}
.mod2 .grd6{border-top:none;}
.mod3 .grd7{border-left:1px solid #ccc;width:245px;height:219px;}
.mod3 .wstyle3{width:492px;height:219px;}