@charset 'utf-8';

.product{padding: 46px 0;}

.product .category{width: 280px; float: left; box-sizing: border-box; padding: 10px 15px; border: solid #e6e6e6 1px;}
.product .category .title{line-height: 30px;}
.product .category .title h2{font-size: 20px;}
.product .category .search{border: solid #e6e6e6 1px; margin-top: 20px; padding: 0 10px;}
.product .category .search input{width: 200px; height: 34px; border: none;}
.product .category .search button{width: 20px; height: 34px; background: url("../images/search.png") center no-repeat; border: none; cursor: pointer;}
.product .category .list{margin-top: 20px;}
.product .category .list li{list-style: none; line-height: 22px; border-bottom: dashed #eee 1px; position: relative;}
.product .category .list li .cbtn{width: 16px; height: 10px; float: right; cursor: pointer; margin-top: 20px; 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;}
.product .category .list li a{display: inline-block; width: 190px; font-size: 16px; padding: 15px 0 15px 30px;}
.product .category .list li::after{width: 14px; height: 14px; content: ''; background: url('../images/icon_spirit.png') -8px -249px no-repeat; position: absolute; left: 5px; top: 18px;}
.product .category .list li ul li{border-top: dashed #eee 1px; border-bottom: none;}
.product .category .list li ul li::after{background-position: -8px -279px;}

.product .productlist{width: calc(100% - 330px); float: right;}
.product .productlist .list{width: 23.5%; float: left; margin: 0 2% 30px 0;}
.product .productlist .list:nth-child(4n){margin-right: 0;}
.product .productlist .list:nth-child(4n+1){clear: both;}
.product .productlist .list .picture{overflow: hidden; border: dashed #dcdcdc 1px;}
.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: 18px; line-height: 24px; color: #212121;}
.product .productlist .list .button{text-align: center; margin-top: 10px;}
.product .productlist .list .button a{display: inline-block; line-height: 36px; font-size: 14px; padding: 0 30px; background: #2d50ce; color: #fff; border-radius: 18px;}


@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(2n){margin-right: 0;}
	.product .productlist .list .picture{border: solid #f5f6fb 2px; border-radius: 5px;}
	.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;}
}