@charset "utf-8";
/* ==========================================================================
   wlh_pages.css —— 内页现代化组件库（中英共用，路径均为 /Public/Cn/css/）
   对齐首页视觉语言：品牌蓝 #0066F5、PoppinsRegular 数字、圆角卡片、
   WOW 入场（wow ys_fadeup*）、悬停上浮 + 图片缩放 + 蓝色光晕。
   作用域一律以 .wlh_ 前缀命名，不触碰立讯原版全局样式。
   消费页面：产品中心、联系我们、人才招聘、新闻详情、隐私政策、
   法律声明、网站地图（中英同步）。
   ========================================================================== */

/* —— 设计变量（无 var() 兼容需求时直接写值，变量仅作文档用途） —— */
:root {
    --wlh-blue: #0066F5;
    --wlh-blue-deep: #0C43A8;
    --wlh-ink: #1f2a3d;
    --wlh-gray: #5a6473;
    --wlh-line: #e5e9f0;
    --wlh-bg: #f7f9fc;
}

/* ==========================================================================
   〇、全站质感统一层（渐进增强，不影响既有设计风格）
   本文件在 base-v2.0/main/media 之后加载，用于覆盖遗留全局样式中
   明显损伤画质与交互质感的规则：
   1) 图片插值：base-v2.0 对 img 全局 crisp-edges（最近邻采样），
      所有照片缩略后呈马赛克状——恢复浏览器默认平滑插值；
   2) 立讯双图容器 ys_imgbox_cover 第二张图强制拉伸填满（新闻列表
      缩略图变形 1.3~1.55 倍），改为 cover 裁切；同比例双图不受影响；
   3) 品牌化文本选区色、统一键盘焦点环、细滚动条；
   4) 平滑锚点滚动、标题 text-wrap: balance；
   5) 跨文档 View Transitions（Chromium/Safari 18.2+ 渐进增强，
      其余浏览器自动忽略）；reduced-motion 下全部关闭。
   ========================================================================== */
