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

}


#section01{
    width: 100vw;
    height: 1989px;
    position: relative;
}

#section01 .bg{
    position: absolute;
    width: 100vw;
    height: 980px;
    top: 0;
    left: 0;
}

#section01 .bg >div:nth-child(1){
    transform: translateY(-800px);
    opacity: 1;
    transition: all 1s ;
}


#section01 .bg >div:nth-child(1).on {
    transform: translateY(0);
    opacity: 1;
}











/*아이 무빙*/

#section01 .bg >div:nth-child(2){
    position: absolute;
    right: 100px;
    top: 234px;
}


#section01 .bg >div:nth-child(2){
    transform: translateY(803px);
    opacity: 1;
    transition: all 3s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

#section01 .bg >div:nth-child(2).on {
    transform: translateY(0);
    opacity: 1;
}

#section01 .bg >div:nth-child(2){transition-delay:0.7s}







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





#section01 .title {
    position: absolute;
    width: 429px;
    height: 395px;
    top: 215px;
    left: 216px;
}

#section01 .title >div:nth-child(1){
    margin-bottom: -8px;
    top: 0;
    left: 0;
}

#section01 .title >div:nth-child(2){
    margin-bottom: 45px;
    margin-left: 44px;
}

#section01 .title >div:nth-child(3){

    margin-left: 44px;
}


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

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



#section01 .title > div:nth-child(1){transition-delay:0.9s}
#section01 .title > div:nth-child(2){transition-delay:1.1s}
#section01 .title > div:nth-child(3){transition-delay:1.3s}







#section01 .illust{
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 831px;
    height: 876px;
    overflow: hidden;
}




#section01 .illust .frame{
    position: absolute;
    left: 0;
    top: 0;
}



#section01 .illust video{
    width: 36%;
    position: absolute;
    left: 540px;
    top: 365px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}



#section01 .illust{
    transform: translateX(-880px);
    opacity: 1;
    transition: all 2s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

#section01 .illust.on {
    transform: translatex(0);
    opacity: 1;
}






#section01 .txt{
    position: absolute;
    width: 690px;
    height: 445px;
    /*background: dodgerblue;*/
    bottom: 302px;
    right: 280px;

}

#section01 .txt>div:nth-child(1){
    margin-bottom: 22px;
}

#section01 .txt>div:nth-child(2){
    margin-bottom: 46px;
}

#section01 .txt>div:nth-child(3){
    margin-bottom: 26px;
}


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

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



#section01 .txt > div:nth-child(1){transition-delay:0.4s}
#section01 .txt > div:nth-child(2){transition-delay:0.6s}
#section01 .txt > div:nth-child(3){transition-delay:0.8s}
#section01 .txt > div:nth-child(4){transition-delay:1s}





#section02{
    width: 100vw;
    height: 432px;
    position: relative;
    background-image: url("../img/01iwannabe_project/01overview_page/bg_02_.png");
    z-index: -9999999;
}

#section02 .clothes{
    position: absolute;
    left: 0;
    top: 35px;
    animation: clothes 14s linear 1s infinite alternate;
}


@keyframes clothes {
    to{
        transform: translatex(-2430px);
    }
}




#section03{
    width: 100vw;
    height: 1009px;
    position: relative;
    background: #fafafa;

}


#section03 .title{
    position: absolute;
    width: 952px;
    height: 410px;
    text-align: center;
    left:50%;
    top:168px;
    margin-left: -476px;
    z-index: 999;

}


#section03 .title >div:nth-child(1){
    margin-bottom: 22px;
}

#section03 .title >div:nth-child(2){
    margin-bottom: 100px;
}

#section03 .title >div:nth-child(3){
    margin-bottom: 75px;
}



#section03 .title > div:nth-child(1),
#section03 .title > div:nth-child(2),
#section03 .title > div:nth-child(3),
#section03 .title > div:nth-child(4) {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

#section03 .title.on > div:nth-child(1),
#section03 .title.on > div:nth-child(2),
#section03 .title.on > div:nth-child(3),
#section03 .title.on > div:nth-child(4){
    transform: translateY(0);
    opacity: 1;
}



#section03 .title > div:nth-child(1){transition-delay:0.2s}
#section03 .title > div:nth-child(2){transition-delay:0.4s}
#section03 .title > div:nth-child(3){transition-delay:0.6s}
#section03 .title > div:nth-child(4){transition-delay:0.8s}







/*하이라이트 늘어나는 애니메이션*/

#section03 .highlight{
    width: 331px;
    height: 15px;
    /*padding: 30px 0;*/
    position: absolute;
    top: 280px;
    left: 0;
    z-index: -1;
}

#section03 .highlight > div{
    width: 0;
    overflow: hidden;
    transition: all .7s
}


#section03 .highlight.on > div{
    width: 100%;
}


#section03 .highlight >div{transition-delay:1.2s}


















#section03 .character{
    position: absolute;
    width: 692px;
    height: 208px;
    /*background: dodgerblue;*/
    left: 50%;
    margin-left: -346px;
    top: 670px;
}


#section03 .left >div:nth-child(1){
    position: absolute;
    left: 0;
    top: 6px;
}

#section03 .left >div:nth-child(2){
    position: absolute;
    left: 125px;
    bottom: 0;
}

#section03 .right >div:nth-child(1){
    position: absolute;
    right: 0;
    top: 9px;
}

#section03 .right >div:nth-child(2){
    position: absolute;
    right: 0;
    top: 168px;
}



#section03 .line{
    position: absolute;
    left: 398px;
    top: 0;
}

#section03 .character {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

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













#section04{
    width: 100vw;
    height: 1960px;
    position: relative;
    background: #fafafa;
}




#section04 .diagram_01 .bg {
    position: absolute;
    width: 1920px;
    top: 194px;
    left: 240px;
}


#section04 .diagram_01 .block_01{
    position: absolute;
    width: 74px;
    height: 374px;
    top: 441px;
    left: 585px;
    text-align: center;

}


