* { 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 { position: relative; z-index:70; width: 100%; height: 100vh;  background-position: center center; background-repeat: no-repeat; }
.section-wrap .section .title { width: 100%; position: absolute; top: 10%; color: #fff; font-size: 2.4em; text-align: center; }
 


.section-wrap .section-1 { position:relative; z-index:80; } 
.section-wrap .section-2 { position:relative; z-index:70; } 
.section-wrap .section-3 { position:relative; z-index:60; } 
.section-wrap .section-4 { position:relative; z-index:50; } 
.section-wrap .section-5 { position:relative; z-index:40; } 
.section-wrap .section-6 { position:relative; z-index:30; } 
.section-wrap .section-7 { position:relative; z-index:20; } 

.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:46px; position: fixed; right: 4%; top: 50%; z-index:90;}

.section-btn li { width: 46px; height: 20px; cursor: pointer;  margin-bottom: 12px; cursor: pointer;  position:relative; z-index:3; float:right; font-family:Arial; font-size:14px;  text-align: right; color: #ddd; background:none;  font-weight:bold;}
.section-btn li.on { color:#ffce00; }

.section-btn li font{float:left; width:23px; margin:6px 6px 0 0; display:none;}
.section-btn li.on font{float:left; width:23px; margin:6px 6px 0 0; display:block;} 

.arrow { opacity: 1; animation: arrow 3s cubic-bezier(.5,0,.1,1) infinite; -webkit-animation: arrow 3s cubic-bezier(.5,0,.1,1) infinite; position: absolute; top: 30px; left: 50%; margin-left: -30px; width: 60px; height: 60px; line-height: 60px; cursor: pointer; background-image: url(../images/down.png); background-repeat: no-repeat; background-size: 100%; }
.in { background-image: url(../images/up.png); }
.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; }
}

@media screen and (max-width:1370px) {

.section-btn {width:46px; position: fixed; right:1%; top: 50%; z-index:80;}

}