.startPoint{
    /*width: 50px;*/
    /*height: 50px;*/
    position: fixed;
    right: 100px;
    bottom: 100px;
    z-index: 899998989;

    border: none;
    outline: none;
    cursor: pointer;
    background: transparent;
    display: none;


}


#container{
    background: #f6f6f6;
}


#section01 {
    background: white;
    height: 1230px;
}

#section01 .bg{
    transform:scale(1.2);
    opacity: 0;
    transition: all 1s;
}

#section01.on .bg{
    opacity: 1;
    transform:scale(1);
}

#section01 .top{
    position: absolute;
    top: 0;
    left: 0;

    opacity: 1;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    transition-delay: 0s;

}
/*
#section01 .main.on .top{
    transform: translateY(0);
    opacity: 1;
}*/



#section01 .bg .deco{
    position: absolute;
    top: 0;
    left: 0;
}

#section01 .bg .big_logo{
    position: absolute;
    display: flex;
    top: 388px;
    left: 0;

}
#section01 .character_container{
    position: absolute;
    top: 134px;
    left: -1px;

}



#section01 .phone_container{
    position: absolute;
    right: 152px;
    top: 225px;
    transform: translateY(50px);
    transition: all 1s;

}

#section01 .phone_container .green_character{
    position: absolute;
    top: 399px;
    left: -35px;
}

#section01 .phone_container .phone{
    position: relative;
    z-index: 9999;
    top: 30px;
    left: 0;
}


#section01.on .phone_container{
    transform: translateY(0);

}



#section01 .green_character .green_hand{
    position: absolute;
    right: -8px;
    bottom: 160px;
    transform: rotate(
            6deg);
    animation: main 2s infinite ease-in-out alternate;
    z-index: 9999999;

}



@keyframes main {
    from {transform: rotate(0deg);}
     50%{ transform: rotate(4deg);}
    to{ transform: rotate(0deg); }

}



#section01 .text_container{
    position: absolute;
    top: 290px;
    left: 126px;

}


#section01 .text_container > div{
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;

}

#section01 .text_container > div:nth-child(1){transition-delay: .5s}
#section01 .text_container > div:nth-child(2){transition-delay:  .5s}
#section01 .text_container > div:nth-child(3){transition-delay: 1s}
#section01 .text_container > div:nth-child(4){transition-delay: 1s}

#section01 .text_container.on > div{
    transform: translateY(0);
    opacity: 1;
}

#section01 .text_container .logo_01{
    position: relative;
    margin-bottom: 20px;
    left: -20px;


    /*transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;*/
}





#section01 .text_container .logo_02{
    position: relative;
    margin-bottom: 95px;
}

#section01 .text_container .text{
    margin-bottom: 90px;
}

#section01 .text_container .button{
    position: absolute;
    left: 0;
    bottom: 0;
}


#section01 .text_container .button .bg{
    position: relative;
}

#section01 .text_container .button .bg .text{
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-5px);
}


#section01 .text_container .button .bg .arrow{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0,-9px);
    transition: .3s;
}

#section01 .text_container .button:hover .arrow{
    transform: translate(7px,-9px);
}




#section02{
    background: white;
    height: 2170px;

}

#section02 .lean_canvas{
    position: relative;
}




#section02 .lean_canvas .text_container {
    position: absolute;
    top: 45px;
    left: 50%;
    opacity: 1;
    transform: translate(-780px, 0px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02) 0s;
}

/*#section02 .lean_canvas.on .text_container{
    transform: translate(-830px,0);
    opacity: 1;
}*/



#section02 .lean_canvas .sub{
    margin-bottom: 40px;
}



#section02 .lean_canvas .lean_grid{
    position: absolute;
    top: 193px;
    left: 0;
    transform: translateY(50px) scale(.95);
    opacity: 0;
    transition: cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    transition-delay: .5s;
}
#section02 .lean_canvas.on .lean_grid{
    transform: translateY(0) scale(.95);
    opacity: 1;

}

#section02 .lean_grid .gray_button_01{
    position: absolute;
    top: 86px;
    left: 380px;
}



#section02 .gray_button_01 img{
    animation: scroll 2s infinite alternate;
}





#section02 .lean_grid .gray_button_02{
    position: absolute;
    top: 86px;
    left: 710px;
}

#section02 .lean_grid .gray_button_03{
    position: absolute;
    top: 497px;
    left: 1050px;
}
#section02 .lean_grid .gray_button_04{
    position: absolute;
    top: 86px;
    right:485px;
}

#section02 .lean_grid .gray_button_05{
    position: absolute;
    top: 86px;
    right: 140px;
}

#section02 .lean_grid .gray_button_06{
    position: absolute;
    top: 415px;
    right: 140px;
}

#section02 .lean_grid .gray_button_07{
    position: absolute;
    top: 492px;
    right: 485px;
}

#section02 .lean_grid .gray_button_01:hover{
    filter: grayscale(100%);
}
#section02 .lean_grid .gray_button_02:hover{
    filter: grayscale(100%);
}
#section02 .lean_grid .gray_button_03:hover{
    filter: grayscale(100%);
}
#section02 .lean_grid .gray_button_04:hover{
    filter: grayscale(100%);
}
#section02 .lean_grid .gray_button_05:hover{
    filter: grayscale(100%);
}
#section02 .lean_grid .gray_button_06:hover{
    filter: grayscale(100%);
}
#section02 .lean_grid .gray_button_07:hover{
    filter: grayscale(100%);
}


#section02 .lean_grid .cost_button{
    position: absolute;
    bottom: 368px;
    left: 516px;
}
#section02 .lean_grid .cost_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-64px,-14px);
}
#section02 .lean_grid .cost_button:hover{
    filter: grayscale(100%);
}

#section02 .overview .bg{
    position: relative;
    top: 1375px;
    left: 0;
}
#section02 .overview .bg .overview_character{
    position: absolute;
    bottom: 0;
    right: -320px;
    transform: translateX(0);
    transition: all 2.2s;
    transition-delay: .5s;

}
#section02 .overview.on .bg .overview_character{
transform: translateX(-320px);
}

#section02 .overview .text_container{
    position: absolute;
    left: 167px;
    bottom: 330px;
    display: flex;
}


#section02 .overview .text_container .overview_title{
    transform: translateX(50px);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    opacity: 0;
    transition-delay: .2s;
}

/*

#section02 .overview .text_container > div:nth-child(1){transition-delay: .2s}
!*#section02 .overview .text_container > div:nth-child(2){transition-delay: .5s}
#section02 .overview .text_container > div:nth-child(3){transition-delay: .5s}*!
*/

#section02 .overview.on .text_container .overview_title{
    transform: translateX(0);
    opacity: 1;
}



#section02 .overview .text_container .overview_title{
 position: relative;

}

#section02 .overview .text_container .text{
    position: absolute;
    left: 765px;
    top: 85px;
}




#section02 .overview .text_container .text_01{
    margin-bottom: 40px;
}
#section03{
 position: relative;
    height: 1220px;
    background: white;
}

#section03 .background_01{
    text-align: center;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-960px);
}

#section03 .background_01 .sub{
    margin-bottom: 50px;
}
#section03 .background_01 .title{
    margin-bottom: 22px;
}
#section03 .background_01 .text_container{
    margin-bottom: 22px;
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

#section03 .background_01.on .text_container{
    transform: translateY(0);
    opacity: 1;
}

#section03 .background_01 .grid{
    position: relative;
    top: -20px;
    left: 0;
    transform: translateY(50px);
    transition: all 1s;
    opacity: 0;
    transition-delay: .8s;
}

#section03 .background_01.on .grid{
    transform: translateY(0);
    opacity: 1;
}

#section03 .background_01 .grid .button{
    position: absolute;
    top: 112px;
    left: 50%;
    transform: translateX(-76px);
}


#section03 .background_01 .grid .button .left{
    position: relative;
    top: -10px;
    left: -110px;
}

#section03 .background_01 .grid .button .right{
    position: relative;
    top: 82px;
    right: -350px;
}

#section03 .background_01 .grid .button .right .button_02{
    position: absolute;
    top: 0;
    left: 16px;
}


#section03 .background_01 .grid .button .right .button_03{
    position: absolute;
    top: 119px;
    left: 368px;
}

#section03 .background_01 .grid .button .right .button_04{
    position: absolute;
    top: 215px;
    left: 5px;
}



#section03 .background_01 .bottom{
    position: absolute;
    left: -1px;
    bottom: -205px;
}


#section04{
    position: relative;
    height: 1100px;
    background: white;
}

#section04 .background_02 {
    position: absolute;
    text-align: center;
    top: 110px;
    left: 50%;
    transform: translateX(-960px);
}


#section04 .background_02 .text_container{
    position: relative;
    transform: translateY(50%);
    opacity: 0;
    transition: cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
}

#section04 .background_02.on .text_container{
    transform: translateY(0);
    opacity: 1;
}


#section04 .background_02 .sub{
    margin-bottom: 40px;
}
#section04 .background_02 .title{
    margin-bottom: 100px;
}

