html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}
.tips_blk{z-index:99999999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.loading{position:absolute;width:100%;height:100%;background-color:#afd1c0;z-index: 99}
.load_val{width:100%;}
.loading_line{position:absolute;width:43.71%;height:3.86%;top:29.9%;left:29%;background:url("../images/loading.png?1") no-repeat 0 0;background-size:100% 100%;}
.loading_line_blank{width:0;height:76.92%;border-radius:40px;background:#d12225;position:absolute;top:11.53%;left:2.2%;}
.loading_c{width: 14.36%;height:100%;position: absolute;top:0;right: 0;background:url("../images/loading.c.png?1") no-repeat 0 0;background-size:100% 100%;}
.loading_fs{width: 80%;height:80%;position: absolute;top:10%;right: 10%;background:url("../images/loading.1.png?1") no-repeat 0 0;background-size:100% 100%;
    -webkit-animation:rotate 0.5s linear infinite;
    animation:rotate 0.5s linear infinite;}
a{opacity:1}
/*loading*/

/*音乐*/
.music_blk{z-index:999;position:fixed;left:10px;top:10px;}
.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;
}



#center{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: absolute;top:0;left:0;}
.s1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: absolute;top:0;left:0;background:url("../images/p0.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s1 .bg0{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p0.1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s1 .bg1{width: 44.4%;height: 20%;position: absolute;top:77%;left:36%;background:url("../images/p0.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
.s1 .bg2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p0.3.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 0}
.s1_bg2_click{width: 20%;height: 15%;position: absolute;top:79%;left:72%;opacity: 0}
.s1.ani .bg0{
    -webkit-animation:1.5s 0.2s Out linear both ;
    -o-animation:1.5s 0.2s Out linear both;
    -moz-animation:1.5s 0.2s  Out linear both;
    animation:1.5s 0.2s Out linear both ;
}
.s1.ani .bg1{
    -webkit-animation:1s 1.7s s1_bg1 linear both;
    -o-animation:1s 1.7s s1_bg1 linear both;
    -moz-animation:1s 1.7s  s1_bg1 linear both;
    animation:1s 1.7s s1_bg1 linear both ;
}
.s1.ani .bg2{
    -webkit-animation:1s 3s Out1 linear infinite;
    -o-animation:1s 3s Out1 linear infinite;
    -moz-animation:1s 3s  Out1 linear infinite;
    animation:1s 3s Out1 linear infinite ;
}




.s2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p1.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s2 .bg0{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p1.1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2 .bg1{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p1.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
.s2 .bg2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p1.3.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 0}
.s2_bg2_click{width: 20%;height: 15%;position: absolute;top:8%;left:63%;opacity: 0}

.s2.ani .bg0{
    -webkit-animation:1.5s 0.2s Out linear both ;
    -o-animation:1.5s 0.2s Out linear both;
    -moz-animation:1.5s 0.2s  Out linear both;
    animation:1.5s 0.2s Out linear both ;
}
.s2.ani .bg1{
    -webkit-animation:1s 1.7s Out linear both;
    -o-animation:1s 1.7s Out linear both;
    -moz-animation:1s 1.7s  Out linear both;
    animation:1s 1.7s Out linear both ;
}
.s2.ani .bg2{
    -webkit-animation:1s 3s Out1 linear infinite;
    -o-animation:1s 3s Out1 linear infinite;
    -moz-animation:1s 3s  Out1 linear infinite;
    animation:1s 3s Out1 linear infinite ;
}


.s3{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s3_click{width: 100%;height: 100%;position: absolute;top:0;left:0;opacity:1;}
.s3 .bg0{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3 .bg1{width: 25.6%;height: 16%;position: absolute;top:25.4%;left:39.2%;background:url("../images/11.png?1") no-repeat 0 0;background-size:100% 100%;display: none;opacity: 1}
.s3 .bg4{width: 25.36%;height: 9.8%;opacity:0;position: absolute;top:45.08%;left:38.1%;background:url("../images/22.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3 .bg5{width:26.32%;height: 13.1%;opacity:0;position: absolute;top:50.89%;left:70.9%;background:url("../images/33.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3 .bg6{width: 18.35%;height: 11.75%;opacity:0;position: absolute;top:58.1%;left:8.9%;background:url("../images/44.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3 .bg7{width: 26.5%;height: 16.8%;opacity:0;position: absolute;top:73.2%;left:6.7%;background:url("../images/55.png?1") no-repeat 0 0;background-size:100% 100%;}
.mask{width: 100%;height: 100%;position: absolute;top:0;left:0;opacity:1;display: none}
.mask1{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/xingfu.png?1") no-repeat 0 0;background-size:100% 100%;display: none}
.mask2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/shehui.png?1") no-repeat 0 0;background-size:100% 100%;display: none}
.mask3{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/pinde.png?1") no-repeat 0 0;background-size:100% 100%;display: none}
.mask4{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/huanbao.png?1") no-repeat 0 0;background-size:100% 100%;display: none}
.s3_click1{width: 7.41%;height: 9%;opacity:0;position: absolute;top:60%;left:82%;background:url("../images/hand.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3_click2{width: 38.41%;height: 56%;opacity:0;position: absolute;top:57%;left:37%;background:url("../images/hand.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3.ani .bg0{
    -webkit-animation:0.5s 0.1s Out  linear both ;
    -moz-animation:0.5s 0.1s Out  linear both;
    -o-animation:0.5s 0.1s Out  linear  both;
    animation:0.5s 0.1s Out linear both;
}

.s3.ani .bg4{
    -webkit-animation:1s 0.8s small  linear both ;
    -moz-animation:1s 0.8s small  linear both;
    -o-animation:1s 0.8s small  linear  both;
    animation:1s 0.8s small linear both;
}
.s3.ani .bg5{
    -webkit-animation:1s 1.5s small  linear both ;
    -moz-animation:1s 1.5s small  linear both;
    -o-animation:1s 1.5s small  linear  both;
    animation:1s 1.5s small linear both;
}
.s3.ani .bg6{
    -webkit-animation:1s 2s small  linear both ;
    -moz-animation:1s 2s small  linear both;
    -o-animation:1s 2s small  linear  both;
    animation:1s 2s small linear both;
}
.s3.ani .bg7{
    -webkit-animation:1s 2.1s small  linear both ;
    -moz-animation:1s 2.1s small  linear both;
    -o-animation:1s 2.1s small  linear  both;
    animation:1s 2.1s small linear both;
}

.s3.ani .s3_click1{
    -webkit-animation:1.5s 3.2s Out1  linear infinite ;
    -moz-animation:1.5s 3.2s Out1  linear infinite;
    -o-animation:1.5s 3.2s Out1  linear  infinite;
    animation:1.5s 3.2s Out1 linear infinite;
}

.s3 .bg1.ani1{
    -webkit-animation:0.5s 0.1s Out linear both ;
    -o-animation:0.5s 0.1s Out linear both;
    -moz-animation:0.5s 0.1s  Out linear both;
    animation:0.5s 0.1s Out linear both ;
}
.s3 .bg1.ani1 .s3_click2{
    -webkit-animation:1.5s 0.7s Out1  linear infinite ;
    -moz-animation:1.5s 0.7s Out1  linear infinite;
    -o-animation:1.5s 0.7s Out1  linear  infinite;
    animation:1.5s 0.7s Out1 linear infinite;
}

.s4{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s4 .bg0{width: 100%;height: 46.7%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s4 .bg1{width: 25.6%;height: 16%;position: absolute;top:43.3%;left:6.2%;background:url("../images/p3.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 0}
.s4.ani .bg0{
    -webkit-animation:0.8s 0.2s  s4_bg0  cubic-bezier(0.175, 0.885, 0.320, 1.275) both ;
    -moz-animation:0.8s 0.2s s4_bg0  cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    -o-animation:0.8s 0.2s s4_bg0  cubic-bezier(0.175, 0.885, 0.320, 1.275)  both;
    animation:0.8s 0.2s s4_bg0 cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
.s4.ani .bg1{
    -webkit-animation:1.5s 1.2s s4_bg1  linear infinite ;
    -moz-animation:1.5s 1.2s s4_bg1  linear infinite;
    -o-animation:1.5s 1.2s s4_bg1  linear  infinite;
    animation:1.5s 1.2s s4_bg1 linear infinite;
}


@-webkit-keyframes Out1{
    0%{opacity: 0}
    50%{opacity:1}
    100%{opacity:0}
}
@-o-keyframes Out1{
    0%{opacity: 0}
    50%{opacity:1}
    100%{opacity:0}
}
@-moz-keyframes Out1{
    0%{opacity: 0}
    50%{opacity:1}
    100%{opacity:0}
}
@keyframes Out1{
    0%{opacity: 0}
    50%{opacity:1}
    100%{opacity:0}
}


@keyframes Out{
    0%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}
@-o-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}
@-moz-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}


@-webkit-keyframes s1_bg1 {
    0% {-webkit-transform-origin: 100% 35%; -webkit-transform:scale(0.01); opacity: 1}
    100% {-webkit-transform-origin: 100% 35%; -webkit-transform:scale(1);opacity: 1 }
}
@keyframes s1_bg1 {
    0% {transform-origin: 100% 35%; transform:scale(0.01);opacity: 1}
    100% {transform-origin:  100% 35%; transform:scale(1) ; opacity: 1}
}


@-webkit-keyframes s4_bg0 {
    0% { -webkit-transform:scale(0.01); opacity: 1}
    100% {-webkit-transform:scale(1);opacity: 1 }
}
@keyframes s4_bg0 {
    0% {transform:scale(0.01);opacity: 1}
    100% {transform:scale(1) ; opacity: 1}
}

@-webkit-keyframes s4_bg1 {
    0% {-webkit-transform:scale(1);opacity: 1}
    50%{-webkit-transform:scale(1.1);opacity: 1}
    100% {-webkit-transform:scale(1) ; opacity: 1}
}
@keyframes s4_bg1 {
    0% {transform:scale(1);opacity: 1}
    50%{transform:scale(1.1);opacity: 1}
    100% {transform:scale(1) ; opacity: 1}
}



@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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



@keyframes small{
    0%{opacity:1;transform: scale(0)}
    50%{opacity:1;transform: scale(0.2)}
    60%{opacity:1;transform: scale(0.7)}
    70%{opacity:1;transform: scale(1.3)}
    85%{opacity:1;transform: scale(0.9)}
    100%{opacity:1;transform: scale(1)}
}
@-webkit-keyframes small{
    0%{opacity:1;-webkit-transform: scale(0)}
    50%{opacity:1;-webkit-transform: scale(0.2)}
    60%{opacity:1;-webkit-transform: scale(0.7)}
    70%{opacity:1;-webkit-transform: scale(1.3)}
    85%{opacity:1;-webkit-transform: scale(0.9)}
    100%{opacity:1;-webkit-transform: scale(1)}
}