@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: calc(100% - 330px); float: right;}
.product .productlist .title{margin-bottom: 30px;}
.product .productlist .title h2{font-size: 32px;}
.product .productlist .list{width: 32%; float: left; box-sizing: border-box; border: solid #e8e8e8 1px; margin-right: 2%; margin-bottom: 30px;}
.product .productlist .list:nth-child(3n){margin-right: 0;}
.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 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.product .productlist .list .text a{font-size: 18px; color: #333;}
.product .productlist .list .text a:hover{color: #0f65dc;}
.product .productlist .list .text2 {margin: 0 20px 20px;}
.product .productlist .list .text2 a{font-size: 18px;color: #fff;padding: 5px 20px;background: #3aa2e2;}
@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;}
	.product .productlist .list .text a{font-size: 14px;}
}