@charset "utf-8";
/* ==========================================================================
   wlh_subbanner.css —— 内页 banner 统一优化
   仅作用于子页内页通栏 .ys_banner1，不影响首页 .ys_banner。
   1) 统一高度为视口 1/2（50vh），所有内页一致，
      消除不同比例背景图导致的 banner 高度差异；
   2) 背景图 object-fit:cover 填满并居中裁切；
   3) 加强遮罩 + 文字投影，提升白色标题可见度（满足 WCAG 大号文字 ≥ 3:1）。
   ========================================================================== */

/* 统一 1/2 视口高度；min-height 防止矮屏下 banner 过窄、文字与面包屑拥挤 */
.ys_banner1 .ys_ban_imgbox {
    height: 50vh;
    min-height: 320px;
    overflow: hidden;
}

/* PC 图与移动端图均填满裁切（.ys_ban_pc/.ys_ban_ph 的 display 切换不受影响） */
.ys_banner1 .ys_ban_imgbox img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 覆盖原 .ys_ban_imgbox::before 的 rgba(0,0,0,0.08)，改为中部加深的渐变遮罩 */
.ys_banner1 .ys_ban_imgbox::before {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.40) 0%,
        rgba(0, 0, 0, 0.50) 40%,
        rgba(0, 0, 0, 0.50) 60%,
        rgba(0, 0, 0, 0.42) 100%);
}

/* 标题 / 副标题定位到 hero 图右下角：
   宽度与水平居中方式对齐内容容器 .ys_cont1400（82.5%，上限 1400px），
   文字右对齐，使标题右边缘与下方面包屑容器右边缘齐平，整体落在 hero 图右下角。
   top 用 !important 覆盖 main.css 在 ≤1199/991px 下对 .ys_pos_center 设的 top!important。 */
.ys_banner1 .ys_ban_li_img {
    left: 50%;
    right: auto;
    top: auto !important;
    bottom: 40px;
    width: 82.5%;
    max-width: 1400px;
    transform: translateX(-50%);
    text-align: right;
}

/* 平板及以下：banner 变矮，标题贴近底部，仍靠右下角 */
@media screen and (max-width: 991px) {
    .ys_banner1 .ys_ban_li_img {
        bottom: 28px;
    }
}

/* 移动端：占满宽度并保留侧边留白，文字右对齐贴近右下角 */
@media screen and (max-width: 767px) {
    .ys_banner1 .ys_ban_li_img {
        width: 100%;
        padding: 0 20px;
        bottom: 20px;
    }
}

