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{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section01 .bg_txt{
    position: absolute;
    top:90px; left:0;
    opacity: 1;
}
#section01 .circle1{
    position: absolute;
    top:-470px; left:146px;
    opacity: 1;
}
#section01 .circle1> img {
    animation: deco1 50s linear infinite;
}
@keyframes deco1 {
    100% {
        transform: rotate( 360deg );
    }
}
#section01 .circle2{
    position: absolute;
    top:105px; left:740px;
    opacity: 1;
    transform: translateY(-280px);
}

#section01 .tittle{
    position: absolute;
    top:1233px; left:751px;
    transform: translateY(200px);
    transition: all .8s;
    opacity: 0;
}
#section01 .tittle.on{
    transform: translateY(0);
    opacity: 1;
}
#section01 .tittle_txt1{
    position: absolute;
    top:1249px; left:575px;
    transform: translateX(-300px);
    transition: all .9s .4s;
    opacity: 0;
}
#section01 .tittle_txt1.on{
    transform: translateX(0);
    opacity: 1;
}
#section01 .tittle_txt2{
    position: absolute;
    top:1249px; left:1318px;
    transform: translateX(300px);
    transition: all .9s .4s;
    opacity: 0;
}
#section01 .tittle_txt2.on{
    transform: translateX(0);
    opacity: 1;
}
#section01 .side1{
    position: absolute;
    top:663px; left:-181px;
    opacity: 0;
    transition: all .7s;
}
#section01 .side1> img {
    animation: deco2 50s linear infinite;
}
@keyframes deco2 {
    100% {
        transform: rotate( 360deg );
    }
}
#section01 .side2{
    position: absolute;
    top:663px; left:1721px;
    opacity: 0;
    transition: all .7s;
}
#section01 .side2> img {
    animation: deco2 50s linear infinite;
}
@keyframes deco2 {
    100% {
        transform: rotate( 360deg );
    }
}

/* section02 */
#section02{
    position: absolute;
    top:1605px; left:0;
    opacity: 1;
}
#section02 .bg{
    position: relative;
    top:0; left:0;
}

/* section03 */
#section03{
    position: absolute;
    top:2245px; left:0;
    opacity: 1;
}
#section03 .tittle1{
    position: absolute;
    top:263px; left:622px;
    opacity: 1;
}
#section03 .photo1{
    position: absolute;
    top:234px; left:127px;
    transform: translateX(-200px);
    transition: all .8s;
    opacity: 0;
}
#section03 .photo1.on{
    transform: translateX(0);
    opacity: 1;
}
#section03 .photo2{
    position: absolute;
    top:234px; left:1467px;
    transform: translateX(200px);
    transition: all .8s;
    opacity: 0;
}
#section03 .photo2.on{
    transform: translateX(0);
    opacity: 1;
}
#section03 .line{
    width: 1px;
    height:0;
    overflow: hidden;
    position: absolute;
    top:673px; left: 959px;
    transition: all .8s;
    background-color: rgb(0, 0, 0);
}
#section03 .line.on{
    height: 106px;
}
#section03 .tittle2_1{
    position: absolute;
    top:810px; left:783px;
    transform: translateX(80px);
    transition: all .8s  .1s;
    opacity: 1;
}
#section03 .tittle2_1.on{
    transform: translateX(0);
    opacity: 1;
}
#section03 .tittle2_2{
    position: absolute;
    top:810px; left:1051px;
    transform: translateX(-80px);
    transition: all .8s .1s;
    opacity: 1;
}
#section03 .tittle2_2.on{
    transform: translateX(0);
    opacity: 1;
}
#section03 .photo3{
    position: absolute;
    top:805px; left:881px;
    overflow: hidden;
}
#section03 .photo3>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section03 .photo3.on>img{
    transform: translateY(0);
}

