/* ============================================================
   恒邦报关 · 首页「关于我们」图片轮播样式
   数据来源：后台 → 广告管理 →「首页-关于我们-多图」(pid=7)
   仅在 pc/index.htm 引入；需在 site.css 之后加载
   ============================================================ */

/* 轮播容器：盖在兜底静态图上（绝对定位，高度由 .about-img 内的图片撑开） */
.about-slider{position:absolute;inset:0;overflow:hidden;z-index:2}
.about-track{display:flex;height:100%;will-change:transform;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.about-slide{flex:0 0 100%;width:100%;height:100%;display:block;position:relative;overflow:hidden}
.about-slide img{width:100%;height:100%;object-fit:cover}

/* 左右切换按钮 */
.about-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;padding:0;border:none;border-radius:50%;background:rgba(9,26,43,.42);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .25s,background .25s;z-index:3}
.about-nav .svg-ic{width:22px;height:22px;stroke:#fff;stroke-width:2.1;fill:none}
.about-img:hover .about-nav,.about-nav:focus-visible{opacity:1}
.about-nav:hover{background:var(--red)}
.about-nav.prev{left:14px}
.about-nav.next{right:14px}

/* 圆点指示器（右下角，避开左下角角标） */
.about-dots{position:absolute;right:18px;bottom:20px;display:flex;gap:7px;z-index:3}
.about-dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.62);cursor:pointer;transition:width .25s,background .25s,border-radius .25s;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.about-dots button.active{width:24px;border-radius:5px;background:var(--red)}

/* 角标需盖在轮播之上 */
.about-img .about-badge{z-index:4}

/* 触屏/窄屏无 hover，切换按钮常显 */
@media (max-width:1024px){
  .about-nav{opacity:1;background:rgba(9,26,43,.5)}
}