@charset "utf-8";
/* =========================================================
   서브페이지 공통 : 페이지 내 앵커 메뉴 (sticky)
   ---------------------------------------------------------
   사용법)
   <div class="anchor_nav">
       <ul>
           <li><a href="#sec_1">경영이념</a></li>
           <li><a href="#sec_2">연혁</a></li>
       </ul>
   </div>
   ... <div class="anchor_sec" id="sec_1"> ... </div>

   - 각 섹션에 class="anchor_sec" 를 넣으면 앵커 이동시
     고정헤더/스티키메뉴에 가리지 않도록 여백이 자동 적용됩니다.
   - 활성화 표시(.on)는 js/anchor_nav.js 가 처리합니다.
   ========================================================= */

:root {
    /* 헤더 높이(.mouse_u2 .wid = 85px) + 앵커메뉴 높이 */
    --hd-h: 85px;
    --anchor-h: 58px;
}

html {
    scroll-behavior: smooth;
}

/* ===== 앵커 메뉴 본체 ===== */
.anchor_nav {
    position: -webkit-sticky;
    position: sticky;
    top: var(--hd-h);
    z-index: 900;
    background: #fff;
    border-bottom: 1px solid #e3e8ef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.anchor_nav ul {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.anchor_nav li {
    flex: 1;
    text-align: center;
}

.anchor_nav a {
    display: block;
    padding: 18px 10px;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    border-bottom: 3px solid transparent;
    transition: 0.2s ease;
    text-decoration: none;
}

.anchor_nav a:hover,
.anchor_nav a.on {
    color: #13539c;
    border-bottom-color: #13539c;
}

/* ===== 앵커 대상 섹션 : 헤더+메뉴 높이만큼 여백 확보 ===== */
.anchor_sec {
    scroll-margin-top: calc(var(--hd-h) + var(--anchor-h));
}

/* =========================================================
   1024px 이하 : 헤더(.mouse_u2)가 position:relative 로 바뀌어
   같이 스크롤되므로, 앵커메뉴는 화면 최상단에 붙습니다.
   ========================================================= */
@media screen and (max-width:1024px) {
    :root {
        --hd-h: 0px;
        --anchor-h: 50px;
    }
}

@media screen and (max-width:767px) {
    :root {
        --anchor-h: 46px;
    }

    .anchor_nav ul {
        /* 항목이 많아지면 가로 스크롤 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .anchor_nav ul::-webkit-scrollbar {
        display: none;
    }

    .anchor_nav li {
        flex: 1 0 auto;
        min-width: 80px;
    }

    .anchor_nav a {
        padding: 14px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
}