* {
  margin: 0;
  padding: 0
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

img {
  width: 100%
}

html {
  background: #FFF;
  height: 100%
  overflow: hidden;
}

body {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #F95240 url(../assets/main-bg.png);
  overflow: hidden;
}

html {
  font-size: 17.6vh
}

.preload {
  width: 0;
  height: 0;
  overflow: hidden;
  background: 
    url("../assets/main-modal-share.png"),
    url("../assets/main-modal-chances.png"),
    url("../assets/share_item.png"),
    url("../assets/visit_item.png"),
    url("../assets/comment_item.png"),
    url("../assets/download_item.png"),
    url("../assets/main-modal-go-1.png"),
    url("../assets/main-modal-go-2.png"),
    url("../assets/main-Popup-bg.png"),
    url("../assets/main-modal-bg.png");
}

#canvas {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

a {
  text-decoration: none
}

li, ul, ol {
  list-style-type: none;
  padding: 0;
  margin: 0
}

.hide {
  display: none
}

.clear {
  clear: both
}

.loading {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #F05A50;
}

.loading .main {
  width: 60%;
  margin: 0 auto;
  color: #FFF
}

.loading .main img {
  width: 60%;
  margin: 50rem auto 2rem;
}

.loading .main .title {
  font-size: 8rem
}

.loading .main .text {
  font-size: 3.6rem
}

.loading .main .bar {
  height: 2rem;
  width: 100%;
  border: 0.5rem solid #FFF;
  border-radius: 2rem;
  margin: 2rem 0;
}

.loading .main .bar .sub {
  height: 2rem;
  width: 98%;
  margin: 0 auto 0;
}

.loading .main .bar .percent {
  height: 100%;
  width: 0;
  background-color: #FFF;
  border-radius: .6rem;
}

.content {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  margin: 0 auto;
}

.landing {
  width: 100%;
  height: calc(100% - 100rem);
  background: url("../assets/snow.png") repeat-y right 1vh / 99.3%;
}

.landing .title {
  width: 52%;
}

.landing .logo {
  width: 34%;
  position: absolute;
  left: 3rem;
  top: 5rem;
}

.landing .action-2 {
  position: absolute;
  bottom: 4rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing .remains {
  font-family: Helvetica;
  font-weight: bold;
  font-size: 3.73rem;
  color: #047055;
  white-space: nowrap;
  margin: 0 0 1.5rem;
}

.landing .start {
  width: 65%;
  margin-bottom: 1.5rem;
}

.landing .add {
  width: 65%;
}

.slideTop {
  -webkit-animation: st 1s ease-in-out;
  animation: st 1s ease-in-out;
}

@-webkit-keyframes st {
  0% {
      transform: translateZ(0)
  }
  100% {
      transform: translate3d(0, -100%, 0)
  }
}

@keyframes st {
  0% {
      transform: translateZ(0)
  }
  100% {
      transform: translate3d(0, -100%, 0)
  }
}

.slideBottom {
  -webkit-animation: sb 1s ease-in-out;
  animation: sb 1s ease-in-out;
}

@-webkit-keyframes sb {
  0% {
      transform: translateZ(0)
  }
  100% {
      transform: translate3d(0, 200%, 0)
  }
}

@keyframes sb {
  0% {
      transform: translateZ(0)
  }
  100% {
      transform: translate3d(0, 200%, 0)
  }
}

.swing {
  -webkit-animation: sw 2s ease-in-out alternate infinite;
  animation: sw 2s ease-in-out alternate infinite;
}

@-webkit-keyframes sw {
  0% {
      transform: rotate(5deg);
      transform-origin: top center;
  }
  100% {
      transform: rotate(-5deg);
      transform-origin: top center;
  }
}

@keyframes sw {
  0% {
      transform: rotate(5deg);
      transform-origin: top center;
  }
  100% {
      transform: rotate(-5deg);
      transform-origin: top center;
  }
}

.modal .mask {
  background-color: #000;
  opacity: .6;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.modal .modal-content {
  position: fixed;
  height: 100%;
  width: 90%;
  margin-top: .3rem;
  top: 0;
}

.modal .main {
  width: 85%;
  margin: 0 auto;
}

.modal .container {
  position: relative
}

.modal .bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.modal .modal-main {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -0.4rem;
}

.modal .over-img {
  width: 45%;
  margin: .8rem auto 0
}

.modal .over-score {
  margin-top: -0.2rem;
  font-size: .5rem;
  color: #FF735C;
  text-shadow: -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px 2px 0 #FFF;
}

.modal .tip {
  font-size: .16rem;
  color: #9B724E;
}

.modal .over-button-b {
  width: 70%;
  margin: 0.1rem auto 0
}

.wxShare {
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  opacity: .9
}

.wxShare img {
  width: 50%;
  float: right;
  margin: 10px 10px 0 0
}

@font-face {
  font-family: 'wenxue';
  src: url('../assets/wenxue.eot');
  src: url('../assets/wenxue.eot'),
  url('../assets/wenxue.woff'),
  url('../assets/wenxue.ttf'),
  url('../assets/wenxue.svg');
}

.font-wenxue {
  font-family: 'wenxue';
}

.award,
.download {
  position: fixed;
  z-index: 1;
  right: 0;
  width: 20rem;
  height: 8rem;
}

.award {
  top: 55rem;
  background: url("../assets/main-index-award.png") no-repeat 0 / 100%;
}

.download {
  top: 65rem;
  background: url("../assets/main-index-download.png") no-repeat 0 / 100%;
}

html[sdk="1"] .download {
  display: none;
}

.toast {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
}

.toast__mask {
  width: 100%;
  height: 100%;
}

.toast__text {
  font-size: 3.6rem;
  color: #fff;
  margin: 0;
}

.toast-body {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  padding: 2.67rem;
  max-width: 50%;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 0.8rem;
}

.game-modal {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.game-modal-mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.53);
}

.game-modal-cont {
  position: absolute;
  left: calc(50% - 43rem);
  top: 12%;
  width: 86rem;
  height: 136rem;
  background: url("../assets/main-modal-bg.png") no-repeat 0 / 100%;
}

.game-modal-text {
  font-family: Helvetica;
  font-size: 4.4rem;
  color: #774f2f;
  text-align: center;
  margin: 4rem auto 0;
}

.game-modal-btn {
  box-sizing: border-box;
  display: block;
  width: 62.67rem;
  height: 18.67rem;
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
}

.game-modal-close {
  position: absolute;
  right: 0.5rem;
  top: 9.5rem;
  width: 10.6rem;
  height: 10.6rem;
  box-sizing: border-box;
  /* border: 1px solid red; */
  cursor: pointer;
}

.game-modal-remains {
  font-family: Helvetica;
  font-size: 2.93rem;
  color: #fffefe;
  white-space: nowrap;
  line-height: 7.46rem;
  text-align: center;
  width: 82.6rem;
  height: 7.46rem;
  background: url("../assets/main-modal-red-bg.png") no-repeat 0 / 100%;
  margin: 2.6rem auto 0;
}

#get-chances-modal .game-modal-title {
  width: 68.6rem;
  height: 18.8rem;
  background: url("../assets/main-modal-chances.png") no-repeat 0 / 100%;
  margin: 18.8rem auto 0;
}

.game-chances-list {}

.game-chances {
  display: flex;
  justify-content: flex-end;
  width: 77.33rem;
  height: 19.87rem;
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 100%;
}

.game-chances__go {
  width: 16.8rem;
  height: 9.33rem;
  background: url("../assets/main-modal-go-1.png") no-repeat 0 / 100%;
  margin: auto 3rem auto 0;
}

.game-chances__go--disabled {
  background-image: url("../assets/main-modal-go-2.png");
}

.game-chances--share {
  background-image: url("../assets/share_item.png");
  margin: 5rem auto 0;
}

.game-chances--visit {
  background-image: url("../assets/visit_item.png");
  margin: 2.2rem auto 0;
}

.game-chances--comment {
  background-image: url("../assets/download_item.png");
  margin: 2.2rem auto 0;
}

html[sdk="1"] .game-chances--comment {
  background-image: url("../assets/comment_item.png");
}

#history-modal .game-modal-cont {
  position: absolute;
  left: calc(50% - 42.8rem);
  color: #fe3e97;
  width: 85.6rem;
  height: 85.33rem;
  background: url("../assets/main-Popup-bg.png") no-repeat 0 / 100%;
}

