body{
  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:73px; left:0;
  opacity: 1;
}
#section01 .bg{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section01 .tittle{
  position: absolute;
  top:212px; left:446px;
  transform: translateY(100px);
  opacity: 0
}
#section01 .ct1_1{
  position: absolute;
  top:669px; left:48px;
  transform: translateY(200px);
  transition: all .7s ; 
  opacity: 0;
}
#section01 .ct1_1.on{
  opacity: 1;
  transform: translate(0);
}
#section01 .ct1_2{
  position: absolute;
  top:669px; left:304px;
  transform: translateY(200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section01 .ct1_2.on{
  opacity: 1;
  transform: translate(0);
}
#section01 .ct1_3{
  position: absolute;
  top:909px; left:48px;
  transform: translateY(200px);
  transition: all .7s .5s; 
  opacity: 0;
}
#section01 .ct1_3.on{
  opacity: 1;
  transform: translate(0);
}
#section01 .ct1_4{
  position: absolute;
  top:909px; left:304px;
  transform: translateY(200px);
  transition: all .7s .7s; 
  opacity: 0;
}
#section01 .ct1_4.on{
  opacity: 1;
  transform: translate(0);
}
#section01 .txt{
  position: absolute;
  top:951px; left:1268px;
  transform: translateX(200px);
  transition: all .7s .5s; 
  opacity: 0;
}
#section01 .txt.on{
  opacity: 1;
  transform: translateX(0);
}

/* section02 */
#section02{
  position: absolute;
  top:1449px; left:0;
  opacity: 1;
}
#section02 .txt1{
  position: absolute;
  top:0; left:885px;
  opacity: 1;
}
#section02 .tittle{
  position: absolute;
  top:73px; left:513px;
  overflow: hidden;
}
#section02 .tittle>img{
    transform: translateY(200px);
    transition: all .7s;  
}
#section02 .tittle.on>img{
  transform: translateY(0);
}
#section02 .txt2{
  position: absolute;
  top:160px; left:650px;
  overflow: hidden;
}
#section02 .txt2>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section02 .txt2.on>img{
  transform: translateY(0);
}
#section02 .ct{
  position: absolute;
  top:306px; left:0px;
  opacity: 1;
}
#section02 .ct1_1{
  position: absolute;
  top:447px; left:1365px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section02 .ct1_1.on{
  opacity: 1;
  transform: translateX(0);
}
#section02 .ct1_2{
  position: absolute;
  top:702px; left:56px;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section02 .ct1_2.on{
  opacity: 1;
  transform: translateX(0);
}
#section02 .ct1_3{
  position: absolute;
  top:742px; left:1025px;
  overflow: hidden;
}
#section02 .ct1_3>img{
    transform: translateY(200px);
    transition: all .7s .5s;  
}
#section02 .ct1_3.on>img{
  transform: translateY(0);
}
#section02 .ct1_4{
  position: absolute;
  top:742px; left:1355px;
  overflow: hidden;
}
#section02 .ct1_4>img{
    transform: translateY(200px);
    transition: all .7s .7s;  
}
#section02 .ct1_4.on>img{
  transform: translateY(0);
}
#section02 .ct1_5{
  position: absolute;
  top:742px; left:1691px;
  overflow: hidden;
}
#section02 .ct1_5>img{
    transform: translateY(200px);
    transition: all .7s .9s;  
}
#section02 .ct1_5.on>img{
  transform: translateY(0);
}

