html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section-wrap {
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: transform 1s;
    -webkit-transition: -webkit-transform 1s
}

.section-wrap .section {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.section-wrap .section.section-5 {
    position: relative;
	bottom: 0;
    width: 100%;
    height: 45%;
    background-position: center center;
    background-repeat: no-repeat;
}


.section-wrap .section-1 {
    background-color: #aaa;
	background: url(../image/banner.jpg) no-repeat;
	background-size: 100% 100%;
}

.section-wrap .section-2 {
    background-color: #bbb
}

.section-wrap .section-3 {
    background-color: #ccc
}

.section-wrap .section-4 {
    background-color: #ddd
}

.section-wrap .section-5 {
    background-color: #666
}

.section-wrap .section-6 {
    background-color: #8B00FF
}

.section-wrap .section-7 {
    background-color: #FF0000
}

.section-wrap .section-8 {
    background-color: #00FFEE
}

.put-section-0 {
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.put-section-1 {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}

.put-section-2 {
    transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
}

.put-section-3 {
    transform: translateY(-300%);
    -webkit-transform: translateY(-300%);
}

.put-section-4 {
    transform: translateY(-345%);
    -webkit-transform: translateY(-345%);
}

.put-section-5 {
    transform: translateY(-500%);
    -webkit-transform: translateY(-500%);
}

.put-section-6 {
    transform: translateY(-600%);
    -webkit-transform: translateY(-600%);
}

.put-section-7 {
    transform: translateY(-700%);
    -webkit-transform: translateY(-700%);
}

.section-btn {
    /* width: 14px; */
    position: fixed;
    right: 2%;
    top: calc(50% - 90px);
	z-index: 9999;
}

.section-btn li{
	position: relative;
	cursor: pointer;
}
.section-btn li span{
    width: 10px;
    height: 10px;
    cursor: pointer;
    text-indent: -9999px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-bottom: 45px;
    background: #fff;
	opacity: 0.5;
    text-align: center;
    color: #fff;
    cursor: pointer;
	display: inline-block;
}

.section-btn li.on span{
    background: #fff;
	opacity: 1;
}
.section-btn li img{
	position: absolute;
	width: 30px;
	height: 30px;
	left: -10px;
	top: -10px;
	opacity: 0;
	transition: all 0.3s;
}
.section-btn li.on img{
	opacity: 1;
}
.section-btn li:hover img{
	opacity: 0.8;
}

.arrow {
    opacity: 1;
    animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
    -webkit-animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 100%;
}

.in {
}

.arrow:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes arrow {

    %0,
    %100 {
        top: 30px;
        opacity: 1;
    }

    50% {
        top: 60px;
        opacity: .5
    }
}

@-webkit-keyframes arrow {
    %0,
    %100 {
        top: 30px;
        opacity: 1;
    }

    50% {
        top: 60px;
        opacity: .5;
    }
}

.wow-left{
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	animation: wleft 1.45s;
	-webkit-animation: wleft 1.45s;
}
.wow-right{
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	animation: wright 1.45s;
	-webkit-animation: wright 1.45s;
}
.wow-top{
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	animation: wtop 1.45s;
	-webkit-animation: wtop 1.45s;
}
.wow-big{
	-webkit-transform:scale(1);
	transform:scale(1);
	animation: wbig 1.55s;
	-webkit-animation: wbig 1.55s;
}

@keyframes wleft {
	0% {
		opacity:0;
		-webkit-transform:translate3d(-100px,0,0);
		transform:translate3d(-100px,0,0);
	}
	100% {
		opacity:1;
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
}
@keyframes wright {
	0% {
		opacity:0;
		-webkit-transform:translate3d(100px,0,0);
		transform:translate3d(100px,0,0);
	}
	100% {
		opacity:1;
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
}
@keyframes wtop {
	0% {
		opacity:0;
		-webkit-transform:translate3d(0,100px,0);
		transform:translate3d(0,100px,0);
	}
	100% {
		opacity:1;
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
}
@keyframes wbig {
	0% {
		opacity:0;
		-webkit-transform:scale(1.4);
		transform:scale(1.4);
	}
	100% {
		opacity:1;
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}