#intro {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 999999999;
}
#intro > div {
    width: 1070px;
    height: 142px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#intro .txt_hidden {
    background-color: #fff;
    /* background-color: hotpink; */
    display: flex;
    z-index: 100;
}
#intro .txt {
    display: flex;
}
#intro .castify_bg{
    width: 376px;
    height: 142px;
    background-color: black;
    position: relative;
    transform: translateX(180px);
    z-index: 100;
}
#intro .castify{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#intro .disney_bg{
    position: relative;
    width: 335px;
    height: 142px;
    background-color: #f4d000;
    transform: translateX(-180px);
    z-index: 100;
}
#intro .disney{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#intro .center_group {
    width: 347px;
    height: 142px;
    position: relative;
    z-index: 50;
}
#intro .center_bg {
    width: 416px;
    height: 142px;
    background-color: #2b58ce;
    position: relative;
    z-index: 100;
}
/* #intro .deco_group {
    position: absolute;
    left: 50%;
    top: -180px;
    transform: translateX(-50%);
} */
#intro .deco_group .alice_deco{
    position: absolute;
    left: 50%;
    top: -180px;
    transform: translateX(-50%);
}
#intro .deco_group .prin_deco{
    position: absolute;
    left: 50%;
    top: -220px;
    transform: translateX(-50%);
}
#intro .deco_group .mickey_deco1{
    position: absolute;
    left: 80%;
    top: -240px;
    transform: translateX(-50%);
}
#intro .deco_group .mickey_deco2 {
    height: 201px;
    position: absolute;
    left: 20%;
    top: -200px;
    transform: translateX(-50%);
}
#intro .deco_group .mickey_deco2 > img {
    opacity: 0;
}

#intro .deco_group div {
    overflow: hidden;
}
#intro .deco_group img {
    transform: translateY(100%);
}
#intro .center_logo {
    width: 416px;
    height: 142px;
}
#intro .center_logo > div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
    z-index: 150;
    overflow: hidden;
}
#intro .center_logo img {
    transform: translateY(100%);
}

#alert.on{
    opacity: 0;
    z-index: -1;
}
#alert{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #00000082;
    z-index: 9999;
    cursor: pointer;
}
#alert .pop {
    width: 300px;
    height: 300px;
    background-color: orange;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#menu {
    width: 100vw;
    height: 100vh;
    clip-path: circle(0% at 0% 0%);
    background-color:#fff;
    position: fixed;
    left: 0;
    top: 0;
    transition: all 1s;
    z-index: 9999999;
}
#menu.on {
    clip-path: circle(100% at 50% 50%);
}
#menu .close {
    position: absolute;
    top:38px; left: 39px;
    width: 129px;
    height: 129px;
    cursor: pointer;
}
#menu .cont1 .bg{
    position: absolute;
    top:224px; left: 194px;
    transition: all 1s;
    opacity: 0;
}
#menu .cont1 .bg.on{
    opacity: 1;
}
#menu .cont1 .ph{
    position: absolute;
    top:166px; left: 287px;
    cursor: pointer;
}
#menu .cont1 .str1{
    position: absolute;
    top:341px; left: 145px;
    transform: translateX(200px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont1 .str1.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont1 .str2{
    position: absolute;
    top:383px; left: 590px;
    transform: translate(-120px, 80px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont1 .str2.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont1 .deco1{
    position: absolute;
    top:229px; left: 170px;
    transform: translate(250px,150px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont1 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont1 .deco1.on> img {
    animation: menu1 1.5s linear infinite alternate;
}
@keyframes menu1 {
    100% {
        transform: translateY(-50px);
    }
}
#menu .cont1 .deco2{
    position: absolute;
    top:594px; left: 164px;
    transform: translate(250px,-200px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont1 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont1 .deco2.on> img {
    animation: menu1 1.5s linear infinite alternate;
}
@keyframes menu1 {
    100% {
        transform: translateY(-50px);
    }
}
#menu .cont1 .deco3{
    position: absolute;
    top:256px; left: 615px;
    transform: translate(-200px,100px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont1 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont1 .deco3.on> img {
    animation: menu1 1.5s linear infinite alternate;
}
@keyframes menu1 {
    100% {
        transform: translateY(-50px);
    }
}
#menu .cont1 .deco4{
    position: absolute;
    top:624px; left: 619px;
    transform: translate(-200px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont1 .deco4.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont1 .deco4.on> img {
    animation: menu1 1.5s linear infinite alternate;
}
@keyframes menu1 {
    100% {
        transform: translateY(-20px);
    }
}
#menu .cont1 .txt{
    position: absolute;
    top:789px; left: 220px;
    transform: translate(0);
    transition: all .7s .3s;
    opacity: 1;
}


#menu .cont2 .bg{
    position: absolute;
    top:224px; left: 738px;
    transition: all 1s;
    opacity: 0;
}
#menu .cont2 .bg.on{
    opacity: 1;
}
#menu .cont2 .ph{
    position: absolute;
    top:166px; left: 816px;
    cursor: pointer;
}
#menu .cont2 .deco1{
    position: absolute;
    top:233px; left: 679px;
    transform: translate(150px,100px);
    transition: all .7s .3s;
    opacity: 0

}
#menu .cont2 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont2 .deco2{
    position: absolute;
    top:467px; left: 661px;
    transform: translate(200px);
    transition: all .7s .3s;
    opacity: 0
}
#menu .cont2 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont2 .deco3{
    position: absolute;
    top:284px; right: 622px;
    transform: translateX(-200px);
    transition: all .7s .3s;
    opacity: 0
}
#menu .cont2 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont2 .txt{
    position: absolute;
    top:789px; left: 803px;
}

