.m-page-load,
.m-page-index,
.m-page-game {
    position: absolute;
    width: 640px;
    height: 100%;
    overflow: hidden;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    z-index: 2;
    background: rgb(27,27,27) url(../images/loading.gif) 50% 50% no-repeat;
}
.m-page-load{
    z-index:10;
}
.m-page-index{
    z-index:9;
}
.m-page-game{
    z-index:8;
}
.m-page-index {
    background: url(../images/index-bag.jpg) 50% 50% no-repeat;
    background-size: cover;
}
.m-page-game {
    background: url(../images/page-bag.jpg) 50% 50% no-repeat;
    background-size: cover;
}
.m-page-game .m-number-box {
    position: absolute;
    width: 146px;
    height: 65px;
    overflow: hidden;
    left: 22px;
    right: auto;
    top: 23px;
    bottom: auto;
    z-index: 2;
    background: url(../images/number-bag.png) 0 0 no-repeat;
    padding: 7px 0 0 74px;
}
.m-page-game .m-number-box span,.m-page-game .m-number-box .m-number0 {
    float: left;
    width: 35px;
    height: 54px;
    overflow: hidden;
    background: url(../images/zeoo.png) 50% 50% no-repeat;
    margin: 0 0 0 5px;
    background-size: 100% 100%;
    display:none;
}
.m-page-game .m-number-box .m-number0{
    display:inline;
}
.m-page-game .m-number-box .m-number1 {
    background: url(../images/one.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number2 {
    background: url(../images/two.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number3 {
    background: url(../images/three.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number4 {
    background: url(../images/four.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number5 {
    background: url(../images/five.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number6 {
    background: url(../images/six.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number7 {
    background: url(../images/seven.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number8 {
    background: url(../images/eight.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-number-box .m-number9 {
    background: url(../images/nine.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    display:inline;
}
.m-page-game .m-music-btn,
.m-page-game .m-music-stop,
.m-page-game .m-music-return,
.m-page-game .m-game-stop {
    position: absolute;
    width: 77px;
    height: 82px;
    overflow: hidden;
    left: 349px;
    right: auto;
    top: 19px;
    bottom: auto;
    z-index: 2;
    background: url(../images/music-open.png) 0 0 no-repeat;
}
.m-page-game .m-music-stop {
    background: url(../images/music-close.png) 0 0 no-repeat;
}
.m-page-game .m-music-return {
    background: url(../images/return-bag.png) 0 0 no-repeat;
    left: 449px;
}
.m-page-game .m-game-stop {
    background: url(../images/stop-bag.png) 0 0 no-repeat;
    left: 547px;
}
.m-page-game .m-game-one {
    position: absolute;
    width: 97px;
    height: 180px;
    overflow: hidden;
    left: 269px;
    right: auto;
    top: 368px;
    bottom: auto;
    z-index: 1;
    background: url(../images/one-bag.png) 0 0 no-repeat;
    -webkit-transform: scale(0, 0);
}
.m-page-game .m-game-two {
    position: absolute;
    width: 146px;
    height: 180px;
    overflow: hidden;
    left: 258px;
    right: auto;
    top: 368px;
    bottom: auto;
    z-index: 1;
    background: url(../images/two-bag.png) 0 0 no-repeat;
    -webkit-transform: scale(0, 0);
}
.m-page-game .m-game-three {
    position: absolute;
    width: 147px;
    height: 181px;
    overflow: hidden;
    left: 254px;
    right: auto;
    top: 368px;
    bottom: auto;
    z-index: 1;
    background: url(../images/three-bag.png) 0 0 no-repeat;
    -webkit-transform: scale(0, 0);
}
.m-page-game .m-game-go {
    position: absolute;
    width: 364px;
    height: 188px;
    overflow: hidden;
    left: 145px;
    right: auto;
    top: 358px;
    bottom: auto;
    z-index: 1;
    background: url(../images/go-bag.png) 0 0 no-repeat;
    -webkit-transform: scale(0, 0);
}
.m-page-game .m-game-mid {
    position: absolute;
    width: 640px;
    height: 167px;
    overflow: visible;
    left: 0;
    right: auto;
    top: 50%;
    bottom: auto;
    z-index: 2;
    background: none;
    margin-top: -84px;
}
.m-page-game .m-game-mid .m-game-box {
    position: absolute;
    width: 176px;
    height: 167px;
    overflow: visible;
    left: 96px;
    right: auto;
    top: 0;
    bottom: auto;
    z-index: 2;
    background: none;
}
.m-page-game .m-game-mid .m-game-box .m-game-mbox {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    z-index: 2;
    background: none;
    -webkit-transform-origin: 224px 84px;
}
.m-page-game .m-game-mid .m-game-box .m-game-boxbag {
    position: absolute;
    width: 176px;
    height: 167px;
    overflow: visible;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    z-index: 2;
    background: url(../images/box-bag.png) 0 0 no-repeat;
    background-size: 100% 100%;
}
.m-page-game .m-game-mid .m-game-box .m-game-ghost {
    position: absolute;
    width: 156px;
    height: 144px;
    overflow: hidden;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    z-index: 2;
    background: url(../images/ghost-bag.png) 0 0 no-repeat;
    margin: -72px 0 0 -78px;
    background-size: 100% 100%;
}
.m-page-game .m-game-mid .m-game-box .m-game-people {
    position: absolute;
    width: 84px;
    height: 144px;
    overflow: hidden;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    z-index: 2;
    background: url(../images/people-bag.png) 0 0 no-repeat;
    margin: -72px 0 0 -42px;
    background-size: 100% 100%;
}
.m-page-game .m-game-mid .m-game-box .m-game-light {
    position: absolute;
    width: 278px;
    height: 282px;
    overflow: hidden;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    z-index: 1;
    background: url(../images/light-bag.png) 0 0 no-repeat;
    margin: -141px 0 0 -139px;
    background-size: 100% 100%;
    opacity:0;
}
.m-page-game .m-game-mid .m-game-box:nth-child(3),
.m-page-game .m-game-mid .m-game-box:nth-child(4) {
    left:740px;
}
.m-page-game .m-game-mid .m-game-box:nth-child(2) {
    left: 368px;
}
.m-page-game .m-game-mid .m-game-box:nth-child(2) .m-game-mbox {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    z-index: 2;
    background: none;
    -webkit-transform-origin: -48px 84px;
}
.m-page-game .m-game-threebox .m-game-box:nth-child(1),
.m-page-game .m-game-threebox .m-game-box:nth-child(2),
.m-page-game .m-game-threebox .m-game-box:nth-child(3) {
    display: block;
    left: 46px;
    width: 151px;
    height: 144px;
}
.m-page-game .m-game-threebox .m-game-box:nth-child(1) .m-game-boxbag,
.m-page-game .m-game-threebox .m-game-box:nth-child(2) .m-game-boxbag,
.m-page-game .m-game-threebox .m-game-box:nth-child(3) .m-game-boxbag {
    width: 151px;
    height: 144px;
}
.m-page-game .m-game-threebox .m-game-box:nth-child(1) .m-game-light,
.m-page-game .m-game-threebox .m-game-box:nth-child(2) .m-game-light,
.m-page-game .m-game-threebox .m-game-box:nth-child(3) .m-game-light {
    width: 240px;
    height: 242px;
    margin: -121px 0 0 -120px;
}
.m-page-game .m-game-threebox .m-game-box:nth-child(1) .m-game-people,
.m-page-game .m-game-threebox .m-game-box:nth-child(2) .m-game-people,
.m-page-game .m-game-threebox .m-game-box:nth-child(3) .m-game-people {
    width: 74px;
    height: 124px;
    margin: -62px 0 0 -37px;
}
.m-page-game .m-game-threebox .m-game-box:nth-child(1) .m-game-ghost,
.m-page-game .m-game-threebox .m-game-box:nth-child(2) .m-game-ghost,
.m-page-game .m-game-threebox .m-game-box:nth-child(3) .m-game-ghost {
    width: 134px;
    height: 124px;
    margin: -62px 0 0 -67px;
}
.m-page-game .m-game-threebox .m-game-box:nth-child(3) {
    left: 440px;
}
.m-page-game .m-game-threebox .m-game-box:nth-child(2) {
    left: 243px;
}
.m-page-game .m-game-fourbox {
    height: 364px;
    margin-top: -182px;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(1),
.m-page-game .m-game-fourbox .m-game-box:nth-child(2),
.m-page-game .m-game-fourbox .m-game-box:nth-child(3),
.m-page-game .m-game-fourbox .m-game-box:nth-child(4) {
    display: block;
    left: 132px;
    width: 122px;
    height: 116px;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(1) .m-game-boxbag,
.m-page-game .m-game-fourbox .m-game-box:nth-child(2) .m-game-boxbag,
.m-page-game .m-game-fourbox .m-game-box:nth-child(3) .m-game-boxbag,
.m-page-game .m-game-fourbox .m-game-box:nth-child(4) .m-game-boxbag {
    width: 100%;
    height: 100%;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(1) .m-game-light,
.m-page-game .m-game-fourbox .m-game-box:nth-child(2) .m-game-light,
.m-page-game .m-game-fourbox .m-game-box:nth-child(3) .m-game-light,
.m-page-game .m-game-fourbox .m-game-box:nth-child(4) .m-game-light {
    width: 192px;
    height: 194px;
    margin: -97px 0 0 -96px;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(1) .m-game-people,
.m-page-game .m-game-fourbox .m-game-box:nth-child(2) .m-game-people,
.m-page-game .m-game-fourbox .m-game-box:nth-child(3) .m-game-people,
.m-page-game .m-game-fourbox .m-game-box:nth-child(4) .m-game-people {
    width: 60px;
    height: 100px;
    margin: -50px 0 0 -30px;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(1) .m-game-ghost,
.m-page-game .m-game-fourbox .m-game-box:nth-child(2) .m-game-ghost,
.m-page-game .m-game-fourbox .m-game-box:nth-child(3) .m-game-ghost,
.m-page-game .m-game-fourbox .m-game-box:nth-child(4) .m-game-ghost {
    width: 108px;
    height: 100px;
    margin: -50px 0 0 -54px;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(3) {
    top: 248px;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(4) {
    top: 248px;
    left: 386px;
}
.m-page-game .m-game-fourbox .m-game-box:nth-child(2) {
    left: 386px;
}
.m-game-animate .m-game-one {
    -webkit-animation: scale .8s linear 1.6s forwards;
    -webkit-animation-play-state:running;
}
.m-game-animate .m-game-two {
    -webkit-animation: scale .8s linear .8s forwards;
    -webkit-animation-play-state:running;
    z-index:10;
}
.m-game-animate .m-game-three {
    -webkit-animation: scale .8s linear  forwards;
    -webkit-animation-play-state:running;
    z-index:10;
}
.m-game-animate .m-game-go {
    -webkit-animation: scale .8s linear 2.4s forwards;
    -webkit-animation-play-state:running;
    z-index:10;
}
.m-game-animate .m-game-boxbag {
    -webkit-animation: tranupdown 1.5s linear 3.2s forwards;
    -webkit-animation-play-state:running;
}
.m-game-animate .m-game-people {
    -webkit-animation: people 0.5s linear 3.8s forwards;
    -webkit-animation-play-state:running;
}
.m-game-paused .m-game-one,.m-game-paused .m-game-two,.m-game-paused .m-game-three,.m-game-paused .m-game-go,.m-game-paused .m-game-boxbag{
    -webkit-animation-play-state:paused;
}
@-webkit-keyframes tranupdown {
    0% {
        -webkit-transform: translate(0, 0);
    }
    40% {
        -webkit-transform: translate(0, -100%);
    }
    60% {
        -webkit-transform: translate(0, -100%);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}
@-webkit-keyframes tranup {
    0% {
        -webkit-transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(0, -100%);
    }
}
@-webkit-keyframes trandown {
    0% {
        -webkit-transform: translate(0, -100%);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}
@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(0, 0);
    }
    99% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1, 1);
        opacity: 0;
    }
}
@-webkit-keyframes tl {
    0% {
        -webkit-transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(272px, 0);
    }
}
@-webkit-keyframes tlmts {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, -100px);
    }
    66% {
        -webkit-transform: translate(272px, -100px);
    }
    100% {
        -webkit-transform: translate(272px, 0);
    }
}
@-webkit-keyframes tlmtb {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, -200px);
    }
    66% {
        -webkit-transform: translate(272px, -200px);
    }
    100% {
        -webkit-transform: translate(272px, 0);
    }
}
@-webkit-keyframes tlmbs {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, 100px);
    }
    66% {
        -webkit-transform: translate(272px, 100px);
    }
    100% {
        -webkit-transform: translate(272px, 0);
    }
}
@-webkit-keyframes tlmbb {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, 200px);
    }
    66% {
        -webkit-transform: translate(272px, 200px);
    }
    100% {
        -webkit-transform: translate(272px, 0);
    }
}
@-webkit-keyframes tlrs {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes tlrb {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(540deg);
    }
}
@-webkit-keyframes tr {
    0% {
        -webkit-transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-272px, 0);
    }
}
@-webkit-keyframes trmts {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, -100px);
    }
    66% {
        -webkit-transform: translate(-272px, -100px);
    }
    100% {
        -webkit-transform: translate(-272px, 0);
    }
}
@-webkit-keyframes trmtb {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, -200px);
    }
    66% {
        -webkit-transform: translate(-272px, -200px);
    }
    100% {
        -webkit-transform: translate(-272px, 0);
    }
}
@-webkit-keyframes trmbs {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, 100px);
    }
    66% {
        -webkit-transform: translate(-272px, 100px);
    }
    100% {
        -webkit-transform: translate(-272px, 0);
    }
}
@-webkit-keyframes trmbb {
    0% {
        -webkit-transform: translate(0, 0);
    }
    33% {
        -webkit-transform: translate(0, 200px);
    }
    66% {
        -webkit-transform: translate(-272px, 200px);
    }
    100% {
        -webkit-transform: translate(-272px, 0);
    }
}
@-webkit-keyframes trrs {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}
@-webkit-keyframes trrb {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-540deg);
    }
}







@-webkit-keyframes thl{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    100% {
        -webkit-transform:  translate(197px,0);
    }
}
@-webkit-keyframes thrls{
    0% {
        -webkit-transform:  rotate(0deg);
        -webkit-transform-origin:174px 72px;
    }
    100% {
        -webkit-transform:  rotate(180deg);
        -webkit-transform-origin:174px 72px;
    }
}
@-webkit-keyframes thrlm{
    0% {
        -webkit-transform:  rotate(0deg);
        -webkit-transform-origin:273px 72px;
    }
    100% {
        -webkit-transform:  rotate(180deg);
        -webkit-transform-origin:273px 72px;
    }
}
@-webkit-keyframes thltms{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, -100px);
    }
    66%{
        -webkit-transform:  translate(197px, -100px);
    }
    100% {
        -webkit-transform:  translate(197px,0);
    }
}
@-webkit-keyframes thltmb{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, -200px);
    }
    66%{
        -webkit-transform:  translate(440px, -200px);
    }
    100% {
        -webkit-transform:  translate(440px,0);
    }
}

@-webkit-keyframes thlbms{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, 100px);
    }
    66%{
        -webkit-transform:  translate(197px, 100px);
    }
    100% {
        -webkit-transform:  translate(197px,0);
    }
}
@-webkit-keyframes thlbmb{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, 200px);
    }
    66%{
        -webkit-transform:  translate(440px,200px);
    }
    100% {
        -webkit-transform:  translate(440px,0);
    }
}
@-webkit-keyframes thr{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    100% {
        -webkit-transform:  translate(-197px,0);
    }
}
@-webkit-keyframes thrrs{
    0% {
        -webkit-transform:  rotate(0deg);
        -webkit-transform-origin:-23px 72px;
    }
    100% {
        -webkit-transform:  rotate(-180deg);
        -webkit-transform-origin:-23px 72px;
    }
}
@-webkit-keyframes thrrm{
    0% {
        -webkit-transform:  rotate(0deg);
        -webkit-transform-origin:273px 72px;
    }
    100% {
        -webkit-transform:  rotate(-180deg);
        -webkit-transform-origin:273px 72px;
    }
}
@-webkit-keyframes thrtms{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, -100px);
    }
    66%{
        -webkit-transform:  translate(-197px, -100px);
    }
    100% {
        -webkit-transform:  translate(-197px,0);
    }
}
@-webkit-keyframes thrtmb{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, -200px);
    }
    66%{
        -webkit-transform:  translate(-440px, -200px);
    }
    100% {
        -webkit-transform:  translate(-440px,0);
    }
}

