/* content__css */
#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; height:110px; border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
#header{background: transparent;  -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;
 height: 100%;}
#header .header-inner {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height:100%; z-index: 10;
margin:0 auto; max-width: 1920px; 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; margin-left: 50px;}
#hd_btns .menu_slider_btn {position: relative; width:96px; height: 100%; display: flex; flex-direction: column; justify-content:center; cursor: pointer; align-items:flex-end; transition: background-color .5s;}
#hd_btns .menu_slider_btn span {display: block;  width:100%; height: 3px; background: #fff; transition: all .5s ease;}
#hd_btns .menu_slider_btn span:nth-child(n+2) {margin-top: 6px;}

/* top_nav */
/* gnb */
#top_nav {height: 110px; overflow: hidden; transition: all .3s ease; display: flex; justify-content: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#top_nav .gnb {display: flex; height: 100%; padding-right: 4px;}
#top_nav .gnb > li {position: relative; width: 158px; flex: 0 0 158px; text-align: center; transition: width .3s ease, flex-basis .3s ease;}
#top_nav .gnb > li > a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 0 20px; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: -0.72px; white-space: nowrap; word-break: keep-all; transition: all .3s ease;}

/* hover */
#header:hover #top_nav {overflow: visible;}
#header:hover #top_nav .gnb > li {width: 177px; flex-basis: 177px;}
#header:hover .gnb {margin-right: 0;}
#header:hover .gnb > li > a {padding: 0 20px; color:#000; }
#header .gnb > li:hover > a {background-color: #ee7910; color:#fff;}
#header:hover #hd_btns .menu_slider_btn span:nth-child(1) {background-color: #1872aa;}
#header:hover #hd_btns .menu_slider_btn span:nth-child(2) {background-color: #ee7910;}

/* top_nav */
#top_nav .gnb > li + li .snb{border-left: 0;}
#top_nav .gnb .snb {width: 100%; position: relative; top: 0; padding: 34px 0 0; min-height:212px; transition: all .3s ease; border-top: 0; border-bottom: 0; transition: all .3s 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: .3s; left: 50%;  transform: translateX(-50%); z-index: 3;}
#top_nav .gnb .snb::after {content: ''; z-index: 2; display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.15); position: absolute; left: 0; top:0; opacity: 0;
transition: opacity .3s;}
#top_nav .gnb .snb li a {text-align: center; font-weight:500; width: 177px; font-size:18px;color:#fff; letter-spacing: -0.72px; transition: color .3s; padding: 0 25px; position: relative; line-height: 1.44;}
#top_nav .gnb .snb li a:hover {font-weight: 500;}
#top_nav .gnb .snb li a {display: inline-block;}
#top_nav .gnb .snb li a::after {position: absolute; bottom: -3px; left: 50%; width: 116px; height: 2px; background: #fff; content: ""; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .3s ease;}
#top_nav .gnb .snb li a:hover::after {transform: translateX(-50%) scaleX(1);}

/* li  */
#header_wrap .gnb > li:hover .snb{background-color: #ee7910;}
#top_nav .gnb .snb li + li {margin-top: 18px;}
#header .gnb > li:hover .snb::before {width: 106px; opacity: 1;}
#header .gnb > li:hover .snb::after {opacity: 1;}

/* snb_bg */
.snb_bg {display: none; position: relative; left:0; top:0; width:100%;  height:212px; z-index: -1;  background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);}

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


/* hidden_nav */
.hidden_nav {width:0; top:0; height:100vh; z-index: 999; position: fixed; text-align: left; transition: all .5s 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 */
.h_lm {flex:1; position: relative;}
.h_lm > a {display: block; width: 100%; font-size:30px; 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; font-family: "Poppins",'Pretendard', sans-serif;}
.h_lm > a::before {content: ''; display: block; width: 50px; height: 5px; background-color: #ee7910; margin: 0 0 20px;}
.h_gnb .h_lm:last-child {margin-right: 0;}

/* h_snb */
.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; font-family: "Poppins",'Pretendard', sans-serif;}
.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.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;}
.h_snb > li > a:hover::after {width:100%;}

.h_snb_3depth {display: none;}

/* sub */
#header_wrap.sub {border-bottom-color:#ddd; background-color: #fff;}
#header_wrap.sub #top_nav .gnb > li > a {color:#000 !important;}
#header_wrap.sub .snb_bg {background-color: #fff; border-bottom: 1px solid #ddd;}
#header_wrap.sub .snb_bg::before {background-color: #ddd;}
#header_wrap.sub #top_nav .gnb .snb li a {color:#808080;}
#header_wrap.sub #top_nav .gnb > li:hover a {color: #545454;}
#header_wrap.sub #hd_btns .menu_slider_btn span:nth-child(1) {background-color: #1872aa;}
#header_wrap.sub #hd_btns .menu_slider_btn span:nth-child(2) {background-color: #ee7910;}


#header_wrap:hover {border-bottom-color:#ddd; background-color: #fff;}
#header_wrap.main:hover #logo a img  {opacity: 0;}
#header_wrap.main:hover #logo a img + img {opacity: 1;}
#header_wrap.sub #logo a img  {opacity: 0;}
#header_wrap.sub #logo a img + img {opacity: 1;}

#header_wrap.sub #header .header-inner {position: relative; z-index: 2;}
#header_wrap.sub #top_nav {z-index: 3;}
#header_wrap.sub #top_nav .gnb > li {transition: width .3s ease, flex-basis .3s ease;}
#header_wrap.sub:hover #top_nav .gnb > li {width: 177px; flex-basis: 177px;}
#header_wrap.sub:hover #top_nav {overflow: visible;}

#header_wrap.sub .snb_bg {display: block; position: absolute; top: 110px; right: 0; left: 0; z-index: 1; height: 212px; border: 0; background: rgba(48,48,48,.78); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;}
#header_wrap.sub:hover .snb_bg {opacity: 1; visibility: visible;}

#header_wrap.sub:hover #top_nav .gnb > li > a {color: #000 !important;}
#header_wrap.sub:hover #top_nav .gnb > li:hover > a {background-color: #ee7910; color: #fff !important;}
#header_wrap.sub:hover #top_nav .gnb .snb li a {color: #fff;}
#header_wrap.sub .gnb > li:hover .snb {background-color: #ee7910;}

#header_wrap.sub:hover #hd_btns .menu_slider_btn span:nth-child(1) {background-color: #1872aa;}
#header_wrap.sub:hover #hd_btns .menu_slider_btn span:nth-child(2) {background-color: #ee7910;}


@media screen and (max-width: 1700px) {
    #top_nav {margin: 0;}
    #top_nav .gnb .snb li a {font-size: 16px;}

    .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 .gnb > li > a{font-size: 20px;}
    #top_nav .gnb .snb li a {letter-spacing: -.6px;}
    #header:hover .gnb > li > a {padding: 0 60px;}

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

}

@media screen and (max-width: 1279px) {
    #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_lm > a span {min-height: 54px;}
    .h_snb > li {margin-bottom: 20px;padding-right: 15px;}
    .h_snb > li > a {font-size: 16px;}
    .hidden_nav > div {padding:70px 50px 50px;}
}