@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,
.slide6 {
    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 21s infinite;
    animation: fade1 21s infinite;
}

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

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

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

/* 第一張 slide 多停 1.5 秒，其餘 5 張均分 */
@-webkit-keyframes fade {
    0% { opacity: 1; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fade {
    0% { opacity: 1; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fade2 {
    0% { opacity: 0; }
    21% { opacity: 1; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes fade2 {
    0% { opacity: 0; }
    21% { opacity: 1; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 0; }
}

@-webkit-keyframes fade3 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 1; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes fade3 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 1; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 0; }
}

@-webkit-keyframes fade4 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 1; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes fade4 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 1; }
    68% { opacity: 0; }
    84% { opacity: 0; }
    to { opacity: 0; }
}

@-webkit-keyframes fade5 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 1; }
    84% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes fade5 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 1; }
    84% { opacity: 0; }
    to { opacity: 0; }
}
@-webkit-keyframes fade6 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fade6 {
    0% { opacity: 0; }
    21% { opacity: 0; }
    37% { opacity: 0; }
    53% { opacity: 0; }
    68% { opacity: 0; }
    84% { opacity: 1; }
    to { opacity: 0; }
}