@font-face {
  font-family: 'SansGBW3573194';
  src: url("../font/SansGBW3.eot");
  src: url("../font/SansGBW3.eot?#iefix") format("embedded-opentype"), url("../font/SansGBW3.woff") format("woff"), url("../font/SansGBW3.ttf") format("truetype"), url("../font/SansGBW3.svg#SansGBW3") format("svg");
  font-weight: normal;
  font-style: normal; }
* {
  padding: 0;
  margin: 0; }

p {
  font-family: 'SansGBW3573194'; }

a, a:hover {
  text-decoration: none; }

.page {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  display: none; }
  .page .logo {
    position: absolute;
    top: 5%;
    left: 50%;
    height: 8%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); }
  .page .header, .page .footer {
    position: absolute;
    width: 100%;
    left: 0; }
  .page .header {
    top: 0; }
  .page .footer {
    bottom: 0; }
  .page .close {
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: block;
    border-radius: 50%;
    text-align: center;
    line-height: 2rem;
    border: 1px solid #fff;
    color: #fff;
    opacity: .5;
    font-size: 1.8rem;
    z-index: 999; }
  .page .btn-box {
    position: absolute;
    width: 7rem;
    text-align: center;
    height: 7rem;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); }
    .page .btn-box .btn {
      width: 100%;
      height: 100%;
      background: url("../images/btns.png") repeat;
      background-size: 100% 300%;
      display: inline-block;
      border-radius: 50%;
      transform: translateY(20%);
      -webkit-transform: translateY(20%); }
      .page .btn-box .btn.btn-achieve {
        background-position: center -0%; }
      .page .btn-box .btn.btn-confirm {
        background-position: center -100%; }
      .page .btn-box .btn.btn-again {
        background-position: center -200%; }

.page-index {
  display: block;
  background-color: #ffd602; }
  .page-index .top, .page-index .bottom {
    position: absolute;
    width: 100%;
    left: 0; }
  .page-index .top {
    height: 50%;
    top: 0;
    background: url("../images/index-top-bg.jpg") no-repeat top center;
    background-size: cover; }
    .page-index .top .index-title {
      height: 35%;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%); }
  .page-index .bottom {
    height: 45%;
    bottom: 0;
    background-color: #ff502b; }
    .page-index .bottom .monkey-bag {
      width: 100%;
      transform: translateY(-99%);
      -webkit-transform: translateY(-99%); }
    .page-index .bottom .marquee-box {
      position: absolute;
      top: -37%;
      width: 50%;
      background: url("../images/border-oringe.png") no-repeat top center;
      background-size: contain;
      height: 3rem;
      line-height: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      padding: 0 1rem;
      color: #ffff99;
      font-size: 1rem;
      white-space: nowrap;
      overflow: hidden; }
  .page-index .rotary-box {
    position: absolute;
    top: -17%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); }
    .page-index .rotary-box .rotary {
      background: url("../images/rotary-bg.png") no-repeat center center;
      background-size: contain;
      width: 21rem;
      height: 21rem;
      margin: 0 auto;
      text-align: center;
      line-height: 26rem; }
    .page-index .rotary-box .lottery-star {
      line-height: 6rem;
      text-align: center;
      width: 6rem;
      height: 6rem;
      display: inline-block;
      position: absolute;
      margin-top: -13.5rem;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%); }
      .page-index .rotary-box .lottery-star img {
        width: 6rem;
        margin-top: -.8rem; }
  .page-index .rule-btn {
    color: #ffff99;
    border-bottom: 1px solid #ffff99;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    font-size: 1.1rem;
    padding-bottom: .2rem;
    letter-spacing: 1px; }

