/* ============================================================
   www.126e.com 首页顶部保留 banner（老版 3 屏轮播）
   作用域限定在容器 #wkbs 内，避免 bannerh5 旧样式的
   *{margin/padding:0} 全局重置破坏 crm 布局。
   依赖：idangerous.swiper2.7.6.css + swiper.animate1.0.2 + jquery
   图层图片沿用原 /style/bannerh5/images/（未迁移，绝对路径）。
   ============================================================ */
#wkbs{height:600px;}
#wkbs .arrow-left{background:url(/style/bannerh5/images/arrows.png) no-repeat left top;position:absolute;left:10px;top:50%;margin-top:-15px;width:17px;height:30px;z-index:10;}
#wkbs .arrow-right{background:url(/style/bannerh5/images/arrows.png) no-repeat left bottom;position:absolute;right:10px;top:50%;margin-top:-15px;width:17px;height:30px;z-index:10;}
#wkbs .pagination{position:absolute;left:0;text-align:center;bottom:15px;width:100%;}
#wkbs .swiper-pagination-switch{display:inline-block;width:13px;height:13px;border-radius:10px;background:#999;margin:0 4px;cursor:pointer;}
#wkbs .swiper-active-switch{background:#fff;}
#wkbs .swiper-slide{position:relative;opacity:0;transition:opacity .7s ease-in-out;}
#wkbs .swiper-slide-active{opacity:1;}
#wkbs .swiper-slide .img{position:absolute;}
#wkbs .inner{position:relative;display:block;width:1000px;height:600px;margin:0 auto;}
#wkbs .slide1{background:#1F91E0;background-size:1920px 600px;}
#wkbs .slide2{background-color:#55B1EF;}
#wkbs .slide3{background-color:#1284d0;}
#wkbs .slide1 .s0{left:50%;margin-left:-116px;top:130px;}
#wkbs .slide1 .s1{left:50%;margin-left:-425.5px;top:230px;}
#wkbs .slide1 .s2{left:50%;margin-left:-435px;top:340px;}
#wkbs .slide1 .s3{left:0;bottom:0;z-index:5;height:190px;}
#wkbs .slide1 .s4{right:0;bottom:0;z-index:0;height:160px;}
#wkbs .slide2 .zh-a-1{left:60px;top:77px;z-index:9;}
#wkbs .slide2 .zh-a-2{left:-90px;top:0;}
#wkbs .slide3 .b-1{right:72px;top:180px;}
#wkbs .slide3 .b-2{left:90px;top:180px;}
#wkbs .slide3 .b-3{left:50%;margin-left:-381px;top:350px;}
#wkbs .slide3 .b-s-1{width:100px;left:50px;bottom:0;}
#wkbs .slide3 .b-s-2{left:160px;width:160px;bottom:0;}
#wkbs .slide3 .b-s-3{left:390px;width:58px;bottom:0;}
#wkbs .slide3 .b-s-4{right:359px;width:103px;bottom:0;}
#wkbs .slide3 .b-s-5{right:250px;width:150px;bottom:0;}
#wkbs .slide3 .b-s-6{right:0;width:65px;bottom:0;}
#wkbs .slide3 .b-y-1{top:40px;left:50%;margin-left:-20px;}
#wkbs .slide3 .b-y-2{top:40px;left:0;}
#wkbs .slide3 .b-y-3{top:40px;right:0;}
#wkbs .loop{animation-iteration-count:infinite;animation-timing-function:linear;}
/* 桌面端按钮：slide1/slide3 双按钮用 flex 容器居中（与 s0/s1/s2 一样对齐 .inner 中心 500px），
   bannerbtn2（slide2 单按钮）用 left:50% margin-left 居中。
   参考站 web2 的双按钮本是 left:352px（中心 509.5 偏右 ~10px），用户要求改为真正居中，
   因此这里用 flex justify-content:center 让按钮组中心精确落在 .inner(1000px) 中心。 */
