:root {
      /* =========================
         可修改：模块整体设置
         1. 模块整体 100% 铺满宽度
         2. 中间内容单独限宽
         3. 可改背景色、背景图、最小高度、圆角
         ========================= */
      --page-bg: transparent;
      --section-bg: #ffffff;
      --section-bg-image: none;
      --section-bg-size: cover;
      --section-bg-position: center;
      --section-bg-repeat: no-repeat;
      --content-max-width: 980px;
      --section-min-height: auto;
      --section-radius: 0px;

      /* =========================
         可修改：模块内边距
         ========================= */
      --section-padding-top: 48px;
      --section-padding-right: 24px;
      --section-padding-bottom: 56px;
      --section-padding-left: 24px;

      /* =========================
         可修改：标题区样式
         ========================= */
      --title-font-size: 34px;
      --title-line-height: 1.12;
      --title-font-weight: 700;
      --title-color: #2f3650;
      --title-letter-spacing: -0.03em;
      --title-margin-bottom: 14px;

      --desc-font-size: 16px;
      --desc-line-height: 1.55;
      --desc-font-weight: 400;
      --desc-color: #39415c;
      --desc-max-width: 760px;
      --header-margin-bottom: 40px;

      /* =========================
         可修改：步骤区设置
         ========================= */
      --grid-column-gap: 34px;
      --grid-row-gap: 24px;

      /* =========================
         可修改：数字圆形设置
         ========================= */
      --step-circle-size: 54px;
      --step-circle-bg: #5b6388;
      --step-circle-color: #ffffff;
      --step-circle-font-size: 28px;
      --step-circle-font-weight: 700;
      --step-circle-margin-bottom: 12px;

      /* =========================
         可修改：步骤标题与描述
         ========================= */
      --step-title-font-size: 15px;
      --step-title-line-height: 1.15;
      --step-title-font-weight: 600;
      --step-title-color: #2f3650;
      --step-title-margin-bottom: 8px;

      --step-desc-font-size: 10px;
      --step-desc-line-height: 1.35;
      --step-desc-font-weight: 400;
      --step-desc-color: #56607a;
      --step-desc-max-width: 170px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--page-bg);
      font-family: "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--title-color);
    }

    .approach-section {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      min-height: var(--section-min-height);
      padding: var(--section-padding-top) var(--section-padding-right) var(--section-padding-bottom) var(--section-padding-left);
      background-color: var(--section-bg);
      background-image: var(--section-bg-image);
      background-size: var(--section-bg-size);
      background-position: var(--section-bg-position);
      background-repeat: var(--section-bg-repeat);
      border-radius: var(--section-radius);
    }

    .approach-container {
      width: 100%;
      max-width: var(--content-max-width);
      margin: 0 auto;
    }

    .approach-header {
      text-align: center;
      margin-bottom: var(--header-margin-bottom);
    }

    .approach-title {
      margin: 0 0 var(--title-margin-bottom);
      font-size: var(--title-font-size);
      line-height: var(--title-line-height);
      font-weight: var(--title-font-weight);
      color: var(--title-color);
      letter-spacing: var(--title-letter-spacing);
    }

    .approach-desc {
      margin: 0 auto;
      max-width: var(--desc-max-width);
      font-size: var(--desc-font-size);
      line-height: var(--desc-line-height);
      font-weight: var(--desc-font-weight);
      color: var(--desc-color);
    }

    .approach-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: var(--grid-column-gap);
      row-gap: var(--grid-row-gap);
      align-items: start;
    }

    .approach-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .approach-step__circle {
      width: var(--step-circle-size);
      height: var(--step-circle-size);
      margin-bottom: var(--step-circle-margin-bottom);
      border-radius: 50%;
      background: var(--step-circle-bg);
      color: var(--step-circle-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--step-circle-font-size);
      font-weight: var(--step-circle-font-weight);
      line-height: 1;
    }

    .approach-step__title {
      margin: 0 0 var(--step-title-margin-bottom);
      font-size: var(--step-title-font-size);
      line-height: var(--step-title-line-height);
      font-weight: var(--step-title-font-weight);
      color: var(--step-title-color);
    }

    .approach-step__desc {
      margin: 0;
      max-width: var(--step-desc-max-width);
      font-size: var(--step-desc-font-size);
      line-height: var(--step-desc-line-height);
      font-weight: var(--step-desc-font-weight);
      color: var(--step-desc-color);
    }

    @media (max-width: 767px) {
      :root {
        /* =========================
           可修改：手机端尺寸
           手机端改为 2 列排布
           ========================= */
        --content-max-width: 100%;
        --section-padding-top: 30px;
        --section-padding-right: 16px;
        --section-padding-bottom: 36px;
        --section-padding-left: 16px;
        --title-font-size: 30px;
        --title-margin-bottom: 10px;
        --desc-font-size: 14px;
        --header-margin-bottom: 26px;
        --grid-column-gap: 16px;
        --grid-row-gap: 22px;
        --step-circle-size: 50px;
        --step-circle-font-size: 26px;
        --step-title-font-size: 16px;
        --step-desc-font-size: 12px;
        --step-desc-max-width: 100%;
      }

      .approach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }