*{
    margin: 0;
    padding:0;
}

img {
    display: block;
}

html {
    font-size: 100px;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#musicBox {
    width: .7rem;
    left: .7rem;
}

#musicBox img:nth-child(1) {
    position: absolute;
    display: block;
    top: .7rem;
    left: 1rem;
    width: .7rem;
    height: .7rem;
    z-index: 999;
}

#musicBox img:nth-child(2) {
    position: absolute;
    display: block;
    top: .6rem;
    left: 1.2rem;
    width: .7rem;
    height: .7rem;
    z-index: 99;
}

#musicBox img:nth-child(2) {
    -webkit-animation: imgTwoMove linear 3.2s;
    animation: imgTwoMove linear 3.2s;
}

@-webkit-keyframes imgTwoMove {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes imgTwoMove {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.musicMove {
    -webkit-animation: musicMove 3s linear infinite .2s;
    animation: musicMove 3s linear infinite .2s;
}

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

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

.arrow {
    z-index: 9;
    left: 48%;
    position: absolute;
    -webkit-animation: arrowFlash 1s linear infinite;
    animation: arrowFlash 1s linear infinite;
}

.arrow img {
    display: block;
    width: .75rem;
    height: .75rem;
}

@-webkit-keyframes arrowFlash {
    0% {
        top: 85%;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        opacity: 0;
    }
    50% {
        top: 80%;
        opacity: 1;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        top: 80%;
        opacity: .2;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes arrowFlash {
    0% {
        top: 85%;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        opacity: .2;
    }
    50% {
        top: 80%;
        opacity: 1;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        top: 80%;
        opacity: .2;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

.swiper-container, .swiper-wrapper, .swiper-slide, .page01, .page02, .page03, .page04, .page05, .page06, .page07{
    width: 100%;
    height: 100%;
}

.swiper-wrapper .swiper-slide {
    position: relative;
}

/*第一屏*/
.page01 {
    background: url("../img/page01-1.png") no-repeat;
    background-size: cover;
    color: #fff;
}

.page01 img:nth-child(1) {
    position: absolute;
    top: .9rem;
    left: 4rem;
    width: 2.5rem;
    height: 2.5rem;
}

#page01 img:nth-child(1) {
    -webkit-animation: move11 6s linear infinite .2s;
    animation: move11 6s linear infinite .2s;
}

@-webkit-keyframes move11 {
    0% {
        opacity: .2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .2;
    }
}

@keyframes move11 {
    0% {
        opacity: .2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .2;
    }
}

.page01 img:nth-child(2) {
    position: absolute;
    top: .9rem;
    left: 4rem;
    width: 2.5rem;
    height: 2.5rem;
}

#page01 img:nth-child(2) {
    -webkit-animation: move12 60s linear infinite;
    animation: move12 60s linear infinite;
}

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

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

.page01 img:nth-child(3) {
    position: absolute;
    top: 1rem;
    left: -1rem;
    width: 100%;
    opacity: .8;
    height: 5.5rem;
}

#page01 img:nth-child(3) {
    -webkit-animation: move13 180s linear infinite .2s;
    animation: move13 180s linear infinite .2s;
}

@-webkit-keyframes move13 {
    0% {
        opacity: .8;
        top: 1rem;
        left: -1rem;
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    50% {
        opacity: .5;
    }
    100% {
        top: 1.5rem;
        opacity: .8;
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}

@keyframes move13 {
    0% {
        opacity: .8;
        top: 1rem;
        left: -1rem;
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    50% {
        opacity: .5;
    }
    100% {
        top: 1.5rem;
        opacity: .8;
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}

.page01 h1 {
    position: absolute;
    top: 3.9rem;
    left: 2rem;
    font-size: 1rem;
    opacity: 0;
}

#page01 h1 {
    -webkit-animation: zoomIn 1.2s linear .2s both;
    animation: zoomIn 1.2s linear .2s both;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        font-size: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    30% {
        font-size: 2rem;
    }
    100% {
        opacity: 1;
        font-size: 1rem;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        font-size: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    30% {
        font-size: 2rem;
    }
    100% {
        opacity: 1;
        font-size: 1rem;
    }
}

.page01 h3 {
    position: absolute;
    top: 6.5rem;
    left: 4rem;
    font-size: .5rem;
    opacity:0;
}

#page01 h3 {
    -webkit-animation: flip 1.2s linear .8s both;
    animation: flip 1.2s linear .8s both;
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        -ms-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.page01 h2 {
    position: absolute;
    top: 5rem;
    left: 3rem;
    font-size: .3rem;
    opacity:0;
}

#page01 h2 {
    -webkit-animation: move14 .8s linear .6s both;
    animation: move14 .8s linear .6s both;
}

@-webkit-keyframes move14 {
    0% {
        opacity: 0;
        top: 1.9rem;
        left: 4.6rem;
        font-size: 0.01rem;
    }
    50%{
        opacity: 0;
        top: 1.9rem;
        left: 4.6rem;
        font-size: 0.01rem;
    }
    70% {
        opacity: .8;
        top: 13rem;
        font-size: 0.01rem;
    }
    100% {
        opacity: 1;
        font-size: .3rem;
        top: 9.3rem;
        left: 2.5rem;
    }
}

@keyframes move14 {
    0% {
        opacity: 0;
        top: 1.9rem;
        left: 4.6rem;
        font-size: 0.01rem;
    }
    20%{
        opacity: 0;
        top: 1.9rem;
        left: 4.6rem;
        font-size: 0.01rem;
    }
    70% {
        opacity: .8;
        top: 13rem;
        font-size: 0.01rem;
    }
    100% {
        opacity: 1;
        font-size: .3rem;
        top: 9.3rem;
        left: 2.5rem;
    }
}

.page01 h2 span {
    font-size: .5rem;
}

#page01 h2 span {
    -webkit-animation: move15 1.2s linear .4s both;
    animation: move15 1.2s linear .4s both;
}

@-webkit-keyframes move15 {
    0% {
        font-size: 0;
    }
    100% {
        font-size: .7rem;
    }
}

@keyframes move15 {
    0% {
        font-size: 0;
    }
    100% {
        font-size: .7rem;
    }
}

/*第二屏*/
.page02 {
    background: url("../img/page02-1.jpg") no-repeat center center;
    background-size: cover;
}

.page02 img {
    position: absolute;
}

.page02 img:nth-child(1) {
    top: .8rem;
    left: 1.8rem;
    width: 4rem;
    height: 2rem;
}

#page02 img:nth-child(1) {
    -webkit-animation: move21 4s linear infinite;
    animation: move21 4s linear infinite;
}

@-webkit-keyframes move21 {
    0% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(0deg);
        transform: rotateY(0deg) rotateZ(0deg);
    }
    25% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(12.5deg);
        transform: rotateY(0deg) rotateZ(12.5deg);
    }
    50% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(0deg);
        transform: rotateY(0deg) rotateZ(0deg);
    }
    75% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotate(0deg) rotateZ(-12.5deg);
        transform: rotate(0deg) rotateZ(-12.5deg);
    }
    100% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(0deg);
        transform: rotateY(0deg) rotateZ(0deg);
    }
}

