.banner {
  width: 100%;
  min-height: 381px;
  line-height: 0;

  .bannerImg {
    width: 100%;
    min-height: 381px;
    object-fit: cover;
  }
}

.title {
  position: relative;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #000000;
  line-height: 30px;

  span {
    position: relative;
    z-index: 9;

    &::before {
      content: '';
      position: absolute;
      bottom: -6px;
      right: -15px;
      width: 111px;
      height: 39px;
      background: url('./images/title-1.png') no-repeat center;
      background-size: contain;
      z-index: -1;
    }
  }
}

.content {
  padding: 8px 24px 0;
  font-size: 14px;
  color: #3E635E;
  line-height: 24px;
  text-align: justify;
}

.section1 {
  padding: 30px 0;
  background-color: #fff;

  img {
    padding: 35px 0 22px;
  }

  .content {
    padding: 0 17px 0;
    font-size: 12px;
    color: #50616A;
    line-height: 21px;

    p {
      text-indent: 2em;
    }
  }
}

.section2 {
  padding: 27px 0 18px;
  // background-color: #fff;
  background: linear-gradient(180deg, #EDFDFF 0%, #FFFFFF 21%, #FFFFFF 88%, #DDF0F2 100%);

  img {
    padding-top: 19px;
  }
}

.section3 {
  padding: 27px 0 48px;
  // background-color: #fff;
  background: linear-gradient(180deg, #EDFDFF 0%, #FFFFFF 13%, #FFFFFF 92%, #DDF0F2 100%);

  .title {
    padding-bottom: 16px;

    span {
      &::before {
        content: '';
        position: absolute;
        bottom: -6px;
        right: -15px;
        width: 89px;
        height: 39px;
        background: url('./images/title-2.png') no-repeat center;
        background-size: contain;
        z-index: -1;
      }
    }
  }

  .imgGroup {
    // height: 260px;
    // width: 273px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    // .z1 {
    //   width: 182px;
    //   height: 261px;
    // }

    // .z2 {
    //   height: 250px;
    //   width: 171px;
    // }

    // .z3 {
    //   width: 273px;
    //   height: 170px;
    // }

    // .z4 {
    //   width: 170px;
    //   height: 229px;
    // }
    img {
      width: 310px;
      height: 268px;
      pointer-events: none;
      user-select: none;
    }

    p {
      padding-top: 6px;
      font-size: 14px;
      color: #000000;
      line-height: 20px;
      padding-bottom: 27px;
      text-align: center;
    }
  }

  --van-swipe-indicator-inactive-background: #C6E2E6;

  :global {
    .van-swipe__indicators {
      bottom: 0;
    }

    .van-swipe__indicator--active {
      background: linear-gradient(124deg, #008FAD 0%, #00AEA5 100%), #0088C5;
      width: 12px;
      border-radius: 10px;
    }
  }
}