@font-face {font-family: 'asap'; src: url('./asap/Asap-Regular.otf');}

* {margin: 0;padding: 0;}

html{height: 100%; width: 100%;}

body {font-family: 'asap';}
header,footer {padding: 50px 0 0 50px;}

.logo {height:40px;width: 200px;display: block;}
.logo img {max-height:100%;max-width: 100%;}

.mouse {
    display: inline-block;
    height: 44px;
    width: 28px;
    border-radius: 12px;
    border: 2px solid #fff;
    text-align: center;
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.mouse:after {
    display: inline-block;
    height: 8px;
    width: 8px;
    background-color: #fff;
    border-radius: 50%;
    content: "";
    animation: scroll 1.3s ease-out infinite forwards;
}  

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

.overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 11;
}
.overlay p{
    color: #fff;
    font-weight: 900;
    font-size: 53px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100%;
    flex-direction: column;
}

body.loader {
    height: 100%;
    overflow: hidden;
}


.main {position: relative; background:#EEF4F9 url("../img/bg.png") no-repeat;background-size: cover;}
main {height:1500px;}
main * {background-size: contain; background-repeat: no-repeat;}

.pr {position: relative;}
.pa {position: absolute;}
.b {border:thin solid}

/*tooltip*/
.tooltip-1 {    
    position: absolute;
    width: 142%;
    height: 47%;
    top: -49%;
    left: -122%;
    background-image: url(../img/3x/tooltip-1.png);
    z-index: 5;
    font-size: 17px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 5px;
}

.tooltip-3 {    
    position: absolute;
    width: 72%;
    height: 47%;
    top: -49%;
    left: -52%;
    background-image: url(../img/3x/tooltip-3.png);
    z-index: 5;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 12px;
}

.start-main {    
    position: absolute;
    top: 760px;
    left: 70px;
    width: 52px;
    height: 89px;
}
.start-main .arrow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: url("../img/3x/start-arrow.png");
    z-index: 1;
    animation: start-arrow 1s alternate-reverse infinite;
}
.start-main .base{    
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 70%;
    background-image: url("../img/3x/start-base.png");
}

@keyframes start-arrow {
    0%{
        transform: translate(-3px, 1px)
    } 100%{
        transform: translate(1px, -2px)
    }
}
.floating {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-name: floating;
}
@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 8px); }
    to   { transform: translate(0, -0px); }    
}
.man-one-main {
    height: 140px;
    width: 70px;
    top: 680px;
    left: 142px;
}
.man-one {height: 100%; width: 100%; background-image: url("../img/3x/m1.png");}

.wom-one-main {
    height: 140px;
    width: 70px;
    top: 640px;
    left: 202px;
}
.wom-one {height: 100%; width: 100%; background-image: url("../img/3x/w1.png");}

.banner {
    width: 146px;
    height: 140px;
    background-image: url("../img/3x/interact.png");
    top: 530px;
    left: 140px;
    font-family: 'asap'
}
.organize {    
    background-image: url(../img/3x/organize.png);
    top: 170px;
    left: 850px;
    width: 146px;
    height: 140px;
}
.interpret {    
    background-image: url(../img/3x/interpret.png);
    top: 330px;
    right: 180px;
    left: auto;
    z-index: 1;
    width: 146px;
    height: 140px;
}
.banner.interpret span {line-height: 55px;}

.banner span {
    text-transform: uppercase;
    color: #fff;
    font-size: 16px;
    line-height: 56px;
    text-align: center;
    width: 100%;
    display: inline-block;
}

.square-box-main {
    width: 175px;
    height: 150px;
    top: 470px;
    left: 310px;
}
.square-box {
    width: 100%;
    height: 100%;
    background-image: url("../img/3x/square-box.png");
    z-index: 1;
}
.table-one {
    width: 100%;
    height: 100%;
    background-image: url("../img/3x/round-table.png");
    top: -67px;
    left: 23px;
}
.square-box-shadow {
    width: 90%;
    height: 100%;
    background-image: url("../img/3x/square-box-shadow.png");
    bottom: -38%;
    left: -2%;
}