@-webkit-keyframes thrbms{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, 100px);
    }
    66%{
        -webkit-transform:  translate(-197px, 100px);
    }
    100% {
        -webkit-transform:  translate(-197px,0);
    }
}
@-webkit-keyframes thrbmb{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    33%{
        -webkit-transform:  translate(0, 200px);
    }
    66%{
        -webkit-transform:  translate(-440px,200px);
    }
    100% {
        -webkit-transform:  translate(-440px,0);
    }
}




@-webkit-keyframes thtrbl{
    0% {
        -webkit-transform-origin:260px 72px;
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    30% {
        -webkit-transform-origin:260px 72px;
        -webkit-transform:   translate(23px,0 ) rotate(0deg);
    }
    70% {
        -webkit-transform-origin:260px 72px;
        -webkit-transform: rotate(540deg)   translate(23px,0 );
    }
    100%{
        -webkit-transform-origin:260px 72px;
        -webkit-transform: rotate(540deg)   translate(-23px,0 );
    }
}
@-webkit-keyframes thtrbc{
    0% {
        -webkit-transform-origin:75px 250px;
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    30% {
        -webkit-transform-origin:75px 250px;
        -webkit-transform:   translate(0, -178px) rotate(0deg);
    }
    70%{
        -webkit-transform-origin:75px 250px;
        -webkit-transform: translate(0, -178px) rotate(360deg);
    }
    100%{
        -webkit-transform-origin:75px 250px;
        -webkit-transform: translate(0, 0) rotate(360deg);
    }
}
@-webkit-keyframes thtrbr{
    0% {
        -webkit-transform-origin:-109px 72px ;
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    30% {
        -webkit-transform-origin:-109px 72px ;
        -webkit-transform:   translate(-23px, 0) rotate(0deg);
    }
    70%{
        -webkit-transform-origin:-109px 72px ;
        -webkit-transform: translate(-23px, 0)  rotate(540deg);
    }
    100%{
        -webkit-transform-origin:-109px 72px ;
        -webkit-transform: translate(-23px, 0)  rotate(540deg);
    }
}


@-webkit-keyframes thbrl{
    0% {
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    30%{
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    70%{
        -webkit-transform:  translate(0, 0) rotate(-540deg);
    }
    100% {
        -webkit-transform:  translate(0, 0) rotate(-540deg);
    }
}
@-webkit-keyframes thbrc1{
    0% {
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    30%{
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    70%{
        -webkit-transform:  translate(0, 0) rotate(-180deg);
    }
    100% {
        -webkit-transform:  translate(0, 0) rotate(-180deg);
    }
}
@-webkit-keyframes thbrc{
    0% {
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    30%{
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    70%{
        -webkit-transform:  translate(0, 0) rotate(-540deg);
    }
    100% {
        -webkit-transform:  translate(0, 0) rotate(-540deg);
    }
}
@-webkit-keyframes thbrr{
    0% {
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    30%{
        -webkit-transform:  translate(0, 0) rotate(0deg);
    }
    70%{
        -webkit-transform:  translate(0, 0) rotate(-360deg);
    }
    100% {
        -webkit-transform:  translate(0, 0) rotate(-360deg);
    }
}
@-webkit-keyframes thbrb{
    0% {
        -webkit-transform:  translate(0, 0);
    }
    30%{
        -webkit-transform:  translate(0, 0);
    }
    70%{
        -webkit-transform:  translate(0, 0) rotate(360deg);
    }
    100% {
        -webkit-transform:  translate(0, 0) rotate(360deg);
    }
}
@-webkit-keyframes thbagrl{
    0% {
        -webkit-transform:  rotate(0deg);
    }
    100% {
        -webkit-transform:  rotate(180deg);
    }
}


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






@-webkit-keyframes fotl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(254px,0);
    }
}

@-webkit-keyframes fofl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(254px,248px);
    }
}

@-webkit-keyframes fothl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(0,248px);
    }
}

@-webkit-keyframes fotul{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(0,-100px);
    }
    66% {
        -webkit-transform: translate(254px,-100px);
    }
    100% {
        -webkit-transform: translate(254px,0);
    }
}
@-webkit-keyframes fothll{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(-100px,0);
    }
    66% {
        -webkit-transform: translate(-100px,248px);
    }
    100% {
        -webkit-transform: translate(0,248px);
    }
}

@-webkit-keyframes fotr{
    0% {
        -webkit-transform-origin: 188px 58px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin: 188px 58px;
        -webkit-transform: rotate(180deg);
    }
}
@-webkit-keyframes fothr{
    0% {
        -webkit-transform-origin: 61px 182px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin:61px 182px;
        -webkit-transform: rotate(-180deg);
    }
}






@-webkit-keyframes ftol{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(-254px,0);
    }
}

@-webkit-keyframes ftfl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(0,248px);
    }
}