/* section02 */
#section04{
    position: absolute;
    top:3354px; left:0;
    opacity: 1;
}
#section04 .bg{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section04 .tittle1{
    position: absolute;
    top:104px; left:352px;
    overflow: hidden;
}
#section04 .tittle1>img{
    transform: translateY(300px);
    transition: all .7s;  
}
#section04 .tittle1.on>img{
    transform: translateY(0);
}
#section04 .tittle1_deco1{
    position: absolute;
    top:225px; left:357px;
    transform: translateX(-100px);
    transition: all .8s .3s;
    opacity: 0;
}
#section04 .tittle1_deco1.on{
    transform: translateX(0);
    opacity: 1;
}
#section04 .tittle1_deco2{
    position: absolute;
    top:225px; left:940px;
    transform: translateY(100px);
    transition: all .8s  .5s;
    opacity: 0;
}
#section04 .tittle1_deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section04 .tittle1_deco3{
    position: absolute;
    top:225px; left:1332px;
    transform: translateX(100px);
    transition: all .8s .7s;
    opacity: 0;
}
#section04 .tittle1_deco3.on{
    transform: translateX(0);
    opacity: 1;
}
#section04 .photo1{
    position: absolute;
    top:314px; left:0;
    transition: all .8s .5s;
    opacity: 0.1;
}
#section04 .photo1.on{
    opacity: 1;
}
#section04 .photo2{
    position: absolute;
    top:314px; left:0;
    transition: all .8s  .3s;
    opacity: 0;
}
#section04 .photo2.on{
    opacity: 1;
}
#section04 .photo3{
    position: absolute;
    top:314px; left:319px;
    transition: all .8s ;
    opacity: 0.5;
}
#section04 .photo3.on{
    opacity: 1;
}
#section04 .txt{
    position: absolute;
    top:786px; left:1314px;
    transform: translateX(100px);
    transition: all .8s;
    opacity: 0;
}
#section04 .txt.on{
    transform: translateX(0);
    opacity: 1;
}

/* section05 */
#section05{
    position: absolute;
    top:4526px; left:0;
    opacity: 1;
}
#section05 .bg{
    position: absolute;
    top:0; left:47px;
    opacity: 1;
}
#section05 .tittle{
    position: absolute;
    top:229px; left:409px;
    overflow: hidden;
}
#section05 .tittle>img{
    transform: translateY(200px);
    transition: all .7s;  
}
#section05 .tittle.on>img{
    transform: translateY(0);
}
#section05 .txt{
    position: absolute;
    top:320px; left:785px;
    overflow: hidden;
}
#section05 .txt>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section05 .txt.on>img{
    transform: translateY(0);
}
#section05 .side1_1{
    position: absolute;
    top:585px; left:210px;
    transform: translateX(-100px);
    transition: all .8s;
    opacity: 0;
}
#section05 .side1_1.on{
    transform: translateX(0);
    opacity: 1;
}
#section05 .side1_2{
    position: absolute;
    top:638px; left:210px;
    transition: all .9s  .5s;
    opacity: 0;
}
#section05 .side1_2.on{
    opacity: 1;
}
#section05 .side2_1{
    position: absolute;
    top:585px; left:1564px;
    transform: translateX(100px);
    transition: all .8s;
    opacity: 0;
}
#section05 .side2_1.on{
    transform: translateX(0);
    opacity: 1;
}
#section05 .side2_2{
    position: absolute;
    top:638px; left:1585px;
    transition: all .9s  .5s;
    opacity: 0;
}
#section05 .side2_2.on{
    opacity: 1;
}


/* section06 */
#section06{
    position: absolute;
    top:5819px; left:0;
    opacity: 1;
}
#section06 .circle1{
    position: absolute;
    top:0; left:-235px;
    opacity: 1;
}
#section06 .circle1> img {
    animation: deco1 50s linear infinite;
}
@keyframes deco1 {
    100% {
        transform: rotate( 360deg );
    }
}
#section06 .ph1{
    position: absolute;
    top:400px; left:27px;
    transition: all .9s;
    opacity: 0;
}
#section06 .ph1.on{
    opacity: 1;
}
#section06 .tittle{
    position: absolute;
    top:966px; left:461px;
    overflow: hidden;
}
#section06 .tittle>img{
    transform: translateY(200px);
    transition: all .6s;  
}
#section06 .tittle.on>img{
    transform: translateY(0);
}
#section06 .ph2{
    position: absolute;
    top:1063px; left:0;
    opacity: 1;
}
#section06 .bg{
    position: absolute;
    top:2118px; left:0;
    opacity: 1;
}

