.startPoint{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 100px;
    bottom: 100px;
    z-index: 899998989;
    background: #ffffff;
    border-radius: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 2px 2px #0000000c;
}

.startPoint:hover{
    background: #ebebeb;
}


#section01{
   background:url(../img2/1main/1_background.jpg);
   Height:2391px;
}
#section02{
   background:url(../img2/1main/2_background.png);
   Height:2391px;
}
#section03{
   background:url(../img2/1main/3_background.png);
   Height:1900px;
}
#section04{
   background:url(../img2/1main/4_background.png);
   Height:3391px;
}
#section05{
   background:url(../img2/1main/5_background.png);
   Height: 1200px;
}
#section06{
   background:url(../img2/1main/6_background.png);
   Height:2250px;
}
#section07{
   background:url(../img2/1main/7_background.png);
   Height:1700px;
}
#section08{
   background:url(../img2/1main/8_background.png);
   Height:2991px;
}
#section09{
   background:url(../img2/1main/9_background.png);
   Height:2323px;
}
#section10{
   background:url(../img2/1main/10_background.png);
   Height:1712px;
}
#section11{
   background:url(../img2/1main/11_background.png);
   Height:3060px;
}

#section01 .title.main{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 647px;
    top: 323px;

    transform:translateY(80px);
    transition: all 1s;
}

#section01 .title.main.on{
    transform:none;
    Opacity:1;
 
}


#section01 .title.btn_box{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 865px;
    top: 1685px;

    transform:translateY(90px);
    transition: all 1s;
}

#section01 .title.btn_box.on{
    transform:none;
    Opacity:1;
 
}

#section01 .boraya{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 212px;
    top: 1964px;

    transform:translateY(90px);
    transition: all 1s;
}

#section01 .boraya.on{
    transform:none;
    Opacity:1;
 
}

#section01 .title.btn_box2{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 1529px;
    top: 940px;

    transform:translateX(70px);
    transition: all 1s;
}

#section01 .title.btn_box2.on{
    transform:none;
    Opacity:1;
 
}


#section02 .boxes_1{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 224px;
    top: 395px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section02 .boxes_1.on{
    transform:none;
    Opacity:1;
 
}
#section02 .boxes_2{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 600px;
    top: 465px;

    transform:scale(0.5,0.5);
    transition: all 1.5s;
}

#section02 .boxes_2.on{
    transform:none;
    Opacity:1;
 
}
#section02 .boxes_3{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 224px;
    top: 795px;

    transform:scale(0.5,0.5);
    transition: all 2s;
}

#section02 .boxes_3.on{
    transform:none;
    Opacity:1;
 
}
#section02 .boxes_4{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 600px;
    top: 895px;

    transform:scale(0.5,0.5);
    transition: all 2.5s;
}

#section02 .boxes_4.on{
    transform:none;
    Opacity:1;
 
}

#section02 .toggles{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:0;
    top: 1854px;

    transform:translateX(90px);
    transition: all 1s;
}

#section02 .toggles.on{
    transform:none;
    Opacity:1;
 
}


#section03 .graph01{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:456px;
    top: 354px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph01.on{
    transform:none;
    Opacity:1;
 
}


#section03 .graph02{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:659px;
    top: 479px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section03 .graph02.on{
    transform:none;
    Opacity:1;
 
}


#section03 .graph03{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:906px;
    top: 479px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section03 .graph03.on{
    transform:none;
    Opacity:1;
 
}#section03 .graph04{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1173px;
    top: 479px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section03 .graph04.on{
    transform:none;
    Opacity:1;
 
}#section03 .graph05{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1433px;
    top: 479px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section03 .graph05.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph06{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:657px;
    top: 680px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph06.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph07{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:882px;
    top: 680px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph07.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph08{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1170px;
    top: 680px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph08.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph09{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1427px;
    top: 680px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph09.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph10{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:657px;
    top:1222px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph10.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph11{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:888px;
    top: 1222px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph11.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph12{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1157px;
    top: 1236px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph12.on{
    transform:none;
    Opacity:1;
 
}

#section03 .graph13{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1423px;
    top: 1222px;

    transform:translateY(80px);
    transition: all 1s;
}

#section03 .graph13.on{
    transform:none;
    Opacity:1;
 
}


#section04 .text_area{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:445px;
    top: 612px;

    transform:translateY(90px);
    transition: all 1s;
}

#section04 .text_area.on{
    transform:none;
    Opacity:1;
 
}

#section04 .mobile_1{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:380px;
    top: 1213px;
    z-index: 2;

    transform:translateY(90px);
    transition: all 1s;
}

#section04 .mobile_1.on{
    transform:none;
    Opacity:1;
 
}

#section04 .video01{
    width: 450px;
    height: 968px;
    Opacity:0;
    position: absolute;
    left:410px;
    top: 1231px;
    border-radius: 50px;
    z-index: 1;

    transform:translateY(90px);
    transition: all 1s;
}

