*{
      margin:0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    .wrap{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .loadWrap{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      background-image: url(../img/loading.jpg?1);
      background-size: 100% 100%;
      background-repeat:no-repeat;
    }
    .load{
      position: absolute;
      width: 40%;
      height: 1%;
      background-color: #e5e5e5;
      top: 50%;
      left:50%;
      transform: translateX(-50%);
    }
    .loading{
      position: absolute;
      top: 0;
      left: 0;
      height: 5px;
      background-color: gray;
    }
    .music{
      display: none;
      position: absolute;
      width: 30px;
      height: 30px;
      top: 5px;
      left: 5px;
      z-index: 999;
      background-image: url(../img/music.png?1);
      background-size: 100% 100%;
      animation: music_move 2s linear infinite;
      -webkit-animation:music_move 2s linear infinite;
    }
    @keyframes music_move{
      form{

      }
      to{
        transform:rotateZ(360deg);
        -webkit-transform:rotateZ(360deg);
      }
    }
     @-webkit-keyframes music_move{
      form{

      }
      to{
        transform:rotateZ(360deg);
        -webkit-transform:rotateZ(360deg);
      }
    }
    .page1{
      display: none;
      position: relative;
      width: 100%;
      height: 100%;
      background-image: url(../img/p1.jpg?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .page1 .dwjWord{
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../img/p1.1.png?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation: fadeIn 1s linear;
    }
    .page1 .arrow{
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../img/arrow.png?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      opacity: 0;
      animation: arrow_move 1s 1s linear infinite;
      -webkit-animation:arrow_move 1s 1s linear infinite;;
    }
    @keyframes arrow_move{
      form{
      }
      to{
        opacity: 1;
        transform: translateY(-2%);
        -webkit-transform:translateY(-2%);
      }
    }
     @-webkit-keyframes arrow_move{
      form{
      }
      to{
        opacity: 1;
        transform: translateY(-2%);
        -webkit-transform:translateY(-2%);
      }
    }
    .page1 .qsWord{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      opacity: 0;
      animation: fadeInDown 2s linear forwards;
      background-image: url(../img/p1.2.png?1);
    }
    .page2{
      position: relative;
      width: 100%;
      height: 100%;
      background-image: url(../img/p2.jpg?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: none;
    }
    .page2 .zImg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .page2 .zImg1{
      background-image: url(../img/p2.2.png?1);
    }
    .page2 .zImg2{
      background-image: url(../img/p2.3.png?1);
    }
    .page2 .zImg3{
      background-image: url(../img/p2.4.png?1);
    }
    .page2 .zImg4{
      background-image: url(../img/p2.5.png?1);
    }
    .page2 .zImg5{
      background-image: url(../img/p2.6.png?1);
    }
    .page2 .zImg6{
      display: none;
      opacity: 0;
      background-image: url(../img/p2.7.png?1);
      animation: fadeIn 2s 1s linear forwards;
    }
    .page2 .zImg7{
      background-image: url(../img/p2.1.png?1);
    }
    .page2 .kuai{
      position: absolute;
      width: 26%;
      height: 14%;
    }
    .page2 .kuai1{
      left: 7%;
      top: 28%;
    }
    .page2 .kuai2{
      left: 36%;
      top: 28%;
    }
    .page2 .kuai3{
      left: 67%;
      top: 28%;
    }
    .page2 .kuai4{
      left: 20%;
      top: 44%;
    }
    .page2 .kuai5{
      left: 51%;
      top: 44%;
    }
    .page2 .move1{
      animation: z_move1 1s linear forwards;
      -webkit-animation: z_move1 1s linear forwards;
    }
    @keyframes z_move1{
      form{    
      }
      to{
        transform: translateX(30%) translateY(40%);
        -webkit-transform:translateX(30%) translateY(40%);
      }
    }
    @-webkit-keyframes z_move1{
      form{    
      }
      to{
        transform: translateX(30%) translateY(40%);
        -webkit-transform:translateX(30%) translateY(40%);
      }
    }

     .page2 .move2{
      animation: z_move2 1s linear forwards;
      -webkit-animation: z_move2 1s linear forwards;
    }
    @keyframes z_move2{
      form{    
      }
      to{
        transform: translateY(40%);
        -webkit-transform:translateY(40%);
      }
    }
    @-webkit-keyframes z_move2{
      form{    
      }
      to{
        transform: translateY(40%);
        -webkit-transform:translateY(40%);
      }
    }


    .page2 .move3{
      animation: z_move3 1s linear forwards;
      -webkit-animation: z_move3 1s linear forwards;
    }
    @keyframes z_move3{
      form{    
      }
      to{
        transform: translateX(-30%) translateY(40%);
        -webkit-transform:translateX(-30%) translateY(40%);
      }
    }
    @-webkit-keyframes z_move3{
      form{    
      }
      to{
        transform: translateX(-30%) translateY(40%);
        -webkit-transform:translateX(-30%) translateY(40%);
      }
    }


     .page2 .move4{
      animation: z_move4 1s linear forwards;
      -webkit-animation: z_move4 1s linear forwards;
    }
    @keyframes z_move4{
      form{    
      }
      to{
        transform: translateX(18%) translateY(25%);
        -webkit-transform:translateX(18%) translateY(25%);
      }
    }
    @-webkit-keyframes z_move4{
      form{    
      }
      to{
        transform: translateX(18%) translateY(25%);
        -webkit-transform:translateX(18%) translateY(25%);
      }
    }


     .page2 .move5{
      animation: z_move5 1s linear forwards;
      -webkit-animation: z_move5 1s linear forwards;
    }
    @keyframes z_move5{
      form{    
      }
      to{
        transform: translateX(-15%) translateY(25%);
        -webkit-transform:translateX(-15%) translateY(25%);
      }
    }
    @-webkit-keyframes z_move5{
      form{    
      }
      to{
        transform: translateX(-15%) translateY(25%);
        -webkit-transform:translateX(-15%) translateY(25%);
      }
    }
    .page2 .bzBut{
      position: absolute;
      width:30%;
      height:7%;
      top:90%;
      left: 35%;
    }
    .page2 .hand{
      position: absolute;
      width: 60%;
      height: 60%;
      left: 40%;
      top: 35%;
      background-image: url(../img/hand.png?1);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: fadeIn .8s linear infinite alternate;
    }
    .page3{
      display: none;
      position: absolute;
      width: 100%;
      height:100%;
      background-image: url(../img/p3.jpg?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .page3 .zzWord{
      position: absolute;
      width: 100%;
      height: 100%;
      /*background-image: url(img/p3.1.1.png);*/
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation: fadeIn 1s linear;
    }
    .page3 .zzImg{
      position: absolute;
      width: 35%;
      height: 16%;
      left: 32%;
      top: 38%;
      background-image: url(../img/p3.11.png?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation: zzImg_move 1s linear;
      -webkit-animation:zzImg_move 1s linear forwards;
    }
    @keyframes zzImg_move{
      form{
      }
      to{
        transform: translateY(180%);
        -webkit-transform:translateY(180%);
      }
    }
    .page3 .ertWord{
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../img/p3.2.png?1);
      background-size: 100% 100%;
      opacity: 0;
      background-repeat: no-repeat;
      animation: fadeIn 1s 1.5s linear forwards;
    }
    .page3 .ercWord{
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      background-image: url(../img/p3.3.png?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation: fadeInRight 1s 2.5s linear forwards;
    }
    .page3 .erbWord{
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      background-image: url(../img/p3.4.png?1);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation: fadeInUp 2s 2.5s linear forwards;
    }
    .page3 .page3_hand{
      position: absolute;
      width: 15%;
      height: 8%;
      left: 55%;
      top: 60%;
      opacity: 0;
      background-image: url(../img/hand.png?1);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: fadeIn .8s 3s linear infinite alternate;
    }
    .page3 .linkBut{
      position: absolute;
      display: block;
      width: 40%;
      height: 7%;
      left: 30%;
      top: 55%;
      display: none;
    }