#section04 .diagram_01 .block_01 >div:nth-child(1){
    position: absolute;
    bottom: -1px;
    left: 0;

}


#section04 .diagram_01 .block_01 >div:nth-child(2){
    top: 0;
    left: 16px;
}

#section04 .diagram_01 .block_01 >div:nth-child(2){
    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_01 .block_01.on >div:nth-child(2){
    opacity: 1;
}



#section04 .diagram_01 .block_01 >div:nth-child(3){
    position: absolute;
    top: 137px;
    left: 6px;
}

#section04 .diagram_01 .block_01 >div:nth-child(3){
    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_01 .block_01.on >div:nth-child(3){
    opacity: 1;
}

/*도표 늘어나는 모션_1*/

#section04 .diagram_01 .block_01 >div:nth-child(1){
    width: 74px;
    height: 331px;
}

#section04 .diagram_01 .block_01 >div:nth-child(1){
    height: 0;
    overflow: hidden;
    transition: all 1s
}


#section04 .diagram_01 .block_01.on >div:nth-child(1){
    height: 331px;
}
#section04 .diagram_01 .block_01 > div:nth-child(1){transition-delay:0.2s}
#section04 .diagram_01 .block_01 > div:nth-child(2){transition-delay:0.8s}
#section04 .diagram_01 .block_01 > div:nth-child(3){transition-delay:0.6s}











#section04 .diagram_01 .block_02{
    position: absolute;
    width: 387px;
    height: 108px;
    top: 676px;
    right: 321px;
}

#section04 .diagram_01 .block_02 >div:nth-child(1){
    position: absolute;
    bottom: 0;
    left: 0;
}

#section04 .diagram_01 .block_02 >div:nth-child(2){
    position: absolute;
    top: 0;
    right: 7px;
}


#section04 .diagram_01 .block_02 >div:nth-child(2){

    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_01 .block_02.on >div:nth-child(2){

    opacity: 1;
}


#section04 .diagram_01 .block_02 >div:nth-child(3) {
    position: absolute;
    top: 56px;
    right: 75px;
}

#section04 .diagram_01 .block_02 >div:nth-child(3){

    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_01 .block_02.on >div:nth-child(3){
    opacity: 1;
}


/*도표 늘어나는 모션_2*/
#section04 .diagram_01 .block_02 >div:nth-child(1){
    width: 387px;
    height: 74px;
}

#section04 .diagram_01 .block_02 >div:nth-child(1){
    width: 0;
    overflow: hidden;
    transition: all 1s ;
}


#section04 .diagram_01 .block_02.on >div:nth-child(1){
    width: 387px;
}
#section04 .diagram_01 .block_02 > div:nth-child(1){transition-delay:0.2s}
#section04 .diagram_01 .block_02 > div:nth-child(2){transition-delay:0.8s}
#section04 .diagram_01 .block_02 > div:nth-child(3){transition-delay:0.6s}



/*왕관 움직이는 애니메이션*/

#section04 .diagram_01 .block_01 > div:nth-child(2){
    animation: jump .7s linear 1s infinite alternate;
}


@keyframes jump {
    to{
        transform: translateY(-8px) translateY(0);
    }
}


#section04 .diagram_01 .block_02 > div:nth-child(2){
    animation: jump .7s linear 1s infinite alternate;
}


@keyframes jump {
    to{
        transform: translateY(-8px) translateY(0);
    }
}



















#section04 .diagram_02 .number_01{
    width: 129px;
    height: 87px;
    position: absolute;
    bottom: 378px;
    left: 671px;
    text-align: center;
}

#section04 .diagram_02 .number_01 >div:nth-child(1){
    margin-bottom: 10px;
    margin-left: -20px;
}

#section04 .diagram_02 .title_01{
    position: absolute;
    left: 819px;
    bottom: 141px;
}


#section04 .diagram_02 .number_01 >div:nth-child(2) {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_02.on .number_01 >div:nth-child(2){
    transform: translateY(0);
    opacity: 1;
}

#section04 .diagram_02 .number_01 >div:nth-child(1) {
    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_02.on .number_01 >div:nth-child(1){
    opacity: 1;
}

#section04 .diagram_02 .number_01 >div:nth-child(1){transition-delay:0.6s}
#section04 .diagram_02 .number_01 >div:nth-child(2){transition-delay:0.2s}



#section04 .diagram_02 .number_01 >div:nth-child(1){
    animation: jump .7s linear 1s infinite alternate;
}


@keyframes jump {
    to{
        transform: translateY(-8px) translateY(0);
    }
}




#section04 .diagram_02 .number_02{
    width: 129px;
    height: 87px;
    position: absolute;
    bottom: 262px;
    right: 530px;
    text-align: center;
}

#section04 .diagram_02 .number_02 >div:nth-child(1){
    margin-bottom: 10px;
    margin-left: -20px;
}




#section04 .diagram_02 .number_02 >div:nth-child(2) {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_02.on .number_02 >div:nth-child(2){
    transform: translateY(0);
    opacity: 1;
}

#section04 .diagram_02 .number_02 >div:nth-child(1) {
    opacity: 0;
    transition: all 1s;
}

#section04 .diagram_02.on .number_02 >div:nth-child(1){
    opacity: 1;
}

#section04 .diagram_02 .number_02 >div:nth-child(1){transition-delay:0.6s}
#section04 .diagram_02 .number_02 >div:nth-child(2){transition-delay:0.2s}



#section04 .diagram_02 .number_02 >div:nth-child(1){
    animation: jump .7s linear 1s infinite alternate;
}


@keyframes jump {
    to{
        transform: translateY(-8px) translateY(0);
    }
}













#section04 .diagram_02 .title_01{
    position: absolute;
    left: 819px;
    bottom: 141px;
}

#section04 .diagram_02 .title_02{
    position: absolute;
    right: 343px;
    bottom: 109px;

}

#section04 .diagram_02 .title_01,
#section04 .diagram_02 .title_02 {
    transform: translateY(10px);
    opacity: 0;
    transition: all 1s;
}


#section04 .diagram_02.on .title_01,
#section04 .diagram_02.on .title_02 {
    transform: translateY(0);
    opacity: 1;
}

#section04 .diagram_02 .title_01{transition-delay:0.8s}
#section04 .diagram_02 .title_02{transition-delay:0.8s}








#section04 .diagram_02 .bg {
    position: absolute;
    top: 1122px;
    left: 307px;
}





#section05{
    width: 100vw;
    height: 980px;
    position: relative;
    background: #ffffff;
}


#section05 .highlight{
    position: absolute;
    top: 509px;
    left: 259px;
}


#section05 .txt_box{
    position: absolute;
    width: 522px;
    height: 428px;
    top: 266px;
    left: 258px;
    text-align: left;
}


#section05 .txt_box>div:nth-child(1){
    margin-bottom: 22px;
}

#section05 .txt_box>div:nth-child(2){
    margin-bottom: 69px;
}

#section05 .txt_box>div:nth-child(3){
    margin-bottom: 41px;
}





/*애니메이션*/
#section05 .txt_box>div {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

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



#section05 .txt_box > div:nth-child(1){transition-delay:0.2s}
#section05 .txt_box > div:nth-child(2){transition-delay:0.4s}
#section05 .txt_box > div:nth-child(3){transition-delay:0.6s}
#section05 .txt_box > div:nth-child(4){transition-delay:0.8s}







/*하이라이트 늘어나는 애니메이션*/

#section05 .highlight{
    width: 340px;
    height: 15px;

    position: absolute;
    top: 509px;
    left:259px;
    /*background: dodgerblue;*/
}

#section05 .highlight >div {
    width: 0;
    overflow: hidden;
    transition: all .7s
}


#section05.on .highlight >div {
    width: 100%;
}


#section05 .highlight >div {transition-delay:1.2s}























#section05 .balloon{
    position: absolute;
    width: 543px;
    height: 100vw;
    top: -42px;
    right: 362px;

}

#section05 .balloon >div:nth-child(1){
    margin-bottom: 44px;
}

#section05 .balloon >div:nth-child(2){
    margin-bottom: 26px;
}

#section05 .balloon >div:nth-child(3){
    margin-bottom: 42px;
}



#section05 .balloon >div:nth-child(1),
#section05 .balloon >div:nth-child(2),
#section05 .balloon >div:nth-child(3),
#section05 .balloon >div:nth-child(4){
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

#section05.on .balloon >div:nth-child(1),
#section05.on .balloon >div:nth-child(2),
#section05.on .balloon >div:nth-child(3),
#section05.on .balloon >div:nth-child(4){

    transform: translateY(0);
    opacity: 1;
}



#section05 .balloon >div:nth-child(1){transition-delay:0.2s}
#section05 .balloon >div:nth-child(2){transition-delay:0.3s}
#section05 .balloon >div:nth-child(3){transition-delay:0.4s}
#section05 .balloon >div:nth-child(4){transition-delay:0.5s}











/*떠다니는 애니메이션*/
#section05 .balloon >div:nth-child(1),
#section05 .balloon >div:nth-child(3){
    animation: jump 1s linear 3s infinite alternate;
}


@keyframes jump {
    to{
        transform: translateY(-10px) translateY(0);
    }
}

#section05 .balloon >div:nth-child(2),
#section05 .balloon >div:nth-child(4){
    animation: jump_2 1s linear 3s infinite alternate;
}

@keyframes jump_2 {
    to{
        transform: translateY(10px) translateY(0);
    }
}












#section06{
    width: 100vw;
    height: 980px;
    position: relative;
    background-image: url("../img/01iwannabe_project/04persona_page/bg.png");
}






#section06 .balloon{
    position: absolute;
    width: 1402px;
    height: 416px;
    top: 314px;
    left: 50%;
    margin-left: -701px;
    /*background: dodgerblue;*/
}


#section06 .balloon >div:nth-child(1){
    position: absolute;
    top: -13px;
    left: -26px;
}

#section06 .balloon >div:nth-child(2){
    position: absolute;
    top: -13px;
    left: 428px;
}

#section06 .balloon >div:nth-child(3){
    position: absolute;
    top: -13px;
    right: -40px;
}


#section06 .balloon >div{

    transform:scale(0);
    transition: all 1s cubic-bezier(1, 0.15, 0.1, 1.16)
}
/*  translate 상하좌우, rotation 회전, scale 크기 , overflow 마스킹 애니메이션 */

#section06.on .balloon >div{
    transform:scale(1);
}

#section06 .balloon >div:nth-child(1){transition-delay:0.1s}
#section06 .balloon >div:nth-child(2){transition-delay:0.5s}
#section06 .balloon >div:nth-child(3){transition-delay:0.9s}













#section06 .txt{
    position: absolute;
    width: 1265px;
    height: 69px;
    top: 407px;
    left: 50%;
    margin-left: -632px;
    /*background: dodgerblue;*/
}


#section06 .txt .mom{
    position: absolute;
    top: 0;
    left: 0;
}

#section06 .txt .mom >div:nth-child(1){
    margin-bottom: 12px;
}



#section06 .txt .baby{
    position: absolute;
    top: 11px;
    left: 427px;
}

#section06 .txt .daddy{
    position: absolute;
    top: 0;
    right: -35px;
    text-align: right;
}

#section06 .txt .daddy >div:nth-child(1){
    margin-bottom: 12px;
}



#section06 .txt .mom >div:nth-child(1),
#section06 .txt .mom >div:nth-child(2),
#section06 .txt .baby >div,
#section06 .txt .daddy >div:nth-child(1),
#section06 .txt .daddy >div:nth-child(2){
    transform: scale(0);
    opacity: 0;
    transition: all 1s;
}

