@charset "utf-8";
@font-face{
    font-family:"ENGR";    
    src:url(font/ENGR.eot),
    url(font/ENGR.woff) format("woff"),
    url(font/ENGR.ttf) format("truetype");
}
 
*{margin:0; padding:0;}
 
body{width:100%;height:16200px;overflow-x:hidden;background: url(../images/bg.jpg) center center no-repeat;background-size: cover;color: #fff;}
 
ul li{list-style:none;}
 
a{display: block;text-decoration:none;}

.section{width: 100%; height: 1080px;position:relative;}
.section .subtitle{width:800px;font-size:70px;color:white;margin: auto;text-align: center;font-family: "ENGR";opacity: 0;line-height: 95px;} 
.section:nth-last-of-type(4) .subtitle{font-size: 80px;}
.subobj{position: absolute;left: 38%;top: -0%;}

/*----------- navi --------------*/
 
#navi_wrap{width:110px;height:250px;position:fixed;bottom:430px;right:0px;z-index:999;}
.navi{width:110px;height:250px;position: relative;}

.navi li{width:110px;height:23px;background:transparent;font-size: 15px;margin-bottom:30px;cursor:pointer;position:relative;right:-100px;opacity:0;text-align:right;}
.navi li:last-child{margin-bottom:0px;}
.navi li span{padding: 2px 6px;}
.top{width:130px;height: 130px;position: fixed;bottom: 50px;right: 50px;text-align: center;line-height: 100px;z-index: 9999; border-radius: 50px;background: url(../images/q.png);transition: all 0.5s}
.top:hover{background: url(../images/q-1.png);transform: rotate(360deg);}

/*-------------- MAIN ------------*/

.home_text1{width:62px; height:32px;position:absolute;right: 70px;top: 65px;}
.home_text2{width:400px;height:30px;line-height:25px;text-align:center;line-height:25px;position:absolute;left:0;right:0;margin:auto;top:800px;font-family: "ENGR";font-size: 27px;opacity:0}
.home_text2 span{font-size: 12px;font-family:"Noto Sans KR";line-height: 90px;color: #999;}
.home_text3{width:268px;height: 47px;position: absolute; top: 65px;left: 50px;}

.mainimg{width: 1574px;height: 451px;margin: auto;margin-top: -570px; z-index: -5;}
.mainimg ul li{float: left;position: absolute;z-index: -10;opacity:0;}
.mainimg ul li:nth-child(1){left: -980px;}
.mainimg ul li:nth-child(2){left: -835px;} 
.mainimg ul li:nth-child(3){left: -690px;} 
.mainimg ul li:nth-child(4){left: -545px;} 
.mainimg ul li:nth-child(5){left: -400px;}
.mainimg ul li:nth-child(6){left: -345px;}
.mainimg ul li:nth-child(7){left: -290px;}
.mainimg ul li:nth-child(8){left: 35px;}
.mainimg ul li:nth-child(9){left: 180px;}

.mainimg2{width:398px; height: 426px;margin: auto;margin-top: -40px;z-index:-5;opacity: 0;position: relative;}


#main_text{width:1500px; height:400px;position:absolute;left:0;right:0;top:-100px;bottom:0;margin:auto;line-height:190px;}
 
.mf{width: 1364px;height: 363px;margin: auto;background: url(../images/logo0-1.png);transition: all 0.3s;opacity: 0;}
.mf:hover{background: url(../images/logo0.png);}
 
@media screen and (max-width:500px) {
    body{height:15000px;}
    .home_text3 img{width: 170px;position: absolute;left: -30px;}
    #navi_wrap{width: 0;height: 0;overflow: hidden;}
#main_text .mf{width: 450px;height: 120px;background-size: cover;position: absolute;left: 15px;}
.mainimg2 img{width: 200px;height: 214px;position: absolute; left: 95px;top: 5px}
    .mainimg{position: relative;top: 200px;left: -570px;top: -130px;}
.mainimg ul li img{width: 140px;height: 140px;}
.mainimg ul li:nth-child(1) img{margin-right: -880px;}
.mainimg ul li:nth-child(2) img{margin-right: -680px;}
.mainimg ul li:nth-child(3) img{margin-right: -480px;}
.mainimg ul li:nth-child(4) img{margin-right: -280px;}
.mainimg ul li:nth-child(5) img{margin-right: -80px;}
.mainimg ul li:nth-child(6) img{margin-right: 180px;}
.mainimg ul li:nth-child(7) img{margin-right: 380px}
.mainimg ul li:nth-child(8) img{margin-right: 580px;}
.mainimg ul li:nth-child(9) img{margin-right: 780px;}
.home_text2{font-size: 20px;position: absolute;top: 500px;}
    .top{width: 100px;height: 100px;background-size: cover;opacity: 0;}
    .top:hover{width: 100px;height: 100px;background-size: cover;}
}

/*------------- mouse star -------------*/

.spark-star {
  position: fixed;
  pointer-events: none;
  color: white;
  font-size: 14px;
  z-index: 99999;
  transform: translate(-50%, -50%);
}

.spark-star::before {
  content: "✦";
}


/*------------- ABOUT ME -------------*/

#aboutme{width: 100%;height: 1845px;}
#aboutme .m-inner-wrap{position: relative;margin: auto;width: 1920px;}

.text_box{
  font-size: 130px;
  text-align: left;
    font-family: "ENGR";
position: absolute;
    top: 120px; 
    left: 170px;
}

.blink {
  animation: blink 0.7s infinite;
  font-size: 130px;
}

@keyframes blink {
  to {
    opacity: 0;
  }
}

.obj{width: 500px;height: 227px;position: relative;right: -1000px;opacity: 0;}  
.obj ul li{float: left;width: 330px;height: 330px;position: absolute;top: 0px;}  
.obj ul li:nth-child(1){left: -45px;}
.obj ul li:nth-child(2){left: 0px;} 
.obj ul li:nth-child(3){left: 45px;}
.obj ul li:nth-child(4){left: 90px;} 
.obj ul li:nth-child(5){left: 135px;}
.obj ul li:nth-child(6){left: 180px;}
.obj ul li:nth-child(7){left: 225px;}
.obj ul li:nth-child(8){left: 270px;}

.about_tit{font-size: 35px;font-family: "Noto Sans KR";font-weight: 800;letter-spacing: 30px;display: block;position: absolute;top:65px;left: 175px;}
.ab1{position: absolute;top:95px;left: 600px;}
.ab2{position: absolute;top: 375px;left: 170px;}

.obj2{width: 440px;height: 440px;position: absolute;right: -550px;top: 400px; float: left;opacity:"0";}
.ob1{position: absolute;left: 0; top: 20px;z-index: 5;}
.ob1 img{width: 295px;height: 295px;}
.ob2 img{width: 330px;height: 330px;}
.ob2{position: absolute;}
.ob2 img{animation: rotate 10000ms alternate infinite;
    }
    @keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(540deg);}
    }
 
