#intro {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 9999999999;
    background: linear-gradient(#FC7E42, #FC662F);

}

#intro > div {
    transform: translateY(50px) scale(0);
}

#intro .line01 {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -1101px;
}

#intro .info {
    width: 180px;
    height: 112px;
    position: absolute;
    right: 334px;
    top: 356px;
}

#intro .info > div {
    opacity: 0;
    transform: translateY(50px);
}

#intro .info > .txt {
    position: absolute;
    right: 0;
    bottom: 0;
}

#intro .tag01 {
    position: absolute;
    left: 472px;
    top: 180px;
    rotate: 5deg;
}

#intro .tag02 {
    position: absolute;
    left: 548px;
    top: 473px;
    rotate: -12deg;
}

#intro .ic01 {
    position: absolute;
    left: 468px;
    top: 490px;
}

#intro .arrow {
    position: absolute;
    right: 523px;
    top: 511px;
    rotate: 138deg;
}

#intro .ic02 {
    position: absolute;
    right: 640px;
    top: 693px;
    rotate: 23deg;
}

#intro .blue {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    overflow: hidden;
}

#intro .blue.on > div {
    transform: translateY(100vh);
}

#intro .blue .blue_list01 {
    background: #d1edf8;
    flex: 1;
    transition: all 1s;
}

#intro .blue .blue_list02 {
    background: #d1edf8;
    flex: 1;
    transition: all 1s 0.3s;
}

#intro .blue .blue_list03 {
    background: #d1edf8;
    flex: 1;
    transition: all 1s 0.6s;
}


#section01 {
    background: #d1edf8;
    height: 1415px;
    position: relative;
}

#section01 .top {
    width: 1720px;
    height: 45px;
    position: absolute;
    left: 50%;
    top: 110px;
    margin-left: -860px;
    display: flex;
    justify-content: space-between;
}

#section01 .top > div {
    opacity: 0;
    transform: translateX(-50px);
}

#section01 .top > .info01 {
    width: 234px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#section01 .top > .info02 {
    width: 85px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


#section01 .top > .info03 {
    width: 85px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


#section01 .top > .info04 {
    width: 113px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


#section01 .top > .info05 {
    width: 144px;
    height: 40px;
    display: flex;
    justify-content: space-between;
}


/*메인 title*/
#title {
    width: 404px;
    height: 220px;
    position: absolute;
    left: 100px;
    top: 330px;
}

#title .title01 {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

#title .title01 > img {
    transform: translateX(-300px);
    animation: move01 .7s ease-in-out 1 forwards 6s;
}

@keyframes move01 {
    0% {
        transform: translateX(-300px);
    }

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


#title .union {
    position: absolute;
    right: 40px;
    top: 20px;
}

#title .title02 {
    position: absolute;
    right: 0;
    top: -5px;
    overflow: hidden;
}

#title .title02 > img {
    transform: translateY(90px);
    animation: move02 .7s ease-in-out 6.1s 1 forwards;
}

@keyframes move02 {
    0% {
        transform: translateY(90px);
    }

    100% {
        transform: translateY(0);
    }
}


#title .arrow {
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;

}

#title .arrow > img {
    transform: translateX(-70px);
    animation: move03 .7s ease-in-out 6.2s 1 forwards;
}

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

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


#title .title03 {
    position: absolute;
    left: 90px;
    bottom: 0;
    overflow: hidden;
}

#title .title03 > img {
    transform: translateY(90px);
    animation: move04 .7s ease-in-out 6.3s 1 forwards;
}

@keyframes move04 {
    0% {
        transform: translateY(90px);
    }

    100% {
        transform: translateY(0);
    }
}


#title .title04 {
    position: absolute;
    right: 0;
    bottom: -30px;
    overflow: hidden;
}

#title .title04 > img {
    transform: translateY(120px);
    animation: move05 .7s ease-in-out 6.4s 1 forwards;
}


@keyframes move05 {
    0% {
        transform: translateY(120px);
    }

    100% {
        transform: translateY(0);
    }
}


#section01 .cloud01 {
    position: absolute;
    left: 100px;
    top: 740px;
    opacity: 0;
}

#section01 .cloud02 {
    position: absolute;
    right: 200px;
    top: 320px;
    opacity: 0;
}

#section01 .cloud03 {
    position: absolute;
    right: 100px;
    top: 560px;
    opacity: 0;
}

#section01 .land03 {
    position: absolute;
    right: 0;
    bottom: 120px;
    transform: translateY(200px);
}

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

#section01 .land01 {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(200px);
}

#section01 .mark {
    position: absolute;
    left: 490px;
    top: 670px;
}

#section01 .mobile {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -370px;
    margin-top: -500px;
}

#section01 .person01 {
    position: absolute;
    left: 420px;
    bottom: 90px;
    transform: translateX(-100px);
}

#section01 .person02 {
    position: absolute;
    right: 130px;
    bottom: 130px;
    transform: translateX(100px);
}

#section01 .bush01 {
    position: absolute;
    left: -120px;
    bottom: 0;
}

#section01 .bush02 {
    position: absolute;
    right: 620px;
    bottom: 140px;
}

#section01 .bush03 {
    position: absolute;
    right: -210px;
    bottom: 0;
}

/*왼쪽 꾸밈요소*/
#section01 .flower01 {
    position: absolute;
    left: 70px;
    bottom: -100px;
    transform: translateY(150px) scale(0.5);
}

#section01 .flower02 {
    position: absolute;
    left: 140px;
    bottom: -90px;
    transform: translateY(150px) scale(0.5);
}

#section01 .flower03 {
    position: absolute;
    left: 190px;
    bottom: -90px;
    transform: translateY(150px) scale(0.5);
}

/*오른쪽 꾸밈요소*/
#section01 .flower04 {
    position: absolute;
    right: 160px;
    bottom: -40px;
    transform: translateY(150px) scale(0.5);
}

#section01 .flower05 {
    position: absolute;
    right: 70px;
    bottom: -30px;
    transform: translateY(150px) scale(0);
}

#section01 .reed01 {
    position: absolute;
    right: -10px;
    bottom: 110px;
    transform: translateY(150px) scale(0.5);
}

#section01 .reed02 {
    position: absolute;
    right: -30px;
    bottom: 110px;
    transform: translateY(150px) scale(0.5);
}

#section01 .grass01 {
    position: absolute;
    right: 20px;
    bottom: -30px;
    transform: translateY(150px) scale(0.5);
}

#section01 .grass02 {
    position: absolute;
    right: 20px;
    bottom: -50px;
    transform: translateY(150px) scale(0.5);
}

#section01 .grass03 {
    position: absolute;
    right: -30px;
    bottom: 80px;
    transform: translateY(150px) scale(0.5);
}

/*테이프 띠지*/
#section02 {
    width: 100vw;
    height: 86px;
    background: #FFDEC9;
    position: relative;
}

#section02 .se02_box {
    height: 86px;
    position: absolute;
    left: -2580px;
    top: 0;
    display: flex;
}

#section02 .se02_box .se_inner {
    width: 2580px;
    height: 86px;
    display: flex;
    align-items: center;
}

#group01 {
    width: 830px;
    height: 46px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
}

#group01 .txt {
    width: 468px;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#group01 .txt > .txt02 {
    margin-top: 10px;
}

#group01 .txt > .txt06 {
    margin-top: -8px;
}

#group02 {
    width: 830px;
    height: 46px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
}

#group02 .txt {
    width: 468px;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#group02 .txt > .txt02 {
    margin-top: 10px;
}

#group02 .txt > .txt06 {
    margin-top: -8px;
}

#group03 {
    width: 830px;
    height: 46px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
}

#group03 .txt {
    width: 468px;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#group03 .txt > .txt02 {
    margin-top: 10px;
}

#group03 .txt > .txt06 {
    margin-top: -8px;
}

#group04 {
    width: 830px;
    height: 46px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
}

#group04 .txt {
    width: 468px;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#group04 .txt > .txt02 {
    margin-top: 10px;
}

#group04 .txt > .txt06 {
    margin-top: -8px;
}

#group05 {
    width: 830px;
    height: 46px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
}

#group05 .txt {
    width: 468px;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#group05 .txt > .txt02 {
    margin-top: 10px;
}

#group05 .txt > .txt06 {
    margin-top: -8px;
}

#group06 {
    width: 830px;
    height: 46px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
}

#group06 .txt {
    width: 468px;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#group06 .txt > .txt02 {
    margin-top: 10px;
}

#group06 .txt > .txt06 {
    margin-top: -8px;
}


#section03 {
    background: #ffffff;
    height: 1008px;
    position: relative;
}


#section03 .bg {
    width: 1870px;
    height: 958px;
    border-radius: 64px;
    background: #FF7A3A;
    margin: 25px auto;
    transform: scale(1.5);
}


#section03 .ic01 {
    width: 1590px;
    height: 68px;
    position: absolute;
    left: 50%;
    top: 150px;
    margin-left: -795px;
    display: flex;
    justify-content: space-between;
}


#section03 .ic01 > .line02 {
    transform: rotate(45deg);
}


#section03 .ic02 {
    width: 1590px;
    height: 68px;
    position: absolute;
    left: 50%;
    bottom: 150px;
    margin-left: -795px;
    display: flex;
    justify-content: space-between;
}

#section03 .ic02 > .line03 {
    transform: rotate(45deg);
}


#inside {
    width: 872px;
    height: 658px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -436px;
    margin-top: -329px;
}

#inside .title01 {
    width: 120px;
    position: absolute;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transform: translateY(50px);
}

#inside .title02 {
    position: absolute;
    left: 50%;
    top: 60px;
    margin-left: -335px;
    transform: translateY(50px);
    opacity: 0;
}

#inside .center {
    width: 804px;
    height: 354px;
    position: absolute;
    left: 50%;
    top: 170px;
    margin-left: -402px;
    display: flex;
}

#inside .center > .title03 {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -57.5px;
    transform: translateY(50px);
    opacity: 0;
}

#inside .center > .box01 {
    width: 350px;
    height: 262px;
    background: #252525;
    border-radius: 130px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -131px;
}

#inside .center > .box01 > .box02 {
    width: 350px;
    height: 262px;
    background: #ff7a3a;
}


#inside .center > .person01 {
    position: absolute;
    right: 0;
    top: -16px;
    transform: translateY(50px);
    opacity: 0;
}

#inside .txt {
    width: 872px;
    height: 70px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transform: scale(0.8);
}


#section04 {
    background: #ffffff;
    height: 3864px;
    position: relative;
}

#process {
    width: 1288px;
    height: 952px;
    position: absolute;
    left: 50%;
    top: 166px;
    margin-left: -644px;
    background: #ffffff;
}

/*
contents01 시작
*/
#process .title01 {
    width: 188px;
    position: absolute;
    left: 50%;
    margin-left: -94px;
    transform: translateY(50px);
    opacity: 0;
}

#process .title02 {
    width: 586px;
    position: absolute;
    left: 50%;
    top: 60px;
    margin-left: -293px;
    transform: translateY(50px);
    opacity: 0;
}

#process .title03 {
    width: 806px;
    position: absolute;
    left: 50%;
    top: 160px;
    margin-left: -403px;
    transform: translateY(50px);
    opacity: 0;
}

#process .line {
    width: 990px;
    height: 578px;
    position: absolute;
    left: 50%;
    top: 260px;
    margin-left: -495px;
    display: flex;
    justify-content: space-between;
}


#process .line .line01 > .short {
    position: absolute;
    left: 0;
    bottom: 0;
}

#process .line .line02 > .short {
    position: absolute;
    left: 330px;
    bottom: 0;
}


#process .line .line03 > .short {
    position: absolute;
    right: 330px;
    bottom: 0;
}


#process .line .line04 > .short {
    position: absolute;
    right: 0;
    bottom: 0;
}

#process .short {
    transform: translateY(-500px);
    opacity: 0;
}


#process .chart {
    width: 1252px;
    height: 466px;
    position: absolute;
    left: 50%;
    top: 290px;
    margin-left: -626px;
}

#process .chart > .process01 {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

#process .chart > .process02 {
    position: absolute;
    left: 60px;
    top: 70px;
    opacity: 0;
}

#process .chart > .process03 {
    position: absolute;
    left: 270px;
    top: 140px;
    opacity: 0;
}

#process .chart > .process04 {
    position: absolute;
    left: 540px;
    top: 210px;
    opacity: 0;
}

#process .chart > .process05 {
    position: absolute;
    right: 200px;
    top: 280px;
    opacity: 0;
}

#process .chart > .process06 {
    position: absolute;
    right: 80px;
    top: 350px;
    opacity: 0;
}

#process .chart > .process07 {
    position: absolute;
    right: 0;
    top: 420px;
    opacity: 0;
}

#process .txt {
    width: 1148px;
    height: 96px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -574px;
    display: flex;
    justify-content: space-between;
}

#process .txt .step01 {
    width: 164px;
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(50px);
}

#process .txt .step02 {
    width: 164px;
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(50px);
}


#process .txt .step03 {
    width: 164px;
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(50px);
}

#process .txt .step03 > .txt01 {
    margin-bottom: 32px;
}

#process .txt .step04 {
    width: 164px;
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(50px);
}

/*
contents 02 시작
*/
#desk {
    width: 1288px;
    height: 800px;
    position: absolute;
    left: 50%;
    top: 1410px;
    margin-left: -644px;
    background: #ffffff;
}

#desk .title01 {
    width: 178px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -89px;
    transform: translateY(50px);
    opacity: 0;
}

#desk .title02 {
    width: 928px;
    position: absolute;
    left: 50%;
    top: 60px;
    margin-left: -464px;
    transform: translateY(50px);
    opacity: 0;
}


#desk .title03 {
    width: 958px;
    position: absolute;
    left: 50%;
    top: 160px;
    margin-left: -479px;
    transform: translateY(50px);
    opacity: 0;
}


#desk .graph01 {
    width: 618px;
    height: 535px;
    background: url("../image/section04/contents02/graph01.png");
    position: absolute;
    left: 0;
    bottom: 0;
}

#desk .graph01 > .box {
    width: 390px;
    height: 288px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -195px;
    margin-top: -144px;
    /*background: rgba(0, 0, 0, 0.29);*/
}

#desk .graph01 > .box > .circle01 {
    position: absolute;
    left: 0;
    top: 40px;
    transform: scale(0);
}

#desk .graph01 > .box > .circle02 {
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
}

#desk .graph01 > .box > .circle03 {
    position: absolute;
    right: 80px;
    bottom: 0;
    transform: scale(0);
}

#desk .graph02 {
    width: 618px;
    height: 535px;
    background: url("../image/section04/contents02/graph02.png");
    position: absolute;
    right: 0;
    bottom: 0;
}

#desk .graph02 .graph02_svg {
    position: absolute;
    left: 50%;
    bottom: 156px;
    margin-left: -206px;
}

#desk .graph02 .graph02_svg svg {
    stroke-dasharray: 468;
    stroke-dashoffset: 468;
}

#desk .graph02 > .line {
    position: absolute;
    left: 50%;
    bottom: 156px;
    margin-left: -206px;
}


#desk .graph02 > .pin {
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -7px;
    margin-top: -7px;
    transform: scale(0);
}

#desk .graph02 > .pin01 {
    left: 105px;
    top: 379px;
}

#desk .graph02 > .pin02 {
    left: 186px;
    top: 343px;
}

#desk .graph02 > .pin03 {
    left: 269px;
    top: 298px;
}

#desk .graph02 > .pin04 {
    left: 349px;
    top: 310px;
}

#desk .graph02 > .pin05 {
    left: 430px;
    top: 234px;
}

#desk .graph02 > .pin06 {
    left: 512px;
    top: 196px;
}

/*contents03 시작*/
#position {
    width: 1288px;
    height: 1216px;
    position: absolute;
    left: 50%;
    bottom: 188px;
    margin-left: -644px;
    background: #fff;
}

#position .title01 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -100px;
    transform: translateY(50px);
    opacity: 0;
}

#position .title02 {
    position: absolute;
    left: 50%;
    top: 60px;
    margin-left: -235px;
    transform: translateY(50px);
    opacity: 0;
}

#position .title03 {
    width: 716px;
    position: absolute;
    left: 50%;
    top: 160px;
    margin-left: -358px;
    transform: translateY(50px);
    opacity: 0;
}


#position .graph01 {
    width: 618px;
    height: 535px;
    background: url("../image/section04/contents03/graph01.png");
    position: absolute;
    left: 0;
    top: 270px;
}


#position .graph01 > .marks01 {
    width: 322px;
    height: 18px;
    position: absolute;
    right: 53px;
    top: 157px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#position .graph01 > .marks01 > .mark01 {
    transform: scale(0);
}


#position .graph01 > .marks01 > .mark02 {
    transform: scale(0);
}

#position .graph01 > .marks01 > .mark03 {
    transform: scale(0);
}

#position .graph01 > .marks01 > .mark04 {
    transform: scale(0);
}


#position .graph01 > .marks02 {
    width: 322px;
    height: 18px;
    position: absolute;
    right: 53px;
    top: 234px;
}

#position .graph01 > .marks02 > .mark01 {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(0);
}

#position .graph01 > .marks02 > .mark02 {
    position: absolute;
    left: 101px;
    top: 0;
    transform: scale(0);
}

#position .graph01 > .marks02 > .mark03 {
    position: absolute;
    left: 203px;
    top: 0;
    transform: scale(0);
}


#position .graph01 > .marks03 {
    width: 322px;
    height: 18px;
    position: absolute;
    right: 53px;
    top: 314px;
}

#position .graph01 > .marks03 > .mark01 {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(0);
}


#position .graph01 > .marks03 > .mark02 {
    position: absolute;
    right: 101px;
    top: 0;
    transform: scale(0);
}


#position .graph01 > .marks03 > .mark03 {
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
}


#position .graph01 > .marks04 {
    width: 322px;
    height: 18px;
    position: absolute;
    right: 53px;
    top: 394px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#position .graph01 > .marks04 > .mark01 {
    transform: scale(0);
}


#position .graph01 > .marks04 > .mark02 {
    transform: scale(0);
}

#position .graph01 > .marks04 > .mark03 {
    transform: scale(0);
}

#position .graph01 > .marks04 > .mark04 {
    transform: scale(0);
}


#position .graph01 > .marks05 {
    width: 322px;
    height: 18px;
    position: absolute;
    right: 53px;
    top: 476px;
}


#position .graph01 > .marks05 > .mark01 {
    position: absolute;
    left: 100px;
    top: 0;
    transform: scale(0);
}

#position .graph01 > .marks05 > .mark02 {
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
}


#position .graph01 > .circle01 {
    position: absolute;
    right: 358px;
    bottom: 41px;
    transform: scale(0);
}

#position .graph01 > .circle02 {
    position: absolute;
    right: 257px;
    bottom: 203px;
    transform: scale(0);
}

#position .graph01 > .circle03 {
    position: absolute;
    right: 154px;
    bottom: 41px;
    transform: scale(0);
}

#position .graph01 > .circle04 {
    position: absolute;
    right: 52px;
    bottom: 283px;
    transform: scale(0);
}

#position .graph01 > .ic {
    width: 368px;
    height: 42px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 220px;
    top: 40px;
}

/*#position .graph01 .ic > div {*/
/*    transform: scale(0.8);*/
/*}*/

#position .graph01 .ic > .ic01 {
    transform: scale(0);
}

#position .graph01 .ic > .ic02 {
    transform: scale(0);
}

#position .graph01 .ic > .ic03 {
    transform: scale(0);
}

#position .graph01 .ic > .ic04 {
    transform: scale(0);
}


#position .graph02 {
    width: 491px;
    height: 499px;
    background: url("../image/section04/contents03/graph02.png");
    position: absolute;
    right: 0;
    top: 270px;
}

#position .graph02 > .app01 {
    position: absolute;
    left: 160px;
    top: 70px;
    transform: translate(54px, 144px);
}

#position .graph02 > .app02 {
    position: absolute;
    left: 200px;
    top: 150px;
    transform: translate(14px, 64px);
}

#position .graph02 > .app03 {
    position: absolute;
    left: 90px;
    top: 140px;
    transform: translate(124px, 74px);
}

#position .graph02 > .app04 {
    position: absolute;
    right: 150px;
    top: 270px;
    transform: translate(-61px, -56px);
}

#position .graph02 > .arrow {
    position: absolute;
    right: 130px;
    bottom: 210px;
    transform: scale(0);
}


#position .box01 {
    width: 1288px;
    height: 284px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#position .box01 > .bg {
    width: 1288px;
    height: 284px;
    background: #FFE660;
    border-radius: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -644px;
    margin-top: -142px;
    transform: scale(0);
}


#position .box01 > .bag {
    width: 178px;
    position: absolute;
    left: 50%;
    top: -90px;
    margin-left: -89px;
    transform: translateY(100px);
    opacity: 0;
}


#position .box01 > .title04 {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -314px;
    transform: translateY(50px);
    opacity: 0;
}

/*
section 05 시작
*/
#section05 {
    width: 100vw;
    height: 100vh;
    background: #ff6b25;
}

#section05 .title {
    width: 532px;
    height: 293px;
    position: absolute;
    left: 430px;
    top: 110px;
}


#section05 .title > .btn {
    width: 198px;
    height: 112px;
    background: #ffffff;
    border: 9px solid #85E5AF;
    box-sizing: border-box;
    border-radius: 92px;
    position: absolute;
    right: 0;
    top: 0;
}

#section05 .title > .title01 {
    position: absolute;
    left: 0;
    top: 20px;
    overflow: hidden;
}

#section05 .title > .title01 > img {
    transform: translateY(95px);
}


#section05 .title > .btn > .circle {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    position: absolute;
    left: 78px;
    top: -9px;
    background-color: #000;
    transform: translateX(-100px);
}


#section05 .title > .btn > .circle > .plane {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -35px;
    margin-top: -35px;
}


#section05 .title > .title02 {
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

#section05 .title > .title02 > img {
    transform: translateY(150px);
}


#section05 .illust {
    width: 780px;
    height: 710px;
    position: absolute;
    left: 50%;
    bottom: 100px;
    margin-left: -270px;
}

#section05 .illust > .box {
    width: 730px;
    height: 268px;
    background: #FFE970;
    border-radius: 30px;
    position: absolute;
    left: 40px;
    bottom: 100px;
    transform: rotate(-20deg);
}

#section05 .illust > .illust01 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(100px);
}

#section05 .line01_svg {
    position: absolute;
    left: 230px;
    bottom: 250px;
}


#section05 .line01_svg svg {
    stroke-dasharray: 341;
    stroke-dashoffset: 341;
}


/*#desk .graph02 .graph02_svg{*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: 156px;*/
/*    margin-left: -206px;*/
/*}*/
/*#desk .graph02 .graph02_svg svg{*/
/*    stroke-dasharray: 468;*/
/*    stroke-dashoffset: 468;*/
/*}*/


#section05 .line02_svg {
    position: absolute;
    left: 470px;
    bottom: 140px;
}

#section05 .line02_svg svg {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
}


#section05 .line03_svg {
    position: absolute;
    left: 650px;
    bottom: 120px;
}

#section05 .line03_svg svg {
    stroke-dasharray: 161;
    stroke-dashoffset: 161;
}


#section05 .line04_svg {
    position: absolute;
    right: 520px;
    bottom: 600px;
}


#section05 .line04_svg svg {
    stroke-dasharray: 388;
    stroke-dashoffset: 388;
}


#section05 .line05_svg {
    position: absolute;
    right: 220px;
    bottom: 150px;
}


#section05 .line05_svg svg {
    stroke-dasharray: 776;
    stroke-dashoffset: 776;
}


