a {
    text-decoration: none !important;
}

.container {
    padding: 0px 5% 0px 5%;
}

.system-container {
    max-width: 100%;
    margin: 100px ,0,40px,0;
    padding-bottom: 20px;
}

.system-item {
    display: flex;
    align-items: stretch; /* 垂直方向居中对齐，基础位置 */
    margin-bottom: 150px; /* 两行之间的间距 */
    position: relative;
}

/* 1. 图片盒子：占 60% 宽度 */
/* 图片高度根据屏幕宽度自动缩放 */
.image-box {
    /* 最小 300px，最大 500px，中间随视口宽度变化 */
    /*height: clamp(300px, 40vw, 500px); */
    max-height: 665px;
    width:100%;
}
.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* 2. 文字卡片：占 45% 宽度，制造重叠 */
.content-card {
    width: 100%;
    background: #fff;
    padding: 60px 50px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    z-index: 2; /* 确保卡片在图片上方 */
    /*padding: clamp(20px, 4vw, 60px);*/
    /* max-height: 665px; */
    height: auto;      /* 撤销固定高度 */
    display: flex;     /* 开启 flex 方便内容垂直居中（可选） */
    flex-direction: column;
    justify-content: center; /* 让文字在等高的卡片中垂直居中 */
}

/* --- 第一行细节处理 --- */
/* 卡片向右偏移，图片向左偏移，达成中间重叠 */
.system-item:not(.reverse) .content-card {
    margin-right: -6%; /* 负边距让图片靠过来 */
    transform: translateY(-80px); /* 向上提，实现左边比右边高 */
}

/* --- 第二行：右高左低（对应你的需求） --- */

.system-item.reverse .content-card {
    margin-left: -6%; /* 负边距让左侧图片重叠进来 */
    /* 关键点：设置为负值，让右侧卡片向上升起 */
    transform: translateY(-60px); 
    z-index: 2;
}

.system-item.reverse .image-box {
    /* 如果想让左边图片显得更低，可以给图片加一个正向位移 */
    transform: translateY(30px); 
    z-index: 1;
}

/* --- 文字样式控制 --- */
.card-title {
    margin-bottom: 15px;
}
.card-description {
    margin-bottom: 60px;
}
.main-title {
    margin-bottom: 16px;   /* 与副标题的间距 */
    letter-spacing: 2px;   /* 字间距增加高级感 */
}

.underline {
    width: 40px;
    height: 3px;
    background: #002255; /* 深蓝色横线 */
    margin-bottom: 80px;
}
.system-header {
    margin-top: 80px;
    /* 增加上下间距，让页面更有“呼吸感” */
    padding-bottom:130px; 
}

@media (max-width: 768px) {
    .system-item, 
    .system-item.reverse {
        flex-direction: column; /* 改为垂直排列 */
        align-items: flex-start;
        margin-bottom: 60px;
    }

    /* 1. 取消重叠和位移 */
    .content-card, 
    .image-box {
        width: 100%; /* 占满全宽 */
        margin: 0 !important; /* 清除所有负边距 */
        transform: none !important; /* 清除位移，回到平面 */
    }

    /* 2. 调整层级顺序：让图片在上，文字在下 */
    .system-item {
        display: flex;
        flex-direction: column-reverse; /* 图片在 HTML 后面，反转让它排在上面 */
    }

    .image-box {
        margin-bottom: -20px !important; /* 手机端可以做微小的重叠感 */
        position: relative;
        z-index: 1;
    }

    .content-card {
        z-index: 2;
        padding: 30px 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 手机端阴影调轻 */
        border-radius: 15px;
    }
}







.product-container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    /* padding-top: 4vw; */
    padding-top: clamp(30px, 5vw, 60px);
}
.product-title{
    margin-bottom: 40px;
}

/* Tab 导航样式 */
.tab-navbar {
    display: flex;
    /*justify-content: center;*/
    border-bottom: 1px solid #e0e4e8;
    position: relative;
    margin-bottom: 30px;
    width:100%;
}

.tab-item {
    /* 核心：flex-grow 设置为 1，让所有 item 平分剩余空间 */
    /* flex-basis 设置为 0，确保它们从同一起跑线开始平分 */
    flex: 1; 
    
    padding: 15px 0; /* 移除左右固定 padding，改为 0，靠 flex 平分 */
    cursor: pointer;
    color: #666;
    transition: all 0.3s;
    text-align: center; /* 确保文字在平分后的格子内居中 */
    
    /* 保持底边框在文字下方居中 */
    /*border-bottom: 3px solid transparent; */
    position: relative; /* 为伪元素定位提供基准 */
}
/* 使用伪元素制作那根线 */
.tab-item::after {
    content: "";
    position: absolute;
    bottom: -1px;      /* 刚好压在导航栏底边线上 */
    /*left ， transform css让一个绝对定位元素在父级容器内水平绝对居中的黄金法则*/
    left: 50%;         /* 先移动到格子中心 */
    transform: translateX(-50%); /* 向左回移自身的一半，实现彻底居中 */
    
    /* 关键：设置线的宽度 */
    width: 0;          /* 默认宽度为0，不显示 */
    height: 3px;
    background-color: #1e3a8a;
    transition: width 0.3s ease; /* 添加平滑展开效果动画 */
}
/* 激活状态的文字颜色和底部横线 */
.tab-item.active {
    color: #1a1a1a;
    font-weight: 600;
    /* 深蓝色横线 */
    /*border-bottom: 3px solid #1e3a8a; */
    /* 盖住底边框 */
    /*margin-bottom: -1px;*/
}
/* 激活状态：线宽展开 */
.tab-item.active::after {
    /* 这里设置线的宽度。
       32px 左右通常能匹配两个字的宽度。
       如果字数不固定，可以设为 40% 或根据视觉调整 */
    width: 40px; 
}

