:root {
    --primary-color: #004a99;    
    --secondary-color: #007bff;     
    --text-dark: #1a1a1a;          
    --text-light: #4a4a4a;          
    --bg-light: #f8fafc;            
    --accent-blue: #eef6ff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 25px rgba(0,0,0,0.08);
    --radius: 12px;             
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.8; /* 增加行高，提升阅读舒适度 */
    color: var(--text-light);
    background-color: var(--bg-light);
    -webkit-font-smoothing: antialiased;
}

.tag-page-container {
    max-width: 1400px; 
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- Hero Section 优化 --- */
.tag-hero-section {
    text-align: center;
    padding: 60px 0;
    background: linear-gradient(180deg, #fff 0%, var(--bg-light) 100%);
    border-radius: var(--radius);
    margin-bottom: 50px;
}

.tag-title {
    font-size: 42px; /* 适中的超大标题 */
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.tag-hero-section .hero-section-p {
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 30px;
}

.editor-content-1 {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 18px;
    color: #444;
    padding: 35px;
    background-color: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border-left: 8px solid var(--primary-color);
    text-align: left;
}

/* --- 内容布局 (Content Matrix) --- */
.content-matrix {
    display: grid;
    gap: 50px; /* 增加间距 */
    grid-template-columns: 2.2fr 1fr; 
}

/* --- 通用模块样式 --- */
.editor-module {
    background: white;
    padding: 40px;
    border-radius: var(--radius);
    margin-bottom: 40px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.editor-module:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.editor-module h2, .editor-module h3, .editor-module h4 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 25px;
    text-align: left; /* 侧边对齐更符合阅读习惯 */
}

/* --- 专业表格美化 (重点) --- */
.info-column1 table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 25px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.info-column1 table th {
    background-color: #f1f5f9;
    color: var(--primary-color);
    padding: 18px;
    font-size: 16px;
    border-bottom: 2px solid var(--border-color);
}

.info-column1 table td {
    padding: 15px 18px;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    color: #334155;
}

.info-column1 table tr:nth-child(even) {
    background-color: #fafbfc;
}

.info-column1 table tr:hover {
    background-color: var(--accent-blue); /* 鼠标悬浮表格变色 */
}

/* --- 列表优化 --- */
.editor-module ul li {
    padding: 12px 0 12px 30px;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.6;
    font-size: 16px;
}

.editor-module ul li::before {
    content: '→'; /* 换成更有工业感的箭头 */
    color: var(--secondary-color);
    font-size: 18px;
}

/* --- 优势板块 (jinfeng-ul-1) 优化 --- */
.jinfeng-ul-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.jinfeng-ul-1 li {
    background: white;
    border: 1.5px solid #eee;
    border-radius: 12px;
    padding: 25px !important;
    height: auto;
    flex-direction: column; /* 图标在上文字在下 */
    text-align: center;
}

.jinfeng-ul-1 li::before {
    margin-right: 0;
    margin-bottom: 15px;
}

.jinfeng-ul-1 li span {
    font-size: 16px;
    font-weight: 700;
}

/* --- FAQ 模块美化 --- */
.editor-module-faq {
    background: white;
    border: none;
    box-shadow: var(--shadow-sm);
}

.editor-module-faq ul {
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
    border-radius: 8px;
}

.editor-module-faq li:first-child {
    background-color: #fff;
    padding: 20px;
    font-size: 16px;
    color: var(--primary-color);
}

.editor-module-faq li:first-child:hover {
    background-color: var(--accent-blue);
}

.editor-module-faq li:last-child {
    background-color: #fcfcfc;
    line-height: 1.8;
    font-size: 15px;
}

/* --- 底部推荐链接 --- */
.related-tags-box {
    margin-top: 60px;
    padding: 40px;
    background: white;
    border-radius: var(--radius);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tags-list a {
    background: #f1f5f9;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    color: #475569;
    border: 1px solid transparent;
    transition: 0.3s;
}

.tags-list a:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

/* 响应式 */
@media (max-width: 1024px) {
    .content-matrix { grid-template-columns: 1fr; }
    .tag-title { font-size: 32px; }
}


/* --- 1. 强化模块内部标题 (解决标题太小问题) --- */
.editor-module h3, 
.editor-module h4, 
.editor-module-faq h4,
.info-column1 h4 {
    font-size: 28px !important; /* 显著加大字号 */
    font-weight: 800 !important;
    color: var(--primary-color);
    margin-top: 10px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-block; /* 让边框只跟文字等长 */
    text-align: left !important;
}

/* --- 2. 修复 FAQ 文字溢出及样式 --- */
.editor-module-faq {
    max-width: 100% !important;
    overflow: hidden;
}
.editor-module-faq ul {
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}
.editor-module-faq li:first-child {
    font-size: 18px !important;
    font-weight: 700;
    padding: 18px 45px 18px 20px !important;
    cursor: pointer;
    position: relative;
    color: var(--text-dark);
}
.editor-module-faq li:last-child {
    padding: 0 20px;
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* 默认隐藏 */
    transition: all 0.4s ease;
    word-wrap: break-word; /* 强制换行防止溢出 */
    line-height: 1.8;
    background-color: #f9f9f9;
}
.editor-module-faq li:last-child.active {
    max-height: 2000px; /* 足够容纳长文字 */
    padding: 20px;
    opacity: 1;
}

/* --- 3. 针对 Primary Applications 等列表的自动格式化 --- */
.editor-module ul, 
.main-content-column section ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}
.editor-module ul li, 
.main-content-column section ul li {
    background: #fff;
    border: 1px solid #edf2f7;
    margin-bottom: 10px;
    padding: 15px 15px 15px 40px !important;
    border-radius: 6px;
    position: relative;
    font-size: 16px;
    color: var(--text-light);
    transition: 0.3s;
}
.editor-module ul li::before, 
.main-content-column section ul li::before {
    content: '✔'; /* 专业的勾选符号 */
    position: absolute;
    left: 15px;
    color: var(--secondary-color);
    font-weight: bold;
}
.editor-module ul li:hover {
    background: var(--accent-blue);
    padding-left: 45px !important;
}

/* --- 4. Featured Products 产品标题样式 --- */
.list .grid-box li .text h4 {
    margin-top: 15px;
    font-size: 20px !important;
    font-weight: 700;
}
.list .grid-box li .text h4 a {
    color: var(--primary-color);
    text-decoration: none;
    transition: 0.3s;
}
.list .grid-box li .text h4 a:hover {
    color: var(--secondary-color);
}
.list .grid-box li .text p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-top: 8px;
}

/* --- 5. 表格细节优化 --- */
.info-column1 table {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.info-column1 table th {
    font-size: 17px !important;
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* --- 6. About Section 文字优化及间距 --- */
.about2-page .con p {
    font-size: 16px;
    line-height: 2;
    color: #444;
    margin-bottom: 15px;
}

section.product-preview-section {
    margin-bottom: 100px;
}
p.MFR-p {
    font-size: 18px;
}

















/* --- 纵向指南版块容器 --- */
.mfr-vertical-guide {
    background-color: #ffffff;
    padding: 60px 0;
    margin-top: 50px;
    border-top: 1px solid #f0f0f0;
}

.mfr-guide-inner {
    max-width: 1200px; /* 纵向排版不需要太宽，方便阅读 */
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 动态内容样式逻辑 --- */

/* 1. 版块大标题 (Maintenance & Installation Guide) */
.mfr-guide-body h4:first-child {
    font-size: 36px !important;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 40px;
    text-align: left;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

/* 2. 中间的小标题 (如 Installation Procedures) */
.mfr-guide-body h4:not(:first-child) {
    font-size: 24px !important;
    color: #333;
    margin-top: 50px;
    margin-bottom: 25px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.mfr-guide-body h4:not(:first-child)::before {
    content: "";
    width: 6px;
    height: 24px;
    background: var(--secondary-color);
    margin-right: 15px;
    border-radius: 2px;
}

/* 3. 段落文本 */
.mfr-guide-body p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
}

/* 4. 列表：纵向堆叠结构 */
.mfr-guide-body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. 每一个条目 (每一个卡片横条) */
.mfr-guide-body ul li {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 30px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease;
}

.mfr-guide-body ul li:hover {
    background: #ffffff;
    border-color: var(--secondary-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 重点：标题在上，描述在下 */
.mfr-guide-body ul li strong {
    display: block !important; /* 强制换行，标题在上 */
    font-size: 20px !important;
    color: var(--primary-color) !important;
    margin-bottom: 12px !important; /* 给标题和文字留出间距 */
    font-weight: 700;
}

/* 描述文字样式 */
.mfr-guide-body ul li br + text, 
.mfr-guide-body ul li {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.7;
}

/* --- 底部注意事项 --- */
.mfr-guide-notice {
    margin-top: 40px;
    padding: 20px;
    background-color: #fff9f0;
    border-radius: 8px;
    border: 1px dashed #ffd8a8;
}

.mfr-guide-notice p {
    font-size: 14px;
    color: #87593b;
    margin: 0;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .mfr-guide-body h4:first-child { font-size: 28px !important; }
    .mfr-guide-body ul li { padding: 20px !important; }
}










/* --- det2 (Primary Applications) 纵向美化样式 --- */

.editor-module1 {
    padding: 60px 0;
    background-color: transparent;
}

/* 1. 自动处理版块大标题 (Primary Applications) */
.editor-module1 h3, 
.editor-module1 h4:first-child {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    margin-bottom: 40px !important;
    text-align: left !important;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

/* 2. 列表容器：单列纵向排列 */
.editor-module1 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 1200px;
}

/* 3. 应用项卡片：上下排版 */
.editor-module1 ul li {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 10px !important;
    padding: 30px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

/* 悬浮效果 */
.editor-module1 ul li:hover {
    transform: translateX(10px) !important; /* 向右轻微平移，引导阅读 */
    border-color: var(--secondary-color) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}

/* 4. 重点：应用场景标题 (Strong标签) 在上方 */
.editor-module1 ul li strong {
    display: block !important; /* 强制换行 */
    font-size: 20px !important;
    color: var(--primary-color) !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* 5. 应用场景的具体描述在下方 */
.editor-module1 ul li {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4a5568 !important;
}




/* 如果 det2 里面还有其他小标题 */
.editor-module1 h4:not(:first-child) {
    font-size: 22px !important;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #333;
}









/* --- FAQ 直铺版块容器 --- */
.mfr-faq-static-section {
    background-color: #f9fbfe; /* 浅色背景区分版块 */
    padding: 80px 0;
    margin-top: 50px;
}

.mfr-faq-static-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.mfr-faq-main-title {
    font-size: 36px !important;
    font-weight: 800;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 50px !important;
}

/* --- 动态内容直铺逻辑 --- */

/* 每一个问答单元 (UL) */
.mfr-faq-static-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important; /* 每个问题之间的间距 */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
}

.mfr-faq-static-list ul:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--secondary-color);
}

/* 问题部分 (第一个 LI) */
.mfr-faq-static-list ul li:first-child {
    padding: 25px 30px !important;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--primary-color);
    background-color: #f1f5f9; /* 给问题一个浅色基调 */
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.4;
}

/* 加上 Q: 标识 */
.mfr-faq-static-list ul li:first-child::before {
    content: "Q:";
    margin-right: 12px;
    color: var(--secondary-color);
    font-weight: 900;
}

/* 答案部分 (第二个 LI) */
.mfr-faq-static-list ul li:last-child {
    padding: 25px 30px !important;
    font-size: 17px !important;
    line-height: 1.8;
    color: #4a5568;
    background-color: #ffffff;
    display: block !important; /* 确保可见 */
    max-height: none !important; /* 覆盖之前的折叠样式 */
    opacity: 1 !important;
}

/* 加上 A: 标识 */
.mfr-faq-static-list ul li:last-child::before {
    content: "A:";
    margin-right: 10px;
    font-weight: 900;
    color: #10b981; /* 绿色代表回答 */
}

/* 响应式 */
@media (max-width: 768px) {
    .mfr-faq-main-title { font-size: 28px !important; }
    .mfr-faq-static-list ul li:first-child { font-size: 18px !important; padding: 20px !important; }
    .mfr-faq-static-list ul li:last-child { font-size: 16px !important; padding: 20px !important; }
}


/* --- Recommended Links 标题优化 --- */

.related-tags-box {
    margin-top: 60px;
    padding: 40px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

.related-tags-box h4 {
    font-size: 26px !important; /* 加大字号 */
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin-bottom: 25px !important;
    padding-left: 15px !important;
    border-left: 6px solid var(--secondary-color) !important; /* 统一的蓝色装饰条 */
    text-transform: capitalize; /* 自动首字母大写 */
    letter-spacing: 0.5px;
    display: block;
}

/* 顺手美化一下 A 标签，让它看起来更像“专业标签” */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tags-list a {
    background: #f1f5f9;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    color: #475569;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.tags-list a:hover {
    background: var(--secondary-color);
    color: #ffffff;
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}



/* --- Banner 高度减半优化 --- */

/* 1. 限制容器高度 */
#banner {
    height: 550px !important; /* 你可以根据视觉效果调整这个数值，比如 250px 到 350px */
    overflow: hidden;
    min-height: auto !important;
}

/* 2. 确保 Swiper 相关容器高度同步 */
#banner .swiper1, 
#banner .swiper-wrapper, 
#banner .swiper-slide, 
#banner .swiper-main {
    height: 100% !important;
}

/* 3. 关键：处理图片，防止变形 */
#banner .swiper-main img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover; /* 核心：图片会保持比例填充并自动裁剪上下多余部分，而不会被压扁 */
    object-position: center; /* 图片居中对齐 */
}

/* 4. 调整 Banner 上的文字位置 */
#banner .t-ani.text {
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 针对手机端的优化：手机端不需要减得太小，否则看不清 */
@media (max-width: 768px) {
    #banner {
        height: 200px !important; /* 手机端高度 */
    }
    #banner .t-ani.text .text1 {
        font-size: 25px !important; /* 缩小手机端文字 */
    }
}