img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover
}

.img_bor {
  border-radius: 1.04167vw;
  overflow: hidden
}

.item_hover {
  overflow: hidden
}

.item_hover:hover img {
  transform: scale(1.05)
}

.item_hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .6s ease
}

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1
}

.about1 {
  height: 100vh;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center
}

.about1 .color {
  width: 14.58333vw
}

.about1 .position {
  position: absolute;
  right: 4.27083vw;
  top: 13.90625vw;
  text-align: right
}

.about1 .position .p1 {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 .52083vw
}

.about1 .position .p2 {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.about2 {
  padding: 7.29167vw 0 1.45833vw 0;
  display: flex;
  justify-content: space-between;
  overflow: hidden
}

.about2 .l {
  width: 22.8125vw
}

.about2 .l img {
  width: 100%
}

.about2 .l .text {
  margin: 1.97917vw 0 0 1.04167vw;
  color: #323232;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.about2 .r {
  width: 65.52083vw
}

.about2 .r img {
  width: 100%
}

.about2 .r .text {
  padding: 0 1.04167vw 0 0;
  margin: 1.97917vw 0 0;
  text-align: right;
  color: #323232;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.about3 {
  padding: 8.33333vw 7.60417vw 3.79167vw 6.77083vw;
  display: flex;
  justify-content: space-between;
  position: relative
}

.about3 .map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%
}

.about3 .map img {
  width: 100%
}

.about3 .title {
  color: #313232;
  font-weight: 700
}

.about3 .r .flex {
  display: flex;
  gap: 1.51042vw
}

.about3 .r .flex .line {
  width: 2px;
  height: 13.48958vw;
  background: rgba(153, 153, 153, 0.4);
  margin-top: .72917vw
}

.about3 .r .flex .nr .text {
  width: 41.04167vw;
  color: #646464;
  text-align: justify;
  line-height: 2.22
}

.about3 .r .flex .nr .more {
  display: flex;
  gap: .88542vw;
  align-items: center;
  margin: 47px 0 0 0
}

.about3 .r .flex .nr .more:hover .circle {
  background: #1D2088
}

.about3 .r .flex .nr .more:hover .circle svg path {
  fill: #fff
}

.about3 .r .flex .nr .more .circle {
  width: 2.65625vw;
  height: 2.65625vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  border: 1px solid #1D2088;
  justify-content: center;
  transition: .6s ease
}

.about3 .r .flex .nr .more .circle svg {
  width: 1.04167vw
}

.about3 .r .flex .nr .more .circle svg path {
  transition: all 600ms
}

.about3 .r .flex .nr .more p {
  color: #636464;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: .6s ease
}

.about3 .gc {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%
}

.about3 .gc img {
  width: 100%
}

.about3 .gc .icon {
  position: absolute;
  left: 38.85417vw;
  top: -3.64583vw
}

.about3 .gc .icon img {
  width: 19.42708vw
}

.about4 .title {
  color: #F4F4F4;
  font-size: 8.85417vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  padding: 5.20833vw 0 0 3.54167vw
}

.about4 .video {
  width: 100%;
  height: 47.29167vw;
  position: relative;
  margin-top: -1.04167vw
}

.about4 .video .img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.about4 .video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: .6s ease
}

.about4 .video .play.on {
  opacity: 0;
  pointer-events: none
}

.about4 .video .play img {
  width: 14.63542vw
}

.about4 .video .play .playImg {
  width: 5.78125vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer
}

.about4 .video .play .playImg2 {
  opacity: 0
}

.footer {
  margin-top: -3.64583vw;
  position: relative;
  z-index: 5
}

@keyframes goAnimate {
  100% {
    transform: translateX(-50%)
  }
}

.about5 {
  background: #1D2088;
  height: 56.25vw;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 0 3.64583vw
}