/* 内容面板控制 */
.content-panel {
    display: none; /* 默认隐藏所有 */
    animation: fadeIn 0.4s ease;
    padding-bottom:20px;
}

.content-panel.active {
    display: block; /* 只显示带 active 的面板 */
}

/* 产品卡片网格 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* padding: 20px; */
}

.product-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.img-box {
    background-color: #f8f9fa;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-card p {
    padding: 20px;
    margin: 0;
    color: #333;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}








.model-container {
    display: none; /* 默认隐藏所有 */
    animation: fadeIn 0.4s ease;
}
.model-container.active {
    display: block; /* 只显示带 active 的面板 */
    width: 100%;
    /* max-width: 1400px; */
    margin: 0 auto;
    padding: 35px 0;
}

.model-model-features-grid {
    display: grid;
    /* 强制一行显示2个，平分剩余宽度 */
    grid-template-columns: repeat(2, 1fr); 
    /* 间距也随窗口自动缩放 */
    gap: clamp(15px, 2.5vw, 40px); 
}

.model-feature-item {
    display: flex;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    /* 全方位立体阴影：偏移量设为0，通过大模糊半径实现上下左右扩散 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); 
    transition: all 0.3s ease;
}

.model-feature-item:hover {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.model-accent-line {
    width: 8px;
    background-color: #002b59;
    flex-shrink: 0;
}

.model-feature-text {
    /* 内边距随窗口动态变化 */
    padding: clamp(25px, 4vw, 50px); 
    margin: 0;
    color: #333;
    /* 字号随窗口动态变化 */
    line-height: 1.6;
    display: flex;
    align-items: center;
    text-align: left;
}

/* 响应式：只有在手机端（极窄屏）才切回一列，否则保持两列 */
@media (max-width: 768px) {
    .model-model-features-grid {
        grid-template-columns: 1fr;
    }
}

/* 适配移动端 */
@media (max-width: 600px) {
    .model-model-features-grid {
        grid-template-columns: 1fr; /* 手机端单列显示 */
        gap: 20px;
    }
}






.energy-category-title{
    padding: 5% 0px 5% 0px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;    /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    text-align: center;
}
/* 通用板块样式 */
.energy-section {
    width: 100%;
    padding: clamp(40px, 8vw, 80px) 20px;
    background-color: #f9f9f9;
}

/* 斑马纹装饰（可选）：让第二个板块背景色略有不同，增加层次感 */
.energy-section.reverse {
    background-color: #fff;
}

.energy-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    /*align-items: center;*/
    gap: clamp(30px, 3.5vw,80px);
    padding:0px 5% 0px 5%;
}

/* --- 核心互换逻辑 --- */
.energy-section.reverse .energy-container {
    flex-direction: row-reverse; /* 关键：强制左右对调 */
}

/* 基础内容缩放比例 */
.energy-content-info { flex: 1.2;}
.energy-content-image { flex: 0.8; display: flex; justify-content: center; background-color:#fff;aspect-ratio: 4 / 3;overflow: hidden;border-radius: 20px; }

/* 标题与描述 */
.energy-main-title { font-size: clamp(24px, 3vw, 32px); color: var(--text-main); margin-bottom: 20px; }
.energy-intro-text { font-size: 16px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 30px; }

/* 2x2 网格卡片 */
.energy-features-energy-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.energy-tile-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.energy-tile-icon {
    width: 40px; height: 40px; background: #f0f4f8; 
    border-radius: 6px; display: flex; align-items: center; 
    justify-content: center; margin-right: 12px; flex-shrink: 0;
}

.energy-tile-info h3 { font-size: 15px; margin: 0; color: var(--text-main); }
.energy-tile-info p { font-size: 13px; margin: 5px 0 0; color: var(--text-secondary); }

.energy-product-img {
    width: 100%;
    /*max-width: 560px;*/
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.1)); 
}

/* --- 移动端响应式 --- */
@media (max-width: 992px) {
    .energy-container, 
    .energy-section.reverse .energy-container {
        flex-direction: column; /* 手机端全部改为垂直排列 */
        gap: 30px;
        text-align: center;
    }
    
    /* 手机端图片永远放在文字下面，或者你可以改成 column-reverse 让文字永远在上面 */
    .energy-section.reverse .energy-container {
        flex-direction: column-reverse; 
    }

    .energy-features-energy-tile-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }
}











/* 轮播外层容器 - 模仿图片中的圆角和蓝色边框 */
.energy-slider-container {
    position: relative;
    width: 100%;
    /*max-width: 560px;*/
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 20px;       /* 圆角 */
    background-color: #fff;
}

/* 轨道：承载所有图片并横向排列 */
.energy-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.energy-slide {
    min-width: 100%;
    height: 100%;
}

.energy-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不拉伸 */
}

/* 底部指示器 */
.energy-dots-container {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
}

.energy-dot {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.energy-dot.active {
    background-color: #003366; /* 选中时的深蓝色 */
    width: 30px;               /* 选中时长胶囊效果 */
    border-radius: 5px;
}