.banner {
     position: relative;
     height: 400px;
     overflow: hidden;
     background-color: #f0f0f0;
 }

 .banner-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .media-detail-page {
     padding: 60px 0;
     background-color: #f8f9fa;
 }

 .detail-header {
     margin-bottom: 40px;
     text-align: center;
 }

 .detail-header h1 {
     /* font-size: 2rem; */
     color: #940c11;
     margin: 40px 0 20px 0;
     /* 上边距40px，下边距20px */
 }

 .detail-meta {
     max-width: 1090px;
     color: #666;
     font-size: 14px;
     justify-content: flex-end;
     margin: 0 auto;
     margin-bottom: 20px;
     display: flex;
 }

 .detail-content,
 .detail-content * {
     max-width: 1200px;
     margin: 0 auto;
     /* padding: 0 20px; */
     line-height: 1.8;
     font-size: 16px;
     color: #333;
     background-color: transparent !important;
 }

 .detail-content p {
     text-indent: 2em !important;
     margin: 0 0 15px 0;
     padding-left: 0;
     /* 去掉可能存在的左侧 padding */
     text-indent: 0;
     /* 去掉旧缩进 */
     background-color: transparent;
 }

 .detail-content img {
     display: block;
     /* 让 img 独占一行 */
     margin: 0px auto;
     /* 上下 20px，左右 auto → 水平居中 */
     max-width: 100%;
     /* 响应式宽度 */
     height: auto;
     /* 保持比例 */
     background: none;
     /* 去掉可能的背景 */
     box-shadow: none;
     /* 去掉可能的外阴影 */
     float: none !important;
     /* 清除旧浮动 */
     padding: 0 !important;
     /* 清除旧内边距 */
 }

 .loading {
     text-align: center;
     padding: 50px;
     color: #666;
 }

 .loading i {
     margin-right: 10px;
 }

 /* 文章导航按钮 */
 .article-navigation {
     display: flex;
     justify-content: space-between;
     margin: 40px 0 20px 0;
     padding: 0 20px;
 }

 .nav-button {
     background-color: #940c11;
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
     transition: background-color 0.3s ease;
 }

 .nav-button:hover {
     background-color: #7a0a0e;
 }

 .nav-button:disabled {
     background-color: #ccc;
     cursor: not-allowed;
 }

 .nav-button i {
     margin: 0 5px;
 }

 .media-tabs {
     margin-bottom: 20px;
     padding: 10px 0;
     background: #efefef;

     .l1Name {
         margin-top: 7px;
         font-size: 20px;
         font-weight: 600;
         color: #940c11;
         margin-right: 10px;
         padding: 0 50px;
         border-right: 1px solid #646464;
         width: 200px;
         align-content: center;
     }
 }

 .media-tab-btn {
     padding: 10px 0;
     /*background-color: #f5f5f5;*/
     border: none;
     cursor: pointer;
     font-size: 20px;
     color: #333;
     flex: 1;
     min-width: 200px;
     transition: all 0.3s;
 }

 .media-tab-btn.active,
 .media-tab-btn:hover {
     color: #940c11;
 }

 .media-content {
     display: none;
 }

 .media-content.active {
     display: block;
 }

 /* 移动端自适应样式 */

 /* 平板设备 (768px 及以下) */
 @media (max-width: 768px) {
     .banner {
         height: 300px;
     }

     .media-detail-page {
         padding: 30px 0;
     }

     .detail-header {
         margin-bottom: 25px;
     }

     .detail-header h1 {
         font-size: 1.8rem;
         margin: 30px 0 15px 0;
         padding: 0 15px;
     }

     .detail-meta {
         width: 100%;
         font-size: 13px;
         padding: 0 15px;
         margin-bottom: 15px;
         justify-content: center;
     }

     .detail-content,
     .detail-content * {
         font-size: 15px;
         line-height: 1.7;
         padding: 0 15px;
     }

     .detail-content p {
         text-indent: 2em !important;
         margin: 0 0 12px 0;
     }

     .article-navigation {
         margin: 30px 0 15px 0;
         padding: 0 15px;
     }

     .nav-button {
         padding: 8px 15px;
         font-size: 13px;
     }

     .media-tabs {
         padding: 8px 0;
         margin-bottom: 15px;
     }

     .media-tabs .l1Name {
         font-size: 18px;
         padding: 0 30px;
         width: 150px;
         margin-top: 5px;
     }

     .media-tab-btn {
         font-size: 18px;
         min-width: 100px;
         padding: 8px 0;
     }

     .loading {
         padding: 30px;
         font-size: 14px;
     }
 }

 /* 小屏幕手机 (480px 及以下) */
 @media (max-width: 480px) {
     .banner {
         height: 250px;
     }

     .media-detail-page {
         padding: 20px 0;
     }

     .detail-header {
         margin-bottom: 20px;
     }

     .detail-header h1 {
         font-size: 1.5rem;
         margin: 20px 0 10px 0;
         padding: 0 10px;
     }

     .detail-meta {
         font-size: 12px;
         padding: 0 10px;
         margin-bottom: 10px;
     }

     .detail-content,
     .detail-content * {
         font-size: 14px;
         line-height: 1.6;
         padding: 0 10px;
     }

     .detail-content p {
         text-indent: 2em !important;
         margin: 0 0 10px 0;
     }

     .detail-content img {
         margin: 15px auto;
     }

     .article-navigation {
         margin: 20px 0 10px 0;
         padding: 0 10px;
         flex-direction: column;
         gap: 10px;
     }

     .nav-button {
         padding: 10px 20px;
         font-size: 14px;
         width: 100%;
     }

     .media-tabs {
         padding: 6px 0;
         margin-bottom: 10px;
     }

     .media-tabs .l1Name {
         font-size: 16px;
         padding: 0 20px;
         width: 120px;
         margin-top: 4px;
         border-right-width: 0.5px;
     }

     .media-tab-btn {
         font-size: 16px;
         min-width: 100%;
         padding: 10px 0;
         margin-bottom: 5px;
         text-align: center;
     }

     .loading {
         padding: 20px;
         font-size: 13px;
     }

     .loading i {
         margin-right: 5px;
     }
 }

 /* 超小屏幕手机 (320px 及以下) */
 @media (max-width: 320px) {
     .banner {
         height: 200px;
     }

     .detail-header h1 {
         font-size: 1.3rem;
     }

     .detail-meta {
         font-size: 11px;
     }

     .detail-content,
     .detail-content * {
         font-size: 13px;
         line-height: 1.5;
     }

     .nav-button {
         font-size: 13px;
         padding: 8px 15px;
     }

     .media-tabs .l1Name {
         font-size: 14px;
         padding: 0 15px;
         width: 100px;
     }

     .media-tab-btn {
         font-size: 14px;
         padding: 8px 0;
     }
 }

 /* 通用移动端优化 */
 @media (max-width: 768px) {

     /* 优化触摸体验 */
     .media-tab-btn,
     .nav-button {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
         touch-action: manipulation;
     }

     /* 优化字体渲染 */
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         text-rendering: optimizeLegibility;
     }

     /* 优化图片加载 */
     .banner-img,
     .detail-content img {
         image-rendering: -webkit-optimize-contrast;
     }

     /* 防止文本调整大小 */
     html {
         -webkit-text-size-adjust: 100%;
     }

     /* 优化容器宽度 */
     .container {
         max-width: 100%;
         padding: 0 15px;
     }
 }

 /* 针对超长内容的优化 */
 @media (max-width: 768px) {
     .detail-content {
         word-wrap: break-word;
         overflow-wrap: break-word;
     }

     .detail-content * {
         max-width: 100% !important;
         box-sizing: border-box;
     }

     /* 确保表格在移动端可滚动 */
     .detail-content table {
         display: block;
         overflow-x: auto;
         width: 100%;
     }

     /* 1. 标题独占一行 */
     .media-tabs .l1Name {
         width: 2% !important;
         border-right: none !important;
         margin: 0 0 10px 0 !important;
         text-align: center;
     }

     /* 2. 按钮容器：横排 一排两个 */
     .media-tabs .column.flex {
         flex-direction: row !important;
         flex-wrap: wrap !important;
         width: 100% !important;
         gap: 10px;
     }

     /* 3. 每个按钮占一半宽度 */
     .media-tabs .tab-btn {
         flex: 0 0 calc(50% - 5px) !important;
         /* 一半宽 减去间隙 */
         min-width: auto !important;
         margin: 0 !important;
         text-align: center;
     }
 }