.about5 .headline {
  height: 5.26042vw;
  border-radius: 0 0 1.04167vw 1.04167vw;
  background: #18207A;
  padding: 0 2.70833vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

.about5 .headline .title {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.about5 .headline .cen_img {
  width: 8.64583vw
}

.about5 .headline .cen_img img {
  width: 100%
}

.about5 .headline .brand {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.about5 .position_line {
  position: absolute;
  top: 45%;
  left: 3.85417vw;
  transform: translateY(-50%);
  display: flex;
  align-items: center
}

.about5 .position_line .circle {
  width: 3.125vw;
  height: 3.125vw;
  border-radius: 50%;
  background: #F4E74B;
  position: relative;
  top: 2.34375vw;
  left: .52083vw
}

.about5 .position_line .svg {
  width: 96.35417vw
}

.about5 .position_line .svg .go {
  width: max-content;
  display: flex;
  animation: goAnimate 4s linear infinite
}

.about5 .position_line .svg .go svg {
  width: 96.35417vw;
  height: max-content
}

.about5 .position_line .svg .go svg:nth-child(2n) {
  position: relative;
  top: -3.59375vw;
  left: -.41667vw
}

.about5 .abSwiper {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.about5 .abSwiper.on {
  cursor: grabbing;
}

.about5-mouse {
  width: 4.5833vw;
  height: 4.5833vw;
  position: absolute;
  right: 3.3854vw;
  bottom: 8.3333vw;
  z-index: 20;
}

.about5-mouse img {
  width: 100%;
}

.about5-mouse span {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  left: 0;
  cursor: pointer;
}

.about5-mouse span.next {
  left: auto;
  right: 0;
}

.ripple-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1
}

.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  border-radius: 50%;
  border: 16px solid #353681;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: rippleAni 20s ease-out infinite;
}


@keyframes rippleAni {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

#connect-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

#connect-path {
  stroke: #F4E74B;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.about5 .abSwiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.about5 .abSwiper .swiper-slide:nth-child(2n) .item .pick {
  margin: 0;
  top: -7.8125vw
}

.about5 .abSwiper .swiper-slide:nth-child(2n) .item .r {
  top: 5.20833vw
}

.about5 .abSwiper .swiper-slide .item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.70833vw
}

.about5 .abSwiper .swiper-slide .item .pick {
  width: 21.875vw;
  color: #FFF;
  text-align: justify;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  margin: 17.91667vw 0 0 0;
  position: relative
}

.about5 .abSwiper .swiper-slide .item .year {
  color: #FFF;
  font-size: 11.14583vw;
  font-style: normal;
  font-weight: 630;
  line-height: normal;
  position: relative;
  z-index: 1
}

.about5 .abSwiper:after {
  content: '';
  position: absolute;
  width: 7.8125vw;
  height: 7.8125vw;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #F4E74B;
  filter: blur(40px);
  z-index: -1
}

.about5 .abSwiper .swiper-slide .item .r {
  width: 21.875vw;
  position: relative;
  top: -10.41667vw;
  left: -5.20833vw
}

.about5 .abSwiper .swiper-slide .item .img {
  width: 19.63542vw;
  height: 16.40625vw
}

.about5 .abSwiper .swiper-slide .item .img img {
  width: 100%;
  height: 100%
}

.about5 .ab2Swiper {
  position: absolute;
  width: 57.29167vw;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  cursor: pointer
}

.about5 .ab2Swiper .swiper-slide {
  padding: 0 0 1.04167vw
}

.about5 .ab2Swiper .swiper-slide.swiper-slide-thumb-active .item p {
  font-weight: bold;
  transform: translateY(0)
}

.about5 .ab2Swiper .swiper-slide.swiper-slide-thumb-active .item:after {
  transform: scaleX(1)
}

.about5 .ab2Swiper .swiper-slide .item {
  position: relative
}

.about5 .ab2Swiper .swiper-slide .item:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1.04167vw;
  background: #F4E74B;
  transform: scaleX(0);
  transform-origin: left;
  transition: .3s ease
}

.about5 .ab2Swiper .swiper-slide .item p {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  line-height: normal;
  transform: translateY(1.04167vw);
  transition: .6s ease
}

.about6 {
  background: #1D2088;
  overflow: hidden;
  padding: 0 0 7.8125vw
}

.about6 .title {
  width: 23.80208vw;
  margin: auto;
  position: relative;
  z-index: 1;
  text-align: center
}

.about6 .title .p1 {
  color: rgba(255, 255, 255, 0.2);
  font-style: normal;
  font-weight: 400;
  line-height: 120%
}

.about6 .title .p2 {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: relative;
  top: -2.60417vw
}

.about6 .title svg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: max-content;
  z-index: -1
}

