body {padding: 0;margin: 0;}
.container {position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow-x: hidden;}
.cover {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1000;}
.bg {position: absolute;width: 100%;top: 0;left: 0;}
.page {position: relative;width: 100%;margin-bottom: 580px;margin-top: 50px;}
.line_top {position: absolute;top: -570px;}
.line_bottom {position: absolute;bottom: -550px;left: 49%;height: 500px;}
.page1 {position: relative;height: 1300px;margin-bottom: 0;}
.hiddenObj {opacity: 0;}
.music_icon {position: fixed;top: 0;right: 0;padding: 20px;z-index: 10000}
.p1_img1 {position: absolute;top: 0px;left: 123px;-webkit-animation-delay: 0.1s;}
/*.p1_img2 {position: absolute;top: 592px;left: 81px;z-index: 100;}*/
.p1_img2 {position: absolute;top: 592px;left: 81px;z-index: 100;-webkit-animation-delay: 0.3s;-webkit-animation-duration: 0.3s;}
.p1_img3 {position: absolute;top: 211px;right: 0px;z-index: 1000;-webkit-animation-delay: 0.3s;}
.p1_img4 {position: absolute;top: 1180px;left: 200px;-webkit-animation-delay: 0.5s;}
.page2 {position: relative;height: 1185px;}
.p2_img1 {position: absolute;top: -90px;left: 130px;-webkit-animation-duration: 0.5s;-webkit-animation-delay: 0.1s;}
.p2_img2 {position: absolute;top: 386px;left: 86px;}
.p2_img3 {position: absolute;top: 1060px;left: 145px;-webkit-animation-delay: 0.3s;}
.p2_img4 {position: absolute;top: 340px;left: 410px;}
.p2_img5 {position: absolute;top: 811px;left: 535px;}
.p2_img6 {position: absolute;top: 695px;left: 33px;-webkit-animation-delay: 0.5s;}
.page3 {position: relative;height: 550px;}
.p3_img1 {position: absolute;top: 0;left: 90px;}
.p3_img2 {position: absolute;top: 266px;left: 225px;}
.p3_img3 {position: absolute;top: 590px;left: 80px;}
.p3_img4 {position: absolute;bottom: -320px;}
.page4 {position: relative;height: 991px;}
.p4_img1 {position: absolute;top: 0px;left: 121px;-webkit-animation-delay: 0.2s;}
.p4_img2 {position: absolute;top: 211px;left: -116px;-webkit-animation-delay: 0.5s;}
.p4_img3 {position: absolute;top: 225px;right: -116px;-webkit-animation-delay: 0.5s;}
.p4_img4 {position: absolute;top: 850px;left: 130px;-webkit-animation-delay: 1s;}
.page5 {position: relative;height: 533px;}
.p5_img1 {position: absolute;top: 0;left: 49px;}
.p5_img2 {position: absolute;top: 274px;left: 226px;}
.page6 {position: relative;height: 1095px;}
.p6_img1 {position: absolute;top: 0px;left: 226px;}
.p6_img2 {position: absolute;top: 257px;left: 9px;-webkit-animation-delay: 0.2s;}
.p6_img3 {position: absolute;top: 215px;left: 0;-webkit-animation-delay: 0.5s;}
.page7 {position: relative;height: 1638px;/* margin-top: 40px; */}
.p7_img1 {position: absolute;top: 290px;left: 175px;-webkit-animation-delay: 0.5s;}
.p7_img2 {position: absolute;top: 257px;left: 0;width: 100%;}
.page8 {position: relative;height: 1150px;}
.p8_img0 {position: absolute;top: 350px;left: 0px;}
.p8_img1 {position: absolute;top: 0px;left: 185px;-webkit-animation-delay: 0.1s;}
.p8_img2 {position: absolute;top: 374px;left: 110px;-webkit-animation-delay: 0.3s;}
.p8_img3 {position: absolute;top: 784px;left: 182px;-webkit-animation-delay: 0.5s;}
.p8_img4 {position: absolute;top: 320px;right: -160px;}
.page9 {position: relative;height: 1336px;}
.p9_img1 {position: absolute;top: 0px;left: 62px;-webkit-animation-delay: 0.1s;}
.p9_img2 {position: absolute;top: 380px;left: 71px;-webkit-animation-delay: 0.3s;}
.p9_img3 {position: absolute;top: 1175px;left: 162px;-webkit-animation-delay: 1.7s;}
.p9_img4 {position: absolute;top: 1310px;left: 240px;-webkit-animation-delay: 1.7s;}
/*.ball1 {position: absolute;top: 512px;left: 180px;width: 500px;}*/
/*.ball2 {position: absolute;top: 380px;left: 234px;width: 295px;}*/
/*.ball3 {position: absolute;top: 538px;right: 87px;width: 119px;}*/
/*.ball4 {position: absolute;top: 837px;right: 108px;width: 140px;}*/
/*.ball5 {position: absolute;top: 510px;left: 71px;width: 96px;}*/
/*.ball6 {position: absolute;top: 1092px;left: 205px;width: 326px;}*/
.ball1 {position: absolute;top: 512px;left: 180px;-webkit-animation-delay: 0.5s;}
.ball2 {position: absolute;top: 380px;left: 234px;-webkit-animation-delay: 0.7s;}
.ball3 {position: absolute;top: 538px;right: 87px;-webkit-animation-delay: 0.9s;}
.ball4 {position: absolute;top: 837px;right: 108px;-webkit-animation-delay: 1.1s;}
.ball5 {position: absolute;top: 510px;left: 71px;-webkit-animation-delay: 1.3s;}
.ball6 {position: absolute;top: 1092px;left: 205px;-webkit-animation-delay: 1.5s;}
.last_page {position: relative;width: 100%;height: 1451px;overflow: hidden;}

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

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: box;
    display: -ms-flexbox;
    display: flex;
    display: flex;
    box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-content: center;
    box-align: center;
    -ms-flex-align: center;
    align-items: center;
    align-items: center;
}
.musicBox {
    width: 750px;
    height: 710px;
    position: absolute;
    left: 0;
    top: 300px;
    /*margin: -30px 0 0 -20px;*/
    overflow: hidden;
    -webkit-animation-delay: 0.9s;
}