img {
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

.ys_imgbox_cover img:nth-child(2) {
    object-fit: cover;
}

::selection {
    background: rgba(0, 102, 245, 0.16);
    color: var(--wlh-ink, #1f2a3d);
}

html {
    scroll-behavior: smooth;
}

/* 统一键盘焦点环（表单控件已有自绘光环，特异性更高不受影响） */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--wlh-blue, #0066F5);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 品牌化细滚动条（Chromium / Firefox） */
html {
    scrollbar-width: thin;
    scrollbar-color: #b9c4d6 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c3cddb;
    border-radius: 8px;
    border: 2px solid #f2f5fa;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8b5cc;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* 标题换行均衡 / 段落避免孤行（渐进增强） */
h1, h2, h3, .mod_tit36, .mod_tit48, .mod_tit52 {
    text-wrap: balance;
}

.wlh_sec_sub, .wlh_pcard_sub, .wlh_icard_txt, .wlh_location_txt {
    text-wrap: pretty;
}

/* 跨文档视图过渡：同源页面切换时轻微交叉淡入淡出（Chrome 126+/Safari 18.2+） */
@view-transition {
    navigation: auto;
}

/* 减少动态偏好：平滑滚动、入场动画与视图过渡全部关闭 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ==========================================================================
   〇·二、Cookie 同意提示（首页中英共用，替代立讯 mod_flex 旧条）：
   左下角悬浮卡片 + 品牌蓝胶囊按钮，button 元素保证键盘可达。
   ========================================================================== */
.wlh_cookie {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 560px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--wlh-line, #e5e9f0);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(15, 34, 72, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* [hidden] 需显式声明：上方 display:flex 会覆盖 UA 对 hidden 的 display:none */
.wlh_cookie[hidden] {
    display: none;
}

.wlh_cookie_txt {
    margin: 0;
    color: var(--wlh-gray, #5a6473);
    font-size: 13px;
    line-height: 1.8;
}

.wlh_cookie_txt a {
    color: var(--wlh-blue, #0066F5);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 102, 245, 0.4);
}

.wlh_cookie_txt a:hover,
.wlh_cookie_txt a:focus-visible {
    border-bottom-style: solid;
}

.wlh_cookie_btn {
    flex: none;
    padding: 10px 26px;
    border: 1px solid var(--wlh-blue, #0066F5);
    border-radius: 550px;
    background: var(--wlh-blue, #0066F5);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.wlh_cookie_btn:hover,
.wlh_cookie_btn:focus-visible {
    background: var(--wlh-blue-deep, #0C43A8);
    border-color: var(--wlh-blue-deep, #0C43A8);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 102, 245, 0.3);
    outline: none;
}

@media screen and (max-width: 767px) {
    .wlh_cookie {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        flex-wrap: wrap;
    }

    .wlh_cookie_btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wlh_cookie_btn {
        transition: none !important;
    }

    .wlh_cookie_btn:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   一、区块骨架：.wlh_sec / .wlh_sec_alt（背景交替）/ .wlh_sec_head
   版式对齐首页 sya_p1_tit（大标题 + 灰色副标题居中），
   增加蓝色 eyebrow 小标与菱形装饰，形成整站一致的区块头部。
   ========================================================================== */
.wlh_sec {
    padding: 72px 0;
}

.wlh_sec_alt {
    background: var(--wlh-bg);
}

/* —— 解决方案落地页分组区块（.wlh_sgroup）：
   带行业 slug 锚点（首页热点卡片深链 / 旧 URL 301 目标），
   scroll-margin-top 防止锚点跳转被固定头部遮挡；奇偶分组背景交替。 —— */
.wlh_solu_wrap {
    padding-bottom: 0;
}

.wlh_sgroup {
    padding: 66px 0;
    scroll-margin-top: 96px;
}

.wlh_solu_wrap .wlh_sgroup:first-of-type {
    padding-top: 26px;
}

.wlh_sgroup .wlh_grid {
    margin-top: 6px;
}

.wlh_sec_head {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 46px;
}

.wlh_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--wlh-blue);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: "PoppinsRegular", "Microsoft Yahei", sans-serif;
}

.wlh_eyebrow::before,
.wlh_eyebrow::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--wlh-blue);
    transform: rotate(45deg);
    opacity: .55;
}

.wlh_sec_head .wlh_sec_tit {
    color: var(--wlh-ink);
    font-size: 36px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 14px;
}

.wlh_sec_head .wlh_sec_sub {
    color: var(--wlh-gray);
    font-size: 17px;
    line-height: 1.85;
    margin: 0;
}

/* ==========================================================================
   二、媒体卡片网格：.wlh_grid + .wlh_pcard
   产品列表/可复用于任何「图 + 标题 + 摘要 + 链接」列表。
   悬停：卡片上浮、图片 1.06 倍缩放、顶部蓝色细条展开、箭头滑出。
   ========================================================================== */
.wlh_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.wlh_pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* 顶部品牌色细条：默认 0 宽，悬停从左侧展开 */
.wlh_pcard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #0066F5, #4d94ff);
    transition: width 0.45s ease;
}

.wlh_pcard:hover,
.wlh_pcard:focus-within {
    transform: translateY(-6px);
    border-color: rgba(0, 102, 245, 0.45);
    box-shadow: 0 18px 40px rgba(0, 102, 245, 0.14);
}

.wlh_pcard:hover::before,
.wlh_pcard:focus-within::before {
    width: 100%;
}

.wlh_pcard_img {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--wlh-bg);
}

.wlh_pcard_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.wlh_pcard:hover .wlh_pcard_img img,
.wlh_pcard:focus-within .wlh_pcard_img img {
    transform: scale(1.06);
}

.wlh_pcard_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
}

.wlh_pcard_tit {
    color: var(--wlh-ink);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0 0 8px;
}

.wlh_pcard_sub {
    flex: 1;
    color: var(--wlh-gray);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wlh_pcard_more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--wlh-blue);
    font-size: 14px;
    font-weight: 600;
}

.wlh_pcard_more .wlh_arr {
    transition: transform 0.3s ease;
}

.wlh_pcard:hover .wlh_pcard_more .wlh_arr,
.wlh_pcard:focus-within .wlh_pcard_more .wlh_arr {
    transform: translateX(5px);
}

/* 卡片整体可点：产品中心卡片由「跳详情页」改为「点击放大图片」，以按钮承载 */
.wlh_pcard_link {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

/* ==========================================================================
   三、图标信息卡：.wlh_icard（联系方式 / 招聘优势等）
   圆形图标 + 标题 + 正文；悬停上浮、图标底变蓝、图标反白。
   ========================================================================== */
.wlh_grid_icards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.wlh_icard {
    position: relative;
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 14px;
    padding: 32px 26px 28px;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.06);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* 右上角淡蓝圆弧装饰 */
.wlh_icard::after {
    content: "";
    position: absolute;
    right: -46px;
    top: -46px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 65%, rgba(0, 102, 245, 0.10), rgba(0, 102, 245, 0) 70%);
    transition: transform 0.45s ease;
}

.wlh_icard:hover,
.wlh_icard:focus-within {
    transform: translateY(-6px);
    border-color: rgba(0, 102, 245, 0.4);
    box-shadow: 0 16px 36px rgba(0, 102, 245, 0.13);
}

.wlh_icard:hover::after {
    transform: scale(1.35);
}

.wlh_icard_ico {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(0, 102, 245, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: background 0.35s ease;
}

.wlh_icard_ico svg {
    width: 26px;
    height: 26px;
    stroke: var(--wlh-blue);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.35s ease;
}

.wlh_icard:hover .wlh_icard_ico,
.wlh_icard:focus-within .wlh_icard_ico {
    background: var(--wlh-blue);
}

.wlh_icard:hover .wlh_icard_ico svg,
.wlh_icard:focus-within .wlh_icard_ico svg {
    stroke: #fff;
}

.wlh_icard_tit {
    color: var(--wlh-ink);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 10px;
}

.wlh_icard_txt {
    color: var(--wlh-gray);
    font-size: 15px;
    line-height: 1.85;
    margin: 0;
}

.wlh_icard_txt a {
    color: var(--wlh-blue);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 102, 245, 0.4);
    transition: border-color 0.3s ease;
}

.wlh_icard_txt a:hover,
.wlh_icard_txt a:focus-visible {
    border-bottom-color: var(--wlh-blue);
    border-bottom-style: solid;
}

/* 联系卡“业务联系人”整行强调：品牌蓝（客户标注改色，行内链接沿用蓝色虚线样式） */
.wlh_icard_txt .wlh_contact_line {
    color: var(--wlh-blue);
}

/* ==========================================================================
   三·二、区位地图：.wlh_location（联系我们·交通位置，中英共用）
   左地图卡片 + 右信息卡片的两栏布局。替换立讯 about_horizon 文字压图
   浮层——该组件把文字绝对定位铺在整幅地图上，浅色底图上对比度不足。
   地图自适应占约 2/3（客户反馈：地图内道路/地名文字可读性低，需更大
   展示尺寸），右栏固定 33% 且下限 300px，防止窄容器下文字换行过碎。
   ========================================================================== */
.wlh_location {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 33%);
    gap: 30px;
    align-items: stretch;
}

.wlh_location_map {
    position: relative;
    border: 1px solid var(--wlh-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.06);
    /* PC 地图原图比例（location-map-pc.jpg，2800×1632）；
       竖版移动端图在 ≤767px 断点单独覆盖 */
    aspect-ratio: 2800 / 1632;
}

.wlh_location_map img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 覆盖 base-v2.0 全局 img 的 crisp-edges（最近邻采样）：缩小显示的
       地图会被其打成马赛克，地图/照片类必须用平滑插值 */
    image-rendering: auto;
}

.wlh_location_map .wlh_location_img-ph {
    display: none;
}

.wlh_location_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 14px;
    padding: 40px 38px;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.06);
}

