#section01{
    background-color: #0d0d0d;
    width: 100%;
    height: 5632px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
}


#section01 .main{
    background-color: #0d0d0d;
    width: 100%;
    height: 1417px;
    position: absolute;
    top: 0;
    left: 0;
}




#section01 .s1_icon{
    width: 172px;
    height: 680px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -73%);
    z-index: 1000;
}


#section01 .s1_icon_media{
    position: absolute;
    width: 164px;
    height: 139px;
    bottom: 0;
    left: 0;
    z-index: 100;
    animation: move01 1.6s ease forwards;
}

@keyframes move01 {
    0%{
        opacity: 0;
        bottom: 0;
    }

    50%{
        opacity: 1;
        transform: translateY(-280px) scale(1.2) ;
    }

    100%{
        opacity: 0;
        transform: translateY(-560px);
    }
}




#section01 .s1_icon_shopping{
    position: absolute;
    width: 172px;
    height: 155px;
    bottom: 0;
    left: 0;
    z-index: 100;
    animation: move02 1.6s 0.8s ease forwards;
    opacity: 0;
}

@keyframes move02 {
    0%{
        opacity: 0;
        bottom: 0;
    }

    50%{
        opacity: 1;
        transform: translateY(-280px) scale(1.2);
    }

    100%{
        opacity: 0;
        transform: translateY(-560px);
    }
}







#section01 .s1_icon_movie{
    position: absolute;
    width: 160px;
    height: 132px;
    bottom: 0;
    left: 0;
    z-index: 100;
    animation: move03 1.6s 1.6s ease forwards;
    opacity: 0;
}

@keyframes move03 {
    0%{
        opacity: 0;
        bottom: 0;
    }

    50%{
        opacity: 1;
        transform: translateY(-280px) scale(1.2);
    }

    100%{
        opacity: 0;
        transform: translateY(-560px);
    }
}





#section01 .s1_icon .s1_mockup{
    position: absolute;
    width: 301px;
    height: 557px;
    bottom: 0;
    left: 50%;
    margin-left: -150px;
    z-index: 100;
    animation: move04 1.2s 2.4s ease forwards;
    opacity: 0;
}

@keyframes move04 {
    0%{
        opacity: 0;
        bottom: 0;
    }


    100%{
        opacity: 1;
        transform: translateY(-230px) scale(1.1);
    }
}










#section01 .s1_bg_icon2{
    position: absolute;
    width: 1813px;
    height: 952px;
    top: 0;
    left: 50%;
    transform: translateX(-47%);
    z-index: 1000;
}

#section01 .s1_title{
    width: 1343px;
    height: 93px;
    position: absolute;
    top: 491px;
    left: 50%;
    margin-left: -671px;
    z-index: 100;
    opacity: 100%;
}


#section01 .s1_bg_circle{
    width: 1854px;
    height: 1516px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -927px;
    z-index: 50;
    opacity: 100%;
}


#section01 .s1_mockup{
    width: 301px;
    height: 557px;
    position: absolute;
    top: 279px;
    left: 50%;
    margin-left: -164px;
    z-index: 600;
}








#section01 .s1_ow{
    position: absolute;
    width: 1519px;
    height: 700px;
    top: 1290px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

#section01 .s1_ow_box{
    position: absolute;
    width: 1519px;
    height: 700px;
    top: 0;
    left: 0;
    transition: all 1s;

}





#section01 .s1_ow .ow_bg_rect{
    position: absolute;
    width: 1519px;
    height: 700px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}


#section01 .s1_ow .ow_cont{
    position: absolute;
    width: 1029px;
    height: 515px;
    top: 82px;
    left: 50%;
    margin-left: -514px;
    z-index: 10000;
}










#section01 .s1_ur{
    position: absolute;
    background-color: #ba4137;
    width: 100%;
    height: 4215px;
    top: 1417px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

#section01 .s1_ur .ur_title{
    position: absolute;
    width: 1013px;
    height: 300px;
    top: 720px;
    left: 50%;
    transform: translateX(-50%);
}

#section01 .s1_ur .ur_title_box{
    position: absolute;
    width: 1013px;
    height: 146px;
    top: 40px;
    left: 0;
    transition: all 1s;
    opacity: 0;
}


#section01 .s1_ur .ur_cont{
    position: absolute;
    width: 1690px;
    height: 1534px;
    top: 897px;
    left: 50%;
    transform: translateX(-50%);
}













#section01 .s1_bg{
    position: absolute;
    width: 100%;
    height: 1645px;
    bottom: 0;
    left: 0;
    z-index: 10000;
}

#section01 .s1_bg .bg_title{
    position: absolute;
    width: 629px;
    height: 146px;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

#section01 .s1_bg .bg_title_box{
    position: absolute;
    width: 629px;
    height: 146px;
    top: 0;
    left: 0;
    transition: all 1s;
    opacity: 0;
}

#section01 .s1_bg .bg_icons{
    position: absolute;
    width: 100%;
    height: 1645px;
    top: 260px;
    left: 0;
    z-index: 1000;
    transition: all 1s;
}

#section01 .s1_bg .bg_cont{
    position: absolute;
    width: 100%;
    height: 1220px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
/*    background-color: blue;*/
    z-index: 1000;
}

#section01 .s1_bg .bg_cont .bg_cont01{
    position: absolute;
    width: 880px;
    height: 441px;
    bottom: 778px;
    left: 180px;
}

#section01 .s1_bg .bg_cont .bg_cont02{
    position: absolute;
    width: 880px;
    height: 441px;
    bottom: 283px;
    left: 180px;
}

#section01 .s1_bg .bg_cont .bg_cont_char{
    position: absolute;
    width: 964px;
    height: 1315px;
    bottom: 0;
    right: -100px;
    opacity: 0;
    transition: all 1s;
}

#section01 .s1_bg .bg_cont .bg_cont_char.on1{
    opacity: 1;
    transform: translateX(-100px);
}














#section02{
    background-color: #1b1b1b;
    width: 100%;
    height: 6605px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
}

#section02 .bg01{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 4627px;
    background-color: #1b1b1b;
}

#section02 .bg02{
    position: absolute;
    top: 4627px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 4762px;
    background-color: #ececec;
}

#section02 .s2_pg{
    position: relative;
    top: 109px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1166px;
}

#section02 .s2_pg .s2_pg_box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1166px;
    opacity: 0;
    transition: all 1s;
}



#section02 .s2_pg .s2_pg_title{
    position: absolute;
    top: 237px;
    left: 180px;
    width: 131px;
    height: 23px;
}

#section02 .s2_pg .s2_pg_cont{
    position: absolute;
    top: 305px;
    left: 180px;
    width: 1350px;
    height: 648px;
}










#section02 .s2_jm{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1132px;
}

#section02 .s2_jm .s2_jm_cont{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -850px;
    width: 1700px;
    height: 993px;
}

#section02 .s2_jm .s2_jm_cont01{
    position: absolute;
    top: 0;
    left: 0;
    width: 1700px;
    height: 993px;
}


#section02 .s2_jm .s2_jm_line {
    position: absolute;
    left: 368px;
    top: 355px;
    stroke-dashoffset: -1245;
    stroke-dasharray: 1245;
}


#section02 .s2_jm .s2_jm_line.on_s2_jm_line{
    animation: line01 2.3s linear forwards;
}


@keyframes line01 {
    0% {
        stroke-dashoffset: 1245;
    }
    100% {
        stroke-dashoffset: 0;
    }
}



#section02 .s2_jm .s2_jm_emo {
    position: absolute;
    left: 300px;
    top: 291px;
    width: 1252px;
    height: 390px;
}


#section02 .s2_jm .s2_jm_emo > div{
    transform: scale(0.8);
}


#section02 .s2_jm .s2_jm_emo01 {
    position: absolute;
    left: 0px;
    top: 116px;
    width: 130px;
    height: 130px;
    opacity: 0;
}

#section02 .s2_jm .s2_jm_emo01.on_s2_jm_emo01{
    animation: emo01 1s 0s forwards ;
}

@keyframes emo01 {
    0%{
        transform: scale(0.8);
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }

}






#section02 .s2_jm .s2_jm_emo02 {
    position: absolute;
    left: 279px;
    top: 0;
    width: 130px;
    height: 130px;
    opacity: 0;
}

#section02 .s2_jm .s2_jm_emo02.on_s2_jm_emo02{
    animation: emo02 1s 0.5s forwards ;
}

@keyframes emo02 {
    0%{
        transform: scale(0.8);
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }
}







#section02 .s2_jm .s2_jm_emo03 {
    position: absolute;
    left: 557px;
    top: 188px;
    width: 130px;
    height: 130px;
    opacity: 0;
}

#section02 .s2_jm .s2_jm_emo03.on_s2_jm_emo03{
    animation: emo03 1s 1s forwards ;
}

@keyframes emo03 {
    0%{
        transform: scale(0.8);
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }

}







#section02 .s2_jm .s2_jm_emo04 {
    position: absolute;
    bottom: 0;
    right: 282px;
    width: 130px;
    height: 130px;
    opacity: 0;
}

#section02 .s2_jm .s2_jm_emo04.on_s2_jm_emo04{
    animation: emo04 1s 1.4s forwards ;
}

@keyframes emo04 {
    0%{
        transform: scale(0.8);
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }

}







#section02 .s2_jm .s2_jm_emo05 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 130px;
    height: 130px;
    opacity: 0;
}

#section02 .s2_jm .s2_jm_emo05.on_s2_jm_emo05{
    animation: emo05 1s 1.8s forwards ;
}

@keyframes emo05 {
    0%{
        transform: scale(0.8);
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }

}













#section02  .s2_per{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1730px;
}

#section02 .s2_per .s2_per_01{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1560px;
    height: 870px;
}

#section02 .s2_per .s2_per_01 .s2_per_01_char{
    position: absolute;
    top: 104px;
    left: -112px;
    width: 731px;
    height: 666px;
    opacity: 0;
    transition: all 1s;
}

#section02 .s2_per .s2_per_01 .s2_per_01_cont{
    position: absolute;
    top: 273px;
    right: 33px;
    width: 630px;
    height: 503px;
    opacity: 0;
    transition: all 2s;
}




#section02 .s2_per .s2_per_02{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1560px;
    height: 870px;
}

#section02 .s2_per .s2_per_02 .s2_per_02_char{
    position: absolute;
    top: 46px;
    right: -100px;
    width: 697px;
    height: 687px;
    opacity: 0;
    transition: all 1s;
}

#section02 .s2_per .s2_per_02 .s2_per_02_cont{
    position: absolute;
    top: 320px;
    left: 6px;
    width: 673px;
    height: 511px;
    opacity: 0;
    transition: all 1.5s;
}










#section02 .s2_ana{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1560px;
    height: 1100px;
}


#section02 .s2_ana .s2_ana_title{
    position: absolute;
    top: 279px;
    left: 6px;
    width: 434px;
    height: 241px;
}

#section02 .s2_ana .s2_ana_cont{
    position: absolute;
    top: 660px;
    left: 6px;
    width: 600px;
    height: 300px;
}

#section02 .s2_ana .s2_ana_cont01{
    position: absolute;
    top: 0;
    left: 6px;
    width: 489px;
    height: 167px;
}

#section02 .s2_ana .s2_ana_right{
    position: absolute;
    top: 153px;
    right: -63px;
    width: 1060px;
    height: 835px;
}

#section02 .s2_ana .s2_ana_right .s2_bg_rect{
    position: absolute;
    top: 0;
    right: 0;
    width: 1060px;
    height: 835px;
}


#section02 .s2_ana .s2_ana_right .s2_ana_graph{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 603px;
    height: 517px;
}

#section02 .s2_ana .s2_ana_right .s2_ana_graph .s2_ana_graph01{
    position: absolute;
    top: 0;
    left: 0;
    width: 603px;
    height: 517px;
}

#section02 .s2_ana .s2_ana_right .s2_ana_btn_prev{
    position: absolute;
    width: 28px;
    height: 44px;
    top: 50%;
    left: 60px;
    margin-top: -22px;
}

#section02 .s2_ana .s2_ana_right .s2_ana_btn_next{
    position: absolute;
    width: 28px;
    height: 44px;
    top: 50%;
    right: 60px;
    margin-top: -22px;
}






#section02 .s2_asto{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1560px;
    height: 840px;
}

#section02 .s2_asto .s2_asto_cont{
    position: absolute;
    top: 103px;
    left: 0;
    width: 1126px;
    height: 640px;
}