@-webkit-keyframes ftthl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(-254px,248px);
    }
}

@-webkit-keyframes ftoul{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(0,-100px);
    }
    66% {
        -webkit-transform: translate(-254px,-100px);
    }
    100% {
        -webkit-transform: translate(-254px,0);
    }
}
@-webkit-keyframes ftfrl{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(100px,0);
    }
    66% {
        -webkit-transform: translate(100px,248px);
    }
    100% {
        -webkit-transform: translate(0,248px);
    }
}

@-webkit-keyframes ftor{
    0% {
        -webkit-transform-origin: -66px 58px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin: -66px 58px;
        -webkit-transform: rotate(-180deg);
    }
}
@-webkit-keyframes ftfr{
    0% {
        -webkit-transform-origin: 61px 182px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin:61px 182px;
        -webkit-transform: rotate(180deg);
    }
}


@-webkit-keyframes fthol{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(0,-248px);
    }
}

@-webkit-keyframes fthtl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(254px,-248px);
    }
}

@-webkit-keyframes fthfl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(254px,0);
    }
}

@-webkit-keyframes ftholl{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(-100px,0);
    }
    66% {
        -webkit-transform: translate(-100px,-248px);
    }
    100% {
        -webkit-transform: translate(0,-248px);
    }
}
@-webkit-keyframes fthfdl{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(0,100px);
    }
    66% {
        -webkit-transform: translate(254px,100px);
    }
    100% {
        -webkit-transform: translate(254px,0);
    }
}