#section04 .background_02 .grid{
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
}

#section04 .background_02.on .grid{
    transform: translateY(0);
    transition-delay: .5s;
    opacity: 1;
}

#section04 .background_02 .button{
    position: absolute;
    bottom: -3px;
    left: 660px;
    transform: scale(1.03) translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
}
#section04 .background_02.on .button{
    opacity: 1;
    transform: translateY(0) scale(1.03);
    transition-delay: .5s;
}

#section05{
    position: relative;
    height: 2170px;
    background: white;
}

#section05 .background_03{
    position: absolute;
    text-align: center;
    top: 0;
    left: 50%;
    transform: translateX(-768px);
}



#section05 .background_03 .sub{
    margin-bottom: 40px;
}
#section05 .background_03 .title{
    margin-bottom: 30px;
}

/*#section05 .background_03 .problem{
    margin-bottom: 30px;
    position: absolute;
    top: 500px;
    left: 50px;

}*/



#section05 .background_03 .text_container{
    margin-bottom: 30px;
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;

}

#section05 .background_03.on .text_container{
    transform: translateY(0);
    opacity: 1;
}


#section05 .background_03 .problem{
position: absolute;
    left: -150px;
    top: 520px;

}


#section05 .background_03 .problem > div{
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
}

#section05 .background_03 .problem > div:nth-child(1){transition-delay: .8s;}
#section05 .background_03 .problem > div:nth-child(2){transition-delay: .8s;}
#section05 .background_03 .problem > div:nth-child(3){transition-delay: 1.4s;}

#section05 .background_03.on .problem > div{
    transform: translateY(0);
    opacity: 1;
}



#section05 .background_03 .text_01{
    margin-bottom: 30px;
    margin-left: 100px;
}


#section05 .background_03 .arrow{
    margin-bottom: 5px;
    margin-left: 110px;
}


#section05 .competitive_01{
    position: absolute;
    top: 1110px;
    left: 0;
    text-align: center;
}

/*
#section05 .competitive_01 .sub,
#section05 .competitive_01 .title{
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
}

#section05 .competitive_01.on .sub,
#section05 .competitive_01.on .title{
    transform: translateY(0);
    opacity: 1;
}
*/


#section05 .competitive_01 .sub{
    margin-bottom: 33px;
}

#section05 .competitive_01 .title{
    margin-bottom: 60px;
}


#section05 .competitive_01 .grid{
    position: relative;
    transform: translateY(50px);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    opacity: 0;
    /*transition-delay: .6s;*/
}

#section05 .competitive_01.on .grid {
    transform: translateY(0);
    opacity: 1;
}




#section06 {
    height: 2000px;
    background: white;

}

#section06 .positioning_map{
    position: relative;

}
#section06 .positioning_map .text_container{
  position: absolute;
    left: 50%;
    transform: translateX(-240px);
    top: 0;


}
#section06 .positioning_map .text_container .sub{
    position: relative;


}
#section06 .positioning_map .text_container .text{
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-249px);
}

#section06 .positioning_map .grid{
    position: relative;
    text-align: center;
   top: 140px;
    left: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;

}

/*#section06 .grid_circle .blue_circle {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-24px,-24px);*/
/*}*/






#section06 .positioning_map.on .grid{
    transform: translateY(0);
    opacity: 1;

}

#section06 .competitive_02{
    position: absolute;
  /*  position: absolute;
    top: 920px;*/
}

#section06 .circle{
    position: relative;
    top: 50px;
    right: -1219px;
}
#section06 .competitive_02 .illust{
    position: absolute;
    top: 0;
    right: 120px;
    transform: translateX(50px);
    opacity: 0;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 2s;

}

#section06 .competitive_02.on .illust{
  transform: translateX(0);
    opacity: 1;
}




#section06 .text_container{
    position: absolute;
    top: 350px;
   left: 200px;
}

#section06 .text_container .sub{
   position: relative;
}
#section06 .text_container .title{
    position: absolute;
    top: 60px;
    left:0;
}
#section06 .text_container .grid{
    position: absolute;
    top: 200px;
    left: 0;
    z-index: 999;
}

#section06 .competitive_02 .grid_circle{
    position: absolute;
    bottom: 136px;
    left: 680px;
    opacity: 0;
    animation:circle 1.5s .5s infinite ease-in-out alternate;
}
@keyframes circle {

    0% { opacity:1;}

    50% { opacity:0;}

    0% { opacity:1;}
}

#section06 .competitive_02.on .grid{
    opacity: 1;
}

#section06 .grid_circle .big{
    position: relative;
}
#section06 .grid_circle .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-24px,-24px);
    transition-delay: .5s;
}

#section07{
    position: relative;
    height: 2480px;
    background: white;
}


#section07 .competitive_03{
    position: relative;
    margin-bottom: 70px;
}

#section07 .competitive_03 .bg{
    position: absolute;
    top: -8px;
    left: 0;
}

#section07 .competitive_03 .text_container{
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-207px);
}


#section07 .competitive_03 .sub{
position: relative;
}

#section07 .competitive_03 .title_text{
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-207px);
}

#section07 .competitive_03 .grid{
    position: relative;
    height: 1400px;
}

#section07 .competitive_03 .grid .grid_01{
    position: absolute;
    top: 320px;
    left: 50%;
   /* transform: translateX(-960px);*/
    transform: translate(-960px,50px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}

#section07 .competitive_03.on .grid .grid_01{
    transform: translate(-960px,0);
    opacity: 1;
}

#section07 .competitive_03 .grid .grid_02{
    position: absolute;
    bottom: 40px;
    left: 50%;
  /*  transform: translateX(-812px);*/
    transform: translate(-812px,50px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
    transition-delay: .5s;
}

#section07 .competitive_03 .grid.on .grid_02{
    transform: translate(-812px,0);
    opacity: 1;
}

#section07 .competitive_03 .grid .cloud_01{
    position: absolute;
    top: 295px;
    right: 0;
    transform: translateY(5px);
    transition: all 1s;
    animation: cloud 2s 0s infinite ease-in-out alternate;
}

#section07 .competitive_03 .grid .cloud_02{
    position: absolute;
    bottom: 290px;
    left: 0;
    transform: translateY(5px);
    transition: all 1s;
    transition-delay: 1s;
    animation: cloud 5s 0s infinite ease-in-out alternate;
}
@keyframes cloud {
    from {transform: translateY(0);}
    50% {transform: translateY(5px);}
    100% {transform: translateY(0);}

}

#section07 .competitive_03.on .grid .cloud_01,
#section07 .competitive_03.on .grid .cloud_02{
    transform: translateY(0);
}

#section07 .project_goal{
    position: relative;
    left: 155px;
    top: 67px;
}

#section07 .project_goal .sub{
    position: relative;
    top: 0;
    left: 0;
}

#section07 .project_goal .text{
    position: absolute;
    top: 100px;
    left: 0;

}

#section07 .project_goal .illust{
    position: absolute;
    right: 140px;
    top: -132px;
    transform: translateX(70px);
    transition: all 2s;
    opacity: 0;
}

#section07 .project_goal.on .illust{
    transform: translateX(0);
    opacity: 1;
}




#section07 .project_goal .cloud_03{
    position: absolute;
    top: -78px;
    right: 464px;
}

#section08{
    background: white;
    position: relative;
    height: 1313px;
}


#section08{
    background: white;
    position: relative;
    height: 1313px;
}


#section08 .stake_holder{
    position: relative;
}

/*#section08 .stack_holder .bg{
    position: relative;
}*/
#section08 .stake_holder .text_container{
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-180px);
}

#section08 .stake_holder .text_container .sub{
    position: relative;
}

#section08 .stake_holder .text_container .text{
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-478px);
}

#section08 .stake_holder .grid{
    position: relative;
    left: 50%;
    top: 300px;
    transform: translate(-578px,50px);
    transition: all  1s;
    opacity: 0;
}

#section08 .stake_holder.on .grid{
    transform: translate(-578px,0);
    opacity: 1;

}
#section08 .stake_holder .bg{
    position: absolute;
    top: 0;
    left: 0;
}

#section08 .stake_holder .bg{
    position: absolute;
    top: 0;
    left: 0;


}


#section09{
    position: relative;
    height: 1084px;
    background: #f0f7fe;
}

#section09 .insight_01{
    position: relative;
    background: white;
}

#section09 .text_container{
    position: absolute;
    top: 117px;
    left: 50%;
    transform: translateX(-182.5px);
}

#section09 .insight_01 .text_container .sub{
    position: relative;
}

#section09 .insight_01 .text_container .text{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-372px);
}

#section09 .insight_01 .character{
    position: relative;
    top: 550px;
    left: 50%;
    transform: translateX(-839.5px);
    z-index: 999;
}

#section09 .insight_01 .interview{
    position: relative;
    top: 180px;
    left: 210px;
    display: flex;
}

#section09 .insight_01 .interview_01{
    transform: scale(0);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    transition-delay: .3s;
}
#section09 .insight_01.on .interview_01{
    transform: scale(1);
}