#section02 .s2_asto .s2_asto_title{
    position: absolute;
    top: 176px;
    right: 63px;
    width: 339px;
    height: 321px;
    opacity: 0;
    transition: all 1s;

}












#section02 .s2_etc{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 632px;
}

/*#ab_top .ab_main_bg_f .ab_main_bg_f_01{
    width: 2926px;
    height: 98px;
    left: 0;
    top: 30%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: move01 100s linear infinite;
}

@keyframes move01 {
    0%{

    }

    100% {
        transform: translateX(-100%);
    }
}*/

#section02 .s2_etc .s2_etc_cont01{
    position: absolute;
    top: 102px;
    left: 0;
    width: 2127px;
    height: 141px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    animation: move_s2_etc_cont01 20s linear infinite;
}

@keyframes move_s2_etc_cont01 {
    0%{

    }

    100% {
        transform: translateX(-100%);
    }
}

#section02 .s2_etc .s2_etc_cont01 > img{
    margin-right: 32px;
}





#section02 .s2_etc .s2_etc_cont02{
    position: absolute;
    top: 280px;
    left: 0;
    width: 2037px;
    height: 142px;
    animation: move_s2_etc_cont02 infinite linear 20s;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

@keyframes move_s2_etc_cont02 {
    0%{
        transform: translateX(-100%);
    }

    100% {

    }
}

#section02 .s2_etc .s2_etc_cont02 > img{
    margin-right: 32px;
}






#section03{
    width: 100%;
    height: 2789px;
    position: relative;
}

#section03 .s3_home{
    background-color: #ececec;
    width: 100%;
    height: 1478px;
    position: relative;
}

#section03 .s3_home .s3_home_title{
    width: 777px;
    height: 210px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -388px;
}

#section03 .s3_home .s3_home_bgcircle{
    width: 1580px;
    height: 1580px;
    position: absolute;
    top: 41px;
    left: 50%;
    margin-left: -790px;
}

#section03 .s3_home .s3_home_mem{
    width: 100%;
    height: 1130px;
    position: absolute;
    top: 348px;
    left: 50%;
    transform: translateX(-50%);
}

#section03 .s3_home .s3_home_mem .s3_home_mem01{
    width: 131px;
    height: 216px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 1s;
    transform: scale(0.8);
}

#section03 .s3_home .s3_home_mem .s3_home_mem02{
    width: 337px;
    height: 215px;
    position: absolute;
    top: 314px;
    left: 264px;
    opacity: 0;
    transition: all 1s;
    transform: scale(0.8);
}

#section03 .s3_home .s3_home_mem .s3_home_mem03{
    width: 344px;
    height: 233px;
    position: absolute;
    top: 722px;
    left: 0;
    opacity: 0;
    transition: all 1s;
    transform: scale(0.8);
}

#section03 .s3_home .s3_home_mem .s3_home_mem04{
    width: 247px;
    height: 233px;
    position: absolute;
    top: 166px;
    right: 0;
    opacity: 0;
    transition: all 1s;
    transform: scale(0.8);
}

#section03 .s3_home .s3_home_mem .s3_home_mem05{
    width: 336px;
    height: 215px;
    position: absolute;
    top: 508px;
    right: 324px;
    opacity: 0;
    transition: all 1s;
    transform: scale(0.8);
}

#section03 .s3_home .s3_home_mem .s3_home_mem06{
    width: 287px;
    height: 183px;
    position: absolute;
    top: 947px;
    right: 254px;
    opacity: 0;
    transition: all 1s;
    transform: scale(0.8);
}


#section03 .s3_home .s3_home_mockup{
    width: 469px;
    height: 870px;
    position: absolute;
    top: 737px;
    left: 50%;
    margin-left: -234px;
    opacity: 0;
    transition: all 1s;
}


#section03 .s3_home .s3_home_mockup .s3_home_video{
    position: absolute;
    top: 19px;
    left: 48px;
    transform: scale(0.4615);
    transform-origin: top left;

}

#section03 .s3_home .s3_home_mockup .s3_home_mockup_border{
    position: absolute;
    top: 0;
    left: 0;
}
















#section03 .s3_login{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1311px;
    background-color: #ececec;
}

