*{margin: 0;padding: 0}
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%;z-index: 99;overflow: hidden;background:url('../images/looding.jpg') no-repeat;background-size:100% 100%;}

/*.loading1{position:absolute;width:120px;height:120px;background:url('../images/img1/loading1.png');background-size:100% 100%;top:25%;left:25%;*/
    /*-webkit-animation:rotate 1.2s linear infinite;*/
    /*animation:rotate 1.2s linear infinite;*/
/*}*/
/*.loading11{*/
    /*position:absolute;top:25%;left:33%;width: 35.26%;height:4px;background-color: #008eb3;*/
/*}*/
/*.loading11_1{*/
     /*position:absolute;top:0;left:0;width: 0;height:100%;background-color: #20b6dd;*/
 /*}*/
#loading_img1{
    width: 68%;;height:40%;position: absolute;;top:16%;left: 19%;
}

a{opacity:1}
/*loading*/

/*音乐*/
.music_blk{z-index:999;position:fixed;left:5px;bottom:5px;}
.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;*/
}
.bg0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url('../images/p0.jpg') no-repeat 0 0;background-size:100% 100%;}
.bg0_1{width: 100%;height: 100%;margin: 0 auto;position: absolute;top:0;left:0;background:url('../images/p0.1.png') no-repeat 0 0;background-size:100% 100%;opacity: 0}
.bg0_click{
    width: 9%;
    height: 27%;
    position: absolute;
    top: 37%;
    left: 65%;
}
.bg0.ani .bg0_1{
    -webkit-animation:Out 0.5s linear both;
    animation:Out 0.5s linear both;
}

.bg1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url('../images/p1.jpg?1') no-repeat 0 0;background-size:100% 100%;}
.bg1_1{width: 100%;height: 100%;margin: 0 auto;position: absolute;top:0;left:0;background:url('../images/p1.0.png') no-repeat 0 0;background-size:100% 100%;}
.bg1_click{width: 14%;
    height: 21%;
    margin: 0 auto;
    position: absolute;
    top: 39%;
    left: 71%;}

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


.bg2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url('../images/p1.jpg') no-repeat 0 0;background-size:100% 100%;}
.bg2_turn{
    width: 100%;height: 100%;position: absolute;top:0;left:0;
}
.bg2_1{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url('../images/p1.1.png') no-repeat 0 0;background-size:100% 100%;}
.bg2_2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url('../images/p1.2.png') no-repeat 0 0;background-size:100% 100%;display: none}
.bg2_3{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url('../images/p1.3.png') no-repeat 0 0;background-size:100% 100%;display:none;}
.bg2_hand{
    width: 12%;
    height: 6%;
    position: absolute;
    left: 41%;
    top: 45%;;background:url('../images/p1.4.png') no-repeat 0 0;background-size:100% 100%;
}
.bg2_hand2{
    width: 12%;
    height: 6%;
    position: absolute;
    left: 85%;
    top: 12%;
    background:url('../images/p1.4.png') no-repeat 0 0;background-size:100% 100%;
    display: none;
}
.bg2_4{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url('../images/p1.5.png') no-repeat 0 0;background-size:100% 100%;opacity: 0}
.bg2_left{width: 10%;
    height: 9%;
    position: absolute;
    top: 91%;
    left: 38%;}
.bg2_right{width: 11%;
    height: 10%;
    position: absolute;
    top: 47%;
    left: 38%;}

.bg2_click{
    width: 12%;
    height: 20%;
    position: absolute;
    top: 15%;
    left: 82%;
}

.bg3{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url('../images/p2.png') no-repeat 0 0;background-size:100% 100%;}
.bg3_click{width: 14%;
    width: 14%;
    height: 21%;
    margin: 0 auto;
    position: absolute;
    top: 40%;
    left: 73%;
}

.bg5{
    width: 100%;height: 100%;position: absolute;top:0;left:0;
}
.bg5_0{
    width: 100%;height: 100%;position: absolute;top:0;left:0;
}
.bg5_1{
    width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url('../images/p4.png') no-repeat 0 0;background-size:100% 100%;
}

.bg5_img{
    width: 17%;
    height: 9%;
    position: absolute;
    top: 68%;
    left: 37%;
    transform:rotateZ(-90deg);-webkit-transform: rotateZ(-90deg);
}
.bg5_click1{
    width: 13%;
    height: 16%;
    position: absolute;
    top: 59%;
    left: 69%;background:url('../images/pai.png') no-repeat 0 0;background-size:100% 100%;
}
.bg5_click2{
    width: 13%;
    height: 16%;
    position: absolute;
    top: 42%;
    left: 69%;background:url('../images/again.png') no-repeat 0 0;background-size:100% 100%;
}

