/*音乐*/

.music_blk {
    z-index: 999;
    position: fixed;
    right: 5px;
    top: 5px;
    display: none
}

.music {
    display: block;
    width: 30px;
    height: 30px;
    background: url('../images/music_on.png') no-repeat;
    background-size: 100% 100%;
}

.music_on {
    -webkit-animation: rotate 1.2s linear infinite;
    animation: rotate 1.2s linear infinite;
}

@keyframes rotate {
    0% {}
    100% {
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {}
    100% {
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
    }
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
}

.loadWrap {
    /*    display: none;*/
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p1.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.l_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p0.2.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.l_2 {
    position: absolute;
    width: 36%;
    height: 25%;
    left: 32%;
    top: 18%;
    background-image: url("../images/p0.2.gif?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.page0 {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}

.p0_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p0.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p0_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p0.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p0_3 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p0.4.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p0_click {
    position: absolute;
    width: 39%;
    height: 8%;
    left: 30.6%;
    top: 78%;
}

.p0_skip {
    display: none;
    position: absolute;
    width: 16%;
    height: 5%;
    left: 80.6%;
    top: 92%;
}

.video_div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

#video1_1 {
    position: absolute;
    object-fit: fill;
}
#video2_1{
    position: absolute;
}
.page1 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p1.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p1_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p1.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.ani .p1_1 {
    animation: fadeInLeft 1s 1s linear both;
    -webkit-animation: fadeInLeft 1s 1s linear both;
}

.p1_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p1.2.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.ani .p1_2 {
    animation: fadeIn 2s 2.5s linear both;
    -webkit-animation: fadeIn 2s 2.5s linear both;
}

.p1_3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p1.3.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.ani .p1_3 {
    animation: fadeInUp 1s 4s linear both;
    -webkit-animation: fadeInUp 1s 4s linear both;
}

.p1_arrow {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 42%;
    top: 95%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.ani .p1_arrow {
    animation: arrow 1s 5s linear infinite;
    -webkit-animation: arrow 1s 5s linear infinite;
}

@keyframes arrow {
    0% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        opacity: 0;
    }
    100% {
        transform: translateY(-70%);
        -webkit-transform: translateY(-70%);
        opacity: 1;
    }
}

@-webkit-keyframes arrow {
    0% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        opacity: 0;
    }
    100% {
        transform: translateY(-70%);
        -webkit-transform: translateY(-70%);
        opacity: 1;
    }
}

.page2 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p2.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p2_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p2.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 1.5s 1s linear both;
    -webkit-animation: fadeIn 1.5s 1s linear both;
}

.p2_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p2.2.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 1.5s 2.5s linear both;
    -webkit-animation: fadeIn 1.5s 2.5s linear both;
}

.p2_3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p2.3.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 1.5s 4.5s linear both;
    -webkit-animation: fadeIn 1.5s 4.5s linear both;
}

.p2_4 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p2.4.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 1.5s 6s linear both;
    -webkit-animation: fadeIn 1.5s 6s linear both;
}

.p2_arrow {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 42%;
    top: 95%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: arrow 1s 7.5s linear both;
    -webkit-animation: arrow 1s 7.5s linear infinite;
}

.page3 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

#canvas {
    position: absolute;
}

.p3_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-image: url("../images/p3.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: p3_1 3s linear both;
    -webkit-animation: p3_1 3s linear both;
}

@keyframes p3_1 {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes p3_1 {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.p3_2 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p3.2.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p3_3 {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p3.3.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.ani .p3_3 {
    animation: fadeIn 2s linear both;
    -webkit-animation: fadeIn 2s linear both;
}

.p3_arrow {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 42%;
    top: 95%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.ani .p3_arrow {
    animation: arrow 1s 3s linear both;
    -webkit-animation: arrow 1s 3s linear infinite;
}

.p3_click {
    display: none;
    position: absolute;
    width: 39%;
    height: 8%;
    left: 31%;
    top: 78%;
}

.page4 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p4.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p4_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p4.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: p3_1 3s linear both;
    -webkit-animation: p3_1 3s linear both;
}

.p4_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p4.2.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 2s 3s linear both;
    -webkit-animation: fadeIn 2s 3s linear both;
}

.p4_arrow {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 42%;
    top: 95%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: arrow 1s 5s linear both;
    -webkit-animation: arrow 1s 5s linear infinite;
}

.page5 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p5.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p5_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p5.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: p3_1 3s linear both;
    -webkit-animation: p3_1 3s linear both;
}

.p5_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p5-1.jpg?1");
    opacity: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fadeIn 2s 2s linear both;
    -webkit-animation: fadeIn 2s 2s linear both;
}

.p5_3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p5.2.png?1");
    opacity: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fadeIn 1s 4s linear both;
    -webkit-animation: fadeIn 1s 4s linear both;
}

.p5_4 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p5.3.png?1");
    opacity: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fadeIn 1s 5.5s linear both;
    -webkit-animation: fadeIn 1s 5.5s linear both;
}

.p5_arrow {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 42%;
    top: 95%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: arrow 1s 7s linear both;
    -webkit-animation: arrow 1s 7s linear infinite;
}

.page6 {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.p6_01 {
    width: 100%;
    height: 100%;
    background-image: url("../images/p6.jpg?1");
    background-size: 200% 100%;
    background-repeat: no-repeat;
}

.p6_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p6.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: p3_1 3s linear both;
    -webkit-animation: p3_1 3s linear both;
}

.p6_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p6.2.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 1s 3s linear both;
    -webkit-animation: fadeIn 1s 3s linear both;
}

.p6_right {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 77%;
    top: 63%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: p6_r_arrow 1s 4s linear infinite;
    -webkit-animation: p6_r_arrow 1s 4s linear infinite;
}

@keyframes p6_r_arrow {
    0% {
        transform: rotateZ(-90deg) translateY(0%);
        -webkit-transform: rotateZ(-90deg) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: rotateZ(-90deg) translateY(-60%);
        -webkit-transform: rotateZ(-90deg) translateY(-60%);
        opacity: 1;
    }
}

@-webkit-keyframes p6_r_arrow {
    0% {
        transform: rotateZ(-90deg) translateY(0%);
        -webkit-transform: rotateZ(-90deg) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: rotateZ(-90deg) translateY(-60%);
        -webkit-transform: rotateZ(-90deg) translateY(-60%);
        opacity: 1;
    }
}

.p6_02 {
    width: 100%;
    height: 100%;
    background-image: url("../images/p6.jpg?1");
    background-size: 200% 100%;
    background-position: 100% 0%;
    background-repeat: no-repeat;
}

.p6_3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p6.3.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.p6_arrow {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 42%;
    top: 95%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.ani .p6_3 {
    animation: fadeIn 2s 1s linear both;
    -webkit-animation: fadeIn 2s 1s linear both;
}

.ani .p6_arrow {
    animation: arrow 1s 3s linear both;
    -webkit-animation: arrow 1s 3s linear infinite;
}

.page7 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p7.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p7_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p7.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: p3_1 3s linear both;
    -webkit-animation: p3_1 3s linear both;
}

.p7_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p7.2.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 2s 3s linear both;
    -webkit-animation: fadeIn 2s 3s linear both;
}

.p7_arrow {
    position: absolute;
    width: 15%;
    height: 3%;
    left: 42%;
    top: 95%;
    background-image: url("../images/p0.5.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: arrow 1s 5s linear both;
    -webkit-animation: arrow 1s 5s linear infinite;
}

.page8 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p8.jpg?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.p8_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/p8.1.png?1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 2s linear both;
    -webkit-animation: fadeIn 2s linear both;
}