body dl dd div p{margin:0;padding:0;font-family:"'Microsoft YaHei'";}
body{width: 100%;height: 100%;top: 0;bottom: 0;position: absolute; overflow: scroll;-webkit-overflow-scrolling: touch; }
ul li{list-style-type:none;}
a {text-decoration:none;opacity: 0;}
a:link{color:#000;}
a:visited{color:#000;}
.music_blk{z-index:999;position:fixed;top:10px;right:10px;}
.music{display:block;width:35px;height:35px;background:url('../images/music.png?1') no-repeat;background-size:100% 100%;}
.music_on{-webkit-animation:music 3s linear infinite;animation:music 3s linear infinite;}
.loading{position:absolute;width:100%;height:100%;background:url('../images/loading.png?1') no-repeat 0 0;background-size:100% 100%;}
.load_val{width:100%;}
.load_anime{z-index: -10;position:absolute;width:100%;height:100%;background:url('../images/loading.jpg?1') no-repeat 0 0;background-size:100% 100%;}
.loading_line{z-index: -5;top: 55%;width: 70%;height: 24px;position: absolute;left: 15%;}
.loading_line_blank{position: absolute;left: -101%;width:100%;height:100%;background:url('../images/loading2.png?1') no-repeat 0 0;background-size:100% 100%;}
.load_img{position: absolute;top:0;width: 100%;height:100%;}
.load_img img{width: 100%;height:100%;}
.load_u{position:absolute;width:100%;height:100%;opacity: 0.8;left:100%;}
.body{width: 100%;height: 100%;position: absolute;}
.swiper-container{position:absolute;width:100%;height:100%}
.swiper-wrapper{height: 100%;}
.swiper-slide{position:relative;overflow:hidden}
.swiper-slide *{position:absolute;opacity:0}

#s0{display: none;position: absolute;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p0.jpg?1') no-repeat 0 0;background-size:100% 100%;overflow-y:hidden;}
#s0 .w0{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background:url('../images/p0.1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background:url('../images/p0.2.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background:url('../images/p0.3.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w3{position: absolute;width: 36%;height: 7%;top: 74%;left: 32%;background:url('../images/p0.4.png?1') no-repeat 0 0;background-size:100% 100%;}
.start{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#s0 .w4{position: absolute;width: 100%;height: 4%;top: 96%;left: 0%;background:url('../images/p0.5.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w5{position: absolute;width: 100%;height: 6%;top: 94%;left: 0%;background:url('../images/p0.6.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w6{position: absolute;width: 100%;height: 6%;top: 92%;left: 0%;background:url('../images/p0.7.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w7{position: absolute;width: 100%;height: 6%;top: 90%;left: 0%;background:url('../images/p0.8.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w8{position: absolute;width: 34%;height: 15%;top: 77%;left: -6%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w9{position: absolute;width: 21%;height: 9%;top: 85%;left: 1%;background:url('../images/p0.10.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w10{position: absolute;width: 20%;height: 6%;top: 87%;left: 26%;background:url('../images/p0.11.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w11{position: absolute;width: 20%;height: 6%;top: 87%;left: 53%;background:url('../images/p0.12.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w12{position: absolute;width: 23%;height: 11%;top: 85%;left: 74%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}
#s0 .w13{position: absolute;width: 32%;height: 13%;top: 79%;left: 71%;background:url('../images/p0.14.png?1') no-repeat 0 0;background-size:100% 100%;}

#s1{display: none;position: absolute;width: 100%;height: 100%;top:0%;left:0%;overflow: scroll;-webkit-overflow-scrolling: touch;}
#s1 .w0{position: absolute;width: 702%;height: 100%;top:0%;left:0%;background:url('../images/p1.jpg?1') no-repeat 0 0;background-size:100% 100%;overflow-y:hidden;}
#s1 .w1_1{position: absolute;width: 100%;height: 100%;top: 0%;left: 2%;background:url('../images/juzhou2.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w1_2{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 0.3%;background:url('../images/p1.3.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w1_3{position: absolute;width: 100%;height: 100%;top: 0%;left: 7.3%;background:url('../images/p1.4.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w1_4{position: absolute;width: 688%;height: 6%;top: 57.6%;left: 7.3%;background:url('../images/p0.8.png?1');background-repeat: repeat-x;background-size:414px 50px;}
#s1 .w1_5{position: absolute;width: 688%;height: 6%;top: 59.6%;left: 7.3%;background:url('../images/p0.7.png?1');background-repeat: repeat-x;background-size:414px 50px;}
#s1 .w1_6{position: absolute;width: 688%;height: 6%;top: 61.6%;left: 7.3%;background:url('../images/p0.6.png?1');background-repeat: repeat-x;background-size:414px 50px;}
#s1 .w1_7{position: absolute;width: 688%;height: 6%;top: 63.8%;left: 7.3%;background:url('../images/p0.5.png?1');background-repeat: repeat-x;background-size:414px 25px;}
#s1 .w1_8{position: absolute;width: 35%;height: 9%;top: 57%;left: 33%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w1_9{position: absolute;width: 22%;height: 9%;top: 53%;left: 15%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w1_10{position: absolute;width: 22%;height: 9%;top: 53%;left: 67%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}

#s1 .w2_2{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 110%;background:url('../images/p2.1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w2_3{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 110%;background:url('../images/p2.2.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w2_8{position: absolute;width: 33%;height: 9%;top: 59%;left: 136%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w2_9{position: absolute;width: 22%;height: 9%;top: 53%;left: 120%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w2_10{position: absolute;width: 22%;height: 9%;top: 53%;left: 172%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}

#s1 .w3_2{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 215%;background:url('../images/p3.1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w3_3{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 215%;background:url('../images/p3.2.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w3_8{position: absolute;width: 33%;height: 9%;top: 57%;left: 228%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w3_9{position: absolute;width: 22%;height: 9%;top: 53%;left: 226%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w3_10{position: absolute;width: 22%;height: 9%;top: 53%;left: 280%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w3_11{position: absolute;width: 33%;height: 9%;top: 59%;left: 258%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}

#s1 .w4_2{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 315%;background:url('../images/p4.1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w4_3{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 315%;background:url('../images/p4.2.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w4_8{position: absolute;width: 33%;height: 9%;top: 57%;left: 350%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w4_9{position: absolute;width: 22%;height: 9%;top: 53%;left: 325%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w4_10{position: absolute;width: 22%;height: 9%;top: 53%;left: 375%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}

#s1 .w5_2{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 450%;background:url('../images/p5.1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w5_3{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 450%;background:url('../images/p5.2.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w5_8{position: absolute;width: 33%;height: 9%;top: 57%;left: 460%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w5_9{position: absolute;width: 22%;height: 9%;top: 53%;left: 420%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w5_10{position: absolute;width: 22%;height: 9%;top: 53%;left: 445%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w5_11{position: absolute;width: 33%;height: 9%;top: 59%;left: 520%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w5_17{position: absolute;width: 22%;height: 9%;top: 53%;left: 500%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w5_18{position: absolute;width: 22%;height: 9%;top: 53%;left: 550%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}

#s1 .w6_2{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 600%;background:url('../images/p6.1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w6_3{opacity: 0;position: absolute;width: 100%;height: 100%;top: 0%;left: 600%;background:url('../images/p6.2.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w6_8{position: absolute;width: 33%;height: 9%;top: 57%;left: 640%;background:url('../images/box1.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w6_9{position: absolute;width: 22%;height: 9%;top: 53%;left: 615%;background:url('../images/p0.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#s1 .w6_10{position: absolute;width: 22%;height: 9%;top: 53%;left: 665%;background:url('../images/p0.13.png?1') no-repeat 0 0;background-size:100% 100%;}

#s1 .finish{position: fixed;width: 46%;height: 7%;top: 0%;left: 27%;}
.title1{
      animation:shanIn1 2s .5s linear both;
            -moz-animation:shanIn1 2s .5s linear both;
            -webkit-animation:shanIn1 2s .5s linear both;
            -o-animation:shanIn1 2s .5s linear both
}
.title2{
      animation:shanIn 2s 2.5s linear both;
            -moz-animation:shanIn 2s 2.5s linear both;
            -webkit-animation:shanIn 2s 2.5s linear both;
            -o-animation:shanIn 2s 2.5s linear both
}
.box_h{
        animation:animate1 2s .5s linear infinite;
        -moz-animation:animate1 2s .5s linear infinite;
        -webkit-animation:animate1 2s .5s linear infinite;
        -o-animation:animate1 2s .5s linear infinite
}
.shan{
    animation:shan 2s .5s linear infinite;
            -moz-animation:shan 2s .5s linear infinite;
            -webkit-animation:shan 2s .5s linear infinite;
            -o-animation:shan 2s .5s linear infinite
}
#fuceng{display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;pointer-events: none;transform-origin:0 0;cursor: move;z-index: 500;}
#fuceng .w0{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background:url('../images/p1.2.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w00{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background:url('../images/p1.1.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w000{opacity: 0;position: absolute;width: 7%;height: 6%;top: 24%;left: 93%;background:url('../images/arrow.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w0000{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background:url('../images/finish.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 73.5%;left: 14%;background:url('../images/1.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w1_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 73.5%;left: 14.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w2{opacity: 0;position: absolute;width: 10%;height: 5%;top: 73.5%;left: 35%;background:url('../images/2.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w2_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 73.5%;left: 35.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w3{opacity: 0;position: absolute;width: 13%;height: 5%;top: 73.5%;left: 55%;background:url('../images/3.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w3_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 73.5%;left: 55.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w4{opacity: 0;position: absolute;width: 13%;height: 5%;top: 73.5%;left: 76%;background:url('../images/4.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w4_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 73.5%;left: 76.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w5{opacity: 0;position: absolute;width: 10%;height: 5%;top: 86%;left: 14%;background:url('../images/5.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w5_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 86%;left: 14.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w6{opacity: 0;position: absolute;width: 10%;height: 5%;top: 86%;left: 35.5%;background:url('../images/6.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w6_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 86%;left: 35.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w7{opacity: 0;position: absolute;width: 11%;height: 5%;top: 86%;left: 55%;background:url('../images/7.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w7_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 86%;left: 55.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w8{opacity: 0;position: absolute;width: 10%;height: 5%;top: 86%;left: 76%;background:url('../images/8.png?1') no-repeat 0 0;background-size:100% 100%;}
#fuceng .w8_1{opacity: 0;position: absolute;width: 10%;height: 5%;top: 86%;left: 76.5%;background:url('../images/shi.png?1') no-repeat 0 0;background-size:100% 100%;}

#explain{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/explain.png?1') no-repeat 0 0;background-size:100% 100%;}
#explain .goon{position: absolute;width: 20%;height: 12.5%;top: 75%;left: 40%;}

#quest1{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p1.6.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest1 .w0{z-index: 1000;position: fixed;width: 32%;height: 8%;top: 49%;left: 14%;}
#quest1 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest1 .w1{z-index: 1000;position: fixed;width: 32%;height: 8%;top: 49%;left: 49%;}
#quest1 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest1 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans1{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p1.9.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans1 .w0{z-index: 1000;position: fixed;width: 45%;height: 24%;top: 11%;left: 28%;background:url('../images/1.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans1 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans1 .close1{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 79%;left: 42%;}

#quest2{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p2.3.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest2 .w0{z-index: 1000;position: fixed;width: 32%;height: 8%;top: 52%;left: 14%;}
#quest2 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest2 .w1{z-index: 1000;position: fixed;width: 32%;height: 8%;top: 52%;left: 44%;}
#quest2 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest2 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans2{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p2.4.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans2 .w0{z-index: 1000;position: fixed;width: 45%;height: 24%;top: 11%;left: 28%;background:url('../images/2.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans2 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans2 .close2{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 79%;left: 42%;}

#quest3{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p3.3.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest3 .w0{z-index: 1000;position: fixed;width: 32%;height: 8%;top: 47%;left: 13%;}
#quest3 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest3 .w1{z-index: 1000;position: fixed;width: 32%;height: 8%;top: 47%;left: 45%;}
#quest3 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest3 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans3{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p3.4.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans3 .w0{z-index: 1000;position: fixed;width: 63%;height: 24%;top: 11%;left: 20%;background:url('../images/3.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans3 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans3 .close3{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 79%;left: 42%;}

#quest4{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p3-1.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest4 .w0{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 42%;left: 19%;}
#quest4 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest4 .w1{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 50.5%;left: 19%;}
#quest4 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest4 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans4{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p3-2.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans4 .w0{z-index: 1000;position: fixed;width: 55%;height: 24%;top: 12%;left: 26%;background:url('../images/4.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans4 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans4 .close4{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 79%;left: 42%;}

#quest5{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p4.3.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest5 .w0{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 47%;left: 12%;}
#quest5 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest5 .w1{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 55.5%;left: 12%;}
#quest5 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest5 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans5{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p4.4.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans5 .w0{z-index: 1000;position: fixed;width: 38%;height: 22%;top: 12%;left: 31%;background:url('../images/5.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans5 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans5 .close5{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 79%;left: 42%;}

#quest6{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p5.3.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest6 .w0{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 50%;left: 15%;}
#quest6 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest6 .w1{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 59%;left: 15%;}
#quest6 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest6 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans6{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p5.4.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans6 .w0{z-index: 1000;position: fixed;width: 32%;height: 23%;top: 12%;left: 34%;background:url('../images/6.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans6 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans6 .close6{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 79%;left: 42%;}

#quest7{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p5-1.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest7 .w0{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 47%;left: 13%;}
#quest7 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest7 .w1{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 55.5%;left: 13%;}
#quest7 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest7 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans7{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p5-2.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans7 .w0{z-index: 1000;position: fixed;width: 55%;height: 24%;top: 12%;left: 26%;background:url('../images/7.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans7 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans7 .close7{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 84%;left: 42%;}

#quest8{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p6.3.png?1') no-repeat 0 0;background-size:100% 100%;}
#quest8 .w0{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 47%;left: 13%;}
#quest8 .w0 .a1{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest8 .w1{z-index: 1000;position: fixed;width: 52%;height: 8%;top: 55.5%;left: 13%;}
#quest8 .w1 .a2{z-index: 1000;position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}
#quest8 .w2{z-index: 1000;position: fixed;width: 45%;height: 8%;top: 65%;left: 27%;}
#ans8{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p6.4.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans8 .w0{z-index: 1000;position: fixed;width: 35%;height: 24%;top: 12%;left: 33%;background:url('../images/8.png?1') no-repeat 0 0;background-size:100% 100%;}
#ans8 .w1{z-index: 1000;position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background-size:100% 100%;}
#ans8 .close8{z-index: 1000;position: fixed;width: 16%;height: 8%;top: 79%;left: 42%;}

#result{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p7.jpg?1') no-repeat 0 0;background-size:100% 100%;}
#result .w1{position: absolute;width: 9%;height: 5%;top: 36.5%;left: 17.5%;background-size:100% 100%;}
#result .w2{position: absolute;width: 9%;height: 5%;top: 36.5%;left: 37%;background-size:100% 100%;}
#result .w3{position: absolute;width: 10%;height: 5%;top: 36.5%;left: 55%;background-size:100% 100%;}
#result .w4{position: absolute;width: 9%;height: 5%;top: 36.5%;left: 74%;background-size:100% 100%;}
#result .w5{position: absolute;width: 9%;height: 5%;top: 48%;left: 18%;background-size:100% 100%;}
#result .w6{position: absolute;width: 9%;height: 5%;top: 48%;left: 37%;background-size:100% 100%;}
#result .w7{position: absolute;width: 9%;height: 5%;top: 48%;left: 55%;background-size:100% 100%;}
#result .w8{position: absolute;width: 8%;height: 5%;top: 48%;left: 74%;background-size:100% 100%;}
#result .w9{position: absolute;width: 35%;height: 8%;top: 59%;left: 13%;background-size:100% 100%;}
#result .w10{position: absolute;width: 35%;height: 8%;top: 59%;left: 51%;background-size:100% 100%;}
#result .w11{position: absolute;width: 30%;height: 6.5%;top: 75%;left: 18%;background-size:100% 100%;}
#result .w12{position: absolute;width: 30%;height: 6.5%;top: 75%;left: 51;background-size:100% 100%;}
#result .w12 a{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}


#result1{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/p7.1.jpg?1') no-repeat 0 0;background-size:100% 100%;}
#result1 .w0{position: absolute;width: 9%;height: 6%;top: 11.5%;left: 54.5%;background-size:100% 100%;}
#result1 .w00{position: absolute;width: 7%;height: 6%;top: 18%;left: 48.5%;background-size:100% 100%;}
#result1 .w1{position: absolute;width: 9%;height: 5%;top: 36.5%;left: 17.5%;background-size:100% 100%;}
#result1 .w2{position: absolute;width: 9%;height: 5%;top: 36.5%;left: 37%;background-size:100% 100%;}
#result1 .w3{position: absolute;width: 10%;height: 5%;top: 36.5%;left: 55%;background-size:100% 100%;}
#result1 .w4{position: absolute;width: 9%;height: 5%;top: 36.5%;left: 74%;background-size:100% 100%;}
#result1 .w5{position: absolute;width: 9%;height: 5%;top: 48%;left: 18%;background-size:100% 100%;}
#result1 .w6{position: absolute;width: 9%;height: 5%;top: 48%;left: 37%;background-size:100% 100%;}
#result1 .w7{position: absolute;width: 9%;height: 5%;top: 48%;left: 55%;background-size:100% 100%;}
#result1 .w8{position: absolute;width: 8%;height: 5%;top: 48%;left: 74%;background-size:100% 100%;}
#result1 .w9{position: absolute;width: 35%;height: 8%;top: 59%;left: 13%;background-size:100% 100%;}
#result1 .w10{position: absolute;width: 35%;height: 8%;top: 59%;left: 51%;background-size:100% 100%;}
#result1 .w11{position: absolute;width: 30%;height: 6.5%;top: 75%;left: 18%;background-size:100% 100%;}
#result1 .w12{position: absolute;width: 30%;height: 6.5%;top: 75%;left: 51%;background-size:100% 100%;}
#result1 .w12 a{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;}

#about{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/about.png?1') no-repeat 0 0;background-size:100% 100%;}
#about .a_close{z-index: 1000;position: fixed;width: 25%;height: 6%;top: 3%;left: 70%;}
#prize{z-index: 1000;display: none;position: fixed;width: 100%;height: 100%;top:0%;left:0%;background:url('../images/prize.png?1') no-repeat 0 0;background-size:100% 100%;}
#prize .p_close{z-index: 1000;position: fixed;width: 25%;height: 6%;top: 3%;left: 70%;}
#more{z-index: 1000;display: none;position: absolute;overflow:scroll ;width: 100%;height: 100%;top:0%;left:0%;}
#more .w0{z-index: 1000;position: absolute;overflow:scroll ;width: 100%;height: 465%;top:0%;left:0%;background:url('../images/more.png?1') no-repeat 0 0;background-size:100% 100%;overflow-x:hidden;}
#more .m_close{z-index: 1000;position: fixed;width: 25%;height: 6%;top: 3%;left: 70%;background:url('../images/close.png?1') no-repeat 0 0;background-size:100% 100%;}
.up{
    animation:up 1.5s ease both;
    -moz-animation:up 1.5s ease both;
    -webkit-animation:up 1.5s ease both;
    -o-animation:up 1.5s ease both
}
.down{
    animation:down 1.5s ease both;
    -moz-animation:down 1.5s ease both;
    -webkit-animation:down 1.5s ease both;
    -o-animation:down 1.5s ease both
}


#s0.ani .w0{
            animation:fadeIn .5s ease both;
            -moz-animation:fadeIn .5s ease both;
            -webkit-animation:fadeIn .5s ease both;
            -o-animation:fadeIn .5s ease both
}
#s0.ani .w1{
            animation:fadeIn1 .6s 1s ease both;
            -moz-animation:fadeIn1 .6s 1s ease both;
            -webkit-animation:fadeIn1 .6s 1s ease both;
            -o-animation:fadeIn1 .6s 1s ease both
}
#s0.ani .w2{
            animation:fadeIn1 .6s 2s ease both;
            -moz-animation:fadeIn1 .6s 2s ease both;
            -webkit-animation:fadeIn1 .6s 2s ease both;
            -o-animation:fadeIn1 .6s 2s ease both
}
#s0.ani .w3{
            animation:fadeInBig 1s 2s ease infinite;
            -moz-animation:fadeInBig 1s 2s ease infinite;
            -webkit-animation:fadeInBig 1s 2s ease infinite;
            -o-animation:fadeInBig 1s 2s ease infinite
}
#s0.ani .w4{
            animation:water1 2s ease infinite;
            -moz-animation:water1 2s ease infinite;
            -webkit-animation:water1 2s ease infinite;
            -o-animation:water1 2s ease infinite
}
#s0.ani .w5{
            animation:water11 2s .5s ease infinite;
            -moz-animation:water11 2s .5s ease infinite;
            -webkit-animation:water11 2s .5s ease infinite;
            -o-animation:water11 2s .5s ease infinite
}
#s0.ani .w6{
            animation:water111 2s 1s ease infinite;
            -moz-animation:water111 2s 1s ease infinite;
            -webkit-animation:water111 2s 1s ease infinite;
            -o-animation:water111 2s 1s ease infinite
}
#s0.ani .w7{
            animation:water1111 2s 1.5s ease infinite;
            -moz-animation:water1111 2s 1.5s ease infinite;
            -webkit-animation:water1111 2s 1.5s ease infinite;
            -o-animation:water1111 2s 1.5s ease infinite
}
#s0.ani .w8{
            animation:water3 2s .5s linear infinite;
            -moz-animation:water3 2s .5s linear infinite;
            -webkit-animation:water3 2s .5s linear infinite;
            -o-animation:water3 2s .5s linear infinite
}
#s0.ani .w13{
            animation:water4 2s .5s linear infinite;
            -moz-animation:water4 2s .5s linear infinite;
            -webkit-animation:water4 2s .5s linear infinite;
            -o-animation:water4 2s .5s linear infinite
}
#s0.ani .w9{
            animation:water5 2s 1s linear infinite;
            -moz-animation:water5 2s 1s linear infinite;
            -webkit-animation:water5 2s 1s linear infinite;
            -o-animation:water5 2s 1s linear infinite
}
#s0.ani .w12{
            animation:water6 2s 1s linear infinite;
            -moz-animation:water6 2s 1s linear infinite;
            -webkit-animation:water6 2s 1s linear infinite;
            -o-animation:water6 2s 1s linear infinite
}
#s0.ani .w10{
            animation:water7 2s 1.5s linear infinite;
            -moz-animation:water7 2s 1.5s linear infinite;
            -webkit-animation:water7 2s 1.5s linear infinite;
            -o-animation:water7 2s 1.5s linear infinite
}
#s0.ani .w11{
            animation:water8 2s 1.5s linear infinite;
            -moz-animation:water8 2s 1.5s linear infinite;
            -webkit-animation:water8 2s 1.5s linear infinite;
            -o-animation:water8 2s 1.5s linear infinite
}