/* section03 */
#section03{
  position: absolute;
  top:3045px; left:0;
  opacity: 1;
}
#section03 .txt{
  position: absolute;
  top:0px; left:48px;
  opacity: 1;
}
#section03 .line1{
  width: 0px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top:414px; left: 380px;
  transition: all .8s;
  background-color: rgb(0, 0, 0);
}
#section03 .line1.on{
  width: 1130px;
}
#section03 .line2{
  width: 1px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top:414px; left: 612px;
  transition: all .8s .3s;
  background-color: rgb(0, 0, 0);
}
#section03 .line2.on{
  height: 87px;
}
#section03 .line3{
  width: 1px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top:414px; left: 845px;
  transition: all .8s .5s;
  background-color: rgb(0, 0, 0);
}
#section03 .line3.on{
  height: 87px;
}
#section03 .line4{
  width: 1px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top:414px; left: 1070px;
  transition: all .8s .7s;
  background-color: rgb(0, 0, 0);
}
#section03 .line4.on{
  height: 87px;
}
#section03 .line5{
  width: 1px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top:414px; left: 1302px;
  transition: all .8s .9s;
  background-color: rgb(0, 0, 0);
}
#section03 .line5.on{
  height: 87px;
}
#section03 .ct1{
  position: absolute;
  top:436px; left:448px;
  overflow: hidden;
}
#section03 .ct1>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section03 .ct1.on>img{
  transform: translateY(0);
}
#section03 .ct2{
  position: absolute;
  top:436px; left:698px;
  overflow: hidden;
}
#section03 .ct2>img{
    transform: translateY(200px);
    transition: all .7s .5s;  
}
#section03 .ct2.on>img{
  transform: translateY(0);
}
#section03 .ct3{
  position: absolute;
  top:436px; left:922px;
  overflow: hidden;
}
#section03 .ct3>img{
    transform: translateY(200px);
    transition: all .7s .7s;  
}
#section03 .ct3.on>img{
  transform: translateY(0);
}
#section03 .ct4{
  position: absolute;
  top:436px; left:1156px;
  overflow: hidden;
}
#section03 .ct4>img{
    transform: translateY(200px);
    transition: all .7s .9s;  
}
#section03 .ct4.on>img{
  transform: translateY(0);
}
#section03 .ct5{
  position: absolute;
  top:436px; left:1375px;
  overflow: hidden;
}
#section03 .ct5>img{
    transform: translateY(200px);
    transition: all .7s 1s;  
}
#section03 .ct5.on>img{
  transform: translateY(0);
}

/* section04 */
#section04{
  position: absolute;
  top:3789px; left:0;
  opacity: 1;
}
#section04 .ct2{
  position: absolute;
  top:208px; left:628px;
  opacity: 1;
}
#section04 .ct1{
  position: absolute;
  top:448px; left:625px;
  transform: translateY(-300px);
  transition: all .7s; 
  opacity: 0;
}
#section04 .ct1.on{
  opacity: 1;
  transform: translateY(0);
}
#section04 .vd video{
  position: absolute;
  top:368px; left:1500px;
  width: 345px;
  height: 735px;
  box-sizing: border-box;
  border-radius:8.5%;
  object-fit: cover;
}
#section04 .vd .frame{
  position: absolute;
  top:350px; left:1486px;
  opacity: 1;
}
#section04 .txt1{
  position: absolute;
  top:372px; left:41px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section04 .txt1.on{
  opacity: 1;
  transform: translateX(0);
}
#section04 .txt2{
  position: absolute;
  top:1380px; left:92px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section04 .txt2.on{
  opacity: 1;
  transform: translateX(0);
}
#section04 .txt3{
  position: absolute;
  top:1408px; left:1537px;
  opacity: 1;
}
#section04 .deco1{
  position: absolute;
  top:1228px; left:1691px;
  transform: translate(100px,-100px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section04 .deco1.on{
  opacity: 1;
  transform: translate(0);
}
#section04 .deco2{
  position: absolute;
  top:1487px; left:1482px;
  transform: translate(-100px,100px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section04 .deco2.on{
  opacity: 1;
  transform: translate(0);
}

/* section05 */
#section05{
  position: absolute;
  top:5731px; left:0;
  opacity: 1;
}
#section05 .ct{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section05 .deco{
  position: absolute;
  top:131px; left:892px;
  transition: all .7s; 
  opacity: 0;
}
#section05 .deco.on{
  opacity: 1;
}
#section05 .txt{
  position: absolute;
  top:588px; left:39px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 1;
}
#section05 .txt.on{
  opacity: 1;
  transform: translateX(0);
}