.history-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5rem;
  width: 100%;
  height: 100%;
  display: none;
}

.history-list {
  /* border: 1px solid red; */
  position: relative;
  left: -0.16%;
  box-sizing: border-box;
  font-size: 3rem;
  width: 95%;
  height: 66%;
  border-radius: 0 0 12% 12%;
  overflow: auto;
  margin: 30% auto 0;
  display: none;
}

.history-list-header,
.history-list-row {
  display: flex;
  align-items: center;
  height: 9rem;
}

.history-list-header span:nth-child(1),
.history-list-row span:nth-child(1) {
  flex: 0 0 40%;
}

.history-list-header span:nth-child(2),
.history-list-row span:nth-child(2) {
  flex: 0 0 60%;
}

.history-list-header {
  font-weight: bold;
}

.history-list-row {
  color: #333;
}

.success-modal-title {
  width: 56.13rem;
  height: 23.33rem;
  background: url("../assets/main-modal-success.png") no-repeat 0 / 100%;
  margin: 23rem auto 0;
}

.success-modal-levels-box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.success-modal-levels {
  position: relative;
  left: -1rem;
  font-size: 20.5rem;
  font-weight: bold;
  color: #ec3e2b;
  width: auto;
  margin: 0 auto;
}

.success-modal-levels__stroke {
  -webkit-text-stroke: #fff 1.5rem;
}

