.product-detail .description .feature-grid ul { display: grid; grid-template-columns: repeat(2, 1fr); /* 默认两列 */ gap: 20px; /* 间距 */ padding: 0; margin: 30px 0; list-style: none; } /* 响应式：小屏幕变单列 */ @media (max-width: 768px) { .product-detail .description .feature-grid ul { grid-template-columns: 1fr; } } /* 单个卡片样式 */ .product-detail .description .feature-grid ul li { display: flex; align-items: flex-start; background: #fff; border: 1px solid #eee; padding: 25px; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.03); } /* 鼠标悬停效果：上浮+阴影加深 */ .product-detail .description .feature-grid ul li:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #0056b3; /* 主题色边框 */ } /* 图标容器 */ .product-detail .description .feature-grid .icon-box { flex-shrink: 0; width: 50px; height: 50px; background: #f0f7ff; /* 浅蓝色背景 */ color: #0056b3; /* 图标颜色 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; } /* SVG 图标大小 */ .product-detail .description .feature-grid .icon-box svg { width: 28px; height: 28px; } /* 文本区域 */ .product-detail .description .feature-grid .text-box { flex: 1; } /* 标题样式 */ .product-detail .description .feature-grid .text-box h4 { margin: 0 0 10px 0; font-size: 18px; font-weight: 700; color: #333; line-height: 1.4; } /* 描述文字样式 */ .product-detail .description .feature-grid .text-box p { margin: 0; font-size: 14px; color: #666; line-height: 1.6; text-align: left; /* 确保左对齐 */ } /* 左图右文容器 */ .product-detail .description .product-split-section { display: flex; align-items: center; /* 垂直居中 */ gap: 40px; /* 图文间距 */ margin: 60px 0; background: #fff; padding: 20px; border-radius: 12px; } /* 左侧图片区域 */ .product-detail .description .split-img-box { flex: 1; min-width: 0; /* 防止图片溢出 */ border-radius: 8px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.08); } .product-detail .description .split-img-box img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .product-detail .description .split-img-box:hover img { transform: scale(1.03); } /* 右侧文字区域 */ .product-detail .description .split-text-box { flex: 1; min-width: 0; } /* 小标题样式 */ .product-detail .description .section-title { margin-bottom: 20px; } .product-detail .description .section-title h3 { font-size: 22px; color: #333; margin: 0 0 10px 0; font-weight: 700; } .product-detail .description .section-title .line { display: block; width: 50px; height: 3px; background: #0056b3; /* 主题色 */ border-radius: 2px; } /* 确保右侧文字段落样式统一 */ .product-detail .description .split-text-box .content p { font-size: 15px; color: #666; line-height: 1.8; margin-bottom: 15px; text-align: left; } /* 响应式：手机端改为上下排列 */ @media (max-width: 768px) { .product-detail .description .product-split-section { flex-direction: column; gap: 25px; padding: 15px; } .product-detail .description .split-img-box, .product-detail .description .split-text-box { width: 100%; } } /* 参数表格容器 */ .product-detail .description .tech-specs-container { margin: 60px 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee; } /* 表格标题区 */ .product-detail .description .specs-header { background: #f8f9fa; padding: 20px 30px; border-bottom: 1px solid #eee; } .product-detail .description .specs-header h3 { margin: 0 0 5px 0; font-size: 20px; color: #333; font-weight: 700; text-align: center; } .product-detail .description .specs-header p { text-align: center; margin: 0; font-size: 14px; color: #888; } /* 网格布局：默认双列 */ .product-detail .description .specs-grid { display: grid; grid-template-columns: 1fr 1fr; /* 两列等宽 */ gap: 0; /* 使用边框代替间距 */ } /* 单个参数项 */ .product-detail .description .spec-item { display: flex; flex-direction: column; padding: 20px 30px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; transition: background-color 0.3s ease; } /* 去掉每行最后一个元素的右边框 */ .product-detail .description .spec-item:nth-child(2n) { border-right: none; } /* 去掉最后一行的下边框 */ .product-detail .description .spec-item:nth-last-child(-n+2) { border-bottom: none; } /* 悬停效果 */ .product-detail .description .spec-item:hover { background-color: #f9fbff; } /* 参数标签（左侧/上方） */ .product-detail .description .spec-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 8px; font-weight: 600; } /* 参数值（右侧/下方） */ .product-detail .description .spec-value { font-size: 15px; color: #333; line-height: 1.5; font-weight: 500; } /* 响应式：手机端变为单列 */ @media (max-width: 768px) { .product-detail .description .specs-grid { grid-template-columns: 1fr; } .product-detail .description .spec-item { border-right: none; /* 手机端取消右边框 */ } .product-detail .description .spec-item:nth-last-child(1) { border-bottom: none; } } /* 产品引言块样式 */ .product-detail .description .product-intro-block { margin: 40px 0 50px 0; /* 上下间距，与下方特性列表拉开距离 */ padding: 30px 40px; background: #f8f9fa; /* 极浅的灰色背景，区分于白色卡片 */ border-left: 5px solid #0056b3; /* 左侧主题色强调线 */ border-radius: 0 8px 8px 0; /* 右侧圆角 */ box-shadow: 0 2px 10px rgba(0,0,0,0.02); } .product-detail .description .intro-content p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 15px; text-align: justify; /* 两端对齐，显得更整齐 */ } .product-detail .description .intro-content p:last-child { margin-bottom: 0; font-weight: 500; /* 最后一段稍微加粗，强调定制化 */ color: #333; } /* 响应式：手机端减小内边距 */ @media (max-width: 768px) { .product-detail .description .product-intro-block { padding: 20px 25px; border-left-width: 4px; } .product-detail .description .intro-content p { font-size: 15px; } } /* --- 核心特性图文板块样式 --- */ .product-detail .description .key-features-section { margin: 80px 0; } /* 大标题样式 */ .product-detail .description .section-main-header { text-align: center; margin-bottom: 60px; } .product-detail .description .section-main-header h2 { font-size: 28px; color: #333; font-weight: 700; margin-bottom: 15px; } .product-detail .description .header-line { display: inline-block; width: 60px; height: 4px; background: #0056b3; /* 主题色 */ border-radius: 2px; } /* 每一行特性容器 */ .product-detail .description .feature-row { display: flex; align-items: center; gap: 50px; /* 图文间距 */ margin-bottom: 80px; /* 模块间距 */ } /* 交错布局：当有 reverse 类时，调换顺序 */ .product-detail .description .feature-row.reverse { flex-direction: row-reverse; } /* 文字区域 */ .product-detail .description .feature-text { flex: 1; } .product-detail .description .feature-text h3 { font-size: 22px; color: #0056b3; margin-bottom: 20px; font-weight: 600; position: relative; /* padding-left: 15px; */ } /* 小标题左侧装饰竖线 */ /* .product-detail .description .feature-text h3::before { content: ''; position: absolute; left: 0; top: 4px; width: 4px; height: 20px; background: #0056b3; border-radius: 2px; } */ .product-detail .description .feature-text p { font-size: 15px; color: #666; line-height: 1.8; margin-bottom: 15px; text-align: justify; } /* 图片区域 */ .product-detail .description .feature-img { flex: 1; height: 5rem; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.3s ease; } .product-detail .description .feature-img:hover { transform: translateY(-5px); } .product-detail .description .feature-img img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .product-detail .description .feature-img:hover img { transform: scale(1.03); } /* 响应式：手机端改为上下排列 */ @media (max-width: 768px) { .product-detail .description .feature-row, .product-detail .description .feature-row.reverse { flex-direction: column; gap: 30px; margin-bottom: 50px; } .product-detail .description .section-main-header h2 { font-size: 22px; } .product-detail .description .feature-text h3 { font-size: 20px; } } /* --- 应用场景板块样式 --- */ .product-detail .description .applications-section { margin: 80px 0; } /* 居中标题 */ .product-detail .description .section-header-center { text-align: center; margin-bottom: 50px; } .product-detail .description .section-header-center h3 { font-size: 26px; color: #333; margin-bottom: 10px; font-weight: 700; } .product-detail .description .section-header-center p { font-size: 16px; color: #888; } /* 网格布局：3列 */ .product-detail .description .app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* 单个应用卡片 */ .product-detail .description .app-card { background: #fff; border: 1px solid #eee; padding: 30px 25px; border-radius: 8px; transition: all 0.3s ease; text-align: center; /* 内容居中 */ box-shadow: 0 2px 10px rgba(0,0,0,0.02); } /* 悬停效果 */ .product-detail .description .app-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: #0056b3; } /* 图标容器 */ .product-detail .description .app-icon { width: 60px; height: 60px; background: #f0f7ff; color: #0056b3; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; /* 居中且下方留白 */ transition: all 0.3s ease; } .product-detail .description .app-card:hover .app-icon { background: #0056b3; color: #fff; } .product-detail .description .app-icon svg { width: 30px; height: 30px; } /* 卡片标题 */ .product-detail .description .app-card h5 { font-size: 18px; color: #333; margin-bottom: 15px; font-weight: 600; } /* 卡片描述 */ .product-detail .description .app-card p { font-size: 14px; color: #666; line-height: 1.6; margin: 0; } /* 响应式：平板2列，手机1列 */ @media (max-width: 992px) { .product-detail .description .app-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .product-detail .description .app-grid { grid-template-columns: 1fr; } } /* --- 帘片特性与激活方式模块样式 --- */ .product-detail .description .curtain-activation-section { margin: 60px 0; background: #fff; } /* 1. 图文介绍行 */ .product-detail .description .ca-intro-row { display: flex; gap: 40px; align-items: center; margin-bottom: 60px; } .product-detail .description .ca-image-wrapper { flex: 1; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .product-detail .description .ca-image-wrapper img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .product-detail .description .ca-image-wrapper:hover img { transform: scale(1.03); } /* 图片上的标签 */ .product-detail .description .ca-img-badge { position: absolute; top: 20px; left: 20px; background: #0056b3; color: #fff; padding: 5px 12px; font-size: 12px; font-weight: 700; border-radius: 4px; text-transform: uppercase; } .product-detail .description .ca-text-content { flex: 1; } .product-detail .description .ca-text-content h3 { font-size: 24px; color: #333; margin-bottom: 20px; font-weight: 700; } .product-detail .description .ca-text-content p { font-size: 15px; color: #666; line-height: 1.8; margin-bottom: 15px; } /* 高亮提示框 */ .product-detail .description .ca-highlight-box { margin-top: 20px; padding: 15px 20px; background: #f0f7ff; border-left: 4px solid #0056b3; border-radius: 0 4px 4px 0; font-size: 14px; color: #0056b3; line-height: 1.6; } /* 2. 激活方式区块 */ .product-detail .description .ca-section-header { text-align: center; margin-bottom: 40px; } .product-detail .description .ca-section-header h4 { font-size: 22px; color: #333; margin-bottom: 10px; font-weight: 700; } .product-detail .description .ca-section-header p { font-size: 15px; color: #888; } /* 激活方式网格 */ .product-detail .description .act-item { background: #fff; padding: 25px; border-radius: 8px; text-align: center; transition: all 0.3s ease; border: 1px solid #eee; } .product-detail .description .act-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: #0056b3; } .product-detail .description .act-icon { width: 50px; height: 50px; background: #eef2f5; color: #0056b3; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px auto; transition: all 0.3s ease; } .product-detail .description .act-item:hover .act-icon { background: #0056b3; color: #fff; } .product-detail .description .act-icon svg { width: 24px; height: 24px; } .product-detail .description .act-item h5 { font-size: 16px; color: #333; margin-bottom: 10px; font-weight: 600; } .product-detail .description .act-item p { font-size: 13px; color: #888; line-height: 1.5; margin: 0; } /* 响应式 */ @media (max-width: 992px) { .product-detail .description .ca-intro-row { flex-direction: column; } } /* --- 底部综合信息模块样式 --- */ .product-detail .description .bottom-info-section { margin-top: 80px; } /* 1. 解决方案网格 */ .product-detail .description .solutions-block { margin-bottom: 60px; } .product-detail .description .block-header { text-align: center; margin-bottom: 30px; } .product-detail .description .block-header h3 { font-size: 24px; color: #333; margin-bottom: 10px; } .product-detail .description .block-header p { color: #888; } .product-detail .description .sol-card { background: #f8f9fa; padding: 25px 20px; border-radius: 8px; text-align: center; transition: all 0.3s ease; border: 1px solid transparent; display: block; text-decoration: none; } .product-detail .description .sol-card:hover { background: #fff; border-color: #0056b3; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transform: translateY(-3px); } .product-detail .description .sol-icon { width: 40px; height: 40px; background: #eef2f5; color: #0056b3; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px auto; } .product-detail .description .sol-card h5 { font-size: 16px; color: #333; margin-bottom: 10px; } .product-detail .description .sol-card .arrow { color: #0056b3; font-weight: bold; opacity: 0; transition: opacity 0.3s; } .product-detail .description .sol-card:hover .arrow { opacity: 1; } /* 2. 品牌承诺 */ .product-detail .description .brand-promise { background: #f0f7ff; padding: 40px; border-radius: 12px; margin-bottom: 60px; border-left: 5px solid #0056b3; } .product-detail .description .promise-content h4 { font-size: 20px; color: #0056b3; margin-bottom: 15px; } .product-detail .description .promise-content p { color: #555; line-height: 1.7; margin-bottom: 15px; } .product-detail .description .promise-content .note { font-size: 14px; color: #888; font-style: italic; } /* 3. 询价清单 */ .product-detail .description .quotation-checklist { margin-bottom: 60px; } .product-detail .description .quotation-checklist h3 { font-size: 22px; margin-bottom: 25px; text-align: center; } .product-detail .description .checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; background: #fff; border: 1px solid #eee; padding: 30px; border-radius: 8px; } .product-detail .description .check-item { display: flex; align-items: center; font-size: 15px; color: #444; } .product-detail .description .check-item svg { width: 20px; height: 20px; color: #28a745; /* 绿色对勾 */ margin-right: 10px; flex-shrink: 0; } /* 4. FAQ */ .product-detail .description .faq-section { margin-bottom: 60px; } .product-detail .description .faq-section h3 { text-align: center; margin-bottom: 30px; font-size: 22px; /* 统一标题大小为 22px */ color: #333; font-weight: 700; } .product-detail .description .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } .product-detail .description .faq-item { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #eee; } .product-detail .description .faq-item h5 { font-size: 16px; color: #333; margin-bottom: 10px; font-weight: 700; } .product-detail .description .faq-item p { font-size: 14px; color: #666; line-height: 1.6; margin: 0; } /* 5. 最终 CTA */ .product-detail .description .final-cta { background: linear-gradient(135deg, #0056b3 0%, #004494 100%); padding: 50px; border-radius: 12px; text-align: center; color: #fff; } .product-detail .description .cta-content h3 { font-size: 26px; margin-bottom: 15px; } .product-detail .description .cta-content p { font-size: 16px; opacity: 0.9; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto; } .product-detail .description .cta-btn { display: inline-block; background: #fff; color: #0056b3; padding: 15px 40px; border-radius: 30px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .product-detail .description .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); background: #f8f9fa; } /* 响应式 */ @media (max-width: 992px) { .product-detail .description .faq-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .product-detail .description .checklist-grid, .product-detail .description .faq-grid { grid-template-columns: 1fr; } .product-detail .description .final-cta { padding: 30px 20px; } } /* --- 智能控制矩阵样式 --- */ .product-detail .description .ca-activation-block { background: #fff; padding: 50px 0; margin-top: 40px; border-top: 1px solid #f0f0f0; } .product-detail .description .ca-section-header { text-align: center; margin-bottom: 40px; } .product-detail .description .ca-section-header h4 { font-size: 24px; color: #333; margin-bottom: 10px; font-weight: 700; } .product-detail .description .ca-section-header p { color: #888; font-size: 15px; } /* 矩阵容器 */ .product-detail .description .control-matrix { display: grid; grid-template-columns: repeat(3, 1fr); /* 3列 */ gap: 20px; max-width: 1000px; margin: 0 auto; } /* 单个矩阵卡片 */ .product-detail .description .matrix-card { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 25px 20px; display: flex; align-items: flex-start; transition: all 0.3s ease; position: relative; overflow: hidden; } /* 悬停效果：轻微上浮 + 蓝色边框 */ .product-detail .description .matrix-card:hover { transform: translateY(-3px); border-color: #0056b3; box-shadow: 0 10px 25px rgba(0,86,179,0.08); } /* 卡片图标 */ .product-detail .description .card-icon { width: 40px; height: 40px; background: #f4f6f8; color: #0056b3; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; transition: all 0.3s ease; } .product-detail .description .matrix-card:hover .card-icon { background: #0056b3; color: #fff; } .product-detail .description .card-icon svg { width: 22px; height: 22px; } /* 卡片文字 */ .product-detail .description .card-info h5 { font-size: 16px; color: #333; margin: 0 0 8px 0; font-weight: 600; } .product-detail .description .card-info p { font-size: 13px; color: #777; line-height: 1.5; margin: 0; } /* 响应式：平板2列，手机1列 */ @media (max-width: 992px) { .product-detail .description .control-matrix { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .product-detail .description .control-matrix { grid-template-columns: 1fr; } } /* --- 更多解决方案 (极简扁平风格) --- */ .product-detail .description .solutions-block { margin-bottom: 60px; } .product-detail .description .block-header { text-align: center; margin-bottom: 30px; } .product-detail .description .block-header h3 { font-size: 22px; color: #333; margin-bottom: 10px; font-weight: 700; } .product-detail .description .block-header p { color: #888; font-size: 15px; } /* 网格布局 */ .product-detail .description .solutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* 扁平卡片主体 */ .product-detail .description .sol-card-flat { position: relative; background: #fff; border: 1px solid #eaeaea; border-radius: 6px; /* 小圆角更干练 */ padding: 25px 20px; text-decoration: none; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } /* 悬停效果：轻微上浮 + 阴影加深 */ .product-detail .description .sol-card-flat:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-color: transparent; /* 悬停时隐藏默认边框，由底部色条替代 */ } /* 内容区域 */ .product-detail .description .sol-flat-content { display: flex; justify-content: space-between; align-items: center; } /* 标题文字 */ .product-detail .description .sol-card-flat h5 { font-size: 16px; color: #333; margin: 0; font-weight: 600; line-height: 1.4; transition: color 0.3s ease; } .product-detail .description .sol-card-flat:hover h5 { color: #0056b3; /* 悬停变蓝 */ } /* 箭头符号 */ .product-detail .description .sol-arrow { font-size: 18px; color: #ccc; transition: all 0.3s ease; font-weight: bold; } .product-detail .description .sol-card-flat:hover .sol-arrow { color: #0056b3; transform: translateX(5px); /* 箭头右移 */ } /* 底部装饰色条 (默认隐藏或很细) */ .product-detail .description .sol-flat-border { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #0056b3; transform: scaleX(0); /* 默认宽度为0 */ transition: transform 0.3s ease; transform-origin: left; } /* 悬停时色条展开 */ .product-detail .description .sol-card-flat:hover .sol-flat-border { transform: scaleX(1); } /* 响应式 */ @media (max-width: 992px) { .product-detail .description .solutions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .product-detail .description .solutions-grid { grid-template-columns: 1fr; } } /* --- 核心卖点网格 (Key Benefits Grid) --- */ .product-detail .key-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 电脑端2列 */ gap: 20px; margin-bottom: 30px; } .product-detail .kb-item { background: #f8f9fa; border: 1px solid #eaeaea; border-radius: 8px; padding: 20px; display: flex; align-items: flex-start; transition: all 0.3s ease; } .product-detail .kb-item:hover { background: #fff; border-color: #0056b3; box-shadow: 0 5px 15px rgba(0,86,179,0.1); transform: translateY(-2px); } .product-detail .kb-icon { width: 40px; height: 40px; background: #fff; color: #0056b3; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .product-detail .kb-icon svg { width: 22px; height: 22px; } .product-detail .kb-content h5 { font-size: 16px; color: #333; margin: 0 0 6px 0; font-weight: 700; line-height: 1.3; } .product-detail .kb-content p { font-size: 14px; color: #666; line-height: 1.5; margin: 0; } /* --- 分类与标签栏 (Product Meta Info) --- */ .product-detail .product-meta-info { border-top: 1px solid #eee; padding-top: 20px; margin-top: 20px; } .product-detail .meta-line { margin-bottom: 12px; display: flex; align-items: flex-start; /* 防止标签换行时对齐错位 */ flex-wrap: wrap; } .product-detail .m-label { font-weight: 700; color: #888; margin-right: 10px; font-size: 14px; min-width: 60px; padding-top: 4px; /* 微调对齐 */ } .product-detail .m-link { color: #0056b3; text-decoration: none; font-weight: 600; font-size: 14px; padding-top: 4px; } .product-detail .m-link:hover { text-decoration: underline; } /* 标签胶囊样式 */ .product-detail .m-tags { display: flex; flex-wrap: wrap; gap: 8px; } .product-detail .m-tag { display: inline-block; padding: 4px 12px; background: #f0f2f5; color: #555; font-size: 12px; border-radius: 20px; text-decoration: none; transition: all 0.2s ease; border: 1px solid transparent; } .product-detail .m-tag:hover { background: #fff; border-color: #0056b3; color: #0056b3; } /* --- 响应式适配 --- */ @media (max-width: 768px) { .product-detail .key-benefits-grid { grid-template-columns: 1fr; /* 手机端单列 */ } .product-detail .meta-line { flex-direction: column; /* 手机端标签换行显示 */ } .product-detail .m-label { margin-bottom: 5px; } } /* --- 标签行布局优化 --- */ .tags-line { display: flex; flex-wrap: wrap; /* 关键：允许内容换行 */ align-items: center; /* 关键：垂直居中对齐，确保第一行标签和文字在一条线上 */ margin-bottom: 12px; } .m-label { font-weight: 700; color: #888; font-size: 14px; margin-right: 10px; /* 关键：设置最小宽度，确保换行后标签的起始位置对齐 */ min-width: 60px; /* 如果希望标签紧贴着冒号，可以去掉 min-width，改用 flex-shrink: 0 */ flex-shrink: 0; /* 防止标签过多时把 "Tags:" 挤变形 */ } .m-tags-wrapper { display: flex; flex-wrap: wrap; /* 标签内部也允许换行 */ gap: 8px; /* 标签之间的间距 */ flex: 1; /* 占据剩余空间 */ } /* 胶囊标签样式 */ .m-tag-pill { display: inline-block; padding: 4px 12px; background: #f0f2f5; color: #555; font-size: 13px; border-radius: 20px; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; /* 防止标签内的文字自己换行 */ } /* --- 手机端微调 --- */ @media (max-width: 480px) { .tags-line { align-items: flex-start; /* 极小屏幕下，改为顶部对齐，视觉更稳 */ } .m-label { margin-top: 4px; /* 稍微下移一点以匹配标签高度 */ } } /* --- 相关产品 (工业大气风格) --- */ .description .related-pro-industrial { margin-top: 60px; padding-top: 40px; border-top: 2px solid #eaeaea; /* 顶部加粗分割线 */ } .description .rpi-header { margin-bottom: 35px; text-align: left; /* 左对齐更显正式 */ } .description .rpi-header h3 { font-size: 24px; color: #1a1a1a; font-weight: 800; margin: 0 0 10px 0; letter-spacing: -0.5px; text-transform: uppercase; } .description .header-line { width: 60px; height: 3px; background: #0056b3; /* 品牌蓝强调色 */ } /* 网格布局 */ .description .rpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; } /* 卡片主体 */ .description .rpi-card { display: block; text-decoration: none; background: #fff; border: 1px solid #e0e0e0; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; } /* 悬停效果：边框变深 + 阴影加深 + 轻微上浮 */ .description .rpi-card:hover { border-color: #333; box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translateY(-5px); } /* 图片容器 */ .description .rpi-img-wrap { position: relative; width: 100%; padding-top: 75%; /* 4:3 比例 */ overflow: hidden; background: #f4f4f4; } .description .rpi-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; filter: grayscale(10%); /* 默认稍微降低饱和度，显高级 */ } .description .rpi-card:hover .rpi-img-wrap img { transform: scale(1.08); filter: grayscale(0%); /* 悬停恢复色彩 */ } /* 右上角 View 标签 */ .description .rpi-badge { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; text-transform: uppercase; letter-spacing: 1px; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } .description .rpi-card:hover .rpi-badge { opacity: 1; transform: translateY(0); } /* 底部信息区 */ .description .rpi-body { padding: 20px; border-top: 1px solid #eee; background: #fff; } .description .rpi-body h5 { font-size: 16px; color: #222; margin: 0; font-weight: 700; line-height: 1.4; display: flex; justify-content: space-between; align-items: center; } /* 箭头动画 */ .description .rpi-arrow { font-size: 18px; color: #ccc; transition: all 0.3s ease; font-weight: 300; } .description .rpi-card:hover .rpi-arrow { color: #0056b3; transform: translateX(5px); } /* 响应式适配 */ @media (max-width: 992px) { .description .rpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .description .rpi-grid { grid-template-columns: 1fr; } .description .rpi-header { text-align: center; } .description .header-line { margin: 0 auto; } } /* --- 现代简介区域重置样式 --- */ .about-section-modern { padding: 80px 0; background-color: #fff; overflow: hidden; } .container-wal { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .modern-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; /* 左宽右窄，突出文案 */ gap: 60px; align-items: center; } /* 左侧文案 */ .content-side .label { display: inline-block; font-size: 12px; font-weight: 700; color: #0056b3; /* 品牌蓝 */ text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; } .content-side h2 { font-size: 36px; line-height: 1.2; color: #1a1a1a; margin: 0 0 10px 0; font-weight: 800; } .content-side h3 { font-size: 20px; color: #555; font-weight: 500; margin: 0 0 25px 0; } .content-side p { font-size: 15px; line-height: 1.8; color: #666; margin-bottom: 35px; max-width: 90%; } /* 按钮与链接组 */ .action-bar { display: flex; align-items: center; gap: 30px; } .btn-main { display: inline-block; padding: 14px 35px; background-color: #1a1a1a; color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: 1px; transition: all 0.3s ease; } .btn-main:hover { background-color: #0056b3; transform: translateY(-2px); } .links { display: flex; flex-direction: column; gap: 8px; } .links a { text-decoration: none; color: #444; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: color 0.3s; } .links a:hover { color: #0056b3; } .icon-play { display: inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #0056b3; } /* 右侧视觉区 */ .visual-side { position: relative; } .img-wrapper { width: 100%; height: 400px; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.08); margin-bottom: 30px; } .img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .img-wrapper:hover img { transform: scale(1.03); } /* 参数网格 */ .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .spec-item { background: #f8f9fa; padding: 15px 20px; border-radius: 4px; display: flex; align-items: center; gap: 12px; transition: background 0.3s; } .spec-item:hover { background: #eef2f5; } .spec-icon { font-size: 20px; line-height: 1; } .spec-item span { font-size: 13px; font-weight: 600; color: #333; } /* --- 响应式适配 --- */ @media (max-width: 992px) { .modern-grid { grid-template-columns: 1fr; /* 上下排列 */ gap: 40px; } .content-side { order: 2; /* 手机上图片在上，文字在下 */ } .visual-side { order: 1; } .img-wrapper { height: 300px; margin-bottom: 20px; } } @media (max-width: 576px) { .content-side h2 { font-size: 28px; } .action-bar { flex-direction: column; align-items: flex-start; gap: 20px; } .specs-grid { grid-template-columns: 1fr; } /* 手机参数单列 */ } /* 使用场景样式 */ .application-scenarios { margin: 100px 0; } .as-header { text-align: center; margin-bottom: 40px; } .as-header h3 { font-size: 28px; color: #333; margin-bottom: 10px; font-weight: 600; } .as-header .header-line { width: 60px; height: 3px; background-color: #0056b3; /* 主题色，可根据需要调整 */ margin: 0 auto 15px; } .as-header p { color: #666; font-size: 16px; } .as-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .as-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .as-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .as-img-wrap { width: 100%; height: 250px; overflow: hidden; } .as-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .as-card:hover .as-img-wrap img { transform: scale(1.05); } .as-content { padding: 25px; } .as-content h4 { font-size: 20px; color: #222; margin-bottom: 12px; font-weight: 600; } .as-content p { font-size: 14px; color: #777; line-height: 1.6; } /* 响应式适配 */ @media (max-width: 768px) { .as-grid { grid-template-columns: 1fr; } .as-img-wrap { height: 200px; } } /* 紧凑型双列表格样式 */ .compact-spec-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 13px; color: #333; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); background: #fff; } .compact-spec-table thead tr { background-color: #0056b3; color: #ffffff; text-align: left; } .compact-spec-table th, .compact-spec-table td { padding: 10px 12px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; vertical-align: middle; } /* 去掉每行最后一列的右边框 */ .compact-spec-table td:last-child, .compact-spec-table th:last-child { border-right: none; } /* 斑马纹 */ .compact-spec-table tbody tr:nth-of-type(even) { background-color: #f9f9f9; } /* 悬停效果 */ .compact-spec-table tbody tr:hover { background-color: #f0f7ff; } /* 可选标签 */ .opt-tag { display: inline-block; background-color: #fff3cd; color: #856404; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: bold; margin-left: 6px; vertical-align: middle; } /* 序号列宽度 */ .col-no { width: 50px; text-align: center; font-weight: bold; color: #666; } /* 让带有 full-width 类的元素占据整个网格宽度 */ .product-detail .description .specs-grid .spec-item.full-width { grid-column: 1 / -1; /* 从第1条线开始，到最后一条线结束（即占满整行） */ border-right: none; /* 确保没有右边框 */ border-bottom: none; /* 确保没有下边框（如果是最后一行） */ } /* 可选：如果您希望最后一个元素的内容居中显示，可以加上这个 */ .product-detail .description .specs-grid .spec-item.full-width { text-align: center; flex-direction: row; /* 如果希望标签和值横向排列，可改为 row，否则保持 column */ justify-content: center; gap: 10px; } /* 注意：如果您的 .spec-item 原本是 flex-direction: column， 独占一行后通常保持 column 即可，或者根据视觉需求调整。 下面的代码确保它在独占一行时边框处理正确 */ /* 修正之前的边框逻辑，避免 full-width 元素受到 nth-child 边框规则的影响 */ .product-detail .description .specs-grid .spec-item.full-width:nth-child(2n) { border-right: none; } .product-detail .description .full-width .spec-label{margin-bottom: 0; margin-right: 20px;} .product-detail .description .spec-value{text-align: center;} /* 针对此模块的微调样式 */ .custom-hardware-section { margin: 60px 0; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); } .custom-hardware-section .split-text-box .content p { margin-bottom: 12px; font-size: 15px; line-height: 1.6; color: #555; } .custom-hardware-section .split-text-box .content strong { color: #0056b3; /* 主题色加粗 */ font-weight: 700; } /* 确保手机端也是上下排列 */ @media (max-width: 768px) { .custom-hardware-section { flex-direction: column; padding: 15px; } .custom-hardware-section .split-img-box, .custom-hardware-section .split-text-box { width: 100%; } } /* 定制断桥面板介绍模块样式 */ .custom-panel-intro { margin-top: 50px; margin-bottom: 50px; background: #fff; } .cp-header { text-align: center; margin-bottom: 30px; } .cp-header h3 { font-size: 26px; font-weight: 700; color: #333; margin-bottom: 10px; text-transform: uppercase; } .cp-header .header-line { width: 60px; height: 3px; background-color: #ff6600; /* 品牌橙色 */ margin: 0 auto; } /* 图片并列行 */ .cp-images-row { display: flex; gap: 20px; margin-bottom: 30px; } .cp-img-item { flex: 1; overflow: hidden; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .cp-img-item img { width: 100%; height: 300px; /* 固定高度确保整齐 */ object-fit: cover; transition: transform 0.5s ease; display: block; } .cp-img-item:hover img { transform: scale(1.03); } /* 文字内容区域 */ .cp-content ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; /* 默认单列，也可改为 2fr 分两列显示 */ gap: 15px; } .cp-content li { font-size: 15px; line-height: 1.6; color: #555; background: #f9f9f9; padding: 15px 20px; border-left: 3px solid #ff6600; border-radius: 0 4px 4px 0; } .cp-content li strong { color: #222; font-weight: 700; margin-right: 5px; } /* 响应式适配 */ @media (max-width: 768px) { .cp-images-row { flex-direction: column; } .cp-img-item img { height: 200px; } .cp-header h3 { font-size: 20px; } } /* 生产与运输模块样式 - 工业风 */ .production-logistics-section { margin-top: 60px; margin-bottom: 40px; font-family: 'Roboto', 'Arial', sans-serif; } .pl-header { text-align: center; margin-bottom: 40px; } .pl-header h3 { font-size: 28px; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .pl-header .header-line { width: 60px; height: 3px; background-color: #ff6600; /* 工业橙色点缀 */ margin: 0 auto 15px; } .pl-header p { color: #666; font-size: 14px; max-width: 600px; margin: 0 auto; line-height: 1.6; } .pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pl-card { background: #fff; border: 1px solid #e0e0e0; transition: all 0.3s ease; display: flex; flex-direction: column; } .pl-card:hover { border-color: #999; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transform: translateY(-2px); } /* 大卡片样式 (第一张) */ .pl-card-large { grid-column: span 2; grid-row: span 2; } /* 宽卡片样式 (最后一张) */ .pl-card-wide { grid-column: span 3; flex-direction: row; align-items: center; } .pl-card-wide .pl-img-wrap { width: 50%; height: 100%; } .pl-card-wide .pl-info { width: 50%; padding: 30px; } .pl-img-wrap { position: relative; overflow: hidden; height: 200px; /* 默认高度 */ } .pl-card-large .pl-img-wrap { height: 100%; min-height: 420px; } .pl-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .pl-card:hover .pl-img-wrap img { transform: scale(1.05); } .pl-overlay { position: absolute; top: 15px; left: 15px; } .pl-badge { background-color: rgba(0,0,0,0.7); color: #fff; padding: 5px 10px; font-size: 12px; font-weight: bold; text-transform: uppercase; border-left: 3px solid #ff6600; } .pl-info { padding: 20px; background: #f9f9f9; flex: 1; } .pl-card-wide .pl-info { background: #fff; } .pl-info h4 { font-size: 18px; color: #222; margin-bottom: 10px; font-weight: 600; } .pl-info p { font-size: 13px; color: #666; line-height: 1.5; margin: 0; } /* 响应式适配 */ @media (max-width: 1024px) { .pl-grid { grid-template-columns: repeat(2, 1fr); } .pl-card-large { grid-column: span 2; grid-row: auto; } .pl-card-large .pl-img-wrap { min-height: 300px; } .pl-card-wide { grid-column: span 2; flex-direction: column; } .pl-card-wide .pl-img-wrap, .pl-card-wide .pl-info { width: 100%; } } @media (max-width: 768px) { .pl-grid { grid-template-columns: 1fr; } .pl-card-large, .pl-card-wide { grid-column: span 1; } .pl-card-wide { flex-direction: column; } .pl-card-wide .pl-img-wrap { height: 200px; } } /* Company Intro Section Styles */ .company-intro-section { padding: 60px 0; background-color: #f9f9f9; color: #333; } .company-intro-section .wal { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header */ .section-header { text-align: center; margin-bottom: 40px; } .section-header h2 { font-size: 32px; font-weight: 700; margin-bottom: 10px; color: #222; } .section-header p { font-size: 16px; color: #666; font-style: italic; } /* Stats Grid */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 60px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .stat-item { text-align: center; border-right: 1px solid #eee; } .stat-item:last-child { border-right: none; } .stat-num { font-size: 36px; font-weight: 800; color: #d32f2f; /* Accent color, adjust to brand */ display: block; } .stat-unit { font-size: 18px; font-weight: 600; color: #d32f2f; } .stat-label { display: block; margin-top: 5px; font-size: 14px; color: #777; text-transform: uppercase; letter-spacing: 1px; } /* Intro Content Row */ .intro-content-row { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .intro-text { flex: 1; } .intro-text h3 { font-size: 24px; margin-bottom: 20px; color: #222; } .intro-text p { line-height: 1.8; color: #555; margin-bottom: 20px; } .feature-list { list-style: none; padding: 0; } .feature-list li { margin-bottom: 10px; padding-left: 20px; position: relative; color: #444; } .feature-list li::before { content: "✔"; color: #d32f2f; position: absolute; left: 0; top: 0; } .intro-image { flex: 1; overflow: hidden; border-radius: 8px; } .intro-image img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .intro-image:hover img { transform: scale(1.02); } /* Carousel Section */ .carousel-section { margin-bottom: 60px; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .carousel-header { text-align: center; margin-bottom: 30px; } .carousel-header h3 { font-size: 24px; margin-bottom: 5px; } .carousel-container { position: relative; max-width: 1000px; margin: 0 auto; overflow: hidden; border-radius: 8px; } .carousel-track-container { overflow: hidden; } .carousel-track { display: flex; transition: transform 0.4s ease-in-out; list-style: none; padding: 0; margin: 0; } .carousel-slide { min-width: 100%; position: relative; } .carousel-slide img { width: 100%; height: 400px; /* Fixed height for consistency */ object-fit: cover; display: block; } .slide-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 15px; text-align: center; font-size: 16px; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; color: #333; z-index: 10; transition: background 0.3s; } .carousel-btn:hover { background: #fff; } .prev-btn { left: 10px; } .next-btn { right: 10px; } /* Contact Info Grid */ .contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; } .info-card { background: #fff; padding: 30px; text-align: center; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s; } .info-card:hover { transform: translateY(-5px); } .icon-box { font-size: 32px; margin-bottom: 15px; } .info-card h4 { font-size: 18px; margin-bottom: 10px; color: #222; } .info-card p { color: #666; font-size: 14px; line-height: 1.6; } /* Responsive Adjustments */ @media (max-width: 768px) { .intro-content-row { flex-direction: column; } .stat-item { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 15px; } .stat-item:last-child { border-bottom: none; } .carousel-slide img { height: 250px; } } /* --- KAIYISI Industrial Product Grid Styles --- */ /* 容器重置与布局 */ .kys-product-wrapper { width: 100%; padding: 20px 0; box-sizing: border-box; } .kys-product-wrapper ul, .kys-product-wrapper li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .kys-pro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; width: 100%; } /* 卡片主体 */ .kys-pro-card { background: #ffffff; border: 1px solid #e0e0e0; position: relative; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; height: 100%; display: flex; flex-direction: column; } .kys-pro-card a { text-decoration: none !important; color: inherit; display: flex; flex-direction: column; height: 100%; } /* 内容区域 */ .kys-pro-info { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; border-top: 3px solid transparent; /* 工业风顶部线条 */ transition: border-color 0.3s ease, background-color 0.3s ease; } /* 标题 */ .kys-pro-title { font-size: 18px; font-weight: 700; color: #2c3e50; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } /* 描述文本 */ .kys-pro-desc { font-size: 14px; line-height: 1.6; color: #666; margin: 0 0 20px 0; flex-grow: 1; /* 限制行数为4行，保持整齐 */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* 底部动作栏 */ .kys-pro-action { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #0056b3; /* 品牌蓝 */ margin-top: auto; padding-top: 15px; border-top: 1px solid #eee; transition: color 0.3s ease; } .kys-pro-action svg { margin-left: 6px; transition: transform 0.3s ease; } /* --- 悬停交互效果 (工业质感) --- */ .kys-pro-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); border-color: #cbd5e0; } .kys-pro-card:hover .kys-pro-info { border-top-color: #0056b3; /* 顶部亮条 */ } .kys-pro-card:hover .kys-pro-action { color: #003d80; } .kys-pro-card:hover .kys-pro-action svg { transform: translateX(4px); } /* 响应式调整 */ @media (max-width: 768px) { .kys-pro-grid { grid-template-columns: 1fr; } } /* --- Industrial Image Display Styles --- */ /* 图片容器：增加相对定位以容纳绝对定位的元素 */ .kys-pro-thumb { position: relative; height: 260px; /* 稍微增加高度以容纳标签 */ overflow: hidden; background-color: #2c3e50; /* 深色背景衬托工业感 */ border-bottom: 3px solid #0056b3; /* 底部品牌色线条 */ } /* 1. 工程网格背景 (Blueprint/Grid Effect) */ .kys-pro-bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; z-index: 1; pointer-events: none; } /* 2. 产品图片 */ .kys-pro-thumb img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.5s ease; z-index: 2; opacity: 0.9; /* 默认轻微透明，融合背景 */ } /* 3. 工业风标签 (Model Badge) */ .kys-pro-badge { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.2); border-left: 3px solid #0056b3; /* 左侧强调色 */ z-index: 4; letter-spacing: 1px; backdrop-filter: blur(4px); transform: skewX(-10deg); /* 倾斜增加速度感 */ } /* 4. 扫描光效 (Scan Line) */ .kys-pro-scan { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); transform: skewX(-20deg); z-index: 3; transition: none; } /* --- Hover Effects --- */ /* 图片放大并变亮 */ .kys-pro-card:hover .kys-pro-thumb img { transform: scale(1.1); opacity: 1; } /* 扫描光效快速扫过 */ .kys-pro-card:hover .kys-pro-scan { animation: kys-scan-anim 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes kys-scan-anim { 0% { left: -100%; } 100% { left: 200%; } } /* 标签颜色变化 */ .kys-pro-card:hover .kys-pro-badge { background: #0056b3; border-color: #0056b3; color: #fff; } /* 保持原有的 Info 区域样式不变，确保整体协调 */ .kys-pro-info { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e0e0; border-top: none; /* 因为 thumb 已经有 bottom border */ transition: all 0.3s ease; } /* 调整卡片整体边框，使其更紧凑 */ .kys-pro-card { background: transparent; border: none; /* 移除之前的 border，改为由 thumb 和 info 分别控制 */ } .kys-pro-card:hover .kys-pro-info { border-color: #cbd5e0; box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .related-accessories-section { margin-top: 60px; margin-bottom: 40px; } .ra-header { text-align: center; margin-bottom: 40px; } .ra-header h3 { font-size: 28px; font-weight: 700; color: #333; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .ra-header .header-line { width: 60px; height: 3px; background-color: #0056b3; /* 主题色，可根据网站主色调修改 */ margin: 0 auto 15px; } .ra-header p { color: #666; font-size: 16px; max-width: 600px; margin: 0 auto; } /* 网格布局 */ .ra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } /* 卡片样式 */ .ra-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; border: 1px solid #eee; display: flex; flex-direction: column; } .ra-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } /* 图片区域 */ .ra-img-wrap { position: relative; height: 240px; overflow: hidden; background-color: #f9f9f9; } .ra-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ra-card:hover .ra-img-wrap img { transform: scale(1.05); } .ra-badge { position: absolute; top: 15px; right: 15px; background: #0056b3; color: #fff; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 4px; text-transform: uppercase; } /* 内容区域 */ .ra-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .ra-body h4 { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 12px; } .ra-desc { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; /* 让按钮始终底部对齐 */ } .ra-link { display: inline-flex; align-items: center; color: #0056b3; font-weight: 600; text-decoration: none; font-size: 14px; transition: color 0.2s; } .ra-link .arrow { margin-left: 5px; transition: transform 0.2s; } .ra-link:hover { color: #003d80; } .ra-link:hover .arrow { transform: translateX(5px); } /* 响应式适配 */ @media (max-width: 768px) { .ra-grid { grid-template-columns: 1fr; /* 移动端单列 */ gap: 20px; } .ra-header h3 { font-size: 24px; } .ra-img-wrap { height: 200px; } } /* 开门器类型列表板块样式 */ .opener-types-list-section { margin-top: 60px; margin-bottom: 40px; } .otl-header { text-align: center; margin-bottom: 40px; } .otl-header h3 { font-size: 28px; font-weight: 700; color: #222; margin-bottom: 15px; } .otl-header .header-line { width: 60px; height: 3px; background-color: #0056b3; /* 主题色 */ margin: 0 auto 15px; } .otl-header p { color: #666; font-size: 16px; max-width: 700px; margin: 0 auto; } /* 列表容器 */ .otl-list { list-style: none; padding: 0; margin: 0; } /* 每一行条目 */ .otl-item { display: flex; align-items: stretch; /* 确保高度一致 */ background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; margin-bottom: 30px; /* 每条之间的间距 */ box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; } .otl-item:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); } /* 左侧图片列 - 30% */ .otl-img-col { flex: 0 0 30%; max-width: 30%; position: relative; background-color: #f9f9f9; } .otl-img-wrap { width: 100%; height: 100%; min-height: 250px; /* 保证最小高度 */ } .otl-img-wrap img { width: 100%; height: 100%; object-fit: cover; /* 保持比例填满 */ display: block; } /* 右侧文字列 - 70% */ .otl-text-col { flex: 0 0 70%; max-width: 70%; padding: 30px 40px; display: flex; flex-direction: column; justify-content: center; } .otl-content h4 { font-size: 22px; font-weight: 700; color: #222; margin-bottom: 15px; line-height: 1.3; } .otl-content p { font-size: 15px; line-height: 1.7; color: #555; margin-bottom: 0; } /* 响应式适配 */ @media (max-width: 992px) { .otl-text-col { padding: 25px 30px; } } @media (max-width: 768px) { .otl-item { flex-direction: column; /* 移动端上下排列 */ } .otl-img-col, .otl-text-col { flex: 0 0 100%; max-width: 100%; } .otl-img-col { height: 200px; /* 移动端图片固定高度 */ } .otl-img-wrap { min-height: auto; } .otl-text-col { padding: 20px; } .otl-content h4 { font-size: 20px; } } /* --- KYS Industrial Section Styles --- */ .kys-ind-section { padding: 80px 0; background-color: #f8f9fa; /* 浅灰背景，突出工业洁净感 */ font-family: 'Roboto', 'Arial', sans-serif; color: #333; overflow: hidden; } .kys-ind-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .kys-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* 左侧内容样式 */ .kys-ind-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #0056b3; /* 品牌蓝 */ margin-bottom: 15px; border-left: 3px solid #0056b3; padding-left: 10px; } .kys-ind-title { font-size: 42px; line-height: 1.2; font-weight: 800; color: #2c3e50; margin: 0 0 15px 0; } .kys-ind-title .text-highlight { color: #0056b3; } .kys-ind-subtitle { font-size: 20px; font-weight: 400; color: #666; margin-bottom: 30px; } .kys-ind-desc p { font-size: 15px; line-height: 1.8; color: #555; margin-bottom: 15px; } /* 按钮与链接 */ .kys-ind-actions { margin-top: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 30px; } .kys-ind-btn-primary { display: inline-flex; align-items: center; gap: 10px; background-color: #2c3e50; color: #fff; padding: 15px 35px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; border-radius: 2px; /* 轻微圆角，保持硬朗 */ } .kys-ind-btn-primary:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3); } .kys-ind-links { display: flex; flex-direction: column; gap: 10px; } .link-item { text-decoration: none; color: #555; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: color 0.3s; } .link-item:hover { color: #0056b3; } .icon-circle { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; border: 1px solid #ccc; border-radius: 50%; font-size: 10px; color: #888; } /* 右侧视觉区域 */ .kys-ind-visual { position: relative; } .kys-ind-img-box { position: relative; z-index: 2; margin-bottom: -40px; /* 让图片稍微覆盖到下方的参数网格，增加层次感 */ } .kys-ind-img-box img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); } /* 图片背后的装饰块 */ .kys-ind-bg-accent { position: absolute; top: -20px; right: -20px; width: 100%; height: 100%; background-color: #e9ecef; z-index: -1; border-radius: 4px; } /* 参数网格 - 工业仪表盘风格 */ .kys-ind-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; position: relative; z-index: 3; } .kys-spec-card { background: #fff; padding: 15px; border: 1px solid #eee; border-left: 3px solid transparent; display: flex; align-items: center; gap: 12px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.03); } .kys-spec-card:hover { border-left-color: #0056b3; transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); } .spec-icon { font-size: 24px; background: #f0f4f8; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 4px; } .spec-text { display: flex; flex-direction: column; } .spec-text strong { font-size: 14px; color: #2c3e50; font-weight: 700; } .spec-text span { font-size: 12px; color: #888; margin-top: 2px; } /* 响应式适配 */ @media (max-width: 992px) { .kys-ind-grid { grid-template-columns: 1fr; gap: 40px; } .kys-ind-img-box { margin-bottom: 30px; order: -1; /* 移动端图片在上 */ } .kys-ind-title { font-size: 32px; } } @media (max-width: 576px) { .kys-ind-specs { grid-template-columns: 1fr; } .kys-ind-actions { flex-direction: column; align-items: flex-start; } } /* --- 更新 .spec-icon 样式以适配 SVG --- */ .spec-icon { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: #f0f4f8; /* 浅蓝灰色背景 */ border-radius: 4px; color: #0056b3; /* 图标颜色使用品牌蓝 */ flex-shrink: 0; /* 防止图标被压缩 */ } .spec-icon svg { width: 22px; height: 22px; stroke-width: 1.5; /* 线条粗细，体现精致感 */ } /* 悬停时图标颜色加深 */ .kys-spec-card:hover .spec-icon { background-color: #0056b3; color: #fff; }.kys-ind-img-box{margin-bottom: -.8rem;} /* --- KYS Application Section Styles --- */ .kys-app-section { padding: 80px 0; background-color: #ffffff; font-family: 'Roboto', 'Arial', sans-serif; } .kys-app-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 头部样式 */ .kys-app-header { text-align: center; margin-bottom: 50px; } .kys-app-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #0056b3; margin-bottom: 10px; } .kys-app-header h2 { font-size: 36px; font-weight: 800; color: #2c3e50; margin: 0 0 15px 0; } .kys-app-header p { font-size: 16px; color: #666; max-width: 600px; margin: 0 auto; } /* 网格布局 */ .kys-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* 卡片样式 */ .kys-app-card { background: #fff; border: 1px solid #eee; transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; } .kys-app-card:hover { border-color: #0056b3; box-shadow: 0 10px 30px rgba(0, 86, 179, 0.1); transform: translateY(-5px); } .kys-app-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } /* 图片区域 */ .kys-app-img-wrap { position: relative; height: 220px; overflow: hidden; background-color: #f0f0f0; } .kys-app-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .kys-app-card:hover .kys-app-img-wrap img { transform: scale(1.05); } .kys-app-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4)); opacity: 0; transition: opacity 0.3s ease; } .kys-app-card:hover .kys-app-overlay { opacity: 1; } /* 内容区域 */ .kys-app-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .kys-app-meta { margin-bottom: 10px; } .kys-app-keyword { display: inline-block; font-size: 11px; font-weight: 600; color: #0056b3; background-color: rgba(0, 86, 179, 0.08); padding: 4px 8px; border-radius: 2px; text-transform: uppercase; } .kys-app-title { font-size: 18px; font-weight: 700; color: #2c3e50; margin: 0 0 10px 0; line-height: 1.4; transition: color 0.3s; } .kys-app-card:hover .kys-app-title { color: #0056b3; } .kys-app-desc { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 20px; /* 限制显示2行，超出省略 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; } .kys-app-action { font-size: 13px; font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 5px; transition: gap 0.3s ease; margin-top: auto; } .kys-app-card:hover .kys-app-action { color: #0056b3; gap: 10px; } /* 响应式适配 */ @media (max-width: 992px) { .kys-app-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .kys-app-grid { grid-template-columns: 1fr; } .kys-app-header h2 { font-size: 28px; } } /* --- 工业风定制板块样式 --- */ .kys-custom-section { position: relative; padding: 100px 0; background-color: #1a1a1a; /* 深色工业背景 */ color: #ffffff; overflow: hidden; } /* 背景纹理装饰 */ .kys-custom-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.95)), url('/web/Nimg/082401.png'); /* 复用现有的纹理或替换为金属网格图 */ background-size: cover; z-index: 0; opacity: 0.3; } .kys-custom-container { position: relative; z-index: 1; } /* 头部样式 */ .kys-custom-header { text-align: center; max-width: 800px; margin: 0 auto 60px; } .kys-custom-tag { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 3px; color: #f39c12; /* 工业橙/金色点缀 */ margin-bottom: 15px; border: 1px solid #f39c12; padding: 5px 15px; text-transform: uppercase; } .kys-custom-title { font-size: 42px; font-weight: 800; margin-bottom: 20px; line-height: 1.2; text-transform: uppercase; } .text-stroke { color: transparent; -webkit-text-stroke: 1px #ffffff; -webkit-text-fill-color: transparent; opacity: 0.8; } .kys-custom-desc { font-size: 16px; color: #b0b0b0; line-height: 1.6; } /* 网格布局 */ .kys-custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } /* 左侧视觉区 */ .kys-custom-visual { position: relative; } .kys-visual-frame { position: relative; border: 2px solid #333; padding: 10px; background: #222; box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .kys-main-img { width: 100%; height: auto; display: block; filter: grayscale(20%) contrast(110%); transition: all 0.5s ease; } .kys-visual-frame:hover .kys-main-img { filter: grayscale(0%) contrast(100%); transform: scale(1.02); } .kys-visual-overlay { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.7); color: #fff; padding: 5px 10px; font-size: 12px; font-weight: bold; letter-spacing: 1px; border-left: 3px solid #f39c12; } /* 右侧色卡区 */ .palette-header h3 { font-size: 24px; margin-bottom: 10px; border-left: 4px solid #f39c12; padding-left: 15px; } .palette-header p { color: #888; font-size: 14px; margin-bottom: 30px; padding-left: 19px; } .ral-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; } .ral-item { display: flex; align-items: center; background: #252525; padding: 10px; border: 1px solid #333; transition: all 0.3s ease; cursor: pointer; } .ral-item:hover { border-color: #f39c12; transform: translateY(-3px); background: #2a2a2a; } .ral-swatch { width: 40px; height: 40px; border-radius: 4px; margin-right: 15px; border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 0 10px rgba(0,0,0,0.2); } .ral-info { display: flex; flex-direction: column; } .ral-code { font-weight: 700; font-size: 14px; color: #fff; } .ral-name { font-size: 12px; color: #888; margin-top: 2px; } /* CTA 按钮 */ .kys-custom-cta { margin-top: 40px; } .btn-industrial { display: inline-flex; align-items: center; padding: 15px 30px; background: transparent; border: 2px solid #fff; color: #fff; font-weight: 700; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; transition: all 0.3s ease; } .btn-industrial svg { margin-left: 10px; transition: transform 0.3s ease; } .btn-industrial:hover { background: #f39c12; border-color: #f39c12; color: #000; } .btn-industrial:hover svg { transform: translateX(5px); } /* 响应式适配 */ @media (max-width: 768px) { .kys-custom-grid { grid-template-columns: 1fr; } .kys-custom-title { font-size: 32px; } .ral-grid { grid-template-columns: repeat(2, 1fr); /* 移动端保持两列或改为1列 */ } } /* --- 平衡工业风全局设置 --- */ .kys-balanced-ind-footer { color: #333; padding: 80px 0; font-family: 'Roboto', 'Arial', sans-serif; position: relative; padding-bottom: 30px; } /* --- 1. 报价清单面板 (保留第一版风格，但颜色调轻) --- */ .kys-spec-panel { background: #ffffff; border: 1px solid #e1e4e8; padding: 40px; margin-bottom: 60px; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border-top: 3px solid #0056b3; /* 顶部品牌蓝线 */ } .panel-header { margin-bottom: 30px; } .panel-tag { display: inline-block; background: #eef2f7; color: #0056b3; font-size: 11px; font-weight: 800; padding: 4px 8px; margin-bottom: 12px; letter-spacing: 1px; border-radius: 2px; } .panel-header h3 { font-size: 24px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px 0; } .panel-header p { color: #666; font-size: 14px; margin: 0; } .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } .spec-row { display: flex; align-items: center; background: #fafafa; padding: 15px; border: 1px solid #eee; transition: all 0.3s ease; border-left: 3px solid transparent; } .spec-row:hover { border-left-color: #0056b3; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transform: translateX(3px); } .spec-icon { color: #0056b3; margin-right: 15px; width: 20px; height: 20px; flex-shrink: 0; } .spec-text { font-size: 14px; font-weight: 500; color: #444; } /* --- 2. FAQ 区域 (增加工业网格感) --- */ .kys-tech-faq { margin-bottom: 60px; } .faq-header-line { display: flex; align-items: center; margin-bottom: 30px; gap: 15px; } .faq-header-line h3 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0; white-space: nowrap; } .line-decor { height: 1px; background: #ccc; flex-grow: 1; position: relative; } /* 装饰性的小方块，模拟刻度 */ .line-decor::after { content: ''; position: absolute; right: 0; top: -2px; width: 6px; height: 6px; background: #0056b3; } .faq-grid-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tq-card { background: #fff; padding: 25px; border: 1px solid #e0e0e0; position: relative; transition: all 0.3s ease; } /* 卡片右上角的工业角标 */ .tq-card::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent #f0f0f0 transparent transparent; transition: border-color 0.3s ease; } .tq-card:hover { border-color: #0056b3; box-shadow: 0 5px 15px rgba(0,86,179,0.08); } .tq-card:hover::before { border-color: transparent #0056b3 transparent transparent; } .tq-num { font-family: 'Courier New', monospace; font-size: 12px; color: #999; margin-bottom: 10px; font-weight: 700; } .tq-card h5 { font-size: 15px; font-weight: 600; color: #222; margin-bottom: 12px; line-height: 1.4; } .tq-card p { font-size: 13px; color: #666; margin: 0; line-height: 1.6; } /* --- 3. CTA (现代科技感) --- */ .kys-modern-cta { background: #1a1a1a; /* 深色背景形成对比 */ color: #fff; padding: 50px 40px; position: relative; overflow: hidden; border-radius: 4px; } /* 背景斜纹图案 */ .cta-bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.03) 75%, transparent 75%, transparent); background-size: 20px 20px; opacity: 0.5; } .cta-content-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .cta-text-block h3 { color: #fff; font-size: 24px; margin: 0 0 10px 0; font-weight: 700; } .cta-text-block p { color: #aaa; margin: 0; max-width: 600px; font-size: 14px; } .tech-btn { display: inline-flex; align-items: center; gap: 10px; background: #0056b3; color: #fff; padding: 14px 28px; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 2px; transition: all 0.3s ease; border: 1px solid #0056b3; } .tech-btn:hover { background: transparent; color: #fff; border-color: #fff; } /* 响应式调整 */ @media (max-width: 992px) { .faq-grid-box { grid-template-columns: repeat(2, 1fr); } .cta-content-wrap { flex-direction: column; text-align: center; } .cta-text-block p { margin-bottom: 20px; } } @media (max-width: 768px) { .faq-grid-box { grid-template-columns: 1fr; } .spec-grid { grid-template-columns: 1fr; } .kys-spec-panel, .kys-modern-cta { padding: 25px; } } /* --- Reliable Section (轻工业风) --- */ .kys-reliable-section { background: #fff; padding: 100px 0; } .reliable-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; } .reliable-content h2 { font-size: 36px; margin-bottom: 20px; color: var(--dark-grey); } .lead-text { font-size: 16px; color: var(--text-light); line-height: 1.8; margin-bottom: 40px; border-left: 3px solid var(--primary-blue); /* 左侧蓝线强调 */ padding-left: 20px; } /* 卖点列表 */ .feature-list { display: flex; flex-direction: column; gap: 20px; } .feature-item { display: flex; align-items: flex-start; gap: 15px; padding: 15px; background: #f8f9fa; border: 1px solid transparent; transition: all 0.3s ease; } .feature-item:hover { border-color: var(--border-color); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.03); } .f-icon { width: 40px; height: 40px; background: #fff; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--primary-blue); flex-shrink: 0; } .f-icon svg { width: 20px; height: 20px; } .f-text h4 { font-size: 16px; margin: 0 0 5px 0; color: var(--dark-grey); } .f-text p { font-size: 13px; margin: 0; color: #888; } /* 右侧图片 - 工业相框风格 */ .industrial-frame { position: relative; padding: 15px; background: #fff; border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } .industrial-frame img { width: 100%; display: block; filter: grayscale(10%); /* 轻微去色增加高级感 */ } /* 装饰性角标 */ .frame-corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--primary-blue); z-index: 2; } .frame-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; } .frame-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; } .frame-label { position: absolute; bottom: -10px; right: 20px; background: var(--primary-blue); color: #fff; font-family: 'Courier New', monospace; font-size: 12px; padding: 2px 8px; font-weight: 700; } /* 响应式 */ @media (max-width: 992px) { .reliable-layout { grid-template-columns: 1fr; } .reliable-visual { order: -1; /* 移动端图片在上 */ margin-bottom: 30px; } } /* --- 原有样式保留 --- */ .g-foot p{width: 100%;} .g-foot .wal{padding: 0;} .g-foot .logo{width: 3rem; margin-bottom: 0;} .product .side .nav li a::before{display: none;} .product-detail .head .bd h2{margin-bottom: 0.2rem;} .product-detail .description .tips{background: none; border-left: none;} @media screen and (min-width: 800px) { .g-head .g-nav>ul>li.li_01::after{right: 5.55rem; top: 51%;} .g-head .g-nav>ul>li a.name{font-size: 0.2rem; padding: 0 0.22rem;font-weight: bold; font-family: var(--font-main), sans-serif;} } /* --- 工业风卷帘门返回顶部按钮 (独立类名) --- */ .industrial-door-top { position: fixed; right: 25px; bottom: 30px; width: 54px; height: 54px; background: rgba(44, 62, 80, 0.5); border: 2px solid #f39c12; /* 安全警示黄 */ border-radius: 2px; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.4); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; } /* 模拟卷帘门的横向纹理 */ .industrial-door-top::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 180deg, transparent, transparent 6px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.3) 7px ); z-index: 1; transition: transform 0.5s ease; } /* 内部图标容器 */ .industrial-door-top .door-icon { position: relative; z-index: 2; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #f39c12; /* 黄色箭头 */ margin-bottom: 4px; transition: transform 0.3s ease; } /* 文字样式 */ .industrial-door-top .door-text { position: relative; z-index: 2; color: #ecf0f1; font-family: 'Arial', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; } /* 悬停效果：模拟门向上卷起 */ .industrial-door-top:hover { background: #34495e; border-color: #fff; transform: translateY(-5px); box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4); /* 黄色光晕 */ } /* 悬停时纹理向上滚动 */ .industrial-door-top:hover::before { transform: translateY(-100%); } /* 悬停时箭头轻微上浮 */ .industrial-door-top:hover .door-icon { transform: translateY(-2px); border-bottom-color: #fff; } /* 移动端适配 */ @media screen and (max-width: 768px) { .industrial-door-top { width: 44px; height: 44px; right: 15px; bottom: 20px; } .industrial-door-top .door-icon { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #f39c12; } .industrial-door-top .door-text { font-size: 8px; } } .product-detail{max-width: 14rem;} .product-detail .description .control-matrix{max-width: 100%;} body{font-family: var(--font-main), sans-serif !important;} .index-steps .tel a h3,.g-head .tel h5{font-family: var(--font-main), sans-serif !important;} /* --- 1. 全局变量与基础设置 (已补全) --- */ :root { --primary-blue: #0056b3; --dark-grey: #1a1a1a; --light-grey: #f4f6f8; --border-color: #e1e4e8; --text-main: #2c3e50; --text-light: #6c757d; } * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: auto !important; /* 遵循你的要求 */ color: var(--text-main); background: #fff; } section { font-family: auto !important; /* 遵循你的要求 */ }  .wal { max-width: 15.7rem; /* 约 2240px，非常宽的布局 */  width: 100%; } .kys-section { padding: 80px 0; background: #fff; } /* --- 3. 通用组件 --- */ .section-tag { display: inline-block; font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700; color: var(--primary-blue); letter-spacing: 1px; margin-bottom: 15px; border: 1px solid var(--primary-blue); padding: 2px 8px; text-transform: uppercase; } .section-header { margin-bottom: 50px; max-width: 100%; /* 限制标题宽度，避免在宽屏上太难读 */ } .section-header h3 { font-size: 32px; margin-bottom: 15px; } .section-header p { font-size: 16px; line-height: 1.8; color: var(--text-light); margin-bottom: 20px; border-left: 3px solid #e1e4e8; padding-left: 20px; font-style: normal; } .header-line { width: 60px; height: 3px; background: var(--primary-blue); margin-top: 10px; } /* --- 4. Banner --- */ .kys-app-banner { position: relative; height: 65vh; min-height: 600px; background-image: url("/web/Nimg/0914.webp"); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; } .banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .banner-content { position: relative; z-index: 2; color: #fff; max-width: 900px; } .banner-content .banner-tag { color: #fff; border-color: #fff; margin-bottom: 25px; } .banner-content h1 { color: #fff; font-size: 48px; margin-bottom: 25px; } .banner-content p { color: rgba(255,255,255,0.9); font-size: 18px; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; } .btn-industrial { display: inline-block; padding: 15px 40px; background: transparent; border: 2px solid #fff; color: #fff; font-weight: 600; text-decoration: none; transition: all 0.3s; font-size: 14px; letter-spacing: 1px; } .btn-industrial:hover { background: #fff; color: var(--dark-grey); } /* --- 5. Reliable Section --- */ .reliable-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center; } .reliable-content h2 { font-size: 40px; margin-bottom: 25px; } .lead-text { font-size: 17px; color: var(--text-light); line-height: 1.8; margin-bottom: 50px; border-left: 3px solid var(--primary-blue); padding-left: 25px; } .feature-list { display: grid; grid-template-columns: repeat(3, 1fr); /* 宽屏下横向排列 */ gap: 20px; } .feature-item { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #f8f9fa; border: 1px solid transparent; transition: all 0.3s ease; } .feature-item:hover { border-color: var(--border-color); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.03); } .f-icon { width: 40px; height: 40px; background: #fff; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--primary-blue); } .f-text h4 { font-size: 16px; margin-bottom: 5px; } .f-text p { font-size: 13px; } /* 图片框架 */ .industrial-frame { position: relative; padding: 15px; background: #fff; border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } .industrial-frame img { width: 100%; display: block; } .frame-corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--primary-blue); z-index: 2; } .frame-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; } .frame-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; } .frame-label { position: absolute; bottom: -10px; right: 20px; background: var(--primary-blue); color: #fff; font-family: 'Courier New', monospace; font-size: 12px; padding: 4px 10px; font-weight: 700; letter-spacing: 1px; } /* --- 6. App Grid --- */ .app-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); /* 宽屏下显示更多列 */ gap: 30px; } .app-card { background: #fff; border: 1px solid var(--border-color); transition: all 0.3s ease; position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .app-card:hover { border-color: var(--primary-blue); box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateY(-5px); } .card-img-wrap { height: 260px; overflow: hidden; position: relative; } .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .app-card:hover .card-img-wrap img { transform: scale(1.05); } .card-body { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; } .card-meta { display: flex; gap: 10px; font-family: 'Courier New', monospace; font-size: 12px; color: #888; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 15px; } .meta-num { font-weight: 700; color: var(--primary-blue); font-size: 14px; } .meta-cat { font-family: auto, sans-serif; font-size: 16px; } .card-body h4 { font-size: 20px; margin-bottom: 20px; color: var(--dark-grey); flex-grow: 1; } .card-arrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--primary-blue); text-transform: uppercase; margin-top: auto; } /* --- 7. Select Section --- */ .select-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .visual-frame { position: relative; padding: 10px; border: 1px solid #ddd; background: #fff; } .visual-frame img { width: 100%; display: block; } .frame-decor { position: absolute; bottom: -15px; right: -15px; width: 120px; height: 120px; border-right: 3px solid var(--primary-blue); border-bottom: 3px solid var(--primary-blue); z-index: -1; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-blue); font-weight: 600; text-decoration: none; margin-top: 30px; font-size: 16px; } /* --- 8. Matters Section --- */ .kys-matters-section { background: var(--light-grey); padding: 100px 0; position: relative; } .matters-header { text-align: center; max-width: 800px; margin: 0 auto 60px; } .matters-header h2 { font-size: 36px; margin-bottom: 20px; } .matters-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 宽屏下保持4列 */ gap: 30px; } .matter-card { background: #fff; padding: 40px 25px; border: 1px solid var(--border-color); text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .matter-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 3px; background: var(--primary-blue); transition: width 0.3s ease; } .matter-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: transparent; } .matter-card:hover::before { width: 100%; } .m-icon-box { width: 70px; height: 70px; background: var(--light-grey); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: var(--primary-blue); transition: all 0.3s ease; } .matter-card:hover .m-icon-box { background: var(--primary-blue); color: #fff; } .m-icon-box svg { width: 32px; height: 32px; } .matter-card h4 { font-size: 18px; margin-bottom: 15px; color: var(--dark-grey); } .grid-footer-line { margin-top: 50px; height: 1px; background: linear-gradient(to right, transparent, #ccc, transparent); opacity: 0.5; } /* --- 9. Product Section --- */ .kys-product-section { background: #fff; } .product-list { display: grid; grid-template-columns: repeat(3, 1fr); /* 宽屏下3列 */ gap: 40px; } .prod-item { background: #fff; border: 1px solid var(--border-color); transition: all 0.3s; } .prod-item:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.05); } .prod-thumb img { width: 100%; height: 280px; object-fit: cover; } .prod-info { padding: 30px; } .prod-info h4 { font-size: 18px; margin-bottom: 15px; } .prod-link { display: inline-block; margin-top: 20px; font-size: 13px; font-weight: 700; color: var(--dark-grey); text-decoration: none; border-bottom: 2px solid var(--primary-blue); padding-bottom: 2px; } /* --- 10. CTA Section --- */ .kys-cta-section { background: var(--dark-grey); padding: 80px 0; } .cta-box { display: flex; justify-content: space-between; align-items: center; gap: 50px; } .cta-content h2 { color: #fff; font-size: 32px; margin-bottom: 15px; } .cta-content p { color: #aaa; font-size: 16px; max-width: 600px; } .btn-cta { background: var(--primary-blue); color: #fff; padding: 18px 40px; text-decoration: none; font-weight: 700; border-radius: 2px; transition: background 0.3s; font-size: 15px; white-space: nowrap; } .btn-cta:hover { background: #004494; } /* --- 响应式调整 --- */ @media (max-width: 1200px) { .wal { max-width: 90%; /* 在小屏幕上不再强制 14rem */ } .feature-list, .matters-grid { grid-template-columns: repeat(2, 1fr); } .product-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .banner-content h1 { font-size: 32px; } .reliable-layout, .select-layout, .cta-box { grid-template-columns: 1fr; text-align: center; gap: 40px; } .lead-text { border-left: none; padding-left: 0; } .feature-list, .matters-grid, .product-list, .app-grid-container { grid-template-columns: 1fr; } .frame-decor { display: none; } .cta-box { flex-direction: column; } } /* --- SVG 矢量卷帘门 Loading 样式 --- */ #svg-shutter-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s ease, visibility 0.5s ease; } /* 隐藏状态 */ #svg-shutter-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; /* 防止遮挡点击 */ } /* SVG 容器大小 */ .shutter-svg { width: 80px; height: 96px; overflow: visible; } /* 文字样式 */ .loader-text { margin-top: 15px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; color: #2c3e50; letter-spacing: 2px; opacity: 0.8; animation: text-pulse 2s infinite ease-in-out; } /* --- 内部动画 --- */ .curtain-group { animation: shutter-roll-real 2.5s cubic-bezier(0.45, 0, 0.55, 1) forwards; } .door-texture { animation: texture-move 0.4s linear infinite; } /* --- Keyframes --- */ @keyframes shutter-roll-real { 0% { transform: scaleY(1); opacity: 1; } 10% { transform: scaleY(1); } /* 蓄力 */ 100% { transform: scaleY(0); opacity: 0; } /* 卷起消失 */ } @keyframes texture-move { from { transform: translateY(0); } to { transform: translateY(-10px); } } @keyframes text-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .kys-app-title{font-size: .22rem;}.product-detail .craft-sheet { --craft-ink: #202a2d; --craft-muted: #687377; --craft-line: #d9dfdc; --craft-accent: #bd6729; margin: .9rem 0 1rem; padding: .7rem; color: var(--craft-ink); background: #f3f5f2; border: 1px solid #e0e4e1; } .craft-sheet__header { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: end; padding: .08rem .18rem .4rem; border-bottom: 2px solid var(--craft-ink); } .craft-sheet__eyebrow { grid-column: 1 / -1; color: var(--craft-accent); font-size: .12rem; font-weight: 700; letter-spacing: .14em; } .craft-sheet__header h3 { margin: 0; font-size: .34rem; line-height: 1.15; letter-spacing: .02em; } .craft-sheet__code { color: var(--craft-muted); font-size: .12rem; letter-spacing: .1em; } .craft-sheet__lead { display: flex; align-items: center; gap: .16rem; margin: .4rem 0; padding: .18rem .2rem; background: #fff; border-left: 3px solid var(--craft-accent); } .craft-sheet__number { color: var(--craft-accent); font-size: .2rem; font-weight: 800; } .craft-sheet__lead p { margin: 0; color: var(--craft-muted); font-size: .18rem; line-height: 1.45; } .craft-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .16rem; } .craft-item { padding: .22rem .2rem .1rem; background: #fff; border: 1px solid var(--craft-line); border-top: 3px solid var(--craft-ink); } .craft-item__index { color: var(--craft-accent); font-size: .12rem; font-weight: 800; letter-spacing: .1em; } .craft-item h4 { margin: .1rem 0 .12rem; font-size: .2rem; line-height: 1.25; } .craft-item ul { margin: 0; padding: 0; list-style: none; } .craft-item li { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: .12rem; padding: .1rem 0; border-top: 1px solid #edf0ed; } .craft-item__media { display: flex; flex-wrap: wrap; gap: .03rem; align-self: stretch; width: 240px; min-height: 240px; } .craft-item__media img { display: block; width: 240px; height: 240px; object-fit: contain; object-position: center; } .craft-item__media a { display: block; flex: 0 0 240px; width: 240px; height: 240px; } .craft-item__copy { display: grid; gap: .03rem; min-width: 0; } .craft-item li strong { color: var(--craft-ink) !important; font-size: .18rem; line-height: 1.35; } .craft-item li small { color: var(--craft-muted); font-size: .15rem; line-height: 1.45; } .craft-item--paired { grid-column: 1 / -1; } .craft-item--paired ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .16rem; } .craft-item--paired li { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: .14rem; padding: .14rem; border: 1px solid var(--craft-line); background: #fbfcfa; } .craft-item--paired .craft-item__media { width: 240px; min-height: 240px; margin-bottom: 0; } .craft-item--paired .craft-item__media img { width: 240px; height: 240px; } @media (max-width: 768px) { .product-detail .craft-sheet { padding: .35rem; } .craft-sheet__header { grid-template-columns: 1fr; } .craft-sheet__header h3 { font-size: .25rem; } .craft-sheet__code { margin-top: .04rem; } .craft-sheet__grid { grid-template-columns: 1fr; gap: .12rem; } .craft-item li { display: block; } .craft-item__media { width: 100%; min-height: 240px; margin-bottom: .12rem; } .craft-item__media img { flex-basis: 240px; width: 240px; height: 240px; } .craft-item--paired { grid-column: auto; } .craft-item--paired ul { grid-template-columns: 1fr; } .craft-item--paired li { display: block; } .craft-item--paired .craft-item__media { width: 100%; margin-bottom: .12rem; } }.product-detail .description .page { width: 100%; max-width: 1180px; margin: 0 auto; padding: 64px 0 72px; color: #20272b; } .product-detail .description .page .intro { max-width: 820px; margin: 0 0 40px; padding-left: 22px; border-left: 4px solid #d66b32; } .product-detail .description .page .intro h1 { margin: 0 0 14px; color: #20272b; font-size: clamp(32px, 4vw, 56px); font-weight: 650; letter-spacing: -0.64px; line-height: 1.1; } .product-detail .description .page .intro p { margin: 0; color: #667177; font-size: 17px; line-height: 1.65; } .product-detail .description .page .products { display: grid; gap: 18px; } .product-detail .description .page .product { display: grid; grid-template-columns: 40% 60%; min-height: 218px; overflow: hidden; border: 1px solid #d9dfe1; background: #fff; box-shadow: 0 8px 26px rgba(32, 39, 43, 0.045); padding:0 } .product-detail .description .page .product__image { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 18px; background: #f1f3f2; } .product-detail .description .page .product__image img { display: block; width: 100%; height: 180px; object-fit: contain; mix-blend-mode: multiply; } .product-detail .description .page .product__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28px 36px; } .product-detail .description .page .product__number { margin: 0 0 8px; color: #d66b32; font-size: 12px; font-weight: 700; letter-spacing: 1.92px; line-height: 1.4; } .product-detail .description .page .product h2 { margin: 0 0 10px; color: #20272b; font-size: clamp(19px, 2vw, 26px); font-weight: 650; line-height: 1.25; } .product-detail .description .page .product p { margin: 0; color: #667177; font-size: 16px; line-height: 1.65; } @media (max-width: 700px) { .product-detail .description .page { padding: 40px 0 52px; } .product-detail .description .page .intro { margin-bottom: 28px; padding-left: 16px; } .product-detail .description .page .product { grid-template-columns: 1fr; } .product-detail .description .page .product__image img { height: 190px; } .product-detail .description .page .product__content { padding: 24px; } }.index-banner li .bd .title h3,.index-banner li .bd .title h2,.index-steps .hd h2,.index-steps .hd h5,.page-banner h1,.kys-custom-title,.palette-header h3{color: #fff;} .spec-text span,.kys-ind-tag,.kys-app-tag,.kys-app-keyword,.index-product .hd h5,.ral-name,.palette-header p,.index-news .list li a .bd p,.g-foot p,.product .side .nav li a,.product .list li a .bd p,.product-detail .kb-content p,.product-detail .description .feature-text p,.product-detail .description .ca-text-content p,.product-detail .description .card-info p,.as-content p,.pl-header p,.pl-info p,.product-detail .description .promise-content p,.panel-header p,.tq-card p{font-size: .16rem;} .kys-pro-desc,.kys-ind-desc p,.spec-text strong,.kys-app-desc,.kys-custom-desc,.palette-header p,.ral-code,.index-banner li .bd p,.product-detail .kb-content h5,.product-detail .description .card-info h5,.description .rpi-body h5,.pl-info h4,.tq-card h5,.intro-text p,.feature-list li strong,.info-card p{font-size: .2rem} .kys-ind-subtitle,.kys-app-header p,.kys-pro-title,.kys-app-title,.index-product .hd p,.product .side .nav .title h2,.product-detail .description .feature-text h3,.as-content h4{font-size: .24rem} .pl-header h3{font-size: .4rem} .kys-ind-title,.kys-app-header h2,.index-product .hd h2,.palette-header h3,.kys-custom-title{font-size: .56rem}/* 卷帘门风格侧边栏 - 工业门色调 #c9672a */ .g-foot-sidebar { position: fixed; right: 0; top: 75%; transform: translateY(-50%); z-index: 999; display: flex; flex-direction: column; gap: 0.08rem; } .sidebar-btn { width: 0.56rem; height: 0.56rem; background: linear-gradient(135deg, #c9672a 0%, #b5591f 100%); border-radius: 0.08rem 0 0 0.08rem; display: flex; align-items: center; justify-content: center; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(201, 103, 42, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: visible; } /* 卷帘门纹理效果 - 横向条纹 */ .sidebar-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.08) 2px, rgba(255, 255, 255, 0.08) 4px ); border-radius: 0.08rem 0 0 0.08rem; pointer-events: none; z-index: 0; } /* 金属光泽效果 */ .sidebar-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100% ); border-radius: 0.08rem 0 0 0; pointer-events: none; z-index: 0; } .sidebar-btn:hover { transform: translateX(-0.06rem); box-shadow: 0 6px 20px rgba(201, 103, 42, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.3); } .sidebar-btn:hover::before { background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.12) 2px, rgba(255, 255, 255, 0.12) 4px ); } .sidebar-btn:active { transform: translateX(0.02rem); } .sidebar-svg { width: 0.28rem; height: 0.28rem; color: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); position: relative; z-index: 1; } /* 悬停提示框 - 邮箱和电话显示内容 */ .sidebar-tooltip { position: absolute; right: calc(100% + 0.15rem); top: 50%; transform: translateY(-50%) translateX(0.1rem); background: linear-gradient(135deg, #c9672a 0%, #b5591f 100%); color: #fff; padding: 0.1rem 0.2rem; border-radius: 0.04rem; font-size: 0.18rem; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); z-index: 2; } .sidebar-tooltip::after { content: ''; position: absolute; right: -0.06rem; top: 50%; width: 0; height: 0; border-top: 0.05rem solid transparent; border-bottom: 0.05rem solid transparent; border-left: 0.06rem solid #b5591f; transform: translateY(-50%); } .sidebar-btn:hover .sidebar-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } /* 留言弹框 */ .message-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .message-modal.active { opacity: 1; visibility: visible; } .message-panel { position: absolute; right: 0; top: 1rem; bottom: 0; height: 85vh; width: 4rem; max-width: 90vw; background: #f7f4f1; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; box-sizing: border-box; border-radius: .1rem; } .message-modal.active .message-panel { transform: translateX(0); } .message-header { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0.3rem; background: linear-gradient(135deg, #c9672a 0%, #b5591f 100%); color: #fff; position: relative; border-bottom: 0.06rem solid #8f4218; } /* 弹框头部卷帘门纹理 */ .message-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(255, 255, 255, 0.06) 3px, rgba(255, 255, 255, 0.06) 6px ); pointer-events: none; } .message-header h3 { margin: 0; font-size: 0.24rem; font-weight: 600; position: relative; z-index: 1; } .close-btn { background: none; border: none; color: #fff; font-size: 0.36rem; cursor: pointer; line-height: 1; padding: 0; width: 0.4rem; height: 0.4rem; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; position: relative; z-index: 1; } .close-btn:hover { transform: rotate(90deg); } .message-form { padding: 0.18rem 0.3rem 0.12rem; } .form-group { margin-bottom: 0.1rem; } .form-group label { display: block; margin-bottom: 0.04rem; font-size: 0.16rem; color: #333; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 0.07rem 0.1rem; border: 2px solid #e0e0e0; border-radius: 0.04rem; font-size: 0.16rem; transition: border-color 0.3s ease; box-sizing: border-box; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #c9672a; } .form-group textarea { resize: vertical; font-family: inherit; height: 0.72rem; min-height: 0.72rem; } .submit-btn { width: 100%; padding: 0.1rem; background: linear-gradient(135deg, #c9672a 0%, #b5591f 100%); color: #fff; border: none; border-radius: 0.04rem; font-size: 0.18rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(201, 103, 42, 0.3); position: relative; overflow: hidden; } /* 提交按钮卷帘门纹理 */ .submit-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.08) 2px, rgba(255, 255, 255, 0.08) 4px ); pointer-events: none; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(201, 103, 42, 0.4); } .submit-btn:hover::before { background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.12) 2px, rgba(255, 255, 255, 0.12) 4px ); } .submit-btn:active { transform: translateY(0); } .message-intro { margin: 0 0.3rem 0.3rem; padding: 0.18rem; background: #fff; border: 1px solid #eadfd7; border-left: 0.05rem solid #c9672a; box-shadow: 0 2px 8px rgba(93, 52, 29, 0.08); } .message-intro img { display: block; width: 100%; max-height: 1.7rem; object-fit: cover; margin-bottom: 0.16rem; } .message-intro-content h4 { margin: 0 0 0.1rem; color: #9b481d; font-size: 0.2rem; font-weight: 600; } .message-intro-content p { margin: 0.06rem 0 0; color: #666; font-size: 0.14rem; line-height: 1.6; } @media (max-width: 768px) { .g-foot-sidebar { display: none; } .message-panel { width: 100%; } }.door-panel-styles { position: relative; width: 200%; margin: 70px auto 80px; text-align: center; } .door-panel-styles__header { max-width: 760px; margin: 0 auto 35px; } .door-panel-styles__title { margin: 0 0 14px; color: #222; font-size: 36px; line-height: 1.25; } .door-panel-styles__subtitle { margin: 0 0 12px; color: #333; font-size: 20px; font-weight: 500; } .door-panel-styles__intro { margin: 0; color: #777; font-size: 15px; line-height: 1.9; } .door-panel-styles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; text-align: left; } .door-panel-styles__item { overflow: hidden; margin: 0; background: #f7f7f7; } .door-panel-styles__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s ease; } .door-panel-styles__item:hover img { transform: scale(1.04); } @media (max-width: 768px) { .door-panel-styles { left: 0; width: 100%; margin: 45px auto 55px; } .door-panel-styles__title { font-size: 30px; } .door-panel-styles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } .description .motor-specifications { --motor-ink: #1c2a35; --motor-muted: #68747c; --motor-line: #d9dfe2; --motor-accent: #c87937; width: 100%; max-width: 1180px; margin: 76px auto 82px; padding: 62px 56px 58px; color: var(--motor-ink); background: #eef1f2; border-top: 1px solid #d5dcdf; border-bottom: 1px solid #d5dcdf; } .motor-specifications__intro { max-width: 650px; margin: 0 auto 44px; text-align: center; } .motor-specifications__eyebrow, .motor-spec-card__label { display: block; color: var(--motor-accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; line-height: 1.4; } .motor-specifications__intro h3 { margin: 11px 0 13px; color: var(--motor-ink); font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } .motor-specifications__intro p { margin: 0; color: var(--motor-muted); font-size: 14px; line-height: 1.8; } .motor-spec-card { margin-top: 24px; background: #fff; border: 1px solid var(--motor-line); box-shadow: 0 8px 24px rgba(28, 42, 53, .045); } .motor-spec-card__head { display: flex; align-items: center; min-height: 92px; padding: 21px 28px; border-bottom: 1px solid var(--motor-line); } .motor-spec-card__index { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 18px; color: #fff; background: var(--motor-ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; } .motor-spec-card__head h4 { margin: 5px 0 0; color: var(--motor-ink); font-size: 21px; font-weight: 600; line-height: 1.25; } .motor-spec-table-wrap { overflow-x: auto; width: 100%; } .motor-spec-table { width: 100%; min-width: 690px; border-collapse: collapse; table-layout: auto; font-size: 13px; } .motor-spec-table th, .motor-spec-table td { padding: 16px 17px; border-right: 1px solid var(--motor-line); border-bottom: 1px solid var(--motor-line); text-align: center; vertical-align: middle; line-height: 1.45; } .motor-spec-table tr:last-child th, .motor-spec-table tr:last-child td { border-bottom: 0; } .motor-spec-table th:last-child, .motor-spec-table td:last-child { border-right: 0; } .motor-spec-table thead th { color: #fff; background: var(--motor-ink); border-color: #34434d; font-size: 12px; font-weight: 600; white-space: nowrap; } .motor-spec-table thead th:first-child { width: 18%; color: #d9e0e3; text-align: left; } .motor-spec-table tbody th { color: var(--motor-ink); background: #f7f9f9; font-weight: 600; text-align: left; white-space: nowrap; } .motor-spec-table tbody tr.motor-spec-table__section th { padding: 8px 17px; color: var(--motor-ink); background: #e5e9ea; font-size: 12px; letter-spacing: .08em; text-align: center; text-transform: uppercase; } .motor-spec-table tbody td { color: #526069; background: #fff; } .motor-spec-table tbody tr:hover td { background: #fffaf5; } .motor-spec-table tbody tr:hover th { color: var(--motor-accent); } @media (max-width: 768px) { .description .motor-specifications { margin: 48px auto 58px; padding: 42px 16px 40px; } .motor-specifications__intro { margin-bottom: 30px; } .motor-specifications__intro h3 { font-size: 28px; } .motor-spec-card { margin-top: 18px; } .motor-spec-card__head { min-height: 78px; padding: 17px 16px; } .motor-spec-card__index { width: 34px; height: 34px; margin-right: 12px; font-size: 11px; } .motor-spec-card__head h4 { font-size: 17px; } .motor-spec-table { font-size: 12px; } .motor-spec-table th, .motor-spec-table td { padding: 13px 12px; } .motor-spec-table tbody tr.motor-spec-table__section th { padding: 8px 12px; } }.related-accessories { margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee; } .ra-header { margin-bottom: 30px; text-align: center; } .ra-header h3 { font-size: 28px; color: #333; margin-bottom: 10px; font-weight: 600; } .ra-header .header-line { width: 60px; height: 3px; background-color: #0056b3; margin: 0 auto; } .ra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .ra-card { display: block; background: #fff; border: 1px solid #e1e4e8; border-radius: 8px; overflow: hidden; transition: all 0.3s ease; text-decoration: none; } .ra-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: #0056b3; } .ra-img-wrap { width: 100%; height: 250px; overflow: hidden; background: #f8f9fa; } .ra-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ra-card:hover .ra-img-wrap img { transform: scale(1.05); } .ra-body { padding: 20px; text-align: center; } .ra-body h5 { font-size: 18px; color: #2c3e50; margin: 0; font-weight: 500; transition: color 0.3s ease; } .ra-card:hover .ra-body h5 { color: #0056b3; } @media (max-width: 768px) { .ra-grid { grid-template-columns: 1fr; } .ra-img-wrap { height: 200px; } }.product-detail .description .motor-specs-section { margin: 60px 0; } .product-detail .description .motor-specs-header { margin-bottom: 24px; text-align: center; } .product-detail .description .motor-specs-header h3 { margin: 0 0 12px; font-size: .26rem; } .product-detail .description .motor-specs-header p { margin: 0; font-size: .16rem; } .product-detail .description .motor-specs-table-wrap { width: 100%; margin-bottom: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .product-detail .description .motor-specs-table { width: 100%; min-width: 1480px; border-collapse: collapse; table-layout: fixed; background: #fff; } .product-detail .description .motor-specs-table th, .product-detail .description .motor-specs-table td { min-width: 108px; padding: 13px 12px; border: 1px solid #e5e5e5; color: #333; font-size: 14px; line-height: 1.5; text-align: center; vertical-align: middle; overflow-wrap: anywhere; } .product-detail .description .motor-specs-table thead th { background: #f15d00; color: #fff; font-weight: 600; white-space: nowrap; } .product-detail .description .motor-specs-table tbody th { position: sticky; left: 0; z-index: 1; min-width: 190px; background: #f8f8f8; font-weight: 600; text-align: left; } .product-detail .description .motor-specs-table thead th:first-child { position: sticky; left: 0; z-index: 2; min-width: 190px; } .product-detail .description .motor-specs-table tbody tr:nth-child(even) td { background: #fcfcfc; } .product-detail .description .motor-extra-specs { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .product-detail .description .motor-extra-specs h4 { margin: 0 0 14px; } .product-detail .description .motor-extra-specs .motor-specs-table { min-width: 760px; } .product-detail .description .motor-extra-specs .motor-specs-table th, .product-detail .description .motor-extra-specs .motor-specs-table td { min-width: 140px; } @media (max-width: 768px) { .product-detail .description .motor-specs-section { margin: 40px 0; } .product-detail .description .motor-specs-table th, .product-detail .description .motor-specs-table td { padding: 10px 9px; font-size: 13px; } .product-detail .description .motor-specs-table tbody th, .product-detail .description .motor-specs-table thead th:first-child { min-width: 155px; } } .product-detail .description .motor-specs-legacy { display: none; } .product-detail .description .motor-model-table { margin: 0 0 34px; padding: 22px; border: 1px solid #d7d9d6; border-top: 4px solid #69736e; background: #f4f5f2; box-shadow: 0 8px 20px rgba(48, 58, 52, .08); } .product-detail .description .motor-model-table h4, .product-detail .description .motor-extra-specs--styled h4 { margin: 0 0 16px; color: #3d4944; font-size: 20px; letter-spacing: .04em; } .product-detail .description .motor-model-table__inner { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-color: #69736e #e4e8e4; scrollbar-width: thin; } .product-detail .description .motor-specs-table--models { min-width: 1450px; table-layout: auto; border: 1px solid #c8ceca; } .product-detail .description .motor-model-table__inner::-webkit-scrollbar, .product-detail .description .motor-extra-specs--styled::-webkit-scrollbar { height: 9px; } .product-detail .description .motor-model-table__inner::-webkit-scrollbar-track, .product-detail .description .motor-extra-specs--styled::-webkit-scrollbar-track { background: #e4e8e4; border-radius: 8px; } .product-detail .description .motor-model-table__inner::-webkit-scrollbar-thumb, .product-detail .description .motor-extra-specs--styled::-webkit-scrollbar-thumb { background: #69736e; border-radius: 8px; } .product-detail .description .motor-specs-table--models th, .product-detail .description .motor-specs-table--models td { min-width: 0; padding: 11px 10px; border-color: #c8ceca; font-size: 13px; white-space: normal; } .product-detail .description .motor-specs-table--models thead th { background: #5d6963; color: #fff; text-align: center; } .product-detail .description .motor-specs-table--models tbody th { position: static; min-width: 86px; background: #e7ebe7; color: #35413b; text-align: center; } .product-detail .description .motor-specs-table--models tbody tr:nth-child(even) td { background: #eef1ee; } .product-detail .description .motor-specs-table--models tbody tr:hover td, .product-detail .description .motor-specs-table--models tbody tr:hover th { background: #dfe6e0; } .product-detail .description .motor-extra-specs--styled { margin-top: 0; padding: 22px; border: 1px solid #d7d9d6; border-top: 4px solid #a87936; background: #f4f5f2; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-color: #a87936 #e4e8e4; scrollbar-width: thin; } .product-detail .description .motor-extra-specs--styled .motor-specs-table { min-width: 760px; } .product-detail .description .motor-extra-specs--styled .motor-specs-table th, .product-detail .description .motor-extra-specs--styled .motor-specs-table td { min-width: 0; border-color: #c8ceca; } .product-detail .description .motor-extra-specs--styled .motor-specs-table thead th { background: #69736e; } @media (max-width: 1100px) { .product-detail .description .motor-model-table__inner { overflow-x: auto; } .product-detail .description .motor-specs-table--models { width: auto; table-layout: auto; } .product-detail .description .motor-specs-table--models th, .product-detail .description .motor-specs-table--models td { padding: 7px 4px; font-size: 12px; line-height: 1.35; } } @media (max-width: 768px) { .product-detail .description .motor-model-table, .product-detail .description .motor-extra-specs--styled { padding: 15px; } }.product-detail .description .motor-specs-section { margin: 60px 0; } .product-detail .description .motor-specs-header { margin-bottom: 24px; text-align: center; } .product-detail .description .motor-specs-header h3 { margin: 0 0 12px; color: #3d4944; } .product-detail .description .motor-specs-header p { margin: 0; color: #69736e; } .product-detail .description .motor-model-table { margin: 0 0 34px; padding: 22px; border: 1px solid #d7d9d6; border-top: 4px solid #69736e; background: #f4f5f2; box-shadow: 0 8px 20px rgba(48, 58, 52, .08); } .product-detail .description .motor-model-table h4 { margin: 0 0 16px; color: #3d4944; font-size: 20px; letter-spacing: .04em; } .product-detail .description .motor-model-table__inner { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-color: #69736e #e4e8e4; scrollbar-width: thin; } .product-detail .description .motor-model-table__inner::-webkit-scrollbar { height: 9px; } .product-detail .description .motor-model-table__inner::-webkit-scrollbar-track { background: #e4e8e4; border-radius: 8px; } .product-detail .description .motor-model-table__inner::-webkit-scrollbar-thumb { background: #69736e; border-radius: 8px; } .product-detail .description .motor-specs-table--models { width: auto; min-width: 1900px; border-collapse: collapse; table-layout: auto; border: 1px solid #c8ceca; background: #fff; } .product-detail .description .motor-specs-table--models th, .product-detail .description .motor-specs-table--models td { min-width: 108px; padding: 11px 10px; border: 1px solid #c8ceca; color: #35413b; font-size: 13px; line-height: 1.45; text-align: center; vertical-align: middle; white-space: normal; } .product-detail .description .motor-specs-table--models th:last-child, .product-detail .description .motor-specs-table--models td:last-child { min-width: 360px; max-width: 460px; text-align: left; } .product-detail .description .motor-specs-table--models thead th { background: #5d6963; color: #fff; font-weight: 600; } .product-detail .description .motor-specs-table--models tbody th { position: sticky; left: 0; z-index: 1; min-width: 96px; background: #e7ebe7; font-weight: 600; } .product-detail .description .motor-specs-table--models tbody tr:nth-child(even) td { background: #eef1ee; } .product-detail .description .motor-specs-table--models tbody tr:hover td, .product-detail .description .motor-specs-table--models tbody tr:hover th { background: #dfe6e0; } @media (max-width: 768px) { .product-detail .description .motor-specs-section { margin: 40px 0; } .product-detail .description .motor-model-table { padding: 15px; } .product-detail .description .motor-specs-table--models { min-width: 1750px; } .product-detail .description .motor-specs-table--models th, .product-detail .description .motor-specs-table--models td { padding: 8px 6px; font-size: 12px; } .product-detail .description .motor-specs-table--models th:last-child, .product-detail .description .motor-specs-table--models td:last-child { min-width: 300px; } }.product-detail .description .product-media-section { margin: 60px 0; } .product-detail .description .product-media-header { margin-bottom: 24px; text-align: center; } .product-detail .description .product-media-header h3 { margin: 0 0 12px; color: #3d4944; font-size: .26rem; } .product-detail .description .product-video-grid, .product-detail .description .product-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; } .product-detail .description .product-video-card, .product-detail .description .product-photo-card { display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: hidden; border: 1px solid #d7d9d6; border-top: 4px solid #69736e; background: #f4f5f2; box-shadow: 0 8px 20px rgba(48, 58, 52, .08); } .product-detail .description .product-video-card video, .product-detail .description .product-photo-card img { display: block; width: 100%; height: 240px; object-fit: contain; object-position: center; } .product-detail .description .product-photo-grid { margin-bottom: 0; } .product-detail .description .product-photo-card { border-top-color: #a87936; } @media (max-width: 768px) { .product-detail .description .product-media-section { margin: 40px 0; } .product-detail .description .product-video-grid, .product-detail .description .product-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .product-detail .description .product-video-card, .product-detail .description .product-photo-card, .product-detail .description .product-video-card video, .product-detail .description .product-photo-card img { min-height: 180px; height: 180px; } } @media (max-width: 480px) { .product-detail .description .product-video-grid, .product-detail .description .product-photo-grid { grid-template-columns: 1fr; } }/* ===== Mega Menu 产品下拉导航 ===== */ .g-head { position: relative !important; } .g-head .wal { overflow: visible !important; } .g-nav > ul > .li_01 { position: static !important; } .g-nav > ul > .li_01 > .list { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: .68rem !important; width: 16.5rem !important; background: #e8ecf1 !important; box-shadow: 0 6px 24px rgba(0,0,0,0.15) !important; border-top: 3px solid #1a3a6b !important; padding: 28px 20px !important; z-index: 9999 !important; display: none !important; } @media (min-width: 801px) { .g-nav > ul > .li_01:hover > .list { display: block !important; } } .mega-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 30px; max-width: none; margin: 0; padding: 0; } .mega-menu-col { min-width: 0; } .mega-menu-col-title { font-size: 15px; font-weight: 700; color: #1a1a2e; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid #1a3a6b; line-height: 1.3; } .mega-menu-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; text-decoration: none; color: #333; font-size: 13px; transition: all 0.2s ease; gap: 10px; border-radius: 6px; margin: 0 -10px; } .mega-menu-item:hover { color: #1a3a6b; background: #e8eaef; } .mega-menu-item-text { flex: 1; min-width: 0; line-height: 1.4; } .mega-menu-item-img { width: 52px; height: 52px; min-width: 52px; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .mega-menu-item-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; } .g-head .g-nav>ul>li .list a{ height: .6rem; } .g-head .g-nav>ul>li .list a img{ width: 100%; } @media (max-width: 768px) { .mega-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .g-nav > ul > .li_01 > .list { position: static !important; box-shadow: none !important; border-top: none !important; padding: 10px 0 !important; } }

/* PDO: one product + one matching spec table */
.pdo-catalog { --motor-ink: #1c2a35; --motor-muted: #68747c; --motor-line: #d9dfe2; --motor-accent: #c87937; width: 100%; max-width: 1180px; margin: 48px auto 56px; padding: 0; color: var(--motor-ink); background: transparent; border: 0; }
.pdo-catalog.motor-specifications { margin: 48px auto 56px; padding: 0; background: transparent; border: 0; }
.pdo-catalog__intro { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.pdo-catalog__intro h3 { font-size: 28px; font-weight: 700; color: #222; margin: 11px 0 15px; }
.pdo-catalog__list { display: flex; flex-direction: column; gap: 56px; counter-reset: pdo-table; }
.pdo-pair { position: relative; padding: 0 14px 18px; margin-bottom: .5rem; background: #e8eef2; border: 1px solid #c5ced6; border-left: 10px solid #1c2a35; box-shadow: 0 10px 28px rgba(28, 42, 53, .08); counter-increment: pdo-table; }
.pdo-pair:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-28px - 0.25rem);
  height: 2px;
  background: #1c2a35;
  opacity: 0.35;
  pointer-events: none;
}
.pdo-pair--alt { background: #f8efe4; border-color: #e4c8a4; border-left-color: #c87937; box-shadow: 0 10px 28px rgba(200, 121, 55, .14); }
.pdo-pair__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 -14px 14px; padding: 14px 16px; background: #1c2a35; border: 0; position: sticky; top: 0; z-index: 6; box-shadow: 0 6px 16px rgba(28, 42, 53, .18); }
.pdo-pair--alt .pdo-pair__head { background: #c87937; box-shadow: 0 6px 16px rgba(200, 121, 55, .22); }
.pdo-pair__index { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; color: #1c2a35; background: #fff; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.pdo-pair--alt .pdo-pair__index { color: #c87937; background: #fff; }
.pdo-pair__kicker { color: #c5d4dc; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.pdo-pair--alt .pdo-pair__kicker { color: #ffe8d0; }
.pdo-pair__name { flex: 1 1 220px; margin: 0; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.3; }
.pdo-body { background: #fff; border: 1px solid var(--motor-line); overflow: visible; }
.pdo-product .otl-item { margin-bottom: 0; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.pdo-product .otl-item:hover { transform: none; box-shadow: none; }
.pdo-product .otl-img-col { flex: 0 0 18%; max-width: 18%; background: #fff; }
.pdo-product .otl-text-col { flex: 0 0 82%; max-width: 82%; padding: 12px 18px; }
.pdo-product .otl-img-wrap { height: 140px; min-height: 140px; }
.pdo-product .otl-img-wrap img { object-fit: contain; }
.pdo-product .otl-content h4 { font-size: 18px; margin-bottom: 8px; }
.pdo-product .otl-content p { font-size: 14px; line-height: 1.55; }
.pdo-spec { margin-top: 0; max-width: 100%; }
.pdo-spec .motor-spec-card { margin-top: 0; border: 0; box-shadow: none; }
.pdo-spec .motor-spec-card__index { display: none; }
.pdo-spec .motor-spec-card__head { min-height: 0; padding: 12px 20px; border-bottom: 0; background: #f3f6f8; }
.pdo-pair--alt .pdo-spec .motor-spec-card__head { background: #f7ecdf; }
.pdo-spec .motor-spec-card__head h4 { margin: 4px 0 0; }
.pdo-spec .motor-spec-card__head h4::before {
  content: "TABLE " counter(pdo-table, decimal-leading-zero) "  ·  ";
  color: #1c2a35;
  font-weight: 800;
  letter-spacing: .04em;
}
.pdo-pair--alt .pdo-spec .motor-spec-card__head h4::before { color: #c87937; }
.pdo-spec .motor-spec-table-wrap { overflow-x: auto; max-width: 100%; border-top: 4px solid #1c2a35; }
.pdo-pair--alt .pdo-spec .motor-spec-table-wrap { border-top-color: #c87937; }
.pdo-pair .motor-spec-table thead th {
  background: #1c2a35;
  color: #fff;
  border-color: #34434d;
  border-bottom: 3px solid #1c2a35;
}
.pdo-pair .motor-spec-table thead th:first-child { color: #d9e0e3; }
.pdo-pair--alt .motor-spec-table thead th {
  background: #c87937;
  color: #fff;
  border-color: #b56c2f;
  border-bottom: 3px solid #c87937;
}
.pdo-pair--alt .motor-spec-table thead th:first-child { color: #ffe8d0; }
.pdo-pair .motor-spec-table thead th:first-child,
.pdo-pair .motor-spec-table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
}
.pdo-pair .motor-spec-table thead th:first-child { z-index: 3; }
.pdo-pair .motor-spec-table tbody th { background: #eef3f6; }
.pdo-pair--alt .motor-spec-table tbody th { background: #fbf3e9; }
.pdo-pair .motor-spec-table tbody tr.motor-spec-table__section th { background: #d5dee4; }
.pdo-pair--alt .motor-spec-table tbody tr.motor-spec-table__section th { background: #edd9be; }
.pdo-catalog .motor-specifications__eyebrow { display: block; }
@media (max-width: 768px) {
  .pdo-catalog { margin: 32px auto 40px; }
  .pdo-catalog__list { gap: 36px; }
  .pdo-pair { padding: 0 10px 12px; }
  .pdo-pair__head { margin: 0 -10px 12px; padding: 10px 12px; }
  .pdo-pair__name { font-size: 16px; }
  .pdo-product .otl-img-col, .pdo-product .otl-text-col { flex: 0 0 100%; max-width: 100%; }
  .pdo-product .otl-img-wrap { height: 120px; min-height: 120px; }
  .pdo-product .otl-text-col { padding: 12px; }
}

.product-detail .description .motor-model-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 18px; }
.product-detail .description .motor-model-gallery__item { margin: 0; padding: 8px; background: #fff; border: 1px solid #c8ceca; }
.product-detail .description .motor-model-gallery__item img { width: 100%; height: 120px; object-fit: contain; display: block; }
@media (max-width: 900px) {
  .product-detail .description .motor-model-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .product-detail .description .motor-model-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
  .product-detail .description .motor-model-gallery__item img { height: 100px; }
}

.product-detail .description .product-feature-video,
.product-detail .description .product-gallery-group { margin: 0 0 22px; padding: 18px 18px 16px; border: 1px solid #d7d9d6; border-top: 4px solid #69736e; background: #f4f5f2; box-shadow: 0 8px 20px rgba(48, 58, 52, .08); }
.product-detail .description .product-gallery-group--type { border-top-color: #69736e; }
.product-detail .description .product-gallery-group--detail { border-top-color: #a87936; }
.product-detail .description .product-gallery-group--scene { border-top-color: #4a6d8c; }
.product-detail .description .product-feature-video h4,
.product-detail .description .product-gallery-group h4 { margin: 0 0 14px; color: #3d4944; font-size: 18px; letter-spacing: .04em; }
.product-detail .description .product-feature-video video { display: block; width: 100%; background: #1c2420; }
.product-detail .description .product-feature-video__main { margin-bottom: 12px; overflow: hidden; background: #fff; border: 1px solid #c8ceca; }
.product-detail .description .product-feature-video__main video { height: 380px; object-fit: contain; }
.product-detail .description .product-feature-video__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-detail .description .product-feature-video__list video { height: 200px; object-fit: contain; background: #fff; border: 1px solid #c8ceca; }
.product-detail .description .product-gallery-group__grid { display: grid; gap: 12px; }
.product-detail .description .product-gallery-group--type .product-gallery-group__grid,
.product-detail .description .product-gallery-group--detail .product-gallery-group__grid,
.product-detail .description .product-gallery-group--scene .product-gallery-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-detail .description .product-gallery-item { margin: 0; padding: 8px; background: #fff; border: 1px solid #c8ceca; }
.product-detail .description .product-gallery-item a { display: block; line-height: 0; }
.product-detail .description .product-gallery-item img { display: block; width: 100%; height: 180px; object-fit: contain; }
.product-detail .description .product-gallery-group--type .product-gallery-item img { height: 250px; }
@media (max-width: 768px) {
  .product-detail .description .product-feature-video,
  .product-detail .description .product-gallery-group { padding: 14px 12px 12px; margin-bottom: 16px; }
  .product-detail .description .product-feature-video__main video { height: 220px; }
  .product-detail .description .product-feature-video__list { grid-template-columns: 1fr; gap: 8px; }
  .product-detail .description .product-feature-video__list video { height: 180px; }
  .product-detail .description .product-gallery-group--type .product-gallery-group__grid,
  .product-detail .description .product-gallery-group--detail .product-gallery-group__grid,
  .product-detail .description .product-gallery-group--scene .product-gallery-group__grid { grid-template-columns: 1fr; gap: 8px; }
  .product-detail .description .product-gallery-item img,
  .product-detail .description .product-gallery-group--scene .product-gallery-item img { height: 200px; }
}

/* Door and Window Screens only */
.product-detail .description .product-media-section--screens {
  margin: 36px 0 12px;
}
.product-detail .description .product-media-section--screens .product-media-header {
  margin-bottom: 28px;
}
.product-detail .description .product-media-section--screens .product-media-header h3 {
  margin: 0 0 10px;
  color: #222;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.product-detail .description .product-media-section--screens .product-feature-video,
.product-detail .description .product-media-section--screens .product-gallery-group {
  margin: 0 0 42px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.product-detail .description .product-media-section--screens .product-feature-video h4,
.product-detail .description .product-media-section--screens .product-gallery-group h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7e5;
  color: #2c3330;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.product-detail .description .product-media-section--screens .product-gallery-group h4::after {
  content: "Slide to view each model";
  color: #8b938e;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.product-detail .description .product-media-section--screens .product-feature-video__main {
  margin: 0;
  background: #f7f8f6;
  border: 1px solid #e3e6e3;
}
.product-detail .description .product-media-section--screens .product-feature-video__main video {
  height: 460px;
  object-fit: contain;
  background: #111;
}
.product-detail .description .product-media-section--screens .product-gallery-group__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #c5cbc7 transparent;
  grid-template-columns: none;
}
.product-detail .description .product-media-section--screens .product-gallery-group__grid::-webkit-scrollbar {
  height: 6px;
}
.product-detail .description .product-media-section--screens .product-gallery-group__grid::-webkit-scrollbar-thumb {
  background: #c5cbc7;
  border-radius: 99px;
}
.product-detail .description .product-media-section--screens .product-gallery-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0;
  padding: 22px;
  background: #f7f8f6;
  border: 1px solid #e3e6e3;
}
.product-detail .description .product-media-section--screens .product-gallery-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 520px;
  background: #fff;
  line-height: normal;
}
.product-detail .description .product-media-section--screens .product-gallery-group--type .product-gallery-item img,
.product-detail .description .product-media-section--screens .product-gallery-group--detail .product-gallery-item img,
.product-detail .description .product-media-section--screens .product-gallery-group--scene .product-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .product-detail .description .product-media-section--screens .product-feature-video__main video {
    height: 220px;
  }
  .product-detail .description .product-media-section--screens .product-gallery-item {
    padding: 12px;
  }
  .product-detail .description .product-media-section--screens .product-gallery-item a {
    height: 300px;
  }
  .product-detail .description .product-media-section--screens .product-gallery-group h4::after {
    content: "Swipe to view each model";
  }
}

.contact-brief { margin: 0.4rem auto 0.28rem; padding: 0.28rem 0.32rem; background: linear-gradient(135deg, rgba(15, 22, 27, 0.97), rgba(28, 36, 41, 0.96)); border: 1px solid rgba(190, 153, 98, 0.24); border-radius: 0.12rem; box-shadow: 0 0.18rem 0.45rem rgba(6, 8, 12, 0.16); }
.contact-brief__head { margin-bottom: 0.2rem; padding-bottom: 0.16rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.contact-brief__title { margin: 0; font-size: 0.28rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: #f2efe7; }
.contact-brief__eyebrow { display: inline-block; margin-bottom: 0.06rem; font-size: 0.12rem; letter-spacing: 0.16em; text-transform: uppercase; color: #d9b57f; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.18rem; }
.contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.16rem; align-items: center; padding: 0.2rem 0.2rem 0.16rem; background: rgba(245, 240, 233, 0.03); border: 1px solid rgba(214, 187, 146, 0.2); border-radius: 0.1rem; }
.contact-panel--address { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.12rem; }
.contact-panel--address .contact-panel__label { margin-bottom: 0; flex: 0 0 auto; }
.contact-panel__label { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 0.1rem; margin-bottom: 0.08rem; font-size: 0.16rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #d9b57f; line-height: 1.2; }
.contact-panel__label::before { content: ""; width: 0.22rem; height: 1px; background: rgba(217, 181, 127, 0.9); }
.contact-panel__body { display: contents; }
.contact-list { grid-column: 1; grid-row: 2; min-width: 0; list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.02rem; padding: 0.08rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.contact-list li:last-child { border-bottom: none; padding-bottom: 0; }
.contact-list li:first-child { padding-top: 0; }
.contact-list__name { font-size: 0.12rem !important; line-height: 1.3 !important; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(240, 235, 226, 0.55) !important; }
.contact-list a { font-size: 0.16rem !important; line-height: 1.4 !important; color: #f5f1e8; text-decoration: none; word-break: break-word; }
.contact-list a:hover { color: #d9b57f; }
.contact-list__note { font-size: 0.12rem !important; line-height: 1.3 !important; color: rgba(240, 235, 226, 0.72) !important; }
.contact-qr { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 1.48rem; padding: 0.06rem; background: #fff; border-radius: 0.06rem; text-align: center; text-decoration: none !important; }
.contact-qr img { display: block; width: 1.36rem; height: 1.36rem; object-fit: contain; }
.contact-qr span { display: block; margin-top: 0.04rem; font-size: 0.1rem !important; line-height: 1.2 !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1c2a35 !important; }
.contact-qr:hover { opacity: 0.92; }
.address-strong { margin: 0; flex: 1; min-width: 0; font-size: 0.16rem; line-height: 1.55; color: rgba(240, 235, 226, 0.92); }
.contact-panel:hover { border-color: rgba(214, 187, 146, 0.5); }
@media (max-width: 991px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-panel--address { flex-direction: column; gap: 0.08rem; }
}
@media (max-width: 640px) {
  .contact-brief { padding: 0.2rem 0.16rem; }
  .contact-brief__title { font-size: 0.24rem; }
  .contact-qr { flex-basis: 1.1rem; width: 1.1rem; }
  .contact-qr img { width: 0.98rem; height: 0.98rem; }
}

.company-intro-section { padding: 72px 0 36px; background: #eef0ec; color: #2c3531; }
.company-intro-section [data-aos] { opacity: 1 !important; transform: none !important; }
.company-intro-section .wal { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.ci-kicker { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8a6a3a; }
.company-intro-section .section-header { text-align: center; margin: 0 auto 42px; max-width: 720px; }
.company-intro-section .section-header h2 { margin: 0 0 12px; color: #1f2724; font-size: 34px; font-weight: 700; letter-spacing: .04em; }
.company-intro-section .section-header p { margin: 0; color: #5d6963; font-size: 16px; font-style: normal; }
.company-intro-section .section-header::after { content: ""; display: block; width: 48px; height: 3px; margin: 18px auto 0; background: #69736e; }
.company-intro-section .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 36px; background: #f7f8f6; border: 1px solid #d7d9d6; border-top: 4px solid #69736e; border-radius: 0; box-shadow: none; padding: 0; }
.company-intro-section .stat-item { padding: 28px 16px; text-align: center; border-right: 1px solid #d7d9d6; background: transparent; box-shadow: none; border-radius: 0; }
.company-intro-section .stat-item:last-child { border-right: none; }
.company-intro-section .stat-value { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.company-intro-section .stat-num { color: #1f2724; font-size: 40px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.company-intro-section .stat-unit { color: #69736e; font-size: 16px; font-weight: 600; }
.company-intro-section .stat-label { display: block; margin-top: 10px; color: #5d6963; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.company-intro-section .intro-content-row { display: grid !important; grid-template-columns: 1.15fr .85fr; flex-direction: unset; gap: 0; margin-bottom: 36px; background: #f7f8f6; border: 1px solid #d7d9d6; border-top: 4px solid #69736e; box-shadow: none; border-radius: 0; padding: 0 !important; align-items: stretch; }
.company-intro-section .intro-text { padding: 36px 34px; flex: none; opacity: 1; }
.company-intro-section .intro-text h3 { margin: 0 0 16px; color: #1f2724 !important; font-size: 22px; letter-spacing: .04em; }
.company-intro-section .intro-text p { margin: 0 0 20px; color: #4a534e !important; font-size: 15px; line-height: 1.85; }
.company-intro-section .feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.company-intro-section .feature-list li { position: relative; margin: 0; padding: 0 0 0 18px; color: #3d4944 !important; font-size: 15px; line-height: 1.6; }
.company-intro-section .feature-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: #8a6a3a; }
.company-intro-section .intro-image { position: relative; flex: none; min-height: 320px; overflow: hidden; background: #d7d9d6; border-radius: 0; }
.company-intro-section .intro-image img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.company-intro-section .factory-mosaic { margin-bottom: 22px; border: 1px solid #d7d9d6; background: #1f2724; }
.company-intro-section .factory-mosaic__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 16px; background: #1f2724; color: #f4f5f2; }
.company-intro-section .factory-mosaic__bar h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.company-intro-section .factory-mosaic__bar p { margin: 0; color: #c5b08a; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.company-intro-section .factory-mosaic__wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 92px; gap: 3px; background: #1f2724; counter-reset: shot; }
.company-intro-section .factory-mosaic__shot { position: relative; margin: 0; overflow: hidden; grid-column: span 4; grid-row: span 2; min-height: 0; background: #2a322f; counter-increment: shot; }
.company-intro-section .factory-mosaic__shot:nth-child(1),
.company-intro-section .factory-mosaic__shot:nth-child(2) { grid-column: span 6; grid-row: span 3; }
.company-intro-section .factory-mosaic__shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.company-intro-section .factory-mosaic__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px 11px; background: linear-gradient(180deg, transparent, rgba(15, 20, 18, .82)); color: #f4f5f2; }
.company-intro-section .factory-mosaic__shot figcaption em { flex: none; font-style: normal; font-size: 11px; letter-spacing: .14em; color: #d9b57f; }
.company-intro-section .factory-mosaic__shot figcaption em::before { content: counter(shot, decimal-leading-zero); }
.company-intro-section .factory-mosaic__shot figcaption span { font-size: 12px; letter-spacing: .04em; line-height: 1.3; }
.company-intro-section .culture-block { margin: 48px 0 20px; }
.company-intro-section .culture-block__head { max-width: 560px; margin: 0 0 28px; }
.company-intro-section .culture-block__head h3 { margin: 0 0 10px; color: #1f2724; font-size: 28px; letter-spacing: .03em; }
.company-intro-section .culture-block__head p { margin: 0; color: #5d6963; font-size: 15px; line-height: 1.7; }
.company-intro-section .culture-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.company-intro-section .culture-item { padding: 26px 22px 24px; background: #fff; border-top: 3px solid #8a6a3a; }
.company-intro-section .culture-item__no { display: block; margin-bottom: 18px; color: #8a6a3a; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.company-intro-section .culture-item h4 { margin: 0 0 10px; color: #1f2724; font-size: 18px; letter-spacing: .02em; }
.company-intro-section .culture-item p { margin: 0; color: #4a534e; font-size: 14px; line-height: 1.7; }
.company-intro-section .history-block { margin: 56px 0 36px; padding: 42px 0 8px; border-top: 1px solid #d7d9d6; }
.company-intro-section .history-block__head { max-width: 560px; margin: 0 auto 36px; text-align: center; }
.company-intro-section .history-block__head h3 { margin: 0 0 10px; color: #1f2724; font-size: 28px; letter-spacing: .03em; }
.company-intro-section .history-block__head p { margin: 0; color: #5d6963; font-size: 15px; line-height: 1.7; }
.company-intro-section .history-flow { position: relative; max-width: 880px; margin: 0 auto; padding: 8px 0 12px; list-style: none; }
.company-intro-section .history-flow::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 16px; width: 1px; background: #cbb58a; transform: translateX(-50%); }
.company-intro-section .history-flow li { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin: 0 0 34px; align-items: start; }
.company-intro-section .history-flow li:last-child { margin-bottom: 0; }
.company-intro-section .history-year { position: relative; display: block; color: #8a6a3a; font-size: 28px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.company-intro-section .history-year::after { content: ""; position: absolute; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: #8a6a3a; box-shadow: 0 0 0 5px #eef0ec; }
.company-intro-section .history-copy h4 { margin: 0 0 8px; color: #1f2724; font-size: 18px; }
.company-intro-section .history-copy p { margin: 0; color: #4a534e; font-size: 14px; line-height: 1.75; }
.company-intro-section .history-flow li:nth-child(odd) .history-year { text-align: right; padding-right: 8px; }
.company-intro-section .history-flow li:nth-child(odd) .history-year::after { right: -31px; }
.company-intro-section .history-flow li:nth-child(even) .history-year { order: 2; padding-left: 8px; }
.company-intro-section .history-flow li:nth-child(even) .history-copy { order: 1; text-align: right; }
.company-intro-section .history-flow li:nth-child(even) .history-year::after { left: -31px; }

.contact-2 { padding: 20px 0 80px; background: #eef0ec; color: #2c3531; }
.contact-2 .wal { max-width: 860px; }
.contact-2 .hd { margin-bottom: 28px; text-align: center; }
.contact-2 .hd h2 { margin: 0 0 10px; color: #1f2724; font-size: 30px; letter-spacing: .06em; text-transform: none; }
.contact-2 .hd p { display: block; margin: 0; color: #5d6963; font-size: 15px; font-family: inherit; }
.contact-2 .hd p::before { content: none; }
.contact-2 .form ul { gap: 16px; }
.contact-2 .form li .input { background: #f7f8f6; border: 1px solid #d7d9d6; border-radius: 0; }
.contact-2 .form li .input textarea,
.contact-2 .form li .input input { height: 52px; line-height: 52px; padding: 0 16px; color: #1f2724; background: transparent; font-size: 15px; }
.contact-2 .form li .input textarea { height: 140px; line-height: 1.6; padding: 14px 16px; }
.contact-2 .form li .input input::-webkit-input-placeholder,
.contact-2 .form li .input textarea::-webkit-input-placeholder { color: #7a847e; }
.contact-2 .submit { margin-top: 22px; }
.contact-2 .submit div { width: 220px; height: 50px; border-radius: 0; background: #1f2724; color: #f4f5f2; box-shadow: none; font-size: 14px; letter-spacing: .16em; }
.contact-2 .submit div:hover { background: #8a6a3a; box-shadow: none; }

@media (max-width: 900px) {
  .company-intro-section .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-intro-section .stat-item:nth-child(2) { border-right: none; }
  .company-intro-section .stat-item:nth-child(1),
  .company-intro-section .stat-item:nth-child(2) { border-bottom: 1px solid #d7d9d6; }
  .company-intro-section .intro-content-row { grid-template-columns: 1fr; }
  .company-intro-section .intro-image img { min-height: 240px; height: 240px; }
  .company-intro-section .factory-mosaic__wall { grid-auto-rows: 78px; }
  .company-intro-section .factory-mosaic__shot:nth-child(1),
  .company-intro-section .factory-mosaic__shot:nth-child(2) { grid-column: span 6; grid-row: span 3; }
  .company-intro-section .factory-mosaic__shot:nth-child(n+3) { grid-column: span 6; grid-row: span 2; }
  .company-intro-section .culture-list { grid-template-columns: 1fr 1fr; }
  .company-intro-section .history-flow::before { left: 84px; transform: none; }
  .company-intro-section .history-flow li { grid-template-columns: 72px 1fr; column-gap: 24px; }
  .company-intro-section .history-flow li:nth-child(odd) .history-year,
  .company-intro-section .history-flow li:nth-child(even) .history-year { order: 0; text-align: left; padding: 0; font-size: 22px; }
  .company-intro-section .history-flow li:nth-child(even) .history-copy { order: 0; text-align: left; }
  .company-intro-section .history-flow li:nth-child(odd) .history-year::after,
  .company-intro-section .history-flow li:nth-child(even) .history-year::after { left: auto; right: -18px; }
  .company-intro-section .section-header h2 { font-size: 28px; }
}
@media (max-width: 640px) {
  .company-intro-section { padding: 48px 0 20px; }
  .company-intro-section .stats-grid { grid-template-columns: 1fr; }
  .company-intro-section .stat-item { border-right: none; border-bottom: 1px solid #d7d9d6; }
  .company-intro-section .stat-item:last-child { border-bottom: none; }
  .company-intro-section .intro-text { padding: 22px 18px; }
  .company-intro-section .stat-num { font-size: 32px; }
  .company-intro-section .factory-mosaic__bar { flex-direction: column; gap: 4px; }
  .company-intro-section .factory-mosaic__shot:nth-child(n) { grid-column: span 12; grid-row: span 2; }
  .company-intro-section .factory-mosaic__shot:nth-child(1) { grid-row: span 3; }
  .company-intro-section .culture-list { grid-template-columns: 1fr; }
  .company-intro-section .culture-block__head h3,
  .company-intro-section .history-block__head h3 { font-size: 24px; }
  .company-intro-section .history-block { margin-top: 40px; padding-top: 32px; }
  .contact-2 .submit div { width: 100%; }
}

.blog-index { padding: 48px 0 72px; background: #eef0ec; color: #2c3531; }
.blog-index .news { display: block; max-width: 1180px; margin: 0 auto; padding: 0 20px 0; grid-template-columns: none; gap: 0; }
.blog-index .ci-kicker { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8a6a3a; }
.blog-index .blog-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid #d7d9d6; }
.blog-index .blog-toolbar__copy h2 { margin: 0; color: #1f2724; font-size: 26px; letter-spacing: .04em; }
.blog-index .form { position: relative; flex: 0 0 320px; max-width: 100%; margin: 0; border: 1px solid #d7d9d6; background: #f7f8f6; border-radius: 0; }
.blog-index .form .input input { width: 100%; height: 46px; line-height: 46px; padding: 0 52px 0 14px; font-size: 14px; color: #1f2724; background: transparent; }
.blog-index .form .input input::-webkit-input-placeholder { color: #7a847e; }
.blog-index .form .submit { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: 46px; border-radius: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #1f2724; color: #f4f5f2; }
.blog-index .form .submit::after { content: "\f002"; font-size: 14px; }
.blog-index .form .submit:hover { background: #8a6a3a; }
.blog-index .list ul { display: grid; gap: 12px; }
.blog-index .list li { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; background: #f7f8f6; border: 1px solid #d7d9d6; }
.blog-index .list li .zoomImg { display: block; margin: 0; height: 148px; overflow: hidden; border-radius: 0; background: #d7d9d6; }
.blog-index .list li .zoomImg img { display: block; width: 100%; height: 148px; max-height: none; object-fit: cover; }
.blog-index .list li .bd { padding: 16px 20px 14px; font-family: inherit; }
.blog-index .list li .bd .info { margin-bottom: 6px; font-size: 12px; gap: 14px; }
.blog-index .list li .bd .info div { color: #5d6963; }
.blog-index .list li .bd .info div::before { color: #8a6a3a; font-size: 13px; }
.blog-index .list li .bd .info div:nth-child(2)::before { content: "\f06e"; font-family: "fa-solid-900"; }
.blog-index .list li .bd h5 { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; }
.blog-index .list li .bd h5 a { color: #1f2724; }
.blog-index .list li .bd h5 a:hover { color: #8a6a3a; }
.blog-index .list li .bd p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 10px; font-size: 14px; line-height: 1.65; color: #4a534e; }
.blog-index .list li .bd .more a { font-family: inherit; font-size: 12px; letter-spacing: .12em; color: #8a6a3a; }
.blog-index .list li .bd .more a:hover { color: #1f2724; }
.blog-index .page-num { margin-top: 28px; }

@media (max-width: 800px) {
  .blog-index .blog-toolbar { display: block; }
  .blog-index .form { flex: none; width: 100%; margin-top: 14px; }
  .blog-index .list li { grid-template-columns: 1fr; }
  .blog-index .list li .zoomImg,
  .blog-index .list li .zoomImg img { height: 180px; }
  .blog-index .list li .bd h5 { font-size: 18px; }
  .blog-index .list li .bd p { font-size: 14px; }
}

.kys-pro-thumb{height: 5rem;}
.carousel-slide img{height: 7rem;}
.feature-list{grid-template-columns: repeat(2, 1fr);}
.company-intro-section .wal{max-width: 15.7rem;}
.kys-app-img-wrap{height: 4rem;}
.message-intro img{max-height: 2.1rem;}
.mega-menu-item-img{width: 45px;height: 45px;background: rgb(205 205 205 / 50%);}
@media screen and (max-width: 800px) {
  .g-head .tel::before{display: none;}
  .index-about::before{height: 4.2rem!important;}
  .kys-pro-thumb{height: 8rem;}
  .kys-app-img-wrap{height: 7rem;}
  .message-modal.active{display: none;}
  .mega-menu-item-img{display: none;}
  .mega-menu-item-hot{display: none;}
  .g-nav > ul > .li_01:not(.open) > .list{display: none !important;}
  .g-nav > ul > .li_01.open > .list{display: block !important; height: auto; overflow: visible;}
}

/* =============================================
   Footer Light Industrial Style
   ============================================= */

/* -- 顶部: 品牌 + 导航网格 -- */
.g-foot .wal{height: auto;}
.g-foot .wal .foot-top {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* -- 品牌列 -- */
.g-foot .foot-brand {
  width: 3.6rem;
  flex-shrink: 0;
}
.g-foot .foot-logo {
  margin-bottom: 0.24rem;
}
.g-foot .foot-logo a {
  display: inline-block;
  width: 1.78rem;
}
.g-foot .foot-logo img {
  width: 100%;
  height: auto;
}
.g-foot .foot-desc {
  font-size: 0.14rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.28rem;
  text-align: left;
}
.g-foot .foot-contact-line {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.g-foot .foot-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  font-size: 0.14rem;
  color: rgba(255,255,255,0.7);
}
.g-foot .foot-contact-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* -- 导航网格 -- */
.g-foot .foot-nav {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

/* Products 占满整行 */
.g-foot .foot-nav-products {
  grid-column: 1 / -1;
}

/* Products 二级两列 */
.g-foot .foot-nav-list--2col {
  column-count: 2;
  column-gap: 0.4rem;
}
.g-foot .foot-nav-list--2col > li {
  break-inside: avoid;
}

/* -- 导航标题 -- */
.g-foot .foot-nav-title {
  font-size: 0.16rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.24rem;
  padding-bottom: 0.1rem;
  border-bottom: 2px solid rgba(255,255,255,0.12);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
}
.g-foot .foot-nav-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0.36rem;
  height: 2px;
  background: #4a9eff;
}
.g-foot .foot-nav-title a {
  color: inherit;
  text-decoration: none;
}
.g-foot .foot-nav-title a:hover {
  color: #4a9eff;
}

/* -- 导航链接 -- */
.g-foot .foot-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.g-foot .foot-nav-list > li {
  margin-bottom: 0.02rem;
}
.g-foot .foot-nav-link {
  display: block;
  font-size: 0.14rem;
  color: rgba(255,255,255,0.55);
  line-height: 2.2;
  text-decoration: none;
  transition: color 0.25s, padding-left 0.25s;
  padding: 0.02rem 0;
}
.g-foot .foot-nav-link:hover {
  color: #4a9eff;
  padding-left: 0.06rem;
}

/* -- 底部版权栏 -- */
.g-foot .wal .foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0;
}
.g-foot .wal .foot p {
  font-size: 0.13rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
  letter-spacing: 0.01em;
}

/* -- 移动端适配 -- */
@media screen and (max-width: 800px) {
  .g-foot .wal .foot-top {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0 0.3rem;
    padding-bottom: 1rem;
  }
  .g-foot .foot-brand {
    width: 100%;
  }
  .g-foot .foot-logo a {
    width: 2.3rem;
  }
  .g-foot .foot-desc {
    font-size: 0.22rem;
  }
  .g-foot .foot-contact-item {
    font-size: 0.22rem;
  }
  .g-foot .foot-nav {
    grid-template-columns: 1fr;
    gap: 0.36rem;
  }
  .g-foot .foot-nav-title {
    font-size: 0.24rem;
    margin-bottom: 0.2rem;
  }
  .g-foot .foot-nav-link {
    font-size: 0.22rem;
  }
  .g-foot .wal .foot {
    padding: 0.36rem 0;
  }
  .g-foot .wal .foot p {
    font-size: 0.2rem;
  }
}

@media screen and (max-width: 480px) {
  .feature-list .foot-nav {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* -- 微信二维码悬浮弹框 -- */
.sidebar-wechat {
  position: relative;
  cursor: pointer;
}
.sidebar-qrcode {
  display: none;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  z-index: 999;
  white-space: nowrap;
}
.sidebar-qrcode::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #fff;
}
.sidebar-qrcode img {
  width: 140px;
  height: 140px;
  display: block;
  object-fit: contain;
}
.sidebar-wechat:hover .sidebar-qrcode {
  display: block;
  width: 1.6rem;
}
/* -- 分隔线 -- */
.sidebar-divider {
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 6px auto;
}
/* -- 返回顶部按钮高亮 -- */
.sidebar-backtop {
  color: rgba(255,255,255,0.5);
  opacity: 0;
  pointer-events: none;
}
.sidebar-backtop.sidebar-backtop-visible {
  opacity: 1;
  pointer-events: auto;
}

/* HOT badge - top-right with bottom-left arrow */
.mega-menu-item-text {
  position: relative;
  display: inline-block;
}
.mega-menu-item-hot {
  position: absolute;
  top: -0.02rem;
  background: #ff3b30;
  color: #fff;
  font-size: 0.08rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.02rem 0.04rem;
  border-radius: 0.02rem;
  text-transform: uppercase;
  letter-spacing: 0.005rem;
  white-space: nowrap;
  z-index: 2;
}
.mega-menu-col:nth-child(5) .mega-menu-item:nth-child(2) .mega-menu-item-hot{
  top: 0.2rem;
}

/* Language switcher */
.g-head,
.g-head .head,
.g-head .wal,
.g-head .g-nav,
.g-head .g-nav > ul {
  overflow: visible !important;
}
.g-head .g-nav > ul > li.language {
  position: relative;
  z-index: 30;
  margin-left: 0.04rem;
}
.g-head .g-nav > ul > li.language > a.name,
.g-head .g-nav > ul > li.language.s-nav-li > a.name {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  height: 0.68rem;
  padding: 0 0.08rem;
  border: 0;
  background: transparent;
  text-transform: none;
  font-size: 0.14rem;
}
.g-head .g-nav > ul > li.language > a.name::before,
.g-head .g-nav > ul > li.language > a.name::after,
.g-head .g-nav > ul > li.language.s-nav-li > a.name::after,
.g-head .g-nav > ul > li.language.on > a.name::before,
.g-head .g-nav > ul > li.language.on > a.name::after,
.g-head .g-nav > ul > li.language:hover > a.name::before,
.g-head .g-nav > ul > li.language:hover > a.name::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}
.g-head .g-nav > ul > li.language > a.name img {
  width: 0.18rem;
  height: auto;
  display: block;
  margin: 0;
}
.g-head .g-nav > ul > li.language .lang-switch__caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.02rem;
  border-left: 0.045rem solid transparent;
  border-right: 0.045rem solid transparent;
  border-top: 0.055rem solid currentColor;
  transition: transform 0.2s ease;
}
.g-head .g-nav > ul > li.language:hover .lang-switch__caret,
.g-head .g-nav > ul > li.language.on .lang-switch__caret {
  transform: rotate(180deg);
}
.g-head .g-nav > ul > li.language > .list {
  display: block !important;
  width: 1.7rem !important;
  min-width: 1.7rem !important;
  left: auto !important;
  right: -.5rem !important;
  top: 100% !important;
  transform: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 40;
}
.g-head .g-nav > ul > li.language:hover > .list,
.g-head .g-nav > ul > li.language.on > .list {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.g-head .g-nav > ul > li.language > .list ul {
  display: block !important;
  width: 100%;
  padding: 0.08rem 0;
  background: #fff;
  border: 1px solid #e6e9ed;
  border-radius: 0.06rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.g-head .g-nav > ul > li.language > .list li {
  display: block;
  width: 100%;
  min-width: 0;
}
.g-head .g-nav > ul > li.language > .list a {
  display: flex !important;
  align-items: center;
  gap: 0.1rem;
  width: 100%;
  height: auto !important;
  padding: 0.1rem 0.16rem !important;
  font-size: 0.14rem !important;
  line-height: 1.2;
  color: #222 !important;
  text-transform: none;
  white-space: nowrap;
  background: transparent;
  border-radius: 0;
}
.g-head .g-nav > ul > li.language > .list a span {
  display: inline-block;
  font-size: 0.14rem;
  color: inherit;
}
.g-head .g-nav > ul > li.language > .list a img {
  width: 0.2rem !important;
  height: auto;
  margin: 0;
  flex-shrink: 0;
}
.g-head .g-nav > ul > li.language > .list a.on,
.g-head .g-nav > ul > li.language > .list a:hover {
  color: var(--main) !important;
  background: #f4f6f8 !important;
}
@media screen and (max-width: 800px) {
  .g-head .g-nav > ul > li.language > .list {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    display: none !important;
  }
  .g-head .g-nav > ul > li.language.on > .list,
  .g-head .g-nav > ul > li.language:hover > .list {
    display: block !important;
  }
  .g-head .g-nav > ul > li.language > .list ul {
    box-shadow: none;
    border: 0;
    background: transparent;
  }
  .g-head .g-nav > ul > li.language > .list a img {
    width: 0.28rem !important;
  }
}

/* =============================================
   Moved from view <style> blocks
   ============================================= */

/* From applications/index.html */
/* Applications page layout overrides */
.kys-reliable-section .feature-list { grid-template-columns: repeat(3, 1fr); }
.kys-product-section .product-list { grid-template-columns: repeat(4, 1fr); }

/* From blog/index.html */
/* Blog index header height */
body:has(.blog-index) .g-head { height: 1rem; }

/* From blog/show.html #1 */
.news-detail .video{margin: 0 auto;}

/* From blog/show.html #2 */
.news-detail .content .img img{width: auto;}

/* From common/footer.html */
.foot-alibaba {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    margin-top: 0.08rem;
    padding: 0.08rem 0.16rem;
    width: fit-content;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0.06rem;
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
    font-size: 0.14rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
  }
  .foot-alibaba svg {
    width: 0.2rem;
    height: 0.2rem;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .foot-alibaba:hover {
    background: #ff6a00;
    border-color: #ff6a00;
    color: #fff;
  }
  @media screen and (max-width: 800px) {
    .foot-alibaba {
      font-size: 0.22rem;
      padding: 0.12rem 0.2rem;
    }
    .foot-alibaba svg {
      width: 0.28rem;
      height: 0.28rem;
    }
  }

/* From index/index.html #1 */
.index-steps::before{background: url(https://kaiyisi.trust-code.cn/web/Nimg/082401.png) center no-repeat; background-size: cover;}
  .index-banner li .bd p{width: 6rem;}
  .index-banner li .bd .title h3{font-size: .6rem;}
  .index-about::before{height: 1.8rem;}

/* From index/index.html #2 */
.kys-garage-door { position: relative; padding: 1.1rem 0 1rem; background: linear-gradient(180deg, #f4efe9 0%, #eee7df 100%); color: #1f2328; overflow: hidden; } .kys-garage-door::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.38), rgba(162,146,128,0.1)); pointer-events: none; } .kys-garage-door .wal { position: relative; z-index: 1; max-width: 12.8rem; margin: 0 auto; padding: 0 0.2rem; } .kys-garage-intro { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 0.72rem; align-items: center; } .kys-garage-copy { position: relative; } .kys-garage-kicker { display: inline-block; padding: 0.08rem 0.18rem; border: 1px solid rgba(31,35,40,0.12); border-radius: 999px; background: rgba(255,255,255,0.44); color: #4d565d; font-size: 0.14rem; letter-spacing: 0.12em; text-transform: uppercase; } .kys-garage-copy h2 { margin: 0.28rem 0 0.22rem; font-size: 0.68rem; line-height: 1.06; letter-spacing: -0.05em; color: #1a1f22; } .kys-garage-copy h2 span { display: block; color: #7a6449; } .kys-garage-copy p { max-width: 6.2rem; font-size: 0.18rem; line-height: 1.9; color: #4a4e52; } .kys-garage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 0.24rem; margin-top: 0.5rem; } .kys-garage-card { position: relative; padding: 0.2rem 0.22rem 0.2rem 0.44rem; border: 1px solid rgba(31,35,40,0.1); background: rgba(255,255,255,0.46); border-radius: 0.18rem; color: #22272a; font-size: 0.16rem; font-weight: 600; box-shadow: 0 0.15rem 0.4rem rgba(49,46,38,0.06); } .kys-garage-card::before { content: ""; position: absolute; left: 0.18rem; top: 50%; width: 0.1rem; height: 0.1rem; border-radius: 50%; background: linear-gradient(135deg, #ab8d61, #e2c79a); transform: translateY(-50%); } .kys-garage-visual { position: relative; display: flex; justify-content: center; } .kys-garage-frame { position: relative; width: 100%; max-width: 5.5rem; padding: 0.2rem; background: linear-gradient(145deg, #d5c8b8, #f8f3ea); border: 1px solid rgba(27,28,32,0.12); border-radius: 0.28rem; box-shadow: 0 0.32rem 0.7rem rgba(29,30,32,0.18); transform: rotate(-2deg); } .kys-garage-frame::before { content: ""; position: absolute; inset: 0.18rem; border: 1px solid rgba(38,38,38,0.08); border-radius: 0.22rem; } .kys-garage-frame img { display: block; width: 100%; height: 4.8rem; object-fit: cover; border-radius: 0.18rem; position: relative; z-index: 1; } .kys-garage-badge { position: absolute; right: -0.08rem; bottom: 0.36rem; padding: 0.18rem 0.22rem; background: rgba(18,23,27,0.86); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.14rem; box-shadow: 0 0.2rem 0.5rem rgba(15,20,25,0.2); color: #ebe3d5; } .kys-garage-badge span { display: block; font-size: 0.12rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } .kys-garage-badge strong { display: block; margin-top: 0.05rem; font-size: 0.16rem; letter-spacing: 0.06em; text-transform: uppercase; } .kys-garage-content { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0.38rem; margin-top: 0.76rem; } .kys-garage-panel { background: linear-gradient(135deg, #1c2428, #11181f); border-radius: 0.26rem; padding: 0.42rem 0.38rem; box-shadow: 0 0.28rem 0.6rem rgba(14,20,24,0.16); color: #edf0f2; } .kys-garage-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.18rem; padding-bottom: 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 0.22rem; } .kys-garage-panel-head span { font-size: 0.14rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; } .kys-garage-panel-head strong { font-size: 0.2rem; letter-spacing: 0.04em; font-weight: 700; } .kys-garage-panel-body { display: grid; gap: 0.18rem; } .kys-garage-panel-row { display: block; padding: 0.18rem 0.08rem 0.18rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); color: #d7dfe5; } .kys-garage-panel-row:last-child { border-bottom: none; } .kys-garage-row-head { display: flex; align-items: center; gap: 0.12rem; margin-bottom: 0.1rem; } .kys-garage-icon { display: inline-flex; align-items: center; justify-content: center; width: 0.5rem; height: 0.5rem; border-radius: 0.14rem; background: linear-gradient(135deg, #cda772, #efd7a9); color: #1c2127; font-size: 0.26rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(26, 29, 32, 0.18); flex-shrink: 0; line-height: 1; } .kys-garage-row-head span:last-child { display: inline-block; font-size: 0.14rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d9c39b; opacity: 0.95; } .kys-garage-panel-row p { margin: 0; font-size: 0.14rem; line-height: 1.8; color: #dfe6eb; } .kys-garage-panel-row strong { color: #f7e7c7; font-weight: 600; } .kys-garage-story { padding: 0.46rem 0.5rem; background: rgba(255,255,255,0.56); border: 1px solid rgba(44,42,36,0.08); border-radius: 0.24rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); } .kys-garage-story h3 { margin: 0 0 0.18rem; font-size: 0.38rem; line-height: 1.35; color: #1d2125; letter-spacing: -0.04em; } .kys-garage-story p { margin: 0; font-size: 0.16rem; line-height: 1.9; color: #4d5258; } .kys-garage-story p + p { margin-top: 0.18rem; } .kys-garage-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.28rem; margin-top: 0.72rem; } .kys-garage-feature { position: relative; padding: 0.34rem 0.26rem 0.28rem; background: rgba(255,255,255,0.62); border: 1px solid rgba(33,32,28,0.08); border-radius: 0.2rem; box-shadow: 0 0.18rem 0.4rem rgba(15,16,18,0.06); } .kys-garage-feature-icon { display: inline-grid; place-items: center; width: 0.58rem; height: 0.58rem; border-radius: 0.16rem; background: linear-gradient(135deg, #cda772, #efd7a9); color: #1b1d21; font-size: 0.16rem; font-weight: 700; margin-bottom: 0.18rem; } .kys-garage-feature h4 { margin: 0 0 0.1rem; font-size: 0.2rem; line-height: 1.4; color: #1d2024; } .kys-garage-feature p { margin: 0; font-size: 0.14rem; line-height: 1.82; color: #52575d; } @media screen and (max-width: 900px) { .kys-garage-intro, .kys-garage-content, .kys-garage-features { grid-template-columns: 1fr; } .kys-garage-copy h2 { font-size: 0.52rem; } .kys-garage-list { grid-template-columns: 1fr 1fr; } .kys-garage-frame { max-width: 100%; transform: none; } } @media screen and (max-width: 640px) { .kys-garage-door .wal { padding: 0 0.14rem; } .kys-garage-copy h2 { font-size: 0.42rem; } .kys-garage-copy p { font-size: 0.16rem; } .kys-garage-list, .kys-garage-features { grid-template-columns: 1fr; } .kys-garage-panel, .kys-garage-story { padding-left: 0.26rem; padding-right: 0.26rem; } .kys-garage-frame img { height: 3.6rem; } .kys-garage-badge { position: static; margin-top: 0.2rem; } }

/* From products/list.html */
.product .list ul{margin-top: 1rem;}


/* Message modal: shrink toward sidebar message button */
.message-modal.closing {
  pointer-events: none;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.45s ease;
}
.message-modal.closing .message-panel {
  will-change: transform, opacity;
}
.sidebar-message.sidebar-message-hint {
  z-index: 10000;
  animation: sidebar-message-hint 0.65s ease 2;
  box-shadow: 0 0 0 0.06rem rgba(255, 255, 255, 0.7), 0 0 0.22rem 0.05rem rgba(201, 103, 42, 0.85), 0 4px 14px rgba(201, 103, 42, 0.45);
}
@keyframes sidebar-message-hint {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
  70% { transform: scale(1.08); }
}

/* English mobile: four sidebar tools sit at the bottom; back-to-top stays hidden */
@media (max-width: 800px) {
  .message-modal.active {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .g-foot {
    --kys-mobile-dock: calc(max(48px, 0.88rem) + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--kys-mobile-dock);
  }
  .g-foot .foot,
  .g-foot .wal .foot {
    bottom: var(--kys-mobile-dock);
  }
  .g-foot-sidebar {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100%;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: #b5591f;
    z-index: 999;
  }
  .sidebar-divider,
  .sidebar-backtop {
    display: none !important;
  }
  .sidebar-btn {
    width: auto;
    height: 0.88rem;
    min-width: 0;
    min-height: 48px;
    border-radius: 0;
    flex: 1 1 0;
    box-shadow: none;
  }
  .sidebar-btn + .sidebar-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  .sidebar-btn::before,
  .sidebar-btn::after {
    border-radius: 0;
  }
  .sidebar-btn:hover,
  .sidebar-btn:active {
    transform: none;
  }
  .sidebar-svg {
    width: 0.4rem;
    height: 0.4rem;
  }
  .g-foot-sidebar .sidebar-btn:hover .sidebar-tooltip,
  .g-foot-sidebar .sidebar-wechat:hover .sidebar-qrcode {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
  .g-foot-sidebar .sidebar-btn.is-open .sidebar-tooltip,
  .g-foot-sidebar .sidebar-btn.is-open:hover .sidebar-tooltip {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + 0.12rem);
    transform: translateX(-50%);
    white-space: nowrap;
    max-width: calc(100vw - 16px);
    pointer-events: auto;
    font-size: 0.24rem;
    line-height: 1.4;
    text-align: center;
  }
  .g-foot-sidebar .sidebar-email.is-open .sidebar-tooltip,
  .g-foot-sidebar .sidebar-email.is-open:hover .sidebar-tooltip {
    left: 8px;
    transform: none;
  }
  .g-foot-sidebar .sidebar-btn.is-open .sidebar-tooltip::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -0.08rem;
    border-top: 0.06rem solid #b5591f;
    border-bottom: 0;
    border-left: 0.06rem solid transparent;
    border-right: 0.06rem solid transparent;
    transform: translateX(-50%);
  }
  .g-foot-sidebar .sidebar-email.is-open .sidebar-tooltip::after {
    left: 28px;
    transform: none;
  }
  .g-foot-sidebar .sidebar-wechat.is-open .sidebar-qrcode,
  .g-foot-sidebar .sidebar-wechat.is-open:hover .sidebar-qrcode {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 160px;
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + 0.12rem);
    transform: translateX(-50%);
    margin-right: 0;
  }
  .g-foot-sidebar .sidebar-wechat.is-open .sidebar-qrcode::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -6px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
  }
  .message-modal .message-panel,
  .message-modal.active .message-panel,
  .message-modal.closing .message-panel {
    right: 50%;
    left: auto;
    top: 50%;
    bottom: auto;
    width: 92vw;
    max-width: 92vw;
    height: auto;
    max-height: 86vh;
    transform: translate(50%, -50%) !important;
    opacity: 1 !important;
    border-radius: 0.12rem;
  }
}

/* Mobile product nav: full width so all categories are on screen, drawer scrolls */
@media screen and (max-width: 800px) {
  .g-head .g-nav {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(max(48px, 0.88rem) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
  .g-nav > ul > .li_01 > .list,
  .g-nav > ul > .li_01.open > .list {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
  }
  .mega-menu-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .g-head .g-nav > ul > .li_01 .mega-menu-col-title,
  .g-head .g-nav > ul > .li_01 .mega-menu-item,
  .g-head .g-nav > ul > .li_01 .mega-menu-item-text {
    height: auto !important;
    white-space: normal;
    overflow: visible;
  }
  .g-head .g-nav > ul > .li_01 .mega-menu-item {
    align-items: flex-start;
    padding-top: 0.08rem;
    padding-bottom: 0.08rem;
  }
}