body{background-color: f6f1e9;
    font-family: "Oswald", "sans-serif";
    color:#fff}
  a{
    color: white;
  }


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

}


/* section01 */

#section01 .slogan {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top:72px; left: 0;
    display: flex;
    background-color: #ffff;

    /* flex-direction: column; */
}
#section01 .slogan > img {
    animation: slogan 20s linear infinite;
}
@keyframes slogan {
    100% {
        transform: translateX(-1920px);
    }
}

#section01 .tittle1{
    position: absolute; 
    top:353px; left: 375px;
    transform: translateY(100px);
    opacity: 0;
}

#section01 .tittle2{
    position: absolute;
    top:435px; left: 362px;
    transform: translateY(100px);
    opacity: 0;
}

#section01 .tittle2_deco1{
    position: absolute;
    top:621px; left: 258px;
    transform: translate(200px,-50px);
    opacity: 0;
}
#section01 .tittle2_deco2{
    position: absolute;
    top:413px; left: 162px;
    transform: translate(200px,100px);
    opacity: 0;
}
#section01 .tittle2_deco3{
    position: absolute;
    top:373px; left: 1596px;
    transform: translate(-200px,150px);
    opacity: 0;
}
#section01 .tittle2_deco4{
    position: absolute;
    top:575px; left: 1742px;
    transform: translate(-200px,130px);
    opacity: 0;
    
}
#section01 .tittle3{
    position: absolute;
    top:328px; left: 909px;
    transform: translateY(100px);
    opacity: 0;
}

#section01 .tittle4{
    position: absolute;
    top:813px; left: 387px;
    transform: translateY(50px);
    opacity: 0;
}
#section01 .tittle4_line{
    width: 0px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top:830px; left: 1138px;
    background-color: rgb(255, 255, 255);
}
#section01 .tittle4_deco{
    position: absolute;
    top:806px; left: 1451px;
    transform: translateY(50px);
    opacity: 0;
}
#section01 .arrow{
    position: absolute;
    top:906px; left: 1285px;
    transform: translateY(-80px);
    transition: all .8s;
    opacity: 0;
}
#section01 .arrow.on{
    transform: translateY(0);
    opacity: 1;
}
#section01 .arrow.on > img {
    animation: deco 2s linear infinite alternate;
}
@keyframes deco {
    100% {
        transform: translateY(-50px);
    }
}
#section01 .bg1{
    position: absolute;
    top:872px; left: 91px;
    transition: all .8s;
    opacity: 0;
}
#section01 .bg1.on{
    opacity: 1;
}
#section01 .bg2{
    position: absolute;
    top:1317px; left: 0px;
    transition: all .7s .4s;
    opacity: 0;
}
#section01 .bg2.on{
    opacity: 1;
}
#section01 .camera1{
    position: absolute;
    top:990px; left: 167px;
    transform: translateY(100px);
    transition: all .7s;
    opacity: 0;
}
#section01 .camera1.on{
    transform: translateY(0);
    opacity: 1;
}
#section01 .camera2{
    position: absolute;
    top:990px; left: 167px;
    transform: translateY(100px);
    transition: all .7s;
    opacity: 0;
}
#section01 .camera2.on{
    transform: translateY(0);
    opacity: 1;
}

#section01 .photozone .deco1{
    position: absolute;
    top:1315px; left: 554px;
    transform: scale(0.3);
    transition: all .5s;
    opacity: 0;
}
#section01 .photozone  .deco1.on{
    transform: scale(1);
    opacity: 1;
}
#section01 .photozone .deco2{
    position: absolute;
    top:1527px; left: 584px;
    transform: scale(0.3);
    transition: all .5s .7s;
    opacity: 0;
}
#section01 .photozone .deco2.on{
    transform: scale(1);
    opacity: 1;
}
#section01 .photozone .deco3{
    position: absolute;
    top:1559px; left: 312px;
    transition: all .5s .4s;
    opacity: 0;
}
#section01 .photozone .deco3.on{
    transform: scale(1);
    opacity: 1;
}
#section01 .photozone .deco4{
    position: absolute;
    top:1780px; left: 619px;
    transform: scale(0.3);
    transition: all .5s .8s;
    opacity: 0;
}
#section01 .photozone .deco4.on{
    transform: scale(1);
    opacity: 1;
}

#section01 .photozone .deco5{
    position: absolute;
    top:1372px; left: 1177px;
    transform: scale(0.3);
    transition: all .5s .6s;
    opacity: 0;
}
#section01 .photozone .deco5.on{
    transform: scale(1);
    opacity: 1;
}
#section01 .photozone .deco6{
    position: absolute;
    top:1514px; left: 1225px;
    transform: scale(0.3);
    transition: all .5s .3s;
    opacity: 0;
}
#section01 .photozone .deco6.on{
    transform: scale(1);
    opacity: 1;
}
#section01 .photozone .deco7{
    position: absolute;
    top:1618px; left: 1458px;
    transform: scale(0.3);
    transition: all .5s .6s;
    opacity: 0;
}
#section01 .photozone .deco7.on{
    transform: scale(1);
    opacity: 1;
}
#section01 .photozone .deco8{
    position: absolute;
    top:2018px; left: 149px;
    opacity: 0;
}
#section01 .photozone .deco8.on{
    opacity: 1;
}
#section01 .photozone .photo{
    position: absolute;
    top:2317px; left: 285px;
    transform: translateY(-300px);
    transition: all .7s;
    opacity: 0;
}
#section01 .photozone .photo.on{
    transform: translateY(0);
    opacity: 1;
}
#section01 .photozone .photo_deco{
    position: absolute;
    top:2876px; left: 206px;
    transform: translate(-200px,200px);
    transition: all .7s;
    opacity: 0;
}
#section01 .photozone .photo_deco.on{
    transform: translate(0);
    opacity: 1;
}
#section01 .photozone .photo_deco > img {
    animation: deco 1.5s linear infinite alternate;
}
@keyframes deco {
100% {
    transform: translateY(50px);
}
}

#section01 .btn{
    position: absolute;
    top:1203px; left: 1279px;
    width: 172px; height: 52px;
    cursor: pointer;
}
#section01 .section2_bg{
    position: absolute;
    top:2634px; left: 0px;
}



#section02{
    position: absolute;
    top: 3163px; left: 0px;
}
#section02 .tittle{
    position: absolute;
    top:0px; left: 654px;
    transform: translateY(200px);
    transition: all 1s;
    opacity: 0;
}
#section02 .tittle.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .phonezone .deco1{
    position: absolute;
    top:642px; left: 380px;
    transform: translate(200px,-200px);
    transition: all .8s .7s;
    opacity: 0;
}
#section02 .phonezone .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section02 .phonezone .deco2{
    position: absolute;
    top:280px; left: 1180px;
    transform: translate(-200px,150px);
    transition: all .7s .7s;
    opacity: 0;
}
#section02 .phonezone .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section02 .phonezone .deco3{
    position: absolute;
    top:900px; left: 1372px;
    transform: translate(-300px,-200px);
    transition: all .8s .7s;
    opacity: 0;
}
#section02 .phonezone .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section02 .phonezone .deco4{
    position: absolute;
    top:299px; left: 1414px;
    transform: translate(-300px,400px);
    transition: all .8s .9s;
    opacity: 0;
}
#section02 .phonezone .deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section02 .phonezone .deco4 > img {
    animation: deco2 1.5s linear infinite alternate;
}
@keyframes deco2 {
100% {
    transform: translateY(50px);
}
}
#section02 .phonezone .deco5{
    position: absolute;
    top:787px; left: 483px;
    transform: translate(-300px,400px);
    transition: all 1s .9s;
    opacity: 0;
}
#section02 .phonezone .deco5.on{
    transform: translate(0);
    opacity: 1;
}
#section02 .phonezone .deco6{
    position: absolute;
    top:839px; left: 209px;
    transition: all 1s 1s;
    opacity: 0;
}
#section02 .phonezone .deco6.on{
    opacity: 1;
}
#section02 .phonezone .deco7{
    position: absolute;
    top:274px; left: 468px;
    transform: translate(300px,200px);
    transition: all 1s .9s;
    opacity: 0;
}
#section02 .phonezone .deco7.on{
    transform: translate(0);
    opacity: 1;
}
#section02 .phonezone .deco8{
    position: absolute;
    top:157px; left: 1550px;
    transform: scale(0.3);
    transition: all 1s .9s;
    opacity: 0;
}
#section02 .phonezone .deco8.on{
    transform: scale(1);
    opacity: 1;
}
#section02 .phonezone .deco9{
    position: absolute;
    top:161px; left: 119px;
    transition: all .8s .3s;
    opacity: 0;
}
#section02 .phonezone .deco9.on{
    opacity: 1;
}
#section02 .phonezone .dog1{
    position: absolute;
    top:322px; left:551px;
    transform: translateX(200px);
    transition: all .5s;
    opacity: 0;
}
#section02 .phonezone .dog1.on{
    transform: translateX(0);
    opacity: 1;
}
#section02 .phonezone .dog2_bg{
    position: absolute;
    top:417px; left:1122px;
    transform: scale(0.3);
    transition: all .5s .7s;
    opacity: 0;
}
#section02 .phonezone .dog2_bg.on{
    transform: scale(1);
    opacity: 1;
}
#section02 .phonezone .dog2{
    position: absolute;
    top:537px; left:958px;
    transform: translateX(-250px);
    transition: all .8s .3s;
    opacity: 0;
}
#section02 .phonezone .dog2.on{
    transform: translateX(0);
    opacity: 1;
}
#section02 .phonezone .phone{
    position: absolute;
    top:279px; left:764px;
    transform: translateY(200px);
    transition: all .8s;
    opacity: 0;
}
#section02 .phonezone .phone.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .phonezone  .content_bg{
    position: absolute;
    top:1124px; left:327px;
    transform: translateY(200px);
    transition: all .8s;
    opacity: 0;
}
#section02 .phonezone  .content_bg.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .content_line{
    width: 0px;
    height: 11px;
    overflow: hidden;
    position: absolute;
    top:1217px; left: 746px;
    transition: all 0.5s 1s;
    background-color: #f35dda;
}
#section02 .content_line.on{
    width: 110px;
}
#section02 .phonezone  .content_txt{
    position: absolute;
    top:1194px; left:454px;
    transform: translateY(200px);
    transition: all .8s .3s;
    opacity: 0;
}
#section02 .phonezone  .content_txt.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .phonezone .content_deco {
    position: absolute;
    top:1078px; left:1423px;
    transform: translate(300px,200px);
    transition: all 1s .8s;
    opacity: 0;
}
#section02 .phonezone .content_deco.on{
    transform: translate(0);
    opacity: 1;
}
#section02 .phonezone .content_deco> img {
    animation: deco3 1.5s linear infinite alternate;
}
@keyframes deco3 {
100% {
    transform: translateY(50px);
}
}

