/*! 首页「代理品牌」品牌墙（数据取自产品文档，后台「复刻站点 → 品牌」维护） */

.bd {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    /* 最后一行不足整行时居中，避免 19 个品牌排成 7/7/5 时右边空一截 */
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.bd__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14.2857%;
    padding: 5px;
    box-sizing: border-box;
}

.bd__item img {
    /* 所有 logo 已统一裁切到 480x240 白底画布，等比铺满即可保证大小完全一致 */
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e4e9f0;
    border-radius: 4px;
    background: #fff;
}

.bd__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 与 logo 画布同为 2:1，保证文字卡片与 logo 卡片高度一致 */
    aspect-ratio: 2 / 1;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #e4e9f0;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.bd__item:hover .bd__tile {
    border-color: #9cc3e8;
    box-shadow: 0 2px 10px rgba(43, 127, 212, .15);
    transform: translateY(-1px);
}

.bd__en {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    color: #2c3e55;
    line-height: 1.3;
    word-break: break-word;
}

.bd__cn {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    color: #8b95a5;
    line-height: 1.2;
}

/* ---------------------------------------------------------------- 断点
   列数按「容器宽度」而不是视口来定：
   - 桌面品牌墙外层永远是 1200px 定宽（见下面的 id 规则），固定一行 7 个；
   - 移动端品牌墙宽度 = 视口，按视口逐层覆盖：
     601–768 一行 6 个、441–600 一行 5 个、≤440 一行 4 个，
     让整墙高度装进外层（移动端 217px），不顶到标题也不盖住下一屏。
   上界用 .98 是给 subpixel 视口留余量，避免 767.x 这类宽度掉到规则外面。 */
@media (max-width: 767.98px) {
    .bd__item { width: 16.6667%; min-height: 52px; padding: 4px; }
    .bd__en { font-size: 12px; }
    .bd__cn { font-size: 11px; }
    .bd__tile { padding: 6px 4px; }
}

@media (max-width: 600.98px) {
    .bd__item { width: 20%; }
}

@media (max-width: 440.98px) {
    .bd__item { width: 25%; }
}

/* 桌面品牌墙：容器 1200px 定宽、外层高 321px。一行 7 个排 7/7/5，
   logo 从 ~112px 放大到 ~161px，三行总高约 276px，仍在盒子里居中。
   用 id 提优先级，避免被上面按视口写的窄屏规则带偏。 */
#smv_con_133_30 .bd__item { width: 14.2857%; min-height: 62px; padding: 5px; }

/* 移动端品牌墙外层同样是 217px 定高，19 个 logo 排出来远超这个高度，
   会顶到「代理品牌」标题并盖住下一屏；改成随内容撑高，
   下方多余的留白由 brand-collapse.js 统一收拢。 */
#smv_con_95_51 { height: auto !important; min-height: 217px; }

/* ===== 代理品牌板块背景图 =====
   原图（电弧 + 元件特写）中部太满，压住 logo 墙、标题区对比度也不够；
   换成自生成的超清抽象科技底图 2048x960：两侧电路光效，中部大面积留白。
   brands.css 只在首页注入，所以只覆盖这一个板块（PC .con_129_8 / 移动 .con_92_35）；
   原图 /uploads/pixel/img.wanwang.xin/ca79cefb….png 不动，其它页面仍在用。 */
.con_129_8 .fullcolumn-outer,
.con_92_35 .m-container {
    background-image: url(/uploads/banner/agent-brand-bg.jpg) !important;
}


/* ===== 隐藏「经销品牌」板块（仍在展示原公司的品牌 logo） =====
   102_17 是移动端那个轮播的容器：只藏里面的两页会留下 372px 空白和翻页箭头，
   容器必须一起藏（桌面端对应的 143_51 一直是整块藏的）。 */
#smv_con_143_51,
#smv_con_144_51,
#smv_con_145_51,
#smv_con_96_10,
#smv_con_97_41,
#smv_con_98_41,
#smv_con_99_41,
#smv_con_135_14,
#smv_con_102_17,
#smv_con_103_59,
#smv_con_104_17,
#smv_con_136_20 { display: none !important; }

/* ===== 代理品牌只保留第 1 页 =====
   该板块是个 2 页 slideset：第 2 页（Area1）就是上面被隐藏的「经销品牌」，
   点翻页过去是一片空白。这里把第 2 页连同左右箭头、底部圆点一起隐藏，
   只留第 1 页。 */
#smv_con_133_30 .content-box[data-area="Area1"],
#smv_con_133_30 .slideArrow,
#smv_con_133_30 [data-u="navigator"] { display: none !important; }

/* ===== 说明文字可读性（配合压过曝后的背景） =====
   这些小字原本是 #999/#666，压在明亮背景上对比度只有 1.5~3.0，达不到小字 4.5:1；
   背景不能一味压暗 —— 蓝色标题需要亮底（底色一暗，#0071b7 标题反而失效），
   所以按组件精确加深文字本身的颜色。仅覆盖「关于森海汇恒」与「服务项目」两块。
   蓝色卡片上的白字（另一套幻灯片）不在此列，保持原样。 */
#smv_con_116_35 span, #smv_con_116_35 em, #smv_con_116_35 a,
#smv_con_124_6 span, #smv_con_124_6 em, #smv_con_124_6 b,
#smv_con_127_8 span, #smv_con_127_8 em, #smv_con_127_8 b,
#smv_con_159_19 span, #smv_con_159_19 em, #smv_con_159_19 b,
#smv_con_182_29 span, #smv_con_182_29 em, #smv_con_182_29 b,
#smv_con_193_32 span, #smv_con_193_32 em, #smv_con_193_32 b,
#smv_con_160_40 span, #smv_con_183_29 span, #smv_con_194_32 span {
    color: #4a4a4a !important;
}

/* 页脚夜景背景：白字（电话/邮箱/联系方式）正好压在城市灯光亮斑上，
   实测对比度只有 2.4~4.2（小字需 4.5）；整体压暗 30% 后全部 ≥4.6。
   该元素是纯背景层、无子元素，加 filter 不影响布局。 */
#bannerWrap_tem_72_47 { filter: brightness(0.7); }

/* 服务项目三张卡片上有一套**完全重叠的白色副本文字**（与深色正文同坐标、DOM 更靠后、
   卡片又是透明的 —— 原站 hover 残留，那个 hover-effect 类并没有对应 CSS）。
   白字盖住深色正文才是「正文发糊看不清」的元凶；隐藏副本，露出下面加深过的深色正文。 */
#smv_con_161_37, #smv_con_163_37,
#smv_con_184_29, #smv_con_186_29,
#smv_con_195_32, #smv_con_197_32 { display: none !important; }

/* 页脚最下方的建站平台标识条（阿里云 | 本网站支持 IPv6 | Powered by 万网）——
   已抽到全站通用的 /assets/css/pixel-common.css，由 Base::pixelDoc 注入到所有像素页，
   这里不再重复写。 */