*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Microsoft YaHei",Arial,sans-serif;
}


body{

background:
linear-gradient(
180deg,
rgba(255,255,255,.85),
rgba(240,246,255,.95)
),
url("images/bg.png");


background-size:cover;

background-position:center top;

background-attachment:fixed;

color:#1d2b45;

min-height:100vh;

}




/* 顶部 */

.header{

text-align:center;

padding-top:35px;

}



/* 标题 */


.header h1{

font-size:30px;

font-weight:800;

letter-spacing:3px;

color:#16284d;

}



.sub-title{


margin-top:8px;

font-size:10px;

letter-spacing:8px;

color:#8b9bb5;


}




/* LOGO */


.logo img{


width:280px;


max-width:80%;


height:auto;


margin:20px auto;


display:block;


filter:
drop-shadow(
0 15px 25px rgba(0,0,0,.15)
);


}






/* 搜索 */


.search-box{


width:60%;


max-width:700px;


height:45px;


margin:15px auto 25px;


background:white;


border-radius:30px;


display:flex;


align-items:center;


padding:0 25px;


box-shadow:

0 10px 30px rgba(0,0,0,.08);


}



.search-box input{


border:none;


outline:none;


width:100%;


font-size:14px;


}





/* 导航 */


.nav{


display:flex;


justify-content:center;


gap:18px;


margin-bottom:35px;


}



.nav-item{


padding:12px 28px;


background:

rgba(255,255,255,.75);


border-radius:30px;


cursor:pointer;


font-size:14px;


color:#52627a;


box-shadow:

0 8px 25px rgba(0,0,0,.08);


transition:.3s;


}



.nav-item:hover{


transform:translateY(-3px);


}





.nav-item.active{


background:

linear-gradient(
135deg,
#2673ff,
#4b9cff
);


color:white;


}





/* 内容 */


.container{


width:90%;


max-width:1200px;


margin:auto;


}





.section-content{


margin-bottom:35px;


}




.section-title{


font-size:18px;


font-weight:700;


margin-bottom:18px;


padding-left:12px;


border-left:5px solid #2673ff;


}







/* 卡片区域 */


.card-box{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:16px;


}







/* 卡片 */


.card{


height:120px;


background:

rgba(255,255,255,.85);



border-radius:18px;



display:flex;


flex-direction:column;


align-items:center;


justify-content:center;



cursor:pointer;



box-shadow:

0 8px 25px rgba(0,0,0,.08);



transition:.3s;



}




.card:hover{


transform:translateY(-6px);


box-shadow:

0 15px 35px rgba(0,0,0,.15);



}







.card img{


width:42px;


height:42px;


object-fit:contain;


margin-bottom:8px;


}




.card h3{


font-size:15px;


font-weight:600;


color:#222;


}





.card p{


font-size:11px;


color:#999;


margin-top:5px;


}







/* 手机 */

@media(max-width:700px){



.header{


padding-top:25px;


}



.header h1{


font-size:22px;


}



.logo img{


width:180px;


}



.search-box{


width:90%;


}



.nav{


gap:8px;


}



.nav-item{


padding:10px 12px;


font-size:11px;


}



.container{


width:94%;


}



.card-box{


grid-template-columns:

repeat(4,1fr);


gap:8px;


}



.card{


height:85px;


border-radius:14px;


}



.card img{


width:28px;


height:28px;


}



.card h3{


font-size:11px;


}



.card p{


font-size:8px;


}



}