.blog_list .tab{
margin-top: .45rem;
margin-bottom: 0.6rem;
}
.blog_list .tab ul{
display: flex;
justify-content: center;
align-items: center;
}
.blog_list .tab ul li{
width: 260px;
height: 56px;
margin: 0 .2rem;
}
.blog_list .tab ul li a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border: 1px solid #322F2E;
color: #322F2E;
}
.blog_list .tab ul li.active a{
background-color: #322F2E;
color: #fff;
}
.blog_list .cart{
margin-bottom: 20px;
}
.blog_list .cart .img{
width: 100%;
position: relative;
overflow: hidden;
}
.blog_list .cart .img .mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background-color: rgba(50, 47, 46,0.7);
opacity: 0;
transition: all 0.5s;
}
.blog_list .cart:hover .img .mask{
opacity: 1;
}
.blog_list .cart .img img{
width: 100%;
transition: all 0.5s;
}
.blog_list .cart:hover .img img{
transform: scale(1.1);
}
.blog_list .cart .txt{
padding: .3rem;
background-color: #F0F0F0;
position: relative;
}
.blog_list .cart .txt::after{
position: absolute;
width: 0%;
height: 2px;
background-color: #322F2E;
content: '';
left: 0;
bottom: 0;
transition: all 0.5s;
}
.blog_list .cart:hover .txt::after{
width: 100%;
}
.blog_list .cart .txt h3{
-webkit-line-clamp: 1;
margin-bottom: .16rem;
font-size: 0.2rem;
font-family: 'AlibabaSans';
color: #514F4E;
}
.blog_list .cart .txt p{
-webkit-line-clamp: 2;
color: #666;
margin-bottom: .2rem;
}
.blog_list .cart .txt p.icon{
width: 60px;
height: 32px;
background-color: #fff;
border: 1px solid #c0c0c0;
}
.blog_list .cart .txt p.icon .b{
fill: #c0c0c0;
}
.blog_list .cart:hover .txt p.icon{
background-color: #322F2E;
border: 1px solid #322F2E;
}
.blog_list .cart:hover .txt p.icon .b{
fill: #fff;
}
.blog_list .page{
justify-content: center;
}
@media (max-width:1279px) {
.blog_list .tab ul li{
width: 30%;
}
}
@media (max-width:767px) {
.blog_list .tab ul{
flex-wrap: wrap;
justify-content: space-between;
}
.blog_list .tab ul li{
width: 44%;
margin: 10px;
height: 48px;
}
}