/*
  巅峰熊猫 Legend Of Mir - 主样式
  主题：暗蓝黑底 · 鎏金点缀 · 银铬科技导航
*/
@charset "utf-8";

* { margin:0; padding:0; }
body,td,th { font-size: 14px; }
body { color:#d8dfe8; font-size:14px; font-family:"微软雅黑",Microsoft YaHei,Arial,Verdana; overflow-y:scroll; background:url(bgbg.jpg); }

a { font-size: 14px; color:#c7d5e8; }
a:link { text-decoration: none;}
a:visited { text-decoration: none; color:#c7d5e8; }
a:hover { text-decoration: none; color:#ecd296; }
a:active { text-decoration: none; color:#ecd296; }
ul { margin:0; padding:0; list-style: none; }
img { border:0; }
html { scroll-behavior:smooth; }

/* ===== 首屏：固定1920舞台，居中，不随窗口拉伸 ===== */
#Version { position:relative; width:1920px; height:900px; margin:0 auto; overflow:hidden;}
#Flash { position:absolute; left:0; top:0; width:1920px; height:900px; z-index:2;}
#Header { position:absolute; left:0; top:0; width:1920px; height:900px; z-index:1;}
#top-video { width:1920px; height:900px; object-fit:cover;}

.head_1 { position:absolute; left:360px; top:0; width:1200px; z-index:5; overflow:hidden;}
.head_2 { position:relative; width:1200px; height:900px;}

/* 首屏圆形按钮：浅蓝晶球 + 纯文字 + 多层动效（外层orb承载旋转光环） */
.hq-orb{position:absolute;bottom:74px;width:148px;height:148px;z-index:7}
.hq-b1{left:257px}.hq-b2{left:443px}.hq-b3{left:619px}.hq-b4{left:795px}
/* 主按钮登录器下载：加大、特效更强 */
.hq-b1{width:158px;height:158px}
/* 旋转蓝色光环 */
.hq-orb::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 218deg,rgba(150,215,255,.95) 262deg,rgba(255,255,255,.8) 272deg,transparent 312deg,transparent 360deg);filter:blur(2px);box-shadow:0 0 20px rgba(110,185,255,.75);animation:hqSpin 3s linear infinite}

.hq-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;color:#f3faff;letter-spacing:2px;background:radial-gradient(circle at 50% 30%,#d8f2ff 0%,#82c9ff 30%,#3088ea 62%,#11478e 100%);box-shadow:0 0 20px rgba(95,175,255,.5),0 10px 26px rgba(0,10,30,.55),inset 0 2px 8px rgba(255,255,255,.8),inset 0 -12px 22px rgba(8,38,90,.6);text-shadow:0 -1px 1px rgba(255,255,255,.55),0 2px 3px rgba(3,22,54,.98),0 0 2px rgba(3,22,54,.85);animation:hqGlow 2.6s ease-in-out infinite;transition:transform .3s}
.hq-btn .hq-t1{font-size:25px;font-weight:800;line-height:1.35}
.hq-btn .hq-t2{font-size:20px;font-weight:800;line-height:1.3}
/* 周期性白色高光扫过（收在圆内） */
.hq-btn::after{content:"";position:absolute;top:-30%;left:-70%;width:55%;height:160%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:rotate(25deg);animation:hqSweep 2.8s ease-in-out infinite}
.hq-orb:hover .hq-btn{transform:scale(1.1)}
.hq-orb:hover::before{animation-duration:1.1s}
.hq-b1 .hq-btn{animation-duration:1.9s}
.hq-b1 .hq-t1{font-size:27px}
.hq-b1 .hq-t2{font-size:22px}
@keyframes hqSpin{to{transform:rotate(360deg)}}
@keyframes hqSweep{0%,45%{left:-70%}85%,100%{left:135%}}
@keyframes hqGlow{0%,100%{box-shadow:0 0 20px rgba(95,175,255,.5),0 10px 26px rgba(0,10,30,.55),inset 0 2px 8px rgba(255,255,255,.8),inset 0 -12px 22px rgba(8,38,90,.6)}50%{box-shadow:0 0 38px rgba(140,205,255,.95),0 10px 26px rgba(0,10,30,.55),inset 0 2px 10px rgba(255,255,255,.95),inset 0 -12px 22px rgba(8,38,90,.6)}}

/* ===== 顶部导航：悬浮固定于1920舞台，置顶实底、滚动毛玻璃 ===== */
.site-nav{position:fixed;top:0;left:50%;margin-left:-960px;width:1920px;height:70px;z-index:9999;background:linear-gradient(180deg,#0c1d36 0%,#071325 78%,#050d1c 100%);border-bottom:1px solid rgba(120,175,255,.45);box-shadow:0 5px 22px rgba(0,0,0,.55);transition:background .35s,box-shadow .35s,border-color .35s}
/* 底部羽化：覆盖首屏视频顶部黑区并自然过渡 */
.site-nav::before{content:"";position:absolute;top:100%;left:0;width:100%;height:58px;background:linear-gradient(180deg,rgba(4,11,23,.92) 0%,rgba(4,11,23,.55) 45%,transparent 100%);transition:opacity .35s;pointer-events:none}
.nav-inner{height:100%;padding:0 40px 0 0;display:flex;align-items:center;justify-content:center;gap:30px}
/* 纯LOGO图形，无文字符号 */
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{display:block;height:76px;width:auto;filter:drop-shadow(0 0 9px rgba(90,150,255,.5));transition:transform .3s,filter .3s}
.nav-logo:hover img{transform:scale(1.05);filter:drop-shadow(0 0 16px rgba(130,190,255,.8))}

/* 浅蓝水晶按钮：与主图水晶球同款 */
.nav-links{display:flex;gap:14px}
.nav-links a{position:relative;display:block;height:40px;line-height:40px;padding:0 22px;border-radius:22px;font-size:14px;font-weight:800;letter-spacing:2px;color:#0a2a5c;text-shadow:0 1px 0 rgba(255,255,255,.75);background:radial-gradient(circle at 50% 22%,#d6f1ff 0%,#79bdf8 48%,#2c79d1 100%);box-shadow:0 0 11px rgba(95,175,255,.55),inset 0 1px 4px rgba(255,255,255,.85),inset 0 -5px 9px rgba(10,45,100,.55);overflow:hidden;transition:transform .25s,box-shadow .25s,filter .25s}
.nav-links a::after{content:"";position:absolute;top:0;left:-85%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);animation:silverSweep 3.2s ease-in-out infinite}
.nav-links a:hover{color:#061d44;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 18px rgba(140,205,255,.95),inset 0 1px 4px rgba(255,255,255,.9),inset 0 -5px 9px rgba(10,45,100,.55)}
@keyframes silverSweep{0%,55%{left:-85%}88%,100%{left:145%}}

/* 滚动后：半透明毛玻璃，仍能看到后方；羽化收起 */
.site-nav.scrolled{background:rgba(8,16,30,.6);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom-color:rgba(150,195,255,.35);box-shadow:0 4px 22px rgba(0,0,0,.45)}
.site-nav.scrolled::before{opacity:0}

/* ===== 装备展示卡片 ===== */
.head_14 { background:url(foot.jpg) bottom center no-repeat;}
.head_15 { margin:0 auto; width:1200px; overflow:hidden;}
.head_123c { margin:0 auto; width:1200px; overflow:hidden; margin-bottom:10px; background:#1d5f6b;}
.head_124c3 { float:left; width:400px; overflow:hidden;}
.head_125c3 { float:left; width:400px; overflow:hidden;}
.head_126c3 { float:right; width:400px; overflow:hidden;}
.head_127c { position:relative; margin:10px; overflow:hidden; background:#0f343b;
 box-shadow:inset 0 0 0 1px rgba(105,170,255,.25), inset 0 0 14px rgba(40,90,170,.25);
 transition:background .8s, box-shadow .8s, transform .5s cubic-bezier(.22,.85,.3,1);}
.head_127c:hover { background:#1a444d;
 box-shadow:inset 0 0 0 1px rgba(150,205,255,.75), inset 0 0 22px rgba(70,140,230,.5), 0 6px 20px rgba(0,10,30,.45);
 transform:translateY(-3px);}

/* ===== 缓慢流光描边（彗星沿边框匀速绕行） ===== */
@property --ta { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --tb { syntax:'<angle>'; initial-value:180deg; inherits:false; }
.head_127c::before, .head_127c::after {
 content:""; position:absolute; inset:0; pointer-events:none; border-radius:2px;
 padding:2px;
 background:conic-gradient(from var(--ta),
   transparent 0deg,
   rgba(100,165,255,.05) 250deg,
   rgba(110,180,255,.18) 300deg,
   rgba(150,210,255,.42) 332deg,
   #d9efff 350deg,
   #ffffff 358deg,
   rgba(190,230,255,.5) 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
 animation:flowA 7.5s linear infinite;
}
.head_127c::after {
 padding:4px;
 background:conic-gradient(from var(--tb),
   transparent 0deg,
   rgba(100,165,255,.04) 230deg,
   rgba(120,190,255,.14) 290deg,
   rgba(160,215,255,.32) 330deg,
   #cfeaff 351deg,
   #ffffff 358deg,
   transparent 360deg);
 animation:flowB 12s linear infinite;
}
.head_127c:hover::before { animation-duration:4.5s; }
.head_127c:hover::after { animation-duration:7s; }
@keyframes flowA { to { --ta:360deg; } }
@keyframes flowB { to { --tb:-360deg; } }

/* 属性展示大图：流光轨道略宽 */
.head_133c .head_127c::before { padding:3px; animation-duration:10s; }
.head_133c .head_127c::after { padding:6px; animation-duration:16s; }
.head_133c .head_127c:hover::before { animation-duration:6s; }
.head_133c .head_127c:hover::after { animation-duration:9.5s; }

.head_128c { margin:0 10px; background:url(zbb.png) left center no-repeat; overflow:hidden;}
.head_128c a {
 margin-left:30px; line-height:50px; text-align:left; font-size:22px; font-family:"微软雅黑"; font-weight:900; letter-spacing:4px;
 background:linear-gradient(180deg,#ffffff 0%,#c9e7ff 40%,#63aef2 72%,#eaf6ff 100%);
 -webkit-background-clip:text; background-clip:text; color:transparent;
 filter:drop-shadow(0 0 5px rgba(110,180,255,.85));
 animation:titleGlow 4.5s ease-in-out infinite;
}
@keyframes titleGlow { 0%,100%{filter:drop-shadow(0 0 4px rgba(110,180,255,.7))} 50%{filter:drop-shadow(0 0 9px rgba(160,215,255,1))} }
.head_129c { border-top:1px solid rgba(110,180,255,.4); box-shadow:0 -1px 0 rgba(15,40,75,.7); overflow:hidden;}
.head_130c { position:relative; margin:10px 10px; overflow:hidden; text-align:center;}
/* 图片轻微放大 */
.head_130c img { display:block; margin:0 auto; transition:transform .8s cubic-bezier(.22,.85,.3,1);}
.head_127c:hover .head_130c img { transform:scale(1.045); }
/* 悬停斜向扫光 */
.head_130c::after {
 content:""; position:absolute; top:-60%; left:-90%; width:55%; height:220%;
 background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.04) 35%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.04) 65%,transparent 100%);
 transform:rotate(10deg); pointer-events:none; opacity:0;
}
.head_127c:hover .head_130c::after { animation:sweepLight 1s ease-out; }
@keyframes sweepLight {
 0% { left:-90%; opacity:0; }
 12% { opacity:1; }
 88% { opacity:1; }
 100% { left:150%; opacity:0; }
}

/* 悬停竖排「拒绝盗版」居中黑体大字·警示红（仅18张外观GIF卡片） */
.head_124c3 .head_130c::before, .head_125c3 .head_130c::before, .head_126c3 .head_130c::before {
 content:"拒绝盗版";
 position:absolute; top:50%; left:50%;
 transform:translate(-50%,-50%);
 writing-mode:vertical-rl; white-space:nowrap;
 z-index:3; pointer-events:none;
 font-family:"SimHei","黑体","微软雅黑","Microsoft YaHei",sans-serif;
 font-size:50px; font-weight:900; letter-spacing:20px;
 color:#ff4444;
 /* 粗深色描边，红/亮/暗任何图片上都清晰 */
 -webkit-text-stroke:2px rgba(4,6,14,.95);
 paint-order:stroke fill;
 text-shadow:0 0 14px rgba(255,60,60,.85), 0 3px 5px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9);
 /* 居中半透明暗衬底，椭圆羽化不压画面 */
 padding:24px 16px; border-radius:8px;
 background:radial-gradient(ellipse at center,rgba(4,6,14,.6) 0%,rgba(4,6,14,.4) 55%,transparent 78%);
 opacity:0;
 transition:opacity .45s ease;
}
.head_124c3 .head_127c:hover .head_130c::before,
.head_125c3 .head_127c:hover .head_130c::before,
.head_126c3 .head_127c:hover .head_130c::before {
 opacity:1;
 animation:daoBan 2.8s ease-in-out .3s infinite;
}
@keyframes daoBan {
 0%,100% { opacity:.72; }
 50% { opacity:1; }
}

/* 属性展示大图：横向超大「拒绝盗版」（图宽1130，字130） */
.head_133c .head_130c::before {
 content:"拒绝盗版";
 position:absolute; top:50%; left:50%;
 transform:translate(-50%,-50%);
 white-space:nowrap;
 z-index:3; pointer-events:none;
 font-family:"SimHei","黑体","微软雅黑","Microsoft YaHei",sans-serif;
 font-size:130px; font-weight:900; letter-spacing:36px;
 color:#ff4444;
 -webkit-text-stroke:3px rgba(4,6,14,.95);
 paint-order:stroke fill;
 text-shadow:0 0 22px rgba(255,60,60,.85), 0 5px 8px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.9);
 padding:30px 46px; border-radius:12px;
 background:radial-gradient(ellipse at center,rgba(4,6,14,.58) 0%,rgba(4,6,14,.38) 58%,transparent 82%);
 opacity:0;
 transition:opacity .45s ease;
}
.head_133c .head_127c:hover .head_130c::before {
 opacity:1;
 animation:daoBan 2.8s ease-in-out .3s infinite;
}
.head_133c { width:1200px; overflow:hidden;}

/* ===== 右侧暗蓝悬浮服务栏 ===== */
.rb-wrap{position:fixed;top:50%;right:0;z-index:10000;transform:translateY(-50%);transition:right .45s cubic-bezier(.22,.85,.3,1)}
.rb-wrap.close{right:-220px}
.rb-tab{position:absolute;top:0;left:-38px;width:38px;height:100%;box-sizing:border-box;background:linear-gradient(180deg,#0e213c,#060f20 50%,#0b1b32);border:1px solid #3a5a86;border-right:none;border-radius:6px 0 0 6px;box-shadow:-4px 0 14px rgba(0,0,0,.5),inset 0 0 12px rgba(80,140,255,.16);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.rb-tab:hover{background:linear-gradient(180deg,#152c4e,#0a172c 50%,#10243f)}
.rb-tab .rb-txt{writing-mode:vertical-rl;font-size:12px;letter-spacing:5px;color:#bcd2f2}
.rb-tab .rb-arr{transition:transform .4s}
.rb-wrap.close .rb-tab .rb-arr{transform:rotate(180deg)}
.rb-panel{width:220px;box-sizing:border-box;background:linear-gradient(165deg,#0e1f38 0%,#060f20 55%,#0b1a30 100%);border:1px solid #46638f;border-right:none;border-radius:8px 0 0 8px;box-shadow:-6px 6px 26px rgba(0,0,0,.55),-2px -2px 18px rgba(60,120,240,.12),inset 0 0 22px rgba(70,120,220,.08);overflow:hidden;text-align:center}
.rb-head{padding:12px 0 10px;background:linear-gradient(180deg,rgba(96,150,255,.22),rgba(96,150,255,0));border-bottom:1px solid rgba(120,165,235,.3)}
.rb-head span{font-size:17px;font-weight:700;letter-spacing:3px;color:#e6d3a2;vertical-align:2px}
.rb-head svg{vertical-align:-2px;margin-right:5px}
.rb-qr{padding:12px 0 4px}
.rb-qr p{font-size:12px;color:#9db8dc;letter-spacing:2px;margin-bottom:9px}
.rb-qr .rb-qrbox{display:inline-block;padding:4px;background:linear-gradient(145deg,#2c4a78,#13243f);border:1px solid rgba(180,150,90,.5);border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.rb-qr img{display:block;width:140px;height:140px;border-radius:2px}
.rb-qr .rb-note{margin:8px 0 2px;font-size:11px;color:#7e97b8;letter-spacing:1px}
.rb-btns{padding:8px 16px 16px}
.rb-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:4px;font-size:15px;font-weight:700;letter-spacing:3px;margin-bottom:9px;border:1px solid #a07f35}
.rb-btn:last-child{margin-bottom:0}
.rb-btn-gold{color:#2a1e07;background:linear-gradient(180deg,#f0d68c,#c99f4a 55%,#b08535);box-shadow:0 3px 10px rgba(190,160,90,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.rb-btn-gold:hover{filter:brightness(1.09)}
.rb-btn-red{color:#ffe9c8;background:linear-gradient(180deg,#9c3a24,#742714 55%,#63200e);border-color:#a8563d;box-shadow:0 3px 10px rgba(150,50,20,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.rb-btn-red:hover{filter:brightness(1.12)}
.rb-btn svg{flex:none}
.rb-btn:active{transform:translateY(1px)}
.rb-qq{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 16px 0;padding:9px 0;border-radius:4px;border:1px dashed rgba(217,183,110,.55);color:#e8d5a8;font-size:13px;letter-spacing:1px;text-decoration:none;transition:background .2s}
.rb-qq:hover{background:rgba(217,183,110,.12);color:#ffedc4}
.rb-qq b{color:#ffd98a;font-size:14px;letter-spacing:.5px}

/* ===== 底部落款 ===== */
.site-footer{margin-top:20px;padding:34px 0 30px;background:linear-gradient(180deg,rgba(20,34,56,.35) 0,rgba(7,13,26,.92) 40%,#050b16 100%);border-top:1px solid rgba(214,178,102,.4);text-align:center}
.sf-inner{max-width:1200px;margin:0 auto;padding:0 20px}
.sf-warn{font-size:13px;line-height:24px;color:#93a7bf;letter-spacing:1px;margin-bottom:12px}
.sf-links{font-size:14px;margin-bottom:12px}
.sf-links a{color:#c7d5e8;padding:0 4px}
.sf-links a:hover{color:#ecd296}
.sf-links i{color:#3d526e;font-style:normal;padding:0 6px}
.sf-copy{font-size:12px;color:#5f7188;letter-spacing:1px}