#section09 .insight_01 .interview_02{
    position: absolute;
    top: 120px;
    left: 430px;
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    transform: scale(0);
    transition-delay: .5s;
}
#section09 .insight_01.on .interview_02{
  transform: scale(1);
}


#section09 .insight_01 .interview_03{
    position: absolute;
    top: -64px;
    left: 680px;
    transform: scale(0);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    transition-delay: .8s;
}
#section09 .insight_01.on .interview_03{
    transform: scale(1);
}


#section09 .insight_01 .interview_04{
    position: absolute;
    top: 70px;
    right: 400px;
    transform: scale(0);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
    transition-delay: 1s;
}

#section09 .insight_01.on .interview_04{
    transform: scale(1);
}



#section09 .insight_01 .bg{
    position: absolute;
    top: 0;
    left: 0;
}

#section09 .insight_01 .button{
    position: absolute;
    top: 50px;
    right: 60px;
}

#section09 .insight_01 .button:hover .arrow{
    transform: translateX(7px);
}
#section09 .insight_01 .button .bg{
    position: relative;
}
#section09 .insight_01 .button .arrow{
    position: absolute;
    top: 16px;
    right: 29px;
    transition: all .3s;
}

#section10{
    height: 4150px;
    background: white;
}

#section10 .bg{
    position: absolute;

}

#section10 .persona_container{
    position: relative;
}


#section10 .text{
    position: relative;
    left: 50%;
    top: 280px;
    transform: translateX(-390px);
}

#section10 .persona{
    position: relative;
    top: -130px;
    left: 0;
    height: 1600px;
}

#section10 .persona .illust{
    position: relative;
    top: 450px;
    left: 400px;

}
#section10 .persona .illust .character{
    transform: translateY(100px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
    opacity: 0;
}

#section10 .persona.on .illust .character{
    transform: translateY(0);
    opacity: 1;
}

#section10 .persona .talk{
    position: absolute;
    top: 60px;
    left: 350px;
    transform: translateY(100px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
    opacity: 0;
    transition-delay: .5s;
}
#section10 .persona.on .talk{
    transform: translateY(0);
    opacity: 1;
}



#section10 .persona .grid{
    position: absolute;
    top: 720px;
    left: 50%;
    transform: translateX(-718px);
}


#section10 .journey_map{
    position: absolute;
    bottom: 40px;
    left: 0;
}

#section10 .journey_map .title{
    position: relative;
  left: 756px;
    top: 0;
}

#section10 .journey_map .grid{
    position: absolute;
    top: 130px;
    left: 0;
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

#section10 .journey_map.on .grid{
    opacity: 1;
    transform: translateY(0);
}


#section10 .solution {
    position: relative;
    top: 1340px;
    left: 50%;
    transform: translateX(-959.5px);
}


#section10 .solution .sub{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-554px);
}

#section10 .solution .grid{
    position: absolute;
    top: 181px;
    LEFT: 50%;
    /*transform: translateX(-716px);*/
    transform: translate(-592px,50px);
    opacity: 0;
    transition: all 1s;
}
#section10 .solution.on .grid{
    transform: translate(-592px,0);
    opacity: 1;
}


#section11{
    height: 1043px;
    background: white;
}


#section11 .interview_after{
    position: relative;
}

#section11 .bg{
    position: absolute;
    top: 0;
    left: 0;
}


#section11 .interview_after .text_container{
    position: relative;
    top: 115px;
    left: 110px;
}

#section11 .interview_after .confetti{
position: absolute;
    top: 0;
    left: 0;
}

#section11 .interview_after .text_container .sub{
    position: relative;
    top: 100px;
    left: 0;
}

#section11 .interview_after .text_container .title{
    position: absolute;
    top: 370px;
    left: 590px;
    transform: translateY(50px);
    transition: all .8s;
    opacity: 0;
    transition-delay: .3s;
}
#section11 .interview_after.on .text_container .title{
    opacity: 1;
    transform: translateY(0);
}

#section11 .interview_after .interview_character{
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translateX(-830px);
    z-index: 99999;
}

#section11 .interview_after .interview_box{
    position: absolute;
    display: flex;
    top: 363px;
    left: 130px;
    width: 1643px;
    flex-direction: row;

}

#section11 .interview_after .interview_box .left > div{
    transform: scale(0);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
}

#section11 .interview_after .left > div:nth-child(1){transition-delay: 1s}
#section11 .interview_after .left > div:nth-child(2){transition-delay: 1.2s}
#section11 .interview_after .left > div:nth-child(3){transition-delay: 1.4s}

#section11 .interview_after.on .interview_box .left > div{
    transform: scale(1);
}

#section11 .interview_after .interview_box .right > div{
    transform: scale(0);
    transition: all cubic-bezier(0.07, 0.55, 0.21, 1.02) 1s;
}

#section11 .interview_after .right > div:nth-child(1){transition-delay: 1.6s}
#section11 .interview_after .right > div:nth-child(2){transition-delay: 1.8s}
#section11 .interview_after .right > div:nth-child(3){transition-delay: 2s}

#section11 .interview_after.on .interview_box .right > div{
    transform: scale(1);
}


#section11 .interview_box .left{
    position: relative;
    left: 0;
    display: flex;
    flex-direction: column;
}
#section11 .interview_box .right{
    position: relative;
    top: 0;
    right: -920px;
}

#section11 .interview_box  .interview_01{
    position: relative;
    left: 320px;
    top: -40px;
}
#section11 .interview_box  .interview_02{
    position: relative;
    left: 110px;
    top: 0;
}
#section11 .interview_box  .interview_03{
     position: relative;
     left: 370px;
     top: -70px;
 }

#section11 .interview_box  .interview_04{
    position: relative;
    top: -40px;
    right: 290px;
 }

#section11 .interview_box  .interview_05{
    position: relative;
    left: 0;
    top: -55px;
    z-index: 99;
 }

#section11 .interview_box  .interview_06{
    position: relative;
    left: -200px;
    top: -100px;
 }





#section12{
    position: relative;
    height: 4060px;
    background: #f7f8f9;
}


#section12 .flow_chart{
    position: relative;
    top: 80px;
    left: 0;
}

#section12 .flow_chart .text{
    position: relative;
    left: 50%;
    transform: translateX(-417px);
}

#section12 .flow_chart .grid{
    position: relative;
    top: 40px;
    left: 0;
    transform:translateY(50px) scale(.97);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
    opacity: 0;
}
#section12 .flow_chart.on .grid{
    transform: translateY(0) scale(.97);
    opacity: 1;

}


#section12 .flow_chart .flow_key{
    position: absolute;
    top: 0;
    right: 80px;
}

#section12 .wireframe{
    position: relative;
    top: 200px;
    left: 0;
}

#play_video_01{
    height: 560px;
}




#section12 .wireframe .text{
    position: relative;
    left: 50%;
    transform: translateX(-196px);
}

#section12 .wireframe .grid{
    position: absolute;
    top: 150px;
    left: -40px;
    transform: translateY(50px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
    opacity: 0;
}
#section12 .wireframe.on .grid{
    transform: translateY(0);
    opacity: 1;
}


#section13{
    height: 427px;
}

#section13 .ux_end .img{
    position: relative;

}

#section13 .ux_end .button{
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translateX(-100px);
}

#section13 .ux_end .button .bg{
    position: relative;
}

#section13 .ux_end .button .arrow{
    position: absolute;
    top: 15px;
    right: 17px;
    transform: translateX(0);
    transition: all .5s;
}

#section13 .ux_end .button:hover .arrow{
    transform: translateX(6px);
}

/*______________________ui시작_______________________________*/



#section14{
    background: white;
    height: 1494px;
    position: relative;
}

#section14 .bg{
    position: relative;
}
#section14 .bg .deco{
    position: absolute;
    top: 138px;
    right: 0;
}
#section14 .top{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

}

#section14 .ui_main .bg .red_illust{
    position: absolute;
    top: 90px;
    left: 0;
    z-index: 2;

    transform: translateX(-340px);
    transition: all 1.8s;
}
#section14 .ui_main.on .bg .red_illust{
    transform: translateX(0);
}


#section14 .text_container{
    position: absolute;
    top: 356px;
    left: 182px;
    z-index: 3;

}

#section14 .ui_main .text_container > div{
    transform: translateY(50px);
    opacity: 0;
    transition: all .8s;
}

#section14 .ui_main .text_container > div:nth-child(1){transition-delay: .4s;}
#section14 .ui_main .text_container > div:nth-child(2){transition-delay: .7s;}
#section14 .ui_main .text_container > div:nth-child(3){transition-delay: 1.2s;}

#section14 .ui_main.on .text_container > div{
    transform: translateY(0);
    opacity: 1;
}





#section14 .text_container .title{
    position: relative;
}
#section14 .text_container .text{
    position: absolute;
    top:244px;
    left: 0;
    margin-bottom: 40px;
}

#section14 .text_container .button{
    position: relative;
    top: 230px;
    left: -3px;
}

#section14 .text_container .button:hover .arrow{
    transform: translateX(5px);
    transition: all .3s;
}

