/* intro css */
#intro{
    width: 100vw;
    height: 100vh;
    background: #000;
    position: absolute;
    z-index: 9999999999;
}

#intro .txt_container{
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /*background-color: orange;*/
}

#intro .txt_container .txt{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#intro .txt_container .txt > img{
    opacity: 0;
    transform: translateX(-100px);
}


#intro .txt_container .line01,
#intro .txt_container .line02,
#intro .txt_container .line03,
#intro .txt_container .line04,
#intro .txt_container .line05,
#intro .txt_container .line06,
#intro .txt_container .line07 {
    position: absolute;
    left: 1920px;
    top: 0;
    height: 100vh;
}

#intro .txt_container .line01,
#intro .txt_container .line02,
#intro .txt_container .line03,
#intro .txt_container .line04,
#intro .txt_container .line05,
#intro .txt_container .line06,
#intro .txt_container .line07 {
    opacity: 0;
    transform: translateX(-1600px);
}

#intro .txt_container .line01{
    width: 40px;
    background-color: red;
}
#intro .txt_container .line02{
    width: 50px;
    background-color: lemonchiffon;
}
#intro .txt_container .line03{
    width: 80px;
    background-color:  white;
}
#intro .txt_container .line04{
    width: 60px;
    background-color: red;
}
#intro .txt_container .line05{
    width: 30px;
    background-color: gold;
}
#intro .txt_container .line06{
    width: 20px;
    background-color: aquamarine;
}
#intro .txt_container .line07{
    width: 40px;
    background-color: deeppink;
}

/*
인트로 부분 img가 어떤건지 몰라서 일단 맨처음꺼 넣어 놨어요 원하는 img로 바꿔주시면 됩니다.
공통클래스를 줘서 전부 다 정가운데 배치 시켜놓은 상태입니다.
그리고 그 안에 img태그만 잡아서 일단 opacity를 0으로 주고
위치를 transform으로 좌측으로 살짝 보내놓았습니다.
그리고 keyframes으로 움직임을 주었습니다.
그리고 움직여야하는 대상들에게 animation을 주었습니다.
(1초동안 / 1번만 실행 / 실행 후 그대로 있기 / 뒤에 1s, 2s, 3s는 딜레이입니다.)

기본적으로 구동가능하게 해놓왔으니깐 원하시는 디태일한 값은 본인이 원하는대로 입력해보세요 :)
*/

#intro .txt_container .txt:nth-child(1) >img{animation:  txt 0.8s 1 forwards 0.8s;}
#intro .txt_container .txt:nth-child(2) >img{animation:  txt 0.8s 1 forwards 1.6s;}
#intro .txt_container .txt:nth-child(3) >img{animation:  txt 0.8s 1 forwards 2.4s;}

#intro .txt_container .line01{animation:  txt02 1.2s cubic-bezier(0.99, 0.06, 0.56, 0.88) forwards 2.8s;}
#intro .txt_container .line02{animation:  txt02 1.2s cubic-bezier(0.99, 0.06, 0.56, 0.88) forwards 2.85s;}
#intro .txt_container .line03{animation:  txt02 1.2s cubic-bezier(0.99, 0.06, 0.56, 0.88) forwards 2.9s;}
#intro .txt_container .line04{animation:  txt02 1.2s cubic-bezier(1, 0.47, 0.56, 0.88) forwards 3.0s;}
#intro .txt_container .line05{animation:  txt02 1.2s cubic-bezier(1, 0.18, 0.56, 0.88) forwards 3.1s;}
#intro .txt_container .line06{animation:  txt02 1.2s cubic-bezier(1, 0.18, 0.56, 0.88) forwards 3.2s;}
#intro .txt_container .line07{animation:  txt02 1.2s cubic-bezier(1, 0.47, 0.56, 0.88) forwards 3.3s;}

@keyframes txt {
    0%{
        opacity: 0;
        transform: translateX(-100px);
    }
    70%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(0);
    }
}

@keyframes txt02 {
    0%{
        opacity: 0;
        transform: translateX(-1600px);
    }
    70%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(0);
    }
}
/* intro css */


#navigation{
    position: relative;
    top: 55px;

}


