.wrap {
  width: 695px;
  height: 707px;
  border-radius: 40px;
  background: linear-gradient(
    180deg,
    rgba(27, 50, 89, 0.3),
    rgba(27, 50, 89, 0) 100%
  );

  .header {
    padding: 20px 36px 0 34px;
    .title {
      font-size: 24px;
      font-weight: 700;
      color: #b3d6f7;
    }
    .right {
      font-size: 18px;
      color: #b3d6f7;
      cursor: pointer;
    }
  }

  .chartSection {
    margin-top: 20px;
    padding: 0 30px 0 34px;
    .num {
      min-width: 115px;
      font-size: 70px;
      font-weight: 700;
      line-height: 1;
      font-family: D-DIN;
    }
    .tag {
      display: inline-block;
      // height: 70px;
      border-radius: 8px;
      background: rgba(87, 239, 88, 0.2);
      font-size: 16px;
      color: #57ef58;
      writing-mode: vertical-rl;
      letter-spacing: 4px;
      padding:8px 5px 5px 5px;
      margin-top: 5px;
    }
    .title {
      font-size: 18px;
      color: #d9d9d9;
      letter-spacing: 2px;
      font-family: DingTalk JinBuTi;
    }

    .compare {
      font-size: 18px;
      .tips {
        color: #fff;
      }
    }
  }

  .cardSection {
    padding: 0 30px;
    margin-top: 10px;
    height: 76px;
    .card {
      width: 122px;
      height: 76px;
      border-radius: 14px;
      cursor: pointer;
      .name {
        font-size: 18px;
        color: #fff;
        line-height: 1;
      }
      .value {
        font-size: 28px;
        line-height: 1;
        font-weight: 700;
        font-family: D-DIN;
      }
    }
  }

  .listSection {
    flex: 1;
    padding: 0 30px;
    margin-top: 25px;
    overflow: hidden;
    .tab {
      padding: 10px 20px;
      border-radius: 10px;
     
      font-size: 20px;
      color: #bccee9;
      cursor: pointer;
    }

    .tabActive { 
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(
        -53.5deg,
        rgba(133, 255, 229, 0.25) 1.908%,
        rgba(183, 235, 255, 0.25) 99.807%
      );
    }

    .listCard {
      width: 100%;
      height: 86px;
      border-radius: 20px;
      background: rgba(57, 122, 183, 0.2);
      padding: 17px 37px 13px 23px;
      margin-top: 20px;
      
      .rankTag {
        width: 58px;
        height: 31px;
        line-height: 31px;
        border-radius: 50px;
        background: rgba(221, 221, 221, 0.4);
        text-align: center;
        color: #ffffff;
      }
      .desc {
        font-size: 16px;
        color: #caecff;
        p {
          margin-bottom: 0;
          font-size: 20px;
          font-weight: 700;
          color: #fff;
        }
      }
      .infRate {
        padding: 0 25px;
        height: 42px;
        line-height: 42px;
        border-radius: 50px;
        background: rgb(29, 69, 116);
        color: #caecff;
        span:nth-child(2) {
          margin: 0 10px;
          background: linear-gradient(
            180deg,
            rgb(170, 255, 246),
            rgb(37, 187, 255)
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          font-family: D-DIN;
          font-size: 22px;
          font-weight: 700;
          line-height: 1;
        }
      }
    }
  }
}