.success-modal-levels__text {
  position: absolute;
  left: 0;
  top: 0;
}

.share-btn {
  position: absolute;
  bottom: 4.5rem;
  right: -14rem;
  width: 9.6rem;
  height: 9.6rem;
  background: url("../assets/main-modal-share.png") no-repeat 0 / 100%;
  cursor: pointer;
}

.code-btn {
  display: flex;
  justify-content: center;
  padding-left: 18rem;
  background-image: url("../assets/main-modal-code.png");
  margin-top: 3rem;
}

.code-cont {
  position: relative;
  font-size: 5rem;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  white-space: nowrap;
  line-height: 18rem;
}

.code-cont__stroke {
  -webkit-text-stroke: #2657b2 0.6rem;
}

.code-cont__text {
  position: absolute;
  left: 0;
  top: 0;
}

.exchange-btn {
  background-image: url("../assets/main-modal-redeem.png");
  margin-top: 3.2rem;
}

.invite-btn {
  background-image: url("../assets/main-modal-invite-b.png");
  margin-top: 3.2rem;
}

.again-btn {
  background-image: url("../assets/main-modal-again-b.png");
  margin-top: 3.2rem;
}

.fail-modal-title {
  width: 55.2rem;
  height: 20.4rem;
  background: url("../assets/main-modal-over.png") no-repeat 0 / 100%;
  margin: 27rem auto 0;
}

.share-list {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  opacity: 0;
  padding: 0 1.5rem 1.5rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: #292929;  
}

.share-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 100%;
  border-radius: 1rem;
  overflow: hidden;
  margin-top: 1.5rem;
}

.share-item--facebook {
  background-image: url("../assets/facebook.png");
}

.share-item--twitter {
  background-image: url("../assets/twitter.png");
}

.share-item--pinterest {
  background-image: url("../assets/pinterest.png");
}

.share-item--ins {
  background-image: url("../assets/ins.png");
  display: none;
}

/* html[sdk="0"] .share-item--ins {
  display: none;
} */

.exit {
  position: absolute;
  z-index: 1000;
  left: 5rem;
  top: 18rem;
  width: 9.15rem;
  height: 9.61rem;
  background: url("../assets/exit.png") 0 / 100% 100%;
  transform-origin: right top;
  transform: scale(1.2);
  display: none;
}

html[sdk="1"] .exit {
  display: block;
}

.__onemt__loader-box {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: inherit;
  display: none;
}

@keyframes __onemt__spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.__onemt__loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  margin: auto;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid #e8e8e8;
  border-top-color: rgba(0, 145, 255, 0.5);
  animation: __onemt__spin .65s infinite linear;
}