/* ===== 内页横幅 ===== */
.page-banner {background: linear-gradient(135deg, #0b1a33 0%, #1a3a7a 50%, #2563eb 100%);color: #fff;padding: 60px 0 50px;position: relative;overflow: hidden;}
.page-banner::after {content: '';position: absolute;right: -100px;top: -100px;width: 400px;height: 400px;background: rgba(255,255,255,0.04);border-radius: 50%;}
.page-banner .container {position: relative;z-index: 2;}
.page-banner h1 {font-size: 40px;font-weight: 700;margin-bottom: 10px;}
.page-banner p {font-size: 18px;opacity: 0.85;max-width: 600px;}
.page-banner .breadcrumb {margin-top: 16px;font-size: 14px;opacity: 0.7;}
.page-banner .breadcrumb a {color: #fff;opacity: 0.7;}
.page-banner .breadcrumb a:hover {opacity: 1;}
.page-banner .breadcrumb span {margin: 0 6px;}
/* ===== 文章主体 ===== */
.article-main {padding: 50px 0 80px;background: #f8fafc;}
.article-wrap {display: flex;gap: 40px;}
.article-content {flex: 2;background: #fff;border-radius: 12px;padding: 44px 48px;box-shadow: 0 2px 12px rgba(0,0,0,0.04);}
.article-content h1 {font-size: 26px;font-weight: 700;margin-bottom: 20px;max-width: 800px;text-align:center;}
.article-content .meta-info {display: flex;flex-wrap: wrap;gap: 20px;font-size: 15px;opacity: 0.8;text-align: center;justify-content: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}
.article-content .meta-info .category {background: rgba(255,255,255,0.15);padding: 2px 14px;border-radius: 20px;}
.article-content .article-body {font-size: 16px;color: #444;line-height: 1.9;}
.article-content .article-body h2 {font-size: 24px;color: #222;margin: 30px 0 16px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}
.article-content .article-body h3 {font-size: 20px;color: #222;margin: 24px 0 12px;}
.article-content .article-body p {margin-bottom: 18px;}
.article-content .article-body ul,.article-content .article-body ol {padding-left: 24px;margin-bottom: 18px;}
.article-content .article-body ul li {list-style: disc;margin-bottom: 6px;}
.article-content .article-body ol li {list-style: decimal;margin-bottom: 6px;}
.article-content .article-body blockquote {background: #f0f4ff;border-left: 4px solid #2563eb;padding: 16px 24px;margin: 20px 0;border-radius: 0 6px 6px 0;color: #555;}
.article-content .article-body img {border-radius: 8px;margin: 20px 0;width: 100%;}
.article-content .article-body .tip-box {background: #f8fafc;border: 1px solid #e8edf5;border-radius: 8px;padding: 20px 24px;margin: 20px 0;}
.article-content .article-body .tip-box strong {color: #2563eb;}
/* 文章底部：标签、分享、作者 */
.article-footer {margin-top: 40px;padding-top: 30px;border-top: 1px solid #f0f0f0;}
.article-tags {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 20px;}
.article-tags a {display: inline-block;padding: 4px 16px;background: #f0f4ff;color: #2563eb;border-radius: 20px;font-size: 13px;transition: all 0.3s;}
.article-tags a:hover {background: #2563eb;color: #fff;}
.article-share {display: flex;align-items: center;gap: 14px;flex-wrap: wrap;}
.article-share span {font-size: 15px;color: #888;}
.article-share a {display: inline-block;padding: 6px 18px;border-radius: 6px;font-size: 14px;border: 1px solid #e0e0e0;transition: all 0.3s;}
.article-share a:hover {background: #2563eb;color: #fff;border-color: #2563eb;}
/* 作者信息 */
.author-box {display: flex;gap: 20px;background: #f8fafc;border-radius: 8px;padding: 20px 24px;margin-top: 24px;align-items: center;}
.author-box .avatar {width: 64px;height: 64px;border-radius: 50%;background: #2563eb;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 24px;font-weight: 700;flex-shrink: 0;}
.author-box .info h5 {font-size: 16px;color: #222;}
.author-box .info p {font-size: 14px;color: #888;margin-top: 4px;}
/* 相关文章 */
.related-articles {margin-top: 40px;padding-top: 30px;border-top: 1px solid #f0f0f0;}
.related-articles h4 {font-size: 20px;color: #222;margin-bottom: 20px;}
.related-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
.related-item {padding: 16px 20px;background: #f8fafc;border-radius: 8px;transition: background 0.3s;}
.related-item:hover {background: #f0f4ff;}
.related-item .r-date {font-size: 13px;color: #999;}
.related-item a {font-size: 15px;color: #333;font-weight: 500;display: block;margin-top: 4px;}
.related-item a:hover {color: #2563eb;}
/* ===== 侧边栏 ===== */
.sidebar {flex: 1;min-width: 260px;}
.sidebar-card {background: #fff;border-radius: 8px;padding: 24px 28px;box-shadow: 0 2px 12px rgba(0,0,0,0.04);margin-bottom: 24px;}
.sidebar-card h4 {font-size: 18px;color: #222;margin-bottom: 16px;padding-bottom: 10px;border-bottom: 2px solid #2563eb;}
.sidebar-card ul li {line-height: 2.4;font-size: 15px;border-bottom: 1px solid #f5f5f5;}
.sidebar-card ul li:last-child {border-bottom: none;}
.sidebar-card ul li a {display: block;padding: 2px 0;color: #555;}
.sidebar-card ul li a:hover {color: #2563eb;padding-left: 6px;}
.sidebar-card .tag-cloud {display: flex;flex-wrap: wrap;gap: 8px;}
.sidebar-card .tag-cloud a {display: inline-block;padding: 4px 14px;background: #f0f4ff;color: #2563eb;border-radius: 20px;font-size: 13px;transition: all 0.3s;}
.sidebar-card .tag-cloud a:hover {background: #2563eb;color: #fff;}
/* ===== 返回按钮 ===== */
.back-link {display: inline-flex;align-items: center;gap: 6px;font-size: 15px;color: #2563eb;font-weight: 500;margin-bottom: 20px;}
.back-link:hover {gap: 12px;}
.back-link::before {content: '←';}
/* ===== 响应式 ===== */
@media screen and (max-width: 992px) {
.article-wrap {flex-direction: column;}
.sidebar {min-width: auto;}
.page-banner h1 {font-size: 28px;}
.article-content {padding: 30px 28px;}
.related-grid {grid-template-columns: 1fr;}
}
@media screen and (max-width: 768px) {
.nav-list {position: fixed;top: 0;left: -100%;width: 80%;max-width: 320px;height: 100%;background: #fff;flex-direction: column;padding: 80px 30px 30px;box-shadow: 4px 0 20px rgba(0,0,0,0.15);transition: left 0.35s ease;gap: 0;overflow-y: auto;z-index: 1001;}
.nav-list.active {left: 0;}
.nav-list li a {display: block;padding: 14px 0;border-bottom: 1px solid #f0f0f0;font-size: 17px;}
.nav-list li a::after {display: none;}
.menu-btn {display: flex;}
.menu-overlay.active {display: block;}
.top-bar .container {justify-content: center;text-align: center;}
.hotline {width: 100%;margin-bottom: 4px;}
.page-banner {padding: 30px 0 24px;}
.page-banner h1 {font-size: 22px;}
.page-banner .meta-info {font-size: 13px;gap: 12px;}
.article-content {padding: 20px 16px;}
.article-content .article-body {font-size: 15px;}
.article-content .article-body h2 {font-size: 20px;}
.article-content .article-body h3 {font-size: 18px;}
.author-box {flex-direction: column;text-align: center;}
.contact-banner h3 {font-size: 26px;}
.tel-num {font-size: 28px;}
.contact-btns a {padding: 12px 30px;font-size: 15px;width: 80%;}
.footer-wrap {gap: 30px;}
.footer-col {min-width: 100%;}
.header .container {height: 60px;}
.logo {font-size: 20px;}
}
@media screen and (max-width: 480px) {
.page-banner h1 {font-size: 19px;}
.contact-banner h3 {font-size: 22px;}
.tel-num {font-size: 24px;}
.article-content {padding: 16px 12px;}
.article-share a {padding: 4px 14px;font-size: 13px;}
.sidebar-card {padding: 18px 16px;}
}