html {
    cursor: url("../img/section1/cursor2.png"), auto;
    scroll-behavior: smooth;
}


/*.startPoint {*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    position: fixed;*/
/*    right: 100px;*/
/*    bottom: 100px;*/
/*    z-index: 899998989;*/
/*    background: black;*/
/*    border: none;*/
/*    outline: none;*/
/*}*/





#section1 {
    height: 980px;
    position: relative;
    background: url("../img/section1/section1_bg.jpg") no-repeat center;
    background-size: cover;
}


#section1 .character {
    position: absolute;
    width: 1774px;
    height: 752px;
    top: 160px;
    left: 87px;
}


#section1 .character .character1 {
    position: absolute;
    left: 0;
    top: 30px;
    z-index: 10;
    opacity: 0;
    transform: translateX(-150px);
    transition: all 0.4s ease-in 0.2s;
}


#section1.on .character .character1 {
    transform: translateX(0);
    opacity: 1;
}


#section1 .character .character2 {
    position: absolute;
    left: 255px;
    bottom: 0;
    opacity: 0;
    transform: translateX(-300px);
    transition: all 0.4s ease-in 0.6s;
}


#section1.on .character .character2 {
    transform: translateX(0);
    opacity: 1;
}


#section1 .character .character3 {
    position: absolute;
    left: 716px;
    bottom: 18px;
    opacity: 0;
    transition: all 0.4s ease-in 0.6s;
}


#section1.on .character .character3 {
    opacity: 1;
}


#section1 .character .character4 {
    position: absolute;
    right: 295px;
    bottom: 33px;
    opacity: 0;
    transform: translateX(300px);
    transition: all 0.4s ease-in 0.8s;
}


#section1.on .character .character4 {
    transform: translateX(0);
    opacity: 1;
}


#section1 .character .character5 {
    position: absolute;
    right: 0;
    bottom: 35px;
    opacity: 0;
    transform: translateX(150px);
    transition: all 0.4s ease-in 0.4s;
}


#section1.on .character .character5 {
    transform: translateX(0);
    opacity: 1;
}


#section1 .title {
    position: absolute;
    top: 197px;
    left: 802px;
    opacity: 0;
    transform: translateX(-150px);
    transition: all 0.4s ease-in-out 1s;
}


#section1.on .title {
    transform: translateX(0);
    opacity: 1;
}


#section1 .text {
    position: absolute;
    top: 368px;
    left: 770px;
    opacity: 0;
    transform: translateX(-150px);
    transition: all 0.4s ease-in-out 1.2s;
}


#section1.on .text {
    transform: translateX(0);
    opacity: 1;
}



#section2 {
    width: 100vw;
    height: 1371px;
    background: url("../img/section2/section2_bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section2 .title {
    width: 586px;
    height: 214px;
    margin-top: 220px;
    margin-left: 157px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#section2 .title .line {
    width: 0;
    height: 33px;
    position: absolute;
    background: #00d16d;
    left: 150px;
    top: 334px;
    transition: all 0.9s ease-in-out 0.4s;
}


#section2.on .title .line {
    width: 532px;
}


#section2 .title .main_title {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section2.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section2 .text {
    position: absolute;
    top: 220px;
    right: 158px;
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.7s ease-in-out;
}


#section2.on .text {
    transform: translateX(0);
    opacity: 1;
}



#section3 {
    width: 100vw;
    height: 1354px;
    background: url("../img/section3/section3_bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section3 .text {
    position: absolute;
    left: 160px;
    top: 227px;
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.7s ease-in-out;
}


#section3.on .text {
    transform: translateX(0);
    opacity: 1;
}


#section3 .graph1 {
    width: 718px;
    height: 723px;
    margin-top: 442px;
    margin-left: 157px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#section3 .graph1 .graph_line {
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}


#section3.on .graph1 .graph_line {
    transform: translateY(0);
    opacity: 1;
}


#section3 .graph1 .hiking_text {
    position: absolute;
    bottom: 235px;
    left: 254px;
    opacity: 0;
    transition: all 0.3s ease 0.4s;
}


#section3.on .graph1 .hiking_text {
    opacity: 1;
}


#section3 .graph1 .hiking_bar {
    position: absolute;
    width: 47px;
    height: 0;
    background: #00d16d;
    left: 296px;
    bottom: 301px;
    transition: all 0.3s ease-in-out 0.5s;
}


#section3.on .graph1 .hiking_bar {
    height: 424px;
}


#section3 .graph1 .hiking_percentage {
    position: absolute;
    top: 555px;
    left: 270px;
    opacity: 0;
    transition: all 0.3s ease 0.8s;
}


#section3.on .graph1 .hiking_percentage {
    opacity: 1;
}


#section3 .graph1 .camping_text {
    position: absolute;
    bottom: 235px;
    left: 430px;
    opacity: 0;
    transition: all 0.3s ease 0.7s;
}


#section3.on .graph1 .camping_text {
    opacity: 1;
}


