#yunassie-product-v3{

padding:90px 30px;

background:#ffffff;

font-family:

Arial,
Helvetica,
sans-serif;

}



#yunassie-product-v3 *{

box-sizing:border-box;

}



.yv3-container{

max-width:1300px;

margin:auto;

}





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

标题

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


.yv3-header{

text-align:center;

margin-bottom:50px;

}



.yv3-label{

font-size:10px;

letter-spacing:4px;

color:#52758b;

font-weight:700;

margin-bottom:20px;

}




.yv3-title{


font-size:48px;

font-weight:400;

line-height:1.2;

margin:0;


color:#1f2933;


}



.yv3-title span{


display:block;


background:

linear-gradient(
90deg,
#52758b,
#8b718d
);


-webkit-background-clip:text;

color:transparent;


}



.yv3-desc{


max-width:720px;


margin:25px auto;


font-size:14px;


line-height:1.8;


color:#666;


}







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

搜索

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


.yv3-search{


display:flex;


justify-content:center;


margin-bottom:35px;


}



.yv3-search input{


width:450px;


height:48px;


border:1px solid #ddd;


padding:0 20px;


font-size:14px;


outline:none;


}



.yv3-search input:focus{


border-color:#52758b;


}








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

分类

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


.yv3-tabs{


display:flex;


justify-content:center;


gap:12px;


flex-wrap:wrap;


margin-bottom:55px;


}



.yv3-tabs button{


background:#fff;


border:1px solid #ddd;


padding:11px 25px;


font-size:11px;


letter-spacing:1px;


cursor:pointer;


transition:.3s;


}



.yv3-tabs button:hover,

.yv3-tabs button.active{


background:#52758b;


border-color:#52758b;


color:#fff;


}








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

产品区域

PC:

5列

4排

20个位置


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


.yv3-product-grid{


display:grid;


grid-template-columns:

repeat(5,1fr);


gap:24px;


}








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

产品卡片

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


.yv3-card{


border:1px solid #e8e8e8;


background:#fff;


cursor:pointer;


transition:.35s;


overflow:hidden;


}




.yv3-card:hover{


transform:translateY(-6px);


box-shadow:

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


}








/* 图片区域 */


.yv3-image{


height:230px;


background:#fafafa;


display:flex;


align-items:center;


justify-content:center;


overflow:hidden;


}



.yv3-image img{


width:90%;


height:90%;


object-fit:contain;


}







/* 没图片时显示 */


.yv3-placeholder{


font-size:12px;


letter-spacing:2px;


color:#999;


}








/* 产品信息 */


.yv3-info{


padding:18px;


}



.yv3-number{


font-size:10px;


letter-spacing:2px;


color:#52758b;


font-weight:bold;


}



.yv3-name{


font-size:15px;


font-weight:600;


margin:10px 0;


line-height:1.4;


}



.yv3-tags{


font-size:10px;


color:#777;


line-height:1.6;


}








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

样品商城区域

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


.yv3-sample{


margin-top:60px;


background:#f6f8fa;


padding:40px;


text-align:center;


}



.yv3-sample h3{


font-size:22px;


font-weight:400;


}



.yv3-sample p{


font-size:13px;


color:#666;


}



.yv3-sample a{


display:inline-flex;


margin-top:20px;


padding:14px 35px;


background:#52758b;


color:#fff!important;


text-decoration:none;


font-size:11px;


letter-spacing:1px;


}









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

平板

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


@media(max-width:1100px){


.yv3-product-grid{


grid-template-columns:

repeat(3,1fr);


}


}









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

手机

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


@media(max-width:600px){



#yunassie-product-v3{


padding:60px 15px;


}




.yv3-title{


font-size:32px;


}





.yv3-search input{


width:100%;


}




.yv3-tabs{


justify-content:flex-start;


flex-wrap:nowrap;


overflow-x:auto;


}



.yv3-tabs button{


white-space:nowrap;


}





.yv3-product-grid{


grid-template-columns:

repeat(2,1fr);


gap:12px;


}




.yv3-image{


height:160px;


}




.yv3-info{


padding:12px;


}




.yv3-name{


font-size:13px;


}



}