#section02 .content2 .bg {
    position: absolute;
    top:1555px; left:0px;
}
#section02 .content2 .dog1 {
    position: absolute;
    top:1482px; left:0px;
}
#section02 .content2 .dog1_deco{
    position: absolute;
    top:1300px; left:0px;
    transform: translateY(300px);
    transition: all .7s;
    opacity: 0;
}
#section02 .content2 .dog1_deco.on {
    transform: translate(0);
    opacity: 1;
}
#section02 .content2 .tittle1{
    position: absolute;
    top:1709px; left:256px;
    transform: translateY(300px);
    transition: all .7s;
    opacity: 0;
}
#section02 .content2 .tittle1.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .content2 .tittle1_deco{
    position: absolute;
    top:2159px; left:735px;
    transform: scale(1.8);
    transition: all .7s .8s;
    opacity: 0;
}
#section02 .content2 .tittle1_deco.on{
    transform: scale(1);
    opacity: 1;
}
 #section02 .content2 .tittle_dog1{
    overflow: hidden;
    position: absolute;
    top:1675px; left:657px;
}
#section02 .content2 .tittle_dog1>img{
    transform: translateY(500px);
    transition: all .8s .5s;
}
#section02 .content2 .tittle_dog1.on>img{
    transform: translateY(0);
} 
#section02 .content2 .tittle_dog2{
    overflow: hidden;
    position: absolute;
    top:1896px; left:215px;
}
#section02 .content2 .tittle_dog2>img{
    transform: translateY(500px);
    transition: all .8s .8s;
}
#section02 .content2 .tittle_dog2.on>img{
    transform: translateY(0);
} 
#section02 .content2 .tittle2{
    position: absolute;
    top:1735px; left:1029px;
    transform: translateY(300px);
    transition: all .7s .8s;
    opacity: 0;
}
#section02 .content2 .tittle2.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .content2 .tittle2_deco{
    position: absolute;
    top:1729px; left:1029px;
    transform: translateX(200px);
    transition: all 1s 1s;
    opacity: 0;
}
#section02 .content2 .tittle2_deco.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .content2 .tittle2_deco > img {
    animation: deco9 1s linear infinite alternate;
}
@keyframes deco9 {
100% {
    transform: translateX(-30px);
}
}
#section02 .content2 .txt_bg{
    position: absolute;
    top:2385px; left:128px;
    /* transform: translateY(300px);
    transition: all .8s;
    opacity: 1; */
}
#section02 .content2 .txt1{
    position: absolute;
    top:2468px; left:197px;
    overflow: hidden;
}
#section02 .content2 .txt1>img{
    transform: translateY(200px);
    transition: all 1s;
}
#section02 .content2 .txt1.on>img{
    transform: translateY(0);
} 
#section02 .content2 .txt2{
    position: absolute;
    top:2584px; left:197px;
    overflow: hidden;
}
#section02 .content2 .txt2>img{
    transform: translateY(200px);
    transition: all 1s .5s;
}
#section02 .content2 .txt2.on>img{
    transform: translateY(0);
}
#section02 .content2 .txt1_deco1{
    position: absolute;
    top:2487px; left:561px;
    transform: translateY(300px);
    transition: all 1s 1s;
    opacity: 0;
}
#section02 .content2 .txt1_deco1.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .content2 .txt1_deco2{
    position: absolute;
    top:2777px; left:231px;
    transform: translateY(300px);
    transition: all 1s 1s;
    opacity: 0;
}
#section02 .content2 .txt1_deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .content2 .grap{
    position: absolute;
    top:2759px; left:215px;
    transform: translateY(300px);
    transition: all 1s .5s;
    opacity: 0;
}
#section02 .content2 .grap.on{
    transform: translateY(0);
    opacity: 1;
}
#section02 .content2 .grap_deco{
    position: absolute;
    top:2819px; left:758px;
    overflow: hidden;
}
#section02 .content2 .grap_deco>img{
    transform: translateY(200px);
    transition: all 1s 1s;
}
#section02 .content2 .grap_deco.on>img{
    transform: translateY(0);
} 
#section02 .content2 .deco1{
    position: absolute;
    top:3051px; left:54px;
}

#section02 .content2 .arrow{
    position: absolute;
    top:3080px; left:860px;
    transform: rotate( 180deg );
    transition: all 2s;
}
#section02 .content2 .arrow.on{
    transform: rotate( 0);
}


/*  section03 */
#section03{
    position: absolute;
    position: relative;
    top: 6509px; left: 0px;
    width: 100%;
    /* height: 4317px; */
}
#section03 .slogan {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top:0px; left: 0;
    display: flex;
}
#section03 .slogan > img {
    animation: slogan2 20s linear infinite;
    width: 100%;
}
@keyframes slogan2 {
    100% {
        transform: translateX(-1920px);
    }
}
#section03 .content1 .bg_deco1{
    position: absolute;
    top:197px; left:0px;
    transition: all 1s .5s;
    opacity: 0;
}
#section03 .content1 .bg_deco1.on{
    opacity: 1;
}
#section03 .content1 .tittle_bg{
    position: absolute;
    top:300px; left:352px;
    transform: translateY(300px);
    transition: all 1s;
    opacity: 0;
}
#section03 .content1 .tittle_bg.on{
    transform: translateY(0);
    opacity: 1;
}
#section03 .content1 .tittle1{
    position: absolute;
    top:440px; left:509px;
    transform: translateY(300px);
    transition: all 1s;
    opacity: 0;
}
#section03 .content1 .tittle1.on{
    transform: translateY(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco1{
    position: absolute;
    top:214px; left:305px;
    transform: translate(200px,100px);
    transition: all 1s .2s;
    opacity: 0
}
#section03 .content1 .tittle1_deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco3{
    position: absolute;
    top:551px; left:134px;
    transform: translate(200px,0);
    transition: all 1s .2s;
    opacity: 0;
}
#section03 .content1 .tittle1_deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco2{
    position: absolute;
    top:708px; left:165px;
    transform: translate(200px,-100px);
    transition: all 1s .2s;
    opacity: 0;
}
#section03 .content1 .tittle1_deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco4{
    position: absolute;
    top:678px; left:1575px;
    transform: translate(-200px,-100px);
    transition: all 1s .2s;
    opacity: 0;
}
#section03 .content1 .tittle1_deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco5{
    position: absolute;
    top:192px; left:1345px;
    transform: translate(-200px,200px);
    transition: all 1s .2s;
    opacity: 0;
}
#section03 .content1 .tittle1_deco5.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco6{
    position: absolute;
    top:289px; left:643px;
    transform: translate(100px,100px);
    transition: all 1s .2s;
    opacity: 0;
}
#section03 .content1 .tittle1_deco6.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco7{
    position: absolute;
    top:299px; left:1062px;
    transform: translate(0,100px);
    transition: all 1s .2s;
    opacity: 0;
}
#section03 .content1 .tittle1_deco7.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content1 .tittle1_deco8{
    position: absolute;
    top:338px; left:1333px;
    transform: translate(-200px,100px);
    transition: all 1s .8s;
    opacity: 0;
}
#section03 .content1 .tittle1_deco8.on{
    transform: translate(0);
    opacity: 1;
}

#section03 .content2 .dogcoin{
    position: absolute;
    top:784px; left:744px;
    transform: translateY(300px) rotate( 180deg );
    transition: all 1s;
    opacity: 0;
}
#section03 .content2 .dogcoin.on{
    transform: translateY(0);
    transform: rotate(0);
    opacity: 1;
}
#section03 .content2 .hand1{
    position: absolute;
    top:932px; left:0px;
    transform: translateX(-800px);
    transition: all 1s .5s;
    opacity: 1;
}
#section03 .content2 .hand1.on{
    transform: translateX(0);
    opacity: 1;
}
#section03 .content2 .hand2{
    position: absolute;
    top:932px; left:1182px;
    transform: translateX(800px);
    transition: all 1s .5s;
    opacity: 1;
}
#section03 .content2 .hand2.on{
    transform: translateX(0);
    opacity: 1;
}
#section03 .content3 .tittle2_1{
    position: absolute;
    top:1411px; left:888px;
    overflow: hidden;
}
#section03 .content3 .tittle2_1>img{
    transform: translateY(200px);
    transition: all 1s;
}
#section03 .content3 .tittle2_1.on>img{
    transform: translateY(0);
}
#section03 .content3 .tittle2_2{
    position: absolute;
    top:1478px; left:684px;
    overflow: hidden;
}
#section03 .content3 .tittle2_2>img{
    transform: translateY(200px);
    transition: all 1s .4s;
}
#section03 .content3 .tittle2_2.on>img{
    transform: translateY(0);
}
#section03 .content3 .tittle2_3{
    position: absolute;
    top:1532px; left:863px;
    overflow: hidden;
}
#section03 .content3 .tittle2_3>img{
    transform: translateY(200px);
    transition: all 1s .4s;
}
#section03 .content3 .tittle2_3.on>img{
    transform: translateY(0);
}
#section03 .content_line{
    width: 0px;
    height: 13px;
    overflow: hidden;
    position: absolute;
    top:1436px; left: 875px;
    transition: all .5s .8s;
    background-color: #7ec8d6;
}
#section03 .content_line.on{
    width: 177px;
}
#section03 .content3 .interview_deco1{
    position: absolute;
    top:1585px; left:136px;
    transform: translate(100px,200px);
    transition: all 1s ;
    opacity: 0;
}
#section03 .content3 .interview_deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview_deco2{
    position: absolute;
    top:1813px; left:84px;
    transform: translate(200px);
    transition: all 1s ;
    opacity: 0;
}
#section03 .content3 .interview_deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview_deco3{
    position: absolute;
    top:2231px; left:53px;
    transform: translate(100px,-200px);
    transition: all 1s  ;
    opacity: 0;
}
#section03 .content3 .interview_deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview_deco4{
    position: absolute;
    top:1557px; left:1704px;
    transform: translate(-200px,100px);
    transition: all 1s ;
    opacity: 0;
}
#section03 .content3 .interview_deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview_deco5{
    position: absolute;
    top:1809px; left:1618px;
    transform: translate(-200px);
    transition: all 1s ;
    opacity: 0;
}
#section03 .content3 .interview_deco5.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview_deco6{
    position: absolute;
    top:2231px; left:1762px;
    transform: translate(-300px,-100px);
    transition: all 1s;
    opacity: 0;
}
#section03 .content3 .interview_deco6.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview_dog1{
    position: absolute;
    top:1968px; left:114px;
    transform: translate(200px,0);
    transition: all 1s;
    opacity: 0;
}
#section03 .content3 .interview_dog1.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview_dog2{
    position: absolute;
    top:2032px; left:1498px;
    transform: translate(-200px,0);
    transition: all 1s ;
    opacity: 0;
}
#section03 .content3 .interview_dog2.on{
    transform: translate(0);
    opacity: 1;
}
#section03 .content3 .interview1{
    position: absolute;
    top:1582px; left:333px;
    transform: translateY(300px);
    transition: all .8s .5s;
    opacity: 0;
}
#section03 .content3 .interview1.on{
    transform: translateY(0);
    opacity: 1;
}
#section03 .content3 .interview2{
    position: absolute;
    top:1632px; left:774px;
    transform: translateY(300px);
    transition: all .8s ;
    opacity: 0;
}
#section03 .content3 .interview2.on{
    transform: translateY(0);
    opacity: 1;
}
#section03 .content3 .interview3{
    position: absolute;
    top:1582px; left:1181px;   
    transform: translateY(300px);
    transition: all .8s .5s;
    opacity: 0;
}
#section03 .content3 .interview3.on{
    transform: translateY(0);
    opacity: 1;
}

/* section04 */

#section04{
    position: absolute;
    position: relative;
    top: 8864px; left: 0px;
    width: 100%;
}
#section04 .bg{
    position: absolute;
    top:162px; left:0;
}
#section04 .content1 .left .txt1{
    position: absolute;
    top:313px; left:0;
    transform: scale(0.3);
    transition: all .5s;
    opacity: 0;
}
#section04 .content1 .left .txt1.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt2{
    position: absolute;
    top:214px; left:450px;
    transform: scale(0.3);
    transition: all .5s .3s;
    opacity: 0;
}
#section04 .content1 .left .txt2.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt3{
    position: absolute;
    top:144px; left:239px;
    transform: scale(0.3);
    transition: all .5s .3s;
    opacity: 0;
}
#section04 .content1 .left .txt3.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt4{
    position: absolute;
    top:303px; left:300px;
    transform: scale(0.3);
    transition: all .5s .5s;
    opacity: 0;
}
#section04 .content1 .left .txt4.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt5{
    position: absolute;
    top:192px; left:0;
    transform: scale(0.3) 5s;
    transition: all .5s .5s;
    opacity: 0;
}
#section04 .content1 .left .txt5.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1  .left .txt6{
    position: absolute;
    top:316px; left:502px;
    transform: scale(0.3);
    transition: all .5s .8s;
    opacity: 0;
}
#section04 .content1 .left .txt6.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1  .left .txt7{
    position: absolute;
    top:218px; left:174px;
    transform: scale(0.3) .8s;
    transition: all .5s;
    opacity: 0;
}
#section04 .content1 .left .txt7.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt8{
    position: absolute;
    top:379px; left:239px;
    transform: scale(0.3);
    transition: all .5s .8s;
    opacity: 0;
}
#section04 .content1 .left .txt8.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt9{
    position: absolute;
    top:216px; left:144px;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .left .txt9.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt10{
    position: absolute;
    top:132px; left:405px;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .left .txt10.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt11{
    position: absolute;
    top:127px; left:0;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .left .txt11.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt12{
    position: absolute;
    top:292px; left:387px;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .left .txt12.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt13{
    position: absolute;
    top:184px; left:0;
    transform: scale(0.3);
    transition: all .5s 1.5s;;
    opacity: 0;
}
#section04 .content1 .left .txt13.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt14{
    position: absolute;
    top:208px; left:579px;
    transform: scale(0.3);
    transition: all .5s 1.5s;;
    opacity: 0;
}
#section04 .content1 .left .txt14.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt15{
    position: absolute;
    top:340px; left:157px;
    transform: scale(0.3);
    transition: all .5s 1.8s;
    opacity: 0;
}
#section04 .content1 .left .txt15.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt16{
    position: absolute;
    top:152px; left:521px;
    transform: scale(0.3);
    transition: all .5s 1.8s;
    opacity: 0;
}
#section04 .content1 .left .txt16.on{
    transform: scale(1);
    opacity: 1;
}
#section04 .content1 .left .txt17{
    position: absolute;
    top:288px; left:75px;
    transform: scale(0.3);
    transition: all .5s 1.8s;
    opacity: 0;
}
#section04 .content1 .left .txt17.on{
    transform: scale(1) ;
    opacity: 1;
}

