/*音乐*/

.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{
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .load{
/*            display: none;*/
            position:relative;
            width: 100%;
            height: 100%;
            background-image: url("../images/loading.jpg?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .loadImg{
            position: absolute;
            width: 10%;
            height: 6%;
            left: 42%;
            top: 46%;
            background-image: url("../images/loading.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            -webkit-animation:rotate 1.2s linear infinite;
            animation:rotate 1.2s linear infinite;
        }
        .loading{
            position: absolute;
            width: 40%;
            height: 0.6%;
            background-color: aquamarine;
            left: 30%;
            top:30%;
            
        }
        .loaded{
            position:absolute;
            height: 100%;
            left: 0%;
            top: 0%;
            background-color: blue;
        }
        .wrap{
            display: none;
            position:relative;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.jpg?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .page1{
/*            display: none;*/
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p1_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation:fadeIn 1.5s linear both;
            -webkit-animation:fadeIn 1.5s linear both;
        }
        .ani .p1_1{
            animation:fadeOut 0.5s linear both;
            -webkit-animation:fadeOut 0.5s linear both;
        }
        .p1_2{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.2.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;  
            opacity: 0;
            animation:fadeIn 1s 1s linear both;
            -webkit-animation:fadeIn 1s 1s linear both;
        }
        .p1_3{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.3.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation:fadeInLeft 1s 3s linear both;
            -webkit-animation:fadeInLeft 1s 3s linear both; 
        }
        .ani .p1_3{
            animation:fadeOut 0.5s linear;
            -webkit-animation:fadeOut 0.5s linear;
        }
        .p1_4{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.4.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation:fadeInLeft 2s 4s linear both;
            -webkit-animation:fadeInLeft 2s 4s linear both; 
        }
        .ani .p1_4{
            animation:fadeOutLeft 2s linear;
            -webkit-animation:fadeOutLeft 2s linear; 
        }
        .p1_5{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.5.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation:fadeInRight 2s 4s linear both;
            -webkit-animation:fadeInRight 2s 4s linear both; 
        }
        .ani .p1_5{
              animation:fadeOutRight 2s linear both;
            -webkit-animation:fadeOutRight 2s linear both; 
        }
        .p1_6{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.6.png?2");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
             animation:fadeIn 1.5s 5.5s linear both;
            -webkit-animation:fadeIn 1.5s 5.5s linear both;
        }
        .ani .p1_6{
            animation:fadeOut 0.5s linear;
            -webkit-animation:fadeOut 0.5s linear;
        }
        .p1_7{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p0.7.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
             opacity: 0;
            animation:fadeIn 1s 6s linear both;
            -webkit-animation:fadeIn 1s 6s linear both;
        }
        .ani .p1_7{
            animation:fadeOut 0.5s linear;
            -webkit-animation:fadeOut 0.5s linear;
        }
        .p1_start{
            position: absolute;
            width: 48%;
            height: 9%;
            opacity: 0.3;
            left: 26%;
            top: 82%;      
        }
        .city{
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            animation:fadeIn 1.5s  2s linear both;
            -webkit-animation:fadeIn 1.5s 2s linear both;
        }
        .c_1,.c_2,.c_3,.c_5,.c_6,.c_7,.c_8,.c_9,.c_10,.c_11,.c_12,.c_13{
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat; 
        }
        .c_1_1,.c_2_1,.c_3_1,.c_3_2,.c_5_1,.c_6_1,.c_7_1,.c_8_1,.c_9_1,.c_10_1,.c_11_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat; 
        }
        .c_1{
            background-image: url("../images/old/p0.1.1.png?1");
        }
        .c_1_1{
            display: none;
            background-image: url("../images/new/p1.1.1.png?1");
            animation: fadeIn 1s linear;
            -webkit-animation: fadeIn 1s linear;
        }
        .c_2{           
            background-image: url("../images/old/p0.1.2.png?1");        
        }
        .c_2_1{
            display: none;  
            background-image: url("../images/new/p2.1.2.png?1");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both; 
            z-index: 2;
        }
        
        .c_3{
            background-image: url("../images/old/p0.1.3.png?2");
        }
        .c_3_1{
            display: none;
            background-image: url("../images/new/p3.1.3.png?2");
            animation: fadeIn 1s linear both; 
            -webkit-animation: fadeIn 1s linear both; 
            z-index: 2;
        }
        .c_3_2{
            display: none;
            background-image: url("../images/new/p3.1.4.png?1");
            animation: fadeIn 1s linear both; 
            -webkit-animation: fadeIn 1s linear both; 
            z-index: 2;
        }
        .c_5{
            background-image: url("../images/old/p0.1.5.png?1");
        }
        .c_5_1{
             display: none;
            background-image: url("../images/new/p4.1.5.png?2");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both; 
            z-index: 4;
        }
        
        .c_6{
            background-image: url("../images/old/p0.1.6.png?1");
        }
        .c_6_1{
            display: none;
            background-image: url("../images/new/p4.1.6.png?1");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both; 
            z-index: 3;
        }
        
        .c_7{
            background-image: url("../images/old/p0.1.7.png?1");
        }
        .c_7_1{
            display: none;
            background-image: url("../images/new/p4.1.7.png?1");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both; 
            z-index: 1;
        }
        
        .c_8{
            background-image: url("../images/old/p0.1.8.png?1");
        }
        .c_8_1{
            display: none;
            background-image: url("../images/new/p5.1.8.png?1");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both;
            z-index: 7;
        }
        
        .c_9{
            background-image: url("../images/old/p0.1.9.png?1");
        }
        .c_9_1{
            display: none;
            background-image: url("../images/new/p5.1.9.png?1");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both; 
            z-index: 6;
        }

        .c_10{
            background-image: url("../images/old/p0.1.10.png?2");
        }
        .c_10_1{
            display: none;
            background-image: url("../images/new/p6.1.10.png?1");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both;
            z-index: 8;
        }
         .c_11{
            background-image: url("../images/old/p0.1.11.png?1");
            z-index: 9;
        }
        .c_11_1{
            display: none;
            background-image: url("../images/new/p6.1.11.png?2");
            animation: fadeInDown 1.5s linear both; 
            -webkit-animation: fadeInDown 1.5s linear both; 
            z-index: 9;
        }

         .c_12{
            background-image: url("../images/down/p1.4.png?1");
        }
         .c_13{
            background-image: url("../images/down/p1.4.1.png?1");
        }
        .ani.c_13{
            animation: fadeOut 1.5s linear both;
            -webkit-animation:fadeOut 1.5s linear both;
        }
        
        .page2{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p2_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p1.png?3");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            animation: fadeIn 1.5s linear both;
            -webkit-animation: fadeIn 1.5s linear both;
        }
        .p2_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 .p2_2{
            animation: fadeInLeft 1s 1s linear both;
            -webkit-animation: fadeInLeft 1s 1s linear both;
        }
        .p2_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 .p2_3{
            animation: fadeIn 1s 2s linear both;
            -webkit-animation: fadeIn 1s 2s linear both;
        }
        .p2_tImg{
            position: absolute;
            width: 28%;
            height: 9%;
            left: 36%;
            top: 15%;      
            background-image: url("../images/p1.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_true{
            position: absolute;
            width: 24%;
            height: 7%;
            left: 38%;
            top: 16%; 
        }
        .p2_continue{
            position: absolute;
            width: 48%;
            height: 9%;
            left: 26%;
            top: 82%;      
        }
        
        .page3{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p3_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p2.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            animation: fadeIn 1.5s linear both;
            -webkit-animation: fadeIn 1.5s linear both;
        }
        .p3_2{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p2.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
        }
        .ani .p3_2{
             animation: fadeInLeft 1s 2s linear both;
            -webkit-animation: fadeInLeft 1s 2s linear both;
        }
        .p3_3{
            position: absolute;
            width: 12%;
            height: 7%;
            left: 36%;
            top: 25%;
            background-image: url("../images/p2.2.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
             animation: fadeInUp 1s 1s linear infinite;
            -webkit-animation: fadeInUp 1s 1s linear infinite;
        }
        .p3_4{
            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 .p3_4{
             animation: fadeIn 1.5s 3s linear both;
            -webkit-animation: fadeIn 1.5s 3s linear both;
        }
        .p3_hand{
            position: absolute;
            width: 9%;
            height: 7%;
            left: 42%;
            top: 36%;
            background-image: url("../images/hand.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation: flash 3s 2s linear infinite;
            -webkit-animation: flash 3s 2s linear infinite;
        }
        .p3_true{
            position: absolute;
            width: 17%;
            height: 9%;
            left: 32%;
            top: 32%;      
        }
        .p3_continue{
            position: absolute;
            width: 48%;
            height: 9%;
            left: 26%;
            top: 82%;      
        }
        .page4{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p4_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p3.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation: fadeInLeft 1s linear both;
            -webkit-animation: fadeInLeft 1s linear both;
            
        }
         .p4_2{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p3.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
        }
        .ani .p4_2{
             animation: fadeIn 1.5s 2s linear both;
            -webkit-animation: fadeIn 1.5s 2s linear both;
        }
        .p4_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 .p4_3{
             animation: fadeIn 1.5s 3s linear both;
            -webkit-animation: fadeIn 1.5s 3s linear both;
        }
        .p4_hand{
            position: absolute;
            width: 9%;
            height: 7%;
            left: 74%;
            top: 47%;
            background-image: url("../images/hand.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation: flash 3s 2s linear infinite;
            -webkit-animation: flash 3s 2s linear infinite;
        }
         .p4_true{
            position: absolute;
            width: 27%;
            height: 12%;
            left: 60%;
            top: 41%;      
        }
        .p4_continue{
            position: absolute;
            width: 48%;
            height: 9%;
            left: 26%;
            top: 82%;      
        }
        .page5{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p5_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p4.png?3");
            background-size: 100% 100%;
            background-repeat: no-repeat;
             opacity: 0;
            animation: fadeInRight 1s linear both;
            -webkit-animation: fadeInRight 1s linear both;
        }
        .p5_2{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p4.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
        }
        .ani .p5_2{
             animation: fadeIn 1.5s 2s linear both;
            -webkit-animation: fadeIn 1.5s 2s linear both;
        }
        .p5_4{
            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 .p5_4{
             animation: fadeIn 1.5s 3.5s linear both;
            -webkit-animation: fadeIn 1.5s 3.5s linear both;
        }
        .p5_tImg{
            position: absolute;
            width: 28%;
            height: 9%;
            left: 36%;
            top:14%;  
            opacity: 0;
            background-image: url("../images/p1.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            animation: fadeIn 1.5s 1s linear both;
            -webkit-animation: fadeIn 1.5s 1s linear both;
        }
        .p5_true{
            position: absolute;
            width: 24%;
            height: 7%;
            left: 38%;
            top:15%; 
        }
         .p5_continue{
            position: absolute;
            width: 48%;
            height: 9%;
            left: 26%;
            top: 82%;      
        }
        .page6{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p6_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p5.png?3");
            background-size: 100% 100%;
            background-repeat: no-repeat;
             opacity: 0;
            animation: fadeInDown 1s linear both;
            -webkit-animation: fadeInDown 1s linear both;
        }
        .p6_2{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p5.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
        }
        .ani .p6_2{
             animation: fadeIn 1.5s 2s linear both;
            -webkit-animation: fadeIn 1.5s 2s linear both;
        }
        .p6_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 .p6_3{
             animation: fadeIn 1.5s 3.5s linear both;
            -webkit-animation: fadeIn 1.5s 3.5s linear both;
        }
        .p6_tImg{
            position: absolute;
            width: 28%;
            height: 9%;
            left: 36%;
            top: 17%;      
            opacity: 0;
            background-image: url("../images/p1.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            animation: fadeIn 1.5s 1s linear both;
            -webkit-animation: fadeIn 1.5s 1s linear both;
        }
        .p6_true{
            position: absolute;
            width: 24%;
            height: 7%;
            left: 38%;
            top: 18%; 
        }
        .p6_continue{
            position: absolute;
            width: 48%;
            height: 9%;
            left: 26%;
            top: 82%;      
        }
        .page7{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p7_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p6.png?3");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
            animation: fadeIn 1s linear both;
            -webkit-animation: fadeIn 1s linear both;
        }
        .p7_2{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p6.1.png?2");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0;
        }
        .ani .p7_2{
             animation: fadeIn 1.5s 2s linear both;
            -webkit-animation: fadeIn 1.5s 2s linear both;
        }
        .p7_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 .p7_3{
            animation: fadeIn 1.5s 3.5s linear both;
            -webkit-animation: fadeIn 1.5s 3.5s linear both;
        }
        .p7_tImg{
            position: absolute;
            width: 28%;
            height: 9%;
            left: 38.8%;
            top: 14.5%;        
            opacity: 0;
            background-image: url("../images/p1.1.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            animation: fadeIn 1.5s 1s linear both;
            -webkit-animation: fadeIn 1.5s 1s linear both;
        }
        .p7_true{
            position: absolute;
            width: 24%;
            height: 7%;
            left: 40.8%;
            top: 15.5%;
        }
        .p7_continue{
            position: absolute;
            width: 48%;
            height: 9%;
            left: 26%;
            top: 82%;      
        }
        .page8{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .p8_1{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p7.2.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            top: 25%;
            opacity: 0;
            animation: bounceIn 1s 1.5s linear both;
            -webkit-animation: bounceIn 1s 1.5s linear both;
        }
        .p8_2{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p7.png?2");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            animation: fadeIn 1.5s linear both;
            -webkit-animation:fadeIn 1.5s linear both;
        }
        .p8_3{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p7.1.png?2");
            background-size: 100% 100%;
            background-repeat: no-repeat;
             animation: fadeIn 1s 2.5s linear both;
            -webkit-animation:fadeIn 1s 2.5s linear both;
        }
         .p8_4{
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../images/p7.3.png?1");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }