@charset "utf-8";
/* CSS Document */

/* --- 1. 重置与基础样式 --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body {
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: -62.2;
    color: #333;
    background: #f8f9fa;
    min-width: 320px;
}

/* --- 2. 布局容器 --- */
.container { 
    width: 90%; 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 2rem 0;
    position: relative; 
    z-index: 2; /* 确保容器内容在遮罩之上 */
}

/* --- 3. 导航栏 --- */
.navbar { 
    background: #003366; 
    color: #fff; 
    padding: 1rem 0; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.nav-container { 
    max-width: 1400px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px; 
}
.nav-logo h1 { 
    font-size: 1.6rem; 
    font-weight: 700;
    color: #fff;
}
.nav-menu { 
    list-style: none; 
    display: flex; 
    gap: 2.5rem; 
    margin: 0; 
    padding: 0; 
}
.nav-link { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 500; 
    font-size: 1rem; 
    transition: color 0.3s, transform 0.2s;
    padding: 5px 10px;
    border-radius: 4px;
}
.nav-link:hover { 
    color: #00aaff; 
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* --- 4. 首页横幅 (Hero Section) --- */
.section-hero { 
    background-image: url('images/下载 (4).png'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed;
    height: 100vh; 
    display: flex; 
    align-items: center; 
    text-align: center; 
    position: relative;
    color: #fff;
}
/* 首页遮罩：首页保留深色渐变遮罩，确保首屏视觉冲击力 */
.section-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.8) 0%, rgba(0, 85, 164, 0.6) 100%);
    z-index: 1;
}
.hero-title { 
    font-size: 3rem; 
    margin-bottom: 1rem; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    z-index: 2;
    position: relative;
}
.hero-subtitle { 
    font-size: 1.3rem; 
    opacity: 0.9; 
    margin-bottom: 2rem; 
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    position: relative;
}

/* --- 5. 通用板块样式 --- */
.section { 
    margin: 4rem 0; 
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

/* 通用遮罩层：修改为统一的白灰色半透明遮罩 */
.section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(245, 245, 245, 0.62); /* 白灰色遮罩，透明度92% */
    z-index: 1; /* 遮罩层位于内容之下，背景图之上 */
    border-radius: 8px;
}

/* 修改点：居中带底部边框的标题 */
.section-title { 
    font-size: 1.8rem; 
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;      /* 文本居中 */
    padding-bottom: 0.8rem;  /* 增加底部内边距以容纳边框 */
    border-bottom: 4px solid #00aaff; /* 底部蓝色边框 */
    display: inline-block;   /* 收缩包裹文本宽度 */
    position: relative;
    z-index: 3;              /* 确保标题在遮罩和背景之上 */
    color: #003366;          /* 标题改为深蓝色，确保在白灰背景上清晰可见 */
}

/* --- 6. 特定板块背景与样式 --- */

/* 关于我们 */
.section-about { 
    background-image: url('images/下载 (5).png');
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}
/* 关于我们文字改为深色 */
.section-about .section-title, 
.section-about p, 
.section-about .feature-box h3 {
    color: #333; 
}

/* 核心产品 */
.section-products { 
    background-image: url('images/下载 (6).png');
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}

/* 应用领域 */
.section-industries { 
    background-image: url('images/下载 (7).png');
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}
/* 领域板块文字改为深色 */
.section-industries .section-title, 
.section-industries .feature-box h3 {
    color: #003366;
}
.section-industries .feature-box p {
    color: #555;
}

/* 联系我们 */
.section-contact { 
    background-image: url('images/下载 (8).png');
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}
/* 联系我们文字改为深色 */
.section-contact .section-title {
    color: #003366;
}
.section-contact p, 
.section-contact .client-card {
    color: #000; 
}

/* --- 7. 产品卡片 --- */
.product-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem; 
    margin-top: 2rem; 
}