#menu .cont3 .bg{
    position: absolute;
    top:224px; right: 194px;
    transition: all 1s;
    opacity: 0;
}
#menu .cont3 .bg.on{
    opacity: 1;
}
#menu .cont3 .ph{
    position: absolute;
    top:166px;  right: 277px;
    cursor: pointer;
}
#menu .cont3 .deco1{
    position: absolute;
    top:244px; right: 590px;
    transform: translate(200px,100px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont3 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont3 .deco1.on> img {
    animation: menu3 1.5s linear infinite alternate;
}
@keyframes menu3 {
    100% {
        transform: translateY(-50px);
    }
}
#menu .cont3 .deco2{
    position: absolute;
    top:421px; right: 530px;
    transform: translateX(200px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont3 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont3 .deco3{
    position: absolute;
    top:201px; right: 133px;
    transform: translate(-200px,100px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont3 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont3 .deco4{
    position: absolute;
    top:499px; right: 147px;
    transform: translate(-200px,-100px);
    transition: all .7s .3s;
    opacity: 0;
}
#menu .cont3 .deco4.on{
    transform: translate(0);
    opacity: 1;
}
#menu .cont3 .deco4.on> img {
    animation: menu4 1.5s linear infinite alternate;
}
@keyframes menu4 {
    100% {
        transform: translateY(-50px);
    }
}
#menu .cont3 .txt{
    position: absolute;
    top:789px; right:300px;
}

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

.clean{clear:both;}

/*   sectoion01 - 메인   */ 

#section01{
    background: orange;
    height: 980px;
    
}

.bg_group{position: relative;

}
.bg_group > div {
        position:absolute;
        top:0; left: 0;
        height:100%;
        opacity: 0;
        transition: all 1s;
}
.bg_group > div.on {
    z-index: 500;
    opacity: 1;
}
.bg_group img{
    width:100%;
    height: 980px;
}
.bg01{
    z-index: 1;
}
.top{
    position: absolute;
    top:37px; left: 0;
    width: 100%;
    z-index: 700;
}

.menu{
    float: left; margin-left: 50px;
    cursor: pointer;
}
.search{
    float: right; margin-right: 50px;
}

#section01 .text{
    position: absolute;
    top:203px; left: 0;
    z-index: 600;
    width: 100%;
}
#section01 .left{
    float:left; margin-left: 50px;
}
#section01 .txt {
    transition: all 1s;
}
.text .left .txt2 {
    margin-top:114px;
}
.text .left  .txt3 {
    margin-top:133px;
}

.text .right{
    float:right; margin-right: 50px;
   text-align: right;
   
}

.text .right .txt5 {
    margin-top:113px;
}

.text  .right .txt6 {
    margin-top:132px;
}




/*     sectoion2      */

#section02{
    background-color: #3d4bcb;
    position: relative;
    height: 1480px;
    width: 1920px;
}

.phone1 .txt1{
    position: absolute;
    top:216px; left: 200px;
    opacity: 0;
    transition: all .5s; 
}
.phone1 .txt1.on{
    opacity: 1;
}
.phone1 .txt2{
    position: absolute;
    top:255px; left: 138px; 
    overflow: hidden;
    position: absolute;
}
.phone1 .txt2 > img {
    transform: translateY(130%);
    transition: all .5s .3s;
}
.phone1 .txt2.on > img {
    transform: translateY(0);
}
.phone1 .txt3{
    position: absolute;
    top:377px; left: 207px;
    opacity: 0;
    transition: all .7s .6s;
}
.phone1 .txt3.on{
    opacity: 1;
}
.phone1 .ph1{
    position: absolute;
    top:430px; left: 110px;
    margin-top: 35px;
    transform: translateX(-100%);
    opacity: 0;
}

.phone1 .deco1{
    position: absolute;
    top:132px; left: 74px;
    transform: translate(100px);
    transition: all .5s;
    opacity: 0;
}
.phone1 .deco1.on{
    transform: translate(0);
    opacity: 1;
}

.phone1 .deco2{
    position: absolute;
    top:297px; left: 491px;
    transform: translate(-100px);
    opacity: 0;
    transition: all .5s;
}
.phone1 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
.phone1  .deco3{
    position: absolute;
    top:168px; left: 448px;
    opacity: 0;
    transition: all .6s .4s;
}
.phone1  .deco3.on{
    opacity: 1;
}
.phone1 .deco4{
    position: absolute;
    top:412px; left: 61px;
    opacity: 0;
    transition: all .6s .4s;
}
.phone1  .deco4.on{
    opacity: 1;
}
.phone1 .deco5{
    position: absolute;
    top:1292px; left: 86px;
}


.content1 .cont {
    position: absolute;
    right: 62px;
    top: 95px;
}

.content1 .txt1{
    position: absolute;
    top:972px; left: 759px;
    opacity: 0;
    transition: all .8s;
}
.content1 .txt1.on{
    opacity: 1;
}
.content1 .txt2{
    position: absolute;
    top:1087px; left: 759px;
    transform: translateX(500px);
    transition: all .7s .3s;
    opacity: 0;
}
.content1 .txt2.on{
    transform: translateX(0);
    opacity: 1;
}
.content1 .btn{
    position: absolute;
    top:1242px; left: 786px;
}

.content1 .btn_line{
    position: absolute;
    top:1220px; left: 747px;
}

.deco_group1 .deco7{
    position: absolute;
    top:1094px; right: 33px;
    transform: translatex(500px);
    transition: all .8s .5s;
    opacity: 0;
}

.deco_group1 .deco7.on{
    transform: translateX(0);
    opacity: 1;
}


.deco_group1 .deco6{
    /* width: 215.79px;
    height: 173.08px; */
    /* background-color: orange; */
    position: absolute;
    top:800px; left: 567px;
    width:199px;
    height: 140px;
}
.deco_group1 .deco6 #st0 {
    position: absolute;
    left: 15px;
    top: 95px;
    stroke-dashoffset: 76;
    stroke-dasharray: 76;
    opacity: 0;
}
.deco_group1 .deco6.on #st0{
    animation: arrow1 .4s .7s linear 1 forwards;
    opacity: 1;
}

@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.deco_group1 .deco6 #st1 {
    position: absolute;
    left: 5px;
    top: 12px;
}
.deco_group1 .deco6 #st1 {
    stroke-dashoffset: 269;
    stroke-dasharray: 269;
    opacity: 0;
}
.deco_group1 .deco6.on #st1{
    opacity: 1;
    animation: line .7s linear 1 forwards ;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}








/*  section3  */

#section03{
    height: 20000vh;
}
#section03 .trigger-this-03 {
    height: 100%;
}
#section03 .fix-this-03 {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: #3d4bcb;
}
#section03 .fix-this-03.on1 {
    background-color: #faf6f3;
}
#section03 .fix-this-03.on2 {
    background-color: #7c1a16;
}
#section03 .inner {
    width: 4782px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
}



/* section3 - s03_1 */
#section03 .s03_1 {
    background-color: #3d4bcb;
    width: 100vw;
    height:100vh;
    position: relative;
}



