@import './gm.less';

:root:root {
  --van-primary-color: #5a4527;
}

@m04: 0 4.667vw;
@p03: 0 3.333vw;
@primary-color: #00c250;
@mainfont: 3.2vw;
@titlefont: 4vw;
@mdfont: 3.467vw;
@lrfont: 4.667vw;

body {
  .b_l_w;
  font-size: 3.2vw;
  touch-action: manipulation;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#app {
  width: 100%;
}

.van-tabbar__placeholder {
  min-height: 20vw;
  height: 20vw;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

body,
.van-pull-refresh {
  overflow: visible !important;
}

.van-toast {
  width: max-content !important;
}

.van-nav-bar--fixed {
  z-index: 999 !important;
}

.van-loading__text,
.van-tabbar__placeholder,
.van-list__finished-text {
  .b_l_w;
}

.f5 {
  &::before {
    content: '';
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: #f5f5f5;
    z-index: -1;
  }
}

p {
  margin: 0;
}

img {
  display: block;
  object-fit: contain;
}

[v-cloak] {
  display: none !important;
}

.van-nav-bar {

  .van-nav-bar__text,
  .van-icon {
    color: #000 !important;
  }
}

.van-nav-bar__placeholder {
  .van-nav-bar .van-icon {
    color: #000;
  }

  .van-nav-bar__title {
    font-size: 16px;

    span {
      font-size: 12px;
    }
  }
}

.van-tabbar {
  .b_l_w;
  height: 20vw !important;
  z-index: 99 !important;

  .van-tabbar-item__icon img {
    height: 10vw;
    margin: -2vw 0 0;
  }

  .van-tabbar-item__text {
    font-size: 3.2vw;
  }
}

.tabs {
  --van-tabs-line-height: 12vw;
  --van-tab-font-size: 4.267vw;

  .van-tabs__line {
    border-radius: 0 !important;
  }
}

.mt-4 {
  margin-top: 4vw !important;
}

.copyright {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: @mainfont;
  color: #b5b5b5;
  padding: 8.533vw 0;
}

.home {
  .question-box {
    .box;
    flex-wrap: wrap;
    margin: @m04;
    margin-top: 8.933vw;

    .que-item {
      width: 50%;
      border: 0.133vw solid #f2f2f2;
      padding: 4vw 0 3.2vw 5.067vw;

      img {
        height: 6.4vw;
        margin-bottom: 2.933vw;
      }

      p {
        font-size: @mainfont;
        line-height: @mainfont;
        color: #333333;
        width: 28vw;
        text-wrap: nowrap;
        white-space: nowrap;
      }
    }
  }

  .service-box {
    .box;
    .box-tb;
    margin: @m04;
    margin-top: 12.533vw;

    .title {
      font-size: @titlefont;
      font-weight: bold;
      line-height: 3.867vw;
      color: #101010;
      margin-bottom: 6.133vw;
    }

    .service-item {
      .box;
      .box-tb;
      .box-align-center;
      width: 33.33%;

      img {
        width: 24vw;
        height: 24vw;
      }

      p {
        font-size: @mainfont;
        line-height: 9.6vw;
        color: #333333;
      }
    }

    a {
      font-size: @mainfont;
      color: #101010;
    }
  }

  .range-box {
    margin: @m04;
    margin-top: 12vw;
    background-image: linear-gradient(90deg,
        #eef6ff 0%,
        #f3f9ff 50%,
        #f8fbff 100%),
      linear-gradient(#33c6ff,
        #33c6ff);
    background-blend-mode: normal,
      normal;
    border-radius: 2.133vw;
    padding: 5.333vw 2.267vw;

    .range-top {
      .box;
      .box-align-center;
      color: #101010;

      b {
        font-size: @titlefont;
      }

      a {
        font-size: @mainfont;
      }
    }

    .range-list {
      .box;
      .box-pack-between;

      .range-item {
        width: 30%;
        height: 20.4vw;
        border-radius: 2.133vw;
        padding: 3.733vw 2.4vw 0;
        font-size: @mainfont;
        color: #333;
        position: relative;

        img {
          width: 6.933vw;
          height: 6.667vw;
          position: absolute;
          right: 2.933vw;
          bottom: 2.667vw;
        }
      }

      .ri1 {
        background-image: linear-gradient(90deg,
            #ffebec 0%,
            #fff2ee 50%,
            #fff8ef 100%),
          linear-gradient(#33c6ff,
            #33c6ff);
      }

      .ri2 {
        background-image: linear-gradient(90deg,
            #d6e8f8 0%,
            #ddedfb 50%,
            #e4f2fd 100%),
          linear-gradient(#33c6ff,
            #33c6ff);
      }

      .ri3 {
        background-image: linear-gradient(90deg,
            #e3f8f5 0%,
            #eaf7f6 50%,
            #f0f6f6 100%),
          linear-gradient(#33c6ff,
            #33c6ff);
      }
    }
  }

  .news-box {
    margin: @m04;
    margin-top: 12vw;
    background-image: linear-gradient(90deg,
        #ffffff 0%,
        #e4f1ff 100%),
      linear-gradient(#33c6ff,
        #33c6ff);
    border-radius: 2.133vw;
    padding: 6.8vw 2.8vw;

    .news-top {
      .box;
      .box-align-center;
      color: #101010;

      b {
        font-size: @titlefont;
      }

      a {
        font-size: @mainfont;
      }
    }

    .news-list {
      .box;
      .box-tb;

      .news-item {
        .box;
        .box-align-center;
        .mt-4;

        img {
          width: 43.067vw;
          height: 24.267vw;
        }

        span {
          width: 35.467vw;
          margin-left: auto;
          .text-hide(3);
          font-size: @mainfont;
        }
      }
    }

  }


}

.news {
  padding: 4vw 3.33vw;

  .newsbox {
    .box;
    .mt-4;
    padding-bottom: 4.267vw;
    border-bottom: #f2f2f2 solid 0.133vw;

    img {
      width: 43.067vw;
      border-radius: 2.667vw;
    }

    .listleft {
      font-size: @mainfont;

      span {
        margin-bottom: 4.667vw;
        color: #333333;
        display: block;
        .text-hide(3);
      }

      p {
        color: #666666;
      }
    }
  }
}

.newsdetail {
  padding: 4vw 3.33vw;

  .containar {
    .box;
    .box-tb;
    .box-center-center;

    b {
      font-size: @titlefont;
      color: #333333;
    }

    img {
      width: 100%;
      margin-top: 7.067vw;

    }
  }

  .contect {
    .box;
    .box-tb;
    margin-top: 7.2vw;
    font-size: @mainfont;
    line-height: 4.8vw;
    color: #444444;
    gap: 4vw;
  }
}

.businessarea {

  .cardtab {
    margin-top: 3.733vw;

    .van-tab--card.van-tab--active {
      background: transparent;
      background-color: #eafef4;
      border-radius: 3.333vw;
      border: solid 1px rgba(38, 182, 109, 0.59);
    }

    .van-tab--card {
      border: none;
    }

    .van-tabs__nav--card {
      border: none;
    }
  }

  .imgbox {
    .box;
    flex-wrap: wrap;
    .box-pack-between;
    margin: @m04;
    margin-top: 9.867vw;

    img {
      width: 41.333vw;
      border-radius: 2.133vw;
    }
  }
}

.about {
  .top {
    margin: @m04;
    margin-top: 8.933vw;
    .box;
    .box-pack-between;
    flex-wrap: wrap;

    .item {
      width: 44vw;
      // height: 29.333vw;
      border-radius: 2.133vw;
      margin-bottom: 4.267vw;
      padding: 4.667vw 9.867vw 4.667vw 5.2vw;

      span {
        font-size: @mdfont;
        color: #333333;
      }

      p {
        font-size: @mainfont;
        margin: 3.2vw 0;
      }

      hr {
        width: 4.4vw;
        height: 0.8vw;
        border: none;
        margin: 0;
        border-radius: 0.4vw;
      }
    }

    .i1 {
      background-image: linear-gradient(232deg,
          #fcf4f0 0%,
          #fde2de 100%),
        linear-gradient(#e8e6e6,
          #e8e6e6);

      p {
        color: #bb917b;
      }

      hr {
        background-color: #eab3ac;
      }
    }

    .i2 {
      background-image: linear-gradient(232deg,
          #f1f4ff 0%,
          #e2e5f8 100%),
        linear-gradient(#e8e6e6,
          #e8e6e6);

      p {
        color: #9196ac;
      }

      hr {
        background-color: #b7ceeb;
      }
    }

    .i3 {
      background-image: linear-gradient(232deg,
          #fcf4ec 0%,
          #faebe0 100%),
        linear-gradient(#e8e6e6,
          #e8e6e6);

      p {
        color: #9e8672;
      }

      hr {
        background-color: #e8c7a6;
      }
    }

    .i4 {
      background-image: linear-gradient(232deg,
          #fbfff9 0%,
          #e6f4df 100%),
        linear-gradient(#e8e6e6,
          #e8e6e6);

      p {
        color: #93c27b;
      }

      hr {
        background-color: #c5d8bc;
      }
    }
  }

  .introduce {
    margin: @m04;
    height: 54.533vw;
    border-radius: 2.533vw;
    margin-top: 4vw;
    background: url(/img/intro-bg.jpg) no-repeat;
    background-size: 100% auto;
    padding: 7.2vw 5.333vw;
    color: #101010;

    .title {
      font-size: @titlefont;
    }

    p {
      margin-top: 7.333vw;
      font-size: @mainfont;
      color: #333333;
      line-height: 4.8vw;
    }
  }

  .course {
    margin: @m04;
    margin-top: 11.067vw;
    background-color: #f9fcff;
    border-radius: 2.133vw;
    padding: 6.4vw 5.2vw;

    .title {
      font-size: @titlefont;
      color: #101010;
    }

    .years {
      .box;
      .box-tb;
      .box-align-center;
      margin-bottom: 4vw;

      b {
        font-size: 10.667vw;
        color: @primary-color;
        position: relative;
        margin-bottom: 4.867vw;
        line-height: 15.667vw;

        &::after {
          content: '年';
          position: absolute;
          right: -5.33vw;
          top: 0;
          width: 5.333vw;
          height: 5.333vw;
          background-color: @primary-color;
          border-radius: 50%;
          font-size: 3.2vw;
          color: #ffffff;
          text-align: center;
          line-height: 5.333vw;
        }
      }

      p {
        width: 70.267vw;
        font-size: @mainfont;
        line-height: 4.8vw;
      }


    }

    .timeline {
      width: 100%;

      img.scroll-btn {
        width: 6.4vw;
        height: 6.4vw;
      }

      .line {
        .box;
        .box-align-end;
        width: 70vw;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
          display: none;
        }

        img.active {
          width: 4.533vw;
          height: 5.333vw;
        }

        img.inactive {
          width: 1.333vw !important;
          height: 1.333vw;
        }

        .item {
          .box;
          .box-tb;
          .box-align-center;
          width: 50vw !important;
          flex-wrap: nowrap;
          white-space: nowrap;
          // padding: 0 1.333vw;

          img {
            margin-bottom: -.833vw;
            z-index: 10;
          }

          hr {
            width: 100%;
            height: 0.267vw;
            background-color: #cbcbcb;
            border: none;
          }

          p {
            font-size: @mainfont;
            line-height: 4.8vw;
            border-top: 0.267vw solid #cbcbcb;
            padding: 0 3vw;
            color: #cbcbcb;
            padding-top: .533vw;
            transition: color 0.3s ease, font-weight 0.3s ease;
          }

          .activefont {
            color: @primary-color;
            font-weight: bold;
          }
        }
      }
    }
  }

  .honor {
    margin: @m04;
    margin-top: 11.067vw;
    border-radius: 2.133vw;
    padding: 6.4vw 5.2vw;

    .title {
      font-size: @titlefont;
      color: #101010;
      margin-bottom: 6vw;
      display: block;
    }

    .imgbox {
      .box;
      gap: 6.533vw;
      width: 100%;
      overflow: hidden;

      .img {
        flex: 1;

        img {
          width: 100%;
          height: 28.4vw;
        }
      }
    }

    .pagedot {
      .box;
      .box-align-center;
      justify-content: center;
      margin-top: 6vw;

      .dot {
        width: 2.333vw;
        height: 2.333vw;
        background-color: #cbcbcb;
        border-radius: 50%;
        margin-right: 2.733vw;
        cursor: pointer;
      }

      .active {
        background-color: @primary-color;
      }
    }
  }

  .customer {
    margin: @m04;
    margin-top: 4.067vw;
    border-radius: 2.133vw;
    padding: 6.4vw 5.2vw;

    .title {
      font-size: @titlefont;
      color: #101010;
      margin-bottom: 6vw;
      display: block;
    }

    .gridbox {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 3.2vw;

      img {
        width: 24.533vw;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 2.133vw;
      }
    }
  }

  .office {
    margin: @m04;
    margin-top: 4.067vw;
    border-radius: 2.133vw;
    padding: 6.4vw 5.2vw;

    .title {
      font-size: @titlefont;
      color: #101010;
      margin-bottom: 6vw;
      display: block;
    }

    .add {
      .box;
      .box-tb;
      font-size: @mainfont;
      color: #444444;
      gap: 4.667vw;
      padding-bottom: 4.667vw;
      margin-top: 6.8vw;
      border-bottom: 0.133vw #e8e8e8 solid;

      span {
        font-size: @mdfont;
        color: #333333;
      }

      p {
        .box;
        .box-align-center;

        img {
          width: 3.2vw;
          margin-right: 2.933vw;
        }
      }
    }
  }

}

.service {
  .comfire {
    .box;
    .box-tb;
    .box-align-center;
    .box-pack-between;

    img {
      width: 8vw;
      height: 8vw;
      margin: 10vw 0 3.733vw;
    }

    b {
      font-size: @mdfont;
      color: #333333;
      margin-bottom: 9.2vw;
    }

    button {
      width: 26.667vw;
      height: 5.867vw;
      background-color: #52c41a;
      border-radius: 0.8vw;
      border: none;
      color: #ffffff;
      white-space: nowrap;
    }
  }

  .content {
    padding: 0 5.467vw;
    padding-bottom: 5.667vw;

    form {
      .box;
      .box-pack-between;
      flex-wrap: wrap;

      input {
        height: 9.867vw;
        background-color: #f5f5f5;
        border-radius: 0.8vw;
        border: none;
        margin-top: 4.4vw;
        padding-left: 3.47vw;

        ::-webkit-input-placeholder {
          color: #b5b5b5;
        }
      }

      label {
        margin-bottom: 7.47vw;
      }
    }



    .fm1 {
      label {
        width: 42.067vw;
        .box;
        .box-tb;
      }
    }

    .fm2 {
      label {
        width: 100%;

        input {
          width: 100%;
        }

        // select:active {
        //   border: none;
        // }

        // select:active,
        // :focus:focus-visible :focus-within {
        //   border: none !important;
        //   outline: none;
        // }

        select {
          width: 100%;
          height: 9.867vw;
          background-color: #f5f5f5;
          border-radius: 0.8vw;
          border: none;
          color: #333;
          padding-left: 3.47vw;
          margin-top: 4.4vw;
        }

        textarea {
          width: 100%;
          height: 34.133vw;
          background-color: #f5f5f5;
          border-radius: 0.8vw;
          border: none;
          color: #333;
          padding: 3.47vw;
          margin-top: 4.4vw;

          ::placeholder {
            color: #b5b5b5;
          }
        }
      }
    }

    button {
      width: 100%;
      height: 9.867vw;
      border: none;
      background-color: @primary-color;
      border-radius: 0.8vw;
      font-size: @mdfont;
      color: #fff;
    }
  }

  .left-box {
    .rbox {
      .btnbox {
        .box;
        justify-content: flex-end;
      }
    }
  }

  .right-box {
    .rbox {
      .btnbox {
        .box;
      }
    }
  }

  .basebox {
    .box;
    margin: @m04;
    margin-top: 8.933vw;
    background-color: #ffffff;
    box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
    border-radius: 0.133vw;
    padding: 7.2vw 6vw;
    gap: 6.667vw;
    align-items: flex-start;

    img {
      width: 10.933vw;
      margin-top: 4vw;
    }

    .rbox {
      .box;
      .box-tb;

      b {
        font-size: @mdfont;
        color: #333333;
        margin-bottom: 4.533vw;
      }

      span {
        color: #6c6c6c;
      }

      .btnbox {
        width: 100%;
        margin-top: 5.2vw;

        .know {
          width: 20vw;
          height: 6.133vw;
          background-color: @primary-color;
          border-radius: 0.8vw;
          border: none;
          color: #ffffff;
          font-weight: bold;
          white-space: nowrap;
          text-wrap: nowrap;
        }

        .ask {
          width: 20vw;
          height: 6.133vw;
          box-shadow: 0vw 0.267vw 1.16vw 0.173vw rgba(32, 163, 86, 0.07);
          border-radius: 0.8vw;
          border: none;
          color: @primary-color;
          font-weight: bold;
          white-space: nowrap;
          text-wrap: nowrap;
          margin-left: 5.333vw;
        }
      }
    }

  }
}

.apply {
  .condition {
    .box;
    .box-tb;
    margin: @m04;
    margin-top: 7.067vw;

    .tit {
      font-size: @titlefont;
      color: #101010;
      // margin-left: 4.667vw;
      margin-bottom: 6.33vw;
    }

    .conditbox {
      background: url(/img/condit-bg.png) no-repeat;
      background-size: 100% auto;
      width: 90.667vw;
      height: 27.867vw;
      background-color: #ffffff;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      border-radius: 2.133vw;
      padding: 4.4vw;
      margin-bottom: 7.067vw;
      .box;
      .box-tb;
      .box-pack-between;

      b {
        font-size: @mdfont;
        color: #333333;
      }

      span {
        font-size: 9.6vw;
        color: #00c250;
        font-weight: bold;
        opacity: 0.4;
      }

      p {
        font-size: @mainfont;
        color: #444444;
        // margin-top: 4.133vw;
      }
    }
  }

  .support-box {
    margin: @m04;


    .tit {
      .box;
      .box-align-center;
      color: #101010;

      span {
        font-size: @titlefont;
      }

      p {
        font-size: @mainfont;
        .r;
      }
    }

    img {
      margin-top: 8.267vw;
      width: 100%;
      // background-color: #dfdfdf;
      border-radius: 2.133vw 2.133vw 0.133vw 0.133vw;
    }

    .fontbox {
      position: relative;
      // background-color: #f5f5f5;
      border-radius: 0 0 2.133vw 2.133vw;
      padding: 5.467vw 4.533vw;
      background: url(/img/su-bg.png) no-repeat;
      background-size: 100% 100%;
      color: #333333;

      b {
        font-size: @mdfont;
      }

      p {
        font-size: @mainfont;
        margin-top: 1.2vw;
      }
    }
  }

  .join {
    margin: @m04;
    margin-top: 12.4vw;

    .title {
      font-size: @titlefont;
    }

    form {
      label {
        font-size: @mdfont;
        color: #333333;
        margin-top: 7.733vw;
        display: block;

        input {
          width: 100%;
          border: none;
          height: 10vw;
          background-color: #f5f5f5;
          border-radius: 0.8vw;
          padding: 0 0 0 3.067vw;
          margin-top: 4.133vw;

          :-ms-input-placeholder {
            color: #b5b5b5;
          }
        }

        textarea {
          height: 34.267vw;
          background-color: #f5f5f5;
          border-radius: 0.8vw;
          width: 100%;
          border: none;
          padding: 3.067vw 0 0 3.067vw;
          margin-top: 4.133vw;

          ::-webkit-input-placeholder {
            color: #b5b5b5;
          }
        }


      }

      button {
        width: 100%;
        height: 10vw;
        background-color: #00c250;
        border-radius: 0.8vw;
        border: none;
        margin-top: 7.6vw;
        .bs;
        font-size: @mdfont;
      }
    }
  }
}

.support {
  .box;
  .box-tb;
  padding: 7.867vw 4.667vw;

  .item {
    margin-bottom: 8.667vw;

    img {
      width: 100%;
      border-radius: 2.133vw 2.133vw 0.133vw 0.133vw;
    }

    .fontbox {
      border-radius: 0 0 2.133vw 2.133vw;
      padding: 5.467vw 4.533vw;
      background: url(/img/su-bg.png) no-repeat;
      background-size: 100% 100%;
      color: #333333;

      b {
        font-size: @mdfont;
      }

      p {
        font-size: @mainfont;
        margin-top: 1.2vw;
      }
    }
  }
}

.demand {
  padding: 7.867vw 4.667vw;

  .product {
    .productTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #101010;
      margin-bottom: 6.933vw;
    }

    .productList {
      .box;
      .box-pack-between;
      flex-wrap: wrap;

      .productItem {
        .box;
        .box-tb;
        .box-align-center;
        .box-pack-between;
        padding: 4.8vw 3.33vw;
        width: 42vw;
        height: 37.733vw;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 1.067vw;
        margin-bottom: 8vw;

        img {
          width: 9.333vw;
          height: 9.333vw;
          margin-bottom: 3.733vw;
        }

        .itemTitle {
          font-size: 3.467vw;
          color: #333333;
        }

        .itemContent {
          color: #6c6c6c;
          text-align: center;
        }
      }
    }
  }

  .industry {
    background: url(/img/industry-bg.png) no-repeat #f9fcff;
    background-size: 100% auto;
    padding: 7.2vw 2.13vw 3.33vw;

    .industryTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #101010;
      margin-bottom: 6.33vw;
    }

    .industryList {
      .box;
      .box-lr;
      padding: 4vw 0 2vw;

      .leftSide {
        .box;
        .box-tb;
        .box-align-center;
        // margin-left: 4vw;
        width: 18vw;
        min-width: 18vw;
        padding-right: 3.2vw;
        border-right: 1px solid #f3f3f3;
        margin-right: 5.2vw;

        .leftItem {
          font-size: 3.467vw;
          color: #333333;
          margin-bottom: 3.733vw;
          text-align: center;
          position: relative;
        }

        .active {
          color: #00c250;

          &::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: -3.2vw;
            width: 1px;
            height: 100%;
            background-color: #00c250;
            border-radius: 0.4vw;
          }
        }
      }

      .rightSide {
        .box;
        .box-tb;

        .rightItem {
          .box;
          .box-tb;
          font-size: 3.2vw;
          color: #6c6c6c;
          line-height: 5vw;

          b {
            color: #00c250;
          }

        }
      }
    }

  }

  .scene {
    margin-top: 12.4vw;

    .sceneTitle {
      font-size: @titlefont;
      color: #101010;
      font-weight: bold;
    }

    .sceneList {
      .box;
      overflow-x: scroll;

      .sceneItem {
        .box;
        .box-tb;
        .box-pack-between;
        margin-top: 4.267vw;
        width: 39.6vw;
        min-width: 39.6vw;
        height: 59.067vw;
        background-image: linear-gradient(-4deg,
            #dcf1fe 0%,
            #ffffff 63%),
          linear-gradient(#e8e8e8,
            #e8e8e8);
        background-blend-mode: normal,
          normal;
        border-radius: 2.133vw;
        overflow: hidden;
        padding-bottom: 3.867vw;
        margin-right: 5.2vw;

        img {
          height: 20vw;
        }

        >div {
          .box;
          .box-tb;
          margin-left: 2.933vw;
          font-size: @mainfont;
          color: #6c6c6c;
          white-space: pre-line;

          b {
            color: #333;
          }
        }
      }
    }
  }
}

.model {
  padding: 7.867vw 4.667vw;

  .modelBox {
    .box;
    .box-tb;
    margin-bottom: 11.6vw;

    .modelTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #101010;
      margin-bottom: 6.267vw;
      margin-left: 2.267vw;
    }
  }

  .coreModel {
    .coreItem {
      .box;
      .box-tb;
      position: relative;
      padding: 4.533vw 9.867vw;

      .coreItemTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333;
        margin-bottom: 4.267vw;
      }

      .coreItemContent {
        font-size: 3.2vw;
        color: #6c6c6c;
        line-height: 5vw;
      }

      .coreItemNum {
        position: absolute;
        right: 9.867vw;
        bottom: 4.267vw;
        font-size: 21.333vw;
        color: #daeafa;
        font-weight: bold;
      }
    }

    .allline {
      background: url(/img/coreItem1.png) no-repeat;
      background-size: 100% 100%;
    }

    .secondLine {
      .box;
      .box-pack-between;
      margin-top: 4.267vw;

      .coreItem {
        width: 42vw;
        background-color: #ffffff;
        border-radius: 2.133vw;
        padding: 5.733vw 4vw 10vw;
        background: url(/img/coreItem2.png) no-repeat;
        background-size: 100% 100%;

        .coreItemNum {
          font-size: 14.667vw;
          right: 3.6vw;
          bottom: 2.933vw;
        }
      }
    }
  }

  .interest {
    background-color: #f9fcff;
    border-radius: 2.133vw;
    padding: 7.733vw 3.333vw;

    .modelTitle {
      margin: 0
    }

    .interestModel {
      .box;
      .box-pack-between;
      flex-wrap: wrap;

      .interestItem {
        .box;
        .box-tb;
        .box-align-center;
        .box-pack-between;
        margin-top: 11.2vw;
        padding: 5.333vw 4.133vw 4vw;
        text-align: center;
        width: 37.6vw;
        height: 24.933vw;
        background-color: #ffffff;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 1.067vw;
        position: relative;

        img {
          position: absolute;
          top: -4vw;
          left: 50%;
          transform: translateX(-50%);
          width: 8vw;
          height: 8vw;
        }

        .interestTitle {
          font-size: 3.467vw;
          font-weight: bold;
          color: #333;
        }
      }
    }
  }

  .innovateModel {
    .innovateItem {
      .box;
      height: 26.267vw;
      background-color: #ffffff;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      border-radius: 2.133vw;
      padding: 4.8vw 4vw;
      margin-bottom: 6.133vw;

      img {
        width: 13.333vw;
        margin-right: 5.067vw;
      }

      >div {
        .box-pack-between;
        .box;
        .box-tb;
        white-space: nowrap;
      }

      .innovateTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
      }

      .innovateContent {
        p {
          color: #6c6c6c;
          font-size: 3.2vw;
        }
      }
    }
  }

  .risk {
    background-color: #f9fcff;
    border-radius: 2.133vw;
    padding: 7.733vw 3.333vw;

    .modelTitle {
      margin: 0;
      margin-bottom: 12.267vw
    }

    .riskModel {
      .box;
      .box-pack-center;
      flex-wrap: wrap;

      .riskItem {
        .box;
        .box-tb;
        .box-align-center;
        .box-pack-between;
        width: 37.867vw;
        height: 33.467vw;
        padding: 7vw 7.733vw 4.267vw;
        text-align: center;
        margin-top: 4.267vw;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
          -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
          clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #ffffff;
        }

        .riskTitle {
          position: relative;
          z-index: 1;
          font-size: 3.467vw;
          font-weight: bold;
          color: #333;
        }

        .line {
          position: relative;
          z-index: 1;
          width: 4.8vw;
          height: 0.533vw;
          border-radius: 0.267vw;
          // margin: 2.667vw 0 4.267vw;
        }

        .riskContent {
          position: relative;
          z-index: 1;
          color: #6c6c6c;
        }

        img {
          width: 8.533vw;
          height: 8.533vw;
          position: absolute;
          top: -4.267vw;
          left: 50%;
          z-index: 1;
          transform: translateX(-50%);
        }
      }

      .riskItem:nth-child(2n) {
        margin-left: auto;
      }
    }
  }


}

.development {
  padding: 7.867vw 4.667vw;

  .developmentTitle {
    font-size: 4vw;
    font-weight: bold;
    color: #333;
    margin-bottom: 4.267vw;
    padding-left: 2.133vw;
  }

  .portList {
    .box;
    .box-pack-between;
    margin-bottom: 5.867vw;
    // flex-wrap: wrap;

    .pB1 {
      width: 44.267vw;
      height: 39.2vw;
    }

    .pB2 {
      width: 28.133vw;
      height: 45.733vw;
    }

    .portItem {
      .box;
      .box-tb;
      .box-align-center;
      .box-pack-between;
      text-align: center;
      border-radius: 2.133vw;
      padding: 6vw 2.933vw;
      white-space: pre-line;

      b {
        font-size: 3.467vw;
        color: #333;
      }

      span {
        font-size: 3.2vw;
        color: #6c6c6c;
      }

      img {
        width: 9.333vw;
        height: 9.333vw;
      }
    }

    .pI0 {
      background-color: #f0fffb;
    }

    .pI1 {
      background-color: #f6f9ff;
    }

    .pI20 {
      background-color: #f0f9ff;
    }

    .pI21 {
      background-color: #f3fff6;
    }

    .pI22 {
      background-color: #f0f9ff;
    }

  }

  .solution {
    background-color: #f9fcff;
    border-radius: 2.133vw;
    padding: 6.667vw 2.667vw;

    .solutionTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #333;
    }

    .solutionList {

      .solutionItem:first-child {
        margin-top: 8.933vw;
      }

      .solutionItem {
        .box;
        .box-align-center;
        .box-pack-between;
        margin-top: 11.2vw;
        padding-left: 1.33vw;

        .content {
          .box;
          .box-tb;

          b {
            font-size: 3.467vw;
            color: #333;
            margin-bottom: 3.867vw;
          }

          >div {
            .box;
            .box-align-center;

            p {
              color: #00c250;
              font-size: 2.2vw;
              margin-right: 1.067vw;
            }
          }

          span {
            font-size: 3.2vw;
            color: #6c6c6c;
          }


        }

        img {
          width: 34.8vw;
        }
      }
    }
  }
}

.plan {
  padding: 7.867vw 4.667vw;

  .planBox {
    .planTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #333;
      padding-left: 2.133vw;
    }

    .serviceList {
      .box;
      .box-pack-between;
      margin-top: 8.133vw;

      .itemTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #fff;
      }

      .itemContent {
        font-size: 3.2vw;
        color: #fff;
      }

      .serviceItemLeft {
        padding: 4.267vw 2.133vw;
        width: 33.333vw;
        height: 36.933vw;
        background-image: linear-gradient(160deg,
            #fee68a 0%,
            #feba7c 100%),
          linear-gradient(#e3e3e3,
            #e3e3e3);
        border-radius: 2.133vw;
        position: relative;

        img {
          width: 10.667vw;
          height: 10.667vw;
          position: absolute;
          right: 2.133vw;
          bottom: 4.267vw;
        }

        b {
          margin-bottom: 1.2vw;
          display: block;
        }
      }

      .serviceItemRight {
        .box;
        .box-tb;
        .box-pack-between;

        .itemRight {
          .box;
          .box-tb;
          .box-pack-between;
          width: 53.6vw;
          height: 16.267vw;
          border-radius: 2.133vw;
          padding: 2.8vw;
          position: relative;

          img {
            position: absolute;
            right: 2.8vw;
            top: 1.733vw;
            height: 5.867vw;
          }
        }

        .iTop {
          background-image: linear-gradient(160deg,
              #8fefc8 0%,
              #3d99fa 100%),
            linear-gradient(#e3e3e3,
              #e3e3e3);
        }

        .iBottom {
          background-image: linear-gradient(160deg,
              #d7b5f7 0%,
              #ac99fb 50%,
              #807dfe 100%),
            linear-gradient(#e3e3e3,
              #e3e3e3);
        }
      }
    }
  }

  .system {
    background-color: #f9fcff;
    border-radius: 2.133vw;
    padding: 7.733vw 2.267vw;
    margin-top: 12.267vw;

    .planTitle {
      padding-left: 0;
      margin-bottom: 7.733vw;
    }

    .systemList {
      .systemItem {
        .box;
        .box-align-start;
        margin-bottom: 7.6vw;
        background-color: #ffffff;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 2.133vw;
        padding: 3.333vw 2.267vw;
        position: relative;

        >div {
          .box;
          .box-tb;
          .box-pack-between;
        }

        img {
          width: 5.867vw;
          margin-right: 3.333vw;
        }

        .itemTitle {
          font-size: 3.467vw;
          color: #333;
          margin-bottom: 3.067vw;
        }

        .itemContent {
          font-size: 3.2vw;
          color: #6c6c6c;
          white-space: nowrap;
        }

        span {
          position: absolute;
          right: 3.6vw;
          top: 2.533vw;
          font-size: 6.4vw;
          font-weight: bold;
        }
      }
    }
  }

  .productList {
    .box;
    .box-align-center;
    .box-pack-around;
    margin-top: 11.867vw;

    .btnBox {
      .box;
      .box-center-center;
      width: 10.4vw;
      height: 8.133vw;
      border-radius: 0.8vw;

      img {
        width: 4.533vw;
      }

      // 白色图标
      .whiteIcon {
        filter: brightness(0) invert(1);
      }

      .transform {
        transform: rotate(180deg);
      }
    }

    .grayBtn {
      background-color: #ebebeb;
    }

    .greenBtn {
      background-color: #00c250;
    }

    ::-webkit-scrollbar {
      display: none;
      height: 0;
    }

    .listBox {
      .box;
      width: 45.6vw;
      overflow-x: auto;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      touch-action: none;
    }

    .productItem:last-child {
      margin-right: 0
    }

    .productItem {
      .box;
      .box-tb;
      min-width: 45.6vw;
      width: 45.6vw;
      height: 60.667vw;
      background-color: #ffffff;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      border-radius: 2.133vw;
      margin-right: 2.133vw;

      >div {
        .box;
        .box-tb;
        .box-align-center;
        .box-pack-between;
        height: 100%;
        padding: 7.067vw 2.133vw;

        .itemTitle {
          font-size: 3.467vw;
          color: #333;
        }

        .itemContent {
          font-size: 3.2vw;
          color: #6c6c6c;
          white-space: pre-line;
          text-align: center;
        }
      }
    }
  }
}

.pay {
  padding: 7.867vw 4.667vw;

  .payBox {
    .payTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #101010;
      padding-left: 2.267vw;
    }
  }

  .hasBg {
    padding: 7.6vw 2.267vw;
    background-color: #f9fcff;
    border-radius: 2.133vw;
    margin-bottom: 7.6vw;

    .payTitle {
      padding-left: 0;
    }
  }

  .schemeList {
    .box;
    .box-pack-between;
    flex-wrap: wrap;
    margin-top: 7.067vw;

    .schemeItem {
      .box;
      .box-tb;
      // .box-pack-between;
      width: 41.6vw;
      height: 37.2vw;
      margin-bottom: 6.933vw;
      background-color: #ffffff;
      box-shadow: 0vw 0vw 1.067vw 0vw rgba(0, 0, 0, 0.12);
      border-radius: 1.333vw;
      padding: 3.733vw 3.333vw;
      position: relative;

      .schemeTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 3.733vw;
      }

      .schemeDesc {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
        position: relative;
        z-index: 1;
      }

      img {
        width: 17.733vw;
        position: absolute;
        right: 1vw;
        bottom: 1.733vw;
        z-index: 0;
      }
    }


  }

  .negotiation {
    // .negotiationList
    margin-top: 7.867vw;

    .negotiationLine1 {
      .box;
      .box-pack-between;
      margin-bottom: 6.533vw;

      .negotiationItem {
        padding: 3.733vw 4vw;
        width: 40.933vw;
        height: 22.133vw;
        position: relative;

        .iii {
          height: 9.6vw;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }


    }

    .negotiationLine2 {
      .box;
      .box-pack-between;

      .negotiationItem {
        .box-align-center;

        padding: 3.733vw 2.133vw;
        width: 25.6vw;
        height: 44.133vw;

        .iii {
          height: 11.733vw;
          margin: 0;
          margin-bottom: 3.33vw;
        }
      }

      .negotiationItem:last-child {
        img {
          margin-right: 1.2vw;
        }
      }
    }

    .negotiationItem {
      .box;
      .box-tb;
      // .box-pack-between;
      background-color: #ffffff;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      border-radius: 2.133vw;

      .negotiationTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 2.133vw;
      }

      .negotiationDesc {
        .box;
        .box-tb;
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
        line-height: 5vw;

        >div {
          .box;
          .box-align-center;

          img {
            height: 2vw;
            margin-right: 3.6vw;
          }
        }
      }
    }
  }

  .advantageList {
    .box;
    .box-align-center;
    .box-pack-around;
    margin-top: 11.867vw;
    flex-wrap: wrap;

    .advantageItem {
      .box;
      .box-tb;
      .box-align-center;
      width: 25%;
      margin-bottom: 6.8vw;
      color: #333333;

      img {
        width: 12.4vw;
        height: 12.4vw;
        margin-bottom: 3.2vw;
      }
    }
  }

  .apiBox {
    width: 90.667vw;
    height: 29.2vw;
    background-color: #ffffff;
    border-radius: 2.133vw;
    padding: 3.733vw 8.267vw;
    background: url(/img/apiBg.png) no-repeat center center;
    background-size: 100% 100%;
    margin-bottom: 6.133vw;

    .apiTitle {
      font-size: 3.467vw;
      font-weight: bold;
      color: #333333;
      margin-bottom: 4.8vw;
    }

    .apiDesc {
      .box;
      .box-pack-between;
      font-size: 3.2vw;
      color: #6c6c6c;
      white-space: pre-line;

      >div {
        .box;
      }
    }
  }

  .processList {
    .box;
    .box-tb;
    margin-top: 7.33vw;

    img {
      height: 3.467vw;
      margin-top: 4.533vw;
    }

    .line {
      .box;
      .box-pack-between;

      >div {
        .box;
        .box-tb;
        .box-align-center;
        width: 30%;

        img {
          width: 12.533vw;
          height: 12.533vw;
          margin-bottom: 3.33vw;
          margin-top: 0;
        }

        b {
          font-size: 3.467vw;
          font-weight: bold;
          color: #333333;
          margin-bottom: 3.33vw;
        }

        span {
          font-size: 3.2vw;
          color: #6c6c6c;
          text-align: center;
        }
      }
    }

    .trs90 {
      transform: rotate(90deg);
    }

    .trs180 {
      transform: rotate(180deg);
    }
  }
}

.finance {
  padding: 7.867vw 4.667vw;

  .financeBox {
    .financeTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #101010;
      padding-left: 2.267vw;
    }
  }

  .painPoint {
    .box;
    .box-align-center;
    .box-pack-around;
    margin-top: 7.067vw;
    flex-wrap: wrap;

    .painPointItem:nth-child(2n) {
      border-right: none;
    }

    .painPointItem:nth-child(3),
    .painPointItem:nth-child(4) {
      border-bottom: none;
    }

    .painPointItem {
      .box;
      .box-tb;
      .box-align-center;
      width: 50%;
      // height: 40vw;
      text-align: center;
      padding: 5.733vw 6.4vw;
      border-right: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;

      img {
        width: 9.6vw;
        height: 9.6vw;
        margin-bottom: 2.8vw;
      }

      .painPointTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 3.33vw;
      }

      .painPointDesc {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
      }
    }
  }

  .financeBox.hasBg {
    background-color: #f9fcff;
    border-radius: 0.133vw;
    padding: 7.333vw 2.667vw;
    margin-top: 7.33vw;
    margin-bottom: 12.4vw;

    .financeTitle {
      padding-left: 0;
      margin-bottom: 8.4vw;
    }

    .optimizingList {
      .box;
      .box-align-center;
      .box-pack-around;
      overflow-x: auto;

      .optimizingItem {
        .box;
        .box-tb;
        .box-align-center;
        width: 37.333vw;
        margin-right: 4.933vw;
        min-width: 37.333vw;
        height: 61.067vw;
        background-color: #ffffff;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 2.133vw;
        padding: 4.933vw 4vw;

        img {
          height: 12.4vw;
          margin-bottom: 3.2vw;
        }

        .optimizingTitle {
          font-size: 3.467vw;
          font-weight: bold;
          color: #333333;
          margin-bottom: 3.33vw;
        }

        .optimizingDesc {
          font-size: 3.2vw;
          color: #6c6c6c;
          white-space: pre-line;
        }
      }
    }
  }

  .cooperationList {
    .box;
    .box-tb;
    width: 100%;
    margin-top: 7.33vw;

    .cooperationItem {
      .box;
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      border-radius: 2.133vw;
      padding: 4.933vw 5.067vw;
      margin-bottom: 6.8vw;

      img {
        width: 8.667vw;
        margin-right: 3.2vw;
      }

      >div {
        .box;
        .box-tb;
        width: 100%;
        height: 100%;
      }

      .cooperationTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 3.33vw;
      }

      .cooperationDesc {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
      }
    }
  }
}

.brand {
  padding: 7.867vw 4.667vw;

  .brandTitle {
    font-size: 4vw;
    font-weight: bold;
    color: #101010;
    padding-left: 2.267vw;
    margin-bottom: 7.33vw;
  }

  .brandServiceList {
    .serviceItem {
      .box;
      gap: 8vw;
      padding: 4.267vw 7.6vw;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      border-radius: 2.133vw;
      margin-bottom: 6.8vw;

      img {
        width: 22.267vw;
      }

      .itemTitle {
        display: block;
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 3.33vw;
      }

      .itemContent {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
      }
    }
  }

  .brandBox {
    background-color: #f9fcff;
    border-radius: 2.133vw;
    padding: 7.867vw 2.267vw;

    .brandTitle {
      padding-left: 0;
      margin-bottom: 8.4vw;
    }

    .brandProductList {
      .box;
      .box-align-center;
      .box-pack-around;
      margin-top: 11.867vw;

      .btnBox {
        .box;
        .box-center-center;
        width: 10.4vw;
        height: 8.133vw;
        border-radius: 0.8vw;

        img {
          width: 4.533vw;
        }

        // 白色图标
        .whiteIcon {
          filter: brightness(0) invert(1);
        }

        .transform {
          transform: rotate(180deg);
        }
      }

      .grayBtn {
        background-color: #ebebeb;
      }

      .greenBtn {
        background-color: #00c250;
      }

      ::-webkit-scrollbar {
        display: none;
        height: 0;
      }

      .listBox {
        .box;
        width: 45.6vw;
        overflow-x: auto;
        overflow-y: hidden;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        touch-action: none;
      }

      .productItem:last-child {
        margin-right: 0
      }

      .productItem {
        .box;
        .box-tb;
        min-width: 45.6vw;
        width: 45.6vw;
        height: 56.133vw;
        background-color: #ffffff;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 2.133vw;
        margin-right: 2.133vw;

        >div {
          .box;
          .box-tb;
          .box-align-center;
          .box-pack-between;
          height: 100%;
          padding: 7.067vw 2.133vw;

          .itemTitle {
            font-size: 3.467vw;
            color: #333;
          }

          .itemContent {
            font-size: 3.2vw;
            color: #6c6c6c;
            white-space: pre-line;
            text-align: center;
          }
        }
      }
    }
  }
}

.consultation {
  padding: 7.867vw 4.667vw;

  .consultationBox {
    .consultationTitle {
      font-size: 4vw;
      font-weight: bold;
      color: #101010;
      padding-left: 2.267vw;
      margin-bottom: 12.33vw;
    }
  }

  .coreSolution {
    .box;
    .box-pack-between;
    flex-wrap: wrap;

    .solutionItem {
      .box;
      .box-tb;
      .box-align-center;
      width: 43.2vw;
      border-radius: 2.133vw;
      padding: 9.2vw 4vw;
      margin-bottom: 6.8vw;

      img {
        width: 10.667vw;
        height: 10.667vw;
        margin-top: -14.3vw;
        margin-bottom: 3.6vw;
      }

      .itemTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 6vw;
      }

      .itemContent {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
      }
    }

    .sI0 {
      background-image: linear-gradient(180deg,
          #eff5f9 0%,
          #ffffff 100%),
        linear-gradient(#f0f6f9,
          #f0f6f9);
    }

    .sI1 {
      background-image: linear-gradient(180deg,
          #fdf4f5 0%,
          #ffffff 100%),
        linear-gradient(#f0f6f9,
          #f0f6f9);
    }

    .sI2 {
      background-image: linear-gradient(180deg,
          #e4fcee 0%,
          #ffffff 100%),
        linear-gradient(#f0f6f9,
          #f0f6f9);
    }

    .sI3 {
      background-image: linear-gradient(180deg,
          #ffefe2 0%,
          #ffffff 100%),
        linear-gradient(#f0f6f9,
          #f0f6f9);
    }
  }

  .hasBg {
    padding: 7.867vw 2.267vw;
    background-color: #f9fcff;
    border-radius: 0.133vw;
    margin-bottom: 6.8vw;

    .consultationTitle {
      padding-left: 0;
      margin-bottom: 9.33vw;
    }

    .serviceModeList {
      .box;
      .box-pack-between;
      width: 100%;

      .modeItem:nth-child(2) {
        b::after {
          background-color: #b5cdff !important;
        }
      }

      .modeItem {
        .box;
        .box-tb;
        padding: 3.467vw 3.2vw 3.467vw 3.867vw;
        width: 26.933vw;
        background-color: #ffffff;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 2.133vw;

        b {
          font-size: 3.467vw;
          font-weight: bold;
          color: #333333;
          margin-bottom: 3.733vw;
          white-space: nowrap;
          position: relative;
          z-index: 1;

          &::after {
            content: '';
            display: block;
            width: 8vw;
            height: 1.6vw;
            background-color: #f1c7d5;
            border-radius: 0.8vw;
            position: absolute;
            left: 0;
            bottom: 0vw;
            z-index: -1;
          }
        }



        .itemContent {
          font-size: 3.2vw;
          color: #6c6c6c;
          white-space: pre-line;
        }
      }
    }
  }

  .reasonList {
    .box;
    .box-tb;

    .reasonItem {
      .box;
      padding: 6.533vw 7.2vw;
      box-shadow: 0vw 0vw 1.067vw 0vw rgba(0, 0, 0, 0.12);
      border-radius: 2.133vw;
      margin-bottom: 6.933vw;

      img {
        width: 19.867vw;
        margin-right: 6.333vw;
      }

      b {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 5.6vw;
        display: block;
      }

      .itemContent {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
      }
    }
  }
}

.resources {
  padding: 7.867vw 4.667vw;

  .resourcesTitle {
    font-size: 4vw;
    font-weight: bold;
    color: #101010;
    padding-left: 2.267vw;
    margin-bottom: 7.6vw;
  }

  .entranceList {
    .box;
    .box-pack-between;
    margin-bottom: 12.8vw;

    .eI1 {
      background-color: #f1fff8;
    }

    .eI2 {
      background-color: #fffcee;
    }

    .eI3 {
      background-color: #f2f5ff;
    }

    .entranceItem {
      width: 26.933vw;
      height: 27.067vw;
      border-radius: 2.133vw;
      padding: 3.2vw 3.733vw;
      position: relative;
      z-index: 1;

      b {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 3.2vw;
        white-space: nowrap;
        display: block;
      }

      .itemContent {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
      }

      img {
        position: absolute;
        width: 8.267vw;
        right: 0;
        bottom: 0;
        z-index: -1;
      }
    }
  }

  .matchBox {
    background-color: #f9fcff;
    border-radius: 0.133vw;
    padding: 7.867vw 2.533vw;
    margin-bottom: 12.8vw;

    .resourcesTitle {
      padding-left: 0;
      margin-bottom: 7.6vw;
    }

    .matchList {
      .box;
      .box-pack-between;
      width: 100%;

      .matchItem {
        .box;
        .box-tb;
        .box-align-center;
        padding: 4.133vw 3.733vw;
        width: 26.933vw;
        // height: 37.733vw;
        background-color: #ffffff;
        box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
        border-radius: 2.133vw;

        span {
          font-size: 4.8vw;
          font-weight: bold;
          color: #00c250;
          margin-bottom: 3.733vw;
        }

        b {
          font-size: 3.467vw;
          font-weight: bold;
          color: #333333;
          margin-bottom: 3.6vw;
          white-space: nowrap;
        }

        .itemContent {
          font-size: 3.2vw;
          color: #6c6c6c;
          white-space: pre-line;
          text-align: center;
        }
      }
    }
  }

  .matrixList {
    .box;
    .box-tb;
    width: 100%;

    .matrixItem {
      .box;
      padding: 4.667vw 6.933vw;
      width: 100%;
      margin-bottom: 6.933vw;
      // height: 29.867vw;
      background-color: #ffffff;
      box-shadow: 0vw 0vw 2.133vw 0vw rgba(205, 205, 205, 0.24);
      border-radius: 2.133vw;

      img {
        width: 24.133vw;
        margin-right: 8.8vw;
      }

      .itemTitle {
        font-size: 3.467vw;
        font-weight: bold;
        color: #333333;
        margin-bottom: 4.267vw;
        white-space: nowrap;
        display: block;
      }

      .itemContent {
        font-size: 3.2vw;
        color: #6c6c6c;
        white-space: pre-line;
      }
    }
  }
}