@media (min-width: 769px) {
  header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 8px 0px;
    .logo-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100px;
      }
    }
    .txt {
      font-size: 22px;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(135deg, #d97706, #fbbf24);
      border-radius: 25px;
      padding: 5px 10px;
    }
    .h1-title {
      opacity: 0.5;
      position: fixed;
      left: -100px;
    }
  }

  main {
    flex: 1;
    padding-bottom: 20px;
    padding-top: 12px;
    .banner {
      width: 640px;
      margin-bottom: 20px;
      img {
        width: 100%;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      .m1,
      .m2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 20px;
        gap: 12px;
        height: 118px;
        width: 600px;
        color: #fff;
        border-radius: 20px;
        i {
          font-size: 36px;
        }
      }
      .m1 {
        background: linear-gradient(135deg, #0284c7, #0369a1);
      }
      .m2 {
        background: linear-gradient(135deg, rgb(180, 22, 22), rgb(159, 18, 57));
        position: relative;
        .tag {
          position: absolute;
          top: 12px;
          right: 12px;
          padding: 5px 10px;
          border-radius: 10px;
          background: rgb(251, 191, 36);
          color: #78350f;
          font-size: 24px;
        }
        i {
          font-size: 46px;
        }
      }
      .m3 {
        border: 1px solid rgb(251, 191, 36);
        background-color: #fff;
        padding: 12px 0;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 12px;
        width: 600px;
        .left {
          display: flex;
          flex-direction: column;
          gap: 12px;
          .key {
            font-size: 14px;
            color: #92400e;
            font-weight: 800;
            line-height: 1.2;
          }
          .val {
            font-size: 28px;
            font-weight: 900;
            line-height: 1.2;
            background: linear-gradient(135deg, rgb(180, 22, 22), rgb(209, 29, 29));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
          }
        }
        .right {
          font-size: 14px;
          color: rgb(4, 120, 87);
          display: flex;
          gap: 1vw;
        }
      }

      .m4 {
        width: 600px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, 0);
        background-image: linear-gradient(135deg, rgb(255, 249, 230), rgb(255, 245, 216));
        padding: 24px;
        box-sizing: border-box;

        .title {
          color: rgb(217, 119, 6);
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 20px;
          font-weight: 800;
          i {
            font-size: 46px;
          }
        }

        .flow-list {
          .flow-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 8px 0;
            .num {
              width: 32px;
              height: 32px;
              color: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 800;
              flex-shrink: 0;
              font-size: 16px;
              line-height: 1;
              box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
              background-image: linear-gradient(135deg, rgb(217, 119, 6), rgb(251, 191, 36));
            }
            .txt {
              flex: 1;
              font-size: 17px;
              font-weight: 600;
              line-height: 1.5;
              a {
                color: #2563eb;
                font-weight: 800;
                text-decoration: underline;
                text-underline-offset: 2px;
              }
            }
          }
        }
      }

      .m5 {
        box-sizing: border-box;
        width: 600px;
        border-radius: 20px;
        padding: 24px 20px;
        background-color: #fff;

        .list1 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
          .item {
            background-color: rgba(0, 0, 0, 0);
            background-image: linear-gradient(rgb(243, 244, 246), rgb(229, 231, 235));
            color: rgb(51, 51, 51);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            h4 {
              width: 150px;
            }
            i {
              background-clip: text;
              background-color: rgba(0, 0, 0, 0);
              background-image: linear-gradient(135deg, rgb(217, 119, 6), rgb(251, 191, 36));
              color: transparent;
              font-size: 40px;
            }
            &:nth-child(2) {
              i {
                font-size: 46px;
              }
            }
          }
        }
        .title {
          font-size: 16px;
          font-weight: 800;
          margin-bottom: 18px;
          line-height: 1.2;
          color: rgb(217, 119, 6);
          text-align: center;
          margin-top: 20px;
        }
        .list2 {
          display: flex;
          gap: 12px;
          .item {
            flex: 1;
            box-sizing: border-box;
            color: rgb(51, 51, 51);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 1;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            height: 108px;
            background-image: linear-gradient(rgb(249, 250, 251), rgb(243, 244, 246));
            border-radius: 2vw;
            position: relative;
            .tag {
              position: absolute;
              top: -8px;
              left: 50%;
              transform: translateX(-50%);
              font-size: 12px;
              font-weight: 600;
              line-height: 1.2;
              color: #fff;
              background-color: #fff;
              padding: 4px 12px;
              border-radius: 4px;
              background-image: linear-gradient(135deg, rgb(217, 119, 6), rgb(251, 191, 36));
            }
            &:nth-child(2) {
              background-image: linear-gradient(rgb(243, 244, 246), rgb(229, 231, 235));
              .label {
                color: rgb(217, 119, 6);
              }
            }
            .label {
              font-size: 14px;
              font-weight: 700;
              margin-bottom: 4px;
              line-height: 1.2;
            }
            .desc {
              font-size: 12px;
              color: #6b7280;
              font-weight: 600;
              line-height: 1.2;
            }
            i {
              color: rgb(217, 119, 6);
              font-size: 40px;
            }
          }
        }
      }

      .goods-list {
        width: 600px;
      }
    }
  }

  .footer-list {
    background-color: #fff;
    position: fixed;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(600px - 24px);
    display: flex;
    justify-content: space-between;
    gap: 3px;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 0 1vw rgba(#d97706, 0.8);

    .item {
      font-size: 36px;
      color: #333;
      cursor: pointer;
      text-decoration: unset;
      &.active {
        color: #d97706;
      }
    }
  }

  body {
    background-color: #f5f5f5;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 640px;
    margin: 0 auto;
  }

  a {
    text-decoration: unset;
  }
}

