@charset "utf-8";

/* 서브페이지 공통 타이틀 · 로컬 내비게이션 */
.sub-navigation{
    --sub-background:#2b2b28;
    --sub-color:#ffd400;
    --sub-menu-color:#fff;
    --sub-active:#ffd400;
    --sub-divider:rgba(255,255,255,.22);
    position:relative;
    z-index:10;
    width:100%;
    font-family:"Pretendard","Noto Sans KR",sans-serif;
}
.sub-navigation *{box-sizing:border-box}
.sub-navigation--yellow{
    --sub-background:#ffd400;
    --sub-color:#2b2b28;
    --sub-menu-color:#2b2b28;
    --sub-active:#2b2b28;
    --sub-divider:rgba(43,43,40,.24);
}
.sub-navigation-inner{width:min(calc(100% - 40px),1500px);margin:0 auto}
.sub-navigation-header{display:flex;min-height:112px;align-items:center;justify-content:center;color:var(--sub-color);background:var(--sub-background);text-align:center}
.sub-navigation-header h1{margin:0;color:inherit;font-size:38px;font-weight:900;line-height:1.2;letter-spacing:-.04em}
.sub-navigation-sticky{position:sticky;top:72px;z-index:100;border-top:1px solid var(--sub-divider);border-bottom:1px solid var(--sub-divider);background:var(--sub-background)}
.sub-navigation-menu{display:flex;min-height:54px;align-items:center;justify-content:center;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sub-navigation-menu::-webkit-scrollbar{display:none}
.sub-navigation-menu a{position:relative;display:flex;min-height:54px;padding:0 16px;flex:0 0 auto;align-items:center;color:var(--sub-menu-color);font-size:15px;font-weight:800;line-height:1.3;text-decoration:none;transition:color .2s}
.sub-navigation-menu a+a:before{position:absolute;top:50%;left:0;width:1px;height:11px;background:var(--sub-divider);content:"";transform:translateY(-50%)}
.sub-navigation-menu a:after{position:absolute;right:14px;bottom:-1px;left:14px;height:2px;background:var(--sub-active);content:"";transform:scaleX(0);transition:transform .2s}
.sub-navigation-menu a:hover,.sub-navigation-menu a:focus-visible,.sub-navigation-menu a.is-active{color:var(--sub-active)}
.sub-navigation-menu a.is-active:after{transform:scaleX(1)}

@media(max-width:1024px){
    .sub-navigation-sticky{top:64px}
}
@media(max-width:768px){
    .sub-navigation-inner{width:calc(100% - 32px)}
    .sub-navigation-header{min-height:92px}
    .sub-navigation-header h1{font-size:32px}
    .sub-navigation-sticky .sub-navigation-inner{width:100%}
    .sub-navigation-menu{min-height:48px;padding:0 7px;justify-content:flex-start}
    .sub-navigation-menu a{min-height:48px;padding:0 11px;font-size:13px}
    .sub-navigation-menu a:after{right:10px;left:10px}
}
@media(max-width:480px){
    .sub-navigation-inner{width:calc(100% - 28px)}
    .sub-navigation-header h1{font-size:30px}
    .sub-navigation-menu{padding:0 5px}
    .sub-navigation-menu a{padding:0 10px;font-size:12px}
}