#section05 .union01 {
    position: absolute;
    left: 490px;
    bottom: 280px;
    transform: scale(0);
}

#section05 .union02 {
    position: absolute;
    right: 460px;
    bottom: 700px;
    transform: scale(0);
}

/*section06 시작*/
#section06 {
    height: 3024px;
    position: relative;
    background: #F6F6F6;
}

#section06 .title01 {
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -44px;
    transform: translateY(50px);
    opacity: 0;
}

#section06 .title02 {
    width: 932px;
    position: absolute;
    left: 50%;
    top: 260px;
    margin-left: -466px;
    transform: translateY(50px);
    opacity: 0;
}

#section06 .title03 {
    width: 452px;
    position: absolute;
    left: 50%;
    top: 360px;
    margin-left: -226px;
    transform: translateY(50px);
    opacity: 0;
}

#section06 .info {
    width: 574px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 496px;
    margin-left: -287px;
    display: flex;
    justify-content: space-between;
}
#section06 .info > div{
    opacity: 0;
    transform: translateY(50px);
}

/*첫번째 그래프 박스*/
#s_box01 {
    width: 1288px;
    height: 636px;
    background: url("../image/section06/box01.png");
    position: absolute;
    left: 50%;
    top: 630px;
    margin-left: -644px;
    clip-path: inset(0 100% 0 0);
}

#s_box01 .graph01 {
    position: absolute;
    left: 100px;
    bottom: 30px;
    transform: scale(0);
}

#s_box01 .graph02 {
    width: 456px;
    height: 332px;
    position: absolute;
    right: 94px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#s_box01 .graph02 > .shape01 {
    width: 456px;
    height: 68px;
    border-radius: 8px;
    /*background: url("../image/section06/shape01.png");*/
    overflow: hidden;
}

#s_box01 .graph02 > .shape01 > img {
    transform: translateX(-460px);
}


#s_box01 .graph02 > .shape01 > .txt {
    width: 408px;
    height: 16px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 24px;
    margin-left: -204px;
}

#s_box01 .graph02 > .shape02 {
    width: 456px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    /*background: url("../image/section06/shape02.png");*/
}

#s_box01 .graph02 > .shape02 > img {
    transform: translateX(-460px);
}

#s_box01 .graph02 > .shape02 > .txt {
    width: 408px;
    height: 16px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 112px;
    margin-left: -204px;
}

#s_box01 .graph02 > .shape03 {
    width: 456px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    /*background: url("../image/section06/shape03.png");*/
}

#s_box01 .graph02 > .shape03 > img {
    transform: translateX(-460px);
}

#s_box01 .graph02 > .shape03 > .txt {
    width: 408px;
    height: 16px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: -204px;
}

#s_box01 .graph02 > .shape04 {
    width: 456px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    /*background: url("../image/section06/shape03.png");*/
}

#s_box01 .graph02 > .shape04 > img {
    transform: translateX(-460px);
}

#s_box01 .graph02 > .shape04 > .txt {
    width: 408px;
    height: 16px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 287px;
    margin-left: -204px;
}


/*두번째 그래프 박스*/
#s_box02 {
    width: 1288px;
    height: 636px;
    background: url("../image/section06/box02.png");
    position: absolute;
    left: 50%;
    top: 1312px;
    margin-left: -644px;
    clip-path: inset(0 100% 0 0);
}

#s_box02 .circle {
    width: 444px;
    height: 382px;
    position: absolute;
    left: 106px;
    bottom: 74px;
}

#s_box02 .circle > .circle01 {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(0);
}

#s_box02 .circle > .circle02 {
    position: absolute;
    right: 0;
    top: 30px;
    transform: scale(0);
}

#s_box02 .circle > .circle03 {
    position: absolute;
    left: 190px;
    bottom: 0;
    transform: scale(0);
}

#s_box02 .graph04 {
    width: 456px;
    height: 276px;
    position: absolute;
    right: 94px;
    bottom: 74px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#s_box02 .graph04 > .shape01 {
    width: 142px;
    height: 164px;
    overflow: hidden;
    border-radius: 15px;
    /*background: url("../image/section06/shape04.png");*/
}

#s_box02 .graph04 > .shape01 > img {
    transform: translateY(170px);
}


#s_box02 .graph04 > .shape01 > .txt {
    width: 74px;
    height: 100px;
    position: absolute;
    left: 35px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


#s_box02 .graph04 > .shape02 {
    width: 142px;
    height: 276px;
    border-radius: 15px;
    overflow: hidden;
    /*background: url("../image/section06/shape05.png");*/
}

#s_box02 .graph04 > .shape02 > img {
    transform: translateY(280px);
}


#s_box02 .graph04 > .shape02 > .txt {
    width: 72px;
    height: 210px;
    position: absolute;
    left: 190px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#s_box02 .graph04 > .shape03 {
    width: 142px;
    height: 196px;
    border-radius: 15px;
    overflow: hidden;
    /*background: url("../image/section06/shape06.png");*/
}

#s_box02 .graph04 > .shape03 > img {
    transform: translateY(200px);
}


#s_box02 .graph04 > .shape03 > .txt {
    width: 70px;
    height: 130px;
    position: absolute;
    right: 35px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


#insight {
    width: 100vw;
    height: 1008px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#insight .arrow {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -43px;
    transform: rotate(-90deg);
}

#insight .title {
    width: 682px;
    height: 256px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -341px;
    margin-top: -128px;
}

#insight .title > .title01 {
    position: absolute;
    left: 0;
    top: 0;
}

#insight .title > .in_title01 {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

#insight .title > .in_title01 > img {
    transform: translateY(120px);
}


#insight .title > .in_title02 {
    position: absolute;
    right: -60px;
    top: 0;
    overflow: hidden;
}
#insight .title > .in_title02 img{
    transform: translateX(100%);
}

#insight .title > .in_title03 {
    width: 422px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -211px;
    overflow: hidden;
}
#insight .title > .in_title03 img{
    transform: translateY(100%);
}

#insight .talk01 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-300px);
}

#insight .talk02 {
    position: absolute;
    left: 150px;
    top: 130px;
    transform: translateX(-300px);
}

#insight .talk03 {
    position: absolute;
    right: 160px;
    top: 100px;
    transform: translateX(300px);
}

#insight .talk04 {
    position: absolute;
    left: 290px;
    bottom: 220px;
    transform: translateX(-300px);
}

#insight .talk05 {
    position: absolute;
    right: 130px;
    bottom: 340px;
    transform: translateX(300px);
}

#insight .talk06 {
    position: absolute;
    right: 330px;
    bottom: 200px;
    transform: translateX(300px);
}

#insight .talk07 {
    position: absolute;
    right: 0;
    bottom: 200px;
    transform: translateX(300px);
}

/*section07 시작*/
#section07 {
    height: 5468px;
    position: relative;
    background: #f6f6f6;
}


#section07 .bg {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(100px) scale(1.2);
}

#persona {
    width: 1288px;
    height: 945px;
    position: absolute;
    left: 50%;
    top: 350px;
    margin-left: -644px;
}

#persona .title01 {
    width: 102px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -51px;
    transform: translateY(50px);
    opacity: 0;
}

#persona .title02 {
    width: 844px;
    position: absolute;
    left: 50%;
    top: 60px;
    margin-left: -422px;
    transform: translateY(50px);
    opacity: 0;
}

#persona .title03 {
    width: 440px;
    position: absolute;
    left: 50%;
    top: 160px;
    margin-left: -220px;
    transform: translateY(50px);
    opacity: 0;
}


#persona .card01 {
    width: 622px;
    height: 648px;
    background: url("../image/section07/contents01/persona01.png");
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(150px);
}

#persona .card01 > .bar {
    width: 254px;
    height: 8px;
    position: absolute;
    left: 309px;
    top: 205px;
    border-radius: 14px;
    overflow: hidden;
}

#persona .card01 > .bar > .bar02 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-60px);
}

#persona .card01 > .laser {
    position: absolute;
    right: 15px;
    bottom: 50px;
}

#persona .card02 {
    width: 622px;
    height: 648px;
    background: url("../image/section07/contents01/persona02.png");
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(150px);
}


#persona .card02 > .bar {
    width: 254px;
    height: 8px;
    position: absolute;
    left: 309px;
    top: 205px;
    border-radius: 14px;
    overflow: hidden;
}


#persona .card02 > .bar > .bar02 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-200px);
}

#persona .card02 > .laser {
    position: absolute;
    right: 15px;
    bottom: 50px;
}

/*저니맵*/
#journey {
    width: 1288px;
    height: 1066px;
    position: absolute;
    left: 50%;
    top: 1490px;
    margin-left: -644px;
}

#journey .txt {
    position: absolute;
    left: 70px;
    top: 14px;
    opacity: 0;
    transform: translateY(50px);
}


#journey .map {
    width: 1290px;
    height: 993px;
    background: url("../image/section07/contents02/map.png");
    position: absolute;
    left: 0;
    bottom: 0;
}


#journey .map_svg01 {
    position: absolute;
    left: 423px;
    top: 185px;
}

#journey .map_svg01 svg {
    stroke-dasharray: 802;
    stroke-dashoffset: 802;
}

#journey .map_svg02 {
    position: absolute;
    left: 421px;
    top: 228px;
}

#journey .map_svg02 svg {
    stroke-dasharray: 791;
    stroke-dashoffset: 791;
}


#journey .step {
    width: 952px;
    height: 50px;
    position: absolute;
    right: 0;
    top: -80px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

#journey .step > .step01 {
    transform: translateY(50px);
    opacity: 0;
}

#journey .step > .step02 {
    transform: translateY(50px);
    opacity: 0;
}

#journey .step > .step03 {
    transform: translateY(50px);
    opacity: 0;
}

#journey .step > .step04 {
    transform: translateY(50px);
    opacity: 0;
}

#journey .step > .step05 {
    transform: translateY(50px);
    opacity: 0;
}


#journey .map > .ic {
    width: 42px;
    height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 240px;
    top: 150px;
}

#journey .map > .ic > .ic01 {
    opacity: 0;
    transform: scale(1.5);
}

#journey .map > .ic > .ic02 {
    opacity: 0;
    transform: scale(1.5);
}

#journey .map > .ic > .ic03 {
    opacity: 0;
    transform: scale(1.5);
}

#journey .txt_box01 {
    position: absolute;
    right: 0;
    bottom: 421px;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}

#journey .txt_box02 {
    position: absolute;
    right: 0;
    bottom: 220px;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}


#journey .txt_box03 {
    position: absolute;
    right: 0;
    bottom: 19px;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}


/*as is - to be*/
#plan {
    width: 1288px;
    height: 844px;
    position: absolute;
    left: 50%;
    bottom: 1794px;
    margin-left: -644px;
}

#plan .title01 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -73px;
    transform: translateY(50px);
    opacity: 0;
}

#plan .title02 {
    width: 764px;
    position: absolute;
    left: 50%;
    top: 60px;
    margin-left: -382px;
    transform: translateY(50px);
    opacity: 0;
}

#plan .title03 {
    width: 528px;
    position: absolute;
    left: 50%;
    top: 160px;
    margin-left: -264px;
    transform: translateY(50px);
    opacity: 0;
}

/*plan01*/
#plan01 {
    width: 392px;
    height: 588px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#plan01 .box01 {
    width: 392px;
    height: 285px;
    background: url("../image/section07/contents03/box01.png");
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transform: translateY(130px);
}

#plan01 .box01 > .txt01 {
    width: 180px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 90px;
    margin-left: -90px;

}

#plan01 .box02 {
    width: 392px;
    height: 338px;
    background: url("../image/section07/contents03/box02.png");
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(-120px);
}

#plan01 .box02 > .in01 {
    width: 218px;
    height: 204px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -109px;
    margin-top: -102px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#plan01 .box02 > .in01 > .ic01 {
    transform: scale(1.2);
    opacity: 0;
}


/*plan02*/
#plan02 {
    width: 392px;
    height: 588px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -196px;
}