#section3 .graph1 .camping_bar {
    position: absolute;
    width: 47px;
    height: 0;
    background: #00d16d;
    left: 428px;
    bottom: 301px;
    transition: all 0.3s ease-in-out 0.9s;
}


#section3.on .graph1 .camping_bar {
    height: 282px;
}


#section3 .graph1 .camping_percentage {
    position: absolute;
    top: 705px;
    left: 400px;
    opacity: 0;
    transition: all 0.2s ease 1.2s;
}


#section3.on .graph1 .camping_percentage {
    opacity: 1;
}


#section3 .graph1 .fishing_text {
    position: absolute;
    bottom: 235px;
    left: 545px;
    opacity: 0;
    transition: all 0.2s ease 0.8s;
}


#section3.on .graph1 .fishing_text {
    opacity: 1;
}


#section3 .graph1 .fishing_bar {
    position: absolute;
    width: 47px;
    height: 0;
    background: #00d16d;
    left: 548px;
    bottom: 301px;
    transition: all 0.2s ease-in-out 1.1s;
}


#section3.on .graph1 .fishing_bar {
    height: 189px;
}


#section3 .graph1 .fishing_percentage {
    position: absolute;
    top: 798px;
    left: 521px;
    opacity: 0;
    transition: all 0.2s ease 1.3s;
}


#section3.on .graph1 .fishing_percentage {
    opacity: 1;
}


#section3 .graph1 .golf_text {
    position: absolute;
    bottom: 235px;
    left: 669px;
    opacity: 0;
    transition: all 0.2s ease 1.2s;
}


#section3.on .graph1 .golf_text {
    opacity: 1;
}


#section3 .graph1 .golf_bar {
    position: absolute;
    width: 47px;
    height: 0;
    background: #00d16d;
    left: 667px;
    bottom: 301px;
    transition: all 0.2s ease-in-out 1.2s;
}


#section3.on .graph1 .golf_bar {
    height: 141px;
}


#section3 .graph1 .golf_percentage {
    position: absolute;
    top: 846px;
    left: 639px;
    opacity: 0;
    transition: all 0.2s ease 1.2s;
}


#section3.on .graph1 .golf_percentage {
    opacity: 1;
}


#section3 .graph1 .carcamping_text {
    position: absolute;
    bottom: 235px;
    left: 787px;
    opacity: 0;
    transition: all 0.2s ease 1.4s;
}


#section3.on .graph1 .carcamping_text {
    opacity: 1;
}


#section3 .graph1 .carcamping_bar {
    position: absolute;
    width: 47px;
    height: 0;
    background: #00d16d;
    left: 787px;
    bottom: 301px;
    transition: all 0.2s ease-in-out 1.4s;
}


#section3.on .graph1 .carcamping_bar {
    height: 66px;
}


#section3 .graph1 .carcamping_percentage {
    position: absolute;
    top: 921px;
    left: 759px;
    opacity: 0;
    transition: all 0.2s ease 1.4s;
}


#section3.on .graph1 .carcamping_percentage {
    opacity: 1;
}


#section3 .graph2 {
    width: 753px;
    height: 782px;
    margin-top: 442px;
    margin-right: 161px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#section3 .graph2 .graph2_title {
    position: absolute;
    top: 442px;
    right: 486px;
    opacity: 0;
    transition: all 0.4s ease 1.4s;
}


#section3.on .graph2 .graph2_title {
    opacity: 1;
}


#section3 .graph2 .number1 {
    position: absolute;
    top: 510px;
    right: 840px;
    opacity: 0;
    transition: all 0.5s ease 1.6s;
    z-index: 10;
}


#section3.on .graph2 .number1 {
    opacity: 1;
}


#section3 .graph2 .text1 {
    position: absolute;
    right: 424px;
    top: 538px;
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.6s;
    transform: translateX(-50px);
}


#section3.on .graph2 .text1 {
    opacity: 1;
    transform: translateX(0);
}


#section3 .graph2 .number2 {
    position: absolute;
    top: 703px;
    right: 545px;
    opacity: 0;
    transition: all 0.5s ease 1.8s;
    z-index: 10;
}


#section3.on .graph2 .number2 {
    opacity: 1;
}


#section3 .graph2 .text2 {
    position: absolute;
    right: 161px;
    top: 732px;
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.8s;
    transform: translateX(50px);
}


#section3.on .graph2 .text2 {
    opacity: 1;
    transform: translateX(0);
}


#section3 .graph2 .number3 {
    position: absolute;
    top: 883px;
    right: 840px;
    opacity: 0;
    transition: all 0.5s ease 2s;
    z-index: 10;
}


#section3.on .graph2 .number3 {
    opacity: 1;
}


#section3 .graph2 .text3 {
    position: absolute;
    right: 424px;
    top: 908px;
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) 2s;
    transform: translateX(-50px);
}


#section3.on .graph2 .text3 {
    opacity: 1;
    transform: translateX(0);
}


#section3 .graph2 .number4 {
    position: absolute;
    top: 1066px;
    right: 545px;
    opacity: 0;
    transition: all 0.5s ease 2.2s;
    z-index: 10;
}


#section3.on .graph2 .number4 {
    opacity: 1;
}


#section3 .graph2 .text4 {
    position: absolute;
    right: 161px;
    top: 1096px;
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) 2.2s;
    transform: translateX(50px);
}


#section3.on .graph2 .text4 {
    opacity: 1;
    transform: translateX(0);
}



#section4 {
    width: 100vw;
    height: 1443px;
    background: url("../img/section4/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section4 .problem {
    position: absolute;
    width: 780px;
    height: 590px;
    top: 237px;
    left: 141px;
}


#section4 .problem .problem1 {
    position: absolute;
    top: 0;
    left: 39px;
    opacity: 0;
    transition: all 0.2s ease-in;
}


#section4.on .problem .problem1 {
    opacity: 1;
}


#section4 .problem .problem2 {
    position: absolute;
    top: 123px;
    left: 0;
    opacity: 0;
    transition: all 0.2s ease-in 0.2s;
    z-index: 10;
}


#section4.on .problem .problem2 {
    opacity: 1;
}


#section4 .problem .problem3 {
    position: absolute;
    top: 240px;
    right: 0;
    opacity: 0;
    transition: all 0.2s ease-in 0.4s;
    z-index: 11;
}


#section4.on .problem .problem3 {
    opacity: 1;
}


#section4 .problem .problem4 {
    position: absolute;
    bottom: 0;
    left: 20px;
    opacity: 0;
    transition: all 0.2s ease-in 0.6s;
}


#section4.on .problem .problem4 {
    opacity: 1;
}


#section4 .target {
    width: 486px;
    height: 466px;
    margin-top: 278px;
    margin-right: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#section4 .target .target_line1 {
    width: 0;
    height: 2px;
    position: absolute;
    background: white;
    left: 1472px;
    top: 375px;
    transition: all 0.2s ease-in-out 1s;
}


#section4.on .target .target_line1 {
    width: 103px;
}


#section4 .target .target1 {
    position: absolute;
    left: 1134px;
    top: 278px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.2s ease-in-out 0.8s;
}


#section4.on .target .target1 {
    transform: translateX(0);
    opacity: 1;
}


#section4 .target .target_line2 {
    width: 0;
    height: 2px;
    position: absolute;
    background: white;
    left: 1438px;
    top: 559px;
    transition: all 0.2s ease-in-out 1.2s;
}


#section4.on .target .target_line2 {
    width: 182px;
}


#section4 .target .target2 {
    position: absolute;
    left: 1134px;
    top: 462px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.2s ease-in-out 1s;
}


#section4.on .target .target2 {
    transform: translateX(0);
    opacity: 1;
}


#section4 .target .target_line3 {
    width: 0;
    height: 2px;
    position: absolute;
    background: white;
    left: 1430px;
    top: 743px;
    transition: all 0.2s ease-in-out 1.4s;
}


#section4.on .target .target_line3 {
    width: 182px;
}


#section4 .target .target3 {
    position: absolute;
    left: 1134px;
    top: 646px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.2s ease-in-out 1.2s;
}


#section4.on .target .target3 {
    transform: translateX(0);
    opacity: 1;
}


#section4 .arrow {
    position: absolute;
    bottom: 514px;
    left: 937px;
    opacity: 0;
    transform: translateY(50px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(40px);
}


#section4.on .arrow {
    animation: slide-in-blurred-bottom 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both 2s;
}


@keyframes slide-in-blurred-bottom {
    0% {
        transform: translateY(50px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 100%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}


#section4 .goal {
    position: absolute;
    bottom: 144px;
    left: 159px;
    opacity: 0;
    transform: translateY(50px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(40px);
}


#section4.on .goal {
    animation: slide-in-blurred-bottom 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both 2s;
}


@keyframes slide-in-blurred-bottom {
    0% {
        transform: translateY(50px) scaleY(2) scaleX(0.2);
        transform-origin: 50% 100%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}



#section5 {
    width: 100vw;
    height: 826px;
    background: #ffdf2f;
    position: relative;
}


#section5 .video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}



#section6 {
    width: 100vw;
    height: 1121px;
    background: url("../img/section6/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section6 .main_text {
    position: absolute;
    top: 226px;
    left: 162px;
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.7s ease-in-out;
}


#section6.on .main_text {
    transform: translateX(0);
    opacity: 1;
}


#section6 .concept_keyword {
    width: 1920px;
    height: 413px;
    margin-top: 455px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#section6 .concept_keyword .line1 {
    position: absolute;
    width: 0;
    height: 2px;
    background: #00d16d;
    left: 0;
    top: 661px;
    transition: all 0.4s ease-in 0.2s;
}


#section6.on .concept_keyword .line1 {
    width: 375px;
}


#section6 .concept_keyword .keyword1 {
    position: absolute;
    top: 455px;
    left: 375px;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.4s;
}


#section6.on .concept_keyword .keyword1 {
    opacity: 1;
    transform: translateX(0);
}


#section6 .concept_keyword .keyword2 {
    position: absolute;
    top: 455px;
    left: 753px;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.6s;
}


#section6.on .concept_keyword .keyword2 {
    opacity: 1;
    transform: translateX(0);
}


#section6 .concept_keyword .keyword3 {
    position: absolute;
    top: 455px;
    left: 1131px;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.8s;
}


#section6.on .concept_keyword .keyword3 {
    opacity: 1;
    transform: translateX(0);
}


#section6 .concept_keyword .line2 {
    position: absolute;
    width: 0;
    height: 2px;
    background: #00d16d;
    left: 1544px;
    top: 661px;
    transition: all 0.4s ease-in 1s;
}


#section6.on .concept_keyword .line2 {
    width: 375px;
}


#section6 .text {
    position: absolute;
    left: 50%;
    top: 925px;
    transform: translate(-50%,0);
}


#section6 .text .text1 {
    position: absolute;
    left: -540px;
    top: 0;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.4s;
}


#section6.on .text .text1 {
    opacity: 1;
    transform: translateX(0);
}


#section6 .text .text2 {
    position: absolute;
    left: -140px;
    top: 0;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.6s;
}


#section6.on .text .text2 {
    opacity: 1;
    transform: translateX(0);
}


#section6 .text .text3 {
    position: absolute;
    left: 245px;
    top: 0;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.8s;
}


#section6.on .text .text3 {
    opacity: 1;
    transform: translateX(0);
}



#section7 {
    width: 100vw;
    height: 1093px;
    background: url("../img/section7/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section7 .character1 {
    position: absolute;
    top: 376px;
    left: 148px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.7s ease-in 0.4s;
}


#section7.on .character1 {
    opacity: 1;
    transform: translateX(0);
}


#section7 .character2 {
    position: absolute;
    top: 385px;
    right: 123px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.7s ease-in 0.8s;
}


#section7.on .character2 {
    opacity: 1;
    transform: translateX(0);
}



#section8 {
    width: 100vw;
    height: 1148px;
    background: url("../img/section8/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section8 .graph {
    position: absolute;
    top: 333px;
    left: 162px;
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.7s ease-in-out 0.2s;
}


#section8.on .graph {
    opacity: 1;
    transform: translateX(0);
}


#section8 .emoticon {
    position: absolute;
    width: 1250px;
    height: 203px;
    left: 425px;
    bottom: 414px;
}


#section8 .emoticon .emoticon1 {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
}


#section8.on .emoticon .emoticon1 {
    animation: bounce-in-fwd .85s both 0.8s;
    opacity: 1;
}


#section8 .emoticon .emoticon2 {
    position: absolute;
    left: 310px;
    bottom: 75px;
    opacity: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
}


#section8.on .emoticon .emoticon2 {
    animation: bounce-in-fwd .85s both 1s;
    opacity: 1;
}


#section8 .emoticon .emoticon3 {
    position: absolute;
    left: 622px;
    bottom: 0;
    opacity: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
}


#section8.on .emoticon .emoticon3 {
    animation: bounce-in-fwd .85s both 1.2s;
    opacity: 1;
}


#section8 .emoticon .emoticon4 {
    position: absolute;
    right: 288px;
    top: 0;
    opacity: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
}


#section8.on .emoticon .emoticon4 {
    animation: bounce-in-fwd .85s both 1.4s;
    opacity: 1;
}


#section8 .emoticon .emoticon5 {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
}


#section8.on .emoticon .emoticon5 {
    animation: bounce-in-fwd .85s both 1.6s;
    opacity: 1;
}



@keyframes bounce-in-fwd {
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(0.7);
        animation-timing-function: ease-in;
    }
    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    81% {
        transform: scale(0.84);
        animation-timing-function: ease-in;
    }
    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}



#section9 {
    width: 100vw;
    height: 1722px;
    background: url("../img/section9/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section9 .icon {
    position: absolute;
    left: 567px;
    top: 550px;
    opacity: 0;
}


#section9.on .icon {
    animation: spring 1.3s cubic-bezier(0.230, 1.000, 0.320, 1.000) both 0.1s;
}


@keyframes spring {
    0% {
        transform: scale(1) translateY(0);
        opacity: 0;
        filter: blur(10px);
        /*transform-origin: 10% 30%;*/
    }
    10% {
        transform: scale(1,0.5);
        opacity: 1;
    }
    30% {
        transform: scale(0.5,1) translateY(-10px);
        opacity: 1;
    }
    50% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}



#section10 {
    width: 100vw;
    height: 1310px;
    background: url("../img/section10/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section10 .text {
    position: absolute;
    left: 360px;
    top: 270px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.7s ease-in;
}


#section10.on .text {
    opacity: 1;
    transform: translateX(0);
}


#section10 .project_goal {
    position: absolute;
    left: 50%;
    top: 577px;
    width: 1634px;
    height: 566px;
    transform: translate(-50%,0);
}


#section10 .project_goal .goal1 {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s ease-in 0.4s;
}


#section10.on .project_goal .goal1 {
    opacity: 1;
    transform: translateY(0);
}