#section04 .content1 .right .txt1{
    position: absolute;
    top:269px; left:1808px;
    transform: scale(0.3);
    transition: all .5s;
    opacity: 0;
}
#section04 .content1 .right .txt1.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt2{
    position: absolute;
    top:156px; left:1390px;
    transform: scale(0.3);
    transition: all .5s;
    opacity: 0;
}
#section04 .content1 .right .txt2.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt3{
    position: absolute;
    top:322px; left:1301px;
    transform: scale(0.3);
    transition: all .5s;
    opacity: 0;
}
#section04 .content1 .right .txt3.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt4{
    position: absolute;
    top:304px; left:1390px;
    transform: scale(0.3);
    transition: all .5s .5s;
    opacity: 0;
}
#section04 .content1 .right .txt4.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt5{
    position: absolute;
    top:233px; left:1157px;
    transform: scale(0.3);
    transition: all .5s .5s;
    opacity: 0;
}
#section04 .content1 .right .txt5.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt6{
    position: absolute;
    top:359px; left:1733px;
    transform: scale(0.3);
    transition: all .5s .5s;
    opacity: 0;
}
#section04 .content1 .right .txt6.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt7{
    position: absolute;
    top:174px; left:1246px;
    transform: scale(0.3);
    transition: all .5s .5s;
    opacity: 0;
}
#section04 .content1 .right .txt7.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt8{
    position: absolute;
    top:130px; left:1726px;
    transform: scale(0.3);
    transition: all .5s .8s;
    opacity: 0;
}
#section04 .content1 .right .txt8.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt9{
    position: absolute;
    top:301px; left:1462px;
    transform: scale(0.3);
    transition: all .5s .8s;
    opacity: 0;
}
#section04 .content1 .right .txt9.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt10{
    position: absolute;
    top:333px; left:1151px;
    transform: scale(0.3);
    transition: all .5s .8s;
    opacity: 0;
}
#section04 .content1 .right .txt10.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt11{
    position: absolute;
    top:216px; left:1567px;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .right .txt11.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt12{
    position: absolute;
    top:226px; left:1678px;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .right .txt12.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt13{
    position: absolute;
    top:242px; left:1216px;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .right .txt13.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt14{
    position: absolute;
    top:178px; left:1721px;
    transform: scale(0.3);
    transition: all .5s 1.2s;
    opacity: 0;
}
#section04 .content1 .right .txt14.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt15{
    position: absolute;
    top:397px; left:1251px;
    transform: scale(0.3);
    transition: all .5s 1.5s;
    opacity: 0;
}
#section04 .content1 .right .txt15.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt16{
    position: absolute;
    top:222px; left:1426px;
    transform: scale(0.3);
    transition: all .5s 1.5s;
    opacity: 0;
}
#section04 .content1 .right .txt16.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt17{
    position: absolute;
    top:316px; left:1634px;
    transform: scale(0.3);
    transition: all .5s 1.8s;
    opacity: 0;
}
#section04 .content1 .right .txt17.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .right .txt18{
    position: absolute;
    top:163px; left:1507px;
    transform: scale(0.3);
    transition: all .5s 1.8s;
    opacity: 0;
}
#section04 .content1 .right .txt18.on{
    transform: scale(1) ;
    opacity: 1;
}
#section04 .content1 .document1{
    position: absolute;
    top:190px; left:665px;
}
#section04 .content1 .document_deco{
    position: absolute;
    top:156px; left:866px;
    transform: translateY(200px);
    transition: all 1s 2s;
    opacity: 0;
}
#section04 .content1 .document_deco.on{
    transform: translateY(0);
    opacity: 1;
}
#section04 .content1 .document_deco > img {
    animation: deco 2s linear infinite alternate;
}
@keyframes deco {
    100% {
        transform: translateY(-50px);
    }
}
#section04 .content1 .document2{
    position: absolute;
    top:214px; left:642px;
}

#section04 .content2 .tittle1{
    position: absolute;
    top:684px; left:783px;
    transform: translateY(300px);
    transition: all 1s ;
    opacity: 0;
}
#section04 .content2 .tittle1.on{
    transform: translateY(0);
    opacity: 1;
}
#section04 .content2 .tittle2{
    position: absolute;
    top:886px; left:606px;
    overflow: hidden;
}
#section04 .content2 .tittle2>img{
    transform: translateY(200px);
    transition: all 1s .3s;
}
#section04 .content2 .tittle2.on>img{
    transform: translateY(0);
}
#section04 .content2 .deco1{
    position: absolute;
    top:668px; left:0px;
    transform: translateX(-800px);
    transition: all 1s .5s;
    opacity: 1;
}
#section04 .content2 .deco1.on{
    transform: translateX(0);
    opacity: 1;
}
#section04 .content2 .deco2{
    position: absolute;
    top:640px; left:1446px;
    transform: translateX(800px);
    transition: all 1s .5s;
    opacity: 1;
}
#section04 .content2 .deco2.on{
    transform: translateX(0);
    opacity: 1;
}
#section04 .content2 .txt1{
    position: absolute;
    top:1030px; left:66px;
    transform: translateY(300px);
    transition: all 1s ;
    opacity: 0;
}
#section04 .content2 .txt1.on{
    transform: translateX(0);
    opacity: 1;
}
#section04 .content2 .txt2{
    position: absolute;
    top:1030px; left:560px;
    transform: translateY(300px);
    transition: all 1s .3s;
    opacity: 0;
}
#section04 .content2 .txt2.on{
    transform: translateX(0);
    opacity: 1;
}
#section04 .content2 .txt3{
    position: absolute;
    top:1030px; left:992px;
    transform: translateY(300px);
    transition: all 1s .6s;
    opacity: 0;
}
#section04 .content2 .txt3.on{
    transform: translateX(0);
    opacity: 1;
}
#section04 .content2 .txt4{
    position: absolute;
    top:1030px; left:1424px;
    transform: translateY(300px);
    transition: all 1s .9s;
    opacity: 0;
}
#section04 .content2 .txt4.on{
    transform: translateY(0);
    opacity: 1;
}
#section04 .content2 .deco3{
    position: absolute;
    top:1652px; left:55px;
}

/*  section05  */
#section05{
    position: absolute;
    position: relative;
    top: 10824px; left: 0px;
    width: 100%;
}

#section05 .content1 .tittle1_deco{
    position: absolute;
    top:106px; left:862px;

}
#section05 .content1 .content_line{
    width: 0px;
    height: 19px;
    overflow: hidden;
    position: absolute;
    top:283px; left: 837px;
    transition: all .3s;
    background-color: #7ec8d6;
}
#section05 .content1 .content_line.on{
    width: 241px;
}
#section05 .content1 .tittle1{
    position: absolute;
    top:255px; left:878px;
    overflow: hidden;
}
#section05 .content1 .tittle1>img{
    transform: translateY(200px);
    transition: all 1s;
}
#section05 .content1 .tittle1.on>img{
    transform: translateY(0);
}
#section05 .content1 .deco1{
    position: absolute;
    top:425px; left:191px;
    transform: translate(200px,100px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .deco1.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .deco2{
    position: absolute;
    top:1136px; left:188px;
    transform: translate(100px,-200px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .deco3{
    position: absolute;
    top:1076px; left:1095px;
    transform: translate(-200px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .deco3.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .deco4{
    position: absolute;
    top:952px; left:1659px;
    transform: translate(-100px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .deco4.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .deco5{
    position: absolute;
    top:390px; left:1048px;
    transform: translate(-100px,200px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .deco5.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .deco6{
    position: absolute;
    top:500px; left:504px;
    transform: translate(-100px,200px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .deco6.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .dog1{
    position: absolute;
    top:546px; left:181px;
    transform: translateY(300px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .dog1.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .dog2{
    position: absolute;
    top:500px; left:812px;
    transform: translateY(300px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .dog2.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content1 .dog2> img {
    animation: deco 2s linear infinite alternate;
}
@keyframes deco {
    100% {
        transform: translateY(-50px);
    }
}
#section05 .content1 .txt1{
    position: absolute;
    top:306px; left:480px;
    transform: translate(200px,300px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .txt1.on{
    transform: translate(0);
    opacity: 1;
}
#section05 .content1 .txt2{
    position: absolute;
    top:599px; left:1573px;
    transform: translate(-300px,200px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content1 .txt2.on{
    transform: translate(0);
    opacity: 1;
    opacity: 1;
}
#section05 .content1 .star1{
    position: absolute;
    top:577px; left:681px;
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content1 .star1.on{
opacity: 1;
}
#section05 .content1 .star2{
    position: absolute;
    top:471px; left:1367px;
    transform: translate(0);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content1 .star2.on{
    opacity: 1;
}
#section05 .content1 .star3{
    position: absolute;
    top:1183px; left:115px;
    transform: translate(0);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content1 .star3.on{
    opacity: 1;
}
#section05 .content1 .star4{
    position: absolute;
    top:1167px; left:1695px;
    transform: translate(0);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content1 .star4.on{
    opacity: 1;
}
#section05 .content1 .star5{
    position: absolute;
    top:1414px; left:675px;
    transform: translate(0);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content1 .star5.on{
    opacity: 1;
}
#section05 .content1 .star6{
    position: absolute;
    top:1374px; left:1445px;
    transform: translate(0);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content1 .star6.on{
    opacity: 1;
}
#section05 .content1 .tittle2{
    position: absolute;
    top:1532px; left:855px;
}
#section05 .content1 .tittle2_2{
    position: absolute;
    top:1627px; left:702px;
}
#section05 .content1 .tittle2_3{
    position: absolute;
    top:1695px; left:588px;
}

#section05 .content2{
    position: absolute;
    position: relative;
    top:1904px; left:0px;
}
#section05 .content2 .slogan{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top:0px; left: 0;
    display: flex;
    background-color: #ffff;
}

#section05 .slogan > img {
    animation: slogan 20s linear infinite;
}
@keyframes slogan {
    100% {
        transform: translateX(-1920px);
    }
}
#section05 .content2 .bg{
    position: absolute;
    top:92px; left:0;
}
#section05 .content2 .tittle3_1{
    position: absolute;
    top:239px; left:895px;
    transform: translateX(-300px);
    transition: all .8s;
    opacity: 0;
}
#section05 .content2 .tittle3_1.on{
    transform: translateX(0);
    opacity: 1;
}
#section05 .content2 .tittle3_2{
    position: absolute;
    top:316px; left:705px;
    transform: translateX(-8px);
    transition: all .8s .5s;
    opacity: 0;
}
#section05 .content2 .tittle3_2.on{
    transform: translateX(0);
    opacity: 1;
}
#section05 .content2 .tittle3_3{
    position: absolute;
    top:316px; left:697px;
    overflow: hidden;
}
#section05 .content2 .tittle3_3>img{
    transform: translateY(200px);
    transition: all 1s .5s;
}
#section05 .content2 .tittle3_3.on>img{
    transform: translateY(0);
}
#section05 .content2 .txt1{
    position: absolute;
    top:92px; left:228px;
    transform: translateY(-300px);
    transition: all 1s;
    opacity: 0;
}
#section05 .content2 .txt1.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco1{
    position: absolute;
    top:398px; left:96px;
    transform: translate(300px,100px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco1.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco2{
    position: absolute;
    top:462px; left:289px;
    transform: translate(300px,100px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco3{
    position: absolute;
    top:665px; left:80px;
    transform: translate(300px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco3.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco4{
    position: absolute;
    top:912px; left:129px;
    transform: translate(300px,-200px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco4.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco5{
    position: absolute;
    top:1098px; left:172px;
    transform: translate(300px,-200px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco5.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco6{
    position: absolute;
    top:240px; left:1422px;
    transform: translate(-200px,100px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco6.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco7{
    position: absolute;
    top:489px; left:1680px;
    transform: translate(-300px,100px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco7.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco8{
    position: absolute;
    top:536px; left:1489px;
    transform: translate(-100px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco8.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco9{
    position: absolute;
    top:810px; left:1508px;
    transform: translate(-200px,-100px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco9.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco10{
    position: absolute;
    top:869px; left:1675px;
    transform: translate(-400px,-100px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco10.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .deco11{
    position: absolute;
    top:1131px; left:1613px;
    transform: translate(-300px,-200px);
    transition: all 1s .5s;
    opacity: 0;
}
#section05 .content2 .deco11.on{
    transform: translateY(0);
    opacity: 1;
}
#section05 .content2 .txt2{
    position: absolute;
    top:1081px; left:541px;
    overflow: hidden;
}
#section05 .content2 .txt2>img{
    transform: translateY(200px);
    transition: all .7s;
}
#section05 .content2 .txt2.on>img{
    transform: translateY(0);
}
#section05 .content2 .tittle4{
    position: absolute;
    top:1289px; left:823px;
}
#section05 .content2 .dog1{
    position: absolute;
    top:1417px; left:188px;
}
#section05 .content2 .dog2{
    position: absolute;
    top:1948px; left:93px;
}

#section05 .content3{
    position: absolute;
    position: relative;
    top:4481px; left:0px;
}
#section05 .content3 .slogan{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top:0px; left: 0;
    display: flex;
    background-color: #ffff;
}

#section05 .content3 .slogan > img {
    animation: slogan 20s linear infinite;
}
@keyframes slogan {
    100% {
        transform: translateX(-1920px);
    }
}
#section05 .content3 .bg{
    position: absolute;
    top:92px; left:0;
}
#section05 .content3 .tittle5_deco{
    position: absolute;
    top:179px; left:856px;
}
#section05 .content3 .tittle5{
    position: absolute;
    top:406px; left:527px; 
    overflow: hidden;
}
#section05 .content3 .tittle5>img{
    transform: translateY(200px);
    transition: all .5s;
}
#section05 .content3 .tittle5.on>img{
    transform: translateY(0);
}
#section05 .content3 .tittle5_2{
    position: absolute;
    top:514px; left:678px;
    overflow: hidden;
}
#section05 .content3 .tittle5_2>img{
    transform: translateY(200px);
    transition: all .8s .5s;
}
#section05 .content3 .tittle5_2.on>img{
    transform: translateY(0);
}
#section05 .content3 .txt{
    position: absolute;
    top:602px; left:67px;
    transition: all .8s .8s;
    opacity: 0;
}
#section05 .content3 .txt.on{
    opacity: 1;
}
#section05 .content3 .point{
    position: absolute;
    top:866px; left:839px;
    transform: translateY(200px);
    transition: all .8s;
    opacity: 0;
}
#section05 .content3 .point.on{
    transform: translateY(0);
    opacity: 1;
}

