@charset "UTF-8";
* { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

a { color: #000; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; }

.wapper { width: 7.5rem; margin: 0 auto; }

img { display: block; width: 100%; }

.go-back { display: block; background: url(icon-back.png) no-repeat; background-size: 100% 100%; width: .88rem; height: .88rem; position: fixed; bottom: 20%; left: .2rem; }

.play-box { width: 100%; height: 11rem; background: url(play.jpg) no-repeat; background-size: 100% 100%; }

.play-box-innner { width: 6.3rem; margin: 0 auto; }

.jf { height: .6rem; line-height: .6rem; padding: 0 .2rem; font-size: .24rem; border: 1px solid #956134; border-radius: .1rem; }

.jf span, .cishu span { font-weight: bold; color: #956134; margin: 0 .1rem; }

.cishu { font-size: .28rem; color: #000; text-align: right; overflow: hidden; }

.pai-box { position: relative; overflow: hidden; width: 6.3rem; margin: 0 auto; -webkit-perspective: 500; -ms-perspective: 500; perspective: 500; -ms-transform: perspective(500px); -moz-transform: perspective(500px); /*重要*/ -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

@-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); } }
@keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); } }
.flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.item { -webkit-perspective: 500; -moz-perspective: 500; -ms-perspective: 500; -ms-transform: perspective(500px); -moz-transform: perspective(500px); -webkit-perspective: 500; perspective: 500; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; float: left; padding: 0; width: 1.94rem; margin-left: .15rem; box-sizing: border-box; margin-top: .15rem; }

.item, .img, .info { width: 1.94rem; height: 2.65rem; }

.flip { position: relative; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

.img, .info { position: absolute; top: 0px; left: 0px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.img { z-index: 2; }

.info { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }

.item.on .flip { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }

.start-game { display: block; width: 2.74rem; height: .68rem; margin: .2rem auto 0; background: url(btn-tiaozhan.png) no-repeat; background-size: 100% 100%; }

.dn { display: none; }

.unclick { pointer-events: none; background: rgba(0, 0, 0, 0.2); }

.layout-bg { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); }

.pop-box-content { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; }

.pop-box-info { width: 7.5rem; height: 5.67rem; background: url(pop-bg.png) no-repeat; background-size: 100% 100%; z-index: 222; }

.pop-box-info .ch { width: 3.82rem; height: 1.61rem; margin: 0 auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-indent: -9999px; font-size: .24rem; }

.pop-box-info .ch1 { background: url(mx.png) no-repeat; background-size: 100% 100%; }

.pop-box-info .ch2 { background: url(xs.png) no-repeat; background-size: 100% 100%; }

.pop-box-info .ch3 { width: 3.81rem; background: url(zf.png) no-repeat; background-size: 100% 100%; }

.pop-box-info .ch4 { width: 3.81rem; background: url(dr.png) no-repeat; background-size: 100% 100%; }

.pop-box-info .ch5 { width: 3.84rem; background: url(dh.png) no-repeat; background-size: 100% 100%; }

.pop-btn .btn-share { display: block; width: 3.3rem; height: .82rem; margin: .3rem auto; background: url(btn-share.png) no-repeat; background-size: 100% 100%; }
.pop-btn .btn-share.dn { display: none; }
.pop-btn .btn-choujiang { display: block; width: 3.3rem; height: .82rem; margin: .3rem auto; background: url(btn-choujiang.png) no-repeat; background-size: 100% 100%; }
.pop-btn .btn-choujiang.dn { display: none; }