#section03 .s3_login .s3_login_title{
    position: absolute;
    top: 196px;
    left: 171px;
    width: 777px;
    height: 210px;
}

#section03 .s3_login .s3_login_char{
    position: absolute;
    top: 508px;
    left: 163px;
    width: 570px;
    height: 803px;
}

#section03 .s3_login_page{
    width: 1038px;
    height: 1311px;
    position: absolute;
    top: 0;
    right: 0;
}

#section03 .s3_login_page .s3_login_page01{
    width: 360px;
    height: 779px;
    position: absolute;
    top: 346px;
    left: 0;
}

#section03 .s3_login_page .s3_login_mockup{
    width: 470px;
    height: 869px;
    position: absolute;
    top: 325px;
    left: 412px;
}

#section03 .s3_login_page .s3_login_mockup .s3_login_mockup_border{
    width: 470px;
    height: 869px;
    position: absolute;
    top: 0;
    left: 0;
}

#section03 .s3_login_page .s3_login_mockup .s3_login_video>video{
    width: 360px;
    height: 780px;
    position: absolute;
    top: 22px;
    left: 49px;
}






#section04{
    background-color: #2d2d2d;
    width: 100%;
    height: 2848px;
    position: relative;
}

#section04 .s4_cp{
    position: relative;
    width: 100%;
    height: 1100px;
    background-color: #2d2d2d;
}

#section04 .s4_cp .s4_cp_title{
    position: absolute;
    top: 424px;
    left: 171px;
    width: 537px;
    height: 322px;
    opacity: 1;
    transition: all 1s;
}

#section04 .s4_cp .s4_cp_cont{
    position: absolute;
    width: 1210px;
    height: 1100px;
    top: 200px;
    right: 0;
    opacity: 0;
    transition: all 1s;
}

#section04 .s4_cp .s4_cp_cont .s4_cp_cont01{
    position: absolute;
    width: 686px;
    height: 298px;
    top: 323px;
    left: 347px;
}

#section04 .s4_cp .s4_cp_cont .s4_cp_cont02{
    position: absolute;
    width: 680px;
    height: 301px;
    top: 664px;
    left: 210px;
}

#section04 .s4_cp .s4_cp_cont .s4_cp_cont03{
    position: absolute;
    width: 202px;
    height: 202px;
    top: 190px;
    left: 204px;
}

#section04 .s4_cp .s4_cp_cont .s4_cp_cont04{
    position: absolute;
    width: 156px;
    height: 156px;
    top: 683px;
    left: 950px;
}













#section04 .s4_onboard{
    position: relative;
    width: 100%;
    height: 1748px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#section04 .s4_onboard .s4_onboard_title{
    position: absolute;
    width: 624px;
    height: 292px;
    top: 1103px;
    left: 835px;
}

#section04 .s4_onboard .s4_onboard_page{
    position: absolute;
    width: 1296px;
    height: 1748px;
    top: 0;
    left: 0;
}

#section04 .s4_onboard .s4_onboard_page .s4_onboard_page01{
    position: absolute;
    width: 319px;
    height: 780px;
    top: 505px;
    left: 0;
    opacity: 0;
    transition: all 1.2s;
}

#section04 .s4_onboard .s4_onboard_page .s4_onboard_page02{
    position: absolute;
    width: 360px;
    height: 780px;
    top: 667px;
    left: 401px;
    opacity: 0;
    transition: all 1.2s;
}

#section04 .s4_onboard .s4_onboard_page .s4_onboard_page03{
    position: absolute;
    width: 360px;
    height: 780px;
    top: 428px;
    left: 838px;
    opacity: 0;
    transition: all 1.2s;
}

#section04 .s4_onboard .s4_onboard_char{
    position: absolute;
    width: 551px;
    height: 980px;
    top: 148px;
    right: 0;
}








#section05{
    background-color: #ba4137;
    width: 100%;
    height: 1423px;
}

#section05 .s5_mp_title{
    width: 529px;
    height: 217px;
    position: absolute;
    top: 110px;
    left: 50%;
    margin-left: -264px;
}

#section05 .s5_mp_cont{
    width: 1560px;
    height: 872px;
    position: absolute;
    top: 412px;
    left: 50%;
    margin-left: -780px;
}

