.main-container {
    position: relative;
}

.header-container {
    background-color: transparent;
}

.header-nav-wrapper .menu-item-has-children {
    color: #fff;
}

.header-nav-wrapper .menu-item-has-children .menu-link {
    color: #fff;
}

.header-nav-wrapper .menu-item-has-children .menu-arrow {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.header-left-wrapper .header-nav-wrapper .menu-item {
    color: #fff;
}

.header-action-btn {
    .w {
        display: block;
    }

    .b {
        display: none;
    }
}

.header-bottom.sticky {
    .header-action-btn {
        .w {
            display: none;
        }

        .b {
            display: block;
        }
    }

    .header-container {
        background-color: #ffffff;
    }

    .header-nav-wrapper .menu-item-has-children {
        color: var(--main-color);
    }

    .header-nav-wrapper .menu-item-has-children .menu-link {
        color: var(--main-color);
    }

    .header-nav-wrapper .menu-item-has-children .menu-arrow {
        border-right: 2px solid var(--main-color);
        border-bottom: 2px solid var(--main-color);
    }

    .header-left-wrapper .header-nav-wrapper .menu-item {
        color: var(--main-color);

        &.active {
            color: var(--orange-color);
        }
    }
}

/* .temperature-box {
    left: calc(50% - 410px);
    bottom: 22vh;
    right: auto;
    top: auto;
} */

/* 頭部輪播圖 - start */
.swiper-section {
    width: 100%;
    background-color: var(--main-color);

    .swiper-container {
        position: relative;
        width: 100%;
        height: 100vh;

        .hero-slide {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 40px;

            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                width: 500px;
                height: 208px;
                background: url(/static/image/vector-img.png) no-repeat center center / cover;
                background-repeat: no-repeat;
                mix-blend-mode: multiply;
                pointer-events: none;
                opacity: 0.46;
                left: clamp(15px, 4.2vw, 80px);
                max-width: clamp(284px, 29.64vw, 564px);
                z-index: 0;
            }

            .hero-slide-left {
                width: 50%;
                height: 100%;
                position: relative;
                z-index: 1;
                padding: 120px 42px 80px 80px;
                display: flex;
                flex-flow: column;
                justify-content: center;

                /* &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 300px;
                    height: 126px;
                    background-image: url(/static/image/hotIsland1.png);
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                } */

                .hero-eyebrow {
                    margin: 0;
                    color: var(--orange-color);
                    font-size: 14px;
                    line-height: 1.5;
                    font-weight: 600;
                    letter-spacing: 0.25em;
                    text-transform: capitalize;
                    margin-bottom: clamp(6px, 0.63vw, 12px);
                    position: relative;
                    display: flex;
                    align-items: center;

                    /* &::before {
                        content: "";
                        width: clamp(9px, 0.63vw, 12px);
                        aspect-ratio: 12 / 13;
                        background-color: var(--orange-color);
                        display: inline-block;
                        margin-right: clamp(5px, 0.42vw, 8px);
                        clip-path: polygon(50.201% 100%, 50.201% 100%, 43.516% 92.661%, 36.628% 85.05%, 29.752% 77.216%, 23.104% 69.205%, 16.897% 61.063%, 11.346% 52.837%, 6.666% 44.574%, 3.072% 36.321%, 0.778% 28.124%, 0% 20.03%, 0% 20.03%, 1.021% 13.336%, 3.769% 7.773%, 7.928% 3.553%, 13.18% 0.892%, 19.207% 0.001%, 25.692% 1.095%, 32.318% 4.387%, 38.766% 10.091%, 44.72% 18.419%, 49.862% 29.586%, 49.862% 29.586%, 50.588% 26.97%, 51.54% 24.272%, 52.71% 21.543%, 54.089% 18.832%, 55.67% 16.19%, 57.445% 13.667%, 59.404% 11.313%, 61.541% 9.179%, 63.846% 7.315%, 66.312% 5.771%, 66.312% 5.771%, 72.015% 3.441%, 77.848% 2.358%, 83.531% 2.515%, 88.788% 3.906%, 93.341% 6.524%, 96.913% 10.364%, 99.224% 15.42%, 99.998% 21.685%, 98.956% 29.153%, 95.822% 37.818%, 95.822% 37.818%, 93.578% 42.409%, 90.817% 47.291%, 87.538% 52.49%, 83.744% 58.034%, 79.435% 63.947%, 74.612% 70.258%, 69.276% 76.993%, 63.428% 84.177%, 57.069% 91.837%, 50.201% 100%);
                    } */
                }

                .hero-title {
                    margin: 12px 0 0;
                    color: #fff;
                    font-size: 80px;
                    line-height: 1.06;
                    font-weight: 700;
                    letter-spacing: -0.02em;
                    margin-bottom: clamp(17px, 1.42vw, 27px);
                    z-index: 2;
                }

                .hero-subtitle {
                    margin: 30px 0 0;
                    color: #fff;
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 1.75;
                    margin-bottom: clamp(21px, 2.15vw, 41px);
                    z-index: 2;
                }

                .hero-more-btn {
                    width: fit-content;
                    height: clamp(45px, 2.94vw, 56px);
                    background-color: var(--orange-color);
                    border: 1px solid transparent;
                    border-radius: 999px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: clamp(7px, 0.53vw, 10px);
                    padding: 0 clamp(6px, 0.47vw, 9px);
                    padding-right: clamp(12px, 0.89vw, 17px);
                    font-weight: 800;
                    font-size: clamp(13px, 0.84vw, 16px);
                    position: relative;
                    color: #ffffff;
                    z-index: 2;

                    &:hover {
                        color: var(--orange-color);
                        background-color: transparent;
                        border-color: var(--orange-color);

                        .hero-more-icon {
                            color: #ffffff;
                            background-color: var(--orange-color);

                            svg {
                                path {
                                    fill: #ffffff;
                                }
                            }
                        }
                    }
                }

                .hero-more-icon {
                    background-color: #ffffff;
                    color: var(--orange-color);
                    width: clamp(22px, 1.52vw, 29px);
                    width: clamp(33px, 2.1vw, 40px);
                    aspect-ratio: 1 / 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 999px;
                    transition: all 0.3s ease;
                    font-size: clamp(10px, 0.68vw, 13px);

                    svg {
                        width: 18px;
                        height: 18px;

                        path {
                            fill: var(--orange-color);
                            transition: all 0.3s ease;
                        }
                    }
                }

                .swiper-btn-wrapper {
                    position: relative;
                    z-index: 2;
                    display: flex;
                    align-items: center;
                    opacity: 0;
                    gap: 12px;

                    .plan-logo {
                        position: relative;
                        z-index: 2;
                        height: 120px;
                        padding: 4px 12px;
                        margin-top: 5px;
                        margin-right: 30px;
                        border-radius: 12px;
                        background-color: #ffffff;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                /* 輪播切換：左側文案階梯浮現（由 JS 切換 .hero-anim-active） */
                .hero-eyebrow,
                .hero-title,
                .hero-subtitle,
                .hero-more-btn .hero-more-icon,
                .hero-more-btn {
                    opacity: 0;
                    transform: translate3d(0, 18px, 0);
                }

                .hero-more-btn .hero-more-icon {
                    transform: translate3d(0, 12px, 0);
                }

                &.hero-anim-active .hero-eyebrow {
                    animation: heroStaggerIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                    animation-delay: 0.06s;
                }

                &.hero-anim-active .hero-title {
                    animation: heroStaggerIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                    animation-delay: 0.22s;
                }

                &.hero-anim-active .hero-subtitle {
                    animation: heroStaggerIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                    animation-delay: 0.4s;
                }

                &.hero-anim-active .swiper-btn-wrapper {
                    animation: heroStaggerIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                    animation-delay: 0.52s;
                }

                &.hero-anim-active .hero-more-btn .hero-more-icon {
                    animation: heroStaggerIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                    animation-delay: 0.52s;
                }

                &.hero-anim-active .hero-more-btn {
                    animation: heroStaggerIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                    animation-delay: 0.62s;
                }
            }

            .hero-slide-right {
                width: 50%;
                max-height: 100%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;

                .ul-banner-img {
                    position: relative;
                    width: 100%;
                    max-height: 100%;
                    z-index: 1;

                    .img-wrapper {
                        max-height: 100%;
                        background: linear-gradient(180deg, var(--orange-color) 0%, rgba(235, 83, 16, 0) 51%, var(--orange-color) 100%);
                        padding-left: 10px;
                        clip-path: polygon(20.444% 6.836%, 20.444% 6.836%, 21.079% 1.445%, 21.969% -3.298%, 23.149% -7.442%, 24.655% -11.037%, 26.521% -14.129%, 28.783% -16.769%, 31.475% -19.005%, 34.633% -20.885%, 38.291% -22.458%, 42.485% -23.773%, 42.485% -23.773%, 51.821% -25.092%, 61.13% -24.265%, 70.354% -21.642%, 79.44% -17.571%, 88.329% -12.403%, 96.968% -6.486%, 105.299% -0.169%, 113.267% 6.199%, 120.817% 12.269%, 127.892% 17.691%, 127.892% 17.691%, 133.187% 21.665%, 138.424% 25.901%, 143.431% 30.413%, 148.036% 35.215%, 152.067% 40.322%, 155.351% 45.748%, 157.717% 51.507%, 158.992% 57.614%, 159.004% 64.083%, 157.581% 70.928%, 157.581% 70.928%, 154.251% 78.396%, 149.391% 84.901%, 143.283% 90.358%, 136.208% 94.679%, 128.447% 97.778%, 120.283% 99.568%, 111.997% 99.963%, 103.871% 98.874%, 96.186% 96.217%, 89.224% 91.904%, 89.224% 91.904%, 84.824% 88.551%, 80.861% 85.901%, 77.197% 83.943%, 73.692% 82.666%, 70.205% 82.06%, 66.599% 82.113%, 62.733% 82.815%, 58.469% 84.155%, 53.665% 86.122%, 48.184% 88.705%, 48.184% 88.705%, 41.958% 91.563%, 36.284% 93.719%, 31.115% 95.169%, 26.403% 95.908%, 22.102% 95.934%, 18.165% 95.243%, 14.544% 93.83%, 11.192% 91.692%, 8.062% 88.825%, 5.108% 85.226%, 5.108% 85.226%, 3.102% 82.034%, 1.619% 78.74%, 0.63% 75.368%, 0.106% 71.943%, 0.017% 68.487%, 0.333% 65.024%, 1.025% 61.58%, 2.062% 58.177%, 3.417% 54.84%, 5.058% 51.592%, 5.058% 51.592%, 8.7% 45.01%, 11.636% 39.594%, 13.954% 35.08%, 15.745% 31.209%, 17.099% 27.718%, 18.105% 24.347%, 18.852% 20.834%, 19.431% 16.919%, 19.932% 12.34%, 20.444% 6.836%);

                        img {
                            max-height: clamp(0px, 65.74vw, 100vh);
                            width: 100%;
                            max-width: clamp(300px, 50vw, 960px);
                            aspect-ratio: 960 / 1000;
                            clip-path: polygon(20.444% 6.836%, 20.444% 6.836%, 21.079% 1.445%, 21.969% -3.298%, 23.149% -7.442%, 24.655% -11.037%, 26.521% -14.129%, 28.783% -16.769%, 31.475% -19.005%, 34.633% -20.885%, 38.291% -22.458%, 42.485% -23.773%, 42.485% -23.773%, 51.821% -25.092%, 61.13% -24.265%, 70.354% -21.642%, 79.44% -17.571%, 88.329% -12.403%, 96.968% -6.486%, 105.299% -0.169%, 113.267% 6.199%, 120.817% 12.269%, 127.892% 17.691%, 127.892% 17.691%, 133.187% 21.665%, 138.424% 25.901%, 143.431% 30.413%, 148.036% 35.215%, 152.067% 40.322%, 155.351% 45.748%, 157.717% 51.507%, 158.992% 57.614%, 159.004% 64.083%, 157.581% 70.928%, 157.581% 70.928%, 154.251% 78.396%, 149.391% 84.901%, 143.283% 90.358%, 136.208% 94.679%, 128.447% 97.778%, 120.283% 99.568%, 111.997% 99.963%, 103.871% 98.874%, 96.186% 96.217%, 89.224% 91.904%, 89.224% 91.904%, 84.824% 88.551%, 80.861% 85.901%, 77.197% 83.943%, 73.692% 82.666%, 70.205% 82.06%, 66.599% 82.113%, 62.733% 82.815%, 58.469% 84.155%, 53.665% 86.122%, 48.184% 88.705%, 48.184% 88.705%, 41.958% 91.563%, 36.284% 93.719%, 31.115% 95.169%, 26.403% 95.908%, 22.102% 95.934%, 18.165% 95.243%, 14.544% 93.83%, 11.192% 91.692%, 8.062% 88.825%, 5.108% 85.226%, 5.108% 85.226%, 3.102% 82.034%, 1.619% 78.74%, 0.63% 75.368%, 0.106% 71.943%, 0.017% 68.487%, 0.333% 65.024%, 1.025% 61.58%, 2.062% 58.177%, 3.417% 54.84%, 5.058% 51.592%, 5.058% 51.592%, 8.7% 45.01%, 11.636% 39.594%, 13.954% 35.08%, 15.745% 31.209%, 17.099% 27.718%, 18.105% 24.347%, 18.852% 20.834%, 19.431% 16.919%, 19.932% 12.34%, 20.444% 6.836%);
                        }

                        /* &::before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            z-index: 1;
                            pointer-events: none;
                            background: linear-gradient(180deg, #1E252F -5.34%, rgba(30, 37, 47, 0) 39.75%);
                        } */
                    }

                    .ul-banner-img-vectors>* {
                        position: absolute;
                        z-index: -1;

                    }

                    .ul-banner-img-vectors {
                        .vector-1 {
                            width: 32px;
                            height: 90px;
                            top: clamp(92px, 9.56vw, 182px);
                            left: clamp(50px, 6.31vw, 120px);
                        }

                        .vector-2 {
                            width: 180px;
                            height: 60px;
                            bottom: clamp(40px, 4.73vw, 90px);
                            right: clamp(135px, 12.35vw, 235px);
                        }
                    }
                }
            }
        }
    }

    /* .swiper-container:after {
        content: "";
        position: absolute;
        inset: 0;
        background: url(/static/image/banner-bg-shape.png) no-repeat center center / cover;
        mix-blend-mode: multiply;
        pointer-events: none;
        opacity: 0.46;
    } */
}

@keyframes heroStaggerIn {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.hero-image-placeholder {
    width: min(820px, 100%);
    height: 560px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.16);
    border: 2px dashed rgba(255, 255, 255, 0.45);
}

.home-swiper-pagination {
    bottom: 32px !important;
}

.home-swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
}

.home-swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {

    .swiper-section .swiper-container .hero-slide .hero-slide-left .hero-eyebrow,
    .swiper-section .swiper-container .hero-slide .hero-slide-left .hero-title,
    .swiper-section .swiper-container .hero-slide .hero-slide-left .hero-subtitle,
    .swiper-section .swiper-container .hero-slide .hero-slide-left .hero-more-btn .hero-more-icon,
    .swiper-section .swiper-container .hero-slide .hero-slide-left .hero-more-btn {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* 頭部輪播圖 - end */

/* 計劃簡介 - start */
.plan-intro-section {
    background-color: #ffffff;
    padding: 120px 0;

    .my-container {
        width: 1920px;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .section-content {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 160px;

        .left-wrapper,
        .right-wrapper {
            width: 50%;
        }

        .left-wrapper {
            display: flex;
            align-items: center;
            justify-content: right;
        }

        .right-wrapper {
            display: flex;
            flex-flow: column;
            align-items: flex-start;
            justify-content: flex-start;

            .section-title {
                max-width: 500px;
                text-align: left;
            }

            .section-sub-title {
                width: 100%;
                text-align: left;
                margin: 0;
            }

            .section-detail {
                font-size: 18px;
                line-height: 28px;

            }
        }
    }

    .about-one__image {
        position: relative;
        z-index: 2;
        padding-left: 76px;
        padding-bottom: 76px;

        .about-one__image__one {
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            z-index: 2;

            .about-1-img {
                width: 500px;
                height: auto;
                border-radius: 30px;
            }

            &:hover {
                img {
                    transform: scale(1.05);
                }
            }
        }

        .about-one__image__two {
            width: 280px;
            height: 324px;
            position: absolute;
            left: -42px;
            bottom: -40px;
            z-index: -1;
            border: 10px solid #fff;
            border-radius: 36px;
            overflow: hidden;
            z-index: 2;

            .about-2-img {
                width: 100%;
                height: 100%;
                border-radius: 16px;
                object-fit: cover;
            }

            &:hover {
                img {
                    transform: scale(1.05);
                }
            }
        }

        .about-one__image__shape-one {
            position: absolute;
            left: -180px;
            top: 60px;

            img {
                width: 500px;
                height: auto;
            }
        }

        .about-one__image__shape-two {
            position: absolute;
            right: -52px;
            bottom: 20px;
            z-index: -1;
            /* 旋转90度 */
            transform: rotate(-90deg);

            img {
                max-width: 100%;
                height: auto;
                animation: zoomsIn 3s linear 0s infinite;
            }
        }
    }
}

@keyframes movebounce3 {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes zoomsIn {

    100%,
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.96);
    }
}

/* 計劃簡介 - end */

/* 服务对象 -start */
.service-object-section {
    background-color: var(--main-color);
    position: relative;
    padding: 120px 0;

    .section-title,
    .section-sub-title {
        color: #fff;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/static/image/testimonial-bg-3.webp) no-repeat;
        background-size: 120% auto;
        background-position: bottom center;
        opacity: 0.08;
    }

    .bg-icon {
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* 服務對象：圓形目標項（五欄） */
.service-object-section .object-list {
    position: relative;
    z-index: 2;
    margin-top: clamp(28px, 2.8vw, 48px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 30px);
    margin-left: auto;
    margin-right: auto;
}

.service-object-section .object-item {
    --object-item-bg: none;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-align: center;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: default;
    background-color: var(--deep-blue-color);
}

.service-object-section .object-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: var(--object-item-bg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.4s ease, transform 0.45s ease;
    z-index: 0;
}

.service-object-section .object-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(2, 18, 58, 0.62);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.service-object-section .object-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 1);
}

.service-object-section .object-item:hover::before {
    opacity: 1;
    transform: scale(1);
}

.service-object-section .object-item:hover::after {
    opacity: 1;
}

.service-object-section .object-item__icon {
    position: relative;
    z-index: 2;
    width: clamp(40px, 3.2vw, 60px);
    height: clamp(40px, 3.2vw, 60px);
    flex-shrink: 0;
    margin-bottom: clamp(6px, 0.6vw, 10px);
    border-radius: 10px;
    box-sizing: border-box;
}

.service-object-section .object-item__text {
    position: relative;
    z-index: 2;
    font-size: clamp(11px, 0.85vw, 16px);
    line-height: 1.45;
    font-weight: 600;
    color: #fff;
    display: block;
    max-width: 60%;
    padding-top: 36px;
}

@media (prefers-reduced-motion: reduce) {

    .service-object-section .object-item,
    .service-object-section .object-item::before,
    .service-object-section .object-item::after {
        transition: none;
    }

    .service-object-section .object-item:hover {
        transform: none;
    }
}

/* 服务对象 -end */

/* 酷熱知識卡片 - start */
.knowledge-section {
    background-color: var(--main-color);
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/static/image/bg.webp) no-repeat;
        background-size: cover;
        background-position: bottom center;
        opacity: 0.1;

    }

    .section-title {
        color: #fff;
    }

    .section-sub-title {
        color: #fff;
    }
}

.knowledge-card-wrapper {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.knowledge-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 17px rgb(0 0 0 / 17%);
    position: relative;
    transition: transform 0.3s ease;

    &:hover {
        transform: translateY(-10px);

        .knowledge-card-img {
            &::before {
                transform: translateX(100%);
            }

            img {
                transform: scale(1.1);
            }
        }

        .knowledge-card-title {
            color: var(--orange-color);
        }
    }
}

.knowledge-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        background: rgba(235, 83, 16, 0.2);
        transition: transform 0.3s ease;
        z-index: 2;
    }
}

