@charset "utf-8";
/* ==========================================================================
   黎民康 lemonkord 手机端 —— 首页「选择净水厂家，认准黎民康」区块  v6
   生成日期：2026-09-25
   配套模板：Public/Mobile/default/Public_ys.html
   内容来源：PC 端 Public/Home/default/Index_index.html 的 .youshi 区块
             （深蓝底 + 中间产品图 + 质量/价格/售后 三组 + 底部三按钮切换）
             素材已复制到 Public/Mobile/default/Images/ys/
   作用域：全部限定在 .m-ys-pc / .m-ys-reason 内，不影响其它区块
   v4 变更：产品图由「顶部分栏」改为「居中」——四条文字分列四角环绕产品图
             （照 PC 端“中间图 + 四周文字”的形式；DOM 内产品图已移到第 2、3 条之间）
   v3 变更：① 删除 v1/v1.1 的 .m-ys-adv（白底卡片列表，已按要求撤掉）；
             ② 新增 .m-ys-pc —— 照 PC 端形式复刻；
             ③ 保留 .m-ys-reason（选择黎民康设备的八大理由图 + 点击看大图）。
   ========================================================================== */

/* ---------- ① 照 PC 端复刻：选择净水厂家，认准黎民康 ---------- */
/* v6 底图换成移动端专用 ys_bg_m.jpg（596×938，由 PC 的 ys_bg.jpg 裁原图左侧 596px）：
   PC 那张 1911×938 在手机上被 cover 放大后，会把图里的旧品牌水印
   “LOOK FOR THE HAI QING ENVIRONMENTAL” 正好压在正文行上；裁掉水印所在区域后
   既保留深蓝世界地图质感，又与 390×614 的区块比例恰好吻合（缩略图 47KB，比原图 174KB 小）。 */
.m-ys-pc{ position:relative; background-color:#0a2450;
          background-image:url(../Images/ys/ys_bg_m.jpg);
          background-repeat:no-repeat; background-position:center top;
          background-size:cover; padding:0 0 1.15em; overflow:hidden; }

.m-ys-pc-title{ padding:.75em 6% .1em; }
.m-ys-pc-title img{ display:block; width:100%; max-width:330px; height:auto; margin:0 auto; }

/* ★ v4 核心：产品图居中，四条文字分列四角（上二下二），形成环绕 */
/* v5 微调：dd 由 justify 改 left —— 窄栏里 justify 会把 ISO14001 等标准号
   这类含西文的长词撑出大片空隙（实测截图可见）；同时加 word-wrap 防长串溢出 */
.m-ys-pc-nr{ padding:.25em 4% 0; overflow:hidden; }
.m-ys-pc-item{ margin:0 0 .6em; width:48.4%; }
.m-ys-pc-item:nth-of-type(1){ float:left; }
.m-ys-pc-item:nth-of-type(2){ float:right; }
.m-ys-pc-item:nth-of-type(3){ float:left; clear:both; }
.m-ys-pc-item:nth-of-type(4){ float:right; }

.m-ys-pc-tu{ clear:both; position:relative; text-align:center; padding:.2em 0 .35em;
             background-image:-webkit-radial-gradient(50% 50%, ellipse closest-side, rgba(62,138,236,.30), rgba(62,138,236,0) 100%);
             background-image:radial-gradient(ellipse 44% 46% at 50% 50%, rgba(62,138,236,.30), rgba(62,138,236,0) 72%); }
.m-ys-pc-tu img{ display:inline-block; width:46vw; max-width:184px; height:auto;
                 vertical-align:middle; }

.m-ys-pc-item dt{ margin:0; color:#fff; font-size:1.02em; font-weight:700;
                  line-height:1.45; padding:.18em 0 .18em 2.55em;
                  background-repeat:no-repeat; background-position:left center;
                  background-size:2em auto; text-align:left;
                  text-shadow:0 1px 2px rgba(0,0,0,.35); }
.m-ys-pc-item dd{ margin:.2em 0 0; padding:0; font-size:.88em; line-height:1.7;
                  color:#d9e4f6; text-align:left;
                  word-wrap:break-word; word-break:normal; }

.m-ys-pc-tabs{ display:-webkit-box; display:-webkit-flex; display:flex;
               -webkit-justify-content:center; justify-content:center;
               margin:1em 4% 0; }