/* section07 */
#section07{
    position: absolute;
    top:7716px; left:0;
    opacity: 1;
}
#section07 .ph1_txt{
    position: absolute;
    top:425px; left:951px;
    transform: translateX(100px);
    transition: all .7s;
    opacity: 0;
}
#section07 .ph1_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section07 .ph1_deco{
    position: absolute;
    top:398px; left:1004px;
    opacity: 0;
    transform: rotate(-90deg);
    transition: all .7s .3s;
}
#section07 .ph1_deco.on{
    opacity: 1;
    transform:  rotate( 0deg);
}
#section07 .ph1{
    position: absolute;
    top:0; left:1345px;
    transform: translateY(100px);
    transition: all .7s;
    opacity: 0;
}
#section07 .ph1.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .ph2_txt{
    position: absolute;
    top:930px; left:536px;
    transform: translateX(-100px);
    transition: all .7s;
    opacity: 0;
}
#section07 .ph2_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section07 .ph2_deco1{
    position: absolute;
    top:943px; left:810px;
    transform: rotate(90deg);
    transition: all .7s .3s;
    opacity: 0;
}
#section07 .ph2_deco1.on{
    opacity: 1;
    transform:  rotate( 0deg);
}
#section07 .ph2_deco2{
    position: absolute;
    top:915px; left:116px;
    transform: translateY(-100px);
    transition: all .7s .3s;
    opacity: 0;
}
#section07 .ph2_deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .ph2_deco3{
    position: absolute;
    top:1960px; left:132px;
    transform: translateY(100px);
    transition: all .8s ;
    opacity: 0;
}
#section07 .ph2_deco3.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .ph3_txt{
    position: absolute;
    top:2022px; left:1366px;
    transform: translateX(-100px);
    transition: all .7s .3s;
    opacity: 0;
}
#section07 .ph3_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section07 .ph3_deco1{
    position: absolute;
    top:2035px; left:1656px;
    transform: rotate(90deg);
    transition: all .7s .5s;
    opacity: 0;
}
#section07 .ph3_deco1.on{
    opacity: 1;
    transform: rotate( 0deg);
}
#section07 .ph3_deco2{
    position: absolute;
    top:1269px; left:951px;
    transform: translateY(100px);
    transition: all .8s;
    opacity: 0;
}
#section07 .ph3_deco2.on{
    transform: translateY(0);
    opacity: 1;
}
#section07 .ph3_deco3{
    position: absolute;
    top:1507px; left:1557px;
    transform: translateX(100px);
    transition: all .8s .3s;
    opacity: 0;
}
#section07 .ph3_deco3.on{
    transform: translateX(0);
    opacity: 1;
}
#section07 .ph{
    position: absolute;
    top:727px; left:110px;
    transform: translateY(100px);
    transition: all .8s;
    opacity: 0;
}
#section07 .ph.on{
    transform: translateY(0);
    opacity: 1;
}

/* section08 */
#section08{
    position: absolute;
    top:10109px; left:0;
    opacity: 1;
}
#section08 .ph_deco1{
    position: absolute;
    top:272px; left:0;
    transform: translateY(-300px);
    transition: all .8s .5s;
    opacity: 0;
}
#section08 .ph_deco1.on{
    transform: translateY(0);
    opacity: 1;
}
#section08 .ph{
    position: absolute;
    top:99px; left:0;
    opacity: 1;
}
#section08 .ph_deco2{
    position: absolute;
    top:0px; left:1698px;
    transition: all .9s .3s;
    opacity: 0;
}
#section08 .ph_deco2.on{
    opacity: 1;
}
#section08 .ph_deco3{
    position: absolute;
    top:114px; left:1244px;
    overflow: hidden;
}
#section08 .ph_deco3>img{
    transform: translateX(-100px);
    transition: all .7s .3s;  
}
#section08 .ph_deco3.on>img{
    transform: translateX(0);
}
#section08 .ph_tittle{
    position: absolute;
    top:617px; left:1259px;
    overflow: hidden;
}
#section08 .ph_tittle>img{
    transform: translateY(200px);
    transition: all .6s;  
}
#section08 .ph_tittle.on>img{
    transform: translateY(0);
}
#section08 .ph_txt{
    position: absolute;
    top:775px; left:1259px;
    transform: translateX(-100px);
    transition: all .8s .3s;
    opacity: 0;
}
#section08 .ph_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section08 .ct{
    position: absolute;
    top:1515px; left:0;
    opacity: 1;
}
#section08 .ct_tittle{
    position: absolute;
    top:1820px; left:560px;
    overflow: hidden;
}
#section08 .ct_tittle>img{
    transform: translateY(200px);
    transition: all .6s;  
}
#section08 .ct_tittle.on>img{
    transform: translateY(0);
}
#section08 .ct_txt{
    position: absolute;
    top:1926px; left:827px;
    overflow: hidden;
}
#section08 .ct_txt>img{
    transform: translateY(200px);
    transition: all .6s .3s;  
}
#section08 .ct_txt.on>img{
    transform: translateY(0);
}

