.banner {
  position: relative;
  margin-top: 4.3229166667vw; }
  .banner img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 28.28125vw; }
  .banner .text {
    position: absolute;
    left: 0;
    top: 8.3333333333vw;
    width: 100%;
    text-align: center;
    color: #fff; }
    .banner .text .t {
      font-weight: 600;
      line-height: 1; }
    .banner .text .p1 {
      margin: 2.9166666667vw 0 0.4166666667vw;
      font-weight: 500;
      line-height: 1.4; }
    .banner .text .p2 {
      line-height: 1.625;
      opacity: .7; }

.container {
  padding-bottom: 6.6145833333vw; }
  .container .sec1 {
    padding: 5.6770833333vw 10.4166666667vw 9.7916666667vw; }
    .container .sec1 .t {
      text-align: center;
      margin-bottom: 1.875vw; }
      .container .sec1 .t p {
        display: inline-block;
        color: #036;
        font-weight: 700;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.1458333333vw;
        align-items: center; }
        .container .sec1 .t p::after {
          content: '';
          display: block;
          width: 4.1666666667vw;
          height: 0.2083333333vw;
          background: #036;
          border-radius: 1.0416666667vw; }
    .container .sec1 .list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0; }
      .container .sec1 .list .item {
        width: 100%;
        padding: 1.3020833333vw 2.0833333333vw 0.78125vw;
        transition: all 600ms;
        position: relative; }
        .container .sec1 .list .item .b_top {
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .container .sec1 .list .item .b_top .icon {
            display: flex;
            width: 2.5vw;
            height: 2.5vw;
            justify-content: center;
            align-items: center;
            background: #F3F4F6;
            transition: all 600ms; }
            .container .sec1 .list .item .b_top .icon img {
              display: block;
              width: 1.0416666667vw;
              transition: all 600ms; }
          .container .sec1 .list .item .b_top p {
            color: #121212;
            font-weight: 700;
            line-height: 1.33;
            transition: all 600ms; }
        .container .sec1 .list .item .pt {
          margin: 1.5625vw 0 5.3645833333vw;
          color: #121212;
          font-weight: 500;
          transition: all 600ms;
          line-height: 1.33; }
        .container .sec1 .list .item .text {
          border-top: 1px solid #D1D1D1;
          padding-top: 0.8333333333vw;
          transition: all 600ms; }
          .container .sec1 .list .item .text .des {
            color: #6A7282;
            line-height: 1.625;
            height: 3.5416666667vw;
            transition: all 600ms; }
        .container .sec1 .list .item .more {
          position: absolute;
          left: 2.0833333333vw;
          bottom: 2.2395833333vw;
          color: #033491;
          font-weight: 500;
          transition: all 600ms; }
          .container .sec1 .list .item .more p {
            line-height: 1.33;
            margin-bottom: 0.78125vw; }
          .container .sec1 .list .item .more .icon {
            width: 2.0833333333vw;
            height: 2.0833333333vw;
            border-radius: 50%;
            border: 1px solid #033491;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            transition: all 600ms; }
            .container .sec1 .list .item .more .icon img {
              display: block;
              width: 0.8333333333vw; }
        .container .sec1 .list .item:hover {
          background: #F8FAFC; }
          .container .sec1 .list .item:hover .b_top .icon {
            background: #033491; }
            .container .sec1 .list .item:hover .b_top .icon img {
              filter: invert(1); }
          .container .sec1 .list .item:hover .b_top p {
            color: #033491; }
          .container .sec1 .list .item:hover .pt {
            color: #033491; }
          .container .sec1 .list .item:hover .text {
            border-color: #033491; }
            .container .sec1 .list .item:hover .text .des {
              color: #033491; }
        .container .sec1 .list .item.getItem:hover {
          background: #033491; }
          .container .sec1 .list .item.getItem:hover .more {
            color: #fff; }
            .container .sec1 .list .item.getItem:hover .more .icon {
              border-color: transparent; }
  .container .sec2 {
    background: linear-gradient(112deg, #F8FAFC 0%, #F8FAFC 100%);
    padding: 5.0520833333vw 12.96875vw 4.6354166667vw 10.7291666667vw; }
    .container .sec2 .title {
      display: flex;
      gap: 0.4166666667vw;
      align-items: flex-start;
      margin-bottom: 3.3333333333vw; }
      .container .sec2 .title img {
        display: block;
        width: 1.6666666667vw;
        margin-top: 0.1041666667vw; }
      .container .sec2 .title .text {
        flex: 1; }
        .container .sec2 .title .text .p1 {
          color: #036;
          font-weight: 700;
          line-height: 1.5; }
        .container .sec2 .title .text .p2 {
          color: #666;
          margin-top: 0.5208333333vw; }
    .container .sec2 .cases .swiper1 {
      width: 100%;
      overflow: hidden; }
      .container .sec2 .cases .swiper1 .swiper-slide {
        padding: 0.5208333333vw 0; }
      .container .sec2 .cases .swiper1 .item {
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .container .sec2 .cases .swiper1 .item .pic {
          width: 38.2291666667vw;
          border-radius: 0.5208333333vw;
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
          overflow: hidden; }
          .container .sec2 .cases .swiper1 .item .pic img {
            width: 100%;
            height: 22.3958333333vw;
            object-fit: cover; }
        .container .sec2 .cases .swiper1 .item .text {
          width: 29.21875vw;
          text-align: center; }
          .container .sec2 .cases .swiper1 .item .text .pt {
            color: #0F172B;
            line-height: 1.4;
            font-weight: 500;
            margin-bottom: 1.6666666667vw; }
          .container .sec2 .cases .swiper1 .item .text .des {
            color: #666;
            line-height: 2.03;
            margin: 0 0.78125vw; }
    .container .sec2 .set {
      margin-top: 2.1354166667vw;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .container .sec2 .set .swiper-pagination {
        width: 60.4166666667vw;
        position: static;
        height: 1px;
        background: #DDD; }
        .container .sec2 .set .swiper-pagination .swiper-pagination-progressbar-fill {
          background: #033491;
          height: 0.2083333333vw;
          border-radius: 0.5208333333vw;
          margin-top: -0.0520833333vw; }
      .container .sec2 .set .btns {
        display: flex;
        gap: 2.0833333333vw; }
        .container .sec2 .set .btns .prev,
        .container .sec2 .set .btns .next {
          width: 4.1666666667vw;
          height: 4.1666666667vw;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #033491;
          border-radius: 50%;
          cursor: pointer;
          transition: all 600ms; }
          .container .sec2 .set .btns .prev svg,
          .container .sec2 .set .btns .next svg {
            display: block;
            width: 1.25vw;
            height: auto;
            transition: all 600ms; }
          .container .sec2 .set .btns .prev:hover,
          .container .sec2 .set .btns .next:hover {
            background: #033491; }
            .container .sec2 .set .btns .prev:hover svg,
            .container .sec2 .set .btns .next:hover svg {
              filter: brightness(0) invert(1); }

@media screen and (max-width: 768px) {
  .banner {
    margin-top: 60px; }
    .banner img {
      height: 200px; }
    .banner .text {
      top: 50%;
      transform: translateY(-50%);
      padding: 0 5%; }
      .banner .text .t {
        font-size: 24px; }
      .banner .text .p1 {
        font-size: 16px;
        margin: 20px 0 8px; }
      .banner .text .p2 {
        font-size: 14px; }

  .container {
    padding-bottom: 40px; }
    .container .sec1 {
      padding: 30px 5%; }
      .container .sec1 .t {
        margin-bottom: 20px; }
        .container .sec1 .t p {
          gap: 15px; }
          .container .sec1 .t p::after {
            width: 60px;
            height: 3px; }
      .container .sec1 .list {
        grid-template-columns: 1fr;
        gap: 20px; }
        .container .sec1 .list .item {
          padding: 20px; }
          .container .sec1 .list .item .b_top .icon {
            width: 40px;
            height: 40px; }
            .container .sec1 .list .item .b_top .icon img {
              width: 18px; }
          .container .sec1 .list .item .pt {
            margin: 20px 0 60px;
            font-size: 16px; }
          .container .sec1 .list .item .text {
            padding-top: 12px; }
            .container .sec1 .list .item .text .des {
              height: auto;
              font-size: 14px; }
          .container .sec1 .list .item .more {
            left: 20px;
            bottom: 20px;
            position: static;
            display: flex;
            align-items: center;
            gap: 20px;
            justify-content: center; }
            .container .sec1 .list .item .more p {
              font-size: 18px;
              margin-bottom: 0; }
            .container .sec1 .list .item .more .icon {
              width: 32px;
              height: 32px; }
              .container .sec1 .list .item .more .icon img {
                width: 12px; }
    .container .sec2 {
      padding: 30px 5%; }
      .container .sec2 .title {
        margin-bottom: 20px;
        gap: 8px; }
        .container .sec2 .title img {
          width: 24px;
          margin-top: 2px; }
        .container .sec2 .title .text .p1 {
          font-size: 18px; }
        .container .sec2 .title .text .p2 {
          font-size: 13px;
          margin-top: 8px; }
      .container .sec2 .cases .swiper1 .item {
        flex-direction: column;
        gap: 20px; }
        .container .sec2 .cases .swiper1 .item .pic {
          width: 100%; }
          .container .sec2 .cases .swiper1 .item .pic img {
            height: 200px; }
        .container .sec2 .cases .swiper1 .item .text {
          width: 100%; }
          .container .sec2 .cases .swiper1 .item .text .pt {
            margin-bottom: 10px; }
          .container .sec2 .cases .swiper1 .item .text .des {
            font-size: 14px;
            margin: 0;
            line-height: 1.6; }
      .container .sec2 .set {
        margin-top: 30px;
        flex-direction: column;
        gap: 20px; }
        .container .sec2 .set .swiper-pagination {
          width: 100%; }
          .container .sec2 .set .swiper-pagination .swiper-pagination-progressbar-fill {
            height: 4px;
            margin-top: -1px; }
        .container .sec2 .set .btns {
          gap: 20px; }
          .container .sec2 .set .btns .prev,
          .container .sec2 .set .btns .next {
            width: 40px;
            height: 40px; }
            .container .sec2 .set .btns .prev svg,
            .container .sec2 .set .btns .next svg {
              width: 18px; } }

/*# sourceMappingURL=service.css.map */