.wrap-cate {width: 100%; display: flow-root;}
.wrap-cate .title-cate {width: 100%; display: flow-root; padding: 50px 0; background: url('../images/bg-single.jpg') no-repeat center center; background-size: cover; text-align: center;}
.wrap-cate .title-cate h1 {font-size: 35px; margin: 0 0 10px; color: #fff;}
.wrap-cate .title-cate .breadcrumbs {color: #fff; text-transform: uppercase; font-size: 14px;}
.wrap-cate .title-cate .breadcrumbs a {color: #fff;}
.wrap-cate .content-cate {width: 100%; display: flow-root; margin: 50px 0; min-height: 100vh;}
.wrap-cate .content-cate .list-tin .item {width: 31%; margin: 15px 1.75%; float: left; border-radius: 20px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, .15);}
.wrap-cate .content-cate .list-tin .item:nth-child(3n+1) {margin-left: 0; clear: both;}
.wrap-cate .content-cate .list-tin .item:nth-child(3n) {margin-right: 0;}
.wrap-cate .content-cate .list-tin .item .img-tin {position: relative; width: 100%; height: 200px;background-size: cover!important; background-repeat: no-repeat!important; background-position: center center!important; transition: all .5s ease-in-out;}
.wrap-cate .content-cate .list-tin .item:hover .img-tin {background-position: 100% 100%!important;}
.wrap-cate .content-cate .list-tin .item .date {position: absolute; left: 0; bottom: 0; background-color: #fff; border-radius: 0 20px 0 0; padding: 5px 10px; text-align: center; color: #222; font-size: 12px; line-height: 1;}
.wrap-cate .content-cate .list-tin .item .date span {clear: both; font-size: 25px; color: #7a7a7a; width: 100%; display: flow-root;}
.wrap-cate .content-cate .list-tin .item .content-tin {padding: 10px; min-height: 60px;}
.wrap-cate .content-cate .list-tin .item .content-tin h4 {margin: 0; color: #222; font-weight: normal;}
.wrap-cate .content-cate .list-tin .item:hover .content-tin h4 {color: #0e4122;}

.wrap-sp {width: 100%; display: flow-root;}
.wrap-sp .title-sp {width: 100%; display: flow-root; padding: 50px 0; background: url('../images/bg-single.jpg') no-repeat center center; background-size: cover; text-align: center;}
.wrap-sp .title-sp h1 {font-size: 35px; margin: 0 0 10px; color: #fff;}
.wrap-sp .title-sp .breadcrumbs {color: #fff; text-transform: uppercase; font-size: 14px;}
.wrap-sp .title-sp .breadcrumbs a {color: #fff;}
.wrap-sp .content-sp {width: 100%; display: flow-root; margin: 40px 0; min-height: 100vh;}
.wrap-sp .content-sp .list-sp .item {width: 31%; margin: 15px 1.75%; float: left; text-align: center;}
.wrap-sp .content-sp .list-sp .item:nth-child(3n+1) {margin-left: 0; clear: both;}
.wrap-sp .content-sp .list-sp .item:nth-child(3n) {margin-right: 0;}
.wrap-sp .content-sp .list-sp .item .img-sp {height: 200px; overflow: hidden; margin-bottom: 15px;}
.wrap-sp .content-sp .list-sp .item .img-sp img {width: 100%; min-height: 200px; transition: all .5s ease-in-out;}
.wrap-sp .content-sp .list-sp .item:hover .img-sp img {-webkit-transform: scale(1.2); transform: scale(1.2);}
.wrap-sp .content-sp .list-sp .item h3 {margin: 10px 0;}
.wrap-sp .content-sp .list-sp .item h3 a {color: #222; font-size: 20px;}

@media (max-width: 1100px){
	.wrap-sp .content-sp .list-sp .item {width: 31%; margin: 20px 1.5%;}
	.wrap-sp .content-sp .list-sp .item:nth-child(4n) { margin: 20px 1.5%;}
	.wrap-sp .content-sp .list-sp .item:nth-child(4n+1) {clear: none; margin: 20px 1.5%;}
	.wrap-sp .content-sp .list-sp .item:nth-child(3n) {margin-right: 0;}
	.wrap-sp .content-sp .list-sp .item:nth-child(3n+1) {margin-left: 0; clear: both;}
}

@media (max-width: 900px){
	.wrap-cate .title-cate h1 {font-size: 30px;}
	.wrap-sp .title-sp h1 {font-size: 30px;}
	.wrap-cate .content-cate .list-tin .item {width: 48%; margin: 20px 0;}
	.wrap-cate .content-cate .list-tin .item:nth-child(3n+1) {clear: none;}
	.wrap-cate .content-cate .list-tin .item:nth-child(2n) {float: right;}
	.wrap-cate .content-cate .list-tin .item:nth-child(2n+1) {clear: both;}
	.wrap-sp .content-sp .list-sp .item {width: 48%; margin: 20px 0;}
	.wrap-sp .content-sp .list-sp .item:nth-child(3n+1) {clear: none;}
	.wrap-sp .content-sp .list-sp .item:nth-child(2n) {float: right;}
	.wrap-sp .content-sp .list-sp .item:nth-child(2n+1) {clear: both;}
}

@media (max-width: 500px){
	.wrap-cate .title-cate h1 {font-size: 25px;}
	.wrap-sp .title-sp h1 {font-size: 25px;}
	.wrap-cate .content-cate .list-tin .item {width: 100%;}
	.wrap-sp .content-sp .list-sp .item {width: 100%;}
}