/*.cloud {opacity: 0;}*/
.p2_img4 {
    animation: cloudAni 3s linear 0s infinite alternate;
}
.p2_img5 {
    animation: cloudAni 2.5s linear 1s infinite alternate;
}
.p2_img6 {
    animation: cloudAni 1.5s linear 2s infinite alternate;
    z-index: 100;
}
@keyframes cloudAni {
    from{
        margin-left: 10%;
    }
    to {
        margin-left: -10%;/*时间相同，距离不同，所以移动速度不一样*/
    }
}

.bar_box {
    width: 8px;
    position: absolute;
    bottom: 0px;
    display: flex;
    align-items: center;
}
.bar{
    animation: voice 0ms 0ms linear infinite alternate;
}
.bar {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("../images/line.png"); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
@keyframes voice{
    0%{
        height: 50%;
        opacity: .35;
    }
    100%{
        height: 100%;
        opacity: 1;
    }
}

.scrollContent {
    width: 100%;
    height: 100%;
    position: relative;
    /* text-align: center; */
    /* Center slide text vertically */
    display: box;
    display: -ms-flexbox;
    display: flex;
    display: flex;
    box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-content: center;
    box-align: center;
    -ms-flex-align: center;
    align-items: center;
    align-items: center;
}

.fadeObj {
    opacity: 0;
    /*transform: scale(0.9);*/
    /*-moz-transform: scale(0.9);*/
    /*-ms-transform: scale(0.9);*/
    /*-o-transform: scale(0.9);*/
    /*transform: scale(0.9);*/
    transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.fadeObj.visible {
    opacity: 1;
    transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

.digit {
    opacity: 0;
    transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px);
    transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.digit.visible {
    opacity: 1;
    transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
.ball_start {
    position: absolute;
    top: 650px;
    width: 100%;
}
.page2_start {
    position: absolute;
    top: 900px;
    width: 100%;
}
.page3_start {
    position: absolute;
    top: -200px;
    width: 100%;
}
.page5_start {
    position: absolute;
    top: -400px;
    width: 100%;
}
.page6_start {
    position: absolute;
    top: -400px;
    width: 100%;
}
.page8_start {
    position: absolute;
    top: -400px;
    width: 100%;
}
.fadeInLeft {
    -webkit-animation-name: "fadeInLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 0.4s;/*动画持续的时间长*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}
.fadeInRight {
    -webkit-animation-name: "fadeInRight"; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 0.4s;/*动画持续的时间长*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}
.fadeInTop {
    -webkit-animation-name: "fadeInTop"; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 0.4s;/*动画持续的时间长*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}
.fadeInBottom {
    -webkit-animation-name: "fadeInBottom"; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 0.4s;/*动画持续的时间长*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}
.fadeIn{
    -webkit-animation-name: "fadeIn"; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 0.4s;/*动画持续的时间长*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}
.zoomIn {
    -webkit-animation-name: "zoomIn"; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 0.4s;/*动画持续的时间长*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-240px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(240px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInTop {
    0% {
        opacity: 0;
        transform: translateY(-240px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(240px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}