@charset "utf-8";
/* ==========================================================================
   永恒之战 官网 · 样式（兼容版）
   --------------------------------------------------------------------------
   ★ 兼容目标：传奇登录器内嵌的 IE 内核（IE7 / IE8 / IE9 / IE10 / IE11）
   ★ 已彻底去掉：CSS 变量、flex、grid、渐变文字（color:transparent）、
     rgba 半透明、calc/clamp、backdrop-filter、animation 依赖的 opacity:0 初始态、
     ::before/::after 承载的关键内容。
   ★ 布局改用 float + inline-block + 表格，配色全部写死十六进制。
   ★ 原版备份在 _原版备份(仅现代浏览器)/css/style.css
   ========================================================================== */

/* ------------------------------ 基础 ------------------------------ */
*{margin:0;padding:0}
body{
  background:#07080b;
  color:#dde1e8;
  font:400 15px/1.8 "Microsoft YaHei","微软雅黑",Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}   /* 不写 width:100%：content-box 下会宽出一圈 padding */
.sec{padding:76px 0}
.sec-hd{text-align:center;margin-bottom:44px}
.sec-kicker{
  display:inline-block;font-size:12px;letter-spacing:.36em;text-indent:.36em;
  color:#f0c060;margin-bottom:14px;
}
.sec-title{font-size:34px;line-height:1.25;font-weight:800;letter-spacing:.06em;color:#ffe9b0}
.sec-sub{margin-top:14px;color:#9aa0ad;font-size:14.5px}
.sec-hd .rule{width:56px;height:2px;margin:22px auto 0;background:#f0c060}

/* ------------------------------ 按钮 ------------------------------ */
.btn{
  display:inline-block;*display:inline;*zoom:1;
  height:44px;line-height:42px;padding:0 26px;
  font-size:14.5px;font-weight:700;letter-spacing:.04em;
  border:1px solid #6b5a33;white-space:nowrap;
  text-align:center;vertical-align:middle;
}
.btn-primary{color:#2a1600;background:#f0c060;border-color:#ffe9b0}
.btn-primary:hover{background:#ffd071;color:#2a1600}
.btn-fire{color:#ffffff;background:#d8342a;border-color:#ff7a62}
.btn-fire:hover{background:#e8433a;color:#fff}
.btn-ghost{color:#ffe9b0;background:#141821;border-color:#6b5a33}
.btn-ghost:hover{background:#1d2430;border-color:#c9a227;color:#ffffff}
.btn-lg{height:54px;line-height:52px;padding:0 40px;font-size:16px}
.btn.is-off,.btn.is-off:hover{
  color:#9aa3b2;background:#1a1e26;border:1px dashed #3c424e;cursor:not-allowed;
}

/* 进场动画：兼容版直接可见（不做 opacity:0 初始态，避免内核不支持时整片空白） */
.reveal{visibility:visible}
.reveal.in{visibility:visible}

/* ------------------------------ 顶部导航 ------------------------------
   去掉了原来的「印章」（那个棕色方块里塞永/恒两个字，小尺寸下糊成一团），
   改成：品牌字 + 一条竖分隔线 + 导航胶囊，右侧一枚描边按钮 + 一枚实心主按钮。
   全部 float 布局，线高对齐，IE7 也能对齐得整整齐齐。 */
/* 顶栏底图：从首屏主视觉上切下来的云层（assets/hdr-bg.jpg，2560x64，
   已压暗到 40% 并把左右两端渐隐到 #0a0c11）。1:1 尺寸输出，IE8 不支持
   background-size 也能正好铺满；超宽屏两侧自然融进底色，无接缝。 */
.hdr{
  position:fixed;left:0;top:0;right:0;z-index:100;
  background:#0a0c11 url(../assets/hdr-bg.jpg) center center no-repeat;
  border-bottom:1px solid #c9a227;              /* 金色分隔线：明确但不刺眼 */
  box-shadow:0 4px 18px rgba(0,0,0,.6);        /* 线下一层阴影，做出"浮起来"的层次 */
}
.hdr.scrolled{background-color:#0a0c11}
.hdr-in{max-width:1180px;margin:0 auto;padding:0 22px;height:64px;overflow:hidden;zoom:1}

.brand{float:left;height:64px;text-decoration:none}
.brand-txt{
  display:block;padding-top:23px;line-height:1;
  font-size:21px;font-weight:800;letter-spacing:.2em;color:#ffe9b0;
  white-space:nowrap;
}
/* 品牌名与口号左右并排（不再上下两行） */
.brand-txt em{
  display:inline;font-style:normal;font-weight:400;
  font-size:11px;letter-spacing:.24em;color:#78808d;margin-left:12px;
}
.hdr-line{float:left;width:1px;height:24px;background:#2a303c;margin:20px 0 0 22px}

.nav{float:left;margin-left:22px}
.nav a{
  display:inline-block;*display:inline;*zoom:1;
  height:64px;line-height:64px;padding:0 13px;
  font-size:14px;letter-spacing:.04em;color:#b6bcc8;text-decoration:none;
}
.nav a:hover{color:#ffe9b0;background:#141821}

.hdr-act{float:right;height:64px;padding-top:13px}
.hdr-act .btn{height:38px;line-height:36px;padding:0 20px;font-size:13.5px;margin-left:10px}
.burger{display:none}

/* ------------------------------ 首屏 ------------------------------ */
/* 高度由 JS 按 16:9 跟随窗口宽度算（见 js/main.js 的 initHeroSize）：
   这样视频 / 静图都不会被裁掉，也不会因为视频只有 1920 宽而在两侧露出重复的静图。
   height:640px 只是 JS 没跑时的兜底值。 */
.hero{
  position:relative;height:640px;overflow:hidden;
  background:#07080b url(../assets/bg-hero.jpg) center center no-repeat;
  background-size:cover;
}
/* 默认 1920x1080；JS 会按 cover 规则改写 width/height/left/margin-left */
.hero-bg{position:absolute;left:50%;top:0;width:1920px;height:1080px;margin-left:-960px}
.hero-veil{
  position:absolute;left:0;top:0;width:100%;height:100%;
  /* 左透明 -> 右压暗：不影响左侧书法和火焰，只把右边文字区压下去 */
  background:linear-gradient(to right,rgba(7,8,11,0) 24%,rgba(7,8,11,.38) 55%,rgba(7,8,11,.80) 100%);
  /* IE6~9 没有 CSS 渐变，用滤镜做同样的横向渐变（#AARRGGBB，末位 74% ≈ B8） */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0007080B',endColorstr='#CC07080B',GradientType=1);
}
/* 首屏顶部 64px：从顶栏底色 #0a0c11 渐隐到透明。
   顶栏底图底部 14 行已经烘焙成同一个 #0a0c11，两边正好接上，
   原来的「硬边」就变成了一条自然过渡。IE6~9 用 gradient 滤镜等效。 */
.hero-topfade{
  /* 从顶栏下沿(64px)开始往下渐隐 */
  position:absolute;left:0;top:64px;width:100%;height:30px;
  background:linear-gradient(to bottom,rgba(10,12,17,.62) 0%,rgba(10,12,17,.26) 50%,rgba(10,12,17,0) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0A0C11',endColorstr='#000A0C11',GradientType=0);
}
.hero-in{
  position:relative;z-index:2;max-width:1480px;margin:0 auto;
  padding:150px 28px 96px;text-align:right;
}
.hero-copy{
  display:inline-block;*display:inline;*zoom:1;
  max-width:600px;text-align:left;vertical-align:top;
}
/* 十二分支：单列一行一条。
   ① 不能用 float：条目长短不一致时会"爬楼梯"错位，表格最稳。
   ② 不要空白行：不再分两列、也不留职业组间隙，12 条均匀紧凑排布。
   ③ 不要换行：nowrap，每条一行；窄屏自动恢复换行避免文字被裁。 */
.hero-branches{
  padding:12px 16px 2px;border:1px solid #3a3220;
  background:url(../assets/scrim.png) repeat;   /* 半透明暗底：PNG 平铺，IE7 也支持 */
}
.br-tb{width:100%;border-collapse:collapse;table-layout:fixed}
.br-tb td.bi{
  padding:0 0 7px;vertical-align:top;
  font-size:12.5px;line-height:1.6;color:#ffe9b0;   /* 介绍与分支名同色（金色） */
  text-shadow:0 1px 5px #000000;
  white-space:nowrap;overflow:hidden;
}
/* 分支名与介绍同行显示，字号略大、加粗 */
.br-tb td.bi b{
  display:inline;color:#ffe9b0;font-size:13px;font-weight:800;
  letter-spacing:.08em;margin-right:3px;white-space:nowrap;
}
.hero-btns{margin:26px 0 0}
.hero-btns .btn{margin:0 12px 12px 0}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;margin-left:-40px;width:80px;z-index:3;
  font-size:11px;letter-spacing:.3em;color:#8a8f99;text-align:center;
}

/* ------------------------------ 背景音乐按钮 ------------------------------
   当前未启用（页面里没有 #bgmBtn，配置里 bgmUrl 为空）。
   样式保留：以后要开背景音乐，按 js/config.js 里的说明加回 audio 和喇叭按钮即可直接用。 */
.bgm-btn{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:44px;height:44px;line-height:44px;text-align:center;
  cursor:pointer;color:#ffe6b0;background:#2a2110;border:1px solid #a97c25;
}
.bgm-btn:hover{color:#ffffff;background:#3a2c14}
.bgm-btn .bgm-i{width:21px;height:21px;display:block}
.bgm-btn .bgm-off{display:none}
.bgm-btn.is-off .bgm-on{display:none}
.bgm-btn.is-off .bgm-off{display:block}
.bgm-btn.is-off{color:#9aa3b2}

/* ------------------------------ 开区时间 ------------------------------ */
.opentime{background:#0b0d13;border-top:1px solid #1b1e25;border-bottom:1px solid #1b1e25}
.open-grid{overflow:hidden;zoom:1}
.open-card{
  float:left;width:280px;min-height:96px;margin:0 18px 18px 0;
  padding:24px 26px;background:#171310;border:1px solid #3a3220;
}
.open-card .lbl{font-size:15px;font-weight:700;color:#ffffff}
.open-card .note{font-size:12.5px;color:#6b7280;margin-top:4px}
.open-card .tm{
  float:right;font-size:26px;font-weight:900;letter-spacing:.02em;color:#ffe9b0;
  margin-left:12px;
}

/* ------------------------------ 客服 ------------------------------ */
.contact{background:#07080b}
.contact-grid{max-width:900px;margin:0 auto;overflow:hidden;zoom:1}
/* 注意：兼容版未启用 box-sizing:border-box（IE7 不支持），宽度按 content-box 算好：
   370 + 左右内边距 24*2 + 边框 2 = 420，两张 420 + 20 间距 = 860 < 900，正好两列 */
.cc{
  float:left;width:370px;margin:0 20px 22px 0;padding:30px 24px;
  background:#12141b;border:1px solid #3a3220;
  overflow:hidden;zoom:1;
}
.cc:hover{border-color:#a97c25}
.cc-ic{
  float:left;width:56px;height:56px;line-height:54px;text-align:center;
  font-size:24px;color:#ffe9b0;background:#2c2211;border:1px solid #5b4a24;
}
.cc-ic.qq{background:#1a2438;border-color:#3a5a86}
.cc-b{float:left;min-width:150px;margin-left:20px}
.cc-qr{float:right;width:120px;background:#ffffff;border:1px solid #3a3220;margin-left:16px}
.cc-qr img{width:100%;height:auto}
.cc-t{font-size:12.5px;letter-spacing:.22em;color:#6b7280}
.cc-v{font-size:23px;font-weight:900;letter-spacing:.06em;color:#ffe9b0;margin:6px 0 12px}
.cc-btns{overflow:hidden;zoom:1}
.cc-btns .btn{height:36px;line-height:34px;padding:0 18px;font-size:13px;margin:0 8px 8px 0}

/* ------------------------------ 页脚 ------------------------------ */
.ft{border-top:1px solid #1b1e25;background:#05060a;padding:40px 0 36px;text-align:center}
.ft-brand{font-size:17px;font-weight:800;letter-spacing:.2em;color:#ffe9b0;margin-bottom:14px}
.ft-links{font-size:13.5px;color:#9aa0ad;margin-bottom:18px}
.ft-links a{display:inline-block;*display:inline;*zoom:1;margin:0 11px}
.ft-links a:hover{color:#f0c060}
.ft-copy{font-size:12.5px;line-height:2;color:#6b7280}
.ft-copy b{color:#8a919e;font-weight:400}

/* ------------------------------ 提示条 ------------------------------ */
.toast{
  display:none;position:fixed;left:50%;bottom:44px;margin-left:-260px;width:520px;
  z-index:3000;padding:12px 22px;
  font-size:14px;color:#ffffff;background:#10121a;border:1px solid #a97c25;text-align:center;
}
.toast.on{display:block}

/* ------------------------------ 子页面 ------------------------------ */
.subpage{min-height:600px}
.subhero{
  position:relative;padding:130px 0 60px;overflow:hidden;
  border-bottom:1px solid #1b1e25;background:#0b0d13;
}
/* 氛围图单独一层：铺满整条横幅（IE9+ 用 background-size:cover，IE8 用滤镜 scale），
   压到 34% 透明度当底纹，文字在它上面，不受影响 */
.subhero-bg{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:url(../assets/bg-ambient.jpg) center 30% no-repeat;
  background-size:cover;
  opacity:.22;filter:alpha(opacity=22);
}
/* 子页横幅顶部：和首屏同样处理，从顶栏底色渐隐下来，避免又出现一条硬边 */
.subhero-fade{
  position:absolute;left:0;top:64px;width:100%;height:26px;
  background:linear-gradient(to bottom,rgba(10,12,17,.58) 0%,rgba(10,12,17,.24) 50%,rgba(10,12,17,0) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0A0C11',endColorstr='#000A0C11',GradientType=0);
}
.subhero .wrap{position:relative;z-index:2;text-align:center}
.subhero h1{font-size:40px;font-weight:900;letter-spacing:.1em;color:#ffe9b0;text-shadow:0 3px 14px #000000}
.subhero p{margin-top:14px;color:#a8aeba;font-size:14.5px;text-shadow:0 2px 8px #000000}
.sub-main{padding:60px 0 80px}

.card{
  max-width:820px;margin:0 auto 22px;padding:32px 34px;
  background:#12141b;border:1px solid #1b1e25;
}
.card-hd{margin-bottom:20px;overflow:hidden;zoom:1}
.card-hd h2{float:left;font-size:19px;font-weight:800;color:#ffffff;letter-spacing:.04em}
.card-hd .tag{
  float:left;margin-left:12px;
  font-size:11.5px;letter-spacing:.14em;color:#f0c060;
  padding:2px 10px;border:1px solid #5b4a24;background:#241d10;
}
.dl-row{margin-top:16px;overflow:hidden;zoom:1}
.dl-row .btn{margin:0 12px 12px 0}
.kv{font-size:14px;color:#9aa0ad;margin-top:16px}
.kv span{margin-right:28px}
.kv b{color:#ffe9b0;font-weight:700}
ol.note{margin:0;padding-left:22px;list-style:decimal}
ol.note li{margin-bottom:14px;color:#9aa0ad;font-size:14px;line-height:1.9}
ol.note li b{color:#ffe9b0}
.warn{
  margin-top:20px;padding:16px 20px;font-size:13.5px;line-height:1.9;
  color:#ffd7c8;background:#2a1410;border:1px solid #6b2a22;
}
.warn b{color:#ff8a72}

/* ------------------------------ 滚动进度条 ------------------------------ */
.scrollbar{position:fixed;left:0;top:0;right:0;height:2px;z-index:1200;background:transparent}
.scrollbar i{display:block;height:100%;width:0;background:#f0c060}

/* ------------------------------ 大屏加成 ------------------------------
   IE8 及以下不认媒体查询，这里由 JS 给 body 加 .big 类来放大排版，
   免得 2K/4K 屏幕上内容缩在中间一小块。 */
body.big .wrap{max-width:1320px}
body.big .sec-title{font-size:40px}
body.big .contact-grid{max-width:1040px}
body.big .cc{width:430px}
body.big .hero-copy{max-width:640px}
body.big .card{max-width:900px}

/* 窄窗（登录器内嵌常见 560~760px）：首屏文案缩小，避免挤出首屏 */
body.small .hdr-in{height:64px;padding:0 12px}
body.small .brand{height:64px}
body.small .brand-txt{padding-top:23px;font-size:16px;letter-spacing:.14em}
body.small .brand-txt em{font-size:10px;margin-left:8px;letter-spacing:.16em}
body.small .hdr-line{display:none}
body.small .nav{margin-left:8px}
body.small .nav a{height:64px;line-height:64px;padding:0 8px;font-size:13px}
body.small .hdr-act{height:64px;padding-top:15px}
body.small .hdr-act .btn{height:34px;line-height:32px;padding:0 12px;font-size:12.5px;margin-left:6px}
body.small .hdr-act .btn-ghost{display:none}
body.small .br-tb td.bi{font-size:11px;line-height:1.55;padding-bottom:5px;white-space:normal}
body.small .br-tb td.bi b{font-size:11px}
body.small .hero-branches{padding:12px 13px 2px}
body.small .hero-btns{margin-top:18px}
body.small .hero-btns .btn{height:40px;line-height:38px;padding:0 16px;font-size:13.5px;margin:0 8px 8px 0}
body.small .sec{padding:52px 0}
body.small .sec-title{font-size:26px}
body.small .cc{float:none;width:auto;margin-right:0}