/* banner */
.m-banner {
	margin-top: .44rem;
}
.m-banner ul {
	position: relative;
	height: 5.5rem;
}
.m-banner li {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .5s ease;
}
.m-banner li.z-crt {
	z-index: 1;
	opacity: 1;
}
.m-banner li .describe {
	position: absolute;
	right: 0;
	top: 100%;
	height: .54rem;
	font-size: .15rem;
	color: #666;
}
.m-banner li .describe .tips {
	position: relative;
	margin-left: .14rem;
}
.m-banner li .describe .tips .tf {
	font-size: .16rem;
}
.m-banner li .describe .tips-box {
	display: none;
	z-index: 1;
	position: absolute;
	right: 0;
	top: 100%;
	width: 6.08rem;
	padding-top: .08rem;
}
.m-banner li .describe:hover .tips-box {
	display: block;
}
.m-banner li .describe .tips-box:before {
	content: '';
	position: absolute;
	right: .02rem;
	top: .02rem;
	border-bottom: .07rem solid #ddd;
	border-left: .05rem solid rgba(0,0,0,0);
	border-right: .05rem solid rgba(0,0,0,0);
}
.m-banner li .describe .tips-box:after {
	content: '';
	position: absolute;
	right: .03rem;
	top: .04rem;
	border-bottom: .06rem solid #fff;
	border-left: .04rem solid rgba(0,0,0,0);
	border-right: .04rem solid rgba(0,0,0,0);
}
.m-banner li .describe .tips-box p {
	border: 1px solid #ddd;
	padding: .24rem .2rem;
	background: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
}
.m-banner .handle {
	height: .54rem;
}
.m-banner .handle a {
	line-height: .2rem;
	margin: 0 .12rem;
	font-size: 14px;
	color: #999;
}
.m-banner .handle a:hover {
	color: #000;
}
/* end banner */

/* about */
.m-about {
	padding: .3rem 0 .98rem;
}
.m-about .title {
	margin-bottom: .44rem;
	font-size: .36rem;
	font-weight: normal;
}
.m-about .total {
	margin-top: .76rem;
}
.m-about .total .item {
	float: left;
	box-sizing: border-box;
	width: 3.4rem;
	border: 1px solid #E5E5E5;
	padding: .3rem 0;
	font-size: .15rem;
	text-align: center;
	color: #666;
}
.m-about .total .item:nth-child(n+2) {
	margin-left: .26rem;
}
.m-about .total .item div {
	margin-bottom: .12rem;
	font-size: .5rem;
	font-weight: bold;
	color: #F7A100;
}
/* end about */

/* timeline */
.m-timeline {
	padding: .3rem 0 1.06rem;
}
.m-timeline .title h1 {
	margin-bottom: .2rem;
	font-size: .36rem;
	font-weight: normal;
}
.m-timeline .title h2 {
	font-size: .16rem;
	font-weight: normal;
	color: #999;
}
.m-timeline .content {
	position: relative;
	opacity: 0;
	transform: translate(0,1rem);
	transition: all 1s ease;
}
.m-timeline.z-active .content {
	opacity: 1;
	transform: translate(0,0);
}
.m-timeline .list {
	position: relative;
	height: 5rem;
	overflow: hidden;
}
.m-timeline .list li {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .5s ease;
}
.m-timeline .list li.z-crt {
	z-index: 1;
	opacity: 1;
}
.m-timeline .list li .year {
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 3rem;
	color: #F2C373;
	opacity: .15;
	transform: translate(-50%,-50%);
}
.m-timeline .list li .explain {
	position: relative;
	height: 100%;
}
.m-timeline .list  li .explain img {
	max-width: 4.6rem;
	max-height: 3rem;
	margin-bottom: .2rem;
}
.m-timeline .list  li .explain p {
	width: 6.2rem;
	line-height: .36rem;
	font-size: .2rem;
	text-align: center;
	color: #333;
}
.m-timeline .content .angle {
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: -1.1rem;
}
.m-timeline .content .angle a {
	float: left;
	box-sizing: border-box;
	width: 1rem;
	height: 1rem;
	border: 1px dashed #000;
	border-radius: 100%;
	font-size: .45rem;
	opacity: .4;
}
.m-timeline .content .angle a:nth-last-child(1) {
	float: right;
}
.m-timeline .content .angle a:hover {
	opacity: 1;
}
.m-timeline .nav {
	overflow: hidden;
}
.m-timeline .nav ul {
	float: left;
	position: relative;
	left: 0;
	padding: .56rem .15rem 0;
	white-space: nowrap;
	background-image: url(../img/about/timeline.png);
	background-repeat: repeat-x;
	background-size: auto .3rem;
	transition: all .3s ease;
}
.m-timeline .nav li {
	display: inline-block;
	width: .5rem;
	margin-right: 1.595rem;
	font-size: .22rem;
	text-align: center;
	color: #999;
	cursor: pointer;
	transition: all .15s ease;
}
.m-timeline .nav li:hover {
	color: #EFAE35;
}
.m-timeline .nav li:nth-last-child(1) {
	margin-right: 0;
}
.m-timeline .nav li.z-crt {
	color: #EFAE35;
	transform: scale(1.45);
}
/* end timeline */

/* advantage */
.m-advantage {
	padding: 1.15rem 0;
	overflow: hidden;
}
.m-advantage .text {
	float: left;
	width: 7.15rem;
}
.m-advantage .list {
	position: relative;
	height: 3.3rem;
	margin-top: .9rem;
}
.m-advantage .list li {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .5s ease;
}
.m-advantage .list li.z-crt {
	z-index: 1;
	opacity: 1;
}
.m-advantage .list li .title {
	margin-bottom: .5rem;
	font-size: .36rem;
	font-weight: normal;
	opacity: 0;
	transform: translate(0,-1rem);
	transition: all 1s ease;
}
.m-advantage.z-active .list li .title {
	opacity: 1;
	transform: translate(0,0);
}
.m-advantage .list li .content {
	line-height: .3rem;
	font-size: .16rem;
	opacity: 0;
	transform: translate(0,1rem);
	transition: all 1s ease;
	transition-delay: .6s;
}
.m-advantage.z-active .list li .content {
	opacity: 1;
	transform: translate(0,0);
}

.m-advantage .handle li {
	box-sizing: border-box;
	width: .12rem;
	height: .12rem;
	border: 2px solid #fff;
	border-radius: 100%;
	margin-right: .12rem;
	background: #999;
	cursor: pointer;
}
.m-advantage .handle li.z-crt {
	border-color: #EFAE35;
	background: #fff;
}
.m-advantage .handle .index {
	font-size: .18rem;
	color: #aaa
}
.m-advantage .handle .index span {
	margin: 0 .4em;
}
.m-advantage .handle .index b {
	font-weight: normal;
	color: #444;
}

.m-advantage .image {
	float: right;
	position: relative;
	width: 5.4rem;
	height: 6.5rem;
}
.m-advantage .image .item {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .5s ease;
}
.m-advantage .image .item.z-crt {
	z-index: 1;
	opacity: 1;
}
/* end advantage */