@keyframes move21 {
    0% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(0deg);
        transform: rotateY(0deg) rotateZ(0deg);
    }
    25% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(12.5deg);
        transform: rotateY(0deg) rotateZ(12.5deg);
    }
    50% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(0deg);
        transform: rotateY(0deg) rotateZ(0deg);
    }
    75% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotate(0deg) rotateZ(-12.5deg);
        transform: rotate(0deg) rotateZ(-12.5deg);
    }
    100% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateY(0deg) rotateZ(0deg);
        transform: rotateY(0deg) rotateZ(0deg);
    }
}
.page02 img:nth-child(n+2){
    width: 6.2rem;
    height: 1.2rem;
    opacity: 0;
}
.page02 img:nth-child(2) {
    top: 3.5rem;
}

#page02 img:nth-child(2) {
    -webkit-animation: move22 1.5s linear .2s both;
    animation: move22 1.5s linear .2s both;
}

@-webkit-keyframes move22 {
    0% {
        opacity: 1;
        left: 7.5rem;
    }
    100% {
        opacity: 1;
        left: .2rem;
    }
}

@keyframes move22 {
    0% {
        left: 7.5rem;
    }
    100% {
        opacity: 1;
        left: .2rem;
    }
}

.page02 img:nth-child(3) {
    top: 5.2rem;
    right: .2rem;
}

