@charset "utf-8";

.blackBg{display:none; width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); z-index:100;}
.wrap{overflow:hidden; position:relative; min-height:1000px; background:#101111;}
.width1200{max-width:1200px; margin:0 auto;}

.pc_display{display:block;}
.mo_display{display:none;}

.pc_img{display:inline;}
.mo_img{display:none;}


/* 헤더 */
.header .nav{max-width:1200px; margin:0 auto; }
.header .nav:after{content:""; clear:both; display:block;}
.header .nav h1{float:left; width:180px;}
.header .nav h2{float:left; width:80px; text-align:right;}
.header .nav .gnb{float:left; width:calc(100% - 265px); font-size:0; text-align:right;}
.header .nav .gnb:after{content:""; clear:both; display:block;}
.header .nav .gnb > li{display:inline-block; position:relative; width:11%; height:90px; line-height:99px;}
.header .nav .gnb > li:hover > a{color:#c89cef;}
.header .nav .gnb > li > a{display:block; font-size:15px; color:#f0e1ff; font-weight:400; line-height:normal; padding:40px 0 10px; border-bottom:2px solid transparent;}
.header .nav .gnb > li > ul{display:none; position:absolute; top:100px; left:0; width:100%; box-sizing:border-box; padding:11.77% 0; border:1px solid #ffffff; background:rgba(10,10,10,0.89); z-index:10;}
.header .nav .gnb > li > ul > li{line-height:1; margin-bottom:10.37%;}
.header .nav .gnb > li > ul > li:last-of-type{margin-bottom:0;}
.header .nav .gnb > li > ul > li > a{font-size:16px; color:#ffffff; font-weight:400;}
.header .nav .gnb > li > ul > li > a:hover{color:#5394cf;}
.header .nav .gnb > li > ul > li > ul{display:none;}
.header .nav .gnb > li.img3{width:130px;}
.header .nav .gnb > li.img4{width:110px;}



.header .nav .gnb > li.guide > a{display:none;}
.header .nav .gnb > li.guide > ul{display:block; position:relative; top:0; left:0; border:0; background:none; padding:0; overflow:hidden;}
.header .nav .gnb > li.guide > ul > li{float:left; line-height:96px; margin-bottom:0; margin-left:20px;}
.header .nav .gnb > li.guide > ul > li:first-of-type{margin-left:0;}
.header .nav .gnb > li.guide > ul > li > a{display:inline-block; padding-top:10px; font-size:12px; color:#333; line-height:1;}
.header .nav .gnb > li.guide > ul > li > a:hover{border-top:1px solid #000;}


/* 푸터 */
.footer{background:#1c1c1c;}
.footer .foot{max-width:1200px; margin:0 auto; padding:45px 0 50px;}
.footer .foot:after{content:""; clear:both; display:block;}
.footer .foot .f_logo{float:left;}
.footer .foot .f_txt{float:left; margin-left:25px;}
.footer .foot .f_txt li{margin-bottom:10px; font-size:14px; color:#b1b1b1; line-height:1.2;}
.footer .foot .f_txt li strong{font-size:15px; color:#fff;}
.footer .foot .f_txt li p{display:inline-block; margin-left:10px;}
.footer .foot .f_txt li p:first-of-type{margin-left:0;}
.footer .foot .f_txt li p span{color:#c89cef;}
.footer .foot .f_txt li:last-of-type{margin-bottom:0;}


/* 서브비주얼 */
.sub_visual{position:relative; width:100%; height:300px;}
.sub_visual img{position:absolute; top:0; left:50%; width:1920px; height:300px; margin-left:-960px;}


/* 서브네비게이션 */
.sub_nav{text-align:center; height:50px; line-height:50px; border-bottom:1px solid #dadada; font-size:0;}
.sub_nav:after{content:""; display:block; clear:both;}
.sub_nav span{display:inline-block; padding-right:20px; margin-right:10px; vertical-align:middle; font-size:14px; color:#666; background:url("/img/sn_arrow.png") no-repeat 100% 50%;}
.sub_nav span:last-of-type{color:#14447c; font-weight:600; background:none;}
.sub_nav div{float:left; width:50%;}
.sub_nav div p{font-size:15px; height:70px; line-height:70px; font-size:22px; color:#fff; background:#14447c; cursor:pointer;}
.sub_nav div ul li ul.depth02{display:none;} 
.sub_nav div ul li ul.depth03{display:none;} 


/* 서브탭 */
.sub_tab{padding:50px 0;}
.sub_tab ul{text-align:center; font-size:0;}
.sub_tab ul li{display:inline-block; width:200px; height:50px; line-height:50px; box-sizing:border-box; border-right:1px solid #fff; border-bottom:1px solid #fff;}
.sub_tab ul li:last-of-type{border-right:0;}
.sub_tab ul li a{display:block; font-size:18px; color:#949494; font-weight:500; background:#e2e2e2;}
.sub_tab ul li a.on{color:#fff; background:#14447c;}



/**************** 레이아웃 변경 1000 ****************/
@media all and (max-width:1000px) {
.pc_display{display:none;}
.mo_display{display:block;}

.pc_img{display:none;}
.mo_img{display:inline;}

.width1200{padding:0 20px;}
.header .nav h1 img{max-width:160px; margin-top:7px;}
.header .nav{padding:0 20px;}
.header .nav .all_menu{float:right;}
.header .nav .all_menu img{margin-top:38px; max-width:35px;}
.header .nav .gnb{display:block; float:none; width:70%; height:100%; box-sizing:border-box; padding:20px; padding-top:0; position:fixed; top:0; right:-100%; -webkit-transition-duration:500ms; transition-duration:500ms; background:#0d0d0d; overflow-y:scroll; z-index:15;}
.header .nav .gnb.view{right:0;}
.header .nav .gnb > .close{float:right; margin-top:25px; max-width:35px;}
.header .nav .gnb > li{float:none; width:100%; height:auto; line-height:1; text-align:left; clear:both;}
.header .nav .gnb > li:hover > a{color:#828383;}
.header .nav .gnb > li > a{font-size:24px; color:#828383; height:55px; line-height:55px; padding:10px 0; border-bottom:2px solid #828282;}
.header .nav .gnb > li > ul{display:none; position:relative; top:0; border:0; background:none; padding:5% 0;}
.header .nav .gnb > li > ul > li > a{display:block; height:100%;}
.header .nav .gnb > li.guide > a{display:block;}
.header .nav .gnb > li.guide > ul{display:none; position:relative; top:0; left:0; border:0; background:none; padding:5% 0; overflow:hidden;}
.header .nav .gnb > li.guide > ul > li{float:none; line-height:1; margin-bottom:10.37%; margin-left:0;}
.header .nav .gnb > li.guide > ul > li:last-of-type{margin-bottom:0;}
.header .nav .gnb > li.guide > ul > li > a{display:block; padding-top:0; height:100%; font-size:16px; color:#e0e0e0;}
.header .nav .gnb > li.guide > ul > li > a:hover{font-weight:400; border-top:0;}
.header .nav .gnb > li.img{top:0px; display:none;}
.header .nav .gnb > li.img3{width:100%;}
.header .nav .gnb > li.img4{width:100%;}


.footer .foot{padding:25px 20px 75px; text-align:center;}
.footer .foot .f_logo{float:none; margin-bottom:2.413%;}
.footer .foot .f_txt{float:none; margin-left:0;}
.footer .foot .f_txt li strong{font-size:16px;}
.footer .foot .f_txt li p{display:block; margin-left:0; margin-bottom:10px;}

.sub_visual{position:relative; width:100%; height:auto;}
.sub_visual img{position:relative; top:0; left:0; width:100%; height:auto; margin-left:0;}
.sub_tab{padding:30px 0;}
.sub_tab ul li{width:50%; height:51px;}
.sub_tab ul li.three{width:33.333%;}
}



/**************** 레이아웃 변경  640 ****************/
@media all and (max-width:640px) {
.width1200{padding:0 3.125%;}
.header .nav .gnb > li > a{height:35px; line-height:35px; padding:0; font-size:3.75vw;}
.header .nav .gnb > li > ul{padding:5% 0; margin-bottom:10%;}
.header .nav .gnb > li > ul > li{margin-bottom:5%;}
.header .nav .gnb > li > ul > li > a{font-size:2.5vw;}
.header .nav .gnb > li.guide > ul > li{margin-bottom:5%;}
.header .nav .gnb > li.guide > ul > li > a{font-size:2.5vw;}

.sub_nav span{padding-right:15px; font-size:2vw;}
.sub_tab ul li{width:50%; height:41px; line-height:40px;}
.sub_tab ul li a{font-size:2.814vw;}

}