#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;
border-bottom: 1px solid transparent;}
#header .header-inner {position: fixed; display: flex; justify-content: space-between; align-items: center; width: 100%; z-index: 59;
padding: 0 105px; margin: 0 auto; max-width: 1920px; border-bottom: 1px solid rgba(255,255,255,.15); transition: .3s}

/* logo */
#logo {flex-shrink: 0; padding-right: 10px;}
#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:50%; top:50%; transform: translate(-50%, -50%); z-index: 2;}

/* hd_btns */
#hd_btns{display: flex; align-items: center;}
#hd_btns .menu_slider_btn { position: relative; width:34px; height: 22px; 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; }
#hd_btns .menu_slider_btn span:last-child {width:20px; }
#header_wrap:hover #hd_btns .menu_slider_btn span:last-child {background-color: #09883a}
#hd_right {display: flex; align-items: center; height: 100%; }

/* lang */
#hd_lang {height: 30px; width: 130px; position: relative; margin: 0 40px 0 20px;}
#hd_lang .lang_group {display: flex; align-items: center; margin-left: 13px;}
#hd_lang button {display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 300; color:#fff; cursor: pointer;  width: 100%; height: 100%;  position: relative; z-index: 2; background-color: transparent; transition: all .3s; border-radius: 15px; border:1px solid rgba(204,204,204,.5); }
#hd_lang button span {display: block; margin:0 9px 0 6px;  font-size: 12px;}
#hd_lang button i {display: block; transition: background-image .3s; }
#hd_lang button .xi-globus {font-size: 15px;}
#hd_lang button .lang_tri {width: 6px; height: 5px; background:url("../img/lang_btn.png") 50%/contain no-repeat; margin-right: 12px;}
#hd_lang ul {display: none; position: absolute; left: 0; top:100%; width: 100%; background: rgba(0,0,0,.5);  text-align: center; }
#hd_lang li a {font-size: 13px; font-weight: 500; color:rgba(255,255,255,.6); text-transform: uppercase; transition: all .3s ease; width: 100%;
padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.4); display: block; }
#hd_lang li a:hover {color:#fff;}
#hd_lang li:last-child a {border-bottom: 0;}
#header_wrap:hover #hd_lang .lang_group {color: #000; transition: .3s}
#header_wrap:hover #hd_lang button .lang_tri {background:url("../img/lang_btn_bk.png") 50%/contain no-repeat; transition: .3s}
#header_wrap:hover #hd_lang button {border: 1px solid #ccc; transition: .3s}

/* top_nav */
/* gnb */
#top_nav{height: 90px; overflow: hidden; transition: all .5s ease; margin-left: auto;}
#top_nav .gnb{display: flex; height: 100%; }
#top_nav .gnb > li {position: relative; text-align: center; max-width: 225px;}
#top_nav .gnb > li > a{ display: flex; justify-content: center; align-items: center; font-size:20px; color:#fff; font-weight:400; word-break: keep-all; height: 100%;
 transition: all .5s ease; white-space: nowrap; padding: 0 35px; }
#header #top_nav:hover {overflow: visible;}
#header #top_nav:hover .gnb > li > a {padding: 0 60px;}
#header .gnb > li:hover > a {background-color: #09883a;}
/*snb  */
#top_nav .gnb > li + li .snb{border-left: 0;}
#top_nav .gnb .snb {width: 100%; position: relative; top: 0; padding: 33px 0; min-height: 155px; 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 {border: 1px solid rgba(221, 221, 221, .2); border-top: none; border-bottom: none;}
#top_nav .gnb .snb li a {display: block; text-align: center; font-weight: 300; letter-spacing: -.5px;  font-size:16px; line-height: 1.3 ; color: rgba(255, 255, 255, .8); transition: color .3s; padding: 0 10px;}
#top_nav .gnb .snb li a:hover {color: #fff; }
#header_wrap .gnb > li:hover .snb{background-color: #09883a;}
#top_nav .gnb .snb li + li {margin-top: 12px;}
.snb_bg {display: block; position: absolute; left:50%; transform: translateX(-50%);right:5px; top:90px; height:155px; width: 0; z-index: -1; opacity: 0; transition:  opacity .5s;
background-color: rgba(0,0,0,.7); backdrop-filter: blur(10px);}
#header #top_nav:hover .snb_bg{width: 100%; opacity: 1;}
#header .gnb > li:hover .snb::before { width: 130px; opacity: 1;}

