/* ==========================================================
   banner.css
   模块：首页 Banner
   作用：首屏轮播、上层配图动画、分页指示器和触摸适配
   说明：从原首页内联样式拆分，保留原视觉效果与响应式行为。
   ========================================================== */

/* ==========================================================
   banner.css - Banner轮播样式（独立样式表）
   ========================================================== */

/* ===================== Banner核心（全屏自适应） ===================== */
#section01,
.banner-wrap,
.banner-slider,
.banner-item {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

.banner-wrap {
	max-width: none;
  overflow: hidden;
}
.banner-slider {
	width: 100%;
	height: 100%;
	position: relative;
}
.banner-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	z-index: 1;
}
.banner-item.active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}
.banner-bg {
	width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.banner-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}
.banner-text {
	position: absolute;
	width: 80%;
	max-width: 750px;
	min-width: 180px;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.banner-text img {
	width: 100%;
	height: auto;
	display: block;
}

.banner-text.show-img {
	opacity: 1;
	transform: translateY(0);
}
.item-1 .banner-text {
	max-width: 890px;
}
.item-1 .banner-text {
	top: 40%;
	left: 5%;
}
.item-2 .banner-text {
	top: 16%;
	left: 5%;
}
.item-3 .banner-text {
	top: 30%;
	left: 3%;
}
.item-4 .banner-text {
	top: 38%;
	left: 3%;
}
.item-5 .banner-text {
	top: 38%;
	left: 3%;
}
/* ===== 底部长条指示器 ===== */
.banner-indicators {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 14px;
	z-index: 5;
}
.indicator-dot {
	width: 36px;
	height: 6px;
	border-radius: 3px;
	background: rgba(0, 91, 156, 0.6);
	cursor: pointer;
	transition: background 0.3s ease;
}
.indicator-dot.active {
	background: #ffffff;
}

/* ===================== 移动端适配 ===================== */
@media screen and (max-width:768px) {
  /*
   * 移动端按首页 Banner 设计稿 1960×900 等比例缩放。
   * 不再使用 100vh，避免竖屏手机中 Banner 被拉成超高竖图。
   */
  #section01,
  #section01 .bg-section,
  .banner-wrap,
  .banner-slider,
  .banner-item {
    height: calc(100vw * 900 / 1960);
    min-height: 0;
    max-height: none;
  }

  #section01 {
    aspect-ratio: 1960 / 900;
    overflow: hidden;
  }

  .banner-wrap {
    aspect-ratio: 1960 / 900;
  }

  .banner-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}
@media screen and (max-width: 768px) {
  .banner-text {
    width: 60%;
    max-width: 380px;
    min-width: 120px;
  }

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

  .indicator-dot {
    width: 24px;
    height: 4px;
  }

  .item-1 .banner-text {
    width: 72%;
    max-width: 450px;
    min-width: 160px;
    top: 36%;
    left: 5%;
  }

  .item-2 .banner-text {
    top: 32%;
    left: 5%;
  }

  .item-3 .banner-text {
    top: 36%;
    left: 3%;
  }

  .item-4 .banner-text {
    top: 30%;
    left: 3%;
  }
 .item-5 .banner-text {
    top: 20%;
    left: 3%;
  }
}

@media screen and (max-width: 480px) {
.banner-text {
	width: 70%;
	max-width: 280px;
	min-width: 100px;
}
.banner-indicators {
	bottom: 20px;
	gap: 10px;
}
.indicator-dot {
	width: 20px;
	height: 3px;
}
.item-1 .banner-text {
	width: 82%;
	max-width: 340px;
	min-width: 150px;
	top: 36%;
	left: 5%;
}
}

/* ==========================================================
   PC端 Banner 上层配图尺寸保护
   说明：
   1. 769px以上恢复首页原始上层配图尺寸；
   2. 防止移动端 max-width:380px / 450px 误作用到PC端；
   3. 第一张 Banner 上层配图保持最大宽度890px。
   ========================================================== */
@media screen and (min-width: 769px) {
  .banner-text {
    width: 80%;
    max-width: 750px;
    min-width: 180px;
  }

  .item-1 .banner-text {
    width: 80%;
    max-width: 890px;
    min-width: 180px;
    top: 40%;
    left: 4%;
  }

  .item-2 .banner-text { max-width: 600px;
    top: 34%;
    left: 7%;
  }

  .item-3 .banner-text {
    top: 35%;
    left: 3%;
  }

  .item-4 .banner-text {
    top: 44%;
    left: 3%;
  }
  .item-5 .banner-text {
    top: 28%;
    left: 3%;
  }
}