/*#section01 .text_container .button:hover .arrow{
    transform: translate(7px,-9px);
}*/

#section14 .text_container .button .arrow{
    position: absolute;
    top: 15px;
    left: 170px;
}

#section15{
    height: 2300px;
    position: relative;
    background: white;
}

#section15 .ui_overview{
    position: relative;
}

#section15 .ui_overview .bg{
    position: relative;
    top: 50px;
    left: 0;
}
#section15 .ui_overview .icon{
    position: absolute;
    top: 10px;
    left: 447px;

    transform: rotate(360deg);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
    transform-origin: center center;
}
#section15 .ui_overview.on .icon{
    transform: rotate(0deg);
}




#section15 .ui_overview .text_container{
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translateX(-331px);
    text-align: center;
}

#section15 .ui_overview .text_container > div {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}


#section15 .ui_overview .text_container > div:nth-child(1){transition-delay: .3s}
#section15 .ui_overview .text_container > div:nth-child(2){transition-delay: .5s}
#section15 .ui_overview .text_container > div:nth-child(3){transition-delay: .8s}

#section15 .ui_overview.on .text_container > div {
    transform: translateY(0);
    opacity: 1;
}


#section15 .ui_overview .text_container .title{
    position: relative;
    margin-bottom: 70px;
}
#section15 .ui_overview .text_container .bar{
    position: relative;
    margin-bottom: 60px;
}
#section15 .ui_overview .text_container .text{
    position: relative;
}

#section15 .ci_system{
    position: relative;
    top: 200px;
    left: 0;

}
#section15 .ci_system .ci_container{
    position: relative;
    top: 250px;
    display: flex;
}
#section15 .ci_system .text_container{
    position: absolute;
    top: 0;
    left: 190px;
}
#section15 .ci_system .text_container .ci_title{
    position: relative;
    margin-bottom: 33px;
}
#section15 .ci_system .text_container .text{
    position: relative;
}
/*#section15 .ci_container .text_container .text{*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*}*/

#section15 .ci_container .logo {
    position: relative;
}

#section15 .ci_system .ci_container .logo_text{
    position: absolute;
    top: 250px;
    left: 50%;
    /*transform: translateX(-296px);*/
    transform: translate(-296px,50px);
    opacity: 0;
    transition: all 1s;
}

#section15 .ci_system.on .ci_container .logo_text{
    transform: translate(-296px,0);
    opacity: 1;
}


#section15 .ci_system .ci_container .logo_icon{
    position: absolute;
    left: 50%;
    /*transform: translateX(-244px);*/
    top: 500px;
    display: flex;

    transform: translate(-244px,50px);
    transition: all 1s;
    opacity: 0;
    transition-delay: .5s;
}


#section15 .ci_system.on .ci_container .logo_icon{
    transform: translate(-244px,0);
    opacity: 1;
}

#section15 .ci_container .logo_icon .gray{
    position: relative;
}
#section15 .ci_container .logo_icon .arrow{
    position: relative;
    margin-left: 33px;
    margin-right: 30px;
    top: 60px;
}
#section15 .ci_system .ci_container .logo_icon .color{
    position: relative;
    top: -20px;

    transform: translateX(-50px);
    opacity: 0;
    transition: all 1s;
    transition-delay: 1s;
}
#section15 .ci_system.on .ci_container .logo_icon .color{
    transform: translateX(0);
    opacity: 1;
}




#section15 .ci_container .small_text{
    position: relative;
    width: 417px;
    bottom: 200px;
    left: 50%;
    transform: translateX(-225px);
    display: flex;
}
#section15 .ci_container .small_text .small_02{
    position: absolute;
    right: 0;
}

#section15 .ci_container .phone_mockup{
    position: relative;
}


#section16 {
    position: relative;
    height: 2800px;
    background: white;
}
#section16 .system{
    position: relative;
}

#section16 .system .bg{
    position: relative;
    left: 100px;
    top: 80px;
}
#section16 .system .color{
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-661.5px);
}
#section16 .system .color .sub{
    margin-bottom: 40px;
}



#section16 .system .color .grid{
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s ;
}

#section16 .system.on .color .grid{
    transform: translateY(0);
    opacity: 1;
}



#section16 .system .typo{
    position: absolute;
    top: 750px;
    left: 50%;
    transform: translateX(-680px);


}

#section16 .system .typo .grid{
    transform: translateY(50px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
    opacity: 0;
    transition-delay: 1s;
}


#section16 .system.on .typo .grid{
    transform: translateY(0);
    opacity: 1;
}






#section16 .system .typo .sub{
    margin-bottom: 40px;
}

#section16 .icongraphy{
    position: relative;
    top: 200px;
    height: 1160px;
}
#section16 .icongraphy .text_container{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-400px);
    text-align: center;
}
#section16 .icongraphy .text_container .sub{
    position: relative;
    margin-bottom: 40px;
}

#section16 .icongraphy .icon_guide{
    position: absolute;
    left: 50%;
    /*transform: translateX(-306.5px);*/
    top: 180px;

    transform: translate(-306.5px,50px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}

#section16 .icongraphy.on .icon_guide{

    transform: translate(-306.5px,0);
    opacity: 1;
}




#section16 .icongraphy .icon_grid{
    position: relative;
    top: 500px;
    left: 50%;
  /*transform: translateX(-924.5px);*/

    transform: translate(-924.5px,50px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
    opacity: 0;
    transition-delay: .5s;
}


#section16 .icongraphy.on .icon_grid{
    transform: translate(-924.5px,0);
    opacity: 1;
}


#section17{
    position: relative;
    height: 1360px;
    background: white;
}
#section17 .component{
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-845px);
}
#section17 .component .sub{
    position: relative;
    margin-bottom: 30px;
}

#section17 .component .grid{
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
}

#section17 .component.on .grid{
    transform: translateY(0);
    opacity: 1;

}



#section18{
    position: relative;
    height: 1080px;
    background: white;
}

#section18 .text_container{
    position: absolute;
    top: 108px;
    left: 130px;
}

#section18 .text_container .sub{
    margin-bottom: 50px;
}

#section18 .character{
    position: absolute;
    top: 495px;
    left: 125px;
}

#section18 .illustration .character > div {
    transform: scale(0);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
    opacity: 0;
}

#section18 .illustration .character > div:nth-child(1){transition-delay: .2s}
#section18 .illustration .character > div:nth-child(2){transition-delay: .4s}
#section18 .illustration .character > div:nth-child(3){transition-delay: .6s}
#section18 .illustration .character > div:nth-child(4){transition-delay: .8s}
#section18 .illustration .character > div:nth-child(5){transition-delay: .7s}
#section18 .illustration .character > div:nth-child(6){transition-delay: 1s}
#section18 .illustration .character > div:nth-child(7){transition-delay: .5s}
#section18 .illustration .character > div:nth-child(8){transition-delay: .7s}


#section18 .illustration.on .character > div{
    transform: scale(1);
    opacity: 1;

}

#section18 .character .character_01{
    position: relative;


}

#section18 .character .character_02{
    position: absolute;
    top: 270px;
    left: 100px;

}

#section18 .character .character_03{
    position: absolute;
    top: 100px;
    left: 330px;
}

#section18 .character .character_04{
    position: absolute;
    top: 173px;
    left: 717px;
}

#section18 .character .character_05{
    position: absolute;
    left: 820px;
    top: -140px;
}
#section18 .character .character_06{
    position: absolute;
    left: 980px;
    top: 190px;
}
#section18 .character .character_07{
    position: absolute;
    left: 1240px;
    top: 20px;
}
#section18 .character .character_08{
    position: absolute;
    left: 1500px;
    top: -120px;
}


#section19{
    height: 2160px;
    background: white;
    position: relative;
}

#section19 .play_learn{
    position: relative;
}

#section19 .play_learn .title{
    position: absolute;
    left: 50%;
    top: 210px;
    /*transform: translateX(-800px);*/
    transform: translate(-800px,80px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
}
#section19 .play_learn.on .title{
    transform: translate(-800px,0);
    opacity: 1;
}




#section19 .play_learn .title .confetti{
    position: absolute;
    top: 0;
}
#section19 .play_learn .title .confetti_01{
    position: relative;
    top: -170px;
    left: 980px;
}

#section19 .play_learn .title .confetti_02{
    position: absolute;
    top: 240px;
    left: 230px;
}

#section19 .play_learn .cloud{
    position: relative;
    top: 410px;
    left: 0;
}

#section19 .play_learn .phone{
    position: relative;
}


#section19 .play_learn .button{
    position: absolute;
    bottom: 510px;
    left: 50%;
    transform: translateX(-248px);
}
#section19 .play_learn .button{
    position: relative;
    display: flex;
}

#section19 .play_learn .button .ux_button{
    margin-right: 50px;
}
#section19 .play_learn .button .ux_button .arrow{
    position: absolute;
    top: 15px;
    left: 15px;
    transition: all .3s;
}

#section19 .ux_button:hover .arrow{
    transform: translateX(-5px);

}
/*
#section01 .text_container .button:hover .arrow{
    transform: translate(7px,-9px);
}
*/


