@charset "UTF-8";
.mb-slider {
    display: none;
}
/* 手機版顯示 mb-slider */
@media (max-width:50rem){
.mb-slider {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #141414;
}
}

.mb-slide1,
.mb-slide2,
.mb-slide3,
.mb-slide5,
.mb-slide6 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #141414;
}
/* 隱藏 HTML 中不存在的 mb-slide4 */
.mb-slide4 {
    display: none;
}

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

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

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

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

.mb-slide6 {
    background: url(../img/mb-slide6.jpg);
    background-size: cover;
    background-position: top center;
    -webkit-animation: fade6 15s infinite;
    animation: fade6 15s infinite;
}

/* 動畫定義：5 張圖片輪播，每張顯示約 3 秒（總時長 15 秒） */
@-webkit-keyframes fade {
    0% { opacity: 1; }
    20% { opacity: 1; }
    24% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade {
    0% { opacity: 1; }
    20% { opacity: 1; }
    24% { opacity: 0; }
    100% { opacity: 0; }
}

@-webkit-keyframes fade2 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    24% { opacity: 1; }
    40% { opacity: 1; }
    44% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade2 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    24% { opacity: 1; }
    40% { opacity: 1; }
    44% { opacity: 0; }
    100% { opacity: 0; }
}

@-webkit-keyframes fade3 {
    0% { opacity: 0; }
    40% { opacity: 0; }
    44% { opacity: 1; }
    60% { opacity: 1; }
    64% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade3 {
    0% { opacity: 0; }
    40% { opacity: 0; }
    44% { opacity: 1; }
    60% { opacity: 1; }
    64% { opacity: 0; }
    100% { opacity: 0; }
}

@-webkit-keyframes fade4 {
    0% { opacity: 0; }
    60% { opacity: 0; }
    64% { opacity: 1; }
    80% { opacity: 1; }
    84% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade4 {
    0% { opacity: 0; }
    60% { opacity: 0; }
    64% { opacity: 1; }
    80% { opacity: 1; }
    84% { opacity: 0; }
    100% { opacity: 0; }
}

@-webkit-keyframes fade5 {
    0% { opacity: 0; }
    60% { opacity: 0; }
    64% { opacity: 1; }
    80% { opacity: 1; }
    84% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade5 {
    0% { opacity: 0; }
    60% { opacity: 0; }
    64% { opacity: 1; }
    80% { opacity: 1; }
    84% { opacity: 0; }
    100% { opacity: 0; }
}

@-webkit-keyframes fade6 {
    0% { opacity: 0; }
    80% { opacity: 0; }
    84% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes fade6 {
    0% { opacity: 0; }
    80% { opacity: 0; }
    84% { opacity: 1; }
    100% { opacity: 1; }
}

/* ============================================
   Page-1 特定動畫順序：mb-slide2, mb-slide1, mb-slide3, mb-slide5, mb-slide6
   ============================================ */
body.page-1 .mb-slide2 {
    -webkit-animation: fade 15s infinite;
    animation: fade 15s infinite;
}
body.page-1 .mb-slide1 {
    -webkit-animation: fade2 15s infinite;
    animation: fade2 15s infinite;
}
body.page-1 .mb-slide3 {
    -webkit-animation: fade3 15s infinite;
    animation: fade3 15s infinite;
}
body.page-1 .mb-slide5 {
    -webkit-animation: fade5 15s infinite;
    animation: fade5 15s infinite;
}
body.page-1 .mb-slide6 {
    -webkit-animation: fade6 15s infinite;
    animation: fade6 15s infinite;
}

/* ============================================
   Page-2 特定動畫順序：mb-slide6, mb-slide1, mb-slide2, mb-slide3, mb-slide5
   ============================================ */
body.page-2 .mb-slide6 {
    -webkit-animation: fade 15s infinite;
    animation: fade 15s infinite;
}
body.page-2 .mb-slide1 {
    -webkit-animation: fade2 15s infinite;
    animation: fade2 15s infinite;
}
body.page-2 .mb-slide2 {
    -webkit-animation: fade3 15s infinite;
    animation: fade3 15s infinite;
}
body.page-2 .mb-slide3 {
    -webkit-animation: fade5 15s infinite;
    animation: fade5 15s infinite;
}
body.page-2 .mb-slide5 {
    -webkit-animation: fade6 15s infinite;
    animation: fade6 15s infinite;
}