#section04 .video01.on{
    transform:none;
    Opacity:1;
    overflow: hidden;


}

#section04 .mobile_2{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1064px;
    top: 1816px;

    transform:translateY(90px);
    transition: all 1s;
}

#section04 .mobile_2.on{
    transform:none;
    Opacity:1;
 
}

#section04 .text_bottom{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:207px;
    top: 3104px;

    transform:translateX(-80px);
    transition: all 1s;
}

#section04 .text_bottom.on{
    transform:none;
    Opacity:1;
 
}

#section05 .text_area{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:732px;
    top: 647px;

    transform:translateY(80px);
    transition: all 1s;
}

#section05 .text_area.on{
    transform:none;
    Opacity:1;
 
}


#section06 .colors{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:98px;
    top: 251px;

    transform:translateY(80px);
    transition: all 1s;
}

#section06 .colors.on{
    transform:none;
    Opacity:1;
 
}

#section06 .video02{
    width: 450px;
    height: 968px;
    Opacity:0;
    position: absolute;
    left:739px;
    top: 879px;
    border-radius: 50px;

    transform:translateY(90px);
    transition: all 1s;
}

#section06 .video02.on{
    transform:none;
    Opacity:1;
    overflow: hidden;


}

#section06 .mobile{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:706px;
    top: 859px;

    transform:translateY(80px);
    transition: all 1s;
}

#section06 .mobile.on{
    transform:none;
    Opacity:1;
 
}

#section07 .video03{
    width: 1750px;
    height: 1177px;
    Opacity:0;
    position: absolute;
    left:-500px;
    top: 350px;

    transform:translateY(80px);
    transition: all 1s;
}

#section07 .video03.on{
    transform:none;
    Opacity:1;
    overflow: hidden;


}

#section08 .mobile{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:771px;
    top: 557px;

    transform:translateY(80px);
    transition: all 1s;
}

#section08 .mobile.on{
    transform:none;
    Opacity:1;
 
}

#section08 .design{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left:1257px;
    top: 517px;

    transform:translateY(80px);
    transition: all 1s;
}

#section08 .design.on{
    transform:none;
    Opacity:1;
 
}

#section08 .text_area{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 217px;
    top: 945px;

    transform:translateX(-80px);
    transition: all 1s;
}

#section08 .text_area.on{
    transform:none;
    Opacity:1;
 
}

#section08 .ux{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 210px;
    top: 1621px;
    transform:translateY(80px);
    transition: all 1s;
}

#section08 .ux.on{
    transform:none;
    Opacity:1;
 
}

#section08 .text_bottom{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 1126px;
    top: 2096px;

    transform:translateX(80px);
    transition: all 1s;
}

#section08 .text_bottom.on{
    transform:none;
    Opacity:1;
 
}