.ob33 span{font-weight: bold}
.obj3{width: 900px;height: 300px;position: absolute;top: 50px;left: 360px;opacity: 0;}
.ob31{font-size: 150px;font-family: "sandoll-jebi2";font-weight: 300;position: absolute;top: -140px;left: 160px;}
.ob32{font-size: 60px;font-family:"sandoll-jebi2";font-weight: 400;font-style: normal;text-align: right;position: absolute;top: -90px;right: 0;} 
.ob33{font-size: 17px;line-height: 50px;text-align: right;margin-top: 20px;font-family: "Noto Sans KR";position: absolute;top: -40px;right: 0;}

.scrolldown{width: 300px;height: 70px;margin: auto;position: relative;top: 1280px;opacity: 0;}
.scrolldown p{font-family:"Noto Sans KR";font-weight: 700;margin: auto;width: 280px;font-size: 17px;text-align: center;line-height: 50px;}
.sc{background: url("../images/q3.png")center center;background-size: cover; width: 25px;height: 14px;position: relative;margin: auto;top: -8px;}

.aboutme_wrap{opacity: 0;position: relative;top: -50px;}
.aboutme_wrap2{width:1200px;height:700px;position: relative;top: -330px;left: -70px;opacity: 0;}
.aboutme_wrap2 .ab3{position: absolute;left: 170px;top:1100px;}
.aboutme_wrap2 .ab3 img{width: 1100px;height: 2px;}
.aboutme_wrap2 .bb{width: 325px;height: 660px;float: left;position: absolute;top: 1200px;left: 170px;}
.aboutme_wrap2 .bb1{position: absolute;top: -17px;}
.aboutme_wrap2 .bb p{font-family: "ENGR";font-size: 40px;text-align: center;position: absolute;left: 30px;top: 340px;}
.aboutme_wrap2 .bb span{font-family: "Noto Sans KR";font-weight: 300;width: 300px;height: 250px; position: absolute;text-align: center;font-size: 18px;top: 60px;left: -35px;line-height: 40px;}
.pe .bb1 img{width: 325px; height: 322px;}
.pe .bb2 img{width: 288px;height: 289px;}
.aboutme_wrap2{top: -350px;}
.aboutme_wrap2 .pe{opacity: 0;top: 1400px;}
.aboutme_wrap2 .le{left: 550px;opacity: 0;top: 1500px;}
.aboutme_wrap2 .le .bb1{top:-50px;left: -30px;}
.aboutme_wrap2 .ee{left: 930px;opacity: 0;top: 1500px;} 
.aboutme_wrap2 .ee .bb1{top: -60px;left: -20px;}
.aboutme_wrap2 .ee p:nth-of-type(1){left: -5px;}
.aboutme_wrap2 .ee p:nth-of-type(2){left: 35px;}
.aboutme_wrap3{width:500px;height:700px;position: relative;margin-top: 100px;opacity:1;top: 90px;left: 1250px;opacity:0;}
.aboutme_wrap3>div>h3{position:absolute;height:33px;color:white;font-family: "ENGR";font-size: 55px;top: 20px;left: 15px;}
.aboutme_wrap3 .simg{position: absolute;top: -75px;left:170px;}
.aboutme_skill{width: 5000px;height:700px;position:relative;} 
#skillbox{width: 500px;height:480px;float:left;margin:0;padding:20px;position:absolute;top:60px;}
#skillbox li{width: 100%;height:90px;overflow: hidden;position:relative;}
#skillbox h4{font-size: 17px;float: left;margin-top: 35px;font-family: "ENGR";}
#skillbox h5{font-size: 15px; float: right;margin-top:35px;}
.skillbox1{width: 100%;height: 17px;background-color:inherit;border: 1px solid white; position: absolute;left: 0;bottom:0;}
.skillbox2{width:0; height:16px;background-color:white; position: absolute;left: 0;bottom: 0;}  


