/* ====================================================
   inside.css - 内页（栏目页 / 详情页等）样式（PC 端）
   ----------------------------------------------------
   加载链：BaseUI 的 PC 分支
           color.css -> master.css -> headfoot.css -> index.css / inside.css
   不含：移动端（inside_mob.css）

   文件头规范化 + 移除 @import url('color.css')：
   本文件在加载链中位于 color.css(312) 之后（自身在 354 行加载），属重复
   引入；且 @import 走相对路径、不带 ?ver=，会与 link 版形成两份独立缓存。
   ==================================================== */

/* #region 内页页面顶部banner */
.page-banner {
    height: 300px;
    background: linear-gradient(rgba(15,52,96,0.8), rgba(15,52,96,0.8)), url(/static/images/top.jpg) no-repeat center center;
    background-size: cover;
    color: var(--white);
    display: flex;
    align-items: center;            
    text-align: center;
}
.page-banner h2 {
    font-size: var(--fs-hero);
    margin-bottom: 15px;
}

.page-banner p {
    font-size: var(--fs-h3);
    opacity: 0.9;
}
/* #endregion */

/*  #region 内页类别导航菜单*/
.sorts-list {
    margin-top:30px;
}

.sorts-filter {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.sorts-filter-item {
    padding: 8px 25px;
    background: var(--white);
    border-radius: 30px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.sorts-filter-item.active {
    background: var(--primary);
    color: var(--white);
}
.sorts-filter-item.active a {color:var(--white);}
/* #endregion */


/* #region 文章/案例/项目列表 */

.news-list {
    padding: 10px 0 50px 0;
}
.news-wrap {
    padding:0 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.news-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.news-card-content {
    padding: 25px;
}

.news-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--light-gray);
    color: var(--primary);
    font-size: var(--fs-tiny);
    border-radius: 3px;
    margin-bottom: 10px;
}

.news-card h3 {
    font-size: var(--fs-h3);
    color: var(--primary);
    margin-bottom: 10px;
    line-height: var(--lh-normal);
    height: 54px;
    overflow: hidden;
}

.news-desc {
    color: var(--mid-gray);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    height: 48px;
    overflow: hidden;
    margin-bottom: 15px;
}

.news-info {
    display: flex;
    justify-content: space-between;
    color: var(--mid-gray);
    font-size: var(--fs-tiny);
}

/* #endregion */
       

/* #region 文章/案例/项目详情 */
.article-detail {
    max-width: 960px;
    margin: 0 auto;
    margin-top:50px;
    margin-bottom:50px;
}

.article-header {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    text-align: center;
}

.article-tag {
    display: inline-block;
    padding: 5px 15px;
    background: var(--light-gray);
    color: var(--primary);
    border-radius: 30px;
    font-size: var(--fs-small);
    margin-bottom: 15px;
}

.article-header h1 {
    font-size: var(--fs-h1);
    color: var(--primary);
    line-height: var(--lh-tight);
    margin-bottom: 20px;
}

.article-meta {
    color: var(--mid-gray);
    font-size: var(--fs-small);
    display: flex;
    justify-content: center;
    gap: 30px;
}

.article-content {
    background: var(--white);
    padding: 50px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: #444;
    text-align:justify;
}

.article-content p {
    margin-bottom: 25px;
}

.article-content h2 {
    font-size: var(--fs-h2);
    color: var(--primary);
    margin: 35px 0 20px;
    padding-left: 12px;
    border-left: 4px solid var(--secondary);
}

.article-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 20px 0;
}
    /* #region 相关推荐 */
    .related-news {
        margin-top: 50px;
    }

    .related-title {
        font-size: var(--fs-h2);
        color: var(--primary);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--light-gray);
    }

    .related-list {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }

    .related-item {
        background: #fff;
        padding: 15px;
        border-radius: 6px;
        box-shadow: var(--shadow);
    }

    .related-item h4 {
        font-size: var(--fs-body);
        color: var(--primary);
        line-height: var(--lh-normal);
    }
    /* #endregion */

/* #endregion */