#section10 .project_goal .goal2 {
    position: absolute;
    left: 409px;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s ease-in 0.7s;
}


#section10.on .project_goal .goal2 {
    opacity: 1;
    transform: translateY(0);
}


#section10 .project_goal .goal3 {
    position: absolute;
    left: 818px;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s ease-in 0.9s;
}


#section10.on .project_goal .goal3 {
    opacity: 1;
    transform: translateY(0);
}


#section10 .project_goal .goal4 {
    position: absolute;
    left: 1226px;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s ease-in 1.1s;
}


#section10.on .project_goal .goal4 {
    opacity: 1;
    transform: translateY(0);
}



#section11 {
    width: 100vw;
    height: 800px;
    background: url("../img/section11/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section11 .logo {
    position: absolute;
    left: 343px;
    bottom: 90px;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 0.7s ease-in-out 0.2s;
}


#section11.on .logo {
    opacity: 1;
    transform: translateX(0);
}



#section12 {
    width: 100vw;
    height: 1169px;
    background: url("../img/section12/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section12 .font {
    position: absolute;
    left: 161px;
    top: 515px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.5s ease-in 0.2s;
}


#section12.on .font {
    opacity: 1;
    transform: translateX(0);
}


#section12 .color {
    position: absolute;
    right: 141px;
    top: 405px;
    width: 770px;
    height: 624px;
}


#section12 .color .color1 {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
    z-index: 10;
}


#section12.on .color .color1 {
    opacity: 1;
    animation: bounce-in-fwd12 .85s both 0.4s;
}


#section12 .color .color2 {
    position: absolute;
    left: 170px;
    top: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section12.on .color .color2 {
    opacity: 1;
    animation: bounce-in-fwd12 .85s both 0.6s;
}


#section12 .color .color3 {
    position: absolute;
    right: 0;
    top: 287px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
    z-index: 10;
}


#section12.on .color .color3 {
    opacity: 1;
    animation: bounce-in-fwd12 .85s both 0.8s;
}


#section12 .color .color4 {
    position: absolute;
    left: 120px;
    top: 475px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section12.on .color .color4 {
    opacity: 1;
    animation: bounce-in-fwd12 .85s both 1s;
}


@keyframes bounce-in-fwd12 {
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(0.7);
        animation-timing-function: ease-in;
    }
    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    81% {
        transform: scale(0.84);
        animation-timing-function: ease-in;
    }
    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}



#section13 {
    width: 100vw;
    height: 1504px;
    background: url("../img/section13/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section13 .illust {
    position: absolute;
    top: 307px;
    left: 160px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.7s ease-in;
}


#section13.on .illust {
    opacity: 1;
    transform: translateY(0);
}


#section14 {
    width: 100vw;
    height: 673px;
    background: url("../img/section14/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section14 .video {
    position: absolute;
    top: 328px;
    left: 463px;
}


#section15 {
    width: 100vw;
    height: 1569px;
    background: url("../img/section15/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section15 .chart {
    position: absolute;
    bottom: 145px;
    left: 161px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.7s ease-in-out;
}


#section15.on .chart {
    opacity: 1;
    transform: translateY(0);
}


#section16 {
    width: 100vw;
    height: 1790px;
    background: url("../img/section16/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section16 .wire_frame {
    position: absolute;
    width: 1920px;
    height: 1260px;
    top: 380px;
    left: 0;
}



#section16 .wire_frame .wire1 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.4s ease-in-out 0.1s;
}


#section16.on .wire_frame .wire1 {
    opacity: 1;
    transform: translateX(0);
}


#section16 .wire_frame .wire2 {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: translateX(80px);
    transition: all 0.4s ease-in-out 0.3s;
}


#section16.on .wire_frame .wire2 {
    opacity: 1;
    transform: translateX(0);
}


#section17 {
    width: 100vw;
    height: 1413px;
    background: url("../img/section17/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section17 .line {
    width: 0;
    height: 27px;
    top: 290px;
    left: 940px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.8s ease-in-out 0.6s;
}


#section17.on .line {
    width: 650px;
}


#section17 .title {
    width: 1242px;
    height: 178px;
    margin-top: 260px;
    margin-left: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section17 .title .main_title {
    margin-bottom: 75px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section17.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section17 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section17.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section17 .character1 {
    position: absolute;
    left: 317px;
    bottom: 194px;
    opacity: 0;
    transform: translateX(-150px);
    transition: all 0.5s ease-in 1s;
}


#section17.on .character1 {
    transform: translateX(0);
    opacity: 1;
}


#section17 .character2 {
    position: absolute;
    right: 280px;
    bottom: 142px;
    opacity: 0;
    transform: translateX(150px);
    transition: all 0.5s ease-in 1.2s;
}


#section17.on .character2 {
    transform: translateX(0);
    opacity: 1;
}


#section17 .mockup {
    position: absolute;
    width: 502px;
    height: 809px;
    left: 667px;
    top: 603px;
}


#section17 .mockup .iphone {
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 10;
}


