html,

body {

  font-family: "" PingFang SC "", "" Calibri "", "" opensans "",

    "" GothicArial "", "" Arial "", "" Microsoft YaHei "", "" San Francisco "",

    "Hiragino Sans GB", "" Helvetica Neue "", Helvetica, sans-serif !important;

  overflow-x: hidden;

  box-sizing: border-box !important;

}

.productTypeBox-text:nth-child(2n) {

  flex: 1;

  margin-left: 5.21vw;

  margin-right: 0;

}

.productTypeBox-text:nth-child(2n+1) {

  margin-left: 0;

  margin-right: 5.21vw;

  flex: 1;

}

.scrolled {

  background-color: black !important;

  color: white;

}

.productTypeBox {

  margin-bottom: 60px;

}

.productTypeBox:last-child {

  margin-bottom: 0;

}

.solutions-banner-p p{

  display: -webkit-box;

  -webkit-line-clamp: 5;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  line-height: 32px;

}

#aboutHover::before {

  content: "";

  width: 100%;

  bottom: 0%;

  left: 0%;

  position: absolute;

  height: 1px;

  background-color: #673b92;

  transform: translateX(-100%);

  transition: all 0.5s ease;

}



#aboutHover:hover::before {

  transform: translateX(0%);

}



#manHover::before {

  content: "";

  width: 100%;

  bottom: 0%;

  left: 0%;

  position: absolute;

  height: 1px;

  background-color: #673b92;

  transform: translateX(-100%);

  transition: all 0.5s ease;

}



#manHover:hover::before {

  transform: translateX(0%);

}



#solHover::before {

  content: "";

  width: 100%;

  bottom: 0%;

  left: 0%;

  position: absolute;

  height: 1px;

  background-color: #673b92;

  transform: translateX(-100%);

  transition: all 0.5s ease;

}



#solHover:hover::before {

  transform: translateX(0%);

}



#esgHover::before {

  content: "";

  width: 100%;

  bottom: 0%;

  left: 0%;

  position: absolute;

  height: 1px;

  background-color: #673b92;

  transform: translateX(-100%);

  transition: all 0.5s ease;

}



#esgHover:hover::before {

  transform: translateX(0%);

}



#contactHover::before {

  content: "";

  width: 100%;

  bottom: 0%;

  left: 0%;

  position: absolute;

  height: 3px;

  background-color: #673b92;

  transform: translateX(-100%);

  transition: all 0.5s ease;

}



#contactHover:hover::before {

  transform: translateX(0%);

}



#contact:hover span path {

  fill: #673b92;

}



#backgroundImage::before {

  content: "";

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-image: url("../images/solutionBanner.png");

  /* Background image */

  filter: brightness(0.8);

  /* Brightness effect */

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  z-index: 0;

  /* Behind the content */

}



.borderText {

  text-align: center;

  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.292),

    -1px -1px 0px rgba(0, 0, 0, 0.292), 1px -1px 0px rgba(0, 0, 0, 0.292),

    -1px 1px 0px rgba(0, 0, 0, 0.292);

  font-family: Montserrat;

  text-transform: capitalize;

}

/* 设置旋转角度 */

.solution2 .list {

  transform-origin: center center; 

  transition: transform 0.5s ease; 

}



.solution2 .item {

  transform-origin: center bottom; 

  transition: transform 0.5s ease; 

}





/* 跳动的小球区域 */

.bouncing-ball {

  padding: 0 13.8vw 0 12.5vw;

  margin: 7vw 0;

}



.bouncing-ball .list {

  display: flex;

  flex-wrap: wrap;

  gap: 3.125vw 2.708vw;

}



.bouncing-ball .item {

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  border-radius: 50%;

  overflow: hidden;

  color: #fff;

  width: 16.354vw;

  height: 16.354vw;

  font-size: 1.562vw;

  font-weight: 600;

}



.bouncing-ball .item:nth-child(2n) {

  margin-top: 3.333vw;

  width: 15.104vw;

  height: 15.104vw;

}



.bouncing-ball .item:nth-child(6) {

  margin-left: auto;

}



.bouncing-ball .item .pic {

  width: 100%;

}



.bouncing-ball .item .pic img {

  width: 100%;

}



.bouncing-ball .item .text {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 0 2.604vw;

}



.bouncing-ball .item:hover {

  animation: clRotate 1s linear infinite;

}



@keyframes clRotate {

  0% {

    transform: translate(0, 0);

  }



  20% {

    transform: translate(-10%, 0);

  }



  40% {

    transform: translate(0, 10%);

  }



  60% {

    transform: translate(10%, 0);

  }



  80% {

    transform: translate(5%, -10%);

  }



  100% {

    transform: translate(0, 0);

  }

}



