#header_wrap {position:absolute; left:0; top:0; width:100%; z-index:57;   -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease; border-bottom: 1px solid rgba(255,255,255,.0);  }
#header{background: transparent;  -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease; }
#header .header-inner {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height:100%; z-index: 10;
padding:0 0 0 50px; margin:0 0 0 auto; max-width: 1870px;}
/* #header:hover,
.scrolled #header { border-bottom-color: #ddd;} */
/* #header_wrap.main {position: fixed; } */
@media screen and (min-width: 1921px) {
    #header_wrap .header-inner { max-width:1870px; margin:0 auto; z-index: 10; padding:0 50px; }
}
/* 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;} */

/* hd_btns */
#hd_btns{display: flex; align-items: center; height: 90px;}
#hd_btns .menu_slider_btn { position: relative; width:90px; height: 100%; display: flex; flex-direction: column; justify-content:center; cursor: pointer; align-items:center;
background-color: #29a7e1; transition: background-color .3s; }
#hd_btns .menu_slider_btn span { display: block;  width:35px; height: 2px; background: #fff; transition: all .3s ease; }
#hd_btns .menu_slider_btn span:nth-child(n+2) {margin-top: 7px; }
#hd_btns .menu_slider_btn:hover {background-color: #016fbf; }


/* top_nav */
/* gnb */
#top_nav{height: 90px; overflow: hidden; transition: all .5s ease; margin-right:50px;}
#top_nav .gnb{display: flex; height: 100%; }
#top_nav .gnb > li {position: relative; text-align: center; max-width: 185px;}
#top_nav .gnb > li > a{ display: flex; justify-content: center; align-items: center; font-size:21px; color:#fff; font-weight:400; word-break: keep-all; height: 100%;
 transition: all .5s ease; white-space: nowrap; padding: 0 50px; }
/* #top_nav .gnb > li:hover > a { font-weight: 700;} */
/* #top_nav .gnb > li:last-child{display: none;} */
#header:hover #top_nav{overflow: visible;}
#header:hover .gnb {margin-right: 0;}
#header:hover .gnb > li > a {padding: 0 60px;}
#header .gnb > li:hover > a {background-color: #016fbf;}
/*snb  */
#top_nav .gnb > li + li .snb{border-left: 0;}
/* #top_nav .gnb > li:hover .snb::before{opacity: 1;} */
#top_nav .gnb .snb {width: 100%; position: relative; top: 0; padding: 40px 0 0; min-height:300px; transition: all .5s ease; border-top: 0; border-bottom: 0; transition: all .5s ease; left: 50%; transform: translateX(-50%);}
#top_nav .gnb .snb::before{content: ''; display: block; width: 0; height: 3px; z-index: 1; background-color: #fff; position: absolute; top:-1px;  opacity: 1; transition: .5s;
left: 50%;  transform: translateX(-50%);}
#top_nav .gnb .snb li a {display: block; text-align: center; font-weight:400; letter-spacing: -.5px;  font-size:16px; line-height: 1.56 ; color: rgba(255, 255, 255, .5); transition: color .3s; padding: 0 10px;}
/* #top_nav .gnb .snb li a:hover {color: rgba(254, 241, 90, .7) !important; } */
#header_wrap .gnb > li:hover .snb{background-color: #016fbf;}
#header_wrap .gnb > li:hover a {color: rgba(255, 255, 255, 1);}
#top_nav .gnb .snb li + li {margin-top: 13px;}
/* #header:hover .snb_bg{width: 100%; opacity: 1;} */
#header .gnb > li:hover .snb::before { width: 130px; opacity: 1;}
.snb_bg {display: none; position: absolute; left:0; top:0; width:100%;  height:390px; z-index: -1;  background-color: rgba(0,0,0,.63); backdrop-filter: blur(10px);}
.snb_bg::before {content: ''; display: block; width: 100%; height: 1px; background: rgba(255,255,255,.25); position: absolute; left: 0; top:90px; }