#s1.ani .w1_1{
            animation:fadeOutR 15s .5s linear both;
            -moz-animation:fadeOutR 15s .5s linear both;
            -webkit-animation:fadeOutR 15s .5s linear both;
            -o-animation:fadeOutR 15s .5s linear both
}
#s1.ani .w1_2{
            animation:shanIn1 2s 1s linear both;
            -moz-animation:shanIn1 2s 1s linear both;
            -webkit-animation:shanIn1 2s 1s linear both;
            -o-animation:shanIn1 2s 1s linear both
}
#s1.ani .w1_3{
            animation:shanIn 2s 3s linear both;
            -moz-animation:shanIn 2s 3s linear both;
            -webkit-animation:shanIn 2s 3s linear both;
            -o-animation:shanIn 2s 3s linear both
}
#s1.ani .w1_8{
            animation:animate1 2s .5s linear infinite;
            -moz-animation:animate1 2s .5s linear infinite;
            -webkit-animation:animate1 2s .5s linear infinite;
            -o-animation:animate1 2s .5s linear infinite
}
#s1.ani .w1_9{
            animation:lang1_1 2s .5s linear infinite;
            -moz-animation:lang1_1 2s .5s linear infinite;
            -webkit-animation:lang1_1 2s .5s linear infinite;
            -o-animation:lang1_1 2s .5s linear infinite
}
#s1.ani .w1_10{
            animation:lang1_2 2s 1s linear infinite;
            -moz-animation:lang1_2 2s 1s linear infinite;
            -webkit-animation:lang1_2 2s 1s linear infinite;
            -o-animation:lang1_2 2s 1s linear infinite
}