/*  section 06 */
#section06{
    position: absolute;
    position: relative;
    top: 17005px; left: 0px;
    width: 100%;
}

#section06 .content01 .bg1{
    position: absolute;
    top:0px; left:0px;
}
#section06 .content01 .txt1{
    position: absolute;
    top:151px; left:35px;
    overflow: hidden;
}
#section06 .content01 .txt1>img{
    transform: translateY(200px);
    transition: all .5s;
}
#section06 .content01 .txt1.on>img{
    transform: translateY(0);
}
#section06 .content01 .txt2{
    position: absolute;
    top:394px; left:243px;
    overflow: hidden;
}
#section06 .content01 .txt2>img{
    transform: translateY(200px);
    transition: all .5s .5s;
}
#section06 .content01 .txt2.on>img{
    transform: translateY(0);
}
#section06 .content01 .txt3{
    position: absolute;
    top:627px; left:19px;
    overflow: hidden;
}
#section06 .content01 .txt3>img{
    transform: translateY(200px);
    transition: all .6s .8s; 
}
#section06 .content01 .txt3.on>img{
    transform: translateY(0);
}
#section06 .content01 .txt4{
    position: absolute;
    top:844px; left:42px;
    overflow: hidden;
}
#section06 .content01 .txt4>img{
    transform: translateY(200px);
    transition: all .8s 1.2s; 
}
#section06 .content01 .txt4.on>img{
    transform: translateY(0);
}
#section06 .content01 .deco1{
    position: absolute;
    top:67px; left:230px;
    opacity: 0;
    transform: translate(-100px,100px);
    transition: all .8s .5s;
}
#section06 .content01 .deco1.on{
    opacity: 1;
    transform: translate(0);
}
#section06 .content01 .deco2{
    position: absolute;
    top:100px; left:860px;
    overflow: hidden;
}
#section06 .content01 .deco2>img{
    transform: translateY(200px);
    transition: all .8s .5s; 
}
#section06 .content01 .deco2.on>img{
    transform: translateY(0);
}
#section06 .content01 .deco3{
    position: absolute;
    top:61px; left:1698px;
    opacity: 0;
    transform: translate(100px,-100px);
    transition: all .8s .5s;
}
#section06 .content01 .deco3.on{
    opacity: 1;
    transform: translate(0);
}
#section06 .content01 .deco4{
    position: absolute;
    top:343px; left:45px;
    overflow: hidden;
}
#section06 .content01 .deco4>img{
    transform: translateY(200px);
    transition: all .6s .8s; 
}
#section06 .content01 .deco4.on>img{
    transform: translateY(0);
}
#section06 .content01 .deco5{
    position: absolute;
    top:361px; left:859px;
    overflow: hidden;
}
#section06 .content01 .deco5>img{
    transform: translateY(200px);
    transition: all .6s .8s;  
}
#section06 .content01 .deco5.on>img{
    transform: translateY(0);
}
#section06 .content01 .deco6{
    position: absolute;
    top:441px; left:1562px;
    opacity: 0;
    transform: translate(100px,100px);
    transition: all .6s .8s; 
}
#section06 .content01 .deco6.on{
    opacity: 1;
    transform: translate(0);
}
#section06 .content01 .deco7{
    position: absolute;
    top:520px; left:626px;
    overflow: hidden;
}
#section06 .content01 .deco7>img{
    transform: translateY(300px);
    transition: all .6s 1.1s;  
}
#section06 .content01 .deco7.on>img{
    transform: translateY(0);
}
#section06 .content01 .deco8{
    position: absolute;
    top:565px; left:1726px;
    overflow: hidden;
}
#section06 .content01 .deco8>img{
    transform: translateY(300px);
    transition: all .6s 1.1s;  
}
#section06 .content01 .deco8.on>img{
    transform: translateY(0);
}
#section06 .content01 .deco9{
    position: absolute;
    top:823px; left:321px;
    overflow: hidden;
}
#section06 .content01 .deco9>img{
    transform: translateY(300px);
    transition: all .6s 1.4s;  
}
#section06 .content01 .deco9.on>img{
    transform: translateY(0);
}

#section06 .content02 .point1{
    position: absolute;
    top:1373px; left:715px;
    opacity: 0;
    transform: translateY(400px);
    transition: all .8s ;
}
#section06 .content02 .point1.on{
    opacity: 1;
    transform: translate(0);
}
#section06 .content02 .point2{
    position: absolute;
    top:1444px; left:1114px;
    transform: translate(-100px,100px);
    transition: all .8s .8s;
    opacity: 0;
}
#section06 .content02 .point2.on{
    opacity: 1;
    transform: translateY(0);
}
#section06 .content02 .point2.on > img {
    animation: deco 1s linear infinite alternate;
}
@keyframes deco {
    100% {
        transform: translateY(-30px);
    }
}
#section06 .content02 .txt1{
    position: absolute;
    top:1560px; left:157px;
    transform: translateX(400px);
    transition: all .8s .3s;
    opacity: 0;
}
#section06 .content02 .txt1.on{
    opacity: 1;
    transform: translateX(0);
}
#section06 .content02 .txt2{
    position: absolute;
    top:1560px; left:1320px;
    transform: translateX(-400px);
    transition: all .8s .3s;
    opacity: 0;
}
#section06 .content02 .txt2.on{
    opacity: 1;
    transform: translateX(0);
}
#section06 .content02 .deco1{
    position: absolute;
    top:1458px; left:181px;
    opacity: 0;
    transform: translate(100px,100px);
    transition: all .8s .6s;
}
#section06 .content02 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section06 .content02 .deco2{
    position: absolute;
    top:1720px; left:574px;
    opacity: 0;
    transform: translate(150px,0);
    transition: all .8s .6s;
}
#section06 .content02 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section06 .content02 .deco3{
    position: absolute;
    top:1688px; left:1298px;
    opacity: 0;
    transform: translate(-150px,0);
    transition: all .8s .6s;
}
#section06 .content02 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section06 .content02 .deco4{
    position: absolute;
    top:1566px; left:1688px;
    opacity: 0;
    transform: translate(-250px,100px);
    transition: all .8s .6s;
}
#section06 .content02 .deco4.on{
    transform: translate(0);
    opacity: 1;
}

#section06 .content03 .deco1{
    position: absolute;
    top:2038px; left:42px;
    transform: translateX(-150px);
    transition: all .8s ;
    opacity: 0;
}
#section06 .content03 .deco1.on{
    opacity: 1;
    transform: translateX(0);
}
#section06 .content03 .deco2{
    position: absolute;
    top:2091px; left:1714px;
    transform: translateX(150px);
    transition: all .8s ;
    opacity: 0;
}
#section06 .content03 .deco2.on{
    opacity: 1;
    transform: translateX(0);
}
#section06 .content03 .tittle1{
    position: absolute;
    top:2179px; left:97px;
    transform: translateY(150px);
    transition: all .8s .3s;
    opacity: 0;
}
#section06 .content03 .tittle1.on{
    opacity: 1;
    transform: translateY(0);
}
#section06 .content03 .tittle1 > img {
    animation: deco2 2s linear infinite alternate;
}
@keyframes deco2 {
    100% {
        transform: translateY(50px);
    }
}
#section06 .content03 .tittle2{
    position: absolute;
    top:2218px; left:97px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .6s; 
}
#section06 .content03 .tittle2.on{
    transform: translateY(0);
    opacity: 1;
}
#section06 .content03 .txt1{
    position: absolute;
    top:2433px; left:808px;
    overflow: hidden;
}
#section06 .content03 .txt1>img{
    transform: translateY(200px);
    transition: all .6s .8s; 
}
#section06 .content03 .txt1.on>img{
    transform: translateY(0);
}
#section06 .content03 .vd{
    opacity: 0;
    transition: all .7s;
    transform: translateX(-300px);
}
#section06 .content03 .vd.on{
    opacity: 1;
    transform: translateX(0);
}
#section06 .content03 .vd video{
    position: absolute;
    top:2449px; left: 90px;
    width: 433px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
}
#section06 .content03 .vd video.on{
    opacity: 1;
}
#section06 .content03 .vd .frame{
    position: absolute;
    top:2436px; left: 87px;
}
#section06 .content03 .phone1{
    position: absolute;
    top:2570px; left:621px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s; 
}
#section06 .content03 .phone1.on{
    transform: translateY(0);
    opacity: 1;
}
#section06 .content03 .phone2{
    position: absolute;
    top:2570px; left:928px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .3s; 
}
#section06 .content03 .phone2.on{
    transform: translateY(0);
    opacity: 1;
}
#section06 .content03 .phone3{
    position: absolute;
    top:2570px; left:1237px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .6s; 
}
#section06 .content03 .phone3.on{
    transform: translateY(0);
    opacity: 1;
}
#section06 .content03 .phone4{
    position: absolute;
    top:2570px; left:1545px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .9s; 
}
#section06 .content03 .phone4.on{
    transform: translateY(0);
    opacity: 1;
}
#section06 .content03 .arrow{
    position: absolute;
    top:3286px; left:604px;
}
#section06 .content03 .txt2{
    position: absolute;
    top:3341px; left:595px;
}
#section06 .content03 .deco3{
    position: absolute;
    top:3370px; left:60px;
}
#section06 .content03 .deco4{
    position: absolute;
    top:3358px; left:1575px;
}

