* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p {
    
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 200px;
}
#wrap {
    /* background-color: #888; */
    position: fixed;
    width: 100%;
    height: 100%;
}
.box {
    position: relative;
    margin: 0 auto;
    /* top: 250px; */
    
    width: 750px;
    height: 400px;
    /* background-color: #444; */
}
.sect {
    position: relative;
    width: 650px;
    height: 200px;
    overflow: hidden;
    /* background-color: #ffa; */
}
.typ {
    position: absolute;
    width: 150px;
    height: 200px;
    /* line-height: 100px; */
    text-align: right;
    top: 100px;
    /* background-color: #ffa; */
}
.sect:nth-child(1) .typ{
    color: #afa;
    /* background-color: #ffa200; */
    /* background-color: #afa; */
    height: 157px;
    line-height: 157px;
    top: 120px;
    top: 42px;
}
.sect:nth-child(2) .typ{
    /* background-color: #afa; */
    /* background-color: #ffa200; */
    color: #ffa200;
    height: 157px;
    line-height: 155px;
    top: -78px;
    top: -1px;
}
.scrollWrap {
    position: absolute;
    left: 150px;
    /* top: 0px; */
    width: 500px;
    height: 200px;
    /* line-height: 100px; */
    /* background-color: #aaf; */
    overflow: hidden;
}
.sect:nth-child(1) .scrollWrap{
    top: 0px;
}
.sect:nth-child(2) .scrollWrap{
    top: -44px;
}
.scroll {
    /* text-align: left; */
    position: relative;
    /* background-color: #f88; */
    width: 500px;
    left: 0px;
}
.lastWrap {
    position: absolute;
    top: 80px;
    left: 150px;
    /* background-color: #aaf; */
    width: 600px;
    height: 200px;
    /* line-height: 100px; */
    text-align: left;
    /* display: none; */
}
.last {
    position: relative;
    width: 600px;
    height: 200px;
    overflow: hidden;
}
.lastScroll {
    position: absolute;
    width: 600px;
    /* top: -10px; */
    line-height: 236px;
    left: -600px;
    /* background-color: rgba(0,0,0,0.5); */
    height: 200px;

}

.sftWrap {
    position: fixed;
    width: 100vw;
    height: 159px;
    /* display: none; */
    /* background-color: #fff; */
}
.sftWrap {

}
.sft {
    position: absolute;
    width: 100%;
    height: 159px;
    right: 0;
}
.sft:nth-child(1){
    background-color: #fff;
    z-index: 105;
}
.sft:nth-child(2){
    background-color: #aaa;
    z-index: 104;
}
.sft:nth-child(3){
    background-color: #888;
    z-index: 103;
}
.sft:nth-child(4){
    background-color: #444;
    z-index: 102;
}
.sft1 .sft:nth-child(5){
    background-color: #afa;
    z-index: 101;
}
.sft2 .sft:nth-child(5){
    background-color: #ffa200;
    z-index: 101;
}

.btn {
    position: fixed;
    /* background-color: #afa; */
    width: 100%;
    height: 150px;
    opacity: 0;
    z-index: 100;
}
.btn:hover {
    cursor: pointer;
}
.btn>div {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    /* background-color: #faf; */
    background-color: #fff;
    border: 20px solid #000;
    border-radius: 100%;
}
.btn p {
    font-size: 20px;
    text-align: center;
}
.btn p:nth-child(1){
    margin-top: 20px;

}
.btnSfts {
    position: fixed;
    width: 150px;
    height: 150px;
    opacity: 0;
    z-index: 99;
    /* background-color: #afa; */
}
.btnSft {
    position: absolute;
    top: 0px;
    width: 150px;
    height: 150px;
    border: 20px solid #000;
    border-radius: 100%;
}
.btnSft:nth-child(1) {
    animation: btnAni 1.5s 0.3s infinite;
}
.btnSft:nth-child(2) {
    animation: btnAni 1.5s 0.6s infinite;
}
.btnSft:nth-child(3) {
    animation: btnAni 1.5s 0.9s infinite;
}
@keyframes btnAni {
    0% {
        opacity: 1;
        top: 0;
    }
    100% {
        opacity: 0;
        top: 50px;
        border: 1px solid #000;
    }
}