#s1.ani .w2_8{
            animation:animate1 2s .5s linear infinite;
            -moz-animation:animate1 2s .5s linear infinite;
            -webkit-animation:animate1 2s .5s linear infinite;
            -o-animation:animate1 2s .5s linear infinite
}
#s1.ani .w2_9{
    animation:lang2_1 2s .5s linear infinite;
        -moz-animation:lang2_1 2s .5s linear infinite;
        -webkit-animation:lang2_1 2s .5s linear infinite;
        -o-animation:lang2_1 2s .5s linear infinite
}
#s1.ani .w2_10{
    animation:lang2_2 2s 1s linear infinite;
        -moz-animation:lang2_2 2s 1s linear infinite;
        -webkit-animation:lang2_2 2s 1s linear infinite;
        -o-animation:lang2_2 2s 1s linear infinite
}

#s1.ani .w3_8{
            animation:animate1 2s .5s linear infinite;
            -moz-animation:animate1 2s .5s linear infinite;
            -webkit-animation:animate1 2s .5s linear infinite;
            -o-animation:animate1 2s .5s linear infinite
}
#s1.ani .w3_9{
    animation:lang3_1 2s .5s linear infinite;
        -moz-animation:lang3_1 2s .5s linear infinite;
        -webkit-animation:lang3_1 2s .5s linear infinite;
        -o-animation:lang3_1 2s .5s linear infinite
}
#s1.ani .w3_10{
    animation:lang3_2 2s 1s linear infinite;
        -moz-animation:lang3_2 2s 1s linear infinite;
        -webkit-animation:lang3_2 2s 1s linear infinite;
        -o-animation:lang3_2 2s 1s linear infinite
}
#s1.ani .w3_11{
            animation:animate1 2s 1s linear infinite;
            -moz-animation:animate1 2s 1s linear infinite;
            -webkit-animation:animate1 2s 1s linear infinite;
            -o-animation:animate1 2s 1s linear infinite
}