/* section06 */
#section06{
  position: absolute;
  top:6848px; left:0;
  opacity: 1;
}
#section06 .txt1{
  position: absolute;
  top:0; left:825px;
  transition: all .7s .3s; 
  opacity: 0;
}
#section06 .txt1.on{
  opacity: 1;
}
#section06 .txt2{
  position: absolute;
  top:557px; left:1254px;
  transform: translateX(200px);
  transition: all .7s .2s; 
  opacity: 0;
}
#section06 .txt2.on{
  opacity: 1;
  transform: translateX(0);
}
#section06 .ct1{
  position: absolute;
  top:70px; left:0;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section06 .ct1.on{
  opacity: 1;
  transform: translateX(0);
}
#section06 .ct2{
  position: absolute;
  top:541px; left:0;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section06 .ct2.on{
  opacity: 1;
  transform: translateX(0);
}

/* section07 */
#section07{
  position: absolute;
  top:8548px; left:0;
  opacity: 1;
}
#section07 .txt1{
  position: absolute;
  top:0; left:417px;
  opacity: 1;
}
#section07 .txt2{
  position: absolute;
  top:216px; left:409px;
  overflow: hidden;
}
#section07 .txt2>img{
    transform: translateY(200px);
    transition: all .7s;  
}
#section07 .txt2.on>img{
  transform: translateY(0);
}
#section07 .ct1{
  position: absolute;
  top:449px; left:115px;
  transform: translateY(200px);
  transition: all .7s; 
  opacity: 0;
}
#section07 .ct1.on{
  opacity: 1;
  transform: translateY(0);
}
#section07 .ct2{
  position: absolute;
  top:1446px; left:0;
  opacity: 1;
}

/* section08 */
#section08{
  position: absolute;
  top:10649px; left:0;
  opacity: 1;
}
#section08 .txt1{
  position: absolute;
  top:420px; left:124px;
  transition: all .9s; 
  opacity: 0;
}
#section08 .txt1.on{
  opacity: 1;
}
#section08 .deco1{
  position: absolute;
  top:127px; left:241px;
  transform: translate(200px,200px);
  transition: all .7s; 
  opacity: 1;
}
#section08 .deco1.on{
  opacity: 1;
  transform: translate(0);
}
#section08 .deco2{
  position: absolute;
  top:271px; left:1600px;
  transform: translate(-200px,200px);
  transition: all .7s; 
  opacity: 1;
}
#section08 .deco2.on{
  opacity: 1;
  transform: translate(0);
}
#section08 .deco3{
  position: absolute;
  top:832px; left:138px;
  transform: translate(200px,-100px);
  transition: all .7s; 
  opacity: 0;
}
#section08 .deco3.on{
  opacity: 1;
  transform: translate(0);
}
#section08 .deco4{
  position: absolute;
  top:1088px; left:1587px;
  transform: translate(-200px,-200px);
  transition: all .7s; 
  opacity: 0;
}
#section08 .deco4.on{
  opacity: 1;
  transform: translate(0);
}
#section08 .vd video{
  position: absolute;
  top:483px; left:785px;
  width: 345px;
  height: 745px;
  box-sizing: border-box;
  border-radius:7%;
  object-fit: cover;
}
#section08 .vd .frame{
  position: absolute;
  top:467px; left:770px;
  opacity: 1;
}
#section08 .ct1{
  position: absolute;
  top:995px; left:604px;
  opacity: 1;
}
#section08 .ct2{
  position: absolute;
  top: 1553px; left:0;
  opacity: 1;
}
#section08 .txt2{
  position: absolute;
  top:1600px; left:32px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section08 .txt2.on{
  opacity: 1;
  transform: translateX(0);
}

/* section09 */
#section09{
  position: absolute;
  top:12912px; left:0;
  opacity: 1;
}
#section09 .txt{
  position: absolute;
  top: 134px; left:50px;
  transition: all .9s; 
  opacity: 0;
}
#section09 .txt.on{
  opacity: 1;
}
#section09 .vd video{
  position: absolute;
  top:321px; left:842px;
  width: 345px;
  height: 735px;
  box-sizing: border-box;
  border-radius:8.5%;
  object-fit: cover;
}
#section09 .vd .frame{
  position: absolute;
  top:305px; left:829px;
  opacity: 1;
}
#section09 .ct1{
  position: absolute;
  top: 642px; left:75px;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section09 .ct1.on{
  opacity: 1;
  transform: translateX(0);
}
#section09 .ct2{
  position: absolute;
  top: 390px; left:1264px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section09 .ct2.on{
  opacity: 1;
  transform: translateX(0);
}