.product-card { 
    border: 1px solid #ddd; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 3; /* 确保卡片在遮罩之上 */
}
.product-card:hover { 
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.15);
}
.product-img-placeholder { 
    width: 100%; 
    height: 200px; 
    overflow: hidden; 
    position: relative;
    background: #000;
}
.product-img-placeholder img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}
.product-card:hover .product-img-placeholder img {
    transform: scale(1.1);
}
.product-card h3 {
    font-size: 1.3rem;
    margin: 1rem 1rem 0.8rem;
    color: #003366;
}
.product-card p {
    font-size: 0.95rem;
    color: #555;
    padding: 0 1rem 1rem;
}

/* --- 8. 特性/功能板块 --- */
.features { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem; 
    margin: 2rem 0; 
}
.feature-box { 
    padding: 1.8rem; 
    border-radius: 8px; 
    text-align: center; 
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.6); /* 半透明白色背景 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.feature-box h3 { 
    margin-bottom: 0.8rem; 
    font-size: 1.2rem;
    color: #003366;
}
.feature-box p {
    color: #555;
    line-height: 1.7;
}

/* --- 9. 客户列表 (更新版) --- */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.client-card img {
    /* 移除原来的固定高度，改为由内容撑开或设置最小高度 */
    min-height: 80px; 
    
    /* 让内容居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 保持圆角和阴影 */
    border-radius: 6px;
    background: #fff; 
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 关键：裁剪溢出的图片 */
    transition: all 0.3s ease;
}

