* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0a0f; background-image: linear-gradient(145deg, #0f0f1a, #05050a); font-family: 'Inter', system-ui, 'Segoe UI', 'Poppins', 'Helvetica Neue', sans-serif; color: #f0f0f0; line-height: 1.5; } .first-world { max-width: 100%; overflow-x: hidden; } /* 冠军领奖台式英雄区 */ .podium-hero { position: relative; min-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(125deg, #0f172a, #020617); overflow: hidden; } .podium-glow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 50% 30%, rgba(59,130,246,0.15), transparent 70%); pointer-events: none; } .podium-content { position: relative; z-index: 2; max-width: 800px; padding: 2rem; } .podium-content h1 { font-size: 5rem; font-weight: 900; background: linear-gradient(135deg, #fbbf24, #f97316, #ef4444); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: 6px; margin-bottom: 1rem; } .podium-tag { font-size: 1.2rem; color: #fcd34d; margin-bottom: 2rem; } .btn-first { background: #f97316; border: none; padding: 0.8rem 2rem; border-radius: 3rem; font-weight: 600; color: white; cursor: pointer; transition: 0.2s; text-decoration: none; display: inline-block; margin: 0 0.5rem; box-shadow: 0 4px 14px rgba(249,115,22,0.4); } .btn-first-outline { background: transparent; border: 2px solid #fbbf24; padding: 0.8rem 2rem; border-radius: 3rem; font-weight: 600; color: #fbbf24; cursor: pointer; transition: 0.2s; text-decoration: none; display: inline-block; } .btn-first:hover { background: #ea580c; transform: translateY(-2px); } .btn-first-outline:hover { background: #fbbf24; color: #020617; } @media (max-width: 768px) { .podium-content h1 { font-size: 2.8rem; } .podium-hero { min-height: 70vh; } } /* 冠军榜单 - 前三名大卡片 */ .champion-row { max-width: 1200px; margin: -3rem auto 2rem; padding: 0 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; position: relative; z-index: 5; } .champ-card { flex: 1; min-width: 240px; background: #1e293bcc; backdrop-filter: blur(12px); border-radius: 2rem; overflow: hidden; transition: 0.3s; border: 1px solid #fbbf2440; text-align: center; } .champ-card:hover { transform: translateY(-8px); border-color: #fbbf24; box-shadow: 0 20px 30px -12px rgba(251,191,36,0.3); } .champ-rank { background: #f97316; display: inline-block; padding: 0.2rem 1rem; border-radius: 2rem; font-weight: bold; margin-top: 1rem; } .champ-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .champ-body { padding: 1rem; } /* 主内容 - 瀑布流分栏 */ .main-first { max-width: 1400px; margin: 2rem auto; padding: 0 1rem; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } @media (max-width: 992px) { .main-first { grid-template-columns: 1fr; } } /* 左侧 - 大卡片列表 */ .featured-list { display: flex; flex-direction: column; gap: 1.5rem; } .featured-item { display: flex; gap: 1rem; background: #111827cc; border-radius: 1.5rem; overflow: hidden; transition: 0.2s; border: 1px solid #3b82f630; } .featured-item:hover { transform: translateX(6px); border-color: #fbbf24; } .featured-img { width: 140px; aspect-ratio: 16 / 9; object-fit: cover; } .featured-info { padding: 1rem; flex: 1; } @media (max-width: 560px) { .featured-item { flex-direction: column; } .featured-img { width: 100%; aspect-ratio: 16 / 9; } } /* 右侧 - 垂直信息栏 */ .first-sidebar { background: #0f172a; border-radius: 1.5rem; padding: 1.2rem; height: fit-content; position: sticky; top: 20px; } .sidebar-section { margin-bottom: 1.5rem; border-bottom: 1px solid #334155; padding-bottom: 1rem; } .sidebar-section:last-child { border-bottom: none; } .sidebar-title { font-size: 1.2rem; font-weight: 600; color: #fbbf24; margin-bottom: 0.8rem; } .rank-row { display: flex; gap: 0.8rem; margin-bottom: 0.8rem; align-items: center; } .rank-num { width: 28px; height: 28px; background: #f97316; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; } /* 经典区域 - 横向滚动 */ .classic-first { max-width: 1400px; margin: 2rem auto; padding: 0 1rem; } .section-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; color: #fbbf24; border-left: 4px solid #f97316; padding-left: 1rem; } .classic-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; } .classic-scroll-item { flex: 0 0 200px; background: #111827; border-radius: 1.2rem; overflow: hidden; transition: 0.2s; } .classic-scroll-item:hover { transform: scale(1.02); box-shadow: 0 8px 18px rgba(251,191,36,0.2); } .classic-scroll-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; } .classic-scroll-info { padding: 0.6rem; text-align: center; font-size: 0.8rem; } footer { background: #020617; padding: 2rem; text-align: center; margin-top: 2rem; border-top: 1px solid #f9731640; }

第一影院

第一选择 · 第一享受

冠军观影榜首片单

🏆 第一精选 · 热播推荐

第一影院是首选在线影视网站，提供海量电影、电视剧免费观看，每日同步更新最新热播剧集与院线大片。我们追求极致高清画质、秒级响应、无广告干扰，让你沉浸于纯粹的视听盛宴。第一影院涵盖科幻、悬疑、爱情、古装、动作等多元题材，满足所有影迷的追剧需求。每日更新海量资源库，精选全球优质内容，第一影院致力于打造最专业、最首选的第一影视平台。

🏆 第一典藏 · 影史经典