.square-box-main.two {
    top: 360px;
    left: 495px;
}
.square-box-main.two .tooltip-3 {animation-delay: 0.4}

.screen-with-human {width: 100%;height: 100%;}
.screen-with-human .man-three{
    width: 20%;
    height: 100%;
    background-image: url(../img/3x/man-three.png);
    top: -55px;
    left: 24px;
    z-index: 4;
}
.screen-with-human .man-three .hand{
    width: 70%;
    height: 20%;
    background-image: url(../img/3x/man-three-hand.png);
    top: 27px;
    left: 20px;
}
.screen-with-human .wom-three{
    width: 24%;
    height: 100%;
    background-image: url(../img/3x/wom-three.png);
    top: -26px;
    left: 71px;
    z-index: 3;
}
.screen-with-human .screen{    
    width: 60%;
    height: 100%;
    background-image: url(../img/3x/screen.png);
    top: -71px;
    left: 43px;
    z-index: 2;
}
.screen-with-human .chart{
    width: 100%;
    height: 56%;
    background-image: url(../img/3x/chart.png);
    top: 27px;
    left: 12px;
}
.screen-with-human .screen-shadow{
    width: 63%;
    height: 50%;
    background-image: url(../img/3x/screen-shadow.png);
    top: 20px;
    left: 49px;
}


.square-box-main.three {
    top: 256px;
    left: 665px;
}
/* .square-box-main.three .tooltip-3 {animation-delay: 0.4} */

.square-box-main.three .computer-lady {
    width: 70%;
    height: 100%;
    background-image: url(../img/3x/computer-lady.png);
    top: -68px;
    left: 43px;
    z-index: 2;
}

.ractangle-box-main {
    width: 285px;
    height: 200px;
    top: 258px;
    left: 959px;
}
.ractangle-box {
    width: 100%;
    height: 100%;
    background-image: url("../img/3x/ractangle-box.png");
    z-index: 1;
}
.ractangle-box .chart-phone{
    width: 160px;
    height: 110px;
    left: 20px;
    top: -11px;
    z-index: 2;
}
.ractangle-box .phone{
    width: 100%;
    height: 100%;
    background-image: url(../img/3x/phone.png);
    z-index: 2;
}
.ractangle-box .chart-phone .chart{
    width: 91.2px;
    height: 66px;
    background-image: url(../img/3x/phone-chart.png);
    left: 29px;
    top: 16px;
    z-index: 3;
}
.ractangle-box .chart-phone .phone-shadow{
    width: 100%;
    height: 100%;
    background-image: url(../img/3x/phone-shadow.png);
    left: 3px;
    top: 31px;
    z-index: 1;
}
.ractangle-box .phone-lady{
    width: 60px;
    height: 140px;
    background-image: url(../img/3x/phone-lady.png);
    top: 10px;
    left: 140px;
    z-index: 4;
}

.paper-man-main {
    width: 80px;
    height: 170px;
    top: 60px;
    right: 250px
}
.paper-man {
    width: 100%;
    height: 100%;
    background-image: url("../img/3x/paper-man.png");
}
.paper-man > div {
    width: 55px;
    height: 40px; 
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.paper-man > .paper-1 {animation-name:drop; animation-delay: 0s; }
.paper-man > .paper-2 {animation-name:drop2; animation-delay: 0.8s; }
.paper-man > .paper-3 {animation-name:drop3; animation-delay: 1.6s; }
.paper-man > .paper-4 {animation-name:drop; animation-delay: 2.4s; }
.paper-man > .paper-5 {animation-name:drop2; animation-delay: 3.2s; }
.paper-man > .paper-6 {animation-name:drop3; animation-delay: 4s; }

.paper-man > .paper-1 div{height: 100%;width: 100%;background-image: url("../img/3x/paper1.png"); animation: leaf 7s 0s infinite alternate ease-in-out; -webkit-transform-origin: 50% -100%;}
.paper-man > .paper-2 div{height: 100%;width: 100%;background-image: url("../img/3x/paper2.png"); animation: leaf 7s 0.8s infinite alternate ease-in-out; -webkit-transform-origin: 50% -100%;}
.paper-man > .paper-3 div{height: 100%;width: 100%;background-image: url("../img/3x/paper3.png"); animation: leaf 7s 1.6s infinite alternate ease-in-out; -webkit-transform-origin: 50% -100%;}
.paper-man > .paper-4 div{height: 100%;width: 100%;background-image: url("../img/3x/paper4.png"); animation: leaf 7s 2.4s infinite alternate ease-in-out; -webkit-transform-origin: 50% -100%;}
.paper-man > .paper-5 div{height: 100%;width: 100%;background-image: url("../img/3x/paper1.png"); animation: leaf 7s 3.2s infinite alternate ease-in-out; -webkit-transform-origin: 50% -100%;}
.paper-man > .paper-6 div{height: 100%;width: 100%;background-image: url("../img/3x/paper2.png"); animation: leaf 7s 4s infinite alternate ease-in-out; -webkit-transform-origin: 50% -100%;}

@keyframes leaf{
    0% {
        -webkit-transform: rotate(0deg);
    } 15% {
        -webkit-transform: rotate(50deg);
    } 30% {
        -webkit-transform: rotate(-50deg);
    } 45% {
        -webkit-transform: rotate(50deg);
    } 60% {
        -webkit-transform: rotate(-50deg);
    } 75% {
        -webkit-transform: rotate(50deg);
    } 90% {
        -webkit-transform: rotate(-50deg);
    } 100% {
        -webkit-transform: rotate(0deg);
    }
}
@keyframes drop {
    0% {
        -webkit-transform: translate(0px, 0px);
        opacity: 1;
    }
    95%{
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, 150px);
        opacity: 0;
    }
}

@keyframes drop2 {
    0% {
        -webkit-transform: translate(0px, 0px);
        opacity: 1;
    } 95% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(100px, 150px);
        opacity: 0;
    }
}

@keyframes drop3 {
    0% {
        -webkit-transform: translate(0px, 0px);
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(-50px, 80px);
    }
    95%{opacity: 1;}
    100% {
        -webkit-transform: translate(40px, 140px);
        opacity: 0;
    }
}

.ipad-main {
    width: 220px;
    height: 300px;
    top: 487px;
    right: 60px;
}
.ipad-main .ipad {width: 100%;height: 100%; background-image: url("../img/3x/ipad.png");}
.ipad-main .ipad .chart{
    width: 70%;
    height: 55%;
    /* background-image: url(../img/3x/ipad-chart.png); */
    left: 13%;
    top: 21%;
}
.ipad-main .ipad-man {    
    width: 20%;
    height: 50%;
    background-image: url(../img/3x/ipad-man.png);
    bottom: 40px;
    left: -20px;
    z-index: 1;
}
.ipad-main .ipad-man .hand{    
    width: 100%;
    height: 20%;
    background-image: url(../img/3x/ipad-man-hand.png);
    z-index: -1;
    left: 60%;
    top: 16%;
}
.ipad-main .ipad-wom {    
    width: 19%;
    height: 46%;
    background-image: url(../img/3x/ipad-wom.png);
    top: 50%;
    right: 50%;
}
.ipad-main .ipad-wom .hand{    
    width: 73%;
    height: 29%;
    background-image: url(../img/3x/ipad-wom-hand.png);
    top: 1%;
    right: -58%;
    z-index: -1;
    transform-origin: 0 100%;
    animation: hand 3s ease-in-out infinite;
}
@keyframes hand {
    0%{
        transform: rotate(-20deg)
    } 35%{
        transform: rotate(20deg)
    } 70%, 100%{
        transform: rotate(-20deg)
    }
}