@-webkit-keyframes fthor{
    0% {
        -webkit-transform-origin: 61px -66px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin:61px -66px;
        -webkit-transform: rotate(180deg);
    }
}
@-webkit-keyframes fthfr{
    0% {
        -webkit-transform-origin: 188px 58px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin: 188px 58px;
        -webkit-transform: rotate(180deg);
    }
}



@-webkit-keyframes ffol{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(-254px,-248px);
    }
}

@-webkit-keyframes fftl{
    0% {
        -webkit-transform: translate(0,0);
        zoom:1
    }
    100% {
        -webkit-transform: translate(0,-248px);
    }
}

@-webkit-keyframes ffthl{
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(-254px,0);
    }
}

@-webkit-keyframes fftrl{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(100px,0);
    }
    66% {
        -webkit-transform: translate(100px,-248px);
    }
    100% {
        -webkit-transform: translate(0,-248px);
    }
}
@-webkit-keyframes ffthdl{
    0% {
        -webkit-transform: translate(0,0);
    }
    33% {
        -webkit-transform: translate(0,100px);
    }
    66% {
        -webkit-transform: translate(-254px,100px);
    }
    100% {
        -webkit-transform: translate(-254px,0);
    }
}

@-webkit-keyframes fftr{
    0% {
        -webkit-transform-origin: 61px -66px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin:61px -66px;
        -webkit-transform: rotate(-180deg);
    }
}
@-webkit-keyframes ffthr{
    0% {
        -webkit-transform-origin: -66px 58px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin: -66px 58px;
        -webkit-transform: rotate(-180deg);
    }
}
@-webkit-keyframes frotatel{
    0% {

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

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

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

        -webkit-transform: rotate(180deg);
    }
}
@-webkit-keyframes midr{
    0% {
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform: rotate(45deg);
    }
    70% {
        -webkit-transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(0);
    }
}
@-webkit-keyframes boxr{
    0% {
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform: rotate(-45deg);
    }
    70% {
        -webkit-transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(-45deg);
    }
}
@-webkit-keyframes fboxr1{
    0% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(540deg);
    }
    100% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(540deg);
    }
}
@-webkit-keyframes fboxr2{
    0% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(540deg);
    }
    100% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(540deg);
    }
}
@-webkit-keyframes fboxr3{
    0% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(540deg);
    }
    100% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(540deg);
    }
}
@-webkit-keyframes fboxr4{
    0% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(540deg);
    }
    100% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(540deg);
    }
}

