/* 메인메뉴 공통 */ .utility-bar{background:#073875;color:#FFFFFF;font-size:20px;padding:10px 0;position:fixed;top:0;left:0;width:100%;z-index:120;/*transition:transform .3s ease,opacity .3s ease;*/} .utility-container{max-width:1740px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center; flex-wrap: wrap;} .utility-left{display:flex;gap:20px;align-items:center;} /* .utility-left .pulse-dot{width:6px;height:6px;background:#4ADE80;border-radius:50%;animation:pulseGreen 2s infinite;} */ @keyframes pulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0.7)}50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}} /* .utility-left strong{color:#F26522;} */ .utility-right{display:flex;gap:4px;} .utility-right a{color:#D5D5D5;text-decoration:none;padding:4px 10px;border:1px solid transparent;font-family:'JetBrains Mono';font-size:11px;letter-spacing:0.05em;transition:all .5s;} .utility-right a:hover,.utility-right a.active{border-color:#F26522;color:#F26522;} /* body.scrolled .utility-bar{transform:translateY(-100%);opacity:0;pointer-events:none;} */ @media screen and (max-width: 680px) { .utility-container {gap: 4px;} .utility-left {width: 100%; justify-content: center;} .utility-right {width: 100%; justify-content: center;} } #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:76px;line-height:76px} #gnb img{border:0;width:100%; max-width: 250px;} #gnb a{display:inline-block} #gnb .main-wrapper{display:flex;margin:0 auto;overflow:hidden;height:76px;max-width:1740px;padding:0 20px;justify-content:space-between} #gnb .main{height:270px;background-repeat:no-repeat;background-position:center top;box-sizing:border-box;display:block;max-width:1200px} #gnb .main>li{float:left;line-height:76px;display:inline-block;text-align:center; padding: 0 40px;} #gnb .main>li>a{display: block; font-weight: 700; font-size: 17px; color: #20354f;} #gnb .main>li>ul{height:250px;} .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-wrapper .cos_bt{height:76px;display:flex;align-items:center;} #gnb .main-wrapper .cos_bt a{font-size: 16px; transition: .4s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; background: #e27034; color: #fff; border-radius: 999px; font-weight: 700; white-space: nowrap;} #gnb .main-wrapper .cos_bt a:hover {background: #b95118;} #gnb .main>li>ul>li{line-height:35px} #gnb .main>li>ul>li a{font-size:15px;color:#fff;font-weight:400;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:100px} #gnb .mask .sub-set .set2{float:left;width:100px} #gnb .mask .sub-set .set3{float:left;width:120px} #gnb .mask .sub-set .set4{float:left;width:100px} #gnb .mask .sub-set .set5{float:left;width:100px} #gnb .mask .sub-set .set6{float:left;width:100px} #gnb .main .menu1{width:100px} #gnb .main .menu2{width:100px} #gnb .main .menu3{width:120px} #gnb .main .menu4{width:100px} #gnb .main .menu5{width:100px} #gnb .main .menu6{width:100px} */ /* 헤더 기본 상태 (메인/서브 공통) */ #header_wrap{position:fixed;top:39px;left:0;width:100%;z-index:110;transition:background .5s,top .5s ease; background: #fff;} /* body.scrolled #header_wrap{top:0;} */ #header_wrap.sub {background:#fff;transition:background .5s,top .5s ease;} .hd_login a{color:#000} #open-button .navicon-line{background-color:#000} /* 메뉴 호버(nav-on) 시 효과 — 스크롤 전: 흰 배경 + 검정 글씨 */ #header_wrap.nav-on{background:#fff;backdrop-filter:blur(5px)} #header_wrap.nav-on #gnb .main>li>a{color:#000;position:relative} #gnb .main>li>a{position:relative;} #gnb .main>li>a:after{content:"";position:absolute;left:0;bottom:20px;width:0;height:2px;background:#EC5C03;transition:width .5s ease;} #gnb .main>li:hover>a:after{width:100%;} #header_wrap.nav-on #gnb .main>li>ul>li a{color:#000;opacity:0.8; transition: all 0.5s;} #header_wrap.nav-on #gnb .main>li>ul>li a:hover {opacity: 1; color: #EC5C03;} /* 스크롤 시 : 검정 배경 + 흰 글씨 */ .scrolled #header_wrap{background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid #dce4ef;} .scrolled #header_wrap.sub{background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid #dce4ef;} /* .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:#121212} /* .scrolled #open-button.on .navicon-line{background-color:#fff} */ /* 스크롤 + 호버(nav-on) 시 : 검정 배경 유지 + 흰 글씨 유지 */ .scrolled #header_wrap.nav-on{background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid #dce4ef;} .scrolled #header_wrap.nav-on #gnb .main>li>a{color:#fff;position:relative} .scrolled #header_wrap.nav-on #gnb .main>li>ul>li a{color:#fff;opacity:0.8; transition: all 0.5s;} .scrolled #header_wrap.nav-on #gnb .main>li>ul>li a:hover {opacity: 1; color: #EC5C03;} .scrolled #header_wrap:hover{background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid #dce4ef;} .scrolled #header_wrap.sub:hover{background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid #dce4ef;} /* 반응형 */ @media screen and (max-width:1400px){ #gnb .main>li {padding: 0 20px;} } @media screen and (max-width:1200px){ #gnb .main{padding-right:2%} #gnb .sub-set{padding-right:2%} #gnb .main>li>a {font-size: 16px;} #gnb .main>li {padding: 0 15px;} #gnb img {max-width: 200px;} } @media screen and (max-width:1100px){ #gnb .main-wrapper .cos_bt {display: none;} .utility-bar {font-size: 16px;} /* #header_wrap {top: 0;} */ #gnb .main-wrapper{height:80px} #gnb .logo{height:80px;line-height:80px} #gnb .main li{display:none} #gnb .mask{display:none} #gnb img {max-width:180px;} } @media screen and (max-width:770px){ .utility-bar {font-size: 14px;} } @media screen and (max-width:680px){ /* .utility-bar {font-size: 14px;} */ }