/* section10 */
#section10{
  position: absolute;
  top:14219px; left:0;
  opacity: 1;
}
#section10 .ct1{
  position: absolute;
  top: 428px; left:404px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section10 .ct1.on{
  opacity: 1;
  transform: translateX(0);
}
#section10 .ct2{
  position: absolute;
  top: 640px; left:0;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section10 .ct2.on{
  opacity: 1;
  transform: translateX(0);
}
#section10 .ct3{
  position: absolute;
  top: 938px; left:351px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section10 .ct3.on{
  opacity: 1;
  transform: translateX(0);
}
#section10 .ct4{
  position: absolute;
  top: 1318px; left:0;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section10 .ct4.on{
  opacity: 1;
  transform: translateX(0);
}

/* section11 */
#section11{
  position: absolute;
  top:15940px; left:0;
  opacity: 1;
}
#section11 .bg{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section11 .txt{
  position: absolute;
  top:129px; left:40px;
  opacity: 1;
}
#section11 .deco{
  position: absolute;
  top:565px; left:681px;
  transition: all .9s; 
  opacity: 0;
}
#section11 .deco.on{
  opacity: 1;
}
#section11 .tittle1{
  position: absolute;
  top:700px; left:388px;
  transform: translateX(200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section11 .tittle1.on{
  opacity: 1;
  transform: translateX(0);
}
#section11 .tittle2{
  position: absolute;
  top:700px; left:958px;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section11 .tittle2.on{
  opacity: 1;
  transform: translateX(0);
}
#section11 .vd video{
  position: absolute;
  top:500px; left:785px;
  width: 345px;
  height: 735px;
  box-sizing: border-box;
  border-radius:8.5%;
  object-fit: cover;
}
#section11 .vd .frame{
  position: absolute;
  top:485px; left:770px;
  opacity: 1;
}

/* section12 */
#section12{
  position: absolute;
  top:17279px; left:0;
  opacity: 1;
}
#section12 .ct1{
  position: absolute;
  top:225px; left:86px;
  transform: translateY(200px);
  transition: all .7s .5s; 
  opacity: 0;
}
#section12 .ct1.on{
  opacity: 1;
  transform: translateY(0);
}
#section12 .ct2{
  position: absolute;
  top:71px; left:419px;
  transform: translateY(200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section12 .ct2.on{
  opacity: 1;
  transform: translateY(0);
}
#section12 .ct3{
  position: absolute;
  top:0; left:797px;
  transform: translateY(200px);
  transition: all .7s; 
  opacity: 0;
}
#section12 .ct3.on{
  opacity: 1;
  transform: translateY(0);
}
#section12 .ct4{
  position: absolute;
  top:71px; left:1163px;
  transform: translateY(200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section12 .ct4.on{
  opacity: 1;
  transform: translateY(0);
}
#section12 .ct5{
  position: absolute;
  top:288px; left:1518px;
  transform: translateY(200px);
  transition: all .7s .5s; 
  opacity: 0;
}
#section12 .ct5.on{
  opacity: 1;
  transform: translateY(0);
}
#section12 .ct6{
  position: absolute;
  top:1193px; left:72px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section12 .ct6.on{
  opacity: 1;
  transform: translateX(0);
}
#section12 .ct7{
  position: absolute;
  top:1506px; left:0;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section12 .ct7.on{
  opacity: 1;
  transform: translateX(0);
}