.wlh_location_tit {
    color: var(--wlh-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 18px;
}

.wlh_location_tit::before {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0066F5, #4d94ff);
    margin-bottom: 16px;
}

.wlh_location_txt {
    color: var(--wlh-gray);
    font-size: 15px;
    line-height: 1.95;
    margin: 0;
}

.wlh_location_btns {
    margin: 28px 0 0;
}

@media screen and (max-width: 991px) {
    .wlh_location {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .wlh_location_info {
        padding: 30px 26px;
    }
}

@media screen and (max-width: 767px) {
    .wlh_location_map .wlh_location_img-pc {
        display: none;
    }

    .wlh_location_map .wlh_location_img-ph {
        display: block;
    }

    /* 竖版地图按原生比例展示，过高视口下居中裁切保底 */
    .wlh_location_map {
        aspect-ratio: 880 / 1232;
        max-height: 62vh;
    }

    .wlh_location_info {
        padding: 26px 20px;
    }

    .wlh_location_btns .wlh_btn_solid {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   四、数据统计带：.wlh_stats / .wlh_stat
   数字用 PoppinsRegular + 品牌蓝，进入视口滚动 counting（wlh_pages.js）。
   ========================================================================== */
.wlh_stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.wlh_stat {
    position: relative;
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 14px;
    padding: 30px 18px 26px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.wlh_stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0, 102, 245, 0.12);
}

/* 顶部菱形装饰 */
.wlh_stat::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    background: var(--wlh-blue);
    transform: translate(-50%, -4px) rotate(45deg);
    opacity: .8;
}

.wlh_stat_num {
    color: var(--wlh-blue);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    font-family: "PoppinsRegular", "Microsoft Yahei", sans-serif;
}

.wlh_stat_unit {
    font-size: 20px;
    margin-left: 2px;
}

.wlh_stat_lab {
    margin-top: 8px;
    color: var(--wlh-gray);
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================================
   五、CTA 横幅：.wlh_cta
   品牌蓝渐变 + 右上光斑，按钮复用首页 wlh_ban_more 的胶囊语言。
   ========================================================================== */
.wlh_cta {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    padding: 52px 48px;
    background: linear-gradient(120deg, #0C43A8 0%, #0066F5 58%, #3d8bff 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    box-shadow: 0 18px 44px rgba(0, 78, 200, 0.28);
}

/* 右上角光斑与网格纹理 */
.wlh_cta::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%);
}

.wlh_cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}

.wlh_cta_tit {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 8px;
}

.wlh_cta_sub {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

.wlh_cta_btns {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.wlh_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 32px;
    border-radius: 550px;
    font-size: 15px;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.wlh_btn:hover,
.wlh_btn:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--wlh-blue);
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 40, 110, 0.25);
}

