/* =========================================================
   热血传奇 · 暗黑红金风 模板样式 v1.0
   适用：易优CMS(EyouCMS) 电脑端模板（响应式）
   主色：金 #d4af37  血红 #a01620  底 #0d0b10
   ========================================================= */
@import url(font-awesome.min.css);

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 14px/1.7 "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: #cfc6ae;
  background: #0d0b10 url(../images/bg.jpg) repeat;
}
img { max-width: 100%; vertical-align: middle; border: 0; }
a { color: #cfc6ae; text-decoration: none; transition: color .25s, background .25s, border-color .25s; }
a:hover { color: #d4af37; }
ul, ol { list-style: none; }
.container { width: 1200px; margin: 0 auto; }
.clearfix::after { content: ""; display: block; clear: both; }
.fl { float: left; } .fr { float: right; } .clear { clear: both; }
.align-center { text-align: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 金色分隔线标题 */
.sec-title { position: relative; margin: 0 0 22px; padding: 0 0 12px; border-bottom: 1px solid #3a2f1d; }
.sec-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px; background: linear-gradient(90deg, #d4af37, rgba(212,175,55,0)); }
.sec-title h2 { font-size: 22px; color: #d4af37; letter-spacing: 2px; font-weight: 700; }
.sec-title h2 i { margin-right: 8px; color: #a01620; }
.sec-title .more { float: right; font-size: 13px; color: #8a7d5f; margin-top: 6px; }
.sec-title .more:hover { color: #d4af37; }

/* ============ 头部 ============ */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(13,11,16,.92); border-bottom: 2px solid #3a2f1d; transition: top .4s; }
.header.slideUp { top: -86px; }
.header-inner { display: flex; align-items: center; height: 76px; }
.logo { display: flex; align-items: center; }
.logo img { height: 52px; display: block; }
.nav-bar { flex: 1 1 auto; margin-left: 20px; min-width: 0; overflow: visible; }
.nav-bar ul { display: flex; flex-wrap: nowrap; justify-content: flex-end; }
.nav-bar ul li { position: relative; flex-shrink: 0; }
.nav-bar ul li > a {
  display: block; padding: 0 12px; height: 76px; line-height: 76px;
  font-size: 15px; color: #cfc6ae; letter-spacing: 1px; white-space: nowrap;
}
.nav-bar ul li > a i { margin-right: 6px; color: #8a6d2a; }
.nav-bar ul li > a:hover, .nav-bar ul li.active > a, .nav-bar ul li.on > a { color: #d4af37; background: rgba(212,175,55,.06); }
.nav-bar ul li.active > a { border-bottom: 2px solid #d4af37; }
.nav-bar .sub-nav {
  position: absolute; left: 0; top: 76px; min-width: 150px; display: none;
  background: #161220; border: 1px solid #3a2f1d; border-top: 2px solid #d4af37; box-shadow: 0 10px 24px rgba(0,0,0,.6);
}
.nav-bar ul li:hover .sub-nav, .nav-bar ul li.on .sub-nav { display: block; }
.nav-bar .sub-nav a { display: block; padding: 10px 16px; height: auto; line-height: 1.5; font-size: 14px; border-bottom: 1px dashed #2a2318; color: #b8ac8e; }
.nav-bar .sub-nav a:hover { color: #d4af37; background: #201a28; }
.nav-right { display: flex; align-items: center; }
.nav-right .search-btn { width: 38px; height: 38px; line-height: 38px; text-align: center; border: 1px solid #3a2f1d; color: #d4af37; cursor: pointer; border-radius: 4px; }
.nav-right .search-btn:hover { background: rgba(212,175,55,.1); }
.m-btn { display: none; }
.search-pop {
  position: fixed; left: 0; right: 0; top: 78px; z-index: 998; background: rgba(13,11,16,.97);
  border-bottom: 1px solid #3a2f1d; padding: 16px 0; display: none;
}
.search-pop form { display: flex; width: 640px; margin: 0 auto; }
.search-pop input {
  flex: 1; height: 42px; padding: 0 16px; background: #1a1520; border: 1px solid #3a2f1d;
  color: #e5dcc4; font-size: 14px; outline: none;
}
.search-pop input:focus { border-color: #d4af37; }
.search-pop button { width: 90px; height: 42px; border: none; background: #a01620; color: #fff; font-size: 14px; cursor: pointer; letter-spacing: 2px; }
.search-pop button:hover { background: #c0192a; }

/* ============ 公告条 ============ */
.notice-bar {
  margin: 86px auto 0; background: linear-gradient(90deg, #4a0d12, #7a1018, #4a0d12);
  border-top: 1px solid #8a6d2a; border-bottom: 1px solid #8a6d2a; color: #ffd97a;
}
.notice-inner { display: flex; align-items: center; height: 42px; }
.notice-inner .lab { flex-shrink: 0; padding: 0 16px; height: 26px; line-height: 26px; margin-right: 12px; background: #d4af37; color: #1a0f05; font-weight: 700; font-size: 13px; border-radius: 3px; letter-spacing: 2px; }
.notice-inner .lab i { margin-right: 4px; }
.notice-inner .ticker { flex: 1; overflow: hidden; font-size: 14px; white-space: nowrap; position: relative; }
.notice-inner .ticker-inner { display: inline-block; white-space: nowrap; padding-left: 100%; animation: cq-ticker 40s linear infinite; }
.notice-inner .ticker:hover .ticker-inner { animation-play-state: paused; }
@keyframes cq-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.notice-inner .ticker a { color: #ffd97a; margin-right: 44px; }
.notice-inner .ticker a:hover { color: #fff; }
.notice-inner .more { flex-shrink: 0; color: #b8935a; font-size: 13px; }

/* ============ 轮播 ============ */
.slideBox { position: relative; overflow: hidden; margin: 0 0 20px; border: 1px solid #3a2f1d; box-shadow: 0 6px 30px rgba(0,0,0,.55); }
.slideBox .bd { position: relative; z-index: 0; height: 300px; overflow: hidden; }
.slideBox .bd ul { position: relative; height: 100%; }
.slideBox .bd ul li { position: absolute; top: 0; left: 0; width: 100%; display: none; }
.slideBox .bd ul li:first-child { display: block; }
.slideBox .bd ul li a { display: block; }
.slideBox .bd ul li img { width: 100%; height: 300px; object-fit: cover; display: block; }
.slideBox .bd li .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 30px 20px;
  background: linear-gradient(transparent, rgba(10,8,12,.85)); color: #fff; font-size: 20px; letter-spacing: 1px;
}
.slideBox .hd { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 9; text-align: center; }
.slideBox .hd ul li { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background: rgba(255,255,255,.35); border: 1px solid rgba(212,175,55,.6); border-radius: 50%; cursor: pointer; }
.slideBox .hd ul li.on { background: #d4af37; }
.slideBox .prev, .slideBox .next { position: absolute; top: 50%; margin-top: -26px; z-index: 9; width: 44px; height: 52px; line-height: 52px; text-align: center; font-size: 28px; color: #e5dcc4; background: rgba(10,8,12,.55); border: 1px solid #3a2f1d; }
.slideBox .prev { left: 12px; } .slideBox .next { right: 12px; }
.slideBox .prev:hover, .slideBox .next:hover { color: #d4af37; border-color: #d4af37; }

/* ============ 内容区 ============ */
.main { padding: 22px 0 50px; }
.content-wrap { display: flex; }
.article-main { flex: 1; min-width: 0; }
.sidebar { width: 300px; flex-shrink: 0; margin-left: 22px; }

.panel { background: rgba(18,15,22,.88); border: 1px solid #3a2f1d; margin-bottom: 20px; }
.panel .panel-h { padding: 12px 16px; border-bottom: 1px solid #3a2f1d; background: linear-gradient(90deg, rgba(212,175,55,.16), rgba(212,175,55,0)); }
.panel .panel-h h3 { font-size: 16px; color: #d4af37; letter-spacing: 2px; }
.panel .panel-h h3 i { margin-right: 8px; color: #a01620; }
.panel .panel-b { padding: 14px 16px; }

/* ============ 三职业 ============ */
.class-grid { display: flex; margin: 0 -10px; }
.class-grid .item { width: 33.333%; padding: 0 10px; }
.class-grid .box { position: relative; border: 1px solid #3a2f1d; overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; }
.class-grid .box:hover { transform: translateY(-5px); border-color: #d4af37; box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.class-grid .pic img { width: 100%; height: 380px; object-fit: cover; display: block; }
.class-grid .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; background: linear-gradient(transparent, rgba(8,6,10,.9)); }
.class-grid .info h3 { font-size: 22px; color: #d4af37; letter-spacing: 4px; }
.class-grid .info p { font-size: 13px; color: #b8ac8e; margin-top: 4px; }

/* ============ 特色宫格 ============ */
.feature-grid { display: flex; flex-wrap: wrap; margin: -8px; }
.feature-grid .item { width: 50%; padding: 8px; }
.feature-grid .box { display: block; text-decoration: none; color: inherit; text-align: center; padding: 26px 14px 20px; border: 1px solid #2a2318; background: linear-gradient(180deg, #1a1520, #120f16); transition: border-color .3s, transform .3s, box-shadow .3s; }
.feature-grid .box:hover { border-color: #d4af37; transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.feature-grid .box:hover h3 { color: #d4af37; }
.feature-grid .icon { width: 60px; height: 60px; margin: 0 auto 12px; border: 1px solid #8a6d2a; border-radius: 50%; line-height: 58px; font-size: 26px; color: #d4af37; background: rgba(212,175,55,.08); }
.feature-grid h3 { font-size: 16px; color: #e5dcc4; transition: color .3s; }
.feature-grid p { font-size: 12px; color: #8a7d5f; margin-top: 6px; }
.feature-grid .more {
  display: inline-block; margin-top: 14px; padding: 7px 22px;
  font-size: 13px; color: #d4af37; letter-spacing: 2px;
  border: 1px solid #8a6d2a; background: rgba(212,175,55,.08);
  transition: all .25s;
}
.feature-grid .box:hover .more { background: #d4af37; color: #1a0f05; border-color: #d4af37; }
.feature-grid .more i { margin-left: 4px; }

/* ============ 双栏新闻 ============ */
.news-cols { display: flex; margin: 0 -10px; }
.news-cols .col { width: 50%; padding: 0 10px; }
.news-list li { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px dashed #2a2318; }
.news-list .pic { width: 96px; height: 66px; flex-shrink: 0; border: 1px solid #2a2318; overflow: hidden; background: #161220; }
.news-list .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.news-list li:hover .pic img { transform: scale(1.06); }
.news-list .txt { flex: 1; min-width: 0; }
.news-list .txt a { display: block; color: #c9bfa4; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list .txt a:hover { color: #d4af37; }
.news-list .txt span { display: block; color: #6d6350; font-size: 12px; margin-top: 6px; }

/* ============ 侧栏 ============ */
.side-list li { padding: 10px 0; border-bottom: 1px dashed #2a2318; }
.side-list li a { display: block; color: #c9bfa4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list li a:hover { color: #d4af37; }
.side-list li span { display: block; font-size: 12px; color: #6d6350; margin-top: 2px; }
.side-hot li { display: flex; padding: 9px 0; border-bottom: 1px dashed #2a2318; }
.side-hot li .num { width: 24px; height: 24px; line-height: 24px; text-align: center; background: #2a2318; color: #8a7d5f; font-size: 12px; margin-right: 10px; flex-shrink: 0; }
.side-hot li:nth-child(-n+3) .num { background: #a01620; color: #ffd97a; }
.side-hot li a { flex: 1; min-width: 0; color: #c9bfa4; font-size: 13px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-hot li a:hover { color: #d4af37; }
.tag-cloud { text-align: center; }
.tag-cloud a { display: inline-block; margin: 4px; padding: 4px 14px; border: 1px solid #2a2318; color: #b8ac8e; font-size: 13px; }
.tag-cloud a:hover { border-color: #d4af37; color: #d4af37; background: rgba(212,175,55,.06); }
.side-links li { display: inline-block; margin: 4px 10px 4px 0; font-size: 13px; }
.side-links li a { color: #8a7d5f; }
.side-links li a:hover { color: #d4af37; }
/* 开服表 */
.serve-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.serve-table th { background: #2a2318; color: #d4af37; padding: 8px 6px; font-weight: 600; border: 1px solid #3a2f1d; }
.serve-table td { padding: 8px 6px; text-align: center; border: 1px solid #2a2318; color: #b8ac8e; }
.serve-table tr:hover td { background: rgba(212,175,55,.05); color: #e5dcc4; }
.serve-table .hot { color: #ff5a3c; font-weight: 700; }

/* ============ 面包屑 ============ */
.crumbs { margin: 86px auto 0; padding: 14px 0; border-bottom: 1px solid #2a2318; font-size: 13px; color: #8a7d5f; }
.crumbs a { color: #8a7d5f; } .crumbs a:hover { color: #d4af37; }
.crumbs .current { color: #d4af37; }

/* ============ 列表页 ============ */
.doc-list li { display: flex; padding: 16px 0; border-bottom: 1px dashed #2a2318; }
.doc-list .pic { width: 170px; height: 116px; flex-shrink: 0; border: 1px solid #2a2318; overflow: hidden; background: #161220; }
.doc-list .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.doc-list li:hover .pic img { transform: scale(1.05); }
.doc-list .info { flex: 1; min-width: 0; margin-left: 18px; }
.doc-list .info h3 { font-size: 17px; margin: 2px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-list .info h3 a { color: #e5dcc4; }
.doc-list .info h3 a:hover { color: #d4af37; }
.doc-list .info p { font-size: 13px; color: #8a7d5f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-list .info .meta { margin-top: 8px; font-size: 12px; color: #6d6350; }
.doc-list .info .meta i { margin-right: 14px; font-style: normal; }
/* 列表文章标签（标签元素）：金色暗黑胶囊 */
.item-tags { margin-top: 6px; line-height: 1.9; }
.item-tags .tag {
  display: inline-block; margin-right: 6px; padding: 1px 10px;
  font-size: 12px; color: #8a7d5f; border: 1px solid #2a2318; background: rgba(42,35,24,.35);
}
.item-tags .tag:hover { color: #d4af37; border-color: #d4af37; background: rgba(212,175,55,.08); }
.txt-list li { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px dashed #2a2318; }
.txt-list li a { color: #c9bfa4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txt-list li a:hover { color: #d4af37; }
.txt-list li span { color: #6d6350; font-size: 12px; }

/* 分页 */
.pagination { text-align: center; margin-top: 26px; }
.pagination a, .pagination span, .pagination .current {
  display: inline-block; min-width: 36px; height: 36px; line-height: 36px; padding: 0 10px; margin: 0 4px;
  border: 1px solid #3a2f1d; background: #161220; color: #b8ac8e; font-size: 13px;
}
.pagination a:hover { border-color: #d4af37; color: #d4af37; }
.pagination .current { background: #a01620; border-color: #a01620; color: #ffd97a; }
.pagination .disabled { color: #4d4536; }

/* ============ 详情页 ============ */
.detail-head { text-align: center; padding: 4px 0 20px; border-bottom: 1px solid #2a2318; margin-bottom: 20px; }
.detail-head h1 { font-size: 24px; color: #e5dcc4; letter-spacing: 1px; }
.detail-head .meta { margin-top: 14px; font-size: 13px; color: #8a7d5f; }
.detail-head .meta i { margin: 0 12px; font-style: normal; }
.article-content { font-size: 15px; line-height: 1.9; color: #c9bfa4; word-break: break-word; }
.article-content p { margin-bottom: 16px; }
.article-content img { max-width: 100%; height: auto; border: 1px solid #2a2318; }
.article-content h1, .article-content h2, .article-content h3 { color: #d4af37; margin: 22px 0 12px; }
.article-content ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.article-content ol { list-style: decimal; padding-left: 24px; margin-bottom: 16px; }
.article-content table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.article-content table td, .article-content table th { border: 1px solid #3a2f1d; padding: 8px 12px; }
.article-content blockquote { border-left: 4px solid #a01620; background: rgba(160,22,32,.1); padding: 12px 18px; margin: 16px 0; color: #b8ac8e; }
.article-tags { margin-top: 20px; font-size: 13px; color: #8a7d5f; }
.article-tags a { display: inline-block; margin-left: 8px; padding: 3px 12px; border: 1px solid #2a2318; color: #b8ac8e; }
.article-tags a:hover { color: #d4af37; border-color: #d4af37; }
.prenext { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid #2a2318; font-size: 13px; }
.prenext a { display: block; width: 48%; color: #8a7d5f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prenext a:hover { color: #d4af37; }
.relates { margin-top: 26px; }
.relates .r-list { display: flex; flex-wrap: wrap; margin: -8px; }
.relates .r-item { width: 25%; padding: 8px; }
.relates .r-box { border: 1px solid #2a2318; background: #161220; }
.relates .r-box img { width: 100%; height: 110px; object-fit: cover; display: block; }
.relates .r-box .t { padding: 8px 10px; font-size: 13px; color: #c9bfa4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relates .r-box .t a { color: #c9bfa4; } .relates .r-box .t a:hover { color: #d4af37; }

/* ============ 页头横幅（列表/详情页） ============ */
.page-banner { margin: 86px auto 0; border-bottom: 2px solid #3a2f1d; }
.page-banner { position: relative; }
.page-banner img { width: 100%; height: 260px; object-fit: cover; display: block; }
.page-banner .banner-text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 2; }
.page-banner .banner-text h2 { font-size: 42px; color: #e5dcc4; letter-spacing: 6px; font-weight: 700; text-shadow: 0 2px 16px rgba(0,0,0,.7); }

/* 单页正文用 article-content */

/* ============ 底部 ============ */
.footer { margin-top: 30px; background: rgba(10,8,13,.95); border-top: 2px solid #3a2f1d; }
.footer-top { display: flex; justify-content: space-between; padding: 36px 0 26px; }
.footer-col h4 { font-size: 16px; color: #d4af37; margin-bottom: 16px; letter-spacing: 2px; }
.footer-col li { margin-bottom: 9px; font-size: 13px; }
.footer-col a { color: #8a7d5f; }
.footer-col a:hover { color: #d4af37; }
.footer-col.contact { width: 340px; }
.footer-col.contact p { font-size: 13px; color: #8a7d5f; margin-bottom: 8px; }
.footer-col.contact .tel { font-size: 24px; color: #d4af37; font-weight: 700; margin: 6px 0; }
.footer-links { border-top: 1px solid #211c14; padding: 16px 0; font-size: 13px; }
.footer-links b { color: #8a6d2a; font-weight: 600; margin-right: 8px; }
.footer-links a { color: #6d6350; margin-right: 12px; }
.footer-links a:hover { color: #d4af37; }
.footer-copy { border-top: 1px solid #211c14; padding: 16px 0 22px; text-align: center; font-size: 12px; color: #55503f; }
.footer-copy a { color: #55503f; } .footer-copy a:hover { color: #8a6d2a; }

/* 回到顶部 */
#topcontrol { position: fixed; right: 24px; bottom: 50px; width: 44px; height: 44px; line-height: 44px; text-align: center; background: #a01620; color: #ffd97a; font-size: 22px; cursor: pointer; opacity: 0; visibility: hidden; transition: all .3s; z-index: 999; }
#topcontrol.active { opacity: 1; visibility: visible; }
#topcontrol:hover { background: #c0192a; }

/* ============ 响应式 ============ */
@media (max-width: 1240px) { .container { width: 96%; } }
@media (max-width: 1024px) {
  .nav-bar ul li > a { padding: 0 12px; font-size: 15px; }
  .slideBox .bd ul li img { height: 300px; }
  .content-wrap { flex-direction: column; }
  .sidebar { width: 100%; margin-left: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; }
  .sidebar .panel { flex: 1 1 300px; }
  .class-grid .pic img { height: 320px; }
}
@media (max-width: 768px) {
  .header-inner { height: 58px; }
  .header.slideUp { top: -64px; }
  .nav-bar { position: absolute; top: 58px; left: 0; right: 0; display: none; background: rgba(13,11,16,.98); border-bottom: 1px solid #3a2f1d; }
  .nav-bar.open { display: block; }
  .nav-bar ul { flex-direction: column; }
  .nav-bar ul li > a { height: 44px; line-height: 44px; border-bottom: 1px solid #211c14; }
  .nav-bar .sub-nav { position: static; display: none; box-shadow: none; border: none; background: #120f16; }
  .nav-bar ul li:hover .sub-nav { display: none; }
  .nav-bar ul li.open .sub-nav { display: block; }
  .m-btn { display: block; font-size: 22px; color: #d4af37; cursor: pointer; padding: 0 10px; }
  .search-pop form { width: 92%; }
  .notice-bar { margin-top: 58px; }
  .crumbs { margin-top: 58px; }
  .page-banner { margin-top: 58px; }
  .page-banner img { height: 150px; }
  .slideBox .bd ul li img { height: 180px; }
  .class-grid { flex-direction: column; }
  .class-grid .item { width: 100%; margin-bottom: 14px; }
  .class-grid .pic img { height: 300px; }
  .feature-grid .item { width: 50%; }
  .news-cols { flex-direction: column; }
  .news-cols .col { width: 100%; margin-bottom: 16px; }
  .doc-list li { flex-direction: column; }
  .doc-list .pic { width: 100%; height: 180px; }
  .doc-list .info { margin-left: 0; margin-top: 12px; }
  .relates .r-item { width: 50%; }
  .footer-top { flex-wrap: wrap; }
  .footer-col { width: 50%; margin-bottom: 20px; }
  .footer-col.contact { width: 100%; }
}