#wkbs .targetBtn{margin-top:0;position:absolute;bottom:100px;left:0;right:0;z-index:999;display:flex;justify-content:center;align-items:center;}
#wkbs .targetBtn a{height:40px;border-radius:40px;background:rgba(0,0,0,.5);float:none;display:inline-block;line-height:40px;text-align:center;color:#fff;text-decoration:none;}
#wkbs .targetBtn a:hover{background:#1DC5EA;}
#wkbs .targetBtn .a0{width:150px;background:#F79A7F !important;}
#wkbs .targetBtn .a1{width:150px;background:#0DAF90 !important;}
#wkbs .targetBtn .a2{width:150px;background:#EF0B40 !important;margin-left:15px;}
#wkbs .bannerbtn2{margin-top:0;position:absolute;bottom:80px;left:50% !important;z-index:999;margin-left:-75px;display:block;}
#wkbs .bannerbtn2 a{width:150px;display:block;float:none;}
/* 自定义 CSS 动画（keyframes 名唯一，避免改类引用） */
.moveRight{-webkit-animation-name:moveRight;animation-name:moveRight;}
.moveLeft{-webkit-animation-name:moveLeft;animation-name:moveLeft;}
@-webkit-keyframes moveRight{0%{opacity:0;left:0;}10%{opacity:1;}100%{opacity:1;left:550px;}}
@keyframes moveRight{0%{opacity:0;left:0;}10%{opacity:1;}100%{opacity:1;left:550px;}}
@-webkit-keyframes moveLeft{0%{opacity:0;left:390px;}10%{opacity:1;}100%{opacity:1;left:-370px;}}
@keyframes moveLeft{0%{opacity:0;left:390px;}10%{opacity:1;}100%{opacity:1;left:-370px;}}
/* 窄屏适配：banner 内容在 <1000px 容器时等比缩放（crm 布局自适应宽度）。
   设计原则（参考 web2 medaiindex.css 的紧凑观感）：
   1. banner 整体高度压缩（避免过度留白），元素紧凑垂直堆叠
   2. 横幅元素(s0/s1/s2)按比例缩放不过大过小，字保持可读
   3. 装饰物(s3/s4)窄屏隐藏，避免抢视觉 + 让主信息紧凑
   4. 按钮位于 s2 下方留 80-100px CTA 过渡区（视觉呼吸但不空旷） */