#section17 .mockup .video {
    position: absolute;
    top: 66px;
    left: 178px;
}



#section18 {
    width: 100vw;
    height: 1510px;
    background: url("../img/section18/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section18 .line {
    width: 0;
    height: 27px;
    top: 298px;
    left: 302px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.8s ease-in-out 0.6s;
}


#section18.on .line {
    width: 637px;
}


#section18 .title {
    width: 780px;
    height: 173px;
    margin-top: 266px;
    margin-left: 154px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section18 .title .main_title {
    margin-bottom: 70px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section18.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section18 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section18.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section18 .mockup {
    position: absolute;
    width: 617px;
    height: 1006px;
    right: 1303px;
    top: 503px;
}


#section18 .mockup .iphone {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section18 .mockup .video {
    position: absolute;
    top: 85px;
    right: 57px;
}


#section19 {
    width: 100vw;
    height: 959px;
    background: url("../img/section19/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section19 .line {
    width: 0;
    height: 27px;
    bottom: 376px;
    left: 428px;
    background: white;
    opacity: 50%;
    position: absolute;
    transition: all .35s ease-in-out 0.6s;
}


#section19.on .line {
    width: 145px;
}


#section19 .title {
    width: 728px;
    height: 172px;
    margin-top: 527px;
    margin-left: 154px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section19 .title .main_title {
    margin-left: -135px;
    margin-bottom: 70px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section19.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section19 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section19.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section19 .mockup {
    position: absolute;
    width: 497px;
    height: 802px;
    right: 494px;
    top: 0;
}


#section19 .mockup .iphone {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section19 .mockup .video {
    position: absolute;
    top: 78px;
    right: 53px;
}



#section20 {
    width: 100vw;
    height: 2804px;
    background: url("../img/section20/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section20 .line {
    width: 0;
    height: 27px;
    top: 313px;
    left: 945px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.5s ease-in-out 0.6s;
}


#section20.on .line {
    width: 315px;
}


#section20 .title {
    width: 813px;
    height: 215px;
    margin-top: 280px;
    margin-left: 945px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section20 .title .main_title {
    margin-left: -223px;
    margin-bottom: 60px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section20.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section20 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section20.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section20 .mockup1 {
    position: absolute;
    width: 638px;
    height: 1029px;
    left: 36px;
    top: 244px;
}


#section20 .mockup1 .iphone1 {
    position: absolute;
    right: 40px;
    top: 65px;
    z-index: 10;
}


#section20 .mockup1 .video1 {
    position: absolute;
    top: 85px;
    right: 63px;
}


#section20 .mockup2 {
    position: absolute;
    width: 638px;
    height: 1029px;
    left: 588px;
    top: 675px;
}


#section20 .mockup2 .iphone2 {
    position: absolute;
    right: 40px;
    top: 65px;
    z-index: 10;
}


#section20 .mockup2 .video2 {
    position: absolute;
    top: 85px;
    right: 63px;
}


#section21 {
    width: 100vw;
    height: 2516px;
    background: url("../img/section21/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section21 .cloud1 {
    position: absolute;
    left: 90px;
    top: 305px;
    opacity: 0;
    transition: all 0.4s ease-in;
}


#section21.on .cloud1 {
    opacity: 1;
}


#section21 .cloud2 {
    position: absolute;
    right: 85px;
    top: 410px;
    opacity: 0;
    transition: all 0.4s ease-in 0.2s;
}


#section21.on .cloud2 {
    opacity: 1;
}


#section21 .character {
    position: absolute;
    right: 245px;
    top: 542px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.4s ease-in-out 0.6s;
}


#section21.on .character {
    opacity: 1;
    transform: translateY(0);
}


#section21 .line {
    width: 0;
    height: 27px;
    top: 229px;
    left: 616px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.8s ease-in-out 0.6s;
}


#section21.on .line {
    width: 660px;
}


#section21 .title {
    width: 1166px;
    height: 210px;
    margin-top: 200px;
    margin-left: 377px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section21 .title .main_title {
    margin-bottom: 70px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section21.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section21 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section21.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section21 .mockup {
    position: absolute;
    width: 485px;
    height: 878px;
    left: 655px;
    top: 582px;
}


#section21 .mockup .iphone {
    position: absolute;
    left: 62px;
    top: 0;
    z-index: 10;
}


#section21 .mockup .video {
    position: absolute;
    top: 17px;
    right: 10px;
}


#section21 .tab_bar {
    position: absolute;
    bottom: 1056px;
    left: 135px;
    z-index: 20;
}



#section22 {
    width: 100vw;
    height: 1402px;
    background: url("../img/section22/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section22 .chat {
    position: absolute;
    width: 888px;
    height: 726px;
    top: 510px;
    right: 160px;
}


#section22 .chat .chat1 {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease-in 1s;
}


#section22.on .chat .chat1 {
    opacity: 1;
    transform: translateX(0);
    left: 367px;
    top: 0;
}


#section22 .chat .chat2 {
    position: absolute;
    left: 0;
    top: 167px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.2s;
}


