@charset "utf-8";
/* ============================================================
   CN2016 视觉增强层 / beautify.css
   扁平化层次：细线 + 纯色块 + 留白 + 字重/字色对比，不用大投影与大渐变。
   文字区域统一加大行距与字距。
   不改布局结构、不改模板标签、不改原 CSS。
   旧内核浏览器会自动忽略不支持的属性，布局保持原样。
   ============================================================ */

/* ---------- 1. 基础：字体渲染与链接反馈 ---------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  transition: color .18s ease, background-color .18s ease, opacity .18s ease;
}
a:hover {
  transition: color .18s ease, background-color .18s ease, opacity .18s ease;
}
/* 新增细边框不得撑大原定宽高，避免双栏浮动换行 */
.news,
.list_17173,
.mainLeft,
.mainRight,
.down-btns a,
.left_down_wrap a {
  box-sizing: border-box;
}

/* ---------- 2. 顶部导航：纯色压边 + 细金线 ---------- */
.topnav {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(201, 168, 106, .55);
}
.topnav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: rgba(201, 168, 106, .75);
  pointer-events: none;
}
.nav li > a {
  letter-spacing: 1.5px;
}
.nav li > a p {
  opacity: .78;
  letter-spacing: 1px;
}
.nav li > a.data-list {
  border-bottom: 3px solid rgba(201, 168, 106, .9);
  color: #fff;
}
.nav-list {
  border: 1px solid rgba(9, 37, 49, .14);
  border-top: 0;
}

/* ---------- 3. 主视觉 → 内容区：不加遮罩，靠卡片底色与细线分层 ---------- */
.Info {
  margin: 26px auto 0;
}
.mainNewsN {
  padding-bottom: 38px;
}

/* ---------- 4. 首页：下载卡 / 轮播 / 公告条 ---------- */
.ban-channel {
  border-radius: 3px;
  background: rgba(6, 26, 35, .60);
}
.agetip,
.ban-channel .down-code {
  border-radius: 3px;
}
.down-btns a {
  border-radius: 3px;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, .16);
}
.down-btns a:hover {
  border-color: rgba(255, 255, 255, .55);
}
.exe32 {
  border-radius: 3px;
  background: #0d3c4e;
  letter-spacing: 2px;
}
.exe32:hover {
  background: #14546c;
}
.focus,
#playBox {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 3px;
}

/* ---------- 5. 首页：新闻卡（加大文字间距） ---------- */
.news {
  border: 1px solid rgba(9, 37, 49, .12);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}
.newsTitle {
  background: #f6f8f9;
  border-bottom: 1px solid rgba(9, 37, 49, .12);
}
.newsTitle ul {
  background: transparent;
}
.newsTitle ul li {
  position: relative;
  color: #5b6a72;
  font-weight: 500;
  letter-spacing: 1.5px;
  transition: color .2s ease, background-color .2s ease;
}
.newsTitle ul li:hover {
  color: #a01e22;
  background-color: rgba(160, 30, 34, .04);
}
.newsTitle ul li.h {
  font-weight: 700;
  color: #a01e22;
}
.newsTitle ul li.h::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 0;
  height: 3px;
  background: #a01e22;
}
.newsTitle a {
  right: 24px;
}
.newsTitle a img {
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease;
}
.newsTitle a:hover img {
  opacity: 1;
  transform: rotate(90deg);
}
.newsList {
  background: #fff;
}
.synthesize ul {
  width: auto;
  height: auto;
  padding: 10px 22px 4px;
}
.synthesize ul li {
  height: 34px;
  line-height: 34px;
  border-bottom: 1px dashed rgba(9, 37, 49, .14);
  transition: background-color .2s ease;
}
.synthesize ul li:last-child {
  border-bottom: 0;
}
.synthesize ul li:hover {
  background-color: rgba(160, 30, 34, .035);
}
.synthesize ul li a.hot {
  width: calc(100% - 92px);
  color: #33454e;
  letter-spacing: .8px;
}
.synthesize ul li a.hot:hover {
  color: #a01e22;
  text-decoration: none;
}
.synthesize ul li span.hot {
  color: #93a2a9;
  font-size: 12px;
  letter-spacing: .8px;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}
.synthesize ul li a .newsType {
  color: #a01e22;
  font-size: 12px;
  letter-spacing: .5px;
}

/* ---------- 6. 首页：游戏资料卡（加大文字间距） ---------- */
.list_17173 {
  border: 1px solid rgba(9, 37, 49, .12);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}
.title_17173 {
  padding-left: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  background: #fafcfd;
  border-bottom: 1px solid rgba(9, 37, 49, .12);
}
.title_17173::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 3px;
  height: 18px;
  background: #a01e22;
}
.more_17173 {
  background: #a01e22;
  color: #fff;
  border-radius: 2px;
  letter-spacing: .5px;
}
.more_17173:hover {
  background: #c0392b;
  color: #fff;
}
.game-data ul {
  padding: 6px 14px 10px;
}
.game-data li {
  height: 46px;
  line-height: 46px;
  border-bottom: 1px dashed rgba(9, 37, 49, .12);
}
.game-data li:last-child {
  border-bottom: 0;
}
.game-data li a {
  color: #41545e;
  border-radius: 2px;
  letter-spacing: 1px;
  transition: color .18s ease, background-color .18s ease;
}
.game-data li a:hover {
  color: #a01e22;
  background-color: rgba(160, 30, 34, .05);
  text-decoration: none;
}
.game-data li a::after {
  background: #dde6ea;
}

/* ---------- 7. 内页：侧栏 / 内容卡 / 列表（加大文字间距） ---------- */
.mainLeft,
.mainRight {
  border: 1px solid rgba(9, 37, 49, .12);
  border-radius: 3px;
  overflow: hidden;
}
.mainLeft {
  background: #0c2f3e;
}
.left_down_code {
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 2px;
  box-sizing: border-box;
}
.left_down_text {
  color: #cfe2ea;
  letter-spacing: 3px;
}
.left_down_wrap a {
  border-radius: 3px;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, .14);
}
.left_down_wrap a:hover {
  border-color: rgba(255, 255, 255, .55);
}
.catname {
  letter-spacing: 3px;
}
.tig {
  letter-spacing: 1px;
}
.newsTitle ul li a {
  color: #5b6a72;
  font-weight: 500;
  letter-spacing: 1.5px;
}
.newsTitle ul li.h a {
  background: #a01e22 !important;
  color: #fff !important;
  border-bottom: 3px solid rgba(201, 168, 106, .9);
}
.newsTitle ul li a:hover {
  background: rgba(160, 30, 34, .05);
}
.newsInfo li {
  width: calc(100% - 16px);
  height: 46px;
  line-height: 46px;
  padding: 0 8px;
  border-bottom: 1px dashed rgba(9, 37, 49, .14);
  letter-spacing: .5px;
  transition: background-color .2s ease;
}
.newsInfo li:last-child {
  border-bottom: 0;
}
.newsInfo li:hover {
  background: #f6fafb;
}
.newsInfo li a {
  width: calc(100% - 100px);
  color: #33454e;
  letter-spacing: .8px;
}
.newsInfo li a:hover {
  color: #a01e22;
  text-decoration: none;
}
.newsType {
  color: #a01e22 !important;
  letter-spacing: .5px;
}
.newsTime {
  color: #93a2a9 !important;
  letter-spacing: .8px;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}