/*  section 07 */
#section07{
    position: absolute;
    position: relative;
    top: 20674px; left: 0px;
    width: 100%;
}
#section07 .content01 .slogan {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top:0px; left: 0;
    display: flex;
    background-color: #ffff;
}
#section07 .bg_balck{
    position: absolute;
    top:0px; left: 0;
}
#section07 .content01 .slogan > img {
    animation: slogan 20s linear infinite;
}
@keyframes slogan {
    100% {
        transform: translateX(-1920px);
    }
}
#section07 .content01 .deco1{
    position: absolute;
    top:241px; left:118px;
    opacity: 0;
    transform: translate(100px,150px);
    transition: all .8s .5s;
}
#section07 .content01 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .deco2{
    position: absolute;
    top:280px; left:605px;
    opacity: 0;
    transform: translate(-300px,100px);
    transition: all .8s .5s;
}
#section07 .content01 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .tittle{
    position: absolute;
    top:375px; left:102px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s; 
}
#section07 .content01 .tittle.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .content01 .tittle_txt{
    position: absolute;
    top:553px; left:102px;
    overflow: hidden;
}
#section07 .content01 .tittle_txt>img{
    transform: translateY(300px);
    transition: all .6s .3s;  
}
#section07 .content01 .tittle_txt.on>img{
    transform: translateY(0);
}
#section07 .content01 .deco3{
    position: absolute;
    top:755px; left:94px;
    opacity: 0;
    transform: translate(100px,150px);
    transition: all .7s .5s;
}
#section07 .content01 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .deco4{
    position: absolute;
    top:310px; left:844px;
    opacity: 0;
    transform: translate(100px,200px);
    transition: all .7s .5s;
}
#section07 .content01 .deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .deco5{
    position: absolute;
    top:1240px; left:67px;
    opacity: 0;
    transform: translate(-100px,200px);
    transition: all .7s .3s;
}
#section07 .content01 .deco5.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .deco6{
    position: absolute;
    top:1437px; left:928px;
    opacity: 0;
    transform: translate(-150px,-200px);
    transition: all .7s .3s;
}
#section07 .content01 .deco6.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .deco7{
    position: absolute;
    top:909px; left:1704px;
    opacity: 0;
    transform: translate(-150px,0);
    transition: all .7s ;
}
#section07 .content01 .deco7.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .txt1{
    position: absolute;
    top:349px; left:1434px;
    opacity: 0;
    transform: translate(-100px,300px);
    transition: all .7s ;
}
#section07 .content01 .txt1.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .line1{
    position: absolute;
    top:333px; left:1363px;
    opacity: 0;
    transition: all .7s .4s;
}
#section07 .content01 .line1.on{
    opacity: 1;
}
#section07 .content01 .txt2{
    position: absolute;
    top:556px; left:1421px;
    opacity: 0;
    transform: translate(-100px,100px);
    transition: all .7s .3s;
}
#section07 .content01 .txt2.on{
    transform: translate(0);
    opacity: 1;
}
#section07 .content01 .line2{
    position: absolute;
    top:522px; left:1614px;
    opacity: 0;
    transition: all .7s .5s;
}
#section07 .content01 .line2.on{
    opacity: 1;
}
#section07 .content01 .photo1{
    position: absolute;
    top:564px; left:1011px;
    opacity: 0;
    transform: translateY(250px);
    transition: all .8s ; 
}
#section07 .content01 .photo1.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .content01 .photo2{
    position: absolute;
    top:671px; left:729px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .3s; 
}
#section07 .content01 .photo2.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .content01 .photo3{
    position: absolute;
    top:777px; left:461px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .6s;
}
#section07 .content01 .photo3.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .content01 .photo4{
    position: absolute;
    top:899px; left:202px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .9s;
}
#section07 .content01 .photo4.on{
    transform: translateY(0);
    opacity: 1;
}


/*  section 08 */
#section08{
    position: absolute;
    top: 22542px; left: 0px;
    width: 100%;
}
#section08 .bg_balck{
    position: absolute;
    top:0px; left: 0;
}
#section08  .bg_line{
    position: absolute;
    top:480px; left:0;
    opacity: 0;
    transition: all .8s .5s;
}
#section08  .bg_line.on{
    opacity: 1;
}
#section08 .bg_bus{
    position: absolute;
    top:462px; left:925px;
    transform: translate(-100px,-50px);
    transition: all .8s .7s;
    opacity: 0;
}
#section08 .bg_bus.on{
    opacity: 1;
    transform: translate(0);
}
#section08 .tittle1{
    position: absolute;
    top:0; left:97px;
    transform: translateY(150px);
    transition: all .8s .3s;
    opacity: 0;
}
#section08 .tittle1.on{
    opacity: 1;
    transform: translateY(0);
}
#section08 .tittle1 > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-20px);
    }
}
#section08 .tittle2{
    position: absolute;
    top:53px; left:97px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .6s; 
}
#section08 .tittle2.on{
    transform: translateY(0);
    opacity: 1;
}

#section08 .vd1 video{
    position: absolute;
    top:288px; left: 90px;
    width: 430px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s;
    transform: translateY(300px);
}
#section08 .vd1 video.on{
    opacity: 1;
    transition: all .7s;
    transform: translateY(0);
}
#section08 .vd1 .frame{
    position: absolute;
    top:268px; left: 93px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(300px);
}
#section08 .vd1 .frame.on{
    opacity: 1;
    transition: all .7s;
    transform: translateY(0);
}
#section08 .video1_deco{
    position: absolute;
    top:291px; left:530px;
    opacity: 0;
    transition: all .8s;
    transform: translateX(-200px);
}
#section08 .video1_deco.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video1_txt1_1{
    position: absolute;
    top:1192px; left:117px;
    transform: translateX(0);
    transition: all .7s;
    opacity: 0;
}
#section08 .video1_txt1_1.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video1_txt1_1 > img {
    animation: deco4 1s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateX(-20px);
    }
}
#section08 .video1_txt1_2{
    position: absolute;
    top:1186px; left:173px;
    opacity: 0;
    transition: all .7s ;
    transform: translateX(-150px);
}
#section08 .video1_txt1_2.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video1_txt2{
    position: absolute;
    top:1220px; left:113px;
    opacity: 0;
    transition: all .7s;
    transform: translateX(-150px);
}
#section08 .video1_txt2.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .phone1_deco1{
    position: absolute;
    top:326px; left:1424px;
    opacity: 0;
    transition: all .7s;
    transform: translate(-100px,200px);
}
#section08 .phone1_deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section08 .phone1_deco2{
    position: absolute;
    top:761px; left:1607px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(130px);
}
#section08 .phone1_deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone1{
    position: absolute;
    top:870px; left:1349px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(300px);
}
#section08 .phone1.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone1_txt1_1{
    position: absolute;
    top:1730px; left:1394px;
    transform: translateY(300px);
    transition: all .8s;
    opacity: 0;
}
#section08 .phone1_txt1_1.on{
    opacity: 1;
    transform: translateY(0);
}
#section08 .phone1_txt1_1 > img {
    animation: deco4 1s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateX(-20px);
    }
}
#section08 .phone1_txt1_2{
    position: absolute;
    top:1726px; left:1450px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(300px);
}
#section08 .phone1_txt1_2.on{
    opacity: 1;
    transform: translateY(0);
}
#section08 .phone1_txt2{
    position: absolute;
    top:1760px; left:1394px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(300px);
}
#section08 .phone1_txt2.on{
    opacity: 1;
    transform: translateY(0);
}
#section08 .phone2_deco{
    position: absolute;
    top:1028px; left:707px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(300px);
}
#section08 .phone2_deco.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone2{
    position: absolute;
    top:1204px; left:753px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(300px);
}
#section08 .phone2.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .vd2 video{
    position: absolute;
    top:2367px; left: 90px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s;
    transform: translateX(-300px);
}
#section08 .vd2 video.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .vd2 .frame{
    position: absolute;
    top:2350px; left: 90px;
    opacity: 0;
    transition: all .7s;
    transform: translateX(-300px);
}
#section08 .vd2 .frame.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video2_deco1{
    position: absolute;
    top:1796px; left:95px;
    opacity: 0;
    transform: translate(-150px,200px);
    transition: all .8s;
}
#section08 .video2_deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section08 .video2_deco2{
    position: absolute;
    top:2318px; left:535px;
    opacity: 0;
    transition: all .8s .3s;
    transform: translateX(-200px);
}
#section08 .video2_deco2.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video2_deco3{
    position: absolute;
    top:2030px; left:1222px;
}
#section08 .video2_txt1_1{
    position: absolute;
    top:3300px; left:119px;
    transform: translateX(0);
    transition: all .7s;
    opacity: 0;
}
#section08 .video2_txt1_1.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video2_txt1_1 > img {
    animation: deco4 1s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateX(-20px);
    }
}
#section08 .video2_txt1_2{
    position: absolute;
    top:3296px; left:175px;
    opacity: 0;
    transition: all .7s ;
    transform: translateX(-150px);
}
#section08 .video2_txt1_2.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video2_txt2{
    position: absolute;
    top:3329px; left:119px;
    opacity: 0;
    transition: all .7s;
    transform: translateX(-150px);
}
#section08 .video2_txt2.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .phone3{
    position: absolute;
    top:2516px; left:624px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section08 .phone3.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone4{
    position: absolute;
    top:2516px; left:1033px;
    opacity: 0;
    transition: all .7s .6s;
    transform: translateY(200px);
}
#section08 .phone4.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone5{
    position: absolute;
    top:2516px; left:1458px;
    opacity: 0;
    transition: all .7s .9s;
    transform: translateY(200px);
}
#section08 .phone5.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone6_deco1{
    position: absolute;
    top:3489px; left:1614px;
    opacity: 0;
    transition: all .7s .7s;
    transform: translateY(300px);
}
#section08 .phone6_deco1.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone6_deco2{
    position: absolute;
    top:4498px; left:1756px;
    opacity: 0;
    transition: all .7s .8s;
    transform: translateY(300px);
}
#section08 .phone6_deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone6{
    position: absolute;
    top:3633px; left:1435px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(300px);
}
#section08 .phone6.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone7_deco{
    position: absolute;
    top:3627px; left:988px;
    opacity: 0;
    transition: all .7s .8s;
    transform: translateY(300px);
}
#section08 .phone7_deco.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone7{
    position: absolute;
    top:3772px; left:1000px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(300px);
}
#section08 .phone7.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .phone8{
    position: absolute;
    top:3633px; left:573px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(300px);
}
#section08 .phone8.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .vd3 video{
    position: absolute;
    top:3792px; left: 99px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s .8s;
    transform: translateX(-300px);
}
#section08 .vd3 video.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .vd3 .frame{
    position: absolute;
    top:3772px; left: 90px;
    opacity: 0;
    transition: all .7s .8s;
    transform: translateX(-300px);
}
#section08 .vd3 .frame.on{
    opacity: 1;
    transform: translateX(0);
}
#section08 .video3_deco{
    position: absolute;
    top:3585px; left:96px;
    opacity: 0;
    transition: all .7s 1s;
    transform: translateY(300px);
}
#section08 .video3_deco.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .video3_txt{
    position: absolute;
    top:4694px; left:198px;
}


/*  section 09 */
#section09{
    position: absolute;
    top: 27440px; left: 0px;
    width: 100%;;
}
#section09 .bg_balck{
    position: absolute;
    top:0px; left: 0;
}
#section09 .content01 .point1{
    position: absolute;
    top:0px; left: 675px;
}
#section09 .content01 .point2{
    position: absolute;
    top:25px; left: 889px;
}
#section09 .content01 .point3{
    position: absolute;
    top:25px; left: 887px;
}
#section09 .content01 .point3 > img {
    animation: deco5 1s linear infinite alternate;
}
@keyframes deco5 {
    100% {
        transform: translateX(-130px);
    }
}
#section09 .content01 .txt1{
    position: absolute;
    top:54px; left: 185px;
}

#section09 .content01 .txt2{
    position: absolute;
    top:54px; left: 1276px;
}
#section09 .content01 .deco1{
    position: absolute;
    top:56px; left: 110px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translate(100px,100px);
}
#section09 .content01 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section09 .content01 .deco2{
    position: absolute;
    top:208px; left: 522px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(130px,0);
}
#section09 .content01 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section09 .content01 .deco3{
    position: absolute;
    top:188px; left: 1269px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translate(-140px,-50px);
}
#section09 .content01 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section09 .content01 .deco4{
    position: absolute;
    top:35px; left: 1698px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(-250px,100px);
}
#section09 .content01 .deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section09 .content02 .tittle{
    position: absolute;
    top:490px; left: 785px;
    opacity: 0;
    transform: translateY(300px);
    transition: all 1s ;
}
#section09 .content02 .tittle.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .content02 .tittle_txt{
    position: absolute;
    top:680px; left: 669px;
    overflow: hidden;
}
#section09 .content02 .tittle_txt>img{
    transform: translateY(200px);
    transition: all 1s .3s;
}
#section09 .content02 .tittle_txt.on>img{
    transform: translateY(0);
}

