/* ================= 1. 全局基础样式 ================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
body { color: #333; line-height: 1.6; background-color: #f9f9f9; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ================= 2. 顶部栏 (Top Bar) ================= */
.top-bar { 
    background-image: url('../logo/8.png');
    background-size: cover;      /* 让图片铺满整个区域，不留白 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat;/* 不重复平铺 */
    color: white;
    padding: 10px 5%; 
    display: flex; justify-content: space-between; align-items: center; font-size: 14px; 
}
.lang-btn { 
    background-color: transparent; border: 1px solid white; color: white; 
    padding: 4px 10px; cursor: pointer; font-size: 12px; border-radius: 3px; 
    margin-left: 15px; transition: 0.3s; 
}
.lang-btn:hover { background-color: white; color: #004080; }

/* ================= 3. 导航头 (Header) ================= */
.header { 
    background: white; padding: 15px 5%; display: flex; 
    justify-content: space-between; align-items: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    position: sticky; top: 0; z-index: 1000; 
}
.logo { font-size: 24px; font-weight: bold; color: #004080; }

/* 默认电脑端菜单 */
.nav-menu { display: flex; gap: 20px; }

/* 字体加粗(bold) 且 加大(18px) */
.nav-menu a { 
    font-weight: bold; 
    font-size: 18px; 
    color: #555; 
    transition: color 0.3s; 
}
.nav-menu a:hover { color: #004080; }

/* 默认隐藏汉堡图标 */
.hamburger { display: none; font-size: 28px; cursor: pointer; color: #004080; }

/* ================= 4. 轮播图 (Hero Section) ================= */
.hero { position: relative; width: 100%; height: 600px; overflow: hidden; color: white; }
.hero-bg-slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-bg-item { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    object-fit: cover; opacity: 0; transition: opacity 0.8s ease; 
}
.hero-bg-item.active { opacity: 1; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }

.hero-content { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    z-index: 10; text-align: center; width: 80%; max-width: 900px; 
}
.hero h1 { font-size: 48px; margin-bottom: 20px; color: white !important; text-shadow: 0 4px 10px rgba(0,0,0,0.5); font-weight: bold; }
.hero p { font-size: 20px; margin-bottom: 40px; color: white !important; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }

/* 动态按钮样式 */
.btn, .btn-red { display: inline-block; background-color: #e60012; color: white; padding: 12px 35px; border-radius: 4px; font-weight: bold; transition: 0.3s; }
.btn:hover, .btn-red:hover { background-color: #c0000f; }
.btn-link { display: inline-block; color: white; font-size: 16px; border-bottom: 2px solid transparent; padding-bottom: 5px; transition: 0.3s; }
.btn-link:hover { border-bottom: 2px solid white; }

/* 动画 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-element { opacity: 0; }
.play-animation { animation: fadeInUp 0.8s forwards ease-out; }
h1.play-animation { animation-delay: 0.1s; }
p.play-animation { animation-delay: 0.2s; }
#heroBtn.play-animation { animation-delay: 0.3s; }

/* 控件 */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; color: rgba(255,255,255,0.6); cursor: pointer; z-index: 20; padding: 20px; user-select: none; }
.slider-arrow:hover { color: white; background: rgba(0,0,0,0.1); }
.slider-arrow.left { left: 10px; }
.slider-arrow.right { right: 10px; }
.slider-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
.dot { width: 10px; height: 10px; background: rgba(255,255,255,0.5); border-radius: 50%; cursor: pointer; }
.dot.active { background: white; transform: scale(1.3); }

/* ================= 5. 核心能力 (Services) ================= */
.section { padding: 60px 10%; }
.section-title { text-align: center; font-size: 32px; color: #333; margin-bottom: 50px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.service-card { background: white; padding: 40px 30px; text-align: center; border: 1px solid #eee; transition: transform 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.service-card h3 { color: #004080; margin-bottom: 20px; font-size: 20px; }
.service-card p { font-size: 14px; color: #666; margin-bottom: 25px; line-height: 1.8; }
.service-card a { color: #333; font-weight: bold; font-size: 14px; }
.service-card a:hover { color: #e60012; }

/* ================= 6. 成功案例 (Showcase) ================= */
.showcase { background-color: #fff; }

.section-title { margin-bottom: 60px; }

/* 案例项容器 */
.showcase-item { 
    display: flex; align-items: center; gap: 60px; margin-bottom: 80px; 
}

/* 电脑端交替布局 */
.showcase-item:nth-of-type(even) { flex-direction: row-reverse; }
.showcase-item:nth-of-type(odd) { flex-direction: row; }

.showcase-text { flex: 1; }
.showcase-text h3 { 
    font-size: 28px; margin-bottom: 20px; color: #6fbce2; font-weight: bold;
}
.showcase-text p { 
    color: #666; font-size: 16px; line-height: 1.8; text-align: left; 
}

.showcase-img { flex: 1; }

/* 图片和视频统一样式 */
.showcase-img img, .showcase-img video { 
    width: 100%; 
    height: auto; 
    min-height: 200px; 
    border-radius: 6px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    display: block; 
    object-fit: cover; 
    aspect-ratio: 16/9; 
}

/* ================= 7. 工厂规模 (Plant Size List) ================= */
.capabilities { 
    background-color: #fff; 
    
    /* 1. 黑色边框 (3px) */
    border: 3px solid #000;  
    
    /* 2. 【核心修改】左右留出 5% 的空白，上下保持 0 */
    /* 这样边框就不会贴着浏览器边缘了 */
    margin: 0 8%; 
    
    /* 3. 【推荐】加一点圆角，配合留白会更好看 */
    border-radius: 12px;
}

.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 80px; max-width: 1000px; margin: 0 auto; }
.cap-item { padding: 20px 0; border-bottom: 1px solid #eee; }
.cap-item h4 { margin-bottom: 15px; color: #333; font-size: 16px; font-weight: bold; }
.cap-item p { font-size: 13px; color: #666; line-height: 1.8; }

/* ================= 8. 底部 (Footer) ================= */
.footer { background-color: #f4f4f4; color: #333; padding: 60px 5%; text-align: center; }
.footer h2 { color: #333; margin-bottom: 30px; font-size: 28px; }

/* 底部按钮 (浅蓝椭圆) */
.footer .btn { 
    margin-bottom: 40px;
    background-color: #6fbce2; 
    border-radius: 50px;
    padding: 12px 45px;
    box-shadow: 0 5px 15px rgba(111, 188, 226, 0.3);
    color: white; 
}
.footer .btn:hover {
    background-color: #5aa9d1; 
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(111, 188, 226, 0.5);
}

.copyright { margin-top: 30px; font-size: 12px; color: #999; border-top: 1px solid #ddd; padding-top: 20px; }

/* ================= 9. 手机端适配 (Mobile) ================= */
@media (max-width: 768px) {
    
    /* 1. Header 适配 */
    .header { position: relative; padding: 15px 20px; }
    
    /* 汉堡按钮绝对定位到右侧 */
    .hamburger { 
        display: block; 
        position: absolute;  
        right: 20px;         
        top: 50%;            
        transform: translateY(-50%); 
    }
    
    /* 垂直下拉菜单 */
    .nav-menu { 
        display: none; position: absolute; top: 100%; left: 0; width: 100%; 
        background: white; flex-direction: column; padding: 20px 0; 
        box-shadow: 0 5px 10px rgba(0,0,0,0.1); text-align: center; z-index: 1000;
        gap: 0;
    }
    .nav-menu.active { display: flex; }
    .nav-menu li { border-bottom: 1px solid #f5f5f5; width: 100%; }
    .nav-menu li a { display: block; padding: 15px 0; }
    
    /* 2. Top Bar 适配 */
    .top-bar { flex-direction: column; text-align: center; gap: 10px; padding: 15px; }
    .lang-btn { margin-left: 0; }
    
    /* 3. Hero 适配 */
    .hero { height: 400px; }
    .hero h1 { font-size: 28px; }
    .slider-arrow { display: none; }
    
    /* 4. Showcase 适配 */
    .showcase-item {
        display: flex;
        flex-direction: column; 
        align-items: center;
        text-align: center;
        margin-bottom: 50px;
        gap: 20px;
    }

    /* 统一设置为：文字在上，图片在下 */
    .showcase-item { 
        flex-direction: column-reverse !important; 
    }

    .showcase-text { text-align: center; width: 100%; }
    .showcase-text p { text-align: center; }
    .showcase-img { width: 100%; }
    
    /* 5. 工厂规模适配 (单列) */
    .cap-grid { grid-template-columns: 1fr; gap: 20px; }
    
    /* 6. Footer 适配 */
    .footer { padding: 40px 20px; }
}