.home {
  background: linear-gradient(270deg, #00030F 0%, #040042 100%)
}

.banner {
  position: relative
}

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

.banner .text {
  position: absolute;
  left: 8.33333vw;
  bottom: 11.97917vw;
  color: #FFF
}

.banner .text .t {
  font-weight: 700;
  font-family: "Space Grotesk";
  margin-bottom: 1.25vw
}

.banner .text .p {
  width: 34.01042vw;
  color: #FFF;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05vw
}

.container {
  overflow: hidden
}

.sec1 {
  padding: 8.33333vw 8.33333vw 0;
  position: relative
}

.sec1 .bg {
  position: absolute;
  background: rgba(199, 227, 255, 0.14);
  filter: blur(6.25vw)
}

.sec1 .bg1 {
  width: 17.44792vw;
  height: 22.13542vw;
  border-radius: 22.13542vw;
  top: 6.25vw;
  left: 36.45833vw;
  transform: rotate(-135deg)
}

.sec1 .bg2 {
  width: 55.9375vw;
  height: 30.05208vw;
  border-radius: 55.9375vw;
  background: rgba(114, 115, 249, 0.2);
  top: 13.80208vw;
  left: 22.03125vw
}

.sec1 .bg3 {
  width: 23.85417vw;
  height: 30.26042vw;
  transform: rotate(-135deg);
  border-radius: 30.26042vw;
  background: rgba(49, 0, 51, 0.3);
  top: 13.02083vw;
  right: -7.8125vw
}

.sec1 .wrap {
  position: relative;
  z-index: 3;
  width: 100%
}

.sec1 .wrap .title {
  color: #FFF;
  text-align: center;
  font-weight: 700
}

.sec1 .wrap .des {
  width: 27.39583vw;
  margin: 1.25vw auto 5vw;
  color: #FFF;
  text-align: center;
  font-weight: 300;
  line-height: 1.75
}

.sec1 .wrap .img {
  width: 28.07292vw;
  margin: 0 auto;
  position: relative
}

.sec1 .wrap .img>img {
  display: block;
  width: 100%
}

.sec1 .wrap .img .line_box {
  position: absolute;
  width: 53.125vw;
  top: -3.85417vw;
  left: 50%;
  transform: translateX(-50%)
}

.sec1 .wrap .img .line_box .item {
  position: absolute;
  max-width: 8.33333vw
}

.sec1 .wrap .img .line_box .item .cir {
  width: .83333vw;
  height: .83333vw;
  border-radius: 50%;
  background: #C7E3FF
}

.sec1 .wrap .img .line_box .item .h5 {
  margin: .52083vw 0 .57292vw;
  color: #C7E3FF;
  font-weight: 500;
  text-transform: uppercase
}

.sec1 .wrap .img .line_box .item .p {
  color: rgba(199, 227, 255, 0.7);
  font-weight: 500
}

.sec1 .wrap .img .line_box .item:nth-child(1) {
  left: 9.58333vw;
  top: 5.78125vw
}

.sec1 .wrap .img .line_box .item:nth-child(1) .cir {
  margin-left: .625vw
}

.sec1 .wrap .img .line_box .item:nth-child(2) {
  left: 32.23958vw;
  top: .78125vw
}

.sec1 .wrap .img .line_box .item:nth-child(2) .cir {
  position: absolute;
  left: -2.44792vw;
  bottom: -.26042vw
}

.sec1 .wrap .img .line_box .item:nth-child(3) {
  left: 43.90625vw;
  top: -3.22917vw
}

.sec1 .wrap .img .line_box img {
  display: block;
  width: 100%
}

.sec1 .wrap .content {
  width: 72.91667vw;
  margin: -12.23958vw auto 3.125vw;
  position: relative
}

.sec1 .wrap .line1 {
  width: 81.25vw;
  position: absolute;
  top: -1.71875vw;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%)
}

.sec1 .wrap .line1 img {
  display: block;
  width: 100%
}

.sec1 .wrap .box {
  width: 72.91667vw;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(230, 231, 255, 0) 16.49%, rgba(230, 231, 255, 0.2) 100%);
  backdrop-filter: blur(1.5625vw);
  padding: .3125vw 1.04167vw 1.19792vw;
  position: relative
}

.sec1 .wrap .box:after {
  content: "";
  width: 23.85417vw;
  height: 30.26042vw;
  transform: rotate(-135deg);
  border-radius: 30.26042vw;
  background: rgba(49, 0, 51, 0.1);
  filter: blur(6.25vw);
  position: absolute;
  top: -15.625vw;
  right: -15.83333vw
}

.sec1 .wrap .box .flex {
  display: flex;
  width: 100%;
  position: relative
}