/* section13 */
#section13{
  position: absolute;
  top:19278px; left:0;
  opacity: 1;
}
#section13 .bg{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section13 .ct1_deco{
  position: absolute;
  top:125px; left:1320px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section13 .ct1_deco.on{
  opacity: 1;
  transform: translateX(0);
}
#section13 .ct1_txt{
  position: absolute;
  top:471px; left:1120px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section13 .ct1_txt.on{
  opacity: 1;
  transform: translateX(0);
}
#section13 .ct1{
  position: absolute;
  top:219px; left:0;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section13 .ct1.on{
  opacity: 1;
  transform: translateX(0);
}
#section13 .ct2_txt1{
  position: absolute;
  top:1269px; left:991px;
  transform: translateY(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section13 .ct2_txt1.on{
  opacity: 1;
  transform: translateY(0);
}
#section13 .line{
  width: 1px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top:1452px; left: 1102px;
  transition: all .8s .3s;
  background-color: rgb(0, 0, 0);
}
#section13 .line.on{
  height: 199px;
}
#section13 .ct2_1{
  position: absolute;
  top:1453px; left:172px;
  transform: translateY(200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section13 .ct2_1.on{
  opacity: 1;
  transform: translateY(0);
}
#section13 .ct2_2{
  position: absolute;
  top:1453px; left:492px;
  transform: translateY(200px);
  transition: all .7s .5s; 
  opacity: 0;
}
#section13 .ct2_2.on{
  opacity: 1;
  transform: translateY(0);
}
#section13 .ct3_txt{
  position: absolute;
  top:2704px; left:317px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section13 .ct3_txt.on{
  opacity: 1;
  transform: translateX(0);
}
#section13 .ct3_1{
  position: absolute;
  top:2105px; left:483px;
  opacity: 1;
}
#section13 .ct3_2{
  position: absolute;
  top:1868px; left:1470px;
  transform: translateY(200px);
  transition: all .7s ; 
  opacity: 0;
}
#section13 .ct3_2.on{
  opacity: 1;
  transform: translateY(0);
}



/* section14 */
#section14{
  position: absolute;
  top:22415px; left:0;
  opacity: 1;
}
#section14 .ct1_deco{
  position: absolute;
  top:94px; left:1315px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section14 .ct1_deco.on{
  opacity: 1;
  transform: translateX(0);
}
#section14 .ct1_txt{
  position: absolute;
  top:174px; left:70px;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section14 .ct1_txt.on{
  opacity: 1;
  transform: translateX(0);
}
#section14 .ct2_1{
  position: absolute;
  top:626px; left:215px;
  transform: translateY(200px);
  transition: all .7s ; 
  opacity: 0;
}
#section14 .ct2_1.on{
  opacity: 1;
  transform: translateY(0);
}
#section14 .ct2_2{
  position: absolute;
  top:626px; left:519px;
  transform: translateY(200px);
  transition: all .7s ; 
  opacity: 0;
}
#section14 .ct2_2.on{
  opacity: 1;
  transform: translateY(0);
}
#section14 .ct3{
  position: absolute;
  top:1134px; left:163px;
  opacity: 1;
}
#section14 .ct3_txt{
  position: absolute;
  top:1139px; left:1258px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section14 .ct3_txt.on{
  opacity: 1;
  transform: translateX(0);
}
#section14 .ct4{
  position: absolute;
  top:1386px; left:1452px;
  transform: translateY(200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section14 .ct4.on{
  opacity: 1;
  transform: translateY(0);
}



/* section15 */
#section15{
  position: absolute;
  top:24480px; left:0;
  opacity: 1;
}
#section15 .bg{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section15 .ct1_1{
  position: absolute;
  top:131px; left:45px;
  opacity: 1;
}
#section15 .ct1_2{
  position: absolute;
  top:129px; left:398px;
  opacity: 1;
}
#section15 .ct1_3{
  position: absolute;
  top:130px; left:1279px;
  opacity: 1;
}
#section15 .line1{
  width: 0px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top:311px; left: 0;
  transition: all .8s .3s;
  background-color: rgb(0, 0, 0);
}
#section15 .line1.on{
  width: 1920px;
}
#section15 .line2{
  width: 1px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top:117px; left: 338px;
  transition: all .8s ;
  background-color: rgb(0, 0, 0);
}
#section15 .line2.on{
  height: 152px;
}
#section15 .line3{
  width: 1px;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top:117px; left: 1235px;
  transition: all .8s;
  background-color: rgb(0, 0, 0);
}
#section15 .line3.on{
  height: 152px;
}

