@charset "utf-8";
/* ============================================================================
   PC 首页「容器底色图」两端自然延伸 —— 第 28 版（2026-09-21 · 测试反馈 No.122）

   反馈原文：「pc首页所有底色图片（容器背景）换成取自身左右边缘色的横向渐变延伸。
             后台可以配置是否开启此功能。」
   ⇒ 开关 = 站点设置 › ① 站点设置 › 站点外观 › 「首页容器底色两端延伸」，
     本文件只在开关打开时被 base.html 引入（关掉 = 页面回到改动前逐字节一致）。

   ---------------------------------------------------------------------------
   为什么用「同图两层」而不是「linear-gradient + calc(50% - 960px)」：

   两者都能把两侧空档填满，但**渐变只能取一个平均值** ——
   实测各图最左/最右那一列在竖直方向并不恒定（标准差最大到 43/255）：

     .jej  左边缘 σ=32/39/43       .y3   右边缘 σ=39/39/42
     轮播 20180530203148_1062.jpg 边缘 σ≈40

   对这些图，单色渐变会在「图边界」处留下一条明显的横向接缝
   （上面是图里的深色，旁边是平均色，一眼能看出来）。
   而把**同一张图横向拉伸后垫在下面**时，空档里出现的正是「该行、该边缘的
   真实颜色」—— 因为它就是那一列像素被横向拉出来的，逐行都对得上，
   接缝为零。语义上也仍然是"取自身左右边缘色的横向延伸"。

   ★ 两层的高度都必须**写死成图片的自然高度**，不能写 100%：
     写 100% 会把图竖直拉伸，垫图层在某个 y 上显示的就不是图里同一行的颜色，
     接缝又回来了。容器没被撑满时（.jej 图 874 > 容器 796）也要按图高写。

   ★ 底图是 inline 的那一处（首页轮播 li）另见文件末尾的 .pw-slide 段：
     它的 URL 来自后台广告素材，CSS 拿不到，所以由模板多挂一层 <i> 承载清晰层。
   ========================================================================== */

/* 轮播（后台 index_flash 广告素材）：
   li 上放**拉伸层**（宽 100%、高写死 699px），子元素 <i> 上放**清晰层**（原尺寸居中）。
   !important 是必须的 —— li 的 background-image 来自模板里的 inline style，
   内联样式会连带把 background-size 重置成 auto，不加 !important 覆盖不掉。 */
.fullSlide .bd li.pw-slide {
    position: relative !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 699px !important;
}
.fullSlide .bd li.pw-slide > i {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto;
    z-index: 0;
    pointer-events: none;
}
.fullSlide .bd li.pw-slide > a {
    position: relative;
    z-index: 1;
}

/* ---- 以下 11 个区块：底色图都是 1920 宽、居中、no-repeat ----
   每条规则的两层分别是：
     第 1 层（上）= 自然尺寸居中，就是原来那张图；
     第 2 层（下）= 同图横向拉伸到 100%、高度锁死为图片自然高度。
   容器比 1920 窄时第 1 层本来就铺满，多出来的第 2 层被完全盖住 ⇒ 窄屏零变化。 */

