html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;overflow: hidden}
.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:url('../images/p1/p1.jpg?1');background-size:100% 100%;z-index: 99}
.load_val{width:100%;}
.loading_line{position:absolute;width:33.97%;height:2px;top:53.07%;left:32.68%;background:#f6d5b9}
.loading_line_blank{width:0%;height:100%;background:#f28120;}
a{opacity:1}
/*loading*/


.bg1{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;
    background:url("../images/p1/p1.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;
}
.bg1_1{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;
    background:url("../images/p1/p1.1.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg1_2{
    width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;
    background:url("../images/p1/p1.2.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg1_3{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;
    background:url("../images/p1/p1.3.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg1_4{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:80%;
    background:url("../images/p1/p1.4.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg1_5{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:50%;
    background:url("../images/p1/p1.5.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg1_6{
    width: 15%;height: 11%;opacity:1;position: absolute;top:87%;left:46%;
    background:url("../images/p1/p1.6.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg1_click{
    width: 53%;height: 27%;opacity:1;position: absolute;top:72%;left:29%;
}

.bg1.ani .bg1_2{
    -webkit-animation: 0.6s 0.2s bounceIn cubic-bezier(0.215,0.610,0.355,1.000)  both;
    animation: 0.6s 0.2s bounceIn cubic-bezier(0.215,0.610,0.355,1.000)  both;
}

.bg1.ani .bg1_5{
    -webkit-animation: 1s 1s bg1_5 linear both;
    animation:1s 1s bg1_5 linear both;
}
.bg1.ani .bg1_1{
    -webkit-animation: 1s 1s Out linear both;
    animation:1s 1s Out linear both;
}

.bg1.ani .bg1_3{
    -webkit-animation: 1.2s 1.5s Out linear both;
    animation:1.2s 1.5s Out linear both;
}
.bg1.ani .bg1_4{
    -webkit-animation: 1.2s 2.7s bg1_4 linear both;
    animation:1.2s 2.7s bg1_4 linear both;
}
.bg1.ani .bg1_6{
    -webkit-animation: 3s 2.7s shake linear infinite;
    animation:3s 2.7s shake linear infinite;
}

.bg2{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;
    background:url("../images/p2/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;
}
.bg2_1{
    width: 100%;height: 100%;opacity:1;position: absolute;top:-6%;left:0;
    background:url("../images/p2/p2.1.png?1") no-repeat 0 0;background-size:100% 100%;
}

.bg2_3{
    width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;
    background:url("../images/p2/p2.3.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg2_4{
    width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;
    background:url("../images/p2/p2.5.png?1") no-repeat 0 0;background-size:100% 100%;
}

.bg2_hand{
    width: 10%;height: 6%;opacity:0;position: absolute;top:85%;left:20%;
    background:url("../images/p2/hand.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg2_click{
    width: 39%;height: 12%;position: absolute;top:79%;left:0;

}
/*.bg2.ani .bg2_2{*/
    /*-webkit-animation: 0.8s 0.1s Out linear both;*/
    /*animation:0.8s 0.1s Out linear both;*/
/*}*/

/*.bg2.ani .bg2_5{*/
    /*-webkit-animation: 0.8s 1.2s Out linear both;*/
    /*animation:0.8s 1.2s Out linear both;*/
/*}*/

.bg2.ani .bg2_3{
    -webkit-animation: 1s 0.2s Out linear both;
    animation:1s 0.2s Out linear both;
}

.bg2.ani .bg2_4{
    -webkit-animation: 0.8s 1.6s Out linear both;
    animation:0.8s 1.6s Out linear both;
}

.bg2.ani .bg2_hand{
    -webkit-animation: 3s 3s shake linear infinite;
    animation:3s 3s shake linear infinite;
}

.bg3{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;
    background:url("../images/p3/p5.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;
}

.bg3_1{
    width: 36%;height: 11%;opacity:0;position: absolute;top:81%;left:34%;
    background:url("../images/p3/p5.1.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg3_2{
    width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;
    background:url("../images/p3/p5.2.png?1") no-repeat 0 0;background-size:100% 100%;
}
.bg3_hand{
    width: 10%;height: 6%;opacity:0;position: absolute;top:87%;left:61%;
    background:url("../images/p2/hand.png?1") no-repeat 0 0;background-size:100% 100%;
}

.bg3_click{
    width: 42%;height: 14%;opacity:0;position: absolute;top:80%;left:30%;
}
.bg3.ani .bg3_2{
    -webkit-animation: 1s 0.2s Out linear both;
    animation:1s 0.2s Out linear both;
}

.bg3.ani .bg3_1{
     -webkit-animation: 0.8s 2s Out linear both;
     animation:0.8s 2s Out linear both;
 }
.bg3.ani .bg3_hand{
    -webkit-animation: 3s 2.8s shake linear both;
    animation:3s 2.8s shake linear both;
}


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

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

@keyframes Out{
    0%{opacity:0}
    100%{opacity:1}
}

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


@keyframes Out_tap{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity: 0}
}
@-webkit-keyframes Out_tap{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
}


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

@keyframes arrow1 {
    0% { transform:translate3d(0,0,0) ;opacity: 1 }
    100% { transform:translate3d(-5%,0,0);opacity:1  }
}


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

@keyframes bg1_5 {
    0% { transform:translate3d(0,0,0) ;opacity: 0 }
    100% { transform:translate3d(-50%,0,0);opacity:1  }
}


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

@keyframes bg1_4 {
    0% { transform:translate3d(0,0,0) ;opacity: 1}
    100% { transform:translate3d(-80%,0,0);opacity:1  }
}

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



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

@-webkit-keyframes  bounceIn{
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{
    0%{transform:scale3d(.3,.3,.3);opacity:0;}
    20%{transform:scale3d(1.1,1.1,1.1);}
    40%{transform:scale3d(.9,.9,.9);}
    60%{transform:scale3d(1.03,1.03,1.03);opacity:1}
    80%{transform:scale3d(.97,.97,.97)}
    100%{transform:scale3d(1,1,1);opacity:1;}
}
@-moz-keyframes shake{
    0%{opacity: 0}
    20%{opacity:1}
    40%{opacity: 0}
    60%{opacity:1}
    80%{opacity:0}
    100%{opacity: 1}
}

@keyframes shake{
    0%{opacity: 0}
    20%{opacity:1}
    40%{opacity: 0}
    60%{opacity:1}
    80%{opacity:0}
    100%{opacity: 1}
}