.knowledge-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.knowledge-card-title {
    margin: 35px 35px 10px 35px;
    color: var(--deep-blue-color);
    font-size: clamp(22px, 1.42vw, 26px);
    line-height: 1.3;
    font-weight: 700;
}

.knowledge-card-text {
    margin: 0 35px 35px 35px;
    color: #8b8b8b;
    font-size: clamp(15px, 0.95vw, 18px);
    line-height: 1.75;
}

/* 酷熱知識卡片 - end */

/* 計劃特色 - start */
.feature-section {
    padding: 120px 0;
    background-image: url(/static/image/pattern1.jpg);
}

.feature-section .section-tip {
    color: var(--orange-color);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.cards-wrapper {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.feature-card {
    background: #fff;
    border: 1px solid rgba(2, 33, 105, 0.1);
    border-radius: 14px;
    padding: 22px 20px 24px;
    box-shadow: 0 8px 24px rgba(2, 33, 105, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(235, 83, 16, 0.08);
    transform: scale(0.7);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(235, 83, 16, 0.5);
    box-shadow: 0 18px 30px rgba(2, 33, 105, 0.15);
}

.feature-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.feature-card-top {
    margin-bottom: 16px;
}

.feature-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease, background 0.35s ease;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px dashed #ffffff;
        animation: 10s linear 0s infinite normal none running rotated;
    }
}

@keyframes rotated {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.feature-card:hover .feature-card-icon {
    transform: rotate(-8deg) scale(1.08);
    background: var(--orange-color);
}

.feature-card-title {
    margin: 0;
    color: var(--deep-blue-color);
    font-size: clamp(21px, 1.3vw, 25px);
    line-height: 1.35;
    font-weight: 700;
    min-height: 64px;
}

.feature-card-desc {
    margin: 12px 0 0;
    color: #667085;
    font-size: clamp(14px, 0.9vw, 17px);
    line-height: 1.75;
}

/* 計劃特色 - end */

/* 服务特色 -start */
.service-feature-section {
    padding: 120px 0;
    background-image: url(/static/image/design1.webp);
    background-size: cover;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #f5f5f5;
        opacity: 0.9;
        z-index: 0;
    }

    .my-container {
        position: relative;
        z-index: 1;
    }
}

/* 服務特色：全幅背景圖卡片 + 磨砂編號／文案區；hover 圖片微放大 */
.service-feature-section .feature-service-list {
    counter-reset: feature-svc;
    display: grid;
    width: 100%;
    box-sizing: border-box;
    /* 桌機預設單列五張卡片：五欄等分 1fr，隨 .my-container 寬度自動伸縮 */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 28px);
    margin-top: clamp(32px, 3vw, 52px);
    margin-left: auto;
    margin-right: auto;
}