/* section09 */
#section09{
    position: absolute;
    top:12369px; left:0;
    opacity: 1;
}
#section09 .deco1{
    position: absolute;
    top:0; left:37px;
    transition: all .8s;
    opacity: 0;
}
#section09 .deco1.on{
    transform: translateX(0);
    opacity: 1;
}
#section09 .tittle_deco1{
    position: absolute;
    top:241px; left:351px;
    transform: translateX(100px);
    transition: all .8s .5s;
    opacity: 0;
}
#section09 .tittle_deco1.on{
    transform: translateX(0);
    opacity: 1;
}
#section09 .tittle_deco2{
    position: absolute;
    top:110px; left:1133px;
    transform: translate(-280px,0);
    transition: all .8s;
    opacity: 1;
}
#section09 .tittle_deco2.on{
    transform: translate(0);
    opacity: 1;
}
#section09 .tittle_deco3{
    position: absolute;
    top:459px; left:577px;
    transform: translateY(200px);
    transition: all .8s .6s;
    opacity: 0;
}
#section09 .tittle_deco3.on{
    transform: translateY(0);
    opacity: 1;
}
#section09 .tittle_deco4{
    position: absolute;
    top:516px; left:1276px;
    transform: translateX(100px);
    transition: all .8s .6s;
    opacity: 0;
}
#section09 .tittle_deco4.on{
    transform: translateX(0);
    opacity: 1;
}
#section09 .tittle{
    position: absolute;
    top:340px; left:349px;
    overflow: hidden;
}
#section09 .tittle>img{
    transform: translateY(200px);
    transition: all .6s .3s;  
}
#section09 .tittle.on>img{
    transform: translateY(0);
}
#section09 .deco2{
    position: absolute;
    top:762px; left:62px;
    opacity: 1;
}
#section09 .deco2> img {
    animation: deco4 1.3s linear infinite alternate;
}
@keyframes deco4 {
    100% {
        transform: translateY(20px );
    }
}
#section09 .deco3{
    position: absolute;
    top:766px; left:950px;
}
#section09 .deco3> img {
    animation: deco3 8s linear infinite;
}
@keyframes deco3 {
    100% {
        transform: rotate( 360deg );
    }
}
#section09 .deco4{
    position: absolute;
    top:766px; left:1649px;
    opacity: 1;
}

/* section10 */
#section10{
    position: absolute;
    top:13453px; left:0;
    opacity: 1;
}
#section10 .deco1{
    position: absolute;
    top:0; left:891px;
    overflow: hidden;
}
#section10 .deco1>img{
    transform: translateY(100px);
    transition: all .6s .3s;  
}
#section10 .deco1.on>img{
    transform: translateY(0);
}
#section10 .tittle{
    position: absolute;
    top:41px; left:706px;
    overflow: hidden;
}
#section10 .tittle>img{
    transform: translateY(150px);
    transition: all .6s .6s;  
}
#section10 .tittle.on>img{
    transform: translateY(0);
}
#section10 .side1{
    position: absolute;
    top:70px; left:602px;
    transform: translateX(250px);
    transition: all .8s;
    opacity: 1;
}
#section10 .side1.on{
    transform: translateX(0);
    opacity: 1;
}
#section10 .side2{
    position: absolute;
    top:72px; left:1238px;
    transform: translateX(-250px);
    transition: all .8s ;
    opacity: 1;
}
#section10 .side2.on{
    transform: translateX(0);
    opacity: 1;
}
#section10 .line{
    width: 0;
    height:1px;
    overflow: hidden;
    position: absolute;
    top:140px; left: 799px;
    transition: all .8s .9s;
    background-color: rgb(0, 0, 0);
}
#section10 .line.on{
    width: 296px;
}
/* section11 */
#section11{
    position: absolute;
    top:13701px; left:0;
    opacity: 1;
}
#section11 .main1{
    position: absolute;
    top:0; left:0;
    transform: translateY(200px);
    transition: all .8s ;
    opacity: 0;
}
#section11 .main1.on{
    transform: translateY(0);
    opacity: 1;
}
#section11 .main2{
    position: absolute;
    top:0; left:957px;
    transform: translateY(-200px);
    transition: all .8s ;
    opacity: 0;
}
#section11 .main2.on{
    transform: translateY(0);
    opacity: 1;
}