#page02 img:nth-child(3) {
    -webkit-animation: move23 1.5s linear .5s both;
    animation: move23 1.5s linear .5s both;
}

@-webkit-keyframes move23 {
    0% {
        left: 7.5rem;
    }
    100% {
        left: .2rem;
    }
}

@keyframes move23 {
    0% {
        opacity: 1;
        right: 7.5rem;
    }
    100% {
        opacity: 1;
        right: .2rem;
    }
}

.page02 img:nth-child(4) {
    top: 6.9rem;
    left: .2rem;
}

#page02 img:nth-child(4) {
    -webkit-animation: move22 1.5s linear .5s both;
    animation: move22 1.5s linear .5s both;
}

.page02 img:nth-child(5) {
    top: 8.6rem;
    right: .2rem;
}

#page02 img:nth-child(5) {
    -webkit-animation: move23 1.5s linear .5s both;
    animation: move23 1.5s linear .5s both;
}

.page02 img:nth-child(6) {
    top: 10.2rem;
    left: .2rem;
}

#page02 img:nth-child(6) {
    -webkit-animation: move22 1.5s linear .2s both;
    animation: move22 1.5s linear .2s both;
}

.page02 img:nth-child(7) {
    top: 11.5rem;
    left: 1rem;
    width: 5rem;
    height: 1rem;
    opacity:1;
}

.page02 p {
    position: absolute;
    font-size: .5rem;
    opacity:0;
}

.page02 p.one {
    top: 3.8rem;
    left: 2.2rem;
    color: red;
}

#page02 p.one {
    -webkit-animation: bounceInLeft 3s linear .2s both;
    animation: bounceInLeft 3s linear .2s both;
}

.page02 p.two {
    top: 5.4rem;
    left: 3rem;
    color: darkorange;
}

#page02 p.two {
    -webkit-animation: bounceInRight 3s linear .2s both;
    animation: bounceInRight 3s linear .2s both;
}

.page02 p.three {
    top: 7.1rem;
    left: 2.1rem;
    color: yellow;
}

#page02 p.three {
    -webkit-animation: bounceInLeft 3s linear .2s both;
    animation: bounceInLeft 3s linear .2s both;
}

.page02 p.four {
    top: 8.8rem;
    left: 3rem;
    color: green;
}

#page02 p.four {
    -webkit-animation: bounceInRight 3s linear .2s both;
    animation: bounceInRight 3s linear .2s both;
}

.page02 p.five {
    top: 10.5rem;
    left: 2.2rem;
    color: navy;
}

#page02 p.five {
    -webkit-animation: bounceInLeft 3s linear .2s both;
    animation: bounceInLeft 3s linear .2s both;
}

@-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*第三屏*/
.page03 {
    background: url("../img/page03-1.png") no-repeat center center;
    background-size: cover;
}

.page03 img {
    position: absolute;
}

.page03 img:nth-child(n+2) {
    width: 1.2rem;
    height: 1.2rem;
}

.page03 img:nth-child(1) {
    top: -.1rem;
    left: 3.4rem;
    width: .5rem;
    height: 1rem;
}

#page03 img:nth-child(1) {
    -webkit-animation: move31 1.5s linear both;
    animation: move31 1.5s linear both;
    -webkit-animation-iteration-count: 10;
    animation-iteration-count: 10;
}

@-webkit-keyframes move31 {
    0% {
        top: 0;
        width: .5rem;
        height: 1rem;
    }
    99% {
        opacity: 1;
    }
    100% {
        top: 4.4rem;
        width: .8rem;
        height: 1.6rem;
        opacity: 0;
    }
}

@keyframes move31 {
    0% {
        top: 0;
        width: .5rem;
        height: 1rem;
    }
    99% {
        opacity: 1;
    }
    100% {
        top: 4.4rem;
        width: .8rem;
        height: 1.6rem;
        opacity: 0;
    }
}

.page03 img:nth-child(n+2) {
    opacity: 0;
}

#page03 img:nth-child(2) {
    -webkit-animation: move32 6s linear 1.5s both;
    animation: move32 6s linear 1.5s both;
}