#navigation .logo{
    position: absolute;
    left: 70px;
    z-index: 9999999;
    width: 119px;
    height: 35px;
}

#navigation .logo > div{
    transform: scale(0.9);
}


#navigation .logo .l_01{
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s;
    opacity: 0.9;
}

#navigation.on .logo .l_01{
    opacity: 0;
}

#navigation.on_1 .logo .l_01{
    opacity: 1;
}




#navigation .logo .l_02{
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s;
    opacity: 0;
}

#navigation.on .logo .l_02{
    opacity: 0.9;
}


#navigation.on_1 .logo .l_02{
    opacity: 0;
}





#navigation .startPoint{
    width: 100px;
    height: 22px;
    position: absolute;
    top: 5px;
    right: 70px;
    z-index: 899998989;
    border: none;
    outline: none;
    cursor: pointer;
}

#navigation .startPoint .dot{
    position: absolute;
    top: 6px;
    left: 0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    transition: all 0.8s;
    background-color: white;
}

#navigation.on .startPoint .dot{
    background-color: black;
}

#navigation.on_1 .startPoint .dot{
    background-color: white;
}

#navigation .startPoint:hover .dot{
    background-color: #ff0000;
}





#navigation .startPoint .r_01{
    position: absolute;
    top: 0;
    right: 0;
    transition: all 1s;
    opacity: 0.9;
}

#navigation.on .startPoint .r_01{
    opacity: 0;
}

#navigation.on_up .startPoint .r_01{
    opacity: 1;
}

#navigation.on_1 .startPoint .r_01{
    opacity: 1;
}


#navigation .startPoint .r_02{
    position: absolute;
    top: 0;
    right: 0;
    transition: all 1s;
    opacity: 0;
}


#navigation.on .startPoint .r_02{
    opacity: 0.9;
}


#navigation.on_1 .startPoint .r_02{
    opacity: 0;
}








#section01{
    background: black;
    height: 6000px;
}

#section01 .intro .iphone{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 55555;
}

#section01 .intro .iphone .scale_1{
    transform: scale(1.1);
}




#section01 .intro .t_01,
#section01 .intro .t_03{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 66666;
}

#section01 .intro .t_02,
#section01 .intro .t_04{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 77777;
}

#section01 .intro .t_01{
    top: 1030px;
}

#section01 .intro .t_02{
    top: 1400px;
}

#section01 .intro .t_03{
    top: 1850px;
}

#section01 .intro .t_04{
    top: 2230px;
}




#section01 .container01{
    width: 1300px;
    height: 1632px;
    position: absolute;
    top: 1200px;
    left: 50%;
    transform: translate(-50%, 0);
    /*background-color: orange;*/
}

#section01 .container01 .text01{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;

}

#section01 .container01 .text02{
    position: absolute;
    top: 282px;
    right: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section01.on1 .container01 .text02{
    opacity: 1;
    transform: translateY(0);
}



#section01 .container01 .text03{
    position: absolute;
    z-index: 9999;
    top: 756px;
    right: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.3s;
}

#section01.on1 .container01 .text03{
    opacity: 1;
    transform: translateY(0);
}


#section01 .container01 .graph{
    position: absolute;
    right: -20px;
    bottom: 0;
    opacity: 0;
    transition: all 1s;
}

#section01.on3 .container01 .graph{
    opacity: 1;
}

#section01 .container01 .image01{
    position: absolute;
    top: 382px;
    left: 0;
}



#section03{
    background: black;
    height: 2362px;
}

#section03 .container02{
    width: 1300px;
    height: 2170px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    /*background-color: orange;*/
}

#section03 .container02 .text01{
    position: absolute;
    top: 0;
    right: 200px;
}


#section03 .container02 .text02{
    position: absolute;
    top: 330px;
    right: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section03.on4 .container02 .text02{
    opacity: 1;
    transform: translateY(0);
}



#section03 .container02 .text03{
    position: absolute;
    top: 1406px;
    right: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}
#section03.on6 .container02 .text03{
    opacity: 1;
    transform: translateY(0);
}



#section03 .container02 .text04{
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section03.on7 .container02 .text04{
    opacity: 1;
    transform: translateY(0);
}





