/* 定义思源黑体字体 - 六种粗细 */
@font-face{font-family:'Noto Sans SC';src:url('./fonts/noto_sans/NotoSansSC-Thin.ttf') format('truetype');font-weight:100}
@font-face{font-family:'Noto Sans SC';src:url('./fonts/noto_sans/NotoSansSC-Light.ttf') format('truetype');font-weight:300}
@font-face{font-family:'Noto Sans SC';src:url('./fonts/noto_sans/NotoSansSC-Regular.ttf') format('truetype');font-weight:400}
@font-face{font-family:'Noto Sans SC';src:url('./fonts/noto_sans/NotoSansSC-Medium.ttf') format('truetype');font-weight:500}
@font-face{font-family:'Noto Sans SC';src:url('./fonts/noto_sans/NotoSansSC-Bold.ttf') format('truetype');font-weight:700}
@font-face{font-family:'Noto Sans SC';src:url('./fonts/noto_sans/NotoSansSC-Black.ttf') format('truetype');font-weight:900}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans SC',sans-serif;line-height:1.6;color:#333;background:#f8f9fa;font-weight:400}
.container{max-width:100%;margin:0 auto;padding:0 15px}
header{background:#4a6fa5;color:#fff;padding:15px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 5px rgba(0,0,0,.1)}
header .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5rem;font-weight:700}
.menu-toggle{display:none;flex-direction:column;background:0;border:0;cursor:pointer;width:24px;height:18px;justify-content:space-between}
.menu-toggle span{display:block;height:2px;width:100%;background:#fff;transition:all .3s ease}
nav{background:#5a7fb6;padding:0;transition:all .3s ease}
.nav-links{display:flex;justify-content:space-around;list-style:none}
.nav-links a{color:#fff;text-decoration:none;padding:12px 15px;display:block;transition:background .3s;font-weight:500}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.2)}
main{padding:20px 0;min-height:calc(100vh - 140px)}
section{margin-bottom:30px;background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 5px rgba(0,0,0,.05)}
.hero{background:linear-gradient(135deg,#4a6fa5 0%,#5a7fb6 100%);color:#fff;text-align:center}
.hero h1{color:#fff;border-bottom:0}
h2{margin-bottom:15px;color:#4a6fa5;border-bottom:1px solid #eee;padding-bottom:10px;font-weight:700}
h1{margin-bottom:15px;color:#fff;font-weight:700}
.cards{display:flex;flex-wrap:wrap;gap:15px}
.card{background:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 5px rgba(0,0,0,.05);border-left:4px solid #4a6fa5;flex:1 1 100%}
.card h3{margin-bottom:10px;color:#4a6fa5;font-weight:500}
.btn{display:inline-block;background:#4a6fa5;color:#fff;padding:10px 20px;border:0;border-radius:4px;text-decoration:none;font-size:1rem;cursor:pointer;transition:background .3s;font-weight:500}
.btn:hover{background:#3a5a8c}
.footer{background:#9BA8CB;color:#000000;text-align:center;padding:20px 0;font-size:.9rem}

@media (max-width:768px){
    .menu-toggle{display:flex}
    nav{padding:0;max-height:0;overflow:hidden}
    nav.active{max-height:300px;padding:10px 0}
    .nav-links{flex-direction:column;align-items:center}
    .nav-links li{width:100%;text-align:center}
    .nav-links a{padding:10px 15px}
}

@media (min-width:768px){
    .container{max-width:750px}
    .card{flex:1 1 calc(50% - 15px)}
}

@media (min-width:992px){
    .container{max-width:970px}
    .card{flex:1 1 calc(33.333% - 15px)}
}