.con1 {
	height: 31.25rem;
	position: relative;
	margin-top: 2.25rem !important;
	background: url(../img/about/con1_img.png) no-repeat top center;
	background-size: cover;
	cursor: pointer;
	border-radius: .4167rem
}

.con1 img {
	width: 100%;
	height: 100%
}

.con1 .txtBox {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 1.6667rem;
	color: #fff;
	width: 100%;
	padding-left: 3.1667rem;
	line-height: 4.5rem;
	height: 4.5rem;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(206, 203, 203, 0.42)), to(rgba(57, 55, 55, 0.88)));
	background: linear-gradient(180deg, rgba(206, 203, 203, 0.42) 0%, rgba(57, 55, 55, 0.88) 100%);
	-webkit-box-shadow: 0px .3333rem .4167rem 1px rgba(0, 0, 0, .25);
	box-shadow: 0px .3333rem .4167rem 1px rgba(0, 0, 0, .25);
	border-radius: 0px 0px .4167rem .4167rem
}

.con2 {
	padding-left: 3.3333rem
}

.con2 ul li {
	float: left;
	position: relative;
	padding-bottom: 1.25rem;
	margin-right: 5.5rem;
	font-size: 1.1667rem;
	cursor: pointer;
	color: #333
}

.con2 ul li:hover::before,
.con2 ul li.active::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	width: 2.3333rem;
	height: .3333rem;
	background: #28bca0;
	border-radius: 1.0833rem;
	bottom: 0;
	left: calc(50% - 1.1667rem)
}

.con2 .flexBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 2.75rem;
	margin-bottom: 1.4167rem
}

.con2 .flexBox .inputBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 3.25rem;
	width: 25.5833rem;
	background: #fff;
	border: 1px solid rgba(217, 217, 217, .51);
	border-radius: .4167rem;
	padding: .5833rem
}

.con2 .flexBox .inputBox input {
	width: calc(100% - 2.1667rem);
	border: none;
	outline: none
}

.con2 .flexBox .inputBox img {
	width: 2.1667rem;
	height: 2.1667rem;
	display: block
}

.con2 p {
	margin-bottom: 1.5833rem;
	font-size: 1.1667rem;
	color: #999
}

.con2 p span {
	color: #e31717
}

.con3 {
	border-top: 1px solid #f1f1f1;
	padding-top: 2.1667rem;
	padding-left: 3.3333rem
}

.con3 .flexBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.con3 .flexBox .articlelist {
	padding-bottom: 6.6667rem;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1
}

.con3 .flexBox .articlelist .el-pagination {
	text-align: center;
	margin-top: 6.6667rem
}

.con3 .flexBox .articlelist .el-pagination .el-pager li {
	color: #999
}

.con3 .flexBox .articlelist .el-pagination .el-pager li.active {
	color: #333
}

.con3 .flexBox .articlelist .item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 3.0833rem
}

.con3 .flexBox .articlelist .item .cover {
	width: 21.6667rem;
	height: 13.5833rem;
	border-radius: .6667rem 0 0 .6667rem
}

.con3 .flexBox .articlelist .item .infoBox {
	width: 46.75rem;
	-webkit-box-shadow: 0px 2px 20px 5px rgba(72, 191, 132, .05);
	box-shadow: 0px 2px 20px 5px rgba(72, 191, 132, .05);
	border-radius: 0 .6667rem .6667rem 0;
	padding: 1.3333rem 2.9167rem .9167rem 2.5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.con3 .flexBox .articlelist .item .infoBox h4 {
	font-size: 1.3333rem;
	color: #333;
	line-height: 1.5;
	margin-bottom: 1rem;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical
}

.con3 .flexBox .articlelist .item .infoBox p {
	font-size: 1.1667rem;
	line-height: 1.2;
	color: #777;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical
}

.con3 .flexBox .articlelist .item .infoBox .txtBox {
	margin-top: auto;
	color: #999;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	font-size: 1rem
}

.con3 .flexBox .articlelist .item .infoBox .txtBox img {
	width: 1.9167rem;
	height: .9167rem;
	margin-right: .5rem
}

.con3 .flexBox .articlelist .item:nth-child(even) .infoBox {
	background-color: #f8faff
}

.con3 .flexBox .articlelist .item:nth-child(even) .infoBox p {
	color: #777
}

.con3 .flexBox .recommonedList {
	margin-left: 3.5rem
}

.con3 .flexBox .recommonedList>p {
	font-size: 1.3333rem;
	color: #333;
	margin-bottom: .8333rem
}

.con3 .flexBox .recommonedList .qrcodeBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 1.1667rem;
	margin-top: 5.8333rem;
	margin-bottom: 4.1667rem
}