.page-rule {
  background-color: #f8463a; }
  .page-rule .title {
    text-align: center;
    position: absolute;
    width: 100%;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); }
    .page-rule .title p {
      border-top: 1px solid #fff25c; }
      .page-rule .title p .title-bg {
        background-color: #fff25c;
        display: inline-block;
        width: 9rem;
        height: 2.8rem;
        padding-top: 0.6rem;
        box-sizing: border-box;
        border-radius: 5px;
        margin-top: -1.4rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%); }
        .page-rule .title p .title-bg img {
          height: 1.6rem; }
      .page-rule .title p:before, .page-rule .title p:after {
        content: '';
        border: .4rem #fff25c solid;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        margin-top: -.4rem; }
      .page-rule .title p:before {
        left: 0; }
      .page-rule .title p:after {
        right: 0; }
  .page-rule .content {
    background: url("../images/bg-activity.png") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 55%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    padding: 2rem 1.5rem;
    font-size: .8rem;
    color: #ff4f2a;
    line-height: 1.8;
    font-weight: bold;
    box-sizing: border-box;
    letter-spacing: 1px;
    z-index: 9;
    border-radius: 10px; }

.page-prize {
  background-color: #e13d24; }
  .page-prize .logo {
    height: 1.8rem; }
  .page-prize .content {
    display: none;
    position: absolute;
    width: 100%;
    height: 45%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 9;
    background-color: #fee96c; }
    .page-prize .content img {
      max-width: 100%; }
    .page-prize .content .tip-top-bg, .page-prize .content .tip-bottom-bg {
      position: absolute;
      left: 0;
      z-index: 1;
      width: 100%; }
    .page-prize .content img.tip-top-bg {
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      top: -33%; }
    .page-prize .content img.tip-bottom-bg {
      bottom: -30%; }
    .page-prize .content .tip-box {
      position: absolute;
      width: 18rem;
      height: 14.54rem;
      z-index: 9;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      background: url("../images/tip-top-gift-bg.png") no-repeat center center;
      background-size: contain;
      top: -5rem;
      line-height: 1.3; }
      .page-prize .content .tip-box:before, .page-prize .content .tip-box:after, .page-prize .content .tip-box .desc:after {
        position: absolute;
        content: '';
        padding: .6rem 1.2rem;
        background: url("../images/gifts.png") repeat;
        background-size: 100% 300%; }
      .page-prize .content .tip-box:before {
        background-position: center 0;
        left: -20%;
        top: 60%; }
      .page-prize .content .tip-box:after {
        background-position: center -100%;
        right: -10%;
        top: 20%; }
      .page-prize .content .tip-box .desc:after {
        background-position: center -200%;
        right: -70%;
        top: 50%; }
      .page-prize .content .tip-box .desc {
        font-size: 1.4rem;
        color: #ffd332;
        text-align: center;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        font-weight: bold;
        letter-spacing: 1px;
        white-space: nowrap; }
    .page-prize .content .input-box {
      position: absolute;
      top: 50%;
      width: 100%;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      z-index: 9;
      text-align: center; }
      .page-prize .content .input-box .input {
        height: 3rem;
        text-align: center;
        border: none;
        border-radius: 1.5rem;
        width: 70%;
        margin: 0 0 2%;
        font-size: 1.2rem;
        color: #fff;
        background-color: #fec737; }
        .page-prize .content .input-box .input:focus {
          outline: none; }
        .page-prize .content .input-box .input::-webkit-input-placeholder {
          color: #fff; }
  .page-prize .prize-1 .monkey-send-gift, .page-prize .prize-2 .monkey-send-gift, .page-prize .prize-3 .monkey-send-gift {
    position: absolute; }
  .page-prize .prize-1 .gift-img, .page-prize .prize-2 .gift-img, .page-prize .prize-3 .gift-img {
    position: absolute; }
  .page-prize .prize-1 .monkey-send-gift {
    width: 7rem;
    top: -1.5rem;
    left: 2rem; }
  .page-prize .prize-1 .gift-img {
    width: 6rem;
    left: 6.5rem;
    top: -.6rem; }
  .page-prize .prize-2 {
    height: 40%; }
    .page-prize .prize-2 .tip-box {
      top: -3rem; }
    .page-prize .prize-2 .input-box {
      top: 80%; }
    .page-prize .prize-2 .monkey-send-gift {
      width: 9rem;
      top: -3.5rem;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%); }
    .page-prize .prize-2 .gift-img {
      width: 12rem;
      left: 50%;
      top: 2rem;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%); }
  .page-prize .prize-3 .monkey-send-gift {
    width: 7rem;
    top: -1.5rem;
    left: 3rem; }
  .page-prize .prize-3 .gift-img {
    width: 3.5rem;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); }
  .page-prize .bottom-desc {
    color: #fff;
    position: absolute;
    bottom: 1rem;
    font-size: .8rem;
    width: 100%;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 1px;
    z-index: 9; }

.page-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 99; }
  .page-alert .alert {
    display: none;
    box-sizing: border-box;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background: #ff4f2a;
    border-radius: 15px;
    width: 80%;
    padding: 1rem 2rem 5rem; }
    .page-alert .alert:before, .page-alert .alert:after {
      content: '';
      position: absolute;
      bottom: 0;
      background: url("../images/coins.png") no-repeat;
      background-size: contain;
      width: 7rem;
      height: 3.13rem;
      border-bottom-left-radius: 10px; }
    .page-alert .alert:before {
      left: 0;
      background-position: bottom left; }
    .page-alert .alert:after {
      right: 0;
      background-position: bottom right;
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg); }
  .page-alert .alert-1 img {
    height: 100%; }
  .page-alert .alert-1 .monky-qr-code-box {
    height: 10rem;
    padding: 1rem 0 2rem 3rem; }
  .page-alert .alert-1 .font-box {
    height: 7rem; }
  .page-alert .alert-2 .monky-again-box, .page-alert .alert-3 .monky-again-box, .page-alert .alert-4 .monky-again-box, .page-alert .alert-5 .monky-again-box {
    height: 10rem;
    transform: translateY(-70%);
    -webkit-transform: translateY(-70%); }
    .page-alert .alert-2 .monky-again-box img, .page-alert .alert-3 .monky-again-box img, .page-alert .alert-4 .monky-again-box img, .page-alert .alert-5 .monky-again-box img {
      height: 100%;
      width: auto; }
  .page-alert .alert-2 .font-box, .page-alert .alert-3 .font-box, .page-alert .alert-4 .font-box, .page-alert .alert-5 .font-box {
    font-size: 1.6rem;
    font-weight: bold;
    color: #fdd832;
    margin-top: -5rem;
    line-height: 1.5;
    letter-spacing: 1px;
    white-space: nowrap; }
  .page-alert .alert-2 .btn-box, .page-alert .alert-3 .btn-box, .page-alert .alert-4 .btn-box, .page-alert .alert-5 .btn-box {
    position: relative;
    margin-bottom: -2rem;
    margin-top: 1rem; }
  .page-alert .alert-3 .monky-again-box .arrow, .page-alert .alert-3 .monky-again-box .share-font, .page-alert .alert-4 .monky-again-box .arrow, .page-alert .alert-4 .monky-again-box .share-font, .page-alert .alert-5 .monky-again-box .arrow, .page-alert .alert-5 .monky-again-box .share-font {
    position: absolute;
    height: auto; }
  .page-alert .alert-3 .monky-again-box .arrow, .page-alert .alert-4 .monky-again-box .arrow, .page-alert .alert-5 .monky-again-box .arrow {
    top: -5rem;
    width: 4.5rem;
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    right: -1rem; }
  .page-alert .alert-3 .monky-again-box .share-font, .page-alert .alert-4 .monky-again-box .share-font, .page-alert .alert-5 .monky-again-box .share-font {
    top: -2rem;
    right: -4rem;
    width: 3rem; }
  .page-alert .alert-3 .btn-box, .page-alert .alert-4 .btn-box, .page-alert .alert-5 .btn-box {
    margin-top: 0; }
  .page-alert .alert-5 img.font-dashengshuo {
    height: 6rem;
    width: auto;
    margin: 1rem 0 0; }