#section03 .container02 .graph{
    position: absolute;
    top: 300px;
    left: -70px;
    transform: scale(0.8);
}

#section03 .container02 .graph > div{
    opacity: 0;
    transition: all 1s;
}

#section03.on5 .container02 .graph > div{
    opacity: 1;
}




#section03 .container02 .arrow{
    position: absolute;
    left: 0;
    bottom: 170px;
    transform: rotate(-90deg);
    transition: all 1s;
}

#section03.on7 .container02 .arrow{
    transform: rotate(0);
}


#section04{
    background: black;
    height: 1350px;
}

#section04 .container03_1{
    width: 1300px;
    height: 394px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    /*background-color: orange;*/
}

#section04 .container03_1 .text01{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section04.on8 .container03_1 .text01{
    opacity: 1;
    transform: translateY(0);
}


#section04 .container03_1 .text02{
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s 0.3s;
}

#section04.on8 .container03_1 .text02{
    opacity: 1;
    transform: translateY(0);
}



#section04 .container03_2{
    width: 1400px;
    height: 774px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    /*background-color: orange;*/
}

#section04 .container03_2 .small{
    transform: scale(0.9);
}



#section04 .container03_2 .box01{
    position: absolute;
    top: 0;
    left: 55px;
    opacity: 0;
    transition: all 1s ;
}

#section04.on9 .container03_2 .box01{
    opacity: 1;
}



#section04 .container03_2 .box02{
    position: absolute;
    top: 150px;
    right: 0;
    opacity: 0;
    transition: all 1s 0.3s;
}

#section04.on9 .container03_2 .box02{
    opacity: 1;
}


#section04 .container03_2 .box03{
    position: absolute;
    top: 430px;
    right: -43px;
    opacity: 0;
    transition: all 1s 0.9s;
}

#section04.on9 .container03_2 .box03{
    opacity: 1;
}

#section04 .container03_2 .box04{
    position: absolute;
    top: 290px;
    left: -42px;
    opacity: 0;
    transition: all 1s 0.6s;
}

#section04.on9 .container03_2 .box04{
    opacity: 1;
}

#section04 .container03_2 .box05{
    position: absolute;
    top: 600px;
    left: 48px;
    opacity: 0;
    transition: all 1s 1.2s;
}
#section04.on9 .container03_2 .box05{
    opacity: 1;
}



#section05{
    background: black;
    height: 1000px;
}

#section05 .container04{
    position: absolute;
    width: 1655px;
    height: 564px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background-color: orange;*/
}

#section05 .container04 > div{
    position: absolute;
}

#section05 .container04 .key{
    top: -19px;
    left: 20px;
}

#section05 .container04 .pizza{
    top: 80px;
    left: 0;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.5s;
}

#section05.on9_2 .container04 .pizza{
    opacity: 1;
}


#section05 .container04 .post01{
    bottom: 40px;
    left: 230px;
    z-index: 111111;
    opacity: 0;
    transition: all 0.5s;
}

#section05.on10 .container04 .post01{
    opacity: 1;
}


#section05 .container04 .post02{
    top: 0;
    left: 515px;
    z-index: 333333;
    opacity: 0;
    transition: all 0.5s 0.4s;
}

#section05.on10 .container04 .post02{
    opacity: 1;
}

#section05 .container04 .post03{
    bottom: 0;
    right: 503px;
    z-index: 444444;
    opacity: 0;
    transition: all 0.5s 0.6s;
}

#section05.on10 .container04 .post03{
    opacity: 1;
}

#section05 .container04 .post04{
    top: 6px;
    right: 414px;
    z-index: 222222;
    opacity: 0;
    transition: all 0.5s 0.2s;
}

#section05.on10 .container04 .post04{
    opacity: 1;
}

#section05 .container04 .post05{
    bottom: 50px;
    right: 197px;
    z-index: 555555;
    opacity: 0;
    transition: all 0.7s 0.8s;
}

#section05.on10 .container04 .post05{
    opacity: 1;
}


#section06{
    background: black;
    height: 800px;
}

#section06 .text01{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}