@media (max-width:1000px){
  #wkbs{height:480px;}
  #wkbs .inner{width:100%; height:100%; overflow:hidden;}
  /* banner img 强制块级 + 等比缩放 */
  #wkbs .swiper-slide .img{display:block;vertical-align:top;max-width:100%;height:auto;}
  /* slide1：s0 标题 / s1 副标题 / s2 服务标签 垂直紧凑堆叠（间距约 30-45px） */
  #wkbs .slide1 .s0{ left:0; right:0; top:8%; margin:0 auto; width:30%; max-width:220px;}
  #wkbs .slide1 .s1{ left:0; right:0; top:26%; margin:0 auto; width:74%; max-width:560px;}
  #wkbs .slide1 .s2{ left:0; right:0; top:46%; margin:0 auto; width:76%; max-width:580px;}
  /* 装饰人物：窄屏完全隐藏，让主信息独占 banner 视觉 */
  #wkbs .slide1 .s3, #wkbs .slide1 .s4{ display:none;}
  /* slide2 */
  #wkbs .slide2 .zh-a-1{ left:0; right:0; top:14%; margin:0 auto; width:32%; max-width:180px;}
  #wkbs .slide2 .zh-a-2{ left:0; right:0; top:32%; margin:0 auto; width:82%;}
  /* slide3 城市背景 */
  #wkbs .slide3 .b-1{ left:18%; right:auto; top:14%; width:40%;}
  #wkbs .slide3 .b-2{ left:18%; top:36%; width:36%;}
  #wkbs .slide3 .b-3{ left:18%; margin-left:0; top:62%; width:36%;}
  #wkbs .slide3 .b-s-1, #wkbs .slide3 .b-s-2, #wkbs .slide3 .b-s-3, #wkbs .slide3 .b-s-4, #wkbs .slide3 .b-s-5, #wkbs .slide3 .b-s-6{ width:18% !important;}
  #wkbs .slide3 .b-s-1{ left:6%;}
  #wkbs .slide3 .b-s-2{ left:24%;}
  #wkbs .slide3 .b-s-3{ left:42%;}
  #wkbs .slide3 .b-s-4{ right:42%;}
  #wkbs .slide3 .b-s-5{ right:24%; width:18% !important;}
  #wkbs .slide3 .b-s-6{ right:6%; width:18% !important;}
  #wkbs .slide3 .b-y-1, #wkbs .slide3 .b-y-2, #wkbs .slide3 .b-y-3{ width:30%;}
  #wkbs .slide3 .b-y-1{ left:35%; margin-left:0;}
  /* targetBtn 居中按钮：位于 s2 下方 CTA 独立区 */
  #wkbs .targetBtn{ left:0; right:0; bottom:14%; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; padding:0 14px;}
  #wkbs .targetBtn a{ float:none; height:38px; line-height:38px; font-size:13.5px; padding:0 18px;}
  #wkbs .targetBtn .a0, #wkbs .targetBtn .a1, #wkbs .targetBtn .a2{ width:auto; margin-left:0;}
  #wkbs .bannerbtn2{ left:0 !important; right:0; margin:0 auto; transform:none;}
}
@media (max-width:780px){
  /* 平板/大屏手机：banner 紧凑到 380px，元素紧凑堆叠 */
  #wkbs{height:380px;}
  #wkbs .slide1 .s0{ top:7%; width:30%; max-width:210px;}
  #wkbs .slide1 .s1{ top:24%; width:76%; max-width:540px;}
  #wkbs .slide1 .s2{ top:42%; width:78%; max-width:560px;}
  #wkbs .slide2 .zh-a-1{ top:8%; width:30%;}
  #wkbs .slide2 .zh-a-2{ top:24%; width:84%;}
  #wkbs .targetBtn{ bottom:16%; gap:10px;}
  #wkbs .targetBtn a{ height:36px; line-height:36px; font-size:13px; padding:0 16px;}
}
@media (max-width:480px){
  /* 真机手机：banner 紧凑到 340px，主横幅接近全宽保持字号，装饰隐藏 */
  #wkbs{height:340px;}
  #wkbs .slide1 .s0{ top:6%; width:32%; max-width:200px;}
  #wkbs .slide1 .s1{ top:22%; width:82%; max-width:480px;}
  #wkbs .slide1 .s2{ top:42%; width:86%; max-width:500px;}
  #wkbs .slide2 .zh-a-1{ top:6%; width:30%;}
  #wkbs .slide2 .zh-a-2{ top:22%; width:86%;}
  #wkbs .targetBtn{ bottom:14%; gap:8px;}
  #wkbs .targetBtn a{ height:34px; line-height:34px; font-size:12.5px; padding:0 14px;}
  #wkbs .targetBtn a i{ font-size:13px;}
  /* slide3 在 ≤480 简化为只显示中央人偶 */
  #wkbs .slide3 .b-1, #wkbs .slide3 .b-2{ width:32%; left:34%;}
  #wkbs .slide3 .b-3{ display:none;}
  #wkbs .slide3 .b-s-1, #wkbs .slide3 .b-s-2, #wkbs .slide3 .b-s-3, #wkbs .slide3 .b-s-4, #wkbs .slide3 .b-s-5, #wkbs .slide3 .b-s-6{ display:none;}
  #wkbs .slide3 .b-y-1, #wkbs .slide3 .b-y-2, #wkbs .slide3 .b-y-3{ display:none;}
  #wkbs .arrow-left, #wkbs .arrow-right{ width:14px; height:24px; background-size:14px 48px; margin-top:-12px;}
}