* {
  box-sizing: border-box;
  margin: 0; }

a {
  text-decoration: none; }

.main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto; }
  .main .code-panel canvas {
    width: 100%;
    height: 100%; }
  .main .code-panel img {
    width: 100%;
    height: 100%; }
  .main .section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-size: 100% 100% !important; }
    .main .section .important {
      color: #FFD919; }
    .main .section .bold {
      font-weight: bold; }
    .main .section .slide-icon {
      width: 1.01333rem;
      position: absolute;
      bottom: 0.56rem;
      right: 4.49333rem;
      z-index: 3;
      transform: translateY(1.44rem);
      animation-name: slide-ani1, slide-ani2;
      animation-duration: 0.6s, 1s;
      animation-timing-function: linear;
      animation-delay: 3s, 3.6s;
      animation-direction: normal, alternate-reverse;
      animation-iteration-count: 1, infinite;
      animation-fill-mode: forwards; }
  .main .section0 {
    background-image: url("/static/specials/images/2020AR_page0_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100% !important;
    display: flex;
    flex-flow: column;
    align-items: center; }
    .main .section0 .slogan {
      margin-top: calc(var(--vh, 1vh) * 15.8);
      height: calc(var(--vh, 1vh) * 25.5);
      width: 87.5vw;
      background-image: url("/static/specials/images/2020AR_page0_slogan.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100% !important; }
    .main .section0 .create {
      margin-top: calc(var(--vh, 1vh) * 28.1);
      width: 36.9vw;
      height: 5.1vh;
      background-image: url("/static/specials/images/2020AR_page0_btn1.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%; }
    .main .section0 .buy {
      margin-top: calc(var(--vh, 1vh) * 4.2);
      width: 3.69333rem;
      height: 0.90667rem;
      background-image: url("/static/specials/images/2020AR_page0_btn2.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%; }
  .main .section1 {
    height: 100vh;
    background-image: url("/static/specials/images/2020AR_page1_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column;
    align-items: center; }
    .main .section1 .slogan-text {
      margin-top: 31.5vh;
      font-size: 0.4rem;
      color: #FFFFFF;
      line-height: 0.64rem;
      text-align: center; }
    .main .section1 .slogan-text2 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 16.2vh;
      font-size: 0.4rem;
      color: #FFFFFF;
      line-height: 0.8rem;
      text-align: center;
      display: flex;
      flex-flow: column;
      align-items: center; }
      .main .section1 .slogan-text2 a {
        display: flex;
        padding-bottom: 0.05333rem;
        border-bottom: 0.02667rem solid #FFF112;
        font-weight: bold;
        color: #FFF112; }
  .main .section20 {
    height: 100vh;
    background-image: url("/static/specials/images/2020AR_page20_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%; }
    .main .section20 .txt {
      margin-top: 0.34667rem;
      font-size: 0.34667rem;
      line-height: 0.48rem;
      color: #ffffff;
      text-align: center; }
    .main .section20 .slogan-text {
      margin-top: 4.17333rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section20 .slogan-text2 {
      margin-top: 0.34667rem; }
    .main .section20 .slogan-text3 {
      margin-top: 0.34667rem; }
    .main .section20 .slogan-text4 {
      margin-top: 0.34667rem; }
  .main .section2 {
    height: 17.78667rem;
    background-image: url("/static/specials/images/2020AR_page2_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%; }
    .main .section2 .slogan-text {
      margin-top: 4.17333rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section2 .slogan-text2 {
      position: absolute;
      bottom: 15.6vh;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.34667rem;
      font-style: italic;
      color: #FFDE25;
      line-height: 0.48rem;
      text-align: center; }
  .main .section21 {
    height: 17.78667rem;
    background-image: url("/static/specials/images/2020AR_page21_bg.png");
    background-repeat: no-repeat;
    background-size: cover; }
    .main .section21 .slogan-text {
      margin-top: 4.17333rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section21 .slogan-text2 {
      margin-top: 0.61333rem;
      font-size: 0.32rem;
      font-style: italic;
      color: #FFD919;
      line-height: 0.48rem;
      text-align: center; }
  .main .section22 {
    height: 17.78667rem;
    background-image: url("/static/specials/images/2020AR_page22_bg.png");
    background-repeat: no-repeat;
    background-size: cover; }
    .main .section22 .slogan-text {
      margin-top: 4.17333rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section22 .slogan-text2 {
      margin-top: 0.61333rem;
      font-size: 0.32rem;
      font-style: italic;
      color: #FFD919;
      line-height: 0.48rem;
      text-align: center; }
  .main .section24 {
    height: 17.78667rem;
    background-image: url("/static/specials/images/2020AR_page24_bg.png");
    background-repeat: no-repeat;
    background-size: cover; }
    .main .section24 .slogan-text {
      margin-top: 4.17333rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section24 .slogan-text2 {
      margin-top: 0.61333rem;
      font-size: 0.32rem;
      font-style: italic;
      color: #FFD919;
      line-height: 0.48rem;
      text-align: center; }
  .main .section25 {
    height: 17.78667rem;
    background-image: url("/static/specials/images/2020AR_page25_bg.png");
    background-repeat: no-repeat;
    background-size: cover; }
    .main .section25 .slogan-text {
      margin-top: 4.17333rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section25 .slogan-text2 {
      margin-top: 0.81333rem;
      font-weight: bold;
      color: #FFDA1E;
      line-height: 0.8rem;
      text-align: center; }
    .main .section25 .slogan-text3 {
      margin-top: 0.82667rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
  .main .section26 {
    height: 17.78667rem;
    background-image: url("/static/specials/images/2020AR_page26_bg.png");
    background-repeat: no-repeat;
    background-size: cover; }
    .main .section26 .slogan-text {
      margin-top: 5.56rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section26 .slogan-text2 {
      margin-top: 0.46667rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section26 .slogan-text3 {
      margin-top: 0.68rem;
      font-size: 0.32rem;
      font-style: italic;
      color: #FFDA1E;
      line-height: 0.48rem;
      text-align: center; }
  .main .section27 {
    height: 100vh;
    background-image: url("/static/specials/images/2020AR_page20_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%; }
    .main .section27 .txt {
      margin-top: 0.34667rem;
      font-size: 0.34667rem;
      line-height: 0.48rem;
      color: #ffffff;
      text-align: center; }
    .main .section27 .slogan-text {
      margin-top: 4.17333rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section27 .slogan-text2 {
      margin-top: 0.34667rem; }
    .main .section27 .slogan-text3 {
      margin-top: 0.34667rem; }
    .main .section27 .slogan-text4 {
      margin-top: 0.34667rem; }
  .main .section3 {
    height: 17.78667rem;
    background-image: url("/static/specials/images/2020AR_page3_bg.png");
    background-repeat: no-repeat;
    background-size: cover; }
    .main .section3 .slogan-text {
      margin-top: 3.8rem;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
    .main .section3 .slogan-text2 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 18.4vh;
      font-size: 0.34667rem;
      color: #FFFFFF;
      line-height: 0.48rem;
      text-align: center; }
  .main .section4 {
    height: 17.78667rem; }
    .main .section4 .slide-icon {
      bottom: 0.34667rem; }
    .main .section4.type_0 {
      background-image: url("/static/specials/images/2020AR_page40_bg.png");
      background-repeat: no-repeat;
      background-size: cover; }
    .main .section4.type_1 {
      background-image: url("/static/specials/images/2020AR_page41_bg.png");
      background-repeat: no-repeat;
      background-size: cover; }
    .main .section4.type_2 {
      background-image: url("/static/specials/images/2020AR_page42_bg.png");
      background-repeat: no-repeat;
      background-size: cover; }
    .main .section4.type_3 {
      background-image: url("/static/specials/images/2020AR_page43_bg.png");
      background-repeat: no-repeat;
      background-size: cover; }
    .main .section4.type_4 {
      background-image: url("/static/specials/images/2020AR_page44_bg.png");
      background-repeat: no-repeat;
      background-size: cover; }
    .main .section4.type_5 {
      background-image: url("/static/specials/images/2020AR_page45_bg.png");
      background-repeat: no-repeat;
      background-size: cover; }
    .main .section4 .honour-title {
      margin-top: 20.6vh;
      font-size: 0.56rem;
      font-weight: 800;
      color: #FF6CFA;
      line-height: 0.56rem;
      text-align: center; }
    .main .section4 .user-name {
      margin-top: 0.49333rem;
      font-size: 0.4rem;
      font-weight: bold;
      color: #FFD919;
      line-height: 0.48rem;
      text-align: center; }
    .main .section4 .desc {
      margin-top: 0.61333rem;
      font-size: 0.32rem;
      color: #FFFFFF;
      line-height: 0.50667rem;
      text-align: center; }
    .main .section4 .speed {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(var(--vh, 1vh) * 9);
      font-size: 0.32rem;
      color: #FFFFFF;
      line-height: 0.4rem;
      text-align: center; }
  .main .section5 {
    height: calc(var(--vh, 1vh) * 100);
    background-image: url("/static/specials/images/2020AR_page5_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center; }
    .main .section5 .barrage-wrapper {
      position: absolute;
      left: 1.85333rem;
      top: calc(var(--vh, 1vh) * 21);
      width: 62.4vw;
      height: calc(var(--vh, 1vh) * 27);
      background-image: url("/static/specials/images/2020AR_page5_barrage.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%; }
      .main .section5 .barrage-wrapper .barrage-panel {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden; }
      .main .section5 .barrage-wrapper .input-wrapper {
        position: absolute;
        left: 0.01333rem;
        bottom: -0.97333rem;
        width: 6.21333rem;
        height: 0.82667rem;
        background: #9FA3E1;
        border-radius: 0.13333rem;
        padding: 0px 0.05333rem 0px 0.21333rem;
        display: flex;
        justify-content: flex-start; }
        .main .section5 .barrage-wrapper .input-wrapper input {
          flex: 1;
          background: transparent;
          border: none;
          user-select: none;
          -webkit-appearance: none;
          outline: none;
          font-size: 0.34667rem;
          color: #171E39;
          -webkit-user-select: text !important; }
        .main .section5 .barrage-wrapper .input-wrapper input::-webkit-input-placeholder {
          font-size: 0.34667rem;
          color: #171E39; }
        .main .section5 .barrage-wrapper .input-wrapper .send-btn {
          margin-top: 0.08rem;
          width: 1.70667rem;
          height: 0.69333rem;
          background-image: url("/static/specials/images/2020AR_page5_sub_btn.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-size: 100% 100%; }
      .main .section5 .barrage-wrapper .barrage_box div.p {
        background: transparent !important; }
        .main .section5 .barrage-wrapper .barrage_box div.p a {
          font-size: 0.32rem !important; }
    .main .section5 .tips {
      margin-top: calc(var(--vh, 1vh) * 57.8);
      font-size: 0.32rem;
      color: #E1E7FF;
      line-height: 0.8rem; }
    .main .section5 .rule {
      margin-top: 0.64rem;
      font-size: 0.32rem;
      font-weight: bold;
      border-bottom: 0.01333rem solid #8B95C1;
      color: #8B95C1;
      padding-bottom: 0.06667rem; }
    .main .section5 .create-btn {
      margin-top: 0.65333rem;
      width: 3.69333rem;
      height: 0.90667rem;
      background-image: url("/static/specials/images/2020AR_page5_create_btn.png");
      background-repeat: no-repeat;
      background-size: cover; }

.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #FFFFFF; }

.rule-modal .modal-wrapper {
  position: relative;
  width: 7.30667rem;
  height: 8rem;
  background-image: url("/static/specials/images/2020AR_rule_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column;
  align-items: center; }
  .rule-modal .modal-wrapper .title {
    margin-top: 0.53333rem;
    font-size: 0.4rem;
    font-weight: bold;
    color: #FFE50B;
    line-height: 0.8rem; }
  .rule-modal .modal-wrapper .desc {
    padding: 0 0.42667rem;
    margin-top: 0.34667rem;
    font-size: 0.32rem;
    color: #FAFAFA; }
    .rule-modal .modal-wrapper .desc .item:not(:last-child) {
      margin-bottom: 0.10667rem; }
    .rule-modal .modal-wrapper .desc a {
      color: #ffffff !important; }
  .rule-modal .modal-wrapper .close {
    margin-top: 0.4rem;
    font-size: 0.34667rem;
    font-weight: bold;
    color: #A4A4E9;
    padding-bottom: 0.05333rem;
    border-bottom: 0.01333rem solid #A4A4E9; }

.tickets-modal .modal-wrapper {
  position: relative;
  width: 6.74667rem;
  height: 9.25333rem;
  background-image: url("/static/specials/images/2020AR_ticket_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column;
  align-items: center; }
  .tickets-modal .modal-wrapper .tickets-group {
    width: 100%;
    padding: 0.53333rem 0.48rem 0 0.53333rem; }
    .tickets-modal .modal-wrapper .tickets-group .item {
      width: 5.73333rem;
      height: 2.12rem; }
      .tickets-modal .modal-wrapper .tickets-group .item:not(:last-child) {
        margin-bottom: 0.18667rem; }
      .tickets-modal .modal-wrapper .tickets-group .item.item1 {
        background-image: url("/static/specials/images/2020AR_ticket_20.png");
        background-repeat: no-repeat;
        background-size: cover; }
      .tickets-modal .modal-wrapper .tickets-group .item.item2 {
        background-image: url("/static/specials/images/2020AR_ticket_10.png");
        background-repeat: no-repeat;
        background-size: cover; }
      .tickets-modal .modal-wrapper .tickets-group .item.item3 {
        background-image: url("/static/specials/images/2020AR_ticket_5.png");
        background-repeat: no-repeat;
        background-size: cover; }
  .tickets-modal .modal-wrapper .use {
    margin-top: 0.54667rem;
    width: 3.29333rem;
    height: 0.81333rem;
    background-image: url("/static/specials/images/2020AR_ticket_use.png");
    background-repeat: no-repeat;
    background-size: cover; }
  .tickets-modal .modal-wrapper .close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.88rem;
    width: 0.98667rem;
    height: 0.98667rem;
    background-image: url("/static/specials/images/2020AR_ticket_close.png");
    background-repeat: no-repeat;
    background-size: cover; }

.share-modal {
  align-items: flex-start; }
  .share-modal .share-modal-wrapper {
    margin-top: 16.5vh;
    position: relative;
    width: 60vw;
    display: flex;
    flex-flow: column;
    align-items: center; }
    .share-modal .share-modal-wrapper #finally img {
      width: 100%; }
    .share-modal .share-modal-wrapper .save-tip {
      position: absolute;
      left: 50%;
      width: 100%;
      bottom: -0.61333rem;
      transform: translateX(-50%);
      text-align: center;
      font-size: 0.34667rem;
      color: #ffffff; }
      .share-modal .share-modal-wrapper .save-tip span {
        color: #FFD919; }
    .share-modal .share-modal-wrapper .close {
      position: absolute;
      width: 0.98667rem;
      height: 0.98667rem;
      top: -1.30667rem;
      right: 0;
      background-image: url("/static/specials/images/2020AR_ticket_close.png");
      background-repeat: no-repeat;
      background-size: cover; }

@keyframes slide-ani1 {
  from {
    transform: translateY(1.44rem); }
  to {
    transform: translateY(0); } }

@keyframes slide-ani2 {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-0.13333rem); } }