.content{padding-bottom: 65px;background: #f7f7f7;}
.content .cate{padding: 34px 0;text-align: center;background: #fff;}
.content .cate .border{position: relative;display: inline-block;cursor:pointer;width: 145px;height: 145px;border-radius: 50%;margin: 0 10px;transition: all 0.5s;vertical-align: top;}
.content .cate .border .name{font-family: 'Poppins-Medium';color: #333333;font-size: 16px;width: 126px;height: 126px;line-height: 126px;border: 1px solid #3370cc;border-radius: 50%;margin: 8.5px auto;transition: all 0.5s;overflow: hidden;}
.content .cate .border img{position: absolute;left:calc( (145px - 21px)/2 );bottom: -51px;opacity: 0;transition: all 0.5s;}
.content .cate .border.on{background: #4299de;}
.content .cate .border.on .name{border: 1px solid #4299de;color: #fff;}
.content .cate .border.on img{opacity: 1;}
.content .cate .border:hover{background: #4299de;}
.content .cate .border:hover .name{border: 1px solid #4299de;color: #fff;}
.content .cate .border:hover img{opacity: 1;}
.content .list{padding: 60px 0 10px;}
.content .list .copy{float: left;width: 31%;height: 243px;margin-bottom: 77px;position: relative;}
.content .list .copy:nth-child(3n-1){margin: 0 3.5%;}
.content .list .copy a.name{display: inline-block;width: 88%;height: 51px;border: 1px solid #eaeae9;position: absolute;bottom: -27px;right: 0;background: #fff;line-height: 51px;overflow: hidden;text-align: left;padding-left: 24px;font-family: 'Poppins-Light';font-size: 16px;transition: all 0.5s;}
.content .list .copy img{transition: all 0.5s;}
.content .list .copy:hover img{box-shadow:1px 8px 3px #ccc;}
.content .list .copy:hover a.name{box-shadow:0px 5px 3px #ccc;}
#main .fr.w100{width: 100%;min-height: 300px;}


@media screen and (max-width: 1300px) {
	.content .cate{padding: 30px 0;}
	.content .cate .border{width: 125px;height: 125px;margin: 0 5px;}
	.content .cate .border .name{width: 110px;height: 110px;margin: 7.5px auto;line-height: 110px;}
	.content .cate .border img{left: calc( (125px - 21px)/2 );}
	.content .list .copy a.name{bottom: -13px;}
}
@media screen and (max-width: 1140px) {
	.content .list .copy a.name{bottom: 0px;}
	.content .list .copy{margin-bottom: 40px;}
	.content .list{padding-top: 30px;}
}
@media screen and (max-width: 1020px) {
	.content .cate .border{width: 100px;height: 100px;}
	.content .cate .border .name{width: 90px;height: 90px;margin: 5px auto;line-height: 90px;font-size: 14px;}
	.content .cate .border img{left: calc( (100px - 21px)/2 );}
	.content .list .copy{width: 48%;margin: 0 1% 20px!important;}
}
@media screen and (max-width: 750px) {
	.content .cate{padding: 15px 0;}
	.content .cate .border{width: 80px;height: 80px;}
	.content .cate .border .name{width: 70px;height: 70px;line-height: 70px;font-size: 12px;}
	.content .cate .border img{left: calc( (80px - 21px)/2 );}
	.content .cate .border img{bottom: -34px;}
	.content .list .copy{width: 48%;margin: 0 1% 20px!important;height: 182px;}
	.content .list .copy a.name{font-size: 12px;height: 35px;line-height: 35px;padding-left: 10px;}
	.content .cate .border img{display: none;}
}
@media screen and (max-width: 520px) {
	.content .list .copy{height: auto;}
	.content .list .copy a.name{bottom: -10px;height: 25px;line-height: 25px;}
}