.alert-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 60%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: .9rem;
  padding: .5rem 2rem;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  line-height: 1.3;
  letter-spacing: 1px;
  z-index: 999; }

.change-style .content {
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  bottom: 0;
  padding-top: 2rem; }
  .change-style .content .input-box {
    position: relative;
    top: 60%; }
.change-style img.tip-bottom-bg, .change-style img.tip-top-bg, .change-style .logo, .change-style .tip-box, .change-style .header, .change-style .footer {
  display: none !important; }

@media screen and (min-width: 1000px) {
  html {
    font-size: 45px; } }
@media screen and (max-width: 768px) {
  html {
    font-size: 22px; } }
@media screen and (max-width: 414px) {
  html {
    font-size: 16px; } }
@media screen and (max-width: 375px) {
  html {
    font-size: 13px; } }
@media screen and (max-width: 320px) {
  html {
    font-size: 12px; }

  .page .btn-box {
    width: 6rem;
    height: 6rem; }

  .page-alert .alert-2 .font-box, .page-alert .alert-3 .font-box {
    font-size: 1.5rem; }
  .page-alert .alert-2 .monky-again-box, .page-alert .alert-3 .monky-again-box {
    height: 8.5rem; }
  .page-alert .alert-5 .monky-again-box .arrow {
    top: -2rem;
    width: 4rem; } }