.bouncing-ball-section {

  position: relative;

}



.bouncing-ball-section .commingwill-1 {

  width: 65%;

  position: absolute;

  top: 130px;

  left: 0;

  z-index: -10;

}



.bouncing-ball-section .commingwill-2 {

  width: 65%;

  position: absolute;

  bottom: -50px;

  right: 0;

  z-index: -10;

}



.manufacturing-dervices-rightPic3 {

  position: absolute;

  top: -25vw;

  right: -25vw;

}



.manufacturing-dervices-rightPic {

  display: flex;



}



.manufacturing-dervices-rightPic .image2 {

  margin-left: -120px;

}



.manufacturing-dervices-rightPic img {

  max-width: 26.56vw;

}







.solution2 {

  padding: 5.729vw;

  position: relative;

}

.manufacturing-dervices-rightPic1 {

  position: absolute;

  top: 150px;

  right: -25vw;

}

.manufacturing-dervices-rightPic2 {

  position: absolute;

  bottom: 0;

  left: -14vw;

}

.solution2 .list-wrap {

  width: 52.083vw;

  height: 52.083vw;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  margin: 0 auto;

  position: relative;

}



.solution2 .list {

  width: 0.052vw;

  height: 0.052vw;

  position: relative;

}



.solution2 .list .item {

  position: absolute;

  bottom: 0;

  padding-bottom: 9.375vw;

  left: 50%;

  transform: translate(-50%) rotate(0);

  transform-origin: center bottom;

  --deg: 72deg;

}



.solution2 .list .shan {

  width: 27.083vw;

  height: 16.666vw;

  position: relative;

  -webkit-mask: no-repeat center / contain;

  mask: no-repeat center / contain;

  -webkit-mask-image: url('../images/so2-mask.png');

  mask-image: url('../images/so2-mask.png');

}



.solution2 .list .item:nth-child(1) {

  transform: translate(-50%) rotate(calc(var(--deg) * 0));

}



.solution2 .list .item:nth-child(2) {

  transform: translate(-50%) rotate(calc(var(--deg) * 1));

}



.solution2 .list .item:nth-child(3) {

  transform: translate(-50%) rotate(calc(var(--deg) * 2));

}



.solution2 .list .item:nth-child(4) {

  transform: translate(-50%) rotate(calc(var(--deg) * 3));

}



.solution2 .list .item:nth-child(5) {

  transform: translate(-50%) rotate(calc(var(--deg) * 4));

}



.solution2 .list .item .pic {

  width: 100%;

  height: 100%;

  overflow: hidden;

}



.solution2 .list .item .pic img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: all ease 2s;

}



.solution2 .list .item:hover {

  z-index: 10;

}



.solution2 .list .shan:hover .pic img {

  transform: scale(1.1);

}



.solution2 .list .item .intr {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}



.solution2 .list .item .intr .t1 {

  width: 13.541vw;

  text-align: center;

  color: #fff;

  font-size: 1.875vw;

  font-weight: bold;

  text-transform: capitalize;

}



.solution2 .list-wrap .centerTitle {

  width: 20.833vw;

  text-align: center;

  color: #050505;

  font-family: Montserrat;

  font-size: 3.333vw;

  font-style: normal;

  font-weight: 500;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}



.solution2 .list-wrap .centerTitle span {

  color: #673B92;

}





.solution2 .list .item:not(:first-child) .pic {

  filter: brightness(50%);

}







/* ----------------------扇形区域-------------------- */

#svg {

  path {

    transition: transform .2s;

    color: white;

    cursor: pointer;

  }



  .center {

    border-radius: 50%;

    border: 1px solid #fff;



    img {

      width: 100%;

      height: 100%;

    }

  }



  .list {

    transition: transform .2s;

    cursor: pointer;



    div {

      text-align: center;

      color: #fff

    }

  }

}





/* 扇形区域结束---------------- */





footer {

  margin-top: 0 !important;

}

.product-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px !important;
}
.product-field-item {
  width: 443px;
  height: 360px;
}
.product-field-item:last-child {
  margin-right: 0;
} 
.fold-picture img {

  height: 100%;

}
@media (min-width: 922px) and (max-width: 1568px) {

  .product-field > .product-field-item:nth-child(odd) {
    justify-self: flex-start;
  }
}

@media (max-width: 483px) { 
  .product-field {
    padding: 0 20px !important;
  }
  .product-field-item {
    max-width: 100%;
  }
}






