.tp-leftarrow,
    .tp-rightarrow,
    .tp-tabs {
        display: none;
    }

    .mobile-canvas__nav.navigation {
        margin-left: auto;
    }

    .navigation__link {
        position: relative;
        display: inline-block;
        white-space: nowrap;
        /* overflow: hidden; */
    }

    .nav-en,
    .nav-zh {
        display: block;
        transition: opacity 0.3s ease;
        font-size: 1rem;
    }

    .nav-zh {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        /* font-weight: 100; */
    }

    .navigation__link:hover .nav-en {
        opacity: 0;
    }

    .navigation__link:hover .nav-zh {
        opacity: 1;
    }

    .header__inner .container {
        max-width: 100%;
    }

    .footer__inner::before {
        top: 4px;
    }

    .logo-top {
        max-width: 50%;
        width: 21rem;
    }

    .logo-mobile-top {
        max-width: 50%;
        width: 13rem;
    }

    .filter__item {
        position: relative;
        color: #000;
    }

    /* 初始狀態：只顯示英文 */
    .filter__item::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        white-space: nowrap;
    }

    /* 各按鈕對應的中文 */
    .filter__item[data-filter="*"]::after {
        content: '全部';
    }

    .filter__item[data-filter=".__js_interior"]::after {
        content: '當季主打空間';
    }

    .filter__item[data-filter=".__js_architecture"]::after {
        content: '寫給未來的空間';
    }

    .filter__item[data-filter=".__js_building"]::after {
        content: '落成之後的故事';
    }

    /* Hover 時隱藏英文、顯示中文 */
    .filter__item:hover {
        color: transparent;
        transform: translate(-10px, 0);
        /* 把英文隱藏 */
    }

    .filter__item:hover::after {
        opacity: 1;
        pointer-events: auto;
        color: var(--c-main);
    }

    img.image-box {
        /* width: 350px;
        height: 450px; */
        width: 100%;
        object-fit: cover;
        aspect-ratio: 35 / 45
    }

    .card:hover .card__content,
    .card:focus .card__content,
    .card--active .card__content {
        /* opacity: 0.8; */
        background-color: #ffa126bb;
        backdrop-filter: blur(5px);
    }

    .tp-mask-wrap:has(.tp-shape) {
        box-shadow: 0px 0px 19px 1px #fe9710;
        /* 白色光暈，可根據需要調整顏色與強度 */
    }

    .social__link {
        width: 3rem;
        height: 3rem;
    }


    .card-container {
        position: relative;
    }

    .card-note {
        position: absolute;
        bottom: 0;
        right: 0;
        color: white;
        font-weight: bold;
        /* text-shadow: 0 0 10px white; */
        -webkit-text-stroke: 0.2px rgba(66, 66, 66, 0.795);
    }

    .card-mark {
        color: rgb(39, 37, 37);
    }

    .card__content {
        z-index: 10;
    }

    .about-title {
        font-weight: bold;
        margin-bottom: 1rem;
        color: var(--c-main);
    }

    .text-justify {
        text-align: justify;
        text-justify: inter-ideograph;
    }

    .team-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 1 / 1;
    }

    .card--news:hover:hover .card__content,
    .card--news:hover:focus .card__content,
    .card--news:focus:hover .card__content,
    .card--news:focus:focus .card__content {
        background-color: #ffa126bb;
        backdrop-filter: blur(5px);
    }

    .card--news .card__content {
        background-color: #ffa126bb;
    }

    .font-kai {
        font-family: '標楷體', serif;
        font-weight: 700;
    }

    /* .about-jpg {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 16 / 9;
    } */
    /* 最新消息紅色 hover 效果 */
    .news-hover-red:hover {
        color: #e4450a !important;
        /* text-shadow: #fe9710 0px 0px 10px; */
        animation: blink-news 0.5s steps(1, end) infinite;
        transition: color 0.2s;
    }

    @keyframes blink-news {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    .news-red {
        color: #e54800 !important;
    }

    .responsive-video {
        width: 100%;
        /* 根據容器寬度自動縮放 */
        max-width: 300px;
        /* 設定最大寬度 */
        height: 170px;
        /* 自動依比例縮放高度 */
        border-radius: 12px;
        /* 可加上圓角效果 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        /* 陰影 */
    }

    .marquee-wrapper {
        width: 100%;
        overflow: hidden;
        /* background: linear-gradient(to right, #fdfbfb, #ebedee);
        border: 2px solid #ccc;
        padding: 12px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    }

    .marquee-content {
        display: flex;
        white-space: nowrap;
        animation: scroll-left 15s linear infinite;
    }

    .marquee-content span {
        font-size: 3rem;
        color: #333;
        /* padding: 0 2rem; */
        font-weight: bold;
    }

    /* 滑鼠移上去就停止動畫 */
    .marquee-wrapper:hover .marquee-content {
        animation-play-state: paused;
    }

    /* 動畫效果 */
    @keyframes scroll-left {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .text-blue {
        color: #8faadc !important;
    }

    .text-pink {
        color: #eb95eb !important;
    }

    .text-yellow {
        color: #fab860 !important;
    }

    .shadow-text {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* RWD 響應式設計 */
    @media (max-width: 768px) {
        .responsive-video {
            max-width: 165px;
            /* 設定最大寬度 */
            box-shadow: none;
            /* 陰影 */
        }

        .marquee-content span {
            font-size: 2rem;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-42rem);
            }
        }
    }

    .logo {
        width: 15rem;
    }