@-webkit-keyframes move32 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 3.4rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move32 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 3.4rem;
        -webkit-transform: rotate(750deg);
        transform: rotate(750deg);
    }
}

#page03 img:nth-child(3) {
    -webkit-animation: move33 6s linear 3s both;
    animation: move33 6s linear 3s both;
}

@-webkit-keyframes move33 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11.5rem;
        left: 4.1rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 4.8rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move33 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11.5rem;
        left: 4.1rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 4.8rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

#page03 img:nth-child(4) {
    -webkit-animation: move34 6s linear 4.5s both;
    animation: move34 6s linear 4.5s both;
}

@-webkit-keyframes move34 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11.5rem;
        left: 2.7rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 2rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move34 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11.5rem;
        left: 2.7rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 2rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

#page03 img:nth-child(5) {
    -webkit-animation: move35 6s linear 6s both;
    animation: move35 6s linear 6s both;
}

@-webkit-keyframes move35 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11rem;
        left: 3.8rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 11rem;
        left: 4.1rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move35 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11rem;
        left: 3.8rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 11rem;
        left: 4.1rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

#page03 img:nth-child(6) {
    -webkit-animation: move36 6s linear 7.5s both;
    animation: move36 6s linear 7.5s both;
}

@-webkit-keyframes move36 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11rem;
        left: 3rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 11rem;
        left: 2.7rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move36 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    90% {
        opacity: 1;
        top: 11rem;
        left: 3rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
    100% {
        opacity: 1;
        top: 11rem;
        left: 2.7rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}


#page03 img:nth-child(7) {
    -webkit-animation: move37 6s linear 9s both;
    animation: move37 6s linear 9s both;
}

@-webkit-keyframes move37 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 10rem;
        left: 3.4rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
}

@keyframes move37 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        top: 10rem;
        left: 3.4rem;
        -webkit-transform: rotate(650deg);
        transform: rotate(650deg);
    }
}

#page03 img:nth-child(8) {
    -webkit-animation: move38 6s linear 10.5s both;
    animation: move38 6s linear 10.5s both;
}

@-webkit-keyframes move38 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 5.2rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 6.2rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move38 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 5.2rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: 6.2rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

#page03 img:nth-child(9) {
    -webkit-animation: move39 6s linear 12s both;
    animation: move39 6s linear 12s both;
}

@-webkit-keyframes move39 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 2rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: .7rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move39 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 2rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 12rem;
        left: .7rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

#page03 img:nth-child(10) {
    -webkit-animation: move311 6s linear 13.5s both;
    animation: move311 6s linear 13.5s both;
}

@-webkit-keyframes move311 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 5rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 11.2rem;
        left: 5.4rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

@keyframes move311 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 5rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 11.2rem;
        left: 5.4rem;
        -webkit-transform: rotate(700deg);
        transform: rotate(700deg);
    }
}

#page03 img:nth-child(11) {
    -webkit-animation: move312 6s linear 15s both;
    animation: move312 6s linear 15s both;
}

@-webkit-keyframes move312 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 2.5rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 11.2rem;
        left: 1.5rem;
        -webkit-transform: rotate(710deg);
        transform: rotate(710deg);
    }
}

@keyframes move312 {
    0% {
        opacity: 0;
        top: 5.7rem;
        left: 3.4rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    1% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 8.8rem;
        left: 3.4rem;
        -webkit-transform: rotate(500deg);
        transform: rotate(500deg);
    }
    90% {
        opacity: 1;
        top: 10.4rem;
        left: 2.5rem;
        -webkit-transform: rotate(600deg);
        transform: rotate(600deg);
    }
    100% {
        opacity: 1;
        top: 11.2rem;
        left: 1.5rem;
        -webkit-transform: rotate(710deg);
        transform: rotate(710deg);
    }
}

.page03 img:nth-child(n+12) {
    width: 1.5rem;
    height: 1.5rem;
    opacity:1;
}

.page03 img:nth-child(12) {
    left: 1rem;
    top: 2.5rem;
}

#page03 img:nth-child(12) {
    -webkit-animation: move41 3s linear infinite;
    animation: move41 3s linear infinite;
}

.page03 img:nth-child(13) {
    left: 1rem;
    top: 6.5rem;
}

