@charset "UTF-8";

.slider {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #141414;
    overflow: hidden;
}

.slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
    animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}
@media (max-width:50rem){
.slider {
    display: none;
}
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5,
.slide6 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #141414;
    will-change: transform, opacity, filter;
    transition: transform 0.3s ease-out;
}

.slide1 {
    background: url(../img/slide1.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: specialFade 15s infinite;
    animation: specialFade 15s infinite;
    transform-origin: center center;
}

.slide2 {
    background: url(../img/slide2.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: specialFade2 15s infinite;
    animation: specialFade2 15s infinite;
    transform-origin: center center;
}

.slide3 {
    background: url(../img/slide3.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: specialFade3 15s infinite;
    animation: specialFade3 15s infinite;
    transform-origin: center center;
}

.slide4 {
    background: url(../img/slide4.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: specialFade4 15s infinite;
    animation: specialFade4 15s infinite;
    transform-origin: center center;
}
.slide5 {
    background: url(../img/slide5.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: specialFade5 15s infinite;
    animation: specialFade5 15s infinite;
    transform-origin: center center;
}
.slide6 {
    background: url(../img/slide6.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: specialFade6 15s infinite;
    animation: specialFade6 15s infinite;
    transform-origin: center center;
}

/* 特別的動畫效果 - 結合縮放、模糊和淡入淡出 */
@-webkit-keyframes specialFade {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    16.6% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    33.2% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    91% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
}

@keyframes specialFade {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    16.6% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    33.2% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    91% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
}

@-webkit-keyframes specialFade2 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    8% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    24.6% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    33.2% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}

@keyframes specialFade2 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    8% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    24.6% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    33.2% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}

@-webkit-keyframes specialFade3 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    25.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    41.2% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}

@keyframes specialFade3 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    25.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    41.2% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}

@-webkit-keyframes specialFade4 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    42% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    58% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}

@keyframes specialFade4 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    42% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    58% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    66.5% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}


@-webkit-keyframes specialFade5 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    50% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    58.5% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    66.5% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    74.5% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}

@keyframes specialFade5 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    50% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    58.5% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    66.5% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    74.5% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    83% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}
@-webkit-keyframes specialFade6 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    50% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    66.5% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    75% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    83% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    91% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}

@keyframes specialFade6 {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    16.6% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    33.2% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    50% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    66.5% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    75% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px) brightness(0.9);
    }
    83% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
    91% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0px) brightness(1.1);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(3px) brightness(0.8);
    }
}