/* ========================================================================== 统一导航组件样式 - 适配桌面端和移动端 版本:2.1 - 支持无障碍访问 更新时间:2026-01-13 ========================================================================== */ .skip-to-content{position:absolute;top:-40px;left:0;background:var(--primary-color,#0ABAB5);color:white;padding:8px 16px;text-decoration:none;border-radius:0 0 8px 0;z-index:10000;transition:top 0.3s ease}.skip-to-content:focus{top:0}*:focus-visible{outline:3px solid #0ABAB5;outline-offset:2px;border-radius:4px}@media (prefers-contrast:high){:root{--primary-color:#008B8B;--secondary-color:#000000;--neutral-color:#333333}.nav a,.dropdown-btn{border:2px solid transparent}.nav a:focus,.dropdown-btn:focus{border-color:#000000}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.top-bar{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);padding:6px 0;border-bottom:1px solid var(--border-light,#e5e7eb);position:relative;z-index:1001;box-shadow:0 2px 8px rgba(0,0,0,0.04)}.top-bar .container{display:flex;align-items:center;justify-content:center;gap:20px;font-size:11px;color:var(--neutral-color,#64748b)}.top-bar-item{display:flex;align-items:center;gap:6px;padding:2px 8px;transition:color 0.3s ease;cursor:pointer}.top-bar-item:hover{color:var(--primary-color,#0ABAB5)}.top-bar-item i{color:var(--primary-color,#0ABAB5);font-size:11px}.header{background:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%) !important;box-shadow:0 4px 12px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.08);position:sticky;top:30px;z-index:1000;border-bottom:1px solid var(--border-light,#e5e7eb);transition:all 0.3s ease;height:48px;display:flex;align-items:center}.header .container{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:100%}.logo-section{display:flex;flex-direction:column;position:relative}.logo{font-size:28px;font-weight:bold;color:var(--primary-color,#0ABAB5);text-decoration:none;letter-spacing:1px;position:relative;display:inline-block;transition:color 0.3s ease}.logo:hover{color:var(--primary-color,#0ABAB5);opacity:0.8}.logo img{height:25px;width:auto}.logo-slogan{font-size:12px;color:var(--neutral-color,#64748b);margin-top:2px}.nav{display:flex;align-items:center;gap:20px}.nav a{color:var(--secondary-color,#1e293b) !important;text-decoration:none;font-size:14px;font-weight:500;transition:color 0.3s ease;position:relative;padding:6px 12px;white-space:nowrap}.nav a::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--primary-color,#0ABAB5);transition:width 0.3s ease}.nav a:hover{color:var(--primary-color,#0ABAB5)}.nav a:hover::after{width:80%}.nav .dropdown{position:relative}.nav .dropdown-btn{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 12px;transition:color 0.3s ease;color:var(--secondary-color,#1e293b) !important;font-size:14px;white-space:nowrap;border:2px solid transparent;background:none;text-decoration:none}.nav .dropdown-btn:focus{outline:3px solid #0ABAB5;outline-offset:2px}.nav .dropdown-btn i{transition:transform 0.3s ease}.nav .dropdown:hover .dropdown-btn{color:var(--primary-color,#0ABAB5)}.nav .dropdown:hover .dropdown-btn i{transform:rotate(180deg)}.nav .dropdown-content{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);background:white;min-width:800px;max-width:1000px;box-shadow:0 12px 40px rgba(0,0,0,0.12),0 4px 12px rgba(0,0,0,0.08);border-radius:12px;padding:0;display:none;border:1px solid #e2e8f0;opacity:0;animation:fadeInDown 0.3s ease forwards;overflow:hidden;pointer-events:none}.nav .dropdown:hover .dropdown-content,.nav .dropdown-content:hover{display:grid;grid-template-columns:220px 1fr;pointer-events:auto}.nav .dropdown{position:relative}.nav .dropdown::before{content:'';position:absolute;top:100%;left:0;right:0;height:20px;background:transparent}.nav .dropdown::after{content:'';position:absolute;top:100%;left:-20px;right:-20px;height:calc(100vh - 100%);background:transparent;pointer-events:none;z-index:-1}@keyframes fadeInDown{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes fadeOutUp{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-10px);display:none}}.dropdown-sidebar{background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);padding:20px 0;position:relative;border-right:1px solid #e2e8f0}.dropdown-category{padding:12px 20px;color:#475569;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s ease;position:relative;border-left:3px solid transparent;display:flex;align-items:center;gap:10px}.dropdown-category:hover,.dropdown-category.active{background:linear-gradient(90deg,rgba(10,186,181,0.12) 0%,rgba(10,186,181,0.06) 100%);color:#0ABAB5;border-left-color:#0ABAB5;box-shadow:inset 0 1px 3px rgba(10,186,181,0.1)}.dropdown-category i{font-size:14px;min-width:16px}.dropdown-main{padding:30px 35px;background:linear-gradient(135deg,#fafbfc 0%,#f8fafc 50%,#fafbfc 100%);position:relative;max-height:600px;overflow-y:auto}.dropdown-main::before{content:'';position:absolute;top:0;right:0;width:200px;height:200px;background:radial-gradient(circle at center,rgba(10,186,181,0.04) 0%,transparent 70%);pointer-events:none}.dropdown-main::after{content:'';position:absolute;bottom:0;left:0;width:150px;height:150px;background:radial-gradient(circle at center,rgba(59,130,246,0.03) 0%,transparent 70%);pointer-events:none}.dropdown-main::-webkit-scrollbar{width:6px}.dropdown-main::-webkit-scrollbar-track{background:#f1f5f9}.dropdown-main::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.dropdown-main::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dropdown-section{margin-bottom:28px;position:relative}.dropdown-section:last-child{margin-bottom:0}.dropdown-header{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;padding:8px 12px;border-bottom:none;position:relative;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:linear-gradient(90deg,rgba(10,186,181,0.08) 0%,rgba(10,186,181,0.02) 100%);border-left:3px solid #0ABAB5;border-radius:0 6px 6px 0}.dropdown-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px}.nav .dropdown-content a{display:flex;align-items:center;padding:11px 16px;color:#1e293b;font-size:14px;font-weight:500;margin:0;position:relative;border-radius:8px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);background:transparent;text-decoration:none;line-height:1.4;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif}.nav .dropdown-content a::after{display:none}.nav .dropdown-content a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#0ABAB5 0%,rgba(10,186,181,0.3) 100%);transition:width 0.25s cubic-bezier(0.4,0,0.2,1);border-radius:8px 0 0 8px}.nav .dropdown-content a:hover{background:linear-gradient(90deg,rgba(10,186,181,0.08) 0%,rgba(10,186,181,0.03) 100%);color:#0ABAB5;padding-left:20px;transform:translateX(2px);box-shadow:0 2px 6px rgba(10,186,181,0.1)}.nav .dropdown-content a:hover::before{width:3px}.nav .dropdown-content a i{margin-right:10px;font-size:14px;color:#cbd5e1;transition:all 0.2s ease;min-width:16px;text-align:center}.nav .dropdown-content a:hover i{color:#0ABAB5;transform:scale(1.1)}.dropdown-featured{background:linear-gradient(135deg,rgba(10,186,181,0.08) 0%,rgba(10,186,181,0.04) 100%) !important;border:1px solid #0ABAB5 !important;font-weight:600 !important;color:#0ABAB5 !important}.dropdown-featured:hover{background:linear-gradient(135deg,rgba(10,186,181,0.12) 0%,rgba(10,186,181,0.06) 100%) !important;box-shadow:0 4px 12px rgba(10,186,181,0.25);color:#098F6D !important}.dropdown-featured i{color:#0ABAB5 !important}.dropdown-featured:hover i{color:#098F6D !important}.dropdown-overview{background:linear-gradient(90deg,rgba(10,186,181,0.12) 0%,rgba(10,186,181,0.06) 100%) !important;border:1px solid rgba(10,186,181,0.3) !important;color:#0ABAB5 !important;font-weight:600 !important;position:relative}.dropdown-overview::after{content:'\f35d';font-family:'Font Awesome 5 Free';font-weight:900;margin-left:8px;transition:transform 0.3s ease}.dropdown-overview:hover{background:linear-gradient(90deg,rgba(10,186,181,0.18) 0%,rgba(10,186,181,0.08) 100%) !important;border-color:#0ABAB5 !important;transform:translateX(2px)}.dropdown-overview:hover::after{transform:translateX(4px)}.dropdown-overview i{color:#0ABAB5 !important}.dropdown-content-group{display:none}.dropdown-content-group.active{display:block}.nav-actions{display:flex;gap:12px;align-items:center}.btn{padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;position:relative;overflow:hidden}.contact-btn{padding:10px 28px;background:linear-gradient(135deg,#0ABAB5 0%,#0891b2 100%);color:white;border-radius:20px;font-size:14px;font-weight:600;text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 12px rgba(10,186,181,0.3),0 2px 4px rgba(10,186,181,0.2),inset 0 1px 0 rgba(255,255,255,0.2);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.1);letter-spacing:0.3px}.contact-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transition:left 0.6s ease}.contact-btn::after{content:'\f0a9';font-family:'Font Awesome 5 Free';font-weight:900;margin-left:8px;transition:transform 0.3s ease;display:inline-block}.contact-btn:hover{background:linear-gradient(135deg,#0891b2 0%,#0e7490 100%);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 24px rgba(10,186,181,0.45),0 4px 8px rgba(10,186,181,0.3),inset 0 1px 0 rgba(255,255,255,0.25)}.contact-btn:hover::before{left:100%}.contact-btn:hover::after{transform:translateX(3px)}.mobile-menu-btn{display:none;background:none;border:none;font-size:24px;color:#333;cursor:pointer}/* ========================================================================== 移动端适配 - 768px及以下 ========================================================================== */ @media (max-width:768px){.top-bar .container{flex-wrap:wrap;gap:10px;font-size:10px}.top-bar-item{padding:2px 6px}.header{top:0;height:60px}.logo{font-size:22px}.logo-slogan{font-size:10px}.nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.95);flex-direction:column;padding:80px 20px 20px;z-index:9999;overflow-y:auto}.nav.active{display:flex}.nav a,.nav .dropdown-btn{color:white !important;padding:15px 20px;font-size:16px;width:100%;text-align:left;border-bottom:1px solid rgba(255,255,255,0.1)}.nav .dropdown-content{position:static;background:rgba(255,255,255,0.05);border:none;box-shadow:none;padding:10px 0;margin:0;display:none;grid-template-columns:1fr;min-width:auto;transform:none;animation:none}.nav .dropdown.active .dropdown-content{display:block}.nav .dropdown-sidebar{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)}.nav .dropdown-category{color:rgba(255,255,255,0.7)}.nav .dropdown-category.active,.nav .dropdown-category:hover{color:#0ABAB5;background:rgba(10,186,181,0.15)}.nav .dropdown-main{padding:15px;max-height:none}.nav .dropdown-content a{color:rgba(255,255,255,0.8) !important;padding:10px 20px;font-size:14px}.nav .dropdown-content a:hover{color:white !important;background:rgba(255,255,255,0.1)}.nav-actions{display:none}.mobile-menu-btn{display:block;z-index:10000}}/* ========================================================================== 平板端适配 - 769px到1024px ========================================================================== */ @media (min-width:769px) and (max-width:1024px){.nav .dropdown-content{min-width:700px;max-width:900px}.dropdown-sidebar{width:200px}.dropdown-main{padding:25px 30px}.dropdown-items{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}/* ========================================================================== 小屏幕移动端 - 480px及以下 ========================================================================== */ @media (max-width:480px){.top-bar{padding:4px 0}.top-bar .container{gap:8px;font-size:9px}.header{height:55px}.logo{font-size:20px}.contact-btn{padding:8px 20px;font-size:13px}}