/* 基础样式 */
* {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;}

 /* 导航栏 */

header {background-color: #f8fafc;color: white;padding: 0.5rem 0;position: sticky;top: 0;z-index: 100;box-shadow: 0 2px 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/xy.jpg');background-size: cover;color:white;height: 92vh;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.7);}

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

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

.hero-subtitle {font-size: 1.2rem;margin-bottom: 2rem;animation: fadeInUp 1s ease 0.2s both;}

.cta-button {background: #fff;color: #2c5aa0;border: none;padding: 12px 30px;font-size: 1.1rem;border-radius: 50px;cursor: pointer;transition: all 0.3s ease;animation: fadeInUp 1s ease 0.4s both;}

.cta-button:hover {transform: translateY(-3px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}

/* 区块样式 */

.section {padding: 5rem 0;}

/* 公司简介样式 */

.about-content {display: grid;grid-template-columns: 1fr 1fr;gap: 3rem;align-items: center;}

.about-text h3 {font-size: 1.5rem;margin-bottom: 1rem;color: #0f172a;} 

.about-text p {margin-bottom: 1.5rem;font-size: 1rem;line-height: 1.8;}

.company-stats {display: flex;justify-content: space-between;margin-top: 2rem; }

.stat-item {text-align: center;padding: 10px;  box-shadow: 0 5px 15px rgba(0,0,0,0.05);}

.stat-item h3 {font-size: 2rem;color: #2c5aa0;margin-bottom: 0.5rem;}

.responsive-img {width: 100%;height: auto;border-radius: 10px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}

.section-title {text-align: center;font-size: 2rem;margin-bottom: 1rem;color: #0f172a;position: relative;}

.section-title::after {content: '';display: block;width: 4rem;height: 4px;background-color: #0ea5e9;margin: 5px auto;border-radius: 2px;}

.ptxt {text-align: center; max-width: 1200px; margin: 0 auto 40px;color: #666;line-height: 1.8;}

/* 时间轴样式 */

.timeline-section {background: var(--light);  padding: 60px 0;border-radius: 10px;margin-bottom: 40px;}

.timeline-container {position: relative;argin-top: 80px; overflow: hidden;}

.timeline-wrapper {overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;}

.timeline-track {display: flex;position: relative;min-width: max-content;gap: 2rem;padding: 0 2rem; flex-direction: row-reverse;}

.timeline-item {display: flex;flex-direction: column;align-items: center;position: relative;width: 280px;z-index: 2; margin: 20px 0;}

.timeline-item.active {opacity: 1;}

.timeline-dot {width: 18px;height: 18px;border-radius: 50%;background-color: #e5e7eb;position: relative;z-index: 3;margin-bottom: 1rem;cursor: pointer;transition: all 0.3s ease; margin-top: 20px; }

.timeline-dot::after {content: '';position: absolute; width: 30px;;height: 30px;border-radius: 50%;background-color: rgba(22, 93, 255, 0.1);top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -1;transition: all 0.3s ease;}

.timeline-dot.active {background-color: #165DFF;transform: scale(1.2);}

.timeline-content {background-color: white;border-radius: 12px;padding: 1rem;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);transition: all 0.3s ease;opacity: 0.6;transform: translateY(2px);width: 100%;}

.timeline-item:hover .timeline-content, .timeline-item.active .timeline-content {opacity: 1; transform: translateY(0);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);}
    
.timeline-year {font-weight: bold;color: #165DFF;margin-bottom: 0.5rem;display: block;}

.timeline-item h3 {color: var(--primary);margin-bottom: 10px;line-height:40px;font-size: 1.8em;}

.timeline-content h4 {color: var(--secondary);margin-bottom: 0 10px; line-height:40px;font-size: 1.2em;}

.timeline-content p {color: #666;font-size: 0.95em;text-align:left;margin:10px 0;}

.timeline-image { height: 200px; overflow: hidden; margin: 5px 0; border-radius: 10px;}

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

.timeline-content:hover .timeline-image img {transform: scale(1.1);}

/* 证书模块样式 */

.certificates-section {background: white;padding: 40px;border-radius: 10px;}

.certificates-section h2 {color: #0f172a;margin-bottom: 30px;font-size: 2em;text-align: center;}

.certificates-filter {display: flex;justify-content: center;gap: 15px;margin-bottom: 30px;flex-wrap: wrap;}

.filter-btn {padding: 0.5rem 1rem;margin: 0 0.75rem 0.5rem;background: #ecf0f1;border: none;border-radius: 25px;cursor: pointer;transition: all 0.3s ease;font-size: 0.9em;}

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

.certificates-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;}

.certificate-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;}

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

.certificate-image {height: 200px;object-fit: cover;background: #e0e0e0;display: flex;align-items: center;justify-content: center;overflow: hidden;}

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

.certificate-image img:hover {transform: scale(2.0);}

.certificate-placeholder {color: #666;font-size: 1.1em;}

.certificate-info {padding: 20px;}

.certificate-info h3 {color: #2c3e50;margin-bottom: 10px;font-size: 1.2em;}

.certificate-info p {color: #666;font-size: 0.9em;}

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

.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: #ccc;font-size: 0.95em;line-height: 1.6;}

.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;}

.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(-2px);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;}
}