/*页面顶部大图片*/
.headbanner{width:100%; height:222px; position:relative; background:#eee; overflow:hidden;}
.headbanner img {width: 1920px;position: absolute;left: 50%;top: 0;margin-left: -960px;}



.inside { /*background: var(--nav-bg);*/ background: linear-gradient(180deg,#ece9ff 0%,#ece9ff 26.04%,rgba(236,233,255,0) 100%); }
/*
.about { width: 1156px; margin: 0 auto; padding: 22px; background: rgba(255, 255, 255, 0.9); position: relative; z-index: 300; margin-top: -80px; border-top-left-radius: 10px;border-top-right-radius:10px; min-height: 500px; }
.about .location{height:60px;line-height:60px;color:var(--font-bold);}
.about .location a { color: var(--font-bold); }
.about .location i{margin:0 10px;}

.about .content{font-size:var(--fs-body);line-height:26px;padding:30px;}
.about .content h1{font-size:var(--fs-h2);color:var(--font-bold);margin:30px 0;text-align:center;}
.about .content p{margin-bottom:20px;}*/

  .about-intro {
            padding: 100px 0;
        }

        .about-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-img img {
            width: 100%;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .about-text h3 {
            font-size: var(--fs-h1);
            color: var(--primary);
            margin-bottom: 20px;
        }

        .about-text p {
            font-size: var(--fs-body);
            line-height: var(--lh-loose);
            color: var(--mid-gray);
            margin-bottom: 15px;
        }

        /*联系我们*/

           .contact-page {
            padding: 100px 0;
        }

        .contact-wrap {
            margin:0 100px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
        }

        .contact-info {
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .contact-info h3 {
            color: var(--primary);
            margin-bottom: 30px;
            font-size: var(--fs-h2);
        }

        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }

        .contact-item span {
            font-size: var(--fs-h2);
            color: var(--secondary);
            margin-right: 15px;
            width: 30px;
            text-align: center;
        }

        .contact-item div h4 {
            color: var(--primary);
            margin-bottom: 5px;
        }

        .contact-item div p {
            color: var(--mid-gray);
        }

        .contact-form {
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #eee;
            border-radius: 4px;
            font-size: var(--fs-body);
        }

        .contact-form textarea {
            height: 120px;
            resize: none;
        }

      


.site { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin:30px 0px;}
.site .item { width:23%; text-align: center; margin:20px 0px; }
.site .photo { width: 200px; height: 200px; border: 1px solid var(--border); overflow: hidden; margin: 0 auto; border-radius:5px;}
.site .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site .name { margin-top: 10px; text-align: center; color: var(--font-bold); }
.site .name a{color:var(--font-bold);}



/*错误页面*/
.error { width: 600px; margin: 0 auto; padding: 60px 0; text-align: center; color:var(--font-bold);}
.error .note { font-weight: 500; font-size: var(--fs-h3); margin: 30px 0px; }
.error .return { border: 1px solid var(--font-bold); width: 160px; height: 35px; line-height: 35px; border-radius: 5px; text-align: center; font-size: var(--fs-body); margin: 0 auto; font-weight: 600; }
.error .jump { margin: 30px 0; }
.error .jump b { color: red; }


/*项目图片列表*/

.products { width: 100%;padding:30px;}
.productslist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; width:calc(100% - 60px); }
.productslist .items { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; background: var(--border-list); border-radius: 5px; overflow: hidden; }
.productslist .items:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.productslist .items .photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.productslist .items .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.productslist .items .name { padding:20px 10px 10px 10px;; text-align: center; font-size: var(--fs-body); color: var(--font-bold); }
.productslist .items .note {padding:10px 10px 20px 10px;text-align:center;}
.productslist .items .note a { color: var(--font-light); margin-right: 10px;font-size:var(--fs-small); }

.productsdetail { padding: 30px;  font-size: var(--fs-body); line-height: 26px; color:var(--font-light);}
.productsdetail strong { font-size: var(--fs-h3); color:var(--font-bold); letter-spacing: 3px; }
.productsdetail p { margin-bottom: 20px; letter-spacing: 1px; text-align: justify; }
.productsdetail p:last-child { margin-bottom: 0px; }
.productsdetail img { max-width: 100%; }



.shownews { padding: 30px; }
.shownews .articletitle { font-size: var(--fs-h2); line-height: 35px; text-align: center; }
.shownews .articletitle h1 { font-size: var(--fs-h2); color:var(--font-bold);}
.shownews .articlefrom { margin-top: 20px; border-bottom: 1px solid var(--border); padding-bottom: 30px; text-align: center; color:var(--font-span);}
.shownews .articlefrom ul { text-align: center; width: 100%; height: 100%; }
.shownews .articlefrom li { display: inline; margin-right: 20px; }
.shownews .articlefrom li i { margin-right: 10px; }

.shownews .articlecontent { margin-top: 30px; width: 100%; overflow: hidden; }
.shownews .articlecontent p, .shownews .articlecontent section { margin-top: 20px; font-size: var(--fs-body); line-height: var(--lh-loose); text-align: justify; word-break: break-word; }
.shownews .articlecontent img { max-width: 100%; display: block !important; margin: 0 auto; border-radius: 5px; }


/*合作伙伴*/
.case { width: 100%; padding: 30px; }
.case .aboutphotolist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; width: calc(100% - 60px);  }
.case .items { background: var(--border-list); border-radius: 8px; padding: 0 10px; border: 1px solid var(--border); overflow: hidden;margin:10px 0px; }
.case .items img { width: 100%; height: 100%; object-fit: cover; }



/*解决方案*/
/*.insidenav{background:#f4f4f4;height:64px;width:100%;}
.insidenav .sort {height:32px;line-height:32px;padding-top:16px; }
.insidenav .sort ul{}
.insidenav .sort li{float:left;font-size:var(--fs-h3);*//*width:119px;*//*border-left:1px solid #e0e0e0;text-align:center;}
.insidenav .sort li a{color:#000000;padding-bottom:5px;margin:0 30px;}
.insidenav .sort li.hover a,.insidenav .sort li:hover a{color:#c7161e;border-bottom:2px solid #c7161e;}

.insidenav .sorten li{font-size:var(--fs-body);}
.insidenav .sorten li a { margin:0 25px; }



.inside{width:100%;clear:both;}

.websitecontent{padding:60px 10px 120px 10px;color:#555555;font-size:var(--fs-body);line-height:26px;}
.websitecontent p strong{font-size:var(--fs-h1);color:var(--color-primary); /* 上一客户的蓝色残留，收敛到主题主色 */letter-spacing:3px;}
.websitecontent p{margin-bottom:20px;text-align:justify;letter-spacing:1px;}
.websitecontent p:last-child{margin-bottom:0px;}
.websitecontent img{max-width:100%;}
.websitecontent .more{visibility:hidden; background:#e24c2e;width:124px;height:40px;line-height:40px;border-radius:20px;text-align:center;font-size:var(--fs-h3);letter-spacing:2px;margin:0 auto;margin-top:90px;position:relative;}
.websitecontent .more a{color:#ffffff;}

.websitecontent .returntop{font-size:var(--fs-h3);line-height:26px;height:26px;display: flex;align-items:center;float:right;margin-top:-34px;}
.websitecontent .returntop i{font-size:var(--fs-h2);margin-left:10px;
                             }
.websitecontent .returntop a{color:#555555;}

.websitecontenten p strong{letter-spacing:1px;}*/


/*产品*/
/*.productsnav { background: #f3f5f7; height: 80px; width: 100%; }
.productsnav .sort {height:80px;line-height:80px;}
.productsnav .sort ul{}
.productsnav .sort li{float:left;font-size:var(--fs-h3);width:392px;text-align:center;background:#ffffff;margin-right:12px;}
.productsnav .sort li:last-child{margin-right:0px;}
.productsnav .sort li a{color:#000000;padding-bottom:5px;}
.productsnav .sort li.hover a,.productsnav .sort li:hover a{color:#c7161e;}


.products{width:100%;clear:both;background:#f3f5f7;padding-top:12px;padding-bottom:60px;}

.productsleft{float:left;width:254px;padding-bottom:60px;background:#ffffff;}
.productsleft .sortslist li{height:54px;line-height:54px;border-bottom:1px solid #f3f5f7;text-align:center;}
.productsleft .sortslist li a{font-size:var(--fs-h3);font-weight:500;color:#000;padding-bottom:5px;}
.productsleft .sortslist li a:hover,.productsleft .sortslist li.hover a{color:#c7161e;*//*border-bottom:2px solid #c7161e;*//*}

.productsright{float:left;width:922px;margin-bottom:60px;margin-left:24px;background:#ffffff;}
.productsdetail{padding:60px;color:#555555;font-size:var(--fs-body);line-height:26px;}
.productsdetail p strong{font-size:var(--fs-h2);color:var(--color-primary); /* 上一客户的蓝色残留，收敛到主题主色 */letter-spacing:3px;}
.productsdetail p{margin-bottom:20px;letter-spacing:1px;text-align:justify;}
.productsdetail p:last-child{margin-bottom:0px;}
.productsdetail img{max-width:100%;}

.productsdetail .more{visibility:hidden;background:#e24c2e;width:124px;height:40px;line-height:40px;border-radius:20px;text-align:center;font-size:var(--fs-h3);letter-spacing:2px;margin:0 auto;margin-top:60px;position:relative;}
.productsdetail .more a{color:#ffffff;}
.productsdetail .returntop{font-size:var(--fs-h3);line-height:26px;height:26px;display: flex;align-items:center;float:right;margin-top:-34px;}
.productsdetail .returntop i{font-size:var(--fs-h2);margin-left:10px;}
.productsdetail .returntop a{color:#555555;}

.productsdetailen p {  }
.productsdetailen p strong{letter-spacing:1px;}




*/


/* #region 查询列表页*/
/* 重做搜索结果列表样式：卡片化、hover 高亮、关键词提示居中。
   后台 ArticleUI.GetPageQuery 输出的类结构（.items/.nophoto/.photo/.title/.remark/.user）保持不变，
   仅做 CSS 美化，不改动 DLL 取数。作用域 .query，仅影响站内搜索结果页。 */
.query {
    background: var(--light-gray);
    padding: 56px 0 78px;
}
.query .tit {
    text-align: center;
    margin: 0 auto 44px;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--font-color-normal);
    letter-spacing: 1px;
}
.query .querylist {
    max-width: 880px;
    margin: 0 auto;
}
.querylist .items {
    margin: 0 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--white);
    overflow: hidden;
    transition: all 0.25s ease;
}
.querylist .items:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(14, 53, 96, 0.10);
    transform: translateY(-2px);
}
.querylist .items a { display: block; color: inherit; }
.querylist .items:last-child { margin-bottom: 0; }

/* 无缩略图条目 */
.querylist .items .nophoto {
    width: 100%;
    margin: 0;
    padding: 22px 26px;
}
.querylist .items .nophoto .title {
    color: var(--color-primary);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: var(--lh-normal);
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.querylist .items .nophoto .title:hover { color: var(--color-secondary); }
.querylist .items .nophoto .remark {
    color: var(--font-light);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    margin: 0 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.querylist .items .nophoto .user {
    line-height: var(--lh-loose);
    height: auto;
    color: var(--font-span);
    font-size: var(--fs-tiny);
}
.querylist .items .nophoto .user i { margin-right: 8px; }
.querylist .items .nophoto .user i:last-child { margin-left: 18px; margin-right: 0; }

/* 含缩略图条目（后台有图时）同步卡片化 */
.querylist .items .photo {
    width: 100%;
    margin: 0;
    padding: 18px 22px;
    box-sizing: border-box;
}
.querylist .items .photo .img {
    width: 36%;
    height: 150px;
    overflow: hidden;
    float: left;
    border-radius: 6px;
}
.querylist .items .photo .img img { width: 100%; height: 100%; object-fit: cover; }
.querylist .items .photo .text {
    width: calc(64% - 30px);
    float: left;
    margin-left: 30px;
    padding: 0;
}
.querylist .items .photo .text .title {
    color: var(--color-primary);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: var(--lh-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.querylist .items .photo .text .title:hover { color: var(--color-secondary); }
.querylist .items .photo .text .remark {
    color: var(--font-light);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    margin: 14px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.querylist .items .photo .text .user {
    line-height: var(--lh-loose);
    height: auto;
    color: var(--font-span);
    font-size: var(--fs-tiny);
}
.querylist .items .photo .text .user i { margin-right: 8px; }
.querylist .items .photo .text .user i:last-child { margin-left: 18px; margin-right: 0; }
/* #endregion */




/* #region 表格/留言/视频 样式*/

/*有边框的表格*/
table { border: 1px #dcdcdc solid; border-collapse: collapse; }

table tr th { background: #dcdcdc; padding: 5px; border: 1px solid #aaa; font-weight: normal; }
table tr td { padding: 8px; color: #333; border: 1px solid #aaa; }
table tr td p { margin: 0px !important; padding: 0px !important; }
/*table tr:nth-child(2n+1) {background-color: #F5F5F5;}*/

.table { border: none !important; border-collapse: collapse; margin-top: 15px; }
.table tr th { padding: 0px; border: none; font-weight: normal; }
.table tr td { padding: 0px; border: none; }
.table tr td p { margin: 0px !important; padding: 0px !important; }

/*在线留言表格*/

/*在线留言表格*/
.uctable { width: 100%; overflow: hidden; border: none; }
.uctable * a { color: #0066CC; }
.uctable * a:hover { color: #FF0000; text-decoration: underline; }
.uctable tr th { background: #FFE; border-bottom: 1px solid #DBDFE1; padding: 10px; }
.uctable tr td { padding: 5px 10px; color: #333; vertical-align: top; text-align: left; border: none; }
.uctable input, .uctable button { padding: 5px 10px; border: 1px solid #dcdcdc; cursor: pointer; font-size: var(--fs-body); }

.uctable input.btn { padding: 10px 20px; cursor: pointer; font-size: var(--fs-body); border-radius: 5px; }
.uctable input.btn:hover { background: #e60e17; color: #fff; }

/*视频*/
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video iframe,
.video object,
.video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* #endregion */




/*  #region 分页导航样式 */
.pagelist {
    clear: both;
    text-align: center;
    font-size: var(--fs-h3);
    margin: 50px 0;
}

/* 链接样式 */
.pagelist a {
    display: inline-block;
    background:var(--light-gray);
    padding: 8px 15px;    
    margin-right: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
}

/* 链接 hover 效果 */
.pagelist a:hover {
    background: var(--color-primary);
    color: var(--white);
    text-decoration: none;
}

/* 非链接元素样式（当前页、省略号、禁用状态） */
.pagelist span {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--color-border);
    margin-right: 10px;
    border-radius: 5px;
}

/* 当前页码样式 */
.pagelist span.current {
    background: var(--color-primary);
    color: var(--white);
}

/* 省略号样式 */
.pagelist span.ellipsis {
    border: none;
    padding: 8px 5px;
}

/* 上一页/下一页禁用状态 */
.pagelist span.prev.disabled,
.pagelist span.next.disabled {
    color: #999;
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* 上一页/下一页链接样式 */
.pagelist a.prev,
.pagelist a.next {
    /* 可根据需要添加特殊样式 */
}

/* #endregion */




/* ====================================================
   关于我们栏目页（电脑端）— 按首页效果框架重做
   ----------------------------------------------------
   1. 本区块全部规则限定在 .about-page 作用域内。原因：page-banner /
      sorts-list / sorts-filter / article-detail / article-content 这 4 个类
      被 9~10 个内页共用（Case / CaseShow / Contact / News / Products /
      ProductsDetail / Query / Service / ShowNews），直接改基础规则会波及
      尚未改造的兄弟页。基础规则一行未动。
   2. 视觉规格对齐 index.css：深蓝 --color-primary 底 + 金 --color-secondary
      点缀；卡片改 1px 细边框 + 8px 圆角、去重阴影（与首页 .news-card 一致）。
   3. 背景图由原来不存在的 /static/images/top.jpg 换成 yibin-paper.jpg，
      并加同品牌深蓝遮罩压暗，保证白字对比度。
   4. 移动端本文件不生效（走 inside_mob.css 旧规则），本轮未做移动端适配；
      标记结构与电脑端共用（不写设备分支），后续补移动端只需在
      inside_mob.css 追加同名的 .about-page 覆盖块。
   ==================================================== */

/* #region 关于我们 - 内页 Banner */
/* Banner 背景由 yibin-paper.jpg（宜宾纸业案例图）改为
   公司简介里的公司大楼图（CityAlbum/upload/image/202609/6392612567247469283209655.png）；
   偏上裁切（center 22%）保留顶部红色公司名，遮罩由 0.82 降到 0.62 让楼房与公司名更清晰。
   作用域 .about-page，故 About / Job / Contact 三页共用此 banner 背景 */
.about-page .page-banner {
    height: 300px;
    justify-content: center;
    background: linear-gradient(rgba(14, 53, 96, 0.62), rgba(14, 53, 96, 0.62)),
                url(/static/images/about-banner-building.png) no-repeat center 22%;
    background-size: cover;
}

/* 查询页（站内搜索）banner 用独立设计图，不复用公司大楼图 */
.about-page .page-banner.search-banner {
    background: linear-gradient(rgba(14, 53, 96, 0.45), rgba(14, 53, 96, 0.45)),
                url(/static/images/search-banner.png) no-repeat center center;
    background-size: cover;
}

.about-page .page-banner h2 {
    font-size: var(--fs-hero);
    letter-spacing: 6px;
    margin-bottom: 0;
}

.about-page .page-banner .bar {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--color-secondary);
    margin: 18px auto 14px;
}

.about-page .page-banner p {
    font-size: var(--fs-tiny);
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}
/* #endregion */


/* #region 关于我们 - 二级栏目导航 */
.about-page .sorts-list {
    margin-top: 0;
    padding: 26px 0;
    background: var(--white);
    border-bottom: 1px solid var(--color-border);
}

.about-page .sorts-filter {
    margin-bottom: 0;
}

.about-page .sorts-filter-item {
    padding: 9px 26px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    box-shadow: none;
    font-size: var(--fs-small);
    transition: 0.25s;
}

.about-page .sorts-filter-item a {
    color: var(--font-color-normal);
}

.about-page .sorts-filter-item:hover {
    border-color: var(--color-primary);
}

.about-page .sorts-filter-item:hover a {
    color: var(--color-primary);
}

.about-page .sorts-filter-item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.about-page .sorts-filter-item.active a {
    color: var(--white);
}
/* #endregion */


/* #region 关于我们 - 栏目正文 */
.about-page .article-detail {
    max-width: none;
    margin: 0;
    padding: 60px 0 78px;
    background: var(--light-gray);
}

.about-page .article-content {
    /* 本站全局为 content-box（master.css 有意不加 border-box，见其文件头第 4 条），
       故此处 max-width 只约束内容宽，需显式声明 border-box 才能让「卡片总宽」
       等于 max-width（否则实际总宽 = max-width + 左右 padding = 1228px，
       比导航 .container 的 1200px 还宽）。 */
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 64px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color);
}

.about-page .article-content h2 {
    font-size: var(--fs-h3);
    margin: 40px 0 18px;
    /* 基础规则里的 border-left 用的是已删除的 --secondary，此处补正确变量 */
    border-left: 4px solid var(--color-secondary);
}

.about-page .article-content h2:first-child {
    margin-top: 0;
}

.about-page .article-content p {
    margin-bottom: 20px;
}

.about-page .article-content p:last-child {
    margin-bottom: 0;
}

.about-page .article-content img {
    border-radius: 8px;
    margin: 24px 0;
    /* 此处原为 display: block，是缺陷：
       text-align 只对「行内元素」生效，img 一旦变成块级就不再听父级
       <p style="text-align:center"> 的话，于是「后台设了居中、前台仍靠左」。
       改用 inline-block：既恢复「以后台富文本的对齐设置为准」，又让上下
       24px 间距继续生效（天生 inline 的 img 垂直 margin 无效，故不能简单
       删掉 display 声明）；vertical-align 抵消 inline-block 的基线间隙。 */
    display: inline-block;
    vertical-align: middle;
}
/* #endregion */


/* ====================================================
   公司新闻列表页 / 详情页（电脑端）— 按首页效果框架重做
   ----------------------------------------------------
   1. 全部规则限定在 .news-page / .article-page 作用域内，基础规则一行不动，
      避免波及共用 page-banner / article-detail / news-list 等类的兄弟页
      （Case / CaseShow / Contact / News / Products / Query / Service 等）。
   2. 视觉规格对齐 index.css：深蓝 --color-primary 底 + 金 --color-secondary 点缀；
      卡片 1px 细边框 + 8px 圆角、去重阴影（与首页 .news-card 一致）。
   3. 列表 4 列卡片（站长拍板：比首页 3 列多一列）；详情页白卡。
   4. 同时覆盖了基础规则里几个已删除的悬空变量（--primary / --mid-gray）。
   5. 移动端本文件不生效（走 inside_mob.css 旧规则），本轮未做移动端适配。
   6. 列表卡片精简：去类别角标/描述，图片锁 4:3（须 height:auto 覆盖基础定高），
      日期只到天，元信息（日期/阅读量）+ 图标；详见下方「公司新闻 - 列表（4 列卡片）」段。
   7. 列表分页按钮化：页码 <a> 加白底 + 1px 边框（原底色
      --light-gray 与列表区背景同色，等于看不见底）；省略号不加边框不加底色；
      详见下方「公司新闻 - 列表分页」段。
   8. 详情页：元信息与列表卡片统一（fa 图标 + 文案「阅读」），
      正文后新增「上一篇 / 下一篇」导航（两栏白底描边块，到边界输出 .disabled 占位不塌陷）；
      详见下方「公司新闻 - 详情页」段。
   ==================================================== */

/* #region 公司新闻 - 列表页 Banner */
.news-page .page-banner {
    height: 300px;
    justify-content: center;
    background: linear-gradient(rgba(14, 53, 96, 0.82), rgba(14, 53, 96, 0.82)),
                url(/static/images/huaying-hub.jpg) no-repeat center center;
    background-size: cover;
}

.news-page .page-banner h2 {
    font-size: var(--fs-hero);
    letter-spacing: 6px;
    margin-bottom: 0;
}

.news-page .page-banner .bar {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--color-secondary);
    margin: 18px auto 14px;
}

.news-page .page-banner p {
    font-size: var(--fs-tiny);
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}
/* #endregion */


/* #region 公司新闻 - 列表（4 列卡片） */
.news-page .news-list {
    padding: 60px 0 78px;
    background: var(--light-gray);
}

.news-page .news-wrap {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.news-page .news-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.news-page .news-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-light);
    box-shadow: 0 10px 26px rgba(20, 71, 126, 0.12);
}

/* 让链接撑满卡片，内容区可把元信息压到卡片底部 */
.news-page .news-card > a {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 图片锁定 4:3：object-fit:cover 居中裁切，异形图不变形、同排卡片高度一致。
   必须显式 height:auto 覆盖基础规则 .news-card img 的定高（220px）——否则 aspect-ratio 不生效（定高优先） */
.news-page .news-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    flex-shrink: 0;
}

.news-page .news-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 18px 16px;
}

.news-page .news-card h3 {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--font-color);
    line-height: var(--lh-normal);
    height: 50px;
    overflow: hidden;
    margin-bottom: 14px;
    transition: color 0.25s;
}

.news-page .news-card:hover h3 {
    color: var(--color-primary);
}

/* 元信息（日期 / 阅读量）贴卡片底部，细分割线与标题区分；原 news-tag / news-desc 规则已随卡片精简删除 */
.news-page .news-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    color: var(--font-color-light);
    font-size: var(--fs-tiny);
}

.news-page .news-info span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-page .news-info i {
    color: var(--color-primary-light);
    font-size: var(--fs-tiny);
}
/* #endregion */


/* #region 公司新闻 - 列表分页 */
/* 分页按钮化（覆盖 .news-page 与 .query 两处作用域，基础 .pagelist 规则一行未动）：
   1. 起因：列表区背景是 --light-gray(#F5F7FA)，而基础规则 .pagelist a 的底色同样是
      --light-gray 且无边框 → 页码 2/3/4/5 与背景融成一片，看着「太单」；
      上一页按钮之所以有实体感，是因为首/末页时它是 <span>，基础规则给 span 带了 1px 边框。
   2. 做法：给页码 <a> 与 <span> 统一成「白底 + 1px 细边框 + 6px 圆角 + 等宽 40px」的按钮，
      与站内卡片（白卡 + 细边框）同一套语言；当前页与 hover 用品牌深蓝反白。
      白底而非浅灰底的原因：浅灰底在浅灰背景上看不见（这就是原来「太单」的根因）。
   3. 省略号按站长要求不加边框、不加底色，也不占 40px 宽。
   4. ⚠ 特异性：基础 .pagelist a:hover / span.current / span.ellipsis 与本块选择器同为
      0-2-1，本块写在文件更靠后 → 必须在本块内把 hover / current / ellipsis 全部重写一遍，
      否则会本块的 background 静默覆盖（不报错、页面照开，只是 hover 失效/省略号长出边框）。
   5. 移动端本文件不生效（走 inside_mob.css 旧规则），本轮未做移动端适配。
   6. 2026-09-30 扩展：站内搜索结果页（.query .querylist 内的 .pagelist）复用同一套按钮化，
      使关键词查询列表的分页与公司新闻列表分页视觉完全一致；选择器扩展为同时命中
      .news-page .pagelist 与 .query .querylist .pagelist，不在 .query 段重复写样式（避免冗余）。
      查询列表分页 HTML 由 PageHelper 生成、落在 .query .querylist 内，特异性 0-3-1 高于基础 0-2-1，稳定生效。 */
.news-page .pagelist a,
.news-page .pagelist span,
.query .querylist .pagelist a,
.query .querylist .pagelist span {
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    line-height: 22px;      /* 40 - 上下 padding 8×2 - 边框 1×2 = 22，文字垂直居中 */
    padding: 8px 6px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--font-color-normal);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 页码 / 上一页 / 下一页 悬停：品牌深蓝反白 */
.news-page .pagelist a:hover,
.query .querylist .pagelist a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

/* 当前页：深蓝实心 + 同色边框 */
.news-page .pagelist span.current,
.query .querylist .pagelist span.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

/* 省略号：不加边框、不加底色、不占 40px 宽。
   ⚠ 颜色必须与页码一致（--font-color-normal），不能用 --font-color-light(#999)——
   那是禁用态 <span class='prev disabled'> 的灰，用在省略号上会让人误以为「点不动了」。
   注：省略号在 PageHelper 里本来就是 <span>（非链接），全站无 JS 绑定，从来不可点。 */
.news-page .pagelist span.ellipsis,
.query .querylist .pagelist span.ellipsis {
    min-width: 0;
    padding: 8px 5px;
    background: transparent;
    border-color: transparent;
    color: var(--font-color-normal);
}

/* 首/末页时的上一页、下一页禁用态：只补边框与圆角，底色与灰字沿用基础规则
   (.pagelist span.prev.disabled 的 #f5f5f5 —— 它特异性 0-3-1 高于本块 0-2-1，
   会稳定压过上面的 background: var(--white)，正是想要的「实心浅灰禁用块」观感)。
   故此处刻意不再重复声明 background / color / cursor，避免与基础规则打架。 */
/* #endregion */


/* #region 公司新闻 - 详情页 */
.article-page .page-banner {
    height: 300px;
    justify-content: center;
    background: linear-gradient(rgba(14, 53, 96, 0.82), rgba(14, 53, 96, 0.82)),
                url(/static/images/huaying-hub.jpg) no-repeat center center;
    background-size: cover;
}

.article-page .page-banner h2 {
    font-size: var(--fs-hero);
    letter-spacing: 6px;
    margin-bottom: 0;
}

.article-page .page-banner .bar {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--color-secondary);
    margin: 18px auto 14px;
}

.article-page .page-banner p {
    font-size: var(--fs-tiny);
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}

.article-page .article-detail {
    max-width: none;
    margin: 0;
    padding: 60px 0 78px;
    background: var(--light-gray);
}

.article-page .article-header {
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto 24px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    padding: 40px 48px;
    text-align: center;
}

.article-page .article-header h1 {
    font-size: var(--fs-h1);
    color: var(--color-primary);
    line-height: var(--lh-normal);
    margin-bottom: 18px;
}

.article-page .article-meta {
    color: var(--font-color-normal);
    font-size: var(--fs-tiny);
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* 元信息图标：与列表卡片 .news-info 同一套 fa 图标，观感统一 */
.article-page .article-meta i {
    color: var(--color-primary-light);
    font-size: var(--fs-tiny);
    margin-right: 4px;
}

.article-page .article-content {
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 56px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color);
}

.article-page .article-content p {
    margin-bottom: 20px;
}

/* 尊重后台富文本对齐设置：img 保持行内（inline-block），受父级 text-align 控制 */
.article-page .article-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 20px 0;
    display: inline-block;
    vertical-align: middle;
}

.article-page .article-content h2 {
    font-size: var(--fs-h3);
    color: var(--color-primary);
    margin: 40px 0 18px;
    padding-left: 12px;
    border-left: 4px solid var(--color-secondary);
}

.article-page .article-content h2:first-child {
    margin-top: 0;
}

/* 上一篇 / 下一篇：
   与 article-header / article-content 同族的白底描边块，两栏栅格对称；
   已到首/末篇时后端输出 .disabled 占位（同尺寸），布局不塌陷。
   注意：这里不写 a 的颜色继承之外的装饰，避免与基础 a 规则打架。 */
.article-page .article-nav {
    box-sizing: border-box;
    max-width: 960px;
    margin: 24px auto 0;
    display: grid;
    /* 与 .biz-detail-page 同源同修：原为 1fr 1fr，
       1fr 的隐含最小值是 auto，长标题（当时 nowrap）会把列撑破容器
       —— 实测容器 960px 却 scrollWidth 1299px、两栏不等宽、页面出横向滚动条。
       改用 minmax(0, 1fr) 锁死等分，两栏严格各占 50%。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.article-page .article-nav-item {
    box-sizing: border-box;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 24px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--font-color);
    text-decoration: none;
    transition: border-color 0.25s, background 0.25s, color 0.25s;
}

.article-page .article-nav-item .label {
    flex: none;
    color: var(--color-primary);
    font-weight: 600;
}

/* 原为 nowrap + ellipsis（长标题截断成一行）：
   一是把上下篇的内容信息砍掉，二是它的最小内容宽度会顶破栅格列。
   改为允许换行；min-width: 0 让 flex 子项能收缩到列宽内（默认 min-width: auto 不收缩）；
   overflow-wrap 兜住超长无空格串（英文名、编号）不横向溢出。 */
.article-page .article-nav-item .title {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 原为 justify-content: flex-end（「下一篇」整体右对齐）。
   改为左对齐：两块内部结构统一为「label 在左、标题紧随其后」，标题换行时两行左边缘
   与 label 对齐，扫读更顺；右对齐时换行会让标题向左摊开、label 悬在末行右侧，观感失衡。 */
.article-page .article-nav-item.next {
    justify-content: flex-start;
}

.article-page .article-nav-item:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-transparent);
}

.article-page .article-nav-item:hover .title {
    color: var(--color-primary);
}

/* 已到首/末篇：保留白底描边块（与可点项同尺寸），只弱化文字
   —— 此处用 --font-color-light 是正确的「不可点」语义色，不要改成 --font-color-normal */
.article-page .article-nav-item.disabled {
    color: var(--font-color-light);
    cursor: not-allowed;
}

.article-page .article-nav-item.disabled .label {
    color: var(--font-color-light);
}
/* #endregion */



/* ====================================================
   业务范围列表页 / 详情页（电脑端）— 按本站（工程勘察设计企业）特点重做
   ----------------------------------------------------
   1. 全部规则限定在 .biz-page / .biz-detail-page 作用域内，基础规则一行不动，
      避免波及共用 page-banner / sorts-list / sorts-filter / article-detail /
      article-content / news-list 等类的兄弟页（Case / CaseShow / Contact /
      News / Products / Query / Service / ShowNews 等）。
   2. 视觉规格对齐 index.css 与 .news-page / .article-page：深蓝 --color-primary 底
      + 金 --color-secondary 点缀；卡片 1px 细边框 + 8px 圆角、去重阴影。
   3. 类别导航为两级场景：本站顶级类别有「工程咨询」「工程设计」「业务范围」等，
      其中「工程设计」「业务范围」下挂子类且父级自身不挂产品。
      导航分两行输出 —— 一级行常显（白底描边主入口），二级行随当前分支展开
      （浅蓝底 + 主色字、字号更小，视觉上明确从属）。本文件只负责样式，
      哪一级高亮、展开哪一支，由 ProductUI.GetProductSortsList 在标记里输出。
   4. 列表卡片信息量少（业务范围无价格/库存/摘要），故只保留「封面 + 名称 + 所属领域」。
      封面统一收口到 .news-card-thumb 容器并锁 4:3 —— 有图出 <img>，
      无图出品牌色渐变块 + 名称上下左右居中，两种情况占位完全等价、同排高度一致。
   5. 详情页为「案例式」版式：封面主图 → 标题与元信息 → 正文 → 上一篇/下一篇。
      主图 .article-cover 与信息卡/正文同为 960px 白底描边块；无图时后端输出空串，
      容器高度与间距同时为 0，不留空洞。
   6. 移动端本文件不生效（走 inside_mob.css 旧规则），本轮未做移动端适配；
      标记结构与电脑端共用（不写设备分支），后续补移动端只需在 inside_mob.css
      追加同名的 .biz-page / .biz-detail-page 覆盖块。
   ==================================================== */

/* #region 业务范围 - 列表页 Banner */
.biz-page .page-banner {
    height: 300px;
    justify-content: center;
    background: linear-gradient(rgba(14, 53, 96, 0.82), rgba(14, 53, 96, 0.82)),
                url(/static/images/shifang-yancao.jpg) no-repeat center center;
    background-size: cover;
}

.biz-page .page-banner h2 {
    font-size: var(--fs-hero);
    letter-spacing: 6px;
    margin-bottom: 0;
}

.biz-page .page-banner .bar {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--color-secondary);
    margin: 18px auto 14px;
}

.biz-page .page-banner p {
    font-size: var(--fs-tiny);
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}
/* #endregion */


/* #region 业务范围 - 两级类别导航 */
.biz-page .sorts-list,
.biz-detail-page .sorts-list {
    margin-top: 0;
    padding: 26px 0;
    background: var(--white);
    border-bottom: 1px solid var(--color-border);
}

.biz-page .sorts-filter,
.biz-detail-page .sorts-filter {
    margin-bottom: 0;
}

.biz-page .sorts-filter-item,
.biz-detail-page .sorts-filter-item {
    padding: 9px 26px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    box-shadow: none;
    font-size: var(--fs-small);
    transition: 0.25s;
}

.biz-page .sorts-filter-item a,
.biz-detail-page .sorts-filter-item a {
    color: var(--font-color-normal);
}

.biz-page .sorts-filter-item:hover,
.biz-detail-page .sorts-filter-item:hover {
    border-color: var(--color-primary);
}

.biz-page .sorts-filter-item:hover a,
.biz-detail-page .sorts-filter-item:hover a {
    color: var(--color-primary);
}

.biz-page .sorts-filter-item.active,
.biz-detail-page .sorts-filter-item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.biz-page .sorts-filter-item.active a,
.biz-detail-page .sorts-filter-item.active a {
    color: var(--white);
}

/* 二级类别行：随当前一级分支展开。
   视觉上刻意与一级行拉开层次 —— 一级是「白底描边」（可点的主入口），
   二级是「浅蓝底 + 主色字、字号更小、圆角更方」，一眼能看出从属关系。
   一级行与二级行间距由 .sorts-subfilter 的 margin-top 提供（一级 margin-bottom 为 0，不相加） */
.biz-page .sorts-subfilter,
.biz-detail-page .sorts-subfilter {
    margin-top: 14px;
    gap: 12px;
}

.biz-page .sorts-subfilter .sorts-filter-item,
.biz-detail-page .sorts-subfilter .sorts-filter-item {
    padding: 6px 18px;
    background: var(--color-primary-transparent);
    border-color: transparent;
    border-radius: 6px;
    font-size: var(--fs-tiny);
}

.biz-page .sorts-subfilter .sorts-filter-item a,
.biz-detail-page .sorts-subfilter .sorts-filter-item a {
    color: var(--color-primary);
}

.biz-page .sorts-subfilter .sorts-filter-item:hover,
.biz-detail-page .sorts-subfilter .sorts-filter-item:hover {
    border-color: var(--color-primary);
}

.biz-page .sorts-subfilter .sorts-filter-item.active,
.biz-detail-page .sorts-subfilter .sorts-filter-item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.biz-page .sorts-subfilter .sorts-filter-item.active a,
.biz-detail-page .sorts-subfilter .sorts-filter-item.active a {
    color: var(--white);
}
/* #endregion */


/* #region 业务范围 - 列表（4 列卡片） */
.biz-page .news-list {
    padding: 60px 0 78px;
    background: var(--light-gray);
}

.biz-page .news-wrap {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.biz-page .news-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.biz-page .news-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-light);
    box-shadow: 0 10px 26px rgba(20, 71, 126, 0.12);
}

.biz-page .news-card > a {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 封面区 .news-card-thumb：有图无图都占同一块 4:3 的位置，网格里同排卡片高度天然对齐。
   4:3 锁在「容器」上（而非 img 上），<img> 只负责铺满 + 裁切，
   这样「有图」与「无图色块」两种内容的最终高度一致，不需要各写一套尺寸规则。 */
.biz-page .news-card-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--light-gray);
}

/* <img> 铺满封面区：object-fit:cover 居中裁切，异形图不变形。
   必须显式 height:100% 覆盖基础规则 .news-card img 的定高（220px）——否则容器锁高会被定高顶掉 */
.biz-page .news-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

/* 卡片浮起时封面轻微放大，给「可点」的手感（配合 .news-card:hover 的位移） */
.biz-page .news-card:hover .news-card-thumb img {
    transform: scale(1.06);
}

/* 无图封面：浅色底 + 主色字 + 金色短线，替换原先与内容无关的默认占位图。
   由「深蓝渐变底 + 反白字」改为「浅蓝底 + 主色字」——
   业务范围全年仅 1 条无图，深色块在整片浅色卡片墙里过于抢眼，
   反而把「这条数据缺图」放大成了视觉焦点；改浅底后与有图卡片的明度同档，观感一致。
   绝对定位铺满容器（容器已 position:relative），因此有图/无图的占位完全等价；
   文字用 clamp 限上下限，长名称靠 padding 与 line-height 自然换行，不做截断 */
.biz-page .news-card-thumb-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 18px 20px;
    text-align: center;
    background: linear-gradient(135deg, #F4F8FC 0%, #E4EDF8 100%);
    color: var(--color-primary);
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 600;
    line-height: var(--lh-normal);
    letter-spacing: 2px;
    /* 浅底与白卡之间补一圈极淡的主色内描边，避免色块边界糊掉 */
    box-shadow: inset 0 0 0 1px rgba(20, 71, 126, 0.08);
}

/* 文字下方的金色短线：浅底块里唯一的色彩落点，给「无图卡片」一个完整收口 */
.biz-page .news-card-thumb-text::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 14px;
    background: var(--color-secondary);
    opacity: 0.85;
}

.biz-page .news-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 18px 16px;
}

.biz-page .news-card h3 {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--font-color);
    line-height: var(--lh-normal);
    height: 50px;
    overflow: hidden;
    margin-bottom: 14px;
    transition: color 0.25s;
}

.biz-page .news-card:hover h3 {
    color: var(--color-primary);
}

/* 所属类别贴卡片底部，细分割线与标题区分（业务范围无日期/阅读量，故只出类别一项） */
.biz-page .news-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    color: var(--font-color-light);
    font-size: var(--fs-tiny);
}

.biz-page .news-info span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.biz-page .news-info i {
    color: var(--color-primary-light);
    font-size: var(--fs-tiny);
}
/* #endregion */


/* #region 业务范围 - 列表分页 */
/* 分页按钮化（仅本页 .biz-page 作用域，基础 .pagelist 规则一行未动）：
   与 .news-page 同一套做法与理由（浅灰底在浅灰背景上看不见，故改白底 + 1px 边框）。
   ⚠ 特异性：基础 .pagelist a:hover / span.current / span.ellipsis 与本块选择器同为 0-2-1，
   本块写在文件更靠后 → 必须在本块内把 hover / current / ellipsis 全部重写一遍。
   省略号颜色用 --font-color-normal（不可用 --font-color-light，那是禁用态语义色）。 */
.biz-page .pagelist a,
.biz-page .pagelist span {
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    line-height: 22px;
    padding: 8px 6px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--font-color-normal);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.biz-page .pagelist a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

.biz-page .pagelist span.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

.biz-page .pagelist span.ellipsis {
    min-width: 0;
    padding: 8px 5px;
    background: transparent;
    border-color: transparent;
    color: var(--font-color-normal);
}

/* 首/末页时上一页、下一页的禁用态：底色与灰字沿用基础规则
   (.pagelist span.prev.disabled 特异性 0-3-1 高于本块 0-2-1，会稳定压过上面的
   background:var(--white)，正是想要的「实心浅灰禁用块」观感)，故此处刻意不重复声明。 */
/* #endregion */


/* #region 业务范围 - 详情页 */
.biz-detail-page .page-banner {
    height: 300px;
    justify-content: center;
    background: linear-gradient(rgba(14, 53, 96, 0.82), rgba(14, 53, 96, 0.82)),
                url(/static/images/shifang-yancao.jpg) no-repeat center center;
    background-size: cover;
}

.biz-detail-page .page-banner h2 {
    font-size: var(--fs-hero);
    letter-spacing: 6px;
    margin-bottom: 0;
}

.biz-detail-page .page-banner .bar {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--color-secondary);
    margin: 18px auto 14px;
}

