@charset "utf-8";

/*전체 메뉴 시 컨텐츠 쪽 스크롤 방지*/
html.noneScroll, body.noneScroll  {overflow: hidden;}

/*header*/
.h_inner{position: relative;width: 97%; height: 100%;max-width:1600px;margin: 0 auto;display: flex;justify-content: space-between;}
.header{width: 100vw;top: 0;left: 0;z-index: 999;position: fixed;}
.header .head {width: 100vw;height: 70px; box-sizing: border-box; transition: all .3s ease-in-out;}
/* logo */
.header .logo{margin-left: 10px;}
.header .logo img.logo_b { display: none; }
.header.head--not-top .logo img.logo_w, .head.on .logo img.logo_w { display: none; }
.header.head--not-top .logo img.logo_b, .head.on .logo img.logo_b { display: inline;}

/* .hd_top 헤더탑  */
.hd_top {position: relative;width: 100vw; height: 40px; background-color: rgba(0,0,0,.6); font-size:14px;}
.header.head--not-top .hd_top {background-color: rgba(0,0,0,1);}
.hd_top_btn{position: absolute;top: 50%;transform: translateY(-50%);right: 5%;}
.hd_top_btn a {display: inline-block; position: relative; margin: 0 15px; color: #fff; opacity: 0.85;}
.hd_top_btn a:hover {opacity: 1}
.hd_top_btn a.button{background:#ff4521; border-radius: 100px; padding:4px 14px;}
.mo_hd_top {position: relative;height: 70px; background-color: #0E1937;}
    /* lang pop */
.popup-container {visibility: hidden;opacity: 0;transition: all 0.3s ease-in-out;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(21, 17, 17, 0.61);display: flex;align-items: flex-start;}
.popup-content {background-color: #fefefe;margin:0 auto;padding: 50px;border: 1px solid #888;width: 100%; max-height: 80vh; overflow: hidden;}
.popup-content p{line-height: 20px;margin-bottom: -5px; font-weight: 500;}
.popup-content a.close{color: #aaaaaa;float: right;font-size: 40px;font-weight: bold; margin:-40px -20px;}
.popup-content a.close:hover{color:#333;}
.popup-content span:hover,
.popup-content span:focus {color: #000;text-decoration: none;cursor: pointer;}
.popup-container:target{visibility: visible;opacity: 1;}
.popup-container h3{font-size: 36px; font-weight: bold;}
.popup-container ul {display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;}
.popup-container ul li {width: 160px;text-align: left; padding-top: 30px;}
.popup-container ul li a p.active { color: #FF4521;}
.popup-container ul li a span {color: #616161;font-size: 8px;}
.popup-container ul li.active {color: #FF4521;}
.popup-container ul li.active a p {color: #FF4521;}


/* 전체 gnb 드랍다운:S */
.header .gnb_wrap {text-align: center;height: 100%; width: calc(100% - 70px);}
.header .gnb_wrap > .gnb {display: flex; justify-content: flex-start; height: 70px; line-height: 70px; margin-left: 80px;}
.header .gnb_wrap > .gnb > ul > li {display:inline-block; position: relative; padding:0 38px; vertical-align:top; box-sizing: border-box;}
.header .gnb_wrap > .gnb > ul > li > a{display: inline-block; width: 100%; height: 100%; line-height:70px; text-align: center; font-weight: 400; color: #fff; font-size: 18px;}
.header .gnb_wrap > .gnb > ul > li:hover ul{display: block;}
.header .gnb_wrap > .gnb > ul > li > ul {display: none; position: absolute;left: 50%; transform: translatex(-50%); background-color: #FF4521; padding: 25px 10px 30px; box-sizing: border-box; width: 200px;}
/* .header .gnb_wrap > .gnb > ul > li > ul:after {content: ""; width: 50px; height: 3px; background-color: #fff; position: absolute; display: block; bottom: 20px; right: -25px;} */
.header .gnb_wrap > .gnb > ul > li > ul li {padding: 15px 0; border-bottom: 1px dashed rgba(255,255,255,.5);}
.header .gnb_wrap > .gnb > ul > li > ul li:last-child {border-bottom: none; padding-bottom: 0;}
.header .gnb_wrap > .gnb > ul > li > ul li:first-child{padding-top: 0;}
.header .gnb_wrap > .gnb > ul ul > li > a { color:rgba(255,255,255,.8); transition:.3s ease; white-space: nowrap;}
.header .gnb_wrap > .gnb > ul ul > li:hover > a { font-weight: 500; color: rgba(255,255,255,1)}

 /* 호버시 gnb */
.header .head.on {background: #fff;}
.header .head.on .gnb_wrap > .gnb > ul > li > a, .header.fixed .head .gnb_wrap > .gnb > ul > li > a {color: #333;}

 /* 스크롤시 gnb */
.header.head--not-top .head {position: fixed;top: 40px;box-shadow: 0px 0px 10px rgba(0,0,0,.05); background:#fff;}
.header.head--not-top .gnb_wrap > .gnb > ul > li > a{color:#333;}


/* 전체 gnb 드랍다운:E */

/* ham_btn */
.header .ham_btn, .header .ham_btn span {display: inline-block; transition: all .3s ease-in-out; box-sizing: border-box;}
.header .ham_btn {display: none;margin-top: -18px;height: 90px;cursor: pointer; ;-webkit-transform: translateZ(0);}
.header .ham_btn p {position: relative;top: 50%;transform: translateY(-50%);width: 26px;height: 20px;margin: 10px;box-sizing: border-box;}
.header .ham_btn span {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff;}
.header .ham_btn span:nth-of-type(1) {top: 0;}
.header .ham_btn span:nth-of-type(2) {top: 9px;}
.header .ham_btn.active{background:transparent;z-index: 999;}
.header .ham_btn.active span:nth-of-type(1) {-webkit-transform : translateY(9px) rotate(-45deg); transform : translateY(9px) rotate(-45deg);}
.header .ham_btn.active span:nth-of-type(2) { -webkit-transform : translateY(0) rotate(45deg); transform : translateY(0) rotate(45deg); }
.header .ham_btn.active span{background:#33388e; z-index: 999;}


/* mobile menu */
.mobile_menu { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; bottom: 0; background-color: rgba(255, 255, 255, 1); padding: 0 5%; z-index: 2;box-sizing: border-box; background: #f9f9f9;}
.mobile_menu .logo { z-index: 1000; width: 150px; float: initial;  position: absolute; top: 0; left: 5%;}
.mobile_menu .logo img.logo_b {display: block !important;}
.mobile_menu .gnb { display: table; width: 100%; height: 100%; box-sizing: border-box; }
.mobile_menu .gnb > ul {width: 80%; ; height: 100vh; z-index: 999; display: table-cell; vertical-align: middle; text-align: center; position: relative;}
.mobile_menu .gnb > ul::after {display: block; content: ""; clear: both; height: 0;}
.mobile_menu .gnb > ul > li { width: 100%; display: flex; vertical-align: top; box-sizing: border-box; text-align: left; float: left; margin-bottom: 5vh; z-index: 2;}
.mobile_menu .gnb > ul > li:hover > a {color: #FF4521;}
.mobile_menu .gnb > ul > li.openUl > a {color: #FF4521;}
.mobile_menu .gnb > ul > li:last-child {margin-bottom: 0;}
.mobile_menu .gnb > ul > li > a {display:inline-block; font-weight: 500; font-size: 36px; letter-spacing: -1.5px; transition: .3s ease; word-break: keep-all; position: relative;}

.mobile_menu .depth2_area { display: none; position: absolute; top: 0; height: 100vh; left: 50%; width: 55%;}
.mobile_menu .depth2_area::before { position: absolute;display: block; content: ''; left: 0%; top: 0; bottom: 0; width: 1px; background-color: #ddd; opacity: 1; transition: opacity 0.2s ease-in-out;}
.mobile_menu li.openUl > .depth2_area { display: none; position: absolute; top: 0; height: 100vh; left: 50%; width: 50%;}
.mobile_menu .depth2_area > ul { margin-top: 20px; position: absolute; left: 0%; line-height: 5; top: 50%; width: 100%; transform: translateY(-50%); }
.mobile_menu .depth2_area > ul li {position: relative; display: block; width: 100%; box-sizing: border-box; left: 0; line-height:3;}

.mobile_menu .depth2_area > ul li:last-child {margin-right: 0}
.mobile_menu .depth2_area > ul a {position: relative; font-weight: 500; color:#1e2432; font-size: 24px; transition:.3s ease-in-out; display: inline-block; word-break: keep-all; padding-right: 5px; opacity: .6; margin-left: 40px; line-height: 1;}
.mobile_menu .depth2_area > ul li span { opacity: 0; position: absolute; border: 2px solid #5ac5f1; height: 26px; top: 50%; transform: translateY(-50%); left: 0px;}
.mobile_menu .depth2_area > ul li:hover span { opacity: 1;}
.mobile_menu .depth2_area > ul a:hover { opacity: 1;}


/* sub header */
#sub_header .logo img.logo_b { display: block;}
#sub_header .logo img.logo_w { display: none;}
#sub_header .head {box-shadow: 0px 0px 10px rgba(0,0,0,.05); background:#fff; border-bottom:1px solid #ddd;}
#sub_header .gnb_wrap > .gnb > ul > li > a{color:#333;}
#sub_header .ham_btn span {background-color: #333;}


@media screen and (max-width: 1200px){
    .header .ham_btn {display: block;}
    .header .gnb_wrap {display: none;}
    .header.head--not-top .ham_btn span{background:#333;}
}

@media screen and (max-width:1024px){
    .popup-content{padding:30px;}
    .popup-container h3{font-size:26px}
    .popup-content a.close{margin:-20px -10px}
    .popup-container ul li{width: 20%;}
}

@media screen and (max-width:768px){
    .mobile_menu .logo{width: 100px;}
    .mobile_menu .gnb > ul > li > a{font-size:28px;}
    .mobile_menu .depth2_area > ul a{font-size:20px; margin-left: 20px;}
}

@media screen and (max-width:500px){
    .hd_top{font-size:12px;}
    .hd_top_btn a{margin:0 5px;}
    .popup-container ul li{width: 30%;}

    .mobile_menu .gnb > ul > li > a{font-size:18px}
    .mobile_menu .depth2_area > ul a{font-size:16px;}
}