.m-ys-pc-tabs .pc-tab{ width:26.5vw; max-width:112px; height:23.9vw; max-height:101px;
               margin:0 1.6%; box-sizing:border-box;
               background:url(../Images/ys/ys_titbg.png) no-repeat center center;
               background-size:100% 100%;
               display:-webkit-box; display:-webkit-flex; display:flex;
               -webkit-box-orient:vertical; -webkit-box-direction:normal;
               -webkit-flex-direction:column; flex-direction:column;
               -webkit-box-align:center; -webkit-align-items:center; align-items:center;
               -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
               color:#fff; font-size:1.08em; font-weight:400; line-height:1.35;
               text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.m-ys-pc-tabs .pc-tab p{ margin:.12em 0 0; padding:0; font-size:.6em; font-weight:400;
               text-transform:uppercase; letter-spacing:.08em; opacity:.92; }
.m-ys-pc-tabs .pc-tab.on,
.m-ys-pc-tabs .pc-tab:active{ background-image:url(../Images/ys/ys_tit2.png); }

/* ---------- ② 选择黎民康设备的八大理由（保留） ---------- */
.m-ys-reason{ padding:0; background:#fff; }
.m-ys-reason img{ display:block; width:100%; height:auto; }

.m-ys-reason .m-ys-reason-lk{ display:block; position:relative; }
.m-ys-reason .m-ys-reason-lk:after{ content:"点击看大图"; position:absolute; right:.6em; bottom:.6em;
        padding:.22em .7em; background:rgba(0,93,219,.86); color:#fff; font-size:.75em;
        line-height:1.5; border-radius:1em; letter-spacing:.05em; }
.m-ys-reason .m-ys-reason-tip{ margin:0; padding:.6em 4% .9em; font-size:.8em; line-height:1.6;
        color:#8a97a8; text-align:center; background:#fff; }

/* ===== WB-LK-YSRING  H3·全文环绕（三行结构：上排文字 / 中排环+设备图 / 下排文字）
   要点：文字与设备图「分行占位」，物理上不可能重叠；左右两列天然错落。  2026-09-27 ===== */
.m-ys-pc-nr.m-ys-ring{ padding:0; }
.m-ys-ring{ position:relative; width:auto; margin:0; padding:0 2px;
  -webkit-box-sizing:border-box; box-sizing:border-box; }

/* --- 上/下两排：两列并排 --- */
.m-ys-ring-row{ position:relative; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-flex-wrap:nowrap; flex-wrap:nowrap;
  -webkit-justify-content:space-between; justify-content:space-between;
  -webkit-align-items:flex-start; align-items:flex-start; }
.m-ys-ring-top{ margin-bottom:0; }
.m-ys-ring-bot{ margin-top:0; padding-bottom:14px; }

.m-ys-ring-node{ width:47%; max-width:178px; margin:0; padding:0; }
.m-ys-ring-node dt{ margin:0; color:#fff; font-weight:700; line-height:1.35; font-size:13.5px;
  padding:.02em 0 .02em 1.55em; position:relative;
  background-repeat:no-repeat; background-position:left .12em; background-size:1.06em auto;
  text-shadow:0 1px 3px rgba(0,0,0,.7); }
.m-ys-ring-node dd{ margin:.26em 0 0; padding:0; color:#cfe0f7; font-size:10.5px;
  line-height:1.55; text-shadow:0 1px 2px rgba(0,0,0,.65); word-wrap:break-word; }
.m-ys-ring-node.r-r{ text-align:right; }
.m-ys-ring-node.r-r dt{ padding:.02em 1.55em .02em 0; background-position:right .12em; }
.m-ys-ring-node.r-l{ text-align:left; }

/* --- 中排：环 + 中央设备图，居中独占一行 --- */
.m-ys-ring-mid{ position:relative; width:100%; height:94vw; max-height:368px; min-height:300px; }
.m-ys-ring-bg{ position:absolute; left:50%; top:50%; display:block;
  width:94vw; max-width:368px; height:94vw; max-height:368px;
  -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
.m-ys-ring-core{ position:absolute; left:50%; top:50%; width:30vw; max-height:118px; max-width:118px;
  height:30vw;
  -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
  border-radius:50%; overflow:hidden; border:2px solid rgba(130,215,255,.6);
  -webkit-box-shadow:0 0 22px 6px rgba(64,170,255,.5), 0 0 60px 15px rgba(40,140,240,.2);
  box-shadow:0 0 22px 6px rgba(64,170,255,.5), 0 0 60px 15px rgba(40,140,240,.2); z-index:3; }
.m-ys-ring-core img{ display:block; width:100%; height:100%;
  -o-object-fit:cover; object-fit:cover; }

/* 错落：右列整体下沉，左列贴顶/贴底 —— 形成阶梯感 */
.m-ys-ring-top .m-ys-ring-node.r-r{ margin-top:18px; }
.m-ys-ring-bot .m-ys-ring-node.r-r{ margin-bottom:18px; }

@media (max-width:360px){
  .m-ys-ring-node dt{ font-size:12.5px; }
  .m-ys-ring-node dd{ font-size:10px; }
  .m-ys-ring-mid{ height:340px; }
}