/* Banner */

.solution-banner{


height:500px;


background:

linear-gradient(
90deg,
rgba(0,30,80,.85),
rgba(0,30,80,.3)
),

url("../images/banner.jpg");


background-size:cover;

background-position:center;


display:flex;

align-items:center;



}



.banner-content{


width:1440px;

max-width:90%;

margin:auto;

color:white;


}



.banner-content h1{


font-size:54px;

font-weight:700;


}



.banner-content p{


font-size:36px;

margin-top:10px;


}



.banner-content span{


display:block;

margin-top:30px;

font-size:18px;


}



/* 内容宽度 */


.solutions-container{


width:1440px;

max-width:90%;

margin:70px auto;


}




.title-box{


margin-bottom:40px;


}


.title-box h2{


font-size:38px;

color:#13294b;


}


.title-box p{


font-size:22px;

color:#777;


}




/* 5列核心 */


.solution-grid{


display:grid;


grid-template-columns:

repeat(5,1fr);



gap:22px;



}




.solution-card{


background:white;


border-radius:6px;


overflow:hidden;


transition:.3s;


box-shadow:

0 5px 20px rgba(0,0,0,.08);


}




.solution-card:hover{


transform:translateY(-8px);


box-shadow:

0 10px 30px rgba(0,70,160,.2);


}



.solution-card img{


width:100%;


height:150px;


object-fit:cover;


}




.card-info{


padding:18px;


}



.card-info h3{


font-size:20px;

color:#1b2f50;


}


.card-info p{


font-size:14px;

color:#777;

margin:8px 0;


}


.card-info span{


font-size:14px;

color:#005bac;


}




/* 平板 */


@media(max-width:1200px){


.solution-grid{


grid-template-columns:

repeat(3,1fr);


}



}




/* 手机 */


@media(max-width:768px){



.solution-banner{


height:300px;


}



.banner-content h1{


font-size:32px;


}



.solutions-container{


max-width:94%;


}


.solution-grid{


grid-template-columns:

repeat(1,1fr);



}


.solution-card img{


height:200px;


}



}