.s03_1 .logo{
    position: absolute;
    top:145px; left: 63px;
    transform: translateX(-30%);
    opacity: 0;
    /* transition: all 1s cubic-bezier(0.7,-0.23, 0, 1.24); */
    transition: all .7s;
}
.s03_1 .logo.on {
    transform: translateX(0);
    opacity: 1;
}

.s03_1 .bg_deco{
    position: absolute;
    top:0; left: 390px;
    width: 388px;
    height: 223px;
}
.s03_1 .bg_deco #st3 {
    position: absolute;
    top:0; left: 390px;
    stroke-dashoffset: 942;
    stroke-dasharray: 942;
    opacity: 0;
}
.s03_1 .bg_deco.on #st3{
    animation: bg .8s .4s linear 1 forwards;
    opacity: 1;
}

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

.s03_1 .ph2{
    position: absolute;
    top:113px; left: 681px;
    opacity: 0;
    transition: all .7s .5s;

    /* transition-property: all;
    transition-duration: 1s;
    transition-delay: 0.5s; */
}
.s03_1 .ph2.on {
    opacity: 1;
}
.s03_1 .phone2 .deco1{
    position: absolute;
    top:787px; left: 620px;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 0.7s .8s;
}
.s03_1 .phone2 .deco1.on {
    transform: translateX(0);
    opacity: 1;
}

.s03_1  .phone2 .txt1{
    position: absolute;
    top:567px; right: 323px;
    opacity: 0;
    transition: all .6s;
}
.s03_1  .phone2 .txt1.on {
    opacity: 1;
}

.s03_1 .phone2 .txt2{
    position: absolute;
    top:627px; right: 299px;
    transition: all .5s .4s;
    opacity: 0;
}
.s03_1  .phone2 .txt2.on {
    opacity: 1;
}
.s03_1  .phone2  .arrow{
    width: 205px;
    height: 67px;
    position: absolute;
    top:690px; left: 1053px;

}
.s03_1  .phone2  .arrow #st2_0 {
    position: absolute;
    left: 147px;
    top: 3px;
    stroke-dashoffset: 102;
    stroke-dasharray: 102;
    opacity: 0;
}
.s03_1  .phone2  .arrow.on #st2_0{
    animation: arrow1 .4s .5s linear 1 forwards;
    opacity: 1;
}

@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_1  .phone2  .arrow #st2_1 {
    position: absolute;
    left: 18px;
    top: 9px;
}
.s03_1  .phone2  .arrow  #st2_1 {
    stroke-dashoffset: 330;
    stroke-dasharray: 330;
    opacity: 0;
}
.s03_1  .phone2  .arrow.on #st2_1{
    opacity: 1;
    animation: line .7s linear 1 forwards ;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}



.s03_1 .content2 .cont{
    position: absolute;
    top:55px; right: 44px;
    transition: all .4s;
    opacity: 0;
}
.s03_1 .content2 .cont.on{
    opacity: 1;
}

.s03_1 .content2 .txt{
    position: absolute;
    top:298px; right: 75px;
    transition: all .4s .3s;
    opacity: 0;
}
.s03_1 .content2 .txt.on{
    opacity: 1;
}


.s03_1 .content2 .deco1{
    position: absolute;
    top:74px; right: 19px;
    transform: translate(100px,-100px);
    transition: all .4s .4s;
    opacity: 0;
}
.s03_1 .content2 .deco1.on{
    transform: translate(0);
    opacity: 1;
}


.s03_1 .content2 .deco2{
    position: absolute;
    top:350px; right: 56px;
    transform: translateY(100px);
    transition: all .5s .6s;
    opacity: 0;
}

.s03_1 .content2 .deco2.on{
    transform: translateY(0);
    opacity: 1;
}






/* section3 - s03_2 */
#section03 .s03_2 {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #3d4bcb;   
    z-index: 100;
}

.s03_2 .deco{
    position: absolute;
    top:737px; left: 83px;
    transform: translateY(100px);
    transition: all .5s;
    opacity: 0;
}
.s03_2 .deco.on{
    transform: translateY(0);
    opacity: 1;
}

.s03_2 .cont{
    position: absolute;
    top:64px; left: 523px;
    transform: scale(1.4);
    /* transition: all 1s .3s; */
}
/* .s03_2 .cont.on {
    transform: scale(1);
} */
 



/* section3 - s03_3 */

#section03 .s03_3 {
    width: 942px;
    height: 100vh;
    position: relative;
    background-color: #3d4bcb;   
}
.s03_3 .content3 .deco1_1{
    position: absolute;
    top:62px; left: 339px;
}

.s03_3 .content3 .deco1_2{
    position: absolute;
    top:75px; left: 364px;
}

