/* Html5 Reset */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;padding:0;border:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a {background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
b,strong{font-weight:bold}
img{border:0}
svg:not(:root){overflow:hidden}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
legend{border:0;padding:0}
textarea{overflow:auto}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
menu,ol,ul{padding:0;list-style:none;list-style-image:none}
.vh{visibility:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,dl,dd,ol,ul,menu,figure,blockquote,p,pre,form{margin:0}
.hidden{display:none}
::-webkit-input-placeholder{color:#666}
:-moz-placeholder{color:#666}
::-moz-placeholder{color:#666}
:-ms-input-placeholder{color:#666}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
.clearfix{zoom:1;display:block}

body,html{font-family:"Heiti SC",Helvetica;width:100%;height:100%/*-webkit-overflow-scrolling:touch;*/}
html{font-size:100px;line-height:1.8}
body{background-color:#f8f6ef}
.page-container {padding:0 10px}
#pageWrapper {width:100%;min-height:480px;overflow:hidden;max-width:640px;margin:0 auto}
#pages {width:100%;position:relative}
.pages{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#f8f6ef;-webkit-transform:translate(0,100%);transform:translate(0,100%);-webkit-transition:all .5s ease-in;transition:all .5s ease-in}
.pages.movetop{-webkit-transform:translate(0,0);transform:translate(0,0)}

.wrapper{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.cover{background:#f8f6ef url(../img/cover-bg.jpg) no-repeat 50% 0;background-size:100% auto}
.cover-title{position:absolute;left:50%;top:2.96rem;width:2.42rem;height:4.8rem;margin-left:-1.21rem}
.cover-title-1,.cover-title-2{position:absolute;background-image:url(../img/cover-title.png);background-repeat:no-repeat;background-size:3.22rem 4.52rem;opacity:0}
.cover-title-1{left:1.5rem;top:0;width:0.9rem;height:2.78rem;background-position:-2.32rem 0}
.cover-title-2{left:0;top:0.28rem;width:2.3rem;height:4.52rem;background-position:0 0}
.cover-stamp{position:absolute;left:-1.2rem;top:3.84rem;width:0.96rem;height:1.5rem;background:url(../img/stamp.png) no-repeat 50% 50%;background-size:contain;opacity:0;}
.movetop .cover-title-1{-webkit-animation:fadeIntop 1s .5s forwards;animation:fadeIntop 1s .5s forwards;}
.movetop .cover-title-2{-webkit-animation:fadeIn 1s 1.5s forwards;animation:fadeIn 1s 1.5s forwards;}
.movetop .cover-stamp{-webkit-animation:fadeIn .5s 2.5s forwards;animation:fadeIn .5s 2.5s forwards;}
/**/
@-webkit-keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
/**/
@-webkit-keyframes fadeIntop{
    0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0;}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}
}
@keyframes fadeIntop{
    0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0;}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}
}

/**/
.page2{}
.page2-txt{position:absolute;right:0;top:1.4rem;width:0;height:4.2rem;background:url(../img/p2-txt.png) no-repeat 100% 50%;background-size:6.4rem 4.2rem}
.current .page2-txt{-webkit-animation:widthmove 3s 1s forwards;animation:widthmove 3s 1s forwards;}
@-webkit-keyframes widthmove{
    0%{width:0}
    100%{width:100%;}
}
@keyframes widthmove{
    0%{width:0}
    100%{width:100%;}
}


.pagemodel{width:100%;min-height:480px}
.page-anmi{position:absolute;top:0;left:0;-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-ms-transition:-ms-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}
.cur-page-left{-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}
.page-anmi-left-out{-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}
.out-page-left,.page-anmi-right-cur{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
.cur-page-right{-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}
.page-anmi-right-out{-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}
.out-page-right{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
.navigator{height:30px;width:100%;background:#c00;text-align:center;position:relative;line-height:30px;color:#fff;vertical-align:middle}
.navigator .back{width:10px;height:10px;display:inline-block;border:solid #fff;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg);position:absolute;left:10px;top:10px}
.drag-content{overflow:hidden;-webkit-transition:height .5s ease-out;-moz-transition:height .5s ease-out;-o-transition:height .5s ease-out;-ms-transition:height .5s ease-out;transition:height .5s ease-out;text-align:center}
.play-container{width:312px;height:312px;margin:0 auto;margin-top:5px;position:relative}
.play-container .drag-box{width:100%;height:100%;margin:0 auto;background-color:#dbdadf}
.play-container .drag-box .item{float:left;margin:1px;position:relative}
.play-container .drag-box .dragstart{background-image:none!important;background-color:#f4f1f1!important;border:1px dotted #cba70e}
.play-container .drag-box .dragover::before{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.5)}
.drag-float .item{width:100%;height:100%;vertical-align:middle;text-align:center;border:1px solid #fff}
/*.play-container .left-bottom,.play-container .left-top,.play-container .right-bottom,.play-container .right-top{position:absolute;width:30px;height:30px;background:#e63037;display:inline-block;z-index:-1}*/
.play-container .left-top{left:-2px;top:-2px}
.play-container .right-top{right:-2px;top:-2px}
.play-container .left-bottom{left:-2px;bottom:-2px}
.play-container .right-bottom{right:-2px;bottom:-2px}
.play-container .masker{background:rgba(38,38,38,.5);position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;line-height:300px;vertical-align:middle}
.play-container .masker .load{width:140px;height:140px;display:inline-block;border-radius:100px;border:solid 10px #dbdadf;vertical-align:middle;position:relative}
.play-container .masker .load .first-layer,.play-container .masker .load .second-layer,.play-container .masker .load .third-layer{width:70px;height:140px;display:inline-block;position:absolute}
.play-container .masker .load .first-layer{border-top-right-radius:100px;border-bottom-right-radius:100px;border:solid #fff;border-width:10px 10px 10px 0;right:-10px;top:-10px;z-index:1;-webkit-transform-origin:0 50%;-moz-transform-origin:0 50%;-ms-transform-origin:0 50%;-o-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform 4s linear;-moz-transition:-moz-transform 4s linear;-o-transition:-o-transform 4s linear;-ms-transition:-ms-transform 4s linear;transition:transform 4s linear}
.play-container .masker .load .second-layer{width:70px;height:140px;display:inline-block;border-top-left-radius:100px;border-bottom-left-radius:100px;border:solid #fff;border-width:10px 0 10px 10px;position:absolute;left:-10px;top:-10px;z-index:2;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition:-webkit-transform 2s linear 2s;-moz-transition:-moz-transform 2s linear 2s;-o-transition:-o-transform 2s linear 2s;-ms-transition:-ms-transform 2s linear 2s;transition:transform 2s linear 2s}
.play-container .masker .load .third-layer{border-top-right-radius:100px;border-bottom-right-radius:100px;border:solid #f6d236;border-width:10px 10px 10px 0;right:-10px;top:-10px;z-index:3;opacity:0;-webkit-transition:opacity 0s linear 2s;-moz-transition:opacity 0s linear 2s;-o-transition:opacity 0s linear 2s;-ms-transition:opacity 0s linear 2s;transition:opacity 0s linear 2s}
.play-container .masker .loading .first-layer{-webkit-transform:rotate(358deg)}
.play-container .masker .loading .second-layer{-webkit-transform:rotate(178deg)}
.play-container .masker .loading .third-layer{opacity:1}
.play-container .masker .loaded .first-layer,.play-container .masker .loaded .second-layer,.play-container .masker .loaded .third-layer{display:none}
.play-container .masker .load .play-button{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:40px solid rgba(256,256,256,.3);display:inline-block;margin-left:10px}
.play-container .masker .loaded .play-button{border-left:solid 40px #dbdadf;}
.play-container .masker .countdown .count-down{display:block}
.play-container .masker .count-down.down .play-button,.play-container .masker .countdown .play-button{display:none}
.play-container .masker .count-down{color:#fff;font-size:70px;text-align:center;vertical-align:middle;line-height:150px;width:100%;overflow:hidden}
.play-container .masker .count-down ul{display:none;width:300%}
.play-container .masker .count-down.down ul{display:block}
.play-container .masker .count-down ul li{float:left;width:33.3333333%}
.play-container .done{position:absolute;bottom:10px;color:#f6d236;right:10px;-webkit-transition:-webkit-transform,opacity 1s linear;display:none;opacity:0}
.play-container .done.doned{opacity:1;-webkit-transform:translate(0,-20px)}
.playanmal{-webkit-animation:countdown 2.5s ease-in 0s;-webkit-transform:translate(-66.666%,0)}
@-webkit-keyframes countdown{0%,33.333% {-webkit-transform:translate(0,0)}
40%,66.666%{-webkit-transform:translate(-33.33333%,0)}
100%,73%{-webkit-transform:translate(-66.666%,0)}
}
.timer{margin-top:15px;text-align:center;overflow:hidden;}
.timer .timer-con{width:100px;height:24px;line-height:24px;background-color:#d1c0a6;border-radius:20px;margin:0 auto;padding:5px 10px;color:#fff;font-size:18px;vertical-align:middle;text-align:left}
.timer .timer-con .timer-icon{width:22px;height:22px;display:block;float:left;border:1px solid #fff;border-radius:11px;position:relative}
.timer .timer-con .timer-icon::before{content:"";height:9px;width:7px;display:block;border:solid #fff;border-width:0 0 1px 1px;position:absolute;top:3px;left:8px}
.timer .t{margin-left:5px;float:left;vertical-align:text-top}
.kapics{color:#030a4b;font-size:16px;margin:10px 0}
.pictxt{color:#333;margin-top:15px;padding:0 20px;font-size:16px;line-height:1.8em;}

.footer {margin-top:20px;padding-bottom:20px;text-align:center;font-size:18px;color:#cfcfcf}
.footer h1 {width:100%;height:1px;background-color:#e6e6e6;margin-bottom:20px}
.play-info {margin-top:20px;text-align:center;color:#393939;font-size:15px}
.play-info .first-guide {font-size:18px;color:#bb2630}
.playing-over {margin-top:20px}
.playing-over span:nth-child(2) {margin-left:20px}
.shownextka {width:100%;height:100%;background-color:#fff;color:#bb2630;font-size:30px;text-align:center;display:inline-block}
.shownextka .lastpic {margin-top:40px}
.shownextka .lastpic img {vertical-align:top;width:100px;height:100px}
.shownextka .msg {margin-top:30px;line-height:40px}
.shownextka .opera {margin-top:95px;font-size:15px;color:#393939}
.shownextka .opera span {margin-left:40px}
.shownextka .opera .red {color:#bb2630;margin-left:0}
.initloading {text-align:center;line-height:500px;vertical-align:middle}
.normal-loading {width:1em;height:1em;display:inline-block;border-radius:2em;border-top:2px solid rgba(0,0,0,.8);border-right:2px solid rgba(0,0,0,.8);border-bottom:2px solid rgba(0,0,0,.2);border-left:2px solid rgba(0,0,0,.2);-webkit-animation:animations 800ms linear infinite;animation:animations 800ms linear infinite;background-color:rgba(0,0,0,.3)}
@-webkit-keyframes animations {0% {-webkit-transform:rotate(0)}
100% {-webkit-transform:rotate(360deg)}
}
.dialog {width:300px;border:1px solid #a3a3a3;border-radius:5px;background-color:#f8f8f8}
.dialog .content {padding:15px}
.dialog .message {height:70px;font-size:14px;padding:10px 20px}
.dialog .content h1 {width:100%;height:1px;background-color:#f0f0f0}
.dialog .dig-btns {text-align:center}
.dialog .dig-btns .dig-btn {width:40%;border:1px solid #cecece;height:30px;line-height:30px;vertical-align:middle;display:inline-block}
.dialog .dig-btns .dig-btn:nth-child(n+2) {border:1px solid #d38b27;color:#d38b27;margin-left:20px}
.guide {background-color:#f4f1f1}
.guide .btn {text-align:center;width:80%;margin:0 auto}
.guide a.btn {color:#F90}
.btn-con {text-align:center;margin-top:30px}
.game-desc {padding:0 15px}
.game-desc img {vertical-align:top;width:76px;height:70px;margin-right:10px;float:left}
.game-desc>div {vertical-align:bottom;height:70px;position:relative}
.game-desc>div>span {position:absolute;bottom:0}
.categorys {margin-bottom:20px;padding:0 15px}
.categorys .cate-name {font-weight:700;color:#000;font-size:14px;margin-top:30px}
.categorys img {width:100%;height:auto;margin-top:20px}
.categorys .btn-con .btn {width:80%}

.mask{position:absolute;z-index:6;background-color:black;top:0px;left:0px;width:100%;height:100%;opacity:.8;display:none;}
#gameresult{position:absolute;z-index:7;top:20%;left:0%;width:100%;height:100%;display:none;}
.resultcontainer{width:80%;margin:auto;color:white;text-align:center;padding:20px 10px;background-color:#fff;border-radius:10px;}
.soundinfo{text-align:center;font-size:12px;color:#333;margin-top:0;}
.sound-btn{width:1.52rem;height:0.74rem;margin:10px auto 0;background:url(../img/sound-btn.png) no-repeat;background-position:-1.54rem 0;background-size:3.06rem 0.74rem;}
.sound-btn.off{background-position:0 0;}
.resultinfo{font-size:18px;color:#333;}
.resultinfo em{font-style:normal;color:#f00;}
.btngroup{margin-top:20px;font-size:16px;}
.btn1{display:inline;padding:8px 15px;background-color:rgb(93, 86, 145);border-radius:5px;font-size:0.28rem;}
.hide{display:none;}
.kapics{text-align:center;}
.present-img{display:block;width:50%;margin:10px auto 0;}

.up{position:absolute;left:50%;bottom:0.3rem;width:0.72rem;height:0.54rem;margin-left:-0.36rem;background:url(../img/up.png) no-repeat 50% 50%;background-size:contain;}

/**/
.share-bg{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#f8f6ef;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition:all .5s ease-in;transition:all .5s ease-in;}
.share-bg.show{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.s-goon{position:absolute;left:6%;top:4%;width:1.08rem;height:0.5rem;}
.s-goon img{width:100%;vertical-align:top;}
.s-wx{position:absolute;right:14%;top:4%;width:1.4rem;height:0.5rem;}
.s-wx img{width:100%;vertical-align:top;}
.s-qr{position:absolute;top:3.6rem;left:0;width:100%;text-align:center;}
.s-qr img{width:30%;vertical-align:top;margin:0 2% 0 3%;}
.s-txtbg{width:3.96rem;height:6.74rem;margin:1.2rem auto 0;background:url(../img/s-txtbg.png) no-repeat 50% 50%;background-size:contain;}
/**/
.music{position:absolute;right:0.3rem;top:0.3rem;width:0.46rem;height:0.46rem;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;overflow:hidden;background-image:url(../img/play.png);z-index:5;}
.music.on{}
.music.off{background-image:url(../img/play-off.png);}
/* load */
.loading-container{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;background-color:#fff;z-index:8;}
.loading-container .loading{position:absolute;left:50%;top:50%;width:60px;height:60px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);}
.loading-container .loading img{vertical-align:top;width:100%;}
.loading-inner{text-align:center;font-size:14px;}
/**/
.wxshare{position:absolute;top:0;left:0;bottom:0;right:0;z-index:8;background-color:rgba(0,0,0,.9);background-image:url(../img/wxshare.png);background-repeat:no-repeat;background-position:93% 3%;opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-transition:all .5s linear;transition:all .5s linear;}
.wxshare-show{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
/* horizon */
.horizon{width:100%;height:100%;background:#32373b;position:absolute;left:0;top:0;z-index:9;display:none;}
.horizon_box{width:100%;height:252px;position:absolute;top:50%;left:0;margin-top:-119px;}
.horizon_pic{width:194px;height:194px;margin:0 auto;text-align:center;}
.horizon span{font-size:22px;display:block;color:#fff;text-align:center;padding-top:10px;}
.horizon i{background:url("../img/orient.png") no-repeat 50% 50%;display:inline-block;width:100px;height:163px;background-size:100px 163px;margin:0 auto;-webkit-animation: maskAni 1.5s ease infinite alternate;position:static;display:block;}
@-webkit-keyframes maskAni{0%{-webkit-transform:rotate(-90deg);}30%{-webkit-transform:rotate(-90deg);}70%{-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(0deg);}}
@media screen and (orientation:landscape) and (min-width:375px) and (max-width:1024px){.horizon{display:block;}}