#page03 img:nth-child(13) {
    -webkit-animation: move42 3s linear infinite;
    animation: move42 3s linear infinite;
}

.page03 img:nth-child(14) {
    left: 5rem;
    top: 2.5rem;
}

#page03 img:nth-child(14) {
    -webkit-animation: move41 3s linear infinite;
    animation: move41 3s linear infinite;
}

.page03 img:nth-child(15) {
    left: 5rem;
    top: 6.5rem;
}

#page03 img:nth-child(15) {
    -webkit-animation: move42 3s linear infinite;
    animation: move42 3s linear infinite;
}

@-webkit-keyframes move41 {
    0% {
        top: 2.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        top: 3.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    100% {
        top: 2.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes move41 {
    0% {
        top: 2.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        top: 3.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    100% {
        top: 2.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes move42 {
    0% {
        top: 6.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        top: 6rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    100% {
        top: 6.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes move42 {
    0% {
        top: 6.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        top: 6rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    100% {
        top: 6.5rem;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/*第四屏*/
.page04 {
    background: url("../img/page04-1.jpg") no-repeat center center;
    background-size: cover;
}

.page04 img {
    position: absolute;
    opacity: 0;
}

.page04 img:nth-child(n+2) {
    width: 1rem;
    height: 1.8rem;
}

.page04 img:nth-child(1) {
    top: .8rem;
    left: 1.3rem;
    width: 5rem;
    height: 1rem;
}

#page04 img:nth-child(1) {
    -webkit-animation: zoomIn 1s linear .1s both;
    animation: zoomIn 1s linear .1s both;
}

.page04 img:nth-child(2) {
    top: 2.2rem;
    left: .5rem;
}

#page04 img:nth-child(2) {
    -webkit-animation: flip 1s linear .2s both;
    animation: flip 1s linear .2s both;
}

.page04 img:nth-child(3) {
    top: 4.2rem;
    left: .5rem;
}

#page04 img:nth-child(3) {
    -webkit-animation: flip 1s linear .4s both;
    animation: flip 1s linear .4s both;
}

.page04 img:nth-child(4) {
    top: 6.2rem;
    left: .5rem;
}

#page04 img:nth-child(4) {
    -webkit-animation: flip 1s linear .6s both;
    animation: flip 1s linear .6s both;
}

.page04 img:nth-child(5) {
    top: 8.2rem;
    left: .5rem;
}

#page04 img:nth-child(5) {
    -webkit-animation: flip 1s linear .5s both;
    animation: flip 1s linear .5s both;
}

.page04 img:nth-child(6) {
    top: 10.2rem;
    left: .5rem;
}

#page04 img:nth-child(6) {
    -webkit-animation: flip 1s linear 1s both;
    animation: flip 1s linear 1s both;
}

.page04 img:nth-child(7) {
    top: 2.5rem;
    left: 2rem;
    width: 3rem;
    height: 1.3rem;
}

#page04 img:nth-child(7) {
    -webkit-animation: bounceInLeft 1s linear 1.2s both;
    animation: bounceInLeft 1s linear 1.2s both;
}

.page04 img:nth-child(8) {
    top: 4.5rem;
    left: 2rem;
    width: 3.6rem;
    height: 1.3rem;
}

#page04 img:nth-child(8) {
    -webkit-animation: bounceInLeft 1s linear 1.4s both;
    animation: bounceInLeft 1s linear 1.4s both;
}

.page04 img:nth-child(9) {
    top: 6.5rem;
    left: 2rem;
    width: 4.2rem;
    height: 1.3rem;
}

#page04 img:nth-child(9) {
    -webkit-animation: bounceInLeft 1s linear 1.6s both;
    animation: bounceInLeft 1s linear 1.6s both;
}

.page04 img:nth-child(10) {
    top: 8.5rem;
    left: 2rem;
    width: 4.8rem;
    height: 1.3rem;
}

#page04 img:nth-child(10) {
    -webkit-animation: bounceInLeft 1s linear 1.8s both;
    animation: bounceInLeft 1s linear 1.8s both;
}

.page04 img:nth-child(11) {
    opacity: 0;
    top: 10.5rem;
    left: 2rem;
    width: 5.4rem;
    height: 1.3rem;
}

#page04 img:nth-child(11) {
    -webkit-animation: bounceInLeft 1s linear 2s both;
    animation: bounceInLeft 1s linear 2s both;
}

@-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.page04 img:nth-child(12) {
    top: 4.2rem;
    left: 5.8rem;
    width: .7rem;
    height: .8rem;
    opacity: 1;
}

.page04 p {
    position: absolute;
    font-size: .5rem;
    color: red;
    opacity: 0;
}

.page04 p span {
    display: block;
}

.page04 p.four1 {
    top: .9rem;
    left: 2rem;
    font-size: .6rem;
}

#page04 p.four1 {
    -webkit-animation: bounceInUp 1s linear 2s both;
    animation: bounceInUp 1s linear 1.5s both;
}