.con3 .flexBox .recommonedList .qrcodeBox img {
	width: 11.25rem;
	height: 11.25rem;
	margin-bottom: 12px
}

.con3 .flexBox .recommonedList .list .item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 1.5833rem;
	padding-top: 1.5833rem
}

.con3 .flexBox .recommonedList .list .item img {
	width: 7.25rem;
	height: 4.5rem;
	border-radius: .3333rem;
	margin-right: .5833rem
}

.con3 .flexBox .recommonedList .list .item .infoBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 17.5rem
}

.con3 .flexBox .recommonedList .list .item .infoBox h4 {
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.1;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical
}

.con3 .flexBox .recommonedList .list .item .infoBox p {
	margin-top: auto;
	color: #999;
	font-size: 1rem
}

.con4 {
	height: 14.3333rem;
	background: url(../img/article_bottom_img.png) no-repeat top center;
	background-size: cover
}

.con4 .container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100%
}

.con4 .container h3 {
	color: #333;
	font-size: 2.8333rem;
	margin-right: 22.8333rem;
	font-weight: 400
}

.con4 .container .btn {
	width: 8.9167rem;
	height: 4rem;
	border:1px solid #28bca0;

	border-radius: .5rem;
	text-align: center;
	line-height: 4rem;
	margin-right: 6.1667rem;
	color: #28bca0;
	font-size: 1.3333rem;
	cursor: pointer
}
.con4 .container .btn:hover{
	background: #28bca0;
	color: #fff;
}

@media(max-width: 1024px) {
	.con3 .flexBox .articlelist .item .infoBox p {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical
	}

	.con3 .flexBox .articlelist .item .infoBox {
		width: 50rem
	}

	.con3 .flexBox .articlelist .item .cover {
		width: 23.6667rem;
		height: 15.5833rem
	}

	.con3 .flexBox .recommonedList .list .item img {
		width: 9.25rem;
		height: 6.5rem
	}

	.con3 .flexBox .recommonedList .list .item .infoBox {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 19.5rem;
		height: 6.5rem
	}
}

@media(max-width: 850px) {
	.con1 {
		height: 18.3333rem;
		background-size: contain
	}

	.con2 {
		padding-left: 1rem
	}

	.con2 .flexBox {
		display: block
	}

	.con2 ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}

	.con2 ul li {
		margin-right: 0
	}

	.con2 .flexBox .inputBox {
		width: 100%;
		margin-top: 1.5rem
	}

	.con2 .flexBox .inputBox input {
		font-size: 1.1667rem
	}

	.con3 {
		padding-left: 1rem
	}

	.con3 .flexBox {
		display: block
	}

	.con3 .flexBox .articlelist .item {
		display: block
	}

	.con3 .flexBox .articlelist .item .cover {
		width: 100%;
		height: 18.3333rem;
		border-radius: .6667rem
	}

	.con3 .flexBox .articlelist .item .infoBox {
		width: 100%;
		padding: 0 1rem 1rem;
		border-radius: 0 0 .6667rem .6667rem
	}

	.con3 .flexBox .articlelist .item .infoBox .txtBox {
		margin-top: 1rem
	}

	.con3 .flexBox .articlelist .item {
		margin-bottom: 1.5rem
	}

	.con3 .flexBox .articlelist .item .infoBox h4 {
		margin-top: 1rem
	}

	.con3 .flexBox .articlelist .el-pagination {
		margin-top: 1.5rem
	}

	.el-pagination li {
		font-size: 1.1667rem !important
	}

	.con3 .flexBox .articlelist {
		padding-bottom: 1.5rem
	}

	.con3 .flexBox .recommonedList {
		margin-left: 0
	}

	.con3 .flexBox .recommonedList>p {
		text-align: center
	}

	.el-pagination .el-icon {
		font-size: 1.1667rem !important
	}

	.con3 .flexBox .recommonedList .qrcodeBox {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem
	}

	.con4 .container {
		display: block;
		padding-top: 3rem
	}

	.con4 .container h3 {
		margin-right: 0;
		font-size: 2.1667rem;
		text-align: center
	}

	.con4 .container .btn {
		display: inline-block;
		margin-right: 0;
		margin-left: 4rem;
		margin-top: 1.5rem
	}
}