#section07{
    background: black;
    height: 1160px;
}

#section07 .container05{
    width: 1330px;
    height: 1070px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    /*background-color: orange;*/
}

#section07 .container05 > div{
    position: absolute;
}

#section07 .container05 .text01{
    top: 0;
    left: 0;
}

#section07 .container05 .text02{
    top: 373px;
    right: -50px;
    opacity: 0;
    transition: all 1s;
}

#section07.on12 .container05 .text02{
    opacity: 1;
}


#section07 .container05 .text03{
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 1s 0.5s;
}

#section07.on12 .container05 .text03{
    opacity: 1;
}




/*  여기까지 섹션 1 */

#section08{
    background: black;
    height: 1080px;
}

#section08 .intro02{
    position: absolute;
    width: 619px;
    height: 210px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section08 .intro02 .intro_01{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s;
}

#section08.on13 .intro02 .intro_01{
    opacity: 1;
    transform: translateY(0);
}


#section08 .intro02 .intro_02{
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s 0.2s;
}

#section08.on13 .intro02 .intro_02{
    opacity: 1;
    transform: translateY(0);
}



#section09{
    background: black;
    height: 800px;
}

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

#section09 .iphone_1 .scale_1{
    transform: scale(1.05);
}

#section09 .textbox{
    position: absolute;
    width: 1255px;
    height: 91px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section09 .textbox .left{
    position: absolute;
    left: 0;
}

#section09 .textbox .right{
    position: absolute;
    right: 0;
}









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

#section10 .background{
    position: absolute;
    background-color: black;
    width: 100vw;
    height: 780px;
}

#section10 .container2_01{
    width: 1300px;
    height: 1500px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    /*background-color: dodgerblue;*/
}

#section10 .container2_01 .text01{
    position: absolute;
    top: 200px;
    left: 15px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section10.on14 .container2_01 .text01{
    opacity: 1;
    transform: translateY(0);
}


#section10 .container2_01 .text02{
    position: absolute;
    top: 480px;
    left: 15px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.3s;
}

#section10.on14 .container2_01 .text02{
    opacity: 1;
    transform: translateY(0);
}


#section10 .container2_01 .character{
    position: absolute;
    top: 730px;
    left: 100px;
    transform: scale(0.96);
}

#section10 .container2_01 .b{
    position: absolute;
    top: 750px;
    left: 50px;
}

#section10 .container2_01 .b > img{
    animation: move2 2s linear infinite alternate;
}

@keyframes move2 {
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(-40px);
        opacity: 0.6;
    }
}




#section10 .container2_01 .b-2{
    position: absolute;
    top: 780px;
    left: 100px;
}

#section10 .container2_01 .b-2 > img{
    animation: move 1.5s linear infinite alternate;
}

@keyframes move {
    0%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(1.1);
        opacity: 1;
    }
}




#section10 .container2_01 .phone{
    position: absolute;
    top: 270px;
    right: 30px;
}

#section10 .container2_01 .video_i{
    position: absolute;
    top: 324px;
    right: 93px;
    width: 438px;
    height: 946px;
    background-color: black;
    border-radius: 56px;
    overflow: hidden;
}
#section10 .container2_01 .video_i .scale_i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section10 .container2_01 .video_i .scale_i > video{
    transform: scale(0.564);
}














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

 #section11 .background01{
     position: absolute;
     top: 0;
     left: 50%;
     transform: translate(-50%, 0);
 }

#section11 .container2_02{
    position: absolute;
    width: 1920px;
    height: 3960px;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

#section11 .container2_02 .arrow01{
    position: absolute;
    top: 20px;
    left: 570px;
}



#section11 .container2_02 .t_box{
    position: absolute;
    width: 1450px;
    height: 305px;
    top: 1200px;
    left: 50%;
    transform: translate(-50%, 0);
    /*background: orange;*/
}

#section11 .container2_02 .t_box > div{
    position: absolute;

}

#section11 .container2_02 .t_box .text01{
    top: 11px;
    left: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}
#section11.on15 .container2_02 .t_box .text01{
    opacity: 1;
    transform: translateY(0);
}




