修改

minigame/WebContent/css/lottery.css

@@ -0,0 +1,144 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+.check_result{
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	color: black;
+}
+.background {
+    width: 100%;
+    height: auto;
+}
+.pool {
+    position: absolute;
+    width: 84%;
+    height: auto;
+    left: 7%;
+    top: 250px;
+}
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    position: absolute;
+    width: 76%;
+    height: 90%;
+    left: 11%;
+}
+.item {
+    border-radius: 18px;
+    width: 32%;
+}
+.active {
+    box-shadow : 0 0 0 2px aqua;
+}
+.title{
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 700;
+    position: absolute;
+    left: 0;
+}
+.tips{
+    color: #470C82;
+    position: absolute;
+    width: 90%;
+    left: 5%;
+}
+.mask{
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 10;
+}
+.result{
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 11;
+}
+.result_failed_button{
+    position: absolute;
+    left: 24%;
+    width: 52%;
+    z-index: 12;
+}
+.result_failed_text{
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    z-index: 13;
+    color: white;
+    font-size: 20px;
+}
+.result_success_title{
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    z-index: 12;
+    color: orange;
+    font-size: 20px;
+}
+
+.result_success_logo{
+    position: absolute;
+    width: 30%;
+    left: 35%;
+    z-index: 12;
+}
+input{
+    position: absolute;
+    left: 24%;
+    width: 45%;
+    z-index: 12;
+    height: 40px;
+    border: orange solid 3px;
+    border-radius: 40px;
+    padding-left: 20px;
+}
+.result_success_button{
+    position: absolute;
+    left: 24%;
+    width: 52%;
+    z-index: 12;
+}
+
+/*滚动*/
+.case {
+    position: absolute;
+    width: 95%;
+    left: 5%;
+    height: 70px;
+    overflow: hidden;
+}
+.case .part2 {
+    float: left;
+    width: 93%;
+    height: 70px;
+    text-indent: 1em;
+    overflow: hidden;
+}
+#part2 ul {
+    width: 100%;
+    height: auto;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+#part2 ul li {
+    width: 100%;
+    height: 30px;
+    font-size: 16px;
+    line-height: 30px;
+    color: white;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

minigame/WebContent/css/main.css

