*{
    margin:0; padding:0; box-sizing: border-box;
}
:root{
    --primary:#1b4b91;
    --primary-light:#2c62b8;
    --bg:#f7f9fc;
    --text:#2c333a;
    --white:#ffffff;
}
body{
    font-family: "Microsoft Yahei",system-ui,sans-serif;
    background-color: var(--bg);
    color:var(--text);
    line-height:1.8;
}
header{
    background-color: var(--primary);
    color:var(--white);
    padding:1rem 4%;
}
.header-container{
    max-width:1240px; margin:0 auto;
    display:flex; justify-content: space-between;
    align-items:center; flex-wrap:wrap; gap:12px;
}
.site-title h1{ font-size:1.45rem; font-weight:600; }
nav ul{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; }
nav a{
    color:var(--white); text-decoration:none;
    padding:7px 11px; border-radius:5px;
    background:rgba(255,255,255,0.08);
    transition: 0.24s;
}
nav a:hover{ background:rgba(255,255,255,0.22); }
.container{ max-width:1240px; margin:2rem auto; padding:0 4%; }
.banner{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff; padding:3rem 2rem; border-radius:14px; margin-bottom:2rem;
}
.banner h2{ font-size:2rem; margin-bottom:0.6rem; }
.card-grid{
    display:grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
    gap:1.5rem; margin:2.2rem 0;
}
.card{
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,0.07);
}
.card-img{ width:100%; height:180px; object-fit:cover; }
.card-body{ padding:1.2rem; }
.card-body h3{ margin-bottom:0.5rem; color:var(--primary); }
.img-wrap{ margin:1.6rem 0; }
.img-wrap img{
    width:100%; border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
footer{
    margin-top:4rem; background-color:var(--primary);
    color:#fff; text-align:center; padding:2rem;
}
section{ margin:2.4rem 0; }
section h2{
    color:var(--primary); margin-bottom:1rem;
    border-left:5px solid var(--primary); padding-left:12px;
}
ul.dot-list{ padding-left:1.6rem; }