@charset 'utf-8';

.product{padding: 46px 0;}

.product .category{width: 280px; float: left;}
.product .category .title{font-size: 24px; color: #666; border-bottom: dashed #d6d6d6 1px; padding-bottom: 10px;}
.product .category .list{margin-top: 20px;}
.product .category .list li{line-height: 22px; font-size: 16px; padding: 7px 0; position: relative;}
.product .category .list li .cbtn{width: 16px; height: 10px; float: right; cursor: pointer; margin-top: 6px; transition: all 0.5s; position: relative;}
.product .category .list li .cbtn::before{width: 10px; height: 1px; content: ''; background: #666; position: absolute; left: 0; top: 5px; transform: rotate(50deg);}
.product .category .list li .cbtn::after{width: 10px; height: 1px; content: ''; background: #666; position: absolute; right: 0; top: 5px; transform: rotate(-50deg);}
.product .category .list li .cbtn.clicked{transform: rotate(180deg);}
.product .category .list li ul{display: none; padding-top: 10px;}
.product .category .list li a{display: inline-block; color: #666;}
.product .category .list li.current>a{border-bottom: solid #353535 1px; color: #353535;}
.product .category .list li ul li{padding-left: 20px;}

.product .productlist{width: calc(100% - 330px); float: right;}
.product .productlist .list{width: 32%; float: left; margin: 0 2% 30px 0;}
.product .productlist .list:nth-child(3n){margin-right: 0;}
.product .productlist .list:nth-child(3n+1){clear: both;}
.product .productlist .list .picture{border: solid #d6d6d6 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 .title{text-align: center; margin-top: 10px;}
.product .productlist .list .title a{font-size: 16px; line-height: 24px; color: #353535;}
.product .productlist .list .button{text-align: center; margin-top: 10px;}
.product .productlist .list .button a{display: inline-block; line-height: 30px; font-size: 14px; padding: 0 20px; border: solid #353535 1px; border-radius: 6px; transition: all 0.5s;}
.product .productlist .list .button a:hover{background: #353535; color: #fff;}

@media (max-width:960px) {
	.product{padding: 30px 15px}
	.product .category{display: none;}
	.product .productlist{width: 100%; float: none;}
	.product .productlist .list{width: 49%; float: left; margin-right: 2%; margin-bottom: 20px;}
	.product .productlist .list:nth-child(3n){margin-right: 2%;}
	.product .productlist .list:nth-child(3n+1){clear: none;}
	.product .productlist .list:nth-child(2n){margin-right: 0;}
	.product .productlist .list:nth-child(2n+1){clear: both;}
	.product .productlist .list .title{margin-top: 5px;}
	.product .productlist .list .title a{display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.product .productlist .list .button{margin-top: 5px;}
	.product .productlist .list .button a{line-height: 32px; font-size: 12px; padding: 0 20px; border-radius: 16px;}
}