.showtitle {
  position: relative;
  padding-bottom: 20px !important;
  color: #1b313c;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.showtitle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 2px;
  margin-left: -28px;
  background: #c9a86a;
}
.showContent {
  color: #3c4a52;
  line-height: 2.1;
  letter-spacing: .6px;
}
.showContent p {
  margin: 16px auto;
  letter-spacing: .6px;
}
.showContent img {
  border-radius: 2px;
}
.showContent table th {
  background: #f3f7f9;
  letter-spacing: .5px;
}
.showContent table td {
  letter-spacing: .4px;
  line-height: 1.9;
}
#pagination li a,
#pages a {
  border-radius: 2px;
}
.story p {
  line-height: 2.1;
  letter-spacing: .6px;
}
.game-wrapper h2 {
  border-bottom: 1px solid rgba(9, 37, 49, .12);
  color: #2b3d45;
  letter-spacing: 1px;
}
.game-wrapper .item b {
  border-radius: 2px;
}
.game-wrapper .cont a {
  letter-spacing: .6px;
  line-height: 1.9;
}
.game-wrapper .cont a:hover,
.game-wrapper .guide a:hover {
  color: #a01e22;
}
.game-wrapper .guide a {
  border-radius: 2px;
  letter-spacing: 1px;
  transition: background-color .2s ease, color .2s ease;
}

/* ---------- 8. 页脚：纯色收口 + 文字间距 ---------- */
.footer {
  margin-top: 14px;
  padding: 22px 0 26px;
  border-top: 2px solid #0a2935;
  background: #f4f8fa;
}
.foot {
  padding: 8px 0;
}
.webInfo p {
  color: #7a888f;
  line-height: 27px;
  letter-spacing: .5px;
}
.webINFO .cp_cn {
  color: #2b3d45;
  font-weight: 600;
  letter-spacing: 1px;
}
.webINFO .cp_en {
  letter-spacing: .6px;
}
.highlight {
  color: #a01e22;
}

/* ---------- 9. 窄屏降级：保留原响应式，收敛留白 ---------- */
@media screen and (max-width: 1200px) {
  .Info {
    margin: 16px auto 0;
  }
  .news,
  .list_17173,
  .mainRight,
  .mainLeft {
    margin-bottom: 14px;
  }
  .newsTitle a {
    right: 16px;
  }
  .synthesize ul {
    padding: 10px 14px 4px;
  }
  .newsInfo li {
    width: calc(100% - 8px);
    padding: 0 4px;
  }
  .mainNewsN {
    padding-bottom: 18px;
  }
  .footer {
    padding: 18px 0 22px;
  }
}

/* ---------- 10. 无障碍：尊重系统减弱动效设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   11. 配色重设计：与 bodybg.jpg（蓝白水墨 / 墨靛书法）同源
   取样自背景图：墨 (16,48,80)、雾蓝 (192,208,224)、宣纸 (240,240,240)
   ============================================================ */
body {
  background-color: #E9F0F6;
  /* 背景图保持模板原样：1920×1209 固定尺寸 + center top，不做缩放 */
}

/* 11.1 顶部：墨靛纯色，去掉偏绿底图与荧光青 hover */
.topnav {
  background: #1A3E63;
  border-bottom-color: rgba(200, 222, 239, .42);
}
.topnav::after {
  height: 1px;
  background: rgba(200, 222, 239, .30);
}
.nav li > a {
  color: #DDE9F4;
  text-shadow: none;
}
.nav li > a p {
  color: #93B4D0;
  opacity: 1;
}
.nav li > a:hover,
.topnav .data-list,
.data-line #dataTh {
  background: #2C6691;
  color: #fff;
}
.nav li > a.data-list {
  border-bottom-color: #8FB6D6;
}
.nav-list {
  background: #F2F7FA;
  border-color: rgba(27, 58, 92, .18);
}
.nav-list a {
  color: #244A6B;
}
.nav-list a:hover {
  background: #2C6691;
  color: #fff;
}

/* 11.2 卡片与页脚：统一冷蓝灰描边，去掉暖金件 */
.news,
.list_17173,
.mainLeft,
.mainRight {
  border-color: rgba(27, 58, 92, .16);
}
.newsTitle,
.title_17173 {
  background: #F5F8FA;
  border-bottom-color: rgba(27, 58, 92, .14);
}
.newsTitle ul li.h::after,
.title_17173::before {
  background: #A01E22;
}
.newsTitle ul li.h a {
  border-bottom-color: #A01E22;
}
.showtitle::after {
  background: #7FA3C2;
}
.exe32 {
  background: #1A3E63;
}
.exe32:hover {
  background: #2C6691;
}
.footer {
  border-top-color: #1A3E63;
  background: #F2F7FA;
}
.webINFO .cp_cn,
.game-wrapper h2 {
  color: #243B4F;
}

