*{



margin:0;



padding:0;



box-sizing:border-box;



}







body{



font-family: Arial, Helvetica, sans-serif;



background:#f4f7fb;



color:#1b1b1b;



line-height:1.7;



}







.news-page{



max-width: 1400px;



margin: 30px auto;



background:#fff;



padding: 28px;



}







/* ========= 通用图片适配 ========= */



.img-wrap{



width:100%;



overflow:hidden;



border-radius:14px;



background:#e9eef7;



display:flex;



align-items:center;



justify-content:center;



}







.img-wrap img{



width:100%;



height:100%;



object-fit:cover;



display:block;



}







/* ========= Hero ========= */



.hero{



display:grid;



grid-template-columns: 1.1fr 1.4fr;



gap: 24px;



align-items:stretch;



margin-bottom: 24px;



padding: 24px;



border-radius: 18px;



background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);



border: 1px solid #e4edf8;



}







.hero-content{



display:flex;



flex-direction:column;



justify-content:center;



padding: 8px 4px;



}







.hero-content h1{



font-size: 48px;



line-height:1.08;



color:#123f7f;



font-weight:900;



margin-bottom: 14px;



letter-spacing:-0.6px;



}







.hero-content h2{



font-size: 26px;



color:#2a5fb3;



font-weight:700;



margin-bottom: 18px;



}







.hero-content .lead{



font-size: 17px;



color:#222;



max-width: 100%;



}







.hero-media{



min-height: 420px;



border-radius: 16px;



overflow:hidden;



background:#dfe9f7;



}







/* ========= Stats ========= */



.stats{



display:grid;



grid-template-columns: repeat(3, 1fr);



gap: 16px;



margin: 18px 0 26px;



}







.stat-box{



padding: 18px 18px;



display:flex;



align-items:center;



gap: 14px;



border:1px solid #d9e4f4;



border-radius:14px;



background:#f7faff;



box-shadow:0 2px 10px rgba(30,70,130,0.04);



}







.stat-icon{



width:54px;



height:54px;



border-radius:12px;



background:#1f57a8;



color:#fff;



font-size:24px;



display:flex;



align-items:center;



justify-content:center;



flex-shrink:0;



}







.stat-text h3{



font-size: 32px;



color:#1f57a8;



line-height:1.1;



}







.stat-text p{



font-size: 15px;



color:#333;



margin-top:4px;



}







/* ========= 中部模块 ========= */



.middle-grid{



display:grid;



grid-template-columns: 1.1fr 1fr 0.95fr;



gap: 20px;



margin-bottom: 26px;



align-items:start;



}







.panel{



background:#fff;



padding: 4px 2px;



}







.panel p{



font-size:16px;



margin-bottom: 14px;



color:#222;



}







.panel strong{



color:#113f85;



}







.feature-title{



margin-top: 10px;



font-size: 18px;



font-weight: 800;



color:#113f85;



margin-bottom: 10px;



}







.feature-list{



list-style:none;



margin-top:10px;



border-top:1px solid #edf1f7;



}







.feature-list li{



display:flex;



align-items:flex-start;



gap:10px;



padding:12px 0;



border-bottom:1px solid #edf1f7;



font-weight:700;



color:#113f85;



}







.feature-list li::before{



content:"▣";



color:#1f57a8;



font-size:16px;



margin-top:1px;



flex-shrink:0;



}







.center-stack{



display:flex;



flex-direction:column;



gap:14px;



}







.center-main-img{



min-height: 420px;



}







.center-main-img img{



object-fit:cover;



object-position:center center;



}







.side-panel{



display:flex;



flex-direction:column;



gap:14px;



}







.side-caption{



font-size: 15px;



line-height:1.75;



color:#222;



background:#f8fbff;



border:1px solid #e4edf8;



padding:16px 16px;



border-radius:12px;



}







.side-photo{



min-height: 220px;



}







.side-photo img{



object-fit:cover;



object-position:center center;



}







/* ========= 时间线 ========= */



.timeline{



margin-top: 8px;



margin-bottom: 26px;



}







.timeline-grid{



display:grid;



grid-template-columns: repeat(2, 1fr);



gap: 18px;



}







.timeline-card{



background:#fff;



border:1px solid #dfe6f2;



border-radius:14px;



overflow:hidden;



box-shadow:0 2px 10px rgba(30,70,130,0.04);



display:grid;



grid-template-columns: 180px 1fr;



min-height: 180px;



}







.timeline-head{



background:#1f57a8;



color:#fff;



font-weight:800;



text-align:center;



padding:12px 10px;



font-size:16px;



display:flex;



align-items:center;



justify-content:center;



}







.timeline-img{



height: 100%;



min-height: 180px;



}







.timeline-body{



padding: 16px 16px 18px;



font-size: 15px;



color:#222;



display:flex;



align-items:center;



}







/* ========= 底部 ========= */



.bottom{



display:grid;



grid-template-columns: 46% 54%;



gap: 22px;



align-items:stretch;



margin-top: 8px;



}







.bottom-img{



min-height: 360px;



}







.bottom-right{



padding: 4px 0;



display:flex;



flex-direction:column;



justify-content:center;



}







.bottom-right p{



margin-bottom: 14px;



font-size:16px;



}







.quote{



margin-top: 14px;



background:#f4f8ff;



border-left: 6px solid #1f57a8;



padding: 18px 20px;



border-radius: 10px;



font-size: 22px;



font-weight: 800;



color:#123f7f;



line-height:1.45;



}







/* ========= 响应式 ========= */



@media (max-width: 992px){



.news-page{



padding: 18px;



}







.hero,



.middle-grid,



.bottom{



grid-template-columns:1fr;



}







.hero-content h1{



font-size: 38px;



}







.hero-content h2{



font-size: 22px;



}







.stats,



.timeline-grid{



grid-template-columns:1fr;



}







.stat-text h3{



font-size: 28px;



}







.timeline-card{



grid-template-columns:1fr;



}







.timeline-img,



.bottom-img,



.center-main-img,



.side-photo,



.hero-media{



min-height:auto;



aspect-ratio: 16 / 9;



}



}