/* section16 */
#section16{
  position: absolute;
  top:26004px; left:0;
  opacity: 1;
}
#section16 .txt1{
  position: absolute;
  top:219px; left:666px;
  overflow: hidden;
}
#section16 .txt1>img{
    transform: translateY(200px);
    transition: all .7s;  
}
#section16 .txt1.on>img{
  transform: translateY(0);
}
#section16 .txt2{
  position: absolute;
  top:298px; left:639px;
  overflow: hidden;
}
#section16 .txt2>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section16 .txt2.on>img{
  transform: translateY(0);
}
#section16 .tittle1{
  position: absolute;
  top:569px; left:335px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section16 .tittle1.on{
  opacity: 1;
  transform: translateX(0);
}
#section16 .tittle2{
  position: absolute;
  top:569px; left:1181px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section16 .tittle2.on{
  opacity: 1;
  transform: translateX(0);
}
#section16 .ct1{
  position: absolute;
  top:391px; left:598px;
  opacity: 1;
}
#section16 .ct2{
  position: absolute;
  top:1063px; left:22px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section16 .ct2.on{
  opacity: 1;
  transform: translateX(0);
}
#section16 .ct3{
  position: absolute;
  top:1247px; left:0;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section16 .ct3.on{
  opacity: 1;
  transform: translateX(0);
}
#section16 .ct4{
  position: absolute;
  top:1436px; left:22px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section16 .ct4.on{
  opacity: 1;
  transform: translateX(0);
}
#section16 .ct5{
  position: absolute;
  top:1620px; left:0;
  transform: translateX(200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section16 .ct5.on{
  opacity: 1;
  transform: translateX(0);
}


/* section17 */
#section17{
  position: absolute;
  top:27894px; left:0;
  opacity: 1;
}
#section17 .deco{
  position: absolute;
  top:442px; left:836px;
  overflow: hidden;
}
#section17 .deco>img{
    transform: translateY(200px);
    transition: all .7s;  
}
#section17 .deco.on>img{
  transform: translateY(0);
}
#section17 .txt{
  position: absolute;
  top:560px; left:614px;
  overflow: hidden;
}
#section17 .txt>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section17 .txt.on>img{
  transform: translateY(0);
}
#section17 .ct1{
  position: absolute;
  top:811px; left:0;
  transform: translateY(200px);
  transition: all .7s .3s ; 
  opacity: 0;
}
#section17 .ct1.on{
  opacity: 1;
  transform: translateY(0);
}
#section17 .ct2{
  position: absolute;
  top:765px; left:175px;
  transform: translateY(200px);
  transition: all .7s; 
  opacity: 0;
}
#section17 .ct2.on{
  opacity: 1;
  transform: translateY(0);
}
#section17 .vd video{
  position: absolute;
  top:730px; left:791px;
  width: 345px;
  height: 735px;
  box-sizing: border-box;
  border-radius:8.5%;
  object-fit: cover;
}
#section17 .vd .frame{
  position: absolute;
  top:717px; left:777px;
  opacity: 1;
}


/* section18 */
#section18{
  position: absolute;
  top:29589px; left:0;
  opacity: 1;
}
#section18 .bg{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section18 .txt1{
  position: absolute;
  top:179px; left:771px;
  overflow: hidden;
}
#section18 .txt1>img{
    transform: translateY(200px);
    transition: all .7s;  
}
#section18 .txt1.on>img{
  transform: translateY(0);
}
#section18 .txt2{
  position: absolute;
  top:258px; left:641px;
  overflow: hidden;
}
#section18 .txt2>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section18 .txt2.on>img{
  transform: translateY(0);
}
#section18 .ct1{
  position: absolute;
  top:1080px; left:956px;
  transform: translateY(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section18 .ct1.on{
  opacity: 1;
  transform: translateY(0);
}
#section18 .txt3{
  position: absolute;
  top:1315px; left:109px;
  transform: translateX(-200px);
  transition: all .7s .4s; 
  opacity: 0;
}
#section18 .txt3.on{
  opacity: 1;
  transform: translateX(0);
}
#section18 .txt4{
  position: absolute;
  top:1135px; left:594px;
  transform: translateY(200px);
  transition: all .7s .2s; 
  opacity: 0;
}
#section18 .txt4.on{
  opacity: 1;
  transform: translateY(0);
}