.about6 .content {
  margin: 5.20833vw 0 0 0
}

.about6 .content .matter:not(:last-child) {
  margin: 0 0 5.20833vw
}

.about6 .content .matter:nth-child(2n) .go {
  animation-direction: reverse
}

.about6 .content .matter .go {
  width: max-content;
  display: flex;
  animation: goAnimate 35s linear infinite
}

.about6 .content .matter .go .flex {
  display: flex;
  align-items: center
}

.about6 .content .matter .go .flex .img {
  margin: 0 6.25vw 0 0
}

.about7 {
  padding: 3.54167vw 15.625vw 9.0625vw 15.625vw;
  overflow: hidden
}

.about7 .top {
  width: max-content;
  margin: auto;
  position: relative;
  z-index: 1
}

.about7 .top .title {
  color: #1D2088;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 131.499%;
  position: relative
}

.about7 .top .title img {
  width: 49.89583vw;
  position: absolute;
  left: -.3125vw;
  bottom: -1.71875vw;
  z-index: -1;
  max-width: unset;
  max-height: unset;
  object-fit: contain
}

.about7 .top .more {
  width: 8.64583vw;
  height: 2.08333vw;
  border-radius: 1.5625vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1D2088;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border: 1px solid #1D2088;
  transition: .6s ease;
  margin: 3.75vw auto 0
}

.about7 .top .more:hover {
  background: #1D2088;
  color: #fff
}

.about7 .content {
  perspective: 2000px;
  margin: 2.34375vw 0 0 0
}

.about7 .content .mySwiper {
  overflow: unset
}

.about7 .content .mySwiper .swiper-slide {
  perspective: 2000px
}

.about7 .content .mySwiper .swiper-slide.swiper-slide-active .item {
  opacity: 1;
  transform: rotateX(0);
  transition-delay: .3s
}

.about7 .content .mySwiper .swiper-slide .item {
  transform-style: preserve-3d;
  transform: rotateX(180deg);
  opacity: 0;
  transition: opacity .3s, transform 1s .3s
}

.about7 .content .item {
  display: flex;
  align-items: center
}

.about7 .content .item:not(:last-child) {
  margin: 0 0 4.6875vw
}

.about7 .content .item:nth-child(2n) {
  flex-direction: row-reverse
}

.about7 .content .item:nth-child(2n) .pic {
  left: 1.04167vw
}

.about7 .content .item .text {
  width: 43.95833vw;
  height: auto;
  border-radius: 2.08333vw;
  background: #DFE1E5;
  padding: .52083vw 3.28125vw .52083vw 2.34375vw
}

