@charset "UTF-8";

.slider {
    display: block;

    width: 100%;
    height: 100%;
    position: relative;
    background-color: #141414
}
@media (max-width:50rem){
.slider {
    display: none;
}
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #141414;
}

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

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

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

.slide4 {
    background: url(../img/slide4.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: fade 15s infinite;
    animation: fade4 15s infinite;
}
.slide5 {
    background: url(../img/slide5.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: fade 15s infinite;
    animation: fade5 15s infinite;
}

/*幾張動態100%去除*/
@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    16.6% {
        opacity: 0;
    }

    33.2% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    66.5% {
        opacity: 0;
    }

    83% {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fade3 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade3 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fade4 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade4 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}


@-webkit-keyframes fade5 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade5 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}