/* 基础样式 */
* {margin: 0;padding: 0;box-sizing: border-box;}

:root {--primary: #0080C8;--primary-dark: #0e42d2;--secondary: #0f172a;--accent: #0ea5e9;--light: #f8fafc;--gray: #e2e8f0;--dark-gray: #94a3b8;--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--transition: all 0.3s ease;}

body {font-family: 'Arial', 'Microsoft YaHei', 'Inter', 'system-ui',  sans-serif; line-height: 1.6;color: #333;background-color: #fff;}

.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 10px;}

a {text-decoration: none;}

 /* 导航栏 */

header {background-color: #f8fafc;color: white;padding: 0.5rem 0;position: sticky;top: 0;z-index: 100;box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
        
.logo {display: flex;align-items: center;}

.logo-text {color: #f8f9fa;font-size: 1em;}
        
nav ul {display: flex;list-style: none;justify-content: center;}
        
nav li {margin: 0 1rem;}
        
.navbar {display: flex;justify-content: space-between;align-items: center;padding:0;}
		
nav a {color: #0f172a;text-decoration: none;font-size: 1rem;padding: 0;border-radius: 10px;transition: all 0.3s ease;}
        
nav a:hover {background-color: #f8f9fa;}

.nav-links {display: flex;list-style: none;}

.nav-links li {margin-left: 1rem;}

.nav-links a {position: relative;}

.nav-links a:after {content: '';position: absolute;bottom: -6px;left: 0;width: 0;height: 2px;background: var(--primary);transition: var(--transition);}

.nav-links a:hover:after {width: 100%;}

.mobile-toggle {display: none;font-size: 1.5rem;cursor: pointer;}

/* 首页横幅样式 */

.hero {background-image: url('../images/productcenter.jpg');background-size: cover;color:white;height: 384px;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;overflow: hidden;background-position: center;background-repeat: no-repeat;}

.hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.3);}

.hero-content {position: relative;z-index: 5;}

.hero-title {font-size: 3rem;margin-bottom: 1rem;animation: fadeInUp 5s ease;}

.hero-subtitle {font-size: 1.5rem;margin-bottom: 2rem;animation: fadeInUp 5s ease 0.5s both;}

/* 区块样式 */
.section {padding: 4rem 0;}

/* 产品中心样式 */

.btn {padding: 1rem 2rem;margin: 5px 0;background: #f8fafc;border: none;cursor: pointer;transition: all 0.3s ease;font-size: 0.9em;}

.btn.active, .btn:hover {background:#165DFF;color: white;}

.btn3 {padding: 1rem;margin: 5px 0;background: #f8fafc;border: none;cursor: pointer;font-size: 1em; font-weight:bold; color:#0080C8;}

.product-section {background: white;padding: 3rem 0;border-radius: 10px;}

.product-filter {display: flex;justify-content: left;gap: 0;margin-bottom: 30px;flex-wrap: wrap;}

.filter-btn {padding: 1rem 2rem;margin:0;background: #f8fafc;border: none;cursor: pointer;transition: all 0.3s ease;font-size: 0.95em; border-radius:2px;}

.filter-btn.active, .filter-btn:hover {background:#165DFF;color: white;}

.product-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));gap: 25px;}

.product-top {margin-top: 2rem;}

.hidden {text-align: center;display: none;}

.product-item {background: #f8f9fa;border-radius: 10px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;padding: 10px; max-width:580px;}

.product-item:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0,0,0,0.2);}

.product-item h2 {font-size: 1.5em;line-height: 2;text-align: center; font-weight:bold;}

.product-image {height: 200px;object-fit: cover;display: flex;align-items: center;justify-content: center;border-radius:10px;overflow: hidden;}

.product-image img {width:100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}

.product-image img:hover {transform: scale(1.05);}

.product-placeholder font-size: 1.1em;}

.product-info {padding: 20px;}

.product-info h3 {color: #2c3e50;margin-top: 20px;font-size: 1.2em;line-height: 2;text-align: left;}

.product-info p {font-size: 0.96em; text-align:left;line-height:1.8;}

/* 页脚样式 */
.footer {background: #222;color: white;padding: 3rem 0 1rem;margin-top: 3rem;}

.footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-bottom: 2rem;}

.footer-section h3 {margin-bottom: 1.0rem;font-size: 1.5em;color: #3498db;}

.footer-section p {color: #ddd;font-size: 0.95em;line-height: 2;}

.footer-bottom {text-align: center;padding-top: 1.0rem;border-top: 1px solid #333;}

.pft {color: #666;font-size: 0.95em;text-align:center;}

.btn1 {display: inline-block;padding: 0.8rem 1.8rem;background: var(--primary);color: white;border-radius: 8px;font-weight: 600;transition: var(--transition);border: none;cursor: pointer;text-align: center;margin: 1rem 0;}

.btn1:hover {background: var(--primary-dark);transform: translateY(-2px);box-shadow: var(--shadow);}

.btn1-outline {background: transparent;border: 1px solid var(--primary);color: var(--primary);}

.btn1-outline:hover {background: var(--primary);color: white;}

.flsm {float:right;margin:0 auto;}       

/* 浮动返回顶部样式*/
.fixed {position: fixed;}
.bottom-8{bottom: 2rem;right: 2rem;background-color: #165DFF; color: #fff; width: 3rem; height: 3rem;}
.rounded-full {border-radius: 9999px;}
.fixe {display: flex;}
.items-center{align-items: center;}
.justify-center{justify-content: center;}
.invisible {visibility: hidden;}
.btn2 {display: inline-block;padding:0;border-radius: 50%;font-weight: 600;transition: var(--transition);border: none;cursor: pointer;text-align: center;}
.btn2:hover {background: var(--primary-dark);transform: translateY(-5px);box-shadow: var(--shadow);}
.rotate {transform: rotate(-90deg);}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-arrow-up:before{content:"\f062"}

/* 动画定义 */

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

/* 响应式设计 */
@media (max-width: 768px) {

    .nav-menu {display: none;}
    
    .mobile-menu-btn {display: flex;}
    
    .hero-title {font-size: 2.5rem;}
    
    .about-content {grid-template-columns: 1fr;gap: 2rem;}
    
    .timeline::before {left: 30px;}
    
    .timeline-item {flex-direction: row !important; justify-content: flex-start; padding-left: 60px;}
    
    .timeline-date {position: absolute;left: 0;top: 0;}
    
    .timeline-content {width: 100%;margin: 0;}
    
    .company-stats {flex-direction: column;gap: 1rem;}
	
    .hero-title {font-size: 32px;}
            
    .hero-subtitle {font-size: 18px;}
            
    .about-content {flex-direction: column;}
            
    .section {padding: 60px 0;}
           
    nav ul {flex-direction: column;text-align: center;}
            
    nav li {margin: 10px 0;}
}