.w1600 {
  width: 83.33333vw;
  margin: 0 auto
}

.sec1 {
  background: #F8F8F8;
  padding: 6.25vw 0 4.27083vw
}

.sec1 .t {
  margin-bottom: 3.28125vw;
  font-weight: 600
}

.sec1 .wrap .r {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.08333vw
}

.sec1 .wrap .r .item .item_box {
  width: 100%;
  /* height: 11.51042vw; */
  background: #FFF;
  padding: 1.5625vw;
  transition: 0.6s;
  color: #666;
  font-weight: 400;
  line-height: 1.75;
}

.sec1 .wrap .r .item .item_box .icon {
  width: 2.60417vw;
  height: 2.60417vw;
  display: flex;
  align-items: center
}

.sec1 .wrap .r .item .item_box .icon img {
  display: block;
  max-width: 100%;
  max-height: 100%
}

.sec1 .wrap .r .item .item_box h5 {
  margin: .83333vw 0 .625vw;
  color: #000;
  font-weight: 600
}

.sec1 .wrap .r .item .item_box p {
  color: #666;
  font-weight: 400;
  line-height: 1.75
}

.sec1 .wrap .r .item:hover .item_box {
  transform: translateY(-1.04167vw)
}

.sec2 {
  padding-top: 6.25vw
}

.sec2 .t {
  font-weight: 600
}

.sec2 .tip {
  margin: 1.25vw 0 2.08333vw 0
}

.sec2 .cases {
  position: relative
}

.sec2 .cases .pic img,
.sec2 .cases .pic video {
  width: 100%
}

.sec2 .cases .play {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.sec2 .cases .play img {
  width: 5.20833vw
}

.sec3 {
  padding: 6.25vw 0
}

.sec3 .wrap .title {
  color: #000;
  font-weight: 600;
  margin-bottom: 3.125vw
}

.sec3 .wrap .content {
  display: flex;
  justify-content: space-between
}

.sec3 .wrap .content .big {
  width: 61.35417vw;
  height: 33.33333vw
}

.sec3 .wrap .content .big .img {
  width: 100%;
  height: 100%;
  overflow: hidden
}

.sec3 .wrap .content .big .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

.sec3 .wrap .content .small_box {
  display: flex;
  gap: 0 1.5625vw
}

.sec3 .wrap .content .small_box .swiper-pagination {
  width: 2px;
  background: rgba(0, 0, 0, 0.1);
  position: unset;
  display: block !important
}

.sec3 .wrap .content .small_box .swiper-pagination .swiper-pagination-progressbar-fill {
  background: #1E6EEC
}

.sec3 .wrap .content .small_box .swiper {
  width: 18.85417vw;
  height: 33.33333vw
}

.sec3 .wrap .content .small_box .swiper .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer
}

.sec3 .wrap .content .small_box .swiper .swiper-slide p {
  color: #FFF;
  font-weight: 400;
  position: absolute;
  left: 1.04167vw;
  bottom: 1.04167vw;
  transition: 0.6s
}

.sec3 .wrap .content .small_box .swiper .swiper-slide .img {
  width: 100%;
  height: 100%;
  overflow: hidden
}

.sec3 .wrap .content .small_box .swiper .swiper-slide .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

.sec3 .wrap .content .small_box .swiper .swiper-slide.swiper-slide-thumb-active p {
  color: #1E6EEC
}

.sec3 .wrap .content .small_box .swiper .swiper-slide:hover .img img {
  transform: scale(1.1)
}

.sec3 .wrap .content .small_box .swiper .swiper-slide:hover p {
  color: #1E6EEC
}

.sec4 {
  padding: 6.25vw 0;
  padding-top: 0
}

.sec4 .wrap .title {
  color: #000;
  font-weight: 600;
  margin-bottom: 3.125vw
}

.sec4 .wrap .table table {
  width: 100%;
  border-collapse: collapse
}

.sec4 .wrap .table table tr:nth-child(3) td:nth-child(1) {
  width: 13.33333vw
}

.sec4 .wrap .table table tr td {
  border: 1px solid #D9D9D9;
  text-align: center;
  color: #000;
  font-size: .83333vw;
  font-weight: 400;
  line-height: 1.5;
  height: 2.91667vw
}

.sec4 .wrap .table table tr td p {
  color: #1E6EEC;
  font-size: .83333vw;
  font-weight: 400
}

.sec4 .wrap .table table tr:nth-child(1) td {
  height: 6.09375vw
}

.sec5 {
  padding-bottom: 6.25vw
}

.sec5 .title {
  padding: 0 8.33333vw;
  font-weight: 600
}

.sec5 .con {
  margin-top: 3.125vw
}

.sec5 .con .tags {
  margin: 0 8.33333vw 2.08333vw 8.33333vw;
  border-bottom: 1px solid #E6E6E6;
  /* height: 1.5625vw; */
  display: flex
}

.sec5 .con .tags span {
    font-weight: 500;
    margin-right: 2.08333vw;
    position: relative;
    display: flex;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    margin-bottom: 0.8333vw;
}


.sec5 .con .tags span.on {
  color: #1366EC
}

.sec5 .con .tags span.on::after {
  opacity: 1
}

