body,
* {
    font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif, 'Microsoft YaHei';
}

.pop-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.pop-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.pop-up.delay-1 {
    transition-delay: 0.1s;
}

.pop-up.delay-2 {
    transition-delay: 0.25s;
}

.pop-up.delay-3 {
    transition-delay: 0.4s;
}

@keyframes slide-in-menu {
    from {
        transform: translateX(100%);
        /* Start off-screen to the right */
        opacity: 0;
        /* Optional: fade in */
    }

    to {
        transform: translateX(0);
        /* End at original position */
        opacity: 1;
    }
}

@keyframes slide-out-menu {
    from {
        transform: translateX(0);
        /* Start off-screen to the right */
        visibility: visible;
    }

    to {
        transform: translateX(100%);
        /* End at original position */
        visibility: hidden;
    }
}

#mobile-menu #mobile-menu-content {
    visibility: hidden;
}

#mobile-menu .mobile-menu-close-row {
    display: flex;
    justify-content: end;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 1.2em;
}

#mobile-menu .mobile-menu-close-icon {
    cursor: pointer;
    align-items: center;
    background-color: #015DB2;
    width: 40px;
    height: 40px;
    border-left: 2px solid #489AE6;
}

#mobile-menu.opened>#mobile-menu-btn {
    transform: rotate(90deg);
}

#mobile-menu.opened>#mobile-menu-content {
    transform: translateX(100%);
    visibility: visible;
}

#mobile-menu.opened>#mobile-menu-content>a {
    padding: 0.5rem 1rem;
    color: #000;
}

#mobile-menu.opened>#mobile-menu-overlay {
    display: flex;
}

#mobile-menu-content {
    position: absolute;
    top: 0px;
    padding-bottom: 1.2em;
    width: 100%;
    max-width: 200px;
}

#mobile-menu-overlay {
    display: none;
}

#mobile-menu .menu-item {
    font-size: 1em;
}

.slide-prev,
.slide-next,
.slide-dot {
    cursor: pointer;
}

#mobile-menu.opened #mobile-menu-content {
    animation: slide-in-menu 0.5s ease-out forwards;
}

#mobile-menu.closed #mobile-menu-content {
    animation: slide-out-menu 0.35s ease-out forwards;
}

.overlay {
    position: fixed;
    /* Stays in place even when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    /* Semi-transparent black */
    z-index: 10;
    /* Ensures it sits on top of the background image */
    pointer-events: none;
    /* Allows you to click elements underneath if needed */
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Mobile view - for index.html - timeline */
@media screen and (max-width: 640px) {
    .tl-item .pr-10 {
        padding-right: 0px;
    }

    .tl-item .pl-10 {
        padding-left: 0px;
    }

    .tl-card {
        flex-direction: column;
    }

    .tl-card .w-28 {
        width: 60%;
        margin: 0 auto;
        padding-top: 10px;
    }

    .tl-card .flex-col {
        flex-direction: column;
    }
}