@charset "UTF-8";
.banner .more, .game-block .reload, .game-block .games .game button, .top-float .pop-button {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -o-box-pack: center;
  box-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -o-box-align: center;
  box-align: center;
  align-items: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-justify-content: center; }

.game-block .reload, .game-block .games, .top-float {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }

.top-float .pop-button {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

html {
  font-size: 62.5%; }

@media only screen and (min-width: 320px) {
  html {
    font-size: 75% !important;
    /* 12÷16=73.4% */ } }
@media only screen and (min-width: 360px) {
  html {
    font-size: 84.375% !important;
    /* 12÷16=73.4% */ } }
@media only screen and (min-width: 375px) {
  html {
    font-size: 87.890625% !important;
    /* 14.0625÷16=73.2% */ } }
@media only screen and (min-width: 410px) {
  html {
    font-size: 97.03% !important;
    /* 15.525÷16=94% */ } }
@media only screen and (min-width: 480px) {
  html {
    font-size: 112.5% !important;
    /* 18÷16=94% */ } }
@media only screen and (min-width: 560px) {
  html {
    font-size: 131.25% !important;
    /* 21÷16=109% */ } }
@media only screen and (min-width: 640px) {
  html {
    font-size: 150% !important;
    /* 24÷16=125% */ } }
@media only screen and (min-width: 720px) {
  html {
    font-size: 168.75% !important;
    /* 27÷16=146.43% */ } }
@media only screen and (min-width: 750px) {
  html {
    font-size: 131.25% !important;
    /* 28.125÷16=146.43% */ } }
@media only screen and (min-width: 800px) {
  html {
    font-size: 131.25% !important;
    /* 30÷16=187.5% */ } }
@media only screen and (min-width: 960px) {
  html {
    font-size: 131.25% !important;
    /* 36÷16=225% */ } }
@media only screen and (min-width: 1080px) {
  html {
    font-size: 131.25% !important;
    /* 40.5÷16=253.125% */ } }
@media only screen and (orientation: landscape) {
  html {
    font-size: 87.890625% !important;
    /* 14.0625÷16=73.2% */ } }
* {
  padding: 0;
  margin: 0;
  outline: none;
  border: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-repeat: no-repeat; }

.mask {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.75); }

@keyframes flash {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(0.7111111111rem);
    -moz-transform: translateY(0.7111111111rem);
    -ms-transform: translateY(0.7111111111rem);
    -o-transform: translateY(0.7111111111rem);
    transform: translateY(0.7111111111rem); }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
body, html {
  height: 100vh;
  width: 100vw;
  background-color: #000;
  position: relative;
  overflow-y: scroll; }

.banner {
  height: auto;
  width: 100%;
  position: relative; }
  .banner .more {
    height: auto;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    position: absolute;
    bottom: 0.7111111111rem;
    z-index: 10;
    animation: flash infinite 2.3s; }
    .banner .more span {
      color: #333;
      font-size: 0.8533333333rem;
      font-weight: normal; }
    .banner .more .arc {
      height: auto;
      width: 0.7466666667rem;
      margin-left: 0.3555555556rem;
      position: relative; }
  .banner .banner-bg {
    height: auto;
    width: 100%;
    z-index: 0;
    position: relative; }

.game-block {
  height: auto;
  width: 100%;
  position: relative; }
  .game-block .reload {
    height: auto;
    width: 100%;
    position: absolute;
    bottom: 7.1111111111rem;
    left: 50%; }
    .game-block .reload .icon {
      height: 15px;
      width: 15px;
      background-image: url("../img/copy/reload.png");
      background-size: 15px;
      margin-right: 5px;
      transition: all 0.3s; }
    .game-block .reload span {
      color: #00c657;
      font-size: 0.8533333333rem;
      font-weight: normal; }
  .game-block .games {
    height: auto;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    position: absolute;
    top: 6.0444444444rem;
    left: 50%;
    flex-wrap: wrap;
    padding: 0.8533333333rem;
    justify-content: space-between; }
    .game-block .games .game {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -o-box;
      display: box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      align-items: center;
      margin: 0.5333333333rem; }
      .game-block .games .game button {
        height: 2.1333333333rem;
        width: 4.8355555556rem;
        color: #fff;
        font-size: 0.8533333333rem;
        font-weight: normal;
        background-color: #00c657;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -o-box;
        display: box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        margin: 0.74667rem auto 0; }
      .game-block .games .game .title {
        color: #fff;
        font-size: 0.9244444444rem;
        font-weight: normal;
        margin-top: 5px; }
      .game-block .games .game .icon {
        height: 6.4rem;
        width: 6.4rem;
        border-radius: 1.1377777778rem; }
  .game-block .bg {
    height: auto;
    width: 100%;
    position: relative;
    z-index: 0;
    display: block; }

.top-float {
  height: 3.2711111111rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
  padding: 0.3555555556rem 0.7111111111rem;
  z-index: 50;
  background-color: white; }
  .top-float .pop-button {
    height: 2.1333333333rem;
    width: 5.2622222222rem;
    background-color: #00c657;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    color: #fff;
    font-size: 0.8533333333rem;
    font-weight: normal;
    position: absolute;
    top: 50%;
    right: 0.7111111111rem; }
  .top-float .logo {
    height: 2.56rem;
    width: auto; }

/*# sourceMappingURL=copy.css.map */