#section19 .play_learn .voicetone_button{
    position: relative;

}
#section19 .voicetone_button:hover .arrow{
    transform: translateX(5px);

}

#section19 .play_learn .button .voicetone_button .arrow{
    position: absolute;
    top: 15px;
    right: 15px;
    transition: all .3s;
}


/*#section19 .play_learn .button .bg .arrow_left{
    position: absolute;
    top: 15px;
    left: 15px;
}

#section19 .play_learn .button .bg .arrow_right{
    position: absolute;
    top: 15px;
    right: 15px;
}*/

#section19 .play_learn .click{
    position: absolute;
    bottom: 430px;
    left: 1080px;
}

#section19 .play_learn .click .text{
    position: relative;}


#section19 .play_learn .click .text .under_line{
    position: absolute;
    left: 80px;
    top: 61px;
/*
    overflow: hidden;
    width: 0;
    transition: all 2s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: .5s;*/
}
/*#section19 .play_learn.on .under_line{
    width: 100%;
}*/


#section19 .play_learn .click .text .circle{
    position: absolute;
    top: 73px;
    right: 18px;
}

#section19 .play_learn .character{
    position: absolute;
    right: 0;
    top: 1000px;

    transform: translateX(370px);
    transition: all  cubic-bezier(0.63, 0.08, 0.58, 1) 1.8s;
}

#section19 .play_learn .character.on{
    transform: translateX(0);

}


#section19 .play_learn .character .body{
    position: relative;
}
#section19 .play_learn .character .green_hand{
    position: absolute;
    top: 170px;
    left: 142px;
    transform: rotate(
            24deg);
    animation: play_hand 2s 0s infinite ease-in-out alternate;
    transform-origin: right ;
}


@keyframes play_hand {
    from {transform: rotate(0deg);}
    50%{ transform: rotate(7deg);}
    to{ transform: rotate(0deg); }

}



#section20{
    background: white;
    position: relative;
    height: 3020px;
}

#section20 .login_sign {
    position: relative;
    height: 1500px;
}
#section20 .login_sign .circle{
    position: absolute;
    right: 0;
    top: 270px;
}
#section20 .login_sign .big_logo{
    position: relative;
    left: 80px;
    top: 50px;
    mix-blend-mode: luminosity;
}

#section20 .login_sign .text_container{
    position: absolute;
    top: 230px;
    left: 150px;
}

#section20 .login_sign .text_container > div{
    transform: translateY(50px);
    opacity: 0;
    transition: all .8s;
    transition-delay: .3s;
}
#section20 .login_sign .text_container > div:nth-child(1){transition-delay: .2s}
#section20 .login_sign .text_container > div:nth-child(2){transition-delay: .4s}
#section20 .login_sign .text_container > div:nth-child(3){transition-delay: .6s}


#section20 .login_sign.on .text_container > div{
    transform: translateY(0);
    opacity: 1;
}



#section20 .login_sign .text_container .title {
    position: relative;
    margin-bottom: 50px;
}
#section20 .login_sign .text_container .text{
    position: relative;
    left: 11px;
    top: 0;
}

#section20 .login_sign .phone_container{
    position: absolute;
    top: 580px;
    left: 130px;


}


#section20 .login_sign .phone_container > div{
    transform: translateY(50px);
    transition: all 1s;
    /*transition-delay: 2.3s;*/
    opacity: 0;
}
#section20 .login_sign .phone_container > div:nth-child(3){transition-delay: .8s}
#section20 .login_sign .phone_container > div:nth-child(1){transition-delay:  1.2s}
#section20 .login_sign .phone_container > div:nth-child(2){transition-delay: 1.4s}

#section20 .login_sign.on .phone_container > div{
    transform: translateY(0);
    opacity: 1;
}



#section20 .login_sign .phone_container .step02{
    position: relative;

}

#section20 .login_sign .phone_container .step02 .phone{
    position: relative;
    left: -50px;
    top: 0;
}
#section20 .login_sign .phone_container .step02 .mockup{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}


#section20 .phone_container .step02 .step02_video{
    position: absolute;
    width: 331px;
    top: 27px;
    left: 34px;

}


#section20 .login_sign .phone_container .step03{
    position: absolute;
    top: 0;
    left: 480px;
}

#section20 .login_sign .phone_container .step03 .phone{
    position: relative;
    left: -50px;
    top: 0;
}


#section20 .login_sign .phone_container .step03 .mockup{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}


#section20 .phone_container .step03 .step03_video{
    position: absolute;
    width: 331px;
    top: 27px;
    left: 38px;

}




#section20 .login_sign .phone_container .step03 .step03_guide{
    position: absolute;
    right: -220px;
    top: 588px;
    z-index: 3;
}

#section20 .login_sign .phone_container .step03 .step03_guide .text{
    position: absolute;
    top: 0;
    left: 90px;
}


#section20 .login_sign .phone_container .step01{
    position: absolute;
    top: -250px;
    left: 1137px;
}

#section20 .login_sign .phone_container .step01 .step01_img{
    position: relative;
    left: -70px;
}


#section20 .login_sign .phone_container .step01 .phone{
  position: relative;
    left: -110px;
}


#section20 .login_sign .phone_container .step01 .mockup{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}


#section20 .phone_container .step01 .step01_video{
    position: absolute;
    width: 331px;
    top: 29px;
    left: 38px;

}

#section20 .step01 .phone .box{
    position: relative;
    width: 330px;
    height: 10px;
    background: white;
    top: 743px;
    left: 40px;
}

#section20 .login_sign .phone_container .step01_guide{
    top: 610px;
    left: 236px;
    bottom: 0;
    right: 180px;
    position: relative;
    z-index: 3;
}
#section20 .login_sign .phone_container .step01_guide .line{
    position: relative;

}
#section20 .login_sign .phone_container .step01_guide .text{
    position: absolute;
    left: 90px;
    top: 0;
}


#section20 .sign_page{
    position: relative;
}
#section20 .sign_page .bg{
    position: relative;
}

#section20 .sign_page .text_container{
    position: absolute;
    top: 373px;
    left: 144px;
}

#section20 .sign_page .text_container > div{
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}

#section20 .sign_page .text_container > div:nth-child(1){transition-delay: .5s}
#section20 .sign_page .text_container > div:nth-child(2){transition-delay: .8s}

#section20 .sign_page.on .text_container > div{
    transform: translateY(0);
    opacity: 1;
}




#section20 .sign_page .text_container .title{
    position: relative;
    margin-bottom: 50px;
}

#section20 .sign_page .text_container .text{
   position: relative;
    left: 11px;
    top: 0;
}

#section20 .sign_page .phone{
    position: absolute;
    right: 0;
    top: 210px;

    transform: translateY(120px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}


#section20 .sign_page.on .phone{
    transform: translateY(0);
}


#section20 .sign_page .phone .shadow{
    position: absolute;
    top: 950px;
    left: 210px;
}

#section20 .sign_page .activity {
    position: absolute;
    left: 200px;
    top: 910px;
}

#section20 .sign_page .activity > div:nth-child(1){transition-delay: 1.2s}
#section20 .sign_page .activity > div:nth-child(5){transition-delay: 1.5s}
#section20 .sign_page .activity > div:nth-child(3){transition-delay: 1.2s}
#section20 .sign_page .activity > div:nth-child(4){transition-delay: 1.4s}
#section20 .sign_page .activity > div:nth-child(2){transition-delay: 1.8s}
#section20 .sign_page .activity > div:nth-child(6){transition-delay: 2s}

#section20 .sign_page .activity > div{
    transform: scale(0);
    opacity: 0;
    transition: all cubic-bezier(0.64, 0.01, 0.58, 1) .6s;
}


#section20 .sign_page.on .activity > div{
    transform: scale(1);
    opacity: 1;
}

#section20 .sign_page .activity .activity_01{
    position: relative;
}
#section20 .sign_page .activity .activity_02{
    position: absolute;
    top: 185px;
    left: 280px;
}
#section20 .sign_page .activity .activity_03{
    position: absolute;
    top: -378px;
    left: 674px;
}
#section20 .sign_page .activity .activity_04{
    position: absolute;
    top: 110px;
    left: 672px;
}
#section20 .sign_page .activity .activity_05{
    position: absolute;
    top: -460px;
    left: 1420px;
}
#section20 .sign_page .activity .activity_06{
    position: absolute;
    top: 0;
    left: 1500px;
}


#section21{
    height: 3590px;
    background: #f6f6f6;
}

#section21 .on_boarding{
    position: relative;
    height: 1480px;
}

#play_video_02{
    height: 700px;
}

#section21 .on_boarding .bg{
    position:relative;
    top: 230px;
    left: 50%;
    transform: translateX(-960px);
}
#section21 .on_boarding .text_container{
    position: absolute;
    top: 0;
    left: 130px;
}

/*#section21 .on_boarding .text_container > div {
    transform: translateX(50px);
    transition: all  1s;
    opacity: 0;
}

!*#section21 .on_boarding .text_container > div:nth-child(1){transition-delay: .2s}
#section21 .on_boarding .text_container > div:nth-child(2){transition-delay: .4s}*!

#section21 .on_boarding.on .text_container > div {
    transform:  translateX(0);
    opacity: 1;
}*/



