@charset "utf-8";

/* 본문 폰트 설정에 영향을 주지 않는 공통 헤더 전용 폰트 */
@font-face {
    font-family: 'EconomyHeader';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 기존 페이지의 header/nav 스타일과 분리 */
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(0,0,0,.19); border-bottom: 1px solid rgba(255,255,255,.4); font-family: 'Pretendard', sans-serif; color: #fff; line-height: normal; transition: background .3s; }
#header.on,
#header.sub { background: rgba(3,19,44,.92); color: #fff; }
#header .header_inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1480px; height: 76px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#header .header_logo { display: flex; flex-shrink: 0; margin: 0; padding: 0; line-height: 1; }
#header .header_logo a { display: block; }
#header .header_logo img { display: block; width: 200px; max-width: 100%; height: auto; }
#header .header_nav ul { display: flex; align-items: center; justify-content: center; gap: 80px; margin: 0; padding: 0; list-style: none; }
#header .header_nav li { margin: 0; padding: 0; background: transparent; line-height: normal; }
#header .header_nav a { display: block; width: auto; padding: 0; background: transparent; font-family: 'EconomyHeader', 'Pretendard', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: normal; color: #fff; text-decoration: none; white-space: nowrap; }
#header .header_nav li:hover > a,
#header .header_nav li:focus > a,
#header .header_nav li.on > a { background: transparent; color: #fff; }

@media screen and (max-width: 1250px) {
    #header .header_nav ul { gap: 50px; }
}

@media screen and (max-width: 960px) {
    #header .header_inner { height: 64px; }
    #header .header_logo img { width: 150px; }
    #header .header_nav ul { gap: 28px; }
    #header .header_nav a { font-size: 16px; }
}

@media screen and (max-width: 650px) {
    #header .header_inner { height: 56px; }
    #header .header_logo img { width: 120px; }
    #header .header_nav ul { gap: 14px; }
    #header .header_nav a { font-size: 14px; }
}

@media screen and (max-width: 360px) {
    #header .header_inner { padding: 0 12px; }
    #header .header_logo img { width: 100px; }
    #header .header_nav ul { gap: 10px; }
    #header .header_nav a { font-size: 13px; }
}