#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;}
#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%; margin:0 auto; z-index:10; padding:0 50px; margin:0 auto; max-width:1860px;}

#header_wrap.sub #header .header-inner {border-bottom:1px solid rgba(255,255,255,0.2);}

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

/* hd_btns */
#hd_btns {display:flex; align-items:center;}
#hd_btns .menu_slider_btn {position:relative; width:23px; height:16px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; align-items:flex-end;}
#hd_btns .menu_slider_btn span {display:block; width:100%; height:2px; background:#fff; transition:all .3s ease;}

/* top_nav */
#top_nav {height:100px; overflow:hidden; transition:all .5s ease; margin-right:120px;}
#top_nav .gnb {display:flex; height:100%;}
#top_nav .gnb > li {position:relative; text-align:center;}
#top_nav .gnb > li > a {display:flex; justify-content:center; align-items:center; font-size:21px; color:#fff; font-weight:700; word-break:keep-all; height:100%; transition:all .5s ease; white-space:nowrap; padding:0 37px;}
#header:hover #top_nav {overflow:visible;}
#header:hover .gnb {margin-right:0;}

/* snb */
#top_nav .gnb > li + li .snb {border-left:0;}
#top_nav .gnb .snb {width:100%; position:relative; top:0; padding:40px 0 0; min-height:205px; 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; font-size:17px; line-height:1.3; color:rgba(255,255,255,1); transition:.3s; padding:0 10px;}
#top_nav .gnb .snb li a:hover {font-weight:700;}
#top_nav .gnb .snb li + li {margin-top:30px;}
.snb_bg {display:block; position:absolute; left:50%; transform:translateX(-50%); right:0; top:100px; height:205px; width:0; z-index:-1; opacity:0; transition:opacity .5s; background-color:rgba(0,0,0,.6); backdrop-filter:blur(5px);}
#header:hover .snb_bg {width:100%; opacity:1; background-color:rgba(0,0,0,.6);}

/* menu_slider_btn2 */
#header_wrap .menu_slider_btn2 {display:block; position:absolute; right:30px; top:40px; cursor:pointer; transform:translate(-50%, -50%); width:35px; height:35px; display:flex; flex-direction:column; justify-content:center; z-index:2; align-items:center;}
#header_wrap .menu_slider_btn2 span {display:block; width:25px; height:2px; border-radius:3px; background:#e90818;}
#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);}

/* hidden_nav */
.hidden_nav_box {width:100%; height:100vh; background:rgba(0,0,0,0.7); position:fixed; top:0; left:0; z-index:9999; position:fixed; display:none;}
.hidden_nav {text-align:center; width:450px; height:100vh; position:fixed; top:0; right:-450px; background:#fbfbfb; z-index:10000; position:fixed; text-align:left; padding:40px 50px 0 50px;}
.hidden_nav .hidden_gnb {width:100%;}

/* h_lm */
.h_lm {margin-bottom:20px; padding-bottom:20px; border-bottom:solid 1px #ddd; position:relative;}
.h_lm > a {display:block; font-size:20px; font-weight:700; color:rgba(0,0,0,.7) !important; transition:all .3s ease; max-width:220px; position:relative; text-transform:uppercase;}
.h_lm:hover > a, .h_lm > a.active {color:rgba(0,0,0,1) !important;}

/* h_lnb */
.h_lnb {display:block; margin-top:20px;}
.h_lnb li a {font-size:17px; font-weight:400; line-height:1.5; color:#666; transition:color .3s;}
.h_lnb li + li {margin-top:5px;}
.h_lnb li:hover > a {color:#e90818;}

@media screen and (min-width: 1025px) {
    #header_wrap:hover {background-color: #fff; }
    #header_wrap:hover #header { border-bottom-color: #ddd;}
    #header_wrap:hover #header{ border-bottom-color: rgba(255,255,255,.15); }
    #header_wrap:hover #top_nav .gnb > li > a {color:#000; }
    #header_wrap:hover #top_nav .gnb > li:hover > a {color:#e90818; }
    #header_wrap:hover #hd_btns .menu_slider_btn span {background-color: #e90818; }
    #header_wrap:hover #logo a img  {opacity: 0;}
    #header_wrap:hover #logo a img + img {opacity: 1; }
}

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

@media screen and (max-width: 1500px) {
   #top_nav {margin: 0;}
   #header .header-inner {padding: 0 20px; }
   #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; }
}

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

   #hd_btns .menu_slider_btn {width:30px; height: 18px;}
   #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: 300px;  padding: 30px 0 0;}
   #top_nav .gnb .snb li a{font-size: 14px;}
   .snb_bg {height: 300px;}
}

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

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

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

   /* scroll */
   .scrolled #header {background-color: #fff; border-bottom-color: #ddd;}
   .scrolled #logo a img {opacity: 0;}
   .scrolled #logo a img + img {opacity: 1;}
    #header_wrap .snb_bg{display: none !important;}

}