.s03_3 .content3 .deco2 {
    position: absolute;
    top:312px; left: 303px;
    transform: translate(230px, 140px);
    transition: all .7s .2s ;
    opacity: 0;
}
.s03_3 .content3 .deco2.on {
    transform: translate(0);
    opacity: 1;
}
.s03_3 .content3 .deco2.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}
.s03_3 .content3 .deco3{
    position: absolute;
    top:540px; left: 306px;
    transform: translate(230px, -140px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_3 .content3 .deco3.on {
    transform: translate(0);
    opacity: 1;
}
.s03_3 .content3 .deco3.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}
 
.s03_3 .content3 .deco4{
    position: absolute;
    top:660px; left: 290px;
    transform: translate(230px, -140px);
    transition: all .7s .2s;
    opacity: 0;
}
/* .s03_3 .content3 .deco4.on {
    transform: translate(0);
    opacity: 1;
} */
 
.s03_3 .content3 .deco5{
    position: absolute;
    top:577px; right:112px;
    transform: translate(-230px, -140px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_3 .content3 .deco5.on {
    transform: translate(0);
    opacity: 1;
}
.s03_3 .content3 .deco5.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}

.s03_3 .content3 .deco6{
    position: absolute;
    top:285px; right:118px;
    transform: translate(-200px, 100px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_3 .content3 .deco6.on {
    transform: translate(0);
    opacity: 1;
}
.s03_3 .content3 .deco6.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}

.s03_3 .content3 .deco7_1{
    position: absolute;
    top:43px; right:129px;
    transform: translate(-150px, 300px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_3 .content3 .deco7_1.on{
    transform: translate(0);
    opacity: 1;
}

.s03_3 .content3 .deco7_2{
    position: absolute;
    top:60px; right:178px;
    transition: all 1s .5s;
    opacity: 0;
}
.s03_3 .content3 .deco7_2.on{
    transform: translate(0);
    opacity: 1;
}

.s03_3 .content3 .deco8{
    position: absolute;
    top:645px; right:135px;
    transform: translate(130px,100px);
    transition: all .8s .5s;
    opacity: 0;
}
.s03_3 .content3 .deco8.on{
    transform: translate(0);
    opacity: 1;
}

.s03_3 .content3 .bg{
    position: absolute;
    top:207px; right:156px;
    transition: all 1s;
    opacity: 0;
}
.s03_3 .content3 .bg.on{
    opacity: 1;
}

.s03_3 .content3 .ph3{
    position: absolute;
    top:128px; right:224px;
}


.s03_3 .content3 .txt1{
    position: absolute;
    top:815px; right:337px;

    transition: all .6s .5s;
    opacity: 0;
}
.s03_3 .content3 .txt1.on{
    opacity: 1;
}

.s03_3 .content3 .txt2{
    width: 419px;
    height: 77px;
    overflow: hidden;
    position: absolute;
    top:846px; right:176px;
}
.s03_3 .content3 .txt2 > img {
    transform: translateY(100%);
    transition: all .6s .4s;
}
.s03_3 .content3 .txt2.on > img {
    transform: translateY(0);
}
 


/* #section03 .s03_4  */
#section03 .s03_4 {
    width: 1920px;
    height: 2246px;
    position: relative;
    position: absolute;
    background-color: #3d4bcb;  
    right: -1920px;
    top: 0;
}
.s03_4 .content4 .acc1{
    position: absolute;
    top:296px; left: 600px;
    transform: translate(-100px,-100px);
    transition: all .7s;
    opacity: 0;
}
.s03_3 .content4 .acc1.on{
    transform: translateY(0);
    opacity: 1;
}

.s03_4 .content4 .acc2{
    position: absolute;
    top:333px; left: 701px;
    transform: translate(-100px,-100px);
    transition: all .7s .4s;
    opacity: 0;
}
.s03_3 .content4 .acc2.on{
    transform: translateY(0);
    opacity: 1;
}

.s03_4 .content4 .arrow{
    position: absolute;
    top:603px; left: 799px;
    width: 30px;
    height: 93px;
}
.s03_4 .content4 #st4_0 {
    position: absolute;
    left: 0;
    top: 0;
    stroke-dashoffset: 47;
    stroke-dasharray: 47;
    opacity: 0;
}
.s03_4 .content4 .arrow.on #st4_0{
    animation: arrow1 .5s .7s linear 1 forwards;
    opacity: 1;
}

@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_4 .content4 #st4_1 {
    position: absolute;
    left: 0;
    top: 0;
}
.s03_4 .content4 #st4_1 {
    stroke-dashoffset: 148;
    stroke-dasharray: 148;
    opacity:0;
}
.s03_4 .content4 .arrow.on #st4_1{
    opacity: 1;
    animation: line .5s .4s linear 1 forwards ;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}

.s03_4 .content4 .deco1{
    position: absolute;
    top:680px; left: 380px;
    transform: translate(-100px,-100px);
    transition: all .6s .5s;
    opacity: 0;
}
.s03_4 .content4 .cont_acc .deco1.on{
    opacity: 1;
    transform: translate(0);
}

.s03_4 .content4 .cont_acc .txt1{
    position: absolute;
    top:662px; left: 430px;
    opacity: 0;
    transition: all .6s .4s;
}
.s03_4 .content4 .cont_acc .txt1.on{
    opacity: 1;
}

.s03_4 .content4 .cont_acc .txt2{
    position: absolute;
    top:782px; left: 467px;
    transform: translateY(100px);
    transition: all .6s .5s;
    opacity: 0;
}
.s03_4 .content4 .cont_acc .txt2.on{
    opacity: 1;
    transform: translate(0);
}
.s03_4 .content4 .vd_group video{
    position: absolute;
    top:894px; left: 380px;
    width: 520px;
    height: 858px;
    object-fit: cover;
    opacity: 0;
    transition: all .7s;
}
.s03_4 .content4 .vd_group video.on{
    opacity: 1;
}

.s03_4 .content4 .vd_group .txt1{
    position: absolute;
    top:1796px; left: 423px;
    transition: all .8s;
    opacity: 0;
}
.s03_4 .content4 .vd_group .txt1.on{
    opacity: 1;
}
.s03_4 .content4 .vd_group .txt2{
    position: absolute;
    top:1908px; left: 402px;
    transform: translate(100px,100px);
    transition: all .6s .4s;
    opacity: 0;
}
.s03_4 .content4 .vd_group .txt2.on{
    opacity: 1;
    transform: translate(0);
}
.s03_4 .content4 .cont1{
    position: absolute;
    top:829px; right: 351px;
    transform: translate(300px,-460px);
    transition: all .7s .5s;
    opacity: 0;
}
.s03_4 .content4 .cont1.on{
    transform: translate(0);
    opacity: 1;
}

.s03_4 .content4 .cont2{
    position: absolute;
    top:1445px; right: 351px;
    transform: translate(400px,360px);
    transition: all .7s .6s cubic-bezier(0.75,-0.13, 1, 1);
    opacity: 0;
}
.s03_4 .content4 .cont2.on{
    transform: translate(0);
    opacity: 1;
}
.s03_4 .content4 .deco2{
    position: absolute;
    top:1984px; right: 212px;
    transform: translate(200px);
    transition: all .6s ;
    opacity: 0;
    z-index: 10;
}
.s03_4 .content4 .deco2.on{
    transform: translate(0);
    opacity: 1;
}



/*   content5 - .s03_5 */
#section03 .s03_5 {
    width: 100vw;
    height: 980px;
    background-color: #faf6f3;
    position: relative;
    position: absolute;
    right: -1920px;
    bottom: 0;
}
.s03_5 .content5 .line1{
    width: 0;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top:257px; right: 772px;
    transition: all .8s;
}
.s03_5 .content5 .line1.on {
    width: 988px;
}
.s03_5 .content5 .txt1{
    width: 248px;
    height: 19px;
    overflow: hidden;
    position: absolute;
    top:340px; left: 414px;
}
.s03_5 .content5 .txt1 > img {
    transform: translateY(300%);
    transition: all .7s;
}
.s03_5 .content5 .txt1.on > img {
    transform: translateY(0);
}
.s03_5 .content5 .txt2{
    width: 739px;
    height: 43px;
    overflow: hidden;
    position: absolute;
    top:394px; left: 197px;
}
.s03_5 .content5 .txt2 > img {
    transform: translateY(100%);
    transition: all .5s .4s;
}
.s03_5 .content5 .txt2.on > img {
    transform: translateY(0);
}