#plan02 .box01 {
    width: 392px;
    height: 285px;
    background: url("../image/section07/contents03/box01.png");
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transform: translateY(130px);
}


#plan02 .box01 > .txt03 {
    width: 92px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 90px;
    margin-left: -46px;
}

#plan02 .box02 {
    width: 392px;
    height: 338px;
    background: url("../image/section07/contents03/box02.png");
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(-120px);
}

#plan02 .box02 > .in02 {
    width: 228px;
    height: 184px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -114px;
    margin-top: -92px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#plan02 .box02 > .in02 > .ic02 {
    transform: scale(1.2);
    opacity: 0;
}


/*plan03*/
#plan03 {
    width: 392px;
    height: 588px;
    position: absolute;
    right: 0;
    bottom: 0;
}

#plan03 .box01 {
    width: 392px;
    height: 285px;
    background: url("../image/section07/contents03/box01.png");
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transform: translateY(130px);
}


#plan03 .box01 > .txt05 {
    width: 136px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 90px;
    margin-left: -68px;
}

#plan03 .box02 {
    width: 392px;
    height: 338px;
    background: url("../image/section07/contents03/box02.png");
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(-120px);
}

#plan03 .box02 > .in03 {
    width: 204px;
    height: 188px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -102px;
    margin-top: -94px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#plan03 .box02 > .in03 > .ic03 {
    transform: scale(1.2);
    opacity: 0;
}


/*side txt*/
#plan .side01 {
    width: 267px;
    height: 118px;
    position: absolute;
    left: -320px;
    top: 340px;
}

#plan .side01 > .arrow01 {
    transform: translateX(-250px);
}


#plan .side01 > .txt07 {
    position: absolute;
    right: 0;
    bottom: 0;
}


#plan .side02 {
    width: 267px;
    height: 118px;
    position: absolute;
    right: -320px;
    bottom: 110px;
}

#plan .side02 > .arrow02 {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(250px);
}

/*project goal*/
#goal {
    width: 1288px;
    height: 1095px;
    position: absolute;
    left: 50%;
    bottom: 378px;
    margin-left: -644px;

}


#goal .title {
    width: 992px;
    height: 97px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -496px;
    display: flex;
    justify-content: space-between;
}

#goal .title .title01 {
    clip-path: inset(0 0 0 0);
}

#goal .title .title02 {
    transform: translateY(50px);
    opacity: 0;
}

#goal .title > .change {
    width: 280px;
    height: 96px;
    position: absolute;
    left: -30px;
    top: -34px;
}

#goal .title > .change > .shape {
    opacity: 0;
}

#goal .title > .change > .title03 {
    position: absolute;
    left: 28px;
    top: 35px;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
}

#goal .title > .change > .ic {
    position: absolute;
    right: 7px;
    top: 7px;
    transform: translateX(-180px);
    opacity: 0;
}


#clip {
    width: 5470px;
    height: 2110px;
    position: absolute;
    left: 50%;
    top: -440px;
    margin-left: -2735px;
    /*background: rgba(0, 0, 0, 0.37);*/
    clip-path: ellipse(25% 21.6% at 50% 50%);
}


#typo {
    width: 834px;
    height: 580px;
    position: absolute;
    left: 50%;
    top: 680px;
    margin-left: -417px;
    z-index: 10;
    mix-blend-mode: color-dodge;
}

#typo .union01 {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(100px);
}

#typo .txt01 {
    position: absolute;
    left: 135px;
    top: 34px;
    transform: translateX(100px);
}

#typo .txt02 {
    position: absolute;
    left: 200px;
    top: 127px;
    transform: translateX(-20px);
}

#typo .txt03 {
    position: absolute;
    left: 0;
    top: 314px;
    transform: translateX(30px);
}

#typo .union02 {
    position: absolute;
    left: 107px;
    top: 324px;
    transform: translateX(40px);
}


#typo .txt04 {
    position: absolute;
    left: 210px;
    top: 288px;
    transform: translateX(50px);
}

#typo .txt05 {
    position: absolute;
    left: 390px;
    top: 281px;
    transform: translateX(80px);
}

#typo .txt06 {
    position: absolute;
    left: 90px;
    top: 450px;
    transform: translateX(-60px);
}

#typo .direct_svg {
    position: absolute;
    left: -100px;
    top: 180px;
}

#typo .direct_svg svg {
    stroke-dasharray: 428;
    stroke-dashoffset: 428;
}

#typo .flag_svg {
    position: absolute;
    right: -90px;
    top: 70px;
}

#typo .flag_svg svg {
    stroke-dasharray: 772;
    stroke-dashoffset: 772;
}


#clip .hole {
    position: absolute;
    left: 50%;
    bottom: 599px;
    margin-left: -579px;
}


/*section08 시작*/
#section08 {
    height: 4446px;
    position: relative;
    background: #ffffff;
}

#section08 .bg {
    width: 1728px;
    height: 623px;
    background: url("../image/section08/illust/bg.png");
    position: absolute;
    left: 50%;
    top: 530px;
    margin-left: -864px;
}

#section08 .bg > .cloud01 {
    position: absolute;
    left: 40px;
    top: 250px;
}

#section08 .bg > .cloud02 {
    position: absolute;
    right: 624px;
    top: 277px;
}

#section08 .bg > .cloud03 {
    position: absolute;
    right: 468px;
    top: 153px;
}

#section08 .bg > .cloud04 {
    position: absolute;
    right: 36px;
    top: 174px;
}

#section08 .bg > .plane {
    position: absolute;
    right: 90px;
    top: 140px;
    transform: translate(-340px, 130px) rotate(15deg);
}


#illust {
    width: 1288px;
    height: 1390px;
    position: absolute;
    left: 50%;
    top: 270px;
    margin-left: -644px;
}

#illust .title01 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(50px);
    opacity: 0;
}

#illust .title02 {
    position: absolute;
    left: 0;
    top: 60px;
    transform: translateY(50px);
    opacity: 0;
}

#illust .title03 {
    position: absolute;
    left: 0;
    top: 160px;
    transform: translateY(50px);
    opacity: 0;
}


/*카드*/
#illust .card01 {
    position: absolute;
    left: 0;
    bottom: 590px;
    border-radius: 24px;
    transform-style: preserve-3d; /* 3D 공간 보존 */

}

#illust .card01 > .order01 {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}

#illust .card01 > .order02 {
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

#illust .card02 {
    position: absolute;
    left: 0;
    bottom: 290px;
    border-radius: 24px;
    transform-style: preserve-3d; /* 3D 공간 보존 */

}

#illust .card02 > .pick01 {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}

#illust .card02 > .pick02 {
    transform: rotateY(180deg);
    backface-visibility: hidden;
}


#illust .card03 {
    position: absolute;
    left: 340px;
    bottom: 290px;
    border-radius: 24px;
    transform-style: preserve-3d; /* 3D 공간 보존 */

}

#illust .card03 > .up01 {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}

#illust .card03 > .up02 {
    transform: rotateY(180deg);
    backface-visibility: hidden;
}


#illust .card04 {
    width: 292px;
    height: 260px;
    position: absolute;
    right: 0;
    bottom: 300px;
    border-radius: 24px;
    transform-style: preserve-3d; /* 3D 공간 보존 */
}

#illust .card04 > .stock01 {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden; /* 숨김 속성 추가 */
}

#illust .card04 > .stock02 {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden; /* 숨김 속성 추가 */
}


#illust .card05 {
    position: absolute;
    right: 340px;
    bottom: 0;
    border-radius: 24px;
    transform-style: preserve-3d; /* 3D 공간 보존 */

}


#illust .card05 > .deliver01 {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}

#illust .card05 > .deliver02 {
    transform: rotateY(180deg);
    backface-visibility: hidden;
}


#illust .card06 {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    transform-style: preserve-3d; /* 3D 공간 보존 */
}


#illust .card06 > .finish01 {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}

#illust .card06 > .finish02 {
    transform: rotateY(180deg);
    backface-visibility: hidden;
}


/*design system01*/
#design01 {
    width: 1288px;
    height: 806px;
    position: absolute;
    left: 50%;
    top: 1954px;
    margin-left: -644px;
}

#design01 .title01 {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
}

#design01 .title02 {
    position: absolute;
    left: 0;
    top: 155px;
    opacity: 0;
    transform: translateY(50px);
}

#design01 .title03 {
    position: absolute;
    right: 0;
    top: 174px;
    opacity: 0;
    transform: translateY(50px);
}

#design01 .ic_video {
    width: 622px;
    height: 468px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#design01 .ic_video > video {
    border-radius: 42px;
}

#design01 .ic {
    width: 534px;
    height: 468px;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
}

#design01 .ic > .ic01 {
    opacity: 0
}

#design01 .ic > .ic02 {
    opacity: 0
}

#design01 .ic > .ic03 {
    opacity: 0
}

#design01 .ic > .ic04 {
    opacity: 0
}

#design01 .ic > .ic05 {
    opacity: 0
}

#design01 .ic > .ic06 {
    opacity: 0
}

#design01 .ic > .ic07 {
    opacity: 0
}

#design01 .ic > .ic08 {
    opacity: 0
}

#design01 .ic > .ic09 {
    opacity: 0
}


/*design system02*/
#design02 {
    width: 1288px;
    height: 574px;
    position: absolute;
    left: 50%;
    top: 2968px;
    margin-left: -644px;
}

#design02 .title01 {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
}

#design02 .title02 {
    position: absolute;
    right: 0;
    top: 20px;
    opacity: 0;
    transform: translateY(50px);
}

#design02 .ic_box01 {
    width: 1092px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 170px;
    margin-left: -546px;
    display: flex;
    justify-content: space-between;
    transform: translateY(50px);
    opacity: 0;
}

#design02 .ic_box02 {
    width: 1026px;
    height: 144px;
    position: absolute;
    left: 50%;
    top: 430px;
    margin-left: -513px;
    display: flex;
    justify-content: space-between;
    transform: translateY(50px);
    opacity: 0;
}

/*design system03*/
#design03 {
    width: 1288px;
    height: 448px;
    position: absolute;
    left: 50%;
    bottom: 260px;
    margin-left: -644px;
}

#design03 .box01 {
    width: 622px;
    height: 448px;
    position: absolute;
    left: 0;
    top: 0;
}

#design03 .box01 > .title {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
}

#design03 .box01 > .color01 {
    position: absolute;
    left: 0;
    top: 150px;
    clip-path: inset(0 100% 0 0);
}

#design03 .box01 > .color02 {
    position: absolute;
    left: 0;
    top: 310px;
    clip-path: inset(0 100% 0 0);
}

#design03 .box02 {
    width: 572px;
    height: 448px;
    position: absolute;
    right: 8px;
    top: 0;
}

#design03 .box02 > .title {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(50px);
}

#design03 .box02 > .font01 {
    position: absolute;
    left: 50%;
    top: 210px;
    margin-left: -123px;
    transform: translateY(50px);
    opacity: 0;
}

#design03 .box02 > .font02 {
    position: absolute;
    left: 50%;
    top: 410px;
    margin-left: -159px;
    transform: translateY(50px);
    opacity: 0;
}

/*section09 시작*/
#section09 {
    width: 100vw;
    height: 1122px;
    position: relative;
    background: #FAFAFA;
}

#section09 .circle {
    width: 1108px;
    height: 1108px;
    position: absolute;
    left: 50%;
    bottom: -640px;
    margin-left: -554px;
    border-radius: 50%;
    background-color: #ffdcca;
    filter: blur(205px);
    transform: scale(0);
}

#section09 .title {
    width: 1288px;
    height: 110px;
    position: absolute;
    left: 50%;
    top: 256px;
    margin-left: -644px;
    display: flex;
}

#section09 .title > .title01 {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateX(-50px);
}

#section09 .title > .title02 {
    position: absolute;
    right: 0;
    top: 40px;
    opacity: 0;
    transform: translateX(50px);
}