.service-feature-section .feature-service-item:not(.spacer) {
    counter-increment: feature-svc;
}

.service-feature-section .feature-service-item {
    position: relative;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    min-height: 380px;
    aspect-ratio: 3 / 4;
    max-height: min(520px, 92vh);
    box-shadow: 0 18px 40px rgba(2, 33, 105, 0.18);
    background: #1a2a44;

    &.spacer {
        background-color: #ffffff;

        &.spacer-1 {
            background: transparent;
            background-color: transparent;
            box-shadow: none;
            border: none;

            .feature-service-item__media {
                img {
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    border-radius: 12px;
                }
            }
        }

        .feature-service-item__media {
            display: flex;
            align-items: center;
            justify-content: center;

            &:before {
                display: none;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0) 38.69%, rgba(255, 255, 255, 0.6) 66.87%, #f1f1f1 100%)
            }

            img {
                width: 80%;
                height: 80%;
                object-fit: contain;
            }
        }
    }
}

@media (hover: hover) {
    .service-feature-section .feature-service-item:hover {
        /* overflow: visible; */
        z-index: 5;
    }
}

.service-feature-section .feature-service-item__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 12px;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 24, 25, 0) 38.69%, rgba(0, 24, 25, 0.6) 66.87%, #001819 100%);
        z-index: 2;
    }
}