#section11 .container2_02 .t_box .text01_2{
    top: 89px;
    left: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.3s;
}
#section11.on15 .container2_02 .t_box .text01_2{
    opacity: 1;
    transform: translateY(0);
}



#section11 .container2_02 .t_box .text02{
    bottom: 115px;
    left: 402px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.4s;
}

#section11.on15 .container2_02 .t_box .text02{
    opacity: 1;
    transform: translateY(0);
}

#section11 .container2_02 .t_box .text02_2{
    bottom: 23px;
    left: 405px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.5s;
}

#section11.on15 .container2_02 .t_box .text02_2{
    opacity: 1;
    transform: translateY(0);
}


#section11 .container2_02 .t_box .text03{
    top: 0;
    right: 386px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.6s;
}

#section11.on15 .container2_02 .t_box .text03{
    opacity: 1;
    transform: translateY(0);
}


#section11 .container2_02 .t_box .text03_2{
    top: 84px;
    right: 383px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.7s;
}

#section11.on15 .container2_02 .t_box .text03_2{
    opacity: 1;
    transform: translateY(0);
}



#section11 .container2_02 .t_box .text04{
    bottom: 117px;
    right: -15px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.8s;
}

#section11.on15 .container2_02 .t_box .text04{
    opacity: 1;
    transform: translateY(0);
}


#section11 .container2_02 .t_box .text04_2{
    bottom: 21px;
    right: -12px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.9s;
}

#section11.on15 .container2_02 .t_box .text04_2{
    opacity: 1;
    transform: translateY(0);
}

#section11 .container2_02 .arrow02{
    position: absolute;
    top: 1470px;
    left: 277px;
}



#section11 .container2_02 .phone02{
    position: absolute;
    bottom: 970px;
    left: 270px;
}

#section11 .container2_02 .video_m{
    position: absolute;
    bottom: 1085px;
    left: 382px;
    width: 398px;
    height: 853px;
    background-color: white;
    border-radius: 56px;
    overflow: hidden;
}
#section11 .container2_02 .video_m .scale_m{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section11 .container2_02 .video_m .scale_m > video{
    transform: scale(0.506);
}







#section11 .container2_02 .screen02{
    position: absolute;
    bottom: 1100px;
    left: 870px;
    opacity: 0;
    transition: all 1s;
}

#section11.on16 .container2_02 .screen02{
    opacity: 1;
}


#section11 .container2_02 .square{
    position: absolute;
    bottom: 1406px;
    right: 218px;
    opacity: 0;
    transition: all 1s 0.3s;
}

#section11.on17 .container2_02 .square{
    opacity: 1;
}

/*#section11 .container2_02 .line{*/
/*    position: absolute;*/
/*    bottom: 1599px;*/
/*    right: 434px;*/
/*    opacity: 0;*/
/*    transition: all 1s;*/
/*}*/

/*#section11.on17 .container2_02 .line{*/
/*    opacity: 1;*/
/*}*/




#section11 .container2_02 .t_box02{
    position: absolute;
    width: 465px;
    height: 262px;
    bottom: 300px;
    right: 215px;
}

#section11 .container2_02 .t_box02 .text01{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section11.on18 .container2_02 .t_box02 .text01{
    opacity: 1;
    transform: translateY(0);
}




#section11 .container2_02 .t_box02 .text02{
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.3s;
}

#section11.on18 .container2_02 .t_box02 .text02{
    opacity: 1;
    transform: translateY(0);
}






#section12{
    background: white;
    height: 2900px;
}

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



#section12 .container2_03{
    position: absolute;
    width: 1920px;
    height: 2895px;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

#section12 .container2_03 .video_c{
    position: absolute;
    top: 296px;
    left: 1127px;
    width: 404px;
    height: 878px;
    background-color: white;
    border-radius: 60px;
    overflow: hidden;
}
#section12 .container2_03 .video_c .scale_c{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section12 .container2_03 .video_c .scale_c > video{
    transform: scale(0.52);
}

#section12 .container2_03 .arrow04{
    position: absolute;
    top: 2165px;
    left: 1155px;
    transform: scale(0.9);
}