/* hidden_nav */
#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:#09883a; }
#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_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 {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,.5) !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_lm:first-child {margin-top: 25px;}

.h_lnb{display: block; margin-top: 10px;}
.h_lnb li a{font-size: 16px; font-weight: 400; color: #777; transition: color .3s; }
.h_lnb li + li{margin-top: 10px;}
.h_lnb li:first-child {margin-top: 20px;}
.h_lnb li:hover > a{color: #09883a;}

 @media screen and (min-width: 1025px) {
#header_wrap:hover .header-inner  {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:#fff; }
#header_wrap:hover #hd_btns .menu_slider_btn span {background-color: #000; }

.scrolled #header_wrap .header-inner {background-color: #fff; border-bottom: 1px solid #ddd;}
.scrolled #header_wrap #header { border-bottom-color: #ddd;}
/* .scrolled #header_wrap #header{ border-bottom-color: rgba(255,255,255,.15); } */
.scrolled #header_wrap #top_nav .gnb > li > a {color:#000; }
/* .scrolled #header_wrap #top_nav .gnb > li > a {color:#fff; } */
.scrolled #header_wrap #hd_btns .menu_slider_btn span {background-color: #000; }
.scrolled #header_wrap #hd_lang .lang_group {color: #000;}
.scrolled #header_wrap #hd_lang button .lang_tri {background:url("../img/lang_btn_bk.png") 50%/contain no-repeat;}
.scrolled #header_wrap #hd_lang button {border: 1px solid #ccc;}
.scrolled #header_wrap #hd_btns .menu_slider_btn span:last-child {background-color: #09883a}
 }

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

@media screen and (max-width: 1500px) {
    #logo a {width: 200px; }
    #header .header-inner {padding: 0 30px; }
    #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 #top_nav:hover .gnb > li > a{padding: 0 60px; }
    #header .gnb > li:hover .snb::before { width: 120px; opacity: 1;}
    #hd_lang {margin: 0 30px 0 20px;}
    #header .gnb > li:hover .snb::before { width: 100px;}


}

@media screen and (max-width: 1400px) {
    #header .gnb > li:hover .snb::before { width: 90px;}
}

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

    #hd_btns .menu_slider_btn {width:30px; height: 18px;}
    #top_nav .gnb > li {max-width: 150px; min-width: 125px;}
    #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: 140px;  padding: 30px 0 0;}
    #top_nav .gnb .snb li a{font-size: 14px;}
    .snb_bg {height: 140px;}
    #header #top_nav:hover .gnb > li > a {padding: 0 30px;}
    #hd_lang {height: 30px; width: 100px; position: relative; margin: 0 20px 0 20px;}
    #hd_lang button .xi-globus {font-size: 13px;}
    #hd_lang button {font-size: 12px;}
    #header .gnb > li:hover .snb::before { width: 80px;}
}

@media screen and (max-width: 1100px) {
    #header #top_nav:hover .gnb > li > a {padding: 0 20px;}
}

 @media screen and (max-width: 1024px) {
    #top_nav {margin: 0}
    #hd_lang {display: none}
    #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 .header-inner {position: relative; height: 100%}

    #header_wrap {position: fixed; height: 60px;}
    #header {height: 60px;}
    #header {background-color: #fff; border-bottom-color: #ddd;}

    /* scroll */
     #header_wrap .snb_bg{display: none !important;}
}