.service-feature-section .feature-service-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.service-feature-section .feature-service-item:hover .feature-service-item__media img {
    transform: scale(1.1);
}

.service-feature-section .feature-service-item__badge {
    position: absolute;
    top: clamp(14px, 2vw, 20px);
    right: clamp(14px, 2vw, 20px);
    z-index: 2;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
}

.service-feature-section .feature-service-item__badge::before {
    content: "No – " counter(feature-svc, decimal-leading-zero);
}

.service-feature-section .feature-service-item__panel {
    position: absolute;
    left: clamp(14px, 2.2vw, 20px);
    right: clamp(14px, 2.2vw, 20px);
    bottom: clamp(14px, 2.2vw, 20px);
    z-index: 2;
    padding: 14px 23px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    transition: all 0.6s ease-in-out;
}

.service-feature-section .feature-service-item__title {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
}

.service-feature-section .feature-service-item__desc {
    margin: 0;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    transition: max-height 0.45s ease;
}

/* 單行省略；hover 卡片時還原並讓 panel 撐滿說明（僅精準 hover 裝置） */
@media (hover: hover) {
    .service-feature-section .feature-service-item__desc {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-height: 1.65em;
    }

    .service-feature-section .feature-service-item:hover .feature-service-item__desc {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        max-height: none;
    }

    /* 文案極長時在 panel 內捲動；上限大於卡片高度以便向上擴出仍可讀 */
    .service-feature-section .feature-service-item:hover .feature-service-item__panel {
        max-height: min(88vh, 800px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-feature-section .feature-service-item__media img {
        transition: none;
    }

    .service-feature-section .feature-service-item:hover .feature-service-item__media img {
        transform: none;
    }

    .service-feature-section .feature-service-item__panel,
    .service-feature-section .feature-service-item__desc {
        transition: none;
    }
}

/* 服务特色 - end */

/* blog - start */
.blog-section {
    background-color: var(--main-color);
    position: relative;

    .section-title {
        color: #fff;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/static/image/stats-events-bg-shape.png) no-repeat center center / cover;
        opacity: 0.06;
    }
}

.blog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.blog-more-btn {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px 0 16px;
    border-radius: 999px;
    /* border: 1px solid var(--orange-color); */
    background: var(--orange-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;

    &:hover {
        background: #fff;
        color: var(--orange-color);

        .blog-more-icon {
            color: #ffffff;
            background: var(--orange-color);

            svg {
                width: 16px;
                height: 16px;

                path {
                    fill: #ffffff;
                    transition: all 0.3s ease;
                }
            }
        }

        span {
            color: var(--orange-color);

            svg {
                path {
                    fill: #ffffff;
                    transition: all 0.3s ease;
                }
            }
        }
    }
}

.blog-more-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--orange-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;

    svg {
        width: 16px;
        height: 16px;

        path {
            fill: var(--orange-color);
            transition: all 0.3s ease;
        }
    }
}

.blog-list {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.blog-card-item {
    display: grid;
    grid-template-columns: 42% 1fr;
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    cursor: pointer;

    &:hover {
        .blog-card-img-wrap img {
            transform: scale(1.1);
        }

        .blog-card-title {
            color: var(--orange-color);
        }
    }
}

.blog-card-img-wrap {
    position: relative;
    min-height: 220px;
    border-radius: 15px;
    overflow: hidden;
}

.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.blog-date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.blog-date-badge strong {
    font-size: 16px;
    line-height: 1.2;
    color: var(--orange-color);
}

.blog-date-badge span {
    margin-top: 3px;
    font-size: 16px;
    line-height: 1.2;
    color: var(--orange-color);
    font-weight: 700;
}

.blog-card-content {
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
}

.blog-card-title {
    margin: 0;
    color: #1d2531;
    font-size: 24px;
    line-height: 1.28;
    font-weight: 800;
    margin-bottom: 17px;
}

.blog-card-desc {
    margin-bottom: 12px;
    color: #6c7483;
    font-size: 16px;
    line-height: 1.6;
}

.blog-card-meta-label {
    margin: 0;
    color: var(--orange-color);
    font-size: 15px;
    font-weight: 700;
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
}

.blog-card-meta-value {
    margin: 4px 0 14px;
    color: #818898;
    font-size: 15px;
}

.blog-card-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px 0 12px;
    border-radius: 999px;
    background: var(--orange-color);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    width: fit-content;

    &:hover {
        background: #fff;
        color: var(--orange-color);
        border: 1px solid var(--orange-color);

        span {
            background: var(--orange-color);
            color: #fff;

            svg {
                path {
                    fill: #fff;
                    transition: all 0.3s ease;
                }
            }
        }
    }
}

.blog-card-btn span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: var(--orange-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
        width: 14px;
        height: 14px;

        path {
            fill: var(--orange-color);
            transition: all 0.3s ease;
        }
    }
}

/* blog - end */

/* 計劃目標卡片（新版）- start */
.plan-target-section {
    background-color: #ffffff;
    padding: 120px 0;
    position: relative;
}

.plan-target-section .target-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.plan-target-section .target-card {
    position: relative;
    min-height: 280px;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 10px 28px rgba(2, 33, 105, 0.14);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.plan-target-section .target-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f26b5b 0%, #eb5310 100%);
    z-index: 0;
    transition: transform 0.45s ease;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        content: "";
        opacity: 0.1;
    }
}