@media screen and (max-width:500px) {
    #aboutme{position: relative;top: 60px;}
    .about_tit{font-size: 15px;text-align: center;position: absolute;top: -120px;left: 90px;}
    .ab1{position: absolute;top: -160px;left: 76px;}
    .ab2{position: absolute;top: 30px;left: 76px;}
    .ab2 img{width:320px;}
    .ab1 img{width: 320px;}
    .text_box{width: 500px;}
    .text{font-size: 50px;line-height: 45px;text-align: center;position: absolute;top: -200px;left: -95px;}
    .blink{opacity: 0;}
    .ob1{position: absolute;left: -1300px;top: -585px;z-index: -99;filter: blur(2px)}
    .ob2{position: absolute;left: -1300px;top: -590px;z-index: -100;filter: blur(1px)}
    .ob1 img{height: 195px;width: 195px;}
    .ob2 img{height: 210px;width: 210px;}
    .ob31{position: absolute;left: -145px;top: -520px}
    .ob32{position: absolute;right: 830px;top: -420px; font-size: 50px;width: 370px;text-align: center;line-height: 60px;}
    .ob33{position: absolute;right: 830px;top: -290px;width: 400px;font-size: 11.4px;text-align: center;line-height: 37px;} 
    
    .aboutme_wrap2 .ab3{position: absolute;left: 110px;top: 680px;}
    .aboutme_wrap2 .ab3 img{width: 400px;height: 2px;}
    .pe .bb1 img{width: 180px;height: 178px;}
    .pe .bb2 img{width: 160px;height: 160px;}
    .le .bb1 img{width: 180px;height: 163px;}
    .le .bb2 img{width: 160px;height: 160px;}
    .ee .bb1 img{width: 180px;height: 187px;}
    .ee .bb2 img{width: 160px;height: 160px;}
    .pe .bb1{position: absolute;left: -50px;top: -450px} 
    .pe .bb2{position: absolute;left: -50px;top: -440px}
    .le .bb2{position: absolute;left: -430px;top: -180px;}
    .aboutme_wrap2 .le .bb1{position: absolute;left: -434px;top: -190px}
    .ee .bb2{position: absolute;left: -810px;z-index: -5;top: 80px;}
     .aboutme_wrap2 .ee .bb1{position: absolute;left: -810px;top: 65px;}
    .pe p:nth-of-type(1){position: absolute;top: -460px;font-size: 30px;left: 145px;}
    .pe p:nth-of-type(2){position: absolute;top: -480px;left: 180px;}
    .pe p:nth-of-type(2) span{font-size: 12px;text-align: left;}
    .le p:nth-of-type(1){position: absolute;left:-235px;top: -200px; font-size: 30px;}
    .le p:nth-of-type(2){position: absolute;left:-200px;top: -220px;}
    .le p:nth-of-type(2) span{font-size: 12px;text-align: left;}
    .aboutme_wrap2 .ee p:nth-of-type(1){position: absolute;left:-620px;top: 60px; font-size: 25px;}
    .aboutme_wrap2 .ee p:nth-of-type(2){position: absolute;left:-585px;top: 42px;}
    .aboutme_wrap2 .ee p:nth-of-type(2) span{font-size: 12px;text-align: left;}
}


