/* 顶部导航栏 */
#navbar {
  background-color: rgba(0, 64, 151, 0.5);
}

/* 轮播图动画 */
/* 水流动画核心样式 */
.water-flow-element {
  /* 初始状态：隐藏在下方，透明 */
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: all 0.8s cubic-bezier(0.2, 0.85, 0.4, 1.275);
  transition-delay: 0s;
}

/* 激活状态：流动显示 */
.water-flow-element.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 为不同元素设置不同的延迟，形成水流顺序 */
.water-flow-title {
  transition-delay: 0.1s;
}

.water-flow-desc {
  transition-delay: 0.3s;
}

.water-flow-btn {
  transition-delay: 0.5s;
}

/* 按钮水流装饰效果 */
.water-flow-btn {
  position: relative;
  overflow: hidden;
}

.water-flow-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: waterRipple 3s infinite;
}

@keyframes waterRipple {
  0% {
    transform: rotate(30deg) translateX(-100%);
  }

  100% {
    transform: rotate(30deg) translateX(100%);
  }
}

/* 轮播 左右箭头 */
.arrow-visible {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#home:hover .arrow-visible {
  opacity: 1;
  pointer-events: auto;
  /* 显示时允许点击 */
}

.arrow-visible:hover {
  transform: translateY(-50%) scale(1.1);
}

/* 我们的核心业务 */
.cen-h3 {
  text-align: center;
  /* border: 1px red solid; */
}

.cen-h3-p {
  text-align: justify;
}

/* .us { */
/* width: 100%;
  height: 100%; */
/* object-fit: none; */
/* } */

.carousel-f1,
.carousel-f2,
.carousel-f3 {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 400px;
  overflow: hidden;
}

.carousel-track-f1,
.carousel-track-f2,
.carousel-track-f3 {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  -webkit-transition: transform 0.5s ease-in-out;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
}

.carousel-item-f1,
.carousel-item-f2,
.carousel-item-f3 {
  min-width: 100%;
  height: 100%;
}

.carousel-item-f1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.carousel-item-f2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.carousel-item-f3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}