#section09 .content01{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 185px;
    top: 387px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content01.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content02{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 929px;
    top: 385px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content02.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content03{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 886px;
    top: 592px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content03.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content04{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 184px;
    top: 979px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content04.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content05{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 866px;
    top: 1904px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content05.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content06{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 515px;
    top: 985px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section09 .content06.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content07{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 737px;
    top: 985px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section09 .content07.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content08{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 959px;
    top: 985px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section09 .content08.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content09{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 1181px;
    top: 985px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section09 .content09.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content10{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 716px;
    top: 854px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section09 .content10.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content11{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 508px;
    top: 1207px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content11.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content12{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 820px;
    top: 1207px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content12.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content13{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 956px;
    top: 1207px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content13.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content14{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 1263px;
    top: 1207px;

    transform:translateY(80px);
    transition: all 1s;
}

#section09 .content14.on{
    transform:none;
    Opacity:1;
 
}
#section09 .content15{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 949px;
    top: 2204px;

    transform:scale(0.5,0.5);
    transition: all 1s;
}

#section09 .content15.on{
    transform:none;
    Opacity:1;
 
}


#section10 .mobile_1{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 1143px;
    top: -305px;

    transform:translateY(80px);
    transition: all 1s;
}

#section10 .mobile_1.on{
    transform:none;
    Opacity:1;
 
}

#section10 .video04{
    width: 387px;
    height: 905px;
    Opacity:0;
    position: absolute;
    left:1173px;
    top: -320px;
    border-radius: 50px;

    transform:translateY(90px);
    transition: all 1s;
}

#section10 .video04.on{
    transform:none;
    Opacity:1;
    overflow: hidden;


}

#section10 .mobile_2{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 334px;
    top: 477px;

    transform:translateY(80px);
    transition: all 1s;
}

#section10 .mobile_2.on{
    transform:none;
    Opacity:1;
 
}

#section10 .video06{
    width: 385px;
    height: 264px;
    Opacity:0;
    position: absolute;
    left:366px;
    top: 646px;

    transform:translateY(90px);
    transition: all 1s;
}

#section10 .video06.on{
    transform:none;
    Opacity:1;
    overflow: hidden;


}

#section10 .video05{
    width: 387px;
    height: 905px;
    Opacity:0;
    position: absolute;
    left:367px;
    top: 465px;
    border-radius: 50px;

    transform:translateY(90px);
    transition: all 1s;
}

#section10 .video05.on{
    transform:none;
    Opacity:1;
    overflow: hidden;


}

#section10 .mobile_3{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 0px;
    top: 0px;

    transform:translateY(80px);
    transition: all 1s;
}

#section10 .mobile_3.on{
    transform:none;
    Opacity:1;
 
}


#section10 .text_area{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 1100px;
    top: 1000px;

    transform:translateX(80px);
    transition: all 1s;
}

#section10 .text_area.on{
    transform:none;
    Opacity:1;
 
}

#section10 .mobile_4{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 232px;
    top: 185px;

    transform:translateX(-80px);
    transition: all 1s;
}

#section10 .mobile_4.on{
    transform:none;
    Opacity:1;
 
}

#section11 .content01{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 250px;
    top: 1499px;

    transform:translateY(80px);
    transition: all 1s;
}

#section11 .content01.on{
    transform:none;
    Opacity:1;
 
}
#section11 .content02{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 780px;
    top: 1499px;

    transform:translateY(80px);
    transition: all 1s;
}

#section11 .content02.on{
    transform:none;
    Opacity:1;
 
}
#section11 .content03{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 1170px;
    top: 193px;

    transform:translateY(80px);
    transition: all 1s;
}

#section11 .content03.on{
    transform:none;
    Opacity:1;
 
}
#section11 .video07{
    width: 468px;
    height: 1087px;
    Opacity:0;
    position: absolute;
    left:1209px;
    top: 182px;
    border-radius: 50px;

    transform:translateY(90px);
    transition: all 1s;
}

#section11 .video07.on{
    transform:none;
    Opacity:1;
    overflow: hidden;


}

#section11 .content05{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 250px;
    top: 967px;

    transform:translateX(-80px);
    transition: all 1s;
}

#section11 .content05.on{
    transform:none;
    Opacity:1;
 
}

 


















/*이 부분은 읽고 지워!
<div id="bora"> 이렇게 되어있는 애 이름은 #bora
<div class="bora"> 이렇게 되어있는 애 이름은 .bora
id 는 #으로 시작해서 이름을 부르고
class 는 .으로 시작해서 이름을 부름
<div class="jiho bora"> 는 클래스로 시작하는 이름이 2개니까 띄어쓰기 없이 .jiho.bora 이렇게 쓰는것임~!*/


/*이걸 복사해서 쓰면 된다능*/
/*#section01 여기다가 만든 이름 넣고{
    width: 200px;
    height: 200px;
    Opacity:0;
    position: absolute;
    left: 여기다가 왼쪽 위치 px로 넣고
    top: 여기다가 위쪽 위치 px로 넣고

    transform:matrix(0.586,0.8,-0.8,0.586,40,10);
    transition: all 1s;
}

#section01 여기다가 만든 이름 넣고 .on{
    transform:none;
    Opacity:1;
 
}*/