/* =========================
   work.asp 顶部大图 + 轮播 + 文案Banner
   ========================= */

   .wrap{
  width: var(--container, 1550px);
  margin: 0 auto;
}
/* 区块间距（可按页面需要调整） */
.section{
  margin: 0 0 18px;
}

/* 统一的大图容器：用 background-image 显示 */
.banner img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 第1块主题图如果想更高，可单独加高（可选） */
/*
.section:nth-of-type(1) .banner{
  height: 420px;
}
*/

/* =========================
   第2块：图文联动轮播（.slider.slider--text）
   结构：
   .slider.slider--text
     .slides
       .slide
         .banner.has-text (background-image)
           .content
   ========================= */

/* 容器：宽度/居中/裁切 */
.slider.slider--text{
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* 轨道：横向排列（实际 transform 在 JS 里控制/也可在这里兜底） */
.slider.slider--text .slides{
  display: flex;
  width: 100%;
  transform: translate3d(0,0,0);
  transition: transform 500ms ease;
  will-change: transform;
}

/* 每一屏 */
.slider.slider--text .slide{
  flex: 0 0 100%;
}

/* banner：承载图片与文案 */
.slider.slider--text .banner.has-text{
  position: relative;
  width: 100%;
  height: auto;      /* 轮播高度：按需要改 */
  overflow: hidden;
}

/* 图片铺满（作为“底图”） */
.slider.slider--text .banner.has-text > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 文案覆盖在图片上 */
.slider.slider--text .banner.has-text .content{
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 420px;
  z-index: 2;
  color: #fff;
}

/* 可选：加一层暗色遮罩，保证白字可读（不想要就删） */
.slider.slider--text .banner.has-text::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
  z-index: 1;
  pointer-events: none;
}

/* 标题/副标题 */
.slider.slider--text .banner.has-text .title{
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
}

.slider.slider--text .banner.has-text .sub{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  opacity: .95;
}

/* 圆点 */
.slider.slider--text .dots{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  z-index: 3; /* 高于遮罩 */
}

.slider.slider--text .dot{
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.55);
}

.slider.slider--text .dot.active,
.slider.slider--text .dot.is-active{
  width: 18px;
  background: rgba(255,255,255,1);
}

.slider.slider--text .nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.38);
  color: #0b57d0;

  z-index: 5;              /* 高于遮罩/文字/图片 */
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.slider.slider--text .nav.prev{ left: 14px; }
.slider.slider--text .nav.next{ right: 14px; }

.slider.slider--text .nav:hover{
  background: rgba(255,255,255,.95);
}

.slider.slider--text .nav:active{
  transform: translateY(-50%) scale(.98);
}

/* 可选：移动端按钮小一点 */
@media (max-width: 980px){

}

/* 响应式 */
@media (max-width: 980px){
  /* 让容器满宽 */
  .wrap{ width: 100%; padding: 0 12px; box-sizing: border-box; }

  /* 第1块/第3块通用 banner 也满宽 */
  .banner{ width: 100%; }

  /* 第2块轮播：图片完整显示 */
  .slider.slider--text{
    width: 100%;
  }

  .slider.slider--text .nav{
    width: 34px;
    height: 34px;
  }
  .slider.slider--text .nav.prev{ left: 10px; }
  .slider.slider--text .nav.next{ right: 10px; }


  .slider.slider--text .banner.has-text{
    height: auto;            /* 关键：高度交给图片 */
  }

  .slider.slider--text .banner.has-text > img{
    width: 100%;
    height: auto;            /* 关键：不固定高度，显示全 */
    object-fit: contain;     /* 关键：完整显示（不裁切） */
    background: #000;        /* 可选：contain 时两侧留黑底更自然 */
  }

  /* 文字层：避免遮挡太多画面 */
  .slider.slider--text .banner.has-text .content{
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* =========================
   带文案的Banner（第3块）
   .banner.has-text 内部有 .content
   ========================= */
.banner.has-text{
  position: relative;
}

/* 图片铺满容器 */
.banner.has-text > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 文案覆盖在图片上方 */
.banner.has-text .content{
  position: absolute;
  z-index: 2;
}

/* 文案层 */
.banner.has-text .content{
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  max-width: 420px;
}

/* 标题/副标题 */
.banner.has-text .title{
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
}

.banner.has-text .sub{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  opacity: .95;
}

/* 按钮 */
.banner.has-text .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  background: #3388ff;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.banner.has-text .btn:hover{
  filter: brightness(.95);
}

/* =========================
   移动端适配（可选）
   ========================= */
@media (max-width: 980px){
  .banner,
  .slider{
    width: 100%;
  }

  /* 第1块顶部图（普通 banner）固定高度 */
  .section:nth-of-type(1) .banner{
    height: 240px;
  }

  /* 第3块文案 Banner 固定高度（可选） */
  main.wrap > .section:nth-of-type(3) .banner.has-text{
    height: 240px;
  }

  /* 第2块轮播：不要固定高度，交给图片或你自己定义比例 */
  .slider.slider--text .banner.has-text{
    height: auto;
  }

  .banner.has-text .content{
    left: 20px;
    right: 20px;
    max-width: none;
  }

  .banner.has-text .title{
    font-size: 24px;
  }
}