@media (max-width: 768px) {
  header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px 20px;
    .logo-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100px;
      }
    }
    .txt {
      font-size: 22px;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(135deg, #d97706, #fbbf24);
      border-radius: 25px;
      padding: 5px 10px;
    }
    .h1-title {
      opacity: 0.5;
      position: fixed;
      left: -100px;
    }
  }

  main {
    flex: 1;
    padding-bottom: 14vw;
    padding-top: 4vw;
    .banner {
      width: 94vw;
      margin: 0 auto 2vw;
      img {
        width: 100%;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3vw;
      .m1,
      .m2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 5.6vw;
        gap: 3vw;
        height: 118px;
        width: 96vw;
        color: #fff;
        border-radius: 5vw;
        i {
          font-size: 8vw;
        }
      }
      .m1 {
        background: linear-gradient(135deg, #0284c7, #0369a1);
      }
      .m2 {
        background: linear-gradient(135deg, rgb(180, 22, 22), rgb(159, 18, 57));
        position: relative;
        .tag {
          position: absolute;
          top: 3vw;
          right: 3vw;
          padding: 5px 10px;
          border-radius: 1vw;
          background: rgb(251, 191, 36);
          color: #78350f;
          font-size: 3.4vw;
        }
        i {
          font-size: 10vw;
        }
      }
      .m3 {
        border: 1px solid rgb(251, 191, 36);
        background-color: #fff;
        padding: 4vw 0;
        border-radius: 5vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 3vw;
        width: 96vw;
        .left {
          display: flex;
          flex-direction: column;
          gap: 1vw;
          .key {
            font-size: 14px;
            color: #92400e;
            font-weight: 800;
            line-height: 1.2;
          }
          .val {
            font-size: 28px;
            font-weight: 900;
            line-height: 1.2;
            background: linear-gradient(135deg, rgb(180, 22, 22), rgb(209, 29, 29));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
          }
        }
        .right {
          font-size: 14px;
          color: rgb(4, 120, 87);
          display: flex;
          gap: 1vw;
        }
      }

      .m4 {
        width: 96vw;
        border-radius: 5vw;
        background-color: rgba(0, 0, 0, 0);
        background-image: linear-gradient(135deg, rgb(255, 249, 230), rgb(255, 245, 216));
        padding: 4vw;
        box-sizing: border-box;

        .title {
          color: rgb(217, 119, 6);
          display: flex;
          align-items: center;
          gap: 1vw;
          font-size: 20px;
          font-weight: 800;
          i {
            font-size: 8vw;
          }
        }

        .flow-list {
          .flow-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 8px 0;
            .num {
              width: 32px;
              height: 32px;
              color: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 800;
              flex-shrink: 0;
              font-size: 16px;
              line-height: 1;
              box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
              background-image: linear-gradient(135deg, rgb(217, 119, 6), rgb(251, 191, 36));
            }
            .txt {
              flex: 1;
              font-size: 17px;
              font-weight: 600;
              line-height: 1.5;
              a {
                color: #2563eb;
                font-weight: 800;
                text-decoration: underline;
                text-underline-offset: 2px;
              }
            }
          }
        }
      }

      .m5 {
        box-sizing: border-box;
        width: 96vw;
        border-radius: 5vw;
        padding: 24px 20px;
        background-color: #fff;

        .list1 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 3vw;
          .item {
            background-color: rgba(0, 0, 0, 0);
            background-image: linear-gradient(rgb(243, 244, 246), rgb(229, 231, 235));
            color: rgb(51, 51, 51);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2vw;
            h4 {
              width: 28vw;
            }
            i {
              background-clip: text;
              background-color: rgba(0, 0, 0, 0);
              background-image: linear-gradient(135deg, rgb(217, 119, 6), rgb(251, 191, 36));
              color: transparent;
              font-size: 6vw;
            }
            &:nth-child(2) {
              i {
                font-size: 8vw;
              }
            }
          }
        }
        .title {
          font-size: 16px;
          font-weight: 800;
          margin-bottom: 18px;
          line-height: 1.2;
          color: rgb(217, 119, 6);
          text-align: center;
          margin-top: 20px;
        }
        .list2 {
          display: flex;
          gap: 3vw;
          .item {
            flex: 1;
            box-sizing: border-box;
            color: rgb(51, 51, 51);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 1;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            height: 108px;
            background-image: linear-gradient(rgb(249, 250, 251), rgb(243, 244, 246));
            border-radius: 2vw;
            position: relative;
            .tag {
              position: absolute;
              top: -8px;
              left: 50%;
              transform: translateX(-50%);
              font-size: 12px;
              font-weight: 600;
              line-height: 1.2;
              color: #fff;
              background-color: #fff;
              padding: 2px 6px;
              border-radius: 4px;
              background-image: linear-gradient(135deg, rgb(217, 119, 6), rgb(251, 191, 36));
            }
            &:nth-child(2) {
              background-image: linear-gradient(rgb(243, 244, 246), rgb(229, 231, 235));
              .label {
                color: rgb(217, 119, 6);
              }
            }
            .label {
              font-size: 14px;
              font-weight: 700;
              margin-bottom: 4px;
              line-height: 1.2;
            }
            .desc {
              font-size: 12px;
              color: #6b7280;
              font-weight: 600;
              line-height: 1.2;
            }
            i {
              color: rgb(217, 119, 6);
              font-size: 10vw;
            }
          }
        }
      }

      .goods-list {
        width: 96vw;
      }
    }
  }

  .footer-list {
    background-color: #fff;
    position: fixed;
    bottom: 7vw;
    left: 7vw;
    width: calc(100vw - 24vw);
    display: flex;
    justify-content: space-between;
    gap: 3vw;
    padding: 10px 20px;
    border-radius: 12vw;
    box-shadow: 0 0 1vw rgba(#d97706, 0.8);

    .item {
      font-size: 3.6vw;
      color: #333;
      cursor: pointer;
      text-decoration: unset;
      &.active {
        color: #d97706;
      }
    }
  }

  body {
    background-color: #f5f5f5;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }

  a {
    text-decoration: unset;
  }
}