.page04 p.four2 {
    top: 2.4rem;
    left: .8rem;
}

#page04 p.four2 {
    -webkit-animation: bounceInUp 1s linear 2.2s both;
    animation: bounceInUp 1s linear 2.2s both;
}

.page04 p.four3 {
    top: 4.4rem;
    left: .8rem;
}

#page04 p.four3 {
    -webkit-animation: bounceInUp 1s linear 2.4s both;
    animation: bounceInUp 1s linear 2.4s both;
}

.page04 p.four4 {
    top: 6.4rem;
    left: .8rem;
}

#page04 p.four4 {
    -webkit-animation: bounceInUp 1s linear 2.6s both;
    animation: bounceInUp 1s linear 2.6s both;
}

.page04 p.four5 {
    top: 8.4rem;
    left: .8rem;
}

#page04 p.four5 {
    -webkit-animation: bounceInUp 1s linear 2.8s both;
    animation: bounceInUp 1s linear 2.8s both;
}

@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.page04 p.four6 {
    top: 10.4rem;
    left: .8rem;
}

#page04 p.four6 {
    -webkit-animation: bounceInUp 1s linear 3s both;
    animation: bounceInUp 1s linear 3s both;
}

.page04 p.four7 {
    top: 2.8rem;
    left: 2.6rem;
}

#page04 p.four7 {
    -webkit-animation: bounceInRight 1s linear 2.4s both;
    animation: bounceInRight 1s linear 2.4s both;
}

.page04 p.four8 {
    top: 4.8rem;
    left: 3.3rem;
}

#page04 p.four8 {
    -webkit-animation: bounceInRight 1s linear 2.6s both;
    animation: bounceInRight 1s linear 2.6s both;
}

.page04 p.four9 {
    top: 6.8rem;
    left: 3.7rem;
}

#page04 p.four9 {
    -webkit-animation: bounceInRight 1s linear 2.8s both;
    animation: bounceInRight 1s linear 2.8s both;
}

.page04 p.four10 {
    top: 8.8rem;
    left: 3.9rem;
}

#page04 p.four10 {
    -webkit-animation: bounceInRight 1s linear 3s both;
    animation: bounceInRight 1s linear 3s both;
}

.page04 p.four11 {
    top: 10.8rem;
    left: 3.3rem;
}

#page04 p.four11 {
    -webkit-animation: bounceInRight 1s linear 3.2s both;
    animation: bounceInRight 1s linear 3.2s both;
}

/*第五屏*/
.page05 {
    background: url("../img/page05-1.jpg") no-repeat center center;
    background-size: cover;
    color: green;
    font-size: .34rem;
}

.page05 img {
    position: absolute;
    opacity: 0;
}

.page05 img:nth-child(1) {
    opacity: 1;
    top: 3.25rem;
    left: 1.1rem;
    width: .12rem;
    height: .12rem;
}

.page05 img:nth-child(2) {
    opacity: 1;
    top: 2.5rem;
    left: 1.9rem;
    width: .7rem;
    height: .8rem;
}

.page05 img:nth-child(3) {
    top: 2rem;
    left: 1rem;
    width: 2.5rem;
    height: .6rem;
}

#page05 img:nth-child(3) {
    -webkit-animation: bounceInLeft 1s linear .2s both;
    animation: bounceInLeft 1s linear .2s both;
}

.page05 img:nth-child(4) {
    top: 1rem;
    left: 3.9rem;
    width: 2.4rem;
    height: .6rem;
}

#page05 img:nth-child(4) {
    -webkit-animation: bounceInRight 1s linear .2s both;
    animation: bounceInRight 1s linear .2s both;
}

#page05 img:nth-child(1) {
    -webkit-animation: move51 10s linear .1s both;
    animation: move51 10s linear .1s both;
}

@-webkit-keyframes move51 {
    0% {
        top: 3.3rem;
        left: 1.67rem;
        width: .12rem;
        height: .12rem;
    }
    20% {
        top: 3.25rem;
        left: 1.1rem;
        width: 1.2rem;
        height: 1.2rem;
    }
    30% {
        top: 4.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    35% {
        top: 4.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    40% {
        top: 4.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        top: 6.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    55% {
        top: 6.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    60% {
        top: 6.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    70% {
        top: 8.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    75% {
        top: 8.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    80% {
        top: 8.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    90% {
        top: 11rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    95% {
        top: 11rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateZ(30deg);
        transform: rotateZ(30deg);
    }
    100% {
        top: 11rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateZ(60deg);
        transform: rotateZ(60deg);
    }
}

@keyframes move51 {
    0% {
        top: 3.3rem;
        left: 1.67rem;
        width: .12rem;
        height: .12rem;
    }
    20% {
        top: 3.25rem;
        left: 1.1rem;
        width: 1.2rem;
        height: 1.2rem;
    }
    30% {
        top: 4.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    35% {
        top: 4.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    40% {
        top: 4.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        top: 6.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    55% {
        top: 6.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    60% {
        top: 6.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    70% {
        top: 8.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    75% {
        top: 8.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    80% {
        top: 8.8rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    90% {
        top: 11rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    95% {
        top: 11rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateZ(30deg);
        transform: rotateZ(30deg);
    }
    100% {
        top: 11rem;
        width: 1.2rem;
        height: 1.2rem;
        -webkit-transform: rotateZ(60deg);
        transform: rotateZ(60deg);
    }
}

.page05 p {
    position: absolute;
}

.page05 p span {
    display: block;
    opacity: 0;
}

.page05 p.five1 {
    top: 4.9rem;
    left: 2.8rem;
}

#page05 p.five1 span:nth-child(1) {
    -webkit-animation: bounceInRight 1s linear 2.6s both;
    animation: bounceInRight 1s linear 2.6s both;
}

#page05 p.five1 span:nth-child(2) {
    -webkit-animation: bounceInRight 1s linear 2.8s both;
    animation: bounceInRight 1s linear 2.8s both;
}
#page05 p.five1 span:nth-child(3) {
    -webkit-animation: bounceInRight 1s linear 3s both;
    animation: bounceInRight 1s linear 3s both;
}


.page05 p.five2 {
    top: 6.9rem;
    left: 2.8rem;
}

#page05 p.five2 span:nth-child(1) {
    -webkit-animation: bounceInRight 1s linear 4.6s both;
    animation: bounceInRight 1s linear 4.6s both;
}

#page05 p.five2 span:nth-child(2) {
    -webkit-animation: bounceInRight 1s linear 4.8s both;
    animation: bounceInRight 1s linear 4.8s both;
}
#page05 p.five2 span:nth-child(3) {
    -webkit-animation: bounceInRight 1s linear 5s both;
    animation: bounceInRight 1s linear 5s both;
}


.page05 p.five3 {
    top: 8.9rem;
    left: 2.8rem;
}

#page05 p.five3 span:nth-child(1) {
    -webkit-animation: bounceInRight 1s linear 6.6s both;
    animation: bounceInRight 1s linear 6.6s both;
}

#page05 p.five3 span:nth-child(2) {
    -webkit-animation: bounceInRight 1s linear 6.8s both;
    animation: bounceInRight 1s linear 6.8s both;
}
#page05 p.five3 span:nth-child(3) {
    -webkit-animation: bounceInRight 1s linear 7s both;
    animation: bounceInRight 1s linear 7s both;
}

/*第六屏*/
.page06 {
    background: url("../img/page06-1.jpg") no-repeat center center;
    background-size: cover;
}

.page06 img {
    position: absolute;
    opacity: 0;
}

.page06 img:nth-child(1) {
    top: 2rem;
    left: .5rem;
    width: 3rem;
    height: 1.2rem;
}

#page06 img:nth-child(1) {
    -webkit-animation: flip 1s linear both;
    animation: flip 1s linear both;
}

.page06 img:nth-child(2) {
    top: 3.5rem;
    left: .7rem;
    width: 5.3rem;
    height: .6rem;
}

#page06 img:nth-child(2) {
    -webkit-animation: bounceInLeft 1s linear .2s both;
    animation: bounceInLeft 1s linear .2s both;
}

.page06 img:nth-child(3) {
    top: 4.7rem;
    left: .5rem;
    width: 6rem;
    height: .6rem;
}

#page06 img:nth-child(3) {
    -webkit-animation: bounceInLeft 1s linear .5s both;
    animation: bounceInLeft 1s linear .5s both;
}

.page06 img:nth-child(4) {
    top: 5.9rem;
    left: .5rem;
    width: 6rem;
    height: .6rem;
}

#page06 img:nth-child(4) {
    -webkit-animation: bounceInLeft 1s linear .8s both;
    animation: bounceInLeft 1s linear .8s both;
}

.page06 img:nth-child(5) {
    top: 7.1rem;
    left: .5rem;
    width: 6rem;
    height: .6rem;
}

#page06 img:nth-child(5) {
    -webkit-animation: bounceInLeft 1s linear 1.1s both;
    animation: bounceInLeft 1s linear 1.1s both;
}

.page06 img:nth-child(6) {
    top: 8.3rem;
    left: .5rem;
    width: 6rem;
    height: .6rem;
}

#page06 img:nth-child(6) {
    -webkit-animation: bounceInLeft 1s linear 1.4s both;
    animation: bounceInLeft 1s linear 1.4s both;
}

.page06 p {
    position: absolute;
    top: 10.5rem;
    left: 3.7rem;
    color: #000;
    font-size: .4rem;
}

.page06 span {
    display: block;
    opacity:0;
}

#page06 span:nth-child(1) {
    -webkit-animation: bounceInLeft 1s linear 1.5s both;
    animation: bounceInLeft 1s linear 1.5s both;
}

#page06 span:nth-child(2) {
    -webkit-animation: bounceInRight 1s linear 1.8s both;
    animation: bounceInRight 1s linear 1.8s both;
}

/*第七屏*/
.page07 {
    background: url("../img/page07-1.jpg") no-repeat center center;
    background-size: cover;
    font-size: .4rem;
    color: blue;
}

.page07 img, .page07 p span {
    position: absolute;
    opacity: 0;
}

.page07 img:nth-child(1) {
    width: 3rem;
    height: 3rem;
    top: 6rem;
    left: 2.3rem;
}

#page07 img:nth-child(1) {
    -webkit-animation: bounceInRight 1s linear .5s both;
    animation: bounceInRight 1s linear .5s both;
}