#section06.on .txt .mom >div:nth-child(1),
#section06.on .txt .mom >div:nth-child(2),
#section06.on .txt .baby >div,
#section06.on .txt .daddy >div:nth-child(1),
#section06.on .txt .daddy >div:nth-child(2){
    transform: scale(1);
    opacity: 1;
}



#section06 .txt .mom >div:nth-child(1){transition-delay:0.4s}
#section06 .txt .mom >div:nth-child(2){transition-delay:0.6s}
#section06 .txt .baby >div{transition-delay:0.8s}
#section06 .txt .daddy >div:nth-child(1){transition-delay:1.2s}
#section06 .txt .daddy >div:nth-child(2){transition-delay:1.3s}






#section06 .character{
    position: absolute;
    width: 1532px;
    height: 257px;
    bottom: 0;
    left: 50%;
    margin-left: -766px;
}

#section06 .character .baby{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -307px;
    width: 614px;
}

#section06 .character .baby>div:nth-child(1){
    position: absolute;
    bottom: -67px;
}


#section06 .character .baby>div:nth-child(2){
    position: absolute;
    bottom: -69px;
    left: 167px;
}


#section06 .character >div:nth-child(3){
    position: absolute;
    right: 0;
    top: 0;
}



#section06 .character >div{

    transform:translateY(240px);
    transition: all 1s cubic-bezier(1, 0.15, 0.1, 1.16)
}
/*  translate 상하좌우, rotation 회전, scale 크기 , overflow 마스킹 애니메이션 */

#section06.on .character >div{
    transform:translateY(0);
}

#section06 .character >div:nth-child(1){transition-delay:0.1s}
#section06 .character >div:nth-child(2){transition-delay:0.5s}
#section06 .character >div:nth-child(3){transition-delay:0.9s}


/*손 흔들 애니메이션*/

#section06 .character .baby >div:nth-child(1) {
    animation: hands 1s linear 3s infinite alternate;
}

@keyframes hands {
    to{
        transform: translateY(-10px) translateY(0)
    scale(1) scale(1.07);

    }
}











#section07{
    width: 100vw;
    height: 977px;
    position: relative;
}

#section07 .bg{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -488px;
    margin-left: -50vw;

}


#section08{
    width: 100vw;
    height: 983px;
    position: relative;
    background: white;
}

#section08 .bg{
    position: absolute;
    top: 91px;
    left: 372px;
}

#section08 .logo{
    position: absolute;
    width: 1518px;
    height: 208px;
    top: 506px;
    left: 208px;
    /*background: dodgerblue;*/
}

#section08 .logo>div:nth-child(1){
    position: absolute;
    top: 48px;
    left: 0;
}

#section08 .logo>div:nth-child(2){
    position: absolute;
    top: 0;
    left: 606px;
}

#section08 .logo>div:nth-child(3){
    position: absolute;
    top: 0;
    left: 1120px;
}

#section08 .logo>div:nth-child(4){
    position: absolute;
    top: 0;
    right: -28px;
}


#section08 .logo>div{

    transform:scale(0);
    transition: all 1s cubic-bezier(1, 0.15, 0.1, 1.16)
}
/*  translate 상하좌우, rotation 회전, scale 크기 , overflow 마스킹 애니메이션 */

#section08.on .logo>div{
    transform:scale(1);
}

#section08 .logo >div:nth-child(1){transition-delay:0.1s}
#section08 .logo >div:nth-child(2){transition-delay:0.4s}
#section08 .logo >div:nth-child(3){transition-delay:0.7s}
#section08 .logo >div:nth-child(4){transition-delay:1s}

















#section09{
    width: 100vw;
    height: 2340px;
    position: relative;
    background: white;
}



#section09 .bg_2{
    position: absolute;
    left: 0;
    bottom: 314px;
}

#section09 .user_flow{
    position: absolute;
    top: 42px;
    left: 258px;
}

#section09 .user_flow_2{
    position: absolute;
    top: 195px;
    left: 258px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s;
}

#section09 .user_flow_2.on{
    opacity: 1;
    transform: translateY(0);
}






#section09 .circle{
    position: absolute;
    left: 719px;
    bottom: 97px;

}


#section09 .circle>div{
    transform: scale(0) ;
    transition: all .5s cubic-bezier(1, 0.15, 0.1, 1.16);
}

#section09 .circle.on>div{
    transform: scale(1);
}






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

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






#section09 .balloon>div:nth-child(1){
    position: absolute;
    left: 163px;
    bottom: 750px;
}


#section09 .balloon>div:nth-child(2){
    position: absolute;
    left: 190px;
    bottom: 518px;
}

#section09 .balloon>div:nth-child(3){
    position: absolute;
    right: 175px;
    bottom: 657px;
}


#section09 .balloon >div:nth-child(1),
#section09 .balloon >div:nth-child(3){
    animation: jump .8s linear 3s infinite alternate;
}


@keyframes jump {
    to{
        transform: translateY(-15px) translateY(0);
    }
}

#section09 .balloon >div:nth-child(2){
    animation: jump_2 .8s linear 3s infinite alternate;
}

@keyframes jump_2 {
    to{
        transform: translateY(15px) translateY(0);
    }
}

#section09 .iphone{
    position: absolute;
    left: 612px;
    bottom: 153px;
}

/*비디오 넣기*/

#section09 .iphone{
    position: absolute;
    left: 612px;
    bottom: 153px;
    width: 579px;
    height: 943px;
    overflow: hidden;
}




#section09 .iphone .frame{
    position: absolute;
    left: 0;
    top: 0;
}



#section09 .iphone video{
    width: 62%;
    position: absolute;
    left: 350px;
    top: 445px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 34px 34px 34px 34px ;
    z-index: 99;
}





#section10{
    width: 100vw;
    height: 1718px;
    position: relative;
    background: white;
}


#section10 .illust{
    position: absolute;
    right: 0;
    top: 134px;
    animation: moving_hand .8s linear 3s infinite alternate;
}


@keyframes moving_hand {
    to{
        transform: translateY(-35px) translatey(0);
    }
}