.square-box-main.press {
    width: 175px;
    height: 150px;
    top: 766px;
    right: 480px;
    left: auto;
}
.square-box-main.press .square-box {
    width: 100%;
    height: 100%;
    background-image: url("../img/3x/press-box.png");
    z-index: 1;
}
.square-box-main.press .square-box-shadow {
    width: 90%;
    height: 100%;
    background-image: url(../img/3x/press-box-shadow.png);
    bottom: -31%;
    left: 3%;
}
.red-botton-main {    
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.red-botton-main .red-button {    
    height: 60%;
    width: 60%;
    background-image: url(../img/3x/red-button.png);
    left: 16%;
    top: -17%;
    z-index: 2;
}
.red-botton-main .red-button-shadow {
    height: 63%;
    width: 63%;
    background-image: url(../img/3x/red-button-shadow.png);
    left: 13%;
    top: 6%;
}
.red-botton-main .down-arrow {    
    height: 30%;
    width: 20%;
    background-image: url(../img/3x/donw-arrow.png);
    left: 35%;
    top: -25%;
    z-index: 3;
}
.check-list {    
    width: 80%;
    height: 100%;
    bottom: -40%;
    left: -20%;
    background-image: url(../img/3x/check-list.png);
    z-index: 7;
}
.check-list .check-mark{width: 13%;height: 10%;bottom:0;left: 0; background-image: url("../img/3x/check-mark.png");}
.check-list .check-mark:nth-child(1) {top:29%; left: 16%;}
.check-list .check-mark:nth-child(2) {top:9%; left: 60%;}
.check-list .check-mark:nth-child(3) {top:20%; left: 56%;}
.check-list .check-mark:nth-child(4) {top:45%; left: 48%;}
.square-box-main .man {
    background-image: url(../img/3x/press-man.png);
    height: 130px;
    width: 100px;
    top: 10px;
    left: 190px;
    z-index: 3;
}
.square-box-main .wom {
    background-image: url(../img/3x/press-wom.png);
    height: 130px;
    width: 130px;
    top: -60px;
    left: 170px;
    z-index: 2;
}

.walking-couple-main {width: 120px;height: 160px;top: 699px;left: 698px;}
.walking-couple-main .couple-1 {width: 100%;height: 100%; background-image: url("../img/3x/couple-1.png");}

.guide {    
    background-image: url(../img/3x/guide.png);
    top: 740px;
    left: 510px;
    z-index: 1;
    width: 146px;
    height: 140px;
}

.sign-board {
    top: 800px;
    left: 360px;
    height: 240px;
    width: 50px;
    background-image: url(../img/3x/road.png);
    transform-style: preserve-3d;
    perspective: 1000px;
}
.sign-board .arrow-board-1 {    
    top: 30px;
    left: -69px;
    width: 97px;
    height: 68px;
    background-image: url(../img/3x/arrow-board.png);
    animation: arrow-board-1 5s infinite;
    transform-origin: 100% 4px;
}
@keyframes arrow-board-1 {
    0%{transform: rotateY(0deg);}
    25%{transform: rotateY(30deg);}
    50%{transform: rotateY(10deg);}
    72%{transform: rotateY(25deg);}
    100%{transform: rotateY(0deg);}
}

.sign-board .arrow-board-2 {    
    top: 20px;
    right: -102px;
    width: 130px;
    height: 68px;
    background-image: url(../img/3x/arrow-board-2.png);
    z-index: -1;
    transform-origin: 0 4px;
    animation: arrow-board-2 5s 1s infinite;
}
@keyframes arrow-board-2 {
    0%{transform: rotateY(0deg);}
    25%{transform: translateZ(-1px) rotateY(30deg);}
    50%{transform: translateZ(-1px) rotateY(10deg);}
    72%{transform: translateZ(-1px) rotateY(25deg);}
    100%{transform: translateZ(-1px) rotateY(0deg);}
}

.sign-board .arrow-board-3 {
    top: 79px;
    left: 21px;
    width: 127px;
    height: 100px;
    background-image: url(../img/3x/arrow-board-3.png);
    transform-origin: 0 0;
    animation: arrow-board-3 5s 2s infinite;
}
@keyframes arrow-board-3 {
    0%{transform: rotateY(0deg);}
    25%{transform: rotateY(-30deg);}
    50%{transform: rotateY(-10deg);}
    72%{transform: rotateY(-25deg);}
    100%{transform: rotateY(0deg);}
}

.sign-board .arrow-board-4 {    
    top: 120px;
    left: -69px;
    width: 100px;
    height: 69px;
    background-image: url(../img/3x/arrow-board-4.png);
    transform-origin: 100% 4px;
    animation: arrow-board-1 5s 3s infinite;
}

.sign-board .arrow-board-5 {
    top: 168px;
    left: -69px;
    width: 100px;
    height: 69px;
    background-image: url(../img/3x/arrow-board-5.png);
    transform-origin: 100% 4px;
    animation: arrow-board-1 5s 2.5s infinite;
}
.target-map-main {
    bottom: 850px;
    left: 86px;
    height: 165px;
    width: 140px;
    background-image: url(../img/3x/notice-board-base.png);
    background-size: contain;
    background-repeat: no-repeat;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.target-map-main .board {
    bottom: 60px;
    left: 15px;
    height: 180px;
    width: 110px;
    background-image: url(../img/3x/notice-board.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.target-map-main .target-man {
    bottom: 10px;
    left: 155px;
    height: 160px;
    width: 110px;
    background-image: url(../img/3x/target-man.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.target-map-main .target-man .tooltip{
    bottom: -90px;
    left: 0px;
    height: 80px;
    width: 140px;
    background-image: url(../img/3x/where_should_we.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.target-map-main .target-wom {
    bottom: -20px;
    left: 75px;
    height: 160px;
    width: 80px;
    background-image: url(../img/3x/target-wom.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.implement {    
    background-image: url(../img/3x/implement.png);
    top: 1340px;
    left: 300px;
    z-index: 1;
    width: 166px;
    height: 140px;
}

.trolly-main {
    height: 200px;
    width: 200px;
    bottom: 630px;
    left: 400px;
}
.trolly-main .trolly-man{
    bottom: -9px;
    left: 125px;
    height: 170px;
    width: 80px;
    background-image: url(../img/3x/trolly-man.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}
.trolly-main .trolly-wom{
    bottom: -40px;
    left: 75px;
    height: 170px;
    width: 80px;
    background-image: url(../img/3x/trolly-wom.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.trolly-main .trolly {
    bottom: 1px;
    left: 155px;
    height: 120px;
    width: 120px;
    background-image: url(../img/3x/trolly.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.show-case-main {
    width: 350px;
    height: 300px;
    bottom: 772px;
    left: 560px;
    background-image: url(../img/3x/show-case-table.png);
}

.show-case-main .tool-tip {
    width: 90px;
    height: 60px;
    background-repeat: no-repeat;
}

.show-case-main .tool-tip.one {
    background-image: url(../img/3x/show-case-tooltip-1.png);
    top: 69px;
    left: -63px;
    animation-delay: 0.3s
}

.show-case-main .tool-tip.two {
    background-image: url(../img/3x/show-case-tooltip-2.png);
    left: 25px;
    top: 23px;
    animation-delay: 0.7s;
}

.show-case-main .tool-tip.three {
    background-image: url(../img/3x/show-case-tooltip-3.png);
    top: -30px;
    left: 120px;
}

.show-case-main .tool-tip.four {
    background-image: url(../img/3x/show-case-tooltip-4.png);
    bottom: -10px;
    left: 70px;
    animation-delay: 0.7s
}

.display-table-main {
    width: 330px;
    height: 210px;
    bottom: 642px;
    left: 752px;
    background-image: url(../img/3x/display-table.svg);
}

.display-table-main .tool-tip {
    width: 90px;
    height: 40px;
    background-repeat: no-repeat;
}
.display-table-main .tool-tip.one {
    background-image: url(../img/3x/pension.png);
    bottom: 150px;
    left: 0px;
    animation-delay: 0.7s;
}

.display-table-main .tool-tip.two {
    background-image: url(../img/3x/annuities.png);
    bottom: 201px;
    left: 140px;
}
.step-box{
    background-image: url(../img/3x/step-box.svg);
    bottom: 784px;
    right: 407px;
    height: 135px;
    width: 100px;
    z-index: -1;
}

.tv-screen-main{
    bottom: 834px;
    right: 7px;
    height: 190px;
    width: 280px;
}
.tv-screen-main .box{
    height: 100%;
    width: 100%;
    background-image: url(../img/3x/tv-screen-box.svg);
    bottom: 0px;
    left: 0;
}
.tv-screen-main .man{
    height: 78%;
    width: 18%;
    background-image: url(../img/3x/tv-screen-man.svg);
    bottom: 73px;
    left: -50px;
}
.tv-screen-main .wom{
    height: 80%;
    width: 20%;
    background-image: url(../img/3x/tv-screen-wom.svg);
    bottom: -30px;
    left: 100px;
}
.tv-screen-main .tv-screen{
    height: 110%;
    width: 50%;
    background-image: url(../img/3x/tv-screen.svg);
    bottom: 80px;
    left: 50px;
}
.tv-screen-main .tv-screen .chart{
    height: 53%;
    width: 84%;
    background-image: url(../img/3x/tv-screen-chart.png);
    bottom: 40px;
    background-size: 117px 110px;
    left: 8px;
    animation: tv-chart 4s alternate-reverse infinite;
}
@keyframes tv-chart {
    0%{
        width: 0%;
    } 85%,100% {
        width: 84%;
    }
}
.tv-screen-main .tooltip{
    width: 120px;
    height: 60px;
    background-repeat: no-repeat;
    background-image: url(../img/3x/portfolio-managment.svg);
    top: -150px;
    left: 130px;
}

.target-map-main.two{
    bottom: 480px;
    right: 520px;
    left: auto;
}
.target-map-main.two .target-wom{
    background-image: url(../img/3x/target-map-2-wom.png);
    width: 100px;
    left: 110px;
    bottom: 20px;
}
.target-map-main.two .target-man{
    background-image: url(../img/3x/target-map-2-man.png);
    left: 90px;
    bottom: -40px;
    width: 80px;
    height: 169px;
}
.walking-couple-two-main{
    left: 650px;
    bottom: 310px;
    width: 160px;
    height: 169px;
}
.walking-couple-two-main .man{
    height: 100%;
    width: 100%;
    background-image: url(../img/3x/walking-couple-man.png);
    bottom: 0;
    left: 0;
}
.walking-couple-two-main .man .tooltip{
    width: 140px;
    height: 80px;
    background-repeat: no-repeat;
    background-image: url(../img/3x/baby-tooltip.png);
    top: -91px;
    left: 0;
}

.walking-couple-two-main .wom{
    height: 100%;
    width: 43%;
    background-image: url(../img/3x/walking-couple-wom.png);
    right: 0;
    top: 0;
}
.walking-couple-two-main .tooltip{
    width: 140px;
    height: 80px;
    background-repeat: no-repeat;
    background-image: url(../img/3x/howcanweplan.png);
    bottom: -10px;
    left: -150px;
}
.natural-realationship {    
    background-image: url(../img/3x/nature-relationship.png);
    bottom: 80px;
    left: 590px;
    z-index: 1;
    width: 166px;
    height: 140px;
    top: auto;
}
.natural-realationship span{
    line-height: 22px;
    padding-top:3px 
}

.checkin {
    background-image: url(../img/3x/checkin.png);
    bottom: 18px;
    left: 750px;
    z-index: 1;
    width: 136px;
    height: 101px;
    top: auto;
}
.checkin span{
    line-height: 22px;
    padding-top: 16px;
    color: #000; 
}

.near-finish{
    height: 160px;
    width: 190px;
    bottom: 20px;
    right: 390px;
}

.near-finish .man {
    width: 50%;
    height: 100%;
    background-image: url(../img/3x/near-finish-man.png);
    top: -50px;
}
.near-finish .man .tooltip{
    width: 46px;
    height: 50px;
    background-repeat: no-repeat;
    background-image: url(../img/3x/tooltip-plus.png);
    top: -41px;
    left: 70px;
}
.near-finish .wom{
    width: 30%;
    height: 100%;
    background-image: url(../img/3x/near-finish-wom.png);
    right: 0;
}

.finish-arrow {    
    position: absolute;
    bottom: 150px;
    right: 270px;
    width: 52px;
    height: 89px;
}
.finish-arrow .arrow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: url("../img/3x/finish-arrow.png");
    z-index: 1;
    animation: start-arrow 1s alternate-reverse infinite;
}
.finish-arrow .base{    
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 70%;
    background-image: url("../img/3x/finish-base.png");
}

.fisnish-box-main {
    bottom: 143px;
    right: 0px;
    width: 278px;
    height: 223px;
}

.fisnish-box-main .man{
    width: 20%;
    height: 83%;
    background-image: url(../img/3x/finish-man.png);
    top: -100px;
    right: 40px;
}

.fisnish-box-main .wom{
    width: 20%;
    height: 80%;
    background-image: url(../img/3x/finish-wom.png);
    top: -100px;
    left: 100px;
}
.fisnish-box-main .star{
    width: 20px;
    height: 20px;
    background-image: url(../img/3x/finish-star.png);
    top: -150px;
    left: 115px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
.fisnish-box-main .star.two{
    left: 150px;
    width: 35px;
    height: 35px;
    top:-160px;
    animation-delay: 0.5s;
}
.fisnish-box-main .star.three{
    left: 200px;
    animation-delay: 0.8s;
}


footer{width: 500px; font-family: 'asap';padding-bottom:50px}
footer h2 {font-size: 60px; line-height: 70px; color:#1d2b2c;margin-bottom: 35px;}
footer p {font-size: 20px; line-height: 30px; color:#596363}

body {transition: all 0.4s;transform-origin: 0 0;}
body[data-visible='sec-0'] {
    transform: scale(2);
    transform-origin: 0 50%;
}
body[data-visible='sec-1'] {transform: scale(2); transform-origin: 10% 30%;}
body[data-visible='sec-2'] {transform: scale(2); transform-origin: 30% 17%;}
body[data-visible='sec-3'] {transform: scale(2); transform-origin: 50% 7%;}
body[data-visible='sec-4'] {transform: scale(1.7); transform-origin: 100% 6%;}
body[data-visible='sec-5'] {transform: scale(2); transform-origin: 100% 47%;}
body[data-visible='sec-6'] {transform: scale(2); transform-origin: 64% 67%;}
body[data-visible='sec-7'] {transform: scale(1.6);transform-origin: 3% 105%;;}
body[data-visible='sec-8'] {transform: scale(1.6); transform-origin: 53% 119%;}
body[data-visible='sec-9'] {transform: scale(1.8); transform-origin: 100% 91%;}
body[data-visible='sec-10'] {transform: scale(2); transform-origin: 70% 121%;}
body[data-visible='sec-11'] {transform: scale(2); transform-origin: 40% 141%;}
body[data-visible='sec-12'] {transform: scale(2); transform-origin: 70% 163%;}
body[data-visible='sec-13'] {transform: scale(2); transform-origin: 100% 149%;}