:root {
  --primary: #2b8fe5;
  --primary-dark: #1d62a8;
  --primary-light: #8fd3ff;
  --bg-card: rgba(255,255,255,0.82);
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --shadow: 0 10px 30px rgba(30,100,170,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  background:linear-gradient(180deg,#a8cfee 0%,#ddecf8 35%,#f7fbff 70%,#fff 100%);
  background-attachment:fixed;
  min-height:100vh;
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}
img{max-width:100%;display:block}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
.top-brand{
  position:sticky;top:0;z-index:50;
  width:100vw;margin-left:calc(50% - 50vw);
  padding:10px 0;
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.35)
}
.top-brand-inner{display:flex;align-items:center;justify-content:center;gap:12px}
.top-logo{
  width:180px;height:80px;border-radius:18px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;box-shadow:0 4px 14px rgba(43,143,229,.14);
}
.top-logo:has(img){background:transparent;box-shadow:none}
.top-logo img{width:100%;height:100%;object-fit:contain}
.top-name b{font-size:28px;color:var(--primary);letter-spacing:2px}
.top-name small{font-size:12px;color:#67a8dc}
.slogan{
  text-align:center;font-size:24px;font-weight:800;
  color:var(--primary);letter-spacing:4px;
  margin:26px 0 24px;
}
.hero{
  position:relative;overflow:hidden;border-radius:24px;
  aspect-ratio:16/7;background:#d9ecfb;
  box-shadow:var(--shadow);margin-bottom:26px;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.18),transparent 45%);
  z-index:1;pointer-events:none;
}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.hero .slide.on{opacity:1;z-index:1}
.hero img{width:100%;height:100%;object-fit:cover}
.hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.hero-dots i{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.5);transition:all .25s}
.hero-dots i.on{width:26px;background:#fff}
.notice-bar{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(43,143,229,.12);
  backdrop-filter:blur(12px);
  border-radius:18px;padding:12px 16px;
  margin-bottom:28px;box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.notice-tag{
  flex-shrink:0;background:linear-gradient(135deg,#5db5f5,var(--primary));
  color:#fff;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;
}
.notice-marquee{overflow:hidden;white-space:nowrap;flex:1}
.notice-marquee>span{display:inline-block;padding-left:100%;animation:notice 25s linear infinite;color:var(--primary)}
@keyframes notice{100%{transform:translateX(-100%)}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:40px}
.card{
  position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(14px);
  border-radius:24px;padding:18px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(30,100,170,.16)}
.card-top{display:flex;align-items:center;gap:14px}
.card-logo-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.card-logo{
  width:180px;height:180px;border-radius:32px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.card-logo img{width:100%;height:100%;object-fit:contain}
.card-name{font-size:22px;font-weight:800;color:var(--primary);letter-spacing:2px;text-align:center}
.card-btns{display:flex;flex-direction:column;gap:10px;flex:1}
.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:170px;align-self:flex-end;
  text-decoration:none;color:#fff;font-weight:700;font-size:16px;
  padding:13px 18px;border-radius:16px;
  background:linear-gradient(135deg,var(--primary-light),var(--primary));
  box-shadow:0 8px 18px rgba(43,143,229,.24);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.sponsor-box{
  margin-top:20px;padding:20px 12px 14px;
  border-radius:18px;background:rgba(237,246,255,.9);
  border:1px solid rgba(43,143,229,.15);
  position:relative;
}
.sponsor-label{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#edf6ff;padding:0 10px;color:#69a7d9;font-size:12px}
.sponsor-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.sp{width:42px;height:42px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.sp img{width:100%;height:100%;object-fit:cover}
.video-section{text-align:center}
.video-title{font-size:22px;color:var(--primary);font-weight:800;letter-spacing:2px;margin-bottom:10px}
.video-desc{font-size:14px;color:var(--text-sub);margin-bottom:16px}
.video-frame{
  position:relative;overflow:hidden;border-radius:24px;aspect-ratio:16/9;
  background:#000;box-shadow:var(--shadow)
}
.video-frame video,.video-frame img{width:100%;height:100%;object-fit:cover}
.video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92)
}
.video-play:before{content:'';position:absolute;left:30px;top:23px;border-left:22px solid var(--primary);border-top:13px solid transparent;border-bottom:13px solid transparent}
footer{text-align:center;margin-top:42px;font-size:12px;color:#7aa9cf}
@media (max-width:768px){
  .grid{grid-template-columns:1fr}
  .top-logo{width:132px;height:60px}
  .top-name b{font-size:22px}
  .slogan{font-size:18px;letter-spacing:2px}
  .card-top{align-items:flex-start}
  .card-logo{width:124px;height:124px;border-radius:24px}
  .card-name{font-size:18px}
  .btn{max-width:none;font-size:15px;padding:12px 14px}
  .hero{border-radius:18px}
}