#section09 .content02 .deco1{
    position: absolute;
    top:687px; left: 22px;
    opacity: 1;
    transform: translateX(-800px);
    transition: all 1s .5s;
}
#section09 .content02 .deco1.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .content02 .deco2{
    position: absolute;
    top:635px; left:1429px;
    opacity: 0;
    transform: translateX(800px);
    transition: all 1s .5s;
}
#section09 .content02 .deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .content02 .deco3{
    position: absolute;
    top:874px; left: 35px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(100px,200px);
}
#section09 .content02 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section09 .content02 .deco4{
    position: absolute;
    top:1065px; left:1491px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translate(-100px,100px);
}
#section09 .content02 .deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section09 .content02 .bg{
    position: absolute;
    top:1283px; left:0px;
}
#section09 .content02 .dog1{
    position: absolute;
    top:1301px; left:0px;
    opacity: 0;
    transform: translateY(300px);
    transition: all 1s ;
}
#section09 .content02 .dog1.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .content02 .dog2{
    position: absolute;
    top:1038px; left:106px;
    opacity: 0;
    transform: translateY(300px);
    transition: all 1s .3s;
}
#section09 .content02 .dog2.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .content02 .dog3{
    position: absolute;
    top:1002px; left:1469px;
    opacity: 0;
    transform: translateY(300px);
    transition: all 1s ;
}
#section09 .content02 .dog3.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .content02 .phone1{
    position: absolute;
    top:844px; left:453px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(300px);
}
#section09 .content02 .phone1.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .content02 .phone2{
    position: absolute;
    top:844px; left:1193px;
    opacity: 0;
    transition: all .7s .3s ;
    transform: translateY(300px);
}
#section09 .content02 .phone2.on{
    transform: translateY(0);
    opacity: 1;
}
#section09  .content02 .vd video{
    position: absolute;
    top:817px; left: 760px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(300px);
}
#section09 .content02 .vd video.on{
    opacity: 1;
    transform: translateX(0);
}
#section09 .content02 .vd .frame{
    position: absolute;
    top:804px; left: 753px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(300px);
}
#section09 .content02 .vd .frame.on{
    opacity: 1;
    transform: translateX(0);
}

/* section10 */
#section10 {
    position: absolute;
    top: 29213px; left: 0px;
    width: 100%;
}
#section10 .cloud1{
    position: absolute;
    top:267px; left: 85px;
    transform: translateX(-150px);
    transition: all .7s .5s;
    opacity: 0;
}
#section10 .cloud1.on{
    opacity: 1;
    transform: translateX(0);
}
#section10 .cloud2{
    position: absolute;
    top:267px; left: 1623px;
    opacity: 0;
    transform: translate(150px,0);
    transition: all .7s .5s;
}
#section10 .cloud2.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .tittle1_bg{
    position: absolute;
    top:100px; left: 380px;
}
#section10 .tittle1{
    position: absolute;
    top:308px; left: 569px;
}
#section10 .tittle1_deco1{
    position: absolute;
    top:169px; left: 402px;
    opacity: 1;
}
#section10 .tittle1_deco2{
    position: absolute;
    top:95px; left: 490px;
    opacity: 0;
    transform: translate(100px,100px);
    transition: all .7s;
}
#section10 .tittle1_deco2.on{
    transform: translate(0);
    opacity: 0;
}
#section10 .tittle1_deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .tittle1_deco3{
    position: absolute;
    top:0px; left: 823px;
    opacity: 0;
    transform:  translate(0,100px);
    transition: all .7s .3s;
}
#section10 .tittle1_deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .tittle1_deco4{
    position: absolute;
    top:149px; left: 1198px;
    opacity: 0;
    transform:  translate(-100px,100px);
    transition: all .8s;
}
#section10 .tittle1_deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .tittle1_deco5{
    position: absolute;
    top:198px; left: 1434px;
    opacity: 1;
    transform:  translate(-100px,100px);
    transition: all .8s .3s;
}
#section10 .tittle1_deco5.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .tittle1_deco6{
    position: absolute;
    top:471px; left: 1316px;
    opacity: 0;
    transform: translate(-150px,100px);
    transition: all .8s .5s;
}
#section10 .tittle1_deco6.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .tittle1_deco7{
    position: absolute;
    top:417px; left: 1615px;
    opacity: 1;
}
#section10 .tittle2_deco{
    position: absolute;
    top:792px; left: 99px;
    transform: translateY(150px);
    transition: all .8s .3s;
    opacity: 0;
}
#section10 .tittle2_deco.on{
    opacity: 1;
    transform: translateY(0);
}
#section10 .tittle2_deco > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-20px);
    }
}
#section10 .tittle2{
    position: absolute;
    top:860px; left: 102px;
    opacity: 0;
    transform: translateY(200px);
    transition: all .8s .3s; 
}
#section10 .tittle2.on{
    transform: translateY(0);
    opacity: 1;
}
#section10 .phone_deco1{
    position: absolute;
    top:433px; left: 229px;
    opacity: 0;
    transform: translate(100px);
    transition: all .7s .3s;
}
#section10 .phone_deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .phone_deco2{
    position: absolute;
    top:507px; left: 394px;
    opacity: 0;
    transform: translate(150px);
    transition: all .7s;
}
#section10 .phone_deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .phone_deco3{
    position: absolute;
    top:870px; left: 1224px;
    opacity: 0;
    transform: translate(-150px,100px);
    transition: all .7s;
}
#section10 .phone_deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .phone_deco4{
    position: absolute;
    top:656px; left: 1360px;
    opacity: 0;
    transform: translate(-100px,100px);
    transition: all .7s .3s;
}
#section10 .phone_deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .phone_deco5{
    position: absolute;
    top:775px; left: 1517px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(-200px,100px);
}
#section10 .phone_deco5.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .phone_deco5 > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-30px);
    }
}
#section10 .main{
    position: absolute;
    top:1569px; left: 469px;
}
#section10 .phone{
    position: absolute;
    top:505px; left: 674px;
}
#section10 .phone_point{
    position: absolute;
    top:1380px; left: 624px;
    transform: scale(0.3);
    transition: all .7s;
    opacity: 0;
}
#section10 .phone_point.on{
    transform: scale(1);
    opacity: 1;
}
#section10 .phone_arrow{
    position: absolute;
    top:1250px; left: 1264px;
    transition: all .8s .5s;
    opacity: 0;
}
#section10 .phone_arrow.on{
    opacity: 1;
}
#section10 .phone_txt{
    position: absolute;
    top:1128px; left: 1400px;
    opacity: 0;
    transform: translate(-300px);
    transition: all .8s .3s;
}
#section10 .phone_txt.on{
    transform: scale(1);
    opacity: 1;
}
#section10 .sub1_tittle{
    position: absolute;
    top:1312px; left: 89px;
    opacity: 0;
    transform: translate(0,100px);
    transition: all .8s .3s;
}
#section10 .sub1_tittle.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .sub1_line{
    position: absolute;
    top:1382px; left: 389px;
    transition: all .8s .5s;
    opacity: 0;
}
#section10 .sub1_line.on{
    opacity: 1;
}
#section10 .sub1_arrow{
    position: absolute;
    top:2418px; left: 113px;
}
#section10 .sub1_arrow > img {
    animation: deco4 1s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateX(-20px);
    }
}
#section10 .sub1{
    position: absolute;
    top:1304px; left: 93px;
    opacity: 0;
    transform: translate(200px,100px);
    transition: all .8s;
}
#section10 .sub1.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .sub2_tittle{
    position: absolute;
    top:1494px; left: 1433px;
    opacity: 0;
    transform: translate(0,100px);
    transition: all .8s .5s;
}
#section10 .sub2_tittle.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .sub2_line{
    position: absolute;
    top:2023px; left: 1168px;
    transition: all .8s .7s;
    opacity: 0;
}
#section10 .sub2_line.on{
    opacity: 1;
}
#section10 .sub2{
    position: absolute;
    top:1463px; left: 1389px;
    opacity: 0;
    transform: translate(-200px,100px);
    transition: all .8s .3s;
}
#section10 .sub2.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .tittle3{
    position: absolute;
    top:2795px; left: 104px;
    opacity: 0;
    transition: all .8s ;
    transform: translateY(300px);
}
#section10 .tittle3.on{
    transform: translateY(0);
    opacity: 1;
}
#section10 .photo1{
    position: absolute;
    top:2911px; left: 66px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(300px);
}
#section10 .photo1.on{
    transform: translateY(0);
    opacity: 1;
}
#section10 .photo2{
    position: absolute;
    top:2911px; left: 419px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(300px);
}
#section10 .photo2.on{
    transform: translateY(0);
    opacity: 1;
}
#section10 .photo3{
    position: absolute;
    top:2911px; left: 1180px;
    opacity: 0;
    transition: all .7s .7s;
    transform: translateY(300px);
}
#section10 .photo3.on{
    transform: translateY(0);
    opacity: 1;
}
#section10 .photo4{
    position: absolute;
    top:2911px; left: 1534px;
    opacity: 0;
    transition: all .7s .9s;
    transform: translateY(300px);
}
#section10 .photo4.on{
    transform: translateY(0);
    opacity: 1;
}
#section10 .tittle3_txt{
    position: absolute;
    top:3274px; left:104px;
    opacity: 0;
    transform: translate(0,200px);
    transition: all .8s .9s;
}
#section10 .tittle3_txt.on{
    transform: translate(0);
    opacity: 1;
}
#section10 .main_line{
    position: absolute;
    top:3378px; left:1244px;
    transition: all .8s .3s;
    opacity: 0;    
}
#section10 .main_line.on{
    opacity: 1;
}
#section10 .main_txt{
    position: absolute;
    top:3350px; left:1450px;
    opacity: 0;
    transform: translate(-200px,0);
    transition: all .8s;
}
#section10 .main_txt.on{
    transform: translate(0);
    opacity: 1;
}

