/*Content CSS*/
#header_wrap {position:absolute; left:0; top:0; width:100%; height:95px; 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; background-color: transparent;  border-bottom:1px solid rgba(255,255,255,.2);}
#header { position: relative; display: flex; justify-content: space-between; 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; }
#header .header_inner { position: relative; display: flex; justify-content: space-between; align-items: center; height:100%; margin:0 auto; z-index: 10; padding:0 50px; width:100%; }

/* logo */
#logo {flex-shrink: 0;}
#logo a {display: flex; align-items: center; justify-content: center; position: relative;}
#logo a img {transition: opacity .3s; }
#logo a img + img {opacity: 0; position: absolute; left:0; top:0; z-index: 2;}

/* top_nav */
#top_nav { display: flex; align-items: center; height: 100%; border-color: #ddd;}
#top_nav .gnb { list-style:none; display: flex; justify-content: flex-end; padding:0; height: 100%;}
#top_nav .gnb > li { display:block; width:auto; text-align:center; height: 100%;}
#top_nav .gnb > li { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; height:100%; }
#top_nav .gnb > li > a { display: flex; align-items: center; font-size:22px; height: 100%; color:#fff; font-weight: 600; transition: all .3s; white-space: nowrap; position: relative; padding: 0 37.5px;}
#top_nav .gnb > li:nth-child(1) .full_menu{display: none !important;}

/* full_menu */
#top_nav .full_menu {display: none; width: 100%; position: absolute; left:0; top:100%; overflow-x: auto; text-align: left; box-shadow: 0px 5px 9px 1px rgba(0, 0, 0, 0.1);}
#top_nav .full_menu::-webkit-scrollbar {width: 8px;}
#top_nav .full_menu::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 10px; height: 15px; }
#top_nav .full_menu::-webkit-scrollbar-track {background-color: #eee;}
#top_nav .hd_inner{width: 100%; height: 100%; margin: 0 auto; display: flex; align-items: stretch; }

#top_nav .gnb .snb { text-align: left; position: relative; z-index: 2; display: flex;  flex-wrap: wrap; max-width: 90%; gap: 50px 44px;}
#top_nav .gnb .snb > li { position: relative;  display: block; width: 165px;}
#top_nav .gnb .snb > li.long { width: initial;}
#top_nav .gnb .snb > li.long a::after{margin-left: 30px;}
#top_nav .gnb .snb > li > a { display: flex; align-items: center; font-weight: 500; font-size:17px; letter-spacing: -.34px; color:#333; line-height: 1.3; transition: all .3s; width: 100%;
padding-bottom: 8px; padding-right: 11px; border-bottom: 1px solid #ddd; justify-content: space-between;}
#top_nav .gnb .snb > li > a::after {flex-shrink: 0; content: ''; display: block; width: 6px; height: 9px; transition:all .3s; background:url("../img/menu.png") 50%/contain no-repeat;}
#top_nav .gnb .snb > li > a:hover {color: #16346d; border-bottom-color: #16346d; font-weight: 700;}
#top_nav .gnb .snb > li > a:hover::after { background-image:url("../img/menu_hv.png") }
#top_nav .gnb > li > a:hover{color: #16346d; font-weight: 700; }

#top_nav .hd_title {flex-shrink: 0; width: 45%; max-width: 850px; line-height: 1.4; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 53px 50px; background-color: #16346d;}
#top_nav .hd_title h2 {font-size: 35px; font-weight: 500; letter-spacing: -.7px; color:#fff;}
#top_nav .fm_wrap {padding: 50px 50px 50px 65px; flex-grow: 1; background-color: #f7f7f7; border-top: solid 1px #ddd; display: flex; align-items: center;}

/* menu_slider_btn */
#menu_slider_btn { position: relative; cursor: pointer; display: flex; align-items: flex-end;; justify-content: flex-end; flex-direction: column; width: 30px; margin-left: 37.5px; transition: .3s;}
#menu_slider_btn span{display: block; width: 100%; height: 2px;  background-color: #fff; transition: .3s;}
#menu_slider_btn span:nth-child(1){width: 50%; }
#menu_slider_btn span:nth-child(n+2){margin-top: 4px;}

/* hidden_nav */
#menu_close_btn {position: absolute; right: 0; top:0; width: 60px; height: 60px; transition: all .3s; display: flex; align-items: center; justify-content: center; cursor: pointer; color:#fff; background: #003875; font-size: 30px; z-index: 1000;  }

.hidden_nav { width:0; top:0; height:100vh; z-index: 999; position: fixed; text-align: left; transition: all .8s cubic-bezier(0.215, 0.610, 0.355, 1.000);   overflow: hidden; background: #fff;  }
.hidden_nav.active { left:0; width: 100%; }
.hidden_nav > div { position: absolute; width: 100%; left:50%; transform:translateX(-50%); top:0; height:100%; display: none; padding: 100px;   overflow-y: auto;}

.hidden_nav .hidden_gnb { width: 100%; }
.h_gnb { display: flex; height: 100%; width: 100%; }
.h_lm { position: relative; }
.h_gnb .h_lm:last-child {margin-right: 0;}

.h_lm {flex:1; }
.h_lm > a { display: block; width: 100%; font-size:35px; font-weight: bold; color:#000 !important; white-space: nowrap; flex-shrink: 0; margin-bottom: 50px;
padding-bottom: 50px; border-bottom: 1px solid #ddd; position: relative; line-height: 1.1;}
.h_lm > a::before {content: ''; display: block; width: 50px; height: 5px; background-color: #003875; margin: 0 0 20px; }
.h_lm > a span { white-space: pre-wrap;word-break: break-all; overflow-wrap: break-word; width:10ch; display: block; min-height:66px;}

.h_snb { position:relative; z-index: 1; }
.h_snb > li { margin-bottom:40px; padding-right: 30px;  }
.h_snb > li:last-child { margin-bottom: 0; }
.h_snb > li > a { font-size:20px; 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 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s;}
.h_snb > li > a:hover::after {width:100%;}

.h_snb_3depth {display: none;}
/* .h_snb_3depth > li + li {margin-top:10px; }
.h_snb_3depth > li > a {font-size: 15px; color:rgba(255,255,255,.7); position: relative; padding-left: 10px; }
.h_snb_3depth > li > a::before {content: '-'; display: block; position: absolute; left: 0; top:0; } */

/* hover */
#header_wrap:hover{background-color: #fff; }
#header_wrap:hover #logo a img{opacity: 0;}
#header_wrap:hover #logo a img + img{opacity: 1;}
#header_wrap:hover #menu_slider_btn span{background-color: #16346d;}
#header_wrap:hover #top_nav .gnb > li > a{color: #000; padding: 0 51px;}
#header_wrap:hover #top_nav .gnb > li > a:hover{color: #16346d; font-weight: 700; }
#header_wrap:hover #menu_slider_btn{margin-left: 50px;}

#header_wrap.sub{background-color: #fff;}
#header_wrap.sub #logo a img{opacity: 0;}
#header_wrap.sub #logo a img + img{opacity: 1;}
#header_wrap.sub #menu_slider_btn span{background-color: #16346d;}
#header_wrap.sub #top_nav .gnb > li > a{color: #000;}
