.wrap {
  width: 682px;
  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;
    }
  }

  .content {
    padding: 0 34px;
    margin-top: 20px;
  }

  .sectionTop {
    font-size: 20px;
    color: #bccee9;
    margin-bottom: 15px;
    span {
      &:last-child {
        cursor: pointer;
      }
    }
  }

  .areaCard {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgba(16, 75, 106, 0.45);
    background: rgba(116, 183, 255, 0.15);
    .value {
      font-family: D-DIN;
      font-size: 28px;
      color: #57ef58;
    }
  }

  .activityWrap {
    height: 246px;
    border-radius: 10px;
    padding: 20px 40px 0 40px;
    font-size: 20px;
    color: #bccee9;
    background: linear-gradient(
      133.53deg,
      rgba(0, 185, 255, 0.1) 0.699%,
      rgba(136, 173, 255, 0.1) 100%
    );

    .card {
      width: 170px;
      height: 114px;
      border-radius: 10px;
      background: rgba(87, 133, 182, 0.56);
      text-align: center;
      .value {
        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: 40px;
        font-weight: 700;
        line-height: 1;
      }
    }

    .title {
      // background: url('../../../assets/images/urbanSituation/bg1.png');
      background-repeat: no-repeat;
      font-family: DingTalk JinBuTi;
      text-align: center;
      position: relative;
      padding-top: 30px;
      img {
        position: absolute;
        top: -60px;
        left: 80px;
      }
      p {
        margin-bottom: 0;
      }
    }
  }
}
