@charset "utf-8";

#shGnb{display:flex;align-items:center;position:relative;width:100%;height:100px;padding:0 var(--header-hamburger,100px) 0 0;border-bottom:1px solid rgba(255,255,255,.2);transition:all .2s}
#shGnb.on{border-bottom:1px solid #e1e1e1}
#shGnb.sub{
position:relative;
background:transparent;
border-bottom:1px solid rgba(0,0,0,.08);
}
#shGnb.sub .sh_nav > ul > li > a{color:#222}
#shGnb.sub #pfBtn{border-color:rgba(0,0,0,.12)}
#shGnb.sub #pfBtn span,
#shGnb.sub #pfBtn span:before,
#shGnb.sub #pfBtn span:after{background:#111}
#shGnb.sub.on{border-bottom:1px solid #e1e1e1}
#shGnb .sh_lnb_s > li > a.is-active{color:var(--primary);font-weight:600}
.sh_lnb_bg{display:none;position:absolute;top:0;left:0;width:100%;height:340px;background:#fff}

/* 로고 */
#shGnb .sh_logo{position:relative;z-index:20;padding-left:var(--layout-inset,80px)}
#shGnb .sh_logo .site-logo{display:block;height:52px;width:auto}

/* 대분류  */
#shGnb .sh_nav{position:absolute;left:calc(50% - var(--header-hamburger,100px) / 2);top:50%;transform:translate(-50%,-50%);margin:0}
#shGnb .sh_nav > ul > li{float:left;position:relative;line-height:100px;transition:all .4s ease-in-out}
#shGnb .sh_nav > ul > li > a{position:relative;z-index:20;display:block;padding:0 28px;font-size:17px;font-weight:600;color:#fff;transition:all .2s;letter-spacing:.02em}
#shGnb .sh_nav > ul > li:hover > a{color:var(--primary)!important}
#shGnb .sh_nav > ul > li:hover .sh_lnb_s:before{width:calc(100% + 40px);opacity:1}
#shGnb .sh_nav > ul > li:hover .sh_lnb_s > li > a{color:#777}
#shGnb .sh_nav > ul > li:hover .sh_lnb_s > li > a:hover{color:var(--primary)}
#shGnb.on .sh_nav > ul > li > a{padding:0 28px;color:#222}

/* 소분류 */
#shGnb .sh_lnb_s{display:none;position:absolute;left:50%;transform:translateX(-50%);min-width:100%;width:max-content;padding-top:25px;min-height:145px}
#shGnb .sh_lnb_s:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:-2px;z-index:-1;transform:translateX(-50%);width:0;height:4px;background:var(--primary);transition:all .2s}
#shGnb .sh_lnb_s > li > a{display:block;font-size:16px;font-weight:500;line-height:2.2;text-align:center;color:#555;transition:all .2s}
#shGnb .sh_lnb_s > li > a:hover{color:var(--primary)}

/* BRAND 메가메뉴 */
#shGnb .sh_lnb_s.sh_mega{min-width:560px;min-height:200px;padding:28px 36px 24px;align-items:flex-start;justify-content:space-between;gap:36px}
#shGnb .sh_lnb_s.sh_mega[style*="display: block"],
#shGnb .sh_lnb_s.sh_mega[style*="display:block"]{display:flex!important}
#shGnb .sh_lnb_s.sh_mega .mega-col{flex:1;min-width:150px;list-style:none}
#shGnb .sh_lnb_s.sh_mega .mega-title{display:block;margin-bottom:10px;font-size:14px;font-weight:700;color:#222;text-align:left;letter-spacing:.04em}
#shGnb .sh_lnb_s.sh_mega .mega-col > ul{margin:0;padding:0;list-style:none}
#shGnb .sh_lnb_s.sh_mega .mega-col > ul li a{display:block;font-size:15px;font-weight:500;line-height:2;text-align:left;color:#777;white-space:nowrap}
#shGnb .sh_lnb_s.sh_mega .mega-col > ul li a:hover{color:var(--primary)}
#shGnb .sh_nav > ul > li.has-mega:hover .sh_lnb_s:before{width:calc(100% + 56px);opacity:1}
#shGnb.on.has-mega-open .sh_lnb_bg{height:340px}

/* 메뉴버튼 — viewport 오른쪽 고정 */
#pfBtn{display:flex;position:fixed;top:0;right:0;z-index:101;width:var(--header-hamburger,100px);height:100px;border-left:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s}
#pfBtn span{display:block;position:relative;width:26px;height:3px;margin:auto;background:#fff;transition:all .2s}
#pfBtn span:before, #pfBtn span:after{display:block;content:"";position:absolute;top:0;width:100%;height:3px;background:#fff;transition:all .2s}
#pfBtn span:before {top:-9px}
#pfBtn span:after{top:9px}
#pfBtn.active{background:#fff}
#pfBtn.active span{border:none;background:transparent}
#pfBtn.active span:before{top:0;transform:rotate(45deg);background:var(--primary)}
#pfBtn.active span:after{top:0;transform:rotate(-45deg);background:var(--primary)}

/* 메뉴오픈 */
#pfWrap{display:none;position:fixed;top:0;left:-100%;z-index:100;width:100%;height:100%;background-color:rgba(0,0,0,.6);backdrop-filter:blur(10px)}
#pfWrap .bg_wrap{position:absolute;z-index:1;width:30%;margin:0 auto}
#pfWrap .bg{position:absolute;left:0;top:0;width:0;max-height:980px;height:100vh;margin-left:0;background:url(./bg.jpg) left no-repeat;background-size:cover}
.pf_cate{position:absolute;right:0;top:0;width:0;height:100%;background-color:var(--primary);overflow:hidden}
.pf_cate > ul{position:absolute;top:0;left:0;transform:none;width:100%;height:100%;margin:0;padding:110px 10% 48px;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;list-style:none}
.pf_cate > ul > li{opacity:0;margin-left:100px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.2)}
.pf_cate > ul > li+li{margin-top:24px}
.pf_cate > ul > li > a{display:block;width:max-content;margin-bottom:14px;font-size:26px;font-weight:700;color:#fff;letter-spacing:.06em}
.pf_cate > ul > li:nth-child(1){animation-delay:.4s}
.pf_cate > ul > li:nth-child(2){animation-delay:.5s}
.pf_cate > ul > li:nth-child(3){animation-delay:.6s}
.pf_cate > ul > li:nth-child(4){animation-delay:.7s}
.pf_cate > ul > li:nth-child(5){animation-delay:.8s}
.pf_cate > ul > li > ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px;margin:0;padding:0;list-style:none}
.pf_cate > ul > li > ul li{margin:0!important}
.pf_cate > ul > li > ul a{display:block;padding:4px 0;font-size:16px;font-weight:500;color:rgba(255,255,255,.75);opacity:1;transition:all .2s;white-space:nowrap}
.pf_cate > ul > li > ul a:hover{color:#fff}
.pf_cate > ul > li.brand-item > ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}
.pf_cate > ul > li.media-item > ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 16px}
.pf_cate > ul > li.business-item > ul{grid-template-columns:1fr}
.pf_cate .mega-group{display:block;width:100%;margin:0!important}
.pf_cate .mega-group-title{display:block;margin-bottom:8px;font-size:13px;font-weight:700;color:rgba(255,255,255,.95);letter-spacing:.08em;text-transform:uppercase}
.pf_cate .mega-group > ul{display:block;margin:0;padding:0;list-style:none}
.pf_cate .mega-group > ul li{margin:0!important}
.pf_cate .mega-group > ul a{padding:3px 0;font-size:15px;color:rgba(255,255,255,.7)}
.pf_cate .mega-group > ul a:hover{color:#fff}
.pf_cate > ul > li.contact-item > a{margin-bottom:0}
@media (max-width:768px){
.pf_cate > ul{padding:96px 8% 40px}
.pf_cate > ul > li > a{font-size:22px}
.pf_cate > ul > li > ul{grid-template-columns:1fr}
.pf_cate > ul > li.brand-item > ul{grid-template-columns:1fr;gap:16px}
}

#shGnb.fix{background:#fff;border-bottom:1px solid #e1e1e1}
#shGnb.fix .sh_nav > ul > li > a{color:#222}
#shGnb.fix #pfBtn{border-color:var(--primary);background:var(--primary)}
#shGnb.fix #pfBtn span,
#shGnb.fix #pfBtn span:before,
#shGnb.fix #pfBtn span:after{background:#fff}
#shGnb.fix #pfBtn.active{border-color:#fff;background:#fff}
#shGnb.fix #pfBtn.active span:before,
#shGnb.fix #pfBtn.active span:after{background:var(--primary)}
#shGnb.sub.fix{background:#fff;border-bottom:1px solid #e1e1e1}