a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:after, blockquote:before, q:after, q:before { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0 }
body { font-family: 'microsoft yahei', Verdana, Arial, Helvetica, sans-serif }
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box }
a { text-decoration: none }
body { overflow: hidden; font-size: 16px }
.page-container { padding: 0 10px }
.autoimg { width: 100%; height: auto }
.btn { padding: 1em 0; border: 1px solid #666; border-radius: 5px; text-align: center; display: inline-block }
.toptitle { text-align: center; font-size: 1.25em; padding: 15px 0 }
#pageWrapper { width: 100%; min-height: 280px; overflow: hidden; max-width: 640px; margin: 0 auto }
#pages { width: 100%; position: relative }
.pagemodel { width: 100%; min-height: 400px }
.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: #d71966 }
.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: 200px; height: 200px; display: inline-block; border-radius: 100px; border: 10px solid #f6d236; vertical-align: middle; position: relative }
.play-container .masker .load .first-layer, .play-container .masker .load .second-layer, .play-container .masker .load .third-layer { width: 100px; height: 200px; 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: 100px; height: 200px; 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 #d71966; 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: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 75px solid rgba(256, 256, 256, .3); display: inline-block; margin-left: 30px }
.play-container .masker .loaded .play-button { border-left: 75px solid rgba(246, 210, 54, 1) }
.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: 140px; text-align: center; vertical-align: middle; line-height: 180px; 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: #d71966; 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; display: inline-block; width: 312px }
.timer .timer-con { background-color: #d1c0a6; border-radius: 15px; display: inline-block; padding: 5px 10px; color: #FFF; font-size: 18px; vertical-align: middle; min-width: 110px; text-align: left }
.timer .timer-con .timer-icon { width: 22px; height: 22px; display: inline-block; border: 1px solid #FFF; border-radius: 11px; position: relative }
.timer .timer-con .timer-icon::before { content: ""; height: 9px; width: 7px; display: inline-block; border: solid #FFF; border-width: 0 0 1px 1px; position: absolute; top: 3px; left: 8px }
.timer .t { margin-left: 5px; vertical-align: text-top; line-height: 14px }
.timer .kapics { color: #fff600; font-size: 18px; margin-top: 5px }
.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: #d71966; 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: #d71966; margin-left: 0 }
.initloading { text-align: center; line-height: 400px; 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: #d71966; margin-left: 20px }
.guide { background-color: #f4f1f1 }
.guide .btn { text-align: center; width: 80%; margin: 0 auto }
.guide a.btn { color: #d71966 }
.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: 99; background-color: rgba(0, 0, 0, 0.7); top: 0px; left: 0px; width: 100%; height: 100%; opacity: .8; display: none; }
#gameresult { position: absolute; z-index: 100; top: 0%; left: 0%; width: 100%; height: 100%; display: none; }
.resultcontainer { width: 80%; margin: auto; color: white; text-align: center; padding: 20px; }
.resultinfo { margin-bottom: 40px; font-size: 20px; }
.resultinfo em { color:#d71966; }
.btngroup { height: 60px; }
.btn1 { padding: 8px 15px; background-color: rgb(0, 70, 148); border-radius: 5px; }
.hide { display: none; }
.kapics { text-align: center; }
#share { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; z-index: 110; }
#share img { height: 150px; width: 180px; position: absolute; right: 0; top: 0; }
#spn { position: fixed; left: 50% !important; margin-left: -160px; width: 320px; height: 50px; bottom: 0; z-index: 100; }
.hide { display: none; }