#section10 .illust{
    transform: translatex(500px);
    opacity: 0;
    transition: all 1.5s;
}

#section10 .illust.on{
    transform: translatex(0);
    opacity: 1;
}


#section10 .bg{
    position: absolute;
    right: 0;
    top: 591px;
}


#section10 .bg{
    transform: translatex(500px);
    opacity: 0;
    transition: all 1.5s;
}

#section10 .bg.on{
    transform: translatex(0);
    opacity: 1;
}


#section10 .txt{
    position: absolute;
    width: 377px;
    height: 348px;
    top: 195px;
    left: 322px;
}

#section10 .txt >div:nth-child(1){
    margin-bottom: 22px;
}

#section10 .txt >div:nth-child(2){
    margin-bottom: 39px;
}

#section10 .txt >div:nth-child(3){
    margin-bottom: 44px;
}



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

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



#section10 .txt > div:nth-child(1){transition-delay:0.1s}
#section10 .txt > div:nth-child(2){transition-delay:0.3s}
#section10 .txt > div:nth-child(3){transition-delay:0.5s}
#section10 .txt > div:nth-child(4){transition-delay:0.7s}




#section10 .iphone{
    position: absolute;
    top: 535px;
    left: 179px;
    overflow: hidden;
    width: 566px;
    height: 922px;

}




#section10 .iphone .frame{
    position: absolute;
    left: 0;
    top: 0;
}



#section10 .iphone video{
    width: 62%;
    position: absolute;
    left: 340px;
    top: 433px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}

#section10 .iphone{
    transform: translateY(100px);
    opacity: 0;
    transition: all 1.5s;
}

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






#section11{
    width: 100vw;
    height: 2163px;
    position: relative;
    background: white;

}

#section11 .bg >div:nth-child(1){
    position: absolute;
    top: 516px;
    left: 0;
}


#section11 .bg >div:nth-child(2){
    position: absolute;
    top: 72px;
    left: 0;
}

#section11 .bg >div:nth-child(3){
    position: absolute;
    top: 1360px;
    right: 0;
}

#section11 .bg>div:nth-child(3){
    opacity: 0;
    transition: all 1s;
}

#section11 .bg.on>div:nth-child(3){
    opacity: 1;

}


#section11 .character{
    position: absolute;
    top: 198px;
    left: -155px;
    animation: clothes 20s linear 1s infinite alternate;
}

#section11 .c_balloon{
    position: absolute;
    top: 100px;
    left: -145px;
    animation: clothes 20s linear 1s infinite alternate;
}


@keyframes clothes {
    to{
        transform: translatex(-2430px);
    }

}







#section11 .iphone_1{
    position: absolute;
    top: 0;
    right: 411px;
    overflow: hidden;
    width: 566px;
    height: 922px;

}



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



#section11 .iphone_1 video{
    width: 62%;
    position: absolute;
    left: 340px;
    top: 433px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}

#section11 .iphone_2{
    position: absolute;
    top: 424px;
    left: -100px;

}

#section11 .iphone_2{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s;
}

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

#section11 .txt{
    position: absolute;
    width: 551px;
    height: 317px;
    top: 938px;
    right: 271px;
}

#section11 .txt >div:nth-child(1){
    margin-bottom: 22px;
}

#section11 .txt >div:nth-child(2){
    margin-bottom: 39px;
}

#section11 .txt >div:nth-child(3){
    margin-bottom: 44px;
}


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

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

#section11 .txt > div:nth-child(1){transition-delay:0.1s}
#section11 .txt > div:nth-child(2){transition-delay:0.3s}
#section11 .txt > div:nth-child(3){transition-delay:0.5s}
#section11 .txt > div:nth-child(4){transition-delay:0.7s}




#section11 .balloon >div:nth-child(1){
    position: absolute;
    bottom: 170px;
    left: 313px;
    animation: jump 1s linear 3s infinite alternate;
}

#section11 .balloon >div:nth-child(2){
    position: absolute;
    bottom: 39px;
    right: 367px;
    animation: jump_2 1s linear 3s infinite alternate;
}

#section11 .balloon>div{
    opacity: 0;
    transform: translateX(500px);
    transition: all 1s;
}

#section11 .balloon.on>div{
    opacity: 1;
    transform: translateX(0);

}


#section12{
    width: 100vw;
    height: 6187px;
    position: relative;
    background: #9ce6f0;
}



/*메인홈_*/
#section12 .mainhome_bg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#section12 .mainhome_txt{
    position: absolute;
    top: 630px;
    left: 339px;
}

#section12 .mainhome_txt{
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s;
}

#section12 .mainhome_txt.on{
    opacity: 1;
    transform: translateX(0);
    transition: all 1s;
}

#section12 .mainhome_phone{
    position: absolute;
    top: 475px;
    left: 529px;
}

#section12 .mainhome_phone{
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s;
}

#section12 .mainhome_phone.on{
    opacity: 1;
    transform: translateX(0);
    transition: all 1s;
}



#section12 .iphone_1 {
    position: absolute;
    top: 940px;
    right: 290px;
    overflow: hidden;
    width: 566px;
    height: 922px;

}

#section12 .iphone_1{
    opacity: 0;
    transform: translatey(50px);
    transition: all 1s;
}

#section12 .iphone_1.on{
    opacity: 1;
    transform: translatey(0);
    transition: all 1s;
}






#section12 .iphone_1 .frame{
    position: absolute;
    left: 128px;
    top: 74px;
}




#section12 .iphone_1 video{
    width: 62%;
    position: absolute;
    left: 340px;
    top: 433px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}


#section12 .mainhome_balloon{
    position: absolute;
    top: 2044px;
    left: 280px;
    animation: jump 1s linear 2s infinite alternate;
}



/*아이콘_*/
#section12 .icon_bg{
    position: absolute;
    top: 2216px;
    left: 0;
}

#section12 .icon_bg{
    opacity: 0;
    transform: translateY(800px);
    transition: all 2s;
}

