@import "../../res.less";

.homepage {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;

  overflow-x: hidden;
  overflow-y: auto;

  .bg {
    width: 750px;
    height: 1624px;
    left: 0px;
    top: 0px;
    position: absolute;
    .sparkBg("homePage/bg.png");
  }

  .equipment {
    width: 615px;
    height: 850px;
    left: 60px;
    top: 499px;
    position: absolute;
    .sparkBg("homePage/equipment.png");
  }

  .icon {
    width: 270px;
    height: 356px;
    left: 400px;
    top: 987px;
    position: absolute;
    .sparkBg("homePage/icon.png");
  }

  .book {
    width: 180px;
    height: 144px;
    left: 60px;
    top: 1192px;
    position: absolute;
    .sparkBg("homePage/book.png");
  }

  .brain {
    width: 356px;
    height: 313px;
    left: 179px;
    top: 573px;
    position: absolute;
    .sparkBg("homePage/brain.png");
  }

  .wenhao {
    width: 81px;
    height: 123px;
    left: 326px;
    top: 644px;
    position: absolute;
    .sparkBg("homePage/wenhao.png");
  }

  .title {
    width: 703px;
    height: 181px;
    left: 29px;
    top: 131px;
    position: absolute;
    .sparkBg("homePage/title.png");
  }

  .draw {
    width: 153px;
    height: 192px;
    left: 5px;
    top: 1344px;
    position: absolute;
    .sparkBg("homePage/draw.png");
  }

  .task {
    width: 154px;
    height: 217px;
    left: 591px;
    top: 1344px;
    position: absolute;
    .sparkBg("homePage/task.png");
  }

  .matter {
    width: 422px;
    height: 154px;
    left: 168px;
    top: 1356px;
    position: absolute;

    .m_bg {
      width: 422px;
      height: 154px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/m_bg.png");
    }

    .answer {
      width: 219px;
      height: 53px;
      left: 109px;
      top: 32px;
      position: absolute;
      .sparkBg("homePage/answer.png");
    }

    .remain {
      width: 422px;
      height: 24px;
      // left: 161px;
      top: 94px;
      text-align: center;
      position: absolute;
      font-size: 21px;
      line-height: 24px;
      color: rgba(170, 64, 0, 1);
      .lineClamp1();
    }
  }

  .rank {
    width: 638px;
    height: 160px;
    left: 58px;
    top: 320px;
    position: absolute;

    .r_bg {
      width: 638px;
      height: 160px;
      left: 0px;
      top: 0px;
      position: absolute;
      .sparkBg("homePage/r_bg.png");
    }

    .name {
      width: 300px;
      height: 33px;
      left: 145px;
      top: 67px;
      position: absolute;
      font-size: 30px;
      line-height: 33px;
      color: rgba(30, 76, 169, 1);
      .lineClamp1();
    }

    .head {
      width: 95px;
      height: 96px;
      left: 37px;
      top: 34px;
      position: absolute;
      // .sparkBg("homePage/head.png");
      border-radius: 15px;
    }

    .myrank {
      width: 104px;
      height: 20px;
      left: 477px;
      top: 103px;
      position: absolute;
      .sparkBg("homePage/myRank.png");

      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .number {
      width: 180px;
      height: 70px;
      left: 439px;
      top: 32px;
      text-align: center;
      position: absolute;
      font-size: 60px;
      line-height: 70px;
      color: rgba(30, 76, 169, 1);
      .lineClamp1();
    }
  }

  .prize {
    width: 114px;
    height: 53px;
    left: 636px;
    top: 510px;
    position: absolute;
    .sparkBg("homePage/prize.png");
  }

  .rule {
    width: 113px;
    height: 53px;
    left: 0px;
    top: 510px;
    position: absolute;
    .sparkBg("homePage/rule.png");
  }

  .visit {
    width: 184px;
    height: 232px;
    left: 566px;
    top: 616px;
    position: absolute;
    .sparkBg("homePage/visit.png");
  }

  .share {
    width: 198px;
    height: 232px;
    left: 552px;
    top: 817px;
    position: absolute;
    .sparkBg("homePage/share.png");
  }

  .logo {
    width: 290px;
    height: 28px;
    left: 232px;
    top: 85px;
    position: absolute;
    .sparkBg("homePage/logo.png");
  }

  .musicBtn {
    position: absolute;
    left: 20px;
    top: 590px;
    width: 47px;
    height: 47px;
  }
}