.wrap {
  width: 100%;
  .left {
    width: 440px;
    .top {
      height: 119px;
      border-radius: 20px;
      background: rgba(57, 122, 183, 0.2);
      padding: 0 15px;

      .status {
        font-size: 18px;
        color: #fff;
        .num {
          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: 34px;
          font-weight: 700;
        }
      }
      .rate {
        height: 46px;
        border-radius: 20px;
        background: rgba(157, 255, 145, 0.12);
        padding-left: 18px;
        margin: 0 10px;
        color: #78cf8a;
        font-size: 18px;
        span {
          &:last-child {
            font-size: 26px;
            font-weight: 700;
            margin-left: 10px;
            vertical-align: -2px;
          }
        }
      }
    }
    .middle {
      height: 374px;
      border-radius: 20px;
      background: rgba(57, 122, 183, 0.2);
      padding: 20px 27px;
      .title {
        color: #CBEDFF;
        font-size: 20px;
        font-weight: 700;
      }
      .content {
        padding-top: 58px;
      }
    }
    .bottom {
      height: 188px;
      border-radius: 20px;
      background: rgba(57, 122, 183, 0.2);
      padding: 20px 27px;
      .title {
        color: #CBEDFF;
        font-size: 20px;
        font-weight: 700;
      }
      .content {
        font-size: 16px;
        color: #CBEDFF;
        padding-top: 20px;
        .area {
          min-width: 80px;
        }
        .numBox {
          margin-left: 20px;
          .num {
            color: #fff;
            font-size: 18px;
            font-weight: 700;
          }
        }
      }
    }
  }
  .right {
    flex: 1;
  }
}
