body {
  background: #EBF5FF;
}

.banner {
  width: 100%;
  height: 25vw;
  position: relative;
}

.banner .text {
  position: absolute;
  z-index: 3;
  bottom: 4.16667vw;
  padding: 0 8.33333vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.banner .text .t {
  font-family: var(--main-font);
  color: #FFF;
  font-weight: 400;
  line-height: 110%;
  text-transform: uppercase;
}

.banner .text .p {
  width: 39.16667vw;
  color: #FFF;
  text-align: right;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}

.banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section {
  padding: 8.38542vw 8.33333vw 8.07292vw;
}

.section .sec_top {
  display: flex;
  justify-content: space-between;
}

.section .sec_top .item {
  width: 39.375vw;
  height: 19.89583vw;
  border-radius: 0.9375vw;
  position: relative;
  overflow: hidden;
  padding: 3.125vw 4.6875vw 0;
}

.section .sec_top .item .item_top {
  display: flex;
  gap: 0.88542vw;
  align-items: center;
  margin-bottom: 1.875vw;
}

.section .sec_top .item .item_top .en {
  color: #FFF;
  font-family: var(--main-font);
  font-size: 5.03906vw;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
  margin: -0.78125vw 0 0;
}

.section .sec_top .item .item_top .h5 {
  color: #FFF;
  font-family: var(--main-font);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  padding: 0 0 0 0.72917vw;
  border-left: 0.05208vw solid #FFFFFF;
}

.section .sec_top .item .p {
  color: #FFF;
  font-weight: 400;
  line-height: 150%;
}

.section .sec_top .item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 3s;
}

.section .sec_top .item:hover img {
  transform: scale(1.1);
}

.section .list {
  padding: 10.78125vw 0 0;
  position: relative;
}

.section .list .line {
  position: absolute;
  left: 8.90625vw;
  top: 0;
}

.section .list .line svg {
  display: block;
  width: 51.92708vw;
  height: unset;
}

.section .list .line svg path.pt1 {
  stroke-dasharray: 7933;
  stroke-dashoffset: 7933;
}

.section .list .line svg path.pt2 {
  stroke-dasharray: 768;
  stroke-dashoffset: 768;
}

.section .list .item {
  display: flex;
  position: relative;
  z-index: 3;
}

.section .list .item .dian {
  width: 1.66667vw;
  height: 1.66667vw;
  background: #003460;
  border-radius: 50%;
  border: 0.15625vw solid #fff;
  opacity: 0;
  transition: 0.4s;
}

.section .list .item .text_box {
  opacity: 0;
  transform: translateY(1.5625vw);
  transition: 0.6s;
}

.section .list .item .text_box .h5 {
  color: #003460;
  font-family: var(--main-font);
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}

.section .list .item .text_box .p {
  color: #003460;
  font-weight: 400;
  line-height: 150%;
  margin: 1.25vw 0 0;
}

.section .list .item .img {
  width: 50.83333vw;
  height: 28.90625vw;
  overflow: hidden;
  border-radius: 0.9375vw;
  opacity: 0;
  transform: translateY(1.5625vw);
  transition: 0.6s;
}

.section .list .item .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 2s;
}

.section .list .item .img:hover img {
  transform: scale(1.1);
}

.section .list .item.on .dian {
  opacity: 1;
}