.s03_5 .content5 .txt3{
    position: absolute;
    top:480px; left: 276px;
    transform: translateY(100px);
    transition: all .8s .5s;
    opacity: 0;
}
.s03_5 .content5 .txt3.on{
    transform: translateY(0);
    opacity: 1;
}

.s03_5 .content5 .line2{
    width: 0;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top:648px; left: 42px;
    transition: all 1s;
}
.s03_5 .content5 .line2.on {
    width: 988px;
}

.s03_5 .content5 .cont{
    width: 809px;
    height: 494px;
    overflow: hidden;
    position: absolute;
    top:188px; right: 22px;
}
.s03_5 .content5 .cont > img {
    transform: translateY(100%);
    transition: all .6s .4s;
}
.s03_5 .content5 .cont.on > img {
    transform: translateY(0);
}



/*   content6 - .s03_6 */
#section03 .s03_6 {
    width: 100vw;
    height: 1244px;
    background-color: #faf6f3;
    position: absolute;
    left: 0;
    bottom: -1244px;
}
.s03_6 .content6 .cont{
    position: absolute;
    top:66px; left: 84px;
    opacity: 1;
}

.s03_6 .content6 .txt1{
    position: absolute;
    top:983px; left: 111px;
    opacity: 0;
    transition: all .5s;
}
.s03_6 .content6 .txt1.on{
    opacity: 1;
}
.s03_6 .content6 .txt2{
    position: absolute;
    top:1097px; left: 111px;
    transform: translateX(-500px);
    transition: all .5s .4s;
    opacity: 0;
}
.s03_6 .content6 .txt2.on{
    transform: translateX(0);
    opacity: 1;
}
.s03_6 .content6 .arrow {
    position: absolute;
    top:655px; right: 619px;
    width: 199px;
    height: 140px;
}
.s03_6 .content6 .arrow #st5_0 {
    position: absolute;
    left: 160px;
    top: 185px;
    stroke-dashoffset: 114;
    stroke-dasharray: 114;
    opacity: 0;
}
.s03_6 .content6 .arrow.on #st5_0 {
    animation: arrow1 .3s .7s linear 1 forwards;
    opacity: 1;
}
@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_6 .content6 .arrow #st5_1 {
    position: absolute;
    left: 15px;
    top: 95px;
    stroke-dashoffset: 280;
    stroke-dasharray: 280;
    opacity: 0;
}
.s03_6 .content6 .arrow.on #st5_1 {
    animation: line .6s linear 1 forwards ;
    opacity: 1;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_6 .content6 .txt3{
    position: absolute;
    top:129px; right: 237px;
    opacity: 0;
    transition: all .5s;
}
.s03_6 .content6 .txt3.on{
    opacity: 1;
}

.s03_6 .content6 .txt4{
    position: absolute;
    top:167px; right: 84px;
    overflow: hidden;
}
.s03_6 .content6 .txt4 > img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
.s03_6 .content6 .txt4.on > img {
    transform: translateY(0);
}

.s03_6 .content6 .txt5{
    position: absolute;
    top:287px; right: 240px;
    opacity: 0;
    transition: all .7s .5s;
}
.s03_6 .content6 .txt5.on{
    opacity: 1;
}

.s03_6 .content6 .ph{
    position: absolute;
    top:331px; right: 157px;
}


/*   contents7 - .s03_7 */
#section03 .s03_7 {
    width: 100vw;
    height: 4399px;
    background-color: #faf6f3;
    position: absolute;
    right: -1920px;
    bottom: 0;
}
.s03_7 .content7_1 .deco1{
    position: absolute;
    bottom:86px; left: 187px;
    transform: translate(-100px,200px);
    transition: all .6s;
    opacity: 0;
}
.s03_7 .content7_1 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
.s03_7 .content7_1 .txt1{
    position: absolute;
    bottom:707px; left: 419px;
    overflow: hidden;
    position: absolute;
}
.s03_7 .content7_1 .txt1 > img {
    transform: translateY(150%);
    transition: all .6s .4s;
}
.s03_7 .content7_1 .txt1.on > img {
    transform: translateY(0);
}

.s03_7 .content7_1 .txt2{
    position: absolute;
    bottom:453px; left: 419px;
    opacity: 0;
    transition: all .6s .4s;
}
.s03_7 .content7_1 .txt2.on{
    opacity: 1;
}
.s03_7 .content7_1 .deco2{
    position: absolute;
    bottom:790px; left: 563px;
}
.s03_7 .content7_1 .cont{
    position: absolute;
    bottom:551px; right: 345px;
    transform: translateX(500px);
    opacity: 0;
    transition: all .7s;
}
.s03_7 .content7_1 .cont.on{
    opacity: 1;
    transform: translateX(0);
}
.s03_7 .content7_1  .arrow {
    position: absolute;
    bottom: 567px;
    right: 870px;
    width: 200px;
    height: 141px;
}
.s03_7 .content7_1  .arrow #st6_0 {
    position: absolute;
    bottom: -10px;
    left: -19px;
    stroke-dashoffset: 120;
    stroke-dasharray: 120;
    opacity: 0;
}
.s03_7 .content7_1  .arrow.on #st6_0 {
    animation: arrow1 .4s .6s linear 1 forwards;
    opacity: 1;
}
@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_7 .content7_1  .arrow #st6_1 {
    position: absolute;
    left: 0px;
    top: 0px;
    stroke-dashoffset: 387;
    stroke-dasharray: 387;
    opacity: 0;
}
.s03_7 .content7_1  .arrow.on #st6_1 {
    animation: line .4s .2s linear 1 forwards ;
    opacity: 1;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}


.s03_7 .content7_2 .bg{
    position: absolute;
    bottom:1532px; left: 365px;
    opacity: 0;
    transition: all .7s;
}
.s03_7 .content7_2 .bg.on{
    opacity: 1;
}
.s03_7 .content7_2 .ph{
    position: absolute;
    bottom:1445px; left: 429px;
    transform: translateY(-500px);
    opacity: 0;
    transition: all .7s .4s;
}
.s03_7 .content7_2 .ph.on{
    opacity: 1;
    transform: translateY(0);
}
.s03_7 .content7_2 .deco1{
    position: absolute;
    bottom:2315px; left: 393px;
    transform: translate(-200px,-100px);
    opacity: 0;
    transition: all .6s;
}
.s03_7 .content7_2 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
.s03_7 .content7_2 .deco2{
    position: absolute;
    bottom:1428px; left: 326px;
    transform: translateX(-300px);
    opacity: 0;
    transition: all .6s .4s;
}
.s03_7 .content7_2 .deco2.on{
    transform: translateX(0);
    opacity: 1;
}
.s03_7 .content7_2 .cont{
    position: absolute;
    bottom:1851px; right: 346px;
}