.sec1 .wrap .box .flex:not(:last-child):after {
  content: "";
  width: 60.9375vw;
  height: .05208vw;
  background: linear-gradient(to right, rgba(199, 227, 255, 0), #c7e3ff, rgba(199, 227, 255, 0));
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  left: 50%
}

.sec1 .wrap .box .flex .item {
  width: 33.333%;
  padding: 2.08333vw 0;
  position: relative
}

.sec1 .wrap .box .flex .item:not(:last-child):after {
  content: "";
  width: .05208vw;
  height: 7.39583vw;
  background: linear-gradient(to bottom, rgba(199, 227, 255, 0), #c7e3ff, rgba(199, 227, 255, 0));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0
}

.sec1 .wrap .box .flex .item .icon {
  width: 9.375vw;
  height: 5.72917vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .625vw;
  transition: 0.8s
}

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

.sec1 .wrap .box .flex .item p {
  color: #FFF;
  font-weight: 700;
  line-height: 1.16;
  text-align: center
}

.sec1 .wrap .box .flex .item:hover .icon {
  animation: rotateY 0.6s forwards linear
}

.sec1 .wrap .list .item {
  width: 100%;
  border-radius: .83333vw;
  border: .05208vw solid rgba(79, 172, 254, 0.14);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 .20833vw .3125vw-.20833vw rgba(79, 172, 254, 0.04), 0 .52083vw .78125vw-.15625vw rgba(79, 172, 254, 0.04), 0 0 0 0 transparent, 0 0 0 0 transparent;
  backdrop-filter: blur(.3125vw);
  padding: 2.76042vw 7.29167vw 2.8125vw 3.125vw
}

.sec1 .wrap .list .item:not(:last-child) {
  margin-bottom: 1.25vw
}

.sec1 .wrap .list .item .h5 {
  color: #FFF;
  font-weight: 700;
  line-height: 1.5;
  text-transform: capitalize;
  margin-bottom: 1.09375vw
}

.sec1 .wrap .list .item .p {
  color: #FFF;
  font-weight: 300;
  line-height: 1.66
}

.sec2 {
  padding: 8.33333vw 8.33333vw 0;
  position: relative
}

.sec2 .bg {
  position: absolute;
  filter: blur(6.25vw)
}

.sec2 .bg1 {
  width: 23.85417vw;
  height: 30.26042vw;
  transform: rotate(-135deg);
  border-radius: 30.26042vw;
  background: rgba(49, 0, 51, 0.3);
  top: 6.875vw;
  right: -10.41667vw
}

.sec2 .bg2 {
  width: 24.0625vw;
  height: 29.16667vw;
  border-radius: 29.16667vw;
  background: rgba(199, 227, 255, 0.14);
  top: 34.0625vw;
  left: -12.03125vw
}

.sec2 .bg3 {
  width: 24.0625vw;
  height: 29.16667vw;
  border-radius: 29.16667vw;
  background: rgba(199, 227, 255, 0.14);
  top: 39.79167vw;
  right: -12.03125vw
}

.sec2 .bg4 {
  width: 1.25vw;
  top: 15.83333vw;
  right: 15vw;
  filter: blur(0);
  display: none
}

.sec2 .bg4 img {
  display: block;
  width: 100%
}

.sec2 .wrap {
  position: relative;
  z-index: 3
}

.sec2 .wrap .title {
  color: #FFF;
  text-shadow: 0 0 .26042vw #E7E7E7;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center
}

.sec2 .wrap .des {
  width: 42.70833vw;
  margin: 1.77083vw auto 4.6875vw;
  color: #FFF;
  text-align: center;
  font-weight: 300;
  line-height: 1.333
}

.sec2 .wrap .box {
  width: 100%;
  border-radius: .83333vw;
  background: url("/images/technology/t2.png") no-repeat;
  background-size: 100% 100%;
  padding: 5vw 2.08333vw 5.67708vw;
  display: flex;
  justify-content: space-between
}

.sec2 .wrap .box .item {
  width: 24.84375vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.sec2 .wrap .box .item .item_title {
  color: #FFF;
  text-align: center;
  font-weight: 700;
  text-transform: capitalize
}

.sec2 .wrap .box .item .item_box {
  width: 100%;
  height: 29.58333vw;
  border-radius: .83333vw;
  padding: 0 0 2.34375vw 2.70833vw;
  background: linear-gradient(180deg, rgba(230, 231, 255, 0) 0%, rgba(230, 231, 255, 0.12) 100%);
  display: flex;
  gap: 1.25vw;
  position: relative
}

.sec2 .wrap .box .item .item_box:after {
  content: "";
  width: 20.10417vw;
  height: .05208vw;
  background: #FFFFFF;
  position: absolute;
  bottom: 5.98958vw;
  left: 50%;
  transform: translateX(-50%)
}

.sec2 .wrap .box .item .item_box .sq .tiao_box {
  height: 23.59375vw;
  margin-bottom: 1.14583vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.sec2 .wrap .box .item .item_box .sq .tiao_box .tiao {
  width: 4.375vw;
  height: 0vw;
  background: rgba(255, 255, 255, 0.09);
  margin: 0 auto;
  transition: 1.4s
}

.sec2 .wrap .box .item .item_box .sq .tiao_box .p {
  display: flex;
  justify-content: center;
  margin-bottom: 1.40625vw
}

.sec2 .wrap .box .item .item_box .sq .tiao_box .p span {
  color: #FFF;
  font-weight: 500;
  text-align: center
}

.sec2 .wrap .box .item .item_box .sq .h5 {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  line-height: 1.66667vw;
  height: 1.66667vw
}

.sec2 .wrap .box .item .item_box .sq .h5 img {
  display: block;
  height: 100%
}

.sec2 .wrap .box .item .item_box .sq:nth-child(2) .tiao_box .tiao {
  background: #A3E8FF
}

.sec2 .wrap .box .item .item_box .sq:nth-child(2) .tiao_box .p {
  margin-bottom: .67708vw
}

.sec2 .wrap .box .item .item_box .sq:nth-child(2) .tiao_box .p span {
  color: #9BE6FF;
  font-weight: 700
}

.sec2 .wrap .box .item:nth-child(1) .item_box .sq:nth-child(1) .tiao_box.animated .tiao {
  height: 19.58333vw
}

.sec2 .wrap .box .item:nth-child(1) .item_box .sq:nth-child(2) .tiao_box.animated .tiao {
  height: 15.41667vw
}

.sec2 .wrap .box .item:nth-child(2) .item_box .sq:nth-child(1) .tiao_box.animated .tiao {
  height: 11.61458vw
}

.sec2 .wrap .box .item:nth-child(2) .item_box .sq:nth-child(2) .tiao_box.animated .tiao {
  height: 5.98958vw
}

.sec2 .wrap .box .item:nth-child(3) .item_box .sq:nth-child(1) .tiao_box.animated .tiao {
  height: 10.3125vw
}

.sec2 .wrap .box .item:nth-child(3) .item_box .sq:nth-child(2) .tiao_box.animated .tiao {
  height: 14.16667vw
}

.sec3 {
  padding: 4.16667vw 8.33333vw 0;
  padding-top: 0;
  position: relative
}

.sec3:after {
  content: "";
  width: 24.0625vw;
  height: 29.16667vw;
  border-radius: 29.16667vw;
  background: rgba(199, 227, 255, 0.14);
  filter: blur(6.25vw);
  position: absolute;
  top: -1.97917vw;
  left: 39.27083vw
}

.sec3 .wrap {
  position: relative;
  z-index: 3
}

.sec3 .wrap .title {
  color: #FFF;
  text-shadow: 0 0 .26042vw #E7E7E7;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12.39583vw;
  text-align: center
}

.sec3 .wrap .box {
  width: 100%;
  position: relative
}

.sec3 .wrap .box .jt {
  display: block;
  width: 91.66667vw;
  max-width: inherit;
  position: absolute;
  left: -2.5vw;
  top: 7.8125vw;
  transform: translateY(-50%);
  opacity: .3;
  clip-path: inset(0 100% 0 0);
  transition: all 2s
}

.sec3 .wrap .box .jt.animated {
  clip-path: inset(0 0 0 0)
}

.sec3 .wrap .box .box_top {
  display: flex;
  gap: 3.125vw;
  padding: 0 0 0 4.6875vw;
  position: relative;
  z-index: 3
}

.sec3 .wrap .box .box_top .item {
  width: 15.625vw
}

.sec3 .wrap .box .box_top .item .guo {
  width: 5.20833vw;
  height: 5.20833vw;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  z-index: 3
}

.sec3 .wrap .box .box_top .item .guo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

.sec3 .wrap .box .box_top .item .line {
  width: .05208vw;
  height: 2.70833vw;
  background: #FFFFFF;
  margin: -.36458vw auto 0;
  transform: scaleY(0);
  transform-origin: top
}

.sec3 .wrap .box .box_top .item .cir {
  width: .57292vw;
  height: .57292vw;
  background: #FFFFFF;
  border-radius: 50%;
  margin: 0 auto;
  opacity: 0
}

.sec3 .wrap .box .box_top .item3 {
  width: 53.125vw
}

.sec3 .wrap .box .box_top .item3 .line_c {
  width: 37.55208vw;
  height: .05208vw;
  background: #FFFFFF;
  margin: -1.25vw auto 0;
  transform: scaleX(0)
}

.sec3 .wrap .box .box_top .item3 .lines {
  display: flex;
  justify-content: center;
  gap: 18.17708vw
}

.sec3 .wrap .box .box_top .item3 .lines .line1 .l {
  width: .05208vw;
  height: 3.48958vw;
  background: #FFFFFF;
  margin: 0 auto;
  transform: scaleY(0);
  transform-origin: top
}

.sec3 .wrap .box .box_top.animated .item .line {
  transform: scaleY(1);
  transition: 1.4s
}

.sec3 .wrap .box .box_top.animated .item .cir {
  opacity: 1;
  transition: 0.4s;
  transition-delay: 1.4s
}

.sec3 .wrap .box .box_top.animated .item3 .line_c {
  transform: scaleX(1);
  transition: 1s
}

.sec3 .wrap .box .box_top.animated .item3 .lines .line1 .l {
  transform: scaleY(1);
  transition: 1s;
  transition-delay: 1s
}

.sec3 .wrap .box .box_top.animated .item3 .lines .line1 .cir {
  transition: 0.4s;
  transition-delay: 2s
}

.sec3 .wrap .box .box_top.animated .item3 .lines .line1:nth-child(2) .l {
  transform: scaleY(1);
  transition: 1s;
  transition-delay: 0s
}

.sec3 .wrap .box .box_top.animated .item3 .lines .line1:nth-child(2) .cir {
  transition: 0.4s;
  transition-delay: 1s
}

.sec3 .wrap .box .list {
  display: flex;
  padding: 0 2.08333vw;
  margin: 0 0 7.03125vw
}

.sec3 .wrap .box .list .img {
  width: 15.625vw;
  height: 15.625vw;
  border-radius: .625vw;
  overflow: hidden
}

.sec3 .wrap .box .list .img .text {
  display: none;
  padding: 1.5625vw 0;
  text-align: center
}

.sec3 .wrap .box .list .img .text .h5 {
  color: #FFF;
  font-weight: 700
}

.sec3 .wrap .box .list .img .text .p {
  color: #FFF;
  font-weight: 400;
  line-height: 1.25vw;
  height: 1.25vw;
  margin: 1.25vw auto 0;
  width: fit-content
}

.sec3 .wrap .box .list .img .text .p img {
  display: block;
  height: 100%
}

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

.sec3 .wrap .box .list .img:nth-child(2) {
  margin: 0 5.3125vw 0 5.52083vw
}

.sec3 .wrap .box .list .img:nth-child(3) {
  margin-right: 5.15625vw
}

.sec3 .wrap .box .list .img:hover img {
  transform: scale(1.1)
}

.sec3 .wrap .box .box_bottom {
  display: flex;
  padding: 0 0 0 23.4375vw;
  margin: -.26042vw 0 0;
  position: relative;
  z-index: 3
}

.sec3 .wrap .box .box_bottom .item3 {
  width: 53.125vw
}

.sec3 .wrap .box .box_bottom .item3 .guo {
  width: 5.20833vw;
  height: 5.20833vw;
  border-radius: 50%;
  overflow: hidden;
  margin: -2.29167vw auto 0;
  position: relative;
  z-index: 3
}

.sec3 .wrap .box .box_bottom .item3 .guo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s
}

.sec3 .wrap .box .box_bottom .item3 .line_c {
  width: 37.55208vw;
  height: .05208vw;
  background: #FFFFFF;
  margin: 0 auto;
  transform: scaleX(0)
}

.sec3 .wrap .box .box_bottom .item3 .lines {
  display: flex;
  justify-content: center;
  gap: 18.17708vw
}

.sec3 .wrap .box .box_bottom .item3 .lines .line1 .cir {
  width: .57292vw;
  height: .57292vw;
  background: #FFFFFF;
  border-radius: 50%;
  margin: 0 auto;
  opacity: 0
}

.sec3 .wrap .box .box_bottom .item3 .lines .line1 .l {
  width: .05208vw;
  height: 3.48958vw;
  background: #FFFFFF;
  margin: 0 auto;
  transform: scaleY(0);
  transform-origin: bottom
}

.sec3 .wrap .box .box_bottom.animated .item3 .line_c {
  transform: scaleX(1);
  transition: 1s
}

.sec3 .wrap .box .box_bottom.animated .item3 .lines .line1 .l {
  transform: scaleY(1);
  transition: 1s;
  transition-delay: 1s
}

.sec3 .wrap .box .box_bottom.animated .item3 .lines .line1 .cir {
  opacity: 1;
  transition: 0.4s;
  transition-delay: 2s
}

.sec3 .wrap .box .box_bottom.animated .item3 .lines .line1:nth-child(2) .l {
  transform: scaleY(1);
  transition: 1s
}

.sec3 .wrap .box .box_bottom.animated .item3 .lines .line1:nth-child(2) .cir {
  opacity: 1;
  transition: 0.4s;
  transition-delay: 1s
}

.sec3 .wrap .flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25vw
}

.sec3 .wrap .flex .item {
  padding: 1.5625vw 0;
  border-radius: .83333vw;
  border: .05208vw solid rgba(79, 172, 254, 0.14);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 .20833vw .3125vw-.20833vw rgba(79, 172, 254, 0.04), 0 .52083vw .78125vw-.15625vw rgba(79, 172, 254, 0.04), 0 0 0 0 transparent, 0 0 0 0 transparent;
  backdrop-filter: blur(.3125vw);
  text-align: center
}

.sec3 .wrap .flex .item .h5 {
  color: #FFF;
  font-weight: 700
}

.sec3 .wrap .flex .item .p {
  color: #FFF;
  font-weight: 400;
  line-height: 1.25vw;
  height: 1.25vw;
  margin: 1.25vw auto 0;
  width: fit-content
}

.sec3 .wrap .flex .item .p img {
  display: block;
  height: 100%
}

.sec3 .wrap .flex .item:nth-child(2n) {
  border: .05208vw solid rgba(255, 255, 255, 0);
  background: rgba(230, 231, 255, 0.2);
  backdrop-filter: blur(.36458vw)
}

.sec4 {
  padding: 11.92708vw 13.54167vw 6.25vw
}

.sec4 .wrap .title {
  color: #FFF;
  text-align: center;
  text-shadow: 0 0 .26042vw #E7E7E7;
  font-weight: 700;
  text-transform: uppercase
}

.sec4 .wrap .des {
  width: 31.40625vw;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-weight: 400;
  line-height: 1.75;
  margin: 1.25vw auto 4.16667vw
}

.sec4 .wrap .box {
  width: 100%;
  padding: 1.40625vw 2.08333vw 7.60417vw;
  background: url("/images/technology/bg.png") no-repeat;
  background-size: 100% 100%
}

.sec4 .wrap .box .content {
  width: 100%;
  height: 47.34375vw;
  background: url("/images/technology/bg2.png") no-repeat;
  background-size: 100% 100%;
  padding: 2.86458vw 6.51042vw 0 4.16667vw;
  display: flex;
  justify-content: space-between
}

.sec4 .wrap .box .content .r {
  width: 47.86458vw
}

.sec4 .wrap .box .content .r .part {
  width: 100%;
  border-radius: 1.25vw 1.25vw 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  padding: 3.125vw 0 3.64583vw;
  display: none;
  text-align: center
}

.sec4 .wrap .box .content .r .part .h5 {
  width: 22.44792vw;
  color: #FFF;
  font-weight: 700;
  margin: 0 auto 1.25vw
}

.sec4 .wrap .box .content .r .part .p {
  width: 23.80208vw;
  color: #FFF;
  font-family: Inter;
  font-weight: 400;
  line-height: 1.75;
  margin: 0 auto
}

.sec4 .wrap .box .content .r .part .p:last-child {
  opacity: 0.6
}

.sec4 .wrap .box .content .r .part .img {
  width: 31.25vw;
  border-radius: 1.25vw;
  margin: 3.02083vw auto 1.5625vw;
  overflow: hidden
}

.sec4 .wrap .box .content .r .part .img img {
  display: block;
  width: 100%
}

.sec4 .wrap .box .content .r .part.on {
  display: block
}

.sec4 .wrap .box .content .l {
  width: 6.5625vw
}

.sec4 .wrap .box .content .l .l_title {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  text-transform: uppercase
}

.sec4 .wrap .box .content .l .line {
  width: 100%;
  height: .05208vw;
  background: rgba(255, 255, 255, 0.2);
  margin: 1.66667vw 0 3.125vw
}

.sec4 .wrap .box .content .l .control .item {
  width: fit-content;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: 0.6s
}

.sec4 .wrap .box .content .l .control .item:after {
  content: "";
  width: calc(100% + 0.8333vw);
  height: .10417vw;
  background: linear-gradient(to right, #c7e3ff, rgba(199, 227, 255, 0));
  position: absolute;
  bottom: -.10417vw;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: 0.6s
}

.sec4 .wrap .box .content .l .control .item:before {
  content: "";
  width: calc(100% + 0.8333vw);
  height: 1.5625vw;
  background: linear-gradient(180deg, rgba(199, 227, 255, 0) 0%, rgba(199, 227, 255, 0.2) 100%);
  position: absolute;
  bottom: -.10417vw;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: 0.6s
}

.sec4 .wrap .box .content .l .control .item.on,
.sec4 .wrap .box .content .l .control .item:hover {
  color: #FFF
}

.sec4 .wrap .box .content .l .control .item.on:after,
.sec4 .wrap .box .content .l .control .item.on:before,
.sec4 .wrap .box .content .l .control .item:hover:after,
.sec4 .wrap .box .content .l .control .item:hover:before {
  opacity: 1
}

.sec4 .wrap .box .content .l .control .item:not(:last-child) {
  margin-bottom: 2.5vw
}

.sec5 {
  padding: 17.03125vw 0 14.01042vw;
  position: relative
}

.sec5 .c1 {
  position: absolute;
  width: 44.53125vw;
  height: 37.91667vw;
  transform: rotate(-90deg);
  border-radius: 44.53125vw;
  background: linear-gradient(180deg, rgba(199, 227, 255, 0.05) 0%, rgba(1, 101, 200, 0.05) 100%);
  filter: blur(6.25vw);
  top: 411px;
  left: -246px
}

.sec5 .c2 {
  width: 23.86703vw;
  height: 30.31068vw;
  transform: rotate(-135deg);
  border-radius: 581.965px;
  background: rgba(49, 0, 51, 0.3);
  filter: blur(6.29167vw);
  top: 12.5vw;
  right: -2.60417vw;
  position: absolute
}

.sec5 .c3 {
  width: 24.0625vw;
  height: 29.16667vw;
  border-radius: 29.16667vw;
  background: rgba(199, 227, 255, 0.1);
  filter: blur(120.8px);
  position: absolute;
  top: 48.22917vw;
  right: -12.03125vw
}

.sec5 .c4 {
  width: 24.0625vw;
  height: 29.16667vw;
  border-radius: 29.16667vw;
background: rgba(199, 227, 255, 0.14);
  filter: blur(120.8px);
  position: absolute;
  top: 32.22917vw;
  left: -12.03125vw
}

.sec5 .wrap {
  width: 81.5625vw;
  margin: 0 auto
}

.sec5 .wrap .title {
  color: #FFF;
  text-align: center;
  font-weight: 700
}

.sec5 .wrap .des {
  color: #FFF;
  text-shadow: 0 0 5px #E7E7E7;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  margin: 1.77083vw 0 0
}

.sec5 .wrap .flex {
  display: flex;
  align-items: flex-end;
  gap: 48.95833vw;
  margin-bottom: 2.1875vw
}

.sec5 .wrap .flex .l .item {
  display: flex;
  gap: 1.5625vw
}

.sec5 .wrap .flex .l .item:not(:last-child) {
  margin-bottom: 1.30208vw
}

.sec5 .wrap .flex .l .item:last-child p {
  color: #9994FF
}

.sec5 .wrap .flex .l .item .icon {
  width: 1.61458vw
}

.sec5 .wrap .flex .l .item .icon img {
  display: block;
  width: 100%
}

.sec5 .wrap .flex .l .item p {
  color: #4FACFE;
  text-shadow: 0 1px 5.3px rgba(255, 255, 255, 0.25);
  font-weight: 700;
  text-transform: capitalize
}

.sec5 .wrap .flex .r .item {
  width: 4.73958vw;
  height: 1.77083vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 0.5px solid rgba(4, 191, 244, 0.2);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0.382px 0.573px -0.382px rgba(79, 172, 254, 0.04), 0 0.956px 1.433px -0.287px rgba(79, 172, 254, 0.04), 0 0 0 0 transparent, 0 0 0 0 transparent;
  backdrop-filter: blur(0.57338px);
  overflow: hidden;
  position: relative
}

.sec5 .wrap .flex .r .item:after {
  content: "";
  width: .26042vw;
  height: 100%;
  background: #04BFF4;
  filter: blur(4px);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.3
}

.sec5 .wrap .flex .r .item:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #04BFF4;
  filter: blur(1px);
  position: absolute;
  left: -1px;
  top: 0;
  opacity: 0.7
}

.sec5 .wrap .flex .r .item p {
  color: #FFF;
  font-weight: 700
}

.sec5 .wrap .box {
  width: 100%
}

.sec5 .wrap .box .tr {
  display: flex;
  width: 100%
}

.sec5 .wrap .box .tr .th {
  width: 11.66667vw;
  height: 8.4375vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.09375vw;
  text-align: center;
  border-bottom: 1px solid rgba(142, 227, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(217, 217, 217, 0.1)
}

.sec5 .wrap .box .tr .th .h5 {
  color: #FFF;
  font-size: 1.51042vw;
  font-weight: 700
}

.sec5 .wrap .box .tr .th .p {
  color: #FFF;
  font-size: .98958vw;
  font-weight: 400
}

.sec5 .wrap .box .tr .td {
  width: 69.89583vw;
  height: 8.4375vw;
  border-bottom: 0.373px dashed rgba(142, 227, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .625vw 1.5625vw;
  padding: 1.04167vw 2.44792vw
}

.sec5 .wrap .box .tr .td .item {
  min-width: 4.73958vw;
  min-height: 1.77083vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .41667vw;
  border: 0.5px solid rgba(4, 191, 244, 0.2);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0.382px 0.573px -0.382px rgba(79, 172, 254, 0.04), 0 0.956px 1.433px -0.287px rgba(79, 172, 254, 0.04), 0 0 0 0 transparent, 0 0 0 0 transparent;
  backdrop-filter: blur(0.57338px);
  overflow: hidden;
  position: relative;
  transition: all 600ms
}

.sec5 .wrap .box .tr .td .item:hover {
  transform: scale(1.05)
}

.sec5 .wrap .box .tr .td .item.sp {
  padding: .46875vw 1.04167vw
}

.sec5 .wrap .box .tr .td .item:after {
  content: "";
  width: 1.875vw;
  height: 100%;
  background: #04BFF4;
  filter: blur(0.729vw);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.3
}

.sec5 .wrap .box .tr .td .item:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #04BFF4;
  filter: blur(1px);
  position: absolute;
  left: -1px;
  top: 0;
  opacity: 0.7
}

.sec5 .wrap .box .tr .td .item p {
  color: #FFF;
  font-weight: 700
}

.sec5 .wrap .box .tr .td .item span {
  color: rgba(255, 255, 255, 0.8);
  font-size: .52083vw;
  font-weight: 500
}

.sec5 .wrap .box .tr .td .item.red:after,
.sec5 .wrap .box .tr .td .item.red:before {
  background: #D774FF
}

.sec5 .wrap .box .tr:nth-child(1) .th {
  background: url("/images/technology/bg4.png") no-repeat;
  background-size: 100% 100%;
  position: relative
}

.sec5 .wrap .box .tr:nth-child(1) .th:after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(217, 217, 217, 0.1);
  position: absolute;
  top: 0;
  left: 0
}

.sec5 .wrap .box .tr:nth-child(1) .th:before {
  content: "";
  width: 7.65625vw;
  height: 7.65625vw;
  background: rgba(255, 99, 221, 0.24);
  filter: blur(73.04347px);
  position: absolute;
  top: -2.1875vw;
  left: -2.96875vw
}

.sec5 .wrap .box .tr:nth-last-child(1) .th {
  background: url("/images/technology/vg5.png") no-repeat;
  background-size: 100% 100%;
  position: relative
}

.sec5 .wrap .box .tr:nth-last-child(1) .th:after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(217, 217, 217, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1
}

.sec5 .wrap .box .tr:nth-last-child(1) .th:before {
  content: "";
  width: 7.65625vw;
  height: 7.65625vw;
  background: rgba(161, 229, 252, 0.2);
  filter: blur(73.04347px);
  position: absolute;
  top: .9375vw;
  right: -2.1875vw
}

@media screen and (max-width: 768px) {
  .banner img {
    height: 350px;
    object-fit: cover
  }

  .banner .text {
    left: 5%;
    bottom: 20px
  }

  .banner .text .t {
    font-size: 32px;
    margin-bottom: 10px
  }

  .banner .text .p {
    width: 100%
  }

  .sec1 {
    padding: 50px 5vw
  }

  .sec1 .wrap .title {
    font-size: 24px
  }

  .sec1 .wrap .des {
    width: 100%;
    font-size: 16px;
    margin: 15px 0 30px
  }

  .sec1 .wrap .img {
    width: 100%
  }

  .sec1 .wrap .img>img {
    width: 70vw;
    margin: 10px auto 0
  }

  .sec1 .wrap .img .line_box {
    position: unset;
    transform: unset;
    width: 100%
  }

  .sec1 .wrap .img .line_box img {
    display: none
  }

  .sec1 .wrap .img .line_box .item {
    width: 100%;
    max-width: unset;
    display: flex;
    flex-direction: column-reverse;
    position: unset;
    transform: unset;
    text-align: center;
    margin-bottom: 15px
  }

  .sec1 .wrap .img .line_box .item .cir {
    display: none
  }

  .sec1 .wrap .img .line_box .item .h5 {
    font-size: 18px;
    margin: 6px 0
  }

  .sec1 .wrap .content {
    width: 100%
  }

  .sec1 .wrap .content .line1 {
    width: 100%
  }

  .sec1 .wrap .content .box {
    width: 100%;
    border-radius: 10px;
    padding: 20px
  }

  .sec1 .wrap .content .box .flex:not(:last-child):after {
    width: 90%;
    height: 1px
  }

  .sec1 .wrap .content .box .flex .item {
    padding: 30px 0
  }

  .sec1 .wrap .content .box .flex .item:not(:last-child):after {
    display: none
  }

  .sec1 .wrap .content .box .flex .item .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px
  }

  .sec1 .wrap .content .box .flex .item p {
    font-size: 12px
  }

  .sec1 .wrap .list {
    margin: 10px 0 0
  }

  .sec1 .wrap .list .item {
    padding: 20px;
    border-radius: 10px
  }

  .sec1 .wrap .list .item .h5 {
    font-size: 18px;
    margin-bottom: 10px
  }

  .sec1 .wrap .list .item .p {
    font-size: 15px
  }

  .sec1 .wrap .list .item:not(:last-child) {
    margin-bottom: 20px
  }

  .sec2 {
    padding: 10px 5vw 0
  }

  .sec2 .wrap .title {
    font-size: 24px
  }

  .sec2 .wrap .des {
    width: 100%;
    font-size: 16px;
    margin: 15px 0 30px
  }

  .sec2 .wrap .box {
    border-radius: 10px;
    width: 100%;
    padding: 30px;
    flex-wrap: wrap;
    gap: 30px
  }

  .sec2 .wrap .box .item {
    width: 100%
  }

  .sec2 .wrap .box .item .item_title {
    font-size: 18px;
    margin-bottom: 20px
  }

  .sec2 .wrap .box .item .item_box {
    height: 200px;
    border-radius: 0 0 6px 6px;
    gap: 0;
    padding: 0
  }

  .sec2 .wrap .box .item .item_box:after {
    width: 94%;
    height: 1px;
    bottom: 40px
  }

  .sec2 .wrap .box .item .item_box .sq {
    width: 50%
  }

  .sec2 .wrap .box .item .item_box .sq .tiao_box {
    height: 160px
  }

  .sec2 .wrap .box .item .item_box .sq .tiao_box .p span {
    font-size: 16px
  }

  .sec2 .wrap .box .item .item_box .sq .tiao_box .tiao {
    width: 40px
  }

  .sec2 .wrap .box .item .item_box .sq .h5 {
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    text-align: center
  }

  .sec2 .wrap .box .item .item_box .sq .h5 img {
    display: block;
    margin: 0 auto
  }

  .sec3 {
    padding: 60px 5vw 0
  }

  .sec3 .wrap .title {
    font-size: 24px;
    margin-bottom: 30px
  }

  .sec3 .wrap .box .jt {
    display: none
  }

  .sec3 .wrap .box .box_top,
  .sec3 .wrap .box .box_bottom {
    display: none
  }

  .sec3 .wrap .box .list {
    flex-wrap: wrap;
    gap: 15px 0;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 15px
  }

  .sec3 .wrap .box .list .guo {
    display: flex !important;
    width: 100%;
    gap: 20px;
    margin: 30px 0 5px
  }

  .sec3 .wrap .box .list .guo img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden
  }

  .sec3 .wrap .box .list .img {
    width: 48%;
    height: auto;
    border-radius: 8px;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 .20833vw .3125vw-.20833vw rgba(79, 172, 254, 0.04), 0 .52083vw .78125vw-.15625vw rgba(79, 172, 254, 0.04), 0 0 0 0 transparent, 0 0 0 0 transparent;
    backdrop-filter: blur(.3125vw)
  }

  .sec3 .wrap .box .list .img img {
    height: 168px
  }

  .sec3 .wrap .box .list .img .text {
    padding: 20px 15px;
    display: block
  }

  .sec3 .wrap .box .list .img .text .h5 {
    font-size: 18px;
    margin-bottom: 15px
  }

  .sec3 .wrap .box .list .img .text .p {
    font-size: 15px;
    height: unset;
    line-height: 20px
  }

  .sec3 .wrap .box .list .img .text .p img {
    height: 20px
  }

  .sec3 .wrap .flex {
    margin: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    display: none
  }

  .sec3 .wrap .flex .item {
    padding: 30px 15px;
    border-radius: 8px;
    height: unset
  }

  .sec3 .wrap .flex .item .h5 {
    font-size: 18px;
    margin-bottom: 15px
  }

  .sec3 .wrap .flex .item .p {
    font-size: 15px;
    height: unset;
    line-height: 20px
  }

  .sec3 .wrap .flex .item .p img {
    height: 20px
  }

  .sec4 {
    padding: 70px 5vw
  }

  .sec4 .wrap .title {
    font-size: 24px
  }

  .sec4 .wrap .des {
    width: 100%;
    font-size: 16px;
    margin: 15px 0 30px
  }

  .sec4 .wrap .box {
    padding: 0;
    background: unset
  }

  .sec4 .wrap .box .content {
    width: 100%;
    height: unset;
    display: block;
    padding: 30px 20px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%)
  }

  .sec4 .wrap .box .content .l {
    width: 100%;
    margin-bottom: 30px
  }

  .sec4 .wrap .box .content .l .l_title {
    font-size: 18px;
    text-align: center
  }

  .sec4 .wrap .box .content .l .line {
    margin: 15px 0 20px
  }

  .sec4 .wrap .box .content .l .control {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center
  }

  .sec4 .wrap .box .content .l .control .item:before {
    height: 25px
  }

  .sec4 .wrap .box .content .r {
    width: 100%
  }

  .sec4 .wrap .box .content .r .part {
    border-radius: 8px;
    padding: 20px
  }

  .sec4 .wrap .box .content .r .part .h5 {
    width: 100%;
    margin-bottom: 15px
  }

  .sec4 .wrap .box .content .r .part .p {
    width: 100%
  }

  .sec4 .wrap .box .content .r .part .img {
    width: 100%;
    margin: 15px 0
  }

  .sec5 {
    padding: 40px 0
  }

  .sec5 .wrap {
    width: 90%
  }

  .sec5 .wrap .title {
    font-size: 24px
  }

  .sec5 .wrap .des {
    font-size: 15px;
    margin: 15px 0 25px
  }

  .sec5 .wrap .flex {
    justify-content: space-between;
    gap: 0;
    margin-bottom: 20px
  }

  .sec5 .wrap .flex .l .item {
    align-items: center
  }

  .sec5 .wrap .flex .l .item .icon {
    width: 24px;
    height: 24px
  }

  .sec5 .wrap .flex .r .item {
    width: 110px;
    height: 32px;
    border-radius: 4px
  }

  .sec5 .wrap .flex .r .item:after {
    width: 5px;
    filter: blur(10px)
  }

  .sec5 .wrap .flex .r .item:before {
    width: 4px;
    filter: blur(4px);
    opacity: 1
  }

  .sec5 .wrap .box .tr .th {
    height: unset;
    width: 100px
  }

  .sec5 .wrap .box .tr .th .h5 {
    font-size: 16px
  }

  .sec5 .wrap .box .tr .th .p {
    font-size: 14px
  }

  .sec5 .wrap .box .tr .td {
    width: calc(100% - 100px);
    padding: 20px;
    height: unset;
    gap: 15px
  }

  .sec5 .wrap .box .tr .td .item {
    min-width: 110px;
    min-height: 32px;
    border-radius: 4px
  }

  .sec5 .wrap .box .tr .td .item span {
    font-size: 10px
  }

  .sec5 .wrap .box .tr .td .item:after {
    width: 5px;
    filter: blur(10px)
  }

  .sec5 .wrap .box .tr .td .item:before {
    width: 4px;
    filter: blur(4px);
    opacity: 1
  }

  .sec5 .wrap .box .tr .td .item.sp {
    padding: 6px 12px
  }
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg)
  }

  50% {
    transform: rotateY(180deg)
  }

  100% {
    transform: rotateY(0deg)
  }
}