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

  .mainbg {
    width: 750px;
    height: 3015px;
    opacity: 1;
    position: absolute;
    transform-origin: 0px 0px 0px;
  }

  .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: 140px;
      height: 25px;
      opacity: 1;
      left: 126px;
      top: 20px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 26px;
      color: rgba(255, 255, 255, 1);
    }

    .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;

    .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);
    }

    .laststepbar {
      width: 352px;
      height: 196px;
      opacity: 1;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .laststeplab {
      width: 144px;
      height: 24px;
      opacity: 1;
      left: 107px;
      top: 79px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .laststepbtn {
      width: 301px;
      height: 104px;
      opacity: 1;
      left: 29px;
      top: 183px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }
  }

  .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: 170px;
      height: 70px;
      opacity: 1;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .peoplelab {
      width: 150px;
      height: 44px;
      opacity: 1;
      left: 13px;
      top: 2px;
      position: absolute;
      // transform-origin: 0px 0px 0px;
      font-size: 10px;
      color: rgba(255, 255, 255, 1);
    }

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

  .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;
    }

    .poptasklab3 {
      width: 23px;
      height: 19px;
      opacity: 1;
      left: 410px;
      top: 35px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
    }

    .poptaskimg5 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 459px;
      top: 185px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .poptasklab5 {
      width: 35px;
      height: 19px;
      opacity: 1;
      left: 493px;
      top: 224px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
    }

    .poptaskimg4 {
      width: 98px;
      height: 98px;
      opacity: 1;
      left: 462px;
      top: 87px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .poptasklab4 {
      width: 19px;
      height: 14px;
      opacity: 1;
      left: 497px;
      top: 118px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
    }

    .poptaskimg2 {
      width: 112px;
      height: 112px;
      opacity: 1;
      left: 44px;
      top: 34px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .poptasklab2 {
      width: 25px;
      height: 19px;
      opacity: 1;
      left: 86px;
      top: 70px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
    }

    .poptaskimg1 {
      width: 99px;
      height: 99px;
      opacity: 1;
      top: 111px;
      position: absolute;
      transform-origin: 0px 0px 0px;
    }

    .poptasklab1 {
      width: 18px;
      height: 15px;
      opacity: 1;
      left: 35px;
      top: 140px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      font-size: 24px;
      color: rgba(255, 255, 255, 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: 70px;
        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;
    }

    .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: 468px;
      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;
      }

      .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;
    transform-origin: 0px 0px 0px;

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

    .exchangelist {
      width: 680px;
      height: 700px;
      opacity: 1;
      left: 52px;
      top: 161px;
      position: absolute;
      transform-origin: 0px 0px 0px;
      overflow: scroll;

      .exchangelistitem {
        width: 329px;
        height: 418px;
        opacity: 1;
        position: relative;
        transform-origin: 0px 0px 0px;
        display: inline-block;
        margin-top: 20px;
        &:nth-child(2n){
          margin-left: 20px;
          // background: red;
        }

        .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: 29px;
          opacity: 1;
          left: 15px;
          top: 225px;
          position: absolute;
          transform-origin: 0px 0px 0px;
          font-size: 29.97744px;
          color: rgba(41, 41, 41, 1);
        }

        .exchangelistitemprize {
          width: 150px;
          height: 26px;
          opacity: 1;
          margin-left: 14px;
          top: 274px;
          position: absolute;
          transform-origin: 0px 0px 0px;
          font-size: 27.97894px;
          color: rgba(241, 147, 29, 1);

          
        }
        .exchangelistitemold {
          width: 120px;
          height: 23px;
          opacity: 0.8;
          left: 146px;
          // margin-left: 10px;
          top: 277px;
          position: absolute;
          transform-origin: 0px 0px 0px;
          font-size: 23.98195px;
          color: rgba(41, 41, 41, 1);
        }

        
      }
    }
  }

  .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/8b6f9926a58611c3c8e0afcabfa662fd22fbd140.png);
      background-size: 100% 100%;
    }
  }
  
}