#section12 .icon_bg.on{
    opacity: 1;
    transform: translateY(0px);
}



#section12 .icon_bg_txt{
    position: absolute;
    top: 2805px;
    left: 286px;
}

#section12 .icon_bg_txt{
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s;
}

#section12 .icon_bg_txt.on{
    opacity: 1;
    transform: translateY(0);
}


#section12 .icon_txt{
    position: absolute;
    top: 2959px;
    left: 240px;
}

#section12 .icon_txt{
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s;
}

#section12 .icon_txt.on{
    opacity: 1;
    transform: translateY(0);
}







#section12 .icon_phone{
    position: absolute;
    top: 2893px;
    left: 202px;
}

#section12 .icon_phone{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s;
}

#section12 .icon_phone.on{
    opacity: 1;
    transform: translateY(0);
}


/*마켓_*/
#section12 .market_bg>div:nth-child(1){
    position: absolute;
    bottom: 1154px;
    left: 50%;
    transform: translateX(-50%);
}


#section12 .market_bg>div:nth-child(2){
    position: absolute;
    bottom: 1628px;
    left: 50%;
    transform: translateX(-50%);
}


#section12 .market_side_txt>div:nth-child(1){
    position: absolute;
    bottom: 2015px;
    left: 0;
}

#section12 .market_side_txt>div:nth-child(2){
    position: absolute;
    bottom: 1507px;
    right: 0;
}

#section12 .market_side_txt>div:nth-child(1){
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s;
}

#section12 .market_side_txt.on>div:nth-child(1){
    opacity: 1;
    transform: translateX(0);
}

#section12 .market_side_txt>div:nth-child(2){
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s;
}

#section12 .market_side_txt.on>div:nth-child(2){
    opacity: 1;
    transform: translateX(0);
}

#section12 .market_side_txt>div:nth-child(2){transition-delay: 0.4s}









#section12 .market_txt_box>div:nth-child(1){
    position: absolute;
    bottom: 874px;
    left: 235px;
}

#section12 .market_txt_box>div:nth-child(2){
    position: absolute;
    bottom: 1824px;
    right: 271px;
}


#section12 .market_txt_box>div:nth-child(1){
    opacity: 0;
    transform: translatex(-100px);
    transition: all 1s;
}

#section12 .market_txt_box.on>div:nth-child(1){
    opacity: 1;
    transform: translatex(0);
}

#section12 .market_txt_box>div:nth-child(1){transition-delay: 1.4s}


#section12 .market_txt_box>div:nth-child(2){
    opacity: 0;
    transform: translatex(100px);
    transition: all 1s;
}

#section12 .market_txt_box.on>div:nth-child(2){
    opacity: 1;
    transform: translatex(0);
}


#section12 .market_phone{
    position: absolute;
    bottom: 1200px;
    right: 542px;
}

#section12 .market_phone{
    opacity: 0;
    transform: translatey(50px);
    transition: all 1s;
}

#section12 .market_phone.on{
    opacity: 1;
    transform: translatey(0);
}




#section12 .market_phone2 {
    position: absolute;
    bottom: 1300px;
    left: 398px;
    overflow: hidden;
    width: 566px;
    height: 922px;

}

#section12 .market_phone2{
    opacity: 0;
    transform: translatey(-50px);
    transition: all 1s;
}

#section12 .market_phone2.on{
    opacity: 1;
    transform: translatey(0);
}



#section12 .market_phone2 .frame{
    position: absolute;
    left: 128px;
    top: 74px;
}





#section12 .market_phone2 video{
    width: 61%;
    position: absolute;
    left: 340px;
    top: 450px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}

#section12 .market_balloon{
    position: absolute;
    bottom: 1720px;
    right: 145px;
    animation: jump 1s linear 3s infinite alternate;
}






/*코디*/
#section12 .codi_bg{
    position: absolute;
    bottom: 0;
    left: 0;
}


#section12 .codi_txt{
    position: absolute;
    height: 824px;
    width: 100vw;
    bottom: 141px;
    left: 50%;
    transform: translateX(-50%);
}


#section12 .codi_txt>div:nth-child(1){
    position: absolute;
    top: 0;
    right: 0;
}

#section12 .codi_txt>div:nth-child(2){
    position: absolute;
    bottom: 350px;
    left: 0;
}

#section12 .codi_txt>div:nth-child(3){
    position: absolute;
    bottom: 0;
    left: 417px;
}


#section12 .codi_txt>div:nth-child(1){
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s;
}


#section12 .codi_txt.on>div:nth-child(1){
    opacity: 1;
    transform: translateX(0);
}

#section12 .codi_txt>div:nth-child(2){
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s;
}


#section12 .codi_txt.on>div:nth-child(2){
    opacity: 1;
    transform: translateX(0);
}









#section12 .codi_phone>div:nth-child(1){
    position: absolute;
    bottom: 672px;
    left: 1029px;
}


#section12 .codi_phone>div:nth-child(2){
    position: absolute;
    bottom: 0;
    left: 545px;
}

#section12 .codi_phone>div:nth-child(1){
    opacity: 0;
    transform: translateX(200px);
    transition: all 1s;
}

#section12 .codi_phone.on>div:nth-child(1){
    opacity: 1;
    transform: translateX(0);
}


#section12 .codi_phone>div:nth-child(2){
    opacity: 0;
    transform: translateX(200px);
    transition: all 1s;
}

#section12 .codi_phone.on>div:nth-child(2){
    opacity: 1;
    transform: translateX(0);
}

#section12 .codi_phone>div:nth-child(1){transition-delay: .6s}





#section12 .codi_balloon>div:nth-child(1){
    position: absolute;
    left: 353px;
    bottom: 385px;
    animation: jump 1s linear 2s infinite alternate;
}


#section12 .codi_balloon>div:nth-child(2){
    position: absolute;
    left: 519px;
    bottom: 525px;
    animation: jump_2 1s linear 2s infinite alternate;
}