.biz-detail-page .page-banner p {
    font-size: var(--fs-tiny);
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}

.biz-detail-page .article-detail {
    max-width: none;
    margin: 0;
    padding: 60px 0 78px;
    background: var(--light-gray);
}

/* 封面主图：整幅主视觉，与下方信息卡 / 正文同宽同族（960px 白底描边块）。
   间距刻意放在 img 的 margin-bottom 上而非容器上 —— 无图时后端输出空串，
   容器高度与 margin 同时为 0，版式不会在导航与标题之间留出一段空洞。 */
.biz-detail-page .article-cover {
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto;
}

.biz-detail-page .article-cover img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--white);
}

.biz-detail-page .article-header {
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto 24px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    padding: 40px 48px;
    text-align: center;
}

.biz-detail-page .article-header h1 {
    font-size: var(--fs-h1);
    color: var(--color-primary);
    line-height: var(--lh-normal);
    /* 原 18px 是为与下方 .article-meta 拉开距离，
       meta 移除后标题成为 header 内唯一元素，归零让 40px 的上下内边距左右对称 */
    margin-bottom: 0;
}

/* 详情页正文按 17px 正文基准用 --fs-body（原 --fs-small 偏小） */
.biz-detail-page .article-content {
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 56px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--font-color);
}

.biz-detail-page .article-content p {
    margin-bottom: 20px;
}