.s03_7 .content7_2 .txt1{
    position: absolute;
    bottom:1778px; right: 516px;
    opacity: 0;
    transition: all .6s .5s;
}
.s03_7 .content7_2 .txt1.on{
    opacity: 1;
}
.s03_7 .content7_2 .txt2{
    position: absolute;
    bottom:1673px; right: 449px;
    overflow: hidden;
    position: absolute;
}
.s03_7 .content7_2 .txt2 > img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
.s03_7 .content7_2 .txt2.on > img {
    transform: translateY(0);
}
.s03_7 .content7_2 .txt3{
    position: absolute;
    bottom:1583px; right: 433px;
    opacity: 0;
    transition: all .6s;
}
.s03_7 .content7_2 .txt3.on{
    opacity: 1;
}
.s03_7 .content7_2 .deco3{
    position: absolute;
    bottom:1772px; right: 244px;
    transform: translate(300px,200px);
    opacity: 0;
    transition: all .7s .5s;
}
.s03_7 .content7_2 .deco3.on{
    transform: translateX(0);
    opacity: 1;
}
.s03_7 .content7_2  .arrow {
    position: absolute;
    top: 2091px;
    left: 788px;
    width: 184px;
    height: 156px;
}
.s03_7 .content7_2  .arrow #st7_0 {
    position: absolute;
    top: -17px;
    left: 120px;
    stroke-dashoffset: 122;
    stroke-dasharray: 122;
    opacity: 0;
}
.s03_7 .content7_2  .arrow.on #st7_0 {
    animation: arrow1 .4s .6s linear 1 forwards;
    opacity: 1;
}
@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_7 .content7_2  .arrow #st7_1 {
    position: absolute;
    left: 0px;
    top: 0px;
    stroke-dashoffset: 385;
    stroke-dasharray: 385;
    opacity: 0;
}
.s03_7 .content7_2  .arrow.on #st7_1 {
    animation: line .4s .2s linear 1 forwards ;
    opacity: 1;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}


.s03_7 .content7_3 .deco1{
    position: absolute;
    top:141px; right: 172px;
    transform: translate(200px,-200px);
    transition: all .8s ;
    opacity: 0;
}
.s03_7 .content7_3 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
.s03_7 .content7_3 .txt1{
    position: absolute;
    top:141px; left:822px;
    opacity: 0;
    transition: all .5s;
}
.s03_7 .content7_3 .txt1.on{
    opacity: 1;
}
.s03_7 .content7_3 .txt2{
    overflow: hidden;
    position: absolute;
    top:205px; left:601px;
}
.s03_7 .content7_3 .txt2> img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
.s03_7 .content7_3 .txt2.on > img {
    transform: translateY(0);
}

.s03_7 .content7_3 .cont1{
    position: absolute;
    top:310px; left:404px;
}
.s03_7 .content7_3 .deco2{
    position: absolute;
    top:938px; right:293px;
    transform: translate(100px,300px);
    opacity: 0;
    transition: all .7s .3s;
}
.s03_7 .content7_3 .deco2.on{
    transform: translate(0);
    opacity: 1;
}

.s03_7 .content7_3 .cont2{
    position: absolute;
    top:1013px; left:190px;
    transform: translate(-200px,-100px);
    opacity: 0;
    transition: all .7s;
}
.s03_7 .content7_3 .cont2.on{
    transform: translate(0);
    opacity: 1;
}
.s03_7 .content7_3 .txt3{
    width: 331px;
    height: 89px;
    overflow: hidden;
    position: absolute;
    top:1345px; left:263px;
    
}
.s03_7 .content7_3 .txt3> img {
    transform: translateY(300%);
    transition: all .5s ;
}
.s03_7 .content7_3 .txt3.on > img {
    transform: translateY(0);
}

.s03_7 .content7_3 .txt4{
    position: absolute;
    top:1454px; left:266px;
    opacity: 0;
    transition: all .5s;
}
.s03_7 .content7_3 .txt4.on{
    opacity: 1;
}    
.s03_7 .content7_3 .deco3{
    position: absolute;
    top:1352px; left:623px;
    opacity: 0;
    transition: all .8s;
}
.s03_7 .content7_3 .deco3.on{
    opacity: 1;
}
.s03_7 .content7_3 .arrow {
    position: absolute;
    top: 1169px;
    left: 688px;
    width: 141px;
    height: 157px;
}
.s03_7 .content7_3 .arrow #st8_0 {
    position: absolute;
    top: -11px;
    left: 80px;
    stroke-dashoffset: 110;
    stroke-dasharray: 110;
    opacity: 0;
}
.s03_7 .content7_3 .arrow.on #st8_0 {
    animation: arrow1 .4s .6s linear 1 forwards;
    opacity: 1;
}
@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_7 .content7_3 .arrow #st8_1 {
    position: absolute;
    left: 0px;
    top: 0px;
    stroke-dashoffset: 343;
    stroke-dasharray: 343;
    opacity: 0;
}
.s03_7 .content7_3 .arrow.on #st8_1 {
    animation: line .4s .2s linear 1 forwards ;
    opacity: 1;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}


/*  content8 */
#section03 .s03_8 {
    width: 100vw;
    height: 100vh;
    background-color: #faf6f3;
    position: absolute;
    right: -1920px;
    top: 0;
}

.s03_8 .content8 .deco1{
    position: absolute;
    top:47px; left:380px;
    transform: translate(50px, -29px);
    transition: all .4s;
    opacity: 0;
}
.s03_8 .content8 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
.s03_8 .content8 .txt1{
    position: absolute;
    top:99px; left:172px;
    opacity: 0;
    transition: all .5s .4s; 
}
.s03_8 .content8 .txt1.on{
    opacity: 1;
}
.s03_8 .content8 .txt2{
    position: absolute;
    top:158px; left:148px;
    overflow: hidden;
}
.s03_8 .content8 .txt2 > img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
.s03_8 .content8 .txt2.on > img {
    transform: translateY(0);
}