#section09 .card {
    width: 1288px;
    height: 446px;
    position: absolute;
    left: 50%;
    bottom: 154px;
    margin-left: -644px;
}

#section09 .card > .card01 {
    width: 280px;
    height: 446px;
    background: url("../image/section09/card.png");
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 36px;
}


#section09 .card > .ic01 {
    position: absolute;
    left: 300px;
    top: 50%;
    margin-top: -8px;
}

#section09 .card > .card01 > .symbol01 {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -59px;
    overflow: hidden;
}


#section09 .card > .card01 > .symbol01 > img {
    transform: translateY(150px);
}

#section09 .card > .card01 > .txt01 {
    position: absolute;
    left: 50%;
    bottom: 40px;
    margin-left: -79px;
}

#section09 .card > .card02 {
    width: 280px;
    height: 446px;
    background: url("../image/section09/card.png");
    position: absolute;
    left: 336px;
    top: 0;
    border-radius: 36px;
}


#section09 .card > .card02 > .symbol02 {
    position: absolute;
    left: 50%;
    top: 90px;
    margin-left: -59px;
    transform-origin: bottom;
    transform: scale(0.8);
    opacity: 0;
}

#section09 .card > .card02 > .txt02 {
    position: absolute;
    left: 50%;
    bottom: 40px;
    margin-left: -60px;
}

#section09 .card > .ic02 {
    position: absolute;
    left: 635px;
    top: 50%;
    margin-top: -8px;
}


#section09 .card > .card03 {
    width: 280px;
    height: 446px;
    background: url("../image/section09/card.png");
    position: absolute;
    right: 336px;
    top: 0;
    border-radius: 36px;
}

#section09 .card > .card03 > .symbol03 {
    position: absolute;
    left: 50%;
    top: 130px;
    margin-left: -55px;
    transform: scale(0.8) rotate(-90deg);
    opacity: 0;
}

#section09 .card > .card03 > .txt03 {
    position: absolute;
    left: 50%;
    bottom: 40px;
    margin-left: -29px;
}

#section09 .card > .ic03 {
    position: absolute;
    right: 300px;
    top: 50%;
    margin-top: -5px;
}


#section09 .card > .card04 {
    width: 280px;
    height: 446px;
    background: url("../image/section09/card.png");
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 36px;
}

#section09 .card > .card04 > .symbol04 {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -66px;
    transform-origin: bottom;
    transform: scale(0.8);
    opacity: 0;
}

#section09 .card > .card04 > .txt04 {
    position: absolute;
    left: 50%;
    bottom: 40px;
    margin-left: -60px;
}


/*section09 시작*/
#section10 {
    height: 1550px;
    position: relative;
    background: #fff;
}

#logo {
    width: 100vw;
    height: 726px;
    background: #ff6b25;
    position: absolute;
}

#logo .line01 {
    position: absolute;
    left: 430px;
    top: 0;
    transform: translateX(-430px);
}

#logo .line02 {
    position: absolute;
    right: 430px;
    top: 0;
    transform: translateX(430px);
}

#logo .line03 {
    position: absolute;
    left: 0;
    top: 250px;
    transform: translateY(-250px);
}

#logo .line04 {
    position: absolute;
    left: 0;
    bottom: 284px;
    transform: translateY(250px);
}


#logo .ic01 {
    width: 1086px;
    position: absolute;
    left: 50%;
    top: 237px;
    margin-left: -543px;
    opacity: 0;
}


#logo .logo {
    width: 1054px;
    height: 220px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -527px;
    margin-top: -110px;
    transform: scale(0.5);
    opacity: 0;
}


#section10 .mockup {
    width: 1288px;
    height: 490px;
    position: absolute;
    left: 50%;
    bottom: 180px;
    margin-left: -644px;
    display: flex;
    justify-content: space-between;
}

#section10 .mockup > .box01 {
    width: 610px;
    height: 490px;
    border-radius: 40px;
    overflow: hidden;
}

#section10 .mockup > .box01 > img {
    transform: scale(1.5);
}


#section10 .mockup > .box02 {
    width: 610px;
    height: 490px;
    border-radius: 40px;
    overflow: hidden;
}

#section10 .mockup > .box02 > img {
    transform: scale(1.5);
}


/*section11 시작*/
#section11 {
    height: 5142px;
    background: #f6f6f6;
    position: relative;
}

/*component*/
#component {
    width: 1288px;
    height: 1284px;
    position: absolute;
    left: 50%;
    top: 240px;
    margin-left: -644px;
}

#component .title {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: scale(0.8);
}

#component .box {
    width: 1288px;
    height: 1198px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#component .box > .top {
    width: 1288px;
    height: 154px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
}


#component .box > .top > .box01 {
    transform: translateY(50px);
    opacity: 0;
}

#component .box > .top > .box02 {
    transform: translateY(50px);
    opacity: 0;
}


#component .box > .top > .box03 {
    transform: translateY(50px);
    opacity: 0;
}


#component .box > .box04 {
    position: absolute;
    left: 0;
    top: 170px;
    transform: translateY(50px);
    opacity: 0;
}

#component .box > .box05 {
    position: absolute;
    right: 0;
    top: 170px;
    transform: translateY(50px);
    opacity: 0;
}

#component .box > .box06 {
    position: absolute;
    right: 0;
    top: 444px;
    transform: translateY(50px);
    opacity: 0;
}

#component .box > .box07 {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50px);
    opacity: 0;
}


/*flow chart*/
#flow {
    width: 1288px;
    height: 2086px;
    position: absolute;
    left: 50%;
    top: 1756px;
    margin-left: -644px;
    z-index: 10;
}

#flow .title01 {
    position: absolute;
    top: 44px;
    left: 0;
    transform: translateY(30px);
    opacity: 0;
}

#flow .title02 {
    position: absolute;
    left: 0;
    top: 100px;
    transform: translateY(30px);
    opacity: 0;
}

#flow .title03 {
    position: absolute;
    left: 0;
    top: 198px;
    transform: translateY(30px);
    opacity: 0;
}

#flow .key {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(50px);
    opacity: 0;
}

#flow .chart {
    width: 1288px;
    height: 955px;
    position: absolute;
    left: 0;
    top: 492px;
}


#flow .chart > .shape {
    position: absolute;
    left: 50%;
    top: 474px;
    margin-left: -644px;
    opacity: 0;
    transform: scale(0);
}

#flow .chart > .txt01 {
    position: absolute;
    left: 380px;
    top: 0;
    transform: translateX(-100px);
    opacity: 0;
}

#flow .chart > .txt02 {
    position: absolute;
    left: 593px;
    top: 859px;
    transform: translateY(50px);
    opacity: 0;
}

#flow .chart > .chart01 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -634px;
    transform: translateY(50px);
    opacity: 0;
}


#flow .face01 {
    position: absolute;
    left: 130px;
    bottom: 120px;
    transform: scale(1.5);
    opacity: 0;
}

#flow .face02 {
    position: absolute;
    left: 300px;
    bottom: 66px;
    transform: scale(1.5);
    opacity: 0;
}

#flow .face03 {
    position: absolute;
    right: 430px;
    bottom: 295px;
    transform: scale(1.5);
    opacity: 0;
}

#flow .face04 {
    position: absolute;
    right: 11px;
    bottom: 293px;
    transform: scale(1.5);
    opacity: 0;
}

#flow .frame {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -765px;
    transform: translateY(100px);
    opacity: 0;
}

/*grid*/
#grid {
    width: 1288px;
    height: 912px;
    position: absolute;
    left: 50%;
    bottom: 192px;
    margin-left: -644px;
}

#grid .title01 {
    margin-bottom: 40px;
    transform: translateY(50px);
    opacity: 0;
}

#grid .title02 {
    margin-bottom: 64px;
    transform: translateY(50px);
    opacity: 0;
}

#grid .title03 {
    margin-bottom: 40px;
    transform: translateY(50px);
    opacity: 0;
}

#grid .info {
    width: 94px;
    height: 234px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#grid .info > .txt01 {
    transform: translateX(-50px);
    opacity: 0;
}

#grid .info > .txt02 {
    transform: translateX(-50px);
    opacity: 0;
}


#grid .info > .txt03 {
    transform: translateX(-50px);
    opacity: 0;
}


#grid .box01 {
    width: 322px;
    height: 388px;
    position: absolute;
    left: 423px;
    bottom: 0;
    transform: translateY(100px);
    opacity: 0;
}

#grid .box01 > .radius {
    position: absolute;
    left: 0;
    bottom: 0;
}


#grid .box02 {
    width: 390px;
    height: 844px;
    background: #E9E9E9;
    position: absolute;
    right: 50px;
    bottom: 0;
}


#grid .padding {
    width: 390px;
    height: 844px;
    display: flex;
    justify-content: space-between;
}


#grid .padding > .pad01 {
    transform: translateX(150px);
    opacity: 0;
}


#grid .padding > .pad02 {
    overflow: hidden;
}

#grid .padding > .pad02 > img {
    transform: translateY(-850px);
}

#grid .padding > .pad03 {
    transform: translateX(-150px);
    opacity: 0;
}


#grid .dp01 {
    position: absolute;
    left: -32px;
    top: 0;
    opacity: 0;
}

#grid .dp02 {
    position: absolute;
    left: 0;
    bottom: -32px;
    opacity: 0;
}


/*section12 시작*/
#section12 {
    height: 7968px;
    position: relative;
    background: #fff;
}

#section12 .bg {
    height: 3982px;
    background: linear-gradient(#ff6b25, #ff6b25 60%, white 100%);
}

#main {
    width: 100vw;
    height: 2134px;
    position: absolute;
    left: 0;
    top: 390px;
}

#main .title {
    width: 532px;
    height: 316px;
    position: absolute;
    left: 315px;
    top: 0;
    display: flex;
    flex-wrap: wrap;
}


#main .title > .title01 {
    position: absolute;
    left: 0;
    top: 40px;
    transform: translateY(50px);
    opacity: 0;
}

#main .title > .plane {
    position: absolute;
    right: 70px;
    top: 0;
    transform: translate(-50px, 50px);
    opacity: 0;
}

#main .title > .title02 {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50px);
    opacity: 0;
}


#main .line {
    width: 1288px;
    height: 860px;
    position: absolute;
    left: 50%;
    top: 526px;
    margin-left: -644px;
    display: flex;
    justify-content: space-between;
}

#main .line01 {
    overflow: hidden;
}

#main .line01 > img {
    transform: translateY(-860px);
}

#main .line02 {
    overflow: hidden;
}

#main .line02 > img {
    transform: translateY(-860px);
}

#main .line03 {
    overflow: hidden;
}

#main .line03 > img {
    transform: translateY(-860px);
}

#main .line04 {
    overflow: hidden;
}

#main .line04 > img {
    transform: translateY(-860px);
}

#main .phone {
    width: 1082px;
    height: 1204px;
    position: absolute;
    left: 50%;
    top: 530px;
    margin-left: -541px;
}

#main .phone > .phone01 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transform: translate(-100px, 100px);
}

#main .phone > .phone02 {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(100px, 100px);
}

#main .arrow {
    width: 60px;
    height: 204px;
    position: absolute;
    right: 330px;
    top: 525px;
}


#main .arrow > .arrow01 {
    margin-bottom: 48px;
    transform: rotate(45deg);
}

#main .arrow > .arrow02 {
    transform: rotate(45deg);
}


#main .card01 {
    position: absolute;
    left: -10px;
    bottom: 660px;
    transform: translate(-50px, 150px) rotate(38deg);
}

#main .card02 {
    position: absolute;
    right: 130px;
    bottom: 490px;
    transform: translate(50px, 150px) rotate(-8deg);
}

#main .card03 {
    position: absolute;
    right: -160px;
    top: 560px;
    transform: translate(50px, 150px) rotate(34deg);
}

#main .belt {
    width: 2326px;
    position: absolute;
    left: 50%;
    margin-left: -1163px;
    bottom: 0;
    opacity: 0.3;
    transform: translateX(320px);
}

