/*!
 * 「关于我们」页样式（spider:views 的 redesignAboutPage 产出的结构）
 *
 * 沿用站点既有视觉语言：标题 30px SimHei #888888、正文 #555、列表 14px Tahoma #444 /
 * 次要信息 12px #999、分隔用 1px 细线（点线或实线）、整体扁平（无圆角无阴影）。
 *
 * 注意：responsive.css 在 ≤1200px 会用 `body.site-body *{ … !important }` 扁平化，
 * 会覆盖 width/height/max-width —— 本文件凡需要固定的尺寸一律带 !important。
 */

#about_redesign_slot .about-wrap {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ---------- 左右两栏 ---------- */
.about-cols {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100% !important;
    box-sizing: border-box;
}

.about-col--text {
    flex: 1 1 0;
    min-width: 0;
}

/* 选择器带 #about_redesign_slot 提特异性：≤1200px 时 responsive.css 的
   `body.site-body *{ width:auto !important }`(0,1,1) 会压过单类选择器(0,1,0)，
   图栏宽度被打回 auto 后 flex-basis 吞掉整行，文字栏被压成 0 宽、
   三段简介排成 6000px 的竖条（1025–1200px 区间的塌陷）。
   左右 auto 在桌面 flex 行内无副作用（文字栏 flex:1 占满剩余空间）。 */
#about_redesign_slot .about-col--figure {
    flex: 0 0 auto;
    width: 430px !important;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 章节标题（呼应站点灰字 + 红色短线） ---------- */
.about-title {
    margin: 0 0 18px;
    padding-bottom: 10px;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 20px !important;
    font-weight: bold;
    line-height: 1.75;
    color: #888888;
    border-bottom: 3px solid #ff0000;
    display: inline-block;
}

.about-title small {
    margin-left: 12px;
    font-size: 12px !important;
    font-weight: normal;
    color: #bbbbbb;
}

/* ---------- 简介正文 ---------- */
.about-para {
    margin: 0 0 14px;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 16px !important;
    line-height: 1.9;
    color: #555555;
    text-align: justify;
    text-indent: 2em;
}

/* ---------- 右侧配图 ---------- */
.about-col--figure img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid #eeeeee;
}

/* ---------- 公司信息带 ---------- */
.about-info {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #eeeeee;
    width: 100% !important;
    box-sizing: border-box;
}

.about-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 36px;
}

.about-info li {
    margin: 0;
    font-size: 14px !important;
    color: #555555;
    line-height: 1.8;
}

.about-info em {
    margin-right: 8px;
    font-style: normal;
    font-size: 13px !important;
    color: #999999;
}

.about-info a {
    color: #555555;
    text-decoration: none;
}

.about-info a:hover {
    color: #ff9d43;
}

/* ---------- 公司动态列表 ---------- */
.about-news-title {
    margin: 6px 0 14px;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 20px !important;
    font-weight: bold;
    color: #888888;
    border-bottom: 3px solid #ff0000;
    display: inline-block;
    padding-bottom: 8px;
}

.about-news-title small {
    margin-left: 12px;
    font-size: 12px !important;
    font-weight: normal;
    color: #bbbbbb;
}

.about-news {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100% !important;
}

.about-news__item {
    border-bottom: 1px dotted #dddddd;
}

.about-news__item > a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.about-news__item > a:hover {
    background-color: #f8f8f8;
}

/* 选择器带 #smv_con_24_16 前缀提特异性：responsive.css 的扁平化层是
   `body.site-body *{ width/height/max-width: auto|100% !important }`(0,1,1)，
   比单类选择器(0,1,0)高，窄屏下会把 54px 缩略图打回原图尺寸。 */
#smv_con_24_16 .about-news__pic {
    flex: 0 0 auto;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    object-fit: cover;
    border: 1px solid #eeeeee;
}

.about-news__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.about-news__t {
    font-family: Tahoma, SimHei, "Microsoft YaHei", sans-serif;
    font-size: 14px !important;
    line-height: 1.5;
    color: #444444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-news__item > a:hover .about-news__t {
    color: #ff9d43;
}

.about-news__m {
    display: flex;
    gap: 16px;
    font-size: 12px !important;
    color: #999999;
}

.about-news__m i {
    font-style: normal;
}