@@ -0,0 +1,996 @@
+@charset "UTF-8";
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block; }
+
+ol,
+ul {
+    list-style: none; }
+
+blockquote,
+q {
+    quotes: none; }
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none; }
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+
+/******x reset end*****/
+* {
+    box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0; }
+
+html,
+body {
+    -webkit-overflow-scrolling: touch; }
+
+a {
+    background-color: transparent;
+    outline: 0;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer; }
+
+.clear {
+    clear: both;
+    *zoom: 1; }
+
+.cf:after {
+    font-size: 0;
+    display: block;
+    visibility: hidden;
+    clear: both;
+    height: 0;
+    content: ''; }
+
+.center-block {
+    display: block;
+    margin-left: auto;
+    margin-right: auto; }
+
+/*显示类*/
+.hide,
+.hidden {
+    display: none; }
+
+.show {
+    display: block; }
+
+.invisible {
+    visibility: hidden; }
+
+.visible {
+    visibility: visible; }
+
+.block {
+    display: block; }
+
+.inline {
+    display: inline; }
+
+.inlineblock,
+.inline-block {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1; }
+
+/*位置浮动类*/
+.float-left,
+.pull-left {
+    float: left; }
+
+.float-right,
+.pull-right {
+    float: right; }
+
+.vertical-middle {
+    vertical-align: middle; }
+
+.over-hide,
+.over-hidden {
+    overflow: hidden; }
+
+.table {
+    display: table; }
+
+.table-cell {
+    display: table-cell; }
+
+.scroll-auto,
+.scrollauto {
+    overflow: auto; }
+
+.scroll {
+    overflow: auto; }
+
+/*内联文本类*/
+.text-center {
+    text-align: center; }
+
+.text-left {
+    text-align: left; }
+
+.text-right {
+    text-align: right; }
+
+.text-justify {
+    text-align: justify !important; }
+
+.text-truncate {
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+
+.text-nowrap,
+.nowrap {
+    white-space: nowrap; }
+
+.breakall,
+.break-all,
+.text-break {
+    word-break: break-all; }
+
+.text-bold,
+.font-bold {
+    font-weight: bold !important; }
+
+.text-lowercase,
+.lowercase {
+    text-transform: lowercase !important; }
+
+.text-uppercase,
+.uppercase {
+    text-transform: uppercase !important; }
+
+.text-capitalize {
+    text-transform: capitalize !important; }
+
+.text-white {
+    color: #fff !important; }
+
+.text-muted {
+    color: #636c72 !important; }
+
+.hover-transition {
+    -webkit-transition: all 0.35s ease;
+    -o-transition: all 0.35s ease;
+    -moz-transition: all 0.35s ease;
+    transition: all 0.35s ease; }
+
+body {
+    font-family: "PingFang SC", "PingHei", "STHeitiSC-Light", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "microsoft yahei", "SimHei", "tahoma", "Arial", "Verdana", "sans-serif"; }
+
+textarea,
+input {
+    outline: none; }
+
+.voice_active:after {
+    content: ' ';
+    width: .893333rem;
+    height: .893333rem;
+    display: block;
+    background: url("../images/voice_active.png");
+    -moz-background-size: 100% 100%;
+    background-size: 100% 100%;
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0; }
+
+.poster-mode .qrcode-box p {
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+
+* {
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent; }
+
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none; }
+
+body {
+    line-height: 1.5;
+    color: #151f3a; }
+
+li {
+    list-style: none; }
+
+a {
+    text-decoration: none; }
+
+img {
+    max-width: 100%;
+    vertical-align: top; }
+
+.hide {
+    display: none !important; }
+
+.show {
+    display: show !important; }
+
+.bold {
+    font-weight: bold; }
+
+.js-an {
+    display: none !important;
+    -webkit-animation-name: none !important;
+    -moz-animation-name: none !important;
+    -o-animation-name: none !important;
+    animation-name: none !important; }
+
+.animated {
+    -webkit-animation-duration: .6s;
+    -moz-animation-duration: .6s;
+    -o-animation-duration: .6s;
+    animation-duration: .6s;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); }
+
+.origin-tc {
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -ms-transform-origin: top center;
+    -o-transform-origin: top center;
+    transform-origin: top center; }
+
+.origin-rb {
+    -webkit-transform-origin: right bottom;
+    -moz-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    -o-transform-origin: right bottom;
+    transform-origin: right bottom; }
+
+.origin-lb {
+    -webkit-transform-origin: left center;
+    -moz-transform-origin: left center;
+    -ms-transform-origin: left center;
+    -o-transform-origin: left center;
+    transform-origin: left center; }
+
+.origin-cb {
+    -webkit-transform-origin: center bottom;
+    -moz-transform-origin: center bottom;
+    -ms-transform-origin: center bottom;
+    -o-transform-origin: center bottom;
+    transform-origin: center bottom; }
+
+.origin-cc {
+    -webkit-transform-origin: center center;
+    -moz-transform-origin: center center;
+    -ms-transform-origin: center center;
+    -o-transform-origin: center center;
+    transform-origin: center center; }
+
+.iteration {
+    -webkit-animation-iteration-count: infinite;
+    -moz-animation-iteration-count: infinite;
+    -o-animation-iteration-count: infinite;
+    animation-iteration-count: infinite; }
+
+.ease-in {
+    -webkit-animation-timing-function: ease-in;
+    -moz-animation-timing-function: ease-in;
+    -o-animation-timing-function: ease-in;
+    animation-timing-function: ease-in; }
+
+.ease-out {
+    -webkit-animation-timing-function: ease-out;
+    -moz-animation-timing-function: ease-out;
+    -o-animation-timing-function: ease-out;
+    animation-timing-function: ease-out; }
+
+.delay0 {
+    -webkit-animation-delay: 0s;
+    -moz-animation-delay: 0s;
+    -o-animation-delay: 0s;
+    animation-delay: 0s; }
+
+.delay1 {
+    -webkit-animation-delay: 0.2s;
+    -moz-animation-delay: 0.2s;
+    -o-animation-delay: 0.2s;
+    animation-delay: 0.2s; }
+
+.delay2 {
+    -webkit-animation-delay: 0.4s;
+    -moz-animation-delay: 0.4s;
+    -o-animation-delay: 0.4s;
+    animation-delay: 0.4s; }
+
+.delay3 {
+    -webkit-animation-delay: 0.6s;
+    -moz-animation-delay: 0.6s;
+    -o-animation-delay: 0.6s;
+    animation-delay: 0.6s; }
+
+.delay4 {
+    -webkit-animation-delay: 0.8s;
+    -moz-animation-delay: 0.8s;
+    -o-animation-delay: 0.8s;
+    animation-delay: 0.8s; }
+
+.delay5 {
+    -webkit-animation-delay: 1s;
+    -moz-animation-delay: 1s;
+    -o-animation-delay: 1s;
+    animation-delay: 1s; }
+
+.delay6 {
+    -webkit-animation-delay: 1.2s;
+    -moz-animation-delay: 1.2s;
+    -o-animation-delay: 1.2s;
+    animation-delay: 1.2s; }
+
+.delay7 {
+    -webkit-animation-delay: 1.4s;
+    -moz-animation-delay: 1.4s;
+    -o-animation-delay: 1.4s;
+    animation-delay: 1.4s; }
+
+.delay8 {
+    -webkit-animation-delay: 1.6s;
+    -moz-animation-delay: 1.6s;
+    -o-animation-delay: 1.6s;
+    animation-delay: 1.6s; }
+
+.delay9 {
+    -webkit-animation-delay: 1.8s;
+    -moz-animation-delay: 1.8s;
+    -o-animation-delay: 1.8s;
+    animation-delay: 1.8s; }
+
+.delay10 {
+    -webkit-animation-delay: 2s;
+    -moz-animation-delay: 2s;
+    -o-animation-delay: 2s;
+    animation-delay: 2s; }
+
+.delay11 {
+    -webkit-animation-delay: 2.2s;
+    -moz-animation-delay: 2.2s;
+    -o-animation-delay: 2.2s;
+    animation-delay: 2.2s; }
+
+.delay12 {
+    -webkit-animation-delay: 2.4s;
+    -moz-animation-delay: 2.4s;
+    -o-animation-delay: 2.4s;
+    animation-delay: 2.4s; }
+
+.delay13 {
+    -webkit-animation-delay: 2.6s;
+    -moz-animation-delay: 2.6s;
+    -o-animation-delay: 2.6s;
+    animation-delay: 2.6s; }
+
+.delay14 {
+    -webkit-animation-delay: 2.8s;
+    -moz-animation-delay: 2.8s;
+    -o-animation-delay: 2.8s;
+    animation-delay: 2.8s; }
+
+.delay15 {
+    -webkit-animation-delay: 3s;
+    -moz-animation-delay: 3s;
+    -o-animation-delay: 3s;
+    animation-delay: 3s; }
+
+.time0 {
+    -webkit-animation-duration: 0s;
+    -moz-animation-duration: 0s;
+    -o-animation-duration: 0s;
+    animation-duration: 0s; }
+
+.time1 {
+    -webkit-animation-duration: 0.2s;
+    -moz-animation-duration: 0.2s;
+    -o-animation-duration: 0.2s;
+    animation-duration: 0.2s; }
+
+.time2 {
+    -webkit-animation-duration: 0.4s;
+    -moz-animation-duration: 0.4s;
+    -o-animation-duration: 0.4s;
+    animation-duration: 0.4s; }
+
+.time3 {
+    -webkit-animation-duration: 0.6s;
+    -moz-animation-duration: 0.6s;
+    -o-animation-duration: 0.6s;
+    animation-duration: 0.6s; }
+
+.time4 {
+    -webkit-animation-duration: 0.8s;
+    -moz-animation-duration: 0.8s;
+    -o-animation-duration: 0.8s;
+    animation-duration: 0.8s; }
+
+.time5 {
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    -o-animation-duration: 1s;
+    animation-duration: 1s; }
+
+.time6 {
+    -webkit-animation-duration: 1.2s;
+    -moz-animation-duration: 1.2s;
+    -o-animation-duration: 1.2s;
+    animation-duration: 1.2s; }
+
+.time7 {
+    -webkit-animation-duration: 1.4s;
+    -moz-animation-duration: 1.4s;
+    -o-animation-duration: 1.4s;
+    animation-duration: 1.4s; }
+
+.time8 {
+    -webkit-animation-duration: 1.6s;
+    -moz-animation-duration: 1.6s;
+    -o-animation-duration: 1.6s;
+    animation-duration: 1.6s; }
+
+.time9 {
+    -webkit-animation-duration: 1.8s;
+    -moz-animation-duration: 1.8s;
+    -o-animation-duration: 1.8s;
+    animation-duration: 1.8s; }
+
+.time10 {
+    -webkit-animation-duration: 2s;
+    -moz-animation-duration: 2s;
+    -o-animation-duration: 2s;
+    animation-duration: 2s; }
+
+.time11 {
+    -webkit-animation-duration: 2.2s;
+    -moz-animation-duration: 2.2s;
+    -o-animation-duration: 2.2s;
+    animation-duration: 2.2s; }
+
+.time12 {
+    -webkit-animation-duration: 2.4s;
+    -moz-animation-duration: 2.4s;
+    -o-animation-duration: 2.4s;
+    animation-duration: 2.4s; }
+
+.time13 {
+    -webkit-animation-duration: 2.6s;
+    -moz-animation-duration: 2.6s;
+    -o-animation-duration: 2.6s;
+    animation-duration: 2.6s; }
+
+.time14 {
+    -webkit-animation-duration: 2.8s;
+    -moz-animation-duration: 2.8s;
+    -o-animation-duration: 2.8s;
+    animation-duration: 2.8s; }
+
+.time15 {
+    -webkit-animation-duration: 3s;
+    -moz-animation-duration: 3s;
+    -o-animation-duration: 3s;
+    animation-duration: 3s; }
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden; }
+
+.secret-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: url(../img/loading/bg.jpg) no-repeat 0 0/cover;
+    display: none;
+    z-index: 1001; }
+.secret-box img {
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -moz-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    -o-transform: translate(0, -50%);
+    transform: translate(0, -50%); }
+
+.warp {
+    width: 10rem;
+    margin: 0 auto;
+    position: relative;
+    height: 100vh;
+    background: url(../img/loading/bg.jpg) no-repeat 0 0/cover; }
+
+.loading {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    width: 10rem;
+    height: 100vh;
+    margin-left: -5rem;
+    background: url(../img/loading/bg.jpg) no-repeat 0 0/cover;
+    z-index: 100;
+    /*display: none;*/ }
+.loading .curtain-box {
+    position: absolute;
+    top: 0.89062rem;
+    left: 50%;
+    width: 10.42188rem;
+    height: 14.04688rem;
+    margin-left: -5.21094rem;
+    background: url(../img/loading/bg2.png) no-repeat 0 0/100% auto; }
+.loading .curtain-box .txt {
+    position: absolute;
+    top: 5.3125rem;
+    left: 50%;
+    width: 2.5625rem;
+    margin-left: -1.28125rem; }
+.loading .curtain-box .loading-bar {
+    position: absolute;
+    top: 10.625rem;
+    left: 50%;
+    width: 7.5rem;
+    margin-left: -3.75rem; }
+.loading .curtain-box .loading-bar .load-txt {
+    font-size: 0.53125rem;
+    color: #1e0502;
+    text-align: center;
+    text-shadow: 2px 2px 0 #b9b988;
+    margin-bottom: 0.78125rem; }
+.loading .curtain-box .loading-bar .bar {
+    width: 100%;
+    height: 0.26562rem;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    -webkit-border-radius: 0.26562rem;
+    -moz-border-radius: 0.26562rem;
+    border-radius: 0.26562rem;
+    white-space: nowrap; }
+.loading .curtain-box .loading-bar .bar span {
+    width: 0;
+    height: 100%;
+    background: -webkit-gradient(linear, left top, right bottom, from(#00489d), to(#3478c9));
+    background: -webkit-linear-gradient(top left, #00489d, #3478c9);
+    background: -moz-linear-gradient(top left, #00489d, #3478c9);
+    background: -o-linear-gradient(top left, #00489d, #3478c9);
+    background: linear-gradient(to bottom right, #00489d, #3478c9);
+    display: block;
+    position: relative; }
+.loading .curtain-box .loading-bar .bar .icon-load {
+    position: absolute;
+    right: -1.40625rem;
+    top: 50%;
+    width: 2.15625rem;
+    height: 1.04688rem;
+    margin-top: -0.52344rem;
+    background: url(../img/loading/loading_icon.png) no-repeat 0 0/100% auto; }
+
+.select-dish-box {
+    position: absolute;
+    top: 1.17188rem;
+    left: 50%;
+    width: 10rem;
+    height: 15.53125rem;
+    margin-left: -5rem;
+    background: url(../img/menu_bg.png) no-repeat 0 0/100% auto;
+    padding-top: 2.34375rem; }
+.select-dish-box .tt {
+    width: 3.85938rem;
+    margin: 0 auto;
+    display: block; }
+.select-dish-box .list {
+    margin: 1.09375rem auto 0;
+    width: 3.82812rem; }
+.select-dish-box .list .item {
+    margin-bottom: 0.9375rem; }
+.select-dish-box .list .item.active {
+    -webkit-filter: grayscale(50%);
+    filter: grayscale(50%); }
+.select-dish-box .confirm {
+    width: 2.8125rem;
+    height: 0.92188rem;
+    margin: 0 auto;
+    background: url(../img/select_menu_btn.png) no-repeat 0 0/100% auto;
+    display: none; }
+
+.game-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 1;
+    display: none; }
+
+.poster-mode {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    width: 10rem;
+    height: 100vh;
+    margin-left: -5rem;
+    z-index: 100;
+    background: #000;
+    display: none; }
+.poster-mode.poster-bg1 {
+    background: url(../img/poster/bg1.jpg) no-repeat top center/cover; }
+.poster-mode.poster-bg2 {
+    background: url(../img/poster/bg2.jpg) no-repeat top center/cover; }
+.poster-mode.poster-bg3 {
+    background: url(../img/poster/bg3.jpg) no-repeat top center/cover; }
+.poster-mode .logo {
+    position: absolute;
+    top: 0.3125rem;
+    left: 0.46875rem;
+    width: 1.5625rem; }
+.poster-mode .poster-img {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 8.26562rem;
+    margin-left: -4.13281rem; }
+.poster-mode .leads-box {
+    position: absolute;
+    top: 1.65625rem;
+    left: 50%;
+    width: 9.15625rem;
+    height: 3.57812rem;
+    margin-left: -4.57812rem;
+    background: url(../img/leads_bg.png) no-repeat top center/100% auto;
+    padding-top: 0.46875rem;
+    padding-left: 2.65625rem;
+    padding-right: 1.875rem; }
+.poster-mode .leads-box .form-group {
+    border-bottom: 1px solid #c19e83; }
+.poster-mode .leads-box .form-group input , .poster-mode .leads-box .form-group .msg {
+    width: 100%;
+    height: 0.78125rem;
+    line-height: 0.78125rem;
+    font-size: 0.375rem;
+    font-size: 20x;
+    color: #c19e83;
+    background: transparent; }
+.poster-mode .leads-box .user-info {
+    position: absolute;
+    right: 0.3125rem;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -moz-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    -o-transform: translate(0, -50%);
+    transform: translate(0, -50%); }
+.poster-mode .leads-box .user-info .headimg-box {
+    width: 1.25rem; }
+.poster-mode .leads-box .user-info p {
+    font-size: 0.3125rem;
+    color: #743d2f;
+    margin-top: 0.15625rem; }
+.poster-mode .leads-box .submit {
+    position: absolute;
+    bottom: -0.15625rem;
+    left: 50%;
+    width: 3.04688rem;
+    margin-left: -1.52344rem; }
+.poster-mode .leads-box .pro {
+    position: absolute;
+    top: 50%;
+    left: 0.46875rem;
+    width: 1.82812rem;
+    -webkit-transform: translate(0, -50%);
+    -moz-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    -o-transform: translate(0, -50%);
+    transform: translate(0, -50%); }
+.poster-mode .qrcode-box {
+    position: absolute;
+    bottom: 1.92188rem;
+    right: 0.46875rem;
+    width: 1.40625rem; }
+.poster-mode .qrcode-box p {
+    font-size: 0.21875rem;
+    color: #fff;
+    text-align: center; }
+.poster-mode .replay-btn {
+    position: absolute;
+    bottom: 0.70312rem;
+    left: 1.48438rem;
+    width: 2.8125rem; }
+.poster-mode .secret-btn {
+    position: absolute;
+    bottom: 0.70312rem;
+    right: 1.48438rem;
+    width: 2.8125rem; }
+
+.shake-mode {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.6);
+    display: none; }
+.shake-mode .shake-dialog {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    width: 6.28125rem;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    padding-top: 0.78125rem; }
+.shake-mode .shake-dialog .icon {
+    position: absolute;
+    top: 5.625rem;
+    left: 50%;
+    width: 2.23438rem;
+    margin-left: -1.11719rem; }
+.shake-mode .shake-dialog .fire {
+    width: 5.98438rem;
+    height: 10.54688rem;
+    background: url(../img/fire.png) no-repeat 0 0;
+    -moz-background-size: 600% 100%;
+    background-size: 600% 100%;
+    -webkit-animation: fire 1.5s steps(5) infinite;
+    -moz-animation: fire 1.5s steps(5) infinite;
+    -o-animation: fire 1.5s steps(5) infinite;
+    animation: fire 1.5s steps(5) infinite; }
+.shake-mode .shake-dialog .txt {
+    position: absolute;
+    top: 8.35938rem;
+    left: 50%;
+    width: 4.96875rem;
+    margin-left: -2.48438rem; }
+
+.anim-time {
+    -webkit-animation-duration: 0.5 !important;
+    -moz-animation-duration: 0.5 !important;
+    -o-animation-duration: 0.5 !important;
+    animation-duration: 0.5 !important; }
+
+@-webkit-keyframes fire {
+    0% {
+        background-position: 0 0; }
+    100% {
+        background-position: 100% 0; } }
+
+@-moz-keyframes fire {
+    0% {
+        background-position: 0 0; }
+    100% {
+        background-position: 100% 0; } }
+
+@-o-keyframes fire {
+    0% {
+        background-position: 0 0; }
+    100% {
+        background-position: 100% 0; } }
+
+@keyframes fire {
+    0% {
+        background-position: 0 0; }
+    100% {
+        background-position: 100% 0; } }
+
+.anim-light {
+    -webkit-animation: light 2s ease-out infinite;
+    -moz-animation: light 2s ease-out infinite;
+    -o-animation: light 2s ease-out infinite;
+    animation: light 2s ease-out infinite; }
+
+@-webkit-keyframes light {
+    0%, 100% {
+        opacity: 1; }
+    50% {
+        opacity: 0.7; } }
+
+@-moz-keyframes light {
+    0%, 100% {
+        opacity: 1; }
+    50% {
+        opacity: 0.7; } }
+
+@-o-keyframes light {
+    0%, 100% {
+        opacity: 1; }
+    50% {
+        opacity: 0.7; } }
+
+@keyframes light {
+    0%, 100% {
+        opacity: 1; }
+    50% {
+        opacity: 0.7; } }
+
+.anim-btn {
+    -webkit-animation: btn 1s ease infinite;
+    -moz-animation: btn 1s ease infinite;
+    -o-animation: btn 1s ease infinite;
+    animation: btn 1s ease infinite; }
+
+@-webkit-keyframes btn {
+    0%, 100% {
+        -webkit-transform: scale(1, 1);
+        transform: scale(1, 1); }
+    15% {
+        -webkit-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    20% {
+        -webkit-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    35% {
+        -webkit-transform: scale(1.2, 1.2);
+        transform: scale(1.2, 1.2); } }
+
+@-moz-keyframes btn {
+    0%, 100% {
+        -moz-transform: scale(1, 1);
+        transform: scale(1, 1); }
+    15% {
+        -moz-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    20% {
+        -moz-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    35% {
+        -moz-transform: scale(1.2, 1.2);
+        transform: scale(1.2, 1.2); } }
+
+@-o-keyframes btn {
+    0%, 100% {
+        -o-transform: scale(1, 1);
+        transform: scale(1, 1); }
+    15% {
+        -o-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    20% {
+        -o-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    35% {
+        -o-transform: scale(1.2, 1.2);
+        transform: scale(1.2, 1.2); } }
+
+@keyframes btn {
+    0%, 100% {
+        -webkit-transform: scale(1, 1);
+        -moz-transform: scale(1, 1);
+        -o-transform: scale(1, 1);
+        transform: scale(1, 1); }
+    15% {
+        -webkit-transform: scale(1.1, 1.1);
+        -moz-transform: scale(1.1, 1.1);
+        -o-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    20% {
+        -webkit-transform: scale(1.1, 1.1);
+        -moz-transform: scale(1.1, 1.1);
+        -o-transform: scale(1.1, 1.1);
+        transform: scale(1.1, 1.1); }
+    35% {
+        -webkit-transform: scale(1.2, 1.2);
+        -moz-transform: scale(1.2, 1.2);
+        -o-transform: scale(1.2, 1.2);
+        transform: scale(1.2, 1.2); } }