﻿.content {
	width: 100%;
	position: relative;
	background-color: white
}

.content .vision {
	width: 100%;
	height: 7.03502rem;
	position: relative;
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-image: url(../image/culture1.jpg);
	z-index: 1
}

.content .vision .text {
	position: absolute;
	top: 1.455rem;
	left: 0;
	width: 100%
}

.content .vision .text .title {
	width: 100%;
	font-size: .24rem;
	line-height: .24rem;
	color: #ffffff;
	text-align: center;
	opacity: 0;
	transition: .5s;
	position: relative;
	top: 20px
}

.content .vision .text .line {
	width: .4125rem;
	height: .03rem;
	background-color: #e84127;
	margin: 0 auto;
	margin-top: .2025rem;
	opacity: 0;
	transition: .5s;
	transition-delay: .2s;
	position: relative;
	top: 20px
}

.content .vision .text .h1 {
	margin-top: .1725rem;
	width: 100%;
	font-size: .42rem;
	font-weight: bold;
	line-height: .42rem;
	letter-spacing: -.0075rem;
	color: #ffffff;
	text-align: center;
	opacity: 0;
	transition: .5s;
	transition-delay: .4s;
	position: relative;
	top: 20px
}

.content .vision .text.open .title {
	opacity: 1;
	top: 0
}

.content .vision .text.open .line {
	opacity: 1;
	top: 0
}

.content .vision .text.open .h1 {
	opacity: 1;
	top: 0
}

.content .mission {
	margin-top: .4725rem;
	height: 4.87501rem;
	position: relative
}

.content .mission .jumbotron {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center
}

.content .mission .jumbotron img {
	width: 100%
}

.content .mission .text {
	position: absolute;
	top: 1.455rem;
	left: 0;
	width: 100%
}

.content .mission .text .title {
	width: 100%;
	font-size: .24rem;
	line-height: .24rem;
	color: #ffffff;
	text-align: center
}

.content .mission .text .line {
	width: .4125rem;
	height: .03rem;
	background-color: #e84127;
	margin: 0 auto;
	margin-top: .2025rem
}

.content .mission .text .h1 {
	margin-top: .1725rem;
	width: 100%;
	font-size: .26rem;
	font-weight: bold;
	line-height: .42rem;
	letter-spacing: -.0075rem;
	color: #ffffff;
	text-align: center
}

.content .bottom {
	padding-top: .4725rem;
	width: 100%;
	height: 4.53502rem;
	position: relative;
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-image: url(../images/pic11.jpg);
	z-index: 1
}

.content .bottom .list {
	width: 73%;
	margin-left: 13.5%;
	padding-top: 0.2rem
}

.content .bottom .list .item {
	width: 24.33%;
	float: left;
	margin-bottom: .2rem
}
.content .bottom .list .item:last-child {
	width: 43.33%;
}

.content .bottom .list .item .title {
	font-size: .24rem;
	font-weight: bold;
	line-height: .24rem;
	color: #ffffff;
	padding-left: .1875rem;
	position: relative
}

.content .bottom .list .item .title::after {
	content: "";
	width: .03rem;
	height: .24rem;
	background-color: #e84127;
	position: absolute;
	top: 0;
	left: 0
}

.content .bottom .list .item .p {
	position: relative;
	padding-left: .1875rem;
	font-size: .15rem;
	line-height: .3rem;
	color: #ffffff;
	margin-top: .21rem;
	height: .6rem
}

.content .gray {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .3);
	z-index: 0
}

@media screen and (max-width:1020px) {
	.content .vision {
		overflow: hidden;
		background-size: auto 100%;
		background-attachment: scroll
	}

	.content .vision .text {
		position: absolute;
		top: 1.455rem;
		left: 0;
		width: 100%
	}

	.content .vision .text .title {
		width: 100%;
		font-size: .24rem;
		line-height: .24rem;
		color: #ffffff;
		text-align: center;
		opacity: 1;
		transition: .5s;
		position: relative;
		top: 0
	}

	.content .vision .text .line {
		width: .4125rem;
		height: .03rem;
		background-color: #e84127;
		margin: 0 auto;
		margin-top: .2025rem;
		opacity: 1;
		transition: .2s;
		transition-delay: 0s;
		position: relative;
		top: 0
	}

	.content .vision .text .h1 {
		margin-top: .1725rem;
		width: 100%;
		font-size: .42rem;
		font-weight: bold;
		line-height: .42rem;
		letter-spacing: -.0075rem;
		color: #ffffff;
		text-align: center;
		opacity: 1;
		transition: .3s;
		transition-delay: 0;
		position: relative;
		top: 20px
	}

	.content .bottom {
		overflow: hidden;
		height: 8rem;
		background-size: auto 100%;
		background-attachment: scroll
	}

	.content .bottom .list {
		width: 90%;
		margin-left: 5%;
		padding-top: 1.5rem
	}

	.content .bottom .list .item {
		width: 100%;
		float: left;
		margin-bottom: .8175rem;
		margin-right: 2%
	}

	.content .bottom .list .item:nth-child(2n +2) {
		margin-right: 0
	}

	.content .bottom .list .item .title {
		font-size: .34rem;
		font-weight: bold;
		line-height: .34rem;
		color: #ffffff;
		padding-left: .1875rem;
		position: relative
	}

	.content .bottom .list .item .title::after {
		content: "";
		height: .32rem
	}

	.content .bottom .list .item .p {
		padding-left: .1875rem;
		font-size: .23rem;
		line-height: .4rem;
		color: #ffffff;
		/** opacity:.5; **/
		margin-top: .21rem;
		height: .6rem
	}
}
@media only screen and (max-width:768px) {
	.content .bottom .list .item{width: 48%;}
	.content .bottom{height: 15rem;}
}