.page07 img:nth-child(2) {
    width: 3rem;
    height: .6rem;
    top: 5rem;
    left: 2.3rem;
}

#page07 img:nth-child(2) {
    -webkit-animation: bounceInLeft 1s linear .2s both;
    animation: bounceInLeft 1s linear .2s both;
}

.page07 img:nth-child(3) {
    width: 2rem;
    height: .7rem;
    top: 10.9rem;
    left: 3.5rem;
}

#page07 img:nth-child(3) {
    -webkit-animation: bounceInRight 1s linear 1.7s both;
    animation: bounceInRight 1s linear 1.7s both;
}

.page07 span:nth-child(1) {
    top: 9.5rem;
    left: 2.3rem;
}

#page07 span:nth-child(1) {
    -webkit-animation: flip 1s linear 1s both;
    animation: flip 1s linear 1s both;
}

.page07 span:nth-child(2) {
    top: 10.2rem;
    left: 2.3rem;
}

#page07 span:nth-child(2) {
    -webkit-animation: flip 1s linear 1.5s both;
    animation: flip 1s linear 1.5s both;
}

.page07 span:nth-child(3) {
    top: 11rem;
    left: 2.3rem;
}

#page07 span:nth-child(3) {
    -webkit-animation: bounceInLeft 1s linear 1.4s both;
    animation: bounceInLeft 1s linear 1.4s both;
}