/* 尊重后台富文本对齐设置：img 保持行内（inline-block），受父级 text-align 控制 */
.biz-detail-page .article-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 20px 0;
    display: inline-block;
    vertical-align: middle;
}

.biz-detail-page .article-content h2 {
    font-size: var(--fs-h3);
    color: var(--color-primary);
    margin: 40px 0 18px;
    padding-left: 12px;
    border-left: 4px solid var(--color-secondary);
}

.biz-detail-page .article-content h2:first-child {
    margin-top: 0;
}

/* 上一篇 / 下一篇：与 article-header / article-content 同族的白底描边块，两栏栅格对称；
   已到首/末篇时后端输出 .disabled 占位（同尺寸），布局不塌陷。 */
.biz-detail-page .article-nav {
    box-sizing: border-box;
    max-width: 960px;
    margin: 24px auto 0;
    display: grid;
    /* 原为 1fr 1fr：1fr 的隐含最小值是 auto，而 .title 当时是
       white-space: nowrap，其最小内容宽度 = 整行文字宽 → 长标题把列撑破容器，
       实测容器 960px 却 scrollWidth 1299px（两栏 620 / 663 不等宽，右栏右边界 1608px
       冲出视口、产生横向滚动条）。改用 minmax(0, 1fr) 锁死等分，两栏严格各占 50%。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.biz-detail-page .article-nav-item {
    box-sizing: border-box;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 24px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--font-color);
    text-decoration: none;
    transition: border-color 0.25s, background 0.25s, color 0.25s;
}

.biz-detail-page .article-nav-item .label {
    flex: none;
    color: var(--color-primary);
    font-weight: 600;
}

/* 原为 nowrap + ellipsis（长标题截断成一行）：
   一是把「上一篇/下一篇」的内容信息砍掉，二是它的最小内容宽度会顶破栅格列。
   改为允许换行；min-width: 0 让 flex 子项能真正收缩到列宽内（flex 子项默认 min-width: auto 不收缩）；
   overflow-wrap 兜住超长无空格串（型号、英文名）不横向溢出。 */
.biz-detail-page .article-nav-item .title {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 与 .article-page 同源同修：原为 flex-end（「下一篇」右对齐），
   改左对齐，让两块内部结构统一为「label 在左、标题紧随其后」，标题换行时左边缘对齐更易扫读。 */
.biz-detail-page .article-nav-item.next {
    justify-content: flex-start;
}

.biz-detail-page .article-nav-item:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-transparent);
}

.biz-detail-page .article-nav-item:hover .title {
    color: var(--color-primary);
}

/* 已到首/末篇：保留白底描边块（与可点项同尺寸），只弱化文字
   —— 此处用 --font-color-light 是正确的「不可点」语义色，不要改成 --font-color-normal */
.biz-detail-page .article-nav-item.disabled {
    color: var(--font-color-light);
    cursor: not-allowed;
}

.biz-detail-page .article-nav-item.disabled .label {
    color: var(--font-color-light);
}
/* #endregion */


/* ====================================================
   企业荣誉与科技创新栏目页（电脑端）
   ----------------------------------------------------
   新增（客户《公司网页调整说明》第五项）
   1. 全部规则限定在 .honor-page 作用域内，基础规则一行不动，避免波及共用
      .page-banner / .container 等类的兄弟页（About / Case / News / Products …）。
   2. 版式参照「附件13-1：网页排版」：Banner → 副标题 + 引言 + 数据带
      （200余项 / 70余项 / 11项）→ 四行「左分类名 + 右汇总块」。前三块的
      证书图为出图阶段做好的拼叠 + 模糊图（客户要求），页面侧只展示；
      第四块为国家及行业标准主/参编清单表格。客户注明「美观上可自由调整」，
      故具体尺寸/间距按本站既有内页规格取值。
   3. 视觉规格对齐 inside.css 既有内页改造块：白卡 + 1px --color-border 细边框 +
      8px 圆角、去重阴影；深蓝 --color-primary 主色 + 金 --color-secondary 点缀。
   4. .sec-head / .bar 两个类的基础规则只存在于 index.css（首页专用，内页不加载），
      故本页在 .honor-page 作用域内自带一份，不改也不依赖首页类。
   5. 移动端本文件不生效（走 inside_mob.css 旧规则），本轮未做移动端适配；
      标记结构与电脑端共用（不写设备分支），后续补移动端只需在 inside_mob.css
      追加同名的 .honor-page 覆盖块。
   ==================================================== */

/* #region 企业荣誉与科技创新 - Banner */
.honor-page .page-banner {
    height: 300px;
    justify-content: center;
    background: linear-gradient(rgba(14, 53, 96, 0.82), rgba(14, 53, 96, 0.82)),
                url(/static/images/shifang-yancao.jpg) no-repeat center center;
    background-size: cover;
}

.honor-page .page-banner h2 {
    font-size: var(--fs-hero);
    letter-spacing: 6px;
    margin-bottom: 0;
}

.honor-page .page-banner .bar {
    display: block;
    width: 46px;
    height: 3px;
    background: var(--color-secondary);
    margin: 18px auto 14px;
}

.honor-page .page-banner p {
    font-size: var(--fs-tiny);
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}
/* #endregion */


/* #region 企业荣誉与科技创新 - 副标题 / 引言 / 数据带 */
.honor-page .honor-intro {
    padding: 64px 0 60px;
    background: var(--white);
}

/* 页面级自带一份 sec-head 规格（首页类内页不加载，见文件头第 4 条） */
.honor-page .honor-intro .sec-head {
    text-align: center;
    margin-bottom: 26px;
}

.honor-page .honor-intro .sec-head h2 {
    font-size: var(--fs-h1);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-primary);
}

.honor-page .honor-intro .sec-head .bar {
    width: 46px;
    height: 3px;
    background: var(--color-secondary);
    margin: 18px auto 0;
}

.honor-page .honor-lead {
    max-width: 1040px;
    margin: 0 auto;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
    text-align: justify;
    text-indent: 2em;
}

.honor-page .honor-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 46px;
    background: var(--color-primary);
    border-radius: 8px;
    overflow: hidden;
}

.honor-page .honor-stats .hs {
    padding: 32px 0 30px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.honor-page .honor-stats .hs:first-child {
    border-left: none;
}

.honor-page .honor-stats .hs b {
    display: block;
    font-size: var(--fs-hero);
    font-weight: 600;
    line-height: var(--lh-reset);
    letter-spacing: 1px;
    color: var(--white);
}

.honor-page .honor-stats .hs b small {
    font-size: var(--fs-body);
    font-weight: 400;
    margin-left: 2px;
    letter-spacing: 1px;
    color: var(--color-secondary);
}

.honor-page .honor-stats .hs span {
    display: block;
    margin-top: 14px;
    font-size: var(--fs-small);
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.78);
}
/* #endregion */


/* #region 企业荣誉与科技创新 - 四个板块（左分类名 + 右汇总块） */
.honor-page .honor-rows {
    padding: 64px 0 84px;
    background: var(--light-gray);
}

