/* html,
body {
  font-family: "PingFang SC", "Calibri", "Open Sans", "Gothic Arial", "Arial", "Microsoft YaHei", "San Francisco", "Hiragino Sans GB", "Helvetica Neue", Helvetica, sans-serif !important;
} */
 /*img {*/
 /* width: 100%;*/
 /*}*/
.about-banner-p p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 32px;
}

.scrolled {
  background-color: black !important;
  color: white;
}
#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::before{
  background-color: white;
} */
#contact span {overflow: hidden;}
#contact span .right {
  transform: translateX(-6px);
}
#contact span .left {
  transform: translateX(-100%);
}
#contact:hover span .right { 
  transform: translateX(13px);
  transition: all 0.8s ease;
}
#contact:hover span .left {
  transform: translateX(calc(100% - 6px));
  transition: all 0.8s ease;
}

.more-link {
  font-size: 26px;
  color: #ffffff;
  display: flex;
  
}

.more-link span {
  display: inline-block;
  width: 46px;
  height: 46px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
  overflow: hidden;
}
.more-link img {
  width: 16px;
}

/* 鼠标进入按钮效果 */
.more-link {
  font-size: 26px;
  color: #ffffff;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; 
  font-family: Montserrat;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.21299999952316284px;

}
.more-btn .more-link {
  color: var(--primary-color);
}
.more-link span {
  width: 46px;
  height: 46px;
  background-color: #673b92;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
  position: relative;

}

.old-arrow {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%; /* 初始箭头水平居中 */
  top: 50%; /* 初始箭头垂直居中 */
  transform: translate(-50%, -50%); /* 初始箭头居中 */
  transition: transform 0.4s ease-in-out;
}
.more-link .new-arrow {
  width: 16px;
  height: 16px;
  position: absolute;
  left: -100%;

  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

}
.more-link:hover .old-arrow{
  transform: translate(140%, -50%); /* 鼠标悬停时，旧箭头向右滑出 */
}
.more-link:hover .new-arrow {
  transform: translateX(61px);
  opacity: 1;
  

}

.more-link i {
  position: relative;
  display: inline-block;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.more-link .old-text {
  position: relative;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.more-link .new-text {
  position: absolute;
  top: 100%; /* 新文字在下方等待 */
  left: 0;
  opacity: 0;
  transform: translateY(100%); /* 新文字在下方 */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.more-link:hover .old-text {
  opacity: 0; /* 旧文字淡出 */
  transform: translateY(-100%); /* 旧文字向上滑出 */
}

.more-link:hover .new-text {
  opacity: 1; /* 新文字淡入 */
  transform: translateY(-180%); /* 新文字从下方滑入 */
  color: rgba(255, 255, 255, 0.8);
}
/* 另外一个箭头 */
.more-btn .more-link:hover .new-text{
  color: rgba(103, 59, 146, 0.8);
}

.video-js {
  width: 100% !important;
}

#backgroundImage::before {
  content: "";
  width: 100%;
  height: full;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../images/manufec/image.png"); /* Background image */
  filter: brightness(0.8); /* Brightness effect */
  background-size: cover;
  background-repeat: no-repeat;
}
#circle-border {
  stroke: #673b92;
  stroke-dasharray: 628;
  /* 周长 */
  stroke-dashoffset: 628;
  /* 初始位置，完全隐藏 */
  transition: stroke-dashoffset 1s ease;
  /* 动画过渡 */
  pointer-events: none;
  /* 禁用鼠标事件，避免影响悬停效果 */
}

/* 鼠标悬停效果 */
#box:hover #circle-border {
  stroke-dashoffset: 0;
  /* 完整路径，显示整个动态边框 */
}


#box:hover #boxtext {
  scale: 1.2;
}
#ceo_combine {
  background: linear-gradient(
    180deg,
    rgba(118, 76, 155, 0.2) 54.23%,
    rgba(251, 255, 193, 0.2) 127.23%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scrollbar size */
#historyScrollBar::-webkit-scrollbar {
  height: 8px;
}

/* Scrollbar thumb (the draggable part) */
#historyScrollBar::-webkit-scrollbar-thumb {
  background-color: #673b92;
  border-radius: 10px;
}

/* Scrollbar track (the area the thumb slides within) */
#historyScrollBar::-webkit-scrollbar-track {
  background: white;
}

/* Optional: Scrollbar on hover */
#historyScrollBar::-webkit-scrollbar-thumb:hover {
  background-color: #3e027a;
}
/* .rewardHover:hover img {
  scale: 1.2;
} */
#exploreAnim::before {
  content: "Explore Details";
  position: absolute;
  transform: translateY(100%);
  top: 0;
  left: 0;
  opacity: 0;
}

.missionGreendisc2-text {
  display: -webkit-box;
  -webkit-line-clamp: 8; 
  -webkit-box-orient: vertical;
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.missionGreendisc-text {
  display: -webkit-box;
  -webkit-line-clamp: 8; 
  -webkit-box-orient: vertical;
  overflow: hidden; 
  text-overflow: ellipsis; 
}

#missionVission {
  width: 36.04vw;
  height: 37.44vw;
  max-width: 692px;
  max-height: 717px;
}

#missionVission2 {
  width: 36.04vw;
  height: 37.44vw;
  max-width: 692px;
  max-height: 717px;
}
.keyword-p-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyword-p-box p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 250px;
}