@-webkit-keyframes fbagr{
    0% {
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform: rotate(-540deg);
    }
    100% {
        -webkit-transform: rotate(-495deg);
    }
}













@-webkit-keyframes midrr{
    0% {
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform: rotate(-45deg);
    }
    70% {
        -webkit-transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(0);
    }
}
@-webkit-keyframes boxrr{
    0% {
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform: rotate(45deg);
    }
    70% {
        -webkit-transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}
@-webkit-keyframes fboxrr1{
    0% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(-540deg);
    }
    100% {
        -webkit-transform-origin:61px 234px;
        -webkit-transform: rotate(-540deg);
    }
}
@-webkit-keyframes fboxrr2{
    0% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(-540deg);
    }
    100% {
        -webkit-transform-origin:-112px 58px;
        -webkit-transform: rotate(-540deg);
    }
}
@-webkit-keyframes fboxrr3{
    0% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(-540deg);
    }
    100% {
        -webkit-transform-origin:234px 58px;
        -webkit-transform: rotate(-540deg);
    }
}
@-webkit-keyframes fboxrr4{
    0% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(-540deg);
    }
    100% {
        -webkit-transform-origin:61px -118px;
        -webkit-transform: rotate(-540deg);
    }
}

@-webkit-keyframes fbagrr{
    0% {
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform: rotate(0deg);
    }
    70% {
        -webkit-transform: rotate(540deg);
    }
    100% {
        -webkit-transform: rotate(495deg);
    }
}
@-webkit-keyframes boxsacle{
    0% {
        -webkit-transform:scale(1,1);
    }
    50% {
        -webkit-transform:scale(1.2,1.2);
    }
    100% {
        -webkit-transform:scale(1,1);
    }
}