.honor-page .honor-row {
    display: grid;
    /* 列宽由「左 240 + 右 1fr」→「1fr 1fr」
       → 现改为 2fr 3fr（即左 40% / 右 60%）。黄站长要求左侧文字占 40%、右侧图/表
       占 60%；用 fr 而非百分比，网格会自动扣除 gap(32px) 后按比例分配，不会溢出。 */
    grid-template-columns: 2fr 3fr;
    gap: 32px;
    align-items: center;
    padding: 32px 44px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.honor-page .honor-row + .honor-row {
    margin-top: 24px;
}

.honor-page .honor-cat {
    text-align: center;
    /* 去掉左侧分类与右侧汇总块之间的竖线分隔
       （border-right 1px），黄站长要求去掉这条竖线。 */
}

.honor-page .honor-cat h3 {
    /* 左侧分类标题 1.375rem(22px) → 1.625rem(26px)，
       黄站长要求左列文字稍大一些。 */
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: var(--lh-normal);
    letter-spacing: 2px;
    color: var(--color-primary);
}

.honor-page .honor-cat .en {
    display: block;
    margin-top: 10px;
    font-size: var(--fs-tiny);
    letter-spacing: 1px;
    color: var(--font-color-light);
}

.honor-page .honor-block {
    /* grid 子项默认 min-width:auto，表格会被内容顶宽而撑破右列，故显式归零 */
    min-width: 0;
}

/* 证书图片汇总：图片本身已是「拼叠 + 模糊」的成品图（出图时已按各分类的证书张数
   定好画布高宽比，三张互不相同），故此处只做框，不锁 aspect-ratio —— 一旦锁比例
   再用 object-fit:cover 裁切，就会把边缘的证书切掉。宽度撑满右列、高度随图自适应。
   去掉图片外边框（border 删除），黄站长要求图片外不要边框；
   下方说明文字由「图片右下角浮层」改为「图片下方的普通块、水平居中」。 */
.honor-page .honor-pic {
    position: relative;
    /* 仅保留圆角裁切，不加任何外边框 */
    border-radius: 6px;
    overflow: hidden;
    background: var(--white);
}

.honor-page .honor-pic img {
    display: block;
    width: 100%;
    height: auto;
}

.honor-page .honor-pic .honor-mask-note {
    /* 改为图片下方的普通流块、水平居中（不再浮在右下角） */
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: var(--fs-tiny);
    letter-spacing: 1px;
    color: var(--font-color-light);
}
/* #endregion */


/* #region 企业荣誉与科技创新 - 国家及行业标准主/参编清单 */
.honor-page .honor-table {
    width: 100%;
    border-collapse: collapse;
    /* 左右改 1fr 1fr 后本表可用宽只剩 540（原 840），
       故字号 13→12、padding 收紧，让 7 列挤得下：
       table-layout:fixed 让下方各列 width 真正生效 —— auto 布局下浏览器按内容
       重新分配，序号列会被撑到 90px、名称列反被挤窄。
       各短列给了固定宽，剩下的全归「标准名称」列（约 166px / 14 字），
       两行排得下最长的那条（22 字）。 */
    table-layout: fixed;
    font-size: var(--fs-tiny);
    color: var(--font-color);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.honor-page .honor-table th {
    padding: 9px 4px;
    background: var(--color-primary);
    color: var(--white);
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
}

.honor-page .honor-table td {
    padding: 8px 4px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.honor-page .honor-table tbody tr:nth-child(even) {
    background: var(--light-gray);
}

.honor-page .honor-table tbody tr:last-child td {
    border-bottom: none;
}

.honor-page .honor-table .c-name {
    text-align: left;
    padding-left: 8px;
    line-height: var(--lh-normal);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 半宽（540）下改为百分比定宽，7 列合计 100%，结果确定：
   序号 7% / 名称 26% / 性质 10% / 角色 11% / 规范号 18% / 发布 14% / 实施 14%。
   此前用 px 定宽时，7 列之和小于表宽，fixed 布局会把富余宽度回摊给各列，
   导致序号列被撑宽、名称列反被挤窄 —— 百分比方案不会出现这种回摊。
   名称列约 140px（12px 字号 ≈ 11 字/行），最长的一条 22 字分两行，可接受。 */
.honor-page .honor-table .c-no { width: 7%; }
.honor-page .honor-table .c-name { width: 26%; }
.honor-page .honor-table .c-kind { width: 10%; }
.honor-page .honor-table .c-role { width: 11%; }
.honor-page .honor-table .c-code { width: 18%; }
.honor-page .honor-table .c-date { width: 14%; }

/* 规范号 / 发布日期 / 实施日期三列必须不折行。类只挂在 thead 的 th 上（数据行的 td
   没有类，宽度靠 thead 首行推导），故数据行的 nowrap 只能按列序给。 */
.honor-page .honor-table td:nth-child(5),
.honor-page .honor-table td:nth-child(6),
.honor-page .honor-table td:nth-child(7) {
    white-space: nowrap;
    font-size: var(--fs-tiny);
}
/* #endregion */

/* ====================================================
   #region 吉塑新材内页样式（三色品牌）
   追加。
   5 个核心内页（关于我们/产品列表/产品详情/新闻列表/新闻详情）
     按首页三色品牌（蓝#28A0E0 + 绿#8FAE55 + 橙#C8955A）重新设计，与首页效果一致。
     使用新的页面级修饰类（giso-*-page），避免波及未改造的兄弟页。
   ==================================================== */

/* ---------- 通用容器宽度（与导航 .nav-in / .wrap 对齐） ---------- */
.giso-about-page .container,
.giso-products-page .container,
.giso-product-detail-page .container,
.giso-news-page .container,
.giso-article-page .container {
    max-width: var(--max);
    width: auto;
    padding: 0 32px;
}

/* ---------- 通用内页 Banner ---------- */
.giso-banner {
    height: 280px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.giso-banner h2 {
    font-size: var(--fs-h1);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 2px;
}
.giso-banner .bar {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--color-secondary);
    margin: 0 auto 12px;
    border-radius: 2px;
}
.giso-banner p {
    font-size: var(--fs-body);
    opacity: 0.85;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* ---------- 通用 Section 间距 ---------- */
.giso-section {
    padding: 70px 0;
}
.giso-section-title {
    text-align: center;
    margin-bottom: 50px;
}
.giso-section-title h3 {
    font-size: var(--fs-h1);
    color: var(--color-primary-dark);
    margin-bottom: 10px;
}
.giso-section-title .sub {
    font-size: var(--fs-small);
    color: var(--font-color-normal);
    letter-spacing: 3px;
    text-transform: uppercase;
}
.giso-section-title .bar {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--color-secondary);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* ---------- 通用卡片 ---------- */
.giso-card {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.giso-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(18, 43, 62, 0.1);
}

/* ---------- 通用网格 ---------- */
.giso-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.giso-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.giso-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ====================================================
   关于我们页 (.giso-about-page)
   ==================================================== */

/* 公司简介区 */
.giso-about-page .about-intro {
    background: var(--white);
    padding: 70px 0;
}
.giso-about-page .about-intro-wrap {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 50px;
    align-items: center;
}
.giso-about-page .about-intro-text h3 {
    font-size: var(--fs-h1);
    color: var(--color-primary-dark);
    margin-bottom: 20px;
}
.giso-about-page .about-intro-text h3 span {
    color: var(--color-primary);
}
.giso-about-page .about-intro-text p {
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
    margin-bottom: 15px;
}
.giso-about-page .about-intro-img {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(18, 43, 62, 0.08);
}
.giso-about-page .about-intro-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* 发展历程时间轴 */
.giso-about-page .about-timeline {
    background: var(--light-gray);
    padding: 70px 0;
}
.giso-about-page .timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 40px;
}
.giso-about-page .timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-accent-green));
}
.giso-about-page .timeline-item {
    position: relative;
    padding: 0 0 40px 40px;
}
.giso-about-page .timeline-item:last-child {
    padding-bottom: 0;
}
.giso-about-page .timeline-dot {
    position: absolute;
    left: -40px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--color-primary);
}
.giso-about-page .timeline-item.highlight .timeline-dot {
    background: var(--color-secondary);
    box-shadow: 0 0 0 2px var(--color-secondary);
}
.giso-about-page .timeline-year {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 6px;
}
.giso-about-page .timeline-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--font-color-title);
    margin-bottom: 8px;
}
.giso-about-page .timeline-desc {
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

/* 愿景价值观 */
.giso-about-page .about-values {
    background: var(--white);
    padding: 70px 0;
}
.giso-about-page .value-card {
    text-align: center;
    padding: 40px 24px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.giso-about-page .value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(18, 43, 62, 0.1);
}
.giso-about-page .value-card .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h1);
    color: var(--white);
}
.giso-about-page .value-card:nth-child(1) .icon { background: var(--color-primary); }
.giso-about-page .value-card:nth-child(2) .icon { background: var(--color-accent-green); }
.giso-about-page .value-card:nth-child(3) .icon { background: var(--color-secondary); }
.giso-about-page .value-card:nth-child(4) .icon { background: var(--color-series-ht); }
.giso-about-page .value-card h4 {
    font-size: var(--fs-h3);
    color: var(--font-color-title);
    margin-bottom: 10px;
}
.giso-about-page .value-card p {
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--font-color-normal);
}

/* 硬件设备 */
.giso-about-page .about-equip {
    background: var(--light-gray);
    padding: 70px 0;
}
.giso-about-page .equip-card {
    text-align: center;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.giso-about-page .equip-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.giso-about-page .equip-card h4 {
    font-size: var(--fs-small);
    padding: 16px;
    color: var(--font-color-title);
}

/* 资质认证 */
.giso-about-page .about-cert {
    background: var(--white);
    padding: 70px 0;
}
.giso-about-page .cert-wall {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
.giso-about-page .cert-item {
    text-align: center;
    padding: 30px 16px;
    background: var(--light-gray);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.giso-about-page .cert-item i {
    font-size: var(--fs-h1);
    color: var(--color-primary);
    margin-bottom: 12px;
    display: block;
}
.giso-about-page .cert-item span {
    font-size: var(--fs-tiny);
    color: var(--font-color-title);
    font-weight: 500;
}

/* ====================================================
   关于我们页 —— 2026-10-10 改版追加
   「关于我们」改为「类别 + 三栏目」结构后新增区块。
   页面改为 Banner 下二级导航 + 三组按栏目切换的区块，
     新增 二级导航 / 富文本正文 / 核心数据条 / 企业实力 / 服务流程 / 图片卡片；
     图片卡片（photo-card）统一取代原 equip-card / cert-wall 两种旧版式。
   【图片口径】相册图取自客户资料，多为「白底产品图 / 白底证书扫描件」，
     故一律 object-fit:contain 不裁切，配白底与卡片融合；
     不用 cover，避免机器与证书被切边（服务流程卡顶边复用首页三色色带 --color-tri）。
   ==================================================== */

/* ---------- Banner 下二级导航（胶囊标签，当前栏目高亮） ---------- */
.giso-about-page .about-subnav {
    background: var(--light-gray);
    padding: 26px 0;
    border-bottom: 1px solid var(--color-border);
}
.giso-about-page .about-subnav .filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.giso-about-page .about-subnav .filter-tags a {
    display: inline-block;
    padding: 8px 26px;
    border-radius: 22px;
    font-size: var(--fs-small);
    color: var(--font-color-normal);
    background: var(--white);
    border: 1px solid var(--color-border);
    transition: all 0.25s ease;
}
.giso-about-page .about-subnav .filter-tags a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.giso-about-page .about-subnav .filter-tags a.on {
    background: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary);
}

/* ---------- 富文本正文（后台「公司简介」等） ---------- */
.giso-about-page .about-rich {
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}
.giso-about-page .about-rich p {
    margin-bottom: 14px;
}
.giso-about-page .about-rich p:last-child {
    margin-bottom: 0;
}
.giso-about-page .about-rich h3,
.giso-about-page .about-rich h4 {
    color: var(--font-color-title);
    margin: 18px 0 10px;
}
.giso-about-page .about-rich h3 {
    font-size: var(--fs-h3);
}
.giso-about-page .about-rich h4 {
    font-size: var(--fs-body);
}
.giso-about-page .about-rich ul,
.giso-about-page .about-rich ol {
    margin: 0 0 14px;
    padding-left: 22px;
}
.giso-about-page .about-rich li {
    margin-bottom: 6px;
}
.giso-about-page .about-rich img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 10px 0;
}
.giso-about-page .about-rich a {
    color: var(--color-primary);
}
.giso-about-page .about-rich strong,
.giso-about-page .about-rich b {
    color: var(--font-color-title);
}
/* 资质证书页说明文字：居中、收窄
   内容改为「文字说明 + 证书合成大图」由后台富文本框直出（黄站长指令），
   max-width 由 900px 放宽到 1080px。900px 是为纯文字行宽设定的，
   而富文本框现含一张 1400px 宽的证书合成图，900px 会把整图缩到 64%、图内证书字号过小；
   1080px 下文字仍居中可读，图片也能完整展现（图片样式沿用 .about-rich img）。 */
.giso-about-page .cert-note {
    max-width: 1080px;
    margin: 0 auto 36px;
    text-align: center;
    font-size: var(--fs-small);
}

/* ---------- 资质证书页 · IATF 16949 双证区块 ----------
   位于原富文本「6 证合成图」之上：IATF 是汽车客户验厂必查的主证，排最前。
   中英两版并排需要两列栅格，UEditor 富文本框做不出来，故由本页模板承载；
   图可点，target=_blank 开原尺寸，供采购放大核对注册号（不引第三方灯箱库）。
   换证时只需替换 /static/images/home/cert/ 下的两张图与 .cert-iatf-meta 里的日期。 ---------- */
.giso-about-page .cert-iatf {
    max-width: 1080px;
    margin: 0 auto 54px;
}
.giso-about-page .cert-iatf-head h4 {
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--font-color-title);
    line-height: var(--lh-tight);
}
.giso-about-page .cert-iatf-head h4 span {
    margin-left: 8px;
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--font-color-normal);
}
.giso-about-page .cert-iatf-head .en {
    margin-top: 6px;
    font-size: var(--fs-tiny);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--font-color-light);
}
.giso-about-page .cert-iatf-lead {
    margin: 18px 0 26px;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}
.giso-about-page .cert-iatf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.giso-about-page .cert-iatf-item {
    margin: 0;
}
.giso-about-page .cert-iatf-item a {
    display: block;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: .22s;
}
.giso-about-page .cert-iatf-item a:hover {
    border-color: var(--color-border-accent);
    box-shadow: 0 14px 34px var(--shadow-ink-10);
}
.giso-about-page .cert-iatf-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}
.giso-about-page .cert-iatf-item figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: var(--fs-tiny);
    color: var(--font-color-light);
}
.giso-about-page .cert-iatf-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 28px;
    margin: 26px 0 0;
    padding: 22px 24px;
    list-style: none;
    background: var(--color-bg-muted);
    border-radius: var(--rad);
}
.giso-about-page .cert-iatf-meta li {
    display: flex;
    gap: 12px;
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
}
.giso-about-page .cert-iatf-meta span {
    flex: 0 0 84px;
    color: var(--font-color-light);
}
.giso-about-page .cert-iatf-meta b {
    font-weight: 600;
    color: var(--font-color-title);
}
.giso-about-page .cert-iatf-owner {
    margin-top: 16px;
    font-size: var(--fs-tiny);
    line-height: var(--lh-loose);
    color: var(--font-color-light);
}

/* ---------- 栏目不存在时的空态 ---------- */
.giso-about-page .about-empty {
    padding: 90px 0;
    text-align: center;
}
.giso-about-page .about-empty p {
    font-size: var(--fs-small);
    color: var(--font-color-normal);
}

/* 原「核心数据条」样式段（.about-stat-sec / .about-stats /
   .about-stats .stat / .stat + .stat::before / .stat b / .stat span）已删除。
   /about 页尾核心数据模块按黄站长指令移除（About.aspx 的 <section class="about-stat-sec">
   与 About.aspx.cs 的 BuildStat() 同步删除），标记层已无挂载点，留着即死代码。
   全站仅 About.aspx 使用过这组类，删除不影响其他页面（首页数据条在 index.css，作用域不同）。
   如需恢复该模块：还原 About.aspx 段落 + statHtml 字段 + BuildStat()，并把本段样式贴回。 */

/* ---------- 企业实力（图片拼版 + 要点清单） ---------- */
.giso-about-page .about-strength {
    background: var(--white);
    padding: 70px 0;
}
.giso-about-page .about-cap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: start;
}
/* 企业实力左栏由「1 大 + 2 小」拼版改为单张成品图（黄站长指令）：
   原 .about-cap-imgs / .about-cap-imgs figure / figure:first-child / img 四条拼版规则已删除，
   换成下面的 .about-cap-photo 单图规则。① 三张 AI 占位图与本页下方
   「研发与工艺设备」相册实拍重复且质感差；② 拼版整栏画框 577×414 = 1.39:1，与所用成品图
   1.48:1 接近，单图几乎不裁构图，而原大图位 577×230 = 2.5:1 会把画面裁掉近半。
   高度取 414px（= 原 230 + 14 + 170），保持与右栏要点清单的原有高度节奏；cover 兜底，
   即使日后换图比例不同也不会变形。原三张占位图文件（line-melt / lab-2 / warehouse.jpg）保留未删。 */