#section05 .s5_mp_cont .s5_mp_mockup01{
    width: 469px;
    height: 869px;
    position: absolute;
    top: 0;
    left: 323px;
}

#section05 .s5_mp_cont .s5_mp_mockup02{
    width: 469px;
    height: 869px;
    position: absolute;
    top: 0;
    right: 323px;
}

#section05 .s5_mp_cont .s5_mp_cont01{
    width: 406px;
    height: 707px;
    position: absolute;
    top: 81px;
    left: 70px;
}

#section05 .s5_mp_cont .s5_mp_cont02{
    width: 385px;
    height: 730px;
    position: absolute;
    top: 47px;
    right: 81px;
}










#section06{
    position: relative;
    width: 100%;
    height: 4654px;
    background-color: #ececec;
}

#section06 .s6_bar{
    position: relative;
    width: 100%;
    height: 1680px;
    background-color: #ececec;
}

#section06 .s6_bar .s6_bar_title{
    position: absolute;
    top: 181px;
    left: 50%;
    transform: translateX(-323px);
    width: 646px;
    height: 295px;
}

#section06 .s6_bar .s6_bar_char{
    position: absolute;
    top: 534px;
    left: 0;
    width: 842px;
    height: 1095px;
}

#section06 .s6_bar .s6_bar_page{
    position: absolute;
    width: 1480px;
    height: 880px;
    top: 569px;
    right: 0;
}

#section06 .s6_bar .s6_bar_page01{
    position: absolute;
    width: 360px;
    height: 780px;
    top: 0;
    left: -100px;
    opacity: 0;
    transition: all 1s;
}

#section06 .s6_bar .s6_bar_page01.move_s6_bar_page01{
    transform: translateX(100px);
    opacity: 1;
    transition: 1s 0s ease-in-out;
}






#section06 .s6_bar .s6_bar_page02{
    position: absolute;
    width: 360px;
    height: 780px;
    top: 0;
    left: 340px;
    opacity: 0;
    transition: all 1s;
}

#section06 .s6_bar .s6_bar_page02.move_s6_bar_page02{
    transform: translateX(100px);
    opacity: 1;
    transition: 1s 0.4s ease-in-out;
}





#section06 .s6_bar .s6_bar_page03{
    position: absolute;
    width: 360px;
    height: 780px;
    top: 0;
    left: 784px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section06 .s6_bar .s6_bar_page03.move_s6_bar_page03{
    transform: translateX(100px);
    opacity: 1;
    transition: 1s 0.8s;
}



















#section06 .s6_mc{
    position: relative;
    width: 1560px;
    height: 2974px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#section06 .s6_mc .s6_mc_title{
    position: absolute;
    width: 514px;
    height: 324px;
    top: 84px;
    left: 732px;
}

#section06 .s6_mc .s6_mc_mockup{
    position: absolute;
    width: 489px;
    height: 2756px;
    top: 97px;
    left: 84px;
}

#section06 .s6_mc .s6_mc_page{
    position: absolute;
    width: 744px;
    height: 1622px;
    top: 590px;
    left: 738px;
}

#section06 .s6_mc .s6_mc_page .s6_mc_page01{
    position: absolute;
    width: 320px;
    height: 693px;
    top: 0;
    left: 0;
}

#section06 .s6_mc .s6_mc_page .s6_mc_page02{
    position: absolute;
    width: 320px;
    height: 693px;
    top: 455px;
    left: 422px;
}

#section06 .s6_mc .s6_mc_page .s6_mc_page03{
    position: absolute;
    width: 320px;
    height: 693px;
    bottom: 0;
    left: 0;
}

#section06 .s6_mc .s6_mc_char{
    position: absolute;
    width: 972px;
    height: 640px;
    bottom: 0;
    right: -63px;
}



















#section07{
    position: relative;
    width: 100%;
    height: 2455px;
    background-color: #2d2d2d;
}

#section07 .s7_lp{
    position: relative;
    width: 1560px;
    height: 1315px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#section07 .s7_lp .s7_lp_title{
    position: absolute;
    left: 4px;
    top: 222px;
    width: 485px;
    height: 225px;
}

#section07 .s7_lp .s7_lp_cont{
    position: absolute;
    left: 24px;
    top: 631px;
    width: 475px;
    height: 430px;
}