#s1.ani .w4_8{
            animation:animate1 2s .5s linear infinite;
            -moz-animation:animate1 2s .5s linear infinite;
            -webkit-animation:animate1 2s .5s linear infinite;
            -o-animation:animate1 2s .5s linear infinite
}
#s1.ani .w4_9{
    animation:lang4_1 2s .5s linear infinite;
        -moz-animation:lang4_1 2s .5s linear infinite;
        -webkit-animation:lang4_1 2s .5s linear infinite;
        -o-animation:lang4_1 2s .5s linear infinite
}
#s1.ani .w4_10{
    animation:lang4_2 2s 1s linear infinite;
        -moz-animation:lang4_2 2s 1s linear infinite;
        -webkit-animation:lang4_2 2s 1s linear infinite;
        -o-animation:lang4_2 2s 1s linear infinite
}

#s1.ani .w5_8{
            animation:animate1 2s .5s linear infinite;
            -moz-animation:animate1 2s .5s linear infinite;
            -webkit-animation:animate1 2s .5s linear infinite;
            -o-animation:animate1 2s .5s linear infinite
}
#s1.ani .w5_9{
    animation:lang5_1 2s .5s linear infinite;
        -moz-animation:lang5_1 2s .5s linear infinite;
        -webkit-animation:lang5_1 2s .5s linear infinite;
        -o-animation:lang5_1 2s .5s linear infinite
}
#s1.ani .w5_10{
    animation:lang5_2 2s 1s linear infinite;
        -moz-animation:lang5_2 2s 1s linear infinite;
        -webkit-animation:lang5_2 2s 1s linear infinite;
        -o-animation:lang5_2 2s 1s linear infinite
}
#s1.ani .w5_11{
            animation:animate1 2s 1s linear infinite;
            -moz-animation:animate1 2s 1s linear infinite;
            -webkit-animation:animate1 2s 1s linear infinite;
            -o-animation:animate1 2s 1s linear infinite
}
#s1.ani .w5_17{
    animation:lang5_3 2s .5s linear infinite;
        -moz-animation:lang5_3 2s .5s linear infinite;
        -webkit-animation:lang5_3 2s .5s linear infinite;
        -o-animation:lang5_3 2s .5s linear infinite
}
#s1.ani .w5_18{
    animation:lang5_4 2s 1s linear infinite;
        -moz-animation:lang5_4 2s 1s linear infinite;
        -webkit-animation:lang5_4 2s 1s linear infinite;
        -o-animation:lang5_4 2s 1s linear infinite
}

