/* AVCO Medical Cart Website Styles */ :root{--primary:#00C8F0;--primary-light:#00E5FF;--primary-dark:#0077B6;--accent:#00E5FF;--text:#E8EDF5;--text-light:#B8C4D4;--text-muted:#6B7A8E;--bg:#080C14;--bg-light:#0D1520;--bg-secondary:#0F1A28;--bg-card:#111C2D;--bg-hover:#162035;--border:#1A2740;--radius:12px;--shadow:0 4px 20px rgba(0,0,0,0.4);--shadow-lg:0 8px 36px rgba(0,0,0,0.5);font-family:'Noto Sans SC','Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} html{scroll-behavior:smooth} [id]{scroll-margin-top:110px} body{color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .container{max-width:1240px;margin:0 auto;padding:0 24px} /* Header */ .header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#0A0E1A;border-bottom:1px solid rgba(255,255,255,0.06);box-shadow:0 2px 20px rgba(0,0,0,0.3)} .header-inner{height:100px;display:flex;align-items:center;gap:32px} .logo{display:flex;align-items:center;flex-shrink:0} .logo-icon{display:flex;align-items:center;gap:8px} .logo-icon img{height:70px;width:auto} .nav{display:flex;align-items:center;gap:4px;flex:1} .nav-link{padding:10px 14px;font-size:15px;font-weight:500;color:rgba(255,255,255,0.8);border-radius:8px;transition:all 0.2s;white-space:nowrap} .nav-link:hover,.nav-link.active,.nav-link.spy-active{color:#fff;background:#0077B6} .lang-switch{display:flex;align-items:center;gap:6px;flex-shrink:0} .lang-btn{background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:rgba(255,255,255,0.6);padding:4px 8px;border-radius:6px;transition:all 0.2s} .lang-btn:hover,.lang-btn.active{color:#fff;background:rgba(255,255,255,0.12)} .lang-divider{color:rgba(255,255,255,0.2)} .mobile-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none} .mobile-toggle span{width:22px;height:2px;background: var(--bg)border-radius:2px;transition:all 0.3s} /* Hero Carousel */ .hero-carousel{position:relative;margin-top:100px;height:520px;overflow:hidden;background:transparent!important} .carousel-slides{position:relative;width:100%;height:100%} .carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:1} .carousel-slide.active{display:block} .slide-bg{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;padding-right:60px;background:transparent!important} .slide-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0.85;z-index:1} .slide-content{position:relative;z-index:2;display:flex;align-items:center;height:520px;padding-top:40px;background:transparent} .slide-content::before{content:'';position:absolute;top:0;left:-60px;width:55%;height:100%;background:linear-gradient(to right,rgba(13,27,42,0.97),rgba(13,27,42,0.85));z-index:-1} .hero-badge{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:13px;font-weight:600;padding:6px 16px;border-radius:20px;margin-bottom:20px;letter-spacing:0.5px} .hero-title{font-size:48px;font-weight:800;line-height:1.2;color:#fff;margin-bottom:20px;text-shadow:0 4px 12px rgba(0,0,0,0.5)} .hero-title .highlight{color:var(--primary-light)} .hero-desc{font-size:18px;color:rgba(255,255,255,0.9);margin-bottom:32px;max-width:560px;line-height:1.7;text-shadow:0 2px 8px rgba(0,0,0,0.4)} .hero-actions{display:flex;gap:16px} .btn{padding:12px 28px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s;border:2px solid transparent;display:inline-flex;align-items:center;gap:8px} .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-color:var(--primary)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,119,182,0.35)} .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.5)} .btn-outline:hover{background:rgba(255,255,255,0.1);border-color:#fff} .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background: var(--bg)border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:all 0.2s} .carousel-arrow:hover{background: var(--bg)transform:translateY(-50%) scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,0.25)} .carousel-prev{left:24px}.carousel-next{right:24px} .carousel-nav{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10} .carousel-nav{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10} .carousel-nav-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.4);border:none;cursor:pointer;transition:all 0.3s} .carousel-nav-dot:hover{background:rgba(255,255,255,0.7)} .carousel-nav-dot.active{background: var(--bg)width:28px;border-radius:5px} /* Stats Bar */ .stats-bar{background:#0A0E1A;border-bottom:1px solid rgba(255,255,255,0.06);padding:0;box-shadow:0 2px 12px rgba(0,0,0,0.15)} .hero-stats{display:flex;align-items:center;justify-content:center;padding:28px 0;gap:0} .stat-item{display:flex;flex-direction:column;align-items:center;padding:0 48px} .stat-num{font-size:36px;font-weight:800;color:#00B4D8;font-family:'Inter',sans-serif;line-height:1} .stat-label{font-size:14px;color:rgba(255,255,255,0.7);margin-top:4px;font-weight:500} .stat-divider{width:1px;height:40px;background:rgba(255,255,255,0.15)} /* Sections */ .section{padding:80px 0;background:var(--bg)} .section-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:48px;position:relative} .section-header .section-tag{grid-column:1/-1;justify-self:center;margin-bottom:4px} .section-header .section-title{text-align:right;margin-bottom:0} .section-header .section-title::after{margin:14px auto 0 0} .section-header .section-desc{text-align:left;margin:0} .section-header::before{content:'';display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:2px;background:linear-gradient(90deg,transparent,#0077B6,transparent);border-radius:1px} .section-tag{display:inline-block;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;font-size:11px;font-weight:800;padding:6px 20px;border-radius:20px;margin-bottom:18px;letter-spacing:2px;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,119,182,0.3)} .section-title{font-size:36px;font-weight:900;background:linear-gradient(135deg,var(--text),#1E293B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;position:relative;display:inline-block;letter-spacing:-0.5px;line-height:1.3} .section-title::after{content:'';display:block;width:60px;height:3px;background:linear-gradient(90deg,#0077B6,#00B4D8);border-radius:2px;margin:14px auto 0;transition:width 0.3s ease} .section-title:hover::after{width:90px} .section-desc{font-size:16px;color:var(--text-muted);max-width:420px;line-height:1.7;font-weight:400} /* Product Grid */ /* Product Grid �?3 columns, fully responsive */ .product-grid{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .product-card{ background: var(--bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); transition: all 0.3s; position: relative; display: flex; flex-direction: column; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 0%; /* Grid items shrink/grow equally to fill 3 columns */ } .product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .card-img-wrap{ position: relative; height: 260px; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; cursor: pointer; flex-shrink: 0; } .card-img-stack{ position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .card-img-stack img{ position: absolute; max-width: 100%; max-height: 220px; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity 0.4s ease; } .card-img-stack img.active{opacity:1;z-index:1} .card-num{ position: absolute; top: 12px; left: 16px; font-size: 48px; font-weight: 800; color: rgba(0,119,182,0.08); font-family: 'Inter', sans-serif; line-height: 1; pointer-events: none; z-index: 0; } .card-body{ padding: 24px; flex: 1; display: flex; flex-direction: column; } .card-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px} .card-sub{font-size:14px;color:var(--text-muted);margin-bottom:16px} .card-tags{display:flex;flex-wrap:wrap;gap:8px} .tag{display:inline-block;background:var(--bg-light);color:var(--text-light);font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;border:1px solid var(--border);transition:all 0.2s} .tag-link .tag:hover{background:var(--primary);color:#fff;border-color:var(--primary);cursor:pointer} .tag-link{transition:all 0.3s ease;position:relative} .tag-link.active{background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff!important;transform:scale(1.05);box-shadow:0 4px 15px rgba(0,119,182,0.4);border-color:transparent!important} .tag-link.active .tag{color:#fff!important;font-weight:700;background:transparent!important;border-color:transparent!important} /* Sub-product background highlight */ .card-img-wrap .main-img[src*="/sub/"]{background:linear-gradient(135deg,#F0F7FF,rgba(0,200,240,0.12))!important;padding:12px!important;border-radius:8px!important} .card-img-wrap:hover .main-img{transform:scale(1.08)} .card-img-wrap::after{content:attr(data-hint);position:absolute;bottom:6px;right:10px;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;padding:2px 8px;border-radius:4px;opacity:0;transition:opacity 0.3s} .card-img-wrap:hover::after{opacity:1} .card-img-stack img.active{opacity:1;z-index:1} .card-img-wrap .main-img{transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);background:transparent;border-radius:8px} .card-img-wrap .main-img[src*="/sub/"]{background:linear-gradient(135deg,#F0F7FF,rgba(0,200,240,0.12));padding:12px} .card-img-wrap:hover .main-img{transform:scale(1.15);filter:drop-shadow(0 8px 24px rgba(0,119,182,0.2))} .card-img-wrap::after{content:attr(data-hint);position:absolute;bottom:6px;right:10px;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;padding:2px 8px;border-radius:4px;opacity:0;transition:opacity 0.3s} .card-img-wrap:hover::after{opacity:1} /* About Section */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} .about-text .section-tag{margin-bottom:12px} .about-text .section-title{margin-bottom:20px;text-align:left} .about-text .section-title::after{margin:14px 0 0} .about-text>p{color:var(--text-light);line-height:1.6;margin-bottom:16px;font-size:14px} .about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .about-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .about-feat{display:flex;align-items:flex-start;gap:14px;padding:16px;background:var(--bg-light);border-radius:10px;border:1px solid var(--border)} .about-feat-icon{flex-shrink:0;width:44px;height:44px;background: var(--bg)border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.3)} .about-feat-text h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px} .about-feat-text p{font-size:13px;color:var(--text-muted)} .about-nums{display:grid;grid-template-columns:1fr 1fr;gap:20px} .about-num-item{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:var(--radius);padding:28px 24px;text-align:center;border:1px solid rgba(0,119,182,0.1);transition:all 0.3s;position:relative;overflow:hidden} .about-num-item:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,119,182,0.15)} .about-num-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light))} .about-num-icon{margin-bottom:12px} .about-num{font-size:40px;font-weight:800;color:var(--primary);font-family:'Inter',sans-serif;line-height:1;margin-bottom:6px} .about-num-label{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px} .about-num-sub{font-size:13px;color:var(--text-muted)} /* Solutions / Flow Steps */ .flow-steps{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap} .flow-step{text-align:center;padding:24px 32px;flex:1;min-width:160px} .flow-num{width:56px;height:56px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:18px;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:'Inter',sans-serif} .flow-step h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px} .flow-step p{font-size:14px;color:var(--text-muted)} .flow-arrow{padding:0 8px;flex-shrink:0} /* Manufacturing Grid */ .mfg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .mfg-card{background:var(--bg);border-radius:var(--radius);padding:28px 20px;text-align:center;border:1px solid var(--border);transition:all 0.3s} .mfg-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,119,182,0.1)} .mfg-icon{width:64px;height:64px;background:linear-gradient(135deg,rgba(0,119,182,0.08),rgba(0,180,216,0.08));border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .mfg-card h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px} .mfg-card p{font-size:13px;color:var(--text-muted)} /* Configurator */ .config-wrapper{background:var(--bg-light);border-radius:16px;padding:40px;border:1px solid var(--border)} .config-layout{display:grid;grid-template-columns:1fr 280px;gap:32px} .config-options-area{display:flex;flex-direction:column;gap:24px} .config-options-group h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px} .config-options{display:flex;flex-wrap:wrap;gap:10px} .config-card{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--bg);border:2px solid var(--border);border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;color:#E8EDF5;transition:all 0.25s ease;box-shadow:0 1px 3px rgba(0,0,0,0.04)} .config-card:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,119,182,0.1)} .config-card.active{background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;border-color:transparent;box-shadow:0 4px 15px rgba(0,119,182,0.3);transform:translateY(-1px)} .config-card.active svg{stroke:#fff!important} .config-card.active svg circle[fill],.config-card.active svg rect[fill],.config-card.active svg path[fill]{fill:#fff!important} .config-card svg{flex-shrink:0;transition:all 0.2s} .config-card-text{flex:1;line-height:1.3} .config-preview{background:var(--bg);border-radius:12px;padding:28px;border:1px solid var(--border);height:fit-content} .config-preview h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px} #configSummaryText{font-size:15px;color:var(--primary);font-weight:600;margin-bottom:24px;line-height:1.6;min-height:60px;padding:12px;background:var(--bg-light);border-radius:8px} .config-preview .btn{width:100%;justify-content:center;margin-bottom:12px} /* News Preview */ .news-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .news-preview-card{background:var(--bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);transition:all 0.3s} .news-preview-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .news-img-placeholder{height:180px;background:linear-gradient(135deg,#0077B6,#00C8F0);display:flex;align-items:center;justify-content:center} .news-preview-body{padding:24px} .news-preview-date{font-size:13px;color:var(--text-muted);margin-bottom:8px;display:block} .news-preview-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-preview-excerpt{font-size:14px;color:var(--text-muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Contact */ .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start} .contact-info{display:flex;flex-direction:column;gap:24px} .contact-item{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--bg-light);border-radius:12px;border:1px solid var(--border)} .contact-icon{width:48px;height:48px;background:linear-gradient(135deg,rgba(0,119,182,0.1),rgba(0,180,216,0.1));border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-item h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px} .contact-item p{font-size:14px;color:var(--text-light)} .contact-form{background:var(--bg-light);border-radius:16px;padding:36px;border:1px solid var(--border)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-group{margin-bottom:20px} .form-group label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px} .form-group input,.form-group textarea{width:100%;padding:12px 16px;background:var(--bg);border:2px solid var(--border);border-radius:10px;font-size:15px;color:var(--text);transition:all 0.2s;font-family:inherit} .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,119,182,0.1)} .form-group textarea{resize:vertical;min-height:120px} .contact-form .btn{width:100%;justify-content:center;margin-top:8px;padding:14px} /* Footer */ .footer{background:#0A0E1A;color:#fff;padding:64px 0 0} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.1)} .footer-logo-img{height:70px;width:auto;margin-bottom:16px;opacity:0.9} .footer-desc{font-size:14px;line-height:1.7;opacity:0.85} .footer-links h4,.footer-contact h4{color:#fff;font-size:16px;font-weight:700;margin-bottom:20px} .footer-links ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-links a{font-size:14px;opacity:0.8;transition:opacity 0.2s} .footer-links a:hover{opacity:1} .footer-contact p{font-size:14px;opacity:0.85;margin-bottom:8px} .footer-bottom{text-align:center;padding:24px 0;font-size:13px;opacity:0.7} /* Scroll animations */ .section{opacity:0;transform:translateY(30px);transition:all 0.6s ease} .section.visible{opacity:1;transform:translateY(0)} /* Fade up animation for cards */ @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .product-card:nth-child(1){animation-delay:0s} .product-card:nth-child(2){animation-delay:0.1s} .product-card:nth-child(3){animation-delay:0.2s} .product-card:nth-child(4){animation-delay:0.3s} .product-card:nth-child(5){animation-delay:0.4s} .product-card:nth-child(6){animation-delay:0.5s} .visible .product-card{animation:fadeUp 0.5s ease both} .visible .mfg-card{animation:fadeUp 0.4s ease both} .visible .mfg-card:nth-child(1){animation-delay:0s} .visible .mfg-card:nth-child(2){animation-delay:0.05s} .visible .mfg-card:nth-child(3){animation-delay:0.1s} .visible .mfg-card:nth-child(4){animation-delay:0.15s} .visible .mfg-card:nth-child(5){animation-delay:0.2s} .visible .mfg-card:nth-child(6){animation-delay:0.25s} .visible .mfg-card:nth-child(7){animation-delay:0.3s} .visible .mfg-card:nth-child(8){animation-delay:0.35s} /* Section background overrides */ #configurator.section.configurator-section{background:var(--bg-secondary) !important} #news-preview.section.news-preview-section{background:var(--bg) !important} /* Back to Top Button */ /* ========== 会员系统样式 ========== */ /* 登录按钮 */ .auth-header{display:flex;align-items:center;position:relative;margin-left:12px} .auth-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.25);border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s;white-space:nowrap;font-family:inherit} .auth-btn:hover{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.4);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,119,182,0.35)} .auth-btn svg{width:16px;height:16px;flex-shrink:0} /* 用户下拉菜单 */ .user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background: var(--bg)border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,0.15);min-width:200px;z-index:1001;overflow:hidden;animation:dropIn 0.2s ease} @keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .user-dropdown-header{padding:16px;background:linear-gradient(135deg,#0a1628,#023E8A);color:#fff} .user-dropdown-name{display:block;font-size:15px;font-weight:700} .user-dropdown-role{display:block;font-size:12px;opacity:0.8;margin-top:2px} .user-dropdown-item{display:flex;align-items:center;gap:10px;padding:12px 16px;color:#1E293B;text-decoration:none;font-size:14px;transition:background 0.15s;cursor:pointer} .user-dropdown-item:hover{background:#F1F5F9} .user-dropdown-item.logout{color:#EF4444;border-top:1px solid #E2E8F0} .user-dropdown-item svg{width:16px;height:16px;flex-shrink:0} /* 登录弹窗 */ .auth-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center} .auth-modal-overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)} .auth-modal-content{position:relative;background: var(--bg)border-radius:20px;width:420px;max-width:90vw;max-height:90vh;overflow-y:auto;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:modalSlideUp 0.3s ease} @keyframes modalSlideUp{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}} .auth-modal-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:28px;color:#94A3B8;cursor:pointer;z-index:1;line-height:1} .auth-modal-close:hover{color:#1E293B} .auth-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:2px solid #E2E8F0} .auth-tab{padding:12px 24px;background:none;border:none;font-size:15px;font-weight:600;color:#94A3B8;cursor:pointer;position:relative;transition:color 0.2s;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-2px} .auth-tab.active{color:#0077B6;border-bottom-color:#0077B6} .auth-tab:hover{color:#0077B6} .auth-form h3{font-size:22px;font-weight:800;color:var(--text);margin:0 0 4px} .auth-form-sub{color:#64748B;font-size:14px;margin:0 0 24px} .auth-form-group{margin-bottom:16px} .auth-form-group label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px} .auth-form-group input{width:100%;padding:12px 14px;border:2px solid #E2E8F0;border-radius:10px;font-size:14px;transition:border-color 0.2s;outline:none;box-sizing:border-box;font-family:inherit;color:var(--text)} .auth-form-group input:focus{border-color:#0077B6;box-shadow:0 0 0 3px rgba(0,119,182,0.1)} .auth-form-group input::placeholder{color:#94A3B8} .auth-form-error{color:#EF4444;font-size:13px;min-height:20px;margin-bottom:8px} .auth-submit-btn{width:100%;padding:14px;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit} .auth-submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,119,182,0.35)} .auth-spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} /* 下载中心弹窗 */ .download-panel{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center} .download-overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)} .download-content{position:relative;background: var(--bg)border-radius:20px;width:700px;max-width:90vw;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:modalSlideUp 0.3s ease} .download-header{padding:24px 28px;border-bottom:1px solid #E2E8F0;position:relative} .download-header h2{font-size:22px;font-weight:800;color:var(--text);margin:0} .download-subtitle{font-size:14px;color:#64748B;margin:4px 0 0} .download-close{position:absolute;top:24px;right:24px;background:none;border:none;font-size:28px;color:#94A3B8;cursor:pointer;line-height:1} .download-close:hover{color:#1E293B} .download-categories{display:flex;gap:8px;padding:16px 28px;border-bottom:1px solid #E2E8F0;flex-wrap:wrap} .download-cat{padding:8px 18px;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:20px;font-size:13px;color:#475569;cursor:pointer;transition:all 0.2s;font-family:inherit;font-weight:500} .download-cat.active,.download-cat:hover{background:#0077B6;color:#fff;border-color:#0077B6} .download-list{padding:16px 28px 28px} .download-loading{text-align:center;padding:40px;color:#94A3B8} .download-loading .auth-spinner{margin:0 auto 12px;border-color:rgba(0,119,182,0.2);border-top-color:#0077B6} .download-item{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid #E2E8F0;border-radius:12px;margin-bottom:12px;transition:all 0.2s} .download-item:hover{border-color:#0077B6;box-shadow:0 2px 12px rgba(0,119,182,0.08)} .download-item-icon{width:48px;height:48px;background:#F0F9FF;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .download-item-icon svg{width:24px;height:24px;fill:#0077B6} .download-item-info{flex:1;min-width:0} .download-item-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px} .download-item-desc{font-size:13px;color:#64748B;margin-bottom:4px} .download-item-meta{display:flex;gap:12px;font-size:12px;color:#94A3B8} .download-item-btn{padding:10px 20px;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap;font-family:inherit} .download-item-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,119,182,0.3)} .download-item-btn.downloaded{background:#E2E8F0;color:#94A3B8;cursor:default} /* 个人面板 */ .profile-body{padding:28px} .profile-body .auth-form-group{margin-bottom:20px} .profile-body input[disabled]{color:#94A3B8} /* Responsive */ @media(max-width:1024px){ .product-grid{grid-template-columns:repeat(2,1fr)!important} .mfg-grid,.news-preview-grid{grid-template-columns:repeat(2,1fr)} .about-grid{grid-template-columns:1fr;gap:40px} .config-layout{grid-template-columns:1fr} .flow-steps{flex-direction:column;gap:16px} .flow-arrow{transform:rotate(90deg)} } @media(max-width:768px){ .slide-content{padding:20px 16px;height:auto;min-height:440px} .hero-title{font-size:32px} .hero-carousel{height:440px} .slide-content{height:440px} .product-grid{grid-template-columns:1fr!important} .mfg-grid,.news-preview-grid{grid-template-columns:1fr} .hero-stats{flex-wrap:wrap;gap:16px} .stat-item{padding:0 24px} .contact-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:24px} .nav{position:fixed;top:100px;left:0;right:0;background:#0A0E1A;flex-direction:column;padding:16px;box-shadow:0 4px 20px rgba(0,0,0,0.4);transform:translateY(-100%);opacity:0;pointer-events:none;transition:all 0.3s;z-index:999} .nav.open{transform:translateY(0);opacity:1;pointer-events:all} .nav-link{width:100%;padding:12px 16px} .mobile-toggle{display:flex} .form-row{grid-template-columns:1fr} .about-features{grid-template-columns:1fr} .about-nums{grid-template-columns:1fr 1fr} .section{padding:48px 0} .section-header{grid-template-columns:1fr;gap:16px;text-align:center} .section-header .section-title{text-align:center} .section-header .section-title::after{margin:14px auto 0} .section-header .section-desc{text-align:center;max-width:100%} .section-title{font-size:28px} .config-wrapper{padding:24px} .auth-header .auth-btn span{display:none} .auth-header .auth-btn{padding:8px 10px} .auth-modal-content{padding:24px 20px} .download-content{max-height:90vh} .download-categories{padding:12px 16px} .download-list{padding:12px 16px} .download-item{flex-wrap:wrap} .download-item-btn{width:100%} } @media(max-width:480px){ .hero-title{font-size:26px} .hero-actions{flex-direction:column} .hero-actions .btn{width:100%;justify-content:center} .stat-item{padding:0 16px} .about-nums{grid-template-columns:1fr} } /* OEM Flow Section */ .oem-flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin:40px 0} .oem-step{flex:1;min-width:160px;max-width:220px;text-align:center;padding:24px 16px} .oem-step-num{display:inline-block;width:52px;height:52px;line-height:52px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:18px;font-weight:900;border-radius:50%;margin-bottom:14px} .oem-step h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px} .oem-step p{font-size:13px;color:var(--text-muted);line-height:1.5} .oem-arrow{color:var(--primary);font-size:20px;opacity:0.5;padding:0 8px;flex-shrink:0} @media(max-width:768px){ .oem-flow{gap:16px} .oem-arrow{display:none} .oem-step{max-width:100%} } /* Advantages Grid */ .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px} .adv-card{background: var(--bg)border-radius:var(--radius);padding:32px 24px;box-shadow:var(--shadow);transition:all 0.3s;border:1.5px solid transparent} .adv-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-lg)} .adv-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(0,200,240,0.15),rgba(0,229,255,0.08));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px;color:var(--primary)} .adv-card h3{font-size:18px;font-weight:700;color:var(--text);margin-bottom:10px} .adv-card p{font-size:14px;color:var(--text-muted);line-height:1.7} @media(max-width:900px){ .adv-grid{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .adv-grid{grid-template-columns:1fr} } /* ========== 视频展示�?========== */ .video-tabs { display: flex; justify-content: center; gap: 12px; margin: 24px 0 40px; flex-wrap: wrap; } .video-tab { padding: 10px 28px; border: 1.5px solid #ddd; border-radius: 24px; background: var(--bg); font-size: 15px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.3s; } .video-tab:hover { border-color: var(--primary); color: var(--primary); } .video-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .video-card { background: var(--bg); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); cursor: pointer; transition: all 0.3s; border: 1.5px solid transparent; } .video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.14); border-color: var(--primary); } .video-thumb { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: var(--bg-card); overflow: hidden; } .video-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .video-card:hover .video-overlay { opacity: 1; } .play-btn { width: 56px; height: 56px; background: rgba(0, 200, 240, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; } .video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px; } .video-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 40px; gap: 8px; } .video-placeholder span { font-size: 13px; opacity: 0.8; } .video-info { padding: 16px; } .video-tag { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; margin-bottom: 8px; } .video-tag.product { background: #e8f5e9; color: #2e7d32; } .video-tag.company { background: #e3f2fd; color: #1565c0; } .video-info h3 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; line-height: 1.4; } .video-info p { font-size: 13px; color: #888; margin: 0; line-height: 1.5; } /* Video CTA */ .video-cta { text-align: center; margin-top: 16px; padding: 32px; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%); border-radius: 12px; border: 1px solid var(--border); } .video-cta p { font-size: 15px; color: var(--text-light); margin: 0 0 16px; } .video-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: 24px; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.3s; } .video-cta-btn:hover { background: linear-gradient(135deg, var(--primary-light), var(--primary)); transform: translateY(-2px); } /* Video Modal / Lightbox */ .video-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.88); z-index: 9999; align-items: center; justify-content: center; } .video-modal.active { display: flex; } .video-modal-content { position: relative; width: 90%; max-width: 900px; } .video-modal-close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 8px; } .video-modal-close:hover { color: #ff6b9d; } #videoPlayerContainer { width: 100%; padding-top: 56.25%; position: relative; background: #000; } #videoPlayerContainer iframe, #videoPlayerContainer video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Section subtitle */ .section-subtitle { text-align: center; color: #999; font-size: 15px; margin-top: -16px; margin-bottom: 0; } /* Responsive */ @media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } .video-tabs { gap: 8px; } .video-tab { padding: 8px 18px; font-size: 14px; } } /* ===== 增强产品卡片样式 ===== */ .product-card { background: var(--bg); border-radius: 16px; border: 1.5px solid #eef2f8; box-shadow: 0 2px 12px rgba(0,0,0,0.3); transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; } .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); opacity: 0; transition: opacity 0.3s; } .product-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,119,182,0.18); border-color: var(--primary); } .product-card:hover::before { opacity: 1; } /* 卡片图片区域 */ .card-img-wrap { position: relative; height: 280px !important; background: linear-gradient(160deg, #f8fbff 0%, #eef6ff 100%) !important; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px !important; } .card-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s; border-radius: 8px; } .product-card:hover .card-img-wrap img { transform: scale(1.1); filter: drop-shadow(0 8px 24px rgba(0,119,182,0.2)); } /* 类别标签角标 */ .card-badge { position: absolute; top: 16px; left: 16px; background: linear-gradient(135deg, var(--primary), var(--primary)); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px; z-index: 2; box-shadow: 0 2px 8px rgba(0,119,182,0.35); } .card-badge i { margin-right: 4px; font-size: 10px; } /* 卡片内容�?*/ .card-body { padding: 20px 22px 24px !important; flex: 1; display: flex; flex-direction: column; } .card-title { font-size: 18px !important; font-weight: 800 !important; color: #1a2a3e !important; margin-bottom: 6px !important; letter-spacing: -0.3px; line-height: 1.3; } .card-sub { font-size: 13.5px !important; color: #8a9baf !important; margin: 0 0 14px !important; display: flex; align-items: center; gap: 6px; } .card-sub::before { content: ''; display: inline-block; width: 16px; height: 2px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 2px; flex-shrink: 0; } .card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; } .tag { display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: 20px; background: #f0f7ff; color: #0077b6; font-weight: 600; border: 1px solid #d0e8ff; transition: all 0.2s; } .tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* 卡片底部箭头 */ .card-arrow { display: flex; align-items: center; justify-content: flex-end; margin-top: 16px; color: var(--primary); font-size: 13px; font-weight: 600; opacity: 0; transform: translateX(-8px); transition: all 0.3s; } .product-card:hover .card-arrow { opacity: 1; transform: translateX(0); } .card-arrow i { margin-left: 6px; transition: transform 0.3s; } .product-card:hover .card-arrow i { transform: translateX(4px); } /* 自动轮播滑入效果 */ .card-img-stack img{transition:opacity 0.5s ease,transform 0.5s ease;transform:scale(1)} .card-img-stack img:not(.active){transform:scale(0.95);opacity:0} .card-img-stack img.active{transform:scale(1);opacity:1} /* 产品数量标签 */ .product-count { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.9); color: var(--primary); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); z-index: 2; } /* 响应�?*/ @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .card-img-wrap { height: 200px !important; } } @media (max-width: 600px) { .product-grid { grid-template-columns: 1fr !important; } .card-img-wrap { height: 180px !important; } .card-title { font-size: 16px !important; } }:root { --primary:#00C8F0; --primary-light:#33D4F5; --primary-dark:#0099BF; --accent:#00E5FF; --text:#E8ECF1; --text-light:#B8C4D0; --text-muted:#6B7A8C; --bg:#0B0F1A; --bg-secondary:#111827; --bg-card:#161D2E; --bg-light:#1C2333; --bg-hover:#242D42; --border:#2A3347; --border-light:#343F56; --radius:14px; --radius-sm:8px; --shadow:0 4px 24px rgba(0,0,0,0.4); --shadow-lg:0 8px 48px rgba(0,0,0,0.5); --shadow-glow:0 0 30px rgba(0,200,240,0.15); } :root{--primary:#00C8F0;--primary-light:#00E5FF;--primary-dark:#0077B6;--accent:#00E5FF;--text:#E8EDF5;--text-light:#B8C4D4;--text-muted:#6B7A8E;--bg:#080C14;--bg-light:#0D1520;--bg-secondary:#0F1A28;--bg-card:#111C2D;--bg-hover:#162035;--border:#1A2740;--radius:12px;--shadow:0 4px 20px rgba(0,0,0,0.4);--shadow-lg:0 8px 36px rgba(0,0,0,0.5);font-family:'Noto Sans SC','Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} html{scroll-behavior:smooth} [id]{scroll-margin-top:110px} body{color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .container{max-width:1240px;margin:0 auto;padding:0 24px} /* Header */ .header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#0A0E1A;border-bottom:1px solid rgba(255,255,255,0.06);box-shadow:0 2px 20px rgba(0,0,0,0.3)} .header-inner{height:100px;display:flex;align-items:center;gap:32px} .logo{display:flex;align-items:center;flex-shrink:0} .logo-icon{display:flex;align-items:center;gap:8px} .logo-icon img{height:70px;width:auto} .nav{display:flex;align-items:center;gap:4px;flex:1} .nav-link{padding:10px 14px;font-size:15px;font-weight:500;color:rgba(255,255,255,0.8);border-radius:8px;transition:all 0.2s;white-space:nowrap} .nav-link:hover,.nav-link.active,.nav-link.spy-active{color:#fff;background:#0077B6} .lang-switch{display:flex;align-items:center;gap:6px;flex-shrink:0} .lang-btn{background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:rgba(255,255,255,0.6);padding:4px 8px;border-radius:6px;transition:all 0.2s} .lang-btn:hover,.lang-btn.active{color:#fff;background:rgba(255,255,255,0.12)} .lang-divider{color:rgba(255,255,255,0.2)} .mobile-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none} .mobile-toggle span{width:22px;height:2px;background: var(--bg)border-radius:2px;transition:all 0.3s} /* Hero Carousel */ .hero-carousel{position:relative;margin-top:100px;height:520px;overflow:hidden;background:transparent!important} .carousel-slides{position:relative;width:100%;height:100%} .carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:1} .carousel-slide.active{display:block} .slide-bg{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;padding-right:60px;background:transparent!important} .slide-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0.85} .slide-content{position:relative;z-index:2;display:flex;align-items:center;height:520px;padding-top:40px;background:transparent} .slide-content::before{content:'';position:absolute;top:0;left:-60px;width:55%;height:100%;background:linear-gradient(to right,rgba(13,27,42,0.97),rgba(13,27,42,0.85));z-index:-1} .hero-badge{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:13px;font-weight:600;padding:6px 16px;border-radius:20px;margin-bottom:20px;letter-spacing:0.5px} .hero-title{font-size:48px;font-weight:800;line-height:1.2;color:#fff;margin-bottom:20px;text-shadow:0 4px 12px rgba(0,0,0,0.5)} .hero-title .highlight{color:var(--primary-light)} .hero-desc{font-size:18px;color:rgba(255,255,255,0.9);margin-bottom:32px;max-width:560px;line-height:1.7;text-shadow:0 2px 8px rgba(0,0,0,0.4)} .hero-actions{display:flex;gap:16px} .btn{padding:12px 28px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s;border:2px solid transparent;display:inline-flex;align-items:center;gap:8px} .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-color:var(--primary)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,119,182,0.35)} .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.5)} .btn-outline:hover{background:rgba(255,255,255,0.1);border-color:#fff} .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background: var(--bg)border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:all 0.2s} .carousel-arrow:hover{background: var(--bg)transform:translateY(-50%) scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,0.25)} .carousel-prev{left:24px}.carousel-next{right:24px} .carousel-nav{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10} .carousel-nav{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10} .carousel-nav-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.4);border:none;cursor:pointer;transition:all 0.3s} .carousel-nav-dot:hover{background:rgba(255,255,255,0.7)} .carousel-nav-dot.active{background: var(--bg)width:28px;border-radius:5px} /* Stats Bar */ .stats-bar{background:#0A0E1A;border-bottom:1px solid rgba(255,255,255,0.06);padding:0;box-shadow:0 2px 12px rgba(0,0,0,0.15)} .hero-stats{display:flex;align-items:center;justify-content:center;padding:28px 0;gap:0} .stat-item{display:flex;flex-direction:column;align-items:center;padding:0 48px} .stat-num{font-size:36px;font-weight:800;color:#00B4D8;font-family:'Inter',sans-serif;line-height:1} .stat-label{font-size:14px;color:rgba(255,255,255,0.7);margin-top:4px;font-weight:500} .stat-divider{width:1px;height:40px;background:rgba(255,255,255,0.15)} /* Sections */ .section{padding:80px 0;background:var(--bg)} .section-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:48px;position:relative} .section-header .section-tag{grid-column:1/-1;justify-self:center;margin-bottom:4px} .section-header .section-title{text-align:right;margin-bottom:0} .section-header .section-title::after{margin:14px auto 0 0} .section-header .section-desc{text-align:left;margin:0} .section-header::before{content:'';display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:2px;background:linear-gradient(90deg,transparent,#0077B6,transparent);border-radius:1px} .section-tag{display:inline-block;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;font-size:11px;font-weight:800;padding:6px 20px;border-radius:20px;margin-bottom:18px;letter-spacing:2px;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,119,182,0.3)} .section-title{font-size:36px;font-weight:900;background:linear-gradient(135deg,var(--text),#1E293B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;position:relative;display:inline-block;letter-spacing:-0.5px;line-height:1.3} .section-title::after{content:'';display:block;width:60px;height:3px;background:linear-gradient(90deg,#0077B6,#00B4D8);border-radius:2px;margin:14px auto 0;transition:width 0.3s ease} .section-title:hover::after{width:90px} .section-desc{font-size:16px;color:var(--text-muted);max-width:420px;line-height:1.7;font-weight:400} /* Product Grid */ /* Product Grid �?3 columns, fully responsive */ .product-grid{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .product-card{ background: var(--bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); transition: all 0.3s; position: relative; display: flex; flex-direction: column; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 0%; /* Grid items shrink/grow equally to fill 3 columns */ } .product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .card-img-wrap{ position: relative; height: 260px; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; cursor: pointer; flex-shrink: 0; } .card-img-stack{ position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .card-img-stack img{ position: absolute; max-width: 100%; max-height: 220px; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity 0.4s ease; } .card-img-stack img.active{opacity:1;z-index:1} .card-num{ position: absolute; top: 12px; left: 16px; font-size: 48px; font-weight: 800; color: rgba(0,119,182,0.08); font-family: 'Inter', sans-serif; line-height: 1; pointer-events: none; z-index: 0; } .card-body{ padding: 24px; flex: 1; display: flex; flex-direction: column; } .card-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px} .card-sub{font-size:14px;color:var(--text-muted);margin-bottom:16px} .card-tags{display:flex;flex-wrap:wrap;gap:8px} .tag{display:inline-block;background:var(--bg-light);color:var(--text-light);font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;border:1px solid var(--border);transition:all 0.2s} .tag-link .tag:hover{background:var(--primary);color:#fff;border-color:var(--primary);cursor:pointer} .tag-link{transition:all 0.3s ease;position:relative} .tag-link.active{background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff!important;transform:scale(1.05);box-shadow:0 4px 15px rgba(0,119,182,0.4);border-color:transparent!important} .tag-link.active .tag{color:#fff!important;font-weight:700;background:transparent!important;border-color:transparent!important} /* Sub-product background highlight */ .card-img-wrap .main-img[src*="/sub/"]{background:linear-gradient(135deg,#F0F7FF,rgba(0,200,240,0.12))!important;padding:12px!important;border-radius:8px!important} .card-img-wrap:hover .main-img{transform:scale(1.08)} .card-img-wrap::after{content:attr(data-hint);position:absolute;bottom:6px;right:10px;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;padding:2px 8px;border-radius:4px;opacity:0;transition:opacity 0.3s} .card-img-wrap:hover::after{opacity:1} .card-img-stack img.active{opacity:1;z-index:1} .card-img-wrap .main-img{transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);background:transparent;border-radius:8px} .card-img-wrap .main-img[src*="/sub/"]{background:linear-gradient(135deg,#F0F7FF,rgba(0,200,240,0.12));padding:12px} .card-img-wrap:hover .main-img{transform:scale(1.15);filter:drop-shadow(0 8px 24px rgba(0,119,182,0.2))} .card-img-wrap::after{content:attr(data-hint);position:absolute;bottom:6px;right:10px;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;padding:2px 8px;border-radius:4px;opacity:0;transition:opacity 0.3s} .card-img-wrap:hover::after{opacity:1} /* About Section */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} .about-text .section-tag{margin-bottom:12px} .about-text .section-title{margin-bottom:20px;text-align:left} .about-text .section-title::after{margin:14px 0 0} .about-text>p{color:var(--text-light);line-height:1.6;margin-bottom:16px;font-size:14px} .about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .about-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .about-feat{display:flex;align-items:flex-start;gap:14px;padding:16px;background:var(--bg-light);border-radius:10px;border:1px solid var(--border)} .about-feat-icon{flex-shrink:0;width:44px;height:44px;background: var(--bg)border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.3)} .about-feat-text h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px} .about-feat-text p{font-size:13px;color:var(--text-muted)} .about-nums{display:grid;grid-template-columns:1fr 1fr;gap:20px} .about-num-item{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:var(--radius);padding:28px 24px;text-align:center;border:1px solid rgba(0,119,182,0.1);transition:all 0.3s;position:relative;overflow:hidden} .about-num-item:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,119,182,0.15)} .about-num-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light))} .about-num-icon{margin-bottom:12px} .about-num{font-size:40px;font-weight:800;color:var(--primary);font-family:'Inter',sans-serif;line-height:1;margin-bottom:6px} .about-num-label{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px} .about-num-sub{font-size:13px;color:var(--text-muted)} /* Solutions / Flow Steps */ .flow-steps{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap} .flow-step{text-align:center;padding:24px 32px;flex:1;min-width:160px} .flow-num{width:56px;height:56px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:18px;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:'Inter',sans-serif} .flow-step h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px} .flow-step p{font-size:14px;color:var(--text-muted)} .flow-arrow{padding:0 8px;flex-shrink:0} /* Manufacturing Grid */ .mfg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .mfg-card{background:var(--bg);border-radius:var(--radius);padding:28px 20px;text-align:center;border:1px solid var(--border);transition:all 0.3s} .mfg-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,119,182,0.1)} .mfg-icon{width:64px;height:64px;background:linear-gradient(135deg,rgba(0,119,182,0.08),rgba(0,180,216,0.08));border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .mfg-card h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px} .mfg-card p{font-size:13px;color:var(--text-muted)} /* Configurator */ .config-wrapper{background:var(--bg-light);border-radius:16px;padding:40px;border:1px solid var(--border)} .config-layout{display:grid;grid-template-columns:1fr 280px;gap:32px} .config-options-area{display:flex;flex-direction:column;gap:24px} .config-options-group h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px} .config-options{display:flex;flex-wrap:wrap;gap:10px} .config-card{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--bg);border:2px solid var(--border);border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;color:#E8EDF5;transition:all 0.25s ease;box-shadow:0 1px 3px rgba(0,0,0,0.04)} .config-card:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,119,182,0.1)} .config-card.active{background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;border-color:transparent;box-shadow:0 4px 15px rgba(0,119,182,0.3);transform:translateY(-1px)} .config-card.active svg{stroke:#fff!important} .config-card.active svg circle[fill],.config-card.active svg rect[fill],.config-card.active svg path[fill]{fill:#fff!important} .config-card svg{flex-shrink:0;transition:all 0.2s} .config-card-text{flex:1;line-height:1.3} .config-preview{background:var(--bg);border-radius:12px;padding:28px;border:1px solid var(--border);height:fit-content} .config-preview h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px} #configSummaryText{font-size:15px;color:var(--primary);font-weight:600;margin-bottom:24px;line-height:1.6;min-height:60px;padding:12px;background:var(--bg-light);border-radius:8px} .config-preview .btn{width:100%;justify-content:center;margin-bottom:12px} /* News Preview */ .news-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .news-preview-card{background:var(--bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);transition:all 0.3s} .news-preview-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .news-img-placeholder{height:180px;background:linear-gradient(135deg,#0077B6,#00C8F0);display:flex;align-items:center;justify-content:center} .news-preview-body{padding:24px} .news-preview-date{font-size:13px;color:var(--text-muted);margin-bottom:8px;display:block} .news-preview-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-preview-excerpt{font-size:14px;color:var(--text-muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Contact */ .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start} .contact-info{display:flex;flex-direction:column;gap:24px} .contact-item{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--bg-light);border-radius:12px;border:1px solid var(--border)} .contact-icon{width:48px;height:48px;background:linear-gradient(135deg,rgba(0,119,182,0.1),rgba(0,180,216,0.1));border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-item h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px} .contact-item p{font-size:14px;color:var(--text-light)} .contact-form{background:var(--bg-light);border-radius:16px;padding:36px;border:1px solid var(--border)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-group{margin-bottom:20px} .form-group label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px} .form-group input,.form-group textarea{width:100%;padding:12px 16px;background:var(--bg);border:2px solid var(--border);border-radius:10px;font-size:15px;color:var(--text);transition:all 0.2s;font-family:inherit} .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,119,182,0.1)} .form-group textarea{resize:vertical;min-height:120px} .contact-form .btn{width:100%;justify-content:center;margin-top:8px;padding:14px} /* Footer */ .footer{background:#0A0E1A;color:#fff;padding:64px 0 0} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.1)} .footer-logo-img{height:70px;width:auto;margin-bottom:16px;opacity:0.9} .footer-desc{font-size:14px;line-height:1.7;opacity:0.85} .footer-links h4,.footer-contact h4{color:#fff;font-size:16px;font-weight:700;margin-bottom:20px} .footer-links ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-links a{font-size:14px;opacity:0.8;transition:opacity 0.2s} .footer-links a:hover{opacity:1} .footer-contact p{font-size:14px;opacity:0.85;margin-bottom:8px} .footer-bottom{text-align:center;padding:24px 0;font-size:13px;opacity:0.7} /* Scroll animations */ .section{opacity:0;transform:translateY(30px);transition:all 0.6s ease} .section.visible{opacity:1;transform:translateY(0)} /* Fade up animation for cards */ @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .product-card:nth-child(1){animation-delay:0s} .product-card:nth-child(2){animation-delay:0.1s} .product-card:nth-child(3){animation-delay:0.2s} .product-card:nth-child(4){animation-delay:0.3s} .product-card:nth-child(5){animation-delay:0.4s} .product-card:nth-child(6){animation-delay:0.5s} .visible .product-card{animation:fadeUp 0.5s ease both} .visible .mfg-card{animation:fadeUp 0.4s ease both} .visible .mfg-card:nth-child(1){animation-delay:0s} .visible .mfg-card:nth-child(2){animation-delay:0.05s} .visible .mfg-card:nth-child(3){animation-delay:0.1s} .visible .mfg-card:nth-child(4){animation-delay:0.15s} .visible .mfg-card:nth-child(5){animation-delay:0.2s} .visible .mfg-card:nth-child(6){animation-delay:0.25s} .visible .mfg-card:nth-child(7){animation-delay:0.3s} .visible .mfg-card:nth-child(8){animation-delay:0.35s} /* Section background overrides */ #products.section.products-section{background:#f5f7fa!important} #about.section.about-section{background:linear-gradient(180deg,#F0F7FF 0%,#F8FBFF 100%)!important} #solutions.mfg-section{background:linear-gradient(180deg,#FFF8F0 0%,#FFF0E0 100%)!important} #manufacturing.mfg-section{background:linear-gradient(180deg,#F5F8FC 0%,#E8EDF4 100%)!important} #contact.section.contact-section{background:linear-gradient(180deg,var(--bg-light) 0%,#E3F0FA 100%)!important} /* Back to Top Button */ /* ========== 会员系统样式 ========== */ /* 登录按钮 */ .auth-header{display:flex;align-items:center;position:relative;margin-left:12px} .auth-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.25);border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s;white-space:nowrap;font-family:inherit} .auth-btn:hover{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.4);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,119,182,0.35)} .auth-btn svg{width:16px;height:16px;flex-shrink:0} /* 用户下拉菜单 */ .user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background: var(--bg)border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,0.15);min-width:200px;z-index:1001;overflow:hidden;animation:dropIn 0.2s ease} @keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .user-dropdown-header{padding:16px;background:linear-gradient(135deg,#0a1628,#023E8A);color:#fff} .user-dropdown-name{display:block;font-size:15px;font-weight:700} .user-dropdown-role{display:block;font-size:12px;opacity:0.8;margin-top:2px} .user-dropdown-item{display:flex;align-items:center;gap:10px;padding:12px 16px;color:#1E293B;text-decoration:none;font-size:14px;transition:background 0.15s;cursor:pointer} .user-dropdown-item:hover{background:#F1F5F9} .user-dropdown-item.logout{color:#EF4444;border-top:1px solid #E2E8F0} .user-dropdown-item svg{width:16px;height:16px;flex-shrink:0} /* 登录弹窗 */ .auth-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center} .auth-modal-overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)} .auth-modal-content{position:relative;background: var(--bg)border-radius:20px;width:420px;max-width:90vw;max-height:90vh;overflow-y:auto;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:modalSlideUp 0.3s ease} @keyframes modalSlideUp{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}} .auth-modal-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:28px;color:#94A3B8;cursor:pointer;z-index:1;line-height:1} .auth-modal-close:hover{color:#1E293B} .auth-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:2px solid #E2E8F0} .auth-tab{padding:12px 24px;background:none;border:none;font-size:15px;font-weight:600;color:#94A3B8;cursor:pointer;position:relative;transition:color 0.2s;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-2px} .auth-tab.active{color:#0077B6;border-bottom-color:#0077B6} .auth-tab:hover{color:#0077B6} .auth-form h3{font-size:22px;font-weight:800;color:var(--text);margin:0 0 4px} .auth-form-sub{color:#64748B;font-size:14px;margin:0 0 24px} .auth-form-group{margin-bottom:16px} .auth-form-group label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px} .auth-form-group input{width:100%;padding:12px 14px;border:2px solid #E2E8F0;border-radius:10px;font-size:14px;transition:border-color 0.2s;outline:none;box-sizing:border-box;font-family:inherit;color:var(--text)} .auth-form-group input:focus{border-color:#0077B6;box-shadow:0 0 0 3px rgba(0,119,182,0.1)} .auth-form-group input::placeholder{color:#94A3B8} .auth-form-error{color:#EF4444;font-size:13px;min-height:20px;margin-bottom:8px} .auth-submit-btn{width:100%;padding:14px;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit} .auth-submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,119,182,0.35)} .auth-spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} /* 下载中心弹窗 */ .download-panel{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center} .download-overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)} .download-content{position:relative;background: var(--bg)border-radius:20px;width:700px;max-width:90vw;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:modalSlideUp 0.3s ease} .download-header{padding:24px 28px;border-bottom:1px solid #E2E8F0;position:relative} .download-header h2{font-size:22px;font-weight:800;color:var(--text);margin:0} .download-subtitle{font-size:14px;color:#64748B;margin:4px 0 0} .download-close{position:absolute;top:24px;right:24px;background:none;border:none;font-size:28px;color:#94A3B8;cursor:pointer;line-height:1} .download-close:hover{color:#1E293B} .download-categories{display:flex;gap:8px;padding:16px 28px;border-bottom:1px solid #E2E8F0;flex-wrap:wrap} .download-cat{padding:8px 18px;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:20px;font-size:13px;color:#475569;cursor:pointer;transition:all 0.2s;font-family:inherit;font-weight:500} .download-cat.active,.download-cat:hover{background:#0077B6;color:#fff;border-color:#0077B6} .download-list{padding:16px 28px 28px} .download-loading{text-align:center;padding:40px;color:#94A3B8} .download-loading .auth-spinner{margin:0 auto 12px;border-color:rgba(0,119,182,0.2);border-top-color:#0077B6} .download-item{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid #E2E8F0;border-radius:12px;margin-bottom:12px;transition:all 0.2s} .download-item:hover{border-color:#0077B6;box-shadow:0 2px 12px rgba(0,119,182,0.08)} .download-item-icon{width:48px;height:48px;background:#F0F9FF;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .download-item-icon svg{width:24px;height:24px;fill:#0077B6} .download-item-info{flex:1;min-width:0} .download-item-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px} .download-item-desc{font-size:13px;color:#64748B;margin-bottom:4px} .download-item-meta{display:flex;gap:12px;font-size:12px;color:#94A3B8} .download-item-btn{padding:10px 20px;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap;font-family:inherit} .download-item-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,119,182,0.3)} .download-item-btn.downloaded{background:#E2E8F0;color:#94A3B8;cursor:default} /* 个人面板 */ .profile-body{padding:28px} .profile-body .auth-form-group{margin-bottom:20px} .profile-body input[disabled]{color:#94A3B8} /* Responsive */ @media(max-width:1024px){ .product-grid{grid-template-columns:repeat(2,1fr)!important} .mfg-grid,.news-preview-grid{grid-template-columns:repeat(2,1fr)} .about-grid{grid-template-columns:1fr;gap:40px} .config-layout{grid-template-columns:1fr} .flow-steps{flex-direction:column;gap:16px} .flow-arrow{transform:rotate(90deg)} } @media(max-width:768px){ .slide-content{padding:20px 16px;height:auto;min-height:440px} .hero-title{font-size:32px} .hero-carousel{height:440px} .slide-content{height:440px} .product-grid{grid-template-columns:1fr!important} .mfg-grid,.news-preview-grid{grid-template-columns:1fr} .hero-stats{flex-wrap:wrap;gap:16px} .stat-item{padding:0 24px} .contact-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:24px} .nav{position:fixed;top:100px;left:0;right:0;background:#0A0E1A;flex-direction:column;padding:16px;box-shadow:0 4px 20px rgba(0,0,0,0.4);transform:translateY(-100%);opacity:0;pointer-events:none;transition:all 0.3s;z-index:999} .nav.open{transform:translateY(0);opacity:1;pointer-events:all} .nav-link{width:100%;padding:12px 16px} .mobile-toggle{display:flex} .form-row{grid-template-columns:1fr} .about-features{grid-template-columns:1fr} .about-nums{grid-template-columns:1fr 1fr} .section{padding:48px 0} .section-header{grid-template-columns:1fr;gap:16px;text-align:center} .section-header .section-title{text-align:center} .section-header .section-title::after{margin:14px auto 0} .section-header .section-desc{text-align:center;max-width:100%} .section-title{font-size:28px} .config-wrapper{padding:24px} .auth-header .auth-btn span{display:none} .auth-header .auth-btn{padding:8px 10px} .auth-modal-content{padding:24px 20px} .download-content{max-height:90vh} .download-categories{padding:12px 16px} .download-list{padding:12px 16px} .download-item{flex-wrap:wrap} .download-item-btn{width:100%} } @media(max-width:480px){ .hero-title{font-size:26px} .hero-actions{flex-direction:column} .hero-actions .btn{width:100%;justify-content:center} .stat-item{padding:0 16px} .about-nums{grid-template-columns:1fr} } /* OEM Flow Section */ .oem-flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin:40px 0} .oem-step{flex:1;min-width:160px;max-width:220px;text-align:center;padding:24px 16px} .oem-step-num{display:inline-block;width:52px;height:52px;line-height:52px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:18px;font-weight:900;border-radius:50%;margin-bottom:14px} .oem-step h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px} .oem-step p{font-size:13px;color:var(--text-muted);line-height:1.5} .oem-arrow{color:var(--primary);font-size:20px;opacity:0.5;padding:0 8px;flex-shrink:0} @media(max-width:768px){ .oem-flow{gap:16px} .oem-arrow{display:none} .oem-step{max-width:100%} } /* Advantages Grid */ .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px} .adv-card{background: var(--bg)border-radius:var(--radius);padding:32px 24px;box-shadow:var(--shadow);transition:all 0.3s;border:1.5px solid transparent} .adv-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-lg)} .adv-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(0,200,240,0.15),rgba(0,229,255,0.08));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px;color:var(--primary)} .adv-card h3{font-size:18px;font-weight:700;color:var(--text);margin-bottom:10px} .adv-card p{font-size:14px;color:var(--text-muted);line-height:1.7} @media(max-width:900px){ .adv-grid{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .adv-grid{grid-template-columns:1fr} } /* ========== 视频展示�?========== */ .video-tabs { display: flex; justify-content: center; gap: 12px; margin: 24px 0 40px; flex-wrap: wrap; } .video-tab { padding: 10px 28px; border: 1.5px solid #ddd; border-radius: 24px; background: var(--bg); font-size: 15px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.3s; } .video-tab:hover { border-color: var(--primary); color: var(--primary); } .video-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .video-card { background: var(--bg); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); cursor: pointer; transition: all 0.3s; border: 1.5px solid transparent; } .video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.14); border-color: var(--primary); } .video-thumb { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: var(--bg-card); overflow: hidden; } .video-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .video-card:hover .video-overlay { opacity: 1; } .play-btn { width: 56px; height: 56px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--primary); } .video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px; } .video-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 40px; gap: 8px; } .video-placeholder span { font-size: 13px; opacity: 0.8; } .video-info { padding: 16px; } .video-tag { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; margin-bottom: 8px; } .video-tag.product { background: #e8f5e9; color: #2e7d32; } .video-tag.company { background: #e3f2fd; color: #1565c0; } .video-info h3 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; line-height: 1.4; } .video-info p { font-size: 13px; color: #888; margin: 0; line-height: 1.5; } /* Video CTA */ .video-cta { text-align: center; margin-top: 16px; padding: 32px; background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%); border-radius: 12px; border: 1px solid #eee; } .video-cta p { font-size: 15px; color: #666; margin: 0 0 16px; } .video-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: #ff6b9d; color: #fff; border-radius: 24px; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.3s; } .video-cta-btn:hover { background: #e91e63; transform: translateY(-2px); } /* Video Modal / Lightbox */ .video-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.88); z-index: 9999; align-items: center; justify-content: center; } .video-modal.active { display: flex; } .video-modal-content { position: relative; width: 90%; max-width: 900px; } .video-modal-close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 8px; } .video-modal-close:hover { color: #ff6b9d; } #videoPlayerContainer { width: 100%; padding-top: 56.25%; position: relative; background: #000; } #videoPlayerContainer iframe, #videoPlayerContainer video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Section subtitle */ .section-subtitle { text-align: center; color: #999; font-size: 15px; margin-top: -16px; margin-bottom: 0; } /* Responsive */ @media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } .video-tabs { gap: 8px; } .video-tab { padding: 8px 18px; font-size: 14px; } } /* ===== 增强产品卡片样式 ===== */ .product-card { background: var(--bg); border-radius: 16px; border: 1.5px solid #eef2f8; box-shadow: 0 2px 12px rgba(0,0,0,0.3); transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; } .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); opacity: 0; transition: opacity 0.3s; } .product-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,119,182,0.18); border-color: var(--primary); } .product-card:hover::before { opacity: 1; } /* 卡片图片区域 */ .card-img-wrap { position: relative; height: 280px !important; background: linear-gradient(160deg, #f8fbff 0%, #eef6ff 100%) !important; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px !important; } .card-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s; border-radius: 8px; } .product-card:hover .card-img-wrap img { transform: scale(1.1); filter: drop-shadow(0 8px 24px rgba(0,119,182,0.2)); } /* 类别标签角标 */ .card-badge { position: absolute; top: 16px; left: 16px; background: linear-gradient(135deg, var(--primary), var(--primary)); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px; z-index: 2; box-shadow: 0 2px 8px rgba(0,119,182,0.35); } .card-badge i { margin-right: 4px; font-size: 10px; } /* 卡片内容�?*/ .card-body { padding: 20px 22px 24px !important; flex: 1; display: flex; flex-direction: column; } .card-title { font-size: 18px !important; font-weight: 800 !important; color: #1a2a3e !important; margin-bottom: 6px !important; letter-spacing: -0.3px; line-height: 1.3; } .card-sub { font-size: 13.5px !important; color: #8a9baf !important; margin: 0 0 14px !important; display: flex; align-items: center; gap: 6px; } .card-sub::before { content: ''; display: inline-block; width: 16px; height: 2px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 2px; flex-shrink: 0; } .card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; } .tag { display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: 20px; background: #f0f7ff; color: #0077b6; font-weight: 600; border: 1px solid #d0e8ff; transition: all 0.2s; } .tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* 卡片底部箭头 */ .card-arrow { display: flex; align-items: center; justify-content: flex-end; margin-top: 16px; color: var(--primary); font-size: 13px; font-weight: 600; opacity: 0; transform: translateX(-8px); transition: all 0.3s; } .product-card:hover .card-arrow { opacity: 1; transform: translateX(0); } .card-arrow i { margin-left: 6px; transition: transform 0.3s; } .product-card:hover .card-arrow i { transform: translateX(4px); } /* 自动轮播滑入效果 */ .card-img-stack img{transition:opacity 0.5s ease,transform 0.5s ease;transform:scale(1)} .card-img-stack img:not(.active){transform:scale(0.95);opacity:0} .card-img-stack img.active{transform:scale(1);opacity:1} /* 产品数量标签 */ .product-count { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.9); color: var(--primary); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); z-index: 2; } /* 响应�?*/ @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .card-img-wrap { height: 200px !important; } } @media (max-width: 600px) { .product-grid { grid-template-columns: 1fr !important; } .card-img-wrap { height: 180px !important; } .card-title { font-size: 16px !important; } } /* ================================================ AVCO 深色主题 - 高端医疗台车官网 ================================================ */ :root { --primary: #00C8F0; --primary-light: #33D4F5; --primary-dark: #0099BF; --accent: #00E5FF; --text: #E8ECF1; --text-light: #B8C4D0; --text-muted: #6B7A8C; --bg: #0B0F1A; --bg-secondary: #111827; --bg-card: #161D2E; --bg-light: #1C2333; --bg-hover: #242D42; --border: #2A3347; --border-light: #343F56; --radius: 14px; --radius-sm: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 8px 48px rgba(0,0,0,0.5); --shadow-glow: 0 0 30px rgba(0,200,240,0.15); } /* 全局 */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { color: var(--text); background: var(--bg); line-height: 1.6; overflow-x: hidden; } /* Header */ .header { background: rgba(11, 15, 26, 0.92) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(20px); } .header.scrolled { background: rgba(11, 15, 26, 0.98) !important; } .nav-links a { color: var(--text-light) !important; } .nav-links a:hover, .nav-links a.active { color: var(--primary) !important; } .logo-text { display:flex !important; align-items:center !important; } .logo-en { color: var(--primary) !important; } .cta-btn, .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff !important; box-shadow: 0 4px 20px rgba(0,200,240,0.3); } /* Hero */ .hero { background: var(--bg) !important; } .hero h1 { color: #fff !important; } .hero p { color: var(--text-light) !important; } /* 所�?section 基础 */ .section { background: var(--bg) !important; } /* 产品�?*/ #products { background: var(--bg-secondary) !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } #products h2 { color: #fff !important; } #products .section-sub { color: var(--text-muted) !important; } /* OEM */ #oem { background: var(--bg) !important; } /* 选型配置 */ #configurator { background: var(--bg-secondary) !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } #configurator h2 { color: #fff !important; } #configurator .section-sub { color: var(--text-muted) !important; } /* 加工工艺 */ #manufacturing { background: var(--bg) !important; } /* 优势 */ #advantages { background: var(--bg-secondary) !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } #advantages h2 { color: #fff !important; } #advantages .section-sub { color: var(--text-muted) !important; } /* 视频�?*/ #videos { background: var(--bg) !important; } #videos h2 { color: #fff !important; } #videos .section-sub { color: var(--text-muted) !important; } /* 关于我们 */ #about { background: var(--bg-secondary) !important; border-top: 1px solid var(--border); } #about h2 { color: #fff !important; } #about p { color: var(--text-light) !important; } /* 新闻 */ #news { background: var(--bg) !important; } #news h2 { color: #fff !important; } /* 联系 */ #contact { background: var(--bg-secondary) !important; border-top: 1px solid var(--border); } #contact h2 { color: #fff !important; } #contact p { color: var(--text-light) !important; } /* footer */ .footer { background: var(--bg) !important; border-top: 1px solid var(--border); color: var(--text-muted) !important; } .footer a { color: var(--text-light) !important; } /* 产品卡片 */ .product-card { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; box-shadow: var(--shadow) !important; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .product-card:hover { border-color: var(--primary) !important; box-shadow: 0 16px 48px rgba(0,200,240,0.15), var(--shadow-lg) !important; transform: translateY(-8px); } .card-title { color: #fff !important; } .card-sub { color: var(--text-muted) !important; } .tag { background: rgba(0,200,240,0.1) !important; color: var(--primary-light) !important; border: 1px solid rgba(0,200,240,0.25) !important; } .tag:hover { background: var(--primary) !important; color: #fff !important; } .product-count { background: rgba(0,200,240,0.15) !important; color: var(--primary) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .card-badge { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; box-shadow: 0 2px 8px rgba(0,200,240,0.3); } .card-arrow { color: var(--primary) !important; } .card-img-wrap { background: linear-gradient(160deg, #1a2235 0%, #141c2e 100%) !important; } /* 亮点/优势卡片 */ .advantage-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; transition: all 0.3s; } .advantage-card:hover { border-color: var(--primary) !important; box-shadow: 0 8px 32px rgba(0,200,240,0.12) !important; transform: translateY(-4px); } .advantage-card h4 { color: #fff !important; } .advantage-card p { color: var(--text-light) !important; } /* 优势图标 */ .adv-icon { background: rgba(0,200,240,0.1) !important; color: var(--primary) !important; border: 1px solid rgba(0,200,240,0.2) !important; } /* OEM 流程 */ .oem-step { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } .oem-step-num { color: var(--primary) !important; } .oem-step-title { color: #fff !important; } .oem-step-desc { color: var(--text-light) !important; } /* 工艺卡片 */ .mfg-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; transition: all 0.3s; } .mfg-card:hover { border-color: var(--primary) !important; box-shadow: 0 4px 20px rgba(0,200,240,0.1) !important; } .mfg-card h4 { color: #fff !important; } .mfg-card p { color: var(--text-light) !important; } /* 视频卡片 */ .video-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; transition: all 0.3s; } .video-card:hover { border-color: var(--primary) !important; box-shadow: 0 8px 30px rgba(0,200,240,0.12) !important; transform: translateY(-4px); } .video-card-title { color: #fff !important; } .video-card-sub { color: var(--text-muted) !important; } /* 视频标签�?*/ .video-tabs .tab-btn { color: var(--text-muted) !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; transition: all 0.2s; } .video-tabs .tab-btn.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } /* 新闻卡片 */ .news-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; transition: all 0.3s; } .news-card:hover { border-color: var(--primary) !important; box-shadow: 0 8px 24px rgba(0,200,240,0.1) !important; transform: translateY(-3px); } .news-title { color: #fff !important; } .news-date { color: var(--text-muted) !important; } .news-excerpt { color: var(--text-light) !important; } /* 配置卡片 */ .cfg-card { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; color: var(--text-light) !important; transition: all 0.2s; } .cfg-card:hover, .cfg-card.active { border-color: var(--primary) !important; background: var(--bg-hover) !important; box-shadow: 0 0 0 1px var(--primary), 0 4px 16px rgba(0,200,240,0.15) !important; } .cfg-card-title { color: #fff !important; } /* 选型分组标题 */ .cfg-group-title { color: var(--primary) !important; border-bottom: 1px solid var(--border) !important; } /* 表单 */ .form-group label { color: var(--text-light) !important; } .form-control, .form-select { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; transition: border-color 0.2s; } .form-control:focus, .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(0,200,240,0.1) !important; background: var(--bg-hover) !important; } .form-control::placeholder { color: var(--text-muted) !important; } /* 关于我们区域 */ .about-text h2 { color: #fff !important; } .about-text p { color: var(--text-light) !important; } .stat-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .stat-num { color: var(--primary) !important; } .stat-label { color: var(--text-muted) !important; } /* 分隔�?*/ .section-divider { background: linear-gradient(90deg, transparent, var(--border), transparent) !important; } /* 按钮 */ .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; box-shadow: 0 4px 20px rgba(0,200,240,0.3); border: none; } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-light), var(--primary)) !important; box-shadow: 0 6px 28px rgba(0,200,240,0.4); transform: translateY(-2px); } .btn-outline { border: 1.5px solid var(--primary) !important; color: var(--primary) !important; background: transparent !important; } .btn-outline:hover { background: var(--primary) !important; color: #fff !important; } /* 滚动�?*/ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } /* 弹窗/Modal */ .modal-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .modal-header { border-bottom: 1px solid var(--border) !important; } .modal-footer { border-top: 1px solid var(--border) !important; } .close { color: var(--text-light) !important; } /* 视频弹窗 */ .video-modal { background: rgba(0,0,0,0.92) !important; backdrop-filter: blur(8px); } .video-modal-content { background: #000 !important; border: 1px solid var(--border) !important; } /* 导航下拉 */ .lang-dropdown-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; } /* Tab 标签 */ .tab-btn { color: var(--text-muted) !important; border: 1px solid var(--border) !important; } .tab-btn.active { color: var(--primary) !important; border-color: var(--primary) !important; background: rgba(0,200,240,0.08) !important; } /* 链接 */ a { color: var(--primary-light) !important; transition: color 0.2s; } a:hover { color: var(--accent) !important; } /* 头像/品牌 */ .avatar-circle { background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important; color: #fff !important; } /* 导航悬浮效果增强 */ .nav-links a::after { background: var(--primary) !important; } /* Hero 装饰光效 */ .hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(0,200,240,0.04) 0%, transparent 60%); pointer-events: none; } /* 产品卡片数量角标增强 */ .product-count { font-weight: 700; letter-spacing: 0.3px; } /* 响应�?*/ @media (max-width: 768px) { .hero h1 { font-size: 28px !important; } #products .section-title, #oem .section-title, #advantages .section-title { font-size: 24px !important; } } /* 修正已有类的深色样式 */ .adv-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; transition: all 0.3s; } .adv-card:hover { border-color: var(--primary) !important; box-shadow: 0 8px 32px rgba(0,200,240,0.12) !important; transform: translateY(-4px); } .adv-card h4 { color: #fff !important; } .adv-card p { color: var(--text-light) !important; } .mfg-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; transition: all 0.3s; } .mfg-card:hover { border-color: var(--primary) !important; box-shadow: 0 4px 20px rgba(0,200,240,0.1) !important; } .mfg-card h4 { color: #fff !important; } .mfg-card p { color: var(--text-light) !important; } .config-card { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; color: var(--text-light) !important; transition: all 0.2s; } .config-card:hover, .config-card.active { border-color: var(--primary) !important; background: var(--bg-hover) !important; box-shadow: 0 0 0 1px var(--primary), 0 4px 16px rgba(0,200,240,0.15) !important; } .config-card-title { color: #fff !important; } .oem-step { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } .oem-step-num { color: var(--primary) !important; } .oem-step-title { color: #fff !important; } .oem-step-desc { color: var(--text-light) !important; } .news-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; transition: all 0.3s; } .news-card:hover { border-color: var(--primary) !important; box-shadow: 0 8px 24px rgba(0,200,240,0.1) !important; transform: translateY(-3px); } .news-title { color: #fff !important; } .news-date { color: var(--text-muted) !important; } .news-excerpt { color: var(--text-light) !important; } .news-card-title { color: #fff !important; } .news-card-date { color: var(--text-muted) !important; } .news-card-excerpt { color: var(--text-light) !important; } .adv-icon { background: rgba(0,200,240,0.1) !important; color: var(--primary) !important; border: 1px solid rgba(0,200,240,0.2) !important; } .video-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; transition: all 0.3s; } .video-card:hover { border-color: var(--primary) !important; box-shadow: 0 8px 30px rgba(0,200,240,0.12) !important; transform: translateY(-4px); } .video-card-title { color: #fff !important; } .video-card-sub { color: var(--text-muted) !important; } .video-tabs .tab-btn { color: var(--text-muted) !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; transition: all 0.2s; } .video-tabs .tab-btn.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } .tab-btn { color: var(--text-muted) !important; border: 1px solid var(--border) !important; } .tab-btn.active { color: var(--primary) !important; border-color: var(--primary) !important; background: rgba(0,200,240,0.08) !important; } .stat-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .stat-num { color: var(--primary) !important; } .stat-label { color: var(--text-muted) !important; } .section-divider { background: linear-gradient(90deg, transparent, var(--border), transparent) !important; } .form-control, .form-select { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; transition: border-color 0.2s; } .form-control:focus, .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(0,200,240,0.1) !important; background: var(--bg-hover) !important; } .form-control::placeholder { color: var(--text-muted) !important; } .modal-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .modal-header { border-bottom: 1px solid var(--border) !important; } .modal-footer { border-top: 1px solid var(--border) !important; } .video-modal { background: rgba(0,0,0,0.92) !important; backdrop-filter: blur(8px); } .video-modal-content { background: #000 !important; border: 1px solid var(--border) !important; } .footer { background: var(--bg) !important; border-top: 1px solid var(--border) !important; color: var(--text-muted) !important; } .footer a { color: var(--text-light) !important; } .footer a:hover { color: var(--primary) !important; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } a { color: var(--primary-light) !important; transition: color 0.2s; } a:hover { color: var(--accent) !important; } .cfg-group-title { color: var(--primary) !important; border-bottom: 1px solid var(--border) !important; } .avatar-circle { background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important; color: #fff !important; } .about-text h2 { color: #fff !important; } .about-text p { color: var(--text-light) !important; } .hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(0,200,240,0.04) 0%, transparent 60%); pointer-events: none; z-index: 0; } .hero { position: relative; overflow: hidden; } /* 深色主题覆盖�?- 强制覆盖所有区块背�?*/ #configurator { background: var(--bg-secondary) !important; } #videos { background: var(--bg) !important; } #manufacturing { background: var(--bg) !important; } #oem { background: var(--bg) !important; } #products { background: var(--bg-secondary) !important; } #advantages { background: var(--bg-secondary) !important; } #about { background: var(--bg-secondary) !important; } #news { background: var(--bg) !important; } #contact { background: var(--bg-secondary) !important; } .news-preview-section { background: var(--bg) !important; } .configurator-section { background: var(--bg-secondary) !important; } /* ================================================ 深色主题补充覆盖 - 修复所有残留白�? ================================================ */ /* 优势卡片 */ .adv-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; transition: all 0.3s; } .adv-card:hover { border-color: var(--primary) !important; box-shadow: 0 8px 32px rgba(0,200,240,0.12) !important; transform: translateY(-4px); } .adv-card h4 { color: #fff !important; } .adv-card p { color: var(--text-light) !important; } /* 关于我们特色图标 */ .about-feat-icon { background: rgba(0,200,240,0.1) !important; border: 1px solid rgba(0,200,240,0.2) !important; color: var(--primary) !important; } /* 关于数字统计卡片 */ .about-num-item { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .about-num-item .stat-num { color: var(--primary) !important; } .about-num-item .stat-label { color: var(--text-muted) !important; } /* 图片包装器白底修�?*/ .card-img-wrap .main-img[src*="/sub/"] { background: linear-gradient(160deg, #1a2235 0%, #141c2e 100%) !important; } /* 用户下拉/模态框白底 */ .user-dropdown, .auth-modal-content, .download-content, .auth-dropdown { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .user-dropdown-item:hover { background: var(--bg-hover) !important; } .download-cat { background: var(--bg-light) !important; border-color: var(--border) !important; color: var(--text-light) !important; } .download-item-icon { background: rgba(0,200,240,0.1) !important; } /* OEM步骤白底 */ .oem-step { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .oem-step-num { color: var(--primary) !important; } .oem-step-title { color: #fff !important; } .oem-step-desc { color: var(--text-light) !important; } /* 新闻预览卡片 */ .news-preview-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .news-preview-date { color: var(--text-muted) !important; } .news-preview-title { color: var(--text) !important; } .news-preview-excerpt { color: var(--text-muted) !important; } .news-img-placeholder { background: var(--bg-light) !important; } /* 配置卡片 */ .cfg-card { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; color: var(--text-light) !important; } .cfg-card:hover, .cfg-card.active { border-color: var(--primary) !important; background: var(--bg-hover) !important; } .cfg-card-title { color: #fff !important; } /* 视频卡片 */ .video-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .video-card:hover { border-color: var(--primary) !important; } .video-card-title { color: #fff !important; } .video-card-sub { color: var(--text-muted) !important; } /* 加工工艺卡片 */ .mfg-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .mfg-card:hover { border-color: var(--primary) !important; } .mfg-card h4 { color: #fff !important; } .mfg-card p { color: var(--text-light) !important; } /* 视频标签页按�?*/ .video-tabs .tab-btn { color: var(--text-muted) !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; } .video-tabs .tab-btn.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } /* Tab按钮通用 */ .tab-btn { color: var(--text-muted) !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; } .tab-btn:hover, .tab-btn.active { color: var(--primary) !important; border-color: var(--primary) !important; background: rgba(0,200,240,0.08) !important; } /* Section标签 */ .section-tag { color: var(--primary) !important; background: rgba(0,200,240,0.1) !important; border: 1px solid rgba(0,200,240,0.2) !important; } /* 所有按钮变�?*/ .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border: none !important; } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-light), var(--primary)) !important; } .btn-outline { border: 1.5px solid var(--primary) !important; color: var(--primary) !important; background: transparent !important; } .btn-outline:hover { background: var(--primary) !important; color: #fff !important; } /* Hero区域CTA按钮白底修复 */ .hero .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; } /* footer */ .footer { background: var(--bg) !important; border-top: 1px solid var(--border) !important; } .footer a { color: var(--text-light) !important; } .footer a:hover { color: var(--primary) !important; } /* 联系区域CTA按钮白底 */ #contact .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border: none !important; } /* 模态框 */ .modal-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .modal-header { border-bottom: 1px solid var(--border) !important; } .modal-footer { border-top: 1px solid var(--border) !important; } .close { color: var(--text-light) !important; } .modal-title { color: var(--text) !important; } /* 视频弹窗 */ .video-modal { background: rgba(0,0,0,0.92) !important; backdrop-filter: blur(8px); } .video-modal-content { background: #000 !important; border: 1px solid var(--border) !important; } /* 滚动�?*/ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } /* 全局链接 */ a { color: var(--primary-light) !important; } a:hover { color: var(--accent) !important; } /* 通用section背景 */ #products.section { background: var(--bg-secondary) !important; } #oem.section { background: var(--bg) !important; } #configurator.section { background: var(--bg-secondary) !important; } #manufacturing.section { background: var(--bg) !important; } #advantages.section { background: var(--bg-secondary) !important; } #videos.section { background: var(--bg) !important; } #about.section { background: var(--bg-secondary) !important; } #news.section { background: var(--bg) !important; } #contact.section { background: var(--bg-secondary) !important; } /* ================================================ Footer 深色主题升级 CSS ================================================ */ .footer { background: #080C14 !important; border-top: 1px solid var(--border) !important; color: var(--text-light) !important; } .footer a { color: var(--text-light) !important; transition: color 0.3s; } .footer a:hover { color: var(--primary) !important; } .footer-main { max-width: 1280px; margin: 0 auto; padding: 60px 40px 40px; display: grid; grid-template-columns: 320px 1fr; gap: 60px; } /* Logo */ .footer-logo-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .footer-logo-text { font-size: 26px; font-weight: 900; letter-spacing: 4px; background: linear-gradient(135deg, #00C8F0, #00E5FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-logo-divider { color: var(--border-light); font-weight: 300; font-size: 20px; } .footer-logo-sub { font-size: 14px; color: var(--text-muted); letter-spacing: 3px; font-weight: 400; } .footer-brand-desc { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; } /* Contact rows */ .footer-contact-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; } .footer-contact-item { display: flex; align-items: center; font-size: 13px; color: var(--text-light); } .footer-contact-item i { color: var(--primary); } /* Columns grid */ .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .footer-col h4 { color: #fff !important; font-size: 15px; font-weight: 700; margin-bottom: 18px; letter-spacing: 1px; } .footer-col a { display: block; font-size: 13px; color: var(--text-muted) !important; margin-bottom: 10px; transition: all 0.3s; text-decoration: none; } .footer-col a:hover { color: var(--primary) !important; transform: translateX(4px); } .footer-col-text { font-size: 13px; color: var(--text-muted) !important; margin-bottom: 8px; } /* Social buttons */ .footer-social { display: flex; gap: 10px; margin-top: 16px; } .footer-social-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-light) !important; transition: all 0.3s; text-decoration: none; } .footer-social-btn:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; transform: translateY(-2px); } /* Bottom bar */ .footer-bottom { background: rgba(0,0,0,0.4); border-top: 1px solid var(--border); padding: 20px 40px; } .footer-bottom-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .footer-copyright { font-size: 13px; color: var(--text-muted) !important; } .footer-credits { font-size: 12px; color: var(--text-muted) !important; } .footer-credits a { color: var(--primary-light) !important; font-size: 12px; } /* Responsive */ @media(max-width:900px) { .footer-main { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 24px; } .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media(max-width:600px) { .footer-cols { grid-template-columns: 1fr; } .footer-bottom { padding: 16px 20px; } .footer-bottom-inner { flex-direction: column; text-align: center; } } /* ================================================ 导航�?LOGO 优化 CSS ================================================ */ .logo { display: flex !important; align-items: center !important; gap: 12px !important; flex-shrink: 0; } .logo-text { display: flex !important; align-items: center !important; gap: 0 !important; } .logo-text span { font-size: 22px !important; font-weight: 900 !important; letter-spacing: 3px !important; background: linear-gradient(135deg, #00C8F0, #00E5FF) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Logo区域悬停效果 */ .logo:hover .logo-icon img { filter: drop-shadow(0 4px 16px rgba(0,200,240,0.5)); } .logo:hover .logo-text span { filter: brightness(1.2); } /* 导航栏滚动后样式 */ .header-inner { transition: all 0.3s; } /* ================================================ 中英切换按钮 + 一键置�?CSS ================================================ */ /* --- Lang Switch (中英互译按钮优化) --- */ .lang-switch { display: flex !important; align-items: center !important; flex-shrink: 0; } .lang-pill { display: flex; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 30px; padding: 3px 6px; gap: 2px; } .lang-btn { background: none !important; border: none !important; cursor: pointer; font-size: 12px !important; font-weight: 600 !important; color: rgba(255,255,255,0.5) !important; padding: 5px 14px !important; border-radius: 24px !important; transition: all 0.3s !important; letter-spacing: 0.5px; } .lang-btn:hover { color: #fff !important; background: rgba(255,255,255,0.08) !important; } .lang-btn.active { background: linear-gradient(135deg, #00C8F0, #00E5FF) !important; color: #fff !important; box-shadow: 0 2px 12px rgba(0,200,240,0.35); } /* --- Back to Top Button --- */ position: fixed; bottom: 32px; right: 32px; width: 46px; height: 46px; background: linear-gradient(135deg, #00C8F0, #00E5FF); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.8); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 20px rgba(0,200,240,0.35); color: #fff; font-size: 16px; } opacity: 1; visibility: visible; transform: translateY(0) scale(1); } background: linear-gradient(135deg, #00E5FF, #00ffc8); box-shadow: 0 6px 28px rgba(0,200,240,0.5); transform: translateY(-3px) scale(1.08); } transform: translateY(0) scale(0.95); } @media(max-width: 768px) { } /* ---- Back to Top Button ---- */ @media(max-width:768px){} /* ---- Logo left margin ---- */ .logo{margin-left:12px!important} /* ================================================ Back to Top Button - Clean Version ================================================ */ .back-to-top { position: fixed; bottom: 32px; right: 32px; width: 46px; height: 46px; background: linear-gradient(135deg, #00C8F0, #00E5FF); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: none; /* Hidden by default */ align-items: center; justify-content: center; z-index: 9999; box-shadow: 0 4px 20px rgba(0,200,240,0.4); font-size: 16px; transition: all 0.3s ease; } .back-to-top.visible { display: flex !important; animation: bttFadeIn 0.4s ease; } @keyframes bttFadeIn { from { opacity: 0; transform: scale(0.7) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .back-to-top:hover { background: linear-gradient(135deg, #00E5FF, #00ffc8); box-shadow: 0 8px 30px rgba(0,200,240,0.6); transform: translateY(-4px) scale(1.08); } .back-to-top:active { transform: scale(0.92); } @media(max-width: 768px) { .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 14px; } } /* ===== BACK TO TOP - FORCE VISIBLE WHEN SCROLLED ===== */ .back-to-top { display: none !important; } .back-to-top.visible { display: flex !important; align-items: center !important; justify-content: center !important; } /* ===== VIDEO SECTION DARK OVERRIDES ===== */ .video-cta { background: var(--bg-secondary) !important; border-color: var(--border) !important; } .video-cta p { color: var(--text-light) !important; } .video-modal-content { background: #000 !important; border-radius: 12px !important; } .video-thumb { background: var(--bg-card) !important; } .play-btn { background: rgba(0,200,240,0.9) !important; color: #fff !important; } .video-card-title { color: var(--text) !important; } .video-card-sub { color: var(--text-muted) !important; } .video-duration { color: var(--text-light) !important; background: rgba(0,0,0,0.6) !important; } /* ===== FORCE ANY REMAINING WHITE BACKGROUNDS TO DARK ===== */ .section, .card, .mfg-card, .config-wrapper, .config-card, .config-preview, .contact-item, .contact-form, .news-preview-card, .adv-card, .oem-card, .about-feat, .about-num-item { background: var(--bg-card) !important; border-color: var(--border) !important; } /* ===== SLIDE 4: AI TECH OVERLAY STYLES ===== */ .slide-bg-tech { position: relative; } .slide-product-overlay { position: absolute; right: 5%; bottom: 8%; width: 42%; max-width: 480px; z-index: 2; filter: drop-shadow(0 20px 60px rgba(0,200,240,0.35)); animation: floatProduct 4s ease-in-out infinite; } .product-3d-render { width: 100%; height: auto; object-fit: contain; } @keyframes floatProduct { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } .slide-tech-bg { position: absolute; inset: 0; z-index: 0; background:; radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,200,240,0.18) 0%, transparent 70%), radial-gradient(ellipse 60% 80% at 30% 70%, rgba(0,100,200,0.12) 0%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(0,200,240,0.06) 0%, transparent 50%), linear-gradient(135deg, #0a0f1a 0%, #080c14 40%, #0a1628 70%, #0d1f35 100%); overflow: hidden; } /* Neural network decorative lines */ .slide-tech-bg::before { content: ''; position: absolute; inset: 0; background-image:; radial-gradient(circle, rgba(0,200,240,0.3) 1px, transparent 1px), radial-gradient(circle, rgba(0,200,240,0.15) 1px, transparent 1px), radial-gradient(circle, rgba(0,100,200,0.2) 1.5px, transparent 1.5px); background-size: 60px 60px, 30px 30px, 90px 90px; background-position: 0 0, 15px 15px, 45px 45px; animation: neuralDrift 20s linear infinite; opacity: 0.6; } @keyframes neuralDrift { 0% { background-position: 0 0, 15px 15px, 45px 45px; } 100% { background-position: 60px 60px, 45px 45px, 135px 135px; } } /* Circuit lines overlay */ .slide-tech-bg::after { content: ''; position: absolute; inset: 0; background:; linear-gradient(90deg, transparent 49.5%, rgba(0,200,240,0.08) 49.5%, rgba(0,200,240,0.08) 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(0,200,240,0.06) 49.5%, rgba(0,200,240,0.06) 50.5%, transparent 50.5%); background-size: 120px 120px; animation: gridPulse 4s ease-in-out infinite; } @keyframes gridPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* Hero title highlight for tech slide */ .hero-title .highlight { background: linear-gradient(90deg, #00C8F0, #00E5FF, #00ffc8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } /* MOBILE NAV OVERRIDE - FIXED POSITION */ @media(max-width:768px){ .mobile-toggle{ display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important; position:fixed;top:30px;right:16px;z-index:10000; background:linear-gradient(135deg,#00C8F0,#0077B6); padding:10px 12px;border-radius:10px; -webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column; gap:5px;cursor:pointer; box-shadow:0 4px 20px rgba(0,119,182,0.5); border:2px solid rgba(255,255,255,0.3) } .mobile-toggle span{width:22px;height:3px;background:#fff;border-radius:2px;transition:all 0.3s} .mobile-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .mobile-toggle.open span:nth-child(2){opacity:0} .mobile-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} .nav{position:fixed;top:110px!important;left:0;right:0;background:linear-gradient(180deg,#0A0E1A 0%,#1a1f35 100%);flex-direction:column;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,0.6);transform:translateY(-120%);opacity:0;pointer-events:none;transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);z-index:9999;border-top:3px solid #00C8F0} .nav.open{transform:translateY(0);opacity:1;pointer-events:all!important} .nav-link{width:100%;padding:16px 20px;border-bottom:1px solid rgba(0,200,240,0.15);font-size:16px;font-weight:600;color:#fff;letter-spacing:1px} .nav-link:hover{background:rgba(0,200,240,0.15);color:#00C8F0;border-left:3px solid #00C8F0;padding-left:17px} } /* FIX HEADER HEIGHT FOR MOBILE */ @media(max-width:768px){ .header{height:70px!important;min-height:70px} .header-inner{height:70px!important;min-height:70px} .logo-text span{font-size:18px!important} }