.p1{
    position: absolute;
    top: 35%;
    left: 18%;
    width: 43%;
    height: 4%;
    display: inline-block;
    color: #ffff78;
    text-align: left;
    font-size: 120%;
    font-weight: bold;
    transform: rotateZ(-90deg);-webkit-transform: rotateZ(-90deg);
}
.div_p2,.div_p3,.div_p4{
    transform: rotateZ(-90deg);-webkit-transform: rotateZ(-90deg);position: absolute; display: inline-block;color:#ffff78
}
.div_p2{
    top: 41%;
    left: 29%;
    width: 32%;
    height: 1.1%;
    background-color: #474c52;
}
.div_p3{
    top: 41%;
    left: 35%;
    width: 32%;
    height: 1.1%;
    background-color: #474c52;
}
.div_p4{
    top: 41%;
    left: 41%;
    width: 32%;
    height: 1.1%;
    background-color: #474c52;
}
.div_p2_div1{
    width: 0%;height:100%;
    background-color: #ffff78;
}
.div_p2_div2{
    width: 0%;height:100%; background-color: #ffff78;
}
.div_p2_div3{
    width: 0%;height:100%; background-color: #ffff78;
}
.div_p2_div{
    position: absolute;top:0%;left:0%;width: 100%;height:100%;background-color: #1F547E;
}
.div_p3_div{
    position: absolute;top:0%;left:0%;width: 100%;height:100%;background-color: #1F547E;
}
.div_p4_div{
    position: absolute;top:0%;left:0%;width: 100%;height:100%;background-color: #1F547E;
}
.p2,.p3,.p4{
    width: 10%;
    height: 3%;
    position: absolute;
    left: 40%;
    top: 26%;
    color:#ffff78;
    transform: rotateZ(-90deg);-webkit-transform: rotateZ(-90deg);
}
.p3{
    left: 46.5%;
}
.p4{
    left: 52.5%;
}
#canvas_img{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg5_hand{
    width: 3.4%;
    height: 30%;
    position: absolute;
    top: 36%;
    left: 64%;
    background:url('../images/p4.1.png') no-repeat 0 0;background-size:100% 100%;
    -webkit-animation:shake 3s linear infinite;
    animation:shake 3s linear infinite;
}
.username{
    position: absolute;
    top: 70%;
    left: 39%;
    width: 43%;
    height: 4%;
    display: inline-block;
    color: #ffff78;
    text-align: center;
    font-size: 100%;
    transform: rotateZ(-90deg);-webkit-transform: rotateZ(-90deg);
}
.bg6{
    width: 100%;height: 100%;position: absolute;top:0;left:0;background:url('../images/p4.2.png') no-repeat 0 0;background-size:100% 100%;
}
.bg6_1{
    transform: rotateZ(-90deg);-webkit-transform: rotateZ(-90deg);
    width: 115%;
    height: 34%;
    position: absolute;
    top: 31%;
    left: -3%;
}
.list{
    width: 200%;height: 200%;position: absolute;top:0;left:0;list-style: none;
}
.list li{
    width: 5%;height:5%;position: relative;top:0;left:0;margin-bottom: 5px;color: #b27d1f;
}
.list img{
    width: 59%;
    height: 100%;
    position: absolute;
    top: 20%;
    left: 28%;
}
li>p:nth-of-type(1){
    width: 263%;
    height: 100%;
    position: absolute;
    top: 33%;
    left: 200%;
    text-align: center;
}
li>p:nth-of-type(2){
    width: 86%;
    height: 95%;
    position: absolute;
    top: 49%;
    left: 580%;
    text-align: center;
}

li>p:nth-of-type(3){
    width: 86%;
    height: 95%;
    position: absolute;
    top: 49%;
    left: 881%;
    text-align: center;
}

.close{
    width: 10%;
    height: 8%;
    position: absolute;
    left: 86%;
    top: 45%;
}





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







/*@-webkit-keyframes bg1_0 {*/
    /*0% {-webkit-transform:translate3d(0,0,0);opacity: 0}*/
    /*100% {-webkit-transform:translate3d(-40%,20%,0);opacity: 1}*/
/*}*/
/*@keyframes bg1_0 {*/
    /*0% {transform:translate3d(0,0,0);opacity: 0}*/
    /*100% {transform:translate3d(-40%,20%,0);opacity: 1}*/
/*}*/
/*@-webkit-keyframes bg1_1 {*/
    /*0% {-webkit-transform:translate3d(0,0,0);opacity: 0}*/
    /*100% {-webkit-transform:translate3d(-50%,0,0);opacity: 1}*/
/*}*/
/*@keyframes bg1_1 {*/
    /*0% {transform:translate3d(0,0,0);opacity: 0}*/
    /*100% {transform:translate3d(-50%,0,0);opacity: 1}*/
/*}*/
/*@-webkit-keyframes bg1_2 {*/
    /*0% {-webkit-transform:translate3d(0,0,0);opacity: 0}*/
    /*100% {-webkit-transform:translate3d(50%,0,0);opacity: 1}*/
/*}*/
/*@keyframes bg1_2 {*/
    /*0% {transform:translate3d(0,0,0);opacity: 0}*/
    /*100% {transform:translate3d(50%,0,0);opacity: 1}*/
/*}*/

/*@-webkit-keyframes bg1_left {*/
    /*0% {-webkit-transform:rotate(30deg);}*/
    /*50% {-webkit-transform:rotate(-10deg);}*/
    /*100% {-webkit-transform:rotate(30deg);}*/
/*}*/
/*@keyframes bg1_left {*/
    /*0% {transform:rotate(30deg)}*/
    /*50% {transform:rotate(-10deg)}*/
    /*100% {transform:rotate(30deg)}*/
/*}*/
/*@-webkit-keyframes bg1_right {*/
    /*0% {-webkit-transform:rotate(-30deg);}*/
    /*50% {-webkit-transform:rotate(10deg);}*/
    /*100% {-webkit-transform:rotate(-30deg);}*/
/*}*/
/*@keyframes bg1_right {*/
    /*0% {transform:rotate(-30deg)}*/
    /*50% {transform:rotate(10deg)}*/
    /*100% {transform:rotate(-30deg)}*/
/*}*/





/*@-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}
}



/*@-webkit-keyframes s7_0 {*/
    /*0%{opacity: 0}*/
    /*20%{opacity: 1}*/
    /*80%{opacity: 1}*/
    /*100%{opacity: 0}*/
/*}*/

/*@keyframes s7_0 {*/
    /*0%{opacity: 0}*/
    /*20%{opacity: 1}*/
    /*80%{opacity: 1}*/
    /*100%{opacity: 0}*/
/*}*/




@-webkit-keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}


@keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}