/* Start Button */

.start-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100111;
    background: url(../images/pic/0/bg.jpg);
    /* animation: CSSAnimationFadeIn1 1s ease-in-out 0s forwards;
    opacity: 0; */
}

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

    100% {
        opacity: 1;
    }
}

/* 光條 開始 */

.light-shadow-slide {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    transition-duration: 15s;
    width: 100%;
    height: 100%;
}

.light-shadow-slide:before {
    content: "";
    position: absolute;
    width: 2920px;
    height: 600px;
    background-image: linear-gradient(to bottom, transparent, rgba(255, 253, 253, 0.1), transparent);
    transform: rotate(-45deg);
    opacity: 0.4;
    animation: light-shadow-slide 5s ease-in 1s infinite;
    /* opacity: 0.15; */
    left: -1000px;
    top: -1000px;
}

@keyframes light-shadow-slide {
    0% {
        left: -1000px;
        top: -1000px;
    }

    25% {
        left: 200px;
        top: 1000px;
    }

    100% {
        left: 200px;
        top: 1000px;
    }
}

/* 光條 結束 */

#start-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    cursor: pointer;
}

.logo1 {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    width: 100%;
    text-align: center;
    animation: fade_in_2 0.6s ease-in-out 0.5s forwards;
    opacity: 0;
}

@keyframes fade_in_2 {
    0% {
        top: 25%;
        opacity: 0;
    }

    100% {
        top: 28%;
        opacity: 1;
    }
}

.start {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 45%;
    width: 100%;
    text-align: center;
    animation: fade_in_3 0.8s ease-in-out 0.7s forwards;
    opacity: 0;
}

@keyframes fade_in_3 {
    0% {
        top: 53%;
        opacity: 0;
    }

    100% {
        top: 50%;
        opacity: 1;
    }
}


/* 第二頁 動畫開始 */

.s1 {
    opacity: 0.3;
    z-index: 1;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.active-show .s1 {
    animation: fade_in_0 5s ease-in-out 0.5s infinite;
}

@keyframes fade_in_0 {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

.s2 {
    opacity: 0.3;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}

.active-show .s2 {
    animation: fade_in_1 3.6s ease-in-out 0s infinite;
}

.s3 {
    opacity: 0.3;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}

.active-show .s3 {
    animation: fade_in_1 1.8s ease-in-out 0.9s infinite;
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* active-show */

/* 選單開始 */

.black {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
}

.active-show .black {
    animation: fade_in_6 1s ease-in-out 0s forwards;
    opacity: 0;
}

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

    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.logo2 {
    position: absolute;
    top: 37%;
    left: 36%;
    opacity: 0;
}

.active-show .logo2 {
    position: absolute;
    top: 37%;
    left: 37%;
    animation: fade_in_4 0.8s ease-in-out 1.2s forwards;
    opacity: 0;
}

@keyframes fade_in_4 {
    0% {
        top: 40%;
        opacity: 0;
    }

    100% {
        top: 37%;
        opacity: 1;
    }
}

.logo3 {
    position: absolute;
    opacity: 0;
}

.active-show .logo3 {
    position: absolute;
    top: 15%;
    left: 43.5%;
    animation: fade_in_7 0.6s ease-in-out 1s forwards; 
    opacity: 0;
}

@keyframes fade_in_7 {
    0% {
        top: 11%;
        opacity: 0;
    }

    100% {
        top: 15%;
        opacity: 1;
    }
}

.sb-menu {
    position: absolute;
    top: 75.5%;
    width: 100%;
    text-align: center;
    z-index: 10;
    padding: 0;
}

.sb-menu li {
    display: inline-block;
}

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

    100% {
        opacity: 1;
    }
}

.sb-m1 {
    display: block;
    width: 165px;
    height: 78px;
    background-image: url(../images/pic/0/menu/1.png);
    cursor: pointer;
    margin-bottom: 40px;
    opacity: 0;
}

.active-show .sb-m1 {
    animation: fade_in_5 0.6s ease-in-out 1.5s forwards;
    opacity: 0;
}

.sb-m2 {
    display: block;
    width: 165px;
    height: 78px;
    background-image: url(../images/pic/0/menu/2.png);
    cursor: pointer;
    margin-bottom: 40px;
    opacity: 0;
}

.active-show .sb-m2 {
    animation: fade_in_5 0.6s ease-in-out 1.6s forwards;
    opacity: 0;
}

.sb-m3 {
    display: block;
    width: 165px;
    height: 78px;
    background-image: url(../images/pic/0/menu/3.png);
    cursor: pointer;
    margin-bottom: 40px;
    opacity: 0;
}

.active-show .sb-m3 {
    animation: fade_in_5 0.6s ease-in-out 1.7s forwards;
    opacity: 0;
}

.sb-m4 {
    display: block;
    width: 165px;
    height: 78px;
    background-image: url(../images/pic/0/menu/4.png);
    cursor: pointer;
    margin-bottom: 40px;
    opacity: 0;
}

.active-show .sb-m4 {
    animation: fade_in_5 0.6s ease-in-out 1.8s forwards;
    opacity: 0;
}

.sb-m5 {
    display: block;
    width: 165px;
    height: 78px;
    background-image: url(../images/pic/0/menu/5.png);
    cursor: pointer;
    margin-bottom: 40px;
    opacity: 0;
}

.active-show .sb-m5 {
    animation: fade_in_5 0.6s ease-in-out 1.9s forwards;
    opacity: 0;
}

.sb-m1:hover {
    background-image: url(../images/pic/0/menu/6.png);
}

.sb-m2:hover {
    background-image: url(../images/pic/0/menu/7.png);
}

.sb-m3:hover {
    background-image: url(../images/pic/0/menu/8.png);
}

.sb-m4:hover {
    background-image: url(../images/pic/0/menu/9.png);
}

.sb-m5:hover {
    background-image: url(../images/pic/0/menu/10.png);
}


/* .active-show .sb-m1 {
    animation: IndexCSSAnimationFadeIn1 0.5s ease-in-out 1.7s forwards;
    opacity: 0;
}

.active-show .sb-m2 {
    animation: IndexCSSAnimationFadeIn1 0.5s ease-in-out 1.8s forwards;
    opacity: 0;
}

.active-show .sb-m3 {
    animation: IndexCSSAnimationFadeIn1 0.5s ease-in-out 1.9s forwards;
    opacity: 0;
}

.active-show .sb-m4 {
    animation: IndexCSSAnimationFadeIn1 0.5s ease-in-out 2s forwards;
    opacity: 0;
}
.active-show .sb-m4 {
    animation: IndexCSSAnimationFadeIn1 0.5s ease-in-out 2s forwards;
    opacity: 0;
} */

/* 選單結束 */