#section07 .s7_lp .s7_lp_mockup{
    position: absolute;
    right: 0;
    top: 309px;
    width: 950px;
    height: 973px;
}

#section07 .s7_lp .s7_lp_mockup01{
    position: absolute;
    left: 0;
    top: 304px;
    width: 469px;
    height: 869px;
    opacity: 0;
    transition:  all 1s;
}

#section07 .s7_lp .s7_lp_mockup02{
    position: absolute;
    right: 0;
    top: 200px;
    width: 469px;
    height: 870px;
    opacity: 0;
    transition:  all 1s;
}











#section07 .s7_ui{
    width: 1560px;
    height: 1140px;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#section07 .s7_ui .s7_ui_title{
    width: 550px;
    height: 225px;
    position: absolute;
    top: 82px;
    left: 0;
}

#section07 .s7_ui .s7_ui_font{
    width: 594px;
    height: 371px;
    position: absolute;
    top: 481px;
    left: 0;
}

#section07 .s7_ui .s7_ui_color{
    width: 935px;
    height: 767px;
    position: absolute;
    top: 284px;
    right : -108px;
}











#section08{
    position: relative;
    width: 100%;
    height: 7720px;
    background-color: #2d2d2d;
}

#section08 .bg01{
    position: absolute;
    top: 2032px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3996px;
    background-color: #ececec;
}


#section08 .s8_map{
    position: relative;
    width: 100%;
    height: 2450px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#section08 .s8_map .s8_map_title{
    position: absolute;
    top: 62px;
    left: 180px;
    width: 630px;
    height: 298px;
}

#section08 .s8_map .s8_map_cont01{
    position: absolute;
    top: 513px;
    left: 0;
    width: 1875px;
    height: 780px;
}


#section08 .s8_map .s8_map_arrow01{
    position: absolute;
    top: 380px;
    left: 0;
    width: 1875px;
    height: 37px;
}

/*#section06 .s6_bar .s6_bar_page03{
    position: absolute;
    width: 360px;
    height: 780px;
    top: 0;
    left: 784px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section06 .s6_bar .s6_bar_page03.move_s6_bar_page03{
    transform: translateX(100px);
    opacity: 1;
    transition: 1s 0.8s;
}*/

#section08 .s8_map .s8_map_page01{
    position: absolute;
    top: 0;
    left: 124px;
    width: 421px;
    height: 780px;
    opacity: 0;
    transition: all 1s ease-in-out;
}


#section08 .s8_map .s8_map_page01.move_s8_map_page01 {
    transform: translateX(80px);
    opacity: 1;
    transition: 0.8s 0s;
}


#section08 .s8_map .s8_map_page01 .s8_map01_video{
    position: absolute;
    transform: scale(0.415);
    left: 42px;
    top: 14px;
    transform-origin: left top;
}

#section08 .s8_map .s8_map_page01 .s8_map01_border{
    position: absolute;
    top: 0;
    left: 0;
}















#section08 .s8_map .s8_map_page02{
    position: absolute;
    top: 22px;
    left: 604px;
    width: 320px;
    height: 693px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section08 .s8_map .s8_map_page02.move_s8_map_page02 {
    transform: translateX(80px);
    opacity: 1;
    transition: 0.8s 0.3s;
}







#section08 .s8_map .s8_map_page03{
    position: absolute;
    top: 22px;
    left: 1020px;
    width: 320px;
    height: 693px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section08 .s8_map .s8_map_page03.move_s8_map_page03 {
    transform: translateX(80px);
    opacity: 1;
    transition: 0.8s 0.6s;
}






#section08 .s8_map .s8_map_page04{
    position: absolute;
    top: 22px;
    left: 1435px;
    width: 320px;
    height: 693px;
    opacity: 0;
    transition: all 1s ease-in-out;
}
#section08 .s8_map .s8_map_page04.move_s8_map_page04 {
    transform: translateX(80px);
    opacity: 1;
    transition: 0.8s 0.9s;
}







#section08 .s8_map .s8_map_cont02{
    position: absolute;
    top: 1439px;
    right: 0;
    width: 1509px;
    height: 777px;
}

#section08 .s8_map .s8_map_arrow02{
    position: absolute;
    top: 333px;
    right: 0;
    width: 1876px;
    height: 37px;
}