.about7 .content .item .text p {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.about7 .content .item .pic {
  width: 4.16667vw;
  height: 4.16667vw;
  border-radius: 50%;
  overflow: hidden;
  border: .20833vw solid #fff;
  position: relative;
  left: -1.04167vw
}

.about7 .content .item .pic img {
  width: 100%;
  height: 100%
}

.about9 {
  padding: 7.604vw 0 0;
  overflow: hidden;
}

.map-box {
  position: relative;
}

.map-box .pic {
  width: 100%;
}

.map-box .pic img {
  width: 100%;
}

.map-box svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.map-box.on path {
  animation: svgani-dash 2s linear infinite;
  fill: none;
  stroke: #1D2087;
  stroke-width: 2;
  stroke-dasharray: 10, 5;
}

.map-box .icon {
  width: 65vw;
  position: absolute;
  left: 17.5vw;
  top: 7.395vw;
}

.map-box .icon img {
  width: 100%;
}

.map-box .line path {
  fill: none;
  stroke-width: 2px;
  stroke-dashoffset: 1280px;
  stroke-dasharray: 10, 5;
  animation: svgani-dash 2s linear infinite;
}

.map-box .point path {
  animation: svgani-shink 0.8s linear infinite alternate;
  transform-origin: center;
}

.map-box .mark path {
  animation: svgani-jump 0.8s linear infinite alternate;
  transform-origin: center;
}

.map-box .zhong {
  animation: svgani-jump-big 1.6s linear infinite alternate;
  transform-origin: center;
}

@keyframes svgani-dash {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes svgani-shink {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

@keyframes svgani-jump {
  0% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes svgani-jump-big {
  0% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .about7 {
    padding: 30px 5% 120px 5%
  }

  .about7 .top {
    width: 100%
  }

  .about7 .top .title img {
    width: 100%
  }

  .about7 .top .more {
    width: max-content;
    height: 40px;
    border-radius: 30px;
    padding: 0 20px;
    margin: 30px auto 0
  }

  .about7 .content {
    margin: 40px 0 0 0
  }

  .about7 .content .item {
    flex-direction: column-reverse !important;
    align-items: unset;
    gap: 20px
  }

  .about7 .content .item:not(:last-child) {
    margin: 0 0 30px
  }

  .about7 .content .item .pic {
    width: 70px;
    height: 70px;
    border-width: 3px
  }

  .about7 .content .item .text {
    width: 100%;
    height: auto;
    border-radius: 10px;
    padding: 15px 5%
  }

  .about6 {
    padding: 0 0 120px
  }

  .about6 .title {
    width: 90%
  }

  .about6 .title .p2 {
    top: 0
  }

  .about6 .content {
    margin: 60px 0 0 0
  }

  .about6 .content .matter:not(:last-child) {
    margin: 0 0 30px
  }

  .about6 .content .matter .go .flex .img {
    margin: 0 60px 0 0
  }

  .about6 .content .matter .go .flex .img img {
    width: 120px;
    height: 40px;
    object-fit: contain
  }

  .img_bor {
    border-radius: 15px
  }

  .about1 .position {
    right: 5%;
    top: 30%
  }

  .about2 {
    padding: 30px 0
  }

  .about2 .l .text {
    margin: 20px 0 0 20px
  }

  .about2 .r .text {
    margin: 20px 0 0 0;
    padding: 0 20px 0 0
  }

  .about3 {
    padding: 30px 5% 120px 5%;
    flex-direction: column
  }

  .about3 .r {
    margin: 15px 0 0 0
  }

  .about3 .r .line {
    display: none
  }

  .about3 .r .flex .nr .text {
    width: 100%;
    color: #969696;
    font-size: 14px;
    line-height: 1.8
  }

  .about3 .r .flex .nr .more {
    gap: 15px;
    margin-top: 15px
  }

  .about3 .r .flex .nr .more .circle {
    width: 30px;
    height: 30px
  }

  .about3 .r .flex .nr .more .circle svg {
    width: 15px
  }

  .about4 .title {
    padding: 30px 5% 0 5%
  }

  .about4 .video {
    height: auto
  }

  .about4 .video .play img {
    width: 100px
  }

  .about4 .video .play .playImg {
    width: 50px
  }

  .about5 {
    height: auto;
    flex-direction: column;
    align-items: unset;
    padding: 0 0 70px
  }

  .about5 .common_bg {
    display: none
  }

  .about5 .headline {
    height: auto;
    position: static;
    padding: 40px 5%;
    flex-direction: column;
    align-items: unset;
    gap: 20px
  }

  .about5 .headline .cen_img {
    width: 150px
  }

  .about5 .position_line {
    display: none
  }

  .about5 .abSwiper {
    margin: 0 0 30px
  }

  #connect-path {
    stroke-width: 7;
  }

  .about5 .abSwiper .swiper-slide .item {
    flex-direction: column;
    padding: 45px 5%;
    align-items: unset
  }

  .about5 .abSwiper .swiper-slide:nth-child(2n) .item {
    flex-direction: column-reverse;
  }

  .about5 .abSwiper .swiper-slide .item .pick {
    top: 0 !important;
    margin: 0 !important;
    width: 100%
  }

  .about5 .abSwiper .swiper-slide .item .r {
    left: 0 !important;
    width: 100%;
    height: 100%;
    top: 0 !important;
    margin: 20px 0 0 0
  }

  .about5 .abSwiper .swiper-slide .item .r .img {
    width: 100%;
    height: 100%
  }

  .about5 .ab2Swiper {
    width: 90%;
    bottom: 90px
  }

  .footer {
    margin-top: -70px
  }

  .about9 {
    padding: 73px 0 0;
  }

  .map-box .icon {
    width: 64%;
    left: 18%;
    top: 36px;
  }

  .about5-mouse {
    width: 44px;
    height: 44px;
    right: auto;
    bottom: 5vw;
    left: 5vw;
  }
}