/* setion11 */
#section11 {
    position: absolute;
    top: 32961px; left: 0px;
    width: 100%;
}
#section11 .bg{
    position: absolute;
    top:0px; left:0;
}
#section11 .box1{
    position: absolute;
    top:0px; left:0;
}
#section11 .dog1{
    position: absolute;
    top:413px; left:548px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(200px);
}
#section11 .dog1.on{
    transform: translateY(0);
    opacity: 1;
}
#section11 .dog2{
    position: absolute;
    top:417px; left:983px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section11 .dog2.on{
    transform: translateY(0);
    opacity: 1;
}
#section11 .dog3{
    position: absolute;
    top:281px; left:359px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section11 .dog3.on{
    transform: translateY(0);
    opacity: 1;
}
#section11 .dog4{
    position: absolute;
    top:237px; left:802px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(200px);
}
#section11 .dog4.on{
    transform: translateY(0);
    opacity: 1;
}
#section11 .dog5{
    position: absolute;
    top:217px; left:946px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section11 .dog5.on{
    transform: translateY(0);
    opacity: 1;
}
#section11 .box2{
    position: absolute;
    top:671px; left:158px;
}
#section11 .deco1{
    position: absolute;
    top:455px; left:275px;
    opacity: 0;
    transform: translate(100px);
    transition: all .7s;
}
#section11 .deco1.on{
    transform: translate(0);
    opacity: 1;
}
#section11 .deco2{
    position: absolute;
    top:113px; left:267px;
    opacity: 0;
    transform: translate(100px,200px);
    transition: all .7s ;
}
#section11 .deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section11 .deco3{
    position: absolute;
    top:50px; left:732px;
    opacity: 0;
    transform: translate(0,200px);
    transition: all .7s;
}
#section11 .deco3.on{
    transform: translate(0);
    opacity: 1;
}
#section11 .deco3 > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-30px);
    }
}
#section11 .deco4{
    position: absolute;
    top:180px; left:1534px;
    opacity: 0;
    transform: translate(-100px,200px);
    transition: all .7s ;
}
#section11 .deco4.on{
    transform: translate(0);
    opacity: 1;
}
#section11 .deco5{
    position: absolute;
    top:441px; left:1425px;
    opacity: 0;
    transform: translate(-100px,100px);
    transition: all .7s;
}
#section11 .deco5.on{
    transform: translate(0);
    opacity: 1;
}
/* section12 */
#section12 {
    position: absolute;
    top: 34430px; left: 0px;
    width: 100%;
}
#section12 .tittle1_deco{
    position: absolute;
    top:17px; left:107px;
    transform: translateY(150px);
    transition: all .8s;
    opacity: 0;
}
#section12 .tittle1_deco.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .tittle1_deco > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-20px);
    }
}
#section12 .tittle1{
    position: absolute;
    top:0px; left:107px;
}
#section12 .point1{
    position: absolute;
    top:493px; left:283px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section12 .point1.on{
    transform: translateY(0);
    opacity: 1;
}
#section12 .point1_deco1{
    position: absolute;
    top:521px; left:197px;
    opacity: 0;
    transform: translateX(100px);
    transition: all .7s .6s;
}
#section12 .point1_deco1.on{
    transform: translateX(0);
    opacity: 1;
}
#section12 .point1_deco2{
    position: absolute;
    top:521px; left:542px;
    opacity: 0;
    transform: translateX(-100px);
    transition: all .7s .6s;
}
#section12 .point1_deco2.on{
    transform: translateX(0);
    opacity: 1;
}
#section12 .point2{
    position: absolute;
    top:415px; left:115px;
    opacity: 0;
    transform: translate(150px,100px);
    transition: all .7s .3s;
}
#section12 .point2.on{
    transform: translate(0);
    opacity: 1;
}
#section12 .point3{
    position: absolute;
    top:326px; left:407px;
    opacity: 0;
    transform: translate(-20px,150px);
    transition: all .7s .3s;
}
#section12 .point3.on{
    transform: translate(0);
    opacity: 1;
}
#section12 .point4{
    position: absolute;
    top:373px; left:592px;
    opacity: 0;
    transform: translate(-150px,150px);
    transition: all .7s .3s;
}
#section12 .point4.on{
    transform: translate(0);
    opacity: 1;
}
#section12 .point5{
    position: absolute;
    top:738px; left:139px;
    opacity: 0;
    transform: translate(150px,-100px);
    transition: all .7s .3s;
}
#section12 .point5.on{
    transform: translate(0);
    opacity: 1;
}
#section12 .point6{
    position: absolute;
    top:811px; left:278px;
    opacity: 0;
    transform: translate(20px,-200px);
    transition: all .7s .3s;
}
#section12 .point2.on{
    transform: translate(0);
    opacity: 1;
}
#section12 .point7{
    position: absolute;
    top:697px; left:585px;
    opacity: 0;
    transform: translate(-150px,-100px);
    transition: all .7s .3s;
}
#section12 .point7.on{
    transform: translate(0);
    opacity: 1;
}
#section12 .line{
    position: absolute;
    top:932px; left:304px;
    opacity: 0;
    transition: all .7s;
}
#section12 .line.on{
    opacity: 1;
}
#section12 .bg_deco{
    position: absolute;
    top:1320px; left:648px;
}
#section12  .vd1 video{
    position: absolute;
    top:744px; left: 1325px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section12  .vd1 video.on{
    opacity: 1;
    transform: translateY(0);
}
#section12  .vd1 .frame{
    position: absolute;
    top:726px; left: 1320px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section12  .vd1 .frame.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .video1_deco{
    position: absolute;
    top:566px; left:1607px;
}
#section12 .video1_txt{
    position: absolute;
    top:1673px; left:1384px;
}
#section12 .phone1{
    position: absolute;
    top:472px; left:816px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section12 .phone1.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .phone2{
    position: absolute;
    top:1252px; left:117px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section12 .phone2.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .phone2_ph{
    position: absolute;
    top:2030px; left:140px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(-300px);
}
#section12 .phone2_ph.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .phone3{
    position: absolute;
    top:1732px; left:773px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(200px);
}
#section12 .phone3.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .phone3_ph{
    position: absolute;
    top:2382px; left:418px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(-150px);
}
#section12 .phone3_ph.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .phone3_arrow{
    position: absolute;
    top:2706px; left:723px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translatex(-50px);
}
#section12 .phone3_arrow.on{
    opacity: 1;
    transform: translateX(0);
}
#section12 .phone3_arrow> img {
    animation: deco4 1s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateX(-20px);
    }
}
#section12  .vd2 video{
    position: absolute;
    top:1970px; left: 1338px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section12  .vd2 video.on{
    opacity: 1;
    transform: translateY(0);
}
#section12  .vd2 .frame{
    position: absolute;
    top:1950px; left: 1328px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section12  .vd2 .frame.on{
    opacity: 1;
    transform: translateY(0);
}
#section12 .video2_txt{
    position: absolute;
    top:2881px; left:1416px;
}

/* section13 */
#section13 {
    position: absolute;
    top: 37486px; left: 0px;
    width: 100%;
}
#section13 .bg{
    position: absolute;
    top:151px; left:238px;
}
#section13 .tittle_deco1{
    position: absolute;
    top:0; left:125px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(100px,150px);
}
#section13 .tittle_deco1.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .tittle_deco2{
    position: absolute;
    top:244px; left:1450px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(-100px,150px);
}
#section13 .tittle_deco2.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .tittle_deco3{
    position: absolute;
    top:254px; left:178px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(150px,100px);
}
#section13 .tittle_deco3.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .tittle_deco3 > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-30px);
    }
}
#section13 .txt1{
    position: absolute;
    top:742px; left:109px;
    opacity: 0;
    transition: all .7s ;
    transform: translateX(200px);
}
#section13 .txt1.on{
    opacity: 1;
    transform: translateX(0);
}
#section13 .txt2{
    position: absolute;
    top:742px; left:1191px;
    opacity: 0;
    transition: all .7s ;
    transform: translateX(-200px);
}
#section13 .txt2.on{
    opacity: 1;
    transform: translateX(0);
}
#section13  .vd video{
    position: absolute;
    top:538px; left: 742px;
    width: 414px;
    height: 868px;
    box-sizing: border-box;
    border-radius:12%;
    object-fit: cover;
}
#section13  .vd .frame{
    position: absolute;
    top:521px; left: 731px;
}
#section13 .deco1{
    position: absolute;
    top:595px; left:592px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(100px,100px);
}
#section13 .deco1.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco2{
    position: absolute;
    top:681px; left:211px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translate(100px,100px);
}
#section13 .deco2.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco3{
    position: absolute;
    top:898px; left:538px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(100px,50px);
}
#section13 .deco3.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco4{
    position: absolute;
    top:873px; left:1186px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(-100px,50px);
}
#section13 .deco4.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco5{
    position: absolute;
    top:739px; left:1525px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translate(-100px,50px);
}
#section13 .deco5.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco6{
    position: absolute;
    top:496px; left:1186px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(-100px,50px);
}
#section13 .deco6.on{
    opacity: 1;
    transform: translate(0);
}

#section13 .deco7{
    position: absolute;
    top:1205px; left:259px;
    opacity: 0;
    transition: all .7s;
    transform: translate(100px,100px);
}
#section13 .deco7.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco8{
    position: absolute;
    top:1147px; left:538px;
    opacity: 0;
    transition: all .7s .7s;
    transform: translate(100px,0);
}
#section13 .deco8.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco9{
    position: absolute;
    top:1073px; left:1154px;
    opacity: 0;
    transition: all .7s .7s;
    transform: translate(-100px,0);
}
#section13 .deco9.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .deco10{
    position: absolute;
    top:1182px; left:1425px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(-100px,100px);
}
#section13 .deco10.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .txt_deco{
    position: absolute;
    top:1358px; left:231px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(100px);
}
#section13 .txt_deco.on{
    opacity: 1;
    transform: translateY(0);
}
#section13 .photo_txt{
    position: absolute;
    top:1661px; left:548px;
    overflow: hidden;
}
#section13 .photo_txt>img{
    transform: translateY(300px);
    transition: all .6s .3s;  
}
#section13 .photo_txt.on>img{
    transform: translateY(0);
}
#section13 .photo_deco1{
    position: absolute;
    top:1863px; left:563px;
    opacity: 0;
    transition: all .7s ;
    transform: translate(100px,100px);
}
#section13 .photo_deco1.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .photo_deco2{
    position: absolute;
    top:2663px; left:1436px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translate(-100px,-100px);
}
#section13 .photo_deco2.on{
    opacity: 1;
    transform: translate(0);
}
#section13 .photo1{
    position: absolute;
    top:1919px; left:158px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(200px);
}
#section13 .photo1.on{
    opacity: 1;
    transform: translateY(0);
}
#section13 .photo2{
    position: absolute;
    top:2037px; left:482px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section13 .photo2.on{
    opacity: 1;
    transform: translateY(0);
}
#section13 .photo3{
    position: absolute;
    top:1970px; left:820px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(200px);
}
#section13 .photo3.on{
    opacity: 1;
    transform: translateY(0);
}
#section13 .photo4{
    position: absolute;
    top:2037px; left:1147px;
    opacity: 0;
    transition: all .7s .7s;
    transform: translateY(200px);
}
#section13 .photo4.on{
    opacity: 1;
    transform: translateY(0);
}
#section13 .photo5{
    position: absolute;
    top:1919px; left:1476px;
    opacity: 0;
    transition: all .7s .9s;
    transform: translateY(200px);
}
#section13 .photo5.on{
    opacity: 1;
    transform: translateY(0);
}

/* section14 */
#section14 {
    position: absolute;
    top: 40410px; left: 0px;
    width: 100%;
}
#section14 .bg{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section14 .tittle_deco{
    position: absolute;
    top:12px; left:92px;
    opacity: 0;
    transition: all .7s;
    transform: translateY(150px);
}
#section14 .tittle_deco.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .tittle_deco > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-20px);
    }
}
#section14 .tittle{
    position: absolute;
    top:0; left:92px;
    opacity: 1;
    transition: all .7s .3s;
    transform: translateY(0);
}
#section14 .dog{
    position: absolute;
    top:271px; left:68px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section14 .dog.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .cloud{
    position: absolute;
    top:666px; left:0;
    opacity: 1;
}
#section14 .line1{
    position: absolute;
    top:933px; left:362px;
    opacity: 0;
    transition: all .7s .3s;
}
#section14 .line1.on{
    opacity: 1;
}
#section14  .vd1 video{
    position: absolute;
    top:384px; left: 973px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section14  .vd1 video.on{
    opacity: 1;
    transform: translateY(0);
}
#section14  .vd1 .frame{
    position: absolute;
    top:369px; left: 964px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section14  .vd1 .frame.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .video1_deco{
    position: absolute;
    top:448px; left:774px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(100px,100px)
}
#section14 .video1_deco.on{
    opacity: 1;
    transform: translate(0);
}
#section14 .video1_txt{
    position: absolute;
    top:1293px; left:1032px;
    opacity: 1;
}
#section14 .video_ph1{
    position: absolute;
    top:619px; left:570px;
    opacity: 0;
    transition: all .7s; 
    transform: translateX(250px)
}
#section14 .video_ph1.on{
    opacity: 1;
    transform: translateX(0);
}
#section14 .video_ph2{
    position: absolute;
    top:507px; left:1457px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateX(-250px)
}
#section14 .video_ph2.on{
    opacity: 1;
    transform: translateX(0);
}
#section14 .video2_deco{
    position: absolute;
    top:1052px; left:59px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(-150px,-100px);
}
#section14 .video2_deco.on{
    opacity: 1;
    transform: translate(0);
}
#section14  .vd2 video{
    position: absolute;
    top:1440px; left: 119px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section14  .vd2 video.on{
    opacity: 1;
    transform: translateY(0);
}
#section14  .vd2 .frame{
    position: absolute;
    top:1426px; left: 109px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section14  .vd2 .frame.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .video2_txt{
    position: absolute;
    top:2349px; left:133px;
    opacity: 1;
}
#section14 .video2_arrow{
    position: absolute;
    top:2351px; left:133px;
    opacity: 1;
}
#section14 .video2_arrow > img {
    animation: deco4 1s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateX(-20px);
    }
}
#section14 .photo1_deco{
    position: absolute;
    top:1540px; left:757px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(200px);
}
#section14 .photo1_deco.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .photo1{
    position: absolute;
    top:1710px; left:725px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section14 .photo1.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .photo1_point1{
    position: absolute;
    top:1916px; left:673px;
    transform: scale(0.3);
    transition: all .7s ;
    opacity: 0;
}
#section14 .photo1_point1.on{
    transform: scale(1);
    opacity: 1;
}
#section14 .photo1_point2{
    position: absolute;
    top:2449px; left:1074px;
    transform: scale(0.3);
    transition: all .7s .3s;
    opacity: 0;
}
#section14 .photo1_point2.on{
    transform: scale(1);
    opacity: 1;
}
#section14 .photo1_line{
    position: absolute;
    top:2401px; left:1177px;
    opacity: 0;
    transition: all .7s .7s;
}
#section14 .photo1_line.on{
    opacity: 1;
}
#section14 .photo1_txt{
    position: absolute;
    top:2274px; left:1324px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateX(200px);
}
#section14 .photo1_txt.on{
    opacity: 1;
    transform: translateX(0);
}
#section14 .deco1{
    position: absolute;
    top:1446px; left:1289px;
    opacity: 1;
}
#section14 .line2{
    position: absolute;
    top:2196px; left:0;
    opacity: 0;
    transition: all .7s .3s;
}
#section14 .line2.on{
    opacity: 1;
}
#section14  .vd3 video{
    position: absolute;
    top:2905px; left: 1204px;
    width: 423px;
    height: 868px;
    box-sizing: border-box;
    border-radius:13%;
    object-fit: cover;
    opacity: 0;
    transition: all .7s;
    transform: translateY(200px);
}
#section14  .vd3 video.on{
    opacity: 1;
    transform: translateY(0);
}
#section14  .vd3 .frame{
    position: absolute;
    top:2892px; left: 1198px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section14  .vd3 .frame.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .video3_deco1{
    position: absolute;
    top:3432px; left:1536px;
    opacity: 0;
    transition: all .7s ;
    transform: translateX(-200px);
}
#section14 .video3_deco1.on{
    opacity: 1;
    transform: translateX(0);
}
#section14 .video3_deco2{
    position: absolute;
    top:2750px; left:1488px;
    opacity: 0;
    transition: all .7s;
    transform: translateX(-200px);
}
#section14 .video3_deco2.on{
    opacity: 1;
    transform: translateX(0);
}
#section14 .photo2_deco{
    position: absolute;
    top:2729px; left:1058px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translate(-100px,200px);
}
#section14 .photo2_deco.on{
    opacity: 1;
    transform: translate(0);
}
#section14 .photo2{
    position: absolute;
    top:2925px; left:599px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section14 .photo2.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .photo2_arrow{
    position: absolute;
    top:3746px; left:614px;
    opacity: 1;
}
#section14 .photo2_arrow > img {
    animation: deco4 1s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateX(-20px);
    }
}
#section14 .photo2_ph{
    position: absolute;
    top:2774px; left:616px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateY(200px);
}
#section14 .photo2_ph.on{
    opacity: 1;
    transform: translateY(0);
}
#section14 .deco2{
    position: absolute;
    top:2644px; left:183px;
    opacity: 1;
}
#section14 .photo3{
    position: absolute;
    top:2967px; left:104px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translateY(200px);
}
#section14 .photo3.on{
    opacity: 1;
    transform: translateY(0);
}