/*#section06 .s6_bar .s6_bar_page03{
    position: absolute;
    width: 360px;
    height: 780px;
    top: 0;
    left: 784px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section06 .s6_bar .s6_bar_page03.move_s6_bar_page03{
    transform: translateX(100px);
    opacity: 1;
    transition: 1s 0.8s;
}*/

#section08 .s8_map .s8_map_page05{
    position: absolute;
    top: 0;
    right: 102px;
    width: 419px;
    height: 777px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section08 .s8_map .s8_map_page05.move_s8_map_page05 {
    transform: translateX(-80px);
    opacity: 1;
    transition: 0.8s 0s;
}


#section08 .s8_map .s8_map_page05 .s8_map01_video{
    position: absolute;
    transform: scale(0.415);
    left: 42px;
    top: 14px;
    transform-origin: left top;
}

#section08 .s8_map .s8_map_page05 .s8_map01_border{
    position: absolute;
    top: 0;
    left: 0;
}






#section08 .s8_map .s8_map_page06{
    position: absolute;
    top: 25px;
    right: 590px;
    width: 320px;
    height: 694px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section08 .s8_map .s8_map_page06.move_s8_map_page06 {
    transform: translateX(-80px);
    opacity: 1;
    transition: 0.8s 0.3s;
}







#section08 .s8_map .s8_map_page07{
    position: absolute;
    top: 22px;
    right: 999px;
    width: 320px;
    height: 693px;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#section08 .s8_map .s8_map_page07.move_s8_map_page07 {
    transform: translateX(-80px);
    opacity: 1;
    transition: 0.8s 0.6s;
}













#section08 .s8_map .s8_map_char{
    position: absolute;
    top: 1384px;
    left: 0;
    width: 459px;
    height: 1018px;
}











#section08 .s8_uf{
    width: 100%;
    height: 1450px;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#section08 .s8_uf .s8_uf_title{
    width: 681px;
    height: 140px;
    position: absolute;
    top: 24px;
    left: 50%;
    margin-left: -340px;
}

#section08 .s8_uf .s8_uf_cont{
    width: 1792px;
    height: 1104px;
    position: absolute;
    top: 416px;
    left: 50%;
    margin-left: -896px;
    opacity: 0;
    transition: all 1s;
}












#section08 .s8_movie{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2260px;
}

#section08 .s8_movie .s8_movie_title{
    position: absolute;
    top: -204px;
    right: 0;
    width: 719px;
    height: 738px;
}

#section08 .s8_movie_page{
    position: absolute;
    top: 220px;
    right: 0;
    width: 1820px;
    height: 1450px;
}

#section08 .s8_movie_page .s8_movie_page01{
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 694px;
}

#section08 .s8_movie_page .s8_movie_page02{
    position: absolute;
    top: 276px;
    left: 409px;
    width: 320px;
    height: 694px;
}

#section08 .s8_movie_page .s8_movie_page03{
    position: absolute;
    top: 540px;
    left: 810px;
    width: 320px;
    height: 694px;
}

#section08 .s8_movie_page .s8_movie_page04{
    position: absolute;
    top: 754px;
    left: 1208px;
    width: 320px;
    height: 694px;
}

#section08 .s8_movie_page .s8_movie_page05{
    position: absolute;
    top: 420px;
    right: 0;
    width: 203px;
    height: 694px;
}


#section08 .s8_movie_char{
    position: absolute;
    top: 1595px;
    right: 0;
    width: 1900px;
    height: 605px;
}
















#section08 .s8_wire{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1040px;
}

#section08 .s8_wire .s8_wire_title{
    position: absolute;
    top: 132px;
    left: 50%;
    transform: translateX(-50%);
    width: 177px;
    height: 27px;
}

#section08 .s8_wire .s8_wire_page{
    position: absolute;
    top: 252px;
    left: 0;
    width: 2196px;
    height: 651px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    animation: move_s8_wire_page 14s linear infinite;
}

@keyframes move_s8_wire_page {
    0%{
        transform: translateX(-100%);
    }

    100% {

    }
}

#section08 .s8_wire .s8_wire_page > img{
    margin-right: 77px;
}










#section08  .s8_bg_icon{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 1500px;
}







#section08 .footer{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}