/* banner区 */
.banner-bar {
	width: 100%;

	background-image: url(../img/index-banner-bg.png);
	background-repeat: repeat-x;
}

.banner-bar .container {
	align-items: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.banner-bar .container .placeholder {
	width: 100%;
}

/* 结束banner区 */


/* 主内容区 */
.main-text-bar {
	color: #728387;
	text-align: center;
}

.main-text-bar .title {
	margin-top: 20px;
	text-align: left;
}

.main-text-bar .subtitle {
	margin-top: 10px;
	text-align: left;
}

.main-text-bar .content {
	font-size: 16px;
	text-align: left;
	margin-top: 20px;
	line-height: 28px;
}

.banner-bar .container {
	width: 1000px;
}

/* 翻牌子区 */
.fliper-bar {
	margin-top: 60px;
	text-align: center;
}

.fliper-bar .container {
	display: inline-block;
}

.fliper-bar .fliper-container,
.fliper-bar .fliper-container .front,
.fliper-bar .fliper-container .back {
	margin-bottom: 40px;

	-webkit-perspective: 1500;
	-moz-perspective: 1500;
	-ms-perspective: 1500;
	perspective: 1500;
	-ms-transform: perspective(1500);
	-moz-transform: perspective(1500);
	/*重要*/
	transform-style: preserve-3d;
	/*重要*/
}
.fliper-bar .fliper-container.left{
		float:left;
}
.fliper-bar .fliper-container.right{
		float:right;
}


.fliper-bar .fliper-item {
	width: 480px;
	height: 280px;

	cursor: pointer;
	flex-shrink: 0;
	position:relative;

}


.fliper-bar .fliper-item .front,
.fliper-bar .fliper-item .back{
	position: absolute;
	background-color: rgb(240, 245, 249);
	border: solid 1px rgb(219, 219, 219);
	left: 0;
	top: 0;
	
	/*重要*/
	width: 100%;
	height: 100%;
}

.fliper-bar .fliper-item .front {
	padding: 20px;
	/* padding-top:30px; */
	box-sizing: border-box;	
	color: rgb(115, 132, 136);
	z-index: 2;
}
.fliper-bar .fliper-item .front .iconfont {
	height: 60px;
	line-height: 60px;
	font-size: 34px;
	margin-bottom: 0px;
	color: rgb(55, 93, 154);
}
.fliper-bar .fliper-item .front .title {
	height: 40px;
	line-height: 40px;
	font-size: 26px;
	margin-bottom: 20px;
}
.fliper-bar .fliper-item .front .content {
	height: 150px;
	overflow: hidden;
	line-height: 25px;
	font-size: 16px;
	text-align:justify;
}

.fliper-bar .mobile-back{
	display: none;
}
.fliper-bar .fliper-item .back {
	color: rgb(115, 132, 136);
}
.fliper-bar .fliper-item .back .content {
	height: 100%;
	padding: 20px;
	overflow: hidden;
	line-height: 30px;
	font-size: 16px;
}




/* 从正常状态 */
.fliper-bar .fliper-item.show-fliper .front{
	transform: rotateX(0deg);
}
.fliper-bar .fliper-item.show-fliper .back{
	transform: rotateX(-180deg);
}
/* 鼠标移动上去以后变成翻转状态 */
/* 鼠标移动上去以后变成翻转状态 — 已禁用 */
/* .fliper-bar .fliper-container .fliper-item.show-fliper:hover .front {
	transform: rotateX(-180deg);
}
.fliper-bar .fliper-container .fliper-item.show-fliper:hover .back {
	transform: rotateX(0deg);
} */

/* 定义翻转效果 */
.fliper-bar .fliper-item.show-fliper .front,
.fliper-bar .fliper-item.show-fliper .back{	
	transition: 1s;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}





@media screen and (max-width: 420px) {

	.banner-bar .container {
		width: 100%;
		background-size: contain;
	}

	/* 翻牌子区 */
	.fliper-bar {
		margin-top: 40px;
		text-align: center;
	}

	.fliper-bar .fliper-container {
		margin-bottom: 40px;
		width: 100%;
		box-sizing: border-box;
		padding: 0px 15px;
	}

	.fliper-bar .fliper-item {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;

		background-color: rgb(240, 245, 249);
		border: solid 1px rgb(219, 219, 219);
		border: none 0px rgb(219, 219, 219);
	}

	.fliper-bar .fliper-item .front {
		margin-top: 0px;
		font-size: 14px;
		line-height: 18px;
	}

	.fliper-bar .fliper-item .front .iconfont {
		height: 40px;
		line-height: 40px;
		font-size: 34px;
		margin-bottom: 10px;
		color: rgb(55, 93, 154);
	}

	.fliper-bar .fliper-item .front .title {
		height: 30px;
		line-height: 30px;
		font-size: 22px;
		margin-bottom: 20px;
	}

	.fliper-bar .fliper-item .front .content {
		max-height: 150px;
		overflow: hidden;
		line-height: 25px;
		font-size: 16px;
	}

	.fliper-bar .fliper-item .back {
		display: none;
	}
	
	
	.fliper-bar .mobile-back{
		display: inline-block;
		color:#666666;
		font-size: 14px;
		line-height: 30px;
		margin-top:20px;
	}
	
	/* 从正常状态 */
	.fliper-bar .fliper-item .front{
		transform: initial;
	}
	.fliper-bar .fliper-item .back{
		transform: initial;
	}
	/* 鼠标移动上去以后变成翻转状态 */
	.fliper-bar .fliper-container:hover .fliper-item.show-fliper .front {
		transform: initial;
	}
	.fliper-bar .fliper-container:hover .fliper-item.show-fliper .back {
		transform: initial;
	}
	
	/* 定义翻转效果 */
	.fliper-bar .fliper-item.show-fliper .front,.fliper-bar .fliper-item.show-fliper .back{	
		transition: initial;
		transform-style: initial;
		backface-visibility: initial;
	}
}