.giso-about-page .about-cap-photo {
    margin: 0;
    height: 414px;
    background: var(--light-gray);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
.giso-about-page .about-cap-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.giso-about-page .about-cap-lead {
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
    margin-bottom: 26px;
}
.giso-about-page .about-cap-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.giso-about-page .about-cap-item {
    padding-left: 18px;
    border-left: 3px solid var(--color-primary);
}
.giso-about-page .about-cap-item:nth-child(2) {
    border-left-color: var(--color-accent-green);
}
.giso-about-page .about-cap-item:nth-child(3) {
    border-left-color: var(--color-secondary);
}
.giso-about-page .about-cap-item h4 {
    font-size: var(--fs-body);
    color: var(--font-color-title);
    margin-bottom: 6px;
}
.giso-about-page .about-cap-item h4 b {
    font-size: var(--fs-h3);
    color: var(--color-primary);
    margin-right: 4px;
}
.giso-about-page .about-cap-item p {
    font-size: var(--fs-tiny);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

/* ---------- 图片卡片（工厂设备 / 资质证书共用） ---------- */
.giso-about-page .photo-grid {
    align-items: stretch;
}
.giso-about-page .photo-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.giso-about-page .photo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(18, 43, 62, 0.1);
}
.giso-about-page .photo-card .thumb {
    height: 230px;
    padding: 12px;
    background: var(--white);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.giso-about-page .photo-card .thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}
.giso-about-page .photo-card:hover .thumb img {
    transform: scale(1.04);
}
.giso-about-page .photo-card figcaption {
    padding: 16px 18px 18px;
}
.giso-about-page .photo-card figcaption h4 {
    font-size: var(--fs-small);
    color: var(--font-color-title);
    margin-bottom: 6px;
}
.giso-about-page .photo-card figcaption p {
    font-size: var(--fs-tiny);
    line-height: var(--lh-normal);
    color: var(--font-color-normal);
    margin: 0;
}
/* 证书是竖版扫描件，给更高的画框才放得下 */
.giso-about-page .about-cert .photo-card .thumb {
    height: 330px;
}

/* ---------- 服务流程（5 步，卡顶复用首页三色色带） ---------- */
.giso-about-page .about-flow {
    background: var(--light-gray);
    padding: 70px 0 80px;
}
.giso-about-page .flow-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.giso-about-page .flow-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 26px 20px 22px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.giso-about-page .flow-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    border-radius: 8px 8px 0 0;
    background: var(--color-tri);
}
.giso-about-page .flow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(18, 43, 62, 0.1);
}
.giso-about-page .flow-card .no {
    display: inline-block;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-reset);
    color: var(--color-primary);
    opacity: 0.28;
    margin-bottom: 12px;
}
.giso-about-page .flow-card h4 {
    font-size: var(--fs-body);
    color: var(--font-color-title);
    margin-bottom: 8px;
}
.giso-about-page .flow-card p {
    font-size: var(--fs-tiny);
    line-height: var(--lh-normal);
    color: var(--font-color-normal);
}

/* ====================================================
   联系我们页（复用 .giso-about-page 容器）
   ★ 与「关于我们」页同一套版式令牌，只加本页专属区块。
   ==================================================== */

/* ---------- 联系方式卡片（4 张，卡顶走首页三色口径） ---------- */
.giso-about-page .contact-sec {
    background: var(--white);
    padding: 70px 0;
}
.giso-about-page .contact-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.giso-about-page .contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 30px 24px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.giso-about-page .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(18, 43, 62, 0.1);
    border-color: var(--color-primary);
}
.giso-about-page .contact-card .ico {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}
/* 四张卡按首页「三色 + 超高温」口径轮色，与 .value-card 同一套观感 */
.giso-about-page .contact-card:nth-child(1) .ico { background: var(--color-primary); }
.giso-about-page .contact-card:nth-child(2) .ico { background: var(--color-accent-green); }
.giso-about-page .contact-card:nth-child(3) .ico { background: var(--color-secondary); }
.giso-about-page .contact-card:nth-child(4) .ico { background: var(--color-series-ht); }

.giso-about-page .contact-card .txt {
    min-width: 0;
}
.giso-about-page .contact-card .txt h4 {
    font-size: var(--fs-body);
    color: var(--font-color-title);
    margin-bottom: 8px;
}
.giso-about-page .contact-card .txt p {
    font-size: var(--fs-tiny);
    line-height: var(--lh-normal);
    color: var(--font-color-normal);
    word-break: break-all;
}
.giso-about-page .contact-card .txt p + p {
    margin-top: 4px;
}
.giso-about-page .contact-card .txt a {
    color: var(--font-color-normal);
    transition: color 0.2s;
}
.giso-about-page .contact-card .txt a:hover {
    color: var(--color-primary);
}

/* ---------- 后台正文（引导语与业务说明） ---------- */
.giso-about-page .contact-intro {
    background: var(--light-gray);
    padding: 70px 0;
}
.giso-about-page .contact-rich {
    max-width: 900px;
    margin: 0 auto;
}

/* 后台栏目缺失时的提示 */
.giso-about-page .contact-empty {
    text-align: center;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

/* ====================================================
   应用领域页（一行业一页，复用 .giso-about-page 容器）
   新增。
   why：行业页的「推荐材料」标签行；关键词来自栏目 Keywords，
     下一步用于按关键词查询产品模块，当前仅作展示。
   其余区块（Banner / 二级导航 / 图文介绍 / 图片网格）全部复用
     「关于我们页」既有样式，本页不另造一套皮。
   ==================================================== */
.giso-about-page .app-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.giso-about-page .app-chip {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 26px;
    border-radius: 100px;
    background: var(--white);
    border: 1px solid var(--color-border);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--font-color-title);
    transition: .22s;
}

.giso-about-page .app-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* ====================================================
   产品模块（列表页 .giso-products-page / 详情页 .giso-product-detail-page）
   整体重写。
   产品模块由建站期测试数据改为接后台真实数据（3 系列 + 15 大类 + 15 代表产品），
     旧版式的类名（.prod-filter / .prod-grid / .prod-card / .prod-thumb / .prod-info / .prod-tags /
     .pd-params / .pd-apps / .pd-spec / .spec-table / .app-tags）已无任何页面引用，
     故整段替换为新版式类名，避免新旧两套死样式并存、后续维护时误判。
   页面作用域仍沿用 giso-*-page 修饰类，不波及未改造的兄弟页。
   ==================================================== */

/* ---------- 共用：关键词标签 chips（列表页类别简介 / 详情页标签共用） ---------- */
.giso-products-page .p-tags,
.giso-product-detail-page .p-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.giso-products-page .p-tags span,
.giso-product-detail-page .p-tags a,
.giso-product-detail-page .p-tags span {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--white);
    font-size: var(--fs-tiny);
    line-height: var(--lh-normal);
    color: var(--font-color-normal);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.giso-product-detail-page .p-tags a:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ====================================================
   产品列表页 (.giso-products-page)
   ==================================================== */

/* ---------- 分类总览矩阵（版式对齐《产品分类-客户核对稿》01） ---------- */
.giso-products-page .p-overview {
    /* 底部 padding 由 0 改 30px：给下方筛选条首行的「系列」行留出间距。
       产品中心首页的筛选条紧贴上方分类总览，「系列」行显得局促（黄站长反馈）；
         用本区块（分类总览）的 padding-bottom 实现，只作用于「输出了分类总览」的未筛选首页；
         筛选条在系列页（/products/{系列}）同样存在，而系列页不输出分类总览，
         故系列页的间距与版式完全不变（仍为定位条 → 筛选条，贴紧）。 */
    padding: 70px 0 30px;
    background: var(--white);
}

.giso-products-page .pmx {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.giso-products-page .pmx-row {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.giso-products-page .pmx-row:hover {
    box-shadow: 0 16px 38px rgba(18, 43, 62, 0.08);
    transform: translateY(-2px);
}

/* 左侧系列键 */
.giso-products-page .pmx-key {
    display: block;
    padding: 26px 24px 26px 28px;
    border-left: 5px solid var(--color-primary);
    background: var(--light-gray);
}

.giso-products-page .pmx-row:nth-child(1) .pmx-key {
    border-left-color: var(--color-series-gen);
}

.giso-products-page .pmx-row:nth-child(2) .pmx-key {
    border-left-color: var(--color-series-std);
}

.giso-products-page .pmx-row:nth-child(3) .pmx-key {
    border-left-color: var(--color-series-ht);
}

.giso-products-page .pmx-key b {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--font-color-title);
}

.giso-products-page .pmx-key span {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-tiny);
    font-weight: 600;
    letter-spacing: 1.4px;
    color: var(--font-color-light);
}

.giso-products-page .pmx-key i {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--white);
    font-size: var(--fs-tiny);
    font-style: normal;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.giso-products-page .pmx-key em {
    display: block;
    margin-top: 14px;
    font-size: var(--fs-tiny);
    font-style: normal;
    font-weight: 700;
    color: var(--color-primary);
}

/* 右侧大类卡 */
.giso-products-page .pmx-cats {
    /* 列数由写死 5 列改为自适应。
       客户《分类.xlsx》定稿后大类增至 19（通用 6 / 工程塑料 6 / 超高温 7），
         写死 5 列会让第 6、7 个大类掉到第二行、且左侧空出一格，浪费版面；
         auto-fit + minmax(125px) 会按可用宽度自动排满一行：6 个元素成 6 列、7 个元素成 7 列
         （auto-fit 会塌缩空轨道，不会留下孤行卡片）。
       窄屏（≤1100px / ≤640px）仍由文件末尾的 @media 断点降级为 3 列 / 2 列。 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}

.giso-products-page .pmx-cat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 18px;
    border-left: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
}

.giso-products-page .pmx-cat:first-child {
    border-left: 0;
}

.giso-products-page .pmx-cat:hover {
    background: var(--color-primary-light);
}

.giso-products-page .pmx-cat b {
    font-size: var(--fs-body);
    font-weight: 800;
    color: var(--font-color-title);
}

.giso-products-page .pmx-cat span {
    font-size: var(--fs-tiny);
    line-height: var(--lh-normal);
    color: var(--font-color-light);
}

/* ---------- 两级类别筛选（系列行 + 大类行） ---------- */
.giso-products-page .p-filter {
    /* margin-top 60→0：黄站长反馈筛选条与定位条之间空隙太大，
       筛选条应紧贴定位条（间距交给自身 24px 上下 padding + 定位条自有下边距）。
       同日再改：贴紧后 border-top 与定位条的 border-bottom
       叠成 2px 双线，去掉 border-top 只保留定位条那条（下方 border-bottom 保留，
       与下一区块仍需分隔）。 */
    margin-top: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--light-gray);
}

.giso-products-page .pfilter {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.giso-products-page .pfilter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.giso-products-page .pfilter-label {
    flex: none;
    width: 66px;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--font-color-title);
}

.giso-products-page .pfilter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.giso-products-page .pfilter-tags a {
    display: inline-block;
    padding: 7px 20px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--white);
    font-size: var(--fs-tiny);
    color: var(--font-color-normal);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.giso-products-page .pfilter-tags a:hover,
.giso-products-page .pfilter-tags a.on {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white);
}

/* ---------- 当前类别简介 ---------- */
.giso-products-page .p-desc {
    padding: 56px 0 0;
}

.giso-products-page .p-desc h3 {
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--font-color-title);
}

.giso-products-page .p-desc h3 span {
    margin-left: 12px;
    font-size: var(--fs-tiny);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--font-color-light);
}

.giso-products-page .p-desc p {
    max-width: 940px;
    margin-top: 14px;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

.giso-products-page .p-desc .p-tags {
    margin-top: 20px;
}

/* ---------- 产品卡片网格 ---------- */
.giso-products-page .p-grid {
    padding: 34px 0 80px;
}

.giso-products-page .pgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.giso-products-page .pcard {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.giso-products-page .pcard:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-light);
    box-shadow: 0 18px 42px rgba(18, 43, 62, 0.1);
}

.giso-products-page .pcard-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--light-gray);
    overflow: hidden;
}

.giso-products-page .pcard-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.giso-products-page .pcard:hover .pcard-thumb img {
    transform: scale(1.05);
}

.giso-products-page .pcard-nophoto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.giso-products-page .pcard-body {
    padding: 20px 22px 22px;
}

.giso-products-page .pcard-body h4 {
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-normal);
    color: var(--font-color-title);
    transition: color 0.2s ease;
}

.giso-products-page .pcard:hover .pcard-body h4 {
    color: var(--color-primary-dark);
}

.giso-products-page .pcard-body p {
    display: -webkit-box;
    margin-top: 8px;
    font-size: var(--fs-tiny);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.giso-products-page .pcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}

.giso-products-page .pcard-meta span {
    font-size: var(--fs-tiny);
    color: var(--font-color-light);
}

.giso-products-page .pcard-meta em {
    flex: none;
    font-size: var(--fs-tiny);
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-primary);
}

/* ====================================================
   产品详情页 (.giso-product-detail-page)
   ==================================================== */

/* ---------- 面包屑 ----------
   原 .pd-crumb 整块删除：详情页面包屑已并入全站统一的
   .page-crumb 定位条（HtmlUI.GetCrumb 输出，样式见文件末尾），此处标记已不再输出。 */

/* ---------- 主体：左内容 + 右侧栏 ---------- */
.giso-product-detail-page .pd-main {
    padding: 46px 0 80px;
}

.giso-product-detail-page .pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 44px;
    align-items: start;
}

.giso-product-detail-page .pd-left {
    min-width: 0;
}

/* 封面 */
/* 由 object-fit:contain 改为固定 3:2 画幅 + cover 铺满（黄站长指令：
   图片两边留空不好看）。原 contain 在左栏宽盒里对横图左右留灰边、对竖图（800x1200）留边更宽；
   改 cover 后任何比例的图都铺满无空边，代价是比例不符的图裁边（竖图裁上下）。
   占位图已由 AI 批量归一化为 3:2 横图；客户正式图建议按 3:2（如 1000x667）上传。 */
