/*Content CSS*/
#header_wrap { position:absolute; left:0; top:0; width:100%; height:100px; z-index:57; background: transparent;
    -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;
    transition: all .3s ease; border-bottom:1px solid rgba(255,255,255,.2);}
#header { position: relative; 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%; max-width: 1840px;}

/* 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:50%; top:50%; transform: translate(-50%, -50%); z-index: 2;}

#top_nav { display: flex; height: 100%;}
#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:21px; height: 100%; color:#fff; font-weight: 500; transition: all .3s; white-space: nowrap; position: relative; padding: 0 42px;}
#top_nav .gnb > li > a::after{content: ''; display: block; width: 0; height: 2px; background-color: #fc0606; position: absolute; top: calc(100% - 1px); left: 51%; transform: translateX(-50%); z-index: 10; transition: .3s;}


/* #top_nav .gnb > li > a:hover::after,
#top_nav .gnb > li.active > a::after { width:120px; }
#top_nav .gnb > li > a:hover::after { width:120px; } */
#top_nav .gnb > li > a:hover { color:#fc0606; }

#top_nav .hd_inner{width: 100%; max-width: 1840px; padding:30px 50px 0; margin: 0 auto; display: flex; }


/*snb*/
/* full_menu */
#top_nav .full_menu {display: none; width: 100%; position: absolute; left:0; top:100%; overflow-x: auto; height: 155px; text-align: left;}
#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 .gnb .snb { text-align: left; position: relative; z-index: 2; display: flex;  flex-wrap: wrap;  padding-top: 30px; }
#top_nav .gnb .snb > li { position: relative;  display: block; width: 220px; margin-right: 35px; margin-bottom: 35px; white-space: nowrap;}
@media screen and (min-width: 1401px) {
#top_nav .gnb .snb > li:nth-child(4n) {margin-right: 0;}
}

/* #top_nav .gnb > li:nth-child(3) .full_menu{display: block !important;} */

#top_nav .gnb .snb > li > a { display: flex; align-items: center; font-weight: 400; font-size:16px; color:#333; line-height: 1.3; transition: all .3s; width: 100%;
padding-bottom: 15px; border-bottom: 1px solid #ddd; justify-content: space-between; letter-spacing: -.5px; }
#top_nav .gnb .snb > li > a::after {content: ''; display: block; width: 7px; height: 10px; transition:all .3s; background:url("../img/snb_arrow.png") 50%/contain no-repeat;}
#top_nav .gnb .snb > li > a:hover {color: #fc0606; border-bottom-color: #fc0606; }
#top_nav .gnb .snb > li > a:hover::after { background-image:url("../img/snb_arrow_hv.png") }

#top_nav .hd_title {width: 33.3%; display: flex; align-items: center; }
#top_nav .hd_title h2 {font-size: 43px; font-weight: 700; color:#fff; flex-shrink: 0; width: 185px; }
#top_nav .hd_title p {font-size: 0; font-weight: 300;   color: rgba(255, 255, 255, 0.8); line-height: 1.6;}
#top_nav .hd_title p::before {content: '땡스는 농업을 통해 사람들과 연결되고,\A 상호 협력하며 함께 성장하는 길을 모색합니다.'; font-size: 15px; white-space:pre;}
/* #top_nav .hd_title.menu20 p::before {content: '다양한 분야의 전문가들과 협력하여\A 융합된 솔루션을 제공합니다.';}
#top_nav .hd_title.menu30 p::before {content: '종합 수처리 시스템 솔루션으로\A 더 나은 라이프 스타일을 제공합니다.';}
#top_nav .hd_title.menu40 p::before {content: '소중한 의견에 귀 기울이며\A 고객 만족을 최우선으로 생각합니다.';} */


#top_nav .fm_wrap {width: 66.6%; padding-left: 65px; }