@-webkit-keyframes boxup{
    0% {
        -webkit-transform:translate(0,0);
    }
    100% {
        -webkit-transform:translate(0,-100%);
    }
}
@-webkit-keyframes boxdown{
    0% {
        -webkit-transform:translate(0,-100%);
        zoom:1;
    }
    100% {
        -webkit-transform:translate(0,0);
        zoom:1;
    }
}
@-webkit-keyframes lightshow{
    0% {
        opacity:0;
    }
    20%{
        opacity:1;
    }
    40% {
        opacity:1;
    }
    60% {
        opacity:0;
    }
    80% {
        opacity:1;
    }
    100%{
        opacity:0;
    }
}

@-webkit-keyframes ghost{
    0% {
        -webkit-transform:translate(0,0);
    }
    25%{
        -webkit-transform:translate(0,-20px);
    }
    50%{
        -webkit-transform:translate(0,20px);
    }
    75%{
        -webkit-transform:translate(0,-20px);
    }
    100% {
        -webkit-transform:translate(0,0);
    }
}

.m-result-alert{
    position:absolute;width:640px;height:100%;overflow:hidden;left:0;top:0;z-index:50;background:rgba(0,0,0,0.15);
}
.m-result-alertcon{position:absolute;width:640px;height:780px;overflow:hidden;left:50%;top:50%;margin:-390px 0 0 -320px;background:rgba(0,0,0,0)url(../images/result-bag.png) 0 0 no-repeat;z-index:50;}
.m-alert-scorebox{
    position:absolute;width:323px;height:98px;overflow:hidden;left:0;top:336px;z-index:10;background:url(../images/star-bag.png) 211px 50% no-repeat;padding-left:317px;
}