#s1.ani .w6_8{
            animation:animate1 2s .5s linear infinite;
            -moz-animation:animate1 2s .5s linear infinite;
            -webkit-animation:animate1 2s .5s linear infinite;
            -o-animation:animate1 2s .5s linear infinite
}
#s1.ani .w6_9{
    animation:lang6_1 2s .5s linear infinite;
        -moz-animation:lang6_1 2s .5s linear infinite;
        -webkit-animation:lang6_1 2s .5s linear infinite;
        -o-animation:lang6_1 2s .5s linear infinite
}
#s1.ani .w6_10{
    animation:lang6_2 2s 1s linear infinite;
        -moz-animation:lang6_2 2s 1s linear infinite;
        -webkit-animation:lang6_2 2s 1s linear infinite;
        -o-animation:lang6_2 2s 1s linear infinite
} 
#fuceng.ani .w000{
            animation:arrow 1s 7.5s ease infinite;
            -moz-animation:arrow 1s 7.5s ease infinite;
            -webkit-animation:arrow 1s 7.5s ease infinite;
            -o-animation:arrow 1s 7.5s ease infinite
}

@keyframes music{
  0%{transform:scale(1)}
  100%{transform:scale(1.2)}
}
@-webkit-keyframes music{
  0%{transform:scale(1)}
  100%{transform:scale(1.2)}
}
@keyframes fire
{
  0%{opacity: 1;background-size: 100% 100%}
  50%{opacity: 1;background-size: 100% 95%}
  100%{opacity: 1;background-size: 100% 100%}
}
@-moz-keyframes fire
{
  0%{opacity: 1;background-size: 100% 100%}
  50%{opacity: 1;background-size: 100% 95%}
  100%{opacity: 1;background-size: 100% 100%}
}
@-moz-keyframes fire
{
  0%{opacity: 1;background-size: 100% 100%}
  50%{opacity: 1;background-size: 100% 95%}
  100%{opacity: 1;background-size: 100% 100%}
}
@-webkit-keyframes fire
{
  0%{opacity: 1;background-size: 100% 100%}
  50%{opacity: 1;background-size: 100% 95%}
  100%{opacity: 1;background-size: 100% 100%}
}


