/*音乐*/

.music_blk{z-index:999;position:fixed;right:5px;top:5px;display: none;width: 12%;height: 6%}
.music{display:block;width:100%;height:100%;background:url('../images/music_on.gif?5') no-repeat;background-size:100% 100%;}
*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.loadWrap{
/*    display: none;*/
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading.jpg?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
}
.loadGif{
    position: absolute;
    width: 50%;
    height: 30%;
    left: 25%;
    top: 10%;
    background-image: url(../images/loading.1.gif?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.loadGif1{
    position: absolute;
    width: 100%;
    height: 8%;
    left:0%;
    top: 44%;
    background-image: url(../images/jindutiao.gif?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.swiper-container{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
}
.swiper-wrapper{
    width: 100%;
    height: 100%;
}
.page0{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.jpg?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p0_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.1.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;     
}
.ani .p0_1{
    animation: fadeIn 2s linear both;
    -webkit-animation:fadeIn 2s linear both;
}
.p0_2{
    position: absolute;
    width: 140%;
    height: 120%;
    left: -20%;
    top: -16%;
    background-image: url(../images/p0.2.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}
.ani .p0_2{
    animation: fadeIn 1s 2.5s linear both,move_up 1.5s 2.5s linear infinite;
    -webkit-animation:fadeIn 1s 2.5s linear both,move_up 1.5s 2.5s linear infinite ;
}
@keyframes move_up{
    0%{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    100%{
         transform: translate3d(0,-2%,0);
        -webkit-transform: translate3d(0,-2%,0);
    }
}
.p0_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.3.png?7);
    background-size: 100% 100%;
    background-repeat: no-repeat; 
}
.ani .p0_3{
    animation: fadeIn 1s 1.5s linear both;
    -webkit-animation:fadeIn 1s 1.5s linear both;
}
.page1{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.jpg?7);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_click{
    position: absolute;
    width: 43%;
    height: 8%;
    top: 83%;
    left: 28%;
}
.page2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.2.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p2_dm{
    position: absolute;
    width: 2.8%;
    height: 1.6%;
    left: 33.72%;
    top: 23.2%;
    background-image: url(../images/p2.1.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat; 
}
.p2_dwm{
    position: absolute;
    width: 2.8%;
    height: 1.6%;
    left: 56%;
    top: 23.2%;
    background-image: url(../images/p2.1.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    opacity: 0;
}
.p2_imgWrap{
    position: absolute;
    width: 56.5%;
    height: 34.8%;
    left: 22.2%;
    top: 31.5%;
    overflow: hidden;
}
#p2_img{
    position: absolute;
    left: 0px;
    top: 0px;
}
#canvas{
    position: absolute;
}
#upImg{
    position: absolute;
    width: 56.5%;
    height: 34.8%;
    left: 22.2%;
    top: 31.5%;
    opacity: 0;
}
.p2_smer{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-image: url(../images/p2.5.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p2_m{
    position: absolute;
    width: 15%;
    height: 6%;
    left: 32%;
    top: 20.6%;
}
.p2_wm{
    position: absolute;
    width: 15%;
    height: 6%;
    left: 53%;
    top: 20.6%
}
.p2_click1{
    position: absolute;
    width: 30%;
    height: 8%;
    left: 18%;
    top: 78.6%;
}
.p2_click2{
    position: absolute;
    width: 30%;
    height: 8%;
    left: 53%;
    top: 78.6%;
}
.page3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.jpg?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.p3_c{
    position: absolute;
    background-image: url(../images/circle1.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}
.c_d{
    position: absolute;
    border-radius: 50%;
    left: 5%;
    top: 5%;
    width:90%;
    height: 90%;
    transition: all .6s;
    -webkit-transition: all .6s;
}
.c{
    position: absolute;
    width: 13%;
    height: 18%;
    background-size: 100% 100%;
    background-repeat: no-repeat;           
}
.c_1{
    background-image: url(../images/weiwuerzu.png?5);  
}
.c_2{
     background-image: url(../images/huizu.png?5); 
}
.c_3{
     background-image: url(../images/mengguzu.png?5); 
}
.c_4{
     background-image: url(../images/zangzu.png?5); 
}
.c_5{
     background-image: url(../images/manzu.png?5); 
}
.p3_1{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    background-image: url(../images/p3.1.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    animation: flash 2s linear 2;
    -webkit-animation: flash 2s linear 2;
}
.p3_2{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 10%;
    background-image: url(../images/p3.2.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}

.p3_2{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 6%;
    transform: translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    background-image: url(../images/p3.2.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}
.p3_3{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 4.5%;
    background-image: url(../images/p3.3.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}
.p3_wrap{
    position: absolute;
    width: 70%;
    height: 39%;
    left: 15%;
    top: 37%;
}
.p3_content{
    position: absolute;
    width: 100%;
    left: 0%;
    top: 0%;
    height: 140%;
    background-image: url(../images/hanizuw.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}
#canWord{
    position: absolute;
    width: 100%;
    left: 0%;
    top: 0%;
    height: 100%;
}
.p3_click{
    position: absolute;
    width: 42%;
    height: 7%;
    left: 28%;
    top: 88%;
}
.page4{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4.jpg?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;   
}
.p4_1{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    background-image: url(../images/p4.1.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 1s 2s linear both;
    -webkit-animation: fadeIn 1s 2s linear both;
}
.p4_2{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 1%;
    background-image: url(../images/p4.2.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    opacity: 0;  
    animation: p4_shan 1s .8s linear infinite alternate;
    -webkit-animation: p4_shan 1s .8s linear infinite alternate;
}
@keyframes p4_shan{
    0%{
        opacity: 0
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes p4_shan{
    0%{
        opacity: 0
    }
    100%{
        opacity: 1;
    }
}
.p4_3{
   position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    background-image: url(../images/p4.3.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 1s 2s linear both;
    -webkit-animation: fadeIn 1s 2s linear both;
}
.p4_2_1{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 10%;
    background-image: url(../images/rcs.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate; 
}
.p4_loadImg{
    position: absolute;
    width: 90%;
    left: 5%;
    top: 12%;
    animation: loadimg_ani .8s linear both; 
    -webkit-animation: loadimg_ani .8s linear both; 
}
@keyframes loadimg_ani{
    0%{
        transform: translate3d(-100%,0,0) rotateZ(-90deg); 
        -webkit-transform: translate3d(-100%,0,0) rotateZ(-90deg);
    }
    100%{
        transform: translate3d(0,0,0) rotateZ(0deg);
        -webkit-transform: translate3d(0,0,0) rotateZ(0deg);
    }
}
@-webkit-keyframes loadimg_ani{
    0%{
        transform: translate3d(-100%,0,0) rotateZ(-90deg); 
        -webkit-transform: translate3d(-100%,0,0) rotateZ(-90deg);
    }
    100%{
        transform: translate3d(0,0,0) rotateZ(0deg);
        -webkit-transform: translate3d(0,0,0) rotateZ(0deg);
    }
}

.p4_sImg{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}
.p4_click1{
    position: absolute;
    width: 43%;
    height: 7%;
    left: 14%;
    top: 82.5%;
}
.p4_click2{
    position: absolute;
    width: 26%;
    height: 7%;
    left: 61.5%;
    top: 82.5%;
}
.p4_click3{
    position: absolute;
    width: 43%;
    height: 7%;
    left: 28%;
    top: 82.5%;
}
.page5{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5.jpg?8);
    background-size: 100% 100%;
    background-repeat: no-repeat;  
}
.p5_1{
    position: absolute;
    width: 28%;
    height: 14%;
    left: 66%;
    top: 3%;
    background-image: url(../images/p5.1.png?5);
    background-size: 100% 100%;
    background-repeat: no-repeat; 
}
.p5_click0{
    position: absolute;
    width: 40%;
    height: 7%;
    top: 57%;
    left: 7%;
}
.p5_click{
    position: absolute;
    width: 40%;
    height: 7%;
    right: 9%;
    top: 57%;
}