.header {
    position: sticky;
    left: 0;
    top: 0;
    width: calc(147*var(--vw-base));
    height: calc(950*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border-right: rgba(0, 0, 0, 0.3) 1px solid; */
}

    .header .nav-logo {
        position: relative;
        margin-top: calc(36*var(--vw-base));
        width: calc(77*var(--vw-base));
        height: calc(113*var(--vw-base));
        background-image: url(../img/logo-dark.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }


    .header ul {
        position: relative;
        margin-top: calc(132*var(--vw-base));
        display: flex;
        flex-direction: column;
        gap: calc(45*var(--vw-base));
        width: 100%;
    }

    .header .pointer {
        position: relative;
        width: 100%;
    }

        .header .pointer::before {
            content: "";
            position: absolute;
            bottom: calc(-3*var(--vw-base));
            right: 0;
            width: calc(118*var(--vw-base));
            height: 1px;
            background: #a1040a;
            clip-path: inset(0% 0 0% 100%);
            transition: clip-path 1s ease 0.1s;
        }

        .header .pointer:hover::before {
            clip-path: inset(0% 0 0% 0%);
        }

    .header .en {
        position: relative;
        width: 100%;
        color: #000;
        font-size: calc(12.3*var(--vw-base));
        font-family: "Noto Sans TC", serif;
        font-weight: 200;
        letter-spacing: 0.1em;
        text-align: center;
    }

    .header .chi {
        position: relative;
        width: 100%;
        color: #000;
        font-size: calc(18.5*var(--vw-base));
        font-family: "Noto Sans TC", serif;
        font-weight: 200;
        letter-spacing: 0.1em;
        text-align: center;
    }

    .header.dark {
        position: absolute;
        z-index: 10;
    }

        .header.dark .nav-logo {
            background-image: none;
            background-image: url(../img/logo-white.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .header.dark .en {
            color: #ffffff;
        }

        .header.dark .chi {
            color: #ffffff;
        }


.header-light {
    z-index: 21;
}

.header-bg-light {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(147*var(--vw-base));
    height: 100%;
    border-right: rgba(0, 0, 0, 0.3) 1px solid;
    z-index: 1;
    background-color: #fff;
}