@media (max-width: 1700px) {
  .missionGreendisc2-text {
    -webkit-line-clamp: 8; 
    font-size: 24px !important;
  }
  .missionGreendisc-text {
    -webkit-line-clamp: 8; 
    font-size: 24px !important;
  }
}
@media (max-width: 1400px) {
  .missionGreendisc2-text {
    -webkit-line-clamp: 6; 
    font-size: 20px !important;
  }
  .missionGreendisc-text {
    -webkit-line-clamp: 6; 
    font-size: 20px !important;
  }
}
@media (min-width: 1280px) {
  #box:hover #boxtext {
    scale: 1.3 !important;
  }
}
@media (max-width: 1200px) {
  .missionGreendisc2-text {
    -webkit-line-clamp: 5; 
    font-size: 16px !important;
  }
  .missionGreendisc-text {
    -webkit-line-clamp: 5; 
    font-size: 16px !important;
  }
}






@media (max-width: 1025px) {
  .w-\[70\%\] {
    width: 90% !important;
}
.h-\[70\%\] {
  height: 40% !important;
}
.my-video-dimensions {
  height: 50vw;
}
.pc-menu {
  display: none !important;
}
.m-menu {
  display: block !important; 
}
.value-item-box {
  margin-bottom: 30px;
}
/* .top-\[-70px\] {
  top: 10px;
}
.right-\[-60px\] {
  right: 10px;
} */



}

/* ------------------自定义------------------------------ */
@media (min-width: 922px) {
.xs\:px-5 {
  padding-left: 8rem !important;
  padding-right: 8rem !important;
}
.md\:p-\[60px\] {
  padding-top: 100px!important;
  padding-bottom: 80px!important;
}
}

@media (max-width: 767px) {
  .missionGreendisc2-text {
    -webkit-line-clamp: 8; 
    font-size: 20px !important;
  }
  .missionGreendisc-text {
    -webkit-line-clamp: 8; 
    font-size: 20px !important;
  }
  #missionVission {
    width: 100%;
    height: 500px;
    max-width: 100%;
  }
  
  #missionVission2 {
    width: 100%;
    height: 500px;
    max-width: 100%;
    max-height: 500px;
   
  }
  #missionGreendisc {
    padding: 60px 30px !important;
  }
  #missionGreendisc2 {
    padding: 60px 30px !important;
  }
  #mission {
    top: 10px !important;
    right: 10px !important;
  }
  #mission2 {
    top: 10px !important;
    right: 10px !important;
  }
}



@media (min-width: 640px) {
  .sm\:h-\[35vw\] {
      height: 37.5vw !important;
  }
  .marquee-item img {
    max-width: 100%; 
    height: 50px; 
  }

}

@media (max-width: 640px) {
  .logosvg {
    width: 50vw !important;
  }
  .marquee-group {
    margin-top: 0 !important;
  }
  .xs\:text-\[5\.7vw\] {
    margin-top: 20px;
}
.xs\:gap-20 {
  gap: 2rem;
}
}


.lishi img{
  margin-top: 20px;
  max-width: 100%;
  width: 100%;
}



    @media screen and (min-width: 320px) and (max-width: 399px) {
     #historybox{
width: 284px;
          height: 358px;
     }
}

@media screen and (min-width: 400px) and (max-width: 499px) {
      #historybox{
width: 284px;
          height: 358px;
     }  #historybox{
width: 284px;
          height: 358px;
     }
    
}

@media screen and (min-width: 500px) and (max-width: 639px) {
      #historybox{
width: 284px;
          height: 358px;
     }
}

@media screen and (min-width: 640px) and (max-width: 767px) {
     #historybox{
width: 284px;
          height: 358px;
     }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
}

@media screen and (min-width: 992px) and (max-width: 1024px) {
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
}
@media screen and (min-width: 1280px) and (max-width: 1400px) {
}

@media screen and (min-width: 1401px) {
}

.mySwiper-1 #rewardAnim1 .myImageSlider {
  width: 270px !important;   
  height: 370px !important;
}

.mySwiper-1 #rewardAnim3 .myImageSlider {
  width: 270px !important;   
  height: 370px !important;
}

.mySwiper-1 #rewardAnim5 .myImageSlider {
  width: 270px !important;   
  height: 370px !important;
}
.mySwiper-1 #rewardAnim7 .myImageSlider {
  width: 270px !important;   
  height: 370px !important;
}

.mySwiper-1 #rewardAnim2 .myImageSlider {
  width: 375px !important;  
  height: 310px !important; 
}

.mySwiper-1 #rewardAnim4 .myImageSlider {
  width: 375px !important;  
  height: 310px !important; 
}

.mySwiper-1 #rewardAnim6 .myImageSlider {
  width: 375px !important;  
  height: 310px !important; 
}
.mySwiper-1 #rewardAnim8 .myImageSlider {
  width: 375px !important;  
  height: 310px !important; 
}






/* 
.mySwiper-1 .swiper-slide-outer:nth-child(2n+1) .myImageSlider{
  width: 270px !important;   
  height: 370px !important;
  
}

.mySwiper-1 .swiper-slide-outer:nth-child(2n) .myImageSlider{
  width: 375px !important;  
  height: 310px !important; 
 
} */
.mySwiper-1 .swiper-wrapper{
  align-items: end;
}