/* ---------- 布局修正：内容回到文档流，避免「公司动态」被页脚覆盖 ----------
 * redesignAboutPage() 把本页主容器 #smv_Main（cpid=4857）做成固定
 * height:1400px 的绝对定位画布，「公司动态」列表 absolute top:1010 起、
 * 8 条实高约 640px，底端 ~1710 超出容器 300+px；紧随容器的 .site-footer
 * 从 1510 开始，正好盖住列表后 4 条。条数或标题换行都会改变实际高度，
 * 写死容器高度治标不治本 —— 这里把简介槽位与列表改回文档流（高度随内容），
 * 容器随之自适应，页脚自然排在内容之后。
 * 用 [cpid="4857"] 限定本页：article/product 详情页同样引入本样式表、
 * 也有自己的 #smv_Main（cpid 不同），不能按 id 全局生效。
 * flex order：DOM 里列表块在简介槽位之前，扁平化后会把「动态」排到
 * 「简介」前面，用 order 恢复视觉顺序（窄屏也生效）。 */
.smvContainer[cpid="4857"] {
    height: auto !important;
    display: flex;
    flex-direction: column;
}

#about_redesign_slot,
#smv_con_24_16 {
    position: static !important;
    height: auto !important;
    width: auto !important;
}

#about_redesign_slot {
    order: 1;
}

#smv_con_24_16 {
    order: 2;
}

/* 桌面：还原原设计的纵向节奏 —— 标题块占 0..103，槽位从 150 起；
   底部 70 与页脚分隔（原由列表的 margin 提供，列表隐藏后移到这里）；
   左右 auto 居中（原 left:375、宽 460 ≈ 居中）。 */
@media (min-width: 1201px) {
    #about_redesign_slot {
        margin: 150px 60px 70px;
    }

    #smv_con_24_16 {
        width: 460px !important;
        margin: 60px auto 70px;
    }
}

/* 窄屏：responsive.css 已整体扁平化，这里只补常规间距。 */
@media (max-width: 1200px) {
    #about_redesign_slot {
        margin: 20px 0 40px;
    }

    #smv_con_24_16 {
        margin: 30px 0 40px;
    }
}

/* 隐藏「公司动态 NEWS」板块（2026-10-12 应客户要求）。
   该板块是 #smv_con_24_16，全站仅公司介绍页 /gsjs 有；内容仍由
   controller 渲染在 HTML 里，恢复时删掉本条规则即可。 */
#smv_con_24_16 {
    display: none !important;
}

/* ---------- 窄屏：单列堆叠 ---------- */
@media (max-width: 1024px) {
    .about-cols {
        display: block !important;
    }

    .about-col--figure {
        width: 100% !important;
        margin-top: 22px;
    }

    .about-info ul {
        gap: 8px 20px;
    }

    .about-news__t {
        white-space: normal;
    }
}

/* ==================== 丰富板块：数据指标 / 服务 / 技术 / 场景 ====================
 * 由 SpiderViews::redesignAboutPage() 拼进 #about_redesign_slot；metrics/scenes
 * 由 Index::gsjs() 控制器实时赋值（volist 渲染），技术实力为 company.php 静态配置。
 * 卡片列宽用 flex-basis（扁平化层不碰 flex/gap/padding），固定图高必须
 * #about_redesign_slot 前缀 + !important（否则被 body.site-body * 打回，见文件头）。 */

.about-sec {
    margin-top: 40px;
}

/* ---------- 数据指标 ---------- */
.about-metrics {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-metrics li {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 14px 8px;
    border-left: 1px solid #eeeeee;
}

.about-metrics li:first-child {
    border-left: 0;
}

.about-metrics strong {
    display: block;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 30px !important;
    font-weight: bold;
    line-height: 1.3;
    color: #1a4f9c;
}

.about-metrics span {
    display: block;
    margin-top: 6px;
    font-size: 13px !important;
    color: #999999;
}

/* ---------- 服务项目（编号 + 文字，扁平卡片） ---------- */
.about-services {
    display: flex;
    gap: 20px;
}

.about-services__item {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 22px 24px;
    border: 1px solid #eeeeee;
    background: #fafafa;
    transition: border-color 0.2s ease;
}

.about-services__item:hover {
    border-color: #ff9d43;
}

.about-services__item i {
    display: block;
    font-style: normal;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 22px !important;
    font-weight: bold;
    color: #1a4f9c;
}

.about-services__item h3 {
    margin: 10px 0 8px;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 17px !important;
    font-weight: bold;
    color: #444444;
}

.about-services__item p {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.8;
    color: #999999;
}

/* ---------- 技术实力（规格要点卡 + 系统界面截图） ---------- */
.about-tech {
    display: flex;
    gap: 20px;
}

.about-tech__card {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 18px 20px;
    border: 1px solid #eeeeee;
    background: #fafafa;
}

.about-tech__card h3 {
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 16px !important;
    font-weight: bold;
    color: #1a4f9c;
}

.about-tech__card dl {
    margin: 0;
}

.about-tech__card dl > div {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dotted #e8e8e8;
    font-size: 13px !important;
    line-height: 1.7;
}

.about-tech__card dl > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.about-tech__card dt {
    flex: 0 0 84px;
    color: #999999;
}

.about-tech__card dd {
    flex: 1 1 auto;
    margin: 0;
    color: #444444;
}

.about-tech__shots {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.about-tech__shots figure {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

#about_redesign_slot .about-tech__shots img {
    display: block;
    width: 100% !important;
    height: 170px !important;
    object-fit: cover;
    object-position: top;
    border: 1px solid #eeeeee;
}

.about-tech__shots figcaption {
    margin-top: 8px;
    font-size: 12px !important;
    color: #999999;
    text-align: center;
}

/* ---------- 应用场景（6 格分类网格，纯展示不跳转） ---------- */
.about-scenes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.about-scenes__item {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #eeeeee;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.about-scenes__item:hover {
    border-color: #ff9d43;
}

#about_redesign_slot .about-scenes__pic {
    display: block;
    overflow: hidden;
}

#about_redesign_slot .about-scenes__pic img {
    display: block;
    width: 100% !important;
    height: 170px !important;
    object-fit: cover;
}

