/**
 * 智能制造等产品页样式（industryPage.php 专用）
 * 尺寸基准：设计图 Frame 1920px 画布实测
 *   内容区 1400px / Hero 480px / 深色统计卡 1400×180
 *   卡片网格 2 列×684px（列距 36、行距 50）/ 卡片内边距 20·32·30
 *   统计数字 48px / 卡片标题 20px / 卡片正文 14px·行高 2.3
 * 注意：全站 .main 是 1600px（header.css），本页用独立的 .ind-inner 1400px，互不影响
 */

/* ===================== 通用容器 ===================== */
.ind-inner{
    width: 1400px;
    margin: 0 auto;
}
.ind-section{
    padding: 88px 0 96px;
}

/* ===================== 区块标题 ===================== */
.ind-sec-title{
    font-size: 36px;
    color: #333333;
    /* 设计稿里区块大标题是粗体（与 tab 大字一致） */
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}
.ind-sec-sub{
    font-size: 16px;
    color: #999999;
    text-align: center;
    margin-top: 24px;
    line-height: 1.6;
}

/* ===================== 1. 深色 Hero 横幅 ===================== */
.ind-hero{
    height: 480px;
    background-color: #1b1d2e;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
/* 背景图直接用原色铺满，不加任何蒙版/压暗层。
   （曾有一层 90° 黑色渐变 ::after 遮罩，按用户要求去掉 ——
   背景图本身已经够暗，再压一层会发灰） */
.ind-hero-inner{
    width: 1400px;
    margin: 0 auto;
    padding-top: 161px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}
.ind-hero-title{
    font-size: 40px;
    color: #ffffff;
    font-weight: bold;
    line-height: 1;
}
.ind-hero-desc{
    margin-top: 28px;
    /* 设计图实测：Hero 正文文字块宽约 470px（CNC 468 / 注塑技术 477），
       按用户要求统一限制在 500px 内换行；不限制的话文字会一直拉到右侧、换行位置与设计稿不符 */
    max-width: 500px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}
/* 材料详情页的横幅：描述更长，设计图实测块宽约 548px，所以单独放宽 */
.ind-hero-material .ind-hero-desc{
    max-width: 560px;
}
/* 材料详情页横幅的文字位置：设计图实测标题在 y=183（其他页面是 161），单独下移 */.ind-hero-material .ind-hero-inner{
    padding-top: 183px;
}
.ind-hero-btn{
    display: inline-block;
    margin-top: 36px;
    width: 144px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #FEC901;
    color: #303133;
    font-size: 16px;
    border-radius: 5px;
}
.ind-hero-btn:hover{
    background: #FEE13A;
}

/* Hero 居中（数据源 = 栏目变量「hero居中」勾选框；关于我们页用，其他页不勾保持左对齐） */
.ind-hero-center .ind-hero-main{
    text-align: center;
}
/* 描述块原本是 max-width:500px 左对齐，居中时必须 auto 居中，否则整块偏左 */
.ind-hero-center .ind-hero-desc{
    margin-left: auto;
    margin-right: auto;
}
/* 要点列表居中时去掉左侧的圆点（居中的列表带圆点会歪） */
.ind-hero-center .ind-hero-list-item{
    padding-left: 0;
}
.ind-hero-center .ind-hero-list-item::before{
    display: none;
}

/* ===================== 页面附加区块（后台变量里贴 HTML） ===================== */
.ind-extra{
    padding: 60px 0;
}

/* ===================== 2. 快速解决方案（深色统计条） ===================== */
.ind-quick-card{
    margin-top: 56px;
    height: 180px;
    border-radius: 16px;
    background-color: #121518;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0 48px;
    box-sizing: border-box;
}
/* 后台配了「背景图」时加一层压暗遮罩，保证数值/标签文字可读 */
/* 配了「背景图」时直接用图铺满，不加任何蒙版/压暗层。
   （曾有一层 rgba(18,21,24,0.45) 的 ::before 压暗遮罩，按用户要求去掉 ——
   背景图本身已经够暗，再压一层会发灰）
   .ind-quick-hasbg 这个 class 保留在模板里作为「该卡配了背景图」的标记钩子。 */
.ind-quick-list{
    flex: 1;
    display: flex;
}
.ind-quick-list > li{
    flex: 1;
    text-align: center;
}
.ind-quick-num{
    font-size: 48px;
    color: #ffffff;
    font-weight: bold;
    line-height: 1;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}
.ind-quick-label{
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    margin-top: 16px;
    line-height: 1;
}
.ind-quick-btn{
    flex: 0 0 240px;
    width: 240px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background: #FEC901;
    color: #303133;
    font-size: 16px;
    border-radius: 6px;
}
.ind-quick-btn:hover{
    background: #FEE13A;
}

/* ===================== 3. 卡片网格（规格说明 / FAQ 通用） ===================== */
/* 瀑布流容器：按「段」垂直排列（普通段 = 两列，通栏段 = 整行） */
.ind-card-flow{
    margin-top: 56px;
}
.ind-card-flow > * + *{
    margin-top: 50px;
}
/* 两列独立堆叠：每列各自往下排，卡片紧贴、不留空。
   不用 CSS Grid —— Grid 是按行对齐的，矮的卡下方会空出一大块。 */
.ind-card-grid{
    display: flex;
    align-items: flex-start;
}
.ind-card-col{
    flex: 1 1 0;
    min-width: 0;
}
.ind-card-col + .ind-card-col{
    margin-left: 36px;
}
.ind-card{
    background: #ffffff;
    border: 1px solid #ededed;
    border-radius: 8px;
    padding: 20px 32px;
    /* 卡片阴影：比原值（0 2px 10px / 3%）明显一些，让卡片从白底上浮起来 */
    box-shadow: 0 6px 24px rgba(0,0,0,0.10);
    box-sizing: border-box;
    margin-bottom: 50px;   /* 同一列上下两张卡的间距 */
}
/* 每列最后一张、以及通栏段最后一张，不再留底部间距 */
.ind-card-col > .ind-card:last-child,
.ind-card-full > .ind-card:last-child{
    margin-bottom: 0;
}
/* 通栏卡：独立整行（由每篇文章的「通栏」勾选框控制） */
.ind-card-full > .ind-card{
    width: 100%;
}
.ind-card-wide{
    width: 100%;
}
.ind-card-title{
    font-size: 20px;
    color: #303133;
    font-weight: bold;
    line-height: 1.4;
}
.ind-card-body{
    margin-top: 20px;
    font-size: 14px;
    line-height: 2.25;
    color: #666666;
}
.ind-card-body img{
    max-width: 100%;
    height: auto;
}
.ind-card-body strong{
    color: #303133;
}
/* 材料清单网格（8 列）——卡片正文里写
   <div class="ind-mat-grid"><span>ABS</span><span>PVC</span>…</div>
   注意：kses 会剥掉行内 display，所以必须用 class 而不是 inline style */
.ind-mat-grid{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    row-gap: 24px;
    margin-top: 21px;
}
.ind-mat-grid > span{
    font-size: 15px;
    line-height: 1.6;
    color: #303133;
}

/* ===================== 4. 图文交替块 ===================== */
.ind-feature-list > li{
    display: flex;
    align-items: center;
    margin-top: 60px;
}
.ind-feature-list > li:first-child{
    margin-top: 56px;
}
.ind-feature-row.ind-feature-rev{
    flex-direction: row-reverse;
}
.ind-feature-text{
    flex: 1;
}
.ind-feature-media{
    flex: 1;
    margin-left: 60px;
}
.ind-feature-rev .ind-feature-media{
    margin-left: 0;
    margin-right: 60px;
}
/* 媒体区同时支持图片和视频，共用同一套尺寸规则，视觉一致 */
.ind-feature-media > img,
.ind-feature-media > video{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
/* 小标题加粗 —— 与区块大标题 .ind-sec-title 保持一致（设计稿为粗体） */
.ind-feature-title{
    font-size: 28px;
    color: #303133;
    font-weight: bold;
    line-height: 1.3;
}
.ind-feature-desc{
    margin-top: 20px;
    font-size: 15px;
    line-height: 2;
    color: #666666;
}
.ind-feature-more{
    display: inline-block;
    margin-top: 28px;
    width: 144px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #FEC901;
    color: #303133;
    font-size: 16px;
    border-radius: 5px;
}
.ind-feature-more:hover{
    background: #FEE13A;
}

/* ===================== 5. 工业软件 —— tab 切换 ===================== */
.ind-sw{
    padding: 56px 0 96px;
}
.ind-sw-tabs{
    display: flex;
    gap: 28px;
}
.ind-sw-tab{
    flex: 1;
    display: block;
    padding: 30px 0 32px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #efefef;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: background 0.18s, border-color 0.18s;
}
.ind-sw-name{
    font-size: 28px;
    /* 设计稿里 tab 的大字是粗体（下方小字保持常规） */
    font-weight: bold;
    color: #bcbcbc;
    line-height: 1.2;
    transition: color 0.18s;
}
.ind-sw-sub{
    margin-top: 10px;
    font-size: 14px;
    color: #c8c8c8;
    line-height: 1.4;
    transition: color 0.18s;
}
/* 当前 tab：黄底深字（设计稿样式） */
.ind-sw-tab-on{
    background: #FEC901;
    border-color: #FEC901;
}
.ind-sw-tab-on .ind-sw-name{
    color: #303133;
}
.ind-sw-tab-on .ind-sw-sub{
    color: #6b5a10;
}
.ind-sw-panel{
    display: none;
}
/* tab 条与面板内容之间留出距离 —— 贴在一起太挤（设计稿实测约 72px） */
.ind-sw-panel-on{
    display: block;
    margin-top: 72px;
}
/* 面板标题/副标题与第一个图文块之间，也留出同样的呼吸空间 */
.ind-sw-panel > .ind-feature-list > li:first-child{
    margin-top: 72px;
}

/* Hero 副标题（设计稿里标题下方那行小字） */
.ind-hero-sub{
    margin-top: 14px;
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
}

/* ===================== 6. 案例展示（大媒体区，图片或视频通用） ===================== */
.ind-showcase{
    padding: 96px 0;
}
.ind-showcase-list > li{
    margin-top: 56px;
}
/* 图片和视频共用同一套尺寸规则，视觉一致 */
.ind-showcase-list > li > img,
.ind-showcase-list > li > video{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* ===================== 7. 关于我们 —— 6 个 tab ===================== */
.ind-ab{
    padding: 56px 0 96px;
}
.ind-ab-tabs{
    display: flex;
    gap: 20px;
}
.ind-ab-tab{
    flex: 1;
    display: block;
    padding: 28px 0;
    text-align: center;
    background: #ffffff;
    border: 1px solid #efefef;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    font-size: 26px;
    /* 设计稿里 tab 文字是粗体 */
    font-weight: bold;
    color: #bcbcbc;
    line-height: 1.2;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ind-ab-tab-on{
    background: #FEC901;
    border-color: #FEC901;
    color: #303133;
}
.ind-ab-panel{
    display: none;
}
.ind-ab-panel-on{
    display: block;
    margin-top: 72px;
}

/* 面板通用小标题 */
.ind-ab-h2{
    font-size: 28px;
    color: #303133;
    font-weight: normal;
    line-height: 1.3;
}
.ind-ab-h2-sub{
    margin-top: 12px;
    font-size: 14px;
    color: #999999;
    line-height: 1.6;
}
.ind-ab-body{
    margin-top: 24px;
    font-size: 15px;
    line-height: 2;
    color: #666666;
}
.ind-ab-body p{
    margin-top: 14px;
}

/* ---- 公司简介：左图右文 ---- */
.ind-ab-intro{
    display: flex;
    align-items: flex-start;
}
.ind-ab-intro-media{
    flex: 0 0 652px;
    margin-right: 60px;
}
.ind-ab-intro-media > img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
.ind-ab-intro-text{
    flex: 1;
}

/* ---- 发展大事件：中间竖轴 + 年份黄标 + 卡片左右交替（同原页面布局） ---- */
.ind-ab-timeline{
    position: relative;
    padding: 8px 0;
}
.ind-ab-timeline::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #f0f0f0;
    transform: translateX(-50%);
}
.ind-ab-tl-item{
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 40px;
}
/* 原页面是「第一条在左」，所以偶数行才在右 */
.ind-ab-tl-item:nth-child(even){
    justify-content: flex-end;
}
.ind-ab-tl-item:last-child{
    padding-bottom: 0;
}
/* 年份黄标，压在中轴上 */
.ind-ab-tl-node{
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    z-index: 2;
    padding: 6px 16px;
    background: #FEC901;
    color: #303133;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    border-radius: 4px;
    white-space: nowrap;
}
.ind-ab-tl-card{
    width: calc(50% - 72px);
    padding: 26px 30px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    font-size: 15px;
    line-height: 2;
    color: #666666;
}
/* 用 clearfix 收拢浮动，不能用 overflow:hidden —— 会把月份大数字的顶部裁掉 */
.ind-ab-tl-card > div::after{
    content: '';
    display: block;
    clear: both;
}
.ind-ab-tl-card > div + div{
    margin-top: 20px;
}
/* 原页面样式：每行第一个 span 是月份大数字（黄色粗体），第三个 span 是事件正文 */
.ind-ab-tl-card > div > span{
    display: block;
    float: left;
    line-height: 22px;
}
.ind-ab-tl-card > div > span:nth-child(1){
    margin-top: -3px;
    margin-right: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #FEC901;
}
.ind-ab-tl-card > div > span:nth-child(3){
    margin-left: 74px;
    margin-top: -21px;
    width: calc(100% - 74px);
}

/* ---- 媒体报道：竖向列表（左缩略图 + 右标题/日期/摘要），同原页面 ---- */
.ind-ab-news > li{
    border-bottom: 1px solid #f0f0f0;
}
.ind-ab-news > li:last-child{
    border-bottom: none;
}
.ind-ab-news-link{
    display: block;
    padding: 22px 0;
}
.ind-ab-news-media{
    float: left;
    width: 240px;
    height: 140px;
    margin-right: 28px;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f5;
}
.ind-ab-news-media > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ind-ab-news-title{
    font-size: 18px;
    color: #303133;
    font-weight: bold;
    line-height: 1.5;
}
.ind-ab-news-date{
    margin-top: 8px;
    font-size: 13px;
    color: #bbbbbb;
    line-height: 1.4;
}
.ind-ab-news-desc{
    margin-top: 10px;
    font-size: 14px;
    color: #999999;
    line-height: 1.8;
}
.ind-ab-news-link:hover .ind-ab-news-title{
    color: #BA7517;
}

/* 分页器（同原页面：方形页码，当前页黄底） */
.ind-ab-pager{
    margin-top: 40px;
    text-align: center;
}
.ind-ab-pager > a,
.ind-ab-pager > span{
    display: inline-block;
    min-width: 34px;
    height: 34px;
    line-height: 32px;
    margin: 0 5px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #ffffff;
    color: #666666;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ind-ab-pager > a:hover{
    border-color: #FEC901;
    color: #303133;
}
.ind-ab-pager > .is-on{
    background: #FEC901;
    border-color: #FEC901;
    color: #303133;
    cursor: default;
}
.ind-ab-pager > .is-dis{
    color: #cccccc;
    cursor: default;
}
.ind-ab-pager > .is-dis:hover{
    border-color: #e8e8e8;
    color: #cccccc;
}

/* ---- 加入我们：岗位卡片 ---- */
.ind-ab-jobs > li{
    padding: 32px 36px;
    background: #fafafa;
    border-radius: 12px;
    margin-top: 24px;
}
.ind-ab-jobs > li:first-child{
    margin-top: 0;
}
.ind-ab-job-title{
    font-size: 22px;
    color: #303133;
    font-weight: normal;
    line-height: 1.3;
}
.ind-ab-job-meta{
    margin-top: 10px;
    font-size: 14px;
    color: #999999;
}
.ind-ab-job-block{
    margin-top: 20px;
}
.ind-ab-job-label{
    font-size: 15px;
    color: #303133;
}
.ind-ab-job-text{
    margin-top: 8px;
    font-size: 14px;
    color: #666666;
    line-height: 1.9;
}
.ind-ab-job-mail{
    margin-top: 20px;
    font-size: 14px;
    color: #BA7517;
}

/* ---- 联系我们：左表单 + 右联系方式 ---- */
.ind-ab-contact{
    display: flex;
    align-items: flex-start;
}
.ind-ab-contact-form{
    flex: 1;
}
.ind-ab-contact-info{
    flex: 0 0 420px;
    margin-left: 80px;
}
.ind-ab-field-row{
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.ind-ab-input,
.ind-ab-textarea{
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fafafa;
    font-size: 14px;
    color: #303133;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s, background 0.18s;
}
.ind-ab-input{
    height: 48px;
    padding: 0 18px;
}
.ind-ab-textarea{
    margin-top: 20px;
    height: 168px;
    padding: 14px 18px;
    resize: none;
}
.ind-ab-input:focus,
.ind-ab-textarea:focus{
    border-color: #FEC901;
    background: #ffffff;
}
.ind-ab-tip{
    margin-top: 12px;
    min-height: 21px;
    font-size: 14px;
    line-height: 1.5;
}
.ind-ab-tip.is-ok{
    color: #1D9E75;
}
.ind-ab-tip.is-err{
    color: #D85A30;
}
.ind-ab-submit{
    display: block;
    /* rightNav.css:255 有个无作用域的全局 button{ margin:25px auto } 会把它居中，这里显式覆盖 */
    margin: 8px 0 0;
    width: 144px;
    height: 44px;
    border: none;
    border-radius: 5px;
    background: #FEC901;
    color: #303133;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s;
}
.ind-ab-submit:hover{
    background: #FEE13A;
}

.ind-ab-info > li{
    display: flex;
    align-items: flex-start;
    margin-top: 36px;
}
.ind-ab-info > li:first-child{
    margin-top: 32px;
}
.ind-ab-info-ico{
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 18px;
    border-radius: 50%;
    background: #fafafa;
    border: 1px solid #efefef;
    position: relative;
}
.ind-ab-info-ico::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
/* 三个图标用纯 CSS 画，避免额外图片 */
.ind-ab-ico-tel::before{
    width: 10px;
    height: 16px;
    border: 2px solid #666666;
    border-radius: 3px;
}
.ind-ab-ico-mail::before{
    width: 18px;
    height: 13px;
    border: 2px solid #666666;
    border-radius: 2px;
}
.ind-ab-ico-addr::before{
    width: 12px;
    height: 12px;
    border: 2px solid #666666;
    border-radius: 50% 50% 50% 0;
    transform: translate(-50%,-60%) rotate(-45deg);
}
.ind-ab-info-label{
    font-size: 15px;
    color: #303133;
    line-height: 1.4;
}
.ind-ab-info-val{
    margin-top: 8px;
    font-size: 15px;
    color: #666666;
    line-height: 1.7;
}

/* ===================== 9. isv 页专用 ===================== */

/* Hero 要点列表（数据源 = hero列表 变量，一行一条） */
.ind-hero-list{
    margin-top: 18px;
}
.ind-hero-list-item{
    position: relative;
    padding-left: 16px;
    margin-top: 8px;
    font-size: 15px;
    color: rgba(255,255,255,0.82);
    line-height: 1.7;
}
.ind-hero-list-item::before{
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FEC901;
}

/* 案例展示：N 个媒体并排（只有图或视频，没有文字） */
.ind-isv-case{
    padding: 96px 0;
}
.ind-isv-case-list{
    display: flex;
    gap: 30px;
    margin-top: 56px;
}
.ind-isv-case-item{
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}
.ind-isv-case-item > img,
.ind-isv-case-item > video{
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}
/* 只有一条时不要拉满整行 */
.ind-isv-case-list > li:only-child{
    max-width: calc(50% - 15px);
    margin: 0 auto;
}

/* IT流程化开发 */
.ind-isv-it{
    padding: 96px 0;
}
/* 标题/副标题与下方 tab 条之间留出距离（副标题自带 24px 上边距，这里补 tab 的上边距） */
.ind-isv-it .ind-sw-tabs{
    margin-top: 56px;
}
/* 还没做设计图的 tab（PLM/OA/WMS/CMS）：文字占位 */
.ind-isv-placeholder{
    padding: 60px 0;
    text-align: center;
    font-size: 15px;
    line-height: 2;
    color: #999999;
}
.ind-isv-placeholder p{
    margin-top: 10px;
}

/* ===================== 10. 卡片网格组件（blocks/cardGrid.php） ===================== */
.ind-grid{
    margin-top: 64px;
}
/* 左对齐的区块标题（卡片网格 / FAQ 用） */
.ind-sec-title-left{
    font-size: 26px;
    color: #303133;
    font-weight: bold;
    line-height: 1.4;
}
.ind-grid-list{
    display: flex;
    gap: 24px;
    margin-top: 32px;
}
.ind-grid-item{
    /* 与页脚同理：basis 设 0 才能等宽 */
    flex: 1 1 0;
    min-width: 0;
    padding: 28px 26px;
    background: #ffffff;
    border: 1px solid #efefef;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.ind-grid-title{
    font-size: 18px;
    color: #303133;
    font-weight: bold;
    line-height: 1.5;
}
.ind-grid-desc{
    margin-top: 14px;
    font-size: 14px;
    color: #888888;
    line-height: 1.9;
}
.ind-grid-desc p{
    margin-top: 8px;
}
.ind-grid-desc p:first-child{
    margin-top: 0;
}

/* ===================== 11. 常见问题解答组件（blocks/faq.php） ===================== */
.ind-acc{
    margin-top: 64px;
}
.ind-acc-list{
    margin-top: 32px;
}
.ind-acc-item{
    background: #ffffff;
    /* 设计图：卡片看不到描边，只有柔和的悬浮阴影 */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-top: 16px;
    overflow: hidden;
}
.ind-acc-item:first-child{
    margin-top: 0;
}
.ind-acc-q{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    cursor: pointer;
}
.ind-acc-qtext{
    font-size: 17px;
    color: #303133;
    font-weight: bold;
    line-height: 1.5;
}
/* 箭头：设计图是「细长扁平」的 chevron（不是旋转方块）
   用两条 9×2px 的横线各转 ±38° 拼出来，展开时两根线一起翻向，动效平滑 */
.ind-acc-arrow{
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 9px;
    margin-left: 20px;
}
.ind-acc-arrow::before,
.ind-acc-arrow::after{
    content: '';
    position: absolute;
    top: 0;
    width: 9px;
    height: 2px;
    background: #c0c4cc;
    transition: transform 0.28s ease;
}
.ind-acc-arrow::before{
    left: 0;
    transform-origin: left center;
    transform: rotate(38deg);
}
.ind-acc-arrow::after{
    right: 0;
    transform-origin: right center;
    transform: rotate(-38deg);
}
/* 展开：两根线翻向，变成朝上的 chevron */
.ind-acc-open .ind-acc-arrow::before{
    transform: rotate(-38deg);
}
.ind-acc-open .ind-acc-arrow::after{
    transform: rotate(38deg);
}
/* 答案高度由 faq.js 用 max-height 控制，这里只声明过渡 */
.ind-acc-a{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
}
.ind-acc-a-inner{
    padding: 0 28px 26px;
    font-size: 14px;
    color: #888888;
    line-height: 2;
}
.ind-acc-a-inner p{
    margin-top: 10px;
}
.ind-acc-a-inner p:first-child{
    margin-top: 0;
}
.ind-acc-a-inner ul{
    margin-top: 10px;
    padding-left: 20px;
    list-style: disc;
}
.ind-acc-a-inner li{
    margin-top: 8px;
    list-style: disc;
}
.ind-acc-a-inner strong{
    color: #555555;
}

/* ===================== 12. 功能表格组件（blocks/tableList.php） ===================== */
.ind-table{
    margin-top: 64px;
}
.ind-table-wrap{
    margin-top: 32px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
}
.ind-table-row{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.ind-table-row:last-child{
    border-bottom: 0;
}
.ind-table-c1{
    flex: 0 0 42%;
    padding: 22px 28px;
    font-size: 15px;
    color: #303133;
    font-weight: bold;
    box-sizing: border-box;
}
.ind-table-c2{
    flex: 1 1 0;
    min-width: 0;
    padding: 22px 28px;
    font-size: 14px;
    color: #777777;
    box-sizing: border-box;
}
/* 表头行：浅灰底 + 常规字重 */
.ind-table-head{
    background: #f7f8fa;
}
.ind-table-head .ind-table-c1,
.ind-table-head .ind-table-c2{
    font-weight: normal;
    color: #555555;
}

/* ===================== 13. 白底页面标题区（无 Hero 的页面用） ===================== */
.ind-pagehead{
    padding: 92px 0 0;
}
.ind-pagehead-title{
    font-size: 36px;
    color: #333333;
    font-weight: normal;
    text-align: center;
    line-height: 1.2;
}
.ind-pagehead-sub{
    margin-top: 26px;
    font-size: 16px;
    color: #999999;
    text-align: center;
    line-height: 1.7;
}
/* 标题区下方的整图（用于图形过于复杂、用图片代替的区块，如 3D打印技术流程图） */
.ind-pagehead-media{
    margin-top: 56px;
}
.ind-pagehead-media > img{
    width: 100%;
    height: auto;
    display: block;
}

/* ===================== 6. Hero 右侧图卡组 ===================== */
.ind-hero-hascards .ind-hero-inner{
    display: flex;
    align-items: center;
    padding-top: 0;
    height: 480px;
}
.ind-hero-main{
    flex: 1;
    min-width: 0;
}
.ind-hero-cards{
    display: flex;
    flex: 0 0 auto;
    margin-left: 60px;
}
.ind-hero-card{
    width: 196px;
    margin-left: 24px;
    text-align: center;
}
.ind-hero-card:first-child{
    margin-left: 0;
}
.ind-hero-card-media{
    width: 196px;
    height: 132px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
}
.ind-hero-card-media > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ind-hero-card-name{
    margin-top: 14px;
    font-size: 15px;
    color: #ffffff;
    line-height: 1.4;
}

/* ===================== 7. 步骤流程图（锯齿排布） ===================== */
.ind-flow-list{
    display: flex;
    justify-content: space-between;
    margin-top: 64px;
}
.ind-flow-item{
    width: 18%;
    text-align: center;
}
.ind-flow-item:nth-child(even){
    margin-top: 120px;
}
.ind-flow-media{
    width: 100%;
    height: 150px;
    margin-bottom: 18px;
}
.ind-flow-media > img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: inline-block;
}
.ind-flow-no{
    font-size: 34px;
    font-weight: bold;
    color: #b9b9b9;
    line-height: 1;
    font-family: Arial, sans-serif;
}
.ind-flow-title{
    margin-top: 12px;
    font-size: 18px;
    color: #303133;
    font-weight: bold;
    line-height: 1.4;
}
.ind-flow-desc{
    margin-top: 10px;
    font-size: 13px;
    color: #888888;
    line-height: 1.7;
}

/* ===================== 8. 左图右文（材料挑选指南） ===================== */
.ind-guide-row{
    display: flex;
    align-items: center;
    margin-top: 56px;
}
.ind-guide-media{
    flex: 1;
}
.ind-guide-media > img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
.ind-guide-text{
    flex: 1;
    margin-left: 60px;
}
.ind-guide-desc{
    font-size: 15px;
    line-height: 2.1;
    color: #666666;
}
/* blkText() 会把「多行文本」字段按空行拆成 <p> 段落 —— 这里给段落加上间距 */
.ind-hero-desc p,
.ind-guide-desc p{
    margin: 0 0 14px;
}
.ind-hero-desc p:last-child,
.ind-guide-desc p:last-child{
    margin-bottom: 0;
}
.ind-guide-btn{
    display: inline-block;
    margin-top: 32px;
    width: 144px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #FEC901;
    color: #303133;
    font-size: 16px;
    border-radius: 5px;
}
.ind-guide-btn:hover{
    background: #FEE13A;
}

/* ===================== 9. 问答帮助 ===================== */
.ind-faq{
    padding: 78px 0 96px;
}
.ind-faq-title{
    font-size: 34px;
    color: #333333;
    font-weight: normal;
    line-height: 1.3;
}
.ind-faq-search{
    position: relative;
    margin-top: 34px;
    height: 62px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.ind-faq-search > input{
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0 78px 0 26px;
    font-size: 15px;
    color: #333333;
    box-sizing: border-box;
    outline: none;
}
.ind-faq-search > input::placeholder{
    color: #b5b5b5;
}
.ind-faq-search > button{
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -21px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #FEC901;
    cursor: pointer;
}
/* 放大镜图标（纯 CSS 画，避免额外图片） */
.ind-faq-search > button::before{
    content: '';
    position: absolute;
    left: 13px;
    top: 11px;
    width: 12px;
    height: 12px;
    border: 2px solid #333333;
    border-radius: 50%;
}
.ind-faq-search > button::after{
    content: '';
    position: absolute;
    left: 25px;
    top: 24px;
    width: 8px;
    height: 2px;
    background: #333333;
    transform: rotate(45deg);
    transform-origin: left center;
}
.ind-faq-bar{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 76px;
}
.ind-faq-bar-title{
    font-size: 30px;
    color: #333333;
    font-weight: normal;
    line-height: 1.3;
}
/* 搜索页：结果计数 */
.ind-faq-count{
    font-size: 14px;
    color: #999999;
}
/* 搜索页：无结果 / 未输入关键词时的提示 */
.ind-faq-empty{
    padding: 90px 0;
    text-align: center;
    font-size: 15px;
    line-height: 2.2;
    color: #999999;
}
.ind-faq-empty a{
    color: #e6a800;
}
.ind-faq-empty a:hover{
    text-decoration: underline;
}
.ind-faq-more{
    font-size: 14px;
    color: #999999;
}
a.ind-faq-more:hover{
    color: #FEC901;
}
.ind-faq-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 26px;
    margin-top: 34px;
}
.ind-faq-item{
    background: #ffffff;
    border: 1px solid #ededed;
    border-radius: 8px;
    padding: 26px 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    box-sizing: border-box;
}
.ind-faq-q{
    font-size: 17px;
    color: #303133;
    font-weight: bold;
    line-height: 1.5;
}
.ind-faq-a{
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9;
    color: #777777;
}

/* ===================== 10. 材料详情页 ===================== */
.ind-material{
    /* 顶部留出与 Hero 之间的间隔；底部保留原有留白 */
    padding: 56px 0 96px;
}
.ind-mat-wrap{
    display: flex;
    align-items: flex-start;
}

/* 左侧「所有材料」导航
   宽度 340px：详情区 = 1400 - 340 - 40(间隔) = 1020px。
   正文里的配图自然宽约 630px，详情区收窄后右侧空白明显减少。
   （老设计是侧栏 220 / 详情 938，比例接近） */
.ind-mat-nav{
    flex: 0 0 340px;
    width: 340px;
    background: #ffffff;
    border: 1px solid #ededed;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    padding-bottom: 12px;
    box-sizing: border-box;
}
.ind-mat-nav-title{
    font-size: 18px;
    font-weight: normal;
    color: #303133;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.ind-mat-nav-group{
    border-bottom: 1px solid #f5f5f5;
}
.ind-mat-nav-group:last-child{
    border-bottom: 0;
}
.ind-mat-nav-cat{
    position: relative;
    padding: 14px 44px 14px 24px;
    font-size: 15px;
    color: #333333;
    cursor: pointer;
}
.ind-mat-nav-group .ind-mat-nav-cat:hover{
    background: #fffaf0;
}
/* 折叠箭头（纯 CSS 画，避免额外图片） */
.ind-mat-nav-cat > i{
    position: absolute;
    right: 24px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    transform: rotate(45deg);
    transition: transform .2s;
}
.ind-mat-nav-open .ind-mat-nav-cat > i{
    transform: rotate(-135deg);
    margin-top: -2px;
}
.ind-mat-nav-sub{
    display: none;
    padding: 0 0 10px;
}
.ind-mat-nav-open .ind-mat-nav-sub{
    display: block;
}
.ind-mat-nav-sub > li > a{
    display: block;
    padding: 9px 24px 9px 40px;
    font-size: 14px;
    color: #777777;
}
.ind-mat-nav-sub > li > a:hover{
    color: #333333;
    background: #fffaf0;
}
/* 当前材料高亮 */
.ind-mat-nav-sub > li.ind-mat-nav-on > a{
    color: #333333;
    font-weight: 600;
    background: #fff6dd;
}

/* 右侧材料详情 */
.ind-mat-main{
    flex: 1;
    min-width: 0;
    margin-left: 40px;
}
.ind-mat-cover{
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}
.ind-mat-cover > img{
    width: 100%;
    height: auto;
    display: block;
}
/* 正文在左、配图在右侧竖排 —— 与原 materialClass.php 的布局一致
   （原版 .zhengwen 650px 左浮动 + .rightImgBx 220px 右浮动） */
.ind-mat-detail{
    display: flex;
    align-items: flex-start;
}
.ind-mat-body{
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 2.1;
    color: #555555;
}
.ind-mat-pics{
    flex: 0 0 280px;
    width: 280px;
    margin-left: 40px;
}
.ind-mat-pics > img{
    width: 100%;
    height: auto;
    display: block;
    margin-top: 32px;
    border-radius: 6px;
}
.ind-mat-pics > img:first-child{
    margin-top: 0;
}
.ind-mat-body img{
    max-width: 100%;
    height: auto;
}
.ind-mat-body h1,
.ind-mat-body h2,
.ind-mat-body h3{
    font-size: 20px;
    font-weight: normal;
    color: #303133;
    margin: 28px 0 12px;
}
.ind-mat-body p{
    margin: 0 0 12px;
}
.ind-mat-body table{
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.ind-mat-body td,
.ind-mat-body th{
    border: 1px solid #ededed;
    padding: 8px 12px;
    font-size: 14px;
}

/* ===================== 响应式兜底 ===================== */
/* 断点依据：Windows 缩放会让 CSS 视口变小
   1920×1080 @125% → 视口 1536；@150% → 视口 1280；@175% → 视口 1097 */
@media screen and (max-width: 1440px){
    .ind-inner,
    .ind-hero-inner{
        width: 1200px;
    }
    .ind-card-grid{
        column-gap: 30px;
    }
    .ind-quick-card{
        padding: 0 32px;
    }
    .ind-quick-btn{
        flex: 0 0 200px;
        width: 200px;
    }
}

/* 视口 < 1240（1920×1080 @150% 缩放 = 1280；@175% ≈ 1097）
   再往下就不锁宽度了，改为流式 + 左右留白，避免出现横向滚动条 */
@media screen and (max-width: 1240px){
    .ind-inner,
    .ind-hero-inner{
        width: 100%;
        max-width: 1200px;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .ind-card-grid{
        column-gap: 24px;
    }
    .ind-quick-card{
        padding: 0 24px;
    }
    .ind-quick-btn{
        flex: 0 0 180px;
        width: 180px;
    }
}