/*온보딩*/
#onboard {
    width: 1288px;
    height: 1500px;
    position: absolute;
    left: 50%;
    top: 2850px;
    margin-left: -644px;
}

#onboard .number02 {
    position: absolute;
    left: 50%;
    top: 50px;
    margin-left: -50px;
}


#onboard .number01 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -50px;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#onboard .title01 {
    width: 150px;
    position: absolute;
    left: 50%;
    top: 120px;
    margin-left: -75px;
}

#onboard .title02 {
    position: absolute;
    left: 50%;
    top: 184px;
    margin-left: -159px;
    transform: translateY(50px);
    opacity: 0;
}

#onboard .title03 {
    width: 522px;
    position: absolute;
    left: 50%;
    top: 270px;
    margin-left: -261px;
    opacity: 0;
}

#onboard .step01 {
    width: 350px;
    height: 744px;
    position: absolute;
    left: 40px;
    bottom: 0;
    transform: translateY(50px);
    opacity: 0;
}

#onboard .step01 > .onboard01 {
    position: absolute;
    left: 50%;
    margin-left: -175px;
    top: -25px;
    scale: 0.9;
}

#onboard .step01 > .onboard01 > video {
    border-radius: 32px;
}


#onboard .step01 > .screen01 {
    position: absolute;
    left: 0;
    top: 0;
}


#onboard .step02 {
    width: 350px;
    height: 744px;
    position: absolute;
    left: 50%;
    bottom: 316px;
    margin-left: -175px;
    transform: translateY(50px);
    opacity: 0;
}

#onboard .step02 > .onboard02 {
    position: absolute;
    left: 50%;
    margin-left: -175px;
    top: -25px;
    scale: 0.9;
}

#onboard .step02 > .onboard02 > video {
    border-radius: 32px;
}


#onboard .step02 > .screen02 {
    position: absolute;
    left: 0;
    top: 0;
}


#onboard .step03 {
    width: 350px;
    height: 744px;
    position: absolute;
    right: 40px;
    bottom: 208px;
    transform: translateY(50px);
    opacity: 0;
}

#onboard .step03 > .onboard03 {
    position: absolute;
    left: 50%;
    margin-left: -175px;
    top: -25px;
    scale: 0.9;
}

#onboard .step03 > .onboard03 > video {
    border-radius: 32px;
}

#onboard .step03 > .screen03 {
    position: absolute;
    left: 0;
    top: 0;
}


/*메인*/
#app_main {
    width: 1288px;
    height: 1960px;
    position: absolute;
    left: 50%;
    bottom: 1380px;
    margin-left: -644px;
}

#app_main .number {
    position: absolute;
    left: 60px;
    top: 0;
}


#app_main .number02 {
    position: absolute;
    left: 60px;
    top: 50px;
}

#app_main .number01 {
    position: absolute;
    left: 60px;
    top: 0;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#app_main .title01 {
    position: absolute;
    left: 180px;
    top: 40px;
}

#app_main .title02 {
    position: absolute;
    left: 60px;
    top: 140px;
    transform: translateY(50px);
    opacity: 0;
}

#app_main .arrow {
    position: absolute;
    left: 60px;
    top: 320px;
    transform: rotate(-90deg);
}

#app_main .title03 {
    position: absolute;
    right: 280px;
    top: 320px;
    opacity: 0;
    transform: translateX(-50px);
}

#app_main .plane {
    position: absolute;
    right: -50px;
    top: -200px;
    transform: translate(490px, -380px) rotate(-28deg);
    opacity: 0;
}

#app_main .cloud {
    position: absolute;
    right: -380px;
    top: -390px;
    opacity: 0;
}


#app_main .phone {
    width: 1288px;
    height: 1014px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -644px;
    margin-top: -467px;
}

#app_main .phone > .typo01 {
    position: absolute;
    left: 60px;
    top: 90px;
}

#app_main .phone > .typo02 {
    position: absolute;
    right: 220px;
    bottom: 140px;
}

#app_main .phone > .phone01 {
    position: absolute;
    left: 0;
    bottom: 40px;
    transform: translateY(50px);
    opacity: 0;
}

#app_main .phone > .txt01 {
    width: 414px;
    height: 104px;
    position: absolute;
    left: 400px;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}

#app_main .phone > .txt01 > .point01 {
    height: 48px;
    opacity: 0;
}

#app_main .phone > .txt01 > .key01 {
    margin-top: 14px;
    transform: translateX(-50px);
    opacity: 0;
}


#app_main .phone > .phone02 {
    position: absolute;
    right: 140px;
    top: 0;
    transform: translateY(50px);
    opacity: 0;
}

#app_main .phone > .txt02 {
    width: 254px;
    height: 220px;
    position: absolute;
    right: 0;
    top: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#app_main .phone > .txt02 > .point02 {
    height: 105px;
    opacity: 0;
}

#app_main .phone > .txt02 > .key02 {
    margin-left: 14px;
    transform: translateY(-50px);
    opacity: 0;
}

#app_main .line_svg {
    position: absolute;
    left: -743px;
    bottom: 20px;
}

#app_main .line {
    position: absolute;
    left: -350px;
    bottom: -70px;
}

#app_main .truck {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    /*transform: translate(520px, -530px) rotate(-20deg);*/
}


#app_main .signal01 {
    width: 58px;
    height: 58px;
    position: absolute;
    left: -170px;
    bottom: 394px;
}

#app_main .signal01 > .circle02 {
    width: 6px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3px;
    margin-top: -3px;
}

#app_main .signal02 {
    width: 58px;
    height: 58px;
    position: absolute;
    left: 640px;
    bottom: 0;
}

#app_main .signal02 > .circle02 {
    width: 6px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3px;
    margin-top: -3px;
}

#app_main .signal03 {
    position: absolute;
    right: -660px;
    bottom: 220px;
}

/*booking*/
#booking {
    width: 1288px;
    height: 1143px;
    position: absolute;
    left: 50%;
    margin-left: -644px;
    bottom: 240px;
}


#booking .number02 {
    position: absolute;
    left: 60px;
    top: 50px;
}


#booking .number01 {
    position: absolute;
    left: 60px;
    top: 0;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#booking .title01 {
    position: absolute;
    left: 180px;
    top: 38px;
}

#booking .title02 {
    position: absolute;
    left: 60px;
    top: 150px;
    transform: translateY(50px);
    opacity: 0;
}

#booking .title {
    width: 658px;
    height: 35px;
    position: absolute;
    left: 60px;
    top: 230px;
    display: flex;
    justify-content: space-between;
}


#booking .title > .title03 {
    opacity: 0;
}

#booking .title > .title04 {
    opacity: 0;
}


#book_visual {
    width: 1288px;
    height: 754px;
    background: #FFE660;
    border-radius: 64px;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

#book_visual .arrow {
    width: 188px;
    height: 94px;
    position: absolute;
    left: 60px;
    top: 50px;
    display: flex;
    justify-content: space-between;
}

#book_visual .arrow > .arrow01 {
    transform: rotate(-90deg);
}

#book_visual .arrow > .arrow02 {
    transform: rotate(-90deg);
}


#book_visual .phone {
    width: 1008px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -584px;
    transform: translateY(150px);
}

#book_visual .txt {
    width: 196px;
    height: 155px;
    position: absolute;
    right: 60px;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#book_visual .txt > .txt01 {
    overflow: hidden;
}

#book_visual .txt > .txt01 > img {
    transform: translateY(50px);
}

#book_visual .txt > .txt02 {
    overflow: hidden;
}

#book_visual .txt > .txt02 > img {
    transform: translateY(50px);
}


#book_visual .txt > .txt03 {
    overflow: hidden;
}

#book_visual .txt > .txt03 > img {
    transform: translateY(40px);
}


/*section13 시작*/
#section13 {
    height: 100vh;
    position: relative;
    background: #ff6b25;
    overflow: hidden;
}

#section13 .title {
    position: absolute;
    left: 50%;
    top: 150px;
    margin-left: -220px;
    transform: translateY(50px);
    opacity: 0;
}


#section13 .plane_route {
    position: absolute;
    left: 0;
    top: 185px;
    transform: translate(-500px, 380px);
    opacity: 0;
}


#section13 .board {
    width: 570px;
    height: 560px;
    position: absolute;
    left: 50%;
    margin-left: -355px;
    bottom: 0;
    transform: translateY(50px);
}


#section13 .board > .sign04 {
    position: absolute;
    right: 30px;
    top: 10px;
    /*opacity: 0;*/
    transform: translateX(-50px);
}


#section13 .board > .sign01 {
    position: absolute;
    right: 182px;
    top: 0;
    transform: translateX(150px);
}

#section13 .board > .sign02 {
    position: absolute;
    right: 0;
    top: 140px;
    transform: translateX(20px);
}

#section13 .board > .sign03 {
    position: absolute;
    right: 26px;
    top: 280px;
}


#section13 .board > .star01 {
    position: absolute;
    right: 40px;
    top: 0;
    opacity: 0;
}

#section13 .board > .star02 {
    position: absolute;
    left: 51px;
    top: 190px;
    opacity: 0;
}

#section13 .board > .star03 {
    position: absolute;
    right: 7px;
    top: 330px;
    opacity: 0;
}

#section13 .wave01 {
    position: absolute;
    left: -10px;
    bottom: 50px;
}

#section13 .wave01 svg {
    stroke-dasharray: 1264;
    stroke-dashoffset: 1264;
}


#section13 .wave02 {
    position: absolute;
    right: -10px;
    bottom: 50px;
}

#section13 .wave02 svg {
    stroke-dasharray: 1264;
    stroke-dashoffset: 1264;
}

/*section14 시작*/
#section14 {
    height: 1720px;
    position: relative;
    background: #fff;
}

#se14_content {
    width: 1288px;
    height: 1366px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -644px;
    margin-top: -683px;
}


#se14_content .number02 {
    position: absolute;
    left: 80px;
    top: 50px;
}


#se14_content .number01 {
    position: absolute;
    left: 80px;
    top: 0;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#se14_content .title01 {
    position: absolute;
    left: 210px;
    top: 20px;
}


#se14_content .title02 {
    position: absolute;
    left: 80px;
    top: 174px;
    transform: translateY(50px);
    opacity: 0;
}

#se14_content .title03 {
    position: absolute;
    right: 160px;
    top: 184px;
    transform: translateY(50px);
    opacity: 0;
}

#se14_content .screen {
    width: 1288px;
    height: 834px;
    background: url("../image/section14/bg.png");
    position: absolute;
    left: 0;
    bottom: 0;
}

#se14_content .screen > .screen01 {
    position: absolute;
    left: 250px;
    top: -110px;
    opacity: 0;
    transform: translateY(50px);
}

#se14_content .screen > .screen02 {
    position: absolute;
    right: 250px;
    top: -110px;
    opacity: 0;
    transform: translateY(50px);
}

#se14_content .screen > .txt {
    position: absolute;
    right: 200px;
    bottom: 130px;
    opacity: 0;
}

#se14_content .arrow_box01 {
    width: 320px;
    height: 146px;
    position: absolute;
    left: -150px;
    bottom: 120px;
    display: flex;
    justify-content: space-between;
}

#se14_content .arrow_box01 > .arrow01 {
    opacity: 0;
}


#se14_content .arrow_box01 > .arrow02 {
    opacity: 0;
}


#se14_content .arrow_box01 > .arrow03 {
    opacity: 0;
}


#se14_content .arrow_box02 {
    width: 320px;
    height: 146px;
    position: absolute;
    right: -140px;
    bottom: 590px;
    display: flex;
    justify-content: space-between;
}


#se14_content .arrow_box02 > .arrow01 {
    opacity: 0;
}


#se14_content .arrow_box02 > .arrow02 {
    opacity: 0;
}


#se14_content .arrow_box02 > .arrow03 {
    opacity: 0;
}


/*section15 시작*/
#section15 {
    height: 100vh;
    background: #fff4ec;
    position: relative;
}