.m-alert-agin,.m-alert-share{
    position:absolute;width:252px;height:156px;overflow:hidden;left:80px;top:525px;z-index:10;
}
.m-alert-share{
    left:329px;
}
.m-share-alert{
    position:absolute;width:100%;height:100%;overflow:hidden;left:0;top:0;z-index:50;background-size:cover;background:url(../images/share-bag.gif) 0 0 no-repeat;
}
.m-stop-alertcon{
    position:absolute;width:516px;height:563px;overflow:hidden;background:url(../images/stop-alert.png) 0 0 no-repeat;left:50%;top:50%;margin:-281px 0 0 -258px;
}
.m-stop-btn{
    position:absolute;width:100%;height:158px;overflow:hidden;left:0;top:400px;
}
.m-mid-thanimate .m-game-box:nth-child(1){
    -webkit-animation:thone .5s linear forwards;
}
.m-mid-thanimate .m-game-box:nth-child(2){
    -webkit-animation:thtwo .5s linear forwards;
}
.m-mid-thanimate .m-game-box:nth-child(3){
    -webkit-animation:ththree .5s linear forwards;
}
.m-mid-fanimate .m-game-box:nth-child(1){
    -webkit-animation:fone .5s linear forwards;
}
.m-mid-fanimate .m-game-box:nth-child(2){
    -webkit-animation:ftwo .5s linear forwards;
}
.m-mid-fanimate .m-game-box:nth-child(3){
    -webkit-animation:fthree .5s linear forwards;
}
.m-mid-fanimate .m-game-box:nth-child(4){
    -webkit-animation:ffour .5s linear forwards;
}
.m-mid-fanimate .m-game-boxbag,.m-mid-thanimate .m-game-boxbag,.m-mid-fthanimate .m-game-boxbag{
    -webkit-animation: tranupdown 1.5s linear .5s forwards;
}
.m-mid-fanimate .m-game-people,.m-mid-thanimate .m-game-people,.m-mid-fthanimate .m-game-people{
    -webkit-animation: people .5s linear 1.1s forwards;
}
@-webkit-keyframes thone{
    0% {
        left:96px;top:0;width:176px;height:167px;
    }
    100% {
        left:46px;top:0;width:151px;height:144px;
    }
}
@-webkit-keyframes thtwo{
    0% {
        left:368px;top:0;width:176px;height:167px;
    }
    100% {
        left:243px;top:0;width:151px;height:144px;
    }
}
@-webkit-keyframes ththree{
    0% {
        left:740px;top:0;width:176px;height:167px;
    }
    100% {
        left:440px;top:0;width:151px;height:144px;
    }
}
@-webkit-keyframes fone{
    0% {
        left:46px;top:0;width:151px;height:144px;
    }
    100% {
        left:132px;top:0;width:122px;height:116px;
    }
}
@-webkit-keyframes ftwo{
    0% {
        left:243px;top:0;width:151px;height:144px;
    }
    100% {
        left:386px;top:0;width:122px;height:116px;
    }
}
@-webkit-keyframes fthree{
    0% {
        left:440px;top:0;width:151px;height:144px;
    }
    100% {
        left:132px;top:248px;width:122px;height:116px;
    }
}
@-webkit-keyframes ffour{
    0% {
        left:740px;top:0;width:151px;height:144px;
    }
    100% {
        left:386px;top:248px;width:122px;height:116px;
    }
}