@media (min-width: 922px) and (max-width: 1200px) {

.productTypeBox-item div {

  width: 380px;

  height: 300px;

}

} 

@media (max-width: 1025px) {

  .pc-menu {

    display: none !important;

  }



  .m-menu {

    display: block !important;

  }



  footer {

    margin-top: 30px !important;

  }



  .marquee-item img {

    height: 15vw !important;

  }



  .bouncing-ball-section .commingwill-1 {

    top: 45px;

  }



  .hoverImg {

    cursor: pointer;

    /* 添加点击手势 */

  }



  .fold-picture {

    display: flex;

    flex-wrap: wrap;

    /* 小屏时自动换行 */

    gap: 10px;

    padding: 0 20px;

    margin-top: 60px;

    height: auto !important;

  }



  .hoverImg {

    height: 150px; 

    /* 初始高度 */

    overflow: hidden;

    transition: height 0.3s ease-in-out;

    /* 添加平滑展开/收起效果 */

    width: 100%;

    /* 小屏时宽度100% */

  }



  .hoverImg img {

    height: 100%;

    /* 保证图片自适应 */

    object-fit: cover;

    /* 图片内容保持比例 */

  }



}







@media (max-width: 992px) { 

  .bouncing-ball {

  padding: 0 20px;

 }

 .bouncing-ball .item {

  width: 22.354vw;

  height: 22.354vw;

 }

 .bouncing-ball .item:nth-child(2n) {

  margin-top: 3.333vw;

  width: 18.104vw;

  height: 18.104vw;

}

  }

  









@media (max-width: 922px) {

  footer {

    margin-top: 30px !important;

  }



  .manufacturing-dervices-rightPic {

    display: none;

  }



  .biaozhu {

    bottom: -2rem;

  }

  .productTypeBox {

    flex-direction: column;

    margin-bottom: 30px;

  }

  .productTypeBox:nth-child(2n) .productTypeBox-text {

    order: 2;

  } 

  .productTypeBox:nth-child(2n) .productTypeBox-item {

    order: 1;

  }

  .productTypeBox .biaozhu {

    bottom: 0 !important;

  }

  .productTypeBox-text {

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin-top: 30px !important;

  }

  .productTypeBox-item div {

    width: 100%;

    height: 300px;

  }

}



@media (max-width: 767px) {

  .marquee-item img {

    height: 50px !important;

  }



  .bouncing-ball-section .commingwill-1 {

    top: -95px;

  }



  .bouncing-ball-section .commingwill-2 {

    bottom: -38px;

  }



  .bouncing-ball {

    padding: 0 3vw;

  }



  .bouncing-ball .list {

    display: flex;

    flex-wrap: wrap;

    gap: 3vw 2.5vw;

  }



  .bouncing-ball .item {

    display: flex;

    border-radius: 50%;

    width: 45vw;

    height: 45vw;

    font-size: 20px;

  }



  .bouncing-ball .zhanwei {

    display: none;

  }



  .bouncing-ball .item:nth-child(2n) {

    margin-top: 0;

    width: 45vw;

    height: 45vw;

  }



  .bouncing-ball .item .pic {

    width: 100%;

  }



  .bouncing-ball .item .pic img {

    width: 100%;

  }



  .bouncing-ball .item .text {

    width: 100%;

    height: 100%;

    display: flex;

    flex-wrap: wrap;

    padding: 0 25px;

  }



  /*  */

  .solution2 {

    padding: 55px 0 0;

  }



  .solution2 .list-wrap {

    width: 100%;

    height: auto;

    display: flex;

    flex-wrap: wrap;

  }



  .solution2 .list {

    width: 100%;

    height: auto;

    position: static;

  }



  .solution2 .list .item {

    position: static;

    padding-bottom: 30px;

    left: 50%;

    transform: none !important;

  }



  .solution2 .list .shan {

    width: 90%;

    height: 180px;

    margin: 0 auto;

    -webkit-mask: none;

    mask: none;

  }



  .solution2 .list .item .pic {

    width: 100%;

    height: 100%;

  }



  .solution2 .list .item .pic img {

    width: 100%;

    height: 100%;

  }



  .solution2 .list .item .intr {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

    height: 100%;

  }



  .solution2 .list .item .intr .t1 {

    width: 130px;

    font-size: 27px;

  }



  .solution2 .list-wrap .centerTitle {

    width: 200px;

    font-size: 48px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    display: none;

  }

}





@media (min-width: 316px) {

  .xs\:py-5 {

    padding-top: 16rem !important;

  }



}