.mainscene {
  width: 750px;
  height: calc(3015px - 781px);
  opacity: 1;
  position: absolute;
  transform-origin: 0px 0px 0px;

  .mainbg {
    width: 750px;
    height: 100%;
    opacity: 1;
    position: absolute;
    transform-origin: 0px 0px 0px;
  }
  .ruihualoga {
    width: 139px;
    height: 41px;
    top: 30px;
    left: 490px;
    position: absolute;
  }

  .rulebtn {
    width: 96px;
    height: 50px;
    opacity: 1;
    left: 654px;
    top: 23px;
    position: absolute;
    transform-origin: 0px 0px 0px;
  }

  .recordbtn {
    width: 96px;
    height: 50px;
    opacity: 1;
    left: 654px;
    top: 84px;
    position: absolute;
    transform-origin: 0px 0px 0px;
  }

  .usermes {
    width: 354px;
    height: 110px;
    opacity: 1;
    left: 17px;
    top: 26px;
    position: absolute;
    transform-origin: 0px 0px 0px;

    .usermesbg {
      width: 328px;
      height: 98px;
      opacity: 0.43137254901960786;
      left: 26px;
      top: 7px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .usermesiconbg {
      width: 110px;
      height: 110px;
      opacity: 1;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .usermesicon {
      //写了圆形不知道能不能用
      width: 102px;
      height: 102px;
      border-radius: 51px;
      opacity: 1;
      left: 4px;
      top: 4px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .usermesname {
      width: 200px;
      height: 30px;
      opacity: 1;
      left: 126px;
      top: 20px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 26px;
      color: rgba(255, 255, 255, 1);
      overflow: hidden;
    }

    .usermesenerge {
      width: 230px;
      height: 25px;
      opacity: 1;
      left: 126px;
      top: 60px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 26px;
      color: rgba(255, 255, 255, 1);
    }
  }

  .laststep {
    width: 352px;
    height: 287px;
    opacity: 1;
    left: 201px;
    top: 157px;
    position: absolute;
    transform-origin: 0px 0px 0px;
    pointer-events: none;

    .laststepnum {
      width: 186px;
      height: 51px;
      opacity: 1;
      left: 80px;
      top: 120px;
      text-align: center;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 36.52035px;
      color: rgba(255, 255, 255, 1);
    }
    .mask-box {
      width: 352px;
      height: 178px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      overflow: hidden;
      // background-color: red;
      &-wrap {
        width: 352px;
        height: 178px;
        overflow: hidden;
        border-radius: 176px 89px 0 0;
        transform-origin: center 178px;
        transform: rotate(-40deg);
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

    .laststepbar {
      width: 352px;
      height: 178px;
      opacity: 1;
      position: absolute;
      transform-origin: 0px 0px 0px;
      overflow: hidden;
      // object-fit: contain;
    }

    .laststeplab {
      width: 144px;
      height: 24px;
      opacity: 1;
      left: 107px;
      top: 79px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }
    .laststepbtnGray {
      width: 301px;
      height: 104px;
      opacity: 1;
      left: 29px;
      top: 183px;
      position: absolute;
      // transform-origin: 0px 0px 0px;
      // transform-origin:center 50%;
      // animation: laststepbtnAni 1.5s infinite;
      // pointer-events: auto;
    }
    .laststepbtn {
      width: 301px;
      height: 104px;
      opacity: 1;
      left: 29px;
      top: 183px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      animation: laststepbtnAni 3s infinite;
      pointer-events: auto;
    }

    @keyframes laststepbtnAni {
      0% {
        transform: scale(1);
      }
      5% {
        transform: scale(1.2);
      }
      11% {
        transform: scale(1);
      }
      15% {
        transform: scale(1.06);
      }
      19% {
        transform: scale(1);
      }
      22% {
        transform: scale(1.02);
      }
      100% {
        transform: scale(1);
      }
    }
    .laststeptip {
      width: 166px;
      height: 26px;
      opacity: 1;
      // max-width: 154px;
      // max-height: 26px;
      left: 98px;
      top: 276px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      // background-image: url(//yun.duiba.com.cn/spark/assets/893b85098a70a790c4b95ce4e6b36817f1c1d1ea.png);
      // background-size: cover;
      // transform: scale(0.5);
      // background-repeat: no-repeat;
      // object-fit: cover;
    }
  }

  .step {
    width: 719px;
    height: 109px;
    opacity: 1;
    left: 16px;
    top: 530px;
    position: absolute;
    transform-origin: 0px 0px 0px;

    .stepbg {
      width: 719px;
      height: 109px;
      opacity: 1;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .steplibg {
      width: 63px;
      height: 53px;
      opacity: 1;
      left: 651px;
      top: 2px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .stepnum {
      width: 153px;
      height: 25px;
      opacity: 0.8;
      left: 30px;
      top: 40px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .stepnumlab {
      width: 120px;
      height: 20px;
      opacity: 1;
      left: 218px;
      top: 36px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 26px;
      color: rgba(41, 41, 41, 1);
    }

    .steprank {
      width: 104px;
      height: 25px;
      opacity: 0.8;
      left: 427px;
      top: 40px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .stepranknum {
      width: 115px;
      height: 20px;
      opacity: 1;
      left: 558px;
      top: 36px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 26px;
      color: rgba(41, 41, 41, 1);
    }
  }

  .people {
    width: 170px;
    height: 195px;
    opacity: 1;
    left: 30px;
    top: 313px;
    position: absolute;
    transform-origin: 0px 0px 0px;

    .peoplebg {
      width: 200px;
      height: 80px;
      opacity: 1;
      left: -10px;
      top: -5px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      // background: url("//yun.duiba.com.cn/spark/assets/688770dd832712752b21df03bc9a88a7e6fcb337.png") center center no-repeat;
      // background-size: cover;
      // padding: 10px;
      animation: peoimgAni 8s infinite;
    }

    .peoplelab {
      width: 170px;
      height: 44px;
      opacity: 1;
      left: 13px;
      top: 2px;
      position: absolute;
      // transform-origin: 0px 0px 0px;
      font-size: 20px;
      color: rgba(255, 255, 255, 1);
      transform-origin: center 50%;
      animation: peoimgAni 8s infinite;
    }

    .peopleimg {
      width: 54px;
      height: 108px;
      opacity: 1;
      left: 69px;
      top: 87px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    @keyframes peoimgAni {
      0% {
        transform: scale(0);
      }
      1% {
        transform: scale(0);
      }
      3.5% {
        transform: scale(1.195);
      }
      6% {
        transform: scale(0.965);
      }
      7.875% {
        transform: scale(1);
      }
      11% {
        transform: scale(1.006);
      }
      13.5% {
        transform: scale(1);
      }
      62.5% {
        transform: scale(1);
      }
      65% {
        transform: scale(1.006);
      }
      68.125% {
        transform: scale(1);
      }
      70% {
        transform: scale(0.965);
      }
      72.5% {
        transform: scale(1.195);
      }
      75% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }
  }

  .poptask {
    width: 571px;
    height: 297px;
    opacity: 1;
    left: 97px;
    top: 112px;
    position: absolute;
    transform-origin: 0px 0px 0px;

    .poptaskimg3 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 370px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      animation: poptasksmall 1s infinite;
    }

    .poptasklab3 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 370px;
      // top: 35px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
      transform-origin: center 50%;
      text-align: center;
      line-height: 112px;
      animation: poptasksmall 1s infinite;
    }

    .poptaskimg5 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 459px;
      top: 185px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      animation: poptasksmall 1s infinite;
    }

    .poptasklab5 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 459px;
      top: 185px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
      transform-origin: center 50%;
      text-align: center;
      line-height: 112px;
      animation: poptasksmall 1s infinite;
    }

    .poptaskimg4 {
      width: 98px;
      height: 98px;
      opacity: 1;
      left: 462px;
      top: 87px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      animation: poptaskbig 1s infinite;
    }

    .poptasklab4 {
      width: 98px;
      height: 98px;
      opacity: 1;
      left: 462px;
      top: 87px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
      transform-origin: center 50%;
      text-align: center;
      line-height: 98px;
      animation: poptaskbig 1s infinite;
    }

    .poptaskimg2 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 44px;
      top: 34px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      animation: poptasksmall 1s infinite;
    }

    .poptasklab2 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 44px;
      top: 34px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
      transform-origin: center 50%;
      text-align: center;
      line-height: 112px;
      animation: poptasksmall 1s infinite;
    }

    .poptaskimg1 {
      width: 99px;
      height: 99px;
      opacity: 1;
      top: 111px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      animation: poptaskbig 1s infinite;
    }

    .poptasklab1 {
      width: 99px;
      height: 99px;
      opacity: 1;
      top: 111px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
      transform-origin: center 50%;
      text-align: center;
      line-height: 99px;
      animation: poptaskbig 1s infinite;
    }
    @keyframes poptaskbig {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes poptasksmall {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(0.85);
      }
      100% {
        transform: scale(1);
      }
    }
  }

  .task {
    width: 742px;
    height: 507px;
    opacity: 1;
    left: 5px;
    top: 656px;
    position: absolute;
    transform-origin: 0px 0px 0px;
    .tasks {
      top: 130px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
    }
    .taskbg {
      width: 742px;
      height: 478px;
      opacity: 1;
      top: 29px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .taskprize3 {
      width: 78px;
      height: 40px;
      opacity: 1;
      left: 251px;
      top: 158px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .taskprize2 {
      width: 78px;
      height: 40px;
      opacity: 1;
      left: 380px;
      top: 270px;
      position: absolute;
      transform-origin: 0px 0px 0px;

      .taskprize2num {
        width: 40px;
        height: 19px;
        opacity: 1;
        left: 38px;
        top: 10px;
        position: absolute;
        transform-origin: 0px 0px 0px;
        font-size: 24px;
        color: rgba(241, 147, 29, 1);
      }

      .taskprize2img {
        width: 34px;
        height: 40px;
        opacity: 1;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }
    }

    .taskprize1 {
      width: 78px;
      height: 40px;
      opacity: 1;
      left: 304px;
      top: 384px;
      position: absolute;
      transform-origin: 0px 0px 0px;

      .taskprize1num {
        width: 40px;
        height: 19px;
        opacity: 1;
        left: 38px;
        top: 10px;
        position: absolute;
        transform-origin: 0px 0px 0px;
        font-size: 24px;
        color: rgba(241, 147, 29, 1);
      }

      .taskprize1img {
        width: 34px;
        height: 40px;
        opacity: 1;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }
    }

    .task3 {
      // margin-top: 60px;
      width: 644px;
      height: 90px;
      // opacity: 1;
      // left: 47px;
      // top: 133px;
      margin: 15px auto;
      position: relative;
      transform-origin: 0px 0px 0px;
      .float {
        float: left;
      }
      .taskprize3img {
        margin-top: 20px;
        margin-left: 30px;
        width: 34px;
        height: 40px;
        opacity: 1;
        // position: absolute;
        transform-origin: 0px 0px 0px;
      }
      .taskprize3num {
        margin-top: 25px;
        margin-left: 40px;
        width: 40px;
        height: 19px;
        opacity: 1;
        // left: 38px;
        // top: 10px;
        // position: absolute;
        // transform-origin: 0px 0px 0px;
        font-size: 24px;
        color: rgba(241, 147, 29, 1);
      }

      .task3lab {
        margin-top: 20px;
        margin-left: 91px;
        margin-top: 20px;
        height: 25px;
        // opacity: 1;
        // left: 97px;
        // top: 25px;
        // position: absolute;
        font-size: 26px;
        color: rgba(41, 41, 41, 1);
      }

      .task3gobtn {
        width: 141px;
        height: 51px;
        opacity: 1;
        left: 503px;
        top: 16px;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }

      .task3finbtn {
        width: 141px;
        height: 51px;
        opacity: 0.4;
        left: 503px;
        top: 16px;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }

      .task3icon {
        width: 79px;
        height: 79px;
        opacity: 1;
        position: absolute;
        transform-origin: 0px 0px 0px;
        // background-color: red;
      }
    }

    .task2 {
      width: 637px;
      height: 79px;
      opacity: 1;
      left: 47px;
      top: 248px;
      position: absolute;
      transform-origin: 0px 0px 0px;

      .task2lab {
        width: auto;
        height: 28px;
        opacity: 1;
        left: 91px;
        top: 20px;
        position: absolute;
        transform-origin: 0px 0px 0px;
        font-size: 26px;
        color: rgba(41, 41, 41, 1);
      }

      .task2gobtn {
        width: 141px;
        height: 51px;
        opacity: 1;
        left: 496px;
        top: 14px;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }

      .task2finbtn {
        width: 141px;
        height: 51px;
        opacity: 0.4;
        left: 496px;
        top: 14px;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }

      .task2icon {
        width: 79px;
        height: 79px;
        opacity: 1;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }
    }

    .task1 {
      width: 637px;
      height: 80px;
      opacity: 1;
      left: 47px;
      top: 361px;
      position: absolute;
      transform-origin: 0px 0px 0px;

      .task1lab {
        width: auto;
        height: 25px;
        opacity: 1;
        left: 90px;
        top: 25px;
        position: absolute;
        transform-origin: 0px 0px 0px;
        font-size: 26px;
        color: rgba(41, 41, 41, 1);
      }

      .task1gobtn {
        width: 141px;
        height: 51px;
        opacity: 1;
        left: 496px;
        top: 15px;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }

      .task1finbtn {
        width: 141px;
        height: 51px;
        opacity: 0.4;
        left: 496px;
        top: 15px;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }

      .task1icon {
        width: 79px;
        height: 80px;
        opacity: 1;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }
    }

    .tasktitle {
      width: 458px;
      height: 96px;
      opacity: 1;
      left: 148px;
      top: 0;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }
  }

  .invite {
    width: 743px;
    height: 781px;
    opacity: 1;
    left: 4px;
    top: 1186px;
    position: absolute;
    transform-origin: 0px 0px 0px;

    .invitebg {
      width: 743px;
      height: 756px;
      opacity: 1;
      top: 25px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .invitepeo {
      width: 655px;
      height: 79px;
      opacity: 1;
      left: 74px;
      top: 394px;
      position: absolute;
      transform-origin: 0px 0px 0px;

      .invitepeoitem {
        width: 129px;
        height: 109px;
        opacity: 1;
        float: left;
        position: relative;
        transform-origin: 0px 0px 0px;
        // margin: 50px auto;
        justify-content: center;

        .invitepeoitembg {
          width: 78px;
          height: 79px;
          opacity: 1;
          position: absolute;
          transform-origin: 0px 0px 0px;
        }

        .invitepeoitemicon {
          width: 76px;
          height: 77px;
          opacity: 1;
          border-radius: 38px;
          margin-left: 1px;
          margin-top: 1px;
          position: absolute;

          transform-origin: 0px 0px 0px;
        }

        .invitepeoitemadd {
          width: 28px;
          height: 29px;
          opacity: 1;
          margin-left: 25px;
          margin-top: 25px;
          position: absolute;
          transform-origin: 0px 0px 0px;
        }
      }
    }

    .invitebtn {
      width: 460px;
      height: 91px;
      opacity: 1;
      left: 142px;
      top: 614px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      transform-origin: center 50%;
      animation: invitebtnAni 3s infinite;
    }

    @keyframes invitebtnAni {
      0% {
        transform: scale(1);
      }
      17% {
        transform: scale(1.13);
      }
      60% {
        transform: scale(1);
      }
      76% {
        transform: scale(1.06);
      }
      100% {
        transform: scale(1);
      }
    }

    .invitelab {
      width: 604px;
      height: 51px;
      opacity: 1;
      left: 69px;
      top: 129px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .inviterecord {
      width: 80px;
      height: 16px;
      opacity: 1;
      left: 340px;
      top: 714px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .invitetitle {
      width: 458px;
      height: 96px;
      opacity: 1;
      left: 148px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .inviteimg {
      width: 390px;
      height: 165px;
      opacity: 1;
      left: 137px;
      top: 203px;
      position: absolute;
      transform-origin: 0px 0px 0px;

      .inviteimgbar {
        width: 390px;
        height: 6px;
        opacity: 1;
        left: 42px;
        top: 97px;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }
      .inviteimgbar_top {
        width: 468px;
        height: 10px;
        opacity: 1;
        left: 42px;
        top: 95px;
        border-radius: 20px 20px 20px 20px;
        background-color: #facd4d;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }

      .inviteimg1 {
        width: 468px;
        height: 165px;
        opacity: 1;
        position: absolute;
        transform-origin: 0px 0px 0px;
      }
    }
  }

  .exchange {
    width: 743px;
    height: 911px;
    opacity: 1;
    // left: 4px;
    // top: 1991px;
    // position: absolute;
    left: 4px;
    top: 1186px;
    position: absolute;
    transform-origin: 0px 0px 0px;

    .exchangebg {
      width: 743px;
      height: 911px;
      opacity: 1;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .exchangelist {
      width: 658px;
      height: 688px;
      opacity: 1;
      left: 52px;
      top: 161px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      overflow-y: scroll;
      overflow-x: hidden;

      .exchangelistitem {
        width: 329px;
        height: 418px;
        opacity: 1;
        float: left;
        position: relative;
        transform-origin: 0px 0px 0px;
        justify-content: center;

        .exchangelistitemimg {
          width: 309px;
          height: 211px;
          opacity: 1;
          position: absolute;
          transform-origin: 0px 0px 0px;
        }

        .exchangelistitembtn {
          width: 264px;
          height: 60px;
          opacity: 1;
          left: 20px;
          top: 328px;
          position: absolute;
          transform-origin: 0px 0px 0px;
        }

        .exchangelistitemname {
          width: 270px;
          height: 35px;
          opacity: 1;
          left: 15px;
          top: 225px;
          position: absolute;
          transform-origin: 0px 0px 0px;
          font-size: 26px;
          color: rgba(41, 41, 41, 1);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .prizeBar {
          width: 100%;
          height: 30px;
          position: absolute;
          top: 274px;
          font-size: 24px;
          color: rgba(241, 147, 29, 1);
          padding: 0 15px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          .exchangelistitemprize {
            height: 26px;
          }
          .exchangelistitemold {
            color: rgba(41, 41, 41, 0.8);
          }
        }
      }
    }
  }

  .shareMask {
    width: 750px;
    height: 1624px;
    opacity: 0.6;
    display: block;
    left: 0px;
    top: 0px;
    position: fixed;
    transform-origin: 0px 0px 0px;
    background-color: #000;
    .shareImg {
      width: 417px;
      height: 259px;
      left: 259px;
      top: 60px;
      position: absolute;
      background-image: url(//yun.duiba.com.cn/spark/assets/d1df729f1770fe34418415900e08d13ca62fe7d8.png);
      background-size: 100% 100%;
    }
  }
  .canvas {
    width: 90px;
    height: 129px;
    opacity: 1;
    display: block;
    left: 48px;
    top: 77px;
    position: absolute;
    transform-origin: 0px 0px 0px;
    pointer-events: none;
  }
}