/* 实底蓝按钮（浅色背景上使用） */
.wlh_btn_solid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 34px;
    border-radius: 550px;
    font-size: 15px;
    line-height: 1;
    border: 1px solid var(--wlh-blue);
    color: #fff;
    background: var(--wlh-blue);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.wlh_btn_solid:hover,
.wlh_btn_solid:focus-visible {
    background: #0C43A8;
    border-color: #0C43A8;
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 102, 245, 0.32);
}

/* ==========================================================================
   六、表单：.wlh_form（联系我们在线留言）
   统一输入控件高度/圆角/聚焦光环；提交按钮复用 .wlh_btn_solid。
   ========================================================================== */
.wlh_form {
    max-width: 820px;
    margin: 0 auto;
}

.wlh_form_row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.wlh_field {
    margin-bottom: 20px;
}

.wlh_field label {
    display: block;
    margin-bottom: 8px;
    color: var(--wlh-ink);
    font-size: 14px;
    font-weight: 600;
}

.wlh_field label .wlh_req {
    color: #e04b4b;
    margin-left: 2px;
}

.wlh_field input,
.wlh_field textarea {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #d4dbe6;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    color: var(--wlh-ink);
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wlh_field textarea {
    height: auto;
    min-height: 130px;
    padding: 12px 16px;
    line-height: 1.7;
    resize: vertical;
}

.wlh_field input:focus,
.wlh_field textarea:focus {
    outline: none;
    border-color: var(--wlh-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 245, 0.15);
}

.wlh_field input:focus-visible,
.wlh_field textarea:focus-visible {
    outline: none;
}

.wlh_field input::placeholder,
.wlh_field textarea::placeholder {
    color: #aab3c0;
}

/* 校验失败态（JS 加 .err） */
.wlh_field input.err,
.wlh_field textarea.err {
    border-color: #e04b4b;
    box-shadow: 0 0 0 3px rgba(224, 75, 75, 0.12);
}

.wlh_form_actions {
    text-align: center;
    margin-top: 6px;
}

/* ==========================================================================
   七、二维码卡：.wlh_qrcard
   ========================================================================== */
.wlh_qr_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    justify-content: center;
}