.s03_8 .content8 .deco3{
    position: absolute;
    top:186px; left:76px;
    opacity: 0;
    transition: all .6s .4s;
}
.s03_8 .content8 .deco3.on{
    opacity: 1;
}
.s03_8 .content8 .ph{
    position: absolute;
    top:200px; left:113px;
}
.s03_8 .content8 .deco4{
    position: absolute;
    top:671px; left:375px;
    transform: translate(100px,200px);
    opacity: 0;
    transition: all .6s .4s;
}
.s03_8 .content8 .deco4.on{
    transform: translate(0);
    opacity: 1;
}
.s03_8 .content8 .cont{
    position: absolute;
    top:83px; left:567px;
}
.s03_8 .content8 .txt3{
    position: absolute;
    top:730px; left:603px;
    opacity: 0;
    transition: all .5s;
}
.s03_8 .content8 .txt3.on{
    opacity: 1;
}
.s03_8 .content8 .txt4{
    position: absolute;
    top:767px; left:603px;
    overflow: hidden;
}
.s03_8 .content8 .txt4 > img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
.s03_8 .content8 .txt4.on > img {
    transform: translateY(0);
}

.s03_8 .content8 .txt5{
    position: absolute;
    top:863px; left:603px;
    opacity: 0;
    transition: all .7s .5s;
}
.s03_8 .content8 .txt5.on{
    opacity: 1;
}
.s03_8 .content8 .deco5{
    position: absolute;
    top:806px; right:111px;
    transform: translate(100px,200px);
    opacity: 0;
    transition: all .6s .4s;
}
.s03_8 .content8 .deco5.on{
    transform: translate(0);
    opacity: 1;
}

#section03 .s03_9 {
    width: 2995px;
    height: 980px;
    /* background-color: #f2a93b; */
    position: absolute;
    right: -2995px;
    top: 0;
}
#section03 .s03_9 .content9 .logo{
    position: absolute;
    top:404px; right:149px;
    overflow: hidden;
}
#section03 .s03_9 .content9 .logo > img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
#section03 .s03_9 .content9 .logo.on > img {
    transform: translateY(0);
}

#section03 .s03_9 .content9 .deco1{
    position: absolute;
    top:300px; left:272px;
    animation: deco3 2s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-50px);
    }
}
.s03_9 .content9 .deco2{
    position: absolute;
    top:266px; left:1228px;
    transform: translate(-100px,100px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_9 .content9 .deco2.on {
    transform: translate(0);
    opacity: 1;
}
.s03_9 .content9 .deco2.on > img {
    animation: deco3 2s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-50px);
    }
}



/* content10 -.s03_10  */
#section03 .s03_10 {
    width: 100vw;
    height: 4512px;
    background-color: #7c1a16;
    position: absolute;
    right: 0;
    bottom: -4512px;
}
.s03_10 .content10 .cont1{
    position: absolute;
    top:422px; left:100px;

}
.s03_10 .content10 .cont2{
    position: absolute;
    top:1162px; left:158px;
    transform: translate(-200px,-100px);
    opacity: 0;
    transition: all .7s;
}
.s03_10 .content10 .cont2.on{
    transform: translate(0);
    opacity: 1;
}
.s03_10 .content10 .txt1{
    position: absolute;
    top:1437px; left:220px;
    overflow: hidden;
    position: absolute;

}
.s03_10 .content10 .txt1> img {
    transform: translateY(300%);
    transition: all .5s .3s;
}
.s03_10 .content10 .txt1.on > img {
    transform: translateY(0);
}
.s03_10 .content10 .txt2{
    position: absolute;
    top:1523px; left:174px;
    opacity: 0;
    transition: all .5s;
}
.s03_10 .content10 .txt2.on{
    opacity: 1;
}
.s03_10 .content10 .arrow {
    position: absolute;
    top: 1241px;
    left: 578px;
    width: 141px;
    height: 157px;
}
.s03_10 .content10 .arrow #st9_0 {
    position: absolute;
    top: -11px;
    left: 80px;
    stroke-dashoffset: 110;
    stroke-dasharray: 110;
    opacity: 0;
}
.s03_10 .content10 .arrow.on #st9_0 {
    animation: arrow1 .4s .6s linear 1 forwards;
    opacity: 1;
}
@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_10 .content10  .arrow #st9_1 {
    position: absolute;
    left: 0px;
    top: 0px;
    stroke-dashoffset: 345;
    stroke-dasharray: 345;
    opacity: 0;
}
.s03_10 .content10  .arrow.on #st9_1 {
    animation: line .4s .2s linear 1 forwards ;
    opacity: 1;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}

.s03_10 .content10 .deco1{
    position: absolute;
    top:1544px; right:479px;
    transform: translate(0);
}
.s03_10 .content10 .bg{
    position: absolute;
    top:2202px; left:570px;
    transition: all 1s;
    opacity: 0;
}
.s03_10 .content10 .bg.on{
    opacity: 1;
}
.s03_10 .content10 .ph{
    position: absolute;
    top:2090px; left:654px;
}
.s03_10 .content10 .deco2{
    position: absolute;
    top:2266px; left:492px;
    transform: translate(300px,200px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_10 .content10 .deco2.on {
    transform: translate(0);
    opacity: 1;
}
.s03_10 .content10 .deco2.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}

.s03_10 .content10 .deco3{
    position: absolute;
    top:2564px; left:478px;
    transform: translate(300px,-200px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_10 .content10 .deco3.on {
    transform: translate(0);
    opacity: 1;
}
.s03_10 .content10 .deco3.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}
.s03_10 .content10 .deco4{
    position: absolute;
    top:2564px; right:772px;
    transform: translate(-200px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_10 .content10 .deco4.on {
    transform: translate(0);
    opacity: 1;
}
.s03_10 .content10 .deco4.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}
.s03_10 .content10 .deco5{
    position: absolute;
    top:2266px; right:742px;
    transform: translate(-300px,200px);
    transition: all .7s .2s;
    opacity: 0;
}
.s03_10 .content10 .deco5.on {
    transform: translate(0);
    opacity: 1;
}
.s03_10 .content10 .deco5.on > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-50px);
    }
}
.s03_10 .content10 .deco6{
    position: absolute;
    top: 2644px; left:290px;
}
.s03_10 .content10 .txt3{
    position: absolute;
    top: 1910px; left:777px;
    opacity: 0;
    transition: all .5s;
}
.s03_10 .content10 .txt3.on{
    opacity: 1;
}
.s03_10 .content10 .txt4{
    position: absolute;
    top: 1948px; left:623px;
    overflow: hidden;
}
.s03_10 .content10 .txt4 > img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
.s03_10 .content10 .txt4.on > img {
    transform: translateY(0);
}
.s03_10 .content10 .slogan {
    width: 183px;
    height: 4222px;
    background-color: #f2a93b;
    overflow: hidden;
    position: absolute;
    top:0px; right:88px;
    display: flex;
    flex-direction: column;
}
.s03_10 .content10 .slogan > img {
    animation: slogan 20s linear infinite;
}
@keyframes slogan {
    100% {
        transform: translateY(-4222px);
    }
}
.s03_10 .content10 .deco7{
    position: absolute;
    top:315px; right:221px;
    transform: translate(200px,300px);
    transition: all 1s;
    opacity: 0;
}
.s03_10 .content10 .deco7.on{
    transform: translate(0);
    opacity: 1;
}
.s03_10 .content10 .deco8{
    position: absolute;
    top:2772px; right:122px;
    animation: deco2 .7s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(-80px);
    }
}