#section21 .on_boarding .text_container .title{
    position: relative;
}
#section21 .on_boarding .text_container .text{
    position: absolute;
    top: 60px;
    left: 400px;
}

#section21 .on_boarding .button{
    position: absolute;
    right: 100px;
    top: 0;
    display: flex;
}
#section21 .on_boarding .button .ux_button{
    position: relative;
    margin-right: 50px;
}
#section21 .on_boarding .button .voicetone_button{
    position: relative;
}

#section21 .on_boarding .ux_button .arrow{
    position: absolute;
    top: 15px;
    left: 14px;
}

#section21 .on_boarding .voicetone_button .arrow{
    position: absolute;
    top: 15px;
    right: 14px;
}
/*
#section21 .on_boarding .button .right_arrow{
    position: absolute;
    top: 15px;
    left: 427px;
}
*/



#section21 .on_boarding .bg .shape{
    position: relative;
    left: 50%;
    transform: translateX(-724px);
    top: -50px;
}

#section21 .on_boarding .bg .circle{
    position: absolute;
    top: 300px;
    left: -70px;


    transform: scale(0);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1.5s;
    transform-origin: center center;
}

#section21 .on_boarding.on .bg .circle{
    transform: scale(1);
}




#section21 .on_boarding .phone_container{
    position: absolute;
    top: 200px;
    left: 110px;
}

/*#section21 .on_boarding .phone_container > div{
    transform: translateY(30px);
    transition: all 1s;
}
#section21 .on_boarding .phone_container > div:nth-child(3){transition-delay: .4s}
#section21 .on_boarding .phone_container > div:nth-child(1){transition-delay: .8s}
#section21 .on_boarding .phone_container > div:nth-child(2){transition-delay: 1.2s}

#section21 .on_boarding.on .phone_container > div{
    transform: translateY(0);
}*/

#section21 .on_boarding .phone_container .phone_01{
   position: relative;
}

#section21 .on_boarding .phone_container .phone_02{
   position: absolute;
    left: 530px;
    top: 250px;
}

#section21 .on_boarding .phone_container .phone_03{
   position: absolute;
    left: 1120px;
    top: -40px;
}

#section21 .on_boarding .phone_container .phone_03 .phone{
    position: relative;
    z-index: 1;
}
#section21 .on_boarding .phone_container .phone_03 .onboarding_video{
    position: absolute;
    width: 375px;
    left: 98px;
    top: 85px;

}

#section21 .certification{
    position: relative;
}


#section21 .certification .phone{
    position: relative;
    top: 0;
    left: -20px;

    transform: translateY(120px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
}

#section21 .certification.on .phone{
    transform: translateY(0);
}

#section21 .certification .text_container{
    position: absolute;
    top: 0;
    right: 210px;
}

#section21 .certification .text_container .title{
    position: relative;
    margin-bottom: 50px;
}
#section21 .certification .text_container .text{
 /*   position: absolute;
    top: 0;
    left: 0;*/
    position: relative;
}

#section21 .certification .badge{
    position: absolute;
    top: -70px;
    left: 410px;
}

#section21 .certification .badge > div{
    transform: scale(0);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
    opacity: 0;
}

#section21 .certification .badge > div:nth-child(1){transition-delay: .4s}
#section21 .certification .badge > div:nth-child(2){transition-delay: .6s}
#section21 .certification .badge > div:nth-child(3){transition-delay: .8s}

#section21 .certification.on .badge > div{
    transform: scale(1);
    opacity: 1;
}



#section21 .certification .badge .badge_01{
    position: relative;
}
#section21 .certification .badge .badge_02{
    position: absolute;
    top: 130px;
    left: 280px;
}
#section21 .certification .badge .badge_03{
    position: absolute;
    top: -10px;
    left: 1200px;
}

#section21 .certification_screen{
    position: absolute;
    top: 480px;
    right: 260px;
}

#section21 .certification_screen .screen{
    position: relative;
    top: 0;
    right: 0;
}

#section21 .certification_screen .float{
    position: absolute;
    top: 390px;
    left: -200px;

    transform: scale(0);
    transition: all cubic-bezier(0.71, 0.04, 0.58, 1) 1.5s;
}

#section21 .certification_screen.on .float{
    transform: scale(1);
}




#section21 .certification_screen .guide{
    position: absolute;
    bottom: 358px;
    right: -40px;

}

#section21 .certification_screen .guide .line{
    position: relative;
}

#section21 .certification_screen .guide .text{
    position: absolute;
    top: 0;
    left: 130px;
}

#section21 .certification_screen .congratulation{
    position: absolute;
    bottom: -370px;
    right: -120px;
}

#section21 .certification_screen .congratulation .text{
    position: absolute;
    bottom: 30px;
    left: 50%;
    text-align: center;
    transform: translateX(-94.5px);
}

#section21 .certification_screen .congratulation .text > div{
    transform: translateY(30px);
    opacity: 0;
    transition: all cubic-bezier(0.64, 0.01, 0.58, 1) .8s;
}
#section21 .certification_screen .congratulation .text > div:nth-child(1){transition-delay: 1.3s}
#section21 .certification_screen .congratulation .text > div:nth-child(2){transition-delay: 1.8s}


#section21 .certification_screen.on .congratulation .text > div{
    transform: translateY(0);
    opacity: 1;
}

#section21 .certification_screen .congratulation .text .text_01{
    margin-bottom: 20px;
}

#section21 .certification_screen .congratulation .confetti{
    position: absolute;
    top: 130px;
    left: 100px;

    transition-delay: 1s;
    transform: translateY(30px) scale(0);
    opacity: 0;
    transition: all cubic-bezier(0.64, 0.01, 0.58, 1) 1s;
}

#section21 .certification_screen.on .congratulation .confetti{
    transform: translateY(0) scale(1);
    opacity: 1;
}

#section22{
    height: 3100px;
    background: white;
}
#section22 .home{
    position: absolute;
}
/*

#section22 .home .bg{

}
*/

#section22 .home .bg .yellow{
    position: relative;

}

#section22 .home .bg .transparent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-872px, -780.5px);
}
#section22 .home .illust{
    position: absolute;
    top: 1430px;
    left: 0;
}

#section22 .home .illust .ground{
  position: relative;
}




#section22 .home .illust .character{
    position: absolute;
    bottom: 156px;
    left: 230px;


    transform: translateX(-570px);
    transition: all ease-in-out 2.2s;

}

#section22 .home .illust.on .character{
    transform: translateX(0)

}





#section22 .home .text_container {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-293.5px);
    text-align: center;
}

#section22 .home .text_container > div {
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.64, 0.01, 0.58, 1) 1s;
}

#section22 .home .text_container > div:nth-child(1){transition-delay: .1s}
#section22 .home .text_container > div:nth-child(2){transition-delay: .4s}


#section22 .home.on .text_container > div {
    transform: translateY(0);
    opacity: 1;
}



#section22 .home .text_container .title{
    position: relative;
    margin-bottom: 40px;
}

#section22 .home .phone{
    position: absolute;
    top: 600px;
    left: 37%;
}


#section22 .home .home_video{
    position: absolute;
    width: 429px;
    left: 42px;
    z-index: 1;
    top: 25px;

}
#section22 .home .phone .screen{
    position: relative;
}
#section22 .home .phone .mockup{
    position: absolute;
    top: -63px;
    left: -167px;
    z-index: 2;
}
#section22 .home .guide{
    position: absolute;
    top: 780px;
    left: 460px;
    z-index: 40;
}

#section22 .home .guide .guide_01{
    position: relative;
    left: -50px;
    top: 32px;
    z-index: 40;

}

#section22 .home .guide .guide_02{
    position: absolute;
    left: 860px;
    top: 360px;
}

#section22 .home .guide .guide_03{
    position: absolute;
    left: 860px;
    top: 1016px;
}
#section22 .home .guide .guide_04{
    position: absolute;
    left: -124px;
    top: 1181px;
}

#section22 .home .guide .line_01{
    position: absolute;
    top: 60px;
    left: 230px;
    transform: rotate(180deg);
}
#section22 .home .guide .line_02{
    position: absolute;
    top: 362px;
    left: 710px;
}
#section22 .home .guide .line_03{
    position: absolute;
    top: 1020px;
    left: 703px;
}
#section22 .home .guide .line_04{
    position: absolute;
    top: 1246px;
    left: 210px;
    transform: rotate(180deg);
}

#section22 .home .big_logo{
    position: absolute;
    top: 2709px;
    left: 50%;


    transition: all cubic-bezier(0.64, 0.01, 0.58, 1) 2.4s;
    transform: translateX(-1392px);
    opacity: 0;
}
/*-862*/
#section22 .home .big_logo.on{
    transform: translateX(-862px);
    opacity: 1;
}




#section23{
    position: relative;
    background: white;
    height: 3950px;
}