.plan-target-section {
    .target-card:nth-child(1) .target-card-bg {
        background: var(--red-color);

        &::before {
            background-image: url(/static/image/1.jpg);
        }
    }

    .target-card:nth-child(2) .target-card-bg {
        background: var(--main-color);

        &::before {
            background-image: url(/static/image/2-1.jpg);
        }
    }

    .target-card:nth-child(3) .target-card-bg {
        background: var(--orange-color);

        &::before {
            background-image: url(/static/image/2-2.jpg);
        }
    }

    .target-card:nth-child(4) .target-card-bg {
        background: var(--deep-blue-color);

        &::before {
            background-image: url(/static/image/3.jpg);
        }
    }
}

.plan-target-section::nth-child(2) {
    background: linear-gradient(135deg, #022169 0%, #02123a 100%);
}

.plan-target-section .target-card-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.plan-target-section .target-card-inner {
    position: relative;
    z-index: 2;
    padding: 0 45px;
    color: #fff;
    height: 100%;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
}

.plan-target-section .target-card-icon-placeholder {
    img {
        width: 60px;
        height: 60px;
    }

    &.heart {
        img {
            width: 72px;
            height: 72px;
        }
    }
}

.plan-target-section .target-card h3 {
    margin-top: 30px;
    font-size: 23px;
    font-weight: 700;
    color: #FFF;
}

.plan-target-section .target-card p {
    margin: 0;
    font-size: clamp(16px, 1vw, 14px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.96);
}

.plan-target-section .target-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(2, 33, 105, 0.25);
}