/* -------------- PROJECT --------------*/

#project{opacity: 0;position: relative;top: 57px;}
 
@media screen and (max-width:500px) {
    #project{position: relative;margin-top: -360px;top: 257px;}
    #project .subtitle{font-size: 50px;position: relative;left: -150px;line-height: 235px;}
    #project .subobj{position: absolute;left: 95px;top: 87px;}
    #project .subobj img{width: 310px;}
    #project .film{width: 495px;height: 334px;background: url(../images/film.png)center center;background-size: cover;position: absolute;top: 214px;}
    #project .deco{background: url(../images/deco.png);width: 500px;height: 1100px;position: absolute;top: -240px;opacity: 0.55}
}
  
/*-------------- DESIGN ---------------------*/

#design{opacity: 0;}
.designobj{width: 1920px;height: 790px;position: relative;top: 10px;top: -350px;z-index: -99;margin: auto;}
.designobj div:nth-child(1){position: absolute;left: 250px;}
.designobj div:nth-child(2){position: absolute;bottom: 0; right: 250px;}
.designobj div:nth-child(3){position: absolute;top: -30px;filter: blur(2px)}
.designobj div:nth-child(4){position: absolute;bottom: 0; left: 250px;}
.designobj div:nth-child(5){position: absolute;top: 0; right: 250px;}

@media screen and (max-width:500px) {
    #design{position: relative;top: -150px;height: 700px;}
    .designobj div:nth-child(1) img{width: 250px;top: 400px;left: -225px; position: absolute;}
    .designobj div:nth-child(2) img{width: 250px;bottom: -80px;right: 1210px; position: absolute;}
    .designobj div:nth-child(3) img{width: 800px;position: absolute;top: 450px;left: -60px;}
    .designobj div:nth-child(4) img{width: 40px;position: absolute;top: 45px;left: -230px;}
    .designobj div:nth-child(5) img{width: 40px;position: absolute;bottom: -435px;right: 1210px;}
}
/*--------------- PUBLISH ---------------*/


#publish{width: 100%; height:10000px;opacity: 0;}
#publish .m-inner-wrap{width:1425px;height:9600px;margin:auto;position:absolute;left:0; right:0;top:0;bottom:0;overflow:hidden;}
.pub{width:100%;height:800px;position:relative;margin-bottom:170px;}

.pub:nth-child(2n){top: 1%; opacity:0;}
.pub:nth-child(2n-1){top: 1%;opacity:0;}

.pub>div{float:left;width:625px;height:800px;position:relative;} 

.pub_wrap1 .pub_text{text-align:center; width:550px;height:590px;position:absolute;left:-200px;}
.pub_wrap1 .pub_text h2{font-family: "ENGR";font-size: 60px;display: block;}
.pub_wrap1:nth-child(2n) .pub_text h2{text-align: left;}   
.pub_wrap1:nth-child(2n-1) .pub_text h2{text-align: right;}
.pub_wrap1 .pub_text p{line-height: 60px;font-size: 13.5px;margin-top: 45px}
.pub_wrap1 .pub_text p span{font-weight: 900;font-size: 19px}
.pub_wrap1:nth-child(2n) .pub_text p{text-align: left;}
.pub_wrap1:nth-child(2n-1) .pub_text p{text-align: right;}
.pub_wrap1 .pub_text:nth-child(2n-1){margin-left: 45px;}
.pub_wrap2:nth-child(2n){margin-left:-200px;} /*비디오를 왼쪽으로 당길수있는 부분*/
.pub_wrap1 .pub_connect{position:absolute;left:26%;top:64%;transform:translate(-50%);width: 231px;height:64px;line-height:60px;text-align:center;border: 1px solid white; transition:all 0.3s;overflow:hidden;color: white;}
.pub_wrap1:nth-child(2n-1) .pub_connect{left:45%} /*여기 버튼 움직이는 자리*/
#publish .m-inner-wrap{ overflow: visible; }
.pub_wrap1 .pub_connect a{color:white;transition:all 0.3s; font-weight: 550;}