.wlh_qrcard {
    text-align: center;
}

.wlh_qrcard_img {
    width: 160px;
    height: 160px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.wlh_qrcard_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.wlh_qrcard:hover .wlh_qrcard_img {
    transform: translateY(-6px);
    border-color: rgba(0, 102, 245, 0.45);
    box-shadow: 0 16px 36px rgba(0, 102, 245, 0.16);
}

.wlh_qrcard_lab {
    margin-top: 14px;
    color: var(--wlh-ink);
    font-size: 15px;
    font-weight: 600;
}

/* ==========================================================================
   八、文档页（隐私政策/法律声明）：.wlh_doc
   ========================================================================== */
.wlh_doc_wrap {
    max-width: 920px;
    margin: 0 auto;
}

.wlh_doc_head {
    text-align: center;
    padding-bottom: 34px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--wlh-line);
}

.wlh_doc_head .wlh_doc_tit {
    color: var(--wlh-ink);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 16px;
}

.wlh_doc_meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.wlh_doc_chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 550px;
    background: rgba(0, 102, 245, 0.07);
    border: 1px solid rgba(0, 102, 245, 0.22);
    color: var(--wlh-blue);
    font-size: 13px;
    font-weight: 600;
}

.wlh_doc_card {
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 16px;
    padding: 44px 48px;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.05);
}

/* 文档小节：编号方块 + 标题 */
.wlh_doc_sec {
    margin-bottom: 34px;
}

.wlh_doc_sec:last-child {
    margin-bottom: 0;
}

.wlh_doc_sec_tit {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--wlh-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 14px;
}

.wlh_doc_sec_tit::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--wlh-blue);
    transform: rotate(45deg);
}

.wlh_doc_sec p {
    color: var(--wlh-gray);
    font-size: 15px;
    line-height: 1.95;
    margin: 0 0 12px;
}

.wlh_doc_sec p:last-child {
    margin-bottom: 0;
}

.wlh_doc_sec p strong {
    color: var(--wlh-ink);
}

.wlh_doc_sec a {
    color: var(--wlh-blue);
}

/* ==========================================================================
   九、网站地图：.wlh_smap
   ========================================================================== */
.wlh_smap_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.wlh_smap_group {
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 14px;
    padding: 26px 26px 22px;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.wlh_smap_group:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 102, 245, 0.1);
}

.wlh_smap_group_tit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--wlh-line);
}

.wlh_smap_group_tit::before {
    content: "";
    width: 9px;
    height: 9px;
    background: var(--wlh-blue);
    transform: rotate(45deg);
}