/* section19 */
#section19{
  position: absolute;
  top:31369px; left:0;
  opacity: 1;
}
#section19 .txt1{
  position: absolute;
  top:0; left:1310px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section19 .txt1.on{
  opacity: 1;
  transform: translateX(0);
}
#section19 .txt2{
  position: absolute;
  top:72px; left:1641px;
  transform: translateY(200px);
  transition: all .7s .2s; 
  opacity: 0;
}
#section19 .txt2.on{
  opacity: 1;
  transform: translateY(0);
}
#section19 .ct1{
  position: absolute;
  top:85px; left:1014px;
  opacity: 1;
}
#section19 .ct2{
  position: absolute;
  top:639px; left:1347px;
  opacity: 1;
}
#section19 .ct3{
  position: absolute;
  top:63px; left:191px;
  opacity: 1;
}
#section19 .txt3{
  position: absolute;
  top:356px; left:545px;
  transition: all .7s; 
  opacity: 0;
}
#section19 .txt3.on{
  opacity: 1;
}
#section19 .txt4{
  position: absolute;
  top:741px; left:191px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 0;
}
#section19 .txt4.on{
  opacity: 1;
  transform: translateX(0);
}


/* section20 */
#section20{
  position: absolute;
  top:32609px; left:0;
  opacity: 1;
}
#section20 .bg{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section20 .deco{
  position: absolute;
  top:94px; left:1313px;
  transform: translateX(200px);
  transition: all .7s; 
  opacity: 0;
}
#section20 .deco.on{
  opacity: 1;
  transform: translateX(0);
}
#section20 .tittle{
  position: absolute;
  top:172px; left:72px;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section20 .tittle.on{
  opacity: 1;
  transform: translateX(0);
}
#section20 .ct1{
  position: absolute;
  top:773px; left:145px;
  transform: translateY(200px);
  transition: all .7s ; 
  opacity: 0;
}
#section20 .ct1.on{
  opacity: 1;
  transform: translateY(0);
}
#section20 .ct2{
  position: absolute;
  top:1407px; left:145px;
  transform: translateY(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section20 .ct2.on{
  opacity: 1;
  transform: translateY(0);
}
#section20 .txt{
  position: absolute;
  top:1452px; left:1241px;
  transform: translateX(-200px);
  transition: all .7s .3s; 
  opacity: 0;
}
#section20 .txt.on{
  opacity: 1;
  transform: translateX(0);
}
#section20 .ct3{
  position: absolute;
  top:1057px; left:146px;
  opacity: 1;
}
#section20 .ct4{
  position: absolute;
  top:402px; left:739px;
  transform: translateY(200px);
  transition: all .7s ; 
  opacity: 0;
}
#section20 .ct4.on{
  opacity: 1;
  transform: translateY(0);
}
#section20 .ct5{
  position: absolute;
  top:1394px; left:1461px;
  transform: translateY(200px);
  transition: all .7s; 
  opacity: 0;
}
#section20 .ct5.on{
  opacity: 1;
  transform: translateY(0);
}

/* section21 */
#section21{
  position: absolute;
  top:34953px; left:0;
  opacity: 1;
}
#section21 .bg{
  position: absolute;
  top:0; left:0;
  opacity: 1;
}
#section21 .ct1{
  position: absolute;
  top:137px; left:67px;
  transform: translateX(100px);
  transition: all .7s; 
  opacity: 1;
}
#section21 .ct1.on{
  opacity: 1;
  transform: translateX(0);
}
#section21 .ct2{
  position: absolute;
  top:137px; left:1349px;
  transform: translateX(-200px);
  transition: all .7s; 
  opacity: 1;
}
#section21 .ct2.on{
  opacity: 1;
  transform: translateX(0);
}
#section21 .ct3{
  position: absolute;
  top:195px; left:1011px;
  overflow: hidden;
}
#section21 .ct3>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section21 .ct3.on>img{
  transform: translateY(0);
}
#section21 .txt1{
  position: absolute;
  top:459px; left:135px;
  overflow: hidden;
}
#section21 .txt1>img{
    transform: translateY(200px);
    transition: all .7s;  
}
#section21 .txt1.on>img{
  transform: translateY(0);
}
#section21 .txt2{
  position: absolute;
  top:543px; left:351px;
  overflow: hidden;
}
#section21 .txt2>img{
    transform: translateY(200px);
    transition: all .7s .3s;  
}
#section21 .txt2.on>img{
  transform: translateY(0);
}


/*  menu  */
#menu{
  background-color: #222222;
  display: flex;
  padding:26px 0;
  z-index: 999;
}
#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:35659px; 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 .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); }
}