#section23 .home_02{
    position: relative;
    top: 250px;
    left: 0;
    z-index: 30;
}
#section23 .home_02 .bg{
    position: relative;
}


#section23 .home_02 .text_container{
    position: absolute;
    top: 192px;
    left: 145px;
}


#section23 .home_02 .text_container > div {
    transform: translateY(50px);
    opacity: 0;
    transition: all cubic-bezier(0.64, 0.01, 0.58, 1) .8s;
}

#section23 .home_02 .text_container > div:nth-child(1){transition-delay: .1s}
#section23 .home_02 .text_container > div:nth-child(2){transition-delay: .3s}

#section23 .home_02.on .text_container > div{
    transform:  translateY(0);
    opacity: 1;
}

#section23 .home_02 .text_container .title{
    position: relative;
    margin-bottom: 50px;
}
#section23 .home_02 .text_container .text{
    position: absolute;
    top: 200px;
    left: 8px;
}

#section23 .home_02 .phone{
    position: absolute;
    top: -160px;
    right: 0;

}

#section23 .home_02 .phone .phone_01{
    position: absolute;
    top: 0;
    right: 402px;
    z-index: 6666;
}


#section23 .home_02 .phone_02 .text{
    position: absolute;
    top: 950px;
    left: 70px;

}

#section23 .home_02 .phone_01 .text{
    position: absolute;
    top: 950px;
    left: 70px;
}

#section23 .home_02 .phone .phone_02{
position: relative;
}

#section23 .home_02 .illust{
    position: absolute;
    top: 310px;
    left: -668px;

    transform: translateX(155px);
    transition: all cubic-bezier(0.64, 0.01, 0.58, 1) 2s;
    transition-delay: .6s;
}


#section23 .home_02.on .illust{
    transform:  translateX(0);
}

#section23 .home_02 .detail_button{
    position: absolute;
    top: 297px;
    left: 319px;
}


#section23 .home_02 .like_button{
    position: absolute;
    top: 452px;
    left: 338px;
}



#section23 .home_03 {
    position: relative;
    top: 251px;
}

#section23 .home_03 .bg {
    position: relative;
}
#section23 .home_03 .circle_bg{
    position: absolute;
    top: 570px;
    right: 0;
}
#section23 .home_03 .text_container{
    position: absolute;
    top: 0;
    left: 0;
}
#section23 .home_03 .title{
    position: relative;
    margin-bottom: 50px;
}
#section23 .home_03 .text_container{
    position: absolute;
    top: 255px;
    left: 140px;
}

#section23 .home_03 .text_container .text{
    left: 15px;
    position: absolute;
    top: 208px;
}


#section23 .home_03 .phone_container{
    position: absolute;
    top: 726px;
    left: 146px;
}


/*#section23 .home_03 .phone_container > div {
    transform: translateY(80px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}*/

/*#section23 .home_03 .phone_container > div:nth-child(3){transition-delay: .2s}
#section23 .home_03 .phone_container > div:nth-child(1){transition-delay: .5s}
#section23 .home_03 .phone_container > div:nth-child(2){transition-delay: .8s}
#section23 .home_03 .phone_container > div:nth-child(4){transition-delay: 1.2s}
#section23 .home_03 .phone_container > div:nth-child(5){transition-delay: 1.4s}*/
/*

#section23 .home_03.on .phone_container > div {
    transform: translateY(0);
}
*/


#section23 .home_03 .step_02{
    position: relative;

    transform: translateY(80px);
    transition: all  cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}

#section23 .home_03 .step_02.on{
    transform: translateY(0);
}


#section23 .home_03 .step_02 .float{
    position: absolute;
    top: 397px;
    left: 0;
}
#section23 .home_03 .step_02 .guide{
    position: absolute;
    top: 590px;
    left: 0;
}

#section23 .home_03 .step_03{
    position: absolute;
    top: 250px;
    left:550px;

    transform: translateY(80px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}
#section23 .home_03 .step_03.on {
    transform: translateY(0);
}
#section23 .home_03 .step_03 .float{
    position: absolute;
    top: 309px;
    display: flex;
    left: 0;
}

#section23 .home_03 .step_03 .float > div:nth-child(1){transition-delay: .1s}
#section23 .home_03 .step_03 .float > div:nth-child(2){transition-delay: .3s}
#section23 .home_03 .step_03 .float > div:nth-child(3){transition-delay: .5s}

#section23 .home_03 .step_03 .float > div{
    transform: scale(0);
    opacity: 0;
    transition: all  cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
}
#section23 .home_03 .step_03.on .float > div{
    transform: scale(1);
    opacity: 1;
}

#section23 .home_03 .step_03 .float .float_01{
    position: relative;
}
#section23 .home_03 .step_03 .float .float_02{
    position: absolute;
    top: 0;
    left: 254px;
}
#section23 .home_03 .step_03 .float .float_03{
    position: absolute;
    top: 0;
    left: 510px;
}
#section23 .home_03 .step_03 .guide{
    position: absolute;
    top: 390px;
    left: 760px;
}
#section23 .home_03 .step_01{
    position: absolute;
    top: -465px;
    left: 1140px;

    transform: translateY(80px);
    transition: all  cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}
#section23 .home_03 .step_01.on{
    transform: translateY(0);
}



#section23 .home_03 .step_01 .guide{
    position: absolute;
    top: 560px;
    left: -160px;
}



#section23 .home_03 .step_04{
    position: absolute;
    top: 773px;
    left: 1140px;

    transform: translateY(80px);
    transition: all  cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}
#section23 .home_03 .step_04.on{
    transform: translateY(0);
}

#section23 .home_03 .step_04 .float{
    position: absolute;
    top: 440px;
    left: 40px;
}

#section23 .home_03 .step_04 .guide{
    position: absolute;
    top: 590px;
    left: 10px;
}



#section23 .home_03 .step_05{
    position: absolute;
    top: 1325px;
    left: 550px;

    transform: translateY(80px);
    transition: all  cubic-bezier(0.63, 0.08, 0.58, 1) .8s;
}
#section23 .home_03 .step_05.on{
    transform: translateY(0);
}



#section24{
    position: relative;
    height: 3171px;
    background: white;
}


#section24 .community{
    position: relative;
    height: 1555px;
}
#section24 .community .text_container{
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-256.5px);
    text-align: center;
}

#section24 .community .text_container .title{
    margin-bottom: 50px;
}

#section24 .community .illustration{
    position: absolute;
    right: 80px;
top: 0;
}

#section24 .community .illustration .line{
    position: relative;
}

#section24 .community .illustration .character{
    position: absolute;
    top: 380px;
    left: 80px;
    z-index: 99;
}
#section24 .community .illustration .arm{
    position: absolute;
    top: 432px;
    left: 125px;


    transform: rotate(10deg);
    animation: hand 3s  infinite ease-in-out alternate;
    transform-origin: bottom ;
}



@keyframes hand {
    from {transform: rotate(0deg);}
    50%{ transform: rotate(-15deg);}
    to{ transform: rotate(0deg); }

}

#section24 .community .illustration .face{
    position: absolute;
    top: 466px;
    left: 250px;
    z-index: 999;
}


#section24 .community .phone_container{
    position: absolute;
    right: 0;
    top: 610px;
}
#section24 .community .phone01_mockup .container{
    position: relative;

}

#section24 .community .phone01_mockup{
    position: absolute;
    top: -210px;
    left: -320px;

    transform: translateY(80px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
}

#section24 .community.on .phone01_mockup{
    transform: translateY(0);
}


#section24 .community .phone01_mockup .phone{
    z-index: 5555;
    position: relative;
}



#section24 .community .guide{
    position: absolute;
    top: 486px;
    left: 320px;
}
#section24 .community .guide .phone_02 .float{
   position: relative;
}
#section24 .community .guide .phone_02 .text_container{
    position: absolute;
    top: 78px;
    left: -105px;
}

#section24 .community .guide .phone_02 .text{
    position: absolute;
    top: 70px;
    left: -100px;
}
#section24 .community .guide .phone_03{
    position: absolute;
    top: 160px;
    left: 430px;
}

#section24 .community .guide .phone_03 .float{
    position: relative;
}

#section24 .community .guide .phone_03 .text{
    position: absolute;
    top: 130px;
    left: 310px;
}

#section24 .community .community_video{
    position: absolute;
    width: 364px;
    top: 81px;
    left: 95px;

}



#section24 .community .phone_container .photo{
    position: absolute;
    bottom: -190px;
    left: -350px;
    opacity: .8;

}



#section24 .red{
    position: relative;
    height: 1616px;
}


#section24 .red .red_bg{
    position: relative;
}
#section24 .red .red_bg .shadow{
    position: absolute;
    bottom: 3px;
    right: 291px;
}

#section24 .red .red_bg .shadow_02{
    position: relative;
}

#section24 .red_bg .shadow_01{
    position: absolute;
    top: -945px;
    left: -133px;
    mix-blend-mode: luminosity;
}

#section24 .red .shadow .phone_01{
    position: absolute;
    top: -925px;
    left: -3px;
    z-index: 999;
}
#section24 .red .shadow .phone_02{
    position: absolute;
    top: -565px;
    left: 27px;
    z-index: 999;
}

