body {margin: 0;padding-bottom: 60px;font-family: Arial, sans-serif;background-color: #f9f9f9;}
        .bottom-nav {position: fixed;bottom: 0;left: 0;right: 0;height: 60px;background-color: var(--primary);display: none;justify-content: space-around;align-items: center;z-index: 1000;}
        @media (max-width: 768px) {.bottom-nav {display: flex;}}
        .nav-item {text-align: center;color: white;font-size: 12px;display: flex;flex-direction: column;align-items: center;text-decoration: none;}
        .nav-icon {font-size: 24px;margin-bottom: 4px;color: white;}
        .nav-item:hover .nav-icon, .nav-item:hover div {opacity: 0.8;}
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;text-decoration: none;}
        :root {--primary: #4361ee;--secondary: #3f37c9;--accent: #4895ef;--light: #f8f9fa;--dark: #212529;--success: #4cc9f0;--text: #333333;--text-light: #6c757d;}
        body {line-height: 1.6;color: var(--text);background-color: #f5f7fb;}
        .container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px;}
        header {background-color: white;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);position: sticky;top: 0;z-index: 1000;}
        .navbar {display: flex;justify-content: space-between;align-items: center;padding: 20px 0;}
        .logo {font-size: 1.8rem;font-weight: 700;color: #af5614;text-decoration: none;}
        .nav-links {display: flex;list-style: none;}
        .nav-links li {margin-left: 30px;}
        .nav-links a {text-decoration: none;color: var(--text);font-weight: 500;transition: color 0.3s;}
        .nav-links a:hover {color: var(--primary);}
        .mobile-menu-btn {display: none;background: none;border: none;font-size: 1.5rem;cursor: pointer;color: var(--dark);}
        .hero {padding: 80px 0;background: linear-gradient(135deg, var(--primary), var(--secondary));color: white;text-align: center;}
        .hero h1 {font-size: 3rem;margin-bottom: 20px;line-height: 1.2;}
        .hero p {font-size: 1.2rem;max-width: 700px;margin: 0 auto 30px;opacity: 0.9;}
        .btn {display: inline-block;padding: 12px 30px;background-color: white;color: var(--primary);border-radius: 30px;text-decoration: none;font-weight: 600;transition: all 0.3s;border: none;cursor: pointer;}
        .btn:hover {transform: translateY(-3px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}
        .btn-primary {background-color: var(--accent);color: white;}
        .features {padding:40px 0;background-color: white;}
        .section-title {text-align: center;margin-bottom: 60px;}
        .section-title h2 {font-size: 2.2rem;color: var(--dark);margin-bottom: 15px;}
        .section-title p {color: var(--text-light);max-width: 600px;margin: 0 auto;}
        .features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;}
        .feature-card {background-color: var(--light);border-radius: 10px;padding: 30px;text-align: center;transition: transform 0.3s, box-shadow 0.3s;}
        .feature-card:hover {transform: translateY(-10px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
        .feature-icon {width: 70px;height: 70px;background-color: var(--primary);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;color: white;font-size: 1.8rem;}
        .feature-card h3 {margin-bottom: 15px;font-size: 1.4rem;}
        .about {padding: 80px 0;background-color: #f8f9fa;}
        .about-content {display: flex;align-items: center;gap: 50px;}
        .about-text {flex: 1;}
        .about-image {flex: 1;border-radius: 10px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}
        .about-image img {width: 100%;height: auto;display: block;}
        .products {padding: 80px 0;background-color: white;}
        .products-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
        .product-card {background-color: var(--light);border-radius: 10px;overflow: hidden;transition: transform 0.3s, box-shadow 0.3s;}
        .product-card:hover {transform: translateY(-10px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
        .product-image {width: 100%;height: 200px;background: linear-gradient(45deg, var(--primary), var(--accent));display: flex;align-items: center;justify-content: center;color: white;font-size: 1.5rem;}
        .product-content {padding: 20px;}
        .product-content h3 {margin-bottom: 10px;font-size: 1.2rem;color: var(--dark);}
        .product-content p {color: var(--text-light);margin-bottom: 15px;}
        .product-price {color: #af5614;}
        
        /* 修复的回收案例部分 - 使用纯CSS实现自动滚动 */
        .scroll-products {padding: 80px 0;background-color: #f8f9fa;overflow: hidden;position: relative;}
        .scroll-products-container {position: relative;}
        .scroll-products-wrapper {
            display: flex;
            gap: 25px;
            padding: 20px 10px;
            width: max-content;
            animation: scroll 30s linear infinite;
        }
        .scroll-product-card {
            flex: 0 0 auto;
            width: 300px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .scroll-product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        .scroll-product-image {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        .scroll-product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        .scroll-product-card:hover .scroll-product-image img {
            transform: scale(1.05);
        }
        .scroll-product-content {padding: 20px;}
        .scroll-product-content h3 {margin-bottom: 10px;font-size: 1.2rem;color: var(--dark);}
        .scroll-product-content p {color: var(--text-light);margin-bottom: 15px;font-size: 0.95rem;}
        .scroll-product-price {color: #af5614;}
        
        /* 关键帧动画实现滚动效果 */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-300px * 4 - 25px * 4)); /* 卡片宽度 * 卡片数量 + 间距 * 卡片数量 */
            }
        }
        
        /* 鼠标悬停时暂停动画 */
        .scroll-products-wrapper:hover {
            animation-play-state: paused;
        }
        
        .news {padding: 80px 0;background-color: white;}
        .news-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
        .news-column h3 {font-size: 1.5rem;margin-bottom: 25px;padding-bottom: 10px;border-bottom: 2px solid var(--primary);color: var(--dark);}
        .news-column h3 a{font-size: 1.5rem;margin-bottom: 25px;padding-bottom: 10px;color:#0d6dcd;text-decoration: none;}
        .news-column h3 a:hover {color: #c30!important;text-decoration: underline;}
        .news-item {background-color: white;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);transition: transform 0.3s, box-shadow 0.3s;}
        .news-item:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);}
        .news-date {font-size: 0.85rem;color: var(--text-light);margin-bottom: 8px;}
        .news-item h4 {font-size: 1.1rem;margin-bottom: 10px;color: var(--dark);}
        .news-item p {color: var(--text-light);font-size: 0.95rem;margin-bottom: 15px;}
        .news-more {color: var(--primary);text-decoration: none;font-weight: 500;font-size: 0.9rem;}
        .news-more:hover {text-decoration: underline;}
        footer {background-color: var(--dark);color: white;padding: 70px 0 20px;}
        .footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 40px;margin-bottom: 50px;}
        .footer-column h4 {margin-bottom: 20px;font-size: 1.2rem;}
        .footer-links {list-style: none;}
        .footer-links li {margin-bottom: 10px;}
        .footer-links a {color: rgba(255, 255, 255, 0.7);text-decoration: none;transition: color 0.3s;}
        .footer-links a:hover {color: white;}
        .social-links {display: flex;gap: 15px;margin-top: 20px;}
        .social-links a {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.1);border-radius: 50%;color: white;text-decoration: none;transition: background-color 0.3s;}
        .social-links a:hover {background-color: var(--primary);}
        .copyright {text-align: center;padding-top: 20px;border-top: 1px solid rgba(255, 255, 255, 0.1);color: rgba(255, 255, 255, 0.7);font-size: 0.9rem;}
        @media (max-width: 992px) {.hero h1 {font-size: 2.2rem;} .about-content {flex-direction: column;} .products-grid, .news-grid {grid-template-columns: repeat(2, 1fr);} .scroll-product-card {width: 280px;} @keyframes scroll {100% {transform: translateX(calc(-280px * 4 - 25px * 4));}}}
        @media (max-width: 768px) {.nav-links {display: none;position: absolute;top: 100%;left: 0;width: 100%;background-color: white;flex-direction: column;padding: 20px;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);} .nav-links.active {display: flex;} .nav-links li {margin: 10px 0;} .mobile-menu-btn {display: block;} .hero h1 {font-size: 2rem;} .hero p {font-size: 1rem;} .section-title h2 {font-size: 1.6rem;} .products-grid, .news-grid {grid-template-columns: 1fr;} .scroll-product-card {width: 260px;} @keyframes scroll {100% {transform: translateX(calc(-260px * 4 - 25px * 4));}}}
        @media (max-width: 576px) {.features, .about, .products, .scroll-products, .news {padding: 40px 0;} .feature-card, .service-card {padding: 20px;} .scroll-product-card {width: 240px;} @keyframes scroll {100% {transform: translateX(calc(-240px * 4 - 25px * 4));}}}