/* =====================================================================
 * subpage.css —— 内页公共样式（1:1 对齐 china-tek.com）
 * 适用：行业检测 / 服务项目 / 关于我们 / 热点资讯
 * 主色 #8c54a7 / 深紫 #5d0f82，内容区 1200，页面底 #f5f5f5
 * ===================================================================== */

/* ---------- 工具类（与首页定义保持同值，兜底） ---------- */
.qx_center { width: 1200px; margin: 0 auto; }
.flex_between { display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; }
.flex_left { display: flex; display: -webkit-flex; align-items: center; }
.flex_column { display: flex; display: -webkit-flex; flex-direction: column; }
.one_row_ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
 * 内页 Banner（chilren-banner，400px）
 * ===================================================================== */
.sub-banner { position: relative; width: 100%; height: 400px; background: #f5f5f5; overflow: hidden; }
.sub-banner > img {
    width: 1920px; height: 400px; position: absolute; top: -1px; left: 50%; margin-left: -960px;
    max-width: none; object-fit: cover;
}
.sub-banner .banner-info { position: relative; width: 1200px; height: 188px; margin: 0 auto; color: #fff; }
.sub-banner .banner-info .bi-inner { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.sub-banner .banner-info span { display: block; font-size: 14px; letter-spacing: 2px; opacity: .9; margin-bottom: 10px; }
.sub-banner .banner-info h3 {
    position: relative; display: inline-block; font-size: 36px; line-height: 1.2; font-weight: 700; margin: 0 0 12px;
}
.sub-banner .banner-info h3::after {
    content: ""; position: absolute; right: -92px; top: 50%; width: 80px; height: 4px; background: #fff;
}
.sub-banner .banner-info h5 { font-size: 20px; font-weight: 400; margin: 0; opacity: .95; }

/* =====================================================================
 * infoPage 通用布局（行业 / 服务）
 * ===================================================================== */
.info-page { background: #f5f5f5; padding-bottom: 10px; }
.info-page .ip-layout { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 50px; }

/* ---------- 左侧栏 side-nav（240px） ---------- */
.side-nav { width: 240px; flex-shrink: 0; background: #fff; padding-bottom: 10px; }
.side-nav > .big-title {
    height: 60px; line-height: 60px; margin: 0; padding: 0 25px;
    background: #5d0f82; color: #fff; font-size: 20px; font-weight: 700;
}
.side-nav ul.first-level { padding: 0; margin: 0; }
.side-nav .first-level-li { position: relative; min-height: 50px; }
.side-nav .item-hover {
    display: flex; align-items: center; height: 50px; padding: 0 22px 0 35px;
    color: #333; font-size: 16px; position: relative; cursor: pointer;
}
.side-nav .item-hover .sn-icon {
    width: 22px; height: 22px; margin-right: 12px; flex-shrink: 0;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238c54a7' d='M12 2l2.4 6.9H22l-6 4.5 2.3 7.1L12 16.3 5.7 20.5 8 13.4 2 8.9h7.6z'/%3E%3C/svg%3E");
}
.side-nav .item-hover .sn-icon img { width: 22px; height: 22px; display: block; filter: grayscale(1); opacity: .55; transition: all .25s; }
.side-nav .first-level-li:hover .sn-icon img,
.side-nav .first-level-li.active .sn-icon img { filter: none; opacity: 1; }
.side-nav .item-hover .sn-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav .item-hover .sn-arrow {
    width: 8px; height: 8px; margin-left: 8px; flex-shrink: 0;
    border-right: 1px solid #b3b3b3; border-bottom: 1px solid #b3b3b3;
    transform: rotate(-45deg); transition: all .25s;
}
.side-nav .first-level-li:hover > .item-hover,
.side-nav .first-level-li.active > .item-hover { color: #8c54a7; }
.side-nav .first-level-li:hover > .item-hover .sn-arrow,
.side-nav .first-level-li.active > .item-hover .sn-arrow {
    border-color: #8c54a7; transform: rotate(45deg); margin-top: -4px;
}
.side-nav .first-level-li.active > .item-hover .sn-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235d0f82' d='M12 2l2.4 6.9H22l-6 4.5 2.3 7.1L12 16.3 5.7 20.5 8 13.4 2 8.9h7.6z'/%3E%3C/svg%3E");
}

/* 展开的二级（当前一级，内联） */
.side-nav .second-level { background: #fbf8fc; padding: 4px 0; }
.side-nav .second-level-li { position: relative; }
.side-nav .second-level-li > a {
    display: block; height: 40px; line-height: 40px; padding-left: 70px;
    color: #687294; font-size: 15px; position: relative;
}
.side-nav .second-level-li > a:hover,
.side-nav .second-level-li.active > a { color: #8c54a7; }

/* 悬浮浮层（非当前一级的二级 / 三级） */
.side-nav .three-level {
    display: none; position: absolute; right: -170px; top: 0; width: 160px; z-index: 50;
    background: #fff; border: 1px solid #eee; box-shadow: 0 4px 16px rgba(0,0,0,.1); padding: 6px 0;
}
.side-nav .three-level li a {
    display: block; height: 40px; line-height: 40px; padding: 0 19px; color: #687294; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-nav .three-level li a:hover { color: #8c54a7; background: #fbf8fc; }
.side-nav .three-level .tl-group-title { padding: 6px 19px 2px; font-size: 12px; color: #9aa3bd; }
.side-nav .first-level-li:hover > .three-level,
.side-nav .second-level-li:hover > .three-level { display: block; }

/* ---------- 右侧内容 ---------- */
.pro-info { width: 930px; min-height: 400px; }

/* 面包屑行 bread-info */
.bread-info {
    width: 100%; padding: 5px 0 25px; margin-bottom: 25px;
    border-bottom: 1px solid #ddd;
}
.bread-info .big-title { font-size: 32px; font-weight: 700; color: #333; line-height: 1.2; }
.bread-info .bread-crumb { font-size: 14px; color: #666; }
.bread-info .bread-crumb a { color: #666; }
.bread-info .bread-crumb a:hover { color: #8c54a7; }
.bread-info .bread-crumb i { font-style: normal; margin: 0 8px; color: #bbb; }
.bread-info .bread-crumb .bc-home { color: #666; }
.bread-info .bread-crumb .bc-current { color: #8c54a7; }

/* 子分类 tab（chilrenNavs） */
.chilrenNavs { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.chilrenNavs li { margin: 0 35px 10px 0; font-size: 16px; color: #687294; cursor: pointer; }
.chilrenNavs li a { color: #687294; }
.chilrenNavs li:hover, .chilrenNavs li:hover a,
.chilrenNavs li.active, .chilrenNavs li.active a { color: #8c54a7; font-weight: 700; }

/* 卡片网格 slp-con */
.slp-con { display: flex; flex-wrap: wrap; }
.slp-con-item {
    width: 217px; margin: 0 16px 16px 0; padding: 16px; background: #fff; border-radius: 4px;
    transition: box-shadow .25s, transform .25s;
}
.slp-con-item:nth-child(4n) { margin-right: 0; }
.slp-con-item:hover { box-shadow: 0 6px 18px rgba(93,15,130,.12); transform: translateY(-3px); }
.slp-con-item .item-info h5 {
    margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #222d39; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slp-con-item .item-info h5 a { color: #222d39; }
.slp-con-item:hover .item-info h5 a { color: #8c54a7; }
.slp-con-item .poster-img { width: 100%; height: 100px; overflow: hidden; border-radius: 2px; background: #f5f5f5; }
.slp-con-item .poster-img img {
    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s;
}
.slp-con-item:hover .poster-img img { transform: scale(1.2); }

/* 分类简介（行业一级介绍，置于卡片上方） */
.slp-intro { background: #fff; border-radius: 4px; padding: 24px 30px; margin-bottom: 20px; color: #666; font-size: 15px; line-height: 1.9; }
.slp-intro img { max-width: 100%; }
.slp-intro h1, .slp-intro h2, .slp-intro h3 { color: #333; font-size: 17px; margin: 14px 0 8px; }

/* 板块标题（带双段装饰线：底下灰色整条 + 上面紫色半截） */
.slp-section-title {
    position: relative;
    font-size: 22px; font-weight: 700; color: #222;
    padding-bottom: 12px; margin-bottom: 20px;
    display: inline-block;
}
.slp-section-title::before,
.slp-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
}
.slp-section-title::before {
    width: 100%;
    background: #ddd;
    z-index: 1;
}
.slp-section-title::after {
    width: 50%;
    background: #8c54a7;
    z-index: 2;
}

/* slp-block 标题样式（同双段装饰线） */
.slp-block { background:#fff; border-radius:4px; padding:24px 30px; margin-bottom:20px; }
.slp-block .blk-title {
    position: relative;
    font-size: 22px; font-weight: 700; color: #222;
    padding-bottom: 12px; margin-bottom: 18px;
    display: inline-block;
}
.slp-block .blk-title::before,
.slp-block .blk-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
}
.slp-block .blk-title::before {
    width: 100%;
    background: #ddd;
    z-index: 1;
}
.slp-block .blk-title::after {
    width: 50%;
    background: #8c54a7;
    z-index: 2;
}

/* 空数据 */
.slp-empty { width: 100%; background: #fff; border-radius: 4px; text-align: center; color: #999; font-size: 15px; padding: 60px 0; }

/* =====================================================================
 * 分页 page-wrap
 * ===================================================================== */
.page-wrap { display: flex; justify-content: flex-end; align-items: center; margin-top: 20px; }
.page-wrap a, .page-wrap span {
    display: flex; align-items: center; justify-content: center;
    height: 32px; min-width: 40px; padding: 0 10px; margin-left: 8px;
    border: 1px solid #ccc; border-radius: 2px; font-size: 14px; color: #666; background: #fff;
}
.page-wrap a.pg-prev, .page-wrap a.pg-next { width: 65px; min-width: 65px; }
.page-wrap a:hover { border-color: #8c54a7; color: #8c54a7; }
.page-wrap span.active { background: #8c54a7; border-color: #8c54a7; color: #fff; }
.page-wrap span.pg-disabled { color: #ccc; cursor: not-allowed; }

/* =====================================================================
 * 关于我们 gywm
 * ===================================================================== */
.gywm { background: #f5f5f5; padding-bottom: 100px; }
.gywm .gywm-body { margin-top: 0; }
.gywm-tabs {
    display: flex; justify-content: space-between; align-items: center;
    height: 48px; border-bottom: 1px solid #ddd;
}
.gywm-tabs ul { display: flex; align-items: center; margin: 0; padding: 0; }
.gywm-tabs ul li { margin-right: 60px; font-size: 16px; color: #333; height: 48px; line-height: 48px; position: relative; cursor: pointer; }
.gywm-tabs ul li a { color: #333; }
.gywm-tabs ul li:last-child { margin-right: 0; }
.gywm-tabs ul li.active a, .gywm-tabs ul li a:hover { color: #8c54a7; }
.gywm-tabs ul li.active::before {
    content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
    width: 46px; height: 3px; background: #8c54a7;
}
.gywm-tabs .currentWz { font-size: 14px; color: #666; white-space: nowrap; }
.gywm-tabs .currentWz i { font-style: normal; color: #666; }
.gywm-tabs .currentWz a { color: #666; }
.gywm-tabs .currentWz a:hover { color: #8c54a7; }
.gywm-tabs .currentWz span { color: #666; margin-left: 6px; }

.gywm-info { margin-top: 20px; padding: 50px 90px; background: #fff; }
.gywm-info .cate-title { margin-bottom: 30px; font-size: 24px; color: #333; font-weight: 700; }
.gywm-info .article-body { font-size: 16px; line-height: 30px; color: #666; }
.gywm-info .article-body p { margin: 0 0 14px; }
.gywm-info .article-body img { max-width: 100%; height: auto; }
.gywm-info .article-body h1, .gywm-info .article-body h2, .gywm-info .article-body h3 { color: #333; margin: 18px 0 10px; }

/* 公正性声明式标题（左竖线） */
.gywm-statement-title { position: relative; padding-left: 14px; margin-bottom: 10px; font-size: 24px; color: #333; font-weight: 700; }
.gywm-statement-title::before { content: ""; position: absolute; left: 0; top: 4px; width: 2px; height: 24px; background: #ddd; }

/* 图片网格（荣誉 / 仪器 / 团队 / 案例） */
.gywm-grid { display: flex; flex-wrap: wrap; }
.gywm-grid .gg-item { width: 230px; margin: 0 25px 25px 0; }
.gywm-grid .gg-item:nth-child(4n) { margin-right: 0; }
.gywm-grid .gg-item .gg-img {
    width: 230px; height: 160px; overflow: hidden; border-radius: 4px; background: #f5f5f5;
    border: 1px solid #eee;
}
.gywm-grid .gg-item .gg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gywm-grid .gg-item:hover .gg-img img { transform: scale(1.08); }
.gywm-grid .gg-item .gg-name { margin-top: 10px; font-size: 15px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 案例图文（富文本中的卡片，兜底） */
.gywm-text-block { margin-bottom: 30px; font-size: 16px; line-height: 30px; color: #666; }
.gywm-text-block img { max-width: 100%; border-radius: 4px; }

.gywm-empty { color: #999; font-size: 15px; text-align: center; padding: 60px 0; }

/* =====================================================================
 * 热点资讯 hots
 * ===================================================================== */
.hots { background: #f5f5f5; padding-bottom: 100px; }
.hots .hots-title { margin: 40px 0 30px; }
.hots .hots-title span:first-child { font-size: 32px; font-weight: 700; color: #333; }
.hots-list { background: #fff; }
.hots-list li { display: flex; justify-content: space-between; padding: 30px; border-bottom: 1px solid #ddd; }
.hots-list li:last-child { border-bottom: none; }
.hots-list .hots-list-info { width: 900px; min-width: 0; }
.hots-list .info-title { font-size: 18px; color: #222d39; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hots-list .info-title a { color: #222d39; }
.hots-list li:hover .info-title a { color: #8c54a7; }
.hots-list .info-text {
    margin: 10px 0 20px; font-size: 15px; color: #666; line-height: 26px;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hots-list .info-meta { display: flex; justify-content: space-between; font-size: 13px; color: #999; }
.hots-list .info-meta a { color: #999; }
.hots-list .hots-list-poster { width: 210px; height: 118px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #f5f5f5; margin-left: 30px; }
.hots-list .hots-list-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hots .pagination { margin-top: 30px; }
.hots-empty { background: #fff; color: #999; font-size: 15px; text-align: center; padding: 70px 0; }