.snb_bg { display: none; position: absolute; left:0; right:0; top:100px; height: 155px; background: #f7f7f7; z-index: -1;  }
.snb_bg::before {content: ''; display: block; width: calc(50% - 296px);  height: 100%; position: absolute; z-index: -1; left: 0; top:0; background:url("../img/snb_bg.jpg") 50% repeat;}

/* hd_right */
#hd_right {display: flex; align-items: center; height: 100%;}
.menu_slider_btn { display: block; position: relative;  cursor: pointer; width: 23px; }
.menu_slider_btn span { display: block; height: 2px; background: #fff; border-radius: 0px; transition:all .3s; }
.menu_slider_btn span:nth-child(n+2) {margin-top: 5px; }

/* hidden_nav */
.hidden_nav_box { display: none; position: fixed; top: 0; bottom:0; right:0; left: 0; background: rgba(5,5,12,.48); z-index: 9999; backdrop-filter: blur(10px);}
.hidden_nav_box.hv {z-index: 56; }

.hidden_nav { position:fixed; top:0; right: -640px; width: 640px; height: 100vh; padding:120px 50px 0 60px; background: #fbfbfb; z-index: 10000; }
.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:25px; padding-bottom: 25px; border-bottom: solid 1px #ddd; position: relative; }
.h_lm > a {display: block; font-size:26px; 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_snb {display: none; position: absolute; left:195px; top:5px; z-index: 2;}
.h_snb li {margin-bottom:20px;}
.h_snb li a {font-size:17px; font-weight: 400; color:#707070; transition: all .3s ease; border-bottom:2px solid transparent; padding:2px 0; white-space: nowrap; }
.h_snb li a:hover {padding:2px 15px; border-bottom:2px solid #fc0606; color:#fc0606;} */

.h_snb{display: block; margin-top: 15px;}
.h_snb li a{font-size: 16px; font-weight: 300; color: #666; transition: color .3s; }
.h_snb li + li{margin-top: 10px;}
.h_snb li:hover > a{color: #fc0606;}

.menu_slider_btn2 { z-index: 999; width: 30px; height: 30px; display: block; position: absolute; right:35px; top: 40px; cursor: pointer; }
.menu_slider_btn2 span { position: relative; top: 10px; right: -2px; display: block; width: 25px; height: 2px; border-radius: 3px; background:#fc0606; }
.menu_slider_btn2 span:nth-child(1) { margin:0; transform: rotate(45deg);}
.menu_slider_btn2 span:nth-child(2) { display: none; transform: rotate(45deg); }
.menu_slider_btn2 span:nth-child(3) { margin-top: -2px; transform: rotate(135deg); }


/* hover */
@media screen and (min-width: 1025px) {
#header_wrap:hover {background-color: #fff; border-bottom-color: #ddd;}
#header_wrap:hover #logo a img  {opacity: 0;}
#header_wrap:hover #logo a img + img {opacity: 1; }

#header_wrap:hover #top_nav .gnb > li > a {color:#000; }
#header_wrap:hover .menu_slider_btn span {background-color: #000; }
/* #header_wrap:hover .menu_slider_btn span:first-child {background-color: #fc0606; } */


}





/* media query */
@media screen and (max-width: 1700px) {
    .snb_bg::before {width:35%;}
    #top_nav .hd_title  {display: block;}
    #top_nav .hd_title h2 {font-size: 30px;}
    #top_nav .hd_title p { margin: 10px 0 0;}

}

@media screen and (max-width: 1400px) {
    .snb_bg::before {width:30%;}

    #header .header-inner {padding: 0 20px;}
    #top_nav {margin-left: 0;}
    #top_nav .hd_inner {padding:35px 20px 0;}

    #top_nav .gnb > li > a {padding: 0 30px; font-size: 18px;}

    #top_nav .fm_wrap {padding-left: 0; }
    #top_nav .gnb .snb > li {margin-right: 20px; width:150px;}
    #top_nav .gnb .snb > li > a {font-size: 14px;}


    #top_nav .hd_title p::before {font-size: 13px;}

    #top_nav .gnb > li:nth-child(2) .snb > li { width:200px;}

}

@media screen and (max-width: 1199px) {
    /* .snb_bg::before {width:28%;} */
}

@media screen and (max-width: 1024px) {

    #header_wrap { position: fixed; height: 60px; }
    #header .header-inner { justify-content: center;}

    #top_nav,
    #hd_right { display: none; }

    #logo a {width: auto; }
    #logo a img {width: auto; max-height:33px; }

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


}