.wlh_smap_group_tit a,
.wlh_smap_group_tit .wlh_smap_nolink {
    color: var(--wlh-ink);
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.wlh_smap_group_tit a:hover {
    color: var(--wlh-blue);
}

.wlh_smap_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wlh_smap_list li + li {
    margin-top: 6px;
}

.wlh_smap_list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: 16px;
    color: var(--wlh-gray);
    font-size: 15px;
    line-height: 1.9;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.wlh_smap_list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #c3cddb;
    transform: translateY(-50%) rotate(45deg);
    transition: background 0.25s ease;
}

.wlh_smap_list a:hover,
.wlh_smap_list a:focus-visible {
    color: var(--wlh-blue);
    transform: translateX(4px);
    outline: none;
}

.wlh_smap_list a:hover::before {
    background: var(--wlh-blue);
}

/* ==========================================================================
   十、新闻/产品详情增强（作用于原 .detail_wrap 结构之上）
   1) .wlh_readbar：顶部阅读进度条（wlh_pages.js 驱动）；
   2) .wlh_art_meta：文章头部元信息胶囊；
   3) .wlh_pn：上一篇/下一张卡片化；
   4) 侧栏 .dwru_li 悬停效果增强。
   ========================================================================== */
.wlh_readbar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1200;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #0066F5, #4d94ff);
    transition: width 0.1s linear;
    pointer-events: none;
}

.wlh_art_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}

.wlh_art_chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 550px;
    background: rgba(0, 102, 245, 0.07);
    color: var(--wlh-blue);
    font-size: 13px;
    font-weight: 600;
    font-family: "PoppinsRegular", "Microsoft Yahei", sans-serif;
}

.wlh_art_chip_line {
    width: 1px;
    height: 22px;
    background: var(--wlh-line);
}