#section13{
    position: relative;
    width: 100vw;
    height: 2009px;
}

#section13 .choice .frame{
    position: absolute;
    left: 0;
    top: 0;
}



#section13 .choice video{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);

}

#section13 .bg {
    position: absolute;
    left: 0;
    top: 600px;
}


#section13 .illust{
    position: absolute;
    right: 0;
    top: 876px;
    animation: moving_hand .8s linear 3s infinite alternate;
}

#section13 .illust{
    opacity: 0;
    transition: all 1s;
}

#section13 .illust.on{
    opacity: 1;
}




@keyframes moving_hand {
    to{
        transform: translateY(35px) translatey(0);
    }
}





#section13 .iphone_1{
    position: absolute;
    top: 959px;
    right: 0;
}

#section13 .iphone_1{
    transform: translatex(500px);
    opacity: 0;
    transition: all 1.5s;
}

#section13 .iphone_1.on{
    transform: translatex(0);
    opacity: 1;
}






#section13 .iphone{
    transform: translateY(100px);
    opacity: 0;
    transition: all 1.5s;
}

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

#section13 .iphone{
    position: absolute;
    top: 788px;
    left: 0;
    overflow: hidden;
    width: 685px;
    height: 1012px;

}


#section13 .iphone .frame{
    position: absolute;
    left: 0;
    top: 0;
}


#section13 .iphone video{
    width: 51%;
    position: absolute;
    left: 462px;
    top: 433px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}

#section14{
    position: relative;
    width: 100vw;
    height: 980px;
    background: white;
}


#section14 .txt{
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%);
}



#section14 .circle{
    position: absolute;
    top: 362px;
    left: 715px;
    width: 379px;
    height: 379px;
}


#section14 .circle{
    transform: scale(0);
    transition: all .5s cubic-bezier(1, 0.15, 0.1, 1.16);
}

#section14 .circle.on{
    transform: scale(1);
}


#section14 .circle .clothes>div{
    position: absolute;
    top: -310px;
    left: 66px;
    width: 260px;
    height: 245px;
}


#section14 .circle .clothes .slick-slide{

    margin: 0 20px;
}



#section14 .sub_title{
    position: absolute;
    top: 444px;
    left: 301px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section14 .sub_title.on{
    opacity: 1;
    transform: translateY(0);
}







#section14 .typing{
    position: relative;
    top: 504px;
    left: 50%;
    transform: translateX(-50%);
    width: 1265px;
    height: 78px;
}









/*타이핑 효과*/

#section14 .typing .typing_letter>div:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(1){
    opacity: 1;
}



#section14 .typing .typing_letter>div:nth-child(2){
    position: absolute;
    top: 0;
    left: 71px;
    opacity: 0;


}

#section14 .typing .typing_letter.on>div:nth-child(2){
    opacity: 1;

}

#section14 .typing .typing_letter>div:nth-child(3){
    position: absolute;
    top: 0;
    left: 137px;
    opacity: 0;
}


#section14 .typing .typing_letter.on>div:nth-child(3){
    opacity: 1;
}





#section14 .typing .typing_letter>div:nth-child(4) {
    position: absolute;
    top: 0;
    left: 200px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(4){
    opacity: 1;
}



#section14 .typing .typing_letter>div:nth-child(5) {
    position: absolute;
    top: 0;
    left: 267px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(5){
    opacity: 1;
}


#section14 .typing .typing_letter>div:nth-child(6){
    position: absolute;
    top: 0;
    left: 345px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(6){
    opacity: 1;
}



#section14 .typing .typing_letter>div:nth-child(7){
    position: absolute;
    top: 0;
    left: 412px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(7){
    opacity: 1;
}


#section14 .typing .typing_letter>div:nth-child(8){
    position: absolute;
    top: 0;
    left: 723px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(8){
    opacity: 1;
}



#section14 .typing .typing_letter>div:nth-child(9){
    position: absolute;
    top: 0;
    right: 401px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(9){
    opacity: 1;
}

#section14 .typing .typing_letter>div:nth-child(10){
    position: absolute;
    top: 0;
    right: 335px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(10){
    opacity: 1;
}

#section14 .typing .typing_letter>div:nth-child(11){
    position: absolute;
    top: 0;
    right: 269px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(11){
    opacity: 1;
}


#section14 .typing .typing_letter>div:nth-child(12){
    position: absolute;
    top: 0;
    right: 183px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(12){
    opacity: 1;
}


#section14 .typing .typing_letter>div:nth-child(13){
    position: absolute;
    top: 0;
    right: 115px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(13){
    opacity: 1;
}



#section14 .typing .typing_letter>div:nth-child(14){
    position: absolute;
    top: 0;
    right: 48px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(14){
    opacity: 1;
}

#section14 .typing .typing_letter>div:nth-child(15){
    position: absolute;
    top: 0;
    right: 14px;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(15){
    opacity: 1;
}


#section14 .typing .typing_letter>div:nth-child(16){
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}

#section14 .typing .typing_letter.on>div:nth-child(16){
    opacity: 1;
    animation: light .5s linear 3s infinite alternate;
}


#section14 .sub_title{transition-delay: .1s}
#section14 .typing .typing_letter>div:nth-child(1){transition-delay: .2s}
#section14 .typing .typing_letter>div:nth-child(2){transition-delay: .3s}
#section14 .typing .typing_letter>div:nth-child(3){transition-delay: .4s}
#section14 .typing .typing_letter>div:nth-child(4){transition-delay: .5s}
#section14 .typing .typing_letter>div:nth-child(5){transition-delay: .6s}
#section14 .typing .typing_letter>div:nth-child(6){transition-delay: .7s}
#section14 .typing .typing_letter>div:nth-child(7){transition-delay: .8s}
#section14 .circle{transition-delay: 1s}
#section14 .typing .typing_letter>div:nth-child(8){transition-delay: 1.2s}
#section14 .typing .typing_letter>div:nth-child(9){transition-delay: 1.3s}
#section14 .typing .typing_letter>div:nth-child(10){transition-delay: 1.4s}
#section14 .typing .typing_letter>div:nth-child(11){transition-delay: 1.5s}
#section14 .typing .typing_letter>div:nth-child(12){transition-delay: 1.6s}
#section14 .typing .typing_letter>div:nth-child(13){transition-delay: 1.7s}
#section14 .typing .typing_letter>div:nth-child(14){transition-delay: 1.8s}
#section14 .typing .typing_letter>div:nth-child(15){transition-delay: 1.9s}
#section14 .typing .typing_letter>div:nth-child(16){transition-delay: 2s}

