#section12 .container2_03 .t_box{
    position: absolute;
    width: 1300px;
    height: 1355px;
    top: 520px;
    left: 50%;
    transform: translate(-50%, 0);
    /*background: orange;*/
}

#section12 .container2_03 .t_box > div{
    position: absolute;
}

#section12 .container2_03 .t_box .text01{
    top: 774px;
    right: 0;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s;
}

#section12.on19 .container2_03 .t_box .text01{
    opacity: 1;
    transform: translateY(0);
}



#section12 .container2_03 .t_box .text02{
    top: 880px;
    right: 0;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s 0.3s;
}

#section12.on19 .container2_03 .t_box .text02{
    opacity: 1;
    transform: translateY(0);
}

#section12 .container2_03 .t_box .look01{
    top: 50px;
    left: 0;
    transform: scale(0.9);
    opacity: 0;
    transition: all 1s;
}

#section12.on20 .container2_03 .t_box .look01{
    opacity: 1;
}

#section12 .container2_03 .t_box .look02{
    bottom: 0;
    left: 0;
    transform: scale(0.9);
    opacity: 0;
    transition: all 1s 0.6s;
}

#section12.on20 .container2_03 .t_box .look02{
    opacity: 1;
}



#section13{
    background: white;
    height: 4200px;
}


#section13 .background03{
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translate(-50%, 0);
}


#section13 .container2_04{
    position: absolute;
    width: 1920px;
    height: 5019px;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
    /*background: orange;*/
}

#section13 .container2_04 > div{
    position: absolute;
}

#section13 .arrow03{
    bottom: 3480px;
    right: 400px;
}

#section13 .container2_04 .arrow_g{
    bottom: 1360px;
    right: 840px;
    transform: scale(0.9);
}

#section13 .container2_04 .video_f{
    top: 218px;
    left: 863px;
    width: 402px;
    height: 868px;
    background-color: white;
    border-radius: 52px;
    overflow: hidden;
}
#section13 .container2_04 .video_f .scale_f{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section13 .container2_04 .video_f .scale_f > video{
    transform: scale(0.515);
}


#section13 .container2_04 .video_f02{
    top: 1664px;
    right: 376px;
    width: 402px;
    height: 850px;
    background-color: white;
    border-radius: 48px;
    overflow: hidden;
}
#section13 .container2_04 .video_f02 .scale_f02{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section13 .container2_04 .video_f02 .scale_f02 > video{
    transform: scale(0.512);
}










#section13 .container2_04 .text01{
    top: 870px;
    left: 350px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section13.on21 .container2_04 .text01{
    opacity: 1;
    transform: translateY(0);
}



#section13 .container2_04 .text02{
    top: 980px;
    left: 350px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.3s;
}

#section13.on21 .container2_04 .text02{
    opacity: 1;
    transform: translateY(0);
}



#section13 .container2_04 .text03{
    bottom: 2270px;
    right: 420px;
    opacity: 0;
    transition: all 1s;
}

#section13.on22_2 .container2_04 .text03{
    opacity: 1;
}

/*#section13 .arrow{*/
/*    position: absolute;*/
/*    bottom: 3050px;*/
/*    right: 200px;*/
/*}*/



#section14{
    background: white;
    height: 4500px;
}

#section14 .background04{
    position: absolute;
    top: -300px;
    left: 50%;
    transform: translate(-50%, 0);
}

#section14 .container2_05{
    position: absolute;
    width: 1920px;
    height: 5579px;
    top: -150px;
    left: 50%;
    transform: translate(-50%, 0);
}


#section14 .container2_05 > div{
    position: absolute;
}

#section14 .container2_05 .video_r{
    top: 254px;
    left: 422px;
    width: 383px;
    height: 830px;
    background-color: white;
    border-radius: 52px;
    overflow: hidden;
}
#section14 .container2_05 .video_r .scale_r{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section14 .container2_05 .video_r .scale_r > video {
    transform: scale(0.493);
}



#section14 .container2_05 .video_last{
    bottom: 979px;
    right: 775px;
    width: 378px;
    height: 817px;
    background-color: white;
    border-radius: 52px;
    overflow: hidden;
}
#section14 .container2_05 .video_last .scale_last{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section14 .container2_05 .video_last .scale_last > video {
    transform: scale(0.484);
}




