/* ============================================================
   陕西中恒钛航 — 质量体系页 Tab切换样式（简洁横线式）
   适用页面：质量体系 / 执行标准 / 工艺流程 / 检测报告
   设计特色：严谨简洁、底部横线指示、3个子类严格等分
   与产品类(cp-tab.css)、设备类(shebei.css)的区别：
     - 产品类：深空蓝容器Tab
     - 设备类：透明横线Tab + 16:9大图卡片
     - 质量类：透明横线Tab + 左图右文新闻列表
   配色体系：深空蓝 #0A2540 + 钛橙 #E67E22 + 钛银灰 #8B9DC3
   编码：UTF-8（防止注释乱码）
   加载顺序：需在 default.css 之后加载
   ============================================================ */

/* ============================================================
   一、主容器
   ============================================================ */
.sxzh_cp_main {
    margin: 24px 0 40px;
    position: relative;
}
.product {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* ============================================================
   二、Tab分类导航（质量体系 — 简洁横线式）
   3个子类：执行标准 / 工艺流程 / 检测报告
   ============================================================ */
.product > .hd {
    width: 100%;
    height: auto;
    padding: 0;
    margin-bottom: 28px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #E6E9EE;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    line-height: normal;
    box-sizing: border-box;
    position: relative;
}
/* 顶部装饰线去除 */
.product > .hd::before {
    display: none;
}

/* Tab列表 — table布局强制3等分 */
.product > .hd ul {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

/* 单个Tab项 — table-cell自动等分 */
.product > .hd ul li {
    display: table-cell !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    text-align: center !important;
    float: none !important;
    position: relative !important;
    overflow: visible !important;
    vertical-align: middle !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Tab之间分割线（质量体系特色：浅灰竖线） */
.product > .hd ul li:not(:last-child)::before {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: #E6E9EE;
    z-index: 1;
}

/* 底部钛橙指示线（默认隐藏，hover/选中展开） */
.product > .hd ul li::after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #E67E22, #d35400) !important;
    transition: width 0.35s ease !important;
    z-index: 2 !important;
    display: block !important;
}
.product > .hd ul li:hover::after {
    width: 50% !important;
}
.product > .hd ul li.on::after {
    width: 60% !important;
}

/* Tab链接 */
.product > .hd ul li a {
    display: block !important;
    width: 100% !important;
    padding: 14px 8px !important;
    color: #5A6472 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: 2px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
.product > .hd ul li:hover a {
    color: #E67E22 !important;
}
.product > .hd ul li.on a {
    color: #E67E22 !important;
    font-weight: 700 !important;
}
.product > .hd ul li.on a:hover {
    color: #d35400 !important;
}
.product > .hd ul li.on:active {
    transform: scale(0.99);
}

/* ============================================================
   三、内容区域切换动画
   ============================================================ */
.product > .bd {
    width: 100%;
    animation: qualityFadeIn 0.4s ease;
}
@keyframes qualityFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.product > .bd .sxzh_news_l_main {
    margin-top: 8px;
}

/* ============================================================
   四、响应式适配
   ============================================================ */

/* ---------- 大屏 PC (>1400px) ---------- */
@media screen and (min-width: 1401px) {
    .product > .hd ul li a {
        padding: 16px 10px !important;
        font-size: 16px !important;
        letter-spacing: 2.5px !important;
    }
    .product > .hd {
        margin-bottom: 32px;
    }
}

/* ---------- 平板 (769px ~ 1024px) ---------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .product > .hd ul li a {
        padding: 13px 6px !important;
        font-size: 14px !important;
        letter-spacing: 1px !important;
    }
}

/* ---------- 手机 (481px ~ 768px) ---------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .sxzh_cp_main {
        margin: 16px 0 30px;
    }
    .product > .hd {
        margin-bottom: 22px;
    }
    .product > .hd ul li a {
        padding: 12px 4px !important;
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
    }
    .product > .hd ul li:not(:last-child)::before {
        top: 20%;
        height: 60%;
    }
}

/* ---------- 小屏手机 (≤480px) ---------- */
@media screen and (max-width: 480px) {
    .sxzh_cp_main {
        margin: 12px 0 26px;
    }
    .product > .hd {
        margin-bottom: 18px;
    }
    .product > .hd ul li a {
        padding: 10px 2px !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
    .product > .hd ul li:not(:last-child)::before {
        top: 20%;
        height: 60%;
    }
}

/* ---------- 超小屏 (≤360px) ---------- */
@media screen and (max-width: 360px) {
    .product > .hd ul li a {
        padding: 9px 1px !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
    }
}

/* ============================================================
   质量体系页 Tab样式 — 结束
   ============================================================ */