@charset "utf-8";
/* ==========================================================================
创世之战 · 主样式表
--------------------------------------------------------------------------
布局规则：整站固定 1920px 画布。每个区块都写
width:1920px; left:50%; margin-left:-960px; position:relative;
窄窗口下浏览器算出的负 left 属于正常居中表现，不是 bug。
区块内部元素一律用 1920 坐标系做绝对定位，这样图片永远跟背景图对齐。
========================================================================== */
/* ---------- 基础 ---------- */
* { margin:0; padding:0; }
body { overflow-x:hidden; }
.bigcontainer { width:100%; background:#000; }
/* 顶部动画层的定位锚（left:431px 是模板原始值，勿改） */
.ab { position:absolute; left:431px; }
/* ---------- 顶部主视觉 1920×1000 ---------- */
.topcontainer { width:1920px; height:850px; left:50%; margin-left:-960px; overflow:hidden; position:relative; }
.animatetop { width:1920px; height:850px; left:50%; margin-left:-960px; }
/* ---------- 首屏 → 公告区 过渡带 ----------
fgx.png 1920×255，直接原图使用，不做任何裁切 / 羽化。
height:0 让它不占排版高度；bottom:0 把图片底边对齐到 1000px 这条线，
也就是 155ps.jpg 的最底部 = 155_01.jpg 的最顶部。
于是整张图（745~1000）作为前景层盖在 155ps.jpg 底部之上，不越过接缝。
z-index 5001 高于 #Flash(5000，首屏视频)，低于 .logo-top(5010) / .slogan(5005) / #Download(5100)，
所以土坡压在视频之上，LOGO、标语、下载按钮仍在土坡之上。 */
.fgx {
width:1920px; height:0;
left:50%; margin-left:-960px;
position:relative; z-index:5001;
pointer-events:none;
}
.fgx img {
position:absolute; left:0; bottom:0;
width:1920px; display:block;
}
#Header { width:1920px; height:850px; position:absolute; left:50%; margin:0 auto -290px -960px; line-height:0; }
#Flash { width:1920px; height:850px; position:absolute; left:50%; margin:0 auto -272px -960px; z-index:5000; }
#Flash video { position:absolute; top:0; left:0; }
/* 主 LOGO：源图 800×450，四周有透明留白。
★ width 不能超过 800，否则就是拉伸放大，顶部会发虚。 */
.logo-top {
position:absolute;
left:960px; /* 画布水平中心 */
top:245px; /* 视觉中心高度 */
width:800px; /* 1:1，视觉内容宽约 678 */
transform:translate(-50%,-50%);
pointer-events:none;
z-index:5010;
}
/* 标语：源图 1400×300，1:1 显示（内容宽 1053），不能再放大 */
.slogan {
position:absolute;
left:960px;
top:630px;
width:1400px;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:5005;
}
/* ---------- 下载按钮组 ----------
down.png 1100×160，内含三个 252×64 的按钮，
分别在 x 94 / 424 / 754，y 48。下面三个 是透明热区，坐标与图内按钮一一对应。 */
#Download { width:1100px; height:160px; position:absolute; top:754px; left:50%; margin-left:-550px; z-index:5100;
background:none no-repeat 0 0; }
#Download a { position:absolute; display:block; height:64px; text-indent:-999em; overflow:hidden; outline:none; }
#Download .btn_down_s1 { left:94px; top:48px; width:252px; }
#Download .btn_down_s2 { left:424px; top:48px; width:252px; }
#Download .btn_down_s3 { left:754px; top:48px; width:252px; }
/* ---------- 游戏公告 1920×900 ---------- */
.ps155_01 {
width:1920px; height:900px; left:50%; margin-left:-960px;
overflow:hidden; position:relative;
background:none no-repeat 0 0;
}
/* 公告区左下角 LOGO：视觉宽约 390（缩小到 57.5%） */
.logo-news {
position:absolute;
left:686px;
top:600px;
width:460px;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:6;
}
/* 公告列表：贴在木牌右侧 */
.NewsList {
width:560px; height:703px; position:absolute; top:280px;
margin:0 18px 0 940px;
transition:all 0.1s linear;
}
.NewsList li {
width:560px; height:39px; line-height:39px; overflow:hidden;
color:#000; font-size:16px; padding-right:8px;
border-bottom:1px dotted #635140;
list-style:none;
}
.NewsList li:hover { transform:translateX(5px); }
/* ---------- 游戏截图 1920×1250 ---------- */
.ps155_03 {
width:1920px; height:1250px; left:50%; margin-left:-960px;
position:relative;
background:none no-repeat 0 0;
}
/* ---------- 页脚 1920×142 ---------- */
.foot155 {
width:1920px; height:142px; left:50%; margin-left:-960px;
position:relative;
background:url(../images/155foot.jpg) no-repeat 0 0;
}
/* 左右两段版权文字：坐标按 1920×142 设计稿量取，改文案不影响排版 */
.foot-txt {
position:absolute;
font-family:"Microsoft YaHei","微软雅黑","PingFang SC",Arial,sans-serif;
font-size:12px;
line-height:35px;
color:#fff;
white-space:nowrap;
}
.foot-txt p { margin:0; line-height:35px; font-size:12px; }
.foot-left { left:301px; top:38px; }
.foot-right { left:1229px; top:40px; }
/* 页脚链接要单独配色：index.html 顶部有一段 a:link{color:#000} 的内联样式，
在黑底上会看不见，这里用 .foot-txt a:xxx 提高优先级盖掉 */
.foot-txt a:link,
.foot-txt a:visited { color:#fff; text-decoration:none; }
.foot-txt a:hover,
.foot-txt a:active { color:#ffd873; text-decoration:underline; }
/* 页脚中间 LOGO：视觉内容宽约 220（缩小到 32.5%） */
.foot-logo {
position:absolute;
left:824px;
top:-2px;
width:260px;
pointer-events:none;
}
/* ---------- 右侧悬浮导航 ----------
外层 .sidenav-wrap 负责定位（fixed + 贴右边），.sidenav 只负责外观，
这样展开/收起按钮可以挂在面板左侧、又不会被面板的 overflow:hidden 裁掉。
right 用 max()：视口窄于 1920 时贴窗口右边缘（right:0）；
视口宽于 1920 时贴 1920 画布右边缘（画布右边距窗口右 = 50% - 960px），
否则会在两侧黑边里飘出去。 */
.sidenav-wrap {
position:fixed;
right:0; /* 老浏览器兜底 */
right:max(0px, calc(50% - 960px));
top:50%;
transform:translateY(-50%);
z-index:9000;
}
.sidenav {
position:relative;
width:150px;
box-sizing:border-box; /* 让 150 是含边框的外宽 */
background:rgba(22,22,22,.92);
border:1px solid rgba(255,216,115,.35);
border-radius:6px 0 0 6px; /* 右侧直角，贴边更自然 */
overflow:hidden;
box-shadow:0 6px 24px rgba(0,0,0,.45);
font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif;
text-align:center;
transition:transform .3s ease;
}
/* 展开/收起按钮：25×75 原尺寸，贴在面板左边缘外侧。
top:9px = 按钮顶边比面板顶边低 9px（面板顶边就是 .sidenav-wrap 的 0 点）。
收起时只做横向平移，纵向位置不变，所以点的时候按钮不会上下跳。 */
.sidenav-toggle {
position:absolute;
left:-25px;
top:9px;
width:25px;
height:75px;
padding:0;
border:0;
background:none;
cursor:pointer;
z-index:2;
transition:transform .3s ease;
-webkit-tap-highlight-color:transparent;
}
.sidenav-toggle img { display:block; width:25px; height:75px; }
.sidenav-toggle:hover { filter:brightness(1.4); }
/* 收起状态：面板整块滑出右边，按钮跟着贴到窗口右边缘（纵向不动） */
.sidenav-wrap.is-collapsed .sidenav { transform:translateX(100%); }
.sidenav-wrap.is-collapsed .sidenav-toggle { transform:translateX(150px); }
/* 系统开了「减少动态效果」时不做滑动 */
@media (prefers-reduced-motion: reduce) {
.sidenav, .sidenav-toggle, .sidenav-brand img { transition:none; }
}
/* 品牌区：纯黑正方形，logo 居中。
面板内宽 148 − 左右各 8(margin) = 132，高也 132，含 1px 边框（box-sizing:border-box）。
图片按 100% 宽正常摆放；鼠标移上去用 transform:scale(1.1) 放大到 110%
（transform 不参与布局，不会把面板撑开，比改 width 更平滑）。
放大量安全：110% 时左右只溢出 6.5px，而 logo.png 自带左 14.1 / 右 7.7 的透明边，
裁掉的都是透明区，画面一个像素都不会被切。源图 800×450，缩到 143 仍是缩小，不会糊。 */
.sidenav-brand {
margin:8px;
height:132px;
box-sizing:border-box;
border:1px solid rgba(255,216,115,.45);
border-radius:8px; /* 照参考图 */
background:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden; /* 放大时裁掉溢出的透明边 */
}
.sidenav-brand img {
display:block;
width:100%;
height:auto;
flex:0 0 auto;
transition:transform .3s ease;
will-change:transform;
}
.sidenav-brand:hover img { transform:scale(1.1); }
/* 菜单项： 和