:root{--primary-color:#165DFF;--secondary-color:#2b6cb0;--accent-color:#3182ce;--text-color:#2d3748;--light-text:#4a5568;--background-color:#ffffff;--light-background:#f7fafc;--border-color:#e2e8f0;--card-shadow:0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1);--card-shadow-hover:0 16px 24px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.08);--border-radius:8px;--transition:transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--background-color);}.container{max-width:1200px;margin:0 auto;padding:0 20px;}header{background-color:var(--background-color);box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);position:sticky;top:0;z-index:1000;}nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;gap:1rem;flex-wrap:wrap;}.language-switch{display:flex;align-items:center;z-index:500;white-space:nowrap;margin-left:auto;}.language-switch a{text-decoration:none;color:var(--text-color);font-weight:500;font-size:1rem;transition:var(--transition);padding:0.5rem 1rem;border-radius:var(--border-radius);margin-left:0.5rem;background-color:var(--background-color);border:2px solid var(--primary-color);min-width:80px;text-align:center;}.language-switch a:first-child{margin-left:0;}.language-switch a:hover{color:white;background-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--card-shadow-hover);}.language-switch a.active{color:white;background-color:var(--primary-color);font-weight:700;box-shadow:var(--card-shadow);}.logo{display:flex;align-items:center;}.logo img{height:50px;margin-right:1rem;}.logo h1{font-size:1.5rem;font-weight:700;color:var(--primary-color);}.nav-links{display:flex;list-style:none;}.nav-links li{margin-left:2rem;}.nav-links a{text-decoration:none;color:var(--text-color);font-weight:500;font-size:1.1rem;transition:var(--transition);position:relative;padding:0.5rem 0;}.nav-links a:hover{color:var(--primary-color);}.nav-links a.active{color:var(--primary-color);font-weight:700;}.nav-links a:focus{outline:2px solid var(--primary-color);outline-offset:2px;}.nav-links a.active::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:var(--primary-color);border-radius:2px;}.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:var(--primary-color);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease;}.nav-links a:hover::after{transform:scaleX(1);}.dropdown{position:relative;}.dropdown .submenu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background-color:white;min-width:200px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border-radius:8px;padding:0.5rem 0;z-index:1000;list-style:none;}.dropdown:hover .submenu{display:block;}.dropdown .submenu li{margin:0;}.dropdown .submenu a{display:block;padding:0.75rem 1.5rem;font-size:1rem;color:var(--text-color);white-space:nowrap;}.dropdown .submenu a:hover{background-color:var(--light-bg);color:var(--primary-color);}.dropdown .submenu a::after{display:none;}.menu-toggle{display:none;cursor:pointer;font-size:1.5rem;}.banner{position:relative;background-color:var(--primary-color);color:white;padding:6rem 0;overflow:hidden;}.banner-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));opacity:0.9;z-index:1;}.banner-content{position:relative;z-index:2;max-width:800px;margin:0 auto;}.banner h1{font-size:2.5rem;margin-bottom:1rem;font-weight:700;}.banner-tagline{font-size:1.25rem;margin-bottom:1.5rem;font-weight:500;}.banner p{font-size:1.1rem;margin-bottom:2rem;opacity:0.9;}.banner-buttons{display:flex;gap:1rem;justify-content:center;}.btn{display:inline-block;padding:0.75rem 1.5rem;border-radius:var(--border-radius);text-decoration:none;font-weight:600;transition:var(--transition);border:none;cursor:pointer;font-size:1rem;}.btn:focus{outline:2px solid var(--primary-color);outline-offset:2px;}.btn-primary{background-color:var(--primary-color);color:white;border:1px solid var(--primary-color);}.btn-primary:hover{background-color:#0d47a1;transform:translateY(-2px);box-shadow:var(--card-shadow-hover);}.btn-secondary{background-color:white;color:var(--primary-color);border:1px solid var(--primary-color);}.btn-secondary:hover{background-color:rgba(22, 93, 255, 0.05);transform:translateY(-2px);box-shadow:var(--card-shadow-hover);}.section{padding:4rem 0;}.bg-light{background-color:var(--light-background);}.content-section{position:relative;}.section-title{text-align:center;margin-bottom:3rem;}.section-title h2{font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:0.5rem;}.section-title p{font-size:1.1rem;color:var(--light-text);}.grid{display:grid;gap:2rem;}.grid-4{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));}.grid-3{grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));}.card{background-color:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);display:flex;flex-direction:column;height:100%;}.card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.card-icon{color:var(--accent-color);margin-bottom:1.5rem;}.card h3{font-size:1.25rem;font-weight:600;color:var(--primary-color);margin-bottom:1rem;}.card p{color:var(--light-text);flex-grow:1;}.product-card{background-color:white;border-radius:var(--border-radius);box-shadow:var(--card-shadow);transition:var(--transition);display:flex;flex-direction:column;}.product-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.product-image{height:200px;overflow:hidden;}.product-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}.card-image{height:180px;margin-bottom:1.5rem;border-radius:var(--border-radius);overflow:hidden;}.card-image img{width:100%;height:100%;object-fit:cover;}.brand-wall{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem;padding:2rem 0;}.brand-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background-color:white;border-radius:var(--border-radius);box-shadow:var(--card-shadow);transition:var(--transition);min-width:150px;}.brand-item:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.brand-item svg{color:var(--primary-color);margin-bottom:0.5rem;}.brand-item span{font-weight:500;color:var(--text-color);}.product-card:hover .product-image img{transform:scale(1.05);}.product-content{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column;}.product-content h3{font-size:1.25rem;font-weight:600;color:var(--primary-color);margin-bottom:1rem;}.product-content p{color:var(--light-text);margin-bottom:1.5rem;flex-grow:1;}.tech-content{display:flex;gap:3rem;align-items:center;}.tech-image{flex:1;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);}.tech-image img{width:100%;height:100%;object-fit:cover;}.tech-text{flex:1;}.tech-text h3{font-size:1.5rem;font-weight:600;color:var(--primary-color);margin-bottom:1.5rem;}.tech-text p{margin-bottom:1rem;color:var(--light-text);}.tech-text p strong{color:var(--primary-color);}.stat-card{background-color:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);}.stat-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.stat-number{font-size:3.5rem;font-weight:800;color:var(--accent-color);margin-bottom:0.5rem;line-height:1.2;}.stat-label{font-size:1.1rem;color:var(--light-text);}.certificate-card{background-color:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);text-align:center;}.certificate-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.certificate-image{height:180px;margin-bottom:1.5rem;border-radius:var(--border-radius);overflow:hidden;}.certificate-image img{width:100%;height:100%;object-fit:cover;}.certificate-card h3{font-size:1.25rem;font-weight:600;color:var(--primary-color);margin-bottom:1rem;}.certificate-card p{color:var(--light-text);}.case-card{background-color:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);text-align:center;}.case-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.case-card.highlight{border:2px solid var(--primary-color);background-color:rgba(22, 93, 255, 0.05);}.case-logo{color:var(--accent-color);margin-bottom:1.5rem;display:flex;justify-content:center;}.case-card h3{font-size:1.25rem;font-weight:600;color:var(--primary-color);margin-bottom:1rem;}.case-card p{color:var(--light-text);}.case-card .case-highlight{font-weight:700;color:var(--primary-color);margin-bottom:1rem;font-size:1.1rem;}.case-card .case-details{list-style:none;text-align:left;margin-top:1rem;}.case-card .case-details li{margin-bottom:0.5rem;color:var(--light-text);font-size:0.95rem;}.case-card .case-details li:before{content:"•";color:var(--primary-color);font-weight:bold;display:inline-block;width:1em;margin-left:-1em;}.news-card{background-color:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);display:flex;flex-direction:column;height:100%;}.news-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.news-image{height:180px;overflow:hidden;}.news-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}.news-card:hover .news-image img{transform:scale(1.05);}.news-content{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column;}.news-date{font-size:0.9rem;color:var(--light-text);margin-bottom:0.75rem;}.news-content h3{font-size:1.25rem;font-weight:600;color:var(--primary-color);margin-bottom:1rem;}.news-content p{color:var(--light-text);margin-bottom:1.5rem;flex-grow:1;}.contact-content{display:flex;gap:3rem;}.contact-info{flex:1;}.contact-info h3{font-size:1.5rem;font-weight:600;color:var(--primary-color);margin-bottom:1.5rem;}.contact-info p{margin-bottom:1rem;color:var(--light-text);}.contact-info p strong{color:var(--primary-color);}.contact-form{flex:1;background-color:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);}.contact-form h3{font-size:1.5rem;font-weight:600;color:var(--primary-color);margin-bottom:1.5rem;}.form-group{margin-bottom:1.5rem;}.form-group label{display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-color);}.required{color:#e53e3e;}.form-group input, .form-group textarea{width:100%;padding:0.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;transition:var(--transition);}.form-group input:focus, .form-group textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(49, 130, 206, 0.1);}.form-group textarea{resize:vertical;min-height:120px;}.floating-buttons{position:fixed;right:2rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1rem;z-index:999;}.floating-btn{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;box-shadow:var(--card-shadow);transition:var(--transition);text-decoration:none;cursor:pointer;}.floating-btn:hover{transform:scale(1.1);box-shadow:var(--card-shadow-hover);}.main{background-color:var(--primary-color);}.back-to-top{background-color:var(--primary-color);border:none;position:relative;}.product-filters{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;padding:1.5rem 2rem;background-color:white;border-radius:var(--border-radius);box-shadow:var(--card-shadow);gap:2rem;}.search-box{display:flex;align-items:center;gap:0;flex:1;max-width:520px;}.search-box input{padding:0.75rem 1.25rem;border:1px solid var(--border-color);border-right:none;border-radius:var(--border-radius) 0 0 var(--border-radius);width:100%;min-width:240px;font-size:0.95rem;outline:none;transition:border-color 0.3s;}.search-box input:focus{border-color:#165DFF;box-shadow:0 0 0 2px rgba(22,93,255,0.1);}.search-box button{padding:0.75rem 1.75rem;border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;background:linear-gradient(135deg, #165DFF, #0e42d2);color:white;font-size:0.95rem;cursor:pointer;white-space:nowrap;transition:all 0.3s;}.search-box button:hover{background:linear-gradient(135deg, #0e42d2, #0930b5);transform:translateY(-1px);}.filter-options{display:flex;gap:0.75rem;flex-shrink:0;}.filter-options select{padding:0.7rem 1rem;padding-right:2rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:0.9rem;background-color:white;appearance:auto;cursor:pointer;outline:none;transition:border-color 0.3s;}.filter-options select:focus{border-color:#165DFF;}.product-advantages{margin-bottom:3rem;}.product-specs{margin:1rem 0;}.spec-item{display:block;margin-bottom:0.5rem;font-size:0.9rem;color:var(--light-text);}.product-tags{margin:1rem 0;}.tag{display:inline-block;padding:0.25rem 0.75rem;background-color:var(--light-background);color:var(--primary-color);border-radius:20px;font-size:0.8rem;margin-right:0.5rem;margin-bottom:0.5rem;}.download-section{margin:3rem 0;padding:3rem;background-color:var(--light-background);border-radius:var(--border-radius);text-align:center;}.download-content h3{font-size:1.5rem;margin-bottom:1rem;color:var(--primary-color);}.download-content p{margin-bottom:2rem;color:var(--light-text);}.download-buttons{display:flex;justify-content:center;gap:1rem;}.pagination{display:flex;justify-content:center;margin-top:3rem;}.pagination ul{display:flex;list-style:none;gap:0.5rem;}.pagination li a{display:block;padding:0.75rem 1.25rem;background-color:white;border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);text-decoration:none;transition:var(--transition);}.pagination li a:hover{background-color:var(--primary-color);color:white;border-color:var(--primary-color);}. pagination li.active a{background-color:var(--primary-color);color:white;border-color:var(--primary-color);}@media (max-width:768px){.product-filters{flex-direction:column;align-items:stretch;gap:1rem;padding:1rem;}.search-box{max-width:100%;}.search-box input{width:100%;min-width:unset;}.filter-options{justify-content:stretch;}.filter-options select{flex:1;}.download-buttons{flex-direction:column;align-items:center;}.download-section{padding:2rem 1rem;}.language-switch{white-space:normal;}}footer{background-color:var(--primary-color);color:white;padding:3rem 0 1rem;}.footer-content{display:grid;grid-template-columns:repeat(4, 1fr);gap:2rem;margin-bottom:2rem;text-align:center;}.footer-logo-section{grid-column:1;text-align:center;}.footer-logo{display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}.footer-logo img{height:40px;margin-right:1rem;}.footer-logo h3{font-size:1.25rem;font-weight:700;}.footer-logo-section p{margin-bottom:0.75rem;opacity:0.9;}.footer-links h4{font-size:1.1rem;font-weight:600;margin-bottom:1rem;}.footer-links ul{list-style:none;}.footer-links li{margin-bottom:0.75rem;}.footer-links a{color:white;text-decoration:none;opacity:0.9;transition:var(--transition);}.footer-links a:hover{opacity:1;color:var(--accent-color);}.footer-bottom{border-top:1px solid rgba(255, 255, 255, 0.1);padding-top:1rem;text-align:center;opacity:0.8;}@media (max-width:992px){.tech-content{flex-direction:column;text-align:center;}.contact-content{flex-direction:column;}.banner h1{font-size:2rem;}.grid-3{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));}}@media (max-width:768px){.nav-links{position:fixed;top:70px;left:0;width:100%;background-color:white;flex-direction:column;align-items:center;padding:1rem 0;box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);transform:translateY(-150%);transition:var(--transition);}.nav-links.active{transform:translateY(0);}.nav-links li{margin:0.5rem 0;}.dropdown .submenu{position:static;transform:none;box-shadow:none;padding-left:1rem;}.dropdown .submenu a{padding:0.5rem 1rem;}.menu-toggle{display:block;}.banner{padding:4rem 0;}.banner h1{font-size:1.75rem;}.banner-buttons{flex-direction:column;align-items:center;}.grid-4{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}.grid-3{grid-template-columns:1fr;}.section{padding:3rem 0;}.floating-buttons{right:1rem;}.floating-btn{width:45px;height:45px;}.footer-content{grid-template-columns:1fr;gap:2rem;}.footer-logo-section{grid-column:1;}}@media (max-width:576px){.banner h1{font-size:1.5rem;}.banner-tagline{font-size:1rem;}.section-title h2{font-size:1.75rem;}.card{padding:1.5rem;}.product-content{padding:1.25rem;}.contact-form{padding:1.5rem;}}.text-center{text-align:center;}.mt-4{margin-top:1rem;}.mt-5{margin-top:1.25rem;}.mt-8{margin-top:2rem;}@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1; transform:translateY(0);}}.fade-in{animation:fadeIn 0.6s ease-out forwards;}img[data-src]{opacity:0;transition:opacity 0.5s ease-in-out;}img[data-src].loaded{opacity:1;}.download-steps{list-style:none;padding:0;margin:1.5rem 0;text-align:left;}.download-steps li{margin-bottom:1rem;position:relative;padding-left:2.5rem;color:var(--light-text);font-size:1rem;line-height:1.4;}.download-steps li:before{content:counter(step);counter-increment:step;position:absolute;left:0;top:0;width:2rem;height:2rem;background-color:var(--primary-color);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.9rem;}.download-steps{counter-reset:step;}.download-note{margin-top:1.5rem;padding:1rem;background-color:rgba(22, 93, 255, 0.05);border-left:4px solid var(--primary-color);font-style:italic;color:var(--light-text);}.manual-file{font-weight:700;color:var(--primary-color);margin:0.5rem 0;}.manual-desc{color:var(--light-text);font-size:0.95rem;line-height:1.4;}.modal{display:none;position:fixed;z-index:500;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4);}.modal-content{background-color:white;margin:15% auto;padding:2rem;border-radius:var(--border-radius);width:90%;max-width:500px;box-shadow:var(--card-shadow-hover);position:relative;}.close{color:#aaa;float:right;font-size:28px;font-weight:bold;cursor:pointer;}.close:hover{color:var(--primary-color);}. video-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);margin-bottom:2rem;}.video-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.video-thumbnail{position:relative;cursor:pointer;overflow:hidden;}.video-thumbnail img{width:100%;height:200px;object-fit:cover;transition:transform 0.3s ease;}.video-thumbnail:hover img{transform:scale(1.05);}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:rgba(22, 93, 255, 0.8);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;transition:var(--transition);}.play-button:hover{background-color:var(--primary-color);transform:translate(-50%, -50%) scale(1.1);}.video-duration{position:absolute;bottom:10px;right:10px;background-color:rgba(0, 0, 0, 0.7);color:white;padding:4px 8px;border-radius:4px;font-size:0.8rem;font-weight:500;}.video-info{padding:1.5rem;}.video-info h3{margin-bottom:0.5rem;color:var(--text-color);font-size:1.2rem;font-weight:700;}.video-desc{color:var(--light-text);font-size:0.95rem;line-height:1.4;margin-bottom:1rem;}.video-tags{display:flex;flex-wrap:wrap;gap:0.5rem;}.video-modal{max-width:800px;width:95%;}.video-info-modal{margin:1rem 0;}.video-info-modal span{background-color:var(--primary-color);color:white;padding:2px 8px;border-radius:4px;font-size:0.8rem;margin-right:1rem;}.video-player{margin-top:1rem;}@media (max-width:768px){.video-thumbnail img{height:150px;}.play-button{width:60px;height:60px;}.play-button svg{width:32px;height:32px;}.video-player iframe{height:300px;}}.quote-form-container{background:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);}.form-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1.5rem;margin-bottom:2rem;}.form-group.full-width{grid-column:1 / -1;}.quote-form-container label{display:block;margin-bottom:0.5rem;font-weight:600;color:var(--text-color);}.quote-form-container input, .quote-form-container select, .quote-form-container textarea{width:100%;padding:0.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;transition:border-color 0.3s ease;}.quote-form-container input:focus, .quote-form-container select:focus, .quote-form-container textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(22, 93, 255, 0.1);}.form-actions{text-align:center;}.quote-info .card{height:100%;}.quote-notes{list-style:none;padding:0;margin:1.5rem 0;text-align:left;}.quote-notes li{margin-bottom:1rem;position:relative;padding-left:2rem;color:var(--light-text);line-height:1.4;}.quote-notes li:before{content:'✓';position:absolute;left:0;top:0;color:var(--primary-color);font-weight:bold;font-size:1.2rem;}.faq-item{margin-top:1.5rem;border-bottom:1px solid var(--border-color);padding-bottom:1rem;}.faq-item h4{margin-bottom:0.5rem;color:var(--text-color);font-size:1rem;font-weight:600;}.faq-item p{color:var(--light-text);font-size:0.95rem;line-height:1.4;}@media (max-width:768px){.form-grid{grid-template-columns:1fr;}.quote-form-container{padding:1.5rem;}}.sustainability-section{padding:4rem 0;position:relative;}.sustainability-section.bg-light{background-color:var(--light-background);}.sustainability-section .grid{align-items:center;}.section-image{overflow:hidden;border-radius:var(--border-radius);box-shadow:var(--card-shadow);}.section-image img{width:100%;height:400px;object-fit:cover;transition:transform 0.3s ease;}.section-image:hover img{transform:scale(1.05);}.section-content{padding:0 2rem;}.section-content h3{color:var(--primary-color);font-size:1.5rem;font-weight:700;margin-bottom:0.5rem;}. /* ===== 网站美化升级 ===== */ /* 1. 优化CSS变量 - 增加更多颜色层次和阴影 */ :root { --primary-light: #4080ff; --primary-dark: #0e42d2; --primary-gradient: linear-gradient(135deg, #165DFF 0%, #4080ff 100%); --secondary-gradient: linear-gradient(135deg, #2b6cb0 0%, #3182ce 100%); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-primary: 0 4px 14px 0 rgba(22, 93, 255, 0.3); --shadow-primary-hover: 0 6px 20px 0 rgba(22, 93, 255, 0.4); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --transition-fast: all 0.2s ease; --transition-normal: all 0.3s ease; --transition-slow: all 0.5s ease; } /* 2. 全局优化 */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { line-height: 1.7; color: #1a202c; } /* 3. 导航栏美化 */ .nav { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid rgba(226, 232, 240, 0.8); transition: var(--transition-normal); } .nav:hover { box-shadow: var(--shadow-md); } .nav-links a { position: relative; font-weight: 500; transition: var(--transition-fast); } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px; background: var(--primary-gradient); transition: var(--transition-normal); transform: translateX(-50%); border-radius: 2px; } .nav-links a:hover::after { width: 100%; } .dropdown .submenu { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl) !important; border: 1px solid var(--border-color); overflow: hidden; } .dropdown .submenu a { transition: var(--transition-fast); padding: 0.75rem 1rem !important; } .dropdown .submenu a:hover { background: linear-gradient(90deg, rgba(22, 93, 255, 0.1) 0%, transparent 100%); color: var(--primary-color) !important; padding-left: 1.25rem !important; } /* 4. Banner区域美化 */ .banner { position: relative; overflow: hidden; } .banner::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); border-radius: 50%; animation: float 6s ease-in-out infinite; } .banner::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(64, 128, 255, 0.2) 0%, transparent 70%); border-radius: 50%; animation: float 8s ease-in-out infinite reverse; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .banner-content { position: relative; z-index: 1; } .banner h1 { font-weight: 800 !important; letter-spacing: -0.02em; line-height: 1.2 !important; color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .banner-tagline { opacity: 0.95; font-weight: 400; } /* 5. 按钮美化 */ .btn { border-radius: var(--radius-lg) !important; font-weight: 600 !important; padding: 0.875rem 2rem !important; transition: var(--transition-normal) !important; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .btn:hover::before { left: 100%; } .btn-primary { background: var(--primary-gradient) !important; box-shadow: var(--shadow-primary) !important; border: none !important; } .btn-primary:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-primary-hover) !important; } .btn-secondary { border: 2px solid rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1) !important; } .btn-secondary:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.5) !important; transform: translateY(-3px) !important; } /* 6. 卡片美化 */ .card, .product-card, .news-card, .case-card, .certificate-card { border-radius: var(--radius-xl) !important; transition: var(--transition-normal) !important; border: 1px solid rgba(226, 232, 240, 0.8); overflow: hidden; } .card:hover, .product-card:hover, .news-card:hover, .case-card:hover, .certificate-card:hover { transform: translateY(-8px) !important; box-shadow: var(--shadow-2xl) !important; border-color: rgba(22, 93, 255, 0.2); } .card-image, .product-card img, .news-image, .case-image, .certificate-image { transition: var(--transition-slow) !important; } .card:hover .card-image, .product-card:hover img, .news-card:hover .news-image img, .case-card:hover .case-image img, .certificate-card:hover .certificate-image img { transform: scale(1.08) !important; } /* 7. 区块标题美化 */ .section-title { position: relative; margin-bottom: 3rem !important; } .section-title h2 { font-weight: 800 !important; font-size: 2.25rem !important; letter-spacing: -0.02em; position: relative; display: block; } .section-title h2::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--primary-gradient); border-radius: 2px; } .section-title p { margin-top: 1.5rem !important; font-size: 1.1rem; color: var(--light-text); } /* 8. 核心优势卡片美化 */ .stat-card { border-radius: var(--radius-xl) !important; padding: 2rem !important; transition: var(--transition-normal) !important; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--primary-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .stat-card:hover::before { transform: scaleX(1); } .stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .stat-number { font-weight: 800 !important; color: #165DFF !important; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 9. 品牌墙美化 */ .brand-wall { padding: 3rem 0; background: var(--light-background); border-radius: var(--radius-xl); } .brand-item { filter: grayscale(100%); opacity: 0.6; transition: var(--transition-normal); } .brand-item:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); } /* 10. 产品筛选美化 */ .product-filters { background: var(--light-background); padding: 1.5rem 2rem !important; border-radius: var(--radius-xl); margin-bottom: 2rem !important; } .filter-options button { border-radius: var(--radius-lg) !important; padding: 0.625rem 1.25rem !important; font-weight: 500; transition: var(--transition-fast); border: 2px solid transparent; } .filter-options button:hover { border-color: var(--primary-color); color: var(--primary-color); background: white; } .filter-options button.active { background: var(--primary-gradient) !important; color: white !important; border-color: transparent; box-shadow: var(--shadow-primary); } /* 11. 搜索框美化 */ .search-box { border-radius: var(--radius-xl) !important; overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-normal); } .search-box:focus-within { box-shadow: var(--shadow-primary); transform: translateY(-2px); } .search-box input { border: none !important; padding: 1rem 1.25rem !important; } .search-box button { background: var(--primary-gradient) !important; border: none !important; padding: 0 1.5rem !important; font-weight: 600; } /* 12. 标签美化 */ .tag { border-radius: var(--radius-lg) !important; padding: 0.375rem 0.875rem !important; font-weight: 500; font-size: 0.85rem !important; transition: var(--transition-fast); border: 1px solid transparent; } .tag:hover { background: var(--primary-gradient) !important; color: white !important; transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* 13. 分页美化 */ .pagination li a { border-radius: var(--radius-lg) !important; font-weight: 500; transition: var(--transition-fast); min-width: 44px; text-align: center; } .pagination li a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .pagination li.active a { background: var(--primary-gradient) !important; border-color: transparent !important; box-shadow: var(--shadow-primary); } /* 14. 浮动按钮美化 */ .floating-btn { box-shadow: var(--shadow-lg) !important; transition: var(--transition-normal) !important; backdrop-filter: blur(10px); } .floating-btn:hover { transform: scale(1.15) !important; box-shadow: var(--shadow-xl) !important; } /* 15. 页脚美化 */ .footer { position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); } .footer-links a { position: relative; transition: var(--transition-fast); } .footer-links a:hover { opacity: 1 !important; padding-left: 6px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } /* 16. 回到顶部按钮美化 */ .back-to-top { border-radius: 50% !important; width: 48px !important; height: 48px !important; display: flex !important; align-items: center; justify-content: center; box-shadow: var(--shadow-lg) !important; transition: var(--transition-normal) !important; } .back-to-top:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-xl) !important; } /* 17. 下载区域美化 */ .download-section { border-radius: var(--radius-xl) !important; position: relative; overflow: hidden; } .download-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); border-radius: 50%; } .download-buttons .btn { margin: 0 0.5rem; } /* 18. 联系表单美化 */ .contact-form { background: white; padding: 2.5rem !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg); } .form-group input, .form-group textarea { border-radius: var(--radius-lg) !important; border: 2px solid var(--border-color) !important; padding: 0.875rem 1rem !important; transition: var(--transition-fast); } .form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1) !important; } /* 19. 动画效果增强 */ .fade-in { animation: fadeInUp 0.8s ease forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 20. 滚动条美化 */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--light-background); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary-color), var(--primary-dark)); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-light), var(--primary-color)); } /* ===== 美化结束 ===== */section-content h4{color:var(--text-color);font-size:1.2rem;font-weight:600;margin-bottom:1rem;}.section-content p{color:var(--light-text);line-height:1.6;margin-bottom:1rem;}@media (max-width:768px){.sustainability-section .grid{grid-template-columns:1fr;}.section-content{padding:2rem 0 0 0;}.section-image img{height:300px;}.sustainability-section:nth-child(even) .section-image{order:1;}.sustainability-section:nth-child(even) .section-content{order:2;}}.report-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);margin-bottom:2rem;}.report-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.report-header{background-color:var(--primary-color);color:white;padding:1.5rem;}.report-header h3{margin:0 0 0.5rem 0;font-size:1.3rem;font-weight:700;}.report-date{font-size:0.9rem;opacity:0.9;}.report-content{padding:1.5rem;}.report-summary{color:var(--light-text);line-height:1.6;margin-bottom:1.5rem;}.report-details h4{color:var(--text-color);font-size:1.1rem;font-weight:600;margin-bottom:1rem;}.report-details ul{list-style:none;padding:0;margin-bottom:1.5rem;}.report-details li{margin-bottom:0.5rem;position:relative;padding-left:1.5rem;color:var(--light-text);line-height:1.4;}.report-details li:before{content:'•';color:var(--primary-color);font-weight:bold;position:absolute;left:0;}.report-actions{margin-top:2rem;text-align:center;}@media (max-width:768px){.report-header{padding:1.25rem;}.report-header h3{font-size:1.1rem;}.report-content{padding:1.25rem;}}.culture-image{overflow:hidden;border-radius:var(--border-radius);box-shadow:var(--card-shadow);}.culture-image img{width:100%;height:400px;object-fit:cover;transition:transform 0.3s ease;}.culture-image:hover img{transform:scale(1.05);}.culture-content{padding:0 2rem;}.culture-content h3{color:var(--primary-color);font-size:1.5rem;font-weight:700;margin-bottom:1rem;}.culture-content p{color:var(--light-text);line-height:1.6;margin-bottom:1.5rem;}.culture-list{list-style:none;padding:0;}.culture-list li{margin-bottom:1rem;position:relative;padding-left:2rem;color:var(--light-text);line-height:1.4;}.culture-list li:before{content:'✓';position:absolute;left:0;top:0;color:var(--primary-color);font-weight:bold;font-size:1.2rem;}.benefit-card{background:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);text-align:center;}.benefit-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.benefit-icon{color:var(--primary-color);margin-bottom:1.5rem;}.benefit-card h3{margin-bottom:1.5rem;color:var(--text-color);font-size:1.2rem;font-weight:600;}.benefit-card ul{list-style:none;padding:0;text-align:left;}.benefit-card li{margin-bottom:0.5rem;position:relative;padding-left:1.5rem;color:var(--light-text);line-height:1.4;}.benefit-card li:before{content:'•';color:var(--primary-color);font-weight:bold;position:absolute;left:0;}.job-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);margin-bottom:2rem;}.job-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.job-header{background-color:var(--primary-color);color:white;padding:1.5rem;}.job-header h3{margin:0 0 0.5rem 0;font-size:1.3rem;font-weight:700;}.job-meta{display:flex;gap:2rem;font-size:0.9rem;opacity:0.9;}.job-content{padding:1.5rem;}.job-content h4{color:var(--text-color);font-size:1.1rem;font-weight:600;margin:1rem 0 0.5rem 0;}.job-content ul{list-style:none;padding:0;margin-bottom:1rem;}.job-content li{margin-bottom:0.5rem;position:relative;padding-left:1.5rem;color:var(--light-text);line-height:1.4;}.job-content li:before{content:'•';color:var(--primary-color);font-weight:bold;position:absolute;left:0;}.application-info h3, .application-form h3{margin-bottom:1.5rem;color:var(--text-color);font-size:1.3rem;font-weight:600;}.application-info p{margin-bottom:1rem;color:var(--light-text);line-height:1.6;}@media (max-width:768px){.culture-content{padding:2rem 0 0 0;}.culture-image img{height:300px;}.benefit-card{margin-bottom:1.5rem;}.job-header{padding:1.25rem;}.job-header h3{font-size:1.1rem;}.job-content{padding:1.25rem;}}.course-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);margin-bottom:2rem;}.course-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.course-image{position:relative;overflow:hidden;}.course-image img{width:100%;height:200px;object-fit:cover;transition:transform 0.3s ease;}.course-image:hover img{transform:scale(1.05);}.course-duration{position:absolute;top:10px;right:10px;background-color:var(--primary-color);color:white;padding:4px 8px;border-radius:4px;font-size:0.8rem;font-weight:500;}.course-content{padding:1.5rem;}.course-content h3{margin-bottom:0.5rem;color:var(--text-color);font-size:1.2rem;font-weight:700;}.course-desc{color:var(--light-text);font-size:0.95rem;line-height:1.4;margin-bottom:1rem;}.course-audience{color:var(--light-text);font-size:0.9rem;font-style:italic;margin-bottom:1.5rem;}.course-actions{text-align:center;}.article-card{background:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);margin-bottom:2rem;}.article-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.article-content h3{margin-bottom:1rem;color:var(--text-color);font-size:1.2rem;font-weight:700;}.article-summary{color:var(--light-text);line-height:1.6;margin-bottom:1.5rem;}.article-actions{text-align:center;}.webinar-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);margin-bottom:2rem;}.webinar-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.webinar-header{background-color:var(--primary-color);color:white;padding:1.5rem;}.webinar-header h3{margin:0 0 0.5rem 0;font-size:1.3rem;font-weight:700;}.webinar-meta{display:flex;gap:2rem;font-size:0.9rem;opacity:0.9;}.webinar-status{background-color:rgba(255, 255, 255, 0.2);padding:2px 8px;border-radius:4px;}.webinar-content{padding:1.5rem;}.webinar-speaker{margin-bottom:1rem;color:var(--text-color);font-weight:600;}.webinar-desc{color:var(--light-text);line-height:1.6;margin-bottom:1.5rem;}.webinar-actions{text-align:center;}@media (max-width:768px){.course-image img{height:150px;}.course-content, .article-content, .webinar-content{padding:1.25rem;}.webinar-header{padding:1.25rem;}.webinar-header h3{font-size:1.1rem;}}.cooperation-card{background:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);margin-bottom:2rem;}.cooperation-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.cooperation-icon{color:var(--primary-color);margin-bottom:1.5rem;text-align:center;}.cooperation-card h3{text-align:center;margin-bottom:1.5rem;color:var(--text-color);font-size:1.3rem;font-weight:700;}.cooperation-content h4{color:var(--text-color);font-size:1.1rem;font-weight:600;margin:1rem 0 0.5rem 0;}.cooperation-content ul{list-style:none;padding:0;margin-bottom:1rem;}.cooperation-content li{margin-bottom:0.5rem;position:relative;padding-left:1.5rem;color:var(--light-text);line-height:1.4;}.cooperation-content li:before{content:'•';color:var(--primary-color);font-weight:bold;position:absolute;left:0;}.advantage-card{background:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);transition:var(--transition);text-align:center;margin-bottom:2rem;}.advantage-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.advantage-icon{color:var(--primary-color);margin-bottom:1.5rem;}.advantage-card h3{margin-bottom:1rem;color:var(--text-color);font-size:1.2rem;font-weight:600;}.advantage-card p{color:var(--light-text);line-height:1.6;}.process-steps{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:3rem;}.process-step{flex:1;min-width:180px;text-align:center;margin:1rem;}.step-number{width:60px;height:60px;background-color:var(--primary-color);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:bold;margin:0 auto 1rem;}.step-content h3{margin-bottom:0.5rem;color:var(--text-color);font-size:1.1rem;font-weight:600;}.step-content p{color:var(--light-text);font-size:0.95rem;}.process-arrow{font-size:2rem;color:var(--primary-color);margin:0 1rem;font-weight:bold;}.contact-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem;}.contact-info{background:white;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--card-shadow);}.contact-info h3{margin-bottom:1.5rem;color:var(--text-color);font-size:1.3rem;font-weight:600;}.contact-phone{font-size:1.5rem;font-weight:bold;color:var(--primary-color);margin-bottom:1rem;}.contact-email, .contact-address{color:var(--light-text);line-height:1.6;margin-bottom:1rem;}@media (max-width:768px){.cooperation-card{padding:1.5rem;}.advantage-card{padding:1.5rem;}.process-steps{flex-direction:column;}.process-arrow{transform:rotate(90deg);margin:0.5rem 0;}.contact-grid{grid-template-columns:1fr;}}::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:var(--light-background);}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:var(--light-text);}.product-features{list-style:none;padding:0;margin:1rem 0;text-align:left;}.product-features li{margin-bottom:0.5rem;position:relative;padding-left:1.5rem;color:var(--light-text);font-size:0.95rem;}.product-features li:before{content:'•';color:var(--primary-color);font-weight:bold;position:absolute;left:0;}@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:var(--light-background);}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:var(--light-text);}*{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--light-background);}@media (hover:none){.btn:active{transform:scale(0.98);opacity:0.9;}.nav-links a:active{color:var(--primary-color);}}.team-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);padding:1.5rem;text-align:center;}.team-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.team-image{width:120px;height:120px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;background:var(--light-background);}.team-image img{width:100%;height:100%;object-fit:cover;}.team-card h3{font-size:1.2rem;margin-bottom:0.5rem;color:var(--text-color);}.team-position{color:var(--primary-color);font-weight:500;margin-bottom:1rem;font-size:0.9rem;}.team-card p{color:var(--text-secondary);line-height:1.6;font-size:0.95rem;}.certificate-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--transition);padding:2rem;text-align:center;}.certificate-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);}.certificate-icon{width:80px;height:80px;margin:0 auto 1.5rem;background:var(--primary-color);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;}.certificate-card h3{font-size:1.2rem;margin-bottom:1rem;color:var(--text-color);}.certificate-card p{color:var(--text-secondary);line-height:1.6;font-size:0.95rem;}:root{--primary-color:#1E40AF;--secondary-color:#1E3A8A;--accent-color:#3B82F6;--text-color:#1F2937;--light-text:#6B7280;--background-color:#ffffff;--light-background:#F9FAFB;--border-color:#E5E7EB;--card-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--card-shadow-hover:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--header-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);--border-radius:8px;--transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--background-color);}.container{max-width:1280px;margin:0 auto;padding:0 24px;}.top-bar{background:linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);color:white;padding:8px 0;font-size:14px;}.top-bar .container{display:flex;justify-content:space-between;align-items:center;}.top-left{display:flex;gap:24px;align-items:center;}.top-left span{display:flex;align-items:center;gap:6px;}.top-right{display:flex;align-items:center;gap:16px;}.nav-search{position:relative;display:flex;align-items:center;}.nav-search input{background:rgba(255, 255, 255, 0.15);border:1px solid rgba(255, 255, 255, 0.2);color:white;padding:6px 16px 6px 36px;border-radius:20px;font-size:14px;width:200px;transition:var(--transition);}.nav-search input::placeholder{color:rgba(255, 255, 255, 0.7);}.nav-search input:focus{outline:none;background:rgba(255, 255, 255, 0.25);width:260px;}.nav-search::before{content:'🔍';position:absolute;left:12px;font-size:14px;}.lang-switcher{display:flex;align-items:center;background:rgba(255, 255, 255, 0.1);padding:4px;border-radius:20px;}.lang-switcher a{color:rgba(255, 255, 255, 0.7);text-decoration:none;padding:4px 12px;border-radius:16px;font-size:14px;font-weight:500;transition:var(--transition);}.lang-switcher a:hover{color:white;background:rgba(255, 255, 255, 0.15);}.lang-switcher a.active{background:white;color:var(--primary-color);font-weight:600;}.main-header{background:white;box-shadow:var(--header-shadow);position:sticky;top:0;z-index:1000;transition:var(--transition);}.main-header.scrolled{box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);}.main-header .container{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}.header-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}.header-logo img{height:48px;width:auto;}.header-logo .logo-text{display:flex;flex-direction:column;}.header-logo .logo-text h1{font-size:20px;font-weight:700;color:var(--primary-color);line-height:1.2;}.header-logo .logo-text span{font-size:14px;color:var(--light-text);letter-spacing:1px;text-transform:uppercase;}.main-nav{display:flex;align-items:center;gap:8px;}.main-nav ul{display:flex;list-style:none;gap:4px;}.main-nav li{position:relative;}.main-nav a{display:block;padding:10px 16px;text-decoration:none;color:var(--text-color);font-size:15px;font-weight:500;border-radius:6px;transition:var(--transition);position:relative;}.main-nav a:hover{color:var(--primary-color);background:rgba(30, 64, 175, 0.05);}.main-nav a.active{color:var(--primary-color);font-weight:600;}.main-nav a.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:24px;height:3px;background:var(--primary-color);border-radius:2px;}.main-nav .dropdown{position:relative;}.main-nav .dropdown > a{display:flex;align-items:center;gap:6px;}.main-nav .dropdown > a::after{content:'▾';font-size:14px;transition:var(--transition);}.main-nav .dropdown:hover > a::after{transform:rotate(180deg);}.main-nav .dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:white;min-width:280px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.15);border-radius:12px;padding:8px 0;z-index:500;opacity:0;visibility:hidden;transition:var(--transition);border:1px solid var(--border-color);}.main-nav .dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}.main-nav .dropdown-menu li{margin:0;}.main-nav .dropdown-menu a{padding:12px 20px;font-size:14px;border-radius:0;display:flex;align-items:center;gap:10px;}.main-nav .dropdown-menu a:hover{background:linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);color:var(--primary-color);padding-left:24px;}.main-nav .dropdown-menu a::before{content:'→';opacity:0;transition:var(--transition);}.main-nav .dropdown-menu a:hover::before{opacity:1;}.nav-actions{display:flex;align-items:center;gap:12px;}.quick-contact{display:flex;flex-direction:column;align-items:flex-end;padding-right:16px;border-right:1px solid var(--border-color);}.quick-contact span:first-child{font-size:14px;color:var(--light-text);margin-bottom:2px;}.quick-contact span:last-child{font-size:16px;font-weight:700;color:var(--primary-color);}.cta-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);color:white;text-decoration:none;border-radius:8px;font-weight:600;font-size:14px;transition:var(--transition);box-shadow:0 4px 12px rgba(30, 64, 175, 0.25);}.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(30, 64, 175, 0.35);}.cta-button .icon{font-size:16px;}.mobile-menu-btn{will-change:transform;display:none;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;}.main-nav .dropdown-menu{display:block !important;flex-direction:column !important;}.main-nav .dropdown-menu ul{display:block !important;flex-direction:column !important;list-style:none !important;margin:0;padding:0;}.main-nav .dropdown-menu li{display:block !important;width:100%;margin:0;}.main-nav .dropdown-menu a{display:flex !important;align-items:center !important;white-space:nowrap !important;word-break:keep-all !important;width:100%;padding:12px 20px;font-size:14px;border-bottom:1px solid #f0f0f0;}.main-nav .dropdown-menu li:last-child a{border-bottom:none;}.main-header .container{max-width:1400px;padding:16px 15px;}.lang-switcher a{padding:4px 10px;font-size:14px;}.main-nav ul{gap:2px !important;}.main-nav a{padding:8px 12px;font-size:14px;}.quick-contact{padding-right:10px;}.quick-contact span:first-child{font-size:14px;}.quick-contact span:last-child{font-size:14px;}.cta-button{padding:8px 14px;font-size:14px;}.header-logo .logo-text h1{font-size:18px;}.header-logo .logo-text span{font-size:14px;letter-spacing:0.5px !important;}@media (min-width:1025px){.main-header .container{max-width:1450px;padding:16px 20px;}.lang-switcher a{padding:4px 10px;font-size:14px;}.main-nav ul{gap:2px !important;}.main-nav a{padding:8px 12px;font-size:14px;}.quick-contact{padding-right:10px;}.quick-contact span:first-child{font-size:14px;}.quick-contact span:last-child{font-size:14px;}.cta-button{padding:8px 14px;font-size:14px;}.header-logo .logo-text h1{font-size:18px;}.header-logo .logo-text span{font-size:14px;letter-spacing:0.5px !important;}}@media (max-width:1024px){.top-bar{display:none;}.main-nav{display:none !important;}.quick-contact{display:none !important;}.mobile-menu-btn{will-change:transform;display:block !important;background:transparent;border:none;font-size:28px;padding:8px;cursor:pointer !important;color:var(--primary-color);}.header-logo .logo-text span{display:none !important;}.main-header .container{padding:12px 15px;justify-content:space-between !important;}.cta-button{padding:8px 12px;font-size:14px;}.cta-button .icon{display:none !important;}}@media (max-width:768px){.main-header .container{padding:10px 12px;}.header-logo img{height:36px;}.header-logo .logo-text h1{font-size:16px;}.cta-button{padding:6px 10px;font-size:14px;}.mobile-menu-btn{will-change:transform;font-size:24px;}}.stats-section{padding:60px 0;background:linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);color:white;overflow:hidden;}.stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:40px;text-align:center;}.stat-item{position:relative;padding:20px;}.stat-number{font-size:48px;font-weight:700;margin-bottom:10px;display:block;line-height:1;}.stat-label{font-size:16px;opacity:0.95;font-weight:500;}.clients-section{padding:60px 0;background:#F9FAFB;}.clients-section .section-title{text-align:center;margin-bottom:50px;}.clients-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:50px;}.client-logo-item{padding:20px 30px;background:white;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);transition:all 0.3s ease;min-width:120px;text-align:center;}.client-logo-item:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1);}.client-logo-text{font-size:18px;font-weight:600;color:#1F2937;white-space:nowrap;}.certifications-section{padding:60px 0;background:white;}.certifications-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:30px;}.certification-card{text-align:center;padding:40px 30px;background:#F9FAFB;border-radius:12px;transition:all 0.3s ease;}.certification-card:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1);}.cert-icon{font-size:48px;margin-bottom:20px;display:block;}.cert-name{font-size:18px;font-weight:600;color:#1F2937;margin-bottom:8px;}.cert-desc{font-size:14px;color:#6B7280;}@media (max-width:992px){.stats-grid{grid-template-columns:repeat(2, 1fr);gap:30px;}.certifications-grid{grid-template-columns:repeat(2, 1fr);}.clients-logos{gap:30px;}}@media (max-width:768px){.stats-grid{grid-template-columns:1fr 1fr;gap:20px;}.stat-number{font-size:36px;}.certifications-grid{grid-template-columns:1fr;}}@media (max-width:576px){.stats-section{padding:40px 0;}.stat-number{font-size:28px;}.stat-label{font-size:14px;}.client-logo-item{min-width:100px;padding:15px 20px;}.client-logo-text{font-size:14px;}}.stats-section{padding:60px 0;background:linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);color:white;overflow:hidden;}.stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:40px;text-align:center;}.stat-item{position:relative;padding:20px;}.stat-number{font-size:48px;font-weight:700;margin-bottom:10px;display:block;line-height:1;}.stat-label{font-size:16px;opacity:0.95;font-weight:500;}.clients-section{padding:60px 0;background:#F9FAFB;}.clients-section .section-title{text-align:center;margin-bottom:50px;}.clients-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:50px;}.client-logo-item{padding:20px 30px;background:white;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);transition:all 0.3s ease;min-width:120px;text-align:center;}.client-logo-item:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1);}.client-logo-text{font-size:18px;font-weight:600;color:#1F2937;white-space:nowrap;}.certifications-section{padding:60px 0;background:white;}.certifications-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:30px;}.certification-card{text-align:center;padding:40px 30px;background:#F9FAFB;border-radius:12px;transition:all 0.3s ease;}.certification-card:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1);}.cert-icon{font-size:48px;margin-bottom:20px;display:block;}.cert-name{font-size:18px;font-weight:600;color:#1F2937;margin-bottom:8px;}.cert-desc{font-size:14px;color:#6B7280;}@media (max-width:992px){.stats-grid{grid-template-columns:repeat(2, 1fr);gap:30px;}.certifications-grid{grid-template-columns:repeat(2, 1fr);}.clients-logos{gap:30px;}}@media (max-width:768px){.stats-grid{grid-template-columns:1fr 1fr;gap:20px;}.stat-number{font-size:36px;}.certifications-grid{grid-template-columns:1fr;}}@media (max-width:576px){.stats-section{padding:40px 0;}.stat-number{font-size:28px;}.stat-label{font-size:14px;}.client-logo-item{min-width:100px;padding:15px 20px;}.client-logo-text{font-size:14px;}}.factory-strength{padding:70px 0;background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);}.factory-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:30px;}.factory-item{background:white;padding:40px 30px;border-radius:16px;text-align:center;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);transition:all 0.3s ease;}.factory-item:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1);}.factory-icon{font-size:48px;margin-bottom:20px;display:block;}.factory-title{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:10px;}.factory-desc{font-size:14px;color:#6b7280;line-height:1.6;}@media (max-width:1024px){.factory-grid{grid-template-columns:repeat(2, 1fr);}}@media (max-width:640px){.factory-grid{grid-template-columns:1fr;}.factory-strength{padding:50px 0;}}.main-nav.mobile-open{display:flex !important;flex-direction:column !important;position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;background:#fff;z-index:500 !important;padding:70px 20px 20px;overflow-y:auto !important;animation:slideIn 0.3s ease !important;}@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}.main-nav.mobile-open ul{flex-direction:column !important;width:100%;gap:0 !important;}.main-nav.mobile-open li{width:100%;border-bottom:1px solid #f0f0f0;}.main-nav.mobile-open li a{display:block !important;padding:16px 10px;font-size:16px;width:100%;}.main-nav.mobile-open .dropdown-menu{display:block !important;position:static !important;box-shadow:none !important;background:#f7fafc;padding-left:20px;}.main-nav.mobile-open .dropdown-menu li a{padding:12px 10px;font-size:14px;}.mobile-menu-btn.active{position:fixed !important;top:15px !important;right:15px !important;z-index:900 !important;font-size:32px;background:#fff;}body.menu-open{overflow:hidden !important;}@media (max-width:1024px){.main-header .container{flex-wrap:nowrap;align-items:center !important;gap:8px !important;}.mobile-lang-switch{display:flex !important;align-items:center;gap:4px;}.mobile-lang-switch a{padding:4px 8px;font-size:14px;border-radius:4px;text-decoration:none !important;font-weight:600 !important;border:1px solid #165DFF;color:#165DFF;background:#fff;}.mobile-lang-switch a.active{background:#165DFF;color:#fff;}}.mobile-menu-header{display:none;}.main-nav.mobile-open .mobile-menu-header{display:flex !important;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #e2e8f0;margin-bottom:10px;}.mobile-menu-header h3{margin:0;font-size:18px;color:#2d3748;}.mobile-menu-close{background:none;border:none;font-size:28px;color:#718096;cursor:pointer;padding:5px;line-height:1;}.mobile-menu-close:hover{color:#e53e3e;}.mobile-menu-lang{display:none;}.main-nav.mobile-open .mobile-menu-lang{display:flex !important;align-items:center;justify-content:center;gap:15px;padding:15px 20px;border-bottom:1px solid #e2e8f0;margin-bottom:10px;}.mobile-menu-lang a{padding:8px 20px;border-radius:20px;text-decoration:none !important;font-weight:600 !important;font-size:14px;border:2px solid #165DFF;color:#165DFF;background:#fff;}.mobile-menu-lang a.active{background:#165DFF;color:#fff;}.main-nav.mobile-open .dropdown{position:relative !important;}.main-nav.mobile-open .dropdown > a{display:flex !important;justify-content:space-between !important;align-items:center !important;}.main-nav.mobile-open .dropdown > a::after{content:'▼';font-size:14px;transition:transform 0.3s;}.main-nav.mobile-open .dropdown.open > a::after{transform:rotate(180deg);}.main-nav.mobile-open .dropdown-menu{display:none !important;position:static !important;box-shadow:none !important;background:#f7fafc;padding:0;margin:0;border-left:3px solid #165DFF;margin-left:20px;}.main-nav.mobile-open .dropdown.open .dropdown-menu{display:block !important;}.main-nav.mobile-open .dropdown-menu li{border-bottom:1px solid #e2e8f0;}.main-nav.mobile-open .dropdown-menu li:last-child{border-bottom:none;}.main-nav.mobile-open .dropdown-menu a{padding:12px 20px;font-size:14px;color:#4a5568;}.main-nav.mobile-open .dropdown-menu a:hover{color:#165DFF;background:#e8eaf6;}.mobile-lang-switch{display:none !important;}@media (max-width:1024px){.mobile-lang-switch{display:none;}}.pagination{display:flex;justify-content:center;margin:40px 0;}.pagination ul{display:flex;gap:8px;list-style:none;padding:0;margin:0;}.pagination li a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;color:#333;text-decoration:none;transition:all 0.2s ease;}.pagination li a:hover{background:#e9ecef;border-color:#adb5bd;}.pagination li.active a{background:#0066cc;border-color:#0066cc;color:#fff;}.pagination li.disabled a{background:#f8f9fa;color:#adb5bd;cursor:not-allowed;pointer-events:none;}@media (max-width:768px){.pagination li a{min-width:36px;height:36px;font-size:14px;}}.product-actions{display:flex;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb;} /* 产品网格布局 */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 0; } /* 产品卡片 - 移除固定高度限制，让内容自然展开 */ .product-card { max-height: none !important; overflow: visible !important; background-color: white; border-radius: var(--border-radius); box-shadow: var(--card-shadow); transition: var(--transition); display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); } .product-image { height: 200px; overflow: hidden; border-radius: var(--border-radius) var(--border-radius) 0 0; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .product-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--primary-color); margin-bottom: 0.75rem; } .product-desc { color: var(--light-text); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; flex: 1; } .product-features { list-style: none; padding: 0; margin: 0.75rem 0; text-align: left; } .product-features li { margin-bottom: 0.4rem; position: relative; padding-left: 1.25rem; color: var(--light-text); font-size: 0.9rem; } .product-features li::before { content: '•'; color: var(--primary-color); font-weight: bold; position: absolute; left: 0; } .product-specs { margin: 0.75rem 0; padding: 0.75rem; background: var(--light-background); border-radius: 6px; } .spec-item { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--light-text); } .spec-item strong { color: var(--text-color); font-weight: 600; } .product-tags { margin: 0.75rem 0; } .tag { display: inline-block; padding: 0.2rem 0.6rem; background: rgba(22, 93, 255, 0.08); color: var(--primary-color); border-radius: 20px; font-size: 0.8rem; margin-right: 0.4rem; margin-bottom: 0.4rem; } .product-price { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); margin: 0.75rem 0; } .product-price .moq { font-size: 0.85rem; font-weight: 400; color: var(--light-text); margin-left: 8px; } /* 响应式调整 */ @media (max-width: 768px) { .product-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 576px) { .product-grid { grid-template-columns: 1fr; } .product-content { padding: 1.25rem; } } .product-actions .btn{flex:1;text-align:center;padding:10px 16px;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:all 0.2s;}.product-actions .btn-primary{background-color:#165DFF;color:white;border:1px solid #165DFF;}.product-actions .btn-primary:hover{background-color:#114ecc;}.product-actions .btn-secondary{background-color:white;color:#165DFF;border:1px solid #165DFF;}.product-actions .btn-secondary:hover{background-color:#f0f5ff;}.product-filters .search-box input{color:#1d2939 !important;background:#ffffff !important;border:1.5px solid #d0d5dd !important;border-right:none !important;padding:10px 16px !important;font-size:14px !important;border-radius:8px 0 0 8px !important;}.product-filters .search-box input::placeholder{color:#98a2b3 !important;}.product-filters .search-box input:focus{border-color:#165DFF !important;box-shadow:0 0 0 3px rgba(22,93,255,0.08) !important;outline:none !important;}.product-filters .search-box button{background:#165DFF !important;color:#fff !important;padding:10px 24px !important;font-size:14px !important;font-weight:500 !important;border:none !important;border-radius:0 8px 8px 0 !important;cursor:pointer !important;transition:all 0.25s ease !important;}.product-filters .search-box button:hover{background:#0930b5 !important;} /* ========== 产品详情页样式 ========== */ /* 面包屑 */ .breadcrumb{padding:16px 0;font-size:14px;color:var(--light-text);} .breadcrumb a{color:var(--primary-color);text-decoration:none;transition:color 0.2s;} .breadcrumb a:hover{color:var(--accent-color);} .breadcrumb span{margin:0 8px;color:var(--border-color);} /* 产品详情顶部区域 */ .product-detail{padding:2rem 0 3rem;} .product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;} .product-gallery .main-image{border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--card-shadow);background:#f9fafb;} .product-gallery .main-image img{width:100%;height:auto;display:block;} .product-info h1{font-size:1.75rem;font-weight:700;color:var(--text-color);margin-bottom:0.5rem;line-height:1.3;} .product-subtitle{font-size:1rem;color:var(--accent-color);font-weight:500;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color);} /* 规格项 */ .product-info .product-specs{margin:1.5rem 0;padding:1.25rem;background:var(--light-background);border-radius:var(--border-radius);} .product-info .spec-item{display:flex;justify-content:space-between;padding:0.6rem 0;border-bottom:1px solid var(--border-color);font-size:0.9rem;} .product-info .spec-item:last-child{border-bottom:none;} .product-info .spec-label{color:var(--light-text);font-weight:500;min-width:100px;} .product-info .spec-value{color:var(--text-color);font-weight:600;text-align:right;} /* 按钮组 */ .product-actions{display:flex;gap:12px;margin-top:1.5rem;} .product-actions .btn{flex:1;text-align:center;} .btn-block{display:block;width:100%;text-align:center;} /* 内容区两栏布局 */ .content-grid{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:start;} .main-content h2{font-size:1.5rem;font-weight:700;color:var(--primary-color);margin:2rem 0 1rem;padding-bottom:0.5rem;border-bottom:2px solid rgba(30,64,175,0.1);} .main-content h2:first-child{margin-top:0;} .main-content p{color:var(--light-text);line-height:1.8;margin-bottom:1rem;font-size:0.95rem;} /* 核心优势网格 */ .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin:1rem 0 2rem;} .feature-item{background:var(--light-background);border-radius:var(--border-radius);padding:1.5rem;border-left:4px solid var(--primary-color);transition:var(--transition);} .feature-item:hover{transform:translateY(-3px);box-shadow:var(--card-shadow);} .feature-item h3{font-size:1.05rem;font-weight:600;color:var(--primary-color);margin-bottom:0.5rem;} .feature-item p{color:var(--light-text);font-size:0.9rem;line-height:1.7;margin:0;} /* 规格表格 */ .main-content .spec-table{margin:1rem 0 2rem;overflow-x:auto;border-radius:var(--border-radius);box-shadow:var(--card-shadow);} .main-content .spec-table table{width:100%;border-collapse:collapse;font-size:0.9rem;} .main-content .spec-table th{background:var(--primary-color);color:white;padding:12px 16px;text-align:left;font-weight:600;white-space:nowrap;} .main-content .spec-table td{padding:10px 16px;border-bottom:1px solid var(--border-color);color:var(--light-text);} .main-content .spec-table tr:nth-child(even) td{background:var(--light-background);} .main-content .spec-table tr:hover td{background:rgba(30,64,175,0.04);color:var(--text-color);} /* 应用场景 */ .main-content p strong{color:var(--text-color);font-weight:600;} /* 安装步骤 */ .main-content .install-steps{counter-reset:step;list-style:none;padding:0;margin:1rem 0 2rem;} .main-content .install-steps li{counter-increment:step;position:relative;padding:0.75rem 0 0.75rem 2.5rem;color:var(--light-text);font-size:0.95rem;line-height:1.7;border-bottom:1px dashed var(--border-color);} .main-content .install-steps li:last-child{border-bottom:none;} .main-content .install-steps li::before{content:counter(step);position:absolute;left:0;top:0.75rem;width:1.75rem;height:1.75rem;background:var(--primary-color);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;} /* CTA区域 */ .cta-section{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:white;padding:2rem;border-radius:var(--border-radius);text-align:center;margin-top:2rem;} .cta-section h3{font-size:1.25rem;font-weight:700;margin-bottom:0.5rem;color:white;} .cta-section p{color:rgba(255,255,255,0.9);margin-bottom:1.25rem;font-size:0.95rem;} .cta-section .btn{background:white;color:var(--primary-color);border:none;font-weight:600;padding:0.75rem 2rem;} .cta-section .btn:hover{background:#f0f4ff;transform:translateY(-2px);box-shadow:var(--card-shadow-hover);} /* 侧边栏 */ .sidebar{position:sticky;top:100px;} .sidebar-widget{background:white;border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--card-shadow);margin-bottom:1.25rem;} .sidebar-widget h3{font-size:1.05rem;font-weight:600;color:var(--primary-color);margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid rgba(30,64,175,0.1);} .sidebar-widget ul{list-style:none;padding:0;} .sidebar-widget li{padding:0.5rem 0;color:var(--light-text);font-size:0.9rem;border-bottom:1px solid var(--border-color);} .sidebar-widget li:last-child{border-bottom:none;} .sidebar-widget li a{color:var(--light-text);text-decoration:none;transition:color 0.2s;} .sidebar-widget li a:hover{color:var(--primary-color);} .sidebar-widget p{color:var(--light-text);font-size:0.9rem;margin-bottom:0.5rem;line-height:1.6;} /* 应用领域卡片 */ .application-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin:1rem 0 2rem;} .application-card{background:var(--light-background);border-radius:var(--border-radius);padding:1.5rem;border-top:3px solid var(--primary-color);transition:var(--transition);} .application-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow);} .application-card h3{font-size:1.05rem;font-weight:600;color:var(--primary-color);margin-bottom:0.5rem;} .application-card p{color:var(--light-text);font-size:0.9rem;line-height:1.7;margin:0;} /* FAQ */ .faq-list{margin:1rem 0 2rem;} .faq-item{background:white;border-radius:var(--border-radius);padding:1.25rem 1.5rem;margin-bottom:1rem;box-shadow:0 2px 4px rgba(0,0,0,0.04);border-left:4px solid var(--primary-color);transition:var(--transition);} .faq-item:hover{box-shadow:var(--card-shadow);} .faq-item h3{font-size:1rem;font-weight:600;color:var(--text-color);margin-bottom:0.5rem;} .faq-item p{color:var(--light-text);font-size:0.9rem;line-height:1.7;margin:0;} /* 底部CTA横幅 */ .cta-banner{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:white;padding:3rem 0;text-align:center;} .cta-banner h2{color:white;font-size:1.5rem;font-weight:700;margin-bottom:0.5rem;} .cta-banner p{color:rgba(255,255,255,0.9);margin-bottom:1.5rem;} .cta-banner .btn{margin:0 8px;} .cta-banner .btn-primary-style{background:white;color:var(--primary-color);border:1px solid white;font-weight:600;padding:0.75rem 2rem;} .cta-banner .btn-primary-style:hover{background:#f0f4ff;transform:translateY(-2px);} .cta-banner .btn-outline-style{background:transparent;color:white;border:2px solid white;font-weight:600;padding:0.75rem 2rem;} .cta-banner .btn-outline-style:hover{background:rgba(255,255,255,0.15);transform:translateY(-2px);} /* 应用案例 */ .case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:1.5rem 0;} .case-card{background:white;border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--card-shadow);transition:var(--transition);} .case-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);} .case-card .case-icon{font-size:2rem;margin-bottom:0.75rem;} .case-card h4{font-size:1.05rem;font-weight:600;color:var(--primary-color);margin-bottom:0.5rem;} .case-card p{color:var(--light-text);font-size:0.9rem;line-height:1.7;margin:0;} .case-trust{text-align:center;margin-top:2rem;} .case-trust p{color:var(--light-text);font-size:0.95rem;margin-bottom:1rem;} .case-trust strong{color:var(--primary-color);font-size:1.25rem;} .case-trust .btn{margin-top:0.5rem;} /* 页面banner */ .page-banner{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:white;padding:3rem 0;text-align:center;} .page-banner h1{font-size:2rem;font-weight:700;color:white;margin-bottom:0.5rem;} .page-banner p{font-size:1.05rem;opacity:0.9;} /* ========== 响应式 - 产品详情页 ========== */ @media(max-width:992px){ .product-detail-grid{grid-template-columns:1fr;gap:2rem;} .content-grid{grid-template-columns:1fr;} .sidebar{position:static;order:-1;} .feature-grid{grid-template-columns:1fr;} } @media(max-width:768px){ .product-info h1{font-size:1.4rem;} .product-subtitle{font-size:0.9rem;} .main-content h2{font-size:1.25rem;} .feature-grid{grid-template-columns:1fr;gap:1rem;} .feature-item{padding:1rem;} .application-grid{grid-template-columns:1fr;} .product-actions{flex-direction:column;} .case-grid{grid-template-columns:1fr;} .cta-banner h2{font-size:1.25rem;} .cta-banner .btn{display:block;margin:8px 0;} .page-banner{padding:2rem 0;} .page-banner h1{font-size:1.5rem;} } /* ============================================================ 康利德官网 V2 豪华升级 — 深海科技 × 鎏金质感 追加于 2026-09-02，覆盖 V1 平庸设计，全站统一生效 ============================================================ */ :root{ --kld-deep:#0a2540; --kld-navy:#0b1f4d; --kld-blue:#1e6fff; --kld-blue-deep:#0b3fa8; --kld-sky:#38bdf8; --kld-gold:#c9a86a; --kld-gold-light:#e6cf9a; --kld-bg:#f5f8fd; --kld-title:#101c33; --kld-body:#3d4a5c; --kld-radius:16px; --kld-shadow:0 10px 34px rgba(10,37,64,.10); --kld-shadow-hover:0 22px 52px rgba(10,37,64,.18); } /* ---- 全局质感 ---- */ body{color:var(--kld-body);} ::selection{background:rgba(30,111,255,.18);color:#0b1f4d;} img{max-width:100%;} /* ---- 顶部导航：白底毛玻璃 + 鎏金细线 ---- */ header{ background:rgba(255,255,255,.88)!important; -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); box-shadow:0 2px 18px rgba(10,37,64,.07)!important; border-bottom:1px solid rgba(201,168,106,.35); } .logo h1{ font-weight:800; background:linear-gradient(120deg,#0b1f4d 15%,#1e6fff 55%,#0b3fa8); -webkit-background-clip:text;background-clip:text;color:transparent!important; } .nav-links a{font-weight:600;color:#2c3e50;} .nav-links a:hover{color:var(--kld-blue);} .nav-links a.active{color:var(--kld-blue);font-weight:700;} .nav-links a::after{background:linear-gradient(90deg,#1e6fff,#c9a86a);height:3px;border-radius:3px;} /* ---- Banner：深海蓝 × 鎏金光效 ---- */ .banner{ position:relative;overflow:hidden; background: radial-gradient(900px 480px at 12% -8%, rgba(56,189,248,.32), transparent 58%), radial-gradient(820px 420px at 88% 112%, rgba(201,168,106,.22), transparent 55%), radial-gradient(700px 380px at 70% -20%, rgba(30,111,255,.38), transparent 60%), linear-gradient(140deg,#071c36 0%,#0b1f4d 42%,#123a7a 100%)!important; border-bottom:2px solid rgba(201,168,106,.55); } .banner::before{content:'';position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px);} .banner::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(230,207,154,.9),transparent);} .banner-bg{opacity:.35!important;filter:blur(1px);mix-blend-mode:overlay;} .banner-content{position:relative;z-index:2;text-shadow:0 2px 18px rgba(0,0,0,.30);} .banner h1{font-weight:800;letter-spacing:1px;} .banner-tagline{color:var(--kld-gold-light);font-weight:600;letter-spacing:1px;} .banner p{color:rgba(255,255,255,.9);} /* ---- 按钮：渐变 + 流光扫过 ---- */ .btn{position:relative;overflow:hidden;border-radius:12px!important;letter-spacing:.5px;} .btn-primary{ background:linear-gradient(135deg,#1e6fff 0%,#0b3fa8 100%)!important; border:none!important;box-shadow:0 8px 22px rgba(30,111,255,.35); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(30,111,255,.45)!important;} .btn-primary::before{content:'';position:absolute;top:0;left:-75%;width:45%;height:100%;z-index:1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg);transition:left .55s ease;} .btn-primary:hover::before{left:135%;} .btn-secondary{ background:rgba(255,255,255,.10)!important;color:#fff!important; border:1px solid rgba(255,255,255,.4)!important; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .btn-secondary:hover{background:rgba(255,255,255,.22)!important;} /* ---- 板块标题：鎏金饰线 ---- */ .section-title h2{position:relative;color:var(--kld-title)!important;font-weight:800;letter-spacing:1px;} .section-title h2::after{content:'';display:block;width:74px;height:4px;margin:.85rem auto 0;border-radius:4px; background:linear-gradient(90deg,#c9a86a,#e6cf9a,#c9a86a);} .section-title p{color:#5b6b80;} /* ---- 卡片：圆角 + 精致阴影 + 鎏金描边 ---- */ .card,.product-card,.news-card,.case-card,.certificate-card,.stat-card,.feature-item,.brand-item{ border-radius:16px!important;border:1px solid rgba(226,232,240,.75); box-shadow:var(--kld-shadow)!important; transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease!important; } .card:hover,.product-card:hover,.news-card:hover,.case-card:hover,.certificate-card:hover,.stat-card:hover,.feature-item:hover,.brand-item:hover{ transform:translateY(-8px)!important;box-shadow:var(--kld-shadow-hover)!important; border-color:rgba(201,168,106,.6)!important; } .product-image,.news-image,.card-image,.case-image{overflow:hidden;} .product-image img,.news-image img,.card-image img,.case-image img{transition:transform .5s ease!important;} .product-card:hover .product-image img,.news-card:hover .news-image img,.card:hover .card-image img,.case-card:hover .case-image img{transform:scale(1.06)!important;} .product-content h3,.news-content h3,.card h3,.case-card h3{color:var(--kld-title)!important;font-weight:700;} .stat-number{ background:linear-gradient(135deg,#1e6fff,#0b3fa8); -webkit-background-clip:text;background-clip:text;color:transparent!important; } /* ---- 页脚：深海渐变 ---- */ footer{ background:linear-gradient(155deg,#071c36 0%,#0b1f4d 55%,#123a7a 100%)!important; border-top:3px solid rgba(201,168,106,.45)!important; } .footer-logo h3,footer h4{color:var(--kld-gold-light)!important;} .footer-links a:hover{color:var(--kld-gold-light)!important;} .footer-bottom{border-top:1px solid rgba(255,255,255,.12)!important;} /* ---- 表单控件 ---- */ .form-group input,.form-group textarea,.contact-form input,.contact-form textarea, .quote-form-container input,.quote-form-container textarea,.quote-form-container select, .search-box input{ background:#f8fafd;border:1px solid #dfe6f0!important;border-radius:10px!important; transition:border-color .3s,box-shadow .3s;color:var(--kld-body); } .form-group input:focus,.form-group textarea:focus,.contact-form input:focus,.contact-form textarea:focus, .quote-form-container input:focus,.quote-form-container textarea:focus,.quote-form-container select:focus{ background:#fff;border-color:var(--kld-blue)!important;box-shadow:0 0 0 4px rgba(30,111,255,.13)!important; } /* ---- 标签 / 分页 ---- */ .tag{border:1px solid rgba(30,111,255,.25);background:linear-gradient(135deg,rgba(30,111,255,.08),rgba(201,168,106,.10));color:var(--kld-blue-deep);font-weight:600;} .pagination li a{border-radius:8px!important;} .pagination li.active a,.pagination li a:hover{background:linear-gradient(135deg,#1e6fff,#0b3fa8)!important;border-color:transparent!important;color:#fff!important;} /* ---- 悬浮按钮 ---- */ .floating-btn{border-radius:14px!important;box-shadow:0 8px 22px rgba(10,37,64,.28)!important;} .floating-btn:hover{transform:scale(1.1) translateY(-2px)!important;} /* ---- 新闻/文章详情正文图片 ---- */ .news-content img,.article-content img,.news-detail img,.blog-content img{border-radius:12px;box-shadow:var(--kld-shadow);} /* ---- 图片质感增强（提升生成图层次） ---- */ .card-image img,.product-image img,.news-image img,.case-image img,.section-image img,.tech-image img{ filter:saturate(1.10) contrast(1.06) brightness(1.02); } .card-image,.case-image,.section-image,.tech-image{position:relative;} .card-image::after,.case-image::after,.section-image::after,.tech-image::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,37,64,.02) 0%,rgba(10,37,64,.16) 100%); border-radius:inherit; } /* ---- 面包屑 ---- */ .breadcrumb{color:#5b6b80;} .breadcrumb a{color:var(--kld-blue);} /* ---- 滚动条 ---- */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:#eef2f8;} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1e6fff,#0b3fa8);border-radius:8px;border:2px solid #eef2f8;} /* ---- 移动端微调 ---- */ @media (max-width:768px){ .banner{padding:3.6rem 0;} .banner h1{font-size:1.7rem;} .section-title h2{font-size:1.6rem;} } /* ---- Banner 实力数字徽章 ---- */ .banner-stats{ display:flex;justify-content:center;gap:2.2rem;margin-top:2.6rem;padding-top:1.8rem; border-top:1px solid rgba(230,207,154,.35);flex-wrap:wrap; } .banner-stat{display:flex;flex-direction:column;align-items:center;min-width:88px;} .banner-stat .bs-num{ font-size:2.1rem;font-weight:800;color:#e6cf9a;letter-spacing:1px;line-height:1.15; text-shadow:0 2px 18px rgba(0,0,0,.4); } .banner-stat .bs-label{font-size:.88rem;color:rgba(255,255,255,.86);margin-top:.4rem;letter-spacing:.5px;} @media (max-width:768px){ .banner-stats{gap:1.1rem;} .banner-stat .bs-num{font-size:1.5rem;} .banner-stat .bs-label{font-size:.75rem;} } /* ---- 主按钮光晕呼吸 ---- */ @keyframes kldBtnGlow{ 0%,100%{box-shadow:0 8px 22px rgba(30,111,255,.35);} 50%{box-shadow:0 8px 30px rgba(30,111,255,.55), 0 0 0 6px rgba(30,111,255,.10);} } .btn-primary{animation:kldBtnGlow 3.2s ease-in-out infinite;} /* ---- 页面背景微调：浅灰蓝过渡 ---- */ .section.bg-light,.bg-light{background:linear-gradient(180deg,#f5f8fd 0%,#eef3fa 100%);} /* ---- 内页顶部标题条优化 ---- */ .page-header,.page-banner{position:relative;overflow:hidden; background:radial-gradient(700px 300px at 20% -20%,rgba(56,189,248,.25),transparent 60%), linear-gradient(135deg,#0a2540,#0b1f4d 60%,#123a7a)!important; border-bottom:2px solid rgba(201,168,106,.5);} .page-header h1,.page-header .page-title,.page-banner h1{color:#fff!important;} .page-header p,.page-banner p{color:rgba(255,255,255,.85)!important;} .page-header .breadcrumb,.page-banner .breadcrumb{color:rgba(255,255,255,.85)!important;} .page-header .breadcrumb a,.page-banner .breadcrumb a{color:#e6cf9a!important;} /* ================= V3 国际化升级：Danfoss 风格 ================= */ /* ---- About Hero ---- */ .about-hero{position:relative;padding:5.5rem 0 5rem;overflow:hidden; background: radial-gradient(900px 420px at 82% -12%,rgba(56,189,248,.30),transparent 55%), radial-gradient(760px 420px at 8% 120%,rgba(30,111,255,.38),transparent 60%), linear-gradient(135deg,#071a35 0%,#0a2540 55%,#0f3460 100%); border-bottom:3px solid rgba(201,168,106,.55);} .about-hero::before{content:'';position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:58px 58px;} .about-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.03));} .about-hero .container{position:relative;z-index:1;} .about-hero-inner{text-align:center;} .about-hero-kicker{display:inline-block;color:#e6cf9a;font-weight:700;letter-spacing:4px;font-size:.82rem; text-transform:uppercase;padding-bottom:.7rem;border-bottom:1px solid rgba(230,207,154,.4);margin-bottom:1.4rem;} .about-hero h1{color:#fff;font-size:2.9rem;letter-spacing:2px;margin:0 0 1.1rem;font-weight:700;} .about-hero-sub{color:rgba(255,255,255,.85);font-size:1.1rem;letter-spacing:.5px;max-width:680px;margin:0 auto;} .about-hero-sub::after{content:'';display:block;width:72px;height:3px;margin:1.8rem auto 0;border-radius:2px; background:linear-gradient(90deg,#c9a86a,#e6cf9a);} /* ---- 公司简介分屏 ---- */ .about-split{display:grid;grid-template-columns:1.05fr 1fr;gap:3.6rem;align-items:center;} .about-eyebrow{color:#b08a4d;font-weight:700;letter-spacing:3px;font-size:.82rem;text-transform:uppercase;} .about-split-text h2{font-size:2.3rem;color:#0b1f4d;margin:.6rem 0 1.5rem;} .about-split-text h2::after{content:'';display:block;width:58px;height:3px;margin-top:12px;border-radius:2px; background:linear-gradient(90deg,#1e6fff,#c9a86a);} .about-split-text p{color:#56616e;line-height:1.95;margin-bottom:1rem;} .about-points{list-style:none;padding:0;margin:1.4rem 0 2rem;} .about-points li{padding-left:30px;position:relative;margin-bottom:.85rem;color:#2a3440;font-weight:500;} .about-points li::before{content:'✓';position:absolute;left:0;top:-1px;color:#1e6fff;font-weight:800;} .about-split-media{position:relative;min-height:440px;} .about-img-main{width:80%;height:400px;border-radius:16px;overflow:hidden; box-shadow:0 26px 64px rgba(10,37,64,.26);border:1px solid #eef2f8;} .about-img-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;} .about-img-main:hover img{transform:scale(1.04);} .about-img-stack{position:absolute;right:0;bottom:0;display:flex;gap:14px;} .about-img-stack img{width:122px;height:122px;border-radius:14px;object-fit:cover;display:block; box-shadow:0 18px 44px rgba(10,37,64,.3);border:3px solid #fff;} @media(max-width:900px){ .about-split{grid-template-columns:1fr;gap:2.4rem;} .about-split-media{min-height:auto;margin-top:.5rem;} .about-img-main{width:100%;height:320px;} .about-img-stack{position:static;margin-top:14px;} } /* ---- 数据统计条 ---- */ .about-stats{background:linear-gradient(135deg,#0a2540,#0f3460);padding:3.2rem 0; border-top:1px solid rgba(230,207,154,.22);border-bottom:1px solid rgba(230,207,154,.22);} .stats-grid{display:flex;justify-content:space-around;flex-wrap:wrap;gap:1.6rem;} .stat-item{display:flex;flex-direction:column;align-items:center;min-width:132px;position:relative;} .stat-item:not(:last-child)::after{content:'';position:absolute;right:-28px;top:16%;height:68%;width:1px; background:linear-gradient(180deg,transparent,rgba(230,207,154,.5),transparent);} .stat-num{font-size:2.7rem;font-weight:800;color:#e6cf9a;line-height:1.1;letter-spacing:1px;} .stat-label{color:rgba(255,255,255,.85);margin-top:.55rem;font-size:.95rem;letter-spacing:.5px;} @media(max-width:640px){.stat-item::after{display:none;}.stat-num{font-size:2rem;}} /* ---- 核心能力卡片 ---- */ .cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;} .cap-card{background:#fff;border-radius:16px;padding:2.1rem 1.7rem; box-shadow:0 10px 32px rgba(10,37,64,.08);border:1px solid #edf1f7;transition:all .3s ease;} .cap-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(10,37,64,.15); border-color:rgba(201,168,106,.6);} .cap-icon{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#0b1f4d,#1e6fff);color:#e6cf9a;margin-bottom:1.3rem;font-size:26px;} .cap-card h3{color:#0b1f4d;margin-bottom:.7rem;font-size:1.18rem;} .cap-card p{color:#5a6673;font-size:.93rem;line-height:1.75;margin:0;} @media(max-width:900px){.cap-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.cap-grid{grid-template-columns:1fr;}} /* ================= V4 移动端优化 ================= */ /* 裸 h1 标题条统一（contact/news/product-detail 等 header 直接兄弟的内页标题） */ .main-header + h1{ margin:0;padding:3.2rem 1.2rem;text-align:center;font-size:2.1rem;color:#fff; font-weight:700;letter-spacing:1px; background: radial-gradient(700px 320px at 82% -20%,rgba(56,189,248,.28),transparent 55%), linear-gradient(135deg,#0a2540,#0f3460); border-bottom:3px solid rgba(201,168,106,.55); } /* 移动端综合微调 */ @media (max-width:768px){ .about-hero{padding:3.4rem 0 3rem;} .about-hero h1{font-size:1.62rem;letter-spacing:1px;} .about-hero-sub{font-size:.98rem;} .about-hero-kicker{letter-spacing:3px;font-size:.74rem;} .main-header + h1{font-size:1.6rem;padding:2.4rem 1rem;letter-spacing:.5px;} .banner h1{font-size:1.5rem;} .banner-tagline{font-size:.95rem;} .about-points li{font-size:.93rem;} .about-split-text h2{font-size:1.7rem;} .stat-num{font-size:2.1rem;} .section-title h2{font-size:1.55rem;} .section-title p{font-size:.95rem;} .btn{padding:.6rem 1.1rem;font-size:.92rem;} .cap-card{padding:1.5rem 1.2rem;} .cap-icon{width:50px;height:50px;font-size:22px;} .container{padding-left:1rem;padding-right:1rem;} .about-img-stack img{width:96px;height:96px;} .about-img-main{height:280px;} .stats-grid{gap:1rem;} .stat-item{min-width:90px;} /* 产品详情表格窄屏横向滚动，避免撑破页面 */ .technical-specs table{display:block;width:100%;max-width:100%;overflow-x:auto;white-space:nowrap;} .technical-specs table thead{position:sticky;top:0;} } /* ========== 搜索框/语言切换移入顶部导航栏 ========== */ .header-tools{ display:flex; align-items:center; gap:14px; margin-left:auto; } .main-header .header-tools .search-box{ flex:0 1 auto; max-width:230px; min-width:160px; } .main-header .header-tools .search-box input{ padding:9px 14px !important; font-size:13px !important; border-radius:10px !important; border:1.5px solid #e2e8f0 !important; border-right:1.5px solid #e2e8f0 !important; background:#f8fafc !important; color:#1d2939 !important; min-width:unset !important; width:100%; } .main-header .header-tools .search-box input::placeholder{color:#94a3b8 !important;} .main-header .header-tools .search-box input:focus{ background:#ffffff !important; border-color:#165DFF !important; box-shadow:0 0 0 3px rgba(22,93,255,0.08) !important; } /* 白色导航栏上的语言切换 */ .main-header .header-tools .lang-switcher{ background:#f1f5f9; padding:4px; border-radius:20px; } .main-header .header-tools .lang-switcher a{ color:#64748b; padding:5px 13px; font-size:13px; font-weight:500; border-radius:16px; transition:all .25s ease; } .main-header .header-tools .lang-switcher a:hover{ color:#1e40af; background:rgba(30,64,175,0.08); } .main-header .header-tools .lang-switcher a.active{ background:linear-gradient(135deg,#165DFF,#0e42d2); color:#ffffff; font-weight:600; } /* 在线询价按钮与工具区间距 */ .main-header .nav-actions{margin-left:0;} /* 平板及手机端：隐藏header内搜索与语言切换（沿用移动端菜单内的语言切换） */ @media (max-width:1024px){ .main-header .header-tools{display:none !important;} } /*nav_readability_marker*/ /* ========== 导航菜单 & 面包屑可读性强化（对标 Danfoss 清晰风格） ========== */ /* 顶级菜单：近黑色、加粗、清晰有力 */ .main-nav > ul > li > a{ color:#0f172a; font-weight:600; letter-spacing:.2px; } .main-nav > ul > li > a:hover{color:var(--primary-color);} .main-nav > ul > li > a.active{color:var(--primary-color);} /* 下拉子菜单：次级文字保持常规，不与顶级菜单抢视觉 */ .main-nav .dropdown-menu a{color:#334155 !important;font-weight:500 !important;} .main-nav .dropdown-menu a:hover{color:var(--primary-color) !important;} /* 面包屑：分隔符柔和、当前页清晰可见 */ .breadcrumb{color:#64748b !important;font-weight:400;} .breadcrumb span{color:#94a3b8 !important;} .breadcrumb span.current, .breadcrumb span:last-child{color:#334155 !important;font-weight:500;} .breadcrumb a{color:var(--primary-color);font-weight:500;} /* 若面包屑位于深色 Banner 内，保持浅色可读 */ .page-banner .breadcrumb{color:rgba(255,255,255,.88) !important;} .page-banner .breadcrumb span, .page-banner .breadcrumb span.current, .page-banner .breadcrumb span:last-child{color:rgba(255,255,255,.75) !important;} .page-banner .breadcrumb a{color:#e6cf9a !important;} /*bc_layer_marker*/ /* ========== 面包屑分层：收进页面 Banner 内（对标 Danfoss 分层） ========== */ .page-banner .breadcrumb{ text-align:center !important; padding:0 0 14px !important; margin:0 0 4px !important; font-size:13.5px !important; letter-spacing:.3px; display:flex !important; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; } .page-banner .breadcrumb a, .page-banner .breadcrumb span{ display:inline-block; margin:0 2px; } .page-banner .breadcrumb a{ transition:opacity .2s; } .page-banner .breadcrumb a:hover{opacity:.78;} .page-banner h1{margin-top:2px;} /* 无 Banner 的普通内容页面包屑：统一轻量分层（左对齐于内容容器、柔和小字） */ .breadcrumb{font-size:13.5px;letter-spacing:.2px;} /*dual_nav_marker*/ /* ========== 双层导航：品牌/工具层 + 菜单层（对标 Danfoss 分层） ========== */ .main-header .container{ flex-wrap:wrap !important; row-gap:4px; } .main-header .header-logo{order:1 !important;} .main-header .header-tools{order:2 !important;margin-left:auto !important;} .main-header .nav-actions{order:3 !important;} .main-header .main-nav{ order:4 !important; flex:0 0 100% !important; justify-content:center !important; border-top:1px solid #e8edf3; padding-top:10px; margin-top:2px; } .main-header .main-nav ul{justify-content:center !important;gap:6px !important;} .main-header .main-nav > ul > li > a{ padding:10px 20px !important; font-size:15px !important; } /* 菜单选中态：蓝色下划线加粗（已由全局规则负责），此处强化间距层次 */ /* 移动端：汉堡菜单保持原有行为，两层结构不适用 */ @media (max-width:1024px){ .main-header .container{flex-wrap:nowrap !important;} .main-header .main-nav{display:none !important;} } /*search_icon_marker*/ /* ========== 搜索框放大镜图标（补回） ========== */ .main-header .header-tools .search-box{position:relative !important;} .main-header .header-tools .search-box::before{ content:''; position:absolute; left:13px;top:50%; transform:translateY(-50%); width:15px;height:15px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.2' y2='16.2'/%3E%3C/svg%3E") no-repeat center/contain; opacity:.7; z-index:1; pointer-events:none; } .main-header .header-tools .search-box input{padding-left:36px !important;} /* ===== 产品规格表统一样式（2026-09-17 全站修复：此前所有详情页规格表无边框、数据不居中）===== */ .specs-table, .spec-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: 0.95rem; line-height: 1.5; background: #ffffff; } .specs-table th, .specs-table td, .spec-table th, .spec-table td { border: 1px solid #dde3ea; padding: 10px 14px; text-align: center; vertical-align: middle; } .specs-table thead th, .spec-table thead th { background-color: #1e40af; color: #ffffff; font-weight: 600; white-space: nowrap; } .specs-table tbody tr:nth-child(even) td, .spec-table tbody tr:nth-child(even) td { background-color: #f7f9fc; } .specs-table tbody tr:hover td, .spec-table tbody tr:hover td { background-color: #eef2ff; } .specs-table td:first-child, .spec-table td:first-child { font-weight: 500; } .specs-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .specs-table, .spec-table { font-size: 0.85rem; } .specs-table th, .specs-table td, .spec-table th, .spec-table td { padding: 8px 6px; } }