/* section12 */
#section12{
    position: absolute;
    top:14996px; left:0;
    opacity: 1;
}
#section12 .bg{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section12 .deco{
    position: absolute;
    top:79px; left:131px;
    transform: rotate(-45deg);
    transition: all .7s .3s;
    opacity: 0;
}
#section12 .deco.on{
    opacity: 1;
    transform: rotate(0deg);
}
#section12 .ct1{
    position: absolute;
    top:105px; left:152px;
    transform: translateX(-250px);
    transition: all .7s;
    opacity: 0;
}
#section12 .ct1.on{
    transform: translateX(0);
    opacity: 1;
}
#section12 .ct2{
    position: absolute;
    top:76px; left:1073px;
    transform: translateY(200px);
    transition: all .7s ;
    opacity: 0;
}
#section12 .ct2.on{
    transform: translateY(0);
    opacity: 1;
}
#section12 .line{
    width: 1px;
    height:0;
    overflow: hidden;
    position: absolute;
    top:922px; left: 214px;
    transition: all .8s ;
    background-color: rgb(0, 0, 0);
}
#section12 .line.on{
    height: 346px;
}
#section12 .ct3{
    position: absolute;
    top:1241px; left:140px;
    transform: translateX(-250px);
    transition: all .7s;
    opacity: 0;
}
#section12 .ct3.on{
    transform: translateX(0);
    opacity: 1;
}
#section12 .ct4{
    position: absolute;
    top:1543px; left:850px;
    transform: translateY(200px);
    transition: all .7s ;
    opacity: 0;
}
#section12 .ct4.on{
    transform: translateY(0);
    opacity: 1;
}
#section12 .ct5{
    position: absolute;
    top:2173px; left:0;
    opacity: 1;
}
#section12 .ct5_txt1{
    position: absolute;
    top:2546px; left:556px;
    overflow: hidden;
}
#section12 .ct5_txt1>img{
    transform: translateY(200px);
    transition: all .6s ;  
}
#section12 .ct5_txt1.on>img{
    transform: translateY(0);
}
#section12 .ct5_txt2{
    position: absolute;
    top:2653px; left:813px;
    overflow: hidden;
}
#section12 .ct5_txt2>img{
    transform: translateY(200px);
    transition: all .6s .3s;  
}
#section12 .ct5_txt2.on>img{
    transform: translateY(0);
}

/* section13 */
#section13{
    position: absolute;
    top:17971px; left:0;
    opacity: 1;
}
#section13 .bg{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section13 .ct1_deco{
    position: absolute;
    top:171px; left:1708px;
    transform: rotate(-45deg);
    transition: all .7s .4s;
    opacity: 0;
}
#section13 .ct1_deco.on{
    transform: translate(0);
    opacity: 1;
}
#section13 .ct1{
    position: absolute;
    top:176px; left:178px;
    transition: all .8s;
    opacity: 0;
}
#section13 .ct1.on{
    opacity: 1;
}
#section13 .ct1_txt{
    position: absolute;
    top:815px; left:117px;
    transform: translateX(-250px);
    transition: all .7s;
    opacity: 0;
}
#section13 .ct1_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section13 .ct2_1{
    position: absolute;
    top:1234px; left:110px;
    opacity: 1;
}
#section13 .ct2_txt{
    position: absolute;
    top:1305px; left:862px;
    transform: translateX(250px);
    transition: all .7s;
    opacity: 0;
}
#section13 .ct2_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section13 .ct2_2{
    position: absolute;
    top:1763px; left:1029px;
    transform: translate(-100px,200px);
    transition: all .7s .3s;
    opacity: 0;
}
#section13 .ct2_2.on{
    transform: translate(0);
    opacity: 1;
}
#section13 .ct2_3{
    position: absolute;
    top:1362px; left:1419px;
    transform: translate(100px,-200px);
    transition: all .7s .3s;
    opacity: 0;
}
#section13 .ct2_3.on{
    transform: translate(0);
    opacity: 1;
}
#section13 .ct2_tittle{
    position: absolute;
    top:2143px; left:68px;
    opacity: 1;
}

