/* Content CSS */
#header_wrap {position:absolute; left:0; top:0; width:100%; height:120px; z-index:57; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease;}
#header {position:relative; height:100%; width:100%; max-width:100%; z-index:6; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease;}
#logo {position:relative; display:flex; justify-content:center; align-items:flex-start; z-index:2;}
#logo a {display:block; width:62px; height:62px; background:url("../img/logo.png") 50% / contain no-repeat; transition:all .3s ease;}
#header_wrap:hover #logo a {background-image:url("../img/logo_b.png");}
#header .header-inner {border-bottom:1px solid rgba(255,255,255,.25); position:relative; display:flex; justify-content:space-between; align-items:center; max-width:1720px; height:100%; margin:0 auto; z-index:10; padding:0 0 0 50px;}
#header_wrap:hover {background-color:#fff;}
#header_wrap:hover #top_nav .gnb > li > a {color:#000;}
#header_wrap:hover #top_nav .gnb > li:hover > a {color:#fff;}
#header_wrap:hover .menu_slider_btn span:nth-child(1),
#header_wrap:hover .menu_slider_btn span:nth-child(2) {background-color:#000;}

/* Sub Header */
#header_wrap.sub {background:#fff;}
#header_wrap.sub #logo a {background-image:url("../img/logo_b.png");}
#header_wrap.sub .header-inner {border-bottom:1px solid rgba(0,0,0,.08);}
#header_wrap.sub #top_nav .gnb > li > a {color:#000;}
#header_wrap.sub #top_nav .gnb > li:hover > a,
#header_wrap.sub #top_nav .gnb > li.active > a {color:#fff;}
#header_wrap.sub .menu_slider_btn span,
#header_wrap.sub .menu_slider_btn span:nth-child(2) {background:#000;}
#header_wrap.sub {position:relative;}

/* top_nav gnb */
#top_nav {display:flex; height:100%;}
#top_nav .gnb {list-style:none; display:flex; justify-content:flex-end; padding:0; height:100%;}
#top_nav .gnb > li {position:relative; display:block; width:auto; text-align:center; height:100%;}
#top_nav .gnb > li > a {display:flex; align-items:center; font-size:20px; height:100%; color:#fff; font-weight:500; word-break:keep-all; transition:all .3s; justify-content:center; padding:0 36px; min-width:132px; letter-spacing:-.82px;}
#top_nav .gnb > li > a::before {content:""; position:absolute; left:2px; right:2px; top:20px; bottom:20px; background-color:#002446; border-radius:5px; opacity:0; transition:all .3s; z-index:-1;}
#header_wrap:hover #top_nav .gnb > li > a {color:#000;}
#header_wrap:hover #top_nav .gnb > li:hover > a {color:#fff;}
#header_wrap:hover #top_nav .gnb > li.active > a {color:#fff;}
#top_nav .gnb > li:hover > a::before,
#top_nav .gnb > li.active > a::before {opacity:1;}
#top_nav .gnb > li > a:hover::before,
#top_nav .gnb > li.active > a::before {opacity:1;}
#top_nav .gnb > li.active > a {color:#fff;}

/* child_menu - snb */
#top_nav .gnb .snb {display:none; position:relative; z-index:2; text-align:center; list-style:none; width:100%; box-sizing:border-box; top:1px; border-radius:0 0 5px 5px; overflow:hidden;}
#top_nav .gnb .snb li {box-sizing:border-box; background-color:rgba(0,0,0,.6);}
#top_nav .gnb .snb li a {display:block; text-align:center; font-weight:400; padding:22px 0; word-break:keep-all; font-size:18px; color:rgba(255,255,255,.5); transition:all .3s ease; border-bottom:1px solid rgba(229,228,236,.2);}
#top_nav .gnb .snb li:last-child a {border-bottom:0;}
#top_nav .gnb .snb li a:hover {color:#fff; background-color:rgba(0,0,0,.7);}

#h_right_btn {display:flex; align-items:center; margin-left:60px;}

/* hidden_nav */
#header_wrap .menu_slider_btn {position:relative; cursor:pointer; width:92px; height:10px; display:flex; flex-wrap:wrap;}
#header_wrap .menu_slider_btn span {display:block; width:100%; height:3px; background:#fff; transition:all .3s ease; opacity:.9;}
#header_wrap .menu_slider_btn span:nth-child(n+2) {margin-top:4px; background:#fff; opacity:.9;}

#header_wrap .hidden_nav_box {display:none; position:fixed; top:0; bottom:0; right:0; left:0; background:rgba(0,0,0,.7); z-index:9999;}
#header_wrap .hidden_nav {position:fixed; top:0; right:0; width:100%; height:100%; padding:100px; background:#fff; z-index:10000; transition:all .8s cubic-bezier(0.215,0.610,0.355,1.000); overflow-y:auto; transform:translateX(100%);}

/* 열린 상태 */
#header_wrap .hidden_nav.open {transform:translateX(0);}
.hidden_nav::-webkit-scrollbar {width:6px;}
.hidden_nav::-webkit-scrollbar-thumb {background-color:#d6d6d6; border-radius:10px; height:15px;}
.hidden_nav::-webkit-scrollbar-track {background-color:rgba(166,185,211,.2);}

#header_wrap .h_gnb {display:flex; width:100%; height:100%;}
#header_wrap .h_lm {position:relative; flex:1;}
#header_wrap .h_lm::before {content:''; display:block; width:40px; height:4px; margin:0 0 20px; background-color:#1e1e1e; top:-14px; left:0;}
#header_wrap .h_lm > a {display:block; position:relative; font-size:30px; font-weight:700; color:rgba(0,0,0,1) !important; transition:all .3s ease; margin-bottom:50px; padding-bottom:50px; width:100%; border-bottom:1px solid #ddd;}
#header_wrap .h_lm:last-child {border-bottom:0; padding-bottom:0; margin-bottom:0;}

#header_wrap .h_snb li:not(:last-child) {margin-bottom:30px;}
.h_snb > li > a {font-size:22px; font-weight:500; position:relative; color:#000; transition:color .3s ease; max-width:300px; line-height:1.5; display:inline;}
.h_snb > li > a::after {position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); content:''; width:0px; height:1px; background-color:#000; -webkit-transition:all .4s; -moz-transition:all .4s; -o-transition:all .4s; -ms-transition:all .4s; transition:all .4s;}
.h_snb > li > a:hover::after {width:100%;}

#header_wrap .menu_slider_btn2 {position:absolute; right:0; top:0; cursor:pointer; width:60px; height:60px; display:flex; flex-direction:column; justify-content:center; z-index:2; align-items:center; background-color:#1e1e1e;}
#header_wrap .menu_slider_btn2 span {display:block; width:25px; height:2px; border-radius:3px; background-color:#fff;}
#header_wrap .menu_slider_btn2 span:nth-child(1) {margin:0; transform:rotate(45deg);}
#header_wrap .menu_slider_btn2 span:nth-child(2) {display:none; transform:rotate(45deg);}
#header_wrap .menu_slider_btn2 span:nth-child(3) {margin-top:-2px; transform:rotate(135deg);}