.rank {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  :global {
    .title {
      width: 100%;
      height: 100px;
      object-fit: contain;
    }
    .content {
      width: 1260PX;
      height: 590px;
      background: url("../../assets/img/rank_bg.png") no-repeat center center;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .container {
        width: 80%;
        height: 73%;
        display: flex;

        align-items: center;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
          display: none;
        }
        .container-item {
          width: fit-content;
          height: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 10px;
          .rank-item {
            width: 120px;
            height: 100%;
            background: url("../../assets/img/rank_item.png") no-repeat center center;
            background-size: 100% 100%;
            border-radius: 3px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(133, 95, 57, 1);
            gap: 10px;
            .rank-title {
              width: 100%;
              height: 11%;
              font-size: 26px;
              text-align: center;
              line-height: 44px;
              color: rgba(203, 181, 154, 1);
            }
            .nickname {
              width: 26px;
              height: 215px;
              font-size: 26px;
              text-align: center;
              line-height: 34px;
              word-break: break-all;
            }
            .score {
              width: 100%;
              height: 8%;
              font-size: 22px;
              text-align: center;
              line-height: 44px;
            }
            .time {
              width: 100%;
              height: 8%;
              font-size: 22px;
              text-align: center;
              line-height: 24px;
            }
            .current-rank {
              opacity: 0;
              width: 90%;
              height: 8%;
              font-size: 20px;
              line-height: 33px;
              text-align: center;
            }
          }
          .rank-item-active {
            width: 120px;
            height: 100%;
            background: url("../../assets/img/rank_current.png") no-repeat center center;
            background-size: 100% 100%;
            background-size: 100% 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .rank-title {
              color: rgba(236, 118, 0, 1)
            }
            .nickname {
              color: rgba(133, 95, 57, 1)
            }
            .score {
              color: rgba(235, 146, 57, 1)
            }
            .time {
              color: rgba(235, 146, 57, 1)
            }
            .current-rank {
              opacity: 1;
              background-color: rgba(235, 146, 57, 1);
              color: rgba(255, 230, 206, 1)
            }
          }
        }
      } 
      .left, .right {
        width: 5%;
        height: 8%;
        object-fit: contain;
        cursor: pointer;
      }
    }
    .btn-group {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      font-size: 28px;
      color: rgba(255, 240, 220, 1);
      text-align: center;
      line-height: 70px;
      cursor: pointer;
      .item {
        width: 220px;
        height: 70px;
        background: url(../../assets/img/button_bg.png) no-repeat center center;
        background-size: 100% 100%;
      }
      .backHome {
        width: 220px;
        height: 70px;
        color: rgba(255, 240, 220, .5);
        background: url(../../assets/img/button_bg2.png) no-repeat center center;
        background-size: 100% 100%;
      }

    }
  }
}