.container {
  width: 100%;
  padding: 20px;

  .totalSection {
    text-align: center;
    // margin-bottom: 60px;
    position: relative;

    // &::after {
    //   content: '';
    //   position: absolute;
    //   bottom: -30px;
    //   left: 50%;
    //   transform: translateX(-50%);
    //   width: 80%;
    //   height: 1px;
    //   background: linear-gradient(
    //     90deg,
    //     rgba(81, 171, 255, 0) 0%,
    //     rgba(81, 171, 255, 0.6) 50%,
    //     rgba(81, 171, 255, 0) 100%
    //   );
    // }
    font-family: 'DingTalk JinBuTi';

    .totalRow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 4px;

      .totalTitle {
        color: #E4EDFF;
        font-size: 30px;
        font-weight: 400;
      }

      :global {
        .ant-statistic {
          .ant-statistic-content {
            
            background: linear-gradient(
                180deg,
                rgb(170, 255, 246),
                rgb(37, 187, 255)
              );
            position: relative;
            z-index: 2;

            
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 400;
            line-height: normal;
            font-size: 70px;
            font-family: 'DingTalk JinBuTi';
          }
        }
      }

      .unit {
        color: #E4EDFF;
        font-size: 30px;
        font-weight: 400;
      }
    }

    .newData {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      .label {
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 400;
        font-family: 'DingTalk JinBuTi';
      }

      :global {
        .ant-statistic {
          .ant-statistic-content {
            color: #09C35C;
            font-size: 20px;
            font-weight: 400;
            font-family: 'DingTalk JinBuTi';
          }
        }
      }

      .unit {
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 400;
      }
    }
  }

  .dataTypeSection {
    position: relative;
    padding: 0 20px;

    .ellipseBg {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 682px;
      height: 341.05px;
      background: url('@/assets/images/DataGovernance/ellipse-central.png') no-repeat center bottom;
      background-size: contain;
    }

    .circleContainer {
      position: relative;
      display: flex;
      justify-content: center;

      .dataTypeItem {
        text-align: center;

        .circle {
          width: 134px;
          height: 134px;
          margin-left: -48px;

          &.circle1 { 
            background-image: url('@/assets/images/DataGovernance/round1.png'); 
            position: absolute;
            // position: relative;
            top: 51px;
            // left: 216px;
            left: 281px;
            // top: 50px;
            // left: 28%;
            transform: translateX(-50%);
          }
          &.circle2 { 
            background-image: url('@/assets/images/DataGovernance/round2.png'); 
            position: absolute;
            top: 177px;
            left: 414px;
            // left: 40%;
            transform: translateX(-50%);
          }
          &.circle3 { 
              background-image: url('@/assets/images/DataGovernance/round3.png'); 
              position: absolute;
              top: 177px;
              left: 632px;
              // left: 60%;
              transform: translateX(-50%);
          }
          &.circle4 { 
              background-image: url('@/assets/images/DataGovernance/round4.png'); 
              position: absolute;
              top: 51px;
              left: 744px;
              // left: 72%;
              transform: translateX(-50%);
          }
        }
      }
    }
  }
} 