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;
  overflow-x: hidden;
}
.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: 1px;
  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/deiBanner.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 */
}
#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;
}

.staff::-webkit-scrollbar {
  height: 2px;
}

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

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

/* Optional: Scrollbar on hover #3e027a */
.staff::-webkit-scrollbar-thumb:hover {
  background-color: #673b92;
}

.dei-active {
  color: #673b92;
}
.dei-active::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #673b92;
  border-radius: 50%;
  position: absolute;
  bottom: -40%;
  left: 50%;
}

.inclussion {
  margin: auto;
  width: 80%;
  line-height: 1.2;
}
.inclussion p {
  font-size: 14px;
}

.p-container {
  height: 0; /* 初始高度为 0 */
  overflow: hidden; /* 隐藏溢出的内容 */
  transition: height 0.5s ease, opacity 0.5s ease; /* 添加平滑过渡 */
  opacity: 0; /* 初始透明度 */
}

.p-container.open {
  opacity: 1; /* 打开时显示 */
}


.image-box {
  opacity: 0;
  transition: opacity 0.5s ease; /* 平滑过渡 */
}

.image-box.active {
  opacity: 1; /* 激活的图片完全显示 */
  z-index: 1; /* 确保显示在最上层 */
}
footer {
  margin-top: 85px;
}
/* #questionImage {
  width: 400px;
}
#questionImage img {
  height: 400px;
} */

/* 滚动滑轨 */
.dei-ul-nav {
  overflow-x: auto;
  overflow-y: hidden;
}
.dei-ul-nav ul{
  min-width: 1087px;
}
.dei-ul-nav::-webkit-scrollbar {
  width: 8px; 
  height: 8px; 
}
/* 设置滚动条的轨道样式（即背景） */
.dei-ul-nav::-webkit-scrollbar-track {
  background-color: #f4f4f4; 
  border-radius: 10px; 
}

/* 设置滚动条的滑块样式（即可拖动的部分） */
.dei-ul-nav::-webkit-scrollbar-thumb {
  background-color: #673b92; 
  border-radius: 10px; 
  /* border: 2px solid #fff;  */
}
@media (max-width: 1485px) {
  .dei-ul-nav ul {
   border: 0 !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
   justify-content: space-between !important;
  }
  .dei-ul-nav {
    margin: 0 40px;
  }
}












 @media  (min-width: 1537px) and (max-width: 1700px) {
  .xl\:pr-\[8\.33vw\] {
    padding-right: 50px !important;
  }
  .xs\:px-5 {
    padding-left: 50px !important;
  }
  .\32xl\:w-\[20vw\] {
    width: 22vw !important;
  }
  .\32xl\:h-\[20vw\] {
    height: 22vw !important;
  }
  .inclussion1 {
    padding-bottom: 60px !important;
  }
}

@media(min-width: 1280px) and  (max-width: 1536px) {
  .xl\:top-\[70\%\] {
    top: 87% !important;
  }
  .xl\:-bottom-52 {
    bottom: -13rem;
  }
  /* .xl\:pr-\[8\.33vw\] {
    padding-right: 50px !important;
  } */
  .xs\:px-5 {
    padding-left: 50px !important;
  }
  .xl\:left-9 {
    left: -1.75rem !important;
}
.xl\:right-9 {
  right: -0.75rem !important;
}
} 

@media(min-width: 1301px) { 
.dei-services > div {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media(min-width: 1280px) and (max-width: 1300px)  { 
  .dei-services > div {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  }
@media(max-width: 1300px) {
.dei-services {
  min-height: 145vh !important;
}
}

@media (min-width: 768px) and (max-width: 1300px){
  .md\:-bottom-72 {
      bottom: -13rem !important;
  }
  .md\:top-\[90\%\] {
    top: 83% !important;
}
.md\:-right-5 {
  right: 4.75rem !important;
}
.md\:-left-5 {
  left: 4.75rem !important;
}
.dei-services {
  min-height: 114vh !important;
}
.services-box {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: center;
}
.services-item01, .services-item02, .services-item03 {
  position: static !important;
}
.services-item01 {
  transform: none !important;
}
.services-logo {
  display: none !important;
}
.marquee-group {
  margin-top: 0 !important;
}
}
@media(max-width: 640px) {
.question-box {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
}

@media (min-width: 768px) and (max-width: 1069px){
  .services-box {
    height: 80vh !important;
  }
}

@media(min-width: 316px) and  (max-width: 640px) { 
  .dei-services {
    min-height: 212vh !important;
}
}