/* .scrolled #header_wrap.main .snb_bg {background-color: #000; } */

/* 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: #29a7e1; font-size: 30px; z-index: 1000;  }
#menu_close_btn:hover {background: #016fbf; color:#fff;}


.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::before {content: ''; display: block; height: 100%; width: 100%; z-index: -1; pointer-events: none; position: absolute; right: 0; bottom: 0; opacity: .5;
background:url("../img/hidden_bg.png") 100% 100% no-repeat; background-size: auto 100%; } */
.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: #29a7e1; margin: 0 0 20px; }

.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: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 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; } */

#header_wrap.sub {border-bottom-color:rgba(255,255,255,.25);  }

 @media screen and (min-width: 1025px) {
    #header_wrap:hover .snb_bg::before { border-bottom-color: rgba(255,255,255,.25); }
    #header_wrap:hover #top_nav .gnb > li:hover > a {color:#fff; }

    /* #header_wrap:hover #hd_btns .menu_slider_btn span {background-color: #000; }
    #header_wrap:hover #logo a img  {opacity: 0;}
    #header_wrap:hover #logo a img + img {opacity: 1; } */
    /* #header_wrap:hover #top_nav .gnb > li:hover > a {color:#231f20; } */
 }

@media screen and (max-width: 1700px) {
    #top_nav .gnb > li {max-width:180px;}
    #header:hover .gnb > li > a{padding: 0 70px; }
    #top_nav .gnb .snb li a {font-size: 15px;}

    .h_lm > a { font-size:30px; }
    .h_snb > li { margin-bottom: 28px; }
    .h_snb > li > a { font-size: 20px; }

    .hidden_nav > div {padding:70px;}
}

@media screen and (max-width: 1500px) {
    #top_nav {margin: 0;}
    #top_nav .gnb > li > a{padding: 0 40px; font-size: 18px;}
    #top_nav .gnb > li {max-width: 150px;}
    #top_nav .gnb .snb li a { letter-spacing: -.6px;}
    #header:hover .gnb > li > a{padding: 0 60px; }

    #header .gnb > li:hover .snb::before { width: 120px; opacity: 1;}

}

@media screen and (max-width: 1280px) {
    #header .header-inner{padding: 0 0 0 30px;}
    #logo a {width:150px; }

    #top_nav .gnb > li {max-width: 150px; min-width: 130px;}
    #top_nav .gnb > li > a{font-size: 17px; padding: 0 25px;}
    #header:hover .gnb > li > a{padding: 0 30px; }
    #top_nav .gnb .snb{min-height: 280px;  padding: 30px 0 0;}
    #top_nav .gnb .snb li a{font-size: 14px;}
    .snb_bg {height: 370px;}


    #menu_close_btn {width: 50px; height: 50px; font-size: 25px;}
    .h_lm > a { font-size:24px; margin-bottom: 40px; padding-bottom: 40px; }
    .h_lm > a::before {width: 30px; }
    .h_snb > li { margin-bottom: 20px;padding-right: 15px; }
    .h_snb > li > a { font-size: 16px; }
    .hidden_nav > div {padding:70px 50px 50px; }


}

 @media screen and (max-width: 1024px) {
    #top_nav { display: none; }
    #hd_btns { display: none; }
    #logo a {width: auto; }
    #logo a img {width: auto; max-height: 30px; }


    #header .header-inner { justify-content: center; padding: 0 20px; }

    #header_wrap {position: fixed; height: 60px; }
    #header {height: 60px;}

    /* scroll */
    #header_wrap.sub {  border-bottom-color: rgba(255,255,255,.25);}
    .scrolled #header_wrap {background-color: rgba(0,0,0,0.9); border-bottom-color: rgba(255,255,255,.25);}
    /* .scrolled #logo a img {opacity: 0;}
    .scrolled #logo a img + img {opacity: 1;} */
     #header_wrap .snb_bg{display: none !important;}
     #header_wrap .hidden_nav{display: none !important;}

}