#section15{
    position: relative;
    width: 100vw;
    height: 816px;
}

#section15 .bg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}


#section15 .illust>div:nth-child(1){
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: light .7s linear 5s infinite alternate;
}


#section15 .illust>div:nth-child(2){
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: light .6s linear 4s infinite alternate;
}



@keyframes light {
    to{
        opacity: 1;
    }

    to{
        opacity: 0;
    }
}


#section16{
    position: relative;
    width: 100vw;
    height: 1018px;
    background: red;
}


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





#section16 .light>div:nth-child(1){
    position: absolute;
    top: 386px;
    left: 235px;
    animation: light .8s linear 5s infinite alternate;
}

#section16 .light>div:nth-child(2){
    position: absolute;
    top: 326px;
    left: 585px;
    animation: light .8s linear 5s infinite alternate;
}

#section16 .light>div:nth-child(3){
    position: absolute;
    top: 375px;
    left: 818px;
    animation: light .8s linear 5s infinite alternate;
}







#section16 .iphone{
    position: absolute;
    top: 77px;
    right: 200px;
    overflow: hidden;
    width: 566px;
    height: 922px;

}


#section16 .iphone{
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s;
}

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




#section16 .iphone .frame{
    position: absolute;
    left: 0;
    top: 0;
}



#section16 .iphone video{
    width: 62%;
    position: absolute;
    left: 340px;
    top: 433px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}








#section17{
    position: relative;
    width: 100vw;
    height: 2173px;
}

#section17 .bg{
    position: absolute;
    right: 0;
    top: 0;
}

#section17 .circle>div:nth-child(1){
    position: absolute;
    top: 279px;
    left: 216px;
}

#section17 .circle>div:nth-child(2){
    position: absolute;
    top: 269px;
    right: -80px;
}


#section17 .circle>div:nth-child(3){
    position: absolute;
    bottom: 217px;
    left: 1011px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;


}

#section17 .circle>div:nth-child(3).on{
    opacity: 1;
    transform: translateY(0);
    animation: jump 1s linear 3s infinite alternate;

}


#section17 .circle>div:nth-child(1){
    transform: scale(0);
    transition: all .5s cubic-bezier(1, 0.15, 0.1, 1.16);
}

#section17 .circle.on>div:nth-child(1){
    transform: scale(1);
}









#section17 .title{
    position: absolute;
    top: 554px;
    left: 872px;
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s;
}


#section17 .title.on{
    opacity: 1;
}



#section17 .txt{
    position: absolute;
    width: 1878px;
    height: 780px;
    top: 667px;
    left: 42px;
}

#section17 .txt>div:nth-child(1){
    position: absolute;
    left: 426px;
    bottom: 78px;
}

#section17 .txt>div:nth-child(2){
    position: absolute;
    right: 0;
    bottom: 0;
}

#section17 .txt>div:nth-child(1){
    opacity: 0;
    transform: translatey(50px);
    transition: all 1s;
}

#section17 .txt.on>div:nth-child(1){
    opacity: 1;
    transform: translatey(0);
}


#section17 .txt>div:nth-child(2){
    opacity: 0;
    transform: translateX(200px);
    transition: all 1s;
}

#section17 .txt.on>div:nth-child(2){
    opacity: 1;
    transform: translateX(0);
}




#section17 .txt>div:nth-child(3){
    position: absolute;
    top: 0;
    left: 125px;
    animation: jump 1s linear 3s infinite alternate;
}


#section17 .txt>div:nth-child(4){
    position: absolute;
    top: 147px;
    left: 0;
    animation: jump_2 1s linear 3s infinite alternate;
}



#section17 .iphone_1{
    position: absolute;
    left: 790px;
    top: 700px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section17 .iphone_1.on{
    opacity: 1;
    transform: translateY(0);
}







#section17 .iphone{
    position: absolute;
    left: 260px;
    top: 314px;
    overflow: hidden;
    width: 566px;
    height: 922px;

}


#section17 .iphone .frame{
    position: absolute;
    left: 0;
    top: 0;
}


#section17 .iphone video{
    width: 62%;
    position: absolute;
    left: 340px;
    top: 433px;
    transform: translate(-50%, -50%);
    margin-top: 15px;
    border-radius: 32px 32px 32px 32px ;
    z-index: 99;
}














#section17 .illust{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1312px;
    height: 256px;
}

#section17 .illust>div:nth-child(2){
    position: absolute;
    top:0;
    left:505px;
}

#section17 .illust>div:nth-child(3){
    position: absolute;
    top:0;
    right:0;
}

#section17 .illust >div{

    transform:translateY(240px);
    transition: all 1s cubic-bezier(1, 0.15, 0.1, 1.16)
}
/*  translate 상하좌우, rotation 회전, scale 크기 , overflow 마스킹 애니메이션 */

#section17 .illust.on >div{
    transform:translateY(0);
}

#section17 .illust>div:nth-child(1){transition-delay:0.1s}
#section17 .illust>div:nth-child(2){transition-delay:0.5s}
#section17 .illust>div:nth-child(3){transition-delay:0.9s}





#section18{
    position: relative;
    width: 100vw;
    height: 1151px;
    background: white;
}

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


#section18 .balloon{
    position: absolute;
    top: 21px;
    left: 50%;
    transform: translateX(-50%);
}