body {
	position: relative;
	min-width: 1000px;
}
html, body, .wrap, .wrap-page, .wrap .page {
	position: relative;
	height: 100%;
}
body, .wrap, .wrap .page {
	overflow: hidden;
}
.wrap-page .page, .wrap-page .page .bg, .wrap-page .page .title {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
.wrap {
}
.wrap-page {
}
.wrap-page .page {
}
.wrap-index {
	position: absolute;
	top: 50%;
	right: 28px;
	margin-top: -66px
}
.wrap-index li {
	width: 16px;
	height: 16px;
	margin-bottom: 16px;
	background: #fff;
	cursor: pointer; 
	border:solid 1px #87c734;
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	transition: all 500ms ease
}
.wrap-index li.on {
	background-color: #87c734;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	cursor: default
}
.wrap-next {
	position: absolute;
	left: 50%;
	bottom: 80px;
	width: 34px;
	margin-left: -17px;
	cursor: pointer
}
.wrap-next img {
	display: block;
	width: 34px
}
.wrap-page .page .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center
}
.wrap-page .page .title {
	position: absolute;
	bottom: 50%;
	margin-bottom:-90px;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	height:180px;
	display:table;
}
.wrap-page .page .title span{
	display:table-cell;
	vertical-align:middle;
}
.wrap-page .page .title img {
	max-width:50%;
	height:auto;
	vertical-align:middle;
}
.wrap-page .page1 .title img {
	/*margin-left:100px*/
}
.wrap-page .page2 .title img {
}
.wrap-page .page3 .title img {
	margin-left: 200px
}
.wrap-page .page4 .title img {
}
.wrap-page .page .gradien {
	position: absolute;
	top: 0;
	width: 20%;
	height: 100%
}
.wrap-page .page .gradien-l {
	left: 0;
	background-image: -webkit-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.3));
	background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.3))
}
.wrap-page .page .gradien-r {
	right: 0;
	background-image: -webkit-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.3));
	background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.3))
}
.wrap-page .page.page-animate {
}
.wrap-page .page .bg {
	-webkit-transition: all 5000ms ease;
	-o-transition: all 5000ms ease;
	-moz-transition: all 5000ms ease;
	-ms-transition: all 5000ms ease;
	transition: all 5000ms ease
}
.wrap-page .page1.page .bg,.wrap-page .page2.page .bg, .wrap-page .page3.page .bg, .wrap-page .page4.page .bg{
	-webkit-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2)
}
.wrap-page .page1.page-animate .bg, .wrap-page .page2.page-animate .bg, .wrap-page .page3.page-animate .bg, .wrap-page .page4.page-animate .bg{
	-webkit-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	transform: scale(1, 1)
}
.wrap-page .page .title {
	-webkit-transition: all 2000ms ease;
	-o-transition: all 2000ms ease;
	-moz-transition: all 2000ms ease;
	-ms-transition: all 2000ms ease;
	transition: all 2000ms ease
}
.wrap-page .page1.page .title,.wrap-page .page2.page .title, .wrap-page .page3.page .title, .wrap-page .page4.page .title{
	bottom: 0
}
.wrap-page .page1.page-animate .title,.wrap-page .page2.page-animate .title, .wrap-page .page3.page-animate .title, .wrap-page .page4.page-animate .title {
	bottom: 50%;
	margin-bottom:-90px;
}
.wrap-next {
	animation: scale 1s linear infinite;
	-moz-animation: scale 1s linear infinite;
	-webkit-animation: scale 1s linear infinite;
	-o-animation: scale 1s linear infinite
}
@keyframes scale {
0%, 100% {
-webkit-transform:scale(0.9, .9);
-o-transform:scale(0.9, .9);
-moz-transform:scale(0.9, .9);
transform:scale(0.9, .9)
}
50% {
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
transform:scale(1, 1)
}
}
@-moz-keyframes scale {
0%, 100% {
-webkit-transform:scale(0.9, .9);
-o-transform:scale(0.9, .9);
-moz-transform:scale(0.9, .9);
transform:scale(0.9, .9)
}
50% {
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
transform:scale(1, 1)
}
}
@-webkit-keyframes scale {
0%, 100% {
-webkit-transform:scale(0.9, .9);
-o-transform:scale(0.9, .9);
-moz-transform:scale(0.9, .9);
transform:scale(0.9, .9)
}
50% {
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
transform:scale(1, 1)
}
}
@-o-keyframes scale {
0%, 100% {
-webkit-transform:scale(0.9, .9);
-o-transform:scale(0.9, .9);
-moz-transform:scale(0.9, .9);
transform:scale(0.9, .9)
}
50% {
-webkit-transform:scale(1, 1);
-o-transform:scale(1, 1);
-moz-transform:scale(1, 1);
transform:scale(1, 1)
}
}