/* 这里放置所有 CSS 代码 */
:root { --color-primary: #1864A4; /* 深蓝色 */
 --color-secondary: #F7931E; /* 橙色 */
 --color-dark: #3A4651; /* 头部深灰 */
 --color-dark-blue: #024f83;
 --color-light-bg: #F5F5F5; /* 浅背景色 */
 --max-width: 1200px;
 --color-primary-dark: #024f83; /* 模块背景深蓝色 */
--color-secondary: #F7931E; /* 橙色高亮 */
--color-text-light: #fff;
--color-card-bg: #fff;
--font-family: Mulish, sans-serif;
}
.w1300 { width:100%; max-width:1300px; margin:0 auto; }
.w { width:100%; max-width:1300px; margin:50px auto 0; }
.bg-white { background:#fff; }
.pt50 { padding-top:50px; }
.bg-gray { background:#f4f4f4; }
h2 { font-size:30px; font-weight:700 }
.center { text-align:center; }
.mt50 { margin-top:50px !important; }
.txt-blue { color:#024f83; }
.txt-orange { color:#F7931E; }
.txt-center { text-align: center; }
.txt-bold { font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Mulish, sans-serif; background-color: #f4f4f4; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.header-wrapper { width: 100%; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; z-index: 1000; position: relative; }
.top-bar { background-color: #3A4651; color: #fff; font-size: 14px; padding: 10px 0; }
.top-bar-content { display: flex; justify-content: space-between; align-items: center; }
.top-bar-right-group { display: flex; align-items: center; gap: 20px; }
.desktop-lang-switch { position: relative; cursor: pointer; padding: 0 5px 5px 5px; }
.lang-dropdown { position: absolute; top: 100%; right: 0; background: #fff; color: #3A4651; border: 1px solid #ddd; min-width: 120px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); z-index: 10; display: none; }
.lang-dropdown a { display: block; padding: 8px 12px; white-space: nowrap; }
.lang-dropdown a:hover { background-color: #f0f0f0; color: #F7931E; }
.desktop-lang-switch:hover .lang-dropdown { display: block; }
.middle-bar { padding: 15px 0; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.middle-bar-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 28px; font-weight: 800; color: #3A4651; }
.btn-price { background-color: #F7931E; color: #fff; padding: 10px 20px; border-radius: 5px; font-weight: 600; text-transform: uppercase; transition: background-color 0.3s; white-space: nowrap; }
.btn-price:hover { background-color: #E07B00; }
.main-menu-bar { background-color: #EBEBEB; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.main-menu-content { display: flex; justify-content: flex-start; align-items: center; }
.main-menu-content nav { display: flex; gap: 30px; padding: 15px 0; }
.menu-item { position: relative; }
.main-menu-content a { font-size: 18px; color: #3A4651; font-weight: 600; padding: 5px 0; position: relative; transition: color 0.3s; display: block; }
 .main-menu-content a::after {
 content: '';
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 0;
 height: 2px;
 background-color: #F7931E;
 transition: width 0.3s ease-out;
}
.main-menu-content a:hover { color: #F7931E; }
 .main-menu-content a:hover::after {
 width: 100%;
}
/* 菜单下拉列表样式 */
        .submenu { position: absolute; top: 100%; left: 0; background: #fff; color: #3A4651; min-width: 180px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 999; display: none; padding: 10px 0; border-top: 2px solid #F7931E; width:300px; }
.submenu a { padding: 10px 20px; font-weight: 400; font-size: 15px; }
 .submenu a::after {
 content: none;
}
.menu-item:hover .submenu { display: block; }
.main-menu-content .logo, .main-menu-content .btn-price { display: none; }
.top-bar-mobile-logo, .mobile-func-group, .mobile-lang-switch, .hamburger-btn { display: none; }
.fixed-nav { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #fff; }
.fixed-nav .top-bar, .fixed-nav .middle-bar { display: none; }
.fixed-nav .main-menu-bar { background-color: #fff; padding: 10px 0; }
.fixed-nav .main-menu-content { justify-content: space-between; }
.fixed-nav .main-menu-content .logo, .fixed-nav .main-menu-content .btn-price { display: block; }
 @media (max-width: 900px) {
 .middle-bar, .main-menu-bar {
 display: none;
}
 .fixed-nav .main-menu-bar {
 display: none !important;
}
 .desktop-lang-switch, .top-bar-right-group div:first-child {
 display: none;
}
 .top-bar-content div:first-child {
 display: none;
}
 .top-bar-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
 .top-bar-mobile-logo {
 display: block;
 font-size: 24px;
 font-weight: 800;
 color: #fff;
}
 .mobile-func-group {
 display: flex;
 align-items: center;
 gap: 15px;
}
 .mobile-lang-switch, .hamburger-btn {
 display: block;
 font-size: 16px;
 color: #fff;
 cursor: pointer;
 padding: 5px;
}
 .fixed-nav {
 position: fixed;
}
 .fixed-nav .top-bar {
 display: block !important;
}
}
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1001; display: none; transition: opacity 0.3s; }
.modal-content { background: #fff; width: 300px; height: 100%; position: absolute; top: 0; right: -300px; padding: 30px; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); transition: right 0.3s ease-out; }
.modal-overlay.active { display: block; opacity: 1; }
.modal-overlay.active .modal-content { right: 0; }
.close-btn { position: absolute; top: 15px; right: 15px; font-size: 24px; font-weight: bold; cursor: pointer; }
.modal-menu a, .modal-lang a { display: block; padding: 10px 0; border-bottom: 1px solid #eee; color: #3A4651; font-weight: 600; }
.content { height: 200vh; padding-top: 50px; text-align: center; }
a.btn-price { padding:15px; color:#fff; }
a.btn-price:hover { background:#F7931E; color:#fff; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
section { padding: 80px 0; overflow: hidden; /* 确保动画和浮动元素不溢出 */ }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { font-size: 36px; font-weight: 800; color: var(--color-primary); position: relative; display: inline-block; margin-bottom: 10px; }
 .section-title h2::after {
 content: '';
 display: block;
 width: 50px;
 height: 4px;
 background-color: var(--color-secondary);
 margin: 10px auto 0;
}
.btn-primary { display: inline-block; background-color: var(--color-secondary); color: #fff; padding: 12px 30px; border-radius: 5px; font-weight: 700; text-transform: uppercase; transition: background-color 0.3s, transform 0.3s; }
.btn-primary:hover { background-color: #E07B00; transform: translateY(-2px); }
/* --- 01. 头部 Banner/表单区 --- */
        .hero-section { background-color: var(--color-primary); color: #fff; padding: 80px 0; position: relative; overflow: hidden; /* 效果图中的背景是深蓝色和底部的渐变过渡 */ background-image: linear-gradient(to bottom, #18486e 20%, #0b314e); }
.hero-content { display: flex; justify-content: space-evenly; align-items: center; gap: 40px; }
.hero-text { max-width:650px; }
.hero-text h1 { font-size: 48px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; color:var(--color-secondary); }
.hero-text p { font-size: 18px; margin-bottom: 30px; font-weight:bold; }
.hero-text span { font-size: 18px; margin-bottom: 30px; display:block; }
/* 快速报价表单 (右侧) */
        .quick-form { background-color: #fff; color: var(--color-dark); padding: 30px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 350px; flex-shrink: 0; }
.quick-form h3 { font-size: 24px; color: var(--color-primary); text-align: center; margin-bottom: 20px; }
.form-group { margin-bottom: 15px; }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; }
.quick-form .btn-submit { width: 100%; border: none; cursor: pointer; }
/* --- 02. 特色产品展示区 (蓝色背景) --- */
        .featured-products { background-color: var(--color-light-bg); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.product-card { background-color: #fff; padding: 20px 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.product-card img { margin: 0 auto 15px; object-fit: contain; }
.product-card h3 { font-size: 18px; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; }
.product-card .btn-more { font-size: 14px; color: var(--color-secondary); font-weight: 600; }
/* --- 03. 优势/认证区 --- */
        .advantages-section { padding: 50px 0; background: linear-gradient(to right, #DCE9F7, #ffffff); }
.advantage-grid { display: flex; justify-content: space-around; gap: 30px; text-align: center; flex-wrap: wrap; }
.advantage-item { flex-basis: 200px; }
.advantage-item i { font-size: 40px; color: var(--color-primary); margin-bottom: 10px; }
/* --- 04. 核心产品列表 (两列布局) --- */
        .core-products-section { background-color: #fff; }
.core-product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.core-product-item { background-color: var(--color-light-bg); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }
.core-product-item img { width: 100%; height: 250px; object-fit: cover; }
.product-info { padding: 25px; }
.product-info h3 { font-size: 22px; color: var(--color-primary); margin-bottom: 10px; }
/* --- 05. 公司简介/视频区 (蓝色背景) --- */
        .about-us-section { background-color: var(--color-primary); color: #fff; padding: 80px 0; }
.about-content { display: flex; gap: 40px; align-items: center; }
.about-text { flex: 1; }
.about-text h2 { font-size: 32px; font-weight: 800; margin-bottom: 20px; }
.about-video { flex-shrink: 0; width: 50%; height: 300px; background-color: #000; border-radius: 10px; overflow: hidden; position: relative; }
 .about-video::before {
 content: '▶'; /* 模拟播放按钮 */
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 60px;
 color: #fff;
 opacity: 0.8;
 cursor: pointer;
}
/* --- 06. 底部 Footer --- */
        .main-footer { background-color: var(--color-dark); color: #ccc; padding: 50px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 30px; margin-bottom: 30px; }
.footer-logo { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 15px; }
.footer-links h4, .footer-contact h4 { color: #fff; margin-bottom: 15px; font-size: 18px; }
        
        /* --- 响应式设计 (完美适配移动端) --- */
        @media (max-width: 1200px) {
 .product-grid {
 grid-template-columns: repeat(2, 1fr);
}
}
 @media (max-width: 992px) {
 section {
 padding: 50px 0;
}
 .hero-content {
 flex-direction: column;
 text-align: center;
}
 .quick-form {
 width: 100%;
 max-width: 400px;
}
 .core-product-list {
 grid-template-columns: 1fr;
}
 .about-content {
 flex-direction: column;
}
 .about-video {
 width: 100%;
}
 .footer-grid {
 grid-template-columns: 1fr 1fr;
}
}
 @media (max-width: 600px) {
 .hero-text h1 {
 font-size: 36px;
}
 .product-grid {
 grid-template-columns: 1fr;
}
 .advantage-grid {
 justify-content: center;
}
 .footer-grid {
 grid-template-columns: 1fr;
 text-align: center;
}
}
/* --- 动画效果 (部分模块的简单动画) --- */
        /* 简单淡入动画 */
        .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
/* 产品卡片延迟动画 */
        .product-card { /* 初始状态已包含在上面的 .fade-in 中 */ }
 .product-card:nth-child(1) {
transition-delay: 0s;
}
 .product-card:nth-child(2) {
transition-delay: 0.1s;
}
 .product-card:nth-child(3) {
transition-delay: 0.2s;
}
 .product-card:nth-child(4) {
transition-delay: 0.3s;
}
/* 更多的 nth-child 延迟用于复杂的网格 */
		
       .stats-section { text-align: center; }
.stats-section h2 { font-size: 32px; font-weight: 800; color: var(--color-dark-blue); margin-bottom: 40px; }
/* --- 统计卡片网格 --- */

        .stats-grid { display: grid; /* 桌面端：4 列 */ grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-card { background-color: var(--color-dark-blue); color: #fff; padding: 30px 20px; border-radius: 8px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.stat-number { font-size: 48px; font-weight: 800; color: var(--color-secondary); margin-bottom: 10px; line-height: 1.2; min-height: 57px; /* 确保数字跳动时不影响布局高度 */ }
.stat-text { font-size: 16px; font-weight: 700; line-height: 1.4; text-transform: uppercase; padding: 0 10px; }

        /* --- 自适应/响应式设计 --- */

        /* 平板端 (768px - 1024px)：调整为 2 列 */
        @media (max-width: 1024px) {
 .stats-grid {
 grid-template-columns: repeat(2, 1fr);
}
 .stat-card {
 padding: 40px 30px;
}
}

        /* 手机端 (小于 576px)：调整为 1 列堆叠 */
        @media (max-width: 576px) {
 .stats-grid {
 grid-template-columns: 1fr;
}
 .stat-card {
 margin-bottom: 10px;
 padding: 30px 20px;
}
 .stats-section h2 {
 font-size: 28px;
}
 .stat-number {
 font-size: 40px;
 min-height: 48px;
}
}
/*slick slide*/
        .match-section { background-color: var(--color-primary-dark); color: var(--color-text-light); padding: 60px 0 30px 0; /* 调整底部，为按钮和导航留出空间 */ border-radius: 10px; overflow: hidden; /* 确保 slick 导航不溢出 */ max-width: 1200px; /* 限制模块自身的宽度 */ margin: 0 auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.match-header { max-width: 900px; margin: 0 auto 40px auto; padding: 0 20px; text-align: left; }
.match-header h2 { font-size: 36px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
/* 高亮 'block making machine' */
        .match-header h2 span { color: var(--color-secondary); }
.match-header p { font-size: 16px; line-height: 1.6; opacity: 0.9; }
/* --- 产品卡片样式 --- */
        .product-card { background-color: var(--color-card-bg); color: #333; border-radius: 8px; margin: 10px; /* 为 slick 轮播图添加间距 */ padding: 30px 20px; text-align: center;  /* 固定高度，保持一致性 */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); display: flex !important; /* 必须使用 flex 才能在 slick 中居中内容 */ flex-direction: column; justify-content: space-between; align-items: center; }
.product-card-image { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.product-card-image img { max-height: 100%; max-width: 100%; object-fit: contain; }
.product-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
/* 'View Machine' 按钮 */
        .btn-view { display: inline-block; background-color: var(--color-primary-dark); color: var(--color-text-light); padding: 10px 25px; border-radius: 5px; font-weight: 600; transition: background-color 0.3s; }
.btn-view:hover { background-color: var(--color-secondary); }
/* --- 轮播图控制区域 --- */
        .slider-controls { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px 0 40px; /* 内部内边距 */ }
.btn-all-products { background-color: var(--color-secondary); color: #fff; padding: 10px 25px; border-radius: 5px; font-weight: 700; transition: background-color 0.3s; }
.btn-all-products:hover { background-color: #E07B00; }
/* 隐藏默认的 Slick 箭头和点，只保留底部的圆点导航 */
        .slick-prev, .slick-next { display: none !important; }
/* 调整 Slick 圆点导航位置和样式，使其与图片底部对齐 */
        .slick-dots { bottom: 0 !important; position: relative; width: auto; padding: 0; margin: 0; }
.slick-dots li button:before { font-size: 12px; color: rgba(255, 255, 255, 0.5); /* 非激活状态的圆点颜色 */ }
.slick-dots li.slick-active button:before { color: var(--color-text-light); /* 激活状态的圆点颜色 */ }

        /* --- 响应式调整 --- */
        @media (max-width: 900px) {
 .match-section {
 padding: 40px 0 20px 0;
}
 .match-header h2 {
 font-size: 30px;
}
 .product-card {
}
}
 @media (max-width: 600px) {
 .match-header {
 padding: 0 15px;
 margin-bottom: 30px;
 text-align: center;
}
 .match-header p {
 text-align: left;
}
 .match-header h2 {
 font-size: 26px;
}
 .slider-controls {
 flex-direction: column;
 gap: 20px;
 padding: 20px 15px 0 15px;
}
 .slick-dots {
 margin-top: 10px;
}
}
/*end sliCk*/
.image-container { display:grid; grid-template-columns: repeat(5, 1fr);   /* 设置图片之间的间距 */ gap: 20px; margin-top:50px; }
.image-container img { width: 130px;margin:20px auto; /* 让图片填充其 Grid 单元格 */ height: auto; display: block; /* 移除图片默认的底部空间 */ object-fit: cover; }
/* 媒体查询：当屏幕宽度小于 600px 时 */
@media (max-width: 600px) {
 .image-container {
        /* 改变 Grid 列的设置：只显示 2 列 */
        grid-template-columns: repeat(2, 1fr);
 gap: 10px;
}
}

/* 媒体查询：当屏幕宽度小于 400px 时 */
@media (max-width: 400px) {
 .image-container {
        /* 改变 Grid 列的设置：只显示 1 列，图片垂直堆叠 */
        grid-template-columns: 1fr;
 gap: 5px;
}
}
:root {             /* 渐变配色：从浅蓝到中蓝，模拟截图背景 */ --i2-blue-start: #D3E1F3;
 --i2-blue-end: #A4C4E7;
            /* 主题色：橙色 */
            --i2-orange-color: #ff9900;
 --i2-dark-color: #1a1a1a;
 --i2-light-text: #ffffff;
}
/* 限制内容的总体宽度并居中 */
        .i2-container { width: 90%; max-width: 1400px; margin: -130px auto 50px; }
/* ==================== 1. 顶部区域：背景渐变与两栏布局 ==================== */

        .i2-header-section { /* 顶部背景从上到下的蓝色渐变 */ background-image: linear-gradient(180deg, var(--i2-blue-start) 0%, var(--i2-blue-end) 100%); padding: 160px 0 80px 0; margin-top:80px; }
.i2-content-map-grid { display: grid; /* 桌面端：左侧文字 (40%)，右侧地图 (60%) */ grid-template-columns: 4fr 6fr; gap: 40px; align-items: center; }

        /* 移动端调整：小于 768px 时，两栏变为单列堆叠 */
        @media (max-width: 768px) {
 .i2-content-map-grid {
 grid-template-columns: 1fr;
}
}
/* 头部文字区域样式 */
        .i2-text-content { padding-left: 10px; color: var(--i2-dark-color); }
.i2-text-content h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-top: 0; }
.i2-text-content p { color: #555; font-size: clamp(0.9rem, 1.5vw, 1.1rem); margin-bottom: 30px; }
/* 联系我们按钮样式 */
        .i2-contact-btn { display: inline-block; padding: 10px 25px; background-color: var(--i2-orange-color); color: var(--i2-light-text); text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s; }
.i2-contact-btn:hover { background-color: #cc7a00; }
/* 地图图片自适应 */
        .i2-map-area img { max-width: 100%; height: auto; display: block; }
/* ==================== 2. 底部卡片区域：1:1 比例与悬停效果 ==================== */

        .i2-cards-container { display: grid; /* 桌面端：四列等宽 */ grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 40px 10px; }

        /* 平板端调整：两列布局 */
        @media (max-width: 992px) {
 .i2-cards-container {
 grid-template-columns: repeat(2, 1fr);
}
}

        /* 移动端调整：单列布局 */
        @media (max-width: 576px) {
 .i2-cards-container {
 grid-template-columns: 1fr;
 gap: 15px;
}
}
/* 单个卡片容器 */
        .i2-card { position: relative; /* 关键：使用 aspect-ratio 实现 1:1 比例，完美自适应 */ aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; text-decoration: none; color: var(--i2-light-text); display: flex; flex-direction: column-reverse; /* 内容靠底对齐 */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
 .i2-card::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1; /* 确保在图片之上，内容之下 */
 border-radius: 12px;
            /* 正常状态的渐变：从透明到深蓝 */
            background: linear-gradient( 0deg, rgba(18, 68, 112, 1) 0%, /* 深蓝 */ rgba(18, 68, 112, 0) 60% /* 透明 */
 );
}
 .i2-card:hover::after {
            /* 悬浮状态的渐变：模拟 'Shipping' 卡片的橙黄色 */
            background: linear-gradient( 0deg, rgba(248, 153, 0, 1) 0%, /* 橙色 */ rgba(248, 153, 0, 0) 60% /* 透明 */
 );
}
 .i2-card-image::after {
background: rgb(18,68,112);
background: linear-gradient(0deg, rgba(18, 68, 112, 1) 0%, rgba(18, 68, 112, 0) 60%);
}
 .i2-card-image:hover::after {
background: linear-gradient(0deg, rgba(248, 153, 0, 1) 0%, rgba(248, 153, 0, 0) 60%);
}
/* 卡片背景图片：实现黑白/彩色切换的基础 */
        .i2-card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; /* 默认状态：除 Shipping 外都是灰度 100% (黑白) */ filter: grayscale(20%); transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out; z-index: 1; }
/* Shipping 卡片初始就是彩色或弱灰度，模拟橙色覆盖层下的效果 */
        .i2-card.i2-shipping .i2-card-image { filter: grayscale(10%); }
/* 悬停颜色覆盖层 */
        .i2-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); /* 默认深色半透明 */ transition: background-color 0.3s ease-in-out; z-index: 2; }
/* Shipping 卡片的初始橙色叠加层，模拟第二个块的初始状态 */
        .i2-card.i2-shipping .i2-card-overlay { background-color: rgba(255, 153, 0, 0.6); }
/* 卡片底部文字和箭头 */
        .i2-card-info { position: relative; padding: 15px; z-index: 3; display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* 底部文字背景渐变 */ padding-top: 50px; }
.i2-card-title { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: bold; margin: 0; }
.i2-card-arrow { font-size: 1.5em; color: #ccc; transition: color 0.3s, transform 0.3s; }
/* 鼠标悬停时的效果：彩色、放大、颜色变化 */
        
        .i2-card:hover .i2-card-image { filter: grayscale(0%); /* 图片恢复彩色 */ transform: scale(1.05); /* 图片轻微放大 */ }

        /* 悬停时：深色卡片 (非 Shipping) 叠加层变浅 */
        .i2-card:hover:not(.i2-shipping) .i2-card-overlay {
 background-color: rgba(0, 0, 0, 0.2);
}
/* 悬停时：Shipping 卡片叠加层变深橙色 (模拟颜色变化) */
        .i2-card:hover.i2-shipping .i2-card-overlay { background-color: rgba(255, 153, 0, 0.75); }
.i2-card:hover .i2-card-arrow { color: var(--i2-light-text); transform: translateX(5px); /* 箭头右移 */ }
.i3-header { margin-bottom: 40px; }
/* 重点修改：第一行文字样式 */
        .i3-header h3 { color: #888888; /* 颜色改为更浅的灰色，接近设计图 */ font-weight: 400; font-size: 1rem; /* 字体大小略微减小 */ margin-bottom: 5px; }
.i3-header span { font-weight: 600; font-size: 1.6rem; }
/* ---------------------------------
           2. Products Grid
        --------------------------------- */
        .i3-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }
.i3-product-card { background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: transform 0.3s ease; height: 100%; }
.i3-product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.i3-image-placeholder { width: 90%; margin: 10px 0 20px 0; display: flex; justify-content: center; align-items: center; }
.i3-image-placeholder.small-machine { }
.i3-image-placeholder.large-machine { }
.i3-image-placeholder.schematic { background-color: #ffffff; border: none; }
.i3-product-info { text-align: center; padding-bottom: 10px; }
.i3-product-info h4 { font-weight: 600; font-size: 1.1rem; color: #444; margin-bottom: 3px; }
.i3-product-info p { font-size: 0.9rem; color: #888; }
/* ---------------------------------
           3. CTA Section
        --------------------------------- */
        .i3-cta-box { background-color: #0b4f8c; /* 深蓝色 */ color: #ffffff; border-radius: 6px; padding: 15px 25px; margin-bottom: 20px; font-size: 1.1rem; font-weight: 400; }
.i3-cta-button { display: inline-flex; align-items: center; justify-content: center; background-color: #ff8c00; /* 橙色 */ color: #ffffff; text-decoration: none; padding: 12px 30px; border-radius: 30px; font-size: 1rem; font-weight: 600; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; }
.i3-cta-button:hover { background-color: #e67e00; }
.i3-cta-button span { margin-right: 8px; font-size: 1.2rem; line-height: 1; }

        /* ---------------------------------
           Responsive Design (自适应)
        --------------------------------- */
        @media (max-width: 768px) {
 .i3-header h2 {
 font-size: 1.5rem;
}
 .i3-products-grid {
 grid-template-columns: 1fr;
}
 .i3-product-card {
 padding: 15px;
}
 .i3-image-placeholder {
}
}
.v-container { width: 100%; max-width: 1100px; text-align: center; margin:0 auto }
/* ---------------------------------
           1. Header & Content (保持不变)
        --------------------------------- */
        .v-header { margin-bottom: 30px; }
.v-header h3 { color: #ff8c00; font-weight: 600; font-size: 1.4rem; margin-bottom: 10px; }
.v-header h3 span { font-weight: 700; color:#0b4f8c }
.v-content-text { text-align: center; margin-bottom: 40px; }
.v-content-text p { font-size: 18px; line-height: 1.7; color: #555; margin: 0 auto 15px auto; text-align:justify }
.v-content-text p strong { color: #ff8c00; font-weight: 600; }
/* ---------------------------------
           2. Video Block (封面)
        --------------------------------- */
        .v-video-block { position: relative; background-color: #f0f0f0; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin-bottom: 40px; padding: 15px; cursor: pointer; /* 添加指针，表示可点击 */ }
.v-video-frame { width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 比例 */ position: relative; overflow: hidden; border-radius: 4px; }
.v-video-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://via.placeholder.com/800x450?text=Block+Machine+Video+Cover'); /* 占位图 */ background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; }
.v-play-button { width: 70px; height: 70px; background-color: #ff8c00; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; }
.v-play-button:hover { transform: scale(1.05); }
.v-play-icon { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid white; margin-left: 3px; }
/* ---------------------------------
           3. CTA Button
        --------------------------------- */
        .v-cta-button { display: inline-flex; align-items: center; justify-content: center; background-color: #ff8c00; color: #ffffff; text-decoration: none; padding: 12px 35px; border-radius: 4px; font-size: 1rem; font-weight: 600; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; }
.v-cta-button:hover { background-color: #e67e00; }
.v-cta-button span { margin-right: 8px; }
/* ---------------------------------
           4. Video Modal/Popup Layer 弹出层样式
        --------------------------------- */

        /* 模态框背景 (全屏覆盖，初始隐藏) */
        .v-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); /* 深色透明背景 */ display: none; /* 初始隐藏 */ justify-content: center; align-items: center; z-index: 1000; /* 确保在所有元素之上 */ opacity: 0; transition: opacity 0.3s ease; }
/* 模态框内容区域 (包含视频) */
        .v-modal-content { position: relative; background: #000; border-radius: 8px; overflow: hidden; /* 裁剪视频边框 */ }

        /* 媒体查询：大屏幕 (宽度大于 1000px) */
        @media (min-width: 1000px) {
 .v-modal-content {
 width: 900px; /* 宽 900px */
}
}

        /* 媒体查询：小屏幕 (宽度小于 1000px) */
        @media (max-width: 1000px) {
 .v-modal-content {
 width: 100%; /* 宽 90% */
 margin: 0 5%;
}
}
/* 视频容器 (保持 16:9 比例的关键) */
        .v-video-embed { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 高自动 (保持 16:9 比例) */ }
.v-video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
/* 关闭按钮 */
        .v-close-button { position: absolute; top: -30px; /* 放在模态框外部 */ right: 0px; color: #fff; font-size: 30px; font-weight: bold; cursor: pointer; line-height: 1; }
/* 模态框显示时的状态 */
        .v-modal-overlay.active { display: flex; opacity: 1; }

        /* ---------------------------------
           Responsive Adjustments (保持不变)
        --------------------------------- */
        @media (max-width: 768px) {
 .v-header h3 {
 font-size: 1.2rem;
}
.v-content-text{width:95%;margin:0 auto; text-align:normal}
 .v-content-text p {
 font-size: 0.9rem;padding:0 15px;
}
 .v-video-block {
 padding: 10px;
}
 .v-close-button {
 top: -20px;
 right: 5px;
 font-size: 24px;
}
}
.i4-section { font-family: Arial, sans-serif; background-color: #0b3463; /* 深蓝色背景 */ color: white; padding: 40px 20px 60px; text-align: center; }
.i4-title { font-size: 2.2em; margin-bottom: 10px; max-width:900px; margin:0 auto }
.i4-subtitle { font-size: 1.1em; margin-bottom: 50px; }
/* --- 特色区 --- */
        .i4-features { display: flex; justify-content: center; gap: 40px; margin-bottom: 50px; flex-wrap: wrap; }
.i4-feature-item { width: 250px; display: flex; flex-direction: column; align-items: center; padding: 15px; }
.i4-icon { /* 图标圆圈样式 */ width: 70px; height: 70px; justify-content: center; align-items: center; margin-bottom: 15px; }
.i4-feature-text { font-size: 1.1em; font-weight: bold; }
/* --- 轮播图区域 (Slick Container) --- */
        .i4-carousel-container { max-width: 1000px; margin: 0 auto; position: relative; }
/* 轮播图图片样式 */
        .i4-carousel-container img { width: 100%; height: auto; display: block; border-radius: 5px; /* 可选：给图片添加轻微圆角 */ }
/* --- 覆盖 Slick 默认样式以匹配设计图 --- */
        
        /* 隐藏默认点状导航 */
        .i4-carousel-container .slick-dots { }
/* 覆盖 Slick 箭头的定位和样式 */
        .i4-carousel-container .slick-prev, .i4-carousel-container .slick-next { font-size: 0; /* 隐藏默认的文字 */ line-height: 0; position: absolute; top: 50%; transform: translateY(-50%); display: block; padding: 0; cursor: pointer; color: white; border: none; outline: none; background: rgba(0, 0, 0, 0.4); z-index: 10; width: 40px; height: 60px; border-radius: 5px; }
.i4-carousel-container .slick-prev { left: 20px; }
.i4-carousel-container .slick-next { right: 20px; }
/* 自定义 Slick 箭头图标 */
        .i4-carousel-container .slick-prev:before, .i4-carousel-container .slick-next:before { font-family: 'Font Awesome 6 Free'; /* 使用 Font Awesome */ font-weight: 900; font-size: 24px; line-height: 1; opacity: 1; /* 保持可见 */ color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.i4-carousel-container .slick-prev:before { content: "\f053"; /* Font Awesome Chevron Left */ }
.i4-carousel-container .slick-next:before { content: "\f054"; /* Font Awesome Chevron Right */ }
/* --- 按钮部分 --- */
        .i4-button-container {
*/ position: relative; z-index: 20; }
.i4-contact-button { background-color: #ff9900; /* 橙色 */ color: #fff; /* 深蓝色文字 */ padding: 15px 30px; border: none; border-radius: 50px; font-size: 1.2em; font-weight: bold; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: background-color 0.3s; }
.i4-contact-button:hover { background-color: #e68a00; }

        /* 媒体查询 - 调整小屏幕下的布局 */
        @media (max-width: 768px) {
 .i4-features {
 gap: 20px;
}
 .i4-feature-item {
 width: 45%;
 margin-bottom: 15px;
}
            
            /* 调整小屏幕上箭头的边距 */
            .i4-carousel-container .slick-prev {
 left: 5px;
}
 .i4-carousel-container .slick-next {
 right: 5px;
}
}
/* 全局重置 */
.i5-container, .i5-content-box, .i5-grid, .i5-item { box-sizing: border-box; }
/* 页面主要容器 */
.i5-container { max-width: 1200px; /* 限制最大宽度 */ width: 100%; padding: 0 15px; margin:50px auto; }
/* 核心内容和白色圆角背景 */
.i5-content-box { background-color: white; padding: 50px 70px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 轻微阴影 */ text-align: center;/* 保持设计图中的内边距比例 */ }
/* 标题样式 */
.i5-title { font-size: 28px; font-weight: 500; color: #333; margin-bottom: 50px; line-height: 1.4; }
.i5-highlight { color: #FF7F00; /* 突出显示颜色 */ font-weight: bold; }
/* 网格布局 */
.i5-grid { display: grid; /* 默认在宽屏上显示两列 */ grid-template-columns: repeat(2, 1fr); gap: 40px 80px; /* 行间距和列间距 */ text-align: left; }
/* 优势点样式 */
.i5-item { display: flex; flex-direction: column; align-items: flex-start; }
/* 图标容器样式 */
.i5-icon-wrapper { position: relative; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; /* 模拟设计图中图标和圆圈的颜色 */ border-color: #e0e0e0; }
.i5-icon { font-size: 24px; color: #007bff; /* 默认图标颜色，需要根据设计图调整 */ }

/* 针对特定图标的样式调整 */
/* 齿轮图标（1 & 4）使用蓝色 */
.i5-item:nth-child(1) .i5-icon, .i5-item:nth-child(4) .i5-icon {
 color: #007bff; /* 机械蓝 */
}

/* 认证图标（3）使用绿色 */
.i5-item:nth-child(3) .i5-icon {
 color: #28a745; /* 认证绿 */
}

/* 运输图标（5）使用蓝色/青色 */
.i5-item:nth-child(5) .i5-icon {
 color: #17a2b8; /* 运输青 */
}

/* 模具图标（6）使用蓝色 */
.i5-item:nth-child(6) .i5-icon {
 color: #007bff;
}

/* 星星图标（2）使用橙色 */
.i5-item:nth-child(2) .i5-icon-wrapper-stars .i5-icon {
 color: #ffc107; /* 星星黄/橙 */
}
/* 复杂图标定位（模拟设计图） */
/* 30+ Years 图标 */
.i5-icon-wrapper-stars { /* 增加定位空间 */ border: none; width: 80px; }
.i5-icon-wrapper-stars::before {
 content: '';
 position: absolute;
 width: 60px;
 height: 60px;
 border: 1px solid #e0e0e0;
 border-radius: 50%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 1;
}
.i5-user-icon { position: relative; z-index: 2; color: #007bff; }
.i5-star-1 { position: absolute; top: 5px; left: 5px; font-size: 10px; z-index: 2; }
.i5-star-2 { position: absolute; top: 5px; right: 5px; font-size: 10px; z-index: 2; }
/* 标题和描述文字样式 */
.i5-item-title { font-size: 18px; font-weight: bold; color: #333; margin-top: 0; margin-bottom: 10px; }
.i5-item-description { font-size: 14px; color: #666; line-height: 1.6; }

/* 媒体查询：自适应手机和平板 */

/* 平板设备 (小于 992px) */
@media (max-width: 991px) {
 .i5-content-box {
 padding: 40px 40px;
}
 .i5-title {
 font-size: 24px;
 margin-bottom: 40px;
}
 .i5-grid {
        /* 在平板上仍然保持两列，但缩小间距 */
        gap: 30px 40px;
}
}

/* 手机设备 (小于 600px) */
@media (max-width: 599px) {
 .i5-content-box {
 padding: 30px 20px;
}
 .i5-title {
 font-size: 20px;
 margin-bottom: 30px;
}
 .i5-grid {
        /* 在手机上变为单列 */
        grid-template-columns: 1fr;
 gap: 30px;
}
}
.i6-container { max-width: 1200px; width: 100%; text-align: center; margin:50px auto; }
/* 标题样式 */
.i6-title { font-size: 28px; font-weight: 600; color: #002e6e; /* 模拟深蓝色标题 */ margin-bottom: 50px; }
/* 项目卡片网格布局 */
.i6-projects-grid { display: grid; /* 默认三列等宽 */ grid-template-columns: repeat(3, 1fr); gap: 30px; /* 卡片间距 */ margin-bottom: 50px; }
/* 单个项目卡片样式 */
.i6-card { background-color: white; padding: 15px; border-radius: 20px; /* 大圆角 */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* 轻微阴影 */ transition: transform 0.3s ease; }
.i6-card:hover { transform: translateY(-5px); /* 悬停微动效果 */ }
/* 图片和播放按钮容器 */
.i6-image-wrapper { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 15px;/* 确保图片容器有固定尺寸或比例，这里使用图片自身的比例 */ }
.i6-project-image { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 0.5s ease; }
/* 播放按钮 */
.i6-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background-color: #ff8c00; /* 橙色背景 */ border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 0 0 5px rgba(255, 140, 0, 0.4); /* 橙色光环/外圈 */ transition: all 0.2s ease; }
.i6-play-button:hover { transform: translate(-50%, -50%) scale(1.1); }
.i6-play-icon { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid white; margin-left: 3px; }
/* 机器名称文字 */
.i6-machine-name { font-size: 16px; font-weight: 500; color: #333; padding: 5px 0; }
/* CTA 按钮样式 */
.i6-cta-button { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #ffb300, #ff8c00); /* 橙色渐变 */ color: #ffffff; text-decoration: none; padding: 15px 40px; border-radius: 6px; font-size: 1rem; font-weight: 600; box-shadow: 0 6px 15px rgba(255, 140, 0, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.i6-cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 140, 0, 0.6); }
.i6-cta-icon { margin-right: 10px; font-size: 1.1rem; }

/* --- 媒体查询：自适应 --- */

/* 平板设备 (小于 992px) */
@media (max-width: 991px) {
 .i6-projects-grid {
        /* 变为两列布局 */
        grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}
}

/* 手机设备 (小于 600px) */
@media (max-width: 599px) {
 .i6-title {
 font-size: 24px;
 margin-bottom: 30px;
}
 .i6-projects-grid {
        /* 变为单列布局 */
        grid-template-columns: 1fr;
}
 .i6-cta-button {
 width: 100%; /* CTA 按钮占满宽度 */
 padding: 12px 20px;
 font-size: 0.9rem;
}
}
.i7-section { background: linear-gradient(180deg, #184c8a 0%, #1f64b3 100%); padding: 50px 20px 80px 20px; color: white; text-align: center; }
.i7-container { max-width: 1200px; width: 100%; margin: 0 auto; }
/* --- 头部标题和评分区域 (与上一次实现一致) --- */
.i7-header { margin-bottom: 30px; }
.i7-title { font-size: 30px; font-weight: 600; color: white; margin-bottom: 25px; }
.i7-highlight { color: #ffc107; font-weight: 700; }
.i7-rating-box { display: flex; justify-content: center; align-items: center; margin-bottom: 5px; }
.i7-google-icon-wrapper { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; background-color: white; border-radius: 50%; margin-right: 5px; }
.i7-google-icon { color: #4285F4; font-size: 14px; }
.i7-score { font-size: 24px; font-weight: bold; color: white; margin-right: 5px; }
.i7-star { color: #ffc107; font-size: 18px; margin-right: 15px; }
.i7-reviews-count { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; }
/* --- 轮播容器和卡片 --- */

/* Slick 轨道容器 - 调整外边距以防止卡片边缘被裁剪 */
.i7-reviews-slider { margin: 0 -10px; /* 负边距抵消 i7-card-item 中的 padding */ }
/* 单个卡片项目，用于Slick的间距控制 */
.i7-card-item { padding: 0 10px; /* 确保卡片间距为 20px (10px + 10px) */ outline: none; /* 移除点击时的焦点边框 */ }
/* 卡片本体样式 */
.i7-card { background-color: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 略微加重阴影，匹配设计图 */ padding: 25px; text-align: left; height: 100%; /* 确保所有卡片高度一致 */ color: #333; }
/* 卡片头部、头像等样式 (与上一次实现一致) */
.i7-card-header { display: flex; align-items: center; margin-bottom: 15px; position: relative; }
.i7-avatar-wrapper { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 18px; margin-right: 10px; }
.i7-avatar-green { background-color: #4caf50; }
.i7-avatar-red { background-color: #f44336; }
.i7-avatar-blue { background-color: #2196f3; }
.i7-avatar-yellow { background-color: #ff9800; }
.i7-meta { display: flex; flex-direction: column; }
.i7-name { font-weight: bold; font-size: 15px; }
.i7-date { font-size: 12px; color: #999; }
.i7-card-google { position: absolute; top: 0; right: 0; color: #ccc; font-size: 18px; }
.i7-feedback-text { font-size: 14px; line-height: 1.6; color: #555; /* 解决卡片高度不一致的问题 */ min-height: 70px; }
/* 模拟第三张卡片的省略效果 */
.i7-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; /* 限制在 4 行 */ -webkit-box-orient: vertical; max-height: 70px; /* 约 4 行的高度 */ }
/* --- 覆盖 Slick 默认导航箭头样式 --- */
/* 隐藏默认 Slick 箭头，使用自定义的 prevArrow/nextArrow 样式 */
.slick-prev:before, .slick-next:before { content: none !important; }
/* 自定义导航箭头按钮 (与设计图完全一致) */
.i7-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); color: #444; font-size: 16px; z-index: 20; transition: background-color 0.2s, transform 0.2s; }
.i7-nav-arrow:hover { background-color: #f0f0f0; }
.i7-arrow-left { left: 20px; /* 调整位置 */ }
.i7-arrow-right { right: 20px; /* 调整位置 */ }
/* 禁用状态下的箭头 */
.slick-disabled { opacity: 0.5; cursor: not-allowed; }
/* --- 覆盖 Slick 默认分页点样式 --- */

/* 分页点容器 */
.slick-dots { bottom: -55px; /* 将分页器向下移动到设计图的位置 */ padding: 0; }
.slick-dots li { margin: 0 4px; }
/* 分页点本身 */
.slick-dots li button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transition: all 0.3s; }
.slick-dots li button:before { content: none !important; /* 移除 Slick 默认的:before内容 */ }
/* 激活的分页点 */
.slick-dots li.slick-active button { width: 20px; /* 激活时变长 */ border-radius: 4px; /* 激活时变成药丸形状 */ background-color: #ff9800; /* 激活时为橙色 */ }


/* --- 媒体查询：自适应调整 --- */

/* 覆盖 Slick 的响应式设置，主要用于调整箭头位置 */
@media (max-width: 991px) {
 .i7-arrow-left {
 left: 0px;
}
 .i7-arrow-right {
 right: 0px;
}
}

/* 手机设备 */
@media (max-width: 600px) {
 .i7-title {
 font-size: 22px;
}
 .i7-score {
 font-size: 20px;
}
    /* 手机上隐藏箭头，仅依赖滑动 */
    .i7-nav-arrow {
 display: none !important;
}
    /* 手机上的卡片间距 */
    .i7-reviews-slider {
 margin: 0;
}
 .i7-card-item {
 padding: 0 10px;
}
}
.i8-section { display: flex; justify-content: center; width: 100%; }
.i8-container { max-width: 900px; /* 限制内容最大宽度，匹配设计图 */ width: 100%; margin: 0 auto; }
/* 标题样式 */
.i8-title { font-size: 30px; font-weight: 600; color: #002e6e; /* 模拟深蓝色标题 */ text-align: center; margin-bottom: 50px; }
.i8-highlight { color: #1f64b3; /* 模拟蓝色高亮 */ }
/* --- 手风琴和 FAQ 项样式 --- */

.i8-accordion-wrapper { background-color: white; padding: 0 40px; /* 内部左右留白 */ border-radius: 8px; /* 整体圆角 */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }
/* 单个 FAQ 项的容器 */
.i8-faq-item { border-bottom: 1px solid #e0e0e0; /* 分隔线 */ padding: 0; }
/* 移除最后一个项目的底部分隔线 */
.i8-faq-item:last-child { border-bottom: none; }
/* 问题的样式 (可点击区域) */
.i8-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; /* 标题上下边距 */ cursor: pointer; transition: color 0.3s ease; }
.i8-question:hover .i8-question-text { color: #1f64b3; /* 悬停时颜色变化 */ }
.i8-question-text { font-size: 17px; font-weight: 600; color: #333; line-height: 1.5; margin: 0; padding-right: 15px; }
/* 图标样式 (加号/减号) */
.i8-icon { font-size: 14px; color: #888; transition: transform 0.3s ease, color 0.3s ease; }
/* 激活状态 (FAQ Item 处于打开状态) */
.i8-faq-item.i8-active .i8-question-text { color: #1f64b3; /* 激活时的问题文本颜色 */ }
.i8-faq-item.i8-active .i8-icon { /* 模拟加号变减号或旋转效果 */ transform: rotate(45deg); color: #1f64b3; /* 激活时的图标颜色 */ }
/* 回答内容的样式 */
.i8-answer { padding-top: 0; padding-bottom: 20px; /* 默认隐藏，由 jQuery 控制显示/隐藏 */ display: none; overflow: hidden; /* 确保 slideUp/slideDown 效果正常 */ }
.i8-answer p { font-size: 15px; color: #555; line-height: 1.7; padding-right: 50px; /* 匹配设计图，右侧留出空白 */ }

/* --- 媒体查询：自适应调整 --- */

@media (max-width: 768px) {
 .i8-title {
 font-size: 26px;
 margin-bottom: 30px;
}
 .i8-accordion-wrapper {
 padding: 0 20px; /* 减小内边距 */
}
 .i8-question {
 padding: 15px 0;
}
 .i8-question-text {
 font-size: 16px;
}
 .i8-answer {
 padding-bottom: 15px;
}
 .i8-answer p {
 padding-right: 15px; /* 减小右侧留白 */
 font-size: 14px;
}
}
.i9-section { /* 模拟设计图中的灰色顶部和蓝色渐变底部 */ background: linear-gradient(180deg, #f0f3f6 0%, #dae7f2 20%, #87aed6 100%); padding: 0 20px; overflow: hidden; /* 防止人物图片溢出造成滚动条 */ }
.i9-container { max-width: 1200px; width: 100%; margin: 0 auto; }
/* --- 内容布局 (使用 Flexbox) --- */
.i9-content-wrapper { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; min-height: 450px; /* 确保有足够的高度 */ position: relative; }
/* --- 左侧图片区域 --- */
.i9-image-side { width: 50%; position: relative; display: flex; justify-content: flex-end; /* 将图片推到右侧边缘 */ align-items: flex-end; /* 使图片底部对齐 */ padding-right: 20px; /* 图片和文字间距 *//* 模拟背景几何图案 */ }

/* 模拟背景几何图案：可以使用伪元素或一个专门的背景图 */
.i9-image-side::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
    /* 替换为实际的几何图案背景图 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect x="0" y="0" width="400" height="400" fill="none"/><path d="M50 50h50v50H50zM150 150h50v50h-50zM250 250h50v50h-50zM350 350h50v50h-50z" fill="none" stroke="%23FFFFFF" stroke-opacity="0.2" stroke-width="2"/></svg>');
 background-size: cover;
 opacity: 0.8;
 pointer-events: none;
}
/* 人物图片 */
.i9-expert-image { display: block; max-width: 400px; /* 限制图片最大尺寸 */ width: 100%; height: auto; /* 确保人物图片在背景渐变之上 */ z-index: 2;/* 移除占位图的背景色，以便人物可以正确叠加在渐变背景上 *//* 在实际项目中，应使用透明背景的PNG图片 */ }
/* --- 右侧文本区域 --- */
.i9-text-side { width: 50%; padding-left: 20px; /* 与图片间距 */ text-align: left; z-index: 3; }
/* 标题样式 */
.i9-title { font-size: 38px; font-weight: 400; /* 标题部分较细 */ color: #002e6e; /* 深蓝色 */ line-height: 1.2; margin-bottom: 15px; }
.i9-highlight { font-weight: 700; /* 突出部分加粗 */ display: inline-block; /* 确保换行时的对齐 */ }
/* 描述文本 */
.i9-description { font-size: 16px; color: #444; line-height: 1.6; max-width: 450px; margin-bottom: 30px; }
/* CTA 按钮样式 */
.i9-cta-button { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffb300 0%, #ff8c00 100%); /* 橙色渐变 */ color: #ffffff; text-decoration: none; padding: 15px 35px; border-radius: 6px; font-size: 1rem; font-weight: 600; box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4); transition: transform 0.2s ease, box-shadow 0.3s ease; }
.i9-cta-button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 140, 0, 0.6); }
.i9-cta-icon { margin-right: 8px; font-size: 1.1rem; }

/* --- 媒体查询：自适应 --- */

/* 平板设备 (小于 992px) */
@media (max-width: 991px) {
 .i9-content-wrapper {
 min-height: 400px;
 padding: 40px 0;
}
 .i9-title {
 font-size: 32px;
}
 .i9-expert-image {
 max-width: 350px;
}
}

/* 手机设备 (小于 600px) */
@media (max-width: 599px) {
 .i9-section {
 padding: 20px 0;
}
 .i9-content-wrapper {
 flex-direction: column; /* 垂直堆叠 */
 min-height: auto;
}
    
    /* 图片移动到顶部 */
    .i9-image-side {
 width: 100%;
 justify-content: center;
 align-items: center;
 padding: 0;
 margin-bottom: 20px;
}
 .i9-expert-image {
 max-width: 250px; /* 手机上图片缩小 */
}
    
    /* 文本内容居中 */
    .i9-text-side {
 width: 100%;
 padding: 0 20px;
 text-align: center;
}
 .i9-title {
 font-size: 28px;
}
 .i9-description {
 font-size: 15px;
 margin-bottom: 25px;
 max-width: none;
}
 .i9-cta-button {
 width: 100%;
}
}
.i10-footer-section { background-color: #313131; /* 深灰色背景 */ color: #ccc; padding: 60px 20px 30px 20px; }
.i10-container { max-width: 1200px; width: 100%; margin: 0 auto; }
/* --- 主内容网格 (公司信息和链接) --- */
.i10-main-content-grid { display: flex; justify-content: space-between; padding-bottom: 30px; border-bottom: 1px solid #444; /* 底部细分隔线 */ }
/* 1. 公司信息区域 (左侧 - 占约 40% 宽度) */
.i10-company-info { max-width: 450px; margin-right: 40px; }
.i10-logo { font-size: 36px; font-weight: bold; color: white; margin-bottom: 15px; letter-spacing: 2px; }
.i10-description { font-size: 14px; margin-bottom: 20px; line-height: 1.8; }
/* 评分区域 */
.i10-rating { margin-top: 10px; }
.i10-rating-text { font-size: 15px; font-weight: bold; color: white; margin-bottom: 5px; }
.i10-stars { color: #ffc107; /* 黄色星星 */ font-size: 16px; }
.i10-star-icon { margin-right: 2px; }
/* 2. 联系方式与导航链接区域 (右侧 - 占约 60% 宽度) */
.i10-links-and-contact { flex-grow: 1; }
/* 顶部联系方式行 */
.i10-contact-row { display: flex; justify-content: space-between; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #444; /* 分隔线 */ }
.i10-contact-item { display: flex; align-items: center; font-size: 14px; }
.i10-contact-icon { color: #ffc107; /* 橙色图标 */ font-size: 16px; margin-right: 8px; }
.i10-contact-title { font-weight: bold; color: white; }
.i10-contact-link { color: #ccc; text-decoration: none; transition: color 0.2s; }
.i10-contact-link:hover { color: white; }
/* 底部导航链接网格 */
.i10-navigation-grid { display: grid; grid-template-columns: 1fr 1fr; /* 两列 */ gap: 20px; }
.i10-nav-title { font-size: 18px; font-weight: bold; color: white; margin-bottom: 15px; }
.i10-nav-list { list-style: none; padding: 0; }
.i10-nav-list li { margin-bottom: 8px; }
.i10-nav-link { font-size: 14px; color: #ccc; text-decoration: none; transition: color 0.2s; }
.i10-nav-link:hover { color: white; }
/* --- 底部地址和认证栏 --- */
.i10-bottom-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 25px; }
.i10-address { display: flex; align-items: center; font-size: 14px; color: #ccc; }
.i10-address-icon { color: #ffc107; margin-right: 8px; font-size: 16px; }
.i10-certifications { display: flex; align-items: center; }
.i10-cert-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background-color: white; /* 模拟认证章的白色背景 */ padding: 3px; margin-left: 10px; }


/* --- 媒体查询：自适应调整 --- */

/* 平板设备 (小于 992px) */
@media (max-width: 991px) {
 .i10-main-content-grid {
 flex-direction: column; /* 垂直堆叠 */
 padding-bottom: 20px;
}
 .i10-company-info {
 max-width: 100%;
 margin-right: 0;
 margin-bottom: 30px;
}
 .i10-contact-row {
 flex-direction: column;
 align-items: flex-start;
 border-bottom: none;
 margin-bottom: 0;
}
 .i10-contact-item {
 margin-bottom: 15px;
}
 .i10-bottom-bar {
 flex-direction: column;
 align-items: flex-start;
 padding-top: 20px;
}
 .i10-address {
 margin-bottom: 15px;
}
 .i10-certifications {
 justify-content: flex-start;
}
}

/* 手机设备 (小于 600px) */
@media (max-width: 599px) {
 .i10-logo {
 font-size: 30px;
}
 .i10-description {
 font-size: 13px;
}
 .i10-rating-text {
 font-size: 14px;
}
 .i10-navigation-grid {
 grid-template-columns: 1fr; /* 单列 */
}
 .i10-nav-title {
 margin-top: 20px;
}
}
.i10-bottom-bar { /* ... (保持不变) ... */ }
/* ... (i10-address 部分保持不变) ... */

.i10-certifications { display: flex; align-items: center; /* 允许换行以适应小屏幕 */ flex-wrap: wrap; }
/* 社交图标链接容器 */
.i10-social-icon-link { margin-left: 10px; /* 图标间距 */ text-decoration: none;/* 确保容器本身没有多余的边框或背景 */ }
.i10-social-icon-link:first-child { margin-left: 0; /* 第一个图标不需要左侧边距 */ }


/* ... (媒体查询部分：确保小屏幕下换行和对齐) ... */

@media (max-width: 991px) {
    /* ... (其他媒体查询保持不变) ... */
    .i10-certifications {
        /* 在平板上允许图标换行 */
        justify-content: flex-start;
 width: 100%;
}
}
 @media (max-width: 599px) {
    /* ... (其他媒体查询保持不变) ... */
    .i10-certifications {
 margin-top: 10px;
/* 手机上图标间距可以调整 */
    }
 .i10-social-icon-link {
 margin-left: 8px;
 margin-bottom: 8px;
}
}
.a1-hero-section { /* 模仿 a1.jpg 的深蓝色背景和纹理 */ background-color: #1f2a41; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="p" width="80" height="80" patternUnits="userSpaceOnUse"><path d="M0 80L80 0ZM0 0L80 80Z" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>'); color: white; padding: 60px 20px; }
.a1-container { max-width: 1200px; width: 100%; margin: 0 auto; }
/* --- 内容网格布局 --- */
.a1-content-grid { display: flex; gap: 40px; align-items: center; }
/* --- 左侧文本列 --- */
.a1-text-column { flex: 1; max-width: 50%; padding-right: 20px; }
.a1-title { font-size: 44px; font-weight: 700; color: #ffc107; /* 橙黄色标题 */ line-height: 1.2; margin-bottom: 25px; }
.a1-subtitle { font-size: 18px; font-weight: 400; color: white; line-height: 1.4; margin-bottom: 20px; }
/* 关键信息列表 */
.a1-stats-list { list-style: none; padding: 0; margin-bottom: 30px; }
.a1-stats-list li { font-size: 15px; color: #ccc; margin-bottom: 8px; }
.a1-list-icon { color: #ffc107; /* 橙黄色勾号 */ margin-right: 10px; font-size: 14px; }
/* CTA 按钮 */
.a1-cta-button { display: inline-block; /* 渐变色：使用 a1.jpg 或 i9.jpg 按钮的橙色渐变 */ background: linear-gradient(180deg, #ffb300 0%, #ff8c00 100%); color: #1f2a41; /* 深色文本 */ text-decoration: none; padding: 15px 30px; border-radius: 6px; font-size: 16px; font-weight: bold; box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.a1-cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 140, 0, 0.6); }
/* --- 右侧图片列 --- */
.a1-image-column { flex: 1; max-width: 50%; }
.a1-main-image-wrapper { position: relative; margin-bottom: 10px; z-index: 10; }
.a1-main-image { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
/* --- Slick 轮播样式 (底部小图) --- */
.a1-slick-slider { margin: 0; }
.a1-slider-item { padding: 0 5px; opacity: 0.8; transition: opacity 0.3s; }
.a1-slider-image { width: 100%; height: auto; display: block; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }

/* --- 媒体查询：自适应 --- */

/* 平板设备 (小于 992px) */
@media (max-width: 991px) {
 .a1-hero-section {
 padding: 40px 20px;
}
 .a1-content-grid {
 gap: 30px;
 flex-direction: column; /* 垂直堆叠 */
}
 .a1-text-column, .a1-image-column {
 max-width: 100%;
 padding-right: 0;
}
 .a1-text-column {
 text-align: center;
}
 .a1-title {
 font-size: 36px;
}
 .a1-stats-list {
 text-align: left; /* 列表左对齐 */
 margin: 0 auto 30px auto;
 max-width: 450px;
}
 .a1-image-column {
 order: -1; /* 将图片移到顶部 */
}
 .a1-slick-slider {
 max-width: 500px;
 margin: 0 auto;
}
}

/* 手机设备 (小于 600px) */
@media (max-width: 599px) {
 .a1-title {
 font-size: 30px;
}
 .a1-subtitle {
 font-size: 16px;
}
 .a1-cta-button {
 width: 100%;
 padding: 12px 20px;
}
 .a1-slick-slider {
 max-width: 300px; /* 进一步限制轮播图宽度 */
}
}
/* --- 右侧图片列 --- */
.a1-image-column { flex: 1; max-width: 50%; }
/* 确保新的轮播容器有正确的间距 */
.a1-main-slider { margin-bottom: 10px; position: relative; z-index: 10; }
/* 轮播项内部的图片样式 */
.a1-main-slider .a1-main-image { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
section.txtarea-sect { background-color: #E6E6E6; padding-top: 40px; padding-bottom: 40px; }
.pad-td-50 { padding-top: 50px; padding-bottom: 50px; }
.pad-s-20 { padding: 20px 20px; }
.inner_container { max-width: 1200px; margin:0 auto; }
section.txtarea-sect .contentWrap {
 padding: calc(30px + (57 - 30) * ((100vw - 280px) / (1921 - 280))) calc(20px + (100 - 30) * ((100vw - 280px) / (1921 - 280))); border-radius: 45px; background: #FFF; box-shadow: 5px 4px 13.8px 0px rgba(0, 0, 0, 0.25); }
div#content section * { font-family: 'Montserrat', sans-serif; }
.txtarea-sect h2 { margin-bottom: clamp(10px, 5vw, 50px) !important; font-size: clamp(20px, 5vw, 40px); }
/*about*/
.contentWrap p { line-height:200%; padding:12px 0; }
.p1-card { clear:both; display: grid; /* 默认在桌面端是两列：左侧图片（占据 40%），右侧内容（占据 1fr，即剩余部分） */ grid-template-columns: 40% 1fr; gap: 50px; /* 列间距 */ background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); max-width: 1300px; width: 100%; padding: 50px; box-sizing: border-box; /* 确保 padding 不会超出 max-width */ margin:50px auto; }
/* 图片容器和样式 */
        .p1-image-container { /* 在 Grid 布局中，它自然位于第一列 */ grid-column: 1 / 2; overflow: hidden; text-align:center; }
.p1-image-container img { width: 100%; height: auto; display: block; border-radius: 8px; }
/* 内容容器 */
        .p1-content { /* 在 Grid 布局中，它自然位于第二列 */ grid-column: 2 / 3; }
/* -----------------------
         * p1 样式细节
         * ----------------------- */

        /* 标题样式 */
        .p1-title { font-size: 1.5em; font-weight: bold; color: #ff9900; /* 与按钮颜色一致 */ margin-top: 0; margin-bottom: 10px; }
/* 描述和介绍段落 */
        .p1-description, .p1-intro { line-height: 1.6; color: #555; margin-bottom: 15px; }
/* 列表标题 */
        .p1-list-title { font-size: 1.1em; font-weight: bold; color: #333; margin-top: 20px; margin-bottom: 5px; }
/* 列表样式 */
        .p1-details-list { list-style: none; padding-left: 0; }
.p1-details-list li { color: #555; line-height: 1.8; padding-left: 15px; position: relative; }

        /* 列表项目符号 */
        .p1-details-list li::before {
 content: '•';
 color: #ff9900; /* 列表点与主题色一致 */
 font-weight: bold;
 display: inline-block;
 width: 1em;
 margin-left: -1em;
}
/* 按钮样式 */
        .p1-button { display: inline-block; padding: 10px 25px; background-color: #ff9900; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; margin-top: 20px; box-shadow: 0 2px 4px rgba(255, 153, 0, 0.4); transition: background-color 0.3s; }
.p1-button:hover { background-color: #e68a00; }

        /* -----------------------
         * 响应式优化
         * ----------------------- */
        @media (max-width: 650px) {
 .p1-card {
                /* 在小屏幕上，改为单列布局 */
                grid-template-columns: 1fr;
 gap: 15px; /* 调整间距 */
 padding: 15px;
}
 .p1-image-container, .p1-content {
                /* 强制让图片和内容都占据一整行 */
                grid-column: 1 / -1;
}
}
.p2-card-wrapper { max-width: 100%; width: 100%; color: #fff; padding: 0 15px; /* 侧边安全边距 */ box-sizing: border-box; }
.p2-breadcrumb { font-size: 0.9em; color: #ccc; margin-top: 20px; margin-bottom: 50px; }
.p2-breadcrumb a { color: #fff; text-decoration: none; }
/* -----------------------
         * 核心 Grid 布局 (左右分栏)
         * ----------------------- */
        .p2-main-content { display: grid; gap: 30px; align-items: start; /* 关键修复：使用 minmax(0, 1fr) 确保 Grid 子项不会撑开容器 */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
/* -----------------------
         * p2 左侧轮播图区域 (Slick 容器)
         * ----------------------- */
        .p2-carousel-wrapper { border-radius: 12px; position: relative; /* 关键修复：确保容器不会溢出，即使其内容（Slick内部）尝试这样做 */ overflow: hidden; }
/* 修复 Slick 内部图片溢出 */
        .p2-carousel-item img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 12px; }
/* Slick.js 默认指示点样式覆盖 */
        .p2-carousel-wrapper .slick-dots { bottom: -30px; margin-top: 15px; }
.p2-carousel-wrapper .slick-dots li button:before { color: #4a5d73; font-size: 10px; }
.p2-carousel-wrapper .slick-dots li.slick-active button:before { color: #ff9900; }
/* -----------------------
         * p2 右侧信息区域
         * ----------------------- */
        .p2-info-card { background-color: #eef2f5; border-radius: 12px; padding: 35px; color: #333; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.p2-title { font-size: 1.8em; font-weight: 800; color: #243547; margin-top: 0; margin-bottom: 20px; line-height: 1.2; }
.p2-feature-list { list-style: none; padding: 0; margin-bottom: 30px; }
.p2-feature-list li { font-size: 1em; line-height: 2; color: #555; padding-left: 25px; position: relative; }
 .p2-feature-list li::before {
 content: '✓';
 color: #ff9900;
 font-size: 1.2em;
 font-weight: bold;
 position: absolute;
 left: 0;
}
.p2-button { display: inline-block; padding: 12px 35px; background-color: #ff9900; color: #fff; text-decoration: none; border-radius: 6px; font-weight: bold; font-size: 1.1em; box-shadow: 0 4px 6px rgba(255, 153, 0, 0.4); transition: background-color 0.3s; }
.p2-button:hover { background-color: #e68a00; }

        /* -----------------------
         * 响应式调整 (自适应)
         * ----------------------- */
        @media (max-width: 768px) {
 .p2-main-content {
                /* 关键修复：移动端切换为单列，且子项宽度为 100% */
                grid-template-columns: 1fr;
 gap: 25px;
}
 .p2-carousel-wrapper {
 padding: 15px; /* 减小移动端内边距 */
}
 .p2-info-card {
 padding: 25px;
}
}
.probanner { background-color: #243547; display: flex; justify-content: center; /* 关键：防止整体页面溢出 */ overflow-x: hidden; box-sizing: border-box; }
/* --- 页面主容器 --- */
        .page-container { max-width: 1300px; margin: 20px auto; /* 上下边距20px，左右自动居中 */ padding: 0 15px; /* 在移动端提供一些内边距 */ box-sizing: border-box; }
/* --- 产品布局容器 --- */
        .product-layout { display: flex; /* * align-items: flex-start 是关键!
             * 它让子元素从顶部对齐，这是让 position: sticky 生效的必要条件。
             * 如果不设置，flex 默认会拉伸子项，导致 sticky 失效。
            */
            align-items: flex-start; gap: 30px; /* 左右两栏之间的间距 */ }
/* --- 左侧产品内容区 --- */
        .product-content { width: 850px; flex-shrink: 0; /* 防止内容区在 flex 布局中被压缩 */ background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
/* 只是为了演示长内容 */
        .product-content .placeholder { height: 300px; background-color: #e9ecef; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 1.2rem; color: #6c757d; }
/* --- 右侧表单侧边栏 --- */
        .form-sidebar { flex-grow: 1; /* 占据剩余的所有可用空间 */ /* 粘性定位的关键 */
            position: sticky; top: 100px; /* 当它开始浮动时，距离视口顶部的距离 */ }
 @media (max-width: 1150px) {
 .product-layout {
 flex-direction: column; /* 垂直堆叠 */
}
 .product-content {
 width: 100%; /* 宽度占满父容器 */
 box-sizing: border-box;
}
 .form-sidebar {
 width: 100%;
 position: static; /* 在小屏幕上取消粘性定位 */
 top: auto;
}
}
/* 表单容器样式 */
        form { width: 100%; max-width: 450px; background: #f7f7f7; /* 表单背景与 body 背景一致，让字段独立突出 */ padding: 0; }
/* 字段容器 (实现浮动标签的关键) */
        .form-group { position: relative; margin-bottom: 15px; background-color: #fff; /* 输入框背景为白色 */ border: 1px solid #dee2e6; /* 默认细边框颜色 */  border-radius: .5rem; /* 轻微圆角,和input保持一致 */
/*padding: 18px 12px 6px 12px; /* 留出顶部空间给上浮标签 */
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-sizing: border-box; /* 确保 padding 不会增加宽度 */  --input-height: 58px;
height: var(--input-height); }
        
        /* 输入框焦点效果 */
        .form-group:focus-within {
 border-color: #80bdff; /* 焦点时边框变为蓝色 */
 box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); /* 焦点时轻微的蓝色阴影 */
}
/* 输入框样式 */
        .form-group input { outline: none; font-size: 1rem; line-height: 1.5rem; font-family: Roboto FlexVariable, Roboto Flex, sans-serif;  letter-spacing: .0025rem;
font-weight: 300; font-variation-settings: "opsz" 16, "GRAD" 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; height: 100%; width: 100%;  padding-top: calc((var(--input-height) / 2) - .5rem);
background: white; box-shadow: 0 0 #0000001f, 0 2px 8px .5px #00182029; border: 1px solid #b0bcbf;  border-radius: .5rem;
color: #002b39; padding-block: 1px; padding-inline: 2px;  padding-top: calc((var(--input-height) / 2) - .5rem);
padding-left:12px; }
/* 标签/提示文字的初始（大）和浮动（小）状态 */
        .form-group label { position: absolute; left: 12px; top: 50%; /* 初始位置：垂直居中 */ transform: translateY(-50%); color: #6c757d; /* 初始标签颜色 */ font-size: 16px; pointer-events: none; transition: all 0.2s ease; font-weight: normal; }

        /* 浮动效果：当 input 有焦点（focus）或有内容（:not(:placeholder-shown)）时 */
        .form-group input:focus + label,  .form-group input:not(:placeholder-shown) + label {
 top: 5px;  /*向上移动到顶部 */
			/*top: calc(var(--input-height) / 2 - (1.5rem / 2));*/
            left: 12px;
 font-size: 12px; /* 缩小文字 */
 color: #939ca4; /* 保持颜色或略微变深 */
 transform: translateY(0);
}
/* 必填字段提示文本 */
        .required-fields-text { display: block; text-align: right; margin-top: 20px; margin-bottom: 20px; font-size: 12px; color: #6c757d; }
.required-fields-text .star { color: #dc3545; }
/* 提交按钮容器和样式 */
        .buttons-container { display: flex; justify-content: flex-end; /* 按钮靠右对齐 */ }
.submit-button { background-color: #3e769b; /* 接近截图中的蓝色 */ color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; /* 文本和图标之间的间距 */ transition: background-color 0.3s; }
.submit-button:hover { background-color: #265d82; }
.submit-button svg { width: 16px; height: 16px; margin-left:5px; }
.form-container h3 { margin-bottom:20px; text-align:center }
.product-content p { line-height: 200%; padding: 12px 0; font-size: 18px; font-weight: normal; font-family: "Montserrat", sans-serif; }
.p2-carousel-wrapper img {
    width: 74%;     border-radius: 22px; text-align:center
}
@media (max-width:1000px){
.p2-carousel-wrapper img {width:80%; margin:0 auto;}
.buttons-container{display: block; text-align:center; margin-bottom: 15px;
}