#section15 .line01 {
    position: absolute;
    left: 118px;
    top: 100px;
    transform: skewX(340deg);
}

#section15 .line02 {
    position: absolute;
    right: 118px;
    top: 100px;
    transform: skewX(340deg);
}

#section15 .top01 {
    position: absolute;
    left: 430px;
    top: 100px;
    overflow: hidden;
}

#section15 .top01 > img {
    transform: translateX(-110px);
}

#section15 .top02 {
    position: absolute;
    right: 430px;
    top: 100px;
    overflow: hidden;
}

#section15 .top02 > img {
    transform: translateX(60px);
}


#section15 .top_line {
    width: 576px;
    height: 64px;
    position: absolute;
    left: 50%;
    top: 90px;
    margin-left: -288px;
}

#section15 .top_line > .dot_line {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1px;
}

#section15 .top_line > .plane {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -32px;
    transform: translateX(-520px);
}

#section15 .txt01 {
    position: absolute;
    left: 426px;
    top: 174px;
}

#section15 .txt02 {
    position: absolute;
    right: 426px;
    top: 174px;
}

#section15 .txt03 {
    position: absolute;
    right: 468px;
    top: 430px;
    transform: translateY(50px);
    opacity: 0;
}


#section15 .bag {
    position: absolute;
    left: 50%;
    bottom: 130px;
    margin-left: -180px;
    transform-origin: bottom;
    transform: scale(0.8);
}

#section15 .bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    clip-path: inset(0 100% 0 0);
}

#section15 .trip {
    position: absolute;
    left: 520px;
    bottom: 310px;
    transform: rotate(-15deg);
    clip-path: inset(0 100% 0 0);
}

#section15 .easy {
    position: absolute;
    left: 544px;
    bottom: 254px;
    clip-path: inset(0 100% 0 0);
}


#section16 {
    height: 3300px;
    background: #ffffff;
    position: relative;
}

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


#section16 .number02 {
    position: absolute;
    left: 780px;
    top: 324px;
}

#section16 .number01 {
    position: absolute;
    left: 780px;
    top: 274px;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#section16 .title01 {
    position: absolute;
    left: 895px;
    top: 308px;
}


#section16 .title02 {
    position: absolute;
    left: 780px;
    top: 414px;
    transform: translateY(50px);
    opacity: 0;
}

#section16 .screen01 {
    position: absolute;
    left: 372px;
    top: 764px;
    transform: translateY(50px);
    opacity: 0;
}

#section16 .txt {
    width: 314px;
    height: 194px;
    position: absolute;
    left: 372px;
    top: 1640px;
}

#section16 .txt > .txt02 {
    position: absolute;
    left: 0;
    bottom: 0;
}


#section16 .screen02 {
    position: absolute;
    left: 50%;
    top: 622px;
    margin-left: -153px;
    transform: translateY(50px);
    opacity: 0;
}

#section16 .screen03 {
    position: absolute;
    right: 372px;
    top: 904px;
    transform: translateY(50px);
    opacity: 0;
}

#section16 .screen04 {
    position: absolute;
    left: 372px;
    bottom: 380px;
    transform: translateY(50px);
    opacity: 0;
}


#section16 .screen05 {
    width: 307px;
    height: 1022px;
    position: absolute;
    left: 50%;
    margin-left: -153.5px;
    bottom: 799px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transform: translateY(50px);
    opacity: 0;
}

#section16 .screen06 {
    position: absolute;
    right: 372px;
    bottom: 520px;
    transform: translateY(50px);
    opacity: 0;
}


/*section17 시작*/
#section17 {
    height: 1188px;
    background: #ffffff;
    position: relative;
}

#section17 .bg {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -935px;
    transform: scale(0.9);
}


#title01 {
    width: 890px;
    height: 178px;
    position: absolute;
    left: 402px;
    top: 165px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#title01 > .txt01 {
    overflow: hidden;
}

#title01 > .txt01 > img {
    transform: translateY(100px);
}


#txt02 {
    width: 612px;
    height: 178px;
    border-radius: 90px;
    position: absolute;
    left: 280px;
    top: 0;
    overflow: hidden;
}

#txt02 .shape02 {
    position: absolute;
    left: 0;
    top: 0;
}

#txt02 .txt {
    position: absolute;
    left: 50%;
    margin-left: -256px;
    top: 30px;
    transform: scale(0.8);
    opacity: 0;
}

#txt02 .shape01 {
    position: absolute;
    left: 620px;
    top: 0;
    transform: translateX(-620px);
}


#title02 {
    width: 996px;
    height: 124px;
    position: absolute;
    left: 520px;
    top: 394px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#title02 .txt03 {
    overflow: hidden;
}

#title02 .txt03 > img {
    transform: translateX(-220px);
}


#title02 .txt04 {
    overflow: hidden;
}

#title02 .txt04 > img {
    transform: translateY(100px);
}

#title02 .arrow {
    width: 125px;
    height: 125px;
    background: #B7E1FF;
    border-radius: 50%;
    opacity: 0;
}

#title02 .union {
    opacity: 0;
    transform: translateX(-30px);
}


#section17 .sticker01 {
    position: absolute;
    left: 482px;
    bottom: 277px;
}

#section17 .sticker01 .ic01 {
    position: absolute;
    left: 50%;
    top: 3px;
    margin-left: -42.5px;
    transform: translateY(19px);
}


#section17 .sticker02 {
    position: absolute;
    left: 482px;
    bottom: 144px;
}


#section17 .sticker02 .ic02 {
    position: absolute;
    left: 50%;
    top: 3px;
    margin-left: -42.5px;
    transform: translateY(19px);
}


#section17 .sticker03 {
    position: absolute;
    left: 599px;
    bottom: 144px;
}

#section17 .sticker03 .ic03 {
    position: absolute;
    left: 50%;
    top: 3px;
    margin-left: -42.5px;
    transform: translateY(19px);
}


#section17 .illust {
    position: absolute;
    right: 482px;
    bottom: 138px;
    transform: rotate(20deg);
}


/*section18 시작*/
#section18 {
    height: 3106px;
    position: relative;
    background: #fff;
}

#map {
    width: 100vw;
    height: 1268px;
    position: absolute;
    left: 0;
    top: 188px;
}


#map .number02 {
    position: absolute;
    left: 804px;
    top: 50px;
}

#map .number01 {
    position: absolute;
    left: 804px;
    top: 0;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#map .title01 {
    position: absolute;
    left: 920px;
    top: 33px;
}

#map .title02 {
    width: 480px;
    position: absolute;
    left: 50%;
    top: 140px;
    margin-left: -240px;
    transform: translateY(50px);
    opacity: 0;
}

#map .bg {
    position: absolute;
    left: 0;
    top: 198px;
    opacity: 0.5;
}

#map .line {
    position: absolute;
    left: 50%;
    top: 474px;
    margin-left: -452px;
}

#map .line svg {
    stroke-dasharray: 1159;
    stroke-dashoffset: 1159;
}

#map .dots {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 491px;
    top: 459px;
}

#map .dots > .dot01 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -7px;
    margin-top: -7px;
}

#map .dot03 {
    position: absolute;
    right: 380px;
    top: 846px;
}


#map .phone {
    width: 388px;
    height: 784px;
    position: absolute;
    left: 50%;
    top: 300px;
    margin-left: -194px;
    transform: translateY(50px);
}

#map .phone > .screen {
    position: absolute;
    left: 50%;
    margin-left: -200px;
    top: -43px;
    scale: 0.88;
}


#map .phone > .mockup {
    position: absolute;
    left: 50%;
    margin-left: -194px;
    top: 0;
}


#map .txt {
    width: 424px;
    height: 100px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -212px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transform: scale(0.5);
}


/*detail page*/
#detail {
    width: 100vw;
    height: 1276px;
    position: absolute;
    left: 0;
    bottom: 162px;
}

#detail .bg {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -645px;
    border-radius: 50px;
    overflow: hidden;
}
#detail .bg img{
    transform: scale(1.2);
}

#detail .line {
    width: 12px;
    height: 448px;
    position: absolute;
    left: 50%;
    top: -160px;
    margin-left: -6px;
    clip-path: inset(0% 0% 100% 0%);
}

#detail .line > .line01 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -1px;
}

#detail .line > .mark {
    height: 7px;
    position: absolute;
    left: 50%;
    margin-left: -6px;
    bottom: 0;
    transform: scale(1.2);
}


#detail .title01 {
    position: absolute;
    left: 50%;
    top: 94px;
    margin-left: 20px;
    opacity: 0;
    transform: translateX(-50px);
}

#detail .screen01 {
    position: absolute;
    left: 134px;
    top: 134px;
    transform: translateY(50px);
    opacity: 0;
}

#detail .screen02 {
    width: 352px;
    position: absolute;
    left: 50%;
    top: 398px;
    margin-left: -176px;
    transform: translateY(50px);
    opacity: 0;
}

#detail .screen03 {
    position: absolute;
    right: 104px;
    top: 524px;
    transform: translateY(50px);
    opacity: 0;
}

#detail .txt {
    width: 270px;
    height: 104px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -135px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transform: translateY(50px);
    opacity: 0;
}


#detail .arrow {
    width: 70px;
    height: 150px;
    position: absolute;
    left: 320px;
    bottom: 72px;
}

#detail .arrow > .arrow01 {
    opacity: 0;
}

#detail .arrow > .arrow02 {
    opacity: 0;
}


#detail .arrow > .arrow03 {
    opacity: 0;
}


/*section19 시작*/
#section19 {
    height: 2500px;
    position: relative;
    background: #ffffff;
}

/*se19_top*/
#se19_top {
    width: 1288px;
    height: 1088px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -644px;
}


#se19_top .number02 {
    position: absolute;
    left: 0;
    top: 50px;
}


#se19_top .number01 {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#se19_top .title01 {
    position: absolute;
    left: 115px;
    top: 32px;
    transform: translateY(50px);
    opacity: 0;
}


#se19_top .title02 {
    position: absolute;
    left: 0;
    top: 164px;
    transform: translateY(50px);
    opacity: 0;
}


#se19_top .txt01 {
    position: absolute;
    left: 0;
    top: 250px;
}

#se19_top .illust {
    width: 490px;
    height: 468px;
    position: absolute;
    left: 0;
    bottom: 128px;
}

#se19_top .illust > .pig {
    transform: translateY(50px);
    opacity: 0;
}

#se19_top .illust .point {
    position: absolute;
    left: 50%;
    top: -40px;
    margin-left: -130.5px;
    transform: scale(0.7) translateY(50px);
    opacity: 0;
}


#se19_top .illust .txt02 {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -132.5px;
}

#se19_top .line {
    position: absolute;
    left: 50%;
    bottom: 285px;
    margin-left: -110px;
    opacity: 0;
    transform: translateX(50px);
}

#se19_top .phone {
    width: 692px;
    height: 770px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(150px);
    opacity: 0;
}

#se19_top .coin01 {
    position: absolute;
    right: 70px;
    bottom: 38px;
    transform: translateX(50px) rotate(20deg);
}


#se19_top .screen {
    width: 664px;
    height: 760px;
    position: absolute;
    right: 10px;
    top: 330px;
    transform: translateX(-50px) rotate(-20deg);
}

#se19_top .screen > .mileage {
    width: 332px;
    height: 720px;
    position: absolute;
    right: 173px;
    top: -204px;
    transform: rotateX(36deg) rotateY(344deg) rotateZ(24deg);
    transform-style: preserve-3d;
    scale: 0.49;
}

#se19_top .screen > .mileage > video {
    border-radius: 55px;
}

#se19_top .screen > .mockup {
    position: absolute;
    right: 0;
    top: 0;
}


/*se19_bottom*/
#se19_bt {
    width: 1288px;
    height: 846px;
    position: absolute;
    left: 50%;
    bottom: 220px;
    margin-left: -644px;
}

