/* 自用 */
.banner {
	background:#1f222a url(../img/contbg.jpg) bottom center no-repeat;
	background-size: 100%;
}
.banner .flex {
	bottom: 0;
}
.banner .flex .flex_list {
	text-align: center;
	margin: 0 25%;
}
.banner .flex .flex_list p br {
		display: none;
	}
.banner .flex .flex_list.join_video {
	display: none;
	width: 50%;
	padding: 0 15%;
}

/* 案例列表展示 */
.flex.flex_4.join_list {
	flex-flow: wrap;
	margin: 2rem 0;
}
.join_list li {
	width: 98%;
	margin: 0.625rem 1%;
	background: #fbfbfb;
}
.join_list li em {
	display: block;
	width: 100%;
	overflow: hidden;
}
.pep {
	width: 100%;
	padding: 0.625rem;
	font-size: 0.875rem;
}
.pep em {
	display: inline-block;
	width: 40%;
	max-width: 4.5rem;
	margin: 3rem auto 0.5rem;
	border-radius: 3px;
}

.pep h4 {
	font-size: 1rem;
	padding: 0.625rem 0 2rem;
	border-bottom: 1px solid #eee;
}
.pep p {
	color: #0AA;
	margin: 2rem 0;
	height:8px;
}
.join_list li i {
	display: inline-block;
	max-width: 0.875rem;
	margin-right: 0.25rem;
}
.join_btn {
	background: #eee;
	vertical-align: middle;
	line-height: 3.75rem;
	font-size: 0.875rem;
	color: #ccc;
}
.join_btn span {
	display: inline-block;
	width: 50%;
	width: 48%\9
}
.join_btn a {
	width: 100%;
	line-height: 2rem;
	color: #666;
}
.join_btn a:hover {
	color: #19A1EE;
}

/* 响应式代码 */

@media screen and (max-width:1300px){
	.flex_4 li {
		width: 31.33%;
	}
}
@media screen and (max-width:1080px) {
	.banner {
		background-size: 150%;
	}
}
@media screen and (max-width:940px) {

	.flex_4 li {
		width: 48%;
	}
	.banner .flex .flex_list p br {
		display: block;
	}
	.banner .flex .flex_list {
		text-align: center;
		margin: 0 auto;
	}
	
}
@media screen and (max-width:720px) {

}
@media screen and (max-width:640px) {
	.flex_4 li {
		width: 94%;
		margin: 0 3%;
	}
	.pep h4 {
		font-size: 1.5rem;
	}
	.pep p {
		font-size: 1.35rem;
	}
	.join_list li i {
		width: 1.25rem;
		max-width:1.25rem;
	}
	.join_btn {
		line-height: 5rem;
		font-size: large;
	}
}
@media screen and (max-width:480px) {
}