@charset 'utf-8';

.product{padding: 46px 0;}
.product .classification{width: 270px; float: left; box-sizing: border-box; padding: 30px 15px; border: solid #e8e8e8 1px;}
.product .classification .title h2{font-size: 20px;}
.product .classification .search{border: solid #0f65dc 1px; margin-top: 20px; padding: 0 10px;}
.product .classification .search input{width: 190px; height: 36px; border: none;}
.product .classification .search button{width: 20px; height: 36px; border: none; background: url("../images/search.png") center no-repeat; cursor: pointer;}
.product .classification .list{margin-top: 20px;}
.product .classification .list li{line-height: 22px; padding: 15px 0; border-bottom: dashed #eee 1px;}
.product .classification .list li a{display: inline-block; vertical-align: middle; font-size: 16px; color: #333; max-width: 190px;}
.product .classification .list li a:hover{color: #0f65dc;}
.product .classification .list li .nav_btn{width: 30px; height: 30px; display: inline-block; vertical-align: middle; cursor: pointer; background: url(../images/icon_spirit.png) 0 -240px no-repeat; margin-right: 8px;}
.product .classification .list li ul{display: none;}
.product .classification .list li ul li{white-space: nowrap; padding: 15px 10px 5px 10px; border-bottom: none;}
.product .classification .list li ul li a{font-size: 15px; overflow: hidden; text-overflow: ellipsis;}
.product .classification .list li ul li i{width: 30px; height: 30px; display: inline-block; vertical-align: middle; cursor: pointer; background: url(../images/icon_spirit.png) 0 -270px no-repeat; margin-right: 8px;}

.product .productlist{width: 100%;/* float: right; */}
.product .productlist .title{margin-bottom: 30px;}
.product .productlist .title h2{font-size: 32px;}
.product .productlist .list{width: 22.5%;float: left;box-sizing: border-box;border: solid #e8e8e8 1px;margin-right: 2%;margin-bottom: 30px;background: #f9f9f9;}
.dert {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.product .productlist .list .picture{border-bottom: solid #e8e8e8 1px; overflow: hidden;}
.product .productlist .list .picture img{width: 100%; transition: all 0.5s;}
.product .productlist .list .picture:hover img{transform: scale(1.1);}
.product .productlist .list .text{padding: 15px 20px 30px;font-size: 20px;color: #0171bb;text-align: center;background: #f9f9f9;}
.product .productlist .list .text h2{font-size: 20px;color: #0171bb;font-weight: bold;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.product .productlist .list .text h2:hover{color: #0f65dc;}

.product .productlist .list .text p{font-size: 12px;margin: 10px 0 30px;color: #000;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;word-break: break-word;}
.text3 a{font-size:16px;padding: 10px 30px;background: #0071ba;color: #fff;}

@media (max-width: 990px) {
	.product{padding: 30px 15px;}
	.product .classification{width: 100%; padding: 20px 15px;}
	.product .classification .search input{width: 90%;}
	.product .classification .search button{float: right;}
	.product .classification .list li a{max-width: 270px;}

	.product .productlist{width: 100%; float: right; margin-top: 30px;}
	.product .productlist .title{margin-bottom: 30px;}
	.product .productlist .title h2{font-size: 22px;}
	.product .productlist .list{width: 48%; margin-right: 4%;}
	.product .productlist .list:nth-child(3n){margin-right: 4%;}
	.product .productlist .list:nth-child(2n){margin-right: 0;}
	.product .productlist .list .text{padding: 8px 8px 30px;}
	.product .productlist .list .text a{font-size: 12px;}
}