@charset "UTF-8";

:root {
    --primary-default: #fd2f36;
    --primary-dark: #476867;

    --sub-tint: #f3f585;

    --color-gray: #232429; /* Same */
    --color-gray-900: #393a3f; /* New */
    --color-gray-800: #55565b; /* Davi's Grey */
    --color-gray-700: #75767b; /* Moiety */
    --color-gray-600: #828388; /* Old Silver */
    --color-gray-500: #919297; /* Gray Blue */
    --color-gray-400: #adaeb3; /* Gravity */
    --color-gray-300: #c1c2c7; /* Seashell */
    --color-gray-200: #d3d4d9; /* Light Gray */
    --color-gray-100: #dedfe4; /* Light Diamond */
    --color-gray-050: #f3f4f9; /* White Smoke */
    --color-gray-025: #f9faff; /* White Smoke Light */

    --inquiry-default: rgb(255, 153, 0);
    --inquiry-dark: rgb(255, 153, 0);
}

/* >swiper 設定 =============================================*/
.swiper-banner.swiper {
    width: 100%;
}
.swiper-banner.swiper img {
    width: 100%;
    max-height: 790px; /* 固定高度 */

    -o-object-fit: cover;
    object-fit: cover;
}

.swiper-slide .banner-hgroup {
    position: absolute;
    top: 50%;
    right: 18vw;
    transform: translateY(-50%);
    font-family: 'Libre Baskerville', serif;
    letter-spacing: 0.2rem;
    text-align: center;
    color: var(--primary-dark);
    line-height: 1.5;
}
.swiper-slide .banner-hgroup h2 {
    font-size: clamp(24px, 4vw, 48px);
    margin-bottom: 0;
}
.swiper-slide .banner-hgroup p {
    font-size: 24px;
}
.swiper-slide .banner-hgroup .banner-span {
    margin-top: 2.4rem;
    font-size: 18px;
    display: inline-block;
}
@media (max-width: 991px) {
    .swiper-slide .banner-hgroup p,
    .swiper-slide .banner-hgroup .banner-span {
        display: none;
    }
}
@media (max-width: 767px) {
    .swiper-slide .banner-hgroup {
        right: 5vw;
        top: 35%;
        padding: 0.8rem 1.6rem;
        background-color: rgba(255, 255, 255, 0.5333333333);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-radius: 5px;
    }
}

/* Video設定 */
.swiper-banner.swiper .swiper-slide video {
    width: 100%;
    max-height: 790px; /* 固定高度 */
    object-fit: cover; /* 裁切並填滿容器 */
    object-position: center; /* 以底部對齊 */
}

/*分頁設定*/
.swiper-banner .swiper-pagination {
    width: 100%;
    left: auto;
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    bottom: 1.6vw;
}

@media (max-width: 767px) {
    .swiper-banner .swiper-pagination {
        bottom: 2vw;
        gap: 0.8rem;
    }
}
.swiper-banner .swiper-pagination-bullet {
    width: -moz-max-content;
    width: max-content;
    height: -moz-max-content;
    height: max-content;
    background: transparent;
    color: var(--color-gray-800);
    opacity: 1;
    display: flex;
    align-items: center;
}

.swiper-banner .swiper-pagination-bullet:hover,
.swiper-banner .swiper-pagination-bullet:focus {
    border: none;
    outline: none;
}

.swiper-banner .swiper-pagination h5 {
    font-size: 16px;
    margin-right: 0rem;
    display: inline-block;
    background: var(--sub-tint);
    border-radius: 50%;
    padding: 0.8rem;

    display: none;
}

.swiper-banner .swiper-pagination span {
    position: relative;
    display: inline-block;
    width: clamp(5rem, 8vw, 10rem);
    height: 2px;
    background-color: #fff;
    border-radius: 0 5px 5px 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.swiper-banner .swiper-pagination span::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-default);
}

.swiper-banner .swiper-pagination-bullet-active span::after {
    animation: width-0-100 14s linear forwards;
}

