* {
	margin:0;
	padding:0
}
ol,ul {
	list-style:none
}
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 {
	width:100%;
    height:100%;
}
.section-wrap .section .title {
    width:100%;
    height: 100%;
    position:relative;
}
.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(-400%);
	-webkit-transform:translateY(-400%)
}
.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:4%;
	top:50%
}
.section-btn li {
	width:14px;
	height:24px;
	cursor:pointer;
	text-indent:-9999px;
	margin-bottom:12px;
	background:#4f8dff;
	text-align:center;
	color:#fff;
    cursor:pointer;
    border-radius: 2px;
}

.section-btn li.on {
    width: 24px;
    height: 24px;
    background:#fff;
    transition: width 0.2s;
}


.b-title{
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 999;
    top:20vh;
}

.b-title h3{ 
    font-size: 3vw;
    font-family: YouSheBiaoTiHei;
    color: #4f8dff;  
    font-weight: 800;
}

.b-title span{
    font-size: 1.3vw;
}

.b-img{
    width: 100vw;
    height: 100vh
    position: absolute;
    bottom:0;
}

.b-img img{
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    bottom:0;
}
 .b-title{
    animation: down 0.5s;
}


.b-img{
    animation: up 0.5s;
}

.put-section-0 .img2{
    animation-name: am1;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.put-section-1 .img5{
    animation-name: am1;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.put-section-1 .img4{
    animation-name: am2;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
}

.put-section-1 .img8{
    animation-name: am3;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
}

@keyframes down{
    from{
        top:-200px;
    }to{
        top:130px;
    }
}

@keyframes up{
    from{
        bottom:-100%;
    }to{
        bottom:50px;
    }
}

@keyframes am1{
    from{
        opacity: 1;
    }to{
        opacity: 0.3;
    }  
}

@keyframes am2{
    from{
        transform:rotate(0deg);
        opacity: 1;
    }to{
        opacity: 0.3;
        transform:rotate(360deg);
    }  
}

@keyframes am3{
    from{
        transform:rotate(360deg);
    }to{
        transform:rotate(0deg);
    }  
}