.m-mid-fthanimate .m-game-box:nth-child(1){
    -webkit-animation: fthone .5s linear forwards;
}
.m-mid-fthanimate .m-game-box:nth-child(2){
    -webkit-animation: fthtwo .5s linear forwards;
}
.m-mid-fthanimate .m-game-box:nth-child(3){
    -webkit-animation: fththree .5s linear forwards;
}
.m-mid-fthanimate .m-game-box:nth-child(4){
    -webkit-animation: fthfour .5s linear forwards;
}
@-webkit-keyframes fthone{
    0% {
        left:132px;top:0;width:122px;height:116px;
    }
    100% {
        left:46px;top:0;width:151px;height:144px;
    }
}


@-webkit-keyframes fthtwo{
    0% {
        left:386px;top:0;width:122px;height:116px;
    }
    100% {
        left:243px;top:0;width:151px;height:144px;
    }
}
@-webkit-keyframes fththree{
    0% {
        left:132px;top:248px;width:122px;height:116px;
    }
    100% {
        left:440px;top:0;width:151px;height:144px;
    }
}
@-webkit-keyframes fthfour{
    0% {
        left:386px;top:248px;width:122px;height:116px;
    }
    100% {
        left:740px;top:0;width:151px;height:144px;
    }
}
@-webkit-keyframes people{
    0% {
        -webkit-transform:translate(0,0);
    }
    25% {
        -webkit-transform:translate(10px,0);
    }
    50% {
        -webkit-transform:translate(-10px,0);
    }
    75% {
        -webkit-transform:translate(10px,0);
    }
    100% {
        -webkit-transform:translate(0,0);
    }
}
* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
@-webkit-keyframes opcityshow{
    0%{opacity:0.9}
    100%{opacity:1;}
}

.m-game-test{position:absolute;width:100%;height:100%;left:0;top:0;z-index:1;}
.m-stop-look .m-game-boxbag{-webkit-animation:tranupdown 1.5s linear forwards;}
.m-stop-look .m-game-people{-webkit-animation: people 0.5s linear 0.6s forwards;}