:root {
  --red: #c0121a;
  --dark-red: #8f0f16;
  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", SimSun, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 54px; }
body { min-width: 1200px; font: 14px/1.6 "Microsoft YaHei", "PingFang SC", sans-serif; color: #333; background: #fff; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; }
.wrap { width: 1200px; margin: 0 auto; }

/* 顶部条   banner */
.topbar { height: 38px; line-height: 38px; font-size: 13px; color: #f3d6c6; background: #8a0d14; }
.topbar .wrap { display: flex; justify-content: space-between; }
.banner { height: 414px; background: #d9040f url(banner.png) no-repeat left top / auto 100%; }

/* 导航 */
.nav { position: sticky; top: 0; z-index: 100; height: 54px; background: #bd0712; box-shadow: 0 2px 6px rgba(120, 0, 0, .25); }
.nav ul { display: flex; width: 1200px; margin: 0 auto; }
.nav li { width: 180px; }
.nav li:nth-child(4) { width: 300px; }
.nav li   li { border-left: 1px solid #b8000c; }
.nav a { display: flex; align-items: center; justify-content: center; height: 54px; font-size: 22px; font-weight: 900; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: background .3s; }
.nav a span { position: relative; padding-bottom: 2px; }
.nav a span::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 3px; background: #fff; transition: width .3s, left .3s; }
.nav a:hover { background: #c3030f; }
.nav a:hover span::after, .nav a.active span::after { left: 0; width: 100%; }

/* 页脚 */
.footer { height: 260px; padding-top: 84px; font-size: 13px; line-height: 34px; text-align: center; color: #fff; background: linear-gradient(#8a0d14, #6f0610); }

/* 滚动出现 / 返回顶部 */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }
.back-top { position: fixed; right: 40px; bottom: 60px; z-index: 99; width: 46px; height: 46px; border-radius: 50%; background: var(--red); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(20px); transition: .3s; }
.back-top::before { content: ""; position: absolute; left: 17px; top: 20px; width: 12px; height: 12px; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(45deg); }
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { background: var(--dark-red); }

/* banner 居中 */
.banner { background-position: center top; }
.inner { min-height: 760px; padding: 96px 0 110px; }

/* 详情页 */
.article { width: 1000px; margin: 0 auto; }
.article h1 { font-size: 32px; line-height: 1.4; text-align: center; color: #333; }
.article .info { margin: 50px 0 12px; padding-right: 20px; font-size: 12px; text-align: right; color: #aaa; }
.article p { margin-bottom: 18px; font-size: 18px; line-height: 35px; text-indent: 2em; color: #666; }
.btn-close { display: block; width: 64px; margin: 70px 0 0 auto; font-size: 12px; line-height: 22px; text-align: center; color: #666; border-radius: 11px; background: linear-gradient(#fff, #eee); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: color .3s, box-shadow .3s; }
.btn-close::before { content: "✖"; margin-right: 4px; font-size: 10px; color: #7ac100; }
.btn-close:hover { color: var(--red); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }

/* 列表页 */
.list-box { width: 864px; margin: 0 auto; }
.list-box h2 { margin-bottom: 8px; font-size: 24px; line-height: 40px; color: #a30c10; }
.list-box li { border-bottom: 1px dashed #999; }
.list-box li a { position: relative; display: block; height: 101px; padding-left: 21px; overflow: hidden; font-size: 18px; line-height: 101px; white-space: nowrap; text-overflow: ellipsis; color: #333; transition: padding .3s, color .3s; }
.list-box li a::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -5px; border: 5px solid transparent; border-right: 0; border-left: 8px solid #1e88e5; transition: left .3s; }
.list-box li a:hover { padding-left: 32px; color: var(--red); }
.list-box li a:hover::before { left: 11px; }
.pager { margin-top: 44px; font-size: 14px; text-align: center; color: #666; }
.pager a { margin: 0 5px; }
.pager a:hover { color: var(--red); }
.pager .next { font-weight: 700; color: #000; }