#section22.on .chat .chat2 {
    opacity: 1;
    transform: translateX(0);
}


#section22 .chat .chat3 {
    position: absolute;
    left: 0;
    top: 288px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.4s;
}


#section22.on .chat .chat3 {
    opacity: 1;
    transform: translateX(0);
}


#section22 .line {
    width: 0;
    height: 27px;
    top: 287px;
    left: 870px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.4s ease-in-out 0.6s;
}


#section22.on .line {
    width: 223px;
}


#section22 .title {
    width: 770px;
    height: 210px;
    margin-top: 257px;
    margin-left: 870px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section22 .title .main_title {
    margin-bottom: 70px;
    margin-left: -90px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section22.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section22 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section22.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section22 .mockup {
    position: absolute;
    width: 638px;
    height: 1029px;
    left: 75px;
    top: 205px;
}


#section22 .mockup .iphone {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section22 .mockup .video {
    position: absolute;
    top: 85px;
    right: 57px;
}



#section23 {
    width: 100vw;
    height: 1762px;
    background: url("../img/section23/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section23 .line {
    width: 0;
    height: 27px;
    top: 290px;
    left: 157px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.4s ease-in-out 0.6s;
}


#section23.on .line {
    width: 277px;
}


#section23 .title {
    width: 768px;
    height: 209px;
    margin-top: 260px;
    margin-left: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section23 .title .main_title {
    margin-bottom: 70px;
    margin-left: -165px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section23.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section23 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section23.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section23 .pop {
    position: absolute;
    left: 0;
    bottom: 140px;
    width: 722px;
    height: 1060px;
}


#section23 .pop .pop1 {
    position: absolute;
    left: 162px;
    top: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section23.on .pop .pop1 {
    opacity: 1;
    animation: bounce-in-fwd23 .85s both;
}


#section23 .pop .pop2 {
    position: absolute;
    left: 0;
    top: 413px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section23.on .pop .pop2 {
    opacity: 1;
    animation: bounce-in-fwd23 .85s both 0.2s;
}


#section23 .pop .pop3 {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section23.on .pop .pop3 {
    opacity: 1;
    animation: bounce-in-fwd23 .85s both 0.4s;
}


@keyframes bounce-in-fwd23 {
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(0.7);
        animation-timing-function: ease-in;
    }
    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    81% {
        transform: scale(0.84);
        animation-timing-function: ease-in;
    }
    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}


#section23 .mockup1 {
    position: absolute;
    width: 640px;
    height: 1032px;
    right: 585px;
    top: 550px;
}


#section23 .mockup1 .iphone1 {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 20;
}


#section23 .mockup1 .video1 {
    position: absolute;
    top: 78px;
    right: 57px;
}


#section23 .mockup2 {
    position: absolute;
    width: 638px;
    height: 1029px;
    right: 92px;
    top: 200px;
}


#section23 .mockup2 .iphone2 {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section23 .mockup2 .video2 {
    position: absolute;
    top: 78px;
    right: 57px;
}




#section24 {
    width: 100vw;
    height: 1631px;
    background: url("../img/section24/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section24 .line {
    width: 0;
    height: 27px;
    top: 259px;
    left: 909px;
    background: white;
    opacity: 50%;
    position: absolute;
    transition: all 0.6s ease-in-out 0.6s;
}


#section24.on .line {
    width: 425px;
}


#section24 .title {
    width: 891px;
    height: 207px;
    margin-top: 228px;
    margin-left: 515px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section24 .title .main_title {
    margin-bottom: 70px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section24.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section24 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section24.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section24 .mockup1 {
    position: absolute;
    width: 520px;
    height: 838px;
    left: 38px;
    bottom: 197px;
}


#section24 .mockup1 .iphone1 {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section24 .mockup1 .video1 {
    position: absolute;
    top: 76px;
    right: 52px;
}


#section24 .mockup2 {
    position: absolute;
    width: 520px;
    height: 838px;
    right: 510px;
    bottom: 234px;
}


#section24 .mockup2 .iphone2 {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section24 .mockup2 .video2 {
    position: absolute;
    top: 76px;
    right: 52px;
}



#section25 {
    width: 100vw;
    height: 1324px;
    background: url("../img/section25/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section25 .title {
    width: 798px;
    height: 276px;
    margin-top: 393px;
    margin-left: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section25 .title .main_title {
    margin-bottom: 70px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section25.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section25 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section25.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section25 .mockup {
    position: absolute;
    width: 638px;
    height: 1029px;
    left: 154px;
    bottom: 134px;
}


#section25 .mockup .iphone {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section25 .mockup .video {
    position: absolute;
    top: 85px;
    right: 57px;
}



#section26 {
    width: 100vw;
    height: 1372px;
    background: url("../img/section26/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section26 .mockup1 {
    position: absolute;
    width: 639px;
    height: 1030px;
    left: 0;
    top: 106px;
}


#section26 .mockup1 .iphone1 {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 20;
}