.giso-product-detail-page .pd-cover {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--light-gray);
    aspect-ratio: 3 / 2;
}

.giso-product-detail-page .pd-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.giso-product-detail-page .pd-nophoto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 30px;
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.giso-product-detail-page .pd-title {
    margin-top: 30px;
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    color: var(--font-color-title);
}

.giso-product-detail-page .pd-meta {
    margin-top: 12px;
    font-size: var(--fs-small);
    color: var(--font-color-light);
}

/* ---------- 详情区块（关键词标签 / 产品详细资料） ---------- */
.giso-product-detail-page .pd-block {
    margin-top: 30px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
}

.giso-product-detail-page .pd-block-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--light-gray);
}

.giso-product-detail-page .pd-block-hd b {
    position: relative;
    padding-left: 14px;
    font-size: var(--fs-body);
    font-weight: 800;
    color: var(--font-color-title);
}

.giso-product-detail-page .pd-block-hd b::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--color-primary);
    transform: translateY(-50%);
}

.giso-product-detail-page .pd-block-hd em {
    font-size: var(--fs-tiny);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--font-color-light);
}

.giso-product-detail-page .pd-block-bd {
    padding: 24px;
}

/* ---------- 后台富文本「产品详细资料」排版 ----------
   why：正文由客户在后台富文本里维护（简介 / 参数表 / 技术规格表），
     样式统一在 .pd-rich 这一层给，客户换行、加行、改表都不会散版。 */
.giso-product-detail-page .pd-rich {
    /* 富文本正文按 17px 正文基准用 --fs-body（原 --fs-small 偏小） */
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

.giso-product-detail-page .pd-rich > *:first-child {
    margin-top: 0;
}

.giso-product-detail-page .pd-rich p {
    margin: 0 0 14px;
}

.giso-product-detail-page .pd-rich h4 {
    margin: 30px 0 14px;
    padding-left: 12px;
    border-left: 4px solid var(--color-primary);
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-tight);
    color: var(--font-color-title);
}

.giso-product-detail-page .pd-rich strong {
    color: var(--font-color-title);
}

/* ---------- 富文本「产品特性」条目列表 ----------
   新增。客户《分类.xlsx》定稿后，
     详情页富文本改为三段式（简介 + 〈h4〉产品特性〈/h4〉+ 〈ul〉条目 + 〈h4〉典型应用〈/h4〉），
     其中「产品特性」用的是 ul/li，而 .pd-rich 原先只定义了 p / h4 / table，
     列表只能吃浏览器默认样式（缩进与行距与全站不统一），故在此统一收口。 */
.giso-product-detail-page .pd-rich ul {
    margin: 0 0 14px;
    padding-left: 0;
    list-style: none;
}

.giso-product-detail-page .pd-rich li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 20px;
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

.giso-product-detail-page .pd-rich li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

.giso-product-detail-page .pd-rich table {
    width: 100%;
    margin: 0 0 8px;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.giso-product-detail-page .pd-rich th,
.giso-product-detail-page .pd-rich td {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    text-align: left;
    line-height: var(--lh-normal);
}

.giso-product-detail-page .pd-rich th {
    background: var(--light-gray);
    font-weight: 700;
    color: var(--font-color-title);
}

.giso-product-detail-page .pd-rich tbody tr:nth-child(even) td {
    background: #FBFDFE;
}

.giso-product-detail-page .pd-rich td:first-child {
    font-weight: 700;
    white-space: nowrap;
    color: var(--font-color-title);
}

/* 参数表与规格表首列宽度各自锁一下，避免项目名列换行 */
.giso-product-detail-page .pd-rich table.pd-ptable th:first-child,
.giso-product-detail-page .pd-rich table.pd-ptable td:first-child {
    width: 26%;
}

.giso-product-detail-page .pd-rich table.pd-stable th:first-child,
.giso-product-detail-page .pd-rich table.pd-stable td:first-child {
    width: 30%;
}

/* 末尾提示行（典型值免责说明） */
.giso-product-detail-page .pd-rich .pd-tip {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 8px;
    background: var(--color-primary-light);
    font-size: var(--fs-tiny);
    line-height: var(--lh-loose);
    color: var(--color-primary-dark);
}

/* ---------- 右侧栏 ---------- */
.giso-product-detail-page .pd-side {
    position: sticky;
    top: 24px;
}

.giso-product-detail-page .side-box {
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--white);
}

.giso-product-detail-page .side-box h4 {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-body);
    font-weight: 800;
    color: var(--font-color-title);
}

.giso-product-detail-page .side-box h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 46px;
    height: 2px;
    background: var(--color-primary);
}

/* 相关产品 */
.giso-product-detail-page .side-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border);
}

.giso-product-detail-page .side-list a:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.giso-product-detail-page .side-thumb {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--light-gray);
}

.giso-product-detail-page .side-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.giso-product-detail-page .side-nophoto {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.giso-product-detail-page .side-name {
    display: -webkit-box;
    flex: 1;
    min-width: 0;
    font-size: var(--fs-tiny);
    line-height: var(--lh-normal);
    color: var(--font-color-normal);
    transition: color 0.2s ease;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.giso-product-detail-page .side-list a:hover .side-name {
    color: var(--color-primary);
}

/* 索取物性表 CTA */
.giso-product-detail-page .side-cta {
    border: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.giso-product-detail-page .side-cta h4 {
    border-bottom-color: rgba(255, 255, 255, 0.25);
    color: var(--white);
}

.giso-product-detail-page .side-cta h4::after {
    background: var(--white);
}

.giso-product-detail-page .side-cta p {
    font-size: var(--fs-tiny);
    line-height: var(--lh-loose);
    color: rgba(255, 255, 255, 0.86);
}

.giso-product-detail-page .side-btn {
    display: block;
    margin-top: 18px;
    padding: 11px 0;
    border-radius: 100px;
    background: var(--white);
    text-align: center;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-primary-dark);
    transition: background-color 0.2s ease;
}

.giso-product-detail-page .side-btn:hover {
    background: var(--color-primary-light);
}

/* ====================================================
   产品列表 / 详情：无数据空态
   ==================================================== */
.giso-products-page .p-empty,
.giso-product-detail-page .pd-empty {
    padding: 70px 0;
    text-align: center;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

.giso-products-page .p-empty a,
.giso-product-detail-page .pd-empty a {
    font-weight: 700;
    color: var(--color-primary);
}

/* ====================================================
   产品模块：响应式（本站当前 HasMobile=false，此处仅作宽屏收窄时的降级兜底）
   ==================================================== */
@media (max-width: 1100px) {
    .giso-products-page .pmx-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .giso-products-page .pmx-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .giso-products-page .pmx-cat:nth-child(4) {
        border-left: 0;
    }

    .giso-product-detail-page .pd-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .giso-product-detail-page .pd-side {
        position: static;
    }
}

@media (max-width: 900px) {
    .giso-products-page .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .giso-products-page .p-overview,
    .giso-products-page .p-desc {
        padding-top: 46px;
    }

    .giso-products-page .p-filter {
        margin-top: 40px;
    }

    .giso-products-page .pmx-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .giso-products-page .pmx-cat {
        padding: 20px 16px;
    }

    .giso-products-page .pmx-cat:nth-child(odd) {
        border-left: 0;
    }

    .giso-products-page .pgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .giso-products-page .pfilter-label {
        width: 100%;
    }

    .giso-product-detail-page .pd-title {
        font-size: var(--fs-h2);
    }

    .giso-product-detail-page .pd-block-bd,
    .giso-product-detail-page .side-box {
        padding: 18px;
    }

    .giso-product-detail-page .pd-rich th,
    .giso-product-detail-page .pd-rich td {
        padding: 9px 10px;
        font-size: var(--fs-tiny);
    }
}


/* ====================================================
   新闻列表页 (.giso-news-page)
   ==================================================== */
.giso-news-page .news-grid {
    padding: 50px 0 70px;
}
.giso-news-page .news-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.giso-news-page .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(18, 43, 62, 0.1);
}
.giso-news-page .news-card .thumb {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.giso-news-page .news-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.giso-news-page .news-card:hover .thumb img {
    transform: scale(1.05);
}
.giso-news-page .news-card .info {
    padding: 20px;
}
/* 标题上下间距放宽（黄站长指令：太挤）：上方 8→14、下方 10→16 */
.giso-news-page .news-card .date {
    font-size: var(--fs-tiny);
    color: var(--color-primary);
    margin-bottom: 14px;
}
/* 列表卡标题：不加粗（400）；
   原定高 48px 是按 15px 字号算的两行（24px/行），升 17px 后两行需 ≈54.4px 导致第二行截字（bug）。
   改用 -webkit-line-clamp 两行截断——两行完整显示、超两行隐藏，高度自适应不再切字 */
.giso-news-page .news-card h4 {
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--font-color-title);
    margin-bottom: 16px;
    line-height: var(--lh-normal);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.giso-news-page .news-card p {
    font-size: var(--fs-tiny);
    color: var(--font-color-normal);
    line-height: var(--lh-normal);
    height: 42px;
    overflow: hidden;
    margin-bottom: 12px;
}
.giso-news-page .news-card .meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-tiny);
    color: var(--font-color-normal);
}

/* ====================================================
   新闻详情页 (.giso-article-page)
   ==================================================== */
.giso-article-page .article-main {
    padding: 50px 0 70px;
}
.giso-article-page .article-wrap {
    max-width: 900px;
    margin: 0 auto;
}
.giso-article-page .article-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}
.giso-article-page .article-header h1 {
    /* 详情页主标题按 7 档字号规范用 --fs-h2（24px），
       --fs-h1（36px）是首页板块大标题档，内页详情标题不应占用 */
    font-size: var(--fs-h2);
    color: var(--font-color-title);
    margin-bottom: 16px;
    line-height: var(--lh-tight);
}
.giso-article-page .article-meta {
    display: flex;
    justify-content: center;
    gap: 24px;
    font-size: var(--fs-small);
    color: var(--font-color-normal);
}
.giso-article-page .article-meta i {
    margin-right: 4px;
    color: var(--color-primary);
}
/* 详情页正文按 17px 正文基准用 --fs-body，
   原 --fs-small（15px）偏小，详情正文以基准字号阅读更舒适 */
.giso-article-page .article-body {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--font-color-title);
}
.giso-article-page .article-body p {
    margin-bottom: 16px;
}
.giso-article-page .article-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 20px 0;
}
.giso-article-page .article-nav {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-small);
}
.giso-article-page .article-nav a {
    color: var(--font-color-normal);
    transition: color 0.2s;
}
.giso-article-page .article-nav a:hover {
    color: var(--color-primary);
}
.giso-article-page .article-nav .prev::before {
    content: '← ';
}
.giso-article-page .article-nav .next::after {
    content: ' →';
}

/* ====================================================
   新闻模块接后台后的样式补充
   ----------------------------------------------------
   新闻列表 / 详情两页由「测试数据占位」改为接后台文章数据，
   渲染结构随之变化（列表卡片改由 ArticleUI 输出、详情页新增真实上下篇与返回入口），
   原有样式已覆盖不到，故在此追加。全部规则限定在 .giso-news-page / .giso-article-page
   作用域内，不触碰基础规则与其它内页。
   注意：卡片的图片一律 object-fit:cover 居中裁切 —— 新闻配图是后台缩略图（_500），
   构图随意，锁死比例才能保证同排卡片等高。
   ==================================================== */

/* ---------- 新闻列表页：卡片栅格与卡片内部布局 ---------- */

/* 列表区铺浅灰底，让白卡片从页面里「浮」出来（与「工厂设备」图片区同口径） */
.giso-news-page .news-grid {
    background: var(--light-gray);
}

.giso-news-page .news-card {
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

/* 整卡可点：链接撑满卡片，内容区才能把元信息压到卡片底部 */
.giso-news-page .news-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 封面区垫浅灰：后台缩略图加载中或比例不足时不露白边 */
.giso-news-page .news-card .thumb {
    background: var(--light-gray);
}

.giso-news-page .news-card .info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 日期前的日历图标与文字拉开一点 */
.giso-news-page .news-card .date i {
    margin-right: 6px;
}

/* 元信息贴卡片底部，细分割线与标题区分（对齐首页 .n-card .go 的做法） */
.giso-news-page .news-card .meta {
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.giso-news-page .news-card .meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.giso-news-page .news-card .meta i {
    color: var(--color-primary);
    font-size: var(--fs-tiny);
}

.giso-news-page .news-card .meta .more {
    color: var(--color-primary);
    font-weight: 500;
}

/* 分页与列表卡片之间留出生气（列表已有 70px 下内距，这里只需清掉基础规则的外距） */
.giso-news-page .pagelist {
    margin-bottom: 0;
}

/* ---------- 新闻详情页：上一篇 / 下一篇（两栏白卡，边界占位不塌陷） ---------- */

/* 覆盖基础规则的两栏 flex：改用栅格 + minmax(0,1fr) 锁死等分，
   长标题不会把列撑破（同 .article-page .article-nav 的既有修法） */
.giso-article-page .article-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px;
    padding-top: 0;
    border-top: none;
}

/* 基础规则在 .prev / .next 上加了箭头伪元素，与新的「标签 + 标题」结构重复，撤掉 */
.giso-article-page .article-nav .prev::before,
.giso-article-page .article-nav .next::after {
    content: none;
}

.giso-article-page .article-nav-item {
    box-sizing: border-box;
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding: 18px 24px;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--font-color-title);
    transition: border-color 0.25s ease, color 0.25s ease;
}

.giso-article-page a.article-nav-item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 标签（上一篇 / 下一篇）不参与收缩，标题不够宽时由标题自己省略 */
.giso-article-page .article-nav-item .label {
    flex-shrink: 0;
    color: var(--color-primary);
    font-weight: 600;
}

.giso-article-page .article-nav-item .title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.giso-article-page .article-nav-item.next {
    justify-content: flex-end;
}

/* 首 / 末篇占位：同尺寸、灰底，布局不塌陷且一眼看出不可点 */
.giso-article-page .article-nav-item.disabled {
    color: var(--font-color-light);
    background: var(--light-gray);
}

.giso-article-page .article-nav-item.disabled .label {
    color: var(--font-color-light);
}