.fn {
    background-image: url(/Skins/Default/Img/Index/fn.jpg), url(/Skins/Default/Img/Index/fn.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 1003px;
}

.cpx {
    background-image: url(/Skins/Default/Img/Index/ted.jpg), url(/Skins/Default/Img/Index/ted.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 920px;
}

.zlv {
    background-image: url(/Skins/Default/Img/Index/zlv.jpg), url(/Skins/Default/Img/Index/zlv.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 873px;
}

.xuq {
    background-image: url(/Skins/Default/Img/Index/bgj.jpg), url(/Skins/Default/Img/Index/bgj.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 799px;
}

.jej {
    background-image: url(/Skins/Default/Img/Index/jej.jpg), url(/Skins/Default/Img/Index/jej.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 874px;
}

/* ★ .ys1 是唯一一个 center bottom 的（老站 .ys1{...center bottom}）。
   两层都必须 bottom 对齐，否则垫图层显示的会是图里另一段。 */
.ys1 {
    background-image: url(/Skins/Default/Img/Index/ys1.jpg), url(/Skins/Default/Img/Index/ys1.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center bottom;
    background-size: auto, 100% 691px;
}

.y3 {
    background-image: url(/Skins/Default/Img/Index/y3.jpg), url(/Skins/Default/Img/Index/y3.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 802px;
}

.ys41 {
    background-image: url(/Skins/Default/Img/Index/y41.jpg), url(/Skins/Default/Img/Index/y41.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 690px;
}

.fw {
    background-image: url(/Skins/Default/Img/Index/fw.jpg), url(/Skins/Default/Img/Index/fw.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 819px;
}

.sqi {
    background-image: url(/Skins/Default/Img/Index/sqi.jpg), url(/Skins/Default/Img/Index/sqi.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 627px;
}

/* ---------------------------------------------------------------------------
   第 44 版（2026-09-23 · 测试反馈 No.215）
   运营原话：「PC首页 · 下面有两张图没有向左右延伸，如图E216」

   实测：首页最底部那块 `.ttb`（鹏为公益献爱心）里三张图 t11/t12/t13 的宽度
   都按 1920 图的自然尺寸给了，但它们的父级是首页通用的 `<div class="content">`
   —— 老站 Style.css 把 `.content` 写死 `width:1200px;margin:0 auto` ⇒
   1920 屏上左右各空 360px，两张横图"没有延伸出去"。

   修法与上面 11 个区块**同一套语义**（取自身左右边缘色横向延伸），但这里的
   目标不是背景色块、而是一张实打实的 `<img>`：把 img 按 **视口宽**拉开、
   再用 `margin-left:calc(50% - 50vw)` 把居中的 1200px 容器"抵消"回来。
   ⇒ 只有超过 1200px 的屏才会看到变化，1200px 及以下逐像素不变。

   ★ 用 `50vw` 而不是 `100%`：`.content` 是定宽居中，img 的参照系是它
     而不是视口，写 100% 只会得到 1200px（就是现在这个症状）。
   ★ 用 `max-width:none` 顶掉老站那条 `.content img{max-width:100%}`，
     否则 `width:100vw` 会被它压回容器宽。
   ---------------------------------------------------------------------------
   ★★ 第 45 版（2026-09-23 · 测试反馈 No.215）—— 上面那套「把 img 拉成 100vw」
      的改法**整段撤掉了**，因为它把首页搞坏了。

   运营原话（No.215）：
     「下面有两张肉眼可以看到的图没有向左右延伸，如图E216；上一版改了后
       现在乱套了，如图F216。可以去读源网站材料，只要左右视角效果，
       不能动动画效果和图片内容。」

   为什么错：`.ttb` 里那三张 t11/t12/t13 是**内容图**（三张拼成一块公益画面），
   不是通栏底图。把 img 拉成 100vw 等于把它们整体放大 N 倍 —— 运营截图 F216
   里那一片错位的大色块就是这么来的。

   正解（与上面 11 个区块、以及 No.202 页脚**同一套语义**）：
     这两块的"图"其实是**容器背景图** —— 老站 index.css 里
       `.abo { background:url(Img/Index/brand.jpg) no-repeat center 0; height:763px }`
       `.ttb { background:url(Img/Index/ttb.jpg)   no-repeat center 0; height:660px }`
     都是 1920 宽的**不重复**整图 ⇒ 屏幕比 1920 宽时左右各空出一截。
     所以照第 28 版的办法给容器叠**同图两层**：
       第 1 层（上）＝ 自然尺寸居中 ⇒ 就是原来那张图，逐像素不变；
       第 2 层（下）＝ 同图横向拉伸到 100%、高度锁死为**图片自然高度**。
     ⇒ 窄屏（≤1920）时第 1 层本来就铺满、第 2 层被完全盖住 = 零变化；
        超宽屏时两侧空档被"该图自身的边缘像素"填满，接缝为零。
     ★ 高度必须写死成图片自然高度（763 / 660），不能写 100% —— 写 100% 会把
       图竖直拉伸，垫图层在某个 y 上显示的就不是图里同一行的颜色。
     ★ **一个 <img> 都不碰**：图片内容、动画、脚本逐字节不变。
   --------------------------------------------------------------------------- */
.abo {
    background-image: url(/Skins/Default/Img/Index/brand.jpg), url(/Skins/Default/Img/Index/brand.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 763px;
}

.ttb {
    background-image: url(/Skins/Default/Img/Index/ttb.jpg), url(/Skins/Default/Img/Index/ttb.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 660px;
}

/* 首页「鹏为资讯」区（abo.jpg 自然尺寸 1920x1017，容器高 988） */
.xinw {
    background-image: url(/Skins/Default/Img/Index/abo.jpg), url(/Skins/Default/Img/Index/abo.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto, 100% 1017px;
}

/* ---- 不处理的两处，写在这里免得后来人以为是漏了 ----
   · .crmq —— 底色是老站那张 3x208 的 c_bg.gif，本来就是 repeat-x 平铺，
     左右不存在空档，加了反而多余；
   · .fn_menu —— mil.gif 是 1200x1 的一根装饰线（定位 center 55px），
     不是"容器底色"，按容器色铺开会把这条线糊没。 */