.swiper {
    --swiper-theme-color: #000;
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
}

/* ------------------------------------------------------------ */

/* 頭部區輪播圖 */
.Swiper-heading-slide {
    /* .swiper-slide {
        position: relative;
        width: 100%;
        height: 100%;
    } */

    .swiper-slide-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
        color: #333;
    }

    .swiper-slide-mask {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 75%;
        z-index: 1;
        background: linear-gradient(to bottom,
                rgba(26, 26, 26, 0),
                rgba(26, 26, 26, 0.3),
                rgba(26, 26, 26, 1));
    }

}

/* ------------------------------------------------------------ */

/* 橫向輪播圖 */

.Swiper-horizontal-slide {

    .swiper-slide img {
        transition: transform 800ms ease;
    }

    .swiper-slide:hover img {
        transform: scale(1.1);
        transition-duration: 800ms;
    }

    .circle-btn-next::after,
    .circle-btn-prev::after {
        content: "";
    }

    /* .circle-nav-wrapper {
        position: absolute;
        width: fit-content;
        top: 48px;
        right: 200px;
        z-index: 2;
    } */

}

/* ------------------------------------------------------------ */

/* 滿版輪播圖 */
.Swiper-full-screen-slide {
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #444;
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

    .swiper-button-next::after,
    .swiper-button-prev::after {
        content: "";
    }

}

/* ------------------------------------------------------------ */

/* 縱向輪播圖 */
.Swiper-product-wheel-slide {

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        height: 100vh;
        text-align: center;
        font-size: 18px;
        background: #444;
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

}