/* 标题 / 副标题 / 面包屑文字投影兜底，保证任何背景图下都清晰可读 */
.ys_banner1 .ybli_tit .mod_tit48,
.ys_banner1 .ybli_info .mod_tit24,
.ys_banner1 .ybli_info .mod_tit20z,
.ys_banner1 .mod_bread_ul li a,
.ys_banner1 .mod_bread_ul li::after {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* 移动端：保持 1/2 高度，最小高度略降 */
@media screen and (max-width: 767px) {
    .ys_banner1 .ys_ban_imgbox {
        height: 50vh;
        min-height: 280px;
    }
}

/* 超宽屏（≥1922px）：提高最小高度，避免 banner 显得过扁 */
@media screen and (min-width: 1922px) {
    .ys_banner1 .ys_ban_imgbox {
        min-height: 480px;
    }
}

/* ==========================================================================
   面包屑移至 hero 图下方（仅子页 .ys_banner1，首页 .ys_banner 不受影响）
   原 .mod_bread 为 position:absolute;top:45px 覆盖在 hero 图上、白色文字，
   在亮背景图上可见度很差；改为静态流式布局置于 hero 图正下方，配深色文字。
   注：.ys_ban_li 为 position:relative，标题 .ys_ban_li_img 以图片 slide 为定位
   上下文，故面包屑改为 static 后不会影响标题居中位置。
   ========================================================================== */
.ys_banner1 .mod_bread {
    position: static;
    width: 100%;
    z-index: auto;
    background: #f7f7f7;
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 0;
}

/* 链接：深灰，hover 品牌蓝 */
.ys_banner1 .mod_bread_ul li a {
    color: #666;
}
.ys_banner1 .mod_bread_ul li a:hover {
    color: #0066f5;
}

/* 当前页（无链接的 li）文字加深，分隔符淡灰 */
/* 统一 li 字号与行高：带链接项由 .mod_bread_ul li a 设置 line-height:1.75，
   而无链接的最后一项继承 li 的较小行高，导致文字基线高于其它项（错位上移）。
   在 li 上显式设置与 <a> 一致的字号/行高，使四项基线对齐。 */
.ys_banner1 .mod_bread_ul li {
    color: #333;
    font-size: 14px;
    line-height: 1.75;
}
.ys_banner1 .mod_bread_ul li::after {
    color: #cfcfcf;
}

/* ==========================================================================
   产品页 · 方案页风格（solution/automotive-medical 观感）扩展
   作用域类名均以 wlh_ 前缀 + .ys_ban_sol 限定，不影响其它内页 banner。
   1) .ys_ban_sol —— banner 标题居中 + “获取方案” CTA 按钮（覆盖上方右下角定位）；
   2) .wlh_cpbu_icon —— 能力卡图标容器（替代方案页 SVG 图标位）；
   3) .wlh_prodtabs —— 产品分类标签浏览（替代方案页视频全景的标签交互）。
   ========================================================================== */

/* —— banner 标题块：覆盖 .ys_banner1 的右下角定位，改为水平垂直居中 ——
   显式声明 position:absolute，确保标题浮于 hero 图之上（不依赖隐式基础规则）。 */
.ys_banner1.ys_ban_sol .ys_ban_li_img {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50% !important;
    bottom: auto;
    width: 82.5%;
    max-width: 1200px;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* —— hero 高度：对齐参考站 solution 页（PC 图 1920×940 ≈ 2.04:1）——
   覆盖 .ys_banner1 的固定 50vh，改用与参考站一致的宽高比，随视口宽度等比缩放；
   源图为非横版时用 object-fit:cover 填满裁切，保证 hero 比例与参考站一致。 */
.ys_banner1.ys_ban_sol .ys_ban_imgbox {
    height: auto;
    min-height: 0;
    aspect-ratio: 1920 / 940;
}
.ys_banner1.ys_ban_sol .ys_ban_imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 标题 / 副标题：白色 + 投影，保证任意背景图下可读（WCAG 大号文字 ≥ 3:1） */
.ys_banner1.ys_ban_sol .c_ban_tit .mod_tit48,
.ys_banner1.ys_ban_sol .c_ban_info .mod_tit24 {
    color: #fff;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.ys_banner1.ys_ban_sol .c_ban_tit {
    margin-bottom: 18px;
}
.ys_banner1.ys_ban_sol .c_ban_info {
    margin: 0 auto 40px;
    max-width: 860px;
}

/* —— “获取方案” CTA 按钮 —— */
.wlh_ban_more a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 15px 34px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 550px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(2px);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.wlh_ban_more a img {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}
.wlh_ban_more a:hover,
.wlh_ban_more a:focus-visible {
    background: #0066F5;
    border-color: #0066F5;
    color: #fff;
    outline: none;
}
.wlh_ban_more a:hover img,
.wlh_ban_more a:focus-visible img {
    transform: translateX(4px);
}

/* —— 能力卡图标容器（居中、浅蓝圆形底）—— */
.wlh_cpbu_icon {
    width: 110px;
    height: 110px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(0, 102, 245, 0.10), rgba(0, 102, 245, 0.03));
}
.wlh_cpbu_icon svg {
    display: block;
}

/* —— 产品分类标签浏览 —— */
.wlh_prodtabs {
    width: 100%;
}

/* 标签栏 */
.wlh_pt_tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 44px;
}
.wlh_pt_tab {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 16px 22px;
    margin-bottom: -1px;
    font-size: 17px;
    line-height: 1.4;
    color: #666;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}
.wlh_pt_tab::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background 0.3s;
}
.wlh_pt_tab:hover {
    color: #0066F5;
}
.wlh_pt_tab:focus-visible {
    outline: 2px solid #0066F5;
    outline-offset: -4px;
    border-radius: 4px;
}
.wlh_pt_tab.act {
    color: #0066F5;
    font-weight: 600;
}
.wlh_pt_tab.act::after {
    background: #0066F5;
}

/* 面板：左简介 + 右条目，两栏 */
.wlh_pt_panels {
    width: 100%;
}
.wlh_pt_panel {
    display: none;
}
.wlh_pt_panel.act {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
}

.wlh_pt_panel_intro {
    position: relative;
    padding: 8px 0 8px 26px;
    border-left: 3px solid #0066F5;
}
.wlh_pt_panel_intro h3 {
    color: #333;
    margin-bottom: 14px;
}
.wlh_pt_panel_intro p {
    color: #666;
}

/* 条目网格 */
.wlh_pt_items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
}
.wlh_pt_items li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.wlh_pt_dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 2px;
    background: #0066F5;
    transform: rotate(45deg);
}
.wlh_pt_name {
    color: #333;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 2px;
}
.wlh_pt_items li .mod_word {
    color: #888;
}

