/*******************/
/**** 初始 Video ****/
/*******************/

.video-box {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.home_video {
    width: 100%;
}

.home_click_area {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

/*****************/
/**** 初始動畫 ****/
/*****************/

.start-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100111;
    background-color: #000;
}

.start-title {
    position: absolute;
    left: 36%;
    top: 12%;
}


/* 模擬雪動畫 */
.circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    filter: blur(4px);
}

/* 初始動畫 第一頁（按鈕） */
.windwos-go {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    background: url("../images/pic/0/bg.jpg");
    z-index: 1000;
    cursor: pointer;
}

.windwos-go .windwos-go-btn {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 30%;
    left: 42%;
    animation: float 3s ease-in-out infinite;
    transition: all 0.3s;
    opacity: 0.8;
    transform: rotate(0deg);
    cursor: pointer;
    /* 指定動畫時間為 1 秒 */
    z-index: 51111;
}

.windwos-go .windwos-go-btn:hover {
    opacity: 1;
    /* 滑鼠經過時旋轉 360 度 */
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.windows-go-c1{
    position: absolute;
    bottom: -70px;
    right: 150px;
    transform: rotate(70deg);
    animation: swing3 5s ease-in-out infinite;
}

@keyframes swing3 {

    0%,
    100% {
        transform: rotate(70deg);
    }

    50% {
        transform: rotate(75deg);
    }
}
.windows-go-c2{
    position: absolute;
    bottom:-80px;
    left: 160px;
    transform: rotate(145deg);
    animation: swing2 5s ease-in-out infinite;
}

@keyframes swing2 {

    0%,
    100% {
        transform: rotate(145deg);
    }

    50% {
        transform: rotate(140deg);
    }
}


/* 動畫開始 */
@keyframes animationFadIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.index-show-3 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}


.active-show .index-show-3 {
    animation: box-fade-in2 3.5s ease-in-out 0s forwards;
}

@keyframes box-fade-in2 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 第三個 */

.index-show-3 {
    width: 100%;
    height: 100%;
    background: url("../images/pic/0/3_bg.jpg") no-repeat center center;
}

.index3_l_1 {
    position: absolute;
    top: 32%;
    left: 43%;
    opacity: 0;
}

.active-show .index3_l_1 {
    animation: animationFadIn 1s ease-in-out 0.2s forwards;
}

.index3_l_1 img {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(8);
    }

    50% {
        transform: translateY(-8px);
    }
}

.index3_i_1 {
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
}

.active-show .index3_i_1 {
    animation: animationFadIn 1s ease-in-out 0.3s forwards;
}

.index3_i_2 {
    position: absolute;
    top: 0%;
    right: 0%;
    opacity: 0;
}

.active-show .index3_i_2 {
    animation: animationFadIn 1s ease-in-out 0.6s forwards;
}

.index3_i_3 {
    position: absolute;
    top: 0%;
    right: -10%;
    opacity: 0;
}

.active-show .index3_i_3 {
    animation: animationFadIn 1s ease-in-out 0.9s forwards;
}

.index3_i_3 img {
    animation: swing 5s ease-in-out infinite;
}

.index3_i_3_2 {
    position: absolute;
    top: 67%;
    right: -3%;
    opacity: 0;
    transform: rotate(67deg);
}

.active-show .index3_i_3_2 {
    animation: animationFadIn 1s ease-in-out 0.9s forwards;
}

.index3_i_3_2 img {
    animation: swing 5s ease-in-out infinite;
}

@keyframes swing {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

.index3_i_4 {
    position: absolute;
    top: 4%;
    right: 4%;
}

/* 略過動畫 */

.skip {
    position: absolute;
    bottom: 2%;
    right: 1.5%;
    z-index: 999999;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    letter-spacing: 0.1em;
    padding: 15px;
    border-radius: 6px;
    font-size: 18px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    border:1px #fff solid;
    transition: all 0.3s;
    cursor: pointer;
}

.skip:hover {
    bottom: 1.8%;
    right: 1.3%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

/* 選單 */

.start-menu {
    list-style: none;
    position: absolute;
    left: 57%;
    top: 39%;
}

.start-menu li {
    cursor: pointer;
    opacity: 0;
}

.start-menu li:nth-child(1) {
    display: inline-block;
    width: 72px;
    height: 163px;
    background: url("../images/pic/0/btn/b1.png");
    animation: animationFadIn 1s ease-in-out 0.3s forwards;
}

.start-menu li:nth-child(2) {
    display: inline-block;
    width: 72px;
    height: 163px;
    background: url("../images/pic/0/btn/b2.png");
    animation: animationFadIn 1s ease-in-out 0.5s forwards;
}

.start-menu li:nth-child(3) {
    display: inline-block;
    width: 72px;
    height: 163px;
    background: url("../images/pic/0/btn/b3.png");
    animation: animationFadIn 1s ease-in-out 0.7s forwards;
}

.start-menu li:nth-child(4) {
    display: inline-block;
    width: 72px;
    height: 163px;
    background: url("../images/pic/0/btn/b4.png");
    animation: animationFadIn 1s ease-in-out 0.9s forwards;
}

.start-menu li:nth-child(1):hover {
    background: url("../images/pic/0/btn/h1.png");
}

.start-menu li:nth-child(2):hover {
    background: url("../images/pic/0/btn/h2.png");
}

.start-menu li:nth-child(3):hover {
    background: url("../images/pic/0/btn/h3.png");
}

.start-menu li:nth-child(4):hover {
    background: url("../images/pic/0/btn/h4.png");
}