/* 11.3 首页内容下移：背景图固定 1920×1209 + center top（不缩放），
   两行书法底边恒在 y≈760；内容原本从 y=581 起（导航 81 + .banner 500）。
   取 110px：内容起点 y≈691，紧贴书法下方，留白收窄；
   再往上会开始压住「锋芒」的下半笔画，故止于此。 */
.bodyerbottom {
  padding-top: clamp(0px, calc(100vh - 780px), 110px);
}

/* 11.4 窄屏：取消下移，移动导航同步墨靛色 */
@media screen and (max-width: 1200px) {
  .bodyerbottom {
    padding-top: 0;
  }
  .banner {
    background-color: #E9F0F6;
    /* 原窄屏 .banner 有 margin-bottom:-80px，会把下载区压到背景图上 */
    margin-bottom: 0;
  }
  /* 模板 style.css 在窄屏把 .ban-channel 隐藏了，导致首页下载卡整块消失 */
  .ban-channel {
    display: block;
  }
  .sp_header,
  .sjj_nav,
  .mainNewsTitle {
    background-color: #1A3E63 !important;
  }
  .mainNewsTitle {
    background-image: none !important;
  }
  .sp_nav span {
    background: #DDE9F4;
  }
}

/* ============================================================
   11.5 内页两块冲突色重做：左下载卡 / 栏目横幅
   原 .mainLeft 为墨绿 #0c2f3e + 绿/灰/亮蓝三色按钮，
   原 mainNewsTitle.jpg 为青绿竹林 + 绿衣人物，均与蓝白水墨背景冲突。
   ============================================================ */
.mainLeft {
  background: #1A3E63;
  border-color: rgba(27, 58, 92, .28);
}
.left_down_code {
  border-color: #DDE9F4;
}
.left_down_text {
  color: #C7DCEC;
}
/* 三个下载按钮统一雾青实色，去掉草绿、灰蓝与亮蓝渐变 */
.left_down_android,
.left_down_ios,
.left_down_pc {
  background: #2C6691;
  border-color: rgba(221, 233, 244, .34);
  color: #fff;
  text-shadow: none;
}
.left_down_wrap a:hover {
  background: #3A7CB0;
  border-color: rgba(221, 233, 244, .75);
  opacity: 1;
}
/* 横幅换用同系蓝调重绘图；原 mainNewsTitle.jpg 保留未动 */
.mainNewsTitle {
  background-color: #1A3E63;
  background-image: url(../images/mainNewsTitle-blue.jpg);
}
.catname,
.tig,
.tig a {
  color: #EDF4FA;
}

/* 首页同一块下载卡：原 rgba(0,0,0,.4) 叠在浅色背景上呈灰底，
   且三个按钮是青/绿/黑。统一到墨靛 + 雾青，与内页左卡一致。 */
.ban-channel {
  background: rgba(26, 62, 99, .94);
}
.down-btns .down-PC,
.down-btns .down-iOS,
.down-btns .down-android {
  background: #2C6691;
}
.down-btns a:hover {
  background: #3A7CB0;
}

/* ============================================================
   11.6 APP / 窄屏：首页下载卡自适应
   原样式：.ban-channel 固定 height:154px，子项固定宽（16+ 94 / 按钮 170 /
   二维码 136）。1200px 以下 .VidoLink 变 100%，卡片会被拉成 1200px 长条、
   内容全挤在左侧；154px 高又装不下 153px 的二维码块，标签"扫码添加客服"
   溢出卡片、被下方公告条压住。<=468px 时整条还会超出视口被裁。
   改为：容器不再固定 1200px；卡片按内容宽度居中，高度自适应，必要时换行。
   ============================================================ */