.sec5 .con .tags span::after {
  content: '';
  position: absolute;
  bottom: -0.8333vw;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1366EC;
  transition: all 0.6s;
  opacity: 0
}
.sec5 .con .boxs {
  position: relative
}

.sec5 .con .boxs .box {
  display: flex;
  transition: opacity 0.3s;
  height: 40vw;
  width: 100%
}

.sec5 .con .boxs .box .swiper {
  overflow: hidden;
  width: 100%;
  height: 100%
}

.sec5 .con .boxs .box .swiper .swiper-slide {
  height: 37.5vw;
  overflow: hidden;
  position: relative
}

.sec5 .con .boxs .box .swiper .swiper-slide a {
  display: flex;
  width: 100%;
  height: 100%
}

.sec5 .con .boxs .box .swiper .swiper-slide::after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 600ms;
  pointer-events: none
}

.sec5 .con .boxs .box .swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: all 0.6s
}

.sec5 .con .boxs .box .swiper .swiper-slide.swiper-slide-active,
.sec5 .con .boxs .box .swiper .swiper-slide.swiper-slide-duplicate-active {
  transform: scale(1)
}

.sec5 .con .boxs .box .swiper .swiper-slide.swiper-slide-active:hover img,
.sec5 .con .boxs .box .swiper .swiper-slide.swiper-slide-duplicate-active:hover img {
  transform: scale(1.05)
}

.sec5 .con .boxs .box .swiper .swiper-slide.swiper-slide-active::after,
.sec5 .con .boxs .box .swiper .swiper-slide.swiper-slide-duplicate-active::after {
  opacity: 0
}

.sec5 .con .boxs .prev {
  position: absolute;
  left: 24.27083vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer
}

.sec5 .con .boxs .prev img {
  width: 3.125vw
}

.sec5 .con .boxs .next {
  position: absolute;
  right: 24.27083vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer
}

.sec5 .con .boxs .next img {
  width: 3.125vw
}

@media screen and (max-width: 768px) {
  .w1600 {
    width: 90%
  }

  .sec1 {
    padding: 60px 0
  }

  .sec1 .wrap .r {
    gap: 30px 0;
    width: 100%;
    margin: 30px 0 0;
    grid-template-columns: repeat(1, 1fr)
  }

  .sec1 .wrap .r .item {
    width: 100%
  }

  .sec1 .wrap .r .item .item_box {
    width: 100%;
    height: unset;
    padding: 30px
  }

  .sec1 .wrap .r .item .item_box .icon {
    width: 40px;
    height: 40px
  }

  .sec1 .wrap .r .item .item_box h5 {
    margin: 20px 0 10px
  }

  .sec2 {
    padding-top: 60px
  }

  .sec2 .tip {
    margin: 12px 0 20px 0
  }

  .sec2 .cases .play img {
    width: 40px
  }

  .sec3 {
    padding: 30px 0
  }

  .sec3 .wrap .title {
    margin-bottom: 40px
  }

  .sec3 .wrap .content {
    display: block
  }

  .sec3 .wrap .content .big {
    width: 100%;
    height: 48vw;
    margin-bottom: 10px
  }

  .sec3 .wrap .content .small_box {
    flex-direction: column-reverse
  }

  .sec3 .wrap .content .small_box .swiper {
    width: 100%;
    height: 100px
  }

  .sec3 .wrap .content .small_box .swiper .swiper-slide p {
    font-size: 14px;
    left: 7px;
    bottom: 7px
  }

  .sec3 .wrap .content .small_box .swiper-pagination {
    width: 100%;
    height: 3px;
    margin: 20px 0 0
  }

  .sec4 {
    padding: 0 0 60px
  }

  .sec4 .wrap .title {
    margin-bottom: 40px
  }

  .sec4 .wrap .table {
    overflow-x: scroll
  }

  .sec4 .wrap .table table {
    width: max-content
  }

  .sec4 .wrap .table table tr td {
    width: unset !important;
    padding: 0 20px;
    font-size: 14px;
    height: 50px
  }

  .sec4 .wrap .table table tr td p {
    font-size: 14px
  }

  .sec4 .wrap .table table tr:nth-child(1) td {
    height: 80px;
    padding: 10px 20px
  }

  .sec5 {
    padding: 30px 0
  }

  .sec5 .title {
    padding: 0 5%
  }

  .sec5 .title h6 {
    margin: 10px 0
  }

  .sec5 .con .tags {
    margin: 15px 5% 15px 5%;
    flex-wrap: wrap;
    height: auto;
    border-bottom: none
  }

  .sec5 .con .tags span {
    margin-bottom: 10px;
    width: 22%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px
  }
  .sec5 .con .tags span:first-child {
    margin-right: 0;
  }
  .sec5 .con .tags span:last-child {
    margin-right: 0;
  }
  .sec5 .con .tags span::after {
    bottom: -10px;
    width: 80%;
  }
  .sec5 .con .boxs .box {
    height: 150px
  }

  .sec5 .con .boxs .box .swiper-slide {
    width: 100%;
    height: 100% !important
  }

  .sec5 .con .boxs .box .swiper-slide img {
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: cover
  }
}