.section .list .item.on .text_box,
.section .list .item.on .img {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.section .list .item1 {
  padding: 0 0 0 4.21875vw;
  align-items: center;
  margin-bottom: 9.47917vw;
}

.section .list .item1 .dian {
  margin: 0 3.22917vw 0 2.55208vw;
}

.section .list .item1 .text_box {
  width: 20.26042vw;
}

.section .list .item2 {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}

.section .list .item2 .img {
  width: 35.83333vw;
  height: 31.14583vw;
}

.section .list .item2 .dian {
  margin: 0 4.16667vw 0 2.03125vw;
}

.section .list .item2 .text_box {
  width: 35.41667vw;
}

.section .list .item3 {
  margin: 8.59375vw 0 4.84375vw auto;
  display: block;
  width: fit-content;
}

.section .list .item3 .img {
  width: 67.91667vw;
  height: 15.10417vw;
}

.section .list .item3 .text_box {
  width: 39.94792vw;
  margin: 4.11458vw 0 0 auto;
  position: relative;
}

.section .list .item3 .dian {
  position: absolute;
  left: -6.5vw;
    top: 6.02083vw;
}

.section .list .item4 {
  justify-content: flex-end;
  align-items: center;
}

.section .list .item4 .text_box {
  width: 32.96875vw;
}

.section .list .item4 .dian {
  margin: 0 2vw 0 2.29167vw;
}

.section .list .item4 .img {
  width: 39.58333vw;
  height: 32.86458vw;
}

.section .list .item5 {
  margin: 9.53125vw 0 9.32292vw;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.section .list .item5 .dian {
  margin: 0 2.29167vw 0 3.17708vw;
}

.section .list .item5 .text_box {
  width: 25vw;
}

.section .list .item5 .img {
  width: 46.875vw;
  height: 23.33333vw;
  border-radius: 0.75vw;
}

.section .list .item6 {
  align-items: center;
  justify-content: flex-end;
}

.section .list .item6 .dian {
  margin: 0 2.8125vw 0 1.5625vw;
}

.section .list .item6 .text_box {
  width: 23.125vw;
}

.section .list .item6 .img {
  width: 48.5625vw;
  height: 28.875vw;
  border-radius: 0.75vw;
}

.section .list .item7 {
  margin: 9.73958vw 0 3.69792vw;
  justify-content: flex-end;
  align-items: center;
}

.section .list .item7 .dian {
  margin: 0 1.8229vw 0 1.5625vw;
}

.section .list .item7 .text_box {
  width: 33.75vw;
}

.section .list .item7 .img {
  width: 39vw;
  height: 33.375vw;
}

.section .list .item8 {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

.section .list .item8 .img {
  width: 37.875vw;
  height: 33.375vw;
}

.section .list .item8 .dian {
  margin: 0 2.1875vw;
}

.section .list .item8 .text_box {
  width: 35vw;
}

.section .list_phone {
  padding: 10.78125vw 0 0;
  position: relative;
  display: none;
}

.section .list_phone .line {
  position: absolute;
  left: 8.90625vw;
  top: 0;
}

.section .list_phone .line svg {
  display: block;
  width: 51.92708vw;
  height: unset;
}

.section .list_phone .line svg path.pt1 {
  stroke-dasharray: 7933;
  stroke-dashoffset: 7933;
}

.section .list_phone .line svg path.pt2 {
  stroke-dasharray: 768;
  stroke-dashoffset: 768;
}

.section .list_phone .item {
  display: flex;
  position: relative;
  z-index: 3;
}

.section .list_phone .item .dian {
  width: 1.66667vw;
  height: 1.66667vw;
  background: #003460;
  border-radius: 50%;
  border: 0.15625vw solid #fff;
  opacity: 0;
  transition: 0.4s;
}

.section .list_phone .item .text_box {
  opacity: 0;
  transform: translateY(1.5625vw);
  transition: 0.6s;
}

.section .list_phone .item .text_box .h5 {
  color: #003460;
  font-family: var(--main-font);
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}

.section .list_phone .item .text_box .p {
  color: #003460;
  font-weight: 400;
  line-height: 150%;
  margin: 1.25vw 0 0;
}

.section .list_phone .item .img {
  width: 50.83333vw;
  height: 28.90625vw;
  overflow: hidden;
  border-radius: 0.9375vw;
  opacity: 0;
  transform: translateY(1.5625vw);
  transition: 0.6s;
}

.section .list_phone .item .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 2s;
}

.section .list_phone .item .img:hover img {
  transform: scale(1.1);
}

.section .list_phone .item.on .dian {
  opacity: 1;
}

.section .list_phone .item.on .text_box,
.section .list_phone .item.on .img {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.section .list_phone .item1 {
  padding: 0 0 0 4.21875vw;
  align-items: center;
  margin-bottom: 9.47917vw;
}

.section .list_phone .item1 .dian {
  margin: 0 3.22917vw 0 2.55208vw;
}

.section .list_phone .item1 .text_box {
  width: 20.26042vw;
}

.section .list_phone .item2 {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}

.section .list_phone .item2 .img {
  width: 35.83333vw;
  height: 31.14583vw;
}

.section .list_phone .item2 .dian {
  margin: 0 4.16667vw 0 2.03125vw;
}

.section .list_phone .item2 .text_box {
  width: 35.41667vw;
}

.section .list_phone .item3 {
  margin: 8.59375vw 0 4.84375vw auto;
  display: block;
  width: fit-content;
}

.section .list_phone .item3 .img {
  width: 67.91667vw;
  height: 15.10417vw;
}

.section .list_phone .item3 .text_box {
  width: 39.94792vw;
  margin: 4.11458vw 0 0 auto;
  position: relative;
}

.section .list_phone .item3 .text_box .dian {
  position: absolute;
  left: -4.01042vw;
  top: 50%;
  transform: translateY(-50%);
}

.section .list_phone .item4 {
  justify-content: flex-end;
  align-items: center;
}

.section .list_phone .item4 .text_box {
  width: 32.96875vw;
}

.section .list_phone .item4 .dian {
  margin: 0 2.70833vw 0 2.29167vw;
}

.section .list_phone .item4 .img {
  width: 39.58333vw;
  height: 32.86458vw;
}

.section .list_phone .item5 {
  margin: 9.53125vw 0 9.32292vw;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.section .list_phone .item5 .dian {
  margin: 0 2.29167vw 0 3.17708vw;
}

.section .list_phone .item5 .text_box {
  width: 25vw;
}

.section .list_phone .item5 .img {
  width: 46.875vw;
  height: 23.33333vw;
  border-radius: 0.75vw;
}

.section .list_phone .item6 {
  align-items: center;
  justify-content: flex-end;
}

.section .list_phone .item6 .dian {
  margin: 0 3.64583vw 0 1.5625vw;
}

.section .list_phone .item6 .text_box {
  width: 23.125vw;
}

.section .list_phone .item6 .img {
  width: 48.5625vw;
  height: 28.875vw;
  border-radius: 0.75vw;
}

.section .list_phone .item7 {
  margin: 9.73958vw 0 3.69792vw;
  justify-content: flex-end;
  align-items: center;
}

.section .list_phone .item7 .dian {
  margin: 0 2.60417vw 0 1.5625vw;
}

.section .list_phone .item7 .text_box {
  width: 33.75vw;
}

.section .list_phone .item7 .img {
  width: 39vw;
  height: 33.375vw;
}

.section .list_phone .item8 {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

.section .list_phone .item8 .img {
  width: 37.875vw;
  height: 33.375vw;
}

.section .list_phone .item8 .dian {
  margin: 0 2.1875vw;
}

.section .list_phone .item8 .text_box {
  width: 35vw;
}
@media screen and (min-width: 2566px){
.section .list .item3 .dian {
  position: absolute;
  left: -7.2vw;
}
.section .list .item4 .dian {
  margin: 0 2.7vw 0 2.29167vw;
}

}

@media screen and (max-width: 1920px){
.section .list .item3 .dian {
  position: absolute;
  left: -6.5vw;
}
.section .list .item4 .dian {
  margin: 0 1.9vw 0 2.29167vw;
}
.section .list .item6 .dian{
  margin: 0 2.7vw 0 1.5625vw;
}
.section .list .item7 .dian{
  margin: 0 1.5229vw 0 1.5625vw;
}

}

@media screen and (max-width: 1700px){
.section .list .item3 .dian {
  position: absolute;
  left: -7.2vw;
}
.section .list .item4 .dian {
  margin: 0 2.65vw 0 2.29167vw;
}
.section .list .item6 .dian{
  margin: 0  3.5vw 0 1.5625vw;
}
.section .list .item7 .dian{
  margin: 0 2.5229vw 0 1.5625vw;
}

}

@media screen and (max-width: 1280px){
.section .list .item3 .dian{
  left: -7.2vw;
}
    .section .list .item4 .dian {
        margin: 0 2.65vw 0 2.29167vw;
    }
        .section .list .item6 .dian {
        margin: 0 3.3vw 0 1.5625vw;
    }
        .section .list .item7 .dian {
        margin: 0 2.4229vw 0 1.5625vw;
    }
    .section .list .item8 .dian{
      margin: 0 2.3875vw;
    }
}

@media screen and (max-width: 768px) {
  .banner {
    margin-top: 60px;
    height: 300px;
  }

  .banner .text {
    display: block;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 5%;
  }

  .banner .text .t {
    width: 100%;
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  .banner .text .p {
    width: 100%;
    text-align: left;
    font-size: 15px;
  }

  .section {
    padding: 30px 5vw;
  }

  .section .wrap .sec_top .item {
    width: 48%;
    height: unset;
    padding: 10px;
    border-radius: 15px;
  }

  .section .wrap .sec_top .item .item_top {
    gap: 10px;
    margin-bottom: 15px;
  }

  .section .wrap .sec_top .item .item_top .en {
    font-size: 12px;
  }

  .section .wrap .sec_top .item .item_top .h5 {
    padding: 0 0 0 5px;
    font-size: 12px;
  }

  .section .wrap .sec_top .item .p {
    font-size: 10px;
  }

  .section .wrap .list {
    display: none;
  }

  .section .wrap .list .line {
    display: none;
    padding: 30px 0 0;
  }

  .section .wrap .list .item {
    flex-direction: column-reverse !important;
    width: 100%;
    padding: 0 !important;
    opacity: 0;
    transform: translateY(30px);
    transition: all 2s;
  }

  .section .wrap .list .item.animated {
    opacity: 1;
    transform: translateY(0);
  }

  .section .wrap .list .item .img {
    opacity: 1 !important;
    transform: unset !important;
    width: 100% !important;
    height: 50vw !important;
    border-radius: 10px;
    margin-bottom: 15px;
  }

  .section .wrap .list .item .dian {
    display: none;
  }

  .section .wrap .list .item .text_box {
    width: 100% !important;
    opacity: 1 !important;
    transform: unset !important;
  }

  .section .wrap .list .item .text_box .h5 {
    font-size: 18px;
  }

  .section .wrap .list .item .text_box .p {
    font-size: 14px;
  }

  .section .wrap .list_phone {
    display: block;
  }

  .section .wrap .list_phone .line {
    display: none;
    padding: 30px 0 0;
  }

  .section .wrap .list_phone .item {
    flex-direction: column-reverse !important;
    width: 100%;
    padding: 0 !important;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(30px);
    gap: 15px;
    transition: all 2s;
  }

  .section .wrap .list_phone .item.animated {
    opacity: 1;
    transform: translateY(0);
  }

  .section .wrap .list_phone .item .img {
    opacity: 1 !important;
    transform: unset !important;
    width: 100% !important;
    height: 50vw !important;
    border-radius: 10px;
  }

  .section .wrap .list_phone .item .dian {
    display: none;
  }

  .section .wrap .list_phone .item .text_box {
    width: 100% !important;
    opacity: 1 !important;
    transform: unset !important;
  }

  .section .wrap .list_phone .item .text_box .h5 {
    font-size: 18px;
  }

  .section .wrap .list_phone .item .text_box .p {
    font-size: 14px;
  }
}