@charset "utf-8";
/* ============================================================
   页脚样式（2026-10-12 新增）
   桌面端：只新增「社媒图标行」与「微信二维码弹层」，原 4 栏排版不动
   移动端：见文件末尾的 @media max-width:1023px 段
   ============================================================ */

/* ---- 社媒图标行（图标 + 小标签）----
   图标 4 个：抖音·中央空调 / 抖音·地暖暖气片 / 小红书 / 微信。
   两个抖音号靠下方小标签区分，所以 <a> 是纵向 flex，圆角与底色都挪到 img 上。 */
.yb-social{display:flex;align-items:flex-start;gap:0.22rem;padding-top:0.26rem}
.yb-social a{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1}
.yb-social img{width:0.35rem;height:0.35rem;display:block;border:0;border-radius:0.09rem}
.yb-social span{display:block;margin-top:0.07rem;color:#aaaaaa;font-size:0.13rem;
                line-height:1;white-space:nowrap;transition:color .15s}
.yb-social a:hover img{opacity:.86}
.yb-social a:hover span{color:#ffffff}
.yb-social a.yb-wechat{cursor:pointer}

/* ---- 微信二维码弹层（点社媒行里的微信图标才出现）---- */
.yb-qr-mask{display:none;position:fixed;left:0;top:0;right:0;bottom:0;
            background:rgba(0,0,0,.75);z-index:99999;
            align-items:center;justify-content:center;padding:20px}
.yb-qr-mask.on{display:flex}
.yb-qr-box{position:relative;background:#fff;border-radius:14px;padding:16px;
           max-width:320px;width:100%;text-align:center;box-sizing:border-box}
.yb-qr-box img{width:100%;height:auto;display:block;border-radius:8px}
.yb-qr-box p{margin:10px 0 0;font-size:14px;color:#1f1f1f}
.yb-qr-close{position:absolute;top:-13px;right:-13px;width:30px;height:30px;
             border-radius:50%;background:#1f1f1f;color:#fff;border:2px solid #fff;
             font-size:17px;line-height:1;cursor:pointer;padding:0}

/* ---- 只在移动端出现的两个装饰元素 ---- */
.footer_er .wbm-er-t{display:none}   /* 移动端「关注我们」小标题 */
.wbm-br{display:none}                /* 移动端版权行的强制换行 */

@media screen and (max-width:1023px){
  /* ---- 页脚移动端重排（方案 M2：分区式）---- */

  /* 0. 左右留白统一到 0.30rem（15.6px），与全站其它区块同一条竖线。
        .w14rem 上内联着 padding:0.5rem 0，只能用 !important 压过去。 */
  .footerbox > .w14rem{padding-left:0.30rem !important;padding-right:0.30rem !important}

  /* 1. 原来 4 个区块是 float 横排，手机上挤成一团 → 改纵向堆叠、各占满宽 */
  .footer_one,.footer_ju,.Friendship,.footer_er{float:none;width:100%;padding:0}

  /* 2. 品牌区：logo 收小；两个号码改块级（原来 float:left 挤成两行还留空隙） */
  .footer_one{padding-bottom:0.04rem}
  .footer_one img{width:1.86rem;height:0.42rem}
  .footer_one p{float:none;margin:0;padding:0;background:none;
                font-weight:400;color:#ededed}
  .footer_one p:nth-child(2){margin-top:0.24rem;background:none;
                             font-size:0.32rem;line-height:0.44rem}
  .footer_one p:nth-child(3){margin-top:0.10rem;background:none;
                             font-size:0.25rem;line-height:0.38rem;color:#b4b4b4}

  /* 3. 社媒图标行：图标放大到拇指够得着（0.62rem ≈ 32px），标签 0.21rem
        四个列宽由「标签」决定（地暖暖气片最长 5 字），合计 ≈211px < 358px 可用宽 */
  .yb-social{padding-top:0.28rem;gap:0.34rem}
  .yb-social img{width:0.62rem;height:0.62rem;border-radius:0.16rem}
  .yb-social span{margin-top:0.10rem;font-size:0.21rem}

  /* 4. 「舒适家居系统 / 友情链接 / 关注我们」三个分组 */
  .footer_ju,.Friendship,.footer_er{display:flex;flex-wrap:wrap;box-sizing:border-box}
  .footer_ju{margin-top:0.36rem;padding-top:0.30rem;border-top:1px solid rgba(255,255,255,.10)}
  .Friendship{margin-top:0.30rem;padding-top:0.30rem;border-top:1px solid rgba(255,255,255,.10)}
  .footer_er{margin-top:0.30rem;padding-top:0.30rem;border-top:1px solid rgba(255,255,255,.10)}
  .footer_ju p,.Friendship p,.footer_er .wbm-er-t{
      position:relative;width:100%;margin:0 0 0.06rem;padding:0 0 0 0.26rem;
      color:#ffffff;font-size:0.26rem;font-weight:400;line-height:0.42rem}
  .footer_er .wbm-er-t{display:block}
  /* 小标题左侧 0.06rem 红竖条（本站主题色） */
  .footer_ju p::before,.Friendship p::before,.footer_er .wbm-er-t::before{
      content:'';position:absolute;left:0;top:0.09rem;
      width:0.06rem;height:0.24rem;background:#d40003;border-radius:0.03rem}

  /* 5. 链接改两列；原来 25% 会把「艾谷思新材料工厂」断成两行 */
  .footer_ju a,.Friendship a{float:none;display:block;width:50%;margin:0;padding:0;
                             color:#c6c6c6;font-size:0.245rem;line-height:0.58rem}
  .footer_ju a:hover,.Friendship a:hover{color:#ffffff}

  /* 6. 二维码区：图与说明并排，收掉原来那片 ~100px 的空白 */
  .footer_er img{width:1.44rem;height:1.44rem;margin:0;flex:0 0 auto}
  .footer_er span{flex:1;align-self:center;padding:0 0 0 0.26rem;text-align:left;
                  color:#c6c6c6;font-size:0.25rem;line-height:0.40rem}

  /* 7. 版权条：居中、分行，不再出现「官网」被拆成「网」孤零零一行 */
  .booter_bn{padding:0.26rem 0.30rem;color:#9d9d9d;font-size:0.215rem;line-height:0.40rem}
  .booter_bn li{text-align:center}
  .booter_bn .wbm-br{display:block}
}