#section14 .container2_05 .text01{
    top: 330px;
    right: 360px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section14.on23 .container2_05 .text01{
    opacity: 1;
    transform: translateY(0);
}


#section14 .container2_05 .text02{
    top: 420px;
    right: 360px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.3s;
}

#section14.on23 .container2_05 .text02{
    opacity: 1;
    transform: translateY(0);
}

#section14 .container2_05 .app{
    top: 660px;
    right: 500px;
    opacity: 0;
    transition: all 1s 0.6s;
}

#section14.on23 .container2_05 .app{
    opacity: 1;
}


#section14 .container2_05 .screen_b{
    top: 1005px;
    right: 355px;
    opacity: 0;
    transition: all 1s .6s;
    /*transform: scale(0.5);*/
}

#section14.on23 .container2_05 .screen_b{
    opacity: 1;
}

#section14 .container2_05 .screen{
    top: 1025px;
    right: 375px;
    opacity: 0;
    transition: all 1s .6s;
}

#section14.on23 .container2_05 .screen{
    opacity: 1;
}

#section14 .container2_05 .screen_p{
    top: 1310px;
    right: 400px;
    transition: all 1s;
    transform: scale(0);
}

#section14.on23_2 .container2_05 .screen_p{
    transform: scale(1);
}

#section14 .container2_05 .screen_p_1{
    top: 1300px;
    left: 260px;
    transition:  all 1s 0.3s;
    transform: scale(0);
}

#section14.on23_2 .container2_05 .screen_p_1{
    transform: scale(0.8);
}

#section14 .container2_05 .screen_p_2{
    top: 1600px;
    left: 400px;
    transition:  all 1.2s 0.6s;
    transform: scale(0);
}

#section14.on23_2 .container2_05 .screen_p_2{
    transform: scale(0.8);
}






#section14 .container2_05 .text03{
    top: 2200px;
    left: 310px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section14.on24 .container2_05 .text03{
    opacity: 1;
    transform: translateY(0);
}

#section14 .container2_05 .text04{
    top: 2310px;
    left: 310px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.3s;
}

#section14.on24 .container2_05 .text04{
    opacity: 1;
    transform: translateY(0);
}



#section14 .container2_05 .screen_01{
    top: 2080px;
    right: 150px;
    transform: scale(1.1);
}


#section14 .container2_05 .screen_02{
    top: 2650px;
    right: 350px;
    opacity: 0;
    /*transform: translateY(-200px);*/
    transition: all 1s 0.3s;
}

#section14.on24_1 .container2_05 .screen_02{
    opacity: 1;
    /*transform: translateY(0);*/
    transform: scale(1.05);
}


#section14 .container2_05 .screen_03{
    top: 2470px;
    right: 350px;
    opacity: 0;
    /*transform: translateY(-200px);*/
    transition: all 1s 0.6s;
}

#section14.on24_1 .container2_05 .screen_03{
    opacity: 1;
    /*transform: translateY(0);*/
    transform: scale(1.12);
}

#section14 .container2_05 .text05{
    right: 270px;
    bottom: 1220px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s;
}

#section14.on25 .container2_05 .text05{
    opacity: 1;
    transform: translateY(0);
}


#section14 .container2_05 .text06{
    right: 290px;
    bottom: 1090px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s 0.3s;
}

#section14.on25 .container2_05 .text06{
    opacity: 1;
    transform: translateY(0);
}




#section15{
    background: black;
    height: 1900px;
}

#section15 .container2_06{
    position: absolute;
    width: 1920px;
    height: 2250px;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
}

#section15 .container2_06 > div{
    position: absolute;
}

#section15 .container2_06 .text{
    top: 125px;
    right: 200px;
    opacity: 0;
    transition: all 1s;
}

#section15.on26 .container2_06 .text{
    opacity: 1;
}


#section15 .container2_06 .phone{
    top: 375px;
    left: 230px;
    transform: scale(0.9);
}

#section15 .container2_06 .icon{
    top: 750px;
    right: 360px;
    transform: scale(0.8);
    opacity: 0.2;
    transition: all 1s;
}