/* ---------- 新闻详情页：返回列表入口 ---------- */
.giso-article-page .article-back {
    margin-top: 26px;
    text-align: center;
}

.giso-article-page .article-back a {
    display: inline-block;
    padding: 10px 26px;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: var(--white);
    font-size: var(--fs-small);
    color: var(--font-color-normal);
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.giso-article-page .article-back a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

/* ---------- 新闻列表 / 详情：无数据空态 ---------- */
.giso-about-page .news-empty,
.giso-about-page .article-empty {
    padding: 70px 0;
    text-align: center;
    font-size: var(--fs-small);
    line-height: var(--lh-loose);
    color: var(--font-color-normal);
}

.giso-about-page .article-empty a {
    color: var(--color-primary);
}

/* #endregion */

/* 产品页专属 Banner：整图设计底图 + 居中标题区（作用域：产品列表页 +
   产品详情页；About / Contact / News / ShowNews / Solutions 五个共用 .giso-banner 的兄弟页不受影响）。
   作用域扩到 .giso-product-detail-page：详情页本批补挂 Banner
   （标题 = 产品所属大类名），复用同一张底图与同一套规则。
   原 .giso-banner 是纯 CSS 蓝色渐变色块（居中文字），与首页深蓝工业摄影风脱节，
   视觉空洞。现按首页轮播的设计语言做整图设计：1920x300 改性塑料颗粒摄影
   （banner-products.jpg，AI 生成 + PIL 裁切调色），画面中央压暗作标题区、颗粒从左右两侧露出，
   蓝/青/橙颗粒呼应品牌三色；标题仍由 HTML 动态输出（/products 显示「产品中心」，
   系列 / 大类页显示当前类别名，共 19 种状态，不可烧进图里），文字保持居中版式与原内页一致。
   ::before 再补一层 CSS 中央压暗渐变做保底：窄视口下 background cover 居中裁切后，
   图片自带暗区可能被裁掉一部分，这层保证任何宽度下白色标题都可读。
   ::after 为底边 3px 三色渐变细线（--color-tri），与首页色带 / 服务卡顶边同一套语言。
   按黄站长指令由「左对齐标题」改回「居中标题」：
     图片压暗区同步由左侧移到画面中央（PIL 重处理），两侧颗粒对称露出。 */
.giso-products-page .giso-banner,
.giso-product-detail-page .giso-banner {
    height: 300px;
    background: url(/static/images/banner-products.jpg?v=20261011c) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.giso-products-page .giso-banner::before,
.giso-product-detail-page .giso-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 42, 64, 0) 0%, rgba(15, 42, 64, 0.55) 24%, rgba(15, 42, 64, 0.78) 50%, rgba(15, 42, 64, 0.55) 76%, rgba(15, 42, 64, 0) 100%);
    pointer-events: none;
}
.giso-products-page .giso-banner::after,
.giso-product-detail-page .giso-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-tri);
}
.giso-products-page .giso-banner .container,
.giso-product-detail-page .giso-banner .container {
    position: relative;
    z-index: 1;
}
.giso-products-page .giso-banner .bar,
.giso-product-detail-page .giso-banner .bar {
    margin: 0 auto 12px;
}

/* 内页「当前位置」面包屑（自 cdecn 站移植，黄站长指令：内页 Banner
   下方统一补定位条）。结构与文案由 HtmlUI.GetCrumb 统一输出（含 BreadcrumbList 结构化数据），
   本区块只管样式：白底 + 底边框，当前页深灰加粗不可点，超长标题省略号截断。 */
.page-crumb {
    background: var(--white);
    border-bottom: 1px solid var(--color-border);
}

.page-crumb .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
}

.page-crumb a {
    color: var(--font-color-normal);
    transition: color 0.25s;
}

.page-crumb a:hover {
    color: var(--color-primary);
}

.page-crumb .crumb-home i {
    margin-right: 5px;
    color: var(--color-primary);
    font-size: var(--fs-tiny);
}

.page-crumb .crumb-sep {
    color: var(--font-color-light);
}

/* 中间级但缺少地址（数据缺失等）：走普通文字色，避免与「当前页」撞样式 */
.page-crumb .txt {
    color: var(--font-color-normal);
}

/* 当前页：深灰加粗、不可点击。长标题（产品名 / 文章名）用省略号截断，避免把整条撑成两行 */
.page-crumb .cur {
    color: var(--font-color-title);
    font-weight: bold;
    max-width: 560px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 内页专属 Banner 扩展：新闻 / 关于 / 应用领域 / 联系 / 搜索（黄站长指令：
   产品模块 Banner 效果确认后同步推广到其余内页）。5 张 1920x300 主题图均按 banner-products.jpg
   同一管线制作（AI 生成 + PIL 中央压暗 + 收饱和），设计语言统一：深蓝 duotone、中央压暗作标题区、
   两侧纹理露出、底边三色细线。标题仍由 HTML 动态输出，文字居中版式与产品页一致。
   作用域说明：News 用 .giso-news-page、ShowNews 用 .giso-article-page（两页共用 banner-news.jpg）；
   About / Contact / Solutions / Query 因共用 .giso-about-page 内页皮肤，本次分别在各页 wrapper 上
   补挂专有修饰类 giso-aboutus-page / giso-contact-page / giso-solutions-page / giso-query-page，
   保证每页只命中自己的底图规则（.giso-aboutus-page .giso-banner 与其他页特异性相同，
   但各页 wrapper 只带自己的修饰类，互不干扰）；Query 选择器再叠加 .page-banner.search-banner
   提高特异性，压过上方 764 行起的旧 .about-page 皮肤规则（含旧 search-banner.png 背景）。
   ::before 为中央压暗渐变保底（窄视口裁切下标题仍可读），::after 为底边三色细线（--color-tri）。
   banner-about / banner-contact 已按黄站长指令换用厂区实景照片重制
   （客户提供航拍图：楼顶「吉塑」红字招牌带 / 主楼墙面/车间标语带，PIL 同一中央压暗轮廓处理，
   避开原图右下角「服务号·吉塑新材 GISO」水印），其余三张仍为 AI 生成图。 */
.giso-news-page .giso-banner,
.giso-article-page .giso-banner {
    height: 300px;
    background: url(/static/images/banner-news.jpg?v=20261011e) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.giso-aboutus-page .giso-banner {
    height: 300px;
    background: url(/static/images/banner-about.jpg?v=20261011f) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.giso-solutions-page .giso-banner {
    height: 300px;
    background: url(/static/images/banner-solutions.jpg?v=20261011e) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.giso-contact-page .giso-banner {
    height: 300px;
    background: url(/static/images/banner-contact.jpg?v=20261011f) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.giso-query-page .page-banner.search-banner {
    height: 300px;
    background: url(/static/images/banner-query.jpg?v=20261011e) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    justify-content: center;
}

/* 共享：中央压暗保底渐变（与图片自带暗区同轮廓） */
.giso-news-page .giso-banner::before,
.giso-article-page .giso-banner::before,
.giso-solutions-page .giso-banner::before,
.giso-contact-page .giso-banner::before,
.giso-query-page .page-banner.search-banner::before,
.giso-aboutus-page .giso-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 42, 64, 0) 0%, rgba(15, 42, 64, 0.55) 24%, rgba(15, 42, 64, 0.78) 50%, rgba(15, 42, 64, 0.55) 76%, rgba(15, 42, 64, 0) 100%);
    pointer-events: none;
}

/* 共享：底边三色渐变细线，与首页色带 / 产品 Banner 同一套语言 */
.giso-news-page .giso-banner::after,
.giso-article-page .giso-banner::after,
.giso-solutions-page .giso-banner::after,
.giso-contact-page .giso-banner::after,
.giso-query-page .page-banner.search-banner::after,
.giso-aboutus-page .giso-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-tri);
}

/* 共享：标题容器抬到压暗层之上 */
.giso-news-page .giso-banner .container,
.giso-article-page .giso-banner .container,
.giso-solutions-page .giso-banner .container,
.giso-contact-page .giso-banner .container,
.giso-query-page .page-banner.search-banner .container,
.giso-aboutus-page .giso-banner .container {
    position: relative;
    z-index: 1;
}

/* ====================================================
   「研发与工艺设备」卡片名称水平居中。
   设备卡（.photo-card）的 figcaption 默认左对齐，13 台仪器名称长短不齐，
     左对齐时每行起始点一致、视觉重心偏左下，整排观感零散；设备名多为 3-7 字的短词，
     居中后与「图在上、名在下」的卡片构图更对称，整排更整齐。
   范围：仅限 /about「工厂设备」页 —— 用页面级类名 .giso-aboutus-page 收口，
     避免误伤 Solutions「应用场景」（同用 .about-equip，但根类为 .giso-solutions-page）
     与「资质证书」（.about-cert，标题下有证书编号长备注，居中会与左对齐的备注冲突）。
   ==================================================== */
.giso-aboutus-page .about-equip .photo-card figcaption h4 {
    text-align: center;
}

/* ====================================================
   「应用领域」总览图墙（/solutions 根页）。
   原根页取排序第一的栏目渲染详情，缺六行业总览入口，
     且根页内容与首个子栏目重复（SEO 隐患）。按黄站长定案改为 cdecn 业务范围
     sort-wall 式大卡图墙：每卡「中文领域名 | 配图」两半格，不带英文副题与
     推荐材料标签；排内同向、排间镜像成阶梯错落。
   范围：仅 /solutions 根页（.giso-solutions-page 下 .about-wall 收口），
     不影响行业详情页既有区块。
   ==================================================== */
.giso-solutions-page .about-wall {
    padding: 0 0 60px;
    background: var(--light-gray);
}
.giso-solutions-page .sol-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
.giso-solutions-page .sol-wall-item {
    display: flex;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.giso-solutions-page .sol-wall-item:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
}

/* 错落：每排 2 格。第 1、3、5… 排「文|图」（DOM 顺序即 文字 → 图）；
   第 2、4、6… 排「图|文」（row-reverse 镜像），上下排图片左右错开成阶梯 */
.giso-solutions-page .sol-wall-item:nth-child(4n+1),
.giso-solutions-page .sol-wall-item:nth-child(4n+2) {
    flex-direction: row;
}
.giso-solutions-page .sol-wall-item:nth-child(4n+3),
.giso-solutions-page .sol-wall-item:nth-child(4n+4) {
    flex-direction: row-reverse;
}

/* 条目总数为奇数时，末格横跨整行（4:1 满宽横带）。
   应用领域由 6 条扩为 9 条，两列图墙走到第 9 格只剩左半格、右侧留空；
   让末格 span 2 并把比例改成 4:1（高度 = 满宽 × 1/4 = 半宽 × 1/2，与其它行同高），
   视觉上收成一条完整「文 | 图」横带。偶数条时 :last-child 落在偶位、不命中，
   版式与改前完全一致（原 6 条布局不受影响）。 */
.giso-solutions-page .sol-wall-item:nth-child(odd):last-child {
    grid-column: span 2;
    aspect-ratio: 4 / 1;
}

.giso-solutions-page .sol-wall-txt {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    background: var(--white);
    transition: background 0.25s ease;
}
.giso-solutions-page .sol-wall-txt b {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-normal);
    color: var(--font-color-title);
    transition: color 0.25s ease;
}
.giso-solutions-page .sol-wall-item:hover .sol-wall-txt b {
    color: var(--color-primary);
}
.giso-solutions-page .sol-wall-item:hover .sol-wall-txt {
    background: var(--white);
}
.giso-solutions-page .sol-wall-pic {
    position: relative;
    flex: 0 0 50%;
    width: 50%;
    overflow: hidden;
    background: var(--light-gray);
}
.giso-solutions-page .sol-wall-pic img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.giso-solutions-page .sol-wall-item:hover .sol-wall-pic img {
    transform: scale(1.04);
}

/* 窄屏：退化为单列（文字上、图下，纵向堆叠），不再左右镜像 */
@media (max-width: 768px) {
    .giso-solutions-page .sol-wall {
        grid-template-columns: 1fr;
    }
    .giso-solutions-page .sol-wall-item,
    .giso-solutions-page .sol-wall-item:nth-child(4n+3),
    .giso-solutions-page .sol-wall-item:nth-child(4n+4) {
        flex-direction: column;
        aspect-ratio: auto;
    }
    /* 窄屏单列下，取消上面「奇数末格 span 2 / 4:1」的横带处理
       （why：单列时 span 2 无意义，4:1 会把卡片压成一条细带），回到与其它条目一致的纵向堆叠。 */
    .giso-solutions-page .sol-wall-item:nth-child(odd):last-child {
        grid-column: auto;
        aspect-ratio: auto;
    }
    .giso-solutions-page .sol-wall-txt {
        flex: 0 0 auto;
        width: 100%;
        padding: 16px 12px;
    }
    .giso-solutions-page .sol-wall-pic {
        flex: 0 0 auto;
        width: 100%;
        height: 180px;
    }
}

/* 图墙文字格标题下补推荐材料标签（黄站长：纯标题太单，
   标签与详情页/首页卡片同口径，取栏目 Keywords）。窄半格空间小，标签做小号胶囊、
   允许换行居中；无标签的栏目自动不占位（后台没输出标签行）。 */
.giso-solutions-page .sol-wall-txt b {
    margin-bottom: 10px;
}
.giso-solutions-page .sol-wall-tags ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.giso-solutions-page .sol-wall-tags li {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--fs-tiny);
    line-height: var(--lh-tight);
    color: var(--color-primary);
    background: var(--light-gray);
    border: 1px solid var(--color-border);
    transition: all 0.25s ease;
}
.giso-solutions-page .sol-wall-item:hover .sol-wall-tags li {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

/* 图墙文字格调优：标题加大并与标签拉开间距，
   半格视觉重心更稳（黄站长：标题再大一点、与标签间距高一些，协调舒服）。 */
.giso-solutions-page .sol-wall-txt b {
    font-size: var(--fs-h3);
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 1px;
}
.giso-solutions-page .sol-wall-tags {
    max-width: 90%;
}

/* 产品详情页关键词区块去外框：标签自身已是圆角胶囊，
   pd-block 的边框盒重复难看（黄站长定稿）。.pd-keywords 仅保留区块间距，
   去掉边框/圆角/背景，内边距收紧。 */
.giso-product-detail-page .pd-block.pd-keywords {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.giso-product-detail-page .pd-keywords .p-tags {
    padding: 4px 0;
}