@media screen and (max-height: 500px) {
  .page .btn-box {
    width: 5rem;
    height: 5rem; } }
@media screen and (min-aspect-ratio: 375 / 627) {
  .page-index .bottom .marquee-box {
    top: -40%; } }
@media screen and (min-aspect-ratio: 320 / 570) and (max-width: 320px) {
  .page-rule .content {
    padding: 1rem 1rem;
    width: 90%; } }
@media screen and (min-aspect-ratio: 320 / 500) {
  .page-index .top .index-title {
    height: 30%;
    top: 30%; }

  .page-index .bottom {
    height: 45%; }

  .page-index .rotary-box {
    top: -22%; }

  .page-index .rotary-box .rotary {
    width: 18rem;
    height: 18rem;
    line-height: 23rem; }

  .page-index .rotary-box .lottery-star {
    line-height: 5.5rem;
    width: 5.5rem;
    height: 5.5rem;
    margin-top: -12rem; }
    .page-index .rotary-box .lottery-star img {
      width: 5.5rem;
      margin-top: -.7rem; }

  .page-index .bottom .marquee-box {
    top: -45%; }

  .page-index .rule-btn {
    bottom: 0.1rem; }

  .page-rule .title {
    top: -4rem; }

  .page .btn-box .btn.btn-achieve {
    transform: translateY(0);
    -webkit-transform: translateY(0); }

  .page-prize .content .tip-box {
    width: 15rem;
    height: 11.54rem; }

  .page-prize .content .input-box .input {
    width: 60%;
    width: 60%;
    height: 2.5rem;
    line-height: 2.5rem; }

  .page-prize .content .tip-box .desc {
    top: 51%;
    font-size: 1.2rem; }

  .page-prize .logo {
    top: 3%; }
  .page-prize .prize-1 .monkey-send-gift {
    width: 6rem; }
  .page-prize .prize-1 .gift-img {
    width: 5rem; }
  .page-prize .prize-2 .monkey-send-gift {
    width: 6rem;
    top: -3rem; }
  .page-prize .prize-2 .gift-img {
    width: 9rem;
    top: 1rem; }
  .page-prize .prize-3 .monkey-send-gift {
    width: 6rem;
    top: -2rem; }
  .page-prize .prize-3 .gift-img {
    width: 3rem; } }
@media screen and (min-aspect-ratio: 768 / 1024) {
  .page-index .bottom .marquee-box {
    top: -50%;
    line-height: 3rem; } }