.about-scenes__body {
    padding: 14px 16px 16px;
}

.about-scenes__body strong {
    display: block;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 16px !important;
    color: #444444;
}

.about-scenes__body p {
    margin: 8px 0 10px;
    font-size: 12px !important;
    line-height: 1.7;
    color: #999999;
}

.about-scenes__body i {
    font-style: normal;
    font-size: 12px !important;
    font-weight: bold;
    color: #1a4f9c;
}

/* ---------- 丰富板块断点（后加载，同特异性时压过上面的基础规则） ---------- */
@media (max-width: 1024px) {
    .about-scenes__item {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .about-services {
        flex-wrap: wrap;
    }

    .about-services__item {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    .about-metrics li {
        flex: 0 0 50%;
        box-sizing: border-box;
        border-left: 0;
        border-top: 1px solid #eeeeee;
    }

    .about-metrics li:nth-child(-n+2) {
        border-top: 0;
    }

    .about-metrics strong {
        font-size: 26px !important;
    }

    .about-services__item {
        flex: 0 0 100%;
    }

    .about-tech {
        flex-wrap: wrap;
    }

    .about-tech__card {
        flex: 0 0 100%;
    }

    .about-tech__shots {
        flex-wrap: wrap;
    }

    .about-tech__shots figure {
        flex: 0 0 100%;
    }

    .about-scenes__item {
        flex: 0 0 100%;
    }
}

/* ==================== 产品详情页（cpid=1133605）：正文高度自适应 ====================
 * 原站画布写死 height:3755px，正文块 absolute top:671、上一篇/下一篇 absolute top:3692 ——
 * 按原站「正文只有 5 张长图（约 2972px）」预留的坐标。本站正文 = 客户文档文字 + 原站
 * 长图组图（见 SpiderViews::port() 里 productContentBind 的组图 volist），高度随产品
 * 而异，沿用写死坐标会压住上一篇/下一篇与页脚。
 * 桌面端把正文与上一篇/下一篇改回文档流：容器 padding-top 让开上方的面包屑/轮播/标题/
 * 摘要（它们保持绝对定位、都结束在 y≤644；padding 不会移动绝对定位子元素，故上面区块
 * 位置不变）。窄屏（≤1200）由 responsive.css 整体扁平化，天然有序，无需本段规则。 */
@media (min-width: 1201px) {
    .smvContainer[cpid="1133605"] {
        height: auto !important;
        padding-top: 671px;
    }

    .smvContainer[cpid="1133605"] [ctype="productContentBind"] {
        position: static !important;
        margin: 0 auto;
    }

    .smvContainer[cpid="1133605"] [ctype="productPreviousBind"],
    .smvContainer[cpid="1133605"] [ctype="productNextBind"] {
        position: static !important;
        display: inline-block;
        vertical-align: top;
        width: 480px !important;
        box-sizing: border-box;
        margin-top: 36px;
    }

    .smvContainer[cpid="1133605"] [ctype="productPreviousBind"] {
        margin-left: 13px;
    }

    .smvContainer[cpid="1133605"] [ctype="productNextBind"] {
        margin-left: 12px;
        margin-bottom: 48px;
    }
}

/* ==================== 联系我们页（cpid=4869）====================
 * 由 SpiderViews::redesignContactPage() 生成：删掉原站留言板/裸表格/空壳信息列表，
 * 只保留标题区（ctype=area，top:0 高 116px），新内容全在 #lx_redesign_slot 文档流里
 * （单一流子项，无 order 问题）。桌面端容器加 padding 让开标题并留出页脚间距；
 * 窄屏由 responsive.css 扁平化，DOM 顺序（标题→槽位）天然正确。
 * 固定尺寸一律 cpid/id 前缀 + !important（扁平化层 (0,1,1) 陷阱，见文件头）。 */
@media (min-width: 1201px) {
    .smvContainer[cpid="4869"] {
        height: auto !important;
        /* 内联 width:1200 是 content-box —— 不加 border-box，左右 padding 会把
           容器撑到 1320px 造成横向溢出 */
        box-sizing: border-box;
        padding: 150px 60px 60px;
    }
}

/* 窄屏：容器无 padding（扁平化后靠 body 留白），这里补标题间距与页脚分隔距 */
@media (max-width: 1200px) {
    #lx_redesign_slot {
        margin-top: 20px;
        padding-bottom: 40px;
    }
}

.lx-sec + .lx-sec {
    margin-top: 36px;
}

/* ---------- ① 联系方式卡片 ---------- */
.lx-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.lx-card {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 22px 24px;
    border: 1px solid #eeeeee;
    background: #fff;
    transition: border-color 0.2s ease;
}

.lx-card:hover {
    border-color: #ff9d43;
}

.lx-card i.mw-iconfont {
    font-size: 26px !important;
    color: #1a4f9c;
}

.lx-card__label {
    display: block;
    margin-top: 12px;
    font-size: 13px !important;
    color: #999999;
}

.lx-card__value {
    display: block;
    margin-top: 6px;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 20px !important;
    font-weight: bold;
    color: #1a4f9c;
}

.lx-card__value a {
    color: inherit;
    text-decoration: none;
}

.lx-card:hover .lx-card__value a {
    color: #ff9d43;
}

.lx-card__sub {
    display: block;
    margin-top: 6px;
    font-size: 12px !important;
    color: #999999;
}

.lx-copy {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 14px;
    border: 1px solid #cccccc;
    font-size: 12px !important;
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lx-copy:hover {
    color: #ff9d43;
    border-color: #ff9d43;
}

/* ---------- ② 到访指引 ---------- */
.lx-location {
    border: 1px solid #eeeeee;
    background: #fff;
}

/* 百度地图 iframe：定高必须 id 前缀 + !important —— responsive.css 扁平化层
   body.site-body *{height:auto!important} (0,1,1) 会把 iframe 压没；
   地图子树在 iframe 内另一文档里，不受页内样式影响。 */
#lx_redesign_slot .lx-map {
    width: 100% !important;
    height: 420px !important;
    line-height: 0;
}

#lx_redesign_slot .lx-map iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

@media (max-width: 768px) {
    #lx_redesign_slot .lx-map {
        height: 300px !important;
    }
}

