body {
  overflow-x: hidden;
  /* 隐藏页面横向滚动条 */
}

.pagebanner .fh5co-heading h2 {
  color: white !important;
}

.pagebanner .fh5co-heading .desc {
  color: white !important;
}

.pagebanner .fh5co-heading {
  position: absolute;
  /* 绝对定位 */
  top: 50%;
  /* 距离顶部 50% */
  left: 50%;
  /* 距离左侧 50% */
  transform: translate(-50%, -50%);
  /* 使元素自身向上向左移动自身宽高的 50%，实现居中 */
  width: 100%;
  /* 确保内容宽度撑满 */
  color: white !important;
  /* 设置文字颜色，可根据实际背景调整 */
  text-shadow: 2px 2px 0.4rem rgba(0, 0, 0, 0.5);
  /* 添加文字阴影，增强可读性 */
}

.pagebanner img {
  width: 100%;
  filter: blur(0);
  max-height: 30rem;
  object-fit: cover;
  animation: progressiveEffect 6s ease-in-out infinite;
  /* 应用动画，持续 6 秒，缓入缓出，无限循环 */
}

.banner .fh5co-heading h2 {
  color: white !important;
}

.banner .fh5co-heading .desc {
  color: white !important;
}

.banner .fh5co-heading {
  position: absolute;
  /* 绝对定位 */
  top: 50%;
  /* 距离顶部 50% */
  left: 50%;
  /* 距离左侧 50% */
  transform: translate(-50%, -50%);
  /* 使元素自身向上向左移动自身宽高的 50%，实现居中 */
  width: 100%;
  /* 确保内容宽度撑满 */
  color: white !important;
  /* 设置文字颜色，可根据实际背景调整 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* 添加文字阴影，增强可读性 */
}

.banner img {
  width: 100%;
  max-height: 100%;
}

/* 定义动画关键帧 */
@keyframes progressiveEffect {
  0% {
    transform: scale(1);
    /* 初始状态，正常大小 */
    opacity: 0.8;
    /* 初始透明度为 0.8 */
  }

  50% {
    transform: scale(1.05);
    /* 放大到 1.05 倍 */
    opacity: 1;
    /* 完全不透明 */
  }

  100% {
    transform: scale(1);
    /* 恢复到正常大小 */
    opacity: 0.8;
    /* 恢复初始透明度 */
  }
}

.wenmenu .fa-bars {
  color: white;
}

@media (min-width: 1000px) {
  .header-top-menu {
    height: 80rem;
    position: relative;
  }

  .banner {
    position: absolute;
    top: 4.4rem;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    max-height: 80rem;
  }

  .header-menu {
    height: 30rem;
    position: relative;
  }

  .pagebanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    z-index: -1;
  }

  #fh5co-header .header-box {
    background: transparent;
    z-index: 1000;
  }

  #fh5co-header:hover .header-box {
    background-color: transparent;
  }

  .pagebanner img {
    min-height: 13rem;
  }
}

@media (max-width: 1000px) {
  .header-top-menu {
    height: 80rem;
    position: relative;
  }
  #fh5co-header .container{
     z-index: 99;
     position: relative;
  }


  #fh5co-header .header-box .logo img {
    filter: grayscale(1) brightness(10);
  }

  .banner {
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    max-height: 80rem;
  }

  .banner .fh5co-heading h2 {
    font-size: 2.4rem;
    color: white !important;
  }

  .banner .fh5co-heading .desc {
    display: none;
    color: white !important;
  }

  .header-menu {
    min-height: 13rem;
    position: relative;
  }

  .pagebanner {
    position: absolute;
    top: 0rem;
  }

  .pagebanner img {
    min-height: 6rem;
  }

  #fh5co-header .header-box {
    background: transparent;
    z-index: 1000;
  }

  #fh5co-header:hover .header-box {
    background-color: transparent;
  }

  .pagebanner img {
    min-height: 13rem;
  }

  .pagebanner .fh5co-heading h2 {
    font-size: 2.4rem;
    color: white !important;
  }

  .pagebanner .fh5co-heading .desc {
    display: none;
    color: white !important;
  }
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  font-size: 2rem;
  background-color: #26282c;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 2.7rem 2rem;
  margin: 0 2rem;
  opacity: 0.5;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: #ee212b;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  left: 1rem;
  right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  right: 1rem;
  left: auto;
}

@media (max-width: 768px) {
  .header-top-menu {
    height: 40rem;
    position: relative;
  }
  #fh5co-header .container{
     z-index: 99;
     position: relative;
  }


  #fh5co-header:hover .header-box {
    background-color: transparent;
  }
  .swiper-button-next,
  .swiper-button-prev {
    margin: auto;
    width: 2rem;
    height: 2rem;
    background-size: 2rem 1.2rem;
  }

  #fh5co-header .header-box .logo img {
    filter:  none;
  }

  .banner {
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    max-height: 80rem;
  }
}

.swiper-pagination-bullet-custom {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  opacity: 0.4;
  margin: 0 5px;
  position: relative;
  /* 使伪元素相对于此元素定位 */
}

.swiper-pagination-bullet-custom-active {
  background: red;
  /* 红点 */
  opacity: 1;
}

.swiper-pagination-bullet-custom-active::after {
  content: "";
  top: -5px;
  left: -5px;
  position: absolute;
  padding: 7px;
  border: 1px solid red;
  border-radius: 50%;
  background: transparent;
}