#se19_bt .screen {
    width: 1250px;
    height: 686px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -625px;
    display: flex;
}
#se19_bt .screen > div{
    opacity: 0;
    transform: translateX(-50px);
}

#se19_bt .screen > .screen02 {
    margin-left: 36px;
    margin-right: 210px;
}

#se19_bt .badge {
    position: absolute;
    left: 0;
    top: -45px;
}

#se19_bt .arrow {
    width: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -23px;
}


#se19_bt .coin02 {
    position: absolute;
    left: 174px;
    bottom: 90px;
    transform: translate(50px, 50px) rotate(-25deg) scale(0.6);
    opacity: 0;
}

#se19_bt .coin03 {
    position: absolute;
    right: -148px;
    top: 50px;
    transform: translate(-50px, -50px) rotate(38deg) scale(0.4);
    opacity: 0;
}

#se19_bt .stamp {
    position: absolute;
    left: 50%;
    top: -6px;
    margin-left: -20px;
    transform: translate(50px, -50px);
    opacity: 0;
}

#se19_bt .txt {
    width: 256px;
    height: 130px;
    position: absolute;
    left: 424px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(50px);
    opacity: 0;
}

#se19_bt .txt > .txt02 {

}


/*section20 시작*/
#section20 {
    height: 664px;
    position: relative;
}

#section20 .box01 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -1330px;
    transform: translateX(360px);
}

#section20 .box02 {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -1330px;
    transform: translateX(-370px);
}


/*section21 시작*/
#section21 {
    height: 2056px;
    position: relative;
    background: #ffffff;
}

#section21 .bg {
    position: absolute;
    left: 50%;
    margin-left: -935px;
    top: 50px;
}

#section21 .arrow {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -43px;
    transform: rotate(-90deg);
}


#se21_top {
    width: 1058px;
    height: 920px;
    position: absolute;
    left: 50%;
    top: 198px;
    margin-left: -529px;
}

#se21_top .number {
    position: absolute;
    left: 344px;
    top: 0;
}

#se21_top .number02 {
    position: absolute;
    left: 344px;
    top: 50px;
}


#se21_top .number01 {
    position: absolute;
    left: 344px;
    top: 0;
    transform-origin: bottom;
    transform: rotateX(-180deg);
}


#se21_top .title01 {
    position: absolute;
    left: 460px;
    top: 30px;
}

#se21_top .title02 {
    width: 980px;
    position: absolute;
    left: 50%;
    top: 140px;
    margin-left: -490px;
    transform: translateY(50px);
    opacity: 0;
}

#se21_top .screen {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50px);
    opacity: 0;
}

#se21_top .badge {
    position: absolute;
    right: -92px;
    bottom: 292px;
    transform: scale(0.6) translateX(-50px);
    opacity: 0;
}

#se21_top .badge > .arrow01 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -23px;
    margin-top: -17.5px;
}

/*se21_bottom*/
#se21_bt {
    width: 1288px;
    height: 544px;
    position: absolute;
    left: 50%;
    bottom: 160px;
    margin-left: -644px;
}

#se21_bt .title03 {
    position: absolute;
    left: 128px;
    top: 0;
    transform: translateX(-50px);
    opacity: 0;
}

#se21_bt .memo01 {
    position: absolute;
    left: 0;
    bottom: 82px;
    transform: translateY(50px);
    opacity: 0;
}

#se21_bt .memo02 {
    width: 332px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -240px;
    transform: translateY(50px);
    opacity: 0;
}

#se21_bt .memo03 {
    position: absolute;
    right: 0;
    bottom: 158px;
    transform: translateY(50px);
    opacity: 0;
}


/*section22 시작*/
#section22 {
    height: 2832px;
    position: relative;
    background: #ffffff;
}

#section22 .bg {
    width: 100vw;
    height: 1325px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #f6f6f6;
}

/*se22_top*/
#se22_top {
    width: 1288px;
    height: 1390px;
    position: absolute;
    left: 50%;
    top: 228px;
    margin-left: -644px;
}

#se22_top .title01 {
    position: absolute;
    left: 20px;
    top: 0;
    transform: translateY(50px);
    opacity: 0;
}

#se22_top .title02 {
    position: absolute;
    left: 20px;
    top: 56px;
    transform: translateY(50px);
    opacity: 0;
}

#se22_top .title03 {
    position: absolute;
    left: 20px;
    top: 180px;
    opacity: 0;
}

#se22_top .caption01 {
    position: absolute;
    left: 20px;
    top: 290px;
    overflow: hidden;
}

#se22_top .caption01 > img {
    transform: translateX(-260px);
}


#se22_top .step01 {
    position: absolute;
    right: 0;
    top: 76px;
    transform: translateY(50px);
    opacity: 0;
}


#se22_top .step02 {
    position: absolute;
    left: 0;
    top: 435px;
    transform: translateY(50px);
    opacity: 0;
}


#se22_top .step03 {
    width: 605px;
    height: 426px;
    position: absolute;
    right: 0;
    top: 620px;
    transform: translateY(50px);
    opacity: 0;
}

#se22_top .step03 > .clova {
    position: absolute;
    right: 190px;
    top: 230px;
}

#se22_top .step03 > .cursor {
    position: absolute;
    left: 340px;
    top: 215px;
}


#se22_top .step04 {
    position: absolute;
    left: 0;
    top: 962px;
    transform: translateY(50px);
    opacity: 0;
}

/*se22_bottom*/
#se22_bt {
    width: 1288px;
    height: 978px;
    position: absolute;
    left: 50%;
    bottom: 128px;
    margin-left: -644px;
}

#se22_bt .frame01 {
    width: 1130px;
    height: 200px;
    position: absolute;
    left: -260px;
    top: 194px;
    display: flex;
    justify-content: space-between;
    transform: translateX(250px);
    opacity: 0;
}

#se22_bt .time {
    width: 90px;
    height: 248px;
    position: absolute;
    left: 123px;
    top: 147px;
    opacity: 0;
}

#se22_bt .time > .time01 {
    position: absolute;
    right: 2px;
    top: 21px;

}


#se22_bt .frame02 {
    width: 1130px;
    height: 200px;
    position: absolute;
    left: -390px;
    top: 422px;
    display: flex;
    justify-content: space-between;
    transform: translateX(-250px);
    opacity: 0;
}

#se22_bt .info {
    position: absolute;
    right: 0;
    top: 16px;
    transform: translateX(100px);
    opacity: 0;
}

#se22_bt .screen {
    position: absolute;
    right: -198px;
    top: 0;
    transform: translateX(100px);
    opacity: 0;
}

#se22_bt .txt01 {
    position: absolute;
    left: 54px;
    bottom: 236px;
    opacity: 0;
    transform: translateY(50px);
}

#se22_bt .box {
    position: absolute;
    left: 0;
    bottom: 0;
}

#box01 {
    width: 644px;
    height: 206px;
    background: #F0F0F0;
    border-radius: 16px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#box01 .steps {
    width: 550px;
    height: 92px;
    position: absolute;
    left: 48px;
    bottom: 57px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
}

#box01 .steps > div {
    margin-right: 22px;
}

#box01 .steps > .step01 {
    opacity: 0;
}

#box01 .steps > .step02 {
    opacity: 0;
}


#box01 .steps > .step03 {
    opacity: 0;
}


#box01 .steps > .step04 {
    opacity: 0;
}


#box01 .steps > .step05 {
    opacity: 0;
}


#box01 .steps > .step06 {
    opacity: 0;
}


#box01 .steps > .step07 {
    opacity: 0;
}


#box01 .steps > .step08 {
    opacity: 0;
}


#se22_bt .txt02 {
    position: absolute;
    right: 206px;
    bottom: 70px;
    transform: translateX(-50px);
    opacity: 0;
}


/*section23 시작*/
#section23 {
    height: 3194px;
    position: relative;
    background: #f6f6f6;
}

#round {
    width: 100vw;
    height: 1920px;
    position: absolute;
    left: 0;
    top: 126px;
    background: url("../image/section23/bg.png");
    /*border-radius: 50%;*/
}

#round .logo {
    position: absolute;
    left: 50%;
    top: 162px;
    margin-left: -54px;
    transform: translateY(50px);
    opacity: 0;
}

#round .txt {
    width: 1242px;
    height: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 442px;
    margin-left: -621px;
}

#round .txt > .txt01 {
    transform: translateY(50px);
    opacity: 0;
}

#round .txt > .txt02 {
    transform: translateY(50px);
    opacity: 0;
}

#round .txt > .txt03 {
    transform: translateY(50px);
    opacity: 0;
}


#round .window01 {
    width: 594px;
    height: 368px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    right: 316px;
    top: 660px;
}

#round .window01 > .illust01 {
    transform: translateX(50px);
    opacity: 0;
}

#round .window01 > .illust02 {
    transform: translateX(50px);
    opacity: 0;
}

#round .window02 {
    width: 594px;
    height: 368px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 316px;
    top: 1082px;
}

#round .window02 > .illust03 {
    transform: translateX(-50px);
    opacity: 0;
}

#round .window02 > .illust04 {
    transform: translateX(-50px);
    opacity: 0;
}

#phone {
    width: 100vw;
    height: 792px;
    position: absolute;
    left: 0;
    top: 1726px;
}


#phone .line08_svg {
    position: absolute;
    left: -17px;
    bottom: 122px;
}

#phone .line08_svg > svg {
    stroke-dasharray: 1146;
    stroke-dashoffset: 1146;
}


#phone .dot01 {
    position: absolute;
    left: 314px;
    bottom: 398px;
    transform: scale(0);
}

#phone .dot02 {
    position: absolute;
    left: 337px;
    bottom: 419px;
    transform: scale(0);
}


#phone .line09_svg {
    position: absolute;
    left: 367px;
    bottom: 22px;
}

#phone .line09_svg > svg {
    stroke-dasharray: 1132;
    stroke-dashoffset: 1132;
}


#phone .dot03 {
    position: absolute;
    right: 715px;
    bottom: 88px;
    transform: scale(0);
}


#phone .dot04 {
    position: absolute;
    right: 683px;
    bottom: 86px;
    transform: scale(0);
}


#phone .line10_svg {
    position: absolute;
    right: 0;
    bottom: 74px;
}

#phone .line10_svg > svg {
    stroke-dasharray: 1749;
    stroke-dashoffset: -1749;
}


#phone .phone01 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -276px;
    transform: translateY(50px);
    opacity: 0;
}

#footer {
    width: 1280px;
    height: 400px;
    position: absolute;
    left: 50%;
    bottom: 192px;
    margin-left: -640px;
}

#footer .union01 {
    width: 49px;
    position: absolute;
    right: 208px;
    top: -50px;
}

#footer .title01 {
    width: 794px;
    height: 92px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -397px;
    transform: translateY(50px);
    opacity: 0;
}

#footer .title01 .union02 {
    width: 97px;
    position: absolute;
    right: 105px;
    top: 0;
    transform: translateY(50px);
    opacity: 0;
}

#footer .title02 {
    width: 1046px;
    height: 92px;
    position: absolute;
    left: 50%;
    margin-left: -523px;
    top: 136px;
    transform: translateY(50px);
    opacity: 0;
}

#footer .title02 > .union03 {
    width: 87px;
    position: absolute;
    left: 82px;
    top: 0;
    transform: translateY(50px);
    opacity: 0;
}

#footer .info {
    width: 1280px;
    height: 54px;
    position: absolute;
    left: 50%;
    margin-left: -640px;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}

#section23 .move {
    width: 624px;
    height: 600px;
    position: absolute;
    left: 50%;
    margin-left: -312px;
    bottom: -40px;
}

/*https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin*/
#section23 .move > .light {
    width: 624px;
    position: absolute;
    left: 50%;
    top: -30px;
    margin-left: -312px;
    transition: all 1s;
    transform-origin: bottom;
}

#section23 .move > .truck {
    width: 74px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -37px;
}


#section23 .se023_light_box{
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
    display: flex;
}

#section23 .se023_light_box > div{
    flex: 1;
}