/* 메인메뉴 공통 */
#category-wrap{width:100%;clear:both;background-attachment:scroll;position:relative;z-index:3}
#gnb h2{display:none}
#gnb *{padding:0;list-style:none}
#gnb{position:relative;margin:0;z-index:5;background-repeat:no-repeat;background-position:center top;width:100%;box-sizing:border-box;background-color:transparent}
#gnb .logo{height:72px;line-height:72px; width: 245px;}
#gnb img{border:0;width:100%}
#gnb a{display:inline-block}
#gnb .main-wrapper{display:flex;margin:0 auto;overflow:hidden;height:72px;max-width:1890px;padding:0 20px;justify-content:space-between}
#gnb .main{height:380px;background-repeat:no-repeat;background-position:center top;box-sizing:border-box;display:block;max-width:1200px}
#gnb .main>li{float:left;line-height:72px;display:inline-block;text-align:center}
#gnb .main>li>a{display:block;width:100%;font-size:16px;font-weight:400;margin:0;padding:0;letter-spacing:-.5px;color:#fff}
#gnb .main>li>ul{padding: 20px 0;}
.gnb_bg{width:100%;position:absolute;top:88px;left:0}
#gnb .main-wrapper:hover .gnb_bg{border-top:1px solid #ddd;display:flex}
#gnb .main-wrapper .navi_bg{background-image:url(../img/menubar_bg.png);background-repeat:no-repeat;background-position:bottom left;width:288px;height:224px;float:left;margin-top:178px}
#gnb .main-wrapper .gnb_bg{border-top:1px solid #ddd}
#gnb .main>li>ul>li{line-height:45px}
#gnb .main>li>ul>li a{font-size:15px;color:#fff;font-weight:200;opacity: 0;}
#gnb .main li a img{margin-top:15px}
#gnb .main li.main_select{}
#gnb .mask{position:absolute;width:100%;height:400px;overflow:hidden;background-color:#fff;z-index:5}
#gnb .mask .sub-set-wrapper{max-width:1200px;min-height:400px;margin:0 auto;position:relative;background-image:url(../img/menubar_bg.png);background-repeat:no-repeat;background-position:110px bottom}
#gnb .sub-set{float:right;box-sizing:border-box;margin:10px auto 0}
#gnb .sub-set ul{float:left}
#gnb .sub-set ul li{height:26px;display:block;text-align:center}
#gnb .sub-set ul li a{display:block;font-size:13px;color:#555;line-height:30px;padding-top:2px;padding-bottom:2px;padding-left:0;letter-spacing:0}
#gnb .sub-set ul li a:hover{color:#9b8265;letter-spacing:0}
#gnb .mask .sub-set ul{display:inline-block;text-align:center;height:400px}
#gnb .mask .sub-set ul:hover{background-color:#09f}
#gnb .mask .sub-set .set1{float:left;width:155px}
#gnb .mask .sub-set .set2{float:left;width:155px}
#gnb .mask .sub-set .set3{float:left;width:240px}
#gnb .mask .sub-set .set4{float:left;width:135px}
#gnb .mask .sub-set .set5{float:left;width:135px}
#gnb .main .menu1{width:155px}
#gnb .main .menu2{width:155px}
#gnb .main .menu3{width:240px}
#gnb .main .menu4{width:135px}
#gnb .main .menu5{width:135px}

#category-wrap:after {content: ""; position: absolute; width: 100%; height: 1px; background: #ffffff1c; top: 72px; opacity: 0;}
.nav-on #category-wrap:after {opacity: 1;transition: all 0.5s;}

/* 헤더 기본 상태 (메인/서브 공통) */
#header_wrap{background:unset;transition:background .5s,transform .35s ease}
#header_wrap.sub{background:unset;transition:background .5s,transform .35s ease}
#gnb .main>li>a{color:#fff}
.hd_login a{color:#fff}
#open-button .navicon-line{background-color:#fff}

/* 메뉴 호버(nav-on) 시 효과 */
#header_wrap.nav-on{background:#111;backdrop-filter:blur(5px)}
#header_wrap.nav-on #gnb .main>li>a{color:#fff;position:relative}
#header_wrap.nav-on #gnb .main>li>a:after{content:"";position:absolute;left:50%;bottom:-1px;width:0;height:2px;background:#108CCF;transform:translateX(-50%);transition:width .3s ease;}
#header_wrap.nav-on #gnb .main>li:hover>a:after{width:60%;}
#header_wrap.nav-on #gnb .main>li>ul>li a{color:#fff; opacity: 0.6; transition: all 0.5s;}
#header_wrap.nav-on #gnb .main>li>ul>li a:hover {opacity: 1;}

/* 스크롤 시 : 어두운 배경(#111111) + 흰 글씨 (hover 상관없이 유지) */
.scrolled #header_wrap{background:#111111;backdrop-filter:blur(5px)}
.scrolled #header_wrap.sub{background:#111111;backdrop-filter:blur(5px)}
.scrolled #gnb .main>li>a{color:#fff}
.scrolled #gnb .main>li>ul>li a{color:#fff;opacity:1}
.scrolled .hd_login a{color:#fff}
.scrolled #open-button .navicon-line{background-color:#fff}
.scrolled #open-button.on .navicon-line{background-color:#fff}
.scrolled #header_wrap:hover{background:#111111;backdrop-filter:blur(5px)}
.scrolled #header_wrap.sub:hover{background:#111111;backdrop-filter:blur(5px)}

/* 스크롤 시 : 어두운 배경(#111111) + 흰 글씨 (hover도 동일하게 유지) */
.scrolled #header_wrap{background:#111111;backdrop-filter:blur(5px)}
.scrolled #header_wrap.sub{background:#111111;backdrop-filter:blur(5px)}
.scrolled #gnb .main>li>a{color:#fff}
.scrolled #gnb .main>li>ul>li a{color:#fff;opacity:1}
.scrolled .hd_login a{color:#fff}
.scrolled #open-button .navicon-line{background-color:#fff}
.scrolled #open-button.on .navicon-line{background-color:#fff}
.scrolled #header_wrap:hover{background:#111111;backdrop-filter:blur(5px)}
.scrolled #header_wrap.sub:hover{background:#111111;backdrop-filter:blur(5px)}

/* 반응형 */
@media screen and (max-width:1400px){
  #gnb .main .menu1 {width: 110px;}
  #gnb .main .menu2 {width: 110px;}
  #gnb .main .menu3 {width: 200px;}
  #gnb .main .menu4 {width: 110px;}
  #gnb .main .menu5 {width: 110px;}
  #gnb .main>li>a {font-size: 15px;}
  #gnb .main>li>ul>li {line-height: 40px;}
  #gnb .main>li>ul>li a {font-size: 13px;}
}

@media screen and (max-width:1200px){
  #gnb .main li{display:none}
  #gnb .mask{display:none}
  #gnb img{width:70%}
}