/* =====================================================================
   中仪友信 官网主题 v4  (bjzyyx.local / FastAdmin + Bootstrap3)
   自有品牌配色: 科技深蓝 #1e5bb8 + 深青辅色 #007a8a (蓝→青 CTA)
   字体: 系统字体栈 (苹方/微软雅黑) + 标题收紧字距 + 等宽数字
   独立加载, 不依赖 grunt 构建。
   ===================================================================== */

:root {
    /* 品牌色 (科技深蓝系) —— 用 --hioki-blue-rgb 供 rgba() 图片遮罩复用 */
    --hioki-blue: #1e5bb8;
    --hioki-blue-rgb: 30, 91, 184;
    --hioki-blue-hover: #174a99;
    --hioki-accent: #007a8a;
    --hioki-accent-rgb: 0, 122, 138;
    --hioki-deep: #0f2740;
    --hioki-deep-rgb: 15, 39, 64;
    --hioki-cta-grad: linear-gradient(100deg, #1e5bb8 0%, #007a8a 100%);

    /* 内页 Banner 高度: 与 1920x400 品牌素材统一 */
    --hioki-inner-banner-height: 400px;
    --hioki-inner-banner-height-tablet: 240px;
    --hioki-inner-banner-height-mobile: 180px;

    /* 文字色 (偏冷灰, 可读性更好) */
    --txt-1: #1f2937;                   /* 主文字 */
    --txt-2: #4b5563;                   /* 次文字 */
    --txt-3: #9ca3af;                   /* 弱文字 */

    /* 背景色 */
    --bg-page: #ffffff;
    --bg-gray: #f7f8fa;                 /* 浅灰区块 */
    --bg-blue-light: #e8f1fa;           /* 蓝调浅底 (跟随新主色) */
    --bg-blue-light-2: #f2f7fc;         /* 更浅蓝调 */
    --bg-blue-light-3: #eef3f9;         /* 登录门/浅底 */

    /* 边框色 */
    --border-line: #e6e8eb;             /* 通用细边 */
    --border-blue: #a8c4e8;             /* 蓝灰边(卡/表/表单) */
    --border-blue-2: #cfddf2;           /* 更浅蓝灰边 */

    /* 阴影 */
    --shadow-card: 0 5px 10px rgba(0,0,0,.18);
    --shadow-card-soft: 0 2px 10px rgba(0,0,0,.1);
    --shadow-header: 0 5px 30px rgba(0,0,0,.1);
    --shadow-nav: 0 5px 20px rgba(0,0,0,.08);
}

/* ---------- 全局 ---------- */
body.hioki-body {
    /* 正文主力: 微软雅黑(Win 屏幕小字渲染最清晰精神) / 苹方(macOS·iOS) / Segoe UI(英文·数字更精致) */
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft Yahei", "Helvetica Neue", STHeiti, Tahoma, Simsun, sans-serif;
    color: var(--txt-1);
    font-size: 15px;          /* 14→15: 提升正文可读性, 大屏更舒适 */
    font-weight: 400;
    line-height: 1.7;         /* 配 15px 紧凑精神, 不松散 */
    letter-spacing: 0;        /* 中文正文不加字距, 保持笔画连贯(加字距会让中文显散) */
    background: var(--bg-page);
    padding-top: 100px; /* 固定 header 让位 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* 段落 / 列表: 跟随正文, 间距统一 */
body.hioki-body p { font-size: 15px; line-height: 1.8; margin: 0 0 14px; }
body.hioki-body li { font-size: 15px; line-height: 1.8; }
/* 辅助小字: 保持比正文小一档, 形成层级 */
body.hioki-body small, body.hioki-body .small { font-size: 13px; color: var(--txt-2); }

/* 标题: 收紧字距 + 保证字重, 用 !important 兜底覆盖各页面类选择器, 整体更挺拔有层次 */
body.hioki-body h1, body.hioki-body h2, body.hioki-body h3, body.hioki-body h4,
body.hioki-body .hioki-sec-title .cn,
body.hioki-body .hioki-sec-title,
body.hioki-body .theme-f30, body.hioki-body .theme-center,
body.hioki-body .solution-section-title, body.hioki-body .solution-industry-title,
body.hioki-body .pd-info h1.pd-name,
body.hioki-body .hioki-article h1.article-title,
body.hioki-body .hioki-list-title,
body.hioki-body .ny-banner .ny-text h1,
body.hioki-body .hioki-banner .carousel-caption h2,
body.hioki-body .hioki-auth h2,
body.hioki-body .index-member .member-text h3 {
    letter-spacing: -.01em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
/* 超大标题(banner/页头大字) 用 700 更有力 */
body.hioki-body .ny-banner .ny-text h1,
body.hioki-body .hioki-sec-title .index-letter,
body.hioki-body .solution-section-title {
    font-weight: 700 !important;
}
/* 数字密集区: 等宽数字对齐, 强化仪器/数据气质 */
body.hioki-body .product-pagination,
body.hioki-body .support-sample-count b,
body.hioki-body .support-sample-count strong,
body.hioki-body .solution-sample-count b,
body.hioki-body .solution-sample-count strong,
body.hioki-body table.spec-table,
body.hioki-body table.param-table,
body.hioki-body .pd-spec-table {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
body.hioki-body a { color: var(--txt-1); transition: color .2s; }
body.hioki-body a:hover { color: var(--hioki-blue-hover); text-decoration: none; }
body.hioki-body main.content { padding-top: 0; background: var(--bg-page); }
body.hioki-body.page-solution main.content { padding: 0; }
img { max-width: 100%; height: auto; }

/* 颜色工具类 */
.font-blue, .text-blue { color: var(--hioki-blue) !important; }
.text-orange { color: var(--hioki-accent) !important; }

/* 容器(更宽, 对齐原站) */
body.hioki-body .container { max-width: 1600px; }
.hioki-container { max-width: 1600px; margin: 0 auto; padding: 0 6%; }

/* =====================================================================
   顶部固定头部
   ===================================================================== */
.hioki-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: 100px; background: #fff;
    box-shadow: var(--shadow-header);
    display: flex; align-items: center;
    padding-left: 35px; padding-right: 20px;
}
.hioki-header .h-inner { width: 100%; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; }
/* Logo */
.hioki-header .logo { display: flex; align-items: center; margin-right: auto; }
.hioki-header .logo img { max-height: 70px; max-width: 230px; }
.hioki-header .logo .logo-text { display: none; }

/* 右侧工具区 */
.hioki-header .h-tools { display: flex; align-items: center; gap: 20px; }

/* 电话 */
.hioki-header .tel { color: var(--hioki-blue); font-size: 20px; font-weight: bold; line-height: 40px; white-space: nowrap; }
.hioki-header .tel i { margin-right: 6px; }

/* 会员入口 */
.hioki-header .h-user { display: flex; align-items: center; gap: 6px; color: var(--txt-2); font-size: 15px; }
.hioki-header .h-user i { color: var(--hioki-blue); }

/* 搜索框 */
.hioki-header .search-box { display: flex; align-items: center; border: 1px solid var(--hioki-blue); }
.hioki-header .search-box input.in {
    border: none; height: 38px; padding: 0 12px; width: 200px; font-size: 13px; outline: none; background: #fff;
    font-family: inherit; color: var(--txt-1);
}
.hioki-header .search-box input.bt {
    border: none; height: 38px; width: 64px; background: var(--hioki-blue); color: #fff; font-size: 14px;
    cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: 1px;
}
.hioki-header .search-box input.bt:hover { background: var(--hioki-blue-hover); }

/* ---------- 主导航 ---------- */
.hioki-mainnav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; height: 100px; }
.hioki-mainnav > li { position: relative; height: 100px; }
.hioki-mainnav > li > a {
    display: flex; align-items: center; height: 100px; padding: 0 22px;
    font-size: 17px; color: var(--txt-1); font-weight: 500; position: relative;
}
.hioki-mainnav > li > a:hover, .hioki-mainnav > li.active > a, .hioki-mainnav > li:hover > a { color: var(--hioki-blue); }
.hioki-mainnav > li > a:after {
    content: ''; position: absolute; left: 50%; bottom: 22px; width: 0; height: 2px;
    background: var(--hioki-blue); transform: translateX(-50%); transition: width .25s;
}
.hioki-mainnav > li:hover > a:after, .hioki-mainnav > li.active > a:after { width: 30px; }
.hioki-mainnav > li > a .caret { margin-left: 4px; }

/* 下拉面板 */
.hioki-mainnav .navdiv {
    display: none; position: absolute; top: 100px; left: 0;
    background: #fff; box-shadow: var(--shadow-nav); z-index: 1001;
    padding: 30px 24px; min-width: 220px;
}
.hioki-mainnav > li:hover .navdiv { display: block; animation: hiokiFade .2s; }
@keyframes hiokiFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 普通(窄)下拉 */
.hioki-mainnav .navdiv.simple { min-width: 180px; padding: 15px 0; }
.hioki-mainnav .navdiv.simple a { display: block; padding: 0 24px; line-height: 40px; font-size: 15px; color: var(--txt-2); }
.hioki-mainnav .navdiv.simple a:hover { color: var(--hioki-blue); background: var(--bg-blue-light-2); }

/* Mega 下拉(产品中心) */
.hioki-mainnav .navdiv.mega { left: auto; right: 0; min-width: 760px; }
.hioki-mainnav .navdiv.mega .mega-row { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.hioki-mainnav .navdiv.mega .nav-categor { width: 22%; min-width: 160px; }
.hioki-mainnav .navdiv.mega .nav-categor > a.tit { display: block; font-size: 17px; font-weight: 600; color: var(--txt-1); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border-line); }
.hioki-mainnav .navdiv.mega .nav-categor > a.tit:hover { color: var(--hioki-blue); }
.hioki-mainnav .navdiv.mega .nav-categor > a:not(.tit) { display: block; font-size: 13px; color: var(--txt-2); line-height: 28px; }
.hioki-mainnav .navdiv.mega .nav-categor > a:not(.tit):hover { color: var(--hioki-blue); }

/* 解决方案导航 */
.hioki-mainnav .navdiv.solution-nav {
    left: -200px;
    width: 450px;
    min-width: 450px;
    padding: 50px 40px;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.hioki-mainnav > li:hover .navdiv.solution-nav { display: grid; }
.hioki-mainnav .solution-nav-group strong {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    line-height: 33px;
}
.hioki-mainnav .solution-nav-group a {
    display: block;
    color: #333;
    font-size: 17px;
    line-height: 33px;
    white-space: nowrap;
}
.hioki-mainnav .solution-nav-group a:hover { color: var(--hioki-blue); }

/* 移动端汉堡 */
.hioki-header .mb-nav-ico { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; align-items: center; justify-content: center; cursor: pointer; }
.hioki-header .mb-nav-ico i { display: block; width: 24px; }
.hioki-header .mb-nav-ico i span { display: block; width: 24px; height: 2px; background: var(--txt-1); margin: 5px 0; transition: transform .2s, opacity .2s; }
.hioki-header .mb-nav-ico.active i span:first-child { transform: translateY(7px) rotate(45deg); }
.hioki-header .mb-nav-ico.active i span:nth-child(2) { opacity: 0; }
.hioki-header .mb-nav-ico.active i span:last-child { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   区块标题组件
   ===================================================================== */
.hioki-sec-title { text-align: center; margin-bottom: 40px; }
.hioki-sec-title .index-letter { font-size: 42px; font-weight: 700; color: var(--bg-blue-light); letter-spacing: 4px; line-height: 1; }
.hioki-sec-title .cn { font-size: 28px; font-weight: 600; color: var(--txt-1); margin-top: 6px; }
.hioki-sec-title .theme-line { width: 50px; height: 3px; background: var(--hioki-blue); margin: 16px auto 0; }

/* =====================================================================
   首页轮播
   ===================================================================== */
.hioki-banner .carousel-inner > .item > a { position: relative; display: block; background: var(--hioki-deep); }
/* 注：刻意不再加渐变遮罩(.item > a:after), 让 banner 图片完整呈现;
   文字可读性改由下方 .carousel-caption 的多层 text-shadow + 半透明卡片保障。 */
.hioki-banner .carousel-inner picture,
.hioki-banner .carousel-inner > .item > a img,
.hioki-banner .carousel-inner > .item > img { width: 100%; height: auto; display: block; }
.hioki-banner .carousel-indicators { bottom: 16px; }
.hioki-banner .carousel-indicators li { width: 60px; height: 8px; background: rgba(255,255,255,.6); border: none; border-radius: 0; margin: 0 5px; }
.hioki-banner .carousel-indicators .active { background: var(--hioki-blue); width: 60px; }
.hioki-banner .carousel-control { background: none !important; opacity: .6; width: 8%; }
.hioki-banner .carousel-control:hover { opacity: 1; }
.hioki-banner .carousel-control .glyphicon { width: 48px; height: 48px; line-height: 48px; font-size: 28px; background: rgba(0,0,0,.2); border-radius: 50%; }
.hioki-banner .carousel-caption { left: 8%; right: 50%; text-align: left; bottom: 18%; z-index: 2; padding: 0; text-shadow: none; }
/* 文字用半透明深色卡片兜底, 无论 banner 是亮底还是暗底都可读 (取消渐变遮罩后必备) */
.hioki-banner .carousel-caption h2 { font-size: 38px; color: #fff; font-weight: 600; margin: 0 0 8px; padding: 6px 14px; background: rgba(var(--hioki-deep-rgb),.55); border-left: 4px solid var(--hioki-accent); display: inline-block; }
.hioki-banner .carousel-caption p { font-size: 18px; line-height: 1.6; color: #fff; margin: 0; padding: 5px 14px; background: rgba(var(--hioki-deep-rgb),.45); display: inline-block; }

/* =====================================================================
   通用区块
   ===================================================================== */
.hioki-section { padding: 70px 0; }
.hioki-section-gray { background: var(--bg-gray); }

/* =====================================================================
   卡片
   ===================================================================== */
/* 产品卡(对齐原站 product-box: 阴影+大标题+底部分隔线) */
.product-box, .hioki-card {
    background: #fff; border: 1px solid var(--border-blue); border-radius: 5px;
    overflow: hidden; transition: box-shadow .25s, transform .25s; display: block; height: 100%;
    box-shadow: var(--shadow-card-soft);
}
.product-box:hover, .hioki-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); text-decoration: none; }
.product-box .p-img, .hioki-card .card-img-wrap { position: relative; overflow: hidden; }
.product-box .p-img a { display: block; }
.product-box .p-img img, .hioki-card .card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-gray); display: block; transition: transform .4s; }
.product-box:hover .p-img img, .hioki-card:hover .card-img { transform: scale(1.05); }
.product-box .new-ion { position: absolute; top: 8px; left: 8px; background: #e4393c; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 2px; z-index: 2; }
.product-box .pro-button { position: absolute; left: 0; right: 0; bottom: 0; display: flex; opacity: 0; transform: translateY(100%); transition: opacity .25s, transform .25s; z-index: 2; }
.product-box:hover .pro-button { opacity: 1; transform: translateY(0); }
.product-box .pro-button a { flex: 1; text-align: center; font-size: 13px; padding: 11px 4px; line-height: 1.3; }
.product-box .pro-button a.btn-inquiry { background: var(--hioki-cta-grad); color: #fff; }
.product-box .pro-button a.btn-detail { background: rgba(var(--hioki-blue-rgb),.92); color: #fff; }
.product-box .pro-button a:hover { filter: brightness(1.08); }
.product-box .p-text, .hioki-card .card-body { padding: 14px 16px; display: block; }
.product-box .p-text .tit, .hioki-card .card-title { font-size: 15px; color: var(--txt-1); font-weight: 600; line-height: 1.5; margin: 0 0 6px; }
.product-box .p-text .tit.overf { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-box .p-text .tit:not(.overf) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-box .p-text .tit .p-model { color: var(--hioki-blue); }
.product-box:hover .p-text .tit, .hioki-card:hover .card-title { color: var(--hioki-blue); }
.product-box .p-text .des, .hioki-card .card-desc { font-size: 13px; color: var(--txt-3); line-height: 1.6;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hioki-card .card-model { font-size: 13px; color: var(--hioki-blue); font-weight: 600; margin-bottom: 4px; }

/* 产品列表页卡片专属 (对标 hioki .product-list .product-box: 阴影无边框+大标题+底部分隔线)
   ⚠ 同屏卡片必须等高: 图片固定 4/3 容器(不裁切), 标题/摘要统一 2 行截断, 卡片用 flex 列布局撑满。 */
.product-list .product-box { border: none; border-radius: 0; box-shadow: 0 2px 10px rgba(0,0,0,.1); padding: 10px 10px 15px; display: flex; flex-direction: column; }
/* 图片: 固定 4/3 容器(无论原图比例), object-fit:contain 不裁切仪器照, 浅灰底兜底避免白底图粘连 */
.product-list .product-box .p-img img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg-gray); }
.product-list .product-box .p-text { padding: 0; margin-top: auto; display: flex; flex-direction: column; }
/* 标题: 统一 2 行截断(覆盖通用 .overf 单行), 固定高度对齐底部分隔线 */
.product-list .product-box .p-text .tit { font-size: 17px; line-height: 1.5; margin-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-line);
    white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 58px; }
/* 摘要: 统一 2 行截断, 固定高度。无 .des 的卡片(如详情页相关产品)由 flex 撑满空白, 同屏仍等高 */
.product-list .product-box .p-text .des { font-size: 13px; line-height: 1.6; margin-top: 10px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 42px; }

/* 行业卡 */
.hioki-industry-card { position: relative; overflow: hidden; border-radius: 5px; display: block; aspect-ratio: 3/2; box-shadow: var(--shadow-card-soft); }
.hioki-industry-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hioki-industry-card:hover img { transform: scale(1.06); }
.hioki-industry-card .industry-mask { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--hioki-blue-rgb),.85) 0%, rgba(var(--hioki-blue-rgb),.1) 60%); display: flex; align-items: flex-end; padding: 20px; transition: background .25s; }
.hioki-industry-card:hover .industry-mask { background: linear-gradient(to top, rgba(var(--hioki-blue-rgb),.95) 0%, rgba(var(--hioki-blue-rgb),.3) 70%); }
.hioki-industry-card .industry-name { font-size: 18px; font-weight: 600; color: #fff; }

/* 分类入口卡(文字+图标) */
.hioki-cat-card { text-align: center; padding: 28px 14px; background: #fff; border: 1px solid var(--border-blue); border-radius: 5px; display: block; transition: all .25s; }
.hioki-cat-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); text-decoration: none; border-color: var(--hioki-blue); }
.hioki-cat-card .cat-icon { width: 56px; height: 56px; margin: 0 auto 12px; color: var(--hioki-blue); display: flex; align-items: center; justify-content: center; }
.hioki-cat-card .cat-icon i { font-size: 32px; }
.hioki-cat-card .cat-name { font-size: 15px; font-weight: 600; color: var(--txt-1); }
.hioki-cat-card:hover .cat-name { color: var(--hioki-blue); }

/* =====================================================================
   按钮
   ===================================================================== */
.more-button { display: inline-flex; align-items: center; justify-content: center; background: var(--hioki-cta-grad); color: #fff !important; font-size: 16px; line-height: 40px; padding: 0 28px; border-radius: 2px; transition: opacity .2s, transform .2s; }
.more-button:hover { opacity: .9; color: #fff !important; transform: translateX(2px); }
.more-button.sm { font-size: 13px; line-height: 32px; padding: 0 16px; }
.btn-blue { background: var(--hioki-blue); color: #fff; border: none; border-radius: 2px; padding: 10px 28px; font-size: 15px; transition: background .2s; cursor: pointer; font-family: inherit; }
.btn-blue:hover { background: var(--hioki-blue-hover); color: #fff; }
.btn-outline-blue { background: #fff; color: var(--hioki-blue); border: 1px solid var(--hioki-blue); border-radius: 2px; padding: 10px 28px; font-size: 15px; transition: all .2s; cursor: pointer; font-family: inherit; }
.btn-outline-blue:hover { background: var(--hioki-blue); color: #fff; }

/* =====================================================================
   内页 Banner
   ===================================================================== */
.ny-banner { height: var(--hioki-inner-banner-height); background-size: cover; background-position: center; background-color: var(--hioki-blue); position: relative; display: flex; align-items: center; justify-content: center; }
/* 不叠加任何渐变/纯色遮罩, 标题无背景色块: banner 图完整清晰展示。
   banner 整图均有真实内容, 标题统一居中, 靠纯文字描边+阴影保证可读。*/
.ny-banner .ny-text { position: relative; z-index: 1; text-align: center; color: #fff; padding: 0 15px; }
.ny-banner .ny-text h1 { font-size: 44px; font-weight: 700; margin: 0 0 10px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.65); }
.ny-banner .ny-text p { font-size: 18px; margin: 0; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.6); }

/* =====================================================================
   面包屑
   ===================================================================== */
.hioki-breadcrumb { background: var(--bg-gray); padding: 14px 0; font-size: 13px; color: var(--txt-3); border-bottom: 1px solid var(--border-line); }
.hioki-breadcrumb a { color: var(--txt-3); }
.hioki-breadcrumb a:hover { color: var(--hioki-blue); }
.hioki-breadcrumb .active { color: var(--txt-2); }
.hioki-breadcrumb .sep { margin: 0 10px; color: var(--border-line); }

/* FAQ 列表项的分类小标签 + 会员提示条 */
.hioki-news-item .news-cat-tag { display: inline-block; margin-top: 8px; padding: 2px 10px; background: var(--bg-blue-light-2); color: var(--hioki-blue); font-size: 12px; border-radius: 10px; }
.faq-login-tip { margin-top: 30px; padding: 18px 24px; background: linear-gradient(100deg, rgba(var(--hioki-blue-rgb),.06), rgba(var(--hioki-accent-rgb),.06)); border: 1px solid rgba(var(--hioki-blue-rgb),.18); border-radius: 4px; color: var(--txt-2); font-size: 15px; text-align: center; }
.faq-login-tip i { color: var(--hioki-accent); margin-right: 6px; }
.faq-login-tip a { color: var(--hioki-blue); font-weight: 600; margin: 0 2px; }
@media (max-width: 560px) {
    .faq-login-tip { padding: 14px 16px; font-size: 13px; text-align: left; }
}

/* 品质与资质页(营业执照/代理授权书展示) */
.quality-page .quality-intro { font-size: 16px; line-height: 1.9; color: var(--txt-2); margin: 0 0 30px; }
.quality-page .credential-block { margin-bottom: 40px; padding: 24px; background: #fff; border: 1px solid var(--border-line); border-radius: 5px; }
.quality-page .credential-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-line); flex-wrap: wrap; }
.quality-page .credential-head h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--txt-1); display: flex; align-items: center; gap: 8px; }
.quality-page .credential-head h3 i { color: var(--hioki-blue); }
.quality-page .credential-download { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: var(--hioki-blue); color: #fff !important; border-radius: 3px; font-size: 14px; white-space: nowrap; }
.quality-page .credential-download:hover { background: var(--hioki-blue-hover); }
.quality-page .credential-preview { text-align: center; }
.quality-page .credential-preview a { display: inline-block; max-width: 100%; }
.quality-page .credential-preview img { max-width: 100%; max-height: 560px; border: 1px solid var(--border-line); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.08); cursor: zoom-in; transition: box-shadow .2s; }
.quality-page .credential-preview img:hover { box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.quality-page .quality-note { margin-top: 10px; padding: 14px 18px; background: var(--bg-gray); border-radius: 4px; color: var(--txt-3); font-size: 15px; }
.quality-page .quality-note i { color: var(--hioki-blue); margin-right: 6px; }
@media (max-width: 560px) {
    .quality-page .credential-block { padding: 16px; }
    .quality-page .credential-head h3 { font-size: 16px; }
    .quality-page .credential-head { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   产品列表页
   ===================================================================== */
.hioki-product { padding: 40px 0; }
/* 搜索框 (对标 hioki .search-content: 居中、右侧蓝按钮) */
.search-content { width: 100%; max-width: 640px; margin: 0 auto 10px; }
.search-content .search-input { display: flex; }
.search-content .search-input input.in { flex: 1; height: 46px; border: 1px solid var(--border-blue); background: #fcfcfc; padding: 0 15px; font-size: 15px; border-radius: 5px 0 0 5px; outline: none; font-family: inherit; }
.search-content .search-input .bt { width: 120px; height: 46px; background: var(--hioki-blue); color: #fff; border: none; font-size: 16px; border-radius: 0 5px 5px 0; cursor: pointer; font-family: inherit; transition: background .2s; }
.search-content .search-input .bt:hover { background: var(--hioki-blue-hover); }

/* 分类横向标签 (对标 hioki .product-categor: 左标题块 + 右标签流) */
.product-categor { margin: 30px 0; display: flex; flex-flow: wrap; align-items: stretch; justify-content: space-between; background: #fff; border: 1px solid var(--border-blue); }
.product-categor h3 { width: 15%; min-width: 110px; padding: 22px 0; margin: 0; background: var(--bg-gray); border-right: 1px solid var(--border-blue); text-align: center; font-size: 22px; color: var(--txt-1); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.product-categor .con { width: 85%; flex: 1; padding: 16px 20px; display: flex; flex-wrap: wrap; align-content: center; }
.product-categor .con a { display: inline-block; margin-right: 24px; line-height: 40px; font-size: 17px; color: var(--txt-2); }
.product-categor .con a:hover, .product-categor .con a.active { color: var(--hioki-blue); }

/* 二级分类药丸标签 (对标 hioki .product-categor-sub) */
.product-categor-sub { margin: 0 0 30px; }
.product-categor-sub .con { display: flex; flex-wrap: wrap; }
.product-categor-sub .con a { display: inline-block; margin: 6px 12px 6px 0; padding: 0 22px; border-radius: 5px; font-size: 16px; line-height: 38px; background: var(--bg-gray); border: 1px solid var(--border-blue); color: var(--txt-2); }
.product-categor-sub .con a:hover { color: var(--hioki-blue); }
.product-categor-sub .con a.active { background: var(--hioki-blue); border-color: var(--hioki-blue); color: #fff; }

/* 产品网格 (对标 hioki: 4列, 间距 30px) */
.product-list { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 50px; }
.product-list .product-box { width: calc((100% - 90px) / 4); }
@media (max-width: 1199px) { .product-list .product-box { width: calc((100% - 60px) / 4); } .product-list { gap: 20px; } }
@media (max-width: 991px) { .product-list .product-box { width: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .product-list .product-box { width: 100%; } .product-list { gap: 16px; } }

/* 列表工具栏标题 */
.hioki-list-title { font-size: 20px; color: var(--txt-1); font-weight: 600; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--hioki-blue); }
.hioki-list-title small { font-size: 13px; color: var(--txt-3); font-weight: 400; margin-left: 10px; }

/* =====================================================================
   产品详情页
   ===================================================================== */
.hioki-product-detail { padding: 40px 0; }
.pd-top { display: flex; gap: 30px; margin-bottom: 40px; }
.pd-gallery { width: 40%; flex-shrink: 0; }
.pd-gallery .pd-main { border: 1px solid var(--border-blue); border-radius: 5px; overflow: hidden; }
.pd-gallery .pd-main img { width: 100%; display: block; }
.pd-gallery .pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-gallery .pd-thumbs img { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--border-line); cursor: pointer; border-radius: 3px; }
.pd-gallery .pd-thumbs img.active { border-color: var(--hioki-blue); }
.pd-info { width: 57%; }
.pd-info .pd-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.pd-info h1.pd-name { font-size: 26px; color: var(--txt-1); font-weight: 600; margin: 0; flex: 1; line-height: 1.3; }
.pd-info .pd-back { flex-shrink: 0; font-size: 13px; color: var(--txt-3); white-space: nowrap; padding-top: 6px; }
.pd-info .pd-back:hover { color: var(--hioki-blue); }
.pd-info .pd-model { font-size: 17px; color: var(--hioki-blue); font-weight: 600; margin-bottom: 16px; }
.pd-info .pd-summary { color: var(--txt-2); line-height: 1.9; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-line); }
.pd-summary p, .pd-summary-content p { margin: 0; }
.pd-info .pd-actions { margin-top: 4px; }
.pd-info .pd-actions .more-button { font-size: 16px; line-height: 46px; padding: 0 30px; }
.pd-info .pd-actions .more-button i { margin-right: 8px; }

/* 详情 tabs (激活项下边框高亮, 对齐 hioki 风格) */
.pd-tabs { margin-top: 30px; }
.pd-tabs .pd-tabnav { display: flex; background: var(--bg-gray); border-bottom: 2px solid var(--hioki-blue); flex-wrap: wrap; }
.pd-tabs .pd-tabnav a { padding: 16px 28px; font-size: 17px; color: var(--txt-2); position: relative; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .2s; }
.pd-tabs .pd-tabnav a.active { color: var(--hioki-blue); border-bottom-color: var(--hioki-blue); background: #fff; font-weight: 600; }
.pd-tabs .pd-tabnav a:not(.active):hover { color: var(--hioki-blue); }
.pd-tabs .tab-pane { display: none; padding: 30px 0; line-height: 1.9; color: var(--txt-1); }
.pd-tabs .tab-pane.active { display: block; }
.pd-tabs .tab-pane h3 { font-size: 18px; color: var(--txt-1); margin: 24px 0 12px; padding-left: 12px; border-left: 4px solid var(--hioki-blue); }
.pd-tabs .tab-pane img { max-width: 100%; }

/* 规格表 (蓝边框, 表头灰底)
   ⚠ 抓取自 hioki.cn 的 specs/options HTML 带各种内联宽度(width 属性 + style="width:..px"),
   导致同页多个表格宽窄不一。用 !important 强制所有表格撑满容器宽度(与第一个表对齐)。 */
.hioki-specs table,
.pd-tabs .tab-pane table { width: 100% !important; max-width: 100% !important; border-collapse: collapse; margin: 12px 0; border: 1px solid var(--border-blue); font-size: 15px; }
.hioki-specs table th, .hioki-specs table td,
.pd-tabs .tab-pane table th, .pd-tabs .tab-pane table td { border: 1px solid var(--border-blue); padding: 12px 3%; line-height: 1.6; vertical-align: top; word-break: break-word; }
.hioki-specs table th,
.pd-tabs .tab-pane table th { background: var(--bg-gray); font-weight: 600; color: var(--txt-1); }
.hioki-specs table td,
.pd-tabs .tab-pane table td { color: var(--txt-2); }
/* 表格内图片响应式, 避免溢出 */
.hioki-specs table img,
.pd-tabs .tab-pane table img { max-width: 100%; height: auto; }

/* 登录门禁 */
.hioki-gate { border: 1px dashed var(--border-blue); background: var(--bg-blue-light-3); padding: 40px; text-align: center; border-radius: 5px; }
.hioki-gate.hioki-gate-soft { background: var(--bg-gray); border-style: solid; border-color: var(--border-line); }
.hioki-gate .gate-icon { font-size: 40px; color: var(--hioki-blue); margin-bottom: 14px; }
.hioki-gate p { color: var(--txt-2); margin-bottom: 18px; font-size: 15px; }

/* =====================================================================
   分页
   ===================================================================== */
.hioki-pagination { text-align: center; margin: 36px 0; }
.hioki-pagination .pagination { margin: 0; }
.hioki-pagination .pagination > li > a, .hioki-pagination .pagination > li > span { color: var(--txt-3); border: 1px solid var(--border-line); margin: 0 4px; border-radius: 3px; font-size: 15px; line-height: 1.4; padding: 8px 14px; }
.hioki-pagination .pagination > li > a:hover { background: var(--hioki-blue); color: #fff; border-color: var(--hioki-blue); }
.hioki-pagination .pagination > .active > a, .hioki-pagination .pagination > .active > span { background: var(--hioki-blue); border-color: var(--hioki-blue); color: #fff; }
.hioki-pagination .pagination > .disabled > a, .hioki-pagination .pagination > .disabled > span { color: var(--border-line); }

/* 产品列表分页: 对标 hioki.cn/products.html, 页码从左侧开始并按容器宽度自然换行 */
.hioki-product .product-pagination { text-align: left; margin: 36px 0 50px; }
.hioki-product .product-pagination .pagination { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; font-size: 0; }
.hioki-product .product-pagination .pagination > li { display: block; }
.hioki-product .product-pagination .pagination > li > a,
.hioki-product .product-pagination .pagination > li > span { float: none; display: block; min-width: 50px; height: 38px; margin: 0 4px; padding: 0 15px; border-color: #e5e5e5; border-radius: 0; color: #999; font-size: 18px; line-height: 36px; text-align: center; }
.hioki-product .product-pagination .pagination > li > a:hover,
.hioki-product .product-pagination .pagination > .active > a,
.hioki-product .product-pagination .pagination > .active > span { background: var(--hioki-blue); border-color: var(--hioki-blue); color: #fff; }

@media (max-width: 560px) {
    .hioki-product .product-pagination { margin: 28px 0 36px; }
    .hioki-product .product-pagination .pagination > li > a,
    .hioki-product .product-pagination .pagination > li > span { min-width: 38px; height: 38px; margin: 3px; padding: 0 8px; font-size: 14px; line-height: 36px; }
}

/* =====================================================================
   文章/方案详情
   ===================================================================== */
.hioki-article { background: #fff; padding: 36px; border: 1px solid var(--border-line); border-radius: 5px; }
.hioki-article h1.article-title { font-size: 26px; color: var(--txt-1); margin: 0 0 14px; font-weight: 600; }
.hioki-article .article-meta { color: var(--txt-3); font-size: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--border-line); margin-bottom: 24px; }
.hioki-article .article-meta span { margin-right: 18px; }
.hioki-article .article-content { font-size: 15px; line-height: 1.9; color: var(--txt-2); }
.hioki-article .article-content img { max-width: 100%; }
.hioki-article .article-content h2, .hioki-article .article-content h3 { color: var(--txt-1); margin: 24px 0 12px; }
.hioki-article .article-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.hioki-article .article-content table th, .hioki-article .article-content table td { border: 1px solid var(--border-line); padding: 8px 12px; text-align: left; }
.hioki-article .article-content table th { background: var(--bg-gray); font-weight: 600; color: var(--txt-1); }
.hioki-article .article-content table tr:nth-child(even) { background: #fafbfc; }
.hioki-article .article-content video { max-width: 100%; margin: 16px 0; }
/* FAQ 正文安全适配: 中和源站抓取带入的布局类(.container 固定宽度会把文字挤出框外) */
.hioki-article .article-content .container { width: auto; max-width: 100%; padding: 0; margin: 0; }
.hioki-article .article-content .title,
.hioki-article .article-content .detail { width: auto; max-width: 100%; margin: 0; padding: 0; }
.hioki-article .article-content .title h1 { display: none; } /* 标题已由 article-title 渲染, 去重 */
/* Q/A 结构: 问/答图标 + 内容自动换行 (左内距统一 48px, 给 24px 图标留出安全间距) */
.hioki-article .article-content .question,
.hioki-article .article-content .answer { position: relative; width: auto; max-width: 100%; padding: 14px 16px 14px 52px; margin: 0 0 20px; overflow-wrap: break-word; word-break: break-word; }
.hioki-article .article-content .question { background: var(--bg-gray); border-radius: 4px; border-left: 3px solid var(--hioki-blue); }
.hioki-article .article-content .answer p:last-child { margin-bottom: 0; }
.hioki-article .article-content .letter { position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; line-height: 28px; text-align: center; font-weight: 700; color: #fff; background: var(--hioki-blue); border-radius: 50%; font-size: 13px; }
.hioki-article .article-content .answer .letter { background: var(--hioki-accent); }
/* 长文本/长URL强制换行, 防止溢出 */
.hioki-article .article-content p, .hioki-article .article-content div { overflow-wrap: break-word; }
.hioki-article .article-content a { word-break: break-all; }
/* 图文混排: 大图通栏 + 双图并排, 移动端自动堆叠 */
.hioki-article .article-content figure { margin: 20px 0; }
.hioki-article .article-content figure img { display: block; width: 100%; border-radius: 4px; }
.hioki-article .article-content figure figcaption { text-align: center; color: var(--txt-3); font-size: 13px; margin-top: 8px; line-height: 1.6; }
.hioki-article .article-content .img-row { display: flex; gap: 16px; margin: 20px 0; }
.hioki-article .article-content .img-row figure { flex: 1; margin: 0; }
.hioki-article .article-content p { margin: 0 0 14px; }
@media (max-width: 560px) {
    .hioki-article .article-content .img-row { flex-direction: column; gap: 12px; }
    .hioki-article { padding: 18px; }
}

/* 文章上下篇导航 (新闻详情) */
.hioki-article .article-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border-line); font-size: 15px; }
.hioki-article .article-nav .prev, .hioki-article .article-nav .next { flex: 1; color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hioki-article .article-nav .next { text-align: right; }
.hioki-article .article-nav a:hover { color: var(--hioki-blue); }
.hioki-article .article-nav .muted { color: var(--txt-3); }

/* 新闻列表 (日期+标题+摘要 横向卡片) */
.hioki-news-list { background: #fff; border: 1px solid var(--border-line); border-radius: 5px; overflow: hidden; }
.hioki-news-item { display: flex; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--bg-gray); transition: background .2s; }
.hioki-news-item:last-child { border-bottom: none; }
.hioki-news-item:hover { background: #f6f9ff; }
.hioki-news-item:hover .news-title { color: var(--hioki-blue); }
.hioki-news-item .news-date { flex-shrink: 0; width: 76px; text-align: center; color: var(--hioki-blue); border-right: 1px solid var(--border-line); margin-right: 24px; }
.hioki-news-item .news-date .day { display: block; font-size: 30px; font-weight: 600; line-height: 1; }
.hioki-news-item .news-date .ym { display: block; font-size: 12px; color: var(--txt-3); margin-top: 4px; }
.hioki-news-item .news-body { flex: 1; min-width: 0; }
.hioki-news-item .news-title { font-size: 17px; font-weight: 600; color: var(--txt-1); margin-bottom: 8px; transition: color .2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hioki-news-item .news-desc { font-size: 13px; color: var(--txt-3); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =====================================================================
   侧栏 (公司概要等)
   ===================================================================== */
.about-leftsub { background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.15); border-radius: 5px; overflow: hidden; }
.about-leftsub .sb-head { background: var(--hioki-blue); color: #fff; padding: 18px 20px; font-size: 18px; font-weight: 600; }
.about-leftsub ul { list-style: none; padding: 0; margin: 0; }
.about-leftsub ul > li > a { display: block; padding: 14px 20px 14px 20px; font-size: 15px; color: var(--txt-2); border-bottom: 1px solid var(--bg-gray); }
.about-leftsub ul > li > a:hover, .about-leftsub ul > li.active > a { background: var(--hioki-blue); color: #fff; }

/* 通用侧栏(产品列表旧版) */
.hioki-sidebar { background: #fff; border: 1px solid var(--border-line); border-radius: 5px; overflow: hidden; }
.hioki-sidebar .sb-head { background: var(--hioki-blue); color: #fff; padding: 14px 18px; font-size: 17px; font-weight: 600; }
.hioki-sidebar .sb-list { list-style: none; padding: 0; margin: 0; }
.hioki-sidebar .sb-list > li > a { display: block; padding: 12px 18px; border-bottom: 1px solid var(--bg-gray); color: var(--txt-2); font-size: 15px; }
.hioki-sidebar .sb-list > li > a:hover, .hioki-sidebar .sb-list > li.active > a { color: var(--hioki-blue); background: var(--bg-blue-light-2); }
.hioki-sidebar .sb-list .sub-list { list-style: none; padding: 0; margin: 0; background: var(--bg-gray); }
.hioki-sidebar .sb-list .sub-list > li > a { padding: 8px 16px 8px 32px; font-size: 13px; color: var(--txt-2); }

/* =====================================================================
   下载资源卡
   ===================================================================== */
.hioki-download-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border-line); border-radius: 5px; padding: 18px 20px; margin-bottom: 14px; transition: box-shadow .2s; }
.hioki-download-card:hover { box-shadow: var(--shadow-card-soft); }
.hioki-download-card .dl-icon { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-blue-light); color: var(--hioki-blue); font-size: 24px; border-radius: 5px; }
.hioki-download-card .dl-body { flex: 1; min-width: 0; }
.hioki-download-card .dl-title { font-size: 15px; color: var(--txt-1); font-weight: 600; margin: 0 0 4px; }
.hioki-download-card .dl-meta { font-size: 12px; color: var(--txt-3); }
.hioki-download-card .dl-action { flex-shrink: 0; }

/* =====================================================================
   会员页
   ===================================================================== */
.hioki-auth { max-width: 440px; margin: 50px auto; background: #fff; border: 1px solid var(--border-line); padding: 40px; box-shadow: var(--shadow-card-soft); border-radius: 5px; }
.hioki-auth h2 { text-align: center; font-size: 24px; color: var(--txt-1); margin: 0 0 24px; }
.hioki-auth .form-group label { color: var(--txt-2); font-weight: 400; }
.hioki-auth .btn-submit { background: var(--hioki-blue); color: #fff; border: none; width: 100%; padding: 12px; font-size: 16px; border-radius: 3px; cursor: pointer; font-family: inherit; }
/* 注册/登录表单验证码: 用 flex 强制输入框与验证码图片/发送按钮正确并排
   (Bootstrap 默认 table-cell 布局被全局 .form-control{display:block;float:left} 破坏, 导致图片被挤成 4px 不可见) */
.hioki-auth .input-group { display: flex; align-items: stretch; width: 100%; }
.hioki-auth .input-group > .form-control { display: block; float: none; flex: 1 1 auto; min-width: 0; width: auto; }
.hioki-auth .input-group-btn { display: flex; align-items: stretch; flex: 0 0 auto; width: auto; padding: 0; border: 0; }
.hioki-auth .input-group-btn > img { height: 100%; width: auto; min-width: 100px; object-fit: cover; border-radius: 0 3px 3px 0; cursor: pointer; }
.hioki-auth .input-group-btn > .btn-captcha { white-space: nowrap; }
.hioki-auth .btn-submit:hover { background: var(--hioki-blue-hover); }
.hioki-auth .auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--txt-3); }
.hioki-auth .auth-foot a { color: var(--hioki-blue); }

/* 询价弹窗 (原生 Modal, 不依赖 layer.js) */
.inquiry-modal { position: fixed; inset: 0; z-index: 99999; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; padding: 16px; box-sizing: border-box; }
.inquiry-modal.show { opacity: 1; display: flex !important; }
.inquiry-modal-box { width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 5px; box-shadow: 0 12px 40px rgba(0,0,0,.25); transform: translateY(12px); transition: transform .25s; }
.inquiry-modal.show .inquiry-modal-box { transform: translateY(0); }
.inquiry-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border-line); font-size: 16px; font-weight: 600; color: var(--txt-1); }
.inquiry-modal-head .fa-phone { color: var(--hioki-blue); margin-right: 6px; }
.inquiry-modal-close { cursor: pointer; color: var(--txt-3); font-size: 18px; padding: 4px; }
.inquiry-modal-close:hover { color: var(--txt-1); }
.inquiry-modal-box .inquiry-form { padding: 22px 24px; }
.inquiry-modal-box .inquiry-form .form-group { margin-bottom: 16px; }
.inquiry-modal-box .inquiry-form .control-label { display: block; color: var(--txt-1); font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.inquiry-modal-box .inquiry-form .req { color: #e74c3c; }
.inquiry-modal-box .inquiry-form .form-control { width: 100%; height: 42px; padding: 8px 12px; border: 1px solid var(--border-line); border-radius: 3px; font-size: 15px; font-family: inherit; box-sizing: border-box; }
.inquiry-modal-box .inquiry-form textarea.form-control { height: auto; resize: vertical; min-height: 76px; }
.inquiry-modal-box .inquiry-form .form-control:focus { border-color: var(--hioki-blue); outline: none; box-shadow: 0 0 0 2px rgba(var(--hioki-blue-rgb),.12); }
.inquiry-modal-box .inquiry-product { padding: 10px 14px; background: var(--bg-blue-light-2); border-radius: 3px; margin-bottom: 16px; font-size: 15px; color: var(--txt-2); }
.inquiry-modal-box .inquiry-product i { color: var(--hioki-blue); margin-right: 4px; }
.inquiry-modal-box .inquiry-product strong { color: var(--txt-1); }
.btn-inquiry-submit { width: 100%; height: 46px; background: var(--hioki-cta-grad); color: #fff; border: none; border-radius: 3px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-inquiry-submit:hover { opacity: .92; }
.btn-inquiry-submit:disabled { opacity: .6; cursor: not-allowed; }
/* 询价 Toast 提示 */
.inquiry-toast { position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-20px); z-index: 100000; max-width: 90vw; padding: 14px 24px; border-radius: 4px; color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; transition: opacity .25s, transform .25s; display: flex; align-items: center; gap: 8px; }
.inquiry-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.inquiry-toast-success { background: #28a745; }
.inquiry-toast-error { background: #e74c3c; }
.inquiry-toast-info { background: var(--hioki-blue); }

/* 产品列表: 多选勾选框 */
.product-list-select-hint { font-size: 13px; color: var(--txt-3); margin-bottom: 12px; }
.product-list-select-hint i { color: var(--hioki-blue); }
.product-box { position: relative; }
.product-select-check { position: absolute; top: 10px; left: 10px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92); border: 2px solid #c5cdd9; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.product-select-check i { color: #fff; font-size: 13px; opacity: 0; transform: scale(.5); transition: all .2s; }
.product-select-check.checked, .product-box.is-selected .product-select-check { background: var(--hioki-blue); border-color: var(--hioki-blue); }
.product-select-check.checked i, .product-box.is-selected .product-select-check i { opacity: 1; transform: scale(1); }
/* 询价车角标(PC 悬浮栏 + 移动端 FAB) */
.fixed-sub a#inquiryCartBtn { position: relative; }
.cart-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; background: var(--hioki-accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; text-align: center; display: none; }
/* 移动端询价车浮动按钮 */
.cart-fab { position: fixed; right: 16px; bottom: 20px; z-index: 900; width: 52px; height: 52px; border-radius: 50%; background: var(--hioki-cta-grad); color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 6px 18px rgba(var(--hioki-blue-rgb),.4); }
.cart-fab .cart-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; line-height: 20px; background: var(--hioki-accent); display: none; }
/* 询价车面板 */
.cart-modal .inquiry-modal-box { max-width: 480px; }
.cart-modal .cart-body { padding: 0; }
.cart-items-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border-line); font-size: 15px; font-weight: 600; color: var(--txt-1); }
.cart-items-head .cart-clear { font-size: 13px; color: #e74c3c; font-weight: 400; cursor: pointer; }
.cart-items { max-height: 200px; overflow-y: auto; padding: 8px 16px; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; margin-bottom: 6px; background: var(--bg-gray); border-radius: 3px; font-size: 13px; color: var(--txt-2); }
.cart-item .ci-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item .ci-remove { color: var(--txt-3); cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.cart-item .ci-remove:hover { color: #e74c3c; }
.cart-modal .inquiry-form { padding: 18px 24px 22px; }
.cart-empty { padding: 50px 24px; text-align: center; color: var(--txt-3); }
.cart-empty i { font-size: 48px; color: var(--border-line); margin-bottom: 14px; display: block; }
.cart-empty p { font-size: 17px; color: var(--txt-2); margin: 0 0 6px; }
.cart-empty span { font-size: 13px; }
/* 详情页双按钮 */
.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-actions .btn-add-cart { background: #fff; color: var(--hioki-blue) !important; border: 1px solid var(--hioki-blue); }
.pd-actions .btn-add-cart.in-cart { background: var(--bg-blue-light-2); color: var(--hioki-blue) !important; border-color: var(--hioki-blue); }
@media (max-width: 480px) {
    .pd-actions .more-button { flex: 1 1 100%; text-align: center; }
    .cart-modal .inquiry-modal-box { max-width: 100%; }
}
/* 弹窗内的多产品列表(单产品询价用) */
.inquiry-modal-box .inquiry-products { margin-bottom: 16px; }
.inquiry-modal-box .inquiry-products-title { font-size: 13px; color: var(--txt-3); margin-bottom: 8px; }
.inquiry-modal-box .inquiry-products-title i { color: var(--hioki-blue); margin-right: 4px; }
.inquiry-modal-box .inquiry-products-list { max-height: 120px; overflow-y: auto; }
.inquiry-modal-box .inquiry-product-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; margin-bottom: 5px; background: var(--bg-gray); border-radius: 3px; font-size: 13px; color: var(--txt-2); }
.inquiry-modal-box .inquiry-product-item .ip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
    .inquiry-modal-box .inquiry-form { padding: 16px; }
    .inquiry-modal-box .inquiry-form .form-control { height: 44px; }
    .inquiry-modal-head { padding: 14px 16px; font-size: 15px; }
}

/* =====================================================================
   搜索结果
   ===================================================================== */
.hioki-search-tabs .nav-tabs { border-bottom: 2px solid var(--border-line); margin-bottom: 20px; }
.hioki-search-tabs .nav-tabs > li > a { border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--txt-2); font-size: 15px; padding: 10px 24px; }
.hioki-search-tabs .nav-tabs > li.active > a { background: none; border-bottom: 2px solid var(--hioki-blue); color: var(--hioki-blue); }
.hioki-search-result { background: #fff; border: 1px solid var(--border-line); padding: 18px 22px; margin-bottom: 12px; display: block; border-radius: 5px; transition: box-shadow .2s; }
.hioki-search-result:hover { box-shadow: var(--shadow-card-soft); text-decoration: none; }
.hioki-search-result .sr-title { font-size: 17px; color: var(--txt-1); font-weight: 600; margin: 0 0 6px; }
.hioki-search-result:hover .sr-title { color: var(--hioki-blue); }
.hioki-search-result .sr-desc { color: var(--txt-3); font-size: 13px; }
.hioki-search-result .sr-model { color: var(--hioki-blue); font-size: 13px; margin-right: 12px; }
.hioki-search-empty { text-align: center; padding: 80px 20px; color: var(--txt-3); }
.hioki-search-empty .fa { font-size: 48px; color: var(--border-line); margin-bottom: 16px; }

/* =====================================================================
   占位页
   ===================================================================== */
.hioki-placeholder { text-align: center; padding: 100px 20px; }
.hioki-placeholder .ph-icon { font-size: 60px; color: var(--border-line); margin-bottom: 20px; }
.hioki-placeholder h2 { color: var(--txt-2); font-size: 22px; margin-bottom: 12px; }
.hioki-placeholder p { color: var(--txt-3); }

/* =====================================================================
   右侧悬浮栏
   ===================================================================== */
.fixed-sub { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 900; box-shadow: var(--shadow-card-soft); }
.fixed-sub a { display: block; width: 56px; height: 56px; background: #fff; border-bottom: 1px solid var(--border-blue-2); text-align: center; line-height: 56px; color: var(--hioki-blue); font-size: 20px; }
.fixed-sub a:hover { background: var(--hioki-blue); color: #fff; }

/* =====================================================================
   页脚
   ===================================================================== */
.hioki-footer { background: var(--hioki-blue); color: #fff; padding: 60px 0 0; margin-top: 50px; }
.hioki-footer .footer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 30px; padding-bottom: 50px; }
/* min-width 收紧: 让前方 logo/导航列在窄屏可压缩, 为右侧"关于+二维码"组腾出空间,
   避免其被 footer-grid 的 flex-wrap 挤到第二行; 宽屏下 flex:1/2 仍会拉伸填满, 视觉不变。 */
.hioki-footer .fcol { flex: 1; min-width: 100px; }
.hioki-footer .fcol.logo-col { flex: 2 1 320px; min-width: 230px; }
.hioki-footer .fcol.logo-col .flogo img { max-width: 200px; }
.hioki-footer .fcol.logo-col p { font-size: 15px; opacity: .85; margin: 8px 0; }
/* 右侧组: "关于"导航列 + 二维码打包为一个整体(flex:0 0 auto),
   紧贴前方导航列、整体靠右。其内部的"关于"列与二维码再紧贴,
   前方 logo/探索/技术/会员列吸收剩余空间。 */
.hioki-footer .fcol-group { flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: flex-start; }
.hioki-footer .fcol-group.about-qr-group { gap: 30px; }
.hioki-footer .fcol-group.about-qr-group .fcol { flex: 0 0 auto; min-width: 0; }
/* 右侧二维码区: 紧跟"关于"列右侧, 两个横向并排 */
.hioki-footer .fcol.qr-col { display: flex; flex-wrap: nowrap; gap: 24px; align-items: flex-start; }
.hioki-footer .fcol.qr-col .qr-item { flex: 0 0 auto; text-align: center; }
.hioki-footer .fcol.qr-col .qr-item img { width: 88px; height: 88px; object-fit: contain; background: #fff; padding: 4px; border-radius: 4px; display: block; }
.hioki-footer .fcol.qr-col .qr-item p { margin-top: 8px; font-size: 12px; opacity: .85; line-height: 1.4; white-space: nowrap; }
.hioki-footer .fcol ul { list-style: none; padding: 0; margin: 0; }
.hioki-footer .fcol h4 { font-size: 17px; margin: 0 0 16px; font-weight: 600; }
/* PC 端: 导航列 h4 顶部下移, 与左侧 logo 列首行文字(经营地址)顶部对齐。
   依据 = logo 图高(100px) + 图与文字间距(8px) = 108px。
   移动端 logo 列独占整行, 导航列紧跟其后, 不需要此偏移(保持上方 margin:0)。 */
@media (min-width: 992px) {
  .hioki-footer .fcol:not(.logo-col):not(.qr-col) h4 { margin-top: 108px; }
  /* 二维码图片顶部同样下移 108px, 与"关于"等导航列 h4 顶部对齐到同一条线 */
  .hioki-footer .about-qr-group .qr-col { margin-top: 108px; }
  /* 放大二维码(PC端): 顶部对齐线由 qr-col 的 margin-top 撑住, 放大只向下延伸, 平行线不变 */
  .hioki-footer .fcol.qr-col .qr-item img { width: 120px; height: 120px; }
  /* 拉开"关于"列与二维码的间距, 使二维码整体向右移动(配合前方列 min-width 收紧, 保证不换行) */
  .hioki-footer .fcol-group.about-qr-group { gap: 40px; }
}
.hioki-footer .fcol ul > li { margin-bottom: 10px; }
.hioki-footer .fcol ul > li > a { color: rgba(255,255,255,.8); font-size: 15px; }
.hioki-footer .fcol ul > li > a:hover { color: #fff; opacity: 1; }
.hioki-footer .copyright { border-top: 1px solid rgba(255,255,255,.15); padding: 18px 0; font-size: 12px; color: rgba(255,255,255,.7); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.hioki-footer .copyright a { color: rgba(255,255,255,.7); }
.hioki-footer .copyright a:hover { color: #fff; }
.hioki-footer .copyright .icp a { margin: 0 8px; }
.hioki-footer .copyright .social a { display: inline-flex; align-items: center; gap: 4px; margin-left: 14px; }
.hioki-footer .copyright .social i { font-size: 16px; }

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width: 1440px) {
    .hioki-container { padding: 0 4%; }
    .hioki-header { padding-left: 20px; }
    .hioki-mainnav > li > a { padding: 0 16px; font-size: 15px; }
    .hioki-banner .carousel-caption h2 { font-size: 30px; }
}

@media (max-height: 850px) and (min-width: 992px) {
    .hioki-mainnav .navdiv.solution-nav { padding-top: 30px; padding-bottom: 30px; }
}

@media (max-height: 700px) and (min-width: 992px) {
    .hioki-mainnav .solution-nav-group strong { font-size: 15px; line-height: 22px; }
    .hioki-mainnav .solution-nav-group a { font-size: 15px; line-height: 22px; }
}

@media (max-width: 991px) {
    body.hioki-body { padding-top: 70px; }
    .hioki-header { height: 70px; padding: 0 16px; }
    .hioki-mainnav { display: none; position: fixed; top: 70px; left: 0; right: 0; bottom: 0; background: #fff; flex-direction: column; align-items: stretch; height: auto; overflow-y: auto; padding: 10px 0; z-index: 999; }
    .hioki-mainnav.open { display: flex; }
    .hioki-mainnav > li { width: 100%; height: auto; border-bottom: 1px solid var(--bg-gray); }
    .hioki-mainnav > li > a { height: 50px; padding: 0 20px; justify-content: space-between; }
    .hioki-mainnav > li > a:after { display: none; }
    .hioki-mainnav > li:hover .navdiv { display: none; animation: none; }
    .hioki-mainnav .navdiv,
    .hioki-mainnav .navdiv.mega,
    .hioki-mainnav .navdiv.solution-nav { position: static; width: 100%; min-width: 0; box-shadow: none; padding: 0 20px 10px; display: none; }
    .hioki-mainnav > li.open .navdiv,
    .hioki-mainnav > li.open .navdiv.solution-nav { display: block; }
    .hioki-mainnav .solution-nav-group { padding: 4px 0 10px; }
    .hioki-mainnav .solution-nav-group strong { margin: 0; font-size: 15px; line-height: 36px; }
    .hioki-mainnav .solution-nav-group a { padding-left: 16px; font-size: 15px; line-height: 38px; }
    .hioki-mainnav .navdiv.mega .mega-row { flex-direction: column; }
    .hioki-mainnav .navdiv.mega .nav-categor { width: 100%; }
    .hioki-header .mb-nav-ico { display: flex; }
    .hioki-header .h-tools .tel, .hioki-header .h-tools .search-box, .hioki-header .h-tools .h-user { display: none; }
    .ny-banner { height: var(--hioki-inner-banner-height-tablet); }
    .ny-banner .ny-text h1 { font-size: 28px; }
    .ny-banner .ny-text p { font-size: 15px; }
    .hioki-section { padding: 40px 0; }
    .hioki-sec-title .index-letter { font-size: 30px; }
    .hioki-sec-title .cn { font-size: 22px; }
    .pd-top { flex-direction: column; }
    .pd-gallery, .pd-info { width: 100%; }
    .pd-gallery { margin-bottom: 20px; }
    .pd-info h1.pd-name { font-size: 22px; }
    /* 分类标签栏: 移动端标题块缩小, 标签横向滚动 */
    .product-categor h3 { width: auto; min-width: 80px; padding: 14px 12px; font-size: 15px; }
    .product-categor .con { width: auto; flex: 1; padding: 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .product-categor .con a { margin-right: 18px; line-height: 32px; font-size: 15px; white-space: nowrap; flex-shrink: 0; }
    .product-categor-sub .con { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .product-categor-sub .con a { white-space: nowrap; flex-shrink: 0; }
    .hioki-footer .footer-grid { gap: 20px; }
    .fixed-sub { display: none; }
}

@media (max-width: 560px) {
    .hioki-container { padding: 0 12px; }
    /* 移动端无 hover: 产品卡按钮常驻显示在图区底部 */
    .product-box .pro-button { position: static; opacity: 1; transform: none; display: flex; }
    .product-box .pro-button a { padding: 9px 4px; font-size: 12px; }
    .product-box .p-img a { pointer-events: none; }
    .ny-banner { height: var(--hioki-inner-banner-height-mobile); }
    .ny-banner .ny-text h1 { font-size: 22px; }
    .pd-info h1.pd-name { font-size: 19px; }
    .pd-info .pd-title-row { flex-wrap: wrap; }
    /* 详情画廊缩略图横向滚动 */
    .pd-gallery .pd-thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pd-gallery .pd-thumbs img { flex-shrink: 0; }
    /* 注：移动端同样不再叠加渐变遮罩, banner 图片完整展示; 文字可读性由 caption 的半透明卡片保障 */
    .hioki-banner .carousel-caption { left: 14px; right: 40%; bottom: 24%; padding: 0; }
    .hioki-banner .carousel-caption h2 { font-size: 20px; line-height: 1.35; margin: 0 0 6px; padding: 5px 10px; }
    .hioki-banner .carousel-caption p { font-size: 12px; line-height: 1.5; margin: 0; padding: 4px 10px; }
    .hioki-banner .carousel-indicators { display: none; }
    .hioki-banner .carousel-control { width: 11%; }
    .hioki-banner .carousel-control .glyphicon { width: 30px; height: 30px; line-height: 30px; font-size: 17px; margin-top: -15px; }
    .hioki-auth { margin: 20px 12px; padding: 24px; }
    .hioki-footer .copyright { flex-direction: column; text-align: center; }
    .hioki-footer .footer-grid .logo-col { flex-basis: 100%; }
    .hioki-footer .fcol.logo-col p { font-size: 13px; line-height: 1.6; }
    /* 移动端: 右侧组解包, "关于"列与二维码恢复独立流式布局 */
    .hioki-footer .fcol-group.about-qr-group { flex-basis: 100%; flex-wrap: wrap; gap: 0; }
    .hioki-footer .fcol { min-width: 40%; }
    .hioki-footer .fcol.qr-col { min-width: 0; flex-basis: 100%; justify-content: center; gap: 24px; margin-top: 10px; }
    .hioki-footer .fcol.qr-col .qr-item img { width: 88px; height: 88px; }
    .pd-tabs .pd-tabnav { overflow-x: auto; flex-wrap: nowrap; }
    .pd-tabs .pd-tabnav a { white-space: nowrap; padding: 12px 16px; font-size: 14px; }
    .pd-tabs .tab-pane { padding: 20px 0; }
}

/* =====================================================================
   首页 v3 (一比一复刻 hioki.cn) —— 新增组件
   原站关键类: .index-pro / .pro-tab / .pro-box / .talk-ul / .service-box
              .index-solution / .index-member / .index-news / .index-about
              .index-letter / .theme-center / .theme-f30 / .theme-line / .more-button
   ===================================================================== */

/* —— Banner 下方文字快速切换条 (悬浮在 banner 上, 居中白字+下划线) —— */
.hioki-banner { position: relative; }
.hioki-banner .banner-text {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 100%;
    z-index: 5;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.hioki-banner .banner-text a {
    color: #fff;
    margin: 0 14px;
    display: inline-block;
    padding: 0 26px 0 0;
    line-height: 40px;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    transition: color .2s;
}
.hioki-banner .banner-text a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,.4);
    transition: background .2s;
}
.hioki-banner .banner-text a.active:after,
.hioki-banner .banner-text a:hover:after { background: var(--hioki-blue); }
.hioki-banner .banner-text a.active { font-weight: 600; }

/* —— 大字水印 (index-letter, 各区块装饰大字) —— */
.index-letter {
    font-size: 90px;
    line-height: 100px;
    color: var(--hioki-blue);
    opacity: .1;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
/* —— 通用: 30px 蓝色标题 —— */
.theme-f30 { font-size: 30px; color: var(--txt-1); font-weight: 600; position: relative; text-align: center; }
.theme-line { margin-top: 16px; display: inline-block; width: 30px; height: 2px; background: var(--txt-1); }
.theme-line.blue { background: var(--hioki-blue); }
.theme-line.white { background: #fff; }
/* —— 通用: 居中标题(文字两侧带横线) —— */
.theme-center { text-align: center; }
.theme-center span {
    display: inline-block;
    position: relative;
    font-size: 32px;
    color: var(--txt-1);
    font-weight: bold;
    padding: 0 40px;
}
.theme-center span:before,
.theme-center span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30px;
    height: 2px;
    background: var(--txt-1);
}
.theme-center span:before { left: 0; }
.theme-center span:after { right: 0; }
.theme-center.white span { color: #fff; }
.theme-center.white span:before,
.theme-center.white span:after { background: #fff; }
/* —— 通用: 橙色 CTA 按钮 (带箭头) —— */
.index-pro .more-button,
.index-solution .more-button,
.index-member .more-button,
.index-news .more-button,
.index-about .more-button {
    position: relative;
    display: inline-block;
    line-height: 48px;
    width: 200px;
    background: var(--hioki-cta-grad);
    color: #fff !important;
    font-size: 18px;
    padding-left: 38px;
    text-align: left;
    border-radius: 0;
    transition: opacity .2s;
}
.index-pro .more-button:after,
.index-solution .more-button:after,
.index-member .more-button:after,
.index-news .more-button:after,
.index-about .more-button:after {
    content: "›";
    position: absolute;
    top: 50%;
    margin-top: -26px;
    right: 28px;
    font-size: 26px;
    color: #fff;
    line-height: 48px;
    transition: transform .25s;
}
.index-pro .more-button:hover,
.index-solution .more-button:hover,
.index-member .more-button:hover,
.index-news .more-button:hover,
.index-about .more-button:hover { opacity: .9; }
.index-pro .more-button:hover:after,
.index-solution .more-button:hover:after,
.index-member .more-button:hover:after,
.index-news .more-button:hover:after,
.index-about .more-button:hover:after { transform: translateX(4px); }

/* =====================================================================
   四标签区 (.index-pro, 浅底 + 4 等宽白卡标签 + 左右大卡轮播)
   ===================================================================== */
.index-pro {
    position: relative; /* 给 ::before 前景蒙版层定位 */
    padding: 80px 0;
    min-height: 600px;
    background: #fff;
    background-image: url(../img/hioki/index_pro_bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* 前景白色蒙版层: 厂房底图(本身已带 0.92 重蒙版)之上再叠一层淡白膜,
   保证白色卡片可读,同时让厂房若隐若现保留质感 */
.index-pro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .25);
    pointer-events: none;
    z-index: 0;
}
/* 区块内所有直接子容器上浮到蒙版之上 */
.index-pro > * { position: relative; z-index: 1; }
/* 标签栏: 4 等宽白卡, 蓝字, 竖线分隔, 激活项蓝底白字 */
.index-pro .pro-tab {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 5px 30px rgba(0,0,0,.12);
    border-radius: 4px;
    overflow: hidden;
}
.index-pro .pro-tab span {
    width: 25%;
    background: #fff;
    line-height: 72px;
    font-size: 22px;
    color: var(--hioki-blue);
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: background .2s, color .2s;
    user-select: none;
}
.index-pro .pro-tab span i { font-style: normal; position: relative; z-index: 1; }
.index-pro .pro-tab span:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 30px;
    border-left: 1px solid var(--hioki-blue);
}
.index-pro .pro-tab span:last-child:after { display: none; }
.index-pro .pro-tab span.active {
    background: var(--hioki-blue);
    color: #fff;
}
.index-pro .pro-tab span.active:after { border-left-color: transparent; }
.index-pro .pro-tab span.active:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--hioki-accent);
}
.index-pro .pro-tab span:not(.active):hover { background: var(--bg-blue-light-2); }

/* tab 内容容器 */
.index-pro .js-tab-box { margin-top: 56px; }
.index-pro .js-tab-con { display: none; }
.index-pro .js-tab-con.active { display: block; }

/* —— 推荐产品 / 最新方案: 左右大卡轮播 —— */
.index-pro .pro-content { position: relative; padding: 0 80px; }
.index-pro .pro-swiper { overflow: hidden; }
.index-pro .pro-track { display: flex; transition: transform .45s ease; }
.index-pro .pro-slide { flex: 0 0 100%; min-width: 0; }
.index-pro .pro-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 30px;
    box-shadow: var(--shadow-card-soft);
    border-radius: 4px;
}
.index-pro .pro-box .pro-img { width: 48%; text-align: center; }
.index-pro .pro-box .pro-img img { max-width: 100%; max-height: 360px; margin: 0 auto; display: block; object-fit: contain; }
.index-pro .pro-box .pro-text { width: 48%; }
.index-pro .pro-box .pro-text .pro-tit {
    font-size: 26px;
    color: var(--hioki-blue);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}
.index-pro .pro-box .pro-text .theme-line { margin: 18px 0 24px; }
.index-pro .pro-box .pro-text .pro-des {
    margin: 0 0 40px;
    font-size: 17px;
    line-height: 32px;
    color: var(--txt-1);
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 轮播箭头 */
.index-pro .pro-prev,
.index-pro .pro-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--hioki-blue-rgb),.15);
    border: none;
    color: var(--hioki-blue);
    font-size: 26px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    z-index: 6;
    transition: background .2s, color .2s;
}
.index-pro .pro-prev { left: 16px; }
.index-pro .pro-next { right: 16px; }
.index-pro .pro-prev:hover,
.index-pro .pro-next:hover { background: var(--hioki-blue); color: #fff; }

/* —— 热门话题 (talk-ul, 3 列白卡) —— */
.index-pro .talk-ul { list-style: none; padding: 0; margin: 0 -16px; display: flex; flex-wrap: wrap; }
.index-pro .talk-ul li { width: 33.3333%; padding: 16px; box-sizing: border-box; }
.index-pro .talk-ul li a {
    display: block;
    background: #fff;
    padding: 22px;
    box-shadow: 0 5px 10px rgba(0,0,0,.12);
    border-radius: 4px;
    height: 100%;
    transition: box-shadow .25s, transform .25s;
}
.index-pro .talk-ul li a:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); text-decoration: none; }
.index-pro .talk-ul .talk-date span {
    display: inline-block;
    background: var(--hioki-blue);
    color: #fff;
    line-height: 24px;
    padding: 0 15px;
    font-size: 13px;
    border-radius: 2px;
}
.index-pro .talk-ul li p {
    margin: 14px 0 0;
    color: var(--txt-1);
    font-size: 17px;
    line-height: 28px;
    height: 84px;
    overflow: hidden;
}
.index-pro .talk-ul li a:hover p { color: var(--hioki-blue); }

/* —— 服务支持 (单张居中大卡) —— */
.index-pro .service-box {
    max-width: 1185px;
    margin: 0 auto 30px;
    background: #fff;
    padding: 40px 35px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-card-soft);
    border-radius: 4px;
}
.index-pro .service-box .text { width: 66%; }
.index-pro .service-box .text h3 {
    font-size: 28px;
    font-weight: 600;
    color: var(--hioki-blue);
    margin: 0;
}
.index-pro .service-box .text .theme-line { margin: 18px 0 24px; }
.index-pro .service-box .text .des {
    font-size: 17px;
    line-height: 30px;
    color: var(--txt-1);
    text-align: justify;
}
.index-pro .service-box .text .des p { margin: 0; }
.index-pro .service-box .more-button { flex-shrink: 0; }

/* =====================================================================
   行业方案 (.index-solution, 深蓝底 + 3 列横向卡: 左横版图 + 右文字 + 白字水印)
   ===================================================================== */
.index-solution {
    padding: 70px 0 90px;
    position: relative;
    text-align: center;
    background-color: var(--hioki-blue);
    background-image: url(../img/hioki/index_solution_bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.index-solution .index-letter {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    color: #fff;
    opacity: .1;
}
.index-solution .theme-center { margin-bottom: 50px; position: relative; }
.index-solution .sol-list {
    list-style: none;
    padding: 0;
    margin: 50px 0 60px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
/* 防 clearfix 等伪元素被 grid 当作网格项导致首行空位 */
.index-solution .sol-list::before,
.index-solution .sol-list::after { content: none; display: none; }
.index-solution .sol-list li {
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
.index-solution .sol-card {
    display: flex;
    align-items: stretch;
    height: 200px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(0,0,0,.25);
    background: #fff;
    color: #333;
    transition: transform .3s, box-shadow .3s;
}
.index-solution .sol-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,.32);
}
.index-solution .sol-card-img {
    flex: 0 0 44%;
    width: 44%;
    overflow: hidden;
    background: #d8dde6;
}
.index-solution .sol-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.index-solution .sol-card:hover .sol-card-img img { transform: scale(1.06); }
.index-solution .sol-card-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 22px;
    text-align: left;
    background: #fff;
}
.index-solution .sol-card-text h3 {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    color: #1f2a44;
    line-height: 1.4;
}
.index-solution .sol-card-more {
    margin-top: 12px;
    display: inline-block;
    font-size: 15px;
    color: var(--hioki-blue);
}
.index-solution .sol-card:hover .sol-card-text h3 { color: var(--hioki-blue); }
.index-solution .sol-more-wrap { text-align: center; }

/* =====================================================================
   会员专区 (.index-member, 资料下载 / 会员中心 交替图文双卡)
   ===================================================================== */
.index-member {
    padding: 70px 0 20px;
    background-color: #fff;
    background-image: url(../img/hioki/index_member.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.index-member .member-box {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.index-member .member-box .member-img { width: 50%; }
.index-member .member-box .member-img img { margin: 0 auto; max-width: 90%; display: block; border-radius: 4px; }
.index-member .member-box .member-text { width: 50%; padding: 0 5%; text-align: center; }
.index-member .member-box .member-text h3 { font-size: 28px; font-weight: 600; margin: 0; color: var(--txt-1); }
.index-member .member-box .member-text p { font-size: 17px; margin: 26px 0 40px; color: var(--txt-2); line-height: 1.8; }
.b-shadow { box-shadow: 0 5px 25px rgba(0,0,0,.15); }

/* =====================================================================
   新闻资讯 (.index-news, 蓝调浅底 + 大字水印 + 分类标签 + 3 列卡片)
   ===================================================================== */
.index-news { background: var(--bg-blue-light); padding: 70px 0 80px; position: relative; }
.index-news .news-top { position: relative; padding-bottom: 40px; }
.index-news .news-top .index-letter { position: absolute; top: -50px; left: 0; width: auto; text-align: left; }
.index-news .news-top .theme-f30 { text-align: left; position: relative; }
.index-news .news-top .theme-line { margin: 16px 0 0; }
.index-news .news-tab {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
}
.index-news .news-tab span {
    margin-right: 36px;
    position: relative;
    font-size: 17px;
    color: var(--txt-2);
    cursor: pointer;
    transition: color .2s;
    user-select: none;
}
.index-news .news-tab span:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    height: 18px;
    width: 1px;
    background: var(--border-blue);
}
.index-news .news-tab span:last-child:after { display: none; }
.index-news .news-tab span:hover,
.index-news .news-tab span.active { color: var(--hioki-blue); }
.index-news .news-more { position: absolute; right: 0; top: 50px; }
.index-news .js-tab-box { margin-top: 40px; }
.index-news .js-tab-con { display: none; }
.index-news .js-tab-con.active { display: block; }
.index-news .news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.index-news .news-list li { width: 31%; margin-right: 3.5%; margin-bottom: 0; box-sizing: border-box; }
.index-news .news-list li:nth-child(3n) { margin-right: 0; }
.index-news .news-card {
    display: block;
    background: #fff;
    padding: 22px 22px 30px;
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
    border-radius: 4px;
    height: 100%;
    transition: background .25s, color .25s, box-shadow .25s, transform .25s;
}
.index-news .news-card:hover {
    background: var(--hioki-blue);
    color: #fff !important;
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
    text-decoration: none;
}
.index-news .news-card .news-date span {
    display: inline-block;
    vertical-align: middle;
    background: var(--hioki-blue);
    color: #fff;
    padding: 0 16px;
    line-height: 26px;
    font-size: 13px;
    border-radius: 2px;
    transition: background .25s, color .25s;
}
.index-news .news-card:hover .news-date span { background: #fff; color: var(--hioki-blue); }
.index-news .news-card .news-date i {
    margin-left: 10px;
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: var(--txt-3);
    transition: color .25s;
}
.index-news .news-card:hover .news-date i { color: #fff; }
.index-news .news-card .news-tit {
    margin-top: 16px;
    font-size: 18px;
    color: var(--txt-1);
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .25s;
}
.index-news .news-card:hover .news-tit { color: #fff; }
.index-news .news-card .news-des {
    margin-top: 14px;
    font-size: 15px;
    line-height: 26px;
    height: 78px;
    overflow: hidden;
    color: var(--txt-2);
    transition: color .25s;
}
.index-news .news-card:hover .news-des { color: rgba(255,255,255,.9); }

/* =====================================================================
   关于我们 (.index-about, 大字水印 + 左文右图)
   ===================================================================== */
.index-about { padding: 80px 0 90px; background: #fff; }
.index-about .hioki-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}
.index-about .about-text { width: 55%; max-width: 700px; position: relative; }
.index-about .about-text .index-letter { position: absolute; top: -55px; left: 0; width: auto; text-align: left; }
.index-about .about-text .theme-f30 { text-align: left; position: relative; }
.index-about .about-text .theme-line { margin: 16px 0 0; }
.index-about .about-tip { margin-top: 16px; font-size: 17px; color: var(--txt-1); font-weight: 500; }
.index-about .about-des { margin: 40px 0; font-size: 15px; line-height: 30px; text-align: justify; color: var(--txt-2); }
.index-about .about-des p { margin: 0 0 14px; }
.index-about .about-img { width: 42%; display: flex; align-items: center; }
.index-about .about-img img { width: 100%; display: block; border-radius: 4px; box-shadow: var(--shadow-card-soft); }

/* =====================================================================
   首页 v3 响应式
   ===================================================================== */
@media (max-width: 1440px) {
    .index-pro .pro-box .pro-text .pro-des { font-size: 16px; line-height: 32px; margin: 16px 0 50px; }
    .index-pro .pro-tab span { font-size: 20px; }
}

@media (max-width: 1199px) {
    /* 行业方案: PC 基础已是 3 列,窄屏适当减小卡片高度与间距 */
    .index-solution .sol-card { height: 180px; }
    .index-solution .sol-list { gap: 18px; }
    .index-solution .sol-card-text { padding: 14px 16px; }
    .index-solution .sol-card-text h3 { font-size: 18px; }
}

@media (max-width: 991px) {
    /* 移动端切换竖屏构图底图 */
    .index-pro {
        padding: 50px 0;
        min-height: 0;
        background-image: url(../img/hioki/index_pro_bg_mobile.jpg);
        background-position: center top;
    }
    .index-pro .pro-tab { max-width: 100%; }
    .index-pro .pro-tab span { font-size: 16px; line-height: 60px; }
    .index-pro .js-tab-box { margin-top: 36px; }
    .index-pro .pro-content { padding: 0 40px; }
    .index-pro .pro-box { flex-direction: column; }
    .index-pro .pro-box .pro-img,
    .index-pro .pro-box .pro-text { width: 100%; }
    .index-pro .pro-box .pro-text { margin-top: 20px; }
    .index-pro .pro-box .pro-text .pro-tit { font-size: 22px; }
    .index-pro .pro-box .pro-text .pro-des { font-size: 15px; line-height: 28px; margin: 12px 0 24px; }
    .index-pro .pro-prev, .index-pro .pro-next { width: 32px; height: 32px; line-height: 30px; font-size: 20px; }
    .index-pro .pro-prev { left: 0; }
    .index-pro .pro-next { right: 0; }
    .index-pro .talk-ul li { width: 100%; }
    .index-pro .service-box { flex-direction: column; align-items: flex-start; padding: 24px; }
    .index-pro .service-box .text { width: 100%; }
    .index-pro .service-box .des { font-size: 15px; line-height: 28px; }

    .index-letter { font-size: 60px; line-height: 80px; }
    .index-solution { padding: 50px 0 60px; }
    .index-solution .sol-list { margin: 40px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .index-solution .sol-card { height: 160px; }
    .index-solution .sol-card-text { padding: 12px 14px; }
    .index-solution .sol-card-text h3 { font-size: 17px; }

    .index-member { padding: 50px 0 20px; }
    .index-member .member-box { flex-direction: column; padding: 0 10px; }
    .index-member .member-box.reverse { flex-direction: column; }
    .index-member .member-img, .index-member .member-text { width: 100%; }
    .index-member .member-text { padding: 20px 0; }
    .index-member .member-text h3 { font-size: 22px; }
    .index-member .member-text p { font-size: 15px; margin: 14px 0 24px; }

    .index-news { padding: 50px 0 60px; }
    .index-news .news-top { padding-bottom: 30px; }
    .index-news .news-tab { text-align: left; }
    .index-news .news-tab span { font-size: 15px; margin-right: 20px; }
    .index-news .news-tab span:after { right: -10px; height: 14px; }
    .index-news .news-more { position: static; display: inline-flex; margin-top: 16px; }
    .index-news .js-tab-box { margin-top: 30px; }
    .index-news .news-list li { width: 100%; margin-right: 0; margin-bottom: 16px; }
    .index-news .news-card .news-tit { font-size: 17px; }
    .index-news .news-card .news-des { font-size: 13px; line-height: 26px; height: 52px; }

    .index-about { padding: 50px 0 60px; }
    .index-about .hioki-container { flex-direction: column; }
    .index-about .about-text { width: 100%; max-width: 100%; }
    .index-about .about-img { width: 100%; margin-top: 30px; }
    .index-about .about-des { font-size: 13px; line-height: 26px; margin: 24px 0; }
    .index-about .about-tip { font-size: 15px; }
}

@media (max-width: 560px) {
    .hioki-banner .banner-text { bottom: 0; flex-wrap: nowrap; padding: 0 8px; }
    .hioki-banner .banner-text a { flex: 1 1 33.333%; min-width: 0; margin: 0; padding: 7px 2px 5px; font-size: 11px; line-height: 28px; white-space: nowrap; }
    .hioki-banner .banner-text a:after { height: 3px; }
    .index-pro .pro-tab { overflow-x: auto; }
    .index-pro .pro-tab span { flex: 0 0 auto; min-width: 25%; font-size: 14px; line-height: 50px; }
    .index-solution .sol-list { grid-template-columns: 1fr; gap: 14px; }
    .index-solution .sol-card { height: 150px; }
    .index-solution .sol-card-img { flex-basis: 40%; width: 40%; }
    .index-solution .sol-card-text h3 { font-size: 17px; }
    .index-solution .sol-card-more { font-size: 13px; }
}

/* =====================================================================
   解决方案首页
   ===================================================================== */
.solution-page { color: #333; background: #fff; }
body.hioki-body.page-solution .hioki-footer { margin-top: 0; }
.solution-page .hioki-container { max-width: 1600px; }
.solution-hero {
    height: var(--hioki-inner-banner-height); padding-top: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--hioki-blue) url(../img/hioki/solution/banner.png) center / cover no-repeat;
    color: #fff; text-align: center;
}
.solution-hero-text h1 { margin: 0; font-size: 60px; line-height: 1.2; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.65); }
.solution-hero-text p { margin: 25px 0 0; font-size: 30px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.6); }
.solution-page .hioki-breadcrumb { padding: 22px 0; background: #fff; border-bottom-color: #e5e5e5; color: #666; }
.solution-page .hioki-breadcrumb a, .solution-page .hioki-breadcrumb .active { color: #666; }
.solution-section-title { margin: 0 0 28px; color: var(--hioki-blue); font-size: 36px; line-height: 1.35; font-weight: 700; text-align: center; }
.solution-section-title span { position: relative; display: inline-block; padding: 0 60px; }
.solution-section-title span:before, .solution-section-title span:after { content: ''; position: absolute; top: 50%; width: 30px; height: 2px; background: currentColor; }
.solution-section-title span:before { left: 0; }
.solution-section-title span:after { right: 0; }
.solution-section-title.is-light { color: #fff; }
.solution-industries { padding: 80px 0 90px; }
.solution-industry-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 1.25%; }
.solution-industry-card { display: block; min-width: 0; padding: 10px 0; color: #333; background: #fff; transition: padding .3s; }
.solution-industry-image { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.solution-industry-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.solution-industry-content { display: flex; height: auto; align-items: center; justify-content: space-between; background: #fff; }
.solution-industry-content p { height: 80px; margin: 10px; padding: 0 20px; overflow: hidden; color: #7d7777; font-size: 18px; line-height: 80px; }
.solution-industry-content p:last-of-type { flex: 0 0 35px; width: 35px; height: 35px; padding: 0; text-align: center; line-height: 35px; transition: color .25s, background .25s; }
.solution-industry-card:hover { padding: 20px 0 0; }
.solution-industry-card:hover img { transform: scale(1.04); }
.solution-industry-card:hover .solution-industry-content p:first-of-type { color: var(--hioki-blue); }
.solution-industry-card:hover .solution-industry-content p:last-of-type { color: #fff; background: var(--hioki-blue); border-radius: 50%; }
.solution-cases { position: relative; padding: 75px 0 60px; overflow: hidden; background: var(--hioki-blue); }
.solution-case-carousel { overflow: hidden; }
.solution-case-slide { height: auto; }
.solution-case-card { display: flex; height: 100%; padding: 10px 10px 40px; flex-direction: column; background: #fff; color: #333; }
.solution-case-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #f3f3f3; }
.solution-case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.solution-case-card:hover img { transform: scale(1.1); }
.solution-case-card strong { display: block; min-height: 60px; margin: 18px 15px 20px; overflow: hidden; color: #333; font-size: 18px; line-height: 30px; font-weight: 400; }
.solution-case-link { align-self: flex-start; margin: auto 15px 0; padding: 0 24px; color: #fff; background: var(--hioki-blue); font-size: 14px; line-height: 38px; }
.solution-case-card:hover .solution-case-link { background: var(--hioki-blue-hover); }
.solution-case-prev, .solution-case-next { position: absolute; top: 50%; z-index: 4; width: 48px; height: 74px; margin-top: -10px; padding: 0; border: 0; color: var(--hioki-blue); background: rgba(255,255,255,.58); font-size: 34px; transition: background .2s; }
.solution-case-prev { left: max(12px, calc((100vw - 1600px) / 2)); }
.solution-case-next { right: max(12px, calc((100vw - 1600px) / 2)); }
.solution-case-prev:hover, .solution-case-next:hover { background: rgba(255,255,255,.85); }
.solution-more-wrap { margin-top: 36px; text-align: center; }
.solution-more { display: inline-flex; min-width: 180px; height: 48px; align-items: center; justify-content: space-between; padding: 0 24px; color: var(--hioki-blue) !important; background: #fff; font-size: 16px; }
.solution-more span { font-size: 20px; transition: transform .2s; }
.solution-more:hover span { transform: translateX(4px); }
.solution-latest { padding: 70px 0 65px; }
.solution-latest-list { border-top: 1px solid #d9d5d5; }
.solution-latest-item { display: flex; align-items: center; min-height: 65px; padding: 20px 0; border-bottom: 1px solid #d9d5d5; color: #333; }
.solution-latest-item time { flex: 0 0 10%; color: #7d7777; font-size: 17px; }
.solution-latest-item strong { min-width: 0; overflow: hidden; color: #333; font-size: 18px; line-height: 1.5; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.solution-latest-item:hover time, .solution-latest-item:hover strong { color: var(--hioki-blue); }
.solution-contact { position: relative; padding: 75px 0 80px; background: #313d5d url(../img/hioki/solution/contact.jpg) center / cover no-repeat; color: #fff; text-align: center; }
/* 半透明深色渐变遮罩: 新背景图偏亮, 用遮罩保证白色标题/橙色按钮清晰可读 */
.solution-contact:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,42,74,.78) 0%, rgba(31,42,74,.55) 50%, rgba(31,42,74,.78) 100%); }
.solution-contact .hioki-container { position: relative; z-index: 1; }
.solution-contact p { position: relative; margin: 0 0 30px; font-size: 30px; line-height: 1.5; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.solution-contact-button { display: inline-flex; width: 220px; height: 54px; align-items: center; justify-content: space-between; padding: 0 28px; color: #fff !important; background: var(--hioki-cta-grad); font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.solution-contact-button span { font-size: 24px; transition: transform .25s; }
.solution-contact-button:hover span { transform: translateX(5px); }
.solution-empty { padding: 50px 20px; color: #7d7777; text-align: center; }
.solution-empty.is-light { color: rgba(255,255,255,.86); }

@media (max-width: 1199px) {
    .solution-case-prev { left: 12px; }
    .solution-case-next { right: 12px; }
}

@media (max-width: 991px) {
    body.hioki-nav-open { overflow: hidden; }
    .solution-hero { height: var(--hioki-inner-banner-height-tablet); }
    .solution-hero-text h1 { font-size: 36px; }
    .solution-hero-text p { margin-top: 12px; font-size: 24px; }
    .solution-page .hioki-breadcrumb { display: none; }
    .solution-industries { padding: 48px 0 55px; }
    .solution-section-title { font-size: 28px; }
    .solution-industry-list { grid-template-columns: 1fr; gap: 0; }
    .solution-industry-card { padding: 10px 0; }
    .solution-industry-card:hover { margin: 10px 0; padding: 10px 0; }
    .solution-industry-card:hover img { transform: none; }
    .solution-industry-card:hover .solution-industry-content p:first-of-type { color: #7d7777; }
    .solution-industry-card:hover .solution-industry-content p:last-of-type { color: #7d7777; background: transparent; border-radius: 0; }
    .solution-cases { padding: 48px 0 45px; }
    .solution-case-prev, .solution-case-next { width: 38px; height: 58px; font-size: 28px; }
    .solution-latest { padding: 48px 0 50px; }
    .solution-contact { padding: 55px 0; }
    .solution-contact p { font-size: 24px; }
}

@media (max-width: 560px) {
    .solution-hero { height: var(--hioki-inner-banner-height-mobile); }
    .solution-hero-text h1 { font-size: 28px; }
    .solution-hero-text p { font-size: 20px; }
    .solution-section-title { margin-bottom: 22px; font-size: 24px; }
    .solution-section-title span { padding: 0 48px; }
    .solution-industry-content p { font-size: 17px; }
    .solution-case-card { padding-bottom: 26px; }
    .solution-case-card strong { margin: 14px 12px 16px; font-size: 17px; line-height: 26px; }
    .solution-case-link { margin-left: 12px; }
    .solution-case-prev, .solution-case-next { top: 48%; }
    .solution-latest-item { display: block; padding: 18px 0; }
    .solution-latest-item time { display: block; margin-bottom: 8px; font-size: 15px; }
    .solution-latest-item strong { display: block; overflow: visible; font-size: 17px; white-space: normal; }
    .solution-contact { padding: 48px 0; }
    .solution-contact p { margin-bottom: 24px; font-size: 20px; }
    .solution-contact-button { width: 190px; height: 48px; font-size: 16px; }
}

/* =====================================================================
   行业方案内页
   ===================================================================== */
.solution-industry-page { color: #333; background: #fff; }
.solution-industry-hero { position: relative; display: flex; height: var(--hioki-inner-banner-height); align-items: center; justify-content: center; background-color: var(--hioki-blue); background-position: center; background-size: cover; }
.solution-industry-hero:before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.1); }
.solution-industry-hero-text { position: relative; color: #fff; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.28); }
.solution-industry-hero-text h1 { margin: 0; font-size: 48px; line-height: 1.3; font-weight: 600; }
.solution-industry-hero-text p { margin: 15px 0 0; font-size: 26px; line-height: 1.3; }
.solution-industry-page .hioki-breadcrumb { padding: 22px 0; background: #fff; border-bottom: 0; color: #666; }
.solution-industry-page .hioki-breadcrumb a, .solution-industry-page .hioki-breadcrumb .active { color: #666; }
.solution-industry-title { margin: 0 0 35px; color: var(--hioki-blue); font-size: 32px; line-height: 1.4; font-weight: 600; text-align: center; }
.solution-industry-title span { position: relative; display: inline-block; padding: 0 52px; }
.solution-industry-title span:before, .solution-industry-title span:after { content: ''; position: absolute; top: 50%; width: 30px; height: 2px; background: currentColor; }
.solution-industry-title span:before { left: 0; }
.solution-industry-title span:after { right: 0; }
.solution-industry-title.is-light { color: #fff; }
.solution-industry-intro { padding: 70px 0 80px; text-align: center; }
.solution-industry-intro p { max-width: 1180px; margin: 0 auto 38px; color: var(--hioki-blue); font-size: 18px; line-height: 2; }
.solution-industry-intro img { display: block; width: 100%; max-width: 1300px; margin: 0 auto; }
.solution-industry-solutions { position: relative; overflow: hidden; padding: 75px 0; background: var(--hioki-blue); text-align: center; }
.solution-industry-watermark { position: absolute; top: 4px; left: 0; width: 100%; color: #fff; opacity: .1; font-size: 90px; line-height: 1; font-weight: 700; text-align: center; }
.solution-industry-solutions .hioki-container { position: relative; }
.solution-industry-stages { display: flex; margin: 0 auto 32px; align-items: center; justify-content: center; gap: 40px; }
.solution-industry-stages a { min-width: 130px; padding: 5px 8px; color: #fff !important; background: var(--hioki-cta-grad); font-size: 20px; line-height: 30px; text-align: center; }
.solution-industry-stages a:hover, .solution-industry-stages a.active { filter: brightness(.96); }
.solution-industry-grid { display: flex; flex-wrap: wrap; justify-content: space-around; }
.solution-industry-solution-card { width: 30%; margin: 30px 0; background: #fff; }
.solution-industry-solution-card > a { display: block; padding: 10px 10px 40px; color: #333; }
.solution-industry-solution-card .image { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.solution-industry-solution-card .image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.solution-industry-solution-card:hover .image img { transform: scale(1.1); }
.solution-industry-solution-card strong { display: block; height: 60px; margin: 25px 0; overflow: hidden; color: #333; font-size: 18px; line-height: 30px; font-weight: 400; }
.solution-industry-page .detail-button { display: inline-flex; width: 155px; height: 38px; align-items: center; justify-content: center; color: #fff; background: var(--hioki-blue); font-size: 16px; }
.solution-industry-more { display: inline-flex; width: 180px; height: 48px; align-items: center; justify-content: center; color: #fff !important; background: var(--hioki-cta-grad); font-size: 18px; }
.solution-industry-samples { padding: 75px 0 90px; overflow: hidden; }
.solution-sample-content { position: relative; max-width: 1180px; margin: 0 auto; }
.solution-sample-carousel { overflow: hidden; }
.solution-sample-carousel .swiper-slide { height: auto; padding: 10px; }
.solution-sample-card { display: flex; height: 100%; align-items: center; color: #333; }
.solution-sample-card .image { flex: 0 0 46%; overflow: hidden; box-shadow: 0 5px 25px rgba(0,0,0,.15); }
.solution-sample-card .image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s; }
.solution-sample-card:hover .image img { transform: scale(1.06); }
.solution-sample-card .text { display: flex; min-width: 0; padding: 25px; flex: 1; flex-direction: column; align-items: flex-start; }
.solution-sample-card strong { color: var(--hioki-blue); font-size: 22px; line-height: 1.5; font-weight: 500; }
.solution-sample-card .description { display: block; min-height: 52px; margin: 16px 0 24px; overflow: hidden; color: #777; font-size: 15px; line-height: 26px; }
.solution-sample-count { display: block; margin: 20px 0 0 50%; padding-left: 25px; color: #999; font-size: 15px; }
.solution-sample-count b { color: var(--hioki-blue); font-size: 24px; font-weight: 400; }
.solution-sample-controls { position: absolute; right: -4px; bottom: -5px; display: flex; }
.solution-sample-controls button { width: 42px; height: 42px; padding: 0; border: 1px solid #d8d8d8; color: var(--hioki-blue); background: #fff; font-size: 26px; line-height: 38px; }
.solution-industry-products { padding: 75px 0 80px; background: #f3f5f8 url(../img/hioki/solution/product-background.jpg) center / cover no-repeat; text-align: center; }
.solution-product-list { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; list-style: none; text-align: left; }
.solution-product-list li { min-width: 0; background: #fff; box-shadow: 0 5px 25px rgba(0,0,0,.15); }
.solution-product-list li.is-extra { display: none; }
.solution-product-list.is-expanded li.is-extra { display: block; }
.solution-product-list a { display: flex; height: 100%; padding: 10px 10px 38px; flex-direction: column; color: #333; }
.solution-product-list .image { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.solution-product-list .image img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s; }
.solution-product-list li:hover .image img { transform: scale(1.06); }
.solution-product-list strong { display: block; margin: 20px 20px 10px; color: #333; font-size: 20px; line-height: 30px; font-weight: 500; }
.solution-product-list .line { width: 34px; height: 2px; margin: 0 20px 14px; background: var(--hioki-blue); }
.solution-product-list .description { height: 84px; margin: 0 20px 24px; overflow: hidden; color: #777; font-size: 15px; line-height: 28px; }
.solution-product-list .detail-button { margin: auto 20px 0; }
.solution-products-toggle { margin: 45px auto 0; padding: 0; border: 0; border-bottom: 1px solid var(--hioki-blue); color: var(--hioki-blue); background: transparent; font-size: 16px; line-height: 36px; }

@media (max-width: 991px) {
    .solution-industry-hero { height: var(--hioki-inner-banner-height-tablet); }
    .solution-industry-hero-text h1 { font-size: 34px; }
    .solution-industry-hero-text p { font-size: 20px; }
    .solution-industry-page .hioki-breadcrumb { display: none; }
    .solution-industry-intro, .solution-industry-solutions, .solution-industry-samples, .solution-industry-products { padding: 50px 0; }
    .solution-industry-title { font-size: 27px; }
    .solution-industry-stages { gap: 16px; }
    .solution-industry-stages a { min-width: 0; font-size: 17px; }
    .solution-industry-solution-card { width: 47%; margin: 15px 0; }
    .solution-product-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
}

@media (max-width: 560px) {
    .solution-industry-hero { height: var(--hioki-inner-banner-height-mobile); }
    .solution-industry-hero-text h1 { font-size: 25px; }
    .solution-industry-hero-text p { margin-top: 8px; font-size: 17px; }
    .solution-industry-intro, .solution-industry-solutions, .solution-industry-samples, .solution-industry-products { padding: 38px 0; }
    .solution-industry-title { margin-bottom: 24px; font-size: 22px; }
    .solution-industry-title span { padding: 0 40px; }
    .solution-industry-title span:before, .solution-industry-title span:after { width: 22px; }
    .solution-industry-intro p { margin-bottom: 25px; font-size: 15px; line-height: 1.9; text-align: left; }
    .solution-industry-watermark { font-size: 54px; }
    .solution-industry-stages { flex-direction: column; gap: 8px; }
    .solution-industry-stages a { width: 100%; font-size: 17px; }
    .solution-industry-solution-card { width: 100%; margin: 7px 0; }
    .solution-industry-solution-card > a { padding-bottom: 30px; }
    .solution-sample-card { display: block; }
    .solution-sample-card .image { display: block; width: 100%; }
    .solution-sample-card .text { padding: 22px 4px; }
    .solution-sample-count { margin-left: 0; padding-left: 4px; }
    .solution-sample-controls { right: 10px; }
    .solution-product-list { grid-template-columns: 1fr; gap: 16px; }
    .solution-product-list strong, .solution-product-list .line, .solution-product-list .description, .solution-product-list .detail-button { margin-left: 12px; margin-right: 12px; }
}

/* =====================================================================
   技术支持
   ===================================================================== */
.hioki-mainnav .navdiv.support-nav { left: -145px; display: none; width: 410px; min-width: 410px; padding: 42px 36px; grid-template-columns: 1fr 1fr; gap: 36px; }
.hioki-mainnav > li:hover .navdiv.support-nav { display: grid; }
.hioki-mainnav .support-nav-group strong { display: block; margin-bottom: 8px; color: #333; font-size: 20px; line-height: 32px; }
.hioki-mainnav .support-nav-group a { display: block; color: #333; font-size: 17px; line-height: 34px; white-space: nowrap; }
.hioki-mainnav .support-nav-group a:hover { color: var(--hioki-blue); }
body.hioki-body.page-support main.content { padding: 0; }
body.hioki-body.page-support .hioki-footer { margin-top: 0; }
.support-page { color: #333; background: #fff; }
.support-banner { position: relative; width: 100%; height: var(--hioki-inner-banner-height); overflow: hidden; background: #eef1f7; }
.support-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 不叠加任何遮罩, 标题无背景色块: banner 图完整清晰展示。整图均匀受光, 标题居中, 纯文字描边+阴影保证可读 */
.support-banner-text { position: absolute; top: 50%; left: 50%; z-index: 1; color: #fff; text-align: center; transform: translate(-50%,-50%); width: 90%; }
.support-banner-text h1 { margin: 0 0 10px; font-size: 44px; line-height: 1.2; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.65); }
.support-banner-text p { margin: 0; font-size: 18px; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.6); }
.support-page .hioki-breadcrumb { padding: 20px 0; border: 0; background: #fff; color: #666; }
.support-page .hioki-breadcrumb a, .support-page .hioki-breadcrumb .active { color: #666; }
.support-main { padding: 36px 0 90px; }
.support-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 55px; align-items: start; }
.support-sidebar { min-width: 0; }
.support-sidebar-toggle { display: none; }
.support-sidebar-nav { border: 1px solid #e6e6e6; background: #fff; }
.support-sidebar-heading, .support-sidebar-single { display: flex; width: 100%; min-height: 58px; padding: 0 24px; border: 0; align-items: center; justify-content: space-between; color: #333; background: #f5f5f5; font-size: 18px; line-height: 1.4; text-align: left; }
.support-sidebar-heading i { color: var(--hioki-blue); transition: transform .2s; }
.support-sidebar-group.is-open .support-sidebar-heading i { transform: rotate(180deg); }
.support-sidebar-links { display: none; }
.support-sidebar-group.is-open .support-sidebar-links { display: block; }
.support-sidebar-links a { display: block; min-height: 49px; padding: 12px 25px 12px 37px; border-top: 1px solid #eee; color: #666; font-size: 15px; line-height: 24px; }
.support-sidebar-links a:before { content: '-'; margin-right: 4px; }
.support-sidebar-links a:hover, .support-sidebar-links a.active { color: #fff; background: var(--hioki-blue); }
.support-sidebar-single { border-top: 1px solid #e6e6e6; color: #333 !important; }
.support-sidebar-single:hover { color: #fff !important; background: var(--hioki-blue); }
.support-content { min-width: 0; }
.support-search { display: flex; height: 52px; margin-bottom: 32px; align-items: center; color: #333; font-size: 18px; }
.support-search label { margin: 0 12px 0 0; font-weight: 400; white-space: nowrap; }
.support-search input[type="search"] { width: min(520px, calc(100% - 190px)); height: 52px; padding: 0 18px; border: 1px solid #ddd; border-right: 0; outline: 0; color: #333; background: #fff; font-size: 16px; }
.support-search input[type="search"]:focus { border-color: var(--hioki-blue); box-shadow: inset 0 0 0 1px var(--hioki-blue); }
.support-search button { display: inline-flex; width: 105px; height: 52px; padding: 0; border: 0; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--hioki-blue); font-size: 16px; }
.support-tabs { display: flex; margin-bottom: 28px; border-bottom: 2px solid var(--hioki-blue); }
.support-tabs a { display: flex; min-width: 220px; min-height: 52px; padding: 10px 28px; align-items: center; justify-content: center; border: 1px solid #ddd; border-bottom: 0; color: #666; background: #f7f7f7; font-size: 17px; }
.support-tabs a + a { border-left: 0; }
.support-tabs a:hover, .support-tabs a.active { color: #fff; border-color: var(--hioki-blue); background: var(--hioki-blue); }
.support-document-list { border-top: 1px solid #e6e6e6; }
.support-document-item { display: grid; min-height: 180px; padding: 25px 20px; border-bottom: 1px solid #e6e6e6; grid-template-columns: 190px minmax(0,1fr) 72px; gap: 28px; align-items: center; }
.support-document-cover { width: 190px; height: 130px; overflow: hidden; background: #f4f5f7; }
.support-document-cover img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.support-document-item:hover .support-document-cover img { transform: scale(1.04); }
.support-document-copy { min-width: 0; }
.support-document-copy h2 { margin: 0 0 14px; color: #333; font-size: 19px; line-height: 1.5; font-weight: 500; }
.support-document-copy h2 small { color: #777; font-size: 14px; font-weight: 400; }
.support-document-copy p { display: -webkit-box; margin: 0 0 13px; overflow: hidden; color: #777; font-size: 15px; line-height: 25px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.support-document-copy time { color: #999; font-size: 13px; }
.support-download-button { display: flex; width: 62px; height: 62px; flex-direction: column; align-items: center; justify-content: center; color: #fff !important; background: var(--hioki-blue); font-size: 12px; line-height: 20px; }
.support-download-button i { font-size: 20px; }
.support-download-button:hover { background: var(--hioki-blue-hover); }
.support-download-button.is-disabled { color: #999 !important; background: #e8e8e8; }
.support-video-scroll { width: 100%; overflow-x: auto; border: 1px solid #e2e2e2; outline: 0; -webkit-overflow-scrolling: touch; }
.support-video-scroll:focus { box-shadow: 0 0 0 2px rgba(var(--hioki-blue-rgb),.28); }
.support-video-table { width: 100%; min-width: 850px; margin: 0; border-collapse: collapse; table-layout: fixed; }
.support-video-table th, .support-video-table td { width: 20%; padding: 18px 14px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; color: #555; font-size: 15px; line-height: 24px; text-align: center; vertical-align: middle; }
.support-video-table th:last-child, .support-video-table td:last-child { border-right: 0; }
.support-video-table tbody tr:last-child td { border-bottom: 0; }
.support-video-table th { padding-top: 16px; padding-bottom: 16px; color: #333; background: #f3f3f3; font-size: 17px; font-weight: 500; }
.support-video-table tbody tr:hover td { background: #f7f9fd; }
.support-view-button { display: inline-flex; min-width: 82px; min-height: 36px; padding: 5px 15px; align-items: center; justify-content: center; color: #fff !important; background: var(--hioki-blue); }
.support-view-button:hover { background: var(--hioki-blue-hover); }
.support-view-button.is-disabled { color: #999 !important; background: #e8e8e8; }
.support-pagination { margin: 45px 0 0; text-align: center; }
.support-pagination .pagination { display: flex; margin: 0; flex-wrap: wrap; justify-content: center; }
.support-pagination .pagination > li { display: block; }
.support-pagination .pagination > li > a, .support-pagination .pagination > li > span { float: none; display: block; min-width: 50px; height: 38px; margin: 4px; padding: 0 15px; border: 1px solid #e5e5e5; border-radius: 0; color: #999; background: #fff; font-size: 18px; line-height: 36px; text-align: center; }
.support-pagination .pagination > li > a:hover, .support-pagination .pagination > .active > span { color: #fff; border-color: var(--hioki-blue); background: var(--hioki-blue); }
.support-pagination .pagination > .disabled > span { color: #bbb; background: #f7f7f7; }
.support-empty { min-height: 320px; padding: 85px 20px; color: #999; text-align: center; }
.support-empty i { color: #d5d5d5; font-size: 54px; }
.support-empty p { margin: 15px 0 0; font-size: 17px; }

/* “查看”按钮改 button 元素后保持视觉一致 + 增加播放图标 */
button.support-view-button { cursor: pointer; border: 0; gap: 6px; font-family: inherit; }
button.support-view-button i { font-size: 16px; }

/* 视频播放弹窗(全屏遮罩 + 16:9 居中) */
.hioki-video-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.hioki-video-modal.is-open { display: block; }
.hioki-video-mask { position: absolute; inset: 0; background: rgba(0,0,0,.78); animation: hioki-fade .2s ease; }
.hioki-video-dialog { position: absolute; top: 50%; left: 50%; width: min(960px, 92vw); transform: translate(-50%, -50%); }
.hioki-video-body { position: relative; width: 100%; padding-top: 56.25%; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.hioki-video-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hioki-video-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); cursor: pointer; font-size: 18px; line-height: 36px; text-align: center; transition: background .2s; }
.hioki-video-close:hover { background: rgba(255,255,255,.35); }
.hioki-video-footer { display: flex; margin-top: 14px; padding: 0 4px; align-items: center; justify-content: space-between; color: rgba(255,255,255,.85); font-size: 13px; }
.hioki-video-hint i { margin-right: 5px; color: rgba(255,255,255,.6); }
.hioki-video-page-link { display: inline-flex; padding: 7px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 2px; align-items: center; gap: 6px; color: #fff; transition: background .2s, border-color .2s; }
.hioki-video-page-link:hover { background: rgba(255,255,255,.15); border-color: #fff; }
@keyframes hioki-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 991px) {
    .hioki-mainnav .navdiv.support-nav { position: static; display: none; width: 100%; min-width: 0; padding: 0 20px 10px; grid-template-columns: 1fr; gap: 0; box-shadow: none; }
    .hioki-mainnav > li:hover .navdiv.support-nav { display: none; }
    .hioki-mainnav > li.open .navdiv.support-nav { display: block; }
    .hioki-mainnav .support-nav-group { padding: 4px 0 10px; }
    .hioki-mainnav .support-nav-group strong { margin: 0; font-size: 15px; line-height: 36px; }
    .hioki-mainnav .support-nav-group a { padding-left: 16px; font-size: 14px; line-height: 38px; }
    .support-page .hioki-breadcrumb { display: none; }
    .support-banner { height: var(--hioki-inner-banner-height-tablet); }
    .support-banner img { height: 100%; }
    .support-banner-text h1 { font-size: 28px; }
    .support-banner-text p { font-size: 15px; }
    .support-main { padding: 30px 0 60px; }
    .support-layout { display: block; }
    .support-sidebar { margin-bottom: 25px; }
    .support-sidebar-toggle { display: flex; width: 100%; height: 52px; padding: 0 20px; border: 0; align-items: center; justify-content: space-between; color: #fff; background: var(--hioki-blue); font-size: 17px; }
    .support-sidebar-toggle i { transition: transform .2s; }
    .support-sidebar-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
    .support-sidebar-nav { display: none; }
    .support-sidebar-nav.is-open { display: block; }
    .support-search { margin-bottom: 25px; }
    .support-document-item { grid-template-columns: 160px minmax(0,1fr) 62px; gap: 20px; }
    .support-document-cover { width: 160px; height: 112px; }
    /* 移动端视频弹窗:接横屏全宽,竖向留窄边距 */
    .hioki-video-dialog { width: 94vw; }
    .hioki-video-close { top: -40px; }
    .hioki-video-footer { flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 12px; }
}

@media (max-width: 560px) {
    .support-banner { height: var(--hioki-inner-banner-height-mobile); }
    .support-banner img { width: 100%; max-width: 100%; height: 100%; margin: 0; transform: none; object-fit: cover; object-position: center; }
    .support-banner-text h1 { font-size: 22px; }
    .support-banner-text p { font-size: 13px; }
    .support-main { padding: 20px 0 45px; }
    .support-search { height: 44px; font-size: 15px; }
    .support-search label { margin-right: 7px; }
    .support-search input[type="search"] { width: calc(100% - 128px); height: 44px; padding: 0 10px; font-size: 14px; }
    .support-search button { width: 75px; height: 44px; gap: 5px; font-size: 14px; }
    .support-tabs a { min-width: 0; min-height: 46px; padding: 8px; flex: 1; font-size: 14px; line-height: 20px; text-align: center; }
    .support-document-item { display: grid; min-height: 0; padding: 18px 0; grid-template-columns: 105px minmax(0,1fr); gap: 14px; align-items: start; }
    .support-document-cover { width: 105px; height: 78px; }
    .support-document-copy h2 { margin-bottom: 8px; font-size: 15px; line-height: 1.45; }
    .support-document-copy h2 small { display: block; margin-top: 3px; font-size: 12px; }
    .support-document-copy p { margin-bottom: 7px; font-size: 12px; line-height: 20px; }
    .support-document-copy time { font-size: 11px; }
    .support-download-button { width: 100%; height: 36px; grid-column: 1 / -1; flex-direction: row; gap: 7px; font-size: 13px; }
    .support-download-button i { font-size: 15px; }
    .support-video-table { min-width: 760px; }
    .support-video-table th, .support-video-table td { padding: 14px 10px; font-size: 13px; line-height: 21px; }
    .support-video-table th { font-size: 14px; }
    .support-pagination { margin-top: 30px; }
    .support-pagination .pagination > li > a, .support-pagination .pagination > li > span { min-width: 38px; height: 38px; margin: 3px; padding: 0 8px; font-size: 14px; line-height: 36px; }
    .support-empty { min-height: 240px; padding: 60px 15px; }
}