/* ========== 创优教育 ========== */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:16px; -webkit-text-size-adjust:100%; }

body {
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.7; color:#333; background:#f8f9fa;
  padding-top:130px;
  -webkit-font-smoothing:antialiased;
}

.container { max-width:90%; margin:0 auto; padding:0 20px; }
a { text-decoration:none; color:inherit; }
ul,ol { list-style:none; }
img { max-width:100%; height:auto; display:block; }
svg { display:block; }

/* ========== 顶部搜索栏 ========== */
.header-top {
  position:fixed; top:0; left:0; right:0; z-index:1001;
  background:#fff; border-bottom:1px solid #e8ecf1;
}
.header-top .container {
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 20px;
}
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo svg { width:30px; height:30px; color:#1a56db; flex-shrink:0; }
.brand-name { font-size:20px; font-weight:700; color:#0f172a; letter-spacing:-0.5px; }
.brand-url { font-size:12px; color:#94a3b8; }

.header-center { flex:1; max-width:440px; margin:0 40px; }
.search-form { display:flex; }
.search-input {
  flex:1; padding:9px 16px; border:1px solid #dde1e7; border-right:none;
  border-radius:8px 0 0 8px; font-size:14px; outline:none; background:#f8fafc;
  transition:border-color .2s;
}
.search-input:focus { border-color:#1a56db; background:#fff; }
.search-btn {
  padding:9px 20px; background:#1a56db; color:#fff; border:none;
  border-radius:0 8px 8px 0; cursor:pointer; font-size:14px; font-weight:500;
}
.search-btn:hover { background:#1546b8; }

.header-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.login-btn,.register-btn { font-size:14px; color:#475569; transition:color .2s; }
.login-btn:hover,.register-btn:hover { color:#1a56db; }
.sep { color:#dde1e7; }

/* ========== 导航栏 ========== */
.header-bottom {
  position:fixed; top:64px; left:0; right:0; z-index:1000;
  background:#fff; border-bottom:1px solid #e8ecf1;
  transition:transform .25s ease;
}
.header-bottom.hidden { transform:translateY(-100%); }
.header-bottom.visible { transform:translateY(0); }

.top-trigger {
  position:fixed; top:0; left:0; right:0; height:130px; z-index:998; pointer-events:none;
}

.main-nav { padding:14px 0; }
.main-nav ul {
  display:flex; gap:12px; flex-wrap:nowrap;
  max-width:1200px; margin:0 auto; padding:0 20px;
}
.nav-item {
  display:flex; align-items:center; gap:12px;
  background:#f8fafc; border:1px solid #e8ecf1; border-radius:10px;
  padding:12px 16px; flex:0 0 auto; min-width:180px;
  cursor:pointer; transition:background .2s,border-color .2s;
}
.nav-item:hover { background:#eef2ff; border-color:#c7d2fe; }
.nav-icon {
  width:38px; height:38px; border-radius:10px;
  background:#1a56db; color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.nav-icon svg { width:20px; height:20px; stroke-width:1.5; fill:none; }
.nav-content { flex:1; min-width:0; }
.nav-title { display:block; font-size:15px; font-weight:600; color:#0f172a; margin-bottom:3px; }
.nav-links { display:flex; flex-wrap:wrap; gap:4px 10px; }
.nav-links a { font-size:13px; color:#64748b; }
.nav-links a:hover { color:#1a56db; }

/* ========== 按钮 ========== */
.btn {
  display:inline-block; padding:10px 30px; border-radius:20px;
  font-size:13px; font-weight:500; cursor:pointer; border:none;
  transition:background .3s; font-family:inherit;
}

/* ========== Hero 轮播横幅 ========== */
.hero-banner {
  position:relative; height:550px; margin:-130px 0 0;
  background:linear-gradient(135deg,#0a4d8c 0%,#0d6efd 50%,#0099cc 100%);
  overflow:hidden; padding-top:130px;
}
/* 轮播幻灯片 */
.hero-slide {
  position:absolute; inset:0; opacity:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease;
  padding-top:130px;
}
.hero-slide.on { opacity:1; z-index:2; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; opacity:.35; }
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(10,77,140,.7),rgba(13,110,253,.5),rgba(0,153,204,.6));
}
/* 浮光粒子 */
.hero-particles {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:3;
}
.hero-particle {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.15);
  animation:floatUp 6s infinite ease-in;
}
.hero-particle:nth-child(1){width:4px;height:4px;left:10%;animation-delay:0s;animation-duration:7s}
.hero-particle:nth-child(2){width:3px;height:3px;left:25%;animation-delay:1.5s;animation-duration:5s}
.hero-particle:nth-child(3){width:5px;height:5px;left:40%;animation-delay:3s;animation-duration:8s}
.hero-particle:nth-child(4){width:3px;height:3px;left:55%;animation-delay:0.5s;animation-duration:6s}
.hero-particle:nth-child(5){width:4px;height:4px;left:70%;animation-delay:2s;animation-duration:7.5s}
.hero-particle:nth-child(6){width:3px;height:3px;left:85%;animation-delay:4s;animation-duration:5.5s}
@keyframes floatUp {
  0%{bottom:-10px;opacity:0;transform:translateX(0)}
  10%{opacity:1}
  90%{opacity:.6}
  100%{bottom:110%;opacity:0;transform:translateX(40px)}
}
/* 文字内容 */
.hero-content { position:relative; z-index:4; text-align:center; color:#fff; max-width:1000px; padding:0 40px; }
.hero-subtitle {
  display:inline-block; padding:10px 30px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:30px; font-size:16px; margin-bottom:28px;
  backdrop-filter:blur(10px);
}
.hero-title { font-size:48px; font-weight:700; letter-spacing:3px; }

/* ===== 4种不同文字动画 ===== */
/* 1. 上滑淡入 */
.hero-content .ani-up { animation:aUp .7s .1s ease-out both; }
@keyframes aUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

/* 2. 左侧滑入 */
.hero-content .ani-left { animation:aLeft .7s .1s ease-out both; }
@keyframes aLeft { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }

/* 3. 缩放弹出 */
.hero-content .ani-scale { animation:aScale .7s .1s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes aScale { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }

/* 4. 模糊淡入 */
.hero-content .ani-blur { animation:aBlur .8s .1s ease-out both; }
@keyframes aBlur { from{opacity:0;transform:translateX(50px);filter:blur(10px)} to{opacity:1;transform:translateX(0);filter:blur(0)} }

/* 指示点 */
.hero-dots { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:5; }
.hero-dot {
  width:36px; height:4px; background:rgba(255,255,255,.4); border-radius:2px;
  cursor:pointer; transition:all .3s;
}
.hero-dot.on { background:#00d4aa; }

/* ========== 主体内容 ========== */
.main-content { padding:50px 0; }
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }

/* 公司简介 */
.about-section { background:#fff; border-radius:10px; padding:30px; }
.section-title {
  font-size:18px; font-weight:700; color:#1a56db;
  padding-bottom:15px; border-bottom:2px solid #1a56db; margin-bottom:25px;
}
.about-content { display:flex; gap:25px; }
.about-image {
  width:260px; height:180px; border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg,#1a56db,#6366f1); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.about-image span { color:#fff; font-size:14px; opacity:.7; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-text { flex:1; }
.about-text p { font-size:14px; color:#666; line-height:1.9; margin-bottom:20px; }
.more-btn { display:inline-block; padding:10px 30px; background:#333; color:#fff; border-radius:20px; font-size:13px; transition:background .3s; }
.more-btn:hover { background:#1a56db; }

/* 新闻 */
.news-section { background:#fff; border-radius:10px; padding:30px; }
.news-tabs { display:flex; gap:30px; border-bottom:1px solid #eee; margin-bottom:20px; }
.news-tab {
  padding:15px 0; font-size:15px; color:#888; cursor:pointer;
  border-bottom:2px solid transparent; transition:all .3s;
}
.news-tab.on,.news-tab:hover { color:#1a56db; border-bottom-color:#1a56db; }
.news-list { display:flex; flex-direction:column; gap:15px; }
.news-item {
  display:flex; gap:15px; padding:15px; background:#f8f9fa;
  border-radius:8px; transition:all .3s;
}
.news-item:hover { background:#eef2ff; }
.news-thumb {
  width:130px; height:85px; border-radius:6px; overflow:hidden;
  background:#e8ecf1; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.news-thumb span { font-size:12px; color:#999; }
.news-thumb img { width:100%; height:100%; object-fit:cover; }
.news-info { flex:1; min-width:0; }
.news-title {
  font-size:15px; font-weight:600; color:#333; margin-bottom:8px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-date { font-size:13px; color:#999; }

/* 悬浮社交 */
.social-float {
  position:fixed; right:20px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:15px; z-index:999;
}
.social-icon {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s; box-shadow:0 4px 15px rgba(0,0,0,.15);
}
.social-icon.wechat { background:#07c160; }
.social-icon.weibo { background:#e6162d; }
.social-icon:hover { transform:scale(1.1); }
.social-icon svg { width:24px; height:24px; fill:#fff; }

/* ========== 页脚 ========== */
.footer { background:#1a1a2e; color:#fff; padding:50px 0 20px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:30px; }
.footer-brand h3 { font-size:22px; margin-bottom:15px; }
.footer-brand p { font-size:14px; color:#aaa; line-height:1.8; }
.footer-title { font-size:16px; font-weight:600; margin-bottom:20px; }
.footer-links li { margin-bottom:12px; }
.footer-links a,.footer-links li { font-size:14px; color:#aaa; }
.footer-links a { transition:color .3s; }
.footer-links a:hover { color:#1a56db; }
.footer-bottom { text-align:center; padding-top:20px; border-top:1px solid #333; }
.footer-bottom p { font-size:13px; color:#666; margin-bottom:4px; }

/* ========== 响应式 ========== */
@media (max-width:992px) {
  .content-grid { grid-template-columns:1fr; }
  .about-content { flex-direction:column; }
  .about-image { width:100%; height:200px; }
  .hero-title { font-size:36px; }
  .social-float { display:none; }
}
@media (max-width:768px) {
  body { padding-top:110px; }
  .header-top .container { flex-wrap:wrap; height:auto; padding:10px 16px; }
  .header-center { order:3; width:100%; margin:8px 0 0; max-width:none; }
  .header-bottom { top:104px; }
  .nav-item { min-width:0; padding:10px 14px; }
  .hero-banner { height:380px; margin-top:-110px; padding-top:110px; }
  .hero-title { font-size:28px; letter-spacing:2px; }
  .hero-subtitle { font-size:14px; padding:6px 16px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:30px; }
}