.ranking {
  .ranking_title {
    position: absolute;
    top: .32rem;
    left: 2.2rem;
    font-size: .5rem;
    font-weight: 500;
    color: #fff;
  }
  .ranking_continer {
    display: flex;
    position: absolute;
    top: 1.48rem;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    .my_ranking_details,
    .ranking_details {
      position: relative;
      flex-shrink: 0;
      width: 6.2rem;
      height: 9.01rem;
      background: url('assets/match/total_ranking_bg.png');
      background-size: 100% 100%;
      margin-left: 1rem;
      padding-top: 1.07rem;
      box-sizing: border-box;
      overflow: hidden;
      .ranking_details_title {
        position: absolute;
        top: .1rem;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        white-space: nowrap;
        h3 {
          font-size: .38rem;
          font-weight: 500;
          color: #fff;
        }
        span {
          font-size: .28rem;
          color: #666;
        }
      }
      .ranking_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 6.2rem;
        height: .66rem;
        padding: 0 .38rem;
        box-sizing: border-box;
        .ranking_left_item,
        .ranking_right_item {
          display: flex;
          align-items: center;
          height: .52rem;
          width: 1rem;
          justify-content: center;
        }
        .ranking_head_title {
          font-weight: bold;
          color: #333333;
          font-size: .29rem;
        }
        .ranking_number {
          width: .5rem;
          height: .5rem;
          text-align: center;
          line-height: .5rem;
          font-size: .34rem;
          color: #FF8109;
        }
        .ranking_name {
          font-size: .28rem;
          color: #333333;
          width: 3rem;
        }
        .ranking_right_item {
          font-size: .28rem;
          color: #333333;
        }
      }
      .my_ranking {
        background: #FFDF5A;
        border-radius: 0 0 .37rem .37rem;
        position: absolute;
        bottom: 0;
      }
      .item_no_data {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 2.97rem;
        height: 3.39rem;
      }
    }
    .my_ranking_details {
      width: 6.94rem;
      height: 9.14rem;
      background: #FFFFFF;
      border-radius: .37rem;
      padding-top: 0;
      .ranking_item {
        padding-top: .16rem;
        width: 6.94rem;
        height: .82rem;
      }
    }
    .no_data {
      position: absolute;
      left: 50%;
      top: .7rem;
      transform: translateX(-50%);
      width: 12.09rem;
      height: 7.07rem;
      background: #fff;
      border-radius: .3rem;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 2.97rem;
        height: 3.39rem;
      }
    }
  }
  .singl_my_ranking {
    position: absolute;
    top: .23rem;
    right: .42rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 7.23rem;
    height: .88rem;
    background: #FFDF5A;
    border-radius: .38rem;
    padding: 0 .48rem;
    box-sizing: border-box;
    .ranking_left_item,
    .ranking_right_item {
      display: flex;
      align-items: center;
      height: .52rem;
    }
    .ranking_number {
      width: .37rem;
      height: .37rem;
      text-align: center;
      line-height: .37rem;
      font-size: .4rem;
      color: #FF8109;
    }
    .ranking_name {
      font-size: .36rem;
      color: #616161;
      margin-right: .3rem;
    }
    .ranking_right_item {
      font-size: .36rem;
      color: #616161;
    }
    .ranking_correct {
      margin-right: .49rem;
    }
  }
}
