.section-title, .due-date {
	transition: all .6s .2s ease;
	opacity: 0;
}
.slogan-1, .slogan-2, .down-wrap {
    opacity: 0;
    transition: all 1s.6s ease;
    transform: translate(-100px,0);
}
.slogan-3 {
    opacity: 0;
    transition: all 1s .6s ease;
    transform: translate(200px,0);
}
@media screen and (min-width:1024px) {
    .slogan-1, .slogan-2, .down-wrap {
        opacity: 0;
        transition: all 1s 4.5s ease;
        transform: translate(-100px,0);
    }
    .slogan-3 {
        opacity: 0;
        transition: all 1s 4.5s ease;
        transform: translate(200px,0);
    }
}
.name, .section-4-main .left {
    opacity: 0;
    transition: all 1s 1s ease;
    transform: translate(-100px,0);
}

.describe{
    opacity: 0;
    transition: all 1s 1s ease;
    transform: translate(200px,0);
}

.figure, .ranking-wrap, .section-2-main, .prop, .due-reach, #section-6-main {
    opacity: 0;
    transition: all 1s .6s ease;
    transform: translate(0,100px);
}
.step-1 {
    opacity: 0;
    transition: all 1s 1s ease;
    transform: translate(0,100px);
}
.step-2 {
    opacity: 0;
    transition: all 1s 1.4s ease;
    transform: translate(0,100px);
}
.operation-list li{opacity: 0}
.operation-list li:nth-child(1),.operation-list li:nth-child(2){transform: translate(0px,100px);transition:all 1s .4s;}
.operation-list li:nth-child(3),.operation-list li:nth-child(4){transform: translate(0px,100px); transition:all 1s .8s;}

/*從下往上*/
.upward, .logo{opacity: 0; transform: translate(0px,100px);transition:all 1s .4s;}
.upward1{transform: translate(0px,100px);transition:all 1s .6s; opacity: 0;}
.upward2{transform: translate(0px,100px);transition:all 2s .6s; opacity: 0;}
.upward3{transform: translate(0px,100px);transition:all 3s .6s; opacity: 0;}

/*從左往右*/
.toRight {
    opacity: 0;
    transition: all 1s .6s ease;
    transform: translate(-100px,0);
}

/*從右往左*/
.toLeft {
    opacity: 0;
    transition: all 1s .6s ease;
    transform: translate(200px,0);
}


.onScreen .logo, .onScreen .toLeft, .onScreen .toRight, .onScreen #section-6-main, .onScreen .due-reach, .onScreen .due-date, .onScreen .sp, .onScreen .draw-details, .onScreen .section-4-main .left, .onScreen .step-1, .onScreen .step-2, .onScreen .prop, .onScreen .section-2-main, .onScreen .ranking-wrap, .onScreen .section-title, .onScreen .slogan-1, .onScreen .slogan-2, .onScreen .down-wrap, .onScreen .slogan-3, .onScreen .figure, .onScreen .name, .onScreen .describe, .onScreen .operation-list li, .onScreen .upward, .onScreen .upward1, .onScreen .upward2, .onScreen .upward3{
    opacity: 1;
	transform: translate(0px,0px);
	transform: rotateY(0deg);
}