@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes fadeInDown1{0%{opacity:0;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInDown1{0%{opacity:0;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown1{0%{opacity:0;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}


@keyframes fadeInBig
{
    0%{opacity:1;transform:scale(1);}
    50%{opacity:1;transform:scale(1.05);}
    100%{opacity:1;transform:scale(1);}
}

@-moz-keyframes fadeInBig /* Firefox */
{
    0%{opacity:1;transform:scale(1);}
    50%{opacity:1;transform:scale(1.05);}
    100%{opacity:1;transform:scale(1);}
}

@-webkit-keyframes fadeInBig /* Safari 和 Chrome */
{
    0%{opacity:1;transform:scale(1);}
    50%{opacity:1;transform:scale(1.05);}
    100%{opacity:1;transform:scale(1);}
}

@-webkit-keyframes rotateZ {
  0% {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  
  25% {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }
  
  50% {
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }

  100% {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }
}

@keyframes rotateZ {
  0% {
    -webkit-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  
  25% {
    -webkit-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }

  50% {
    -webkit-transform: rotateZ(270deg);
    -ms-transform: rotateZ(-270deg);
    transform: rotateZ(-270deg);
  }

  100% {
    -webkit-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    transform: rotateZ(0);
  }
}
/* 向左下 */
@-webkit-keyframes fadeInLB{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInLB{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInLB{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@keyframes RightShift
{
    0%{opacity:1;-webkit-transform:none;transform:none;}
    100%{opacity:1;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
}

@-moz-keyframes RightShift /* Firefox */
{
    0%{opacity:1;-webkit-transform:none;transform:none;}
    100%{opacity:1;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
}

@-webkit-keyframes RightShift /* Safari 和 Chrome */
{
    0%{opacity:1;-webkit-transform:none;transform:none;}
    100%{opacity:1;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
}

@keyframes shengkong
{
    0%{-webkit-transform:none;transform:none}
    100%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
}

@-moz-keyframes shengkong /* Firefox */
{
    0%{-webkit-transform:none;transform:none}
    100%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
}

@-webkit-keyframes shengkong /* Safari 和 Chrome */
{
    0%{-webkit-transform:none;transform:none}
    100%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
}

@keyframes arrow
{
    0%{opacity: 0;left:93%;}
    90%{opacity: 1;left:91%;}
    100%{opacity: 1;left:93%;}
}

@-moz-keyframes arrow /* Firefox */
{
    0%{opacity: 0;left:93%;}
    90%{opacity: 1;left:91%;}
    100%{opacity: 1;left:93%;}
}

@-webkit-keyframes arrow /* Safari 和 Chrome */
{
    0%{opacity: 0;left:93%;}
    90%{opacity: 1;left:91%;}
    100%{opacity: 1;left:93%;}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeInRight
{
    0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-moz-keyframes fadeInRight /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-webkit-keyframes fadeInRight /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeft
{
    0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-moz-keyframes fadeInLeft /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-webkit-keyframes fadeInLeft /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@keyframes shan
{
	0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}

@-moz-keyframes shan /* Firefox */
{
	0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}

@-webkit-keyframes shan /* Safari ºÍ Chrome */
{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}
@keyframes fadeIn1
{
    0%{opacity:0;width: 150%;left:-30%;height: 150%;top: -30%}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}

@-moz-keyframes fadeIn1 /* Firefox */
{
    0%{opacity:0;width: 150%;left:-30%;height: 150%;top: -30%}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}

@-webkit-keyframes fadeIn1 /* Safari 和 Chrome */
{
    0%{opacity:0;width: 150%;left:-30%;height: 150%;top: -30%}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}
@keyframes water1{
    0%{top: 97%;}
    50%{top: 96%;}
    100%{top: 97%;}
}
@-moz-keyframes water1{
    0%{top: 97%;}
    50%{top: 96%;}
    100%{top: 97%;}
}
@-webkit-keyframes water1{
    0%{top: 97%;}
    50%{top: 96%;}
    100%{top: 97%;}
}
@keyframes water11{
    0%{top: 95%;}
    50%{top: 94%;}
    100%{top: 95%;}
}
@-moz-keyframes water11{
    0%{top: 95%;}
    50%{top: 94%;}
    100%{top: 95%;}
}
@-webkit-keyframes water11{
    0%{top: 95%;}
    50%{top: 94%;}
    100%{top: 95%;}
}
@keyframes water111{
    0%{top: 93%;}
    50%{top: 92%;}
    100%{top: 93%;}
}
@-moz-keyframes water111{
    0%{top: 93%;}
    50%{top: 92%;}
    100%{top: 93%;}
}
@-webkit-keyframes water111{
    0%{top: 93%;}
    50%{top: 92%;}
    100%{top: 93%;}
}
@keyframes water1111{
    0%{top: 91%;}
    50%{top: 90%;}
    100%{top: 91%;}
}
@-moz-keyframes water1111{
    0%{top: 91%;}
    50%{top: 90%;}
    100%{top: 91%;}
}
@-webkit-keyframes water1111{
    0%{top: 91%;}
    50%{top: 90%;}
    100%{top: 91%;}
}
@keyframes water2{
    0%{-webkit-transform:none;transform:none}
    100%{height: 4.5%;}
}
@-moz-keyframes water2{
    0%{-webkit-transform:none;transform:none}
    100%{height: 4.5%;}
}
@-webkit-keyframes water2{
    0%{-webkit-transform:none;transform:none}
    100%{height: 4.5%;}
}
@keyframes water3{
    0%{width: 34%;height: 14%;top: 81%;left: -34%;}
    50%{width: 34%;height: 15%;top: 77%;left: -6%;}
    100%{width: 34%;height: 15%;top: 89%;left: 5%;}
}
@-moz-keyframes water3{
    0%{width: 34%;height: 14%;top: 81%;left: -34%;}
    50%{width: 34%;height: 15%;top: 77%;left: -6%;}
    100%{width: 34%;height: 15%;top: 89%;left: 5%;}
}
@-webkit-keyframes water3{
    0%{width: 34%;height: 14%;top: 81%;left: -34%;}
    50%{width: 34%;height: 15%;top: 77%;left: -6%;}
    100%{width: 34%;height: 15%;top: 89%;left: 5%;}
}
@keyframes water4{
    0%{width: 32%;height: 14%;top: 81%;left: 100%;}
    50%{width: 32%;height: 13%;top: 79%;left: 71%;}
    100%{width: 34%;height: 15%;top: 89%;left: 64%;}
}
@-moz-keyframes water4{
    0%{width: 32%;height: 14%;top: 81%;left: 100%;}
    50%{width: 32%;height: 13%;top: 79%;left: 71%;}
    100%{width: 32%;height: 15%;top: 89%;left: 64%;}
}
@-webkit-keyframes water4{
    0%{width: 32%;height: 14%;top: 81%;left: 100%;}
    50%{width: 32%;height: 13%;top: 79%;left: 71%;}
    100%{width: 32%;height: 15%;top: 89%;left: 64%;}
}

@keyframes water5{
    0%{width: 21%;height: 14%;top: 91%;left: -10%;}
    50%{width: 21%;height: 9%;top: 85%;left: 1%;}
    100%{width: 21%;height: 15%;top: 91%;left: 6%;}
}
@-moz-keyframes water5{
    0%{width: 21%;height: 14%;top: 91%;left: -10%;}
    50%{width: 21%;height: 9%;top: 85%;left: 1%;}
    100%{width: 21%;height: 15%;top: 91%;left: 6%;}
}
@-webkit-keyframes water5{
    0%{width: 21%;height: 14%;top: 91%;left: -10%;}
    50%{width: 21%;height: 9%;top: 85%;left: 1%;}
    100%{width: 21%;height: 15%;top: 91%;left: 6%;}
}
@keyframes water6{
    0%{width: 23%;height: 11%;top: 95%;left: 84%;}
    50%{width: 23%;height: 11%;top: 85%;left: 74%;}
    100%{width: 23%;height: 11%;top: 95%;left: 70%;}
}
@-moz-keyframes water6{
    0%{width: 23%;height: 11%;top: 95%;left: 84%;}
    50%{width: 23%;height: 11%;top: 85%;left: 74%;}
    100%{width: 23%;height: 11%;top: 95%;left: 70%;}
}
@-webkit-keyframes water6{
    0%{width: 23%;height: 11%;top: 95%;left: 84%;}
    50%{width: 23%;height: 11%;top: 85%;left: 74%;}
    100%{width: 23%;height: 11%;top: 95%;left: 70%;}
}

@keyframes water7{
    0%{width: 20%;height: 6%;top: 97%;left: 16%;}
    50%{width: 20%;height: 6%;top: 87%;left: 26%;}
    100%{width: 20%;height: 6%;top: 97%;left: 36%;}
}
@-moz-keyframes water7{
    0%{width: 20%;height: 6%;top: 97%;left: 16%;}
    50%{width: 20%;height: 6%;top: 87%;left: 26%;}
    100%{width: 20%;height: 6%;top: 97%;left: 36%;}
}
@-webkit-keyframes water7{
    0%{width: 20%;height: 6%;top: 97%;left: 16%;}
    50%{width: 20%;height: 6%;top: 87%;left: 26%;}
    100%{width: 20%;height: 6%;top: 97%;left: 36%;}
}
@keyframes water8{
    0%{width: 20%;height: 6%;top: 97%;left: 63%;}
    50%{width: 20%;height: 6%;top: 87%;left: 53%;}
    100%{width: 20%;height: 6%;top: 97%;left: 43%;}
}
@-moz-keyframes water8{
    0%{width: 20%;height: 6%;top: 97%;left: 63%;}
    50%{width: 20%;height: 6%;top: 87%;left: 53%;}
    100%{width: 20%;height: 6%;top: 97%;left: 43%;}
}
@-webkit-keyframes water8{
    0%{width: 20%;height: 6%;top: 97%;left: 63%;}
    50%{width: 20%;height: 6%;top: 87%;left: 53%;}
    100%{width: 20%;height: 6%;top: 97%;left: 43%;}
}
@keyframes fadeOutR{
    0%{left: 2%}
    100%{left: 700%}
}
@-moz-keyframes fadeOutR{
    0%{left:2%}
    100%{left: 700%}
}
@-webkit-keyframes fadeOutR{
    0%{left:2%;}
    100%{left: 700%}
}
@keyframes shanIn
{
    0%{opacity:0;}
    33%{opacity:1;}
    66%{opacity:0;}
    100%{opacity:1;}
}

@-moz-keyframes shanIn /* Firefox */
{
    0%{opacity:0;}
    33%{opacity:1;}
    66%{opacity:0;}
    100%{opacity:1;}
}

@-webkit-keyframes shanIn /* Safari ºÍ Chrome */
{
    0%{opacity:0;}
    33%{opacity:1;}
    66%{opacity:0;}
    100%{opacity:1;}
}
@keyframes shanIn1
{
    0%{opacity:0;}
    25%{opacity:1;}
    50%{opacity:0;}
    75%{opacity:1;}
    100%{opacity:0;}
}

@-moz-keyframes shanIn1 /* Firefox */
{
    0%{opacity:0;}
    25%{opacity:1;}
    50%{opacity:0;}
    75%{opacity:1;}
    100%{opacity:0;}
}

@-webkit-keyframes shanIn1 /* Safari ºÍ Chrome */
{
    0%{opacity:0;}
    25%{opacity:1;}
    50%{opacity:0;}
    75%{opacity:1;}
    100%{opacity:0;}
}
@keyframes animate1{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(-5deg);}
    50%{transform: rotate(0deg);}
    75%{transform: rotate(5deg);}
}
@-moz-keyframes animate1{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(-5deg);}
    50%{transform: rotate(0deg);}
    75%{transform: rotate(5deg);}
}
@-webkit-keyframes animate1{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(-5deg);}
    50%{transform: rotate(0deg);}
    75%{transform: rotate(5deg);}
}
@keyframes lang1_1{
    0%{width: 22%;height: 9%;top: 58%;left: 7%;}
    50%{width: 22%;height: 9%;top: 53%;left: 15%;}
    100%{width: 22%;height: 9%;top: 58%;left: 23%;}
}
@-moz-keyframes lang1_1{
    0%{width: 22%;height: 9%;top: 58%;left: 7%;}
    50%{width: 22%;height: 9%;top: 53%;left: 15%;}
    100%{width: 22%;height: 9%;top: 58%;left: 23%;}
}
@-webkit-keyframes lang1_1{
    0%{width: 22%;height: 9%;top: 58%;left: 7%;}
    50%{width: 22%;height: 9%;top: 53%;left: 15%;}
    100%{width: 22%;height: 9%;top: 58%;left: 23%;}
}
@keyframes lang1_2{
    0%{width: 22%;height: 9%;top: 58%;left: 75%;}
    50%{width: 22%;height: 9%;top: 53%;left: 67%;}
    100%{width: 22%;height: 9%;top: 58%;left: 59%;}
}
@-moz-keyframes lang1_2{
    0%{width: 22%;height: 9%;top: 58%;left: 75%;}
    50%{width: 22%;height: 9%;top: 53%;left: 67%;}
    100%{width: 22%;height: 9%;top: 58%;left: 59%;}
}
@-webkit-keyframes lang1_2{
    0%{width: 22%;height: 9%;top: 58%;left: 75%;}
    50%{width: 22%;height: 9%;top: 53%;left: 67%;}
    100%{width: 22%;height: 9%;top: 58%;left: 59%;}
}

@keyframes lang2_1{
    0%{width: 22%;height: 9%;top: 58%;left: 112%;}
    50%{width: 22%;height: 9%;top: 53%;left: 120%;}
    100%{width: 22%;height: 9%;top: 58%;left: 128%;}
}
@-moz-keyframes lang2_1{
    0%{width: 22%;height: 9%;top: 58%;left: 112%;}
    50%{width: 22%;height: 9%;top: 53%;left: 120%;}
    100%{width: 22%;height: 9%;top: 58%;left: 128%;}
}
@-webkit-keyframes lang2_1{
    0%{width: 22%;height: 9%;top: 58%;left: 112%;}
    50%{width: 22%;height: 9%;top: 53%;left: 120%;}
    100%{width: 22%;height: 9%;top: 58%;left: 128%;}
}

@keyframes lang2_2{
    0%{width: 22%;height: 9%;top: 58%;left: 180%;}
    50%{width: 22%;height: 9%;top: 53%;left: 172%;}
    100%{width: 22%;height: 9%;top: 58%;left: 164%;}
}
@-moz-keyframes lang2_2{
    0%{width: 22%;height: 9%;top: 58%;left: 180%;}
    50%{width: 22%;height: 9%;top: 53%;left: 172%;}
    100%{width: 22%;height: 9%;top: 58%;left: 164%;}
}
@-webkit-keyframes lang2_2{
    0%{width: 22%;height: 9%;top: 58%;left: 180%;}
    50%{width: 22%;height: 9%;top: 53%;left: 172%;}
    100%{width: 22%;height: 9%;top: 58%;left: 164%;}
}

@keyframes lang3_1{
    0%{width: 22%;height: 9%;top: 58%;left: 218%;}
    50%{width: 22%;height: 9%;top: 53%;left: 226%;}
    100%{width: 22%;height: 9%;top: 58%;left: 234%;}
}
@-moz-keyframes lang3_1{
    0%{width: 22%;height: 9%;top: 58%;left: 218%;}
    50%{width: 22%;height: 9%;top: 53%;left: 226%;}
    100%{width: 22%;height: 9%;top: 58%;left: 234%;}
}
@-webkit-keyframes lang3_1{
    0%{width: 22%;height: 9%;top: 58%;left: 218%;}
    50%{width: 22%;height: 9%;top: 53%;left: 226%;}
    100%{width: 22%;height: 9%;top: 58%;left: 234%;}
}

@keyframes lang3_2{
    0%{width: 22%;height: 9%;top: 58%;left: 272%;}
    50%{width: 22%;height: 9%;top: 53%;left: 280%;}
    100%{width: 22%;height: 9%;top: 58%;left: 288%;}
}
@-moz-keyframes lang3_2{
    0%{width: 22%;height: 9%;top: 58%;left: 272%;}
    50%{width: 22%;height: 9%;top: 53%;left: 280%;}
    100%{width: 22%;height: 9%;top: 58%;left: 288%;}
}
@-webkit-keyframes lang3_2{
    0%{width: 22%;height: 9%;top: 58%;left: 272%;}
    50%{width: 22%;height: 9%;top: 53%;left: 280%;}
    100%{width: 22%;height: 9%;top: 58%;left: 288%;}
}

@keyframes lang4_1{
    0%{width: 22%;height: 9%;top: 58%;left: 317%;}
    50%{width: 22%;height: 9%;top: 53%;left: 325%;}
    100%{width: 22%;height: 9%;top: 58%;left: 333%;}
}
@-moz-keyframes lang4_1{
    0%{width: 22%;height: 9%;top: 58%;left: 317%;}
    50%{width: 22%;height: 9%;top: 53%;left: 325%;}
    100%{width: 22%;height: 9%;top: 58%;left: 333%;}
}
@-webkit-keyframes lang4_1{
    0%{width: 22%;height: 9%;top: 58%;left: 317%;}
    50%{width: 22%;height: 9%;top: 53%;left: 325%;}
    100%{width: 22%;height: 9%;top: 58%;left: 333%;}
}

@keyframes lang4_2{
    0%{width: 22%;height: 9%;top: 58%;left: 383%;}
    50%{width: 22%;height: 9%;top: 53%;left: 375%;}
    100%{width: 22%;height: 9%;top: 58%;left: 367%;}
}
@-moz-keyframes lang4_2{
    0%{width: 22%;height: 9%;top: 58%;left: 383%;}
    50%{width: 22%;height: 9%;top: 53%;left: 375%;}
    100%{width: 22%;height: 9%;top: 58%;left: 367%;}
}
@-webkit-keyframes lang4_2{
    0%{width: 22%;height: 9%;top: 58%;left: 383%;}
    50%{width: 22%;height: 9%;top: 53%;left: 375%;}
    100%{width: 22%;height: 9%;top: 58%;left: 367%;}
}

@keyframes lang5_1{
    0%{width: 22%;height: 9%;top: 58%;left: 412%;}
    50%{width: 22%;height: 9%;top: 53%;left: 420%;}
    100%{width: 22%;height: 9%;top: 58%;left: 428%;}
}
@-moz-keyframes lang5_1{
    0%{width: 22%;height: 9%;top: 58%;left: 412%;}
    50%{width: 22%;height: 9%;top: 53%;left: 420%;}
    100%{width: 22%;height: 9%;top: 58%;left: 428%;}
}
@-webkit-keyframes lang5_1{
    0%{width: 22%;height: 9%;top: 58%;left: 412%;}
    50%{width: 22%;height: 9%;top: 53%;left: 420%;}
    100%{width: 22%;height: 9%;top: 58%;left: 428%;}
}
@keyframes lang5_2{
    0%{width: 22%;height: 9%;top: 58%;left: 437%;}
    50%{width: 22%;height: 9%;top: 53%;left: 445%;}
    100%{width: 22%;height: 9%;top: 58%;left: 453%;}
}
@-moz-keyframes lang5_2{
    0%{width: 22%;height: 9%;top: 58%;left: 437%;}
    50%{width: 22%;height: 9%;top: 53%;left: 445%;}
    100%{width: 22%;height: 9%;top: 58%;left: 453%;}
}
@-webkit-keyframes lang5_2{
    0%{width: 22%;height: 9%;top: 58%;left: 437%;}
    50%{width: 22%;height: 9%;top: 53%;left: 445%;}
    100%{width: 22%;height: 9%;top: 58%;left: 453%;}
}

@keyframes lang5_3{
    0%{width: 22%;height: 9%;top: 58%;left: 508%;}
    50%{width: 22%;height: 9%;top: 53%;left: 500%;}
    100%{width: 22%;height: 9%;top: 58%;left: 492%;}
}
@-moz-keyframes lang5_3{
    0%{width: 22%;height: 9%;top: 58%;left: 508%;}
    50%{width: 22%;height: 9%;top: 53%;left: 500%;}
    100%{width: 22%;height: 9%;top: 58%;left: 492%;}
}
@-webkit-keyframes lang5_3{
    0%{width: 22%;height: 9%;top: 58%;left: 508%;}
    50%{width: 22%;height: 9%;top: 53%;left: 500%;}
    100%{width: 22%;height: 9%;top: 58%;left: 492%;}
}
@keyframes lang5_4{
    0%{width: 22%;height: 9%;top: 58%;left: 558%;}
    50%{width: 22%;height: 9%;top: 53%;left: 550%;}
    100%{width: 22%;height: 9%;top: 58%;left: 542%;}
}
@-moz-keyframes lang5_4{
    0%{width: 22%;height: 9%;top: 58%;left: 558%;}
    50%{width: 22%;height: 9%;top: 53%;left: 550%;}
    100%{width: 22%;height: 9%;top: 58%;left: 542%;}
}
@-webkit-keyframes lang5_4{
    0%{width: 22%;height: 9%;top: 58%;left: 558%;}
    50%{width: 22%;height: 9%;top: 53%;left: 550%;}
    100%{width: 22%;height: 9%;top: 58%;left: 542%;}
}

@keyframes lang6_1{
    0%{width: 22%;height: 9%;top: 58%;left: 607%;}
    50%{width: 22%;height: 9%;top: 53%;left: 615%;}
    100%{width: 22%;height: 9%;top: 58%;left: 623%;}
}
@-moz-keyframes lang6_1{
    0%{width: 22%;height: 9%;top: 58%;left: 607%;}
    50%{width: 22%;height: 9%;top: 53%;left: 615%;}
    100%{width: 22%;height: 9%;top: 58%;left: 623%;}
}
@-webkit-keyframes lang6_1{
    0%{width: 22%;height: 9%;top: 58%;left: 607%;}
    50%{width: 22%;height: 9%;top: 53%;left: 615%;}
    100%{width: 22%;height: 9%;top: 58%;left: 623%;}
}

@keyframes lang6_2{
    0%{width: 22%;height: 9%;top: 58%;left: 673%;}
    50%{width: 22%;height: 9%;top: 53%;left: 665%;}
    100%{width: 22%;height: 9%;top: 58%;left: 647%;}
}
@-moz-keyframes lang6_2{
    0%{width: 22%;height: 9%;top: 58%;left: 673%;}
    50%{width: 22%;height: 9%;top: 53%;left: 665%;}
    100%{width: 22%;height: 9%;top: 58%;left: 647%;}
}
@-webkit-keyframes lang6_2{
    0%{width: 22%;height: 9%;top: 58%;left: 673%;}
    50%{width: 22%;height: 9%;top: 53%;left: 665%;}
    100%{width: 22%;height: 9%;top: 58%;left: 647%;}
}

@keyframes up{
    0%{width: 45%;height: 24%;top: 11%;left: 28%;}
    100%{width: 0%;height: 0%;top: 0%;left: 28%;}
}
@-moz-keyframes up{
    0%{width: 45%;height: 24%;top: 11%;left: 28%;}
    100%{width: 0%;height: 0%;top: 0%;left: 28%;}
}
@-webkit-keyframes up{
    0%{width: 45%;height: 24%;top: 11%;left: 28%;}
    100%{width: 0%;height: 0%;top: 0%;left: 50%;}
}
@keyframes down{
    0%{width: 45%;height: 24%;top: 11%;left: 28%;}
    100%{width: 0%;height: 0%;top: 90%;left: 50%;}
}
@-moz-keyframes down{
    0%{width: 45%;height: 24%;top: 11%;left: 28%;}
    100%{width: 0%;height: 0%;top: 90%;left: 50%;}
}
@-webkit-keyframes down{
    0%{width: 45%;height: 24%;top: 11%;left: 28%;}
    100%{width: 0%;height: 0%;top: 90%;left: 50%;}
}