/* ==================================

 JINGDONG TRADING V2.0

 Products Page Style

================================== */


/* ---------- Hero ---------- */


.products-hero{

height:520px;

background:

linear-gradient(
90deg,
rgba(0,0,0,.45),
rgba(0,0,0,.1)
),

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


background-size:cover;

background-position:center;


display:flex;

align-items:center;

padding-left:10%;


color:white;


}



.hero-content p{

font-size:15px;

letter-spacing:4px;

margin-bottom:25px;

opacity:.9;

}



.hero-content h1{

font-size:64px;

font-weight:600;

line-height:1.25;

margin-bottom:25px;


}



.hero-content span{

font-size:20px;

opacity:.9;

}





/* ---------- 分类 ---------- */


.filter{

display:flex;

justify-content:center;

gap:20px;

padding:70px 0 40px;


}



.filter button{


border:none;

background:#f5f5f5;


padding:14px 35px;


border-radius:40px;


font-size:16px;


cursor:pointer;


transition:.35s;


}



.filter button:hover{


background:#111;

color:white;


}



.filter .active{


background:#111;

color:white;


}






/* ---------- 产品列表 ---------- */



.products-grid{


width:85%;


margin:auto;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:40px;


padding-bottom:100px;



}





.product-card{


background:#fff;


border-radius:28px;


overflow:hidden;


transition:.45s;


box-shadow:

0 15px 40px rgba(0,0,0,.06);


}




.product-card:hover{


transform:

translateY(-15px);



box-shadow:

0 25px 60px rgba(0,0,0,.12);



}





.product-card img{


width:100%;


height:420px;


object-fit:cover;



transition:.5s;


}



.product-card:hover img{


transform:scale(1.05);


}





.product-card div{


padding:35px;


}




.product-card h2{


font-size:28px;


font-weight:600;


margin-bottom:15px;


}




.product-card p{


color:#777;


font-size:16px;


margin-bottom:25px;


}




.product-card a{


text-decoration:none;


color:#111;


font-size:16px;


}




.product-card a:hover{


color:#1266d6;


}





/* ---------- OEM区域 ---------- */


.custom-box{


width:85%;


margin:

20px auto 120px;


background:#111;


color:white;


padding:90px 40px;


text-align:center;


border-radius:35px;



}




.custom-box h2{


font-size:42px;


margin-bottom:20px;


}




.custom-box p{


font-size:18px;


color:#ccc;


margin-bottom:35px;


}





.custom-box a{


display:inline-block;


background:white;


color:#111;


padding:

15px 45px;


border-radius:40px;


text-decoration:none;


transition:.3s;


}



.custom-box a:hover{


transform:translateY(-5px);


}









/* ---------- 手机端 ---------- */



@media(max-width:768px){



.products-hero{


height:430px;


padding-left:30px;


}



.hero-content h1{


font-size:40px;


}




.filter{


overflow-x:auto;


justify-content:flex-start;


padding-left:20px;


}



.filter button{


white-space:nowrap;


}



.products-grid{


width:90%;


grid-template-columns:1fr;


}



.product-card img{


height:300px;


}



.custom-box{


width:90%;


padding:60px 20px;


}



.custom-box h2{


font-size:30px;


}



}