#section24 .red .big_text{
    position: absolute;
    top: 330px;
    left: 50%;

    transform: translateX(-651px);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1.8s;
    /*transform: translateX(-791px);*/
}


#section24 .red.on .big_text{
    transform: translateX(-791px);
}

#section24 .red .illust{
    position: absolute;
    bottom: 62px;
    right: 461px;
    z-index: 9999;

}

#section24 .red .illust .body{
    position: relative;
}

#section24 .red .illust .hand_01{
    position: absolute;
    left: 30px;
    top: 100px;
}
#section24 .red .illust .hand_02{
    position: absolute;
    left: 180px;
    top: 0;

    transform: rotate(-10deg);
    animation: yellow 2s 0s infinite ease-in-out alternate;
    transform-origin: bottom;
}


@keyframes yellow {
    from {transform: rotate(0deg);}
    50%{ transform: rotate(5deg);}
    to{ transform: rotate(0deg); }}

/*
#section19 .play_learn .character .green_hand{
    position: absolute;
    top: 170px;
    left: 142px;
    transform: rotate(
            24deg);
    animation: hand 2s 0s infinite ease-in-out alternate;
    transform-origin: right ;
}


@keyframes play_hand {
    from {transform: rotate(0deg);}
    50%{ transform: rotate(7deg);}
    to{ transform: rotate(0deg); }

}
*/





#section24 .red .phone_container{
    position: absolute;
    top: 280px;
    left: 434px;
}


#section24 .red .button{
    position: absolute;
    top: 120px;
    right: 130px;

}


#section24 .red .button .bg{
   position: relative;
}

#section24 .red .button .arrow{
    position: absolute;
    top: 15px;
    right: 20px;
    transition: all .3s;
}

#section24 .red .button:hover .arrow{
    transform: translateX(7px);
}


#section25{
    height: 3700px;
    background: white;
}

#section25 .chatbot{
    position: relative;
    height: 1900px;

}

#section25 .chatbot .bg{
    position: absolute;
    top: 314px;
    left: 50%;
    transform: translateX(-814.5px);
}

#section25 .chatbot .bg .line {
    position: absolute;
    right: -140px;
    top: -50px;
}

#section25 .chatbot .nolbom_icon {
    position: absolute;
    bottom: -110px;
    left: 135px;

    transform: rotate(720deg);
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 2s;
    transform-origin: center;
}

#section25 .chatbot .nolbom_icon.on{
    transform: rotate(0deg);
}




#section25 .chatbot .chatbot_01 {
    position: absolute;
    top: 85px;
    left: 135px;
}

#section25 .chatbot .phone{
    position: relative;

    animation: chatbot 5s ease-in-out infinite;
}


@keyframes chatbot {
    from {transform: translateY(0);}
    50% {transform: translateY(45px);}
    to {transform: translateY(0);}
}

#section25 .chatbot .chatbot_01 .text_container{
    position: absolute;
    top: 370px;
    left: 805px;
}

#section25 .chatbot .chatbot_01 .text_container > div{
    transform: translateY(50px);
    transition: all 1s;
    opacity: 0;
}

#section25 .chatbot .chatbot_01 .text_container > div:nth-child(1){transition-delay: .2s}
#section25 .chatbot .chatbot_01 .text_container > div:nth-child(2){transition-delay: .4s}
#section25 .chatbot .chatbot_01 .text_container > div:nth-child(3){transition-delay: .6s}

#section25 .chatbot .chatbot_01.on .text_container > div{
    transform: translateY(0);
    opacity: 1;
}




#section25 .chatbot .chatbot_01 .text_container .title{
    position: relative;
}
#section25 .chatbot .chatbot_01 .text_container .text{
    position: absolute;
    top: 200px;
    left: 10px;
}
#section25 .chatbot .chatbot_01 .text_container .icon{
    position: absolute;
    top: 46px;
    left: -62px;
}




#section25 .chatbot .chatbot_02{
    position: absolute;
    top: 996px;
   right: 388px;
}
#section25 .chatbot .chat_box .box{
    position: absolute;
    top: 40px;
    left: 40px;
}

#section25 .chatbot .chat_box .box > div{
    transform: translateY(80px);
    opacity: 0;
    transition: all cubic-bezier(0.63, 0.08, 0.58, 1) 1s;
}

#section25 .chatbot .chat_box .box > div:nth-child(1){transition-delay: .8s}
#section25 .chatbot .chat_box .box > div:nth-child(2){transition-delay: 1.4s}
#section25 .chatbot .chat_box .box > div:nth-child(3){transition-delay: 1.9s}

#section25 .chatbot .chat_box.on .box > div{
    transform: translateY(0);
    opacity: 1;
}


#section25 .chat_box .box .chat_01{
    position: relative;
}
#section25 .chat_box .chat_02{
    position: absolute;
    top: 153px;
    right: -176px;
}
#section25 .chat_box .chat_03{
    position: absolute;
    top: 236px;
    left: 0;
}


#section25 .chatbot .chat_box{
    position: relative;
}


#section25 .chatbot .chatbot_02 .text_container {
position: absolute;
    top: 343px;
    right: 660px;
}

#section25 .chatbot .chatbot_02 .text_container > div{
    transform: translateY(50px);
    transition: all 1s;
    opacity: 0;
}

#section25 .chatbot_02 > div:nth-child(1){transition-delay: .1s}
#section25 .chatbot_02 > div:nth-child(2){transition-delay: .3s}
#section25 .chatbot_02 > div:nth-child(3){transition-delay: .5s}

#section25 .chatbot .chatbot_02.on .text_container > div{
    transform: translateY(0);
    opacity: 1;
}



#section25 .chatbot .chatbot_02 .text_container .title{
   position: relative;
    text-align: right;
    margin-bottom: 50px;
}

#section25 .chatbot_02 .icon{
    position: absolute;
    top: 0;
    left: 25px;
}

#section25 .diary{
    position: relative;
    height: 1769px;
}


#section25 .diary .line{
    position: absolute;
    top: 40px;
    left: 400px;
}

#section25 .diary .text_container{
    position: absolute;
    top: 183px;
    left: 50%;
    transform: translateX(-266px);
}

#section25 .diary .text_container .title{
    position: relative;
    text-align: center;
   margin-bottom: 50px;
}
#section25 .diary .text_container .text{
    position: relative;

}

#section25 .diary .phone_container {
    position: absolute;
    top: 580px;
    left: 50%;
    transform: translateX(-691.5px);
}

#section25 .diary .phone_container .phone_02{
    transform: translateY(80px);
    transition: all .8s;

}

#section25 .diary .phone_container.on .phone_02{
    transform: translateY(0);
}

#section25 .diary .phone_container .step_01{
    position: relative;
}

#section25 .diary .phone_container .float{
    position: absolute;
    top: 626px;
    left: -60px;
}


#section25 .diary .phone_container .step_02{
    position: absolute;
    top: -28px;
    left: 435px;
}
#section25 .diary .phone_container .step_03{
    position: absolute;
    top: 0;
    left: 960px;
}


#section25 .diary .phone_container .step_01 .icon_01{
    position: relative;
    left: 60px;
    top: 39px;
}


#section25 .diary .phone_container .step_02 .icon_02{
    position: relative;
    top: -47px;
    left: 95px;
}

#section25 .diary .step_02 .phone_02 .mockup{
    position: relative;
    z-index: 999;
}

#section25 .diary .phone_container .step02_video{
    position: absolute;
    width: 382px;
    top: 57px;
    left: 73px;

}

#section25 .diary .phone_container .step_03 .icon_03{
    position: relative;
    left: 55px;
    top: 40px;
}

#section26{
    position: relative;
    height: 1870px;
    background: white;
}
#section26 .mockup {
    position: relative;
    height: 1440px;
}

#section26 .end_page{
   /* position: absolute;
    top: 1447px;
    left: 0;*/
    position: relative;

}

#section26 .end_page .button{
    position: absolute;
    top: 307px;
    left: 50%;
    display: flex;
    transform: translateX(-240.5px);
}

#section26 .end_page .button .ux_button{
    position: relative;
    margin-right: 50px;
}
#section26 .end_page .ux_button:hover .arrow{
    transform: translateX(-6px);
}

#section26 .end_page .ux_button .arrow{
    position: absolute;
    top: 15px;
    left: 15px;
    transition: all .3s
}
#section26 .end_page .voicetone_button .arrow{
    position: absolute;
    top: 15px;
    right: 15px;
    transition: all .3s;
}
#section26 .end_page .voicetone_button:hover .arrow{
    transform: translateX(6px);
}

/*
#section26 .end_page .button .voicetone_button{
    position: absolute;
    left: 0;
    top: 0;
}
*/





/*
#section18 .character_container .character_01{
    position: relative;
}







*/




/*

#section16 .component .sub{
    position: relative;
    top: 0;
    left: 0;
}

#section16 .component .grid{
    position:relative;
    top: 0;
    left: 0;
}
*/