#lx_redesign_slot .lx-location__pic img {
    display: block;
    width: 100% !important;
    height: 170px !important;
    object-fit: cover;
}

.lx-location__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
}

.lx-location__addr {
    font-size: 15px !important;
    color: #444444;
}

.lx-location__addr i {
    margin-right: 8px;
    font-size: 18px !important;
    color: #1a4f9c;
}

.lx-btn {
    display: inline-block;
    padding: 9px 26px;
    background: #1a4f9c;
    color: #fff;
    font-size: 14px !important;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.lx-btn:hover {
    background: #ff9d43;
}

/* ---------- ③ 服务网络 ---------- */
.lx-offices {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.lx-office {
    flex: 0 0 calc((100% - 60px) / 4);
    min-width: 0;
    box-sizing: border-box;
    padding: 22px 16px;
    border: 1px solid #eeeeee;
    background: #fafafa;
    text-align: center;
    transition: border-color 0.2s ease;
}

.lx-office:hover {
    border-color: #ff9d43;
}

.lx-office strong {
    display: block;
    font-family: SimHei, "Microsoft YaHei", sans-serif;
    font-size: 16px !important;
    color: #444444;
}

.lx-office span {
    display: block;
    margin-top: 8px;
    font-size: 13px !important;
    color: #999999;
}

/* ---------- 联系页断点 ---------- */
@media (max-width: 1024px) {
    .lx-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .lx-office {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    .lx-card {
        flex: 0 0 100%;
    }
}
