* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;}
body {overflow-x: hidden;color: #333;background-color: #f8f9fa;}
/* 顶部固定区域容器 */
.top-fixed-container {position: fixed;top: 0;left: 0;width: 100%;height: 80px;z-index: 1000;}
/* 顶部固定区域背景 - 透明效果 */
.top-fixed-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.95);opacity: 0.2;transition: all 0.3s ease;}
/* 滚动时顶部导航栏背景样式变化 */
.top-fixed-container.scrolled .top-fixed-bg {opacity: 0.2;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
/* 顶部固定区域内容 - 不透明 */
.top-fixed-content {position: relative;height: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0 40px;}
/* Logo样式 */
.logo {height: 40px;display: flex;align-items: center;gap: 12px;}
.logo-image {height: 100%;width: auto;max-width: 200px;}
.logo-title {font-weight: 500;font-size: 22px;color: #FFFFFF;letter-spacing: 1px;}
/* 导航菜单容器 - 在右侧 */
.nav-menu {display: flex;align-items: center;gap: 40px;}
/* 产品介绍样式 */
.nav-link {font-weight: 500;font-size: 22px;color: #FFFFFF;text-decoration: none;transition: color 0.3s ease;cursor: pointer;}
.nav-link:hover {color: #06C196;}
/* 下载按钮样式 */
.download-btn {background: #06C196;border-radius: 25px;padding: 12px 32px;font-weight: 500;font-size: 20px;color: #FFFFFF;text-decoration: none;border: none;cursor: pointer;transition: all 0.3s ease;display: inline-block;}
.download-btn:hover {background: #05A882;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(6, 193, 150, 0.3);}
/* 全屏页面区域 */
.fullpage-section {width: 100%;height: 100vh;position: relative;display: flex;align-items: center;justify-content: center;padding-top: 80px; /* 为顶部固定区域留出空间 */}
/* 背景图片容器 */
.bg-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;z-index: -1;}
/* 第一页特定样式 - 红框区域 */
.page1-content {width: 100%;max-width: 1200px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 20px;}
/* 红框标题区域 */
.red-box-container {position: relative;margin-bottom: 60px;width: 100%;max-width: 800px;animation: glow 3s infinite;}
.red-box-container img{width: 100%;max-width: 408px;}
.red-box-title {font-size: 56px;font-weight: 700;color: #FFFFFF;margin-bottom: 20px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);letter-spacing: 2px;}
/* 聊天气泡图标样式 */
.chat-bubble {width: 80px;height: 80px;margin: 0 auto 30px;display: flex;align-items: center;justify-content: center;}
.chat-bubble-icon {width: 100%;height: 100%;object-fit: contain;}
/* 平台图标区域 */
.platforms-section {width: 100%;max-width: 900px;margin-top: 200px;}
.platforms-title {font-size: 24px;font-weight: 500;color: #FFFFFF;margin-bottom: 40px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}
.platforms-grid {display: flex;justify-content: center;gap: 100px;flex-wrap: wrap;}
.platform-item {display: flex;flex-direction: column;align-items: center;gap: 15px;min-width: 140px;position: relative;cursor: pointer;text-decoration: none;transition: transform 0.3s ease;}
.platform-item:hover {transform: translateY(-5px);animation: glow 2s infinite;}
.platform-item a{text-decoration: none;position: relative;display: flex;flex-direction: column;align-items: center;gap: 15px;min-width: 140px;cursor: pointer;}
.platform-icon-wrapper {display: flex;align-items: center;gap: 12px;}
.platform-img {width: 48px;height: 48px;object-fit: contain;}
.platform-logo {width: 48px;height: 48px;object-fit: contain;}
.platform-name {font-size: 22px;font-weight: 500;color: #FFFFFF;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}
/* 悬停图片样式 */
.platform-hover-image {position: absolute;top: -260px;left: 50%;transform: translateX(-50%);width: 210px;height: 240px;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;pointer-events: none;z-index: 100;border-radius: 12px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);display: flex;align-items: center;justify-content: center;background-color: #FFFFFF;}
.platform-item:hover .platform-hover-image {opacity: 1;visibility: visible;}
.hover-image {width: 80%;height: 80%;object-fit: contain;max-width: 100%;max-height: 100%;}
/* 悬停图片连接线 */
.platform-hover-image::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 2px;height: 40px;background: rgba(255, 255, 255, 0.6);}
/* 向下箭头 */
.down-arrow {position: absolute;bottom: 60px;left: 50%;transform: translateX(-50%);width: 50px;height: 50px;background-color: rgba(255, 255, 255, 0.9);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;z-index: 10;}
.down-arrow:hover {background-color: white;transform: translateX(-50%) translateY(5px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}
.down-arrow i {font-size: 24px;color: #06C196;}
.web-version {position: relative;cursor: pointer;}
        
.web-version:hover::after {content: attr(data-device-tip);position: absolute;top: -40px;left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10;
        }
        
        .web-version:hover::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
        }
/* 响应式设计 */
@media (max-width: 1024px) {
.top-fixed-content {padding: 0 30px;}
.nav-menu {gap: 30px;}
.logo-title {font-size: 20px;}
.nav-link {font-size: 20px;}
.download-btn {padding: 10px 26px;font-size: 18px;}
.red-box-title {font-size: 48px;}
.platforms-grid {gap: 40px;}
.platform-hover-image {width: 240px;height: 260px;top: -280px;}}
@media (max-width: 768px) {
.top-fixed-container {height: 70px;}
.top-fixed-content {padding: 0 20px;}
.logo {height: 35px;}
.logo-title {font-size: 18px;}
.nav-menu {gap: 20px;}
.nav-link {font-size: 18px;}
.download-btn {padding: 8px 22px;font-size: 16px;}
.fullpage-section {padding-top: 70px;}
.red-box-title {font-size: 36px;}
.chat-bubble {width: 60px;height: 60px;}
.platforms-grid {gap: 30px;}
.platform-item {min-width: 120px;}
.platform-img, .platform-logo {width: 36px;height: 36px;}
.platform-name {font-size: 18px;}
.platform-hover-image {width: 200px;height: 220px;top: -240px;}}
@media (max-width: 640px) {
.top-fixed-content {padding: 0 15px;}
.logo-title {font-size: 16px;}
.nav-menu {gap: 15px;}
.nav-link {font-size: 16px;}
.download-btn {padding: 6px 18px;font-size: 14px;}
.red-box-title {font-size: 32px;}
.platforms-grid {gap: 20px;}
.platform-item {min-width: 100px;}
.platform-img, .platform-logo {width: 32px;height: 32px;}
.platform-name {font-size: 16px;}
.platform-hover-image {width: 180px;height: 200px;top: -220px;}}
@media (max-width: 480px) {
.top-fixed-container {height: auto;}
.top-fixed-content {flex-direction: column;padding: 10px;}
.logo {margin-bottom: 10px;}
.nav-menu {margin-bottom: 10px;gap: 10px;}
.fullpage-section {padding-top: 140px;}
.red-box-title {font-size: 28px;}
.platforms-grid {flex-direction: column;align-items: center;gap: 30px;}
.platform-hover-image {display: none;}
.platforms-section {margin-top:0;}
}

@keyframes glow {
    0% {filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1))}
	50% {filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.2))}
    100% {filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1))}
}