* {margin: 0;padding: 0;box-sizing: border-box;} body {font-family: 'Microsoft YaHei', Arial, sans-serif;line-height: 1.6;color: #333;background-color: #f5f5f5;} .container {max-width: 1200px;margin: 0 auto;padding: 0 20px;} .navbar {background: white;box-shadow: 0 2px 10px rgba(0,0,0,0.1);position: sticky;top: 0;z-index: 1001;padding: 15px 0;} .navbar .container {display: flex;align-items: center;justify-content: space-between;} .navbar-logo a {display: flex;align-items: center;text-decoration: none;color: #2c3e50;} .logo-text {font-size: 24px;font-weight: bold;color: #3498db;margin-right: 10px;} .logo-tagline {font-size: 14px;color: #7f8c8d;} .navbar-menu ul {display: flex;list-style: none;gap: 30px;} .navbar-menu a {text-decoration: none;color: #2c3e50;font-weight: 500;transition: color 0.3s ease;position: relative;} .navbar-menu a:hover {color: #3498db;} .navbar-menu a.active {color: #3498db;} .navbar-menu a.active::after {content: '';position: absolute;bottom: -5px;left: 0;width: 100%;height: 2px;background: #3498db;} .dropdown {position: relative;} .dropdown-menu {position: absolute;top: 100%;left: 0;background: white;box-shadow: 0 4px 10px rgba(0,0,0,0.1);border-radius: 8px;padding: 10px 0;min-width: 150px;opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.3s ease;z-index: 1002;} .dropdown:hover .dropdown-menu {opacity: 1;visibility: visible;transform: translateY(0);} .dropdown-menu a {display: block;padding: 10px 20px;color: #2c3e50;text-decoration: none;transition: background-color 0.3s ease;} .dropdown-menu a:hover {background-color: #f8f9fa;color: #3498db;} .navbar-actions {display: flex;gap: 15px;align-items: center;} .btn {padding: 8px 20px;border-radius: 25px;font-weight: 500;transition: all 0.3s ease;cursor: pointer;} .btn-primary {background: #3498db;color: white;border: none;} .btn-primary:hover {background: #2980b9;transform: translateY(-2px);} .btn-outline {background: transparent;color: #3498db;border: 1px solid #3498db;} .btn-outline:hover {background: #3498db;color: white;} .navbar-toggle {display: none;cursor: pointer;} .toggle-icon {display: block;width: 25px;height: 3px;background: #2c3e50;margin: 5px 0;transition: all 0.3s ease;} .breadcrumb {background: #f8f9fa;padding: 10px 0;border-bottom: 1px solid #e9ecef;margin-top: 70px;} .breadcrumb ul {display: flex;list-style: none;gap: 10px;align-items: center;} .breadcrumb li {font-size: 14px;} .breadcrumb li a {color: #3498db;text-decoration: none;transition: color 0.3s ease;} .breadcrumb li a:hover {color: #2980b9;} .breadcrumb li:not(:last-child)::after {content: '>';margin-left: 10px;color: #7f8c8d;} .breadcrumb li:last-child span {color: #2c3e50;font-weight: 500;} .floating-download {position: fixed;top: 70px;left: 0;right: 0;background-color: #2c3e50;color: white;text-align: center;padding: 12px 0;z-index: 999;box-shadow: 0 2px 10px rgba(0,0,0,0.1);} .floating-download a {color: white;text-decoration: none;font-weight: bold;font-size: 16px;transition: color 0.3s ease;} .floating-download a:hover {color: #3498db;} header {background: linear-gradient(135deg, #3498db, #2980b9);color: white;padding: 100px 20px 80px;text-align: center;margin-top: 50px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);} header h1 {font-size: 36px;margin-bottom: 15px;text-shadow: 2px 2px 4px rgba(0,0,0,0.2);} header p {font-size: 18px;opacity: 0.9;max-width: 600px;margin: 0 auto;} main {max-width: 1200px;margin: 0 auto;padding: 40px 20px;} section {background: white;border-radius: 8px;padding: 30px;margin-bottom: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;} section:hover {transform: translateY(-5px);box-shadow: 0 5px 20px rgba(0,0,0,0.12);} section h2 {color: #2c3e50;margin-bottom: 20px;font-size: 24px;position: relative;padding-bottom: 10px;} section h2::after {content: '';position: absolute;bottom: 0;left: 0;width: 60px;height: 3px;background: #3498db;border-radius: 3px;} .features ul {list-style: none;display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;} .features li {padding: 15px;background: #f8f9fa;border-radius: 6px;border-left: 4px solid #3498db;transition: all 0.3s ease;} .features li:hover {background: #e3f2fd;transform: translateX(5px);} .cta {text-align: center;background: linear-gradient(135deg, #2c3e50, #34495e);color: white;padding: 60px 20px;} .cta h2 {color: white;margin-bottom: 30px;} .cta h2::after {background: white;} .btn-download {display: inline-block;background: #3498db;color: white;padding: 15px 40px;border-radius: 50px;text-decoration: none;font-size: 18px;font-weight: bold;transition: all 0.3s ease;box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);} .btn-download:hover {background: #2980b9;transform: translateY(-3px);box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);} .differentiation p {font-size: 16px;line-height: 1.8;color: #555;} .download-links ul {list-style: none;display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;margin-top: 30px;} .download-links li {text-align: center;padding: 20px;background: #f8f9fa;border-radius: 8px;transition: all 0.3s ease;} .download-links li:hover {background: #e3f2fd;transform: translateY(-5px);} .download-links a {display: block;color: #3498db;text-decoration: none;font-weight: bold;transition: color 0.3s ease;} .download-links a:hover {color: #2980b9;} .faq ul {list-style: none;} .faq li {padding: 15px;border-bottom: 1px solid #eee;cursor: pointer;transition: all 0.3s ease;position: relative;} .faq li:hover {background: #f8f9fa;padding-left: 25px;} .faq li::before {content: '▶';position: absolute;left: 5px;color: #3498db;transition: transform 0.3s ease;} .faq li:hover::before {transform: translateX(5px);} .stats {display: flex;justify-content: center;gap: 40px;margin-top: 30px;flex-wrap: wrap;} .stat-item {text-align: center;padding: 20px;background: rgba(255, 255, 255, 0.1);border-radius: 8px;min-width: 120px;} .stat-number {display: block;font-size: 24px;font-weight: bold;margin-bottom: 5px;} .stat-label {display: block;font-size: 14px;opacity: 0.8;} .diff-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;} .diff-item {padding: 20px;background: #f8f9fa;border-radius: 8px;transition: all 0.3s ease;} .diff-item:hover {background: #e3f2fd;transform: translateY(-5px);} .diff-item h3 {color: #3498db;margin-bottom: 10px;} .testimonials {background: #f8f9fa;} .testimonial-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;} .testimonial-item {background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.05);transition: all 0.3s ease;} .testimonial-item:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);} .testimonial-content p {font-style: italic;margin-bottom: 15px;line-height: 1.6;} .testimonial-author {display: flex;justify-content: space-between;align-items: center;} .author-name {font-weight: bold;color: #3498db;} .author-rating {color: #f39c12;} .faq-list {list-style: none;} .faq-item {margin-bottom: 10px;border: 1px solid #eee;border-radius: 8px;overflow: hidden;} .faq-question {padding: 15px;background: #f8f9fa;cursor: pointer;font-weight: bold;transition: all 0.3s ease;position: relative;} .faq-question:hover {background: #e3f2fd;} .faq-question::after {content: '▼';position: absolute;right: 15px;transition: transform 0.3s ease;} .faq-answer {padding: 0 15px;max-height: 0;overflow: hidden;transition: all 0.3s ease;background: white;} .faq-answer p {padding: 15px 0;margin: 0;} footer {background: #2c3e50;color: white;padding: 40px 20px;margin-top: 40px;} .footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;margin-bottom: 30px;} .footer-section h3 {margin-bottom: 15px;color: #3498db;} .footer-section ul {list-style: none;} .footer-section ul li {margin-bottom: 10px;} .footer-section ul li a {color: white;text-decoration: none;opacity: 0.8;transition: opacity 0.3s ease;} .footer-section ul li a:hover {opacity: 1;color: #3498db;} .footer-bottom {border-top: 1px solid rgba(255, 255, 255, 0.1);padding-top: 20px;text-align: center;} .footer-bottom p {opacity: 0.8;margin-bottom: 10px;} .footer-bottom a {color: white;text-decoration: none;opacity: 0.8;transition: opacity 0.3s ease;} .footer-bottom a:hover {opacity: 1;color: #3498db;} .download-tip {font-size: 16px;font-weight: bold;margin-top: 10px;color: rgba(255, 255, 255, 0.9);} .download-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;margin-top: 30px;} .download-item {background: #f8f9fa;border-radius: 8px;padding: 30px;text-align: center;transition: all 0.3s ease;border: 1px solid #eee;} .download-item:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);border-color: #3498db;} .download-icon {width: 80px;height: 80px;background: #3498db;border-radius: 50%;margin: 0 auto 20px;display: flex;align-items: center;justify-content: center;font-size: 32px;color: white;} .download-icon.windows {background: #0078d7;} .download-icon.macos {background: #007aff;} .download-icon.ios {background: #5ac8fa;} .download-icon.android {background: #34a853;} .download-btn {display: inline-block;background: #3498db;color: white;padding: 10px 20px;border-radius: 25px;text-decoration: none;font-weight: bold;margin-top: 20px;transition: all 0.3s ease;} .download-btn:hover {background: #2980b9;transform: translateY(-2px);} .features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;} .feature-item {padding: 20px;background: #f8f9fa;border-radius: 8px;transition: all 0.3s ease;text-align: center;} .feature-item:hover {background: #e3f2fd;transform: translateY(-5px);} .feature-icon {width: 60px;height: 60px;background: #3498db;border-radius: 50%;margin: 0 auto 15px;display: flex;align-items: center;justify-content: center;font-size: 24px;color: white;} .feature-icon.speed {background: #e74c3c;} .feature-icon.multi-platform {background: #9b59b6;} .feature-icon.security {background: #27ae60;} .feature-icon.streaming {background: #f39c12;} .installation-guide {background: #f8f9fa;} .guide-steps {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;margin-top: 30px;} .guide-step {background: white;padding: 30px;border-radius: 8px;text-align: center;transition: all 0.3s ease;position: relative;} .guide-step:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);} .step-number {width: 40px;height: 40px;background: #3498db;color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;margin: 0 auto 20px;} @media (max-width: 992px) {.navbar-menu {display: none;} .navbar-actions {display: none;} .navbar-toggle {display: block;} .floating-download {top: 60px;} .breadcrumb {margin-top: 60px;}} @media (max-width: 768px) {header {padding: 80px 20px 60px;} header h1 {font-size: 28px;} .stats {gap: 20px;} .stat-item {min-width: 100px;padding: 15px;} .stat-number {font-size: 20px;} main {padding: 20px;} section {padding: 20px;} .features ul {grid-template-columns: 1fr;} .diff-content {grid-template-columns: 1fr;} .testimonial-list {grid-template-columns: 1fr;} .footer-content {grid-template-columns: 1fr;text-align: center;} .download-grid {grid-template-columns: 1fr;} .features-grid {grid-template-columns: 1fr;} .guide-steps {grid-template-columns: 1fr;} .navbar-logo .logo-tagline {display: none;} .floating-download {top: 60px;} .breadcrumb {margin-top: 60px;} .breadcrumb ul {font-size: 12px;gap: 5px;} .breadcrumb li:not(:last-child)::after {margin-left: 5px;}} @keyframes fadeIn {from {opacity: 0;transform: translateY(20px);} to {opacity: 1;transform: translateY(0);}} section {animation: fadeIn 0.6s ease-out;} section:nth-child(2) {animation-delay: 0.2s;} section:nth-child(3) {animation-delay: 0.4s;} section:nth-child(4) {animation-delay: 0.6s;} section:nth-child(5) {animation-delay: 0.8s;} ::-webkit-scrollbar {width: 8px;} ::-webkit-scrollbar-track {background: #f1f1f1;} ::-webkit-scrollbar-thumb {background: #3498db;border-radius: 4px;} ::-webkit-scrollbar-thumb:hover {background: #2980b9;} .loading {display: inline-block;width: 20px;height: 20px;border: 3px solid rgba(52, 152, 219, 0.3);border-radius: 50%;border-top-color: #3498db;animation: spin 1s ease-in-out infinite;} @keyframes spin {to { transform: rotate(360deg); } }