/* 上一篇/下一张卡片化 */
.wlh_pn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wlh_pn a,
.wlh_pn .wlh_pn_off {
    display: block;
    background: #fff;
    border: 1px solid var(--wlh-line);
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.wlh_pn a:hover,
.wlh_pn a:focus-visible {
    border-color: rgba(0, 102, 245, 0.45);
    box-shadow: 0 12px 26px rgba(0, 102, 245, 0.12);
    transform: translateY(-3px);
    outline: none;
}

.wlh_pn_lab {
    display: block;
    color: #98a2b3;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.wlh_pn_txt {
    display: block;
    color: var(--wlh-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wlh_pn_txt.wlh_pn_off,
.wlh_pn .wlh_pn_off .wlh_pn_txt {
    color: #98a2b3;
    font-weight: 400;
}

/* 侧栏「相关推荐」条目悬停 */
.detail_wrap_ri_ul .dwru_li {
    transition: transform 0.3s ease;
}

.detail_wrap_ri_ul .dwru_li:hover {
    transform: translateX(4px);
}

/* ==========================================================================
   十一、响应式
   ========================================================================== */
@media screen and (max-width: 1199px) {
    .wlh_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media screen and (max-width: 991px) {
    .wlh_sec {
        padding: 54px 0;
    }
    .wlh_sgroup {
        padding: 46px 0;
        scroll-margin-top: 76px;
    }
    .wlh_grid_icards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .wlh_stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wlh_smap_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wlh_cta {
        padding: 40px 34px;
    }
    .wlh_doc_card {
        padding: 30px 26px;
    }
}

@media screen and (max-width: 767px) {
    .wlh_sec {
        padding: 44px 0;
    }
    .wlh_sec_head .wlh_sec_tit {
        font-size: 26px;
    }
    .wlh_sec_head .wlh_sec_sub {
        font-size: 15px;
    }
    .wlh_grid,
    .wlh_grid_icards,
    .wlh_stats,
    .wlh_smap_grid,
    .wlh_form_row,
    .wlh_pn {
        grid-template-columns: 1fr;
    }
    .wlh_cta {
        padding: 34px 22px;
        border-radius: 14px;
    }
    .wlh_cta_tit {
        font-size: 22px;
    }
    .wlh_cta_btns {
        width: 100%;
    }
    .wlh_cta_btns .wlh_btn,
    .wlh_cta_btns .wlh_btn_solid {
        flex: 1;
        justify-content: center;
    }
    .wlh_pn_txt {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .wlh_qr_grid {
        gap: 22px;
    }
    .wlh_qrcard_img {
        width: 132px;
        height: 132px;
    }
}

/* ==========================================================================
   十二、可达性：聚焦可见 与 减少动态
   ========================================================================== */
.wlh_pcard a:focus-visible,
.wlh_icard_txt a:focus-visible,
.wlh_smap_list a:focus-visible,
.wlh_qrcard a:focus-visible,
.wlh_btn:focus-visible,
.wlh_btn_solid:focus-visible {
    outline: 2px solid var(--wlh-blue);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .wlh_pcard,
    .wlh_pcard::before,
    .wlh_pcard_img img,
    .wlh_icard,
    .wlh_icard::after,
    .wlh_icard_ico,
    .wlh_icard_ico svg,
    .wlh_stat,
    .wlh_btn,
    .wlh_btn_solid,
    .wlh_qrcard_img,
    .wlh_smap_group,
    .wlh_smap_list a,
    .wlh_pn a,
    .detail_wrap_ri_ul .dwru_li,
    .wlh_readbar {
        transition: none !important;
    }
    .wlh_pcard:hover,
    .wlh_icard:hover,
    .wlh_stat:hover,
    .wlh_qrcard:hover .wlh_qrcard_img,
    .wlh_smap_group:hover,
    .wlh_pn a:hover {
        transform: none !important;
    }
    .wlh_pcard:hover .wlh_pcard_img img {
        transform: none !important;
    }
}

/* ==========================================================================
   X、about_horizon 全局修复：文字直接叠加在整幅背景图上不可见
   原立讯组件把文字浮在整幅背景图之上，仅 0.15 黑色蒙版。
   标题(mod_tit36/24)已被设为白色，但描述文字(mod_tit18z 等)沿用深色，
   在提亮后的图片上几乎不可见；且 0.15 蒙版也不足以托住白字。
   修复：① 统一 about_horizon 内文字为白色并加投影；
        ② 增强文字区蒙版（桌面底部渐深、移动端整体加深，保留上方图片可见度）。
   作用域限制在 .about_horizon 内，不影响其它页面的普通文字。
   ========================================================================== */
.about_horizon .ahll_info,
.about_horizon .ahll_info .mod_tit18z,
.about_horizon .ahll_info .mod_tit24,
.about_horizon .ahll_info p {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* 蒙版：桌面端文字底对齐，底部渐深以保留上方图片可见度 */
.about_horizon_img_wrap::after {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.20) 42%,
        rgba(0, 0, 0, 0.55) 100%);
}

/* 移动端文字垂直居中，需整体加深蒙版保证对比度 */
@media screen and (max-width: 767px) {
    .about_horizon_img_wrap::after {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.48) 50%,
            rgba(0, 0, 0, 0.42) 100%);
    }
}

/* ==========================================================================
   XI、图片放大 lightbox：触发元素（.wlh_zoom / .wlh_zoom_link / 内容图）
   → .wlh_zoombox 全屏弹层。
   产品中心卡片与分类页产品内容图点击放大；打开时锁定页面滚动，
   prefers-reduced-motion 时禁用开启动画。
   ========================================================================== */
.wlh_zoom,
.wlh_zoom_link,
.wlh_pt_items img {
    cursor: zoom-in;
}

.wlh_zoom_link {
    color: var(--wlh-blue);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
}

.wlh_zoom_link:hover {
    text-decoration: underline;
}

body.wlh-noscroll {
    overflow: hidden;
}

.wlh_zoombox {
    position: fixed;
    inset: 0;
    z-index: 1999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wlh_zoombox[hidden] {
    display: none;
}

.wlh_zoombox_mask {
    position: absolute;
    inset: 0;
    background: rgba(7, 12, 24, 0.86);
    animation: wlh_zoom_fade 0.25s ease;
}

.wlh_zoombox_stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(1080px, 94vw);
    animation: wlh_zoom_pop 0.3s ease;
}

.wlh_zoombox_img {
    display: block;
    max-width: min(1080px, 94vw);
    max-height: calc(88vh - 150px);
    object-fit: contain;
    border-radius: 10px;
    background: #0b1220;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.wlh_zoombox_cap {
    max-width: min(1080px, 94vw);
    margin-top: 14px;
    color: #fff;
    text-align: center;
}

.wlh_zoombox_tit {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wlh_zoombox_sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wlh_zoombox_close {
    position: absolute;
    right: -8px;
    top: -52px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    transition: background 0.25s ease;
}

.wlh_zoombox_close:hover {
    background: rgba(255, 255, 255, 0.28);
}

@keyframes wlh_zoom_fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wlh_zoom_pop {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wlh_zoombox_mask,
    .wlh_zoombox_stage {
        animation: none;
    }
}

/* ==========================================================================
   全站 UI 微调层（2026-08-24 视觉审计修复）
   原 1) 主视觉 hero 标题文字阴影与标题后方深色长条蒙层（scrim）
   已按客户反馈于 2026-08-26 撤销，恢复大图原貌：
   标题/副标题直接压图、无阴影、无色条。
   1) 首页新闻卡片日期对比度加深（#8A94A6 → #6B7A93，AA 4.5 边界内）；
   2) 首页可持续蓝图区标题/描述加文字光晕与浅色蒙层，避免亮背景吞字。
   ========================================================================== */

/* ---- 1) 首页新闻卡片日期：提升小字对比度 ---- */
.sya_p4 .hn_date_ym {
    color: #6B7A93;
}

/* ---- 2) 可持续蓝图区：文字与背景解耦 ---- */
.sus_scene .sus_tit .mod_tit48,
.sus_scene .sus_desc_info p {
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(255, 255, 255, 0.4);
}
@media screen and (max-width: 1199px) {
    .sus_scene .sus_cont {
        background: rgba(255, 255, 255, 0.72);
        border-radius: 18px;
        box-shadow: 0 12px 40px rgba(45, 90, 60, 0.08);
    }
    .sus_scene .sus_cont .ys_cont1400 {
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* ---- 4) 页脚版权/法律链接：浅字加深（深底小字可读性） ---- */
.mod_fot_copyri p,
.mod_fot_copyri a {
    color: rgba(247, 247, 247, 0.72);
}
.mod_fot_copyri a:hover,
.mod_fot_copyri a:focus-visible {
    color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   5) 英文内容行数余量（html[lang="en"] 命中英文站点全部页面）
   英文文案普遍比中文长，2 行 clamp 常被切半句：
   产品卡描述、首页新闻标题、新闻列表标题放宽到 3 行，保持等高裁切。
   ========================================================================== */
html[lang="en"] .wlh_pcard_sub {
    -webkit-line-clamp: 3;
}
html[lang="en"] .sya_p4 .hn_card_tit {
    -webkit-line-clamp: 3;
}
html[lang="en"] .nrru_li_info .mod_tit36 {
    -webkit-line-clamp: 3;
}

/* ---- 关键能力页·智能料仓管理（innov_effect3）：Kardex 设备实拍图整体偏亮，
     组件默认的左侧 30% 黑渐变压不住叠加的白色文字，按本区块加深
     （仅作用此区块，不影响其他 innov_effect 板块的暗色底图） ---- */
.innov_effect3 .innov_effect_img_wrap::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0) 68%);
}

/* ---- 关键能力页锚点深链（中英文 #cap-01005 / #cap-pop / #cap-vlm / #cap-mes，
     头部下拉/页脚/站点地图导航用）：原生锚点跳转预留固定头部高度，避免标题被遮挡。
     英文板块为 .wlh_featrow，中文板块为 .innov_effect ---- */
.wlh_featrow[id],
.innov_effect[id] {
    scroll-margin-top: 96px;
}