.plan-target-section .target-card:hover .target-card-bg {
    transform: scale(1.06);
}

.plan-target-section .target-card:hover .target-card-overlay {
    opacity: 0.78;
}

/* 計劃目標卡片（新版）- end */

/* 活動圖片和影片 - start */
.activity-section {
    background-image: url(/static/image/pattern1.jpg);
}

.my-container {
    width: min(1920px, calc(100% - 120px));
    margin: 0 auto;
}

.img-video-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-row {
    display: grid;
    gap: 10px;
}

.gallery-row-1 {
    grid-template-columns: 1fr 1fr;
}

.gallery-grid-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    background: #cfd6df;
    border-radius: 0;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(235, 83, 16, 0.2);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

.gallery-item::after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #EB5310;
    font-size: 36px;
    line-height: 56px;
    text-align: center;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 2;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover::before {
    opacity: 1;
}

.gallery-item:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-item.is-video::after {
    display: none;
}

.video-play-btn {
    position: absolute;
    bottom: 10%;
    right: 6%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    background: rgba(235, 83, 16, 0.32);
    z-index: 3;
    transition: transform 0.35s ease, background 0.35s ease;
}

.video-play-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #fff;
}

.gallery-item.is-video:hover .video-play-btn {
    transform: scale(1.08);
    background: rgba(235, 83, 16, 0.56);
}