@media screen and (max-width: 1200px) {
  /* .q 固定 1200px → 窄屏下所有块超宽，被 body 的 overflow-x:hidden 裁掉右侧 */
  .kv-bar .q {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .ban-channel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
    padding: 12px 10px;
    box-sizing: border-box;
  }
  .agetip,
  .ban-channel .down-btns,
  .ban-channel .down-code {
    float: none;
    margin: 0;
    flex: 0 0 auto;
  }
}

/* 手机 / APP 内嵌（<=600）：与 PC 一样一行排开 —— 16+ 提示 | 三个下载按钮 | 二维码。
   宽度分配：提示 94 固定，按钮 flex 吃掉剩余，二维码 84 固定；
   400px 视口下 94+8+166+8+84 = 360，正好一行放得下，不再换行。 */
@media screen and (max-width: 600px) {
  .ban-channel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    padding: 12px 10px;
    box-sizing: border-box;
  }
  .ban-channel .agetip {
    flex: 0 0 auto;
    margin: 0;
  }
  .ban-channel .down-btns {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  .ban-channel .down-btns a {
    width: 100%;
    height: 36px;
    line-height: 36px;
    margin-bottom: 4px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .ban-channel .down-btns a:last-child {
    margin-bottom: 0;
  }
  .ban-channel .down-btns a i {
    margin: 6px 6px 0 8px;
    transform: scale(.8);
    transform-origin: left center;
  }
  .ban-channel .down-code {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }
  .ban-channel .down-code img {
    width: 84px;
    height: 84px;
    margin: 0;
    padding: 4px;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
  }
  .ban-channel .down-code span {
    width: auto;
    text-align: center;
    line-height: 1.3;
    font-size: 11px;
    letter-spacing: 0;
    color: #DDE9F4;
  }
  /* 原设计那条循环扫描线缩小后会飘出二维码，隐藏 */
  .ban-channel .down-code i {
    display: none;
  }
}

/* 超窄机（<=380）：等比再收一档，仍保持一行不换行 */
@media screen and (max-width: 380px) {
  .ban-channel {
    gap: 6px;
    padding: 10px 8px;
  }
  .ban-channel .agetip {
    width: 78px;
    height: 100px;
    background-size: 100% 100%;
  }
  .ban-channel .down-btns a {
    height: 32px;
    line-height: 32px;
    margin-bottom: 3px;
    font-size: 13px;
  }
  .ban-channel .down-btns a i {
    margin: 5px 5px 0 6px;
    transform: scale(.72);
    transform-origin: left center;
  }
  .ban-channel .down-code img {
    width: 72px;
    height: 72px;
  }
  .ban-channel .down-code span {
    font-size: 10px;
  }
}

/* ============================================================
   11.7 游戏资料卡：窄屏（APP / 手机）条目显示不全
   原样式 .game-data li 固定 height:46px + overflow:hidden，内部 6 个 a 全部
   float:left 且 min-width:85px —— 一行至少 510px。卡片窄于该值时第 5、6 项
   直接溢出被裁，看起来"内容不全"。
   改为：<=560px 时每个 li 变 4 列栅格（6 项 → 4 个 + 2 个换行）全部可见，
   卡片高度改 auto，行分隔继续由 li 的 dashed border 承担。
   ============================================================ */
/* 桌面：行末第 6 项多余的竖线（前 5 条保留作分栏） */
.game-data li a:nth-child(6n)::after {
  display: none;
}

@media screen and (max-width: 560px) {
  /* 原固定 258px 装不下两行条目，改自适应 */
  .list_17173 {
    height: auto;
  }
  .game-data ul {
    padding: 4px 10px 8px;
  }
  .game-data li {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: auto;
    line-height: 1;
    padding: 8px 0;
    overflow: visible;
  }
  .game-data li a {
    float: none;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 3px 0;
    line-height: 22px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0;
    box-sizing: border-box;
  }
  /* 每行最后一列（第 4 个）不画分栏竖线 */
  .game-data li a:nth-child(4n)::after {
    display: none;
  }
}