#section26 .mockup1 .video1 {
    position: absolute;
    top: 85px;
    right: 57px;
}


#section26 .title1 {
    position: absolute;
    bottom: 140px;
    left: 224px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s ease-in-out;
}


#section26.on .title1 {
    opacity: 1;
    transform: translateY(0);
}


#section26 .mockup2 {
    position: absolute;
    width: 639px;
    height: 1030px;
    left: 590px;
    top: 106px;
}


#section26 .mockup2 .iphone2 {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section26 .mockup2 .video2 {
    position: absolute;
    top: 85px;
    right: 57px;
}


#section26 .title2 {
    position: absolute;
    bottom: 140px;
    left: 844px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s ease-in-out 0.2s;
}


#section26.on .title2 {
    opacity: 1;
    transform: translateY(0);
}

#section26 .mockup3 {
    position: absolute;
    width: 642px;
    height: 1036px;
    right: 112px;
    top: 106px;
}


#section26 .mockup3 .iphone3 {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section26 .mockup3 .video3 {
    position: absolute;
    top: 85px;
    right: 57px;
}


#section26 .title3 {
    position: absolute;
    bottom: 140px;
    right: 235px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s ease-in-out 0.4s;
}


#section26.on .title3 {
    opacity: 1;
    transform: translateY(0);
}


#section27 {
    width: 100vw;
    height: 1415px;
    background: url("../img/section27/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section27 .line {
    width: 0;
    height: 27px;
    top: 285px;
    left: 427px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.4s ease-in-out 0.6s;
}


#section27.on .line {
    width: 338px;
}


#section27 .title {
    width: 624px;
    height: 174px;
    margin-top: 254px;
    margin-left: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section27 .title .main_title {
    margin-bottom: 70px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section27.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section27 .title .text {
    margin-left: 35px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section27.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section27 .img1 {
    position: absolute;
    left: 452px;
    bottom: 270px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section27.on .img1 {
    opacity: 1;
    animation: bounce-in-fwd27 .85s both 0.2s;
}


#section27 .img2 {
    position: absolute;
    left: 135px;
    top: 547px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section27.on .img2 {
    opacity: 1;
    animation: bounce-in-fwd27 .85s both 0.4s;
}


#section27 .img3 {
    position: absolute;
    right: 1830px;
    bottom: 123px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section27.on .img3 {
    opacity: 1;
    animation: bounce-in-fwd27 .85s both 0.6s;
}


#section27 .img4 {
    position: absolute;
    right: 60px;
    top: 75px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section27.on .img4 {
    opacity: 1;
    animation: bounce-in-fwd27 .85s both 0.8s;
}


#section27 .img5 {
    position: absolute;
    left: 1725px;
    top: 1192px;
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
}


#section27.on .img5 {
    opacity: 1;
    animation: bounce-in-fwd27 .85s both 1s;
}



@keyframes bounce-in-fwd27 {
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(0.7);
        animation-timing-function: ease-in;
    }
    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    81% {
        transform: scale(0.84);
        animation-timing-function: ease-in;
    }
    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}


#section27 .mockup {
    position: absolute;
    width: 638px;
    height: 1029px;
    right: 310px;
    bottom: 90px;
}


#section27 .mockup .iphone {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section27 .mockup .video {
    position: absolute;
    top: 80px;
    right: 60px;
}


#section28 {
    width: 100vw;
    height: 1561px;
    background: url("../img/section28/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section28 .line {
    width: 0;
    height: 27px;
    top: 320px;
    left: 756px;
    background: #ffdf2f;
    position: absolute;
    transition: all 0.4s ease-in-out 0.6s;
}


#section28.on .line {
    width: 194px;
}


#section28 .title {
    width: 757px;
    height: 174px;
    margin-top: 289px;
    margin-left: 756px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


#section28 .title .main_title {
    margin-bottom: 70px;
    margin-left: -250px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}


#section28.on .title .main_title {
    transform: translateX(0);
    opacity: 1;
}


#section28 .title .text {
    transform: translateX(-80px);
    opacity: 0;
    transition: all 0.7s ease-in-out .25s;
}


#section28.on .title .text {
    transform: translateX(0);
    opacity: 1;
}


#section28 .mockup {
    position: absolute;
    width: 617px;
    height: 1006px;
    left: 0;
    top: 86px;
}


#section28 .mockup .iphone {
    position: absolute;
    right: 34px;
    top: 63px;
    z-index: 10;
}


#section28 .mockup .video {
    position: absolute;
    top: 80px;
    right: 57px;
}



#section29 {
    width: 100vw;
    height: 1478px;
    background: url("../img/section29/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section30 {
    width: 100vw;
    height: 596px;
    background: url("../img/section30/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}


#section30 .text {
    position: absolute;
    bottom: 110px;
    left: 546px;
    transform: translateY(-200px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0;
    filter: blur(40px);
    opacity: 0;
}


@keyframes slide-in-blurred-top30 {
    0% {
        transform: translateY(-200px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 0;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}


#section30.on .text {
    animation: slide-in-blurred-top30 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}