/* section14 */
#section14{
    position: absolute;
    top:20554px; left:0;
    opacity: 1;
}
#section14 .ct1{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section14 .deco{
    position: absolute;
    top:70px; left:1679px;
    transition: all .8s;
    opacity: 0;
}
#section14 .deco.on{
    opacity: 1;
}
#section14 .tittle{
    position: absolute;
    top:574px; left:1325px;
    opacity: 1;
}
#section14 .txt{
    position: absolute;
    top:799px; left:1336px;
    opacity: 1;
}

/* section15 */
#section15{
    position: absolute;
    top:21601px; left:0;
    opacity: 1;
}
#section15 .bg{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section15 .bg_deco{
    position: absolute;
    top:175px; left:1723px;
    opacity: 1;
}
#section15 .ct1_1{
    position: absolute;
    top:186px; left:91px;
    opacity: 1;
}
#section15 .ct1_2_deco{
    position: absolute;
    top:285px; left:955px;
    transform: rotate(-45deg);
    transition: all .7s;
    opacity: 0;
}
#section15 .ct1_2_deco.on{
    opacity: 1;
    transform: rotate(0deg);
}
#section15 .ct1_2{
    position: absolute;
    top:337px; left:1035px;
    transform: translateX(250px);
    transition: all .7s;
    opacity: 0;
}
#section15 .ct1_2.on{
    transform: translateX(0);
    opacity: 1;
}
#section15 .ct2_txt{
    position: absolute;
    top:1471px; left:214px;
    transform: translateX(-200px);
    transition: all .7s .6s;
    opacity: 0;
}
#section15 .ct2_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section15 .ct2_1{
    position: absolute;
    top:1171px; left:697px;
    transform: translateY(200px);
    transition: all .7s ;
    opacity: 0;
}
#section15 .ct2_1.on{
    transform: translateY(0);
    opacity: 1;
}
#section15 .ct2_2{
    position: absolute;
    top:1171px; left:1048px;
    transform: translateY(200px);
    transition: all .7s .3s;
    opacity: 0;
}
#section15 .ct2_2.on{
    transform: translateY(0);
    opacity: 1;
}
#section15 .ct2_3{
    position: absolute;
    top:1171px; left:1399px;
    transform: translateY(200px);
    transition: all .7s .5s;
    opacity: 0;
}
#section15 .ct2_3.on{
    transform: translateY(0);
    opacity: 1;
}
#section15 .ct3{
    position: absolute;
    top:1850px; left:0px;
    opacity: 1;
}
#section15 .ct3_txt1{
    position: absolute;
    top:2292px; left:401px;
    overflow: hidden;
}
#section15 .ct3_txt1>img{
    transform: translateY(200px);
    transition: all .6s ;  
}
#section15 .ct3_txt1.on>img{
    transform: translateY(0);
}
#section15 .ct3_txt2{
    position: absolute;
    top:2398px; left:819px;
    overflow: hidden;
}
#section15 .ct3_txt2>img{
    transform: translateY(200px);
    transition: all .6s .3s;  
}
#section15 .ct3_txt2.on>img{
    transform: translateY(0);
}