.pub_connect:hover{background: white;}
.pub_connect:hover a{color: mediumpurple;}



.pub_wrap1{position: relative; z-index: 5;}
.pub_wrap2{position: relative; z-index: 1;}

.pub_wrap1 .pub_connect{
  position: absolute;
  z-index: 9999;
}


@media screen and (max-width:500px) {
#publish{position: relative;top: -570px;height: 10000px;top: 170px;}
#publish .subtitle{display: block; font-size: 50px;position: relative;left:-160px;line-height: 206px;}
#publish .subobj{position: absolute;left: 85px;top: 70px;}
#publish .subobj img{width: 310px;}
.pub_wrap1{position: absolute;top: 100px;}
.pub_wrap1 .pub_text{text-align:center;width:710px;height:590px; position:absolute; left:-150px; right:0; top:120px; bottom:0; margin:auto;}
.pub_wrap1:nth-child(2n) .pub_text h2{text-align: center;}   
.pub_wrap1:nth-child(2n-1) .pub_text h2{text-align: center;}
.pub_wrap1:nth-child(2n) .pub_text p{text-align: center;left: 113px;}
.pub_wrap1:nth-child(2n-1) .pub_text p{text-align: center;position: absolute;left: 113px;}
.pub_wrap1 .pub_text h2{font-size: 45px;}
.pub_wrap1 .pub_text p{width: 490px; line-height: 35px;font-size: 11.4px;position: absolute;top: 60px;}
.pub_wrap1 .pub_text p span{font-size: 15px;}
.pub1{position: relative;width: 200px;height: 400px; top: -200px;}
 #publish .pub_wrap2:nth-of-type(2n){position: absolute;left: -100px;width: 400px;height: 226px;left: -135px;} 
 #publish .pub_wrap2:nth-of-type(2n-1){position: absolute;left: -100px;width: 400px;height: 226px;left: 40px;}
 #publish .pub2 .pub_wrap2{width: 400px;height: 226px;position: absolute;top: 100px;}
.pub_wrap2 img:nth-of-type(1){width: 350px;position: absolute;opacity: 0;}
.pub_wrap2 img:nth-of-type(2){opacity: 1;width: 400px;height: 226px; position: absolute;}
#publish .pub_connect{position: relative;left: 38%;top: 60%;width: 160px;height: 50px;font-size: 13px;line-height: 50px;}
.pub2{position: relative;margin-top: 400px;margin-bottom: 230px;}
.pub2 .pub_text{position: absolute;top: 320px;}
#publish .pub2 .pub_connect{position: relative;left: 38%;top: 73%;width: 160px;height: 50px;font-size: 13px;line-height: 50px;}
}

/*-----------CONTACT----------------*/

#contact h3{text-align: center;font-family: "ENGR";font-size: 29.85px;font-style: italic;margin-top: 50px;position: relative;top: 80px;}
#contact .m-inner-wrap{margin-top:50px}
.cs-style-1 figcaption{
position: absolute; 
top: 0; 
left: 0;  
padding: 0px; 
background:rgba(000,000,000,0.8); 
color: #fff; 
height: 100%; 
width: 100%;
opacity: 0; 
text-align: center; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s; 
}
.cs-style-1 figcaption span{display:block;}
.cs-style-1 figcaption h3{margin:0; padding:0;color:#fff;margin-top: 70px;}
.cs-style-1 figcaption a{text-align: center;padding: 5px 10px;border-radius:2px;display:inline-block;background:red;color:#fff;text-decoration:none;
transition:all .2s;margin-top 30px;}

.cs-style-1 figcaption a:hover{background:#fff; color:red;}

.cs-style-1 figure:hover figcaption, .cs-style-1 figure.cs-hover figcaption{opacity: 1;}

@media screen and (max-width:500px) {
    #contact{position: relative;top: -20px;height: 0px;}
#contact .subtitle{font-size: 50px;position: relative;left: -150px;line-height: 0px;}
#contact .subobj{position: absolute;left: 95px;top: -27px;}
#contact .subobj img{width: 310px;}
#contact h3{font-size: 20px;width: 300px;position: absolute;left: 90px;top: 20px;}
}