*{box-sizing:border-box;margin:0;padding:0;font-family:Microsoft YaHei,sans-serif}
body{background:#f4f5f7;color:#333}
header{height:72px;background:#14283f;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 8%}
.logo{font-size:24px;font-weight:bold}
nav a{color:#fff;text-decoration:none;margin-left:20px}
.hero{height:650px;background:url('../images/banner.jpg') center/cover}
.hero-mask{height:100%;background:rgba(0,0,0,.4);color:white;display:flex;align-items:center;justify-content:center;flex-direction:column}
.hero h1{font-size:64px}.hero h2{margin:20px}
.btn{margin-top:25px;padding:12px 30px;background:#fff;color:#333;border-radius:30px;text-decoration:none}
.panel,.cards{max-width:1100px;margin:50px auto}
.panel{background:white;padding:40px;border-radius:18px}
.grid{display:flex;justify-content:space-around;margin-top:30px}
.cards{display:flex;gap:20px}
.cards div{background:white;padding:30px;border-radius:18px;flex:1}
.gallery{display:flex;gap:20px}.gallery img{width:33%;border-radius:15px}
footer{text-align:center;padding:30px;background:#14283f;color:#fff}
@media(max-width:700px){header{height:auto;display:block;padding:20px}nav a{display:inline-block;margin-top:15px}.cards,.gallery,.grid{display:block}.gallery img{width:100%;margin:10px 0}.hero h1{font-size:40px}}