@import url('../../res.less');

.homePage {
  width: 750px;
  height: 1624px;
  position: relative;

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 750px;
    height: 1624px;
    .formatBg();
  }

  .title {
    position: absolute;
    left: 58px;
    top: 86px;
    width: 646px;
    height: 219px;
    .formatBg();
  }

  .home_svga {
    position: absolute;
    left: 0px;
    top: 85px;
    width: 750px;
    height: 1101px;
  }

  .btn_rule {
    position: absolute;
    left: 0px;
    top: 320px;
    width: 93px;
    height: 47px;
    .formatBg();
  }

  .btn_share {
    position: absolute;
    right: 0px;
    top: 320px;
    width: 101px;
    height: 47px;
    .formatBg();
  }

  .tab1 {
    position: absolute;
    left: 221px;
    top: 312px;
    width: 321px;
    height: 67px;
    .formatBg();
  }

  .tab2 {
    position: absolute;
    left: 221px;
    top: 312px;
    width: 321px;
    height: 67px;
    .formatBg();
  }

  .medal_list_box {
    position: absolute;
    left: 0px;
    top: 480px;
    width: 750px;
    height: 660px;
    overflow: hidden;
    overflow-x: auto;
  }
  .medal_list {
    position: absolute;
    left: 0px;
    top: 0px;
    width: auto;
    height: 260px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    padding-left: 90px;

    &.line1 {
      top: 0px;
    }

    &.line2 {
      top: 300px;
    }

    .medal_item {
      position: relative;
      flex-shrink: 0;
      width: 260px;
      height: 260px;
      margin-bottom: 20px;
      margin-right: 20px;

      &>img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .saoguang {
        width: 90%;
        height: 90%;
        position: absolute;
        left: 5%;
        top: 5%;
        pointer-events: none;
      }
    }

    .medal_item:nth-child(odd) {
      margin-top: 70px;
    }

    .medal_item:nth-child(even) {
      margin-top: 0;
    }
  }

  .left_guide {
    position: absolute;
    left: 288px;
    top: 1188px;
    width: 200px;
    height: 28px;
    pointer-events: none;

    .arrow_left {
      position: absolute;
      left: 0px;
      top: 5px;
      width: 11px;
      height: 19px;
      .formatBg();
    }

    .left_guide_text {
      position: absolute;
      left: 20px;
      top: 0px;
      font-size: 28px;
      line-height: 28px;
      color: rgb(131, 80, 42);
    }

    .huadong {
      position: absolute;
      left: 3px;
      top: 2px;
      width: 194px;
      height: 25px;
      pointer-events: none;
    }
  }

  .btn_prize {
    position: absolute;
    left: 34px;
    top: 1306px;
    width: 180px;
    height: 189px;
    .formatBg();
  }

  .btn_future {
    position: absolute;
    left: 545px;
    top: 1306px;
    width: 180px;
    height: 189px;
    .formatBg();
  }

  .mainbtn_box {
    position: absolute;
    left: 222px;
    top: 1254px;
    width: 308px;
    height: 286px;

    .mainbtn_bg {
      position: absolute;
      left: 40px;
      top: 0px;
      width: 238px;
      height: 238px;
      .formatBg();
    }

    .box {
      position: absolute;
      left: -35px;
      top: -20px;
      width: 374px;
      height: 250px;
    }

    .mainbtn {
      position: absolute;
      left: 0px;
      top: 171px;
      width: 308px;
      height: 115px;
      .formatBg();
    }

    .current_bb {
      font-size: 22px;
      color: rgb(255, 255, 255);
      line-height: 22px;
      text-align: center;
      position: absolute;
      left: 11%;
      top: 240px;
      width: 80%;
      height: 22px;
    }

    .mainbtn_popover {
      position: absolute;
      left: 159px;
      top: 139px;
      width: 177px;
      height: 48px;
      .formatBg();
      font-size: 16px;
      color: rgb(255, 255, 255);
      text-align: center;
      line-height: 43px;
    }
  }
}
