@charset "utf-8";

/* Keep utility links visible independently of the legacy hide breakpoints. */
#hd #acc {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 18px;
}

#hd #acc > a {
    width: auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

@media (min-width: 992px) {
    #hd {
        display: grid;
        height: 104px;
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-rows: 32px 72px;
        align-items: center;
        column-gap: 48px;
        padding-right: 40px;
        padding-left: 40px;
    }

    #hd h1 {
        position: static;
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    #hd h1 a { margin: 0; }
    #hd h1 img { max-width: 200px; height: auto; max-height: 48px; }
    #hd #gnb { grid-column: 2; grid-row: 2; min-width: 0; }

    #hd #gnb > ul {
        width: 100%;
        max-width: 1200px;
        margin: 0;
    }

    #hd #gnb > ul > li > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: fit-content;
        min-height: 72px;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    /* Match the dropdown columns to the navigation area beside the logo. */
    #hd #sitemap {
        grid-template-columns: inherit;
        column-gap: inherit;
        padding-right: inherit;
        padding-left: inherit;
    }

    #hd.open #sitemap { display: grid; }

    #hd #sitemap > .container-lg {
        grid-column: 2;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    #hd #sitemap .sitemap {
        width: 100%;
        max-width: 1200px;
        margin: 0;
        text-align: left;
    }

    #hd #sitemap .sitemap > li > a {
        display: flex;
        justify-content: flex-start;
    }

    #hd #sitemap .sitemap > li > ul > li {
        justify-content: flex-start;
        padding-right: 0;
    }

    #hd #sitemap .sitemap h6 { position: relative; padding-left: 0; }
    #hd #sitemap .sitemap > li.active h6::before { left: -1rem; }

    #hd #acc,
    #hd .language-switch {
        position: absolute;
        top: 0;
        height: 32px;
        font-size: 13px;
    }

    #hd #acc { right: 96px; }

    #hd #acc > a {
        display: flex;
        align-items: center;
        min-height: 32px;
    }

    #hd .language-switch { right: 40px; min-height: 32px; }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    #hd { column-gap: 32px; padding-right: 24px; padding-left: 24px; }
    #hd #acc { gap: 12px; }
    #hd #acc { right: 80px; }
    #hd .language-switch { right: 24px; }
    html[lang="en"] #hd #gnb h6 { font-size: 15px; }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    #hd {
        padding-right: 24px;
        padding-left: 24px;
        column-gap: 40px;
    }

    #hd #gnb h6 { font-size: 16px; }
    html[lang="en"] #hd #gnb h6 { font-size: 13px; }

    #hd #acc {
        right: 80px;
    }

    #hd .language-switch { right: 24px; }
    .page-container { padding-top: 144px; }
}

@media (max-width: 991.98px) {
    #hd { height: 104px; }
    #hd h1 { top: 58px; }
    #hd .js-mn { top: 44px; }
    #hd .lan-mn { display: none; }

    #hd .language-switch {
        display: flex !important;
        top: 0;
        right: 12px;
        z-index: 120;
        min-height: 44px;
        color: inherit;
        font-size: 13px;
    }

    #hd #acc {
        position: absolute;
        top: 0;
        right: 66px;
        bottom: auto;
        left: 0;
        z-index: 120;
        width: auto;
        height: 44px;
        justify-content: flex-end;
        gap: clamp(12px, 4vw, 24px);
        padding: 0 12px;
        background: transparent;
        animation: none;
    }

    #hd #acc > a {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        height: 44px;
        min-height: 44px;
        border: 0;
        border-radius: 0;
        color: inherit;
        font-size: 13px;
        line-height: 1.5;
    }

    .body-transparent:not(.gnb-open) #hd #acc,
    .body-transparent:not(.gnb-open) #hd .language-switch { color: #fff; }

    .gnb-open #hd #acc,
    .gnb-open #hd .language-switch { color: #333; }

    #hd #gnb > ul { top: 104px; bottom: 24px; }
    .page-container { padding-top: 144px; }
}