#section15.on26_2 .container2_06 .icon{
    opacity: 1;
}


#section16{
    background: black;
    height: 1800px;
}


#section16 .pizza{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11111111;
    opacity: 0;
    transition: all 1s;
}

#section16.on27 .pizza{
    opacity: 1;
}


#section16 .dot01{
    position: absolute;
    top: 945px;
    left:  206px;
    width: 200px;
    height: 200px;
    background-color: #fc0000;
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.7s 0.9s;
    z-index: 2222222222;
}

#section16.on27 .dot01{
    transform: scale(1);
}

#section16 .dot02{
    position: absolute;
    top: 647px;
    left: 664px;
    width: 200px;
    height: 200px;
    background-color: #fc0000;
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.7s 0.5s;
    z-index: 2222222222;
}

#section16.on27 .dot02{
    transform: scale(1);
}

#section16 .dot03{
    position: absolute;
    top: 1060px;
    left: 674px;
    width: 200px;
    height: 200px;
    background-color: #fc0000;
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.7s 0.7s;
    z-index: 33333;
}

#section16.on27 .dot03{
    transform: scale(1);
}

#section16 .dot04{
    position: absolute;
    top: 920px;
    left: 1120px;
    width: 200px;
    height: 200px;
    background-color: #fc0000;
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.7s 0.2s;
    z-index: 33333;
}

#section16.on27 .dot04{
    transform: scale(1);
}

#section16 .dot05{
    position: absolute;
    top: 500px;
    left: 1450px;
    width: 200px;
    height: 200px;
    background-color: #fc0000;
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.7s 0.9s;
    z-index: 33333;
}

#section16.on27 .dot05{
    transform: scale(1);
}









#section16 .container2_07{
    position: absolute;
    width: 1920px;
    height: 1500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section16 .container2_07 .top{
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 1s;
}

#section16.on27_1 .container2_07 .top{
    transform: scale(1);
}

#section16 .container2_07 .down{
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scale(0);
    transition: all 1s;
}

#section16.on27_2 .container2_07 .down{
    transform: scale(1);
}

#section17{
    background: #ff5b00;
    height: 1080px;
}


#section17 .container2_08{
    position: absolute;
    width: 1920px;
    height: 1025px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

#section17 .container2_08 .big_17{
    position: absolute;
    bottom: 0;
    left: 0;

}

/*#section17 .container2_08 > div{
    position: absolute;
}*/


#section17 .container2_08 .c_01{
    position: absolute;
    top: 337px;
    right: 686px;
    transition: all 0.5s;
    transform: scale(0);
}
#section17.on28 .container2_08 .c_01{
    transform: scale(1);
}


#section17 .container2_08 .c_02{
    position: absolute;
    top: 257px;
    right: 596px;
    transition: all 0.75s 0.3s;
    transform: scale(0);
}
#section17.on28 .container2_08 .c_02{
    transform: scale(1);
}


#section17 .container2_08 .c_03{
    position: absolute;
    top: 0;
    right: 90px;
    transition: all 1s 0.6s;
    transform: scale(0);
}
#section17.on28 .container2_08 .c_03{
    transform: scale(1);
}






#section17 .t_box_last{
    position: absolute;
    width: 1300px;
    height: 120px;
    bottom: 53px;
    left: 50%;
    transform: translate(-50%, 0);
    /*background-color: dodgerblue;*/
}

#section17 .t_box_last > div{
    position: absolute;
}




#section17 .t_box_last .text01{
    left: 0;
    top: 30px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.5s;
}
#section17.on28 .t_box_last .text01{
    opacity: 1;
    transform: translateY(0);
}

#section17 .t_box_last .text02{
    left: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.5s;
}
#section17.on28 .t_box_last .text02{
    opacity: 1;
    transform: translateY(0);
}

#section17 .t_box_last .text03{
    right: 0;
    top: 55px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.5s;
}
#section17.on28 .t_box_last .text03{
    opacity: 1;
    transform: translateY(0);
}


#section17 .t_box_last .text04{
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.5s;
}
#section17.on28 .t_box_last .text04{
    opacity: 1;
    transform: translateY(0);
}