.s03_10 .content10 .deco9{
    position: absolute;
    bottom: 982px; right:0;
    transform: translateY(300px);
    transition: all .8s;
    opacity: 0;
}
.s03_10 .content10 .deco9.on{
    transform: translateY(0);
    opacity: 1;
}


/*  content11 - s03_11 */
#section03 .s03_11 {
    width: 100vw;
    height: 4125px;
    background-color: #7c1a16;
    position: absolute;
    right: -100vw;
    top: 2406px;
}
.s03_11 .content11 .cont{
    position: absolute;
    top: 688px; left:0px;
}
.s03_11 .content11 .txt1{
    position: absolute;
    top: 1546px; left:106px;
    opacity: 0;
    transition: all .5s;
}
.s03_11 .content11 .txt1.on{
    opacity: 1;
}
.s03_11 .content11 .txt2{
    position: absolute;
    top: 1659px; left:106px;
    transform: translateX(-500px);
    transition: all .5s .4s;
    opacity: 0;
}
.s03_11 .content11 .txt2.on{
    transform: translateX(0);
    opacity: 1;
}
.s03_11 .content11 .txt3{
    position: absolute;
    top: 729px; right:160px;
    opacity: 0;
    transition: all .5s;
}
.s03_11 .content11 .txt3.on{
    opacity: 1;
}
.s03_11 .content11 .txt4{
    position: absolute;
    top: 773px; right:128px;
    overflow: hidden;
}
.s03_11 .content11 .txt4 > img {
    transform: translateY(150%);
    transition: all .5s .3s;
}
.s03_11 .content11 .txt4.on > img {
    transform: translateY(0);
}
.s03_11 .content11 .txt5{
    position: absolute;
    top: 897px; right:166px;
    opacity: 0;
    transition: all .7s .5s;
}
.s03_11 .content11 .txt5.on{
    opacity: 1;
}
.s03_11 .content11 .ph{
    position: absolute;
    top: 944px; right:91px;
}

.s03_11 .content11 .deco{
    position: absolute;
    top: 1629px; right:455px;
    transform: translate(-200px, 150px);
    transition: all .8s .6s;
    opacity: 0;
}
.s03_11 .content11 .deco.on{
    transform: translate(0);
    opacity: 1;
}
.s03_11 .content11 .arrow {
    position: absolute;
    top: 1450px;
    right: 678px;
    width: 141px;
    height: 157px;
}
.s03_11 .content11 .arrow #st10_0 {
    position: absolute;
    top: 80px;
    right: -73px;
    stroke-dashoffset: 113;
    stroke-dasharray: 113;
    opacity: 0;
}
.s03_11 .content11  .arrow.on #st10_0 {
    animation: arrow1 .4s .6s linear 1 forwards;
    opacity: 1;
}
@keyframes arrow1 {
    100%{
        stroke-dashoffset: 0;
    }
}
.s03_11 .content11   .arrow #st10_1 {
    position: absolute;
    left: 0px;
    top: 0px;
    stroke-dashoffset: 277;
    stroke-dasharray: 277;
    opacity: 0;
}
.s03_11 .content11   .arrow.on #st10_1 {
    animation: line .4s .2s linear 1 forwards ;
    opacity: 1;
}
@keyframes line {
    100%{
        stroke-dashoffset: 0;
    }
}


/*  content12 */
.s03_11 .content12 .txt1{
    position: absolute;
    top: 2180px; left:410px;
    overflow: hidden;
}
.s03_11 .content12 .txt1 > img {
    transform: translateY(150%);
    transition: all .5s;
}
.s03_11 .content12 .txt1.on > img {
    transform: translateY(0);
}

.s03_11 .content12 video{
    position: absolute;
    top: 2334px; left:211px;
    width: 1471px;
    height: 867px;
    object-fit: cover;
    /* transform: scale(1.5); */
}
.s03_11 .content12 .txt2{
    position: absolute;
    top: 3242px; left:662px;
}

.s03_11 .content12 .deco1{
    position: absolute;
    top: 3096px; left:152px;
    transform: translateX(-200px);
    transition: all .6s;
    opacity: 1;
}
.s03_11 .content12 .deco1.on{
    transform: translateX(0);
    opacity: 1;
}
.s03_11 .content12 .deco2{
    position: absolute;
    top: 2987px; right:104px;
    transform: translateX(200px);
    transition: all .6s;
    opacity: 1;
}
.s03_11 .content12 .deco2.on{
    transform: translateX(0);
    opacity: 1;
}


.footer{
    width: 100vw;
    height: 542px;
    background-color: #4a2422;
    position: relative;
    position: absolute;
    top: 3587px; left:0;
}
.s03_11 .footer .arrow{
    position: absolute;
    top: 67px; right:139px;
}
.s03_11 .footer .txt1{
    position: absolute;
    top: 95px; left:97px;
}
.s03_11 .footer .sns{
    position: absolute;
    top: 323px; left:117px;
}
.s03_11 .footer .txt2{
    position: absolute;
    top: 392px; left:97px;
}
.custom .custom_line{
    position: absolute;
    top: 113px; right:138px;
    animation: custom 20s linear infinite;
}
@keyframes custom {
    100% {
        transform: rotate( 360deg );
    }
}
.custom .custom_btn{
    position: absolute;
    top: 157px; right:240px;
    cursor: pointer;
}