/* —— 响应式 —— */
@media screen and (max-width: 991px) {
    .wlh_pt_panel.act {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
@media screen and (max-width: 767px) {
    /* 移动端 hero 比例对齐参考站（移动图 768×900 ≈ 0.85:1，偏竖），并设最小高度防过矮 */
    .ys_banner1.ys_ban_sol .ys_ban_imgbox {
        aspect-ratio: 768 / 900;
        min-height: 340px;
    }
    .ys_banner1.ys_ban_sol .ys_ban_li_img {
        width: 100%;
        padding: 0 20px;
    }
    .ys_banner1.ys_ban_sol .c_ban_info {
        margin-bottom: 30px;
    }
    .wlh_ban_more a {
        padding: 12px 26px;
        font-size: 15px;
    }
    .wlh_pt_tab {
        padding: 13px 14px;
        font-size: 15px;
    }
    .wlh_pt_tab::after {
        left: 14px;
        right: 14px;
    }
    .wlh_pt_items {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ==========================================================================
   wlh_service —— 公司概况「就近服务」板块
   对齐立讯 company-profile 的 about_addres 版式语言（标题 + 可展开标签 +
   数据圆环 + 配图），但用稳定的双栏布局替代依赖 skrollr/lottie 的视差与世界地图，
   并以纬联弘真实据点填充（临空制造基地 / 研发与品质中心 / 全国响应网络）。
   ========================================================================== */
.wlh_service {
    background: #f7f9fc;
}
.wlh_service_grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}
.wlh_service_le .wlh_service_desc {
    margin: 18px 0 30px;
    color: #5a6473;
    font-size: 16px;
    line-height: 1.85;
}
/* 可展开标签 */
.wlh_service_tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e5e9f0;
}
.wlh_service_tab {
    border-bottom: 1px solid #e5e9f0;
    padding: 20px 0;
    cursor: pointer;
}
.wlh_service_tab_head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.wlh_service_tab_ico {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 102, 245, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wlh_service_tab_ico img {
    width: 24px;
    height: 24px;
}
.wlh_service_tab_tit {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
    color: #1f2a3d;
}
.wlh_service_tab_num {
    color: #0066f5;
    font-size: 18px;
    font-weight: 700;
    font-family: "PoppinsRegular", "Microsoft Yahei", sans-serif;
}
.wlh_service_tab_btn {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    border: 1px solid #d4dbe6;
    position: relative;
    transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.wlh_service_tab_btn::before,
.wlh_service_tab_btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: #6b7689;
    transform: translate(-50%, -50%);
    transition: background .35s ease;
}
.wlh_service_tab_btn::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.wlh_service_tab.act .wlh_service_tab_btn {
    background: #0066f5;
    border-color: #0066f5;
    transform: rotate(180deg);
}
.wlh_service_tab.act .wlh_service_tab_btn::before,
.wlh_service_tab.act .wlh_service_tab_btn::after {
    background: #fff;
}
.wlh_service_tab.act .wlh_service_tab_btn::after {
    transform: translate(-50%, -50%) rotate(0);
}
.wlh_service_tab_info {
    display: none;
    margin-top: 16px;
    padding-left: 60px;
    color: #5a6473;
    font-size: 15px;
    line-height: 1.85;
}
.wlh_service_tab.act .wlh_service_tab_info {
    display: block;
}
/* 右侧：配图 + 数据圆环 */
.wlh_service_ri {
    position: relative;
}
.wlh_service_img {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(20, 40, 80, 0.16);
}
.wlh_service_img img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.wlh_service_circles {
    display: flex;
    gap: 16px;
    margin-top: 26px;
}
.wlh_service_circle {
    flex: 1;
    background: #fff;
    border-radius: 14px;
    padding: 22px 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(20, 40, 80, 0.08);
    border: 1px solid #eef2f8;
}
.wlh_service_circle_num {
    font-size: 26px;
    font-weight: 700;
    color: #0066f5;
    font-family: "PoppinsRegular", "Microsoft Yahei", sans-serif;
    line-height: 1.2;
}
.wlh_service_circle_lab {
    margin-top: 6px;
    font-size: 13px;
    color: #5a6473;
}
@media screen and (max-width: 991px) {
    .wlh_service_grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .wlh_service_tab_info {
        padding-left: 60px;
    }
}
@media screen and (max-width: 575px) {
    .wlh_service_circles {
        flex-direction: column;
    }
    .wlh_service_tab_info {
        padding-left: 0;
    }
}