/* 鼠标悬停效果 */
.client-card:hover {
    transform: scale(1.05);
    border-color: #00aaff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* --- 16. 客户Logo图片样式 --- */
.client-card img {
    max-width: 100%;   /* 图片最大宽度不超过容器 */
    max-height: 100%;  /* 图片最大高度不超过容器 */
    
    /* 关键属性：防止变形 */
    object-fit: contain; /* 保持宽高比，完整显示图片（推荐） */
    /* object-fit: cover; */ /* 如果你想填满整个卡片并允许裁剪图片边缘，使用这个 */
    
    /* 默认样式 */
    display: block;
    opacity: 0.8; /* 默认稍微透明一点，增加质感 */
}

/* 鼠标悬停时显示完全不透明 */
.client-card:hover img {
    opacity: 1;
}
.client-card { 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    padding: 0.8rem; 
    text-align: center; 
    background: #fff; 
    font-weight: 500;
    color: #333;
    transition: background 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.client-card:hover { 
    background: #e3f2fd; 
    transform: scale(1.03); 
    border-color: #00aaff;
}

/* --- 10. 联系信息 --- */
.contact-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 3rem; 
    position: relative;
    z-index: 3;
}
.contact-grid h3 {
    color: #003366;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}
.contact-grid p{
    margin-bottom: 0.8rem;
    color: #000;
    font-size: 1rem;
}
.contact-grid a {
    color: #003366;
    text-decoration: none;
    font-weight: bold;
}
.contact-grid a:hover {
    color: #0055a4;
    text-decoration: underline;
}

/* --- 11. 悬浮联系卡片 --- */
.contact-float { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    width: 160px; 
    background: #003366; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); 
    z-index: 100; 
    transition: transform 0.3s ease;
    border: 2px solid #fff;
}
.contact-float:hover { 
    transform: translateY(-5px) scale(1.05);
}
.contact-float img {
    width: 158px;
    height: 146px;
    object-fit: cover;
    padding-top: 0px;
    padding-bottom: 0px;
}
.contact-text { 
    color: #fff; 
    text-align: center; 
    padding: 12px; 
    font-size: 0.95rem;
    background: rgba(0, 51, 102, 0.9);
}
.contact-text strong {
    font-size: 1.2rem;
    display: block;
    margin-top: -14px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: -5px;
    font-weight: 700;
}

/* --- 12. 按钮 --- */
.btn { 
    display: inline-block; 
    background: #003366; 
    color: #fff; 
    padding: 0.9rem 1.8rem; 
    border-radius: 6px; 
    text-decoration: none; 
    font-weight: bold; 
    transition: background 0.3s, transform 0.2s;
    border: none; 
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.4);
    position: relative;
    z-index: 3; /* 确保按钮在遮罩之上 */
}
.btn:hover { 
    background: #0055a4; 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 51, 102, 0.6);
}
.btn-primary { 
    background: #00aaff; 
    background: linear-gradient(to right, #0088cc, #00aaff);
}
.btn-primary:hover { 
    background: #0088cc; 
    background: linear-gradient(to right, #0077b3, #0088cc);
}

/* --- 13. 页脚 --- */
footer { 
    background: #003366; 
    color: #fff; 
    text-align: center; 
    padding: 2rem 0; 
    margin-top: 4rem; 
    font-size: 0.95rem;
    position: relative;
    z-index: 3;
}
footer p{
    margin: 0.5rem 0;
    opacity: 0.9;
}

/* --- 14. 响应式设计 (移动端适配) --- */
@media (max-width: 768px) { 
    .nav-container { 
        flex-direction: column; 
        gap: 0.5rem; 
        padding: 10px;
    }
    .nav-menu { 
        gap: 1rem; 
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-link { 
        font-size: 0.95rem;
        padding: 3px 8px;
    }
    .hero-title { 
        font-size: 2.2rem; 
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .contact-grid { 
        grid-template-columns: 1fr; 
    }
    .section {
        padding: 2rem 0;
        margin: 2rem 0;
    }
    .section-title {
        font-size: 1.5rem;
        padding-left: 1rem;
    }
    .features {
        grid-template-columns: 1fr;
    }
    .client-grid {
        grid-template-columns: 1fr;
    }
    .product-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .contact-float {
        width: 140px;
        bottom: 15px;
        right: 15px;
    }
    .contact-text {
        padding: 10px;
        font-size: 0.9rem;
    }
}
/* --- 15. 导航栏Logo样式 --- */
.nav-logo img {
    height: 60px; /* 控制Logo高度 */
    width: auto;  /* 保持图片比例 */
    display: block;
    /* 添加过渡效果，如果需要悬停变大等交互 */
    transition: transform 0.3s ease;
}


/* 响应式：在手机端调整Logo大小 */
@media (max-width: 768px) {
    .nav-logo img {
        height: 50px; /* 手机端Logo稍微小一点 */
    }
}
/* --- 优化：客户Logo展示 --- */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem; /* 稍微加大一点间距，更美观 */
    margin-top: 1.5rem;
}

.client-card {
    /* --- 核心修改开始 --- */
    background: #fff; /* 统一白色背景，去除可能的文字颜色干扰 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 细边框 */
    border-radius: 8px; /* 稍微加大圆角，更现代 */
    overflow: hidden; /* 关键：裁剪溢出的图片 */
    transition: all 0.3s ease;
    padding: 15px; /* 增加内边距，让图片呼吸，防止贴边 */
    min-height: 80px; /* 设置最小高度，防止手机端挤压变形 */
    /* --- 核心修改结束 --- */
}

.client-card:hover {
    transform: scale(1.05);
    border-color: #00aaff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- 核心：图片自适应与防变形 --- */
.client-card img {
    width: 100%;    /* 宽度占满父容器 */
    height: 100%;   /* 高度占满父容器 */
    
    /* 关键属性：防止变形 */
    object-fit: contain; /* 保持宽高比，完整显示图片（推荐，不会裁剪Logo） */
    /* object-fit: scale-down; */ /* 备选方案：如果图片太大，就缩小并居中 */
    
    opacity: 0.85; /* 默认稍微透明，增加质感 */
    transition: opacity 0.3s ease;
}

/* 鼠标悬停时图片变清晰 */
.client-card:hover img {
    opacity: 1;
}