/*左右箭頭*/
.swiper-banner .swiper-button-next::after,
.swiper-banner .swiper-button-prev::after {
    display: none;
}
.swiper-banner .swiper-button-next,
.swiper-banner .swiper-button-prev {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-in-out;
    /* 讓背景箭頭置中 + 自適應大小 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20% auto; /* 箭頭大小佔圓的50%，可依需求調整 */
}
.swiper-banner .swiper-button-next:hover,
.swiper-banner .swiper-button-prev:hover {
    transform: translateY(-50%) scale(1.1);
}
@media (max-width: 767px) {
    .swiper-banner .swiper-button-next,
    .swiper-banner .swiper-button-prev {
        display: none;
    }
}
.swiper-banner .swiper-button-prev {
    background-position: 75% center;
    left: -100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'><path d='M25.4537 7.37401C25.6341 7.18307 25.7752 6.95846 25.8688 6.713C25.9625 6.46754 26.0068 6.20605 25.9994 5.94344C25.992 5.68084 25.9329 5.42227 25.8255 5.1825C25.7182 4.94272 25.5647 4.72645 25.3737 4.54601C25.1828 4.36557 24.9582 4.22451 24.7127 4.13088C24.4672 4.03725 24.2057 3.99288 23.9431 4.00031C23.6805 4.00774 23.422 4.06682 23.1822 4.17418C22.9424 4.28153 22.7261 4.43507 22.5457 4.62601L5.54571 22.626C5.19464 22.9973 4.99902 23.489 4.99902 24C4.99902 24.511 5.19464 25.0027 5.54571 25.374L22.5457 43.376C22.725 43.5711 22.9412 43.7287 23.1818 43.8395C23.4225 43.9504 23.6828 44.0123 23.9476 44.0217C24.2123 44.0311 24.4764 43.9878 24.7243 43.8943C24.9722 43.8009 25.1991 43.659 25.3917 43.4771C25.5843 43.2952 25.7389 43.0768 25.8465 42.8347C25.954 42.5925 26.0123 42.3314 26.0181 42.0665C26.0239 41.8016 25.9769 41.5382 25.8801 41.2916C25.7832 41.045 25.6382 40.8201 25.4537 40.63L9.74971 24L25.4537 7.37401Z' fill='%23fd2f36'/></svg>");
}
.swiper-banner .swiper-button-next {
    background-position: 25% center;
    right: -100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'><path d='M22.5463 7.37401C22.3659 7.18307 22.2248 6.95846 22.1312 6.713C22.0375 6.46754 21.9932 6.20605 22.0006 5.94344C22.008 5.68084 22.0671 5.42227 22.1745 5.1825C22.2818 4.94272 22.4353 4.72645 22.6263 4.54601C22.8172 4.36557 23.0418 4.22451 23.2873 4.13088C23.5328 4.03725 23.7943 3.99288 24.0569 4.00031C24.3195 4.00774 24.578 4.06682 24.8178 4.17418C25.0576 4.28153 25.2739 4.43507 25.4543 4.62601L42.4543 22.626C42.8054 22.9973 43.001 23.489 43.001 24C43.001 24.511 42.8054 25.0027 42.4543 25.374L25.4543 43.376C25.275 43.5711 25.0588 43.7287 24.8182 43.8395C24.5775 43.9504 24.3172 44.0123 24.0524 44.0217C23.7877 44.0311 23.5236 43.9878 23.2757 43.8943C23.0278 43.8009 22.8009 43.659 22.6083 43.4771C22.4157 43.2952 22.2611 43.0768 22.1535 42.8347C22.046 42.5925 21.9877 42.3314 21.9819 42.0665C21.9761 41.8016 22.0231 41.5382 22.1199 41.2916C22.2168 41.045 22.3618 40.8201 22.5463 40.63L38.2503 24L22.5463 7.37401Z' fill='%23fd2f36'/></svg>");
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6), 0 0 0 12px rgba(255, 255, 255, 0.4), 0 0 0 24px rgba(255, 255, 255, 0.2);
    }
    25% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.45), 0 0 0 25px rgba(255, 255, 255, 0.25), 0 0 0 45px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 40px rgba(255, 255, 255, 0.15), 0 0 0 70px rgba(255, 255, 255, 0);
    }
    75% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.15), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 45px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6), 0 0 0 12px rgba(255, 255, 255, 0.4), 0 0 0 24px rgba(255, 255, 255, 0.2);
    }
}

@keyframes width-0-100 {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}