.gallery-row-1 .gallery-grid-left .gallery-item {
    aspect-ratio: 340 / 185;
}

.gallery-row-1 .gallery-item-large {
    aspect-ratio: 690 / 380;
}

.gallery-row-2 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-row-2 .gallery-item {
    aspect-ratio: 1 / 0.56;
}

.gallery-row-3 {
    grid-template-columns: 1fr 1fr;
}

.gallery-row-3 .gallery-item-wide {
    aspect-ratio: 690 / 380;
}

.gallery-right-combo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gallery-right-combo>.gallery-item {
    aspect-ratio: 340 / 380;
}

.gallery-right-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.gallery-right-stack .gallery-item {
    aspect-ratio: 340 / 185;
}

.video-preview-wrap {
    width: 100%;
    height: 100%;
    background: #000;
}

/* 活動地圖 - start */
.activity-map-section {
    background-color: #f5f7fb;
    padding-bottom: 180px;
}

.activity-map-section .map-wrapper {
    margin-top: 28px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 28px;
}

.activity-map-section .top-wrapper {
    flex: 1;
    height: fit-content;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(2, 33, 105, 0.1);

    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-map-section .map-img {
    display: block;
    width: 100%;
    height: auto;
    /* 比例為 844/1075 */
    aspect-ratio: 844 / 1075;
    vertical-align: top;
}

.activity-map-section .pin-list {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.activity-map-section .pin-item {
    position: absolute;
    pointer-events: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    transform: translate(-50%, -100%);
    transform-origin: 50% 100%;
    line-height: 0;
    transition: transform 0.25s ease, filter 0.25s ease;

    .pin-1 {
        display: block;
    }

    .pin-2 {
        display: none;
    }
}

.activity-map-section .pin-list .pin-item:nth-child(1) {
    z-index: 1;
}

.activity-map-section .pin-list .pin-item:nth-child(2) {
    z-index: 2;
}

.activity-map-section .pin-list .pin-item:nth-child(3) {
    z-index: 3;
}

.activity-map-section .pin-list .pin-item:nth-child(4) {
    z-index: 4;
}

.activity-map-section .pin-list .pin-item:nth-child(5) {
    z-index: 5;
}

.activity-map-section .pin-item:hover {
    z-index: 20;
}

.activity-map-section .pin-item:focus-visible {
    outline: 2px solid var(--orange-color);
    outline-offset: 4px;
    border-radius: 4px;
}

.activity-map-section .pin-item .pin-img {
    width: 28px;
    height: auto;
    /* filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); */
}

.activity-map-section .pin-list .pin-item.is-active {
    transform: translate(-50%, -100%) scale(1.2);
    z-index: 12;

    .pin-1 {
        display: none;
    }

    .pin-2 {
        display: block;
    }
}

/* .activity-map-section .pin-list .pin-item.is-active .pin-img {
    filter: drop-shadow(0 6px 12px rgba(235, 83, 16, 0.55));
} */

.activity-map-section .bottom-wrapper {
    position: relative;
    width: 50%;
    height: 1075px;
    min-height: 0;
}

.activity-map-section .activity-map-cards-swiper {
    width: 100%;
    height: 100%;
    padding: 0 28px 0 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* 手機版 swiper：單卡直向排列 */
.activity-map-section .activity-map-cards-swiper.mb {
    height: auto;
}

.activity-map-section .activity-map-cards-swiper.mb .swiper-slide {
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    gap: 12px;
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card {
    position: relative;
    height: 174px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    /* box-shadow: 0 0 6px rgba(2, 33, 105, 0.06); */
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: box-shadow 0.28s ease, transform 0.28s ease;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 24, 25, 0) 38.69%, rgba(0, 24, 25, 0.6) 66.87%, #001819 100%);
        z-index: 2;
    }
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card.is-active {
    border: 3px solid var(--orange-color);

    .activity-map-card__title {
        color: var(--orange-color);
    }
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card__media {
    flex: 0 0 42%;
    max-width: 42%;
    min-width: 0;
    overflow: hidden;
    align-self: stretch;
    position: relative;

    .area {
        position: absolute;
        top: 12px;
        left: 12px;
        color: #ffffff;
        font-size: 14px;
        background-color: rgba(235, 83, 16, 1);
        backdrop-filter: blur(2px);
        padding: 3px 14px;
        border-radius: 10px;
    }
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card__media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card__body {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    min-width: 0;

    .date-area {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;

        .area {
            color: var(--orange-color);
            font-size: 14px;
            font-weight: 500;
            background-color: rgba(235, 83, 16, 0.1);
            padding: 2px 12px;
            border-radius: 8px;
        }
    }
}

/* PC 版 swiper：2 列 × 5 行，背景圖 + 底部半透明資訊區 */
/* 輪播內元素不使用 WOW 捲動動畫（非可見 slide 會被 WOW 設為 visibility:hidden） */
.activity-map-section .activity-map-cards-swiper .blog-more-btn.wow {
    visibility: visible !important;
    animation: none !important;
}

.activity-map-section .activity-map-cards-swiper.pc .swiper-slide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card {
    position: relative;
    height: 100%;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 4px solid transparent;
    /* box-shadow: 0 2px 8px rgba(2, 33, 105, 0.1); */
    cursor: pointer;
    transition: box-shadow 0.28s ease, border-color 0.28s ease, transform 0.28s ease;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 24, 25, 0) 38.69%, rgba(0, 24, 25, 0.6) 66.87%, #001819 100%);
        z-index: 2;
    }
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card.is-active {
    border-color: rgba(235, 83, 16, 0.85);
    box-shadow: 0 0 0 1px rgba(235, 83, 16, 0.25), 0 4px 14px rgba(235, 83, 16, 0.18);
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card__media {
    position: absolute;
    inset: 0;
    flex: none;
    max-width: none;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card__body {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    min-width: 0;
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card.is-active .activity-map-card__title {
    color: var(--orange-color);
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card__desc {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    flex: none;
    max-height: calc(1.45em * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word;
}

.activity-map-section .activity-map-cards-swiper.pc .activity-map-card .blog-more-btn {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin-top: 0;
    height: 36px;
    padding: 0 14px 0 8px;
    font-size: 13px;
    flex-shrink: 0;
}

.activity-map-section .activity-map-card__date {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--orange-color);
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
    /* flex:1 會把區塊拉高，在 flex 子項上常導致 line-clamp 只出省略號卻仍多畫一行 */
    flex: 0 1 auto;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    /* 與 line-height 對齊的硬高度上限，雙保險截斷 */
    max-height: calc(1.6em * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 與 blog 區「查看更多」同系：橘色膠囊 + 白圓箭頭 */
.activity-map-section .activity-map-cards-swiper .activity-map-card .blog-more-btn {
    width: fit-content;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: var(--orange-color);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    flex-shrink: 0;
}

.activity-map-section .activity-map-cards-swiper.mb .activity-map-card .blog-more-btn {
    margin-top: 2px;
    align-self: flex-start;
    height: 40px;
    padding: 0 18px 0 10px;
    font-size: 14px;
}

.activity-map-section .activity-map-cards-swiper .activity-map-card .blog-more-btn .blog-more-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: var(--orange-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;

    svg {
        width: 14px;
        height: 14px;

        path {
            fill: var(--orange-color);
            transition: all 0.3s ease;
        }
    }
}

.activity-map-section .activity-map-cards-swiper .activity-map-card .blog-more-btn:hover {
    background: #fff;
    color: var(--orange-color);
    border: 1px solid var(--orange-color);

    svg {
        path {
            fill: #ffffff;
            transition: all 0.3s ease;
        }
    }
}

.activity-map-section .activity-map-cards-swiper .activity-map-card .blog-more-btn:hover .blog-more-icon {
    color: #ffffff;
    background: var(--orange-color);

    svg {
        path {
            fill: #ffffff;
            transition: all 0.3s ease;
        }
    }
}

.activity-map-section .activity-map-cards-swiper .activity-map-card .blog-more-btn:hover span:not(.blog-more-icon) {
    color: var(--orange-color);
}

.activity-map-section .activity-map-cards-pagination {
    right: 4px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    width: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-map-section .activity-map-cards-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(2, 33, 105, 0.25);
    opacity: 1;
}

.activity-map-section .activity-map-cards-pagination .swiper-pagination-bullet-active {
    background: var(--orange-color);
}

/* 活動地圖 - end */

/* 活動圖片和影片 - end */

@media screen and (max-width: 1900px) {
    .swiper-section {
        .swiper-container {
            .hero-slide {
                .hero-slide-left {
                    &.hero-anim-active .hero-title {
                        font-size: 68px;
                    }
                }
            }
        }
    }
}

/* 平板專用-start */
.main-container.is-tablet {
    .swiper-section {
        .swiper-container {
            max-height: 550px;

            .hero-slide {
                flex-direction: row;

                &::after {
                    width: 50%;
                }

                .hero-slide-left,
                & .hero-slide-right {
                    & .ul-banner-img {
                        & .ul-banner-img-vectors {
                            .vector-2 {
                                bottom: 25px;
                                right: 80px;
                            }
                        }
                    }
                }
            }
        }
    }

    .service-object-section .object-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 平板專用-end */