/* section16 */
#section16{
    position: absolute;
    top: 24380px; left:0;
    opacity: 1;
}
#section16 .bg{
    position: absolute;
    top:0; left:0;
    opacity: 1;
}
#section16 .bg_deco{
    position: absolute;
    top:206px; left:99px;
    opacity: 1;
}
#section16 .ct1_tittle{
    position: absolute;
    top:551px; left:100px;
    opacity: 1;
}
#section16 .ct1_1{
    position: absolute;
    top:169px; left:682px;
    transform: translateY(200px);
    transition: all .8s ;
    opacity: 0;
}
#section16 .ct1_1.on{
    transform: translateY(0);
    opacity: 1;
}
#section16 .ct1_2_deco{
    position: absolute;
    top:235px; left:1703px;
    transform: rotate(-45deg);
    transition: all .7s .5s;
    opacity: 0;
}
#section16 .ct1_2_deco.on{
    opacity: 1;
    transform: rotate(0deg);
}
#section16 .ct1_2{
    position: absolute;
    top:305px; left:1421px;
    transform: translateY(-200px);
    transition: all .8s ;
    opacity: 0;
}
#section16 .ct1_2.on{
    transform: translateY(0);
    opacity: 1;
}
#section16 .ct2_1{
    position: absolute;
    top:1197px; left:153px;
    transition: all .8s;
    opacity: 0;
}
#section16 .ct2_1.on{
    opacity: 1;
}
#section16 .ct2_2{
    position: absolute;
    top:1387px; left:511px;
    transition: all .8s .4s;
    opacity: 0;
}
#section16 .ct2_2.on{
    opacity: 1;
}
#section16 .ct2_3{
    position: absolute;
    top:1197px; left:870px;
    transition: all .8s .6s;
    opacity: 0;
}
#section16 .ct2_3.on{
    opacity: 1;
}
#section16 .ct2_4{
    position: absolute;
    top:1290px; left:1446px;
    transform: translateX(200px);
    transition: all .7s .7s;
    opacity: 0;
}
#section16 .ct2_4.on{
    transform: translateX(0);
    opacity: 1;
}
#section16 .ct3{
    position: absolute;
    top:2070px; left:0px;
    opacity: 1;
}
#section16 .ct3_txt1{
    position: absolute;
    top:2375px; left:557px;
    overflow: hidden;
}
#section16 .ct3_txt1>img{
    transform: translateY(200px);
    transition: all .6s ;  
}
#section16 .ct3_txt1.on>img{
    transform: translateY(0);
}
#section16 .ct3_txt2{
    position: absolute;
    top:2479px; left:819px;
    overflow: hidden;
}
#section16 .ct3_txt2>img{
    transform: translateY(200px);
    transition: all .6s .3s;  
}
#section16 .ct3_txt2.on>img{
    transform: translateY(0);
}

/* section17 */
#section17{
    position: absolute;
    top:27115px; left:0;
    opacity: 1;
}
#section17 .ct1{
    position: absolute;
    top:189px; left:343px;
    opacity: 1;
}
#section17 .ct1_txt{
    position: absolute;
    top:544px; left:82px;
    transition: all .7s .3s;
    opacity: 0;
}
#section17 .ct1_txt.on{
    opacity: 1;
}
#section17 .ct2_1{
    position: absolute;
    top:1139px; left:125px;
    opacity: 1;
}
#section17 .ct2_txt{
    position: absolute;
    top:1098px; left:728px;
    transform: translateX(200px);
    transition: all .7s;
    opacity: 0;
}
#section17 .ct2_txt.on{
    transform: translateX(0);
    opacity: 1;
}
#section17 .ct2_2{
    position: absolute;
    top:1191px; left:1300px;
    transform: translate(100px,-200px);
    transition: all .7s .3s;
    opacity: 0;
}
#section17 .ct2_2.on{
    transform: translate(0);
    opacity: 1;
}
#section17 .ct2_3_deco{
    position: absolute;
    top:1579px; left:907px;
    transform: rotate(-45deg);
    transition: all .7s .4s;
    opacity: 0;
}
#section17 .ct2_3_deco.on{
    transform: translate(0);
    opacity: 1;
}
#section17 .ct2_3{
    position: absolute;
    top:1656px; left:989px;
    transform: translate(-100px,200px);
    transition: all .7s .2s;
    opacity: 0;
}
#section17 .ct2_3.on{
    transform: translate(0);
    opacity: 1;
}





/*  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:30000px; 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); }
  }