/* section15 */
#section15 {
    position: absolute;
    top: 44581px; left: 0px;
    width: 100%;
}
#section15 .bg{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section15 .phone1{
    position: absolute;
    top:765px; left:701px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section15 .phone1.on{
    opacity: 1;
    transform: translateY(0);
}
#section15 .phone2{
    position: absolute;
    top:354px; left:841px;
    opacity: 0;
    transition: all .7s ;
    transform: translateY(200px);
}
#section15 .phone2.on{
    opacity: 1;
    transform: translateY(0);
}
#section15 .phone_deco1{
    position: absolute;
    top:263px; left:643px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(100px,100px);
}
#section15 .phone_deco1.on{
    opacity: 1;
    transform: translate(0);
}
#section15 .phone_deco1 > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-20px);
    }
}
#section15 .phone_deco2{
    position: absolute;
    top:641px; left:1141px;
    opacity: 0;
    transition: all .7s .5s;
    transform: translate(-100px,100px);
}
#section15 .phone_deco2.on{
    opacity: 1;
    transform: translate(0);
}
#section15 .phone_deco2 > img {
    animation: deco3 1s linear infinite alternate;
}
@keyframes deco3 {
    100% {
        transform: translateY(-20px);
    }
}
#section15 .txt1{
    position: absolute;
    top:625px; left:120px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateX(200px);
}
#section15 .txt1.on{
    opacity: 1;
    transform: translateX(0);
}
#section15 .txt2{
    position: absolute;
    top:625px; left:1340px;
    opacity: 0;
    transition: all .7s .3s;
    transform: translateX(-200px);
}
#section15 .txt2.on{
    opacity: 1;
    transform: translateX(0);
}
#section15 .txt_deco1{
    position: absolute;
    top:870px; left:142px;
    opacity: 1;
    transition: all .7s .7s;
    transform: translate(-50px,50px);
}
#section15 .txt_deco1.on{
    opacity: 1;
    transform: translate(0);
}
#section15 .txt_deco2{
    position: absolute;
    top:541px; left:1677px;
    opacity: 1;
    transition: all .7s .7s;
    transform: translate(100px,100px);
}
#section15 .txt_deco2.on{
    opacity: 1;
    transform: translate(0);
}




/*  menu  */
#menu{
    position: absolute;
    top:0; left:0;
    width: 1920px;
    background-color: #222222;
    display: flex;
    padding:26px 0;
    z-index: 9999;
  }
  #menu .logo{
    margin-left: 40px;
  }
  #menu .gnb{
    margin:0 auto;
    display: flex;
  }
  #menu .gnb li{
    margin-right: 30px;
  
  }
  #menu .gnb a{
    font-size: 1.2rem;
  }
  .gnb a:after {
    display:block;
    content: '';
    border-bottom: solid 3px #afff01; 
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
    padding-bottom:5px;
  }
  .gnb a:hover:after { transform: scaleX(1); }
  .gnb a.underline-blue:after{  transform-origin:  0% 50%; }
  
  #menu .sns{
    float: right;
    margin-right: 20px;
  }
  #menu .sns a i{
    margin-right: 10px;
    font-size:1.5rem
  }
  #menu .sns a i:hover{
    color: #afff01;;
  }
  
  
  
  
  
  
  
  /*  bottom */
  #bottom{
    position: absolute;
    top:45895px; left:0;
    opacity: 1;
    background-color: #222222;
    width: 100%;
    height: 600px;
  }

  #bottom .txt{
    position: absolute;
    top:82px; left:823px;
    opacity: 1;
  }
  #bottom .ct1{
    position: absolute;
    top:239px; left:266px;
    overflow: hidden;
  }
  #bottom .ct1>img{
      transform: translateY(300px);
      transition: all .7s;  
  }
  #bottom .ct1.on>img{
    transform: translateY(0);
  }
  #bottom .ct2{
    position: absolute;
    top:239px; left:492px;
    transform: rotate( 360deg );
    transition: all .7s ; 
    opacity: 0;
  }
  #bottom .ct2.on{
    opacity: 1;
    transform: rotate( 0);
  }
  #bottom .ct3{
    position: absolute;
    top:239px; left:660px;
    overflow: hidden;
  }
  #bottom .ct3>img{
      transform: translateY(300px);
      transition: all .7s .3s;  
  }
  #bottom .ct3.on>img{
    transform: translateY(0);
  }
  #bottom .ct4{
    position: absolute;
    top:239px; left:901px;
    overflow: hidden;
  }
  #bottom .ct4>img{
      transform: translateY(300px);
      transition: all .7s .5s;  
  }
  #bottom .ct4.on>img{
    transform: translateY(0);
  }
  #bottom .ct5{
    position: absolute;
    top:239px; left:1641px;
    transform: scale(3);
    transition: all .7s .7s; 
    opacity: 0; 
  }
  #bottom .ct5.on{
    opacity: 1;
    transform: scale(1);
  }
  #bottom .line{
    width: 0px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top:360px; left: 252px;
    transition: all .8s;
    background-color: rgb(255, 255, 255);
  }
  #bottom .line.on{
    width: 1430px;
  }
  #bottom  .sub_menu{
    position: absolute;
    top:400px; left: 0;
    width: 1920px;
    display: flex;;
    margin:0 auto;
  }
  
  #bottom .sub_menu ul{
    margin:0 auto;
    display: flex;
  }
  
  #bottom .sub_menu li{
    margin-right: 30px;
  
  }
  #bottom .sub_menu a{
    border: 1px solid white;
    border-radius: 50px;
    padding: 12px 30px 1px 30px;
    font-size: 1.5rem;
    font-weight: 400;
  }
  #bottom  .sub_menu a:hover{
    border: 1px solid  #afff01;
    border-radius: 50px;
    padding: 12px 30px 15px 30px;
    font-size: 1.5rem;
    font-weight: 400;
    background-color:  #afff01;
    color: #222222;
  }
  
  
  /* wave2 */
  .box2 {
    width: 1920px;
    height: 600px;
    border-radius: 5px;
    background: lighten(#afff01, 100%);
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }
  
  
  #bottom .txt{
    position: absolute;
    top:82px; left:823px;
    opacity: 1;
  }
  #bottom .ct1{
    position: absolute;
    top:239px; left:266px;
    overflow: hidden;
  }
  #bottom .ct1>img{
      transform: translateY(300px);
      transition: all .7s;  
  }
  #bottom .ct1.on>img{
    transform: translateY(0);
  }
  #bottom .ct2{
    position: absolute;
    top:239px; left:492px;
    transform: rotate( 360deg );
    transition: all .7s ; 
    opacity: 0;
  }
  #bottom .ct2.on{
    opacity: 1;
    transform: rotate( 0);
  }
  #bottom .ct3{
    position: absolute;
    top:239px; left:660px;
    overflow: hidden;
  }
  #bottom .ct3>img{
      transform: translateY(300px);
      transition: all .7s .3s;  
  }
  #bottom .ct3.on>img{
    transform: translateY(0);
  }
  #bottom .ct4{
    position: absolute;
    top:239px; left:901px;
    overflow: hidden;
  }
  #bottom .ct4>img{
      transform: translateY(300px);
      transition: all .7s .5s;  
  }
  #bottom .ct4.on>img{
    transform: translateY(0);
  }
  #bottom .ct5{
    position: absolute;
    top:239px; left:1641px;
    transform: scale(3);
    transition: all .7s .7s; 
    opacity: 0; 
  }
  #bottom .ct5.on{
    opacity: 1;
    transform: scale(1);
  }
  #bottom .line{
    width: 0px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top:360px; left: 252px;
    transition: all .8s;
    background-color: rgb(255, 255, 255);
  }
  #bottom .line.on{
    width: 1430px;
  }
  #bottom  .sub_menu{
    position: absolute;
    top:400px; left: 0;
    width: 1920px;
    display: flex;;
    margin:0 auto;
  }
  
  #bottom .sub_menu ul{
    margin:0 auto;
    display: flex;
  }
  
  #bottom .sub_menu .ma{
    margin-right: 30px;
  
  }
  #bottom .sub_menu a{
    border: 1px solid white;
    border-radius: 50px;
    padding: 12px 30px 12px 30px;
    font-size: 1.5rem;
    font-weight: 400;
  }
  #bottom  .sub_menu a:hover{
    border: 1px solid  #afff01;
    border-radius: 50px;
    padding: 12px 30px 15px 30px;
    font-size: 1.5rem;
    font-weight: 400;
    background-color:  #afff01;
    color: #222222;
  }
  
  
  /* wave2 */
  .box2 {
    width: 1920px;
    height: 600px;
    border-radius: 5px;
    background: lighten(#afff01, 100%);
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }
  
  
  .box2 .wave {
    opacity: .7;
    position: absolute;
    bottom: 3%;
    left: 50%;
    background: #aeff01;
    width: 1000px;
    height: 1000px;
    margin-left: -500px;
    margin-bottom: -950px;
    transform: translate(-50%,-48%);
    border-radius: 43%;
    animation: drift 3000ms infinite linear;
  }
  
  .box2 .wave.-three {
    animation: drift 5000ms infinite linear;
  }
  
  .box2 .wave.-two {
    animation: drift 7000ms infinite linear;
    opacity: .1;
    background: rgb(255, 255, 255);
  }
  
  .box2:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(rgb(255, 255, 254), 1), rgba(#def, 0) 80%, rgba(black, .5));
    z-index: 11;
    transform: translate3d(0, 0, 0);
  }
  @keyframes drift {
    from { transform: rotate(0deg); }
    from { transform: rotate(360deg); }
  }