*{

box-sizing:border-box;

}


body{

margin:0;

background:#f7f5ef;

color:#333;

font-family:
"Microsoft YaHei",
sans-serif;

}



.container{

max-width:1200px;

margin:auto;

padding:0 20px;

}



.header{

background:#17324d;

padding:20px 0;

}


.logo a{

font-size:28px;

color:#d8b36a;

text-decoration:none;

font-weight:bold;

}



nav{

margin-top:15px;

}



nav a{

color:white;

margin-right:25px;

text-decoration:none;

}



.hero{

padding:90px 0;

text-align:center;

background:

linear-gradient(

135deg,

#f5e6c8,

#ffffff

);

}



.hero h1{

font-size:42px;

}



.search input{

width:60%;

padding:15px;

border-radius:30px;

border:1px solid #ddd;

}



.grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

}



.card{

background:white;

padding:25px;

border-radius:16px;

box-shadow:
0 5px 20px rgba(0,0,0,.06);

}

.person-page{

padding-top:40px;

}



.breadcrumb{

color:#888;

font-size:14px;

margin-bottom:25px;

}



.person-page article{

background:#fff;

padding:40px;

border-radius:24px;

}



.person-page h1{

font-size:38px;

color:#17324d;

}



.person-image{

text-align:center;

margin:30px 0;

}



.person-image img{


max-width:320px;


border-radius:20px;


}



.person-info{

background:#faf6ed;

padding:25px;

border-radius:15px;

margin:30px 0;

}



.person-page section{

margin-top:35px;

line-height:1.9;

}



.person-page h2{

border-left:4px solid #c79b4b;

padding-left:15px;

}

.content-image{

width:100%;

max-height:500px;

object-fit:cover;

border-radius:20px;

margin:20px 0;

}