@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0; font-family: 'Noto Sans KR', sans-serif;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}html,body{width:100%;height:100%;display:block}
*{box-sizing:border-box;padding:0;margin:0}
#landing-cover,.layer{position:absolute;top:0;left:0;width:100%;height:100%}
.sect{position:relative; width: 50%;  height:100%;min-height:400px;overflow:hidden;text-align:center; float: left; background:url("../img/intro/dyd_bg.png"); background-position: top left; background-size: cover;}
#landing-cover{z-index:1;overflow:hidden;opacity:1;-webkit-transition:opacity .8s;transition:opacity .8s}
.work-hero #landing-cover{opacity:1}
.layer{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;left:0px; top:0px; margin-top: -50px;}
.layer2{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;left:0px; top:0px; position:absolute;top:0;left:0;width:105%;height:105%; }





.dyd_3 {background:url("../img/intro/dyd_3.png");z-index:1; background-size: 46%;  background-position:81% 95%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_2 {background:url("../img/intro/dyd_2.png");z-index:3; background-size: 57%;  background-position:124% 0%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_1 {background:url("../img/intro/dyd_1.png");z-index:2; background-size: 55%;  background-position:13% 45%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.overlay .link_1{ color:#000; width:100%;height:100%;margin:auto;position:absolute; top:0; right: 0; left:0; bottom:0;z-index:999}
/*# sourceMappingURL=style.css.map */
.overlay .link_1 .link_pos {position:absolute; width: 300px; height: 200px;left:9%; bottom:7%; text-align: left; color: #000;}
.overlay .link_1 .link_pos .sub_text { font-size: 23px; font-weight: bold;}
.overlay .link_1 .link_pos .title {font-size: 130px; font-weight: 900; margin: -14px 0 0 -11px;}
.overlay .link_1 .link_pos .btn {font-size: 16px; font-weight: bold; padding:16px 58px 16px 23px; border: 1px solid #000; background: rgba(0,0,0,0.00); margin-top: 15px;  color: #000; background:url("../img/intro/btn_arr.png");  background-position:-100px 23px; background-repeat: no-repeat; letter-spacing: -1.5px;     -ms-transition:all .3s ease-in-out; o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; box-sizing: border-box; cursor: pointer;}

.overlay .link_1 .link_pos .btn:hover {background-position:20px 23px; padding:16px 23px 16px 58px; box-sizing: border-box; }





.robotis_bg {background:url("../img/intro/robotis_Bg.png");z-index:2; background-size: cover; background-position:0% 65%; ;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.overlay2 .link_1{ color:#000; width:100%;height:100%;margin:auto;position:absolute; top:0; right: 0; left:0; bottom:0;z-index:999}
/*# sourceMappingURL=style.css.map */
.overlay2 .link_1 .link_pos {position:absolute; width: 400px; height: 200px;left:9%; bottom:7%; text-align: left; color: #fff;}
.overlay2 .link_1 .link_pos .sub_text { font-size: 45px; font-weight: bold; letter-spacing: -2px; text-shadow: 0px 0px 5px rgba(0,0,0,.5);}
.overlay2 .link_1 .link_pos .title {font-size: 65px; font-weight: bold; margin: 10px 0 10px 0; letter-spacing: -2px; text-shadow: 0px 0px 5px rgba(0,0,0,.5);}
.overlay2 .link_1 .link_pos .btn2 {font-size: 16px; font-weight: bold; padding:16px 58px 16px 23px; border: 1px solid #fff; background: rgba(0,0,0,0.00); margin-top: 15px;  color: #fff; background:url("../img/intro/btn_arr2.png");  background-position:-115px 23px; background-repeat: no-repeat; letter-spacing: -1.5px;     -ms-transition:all .3s ease-in-out; o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; box-sizing: border-box; cursor: pointer; text-shadow: 0px 0px 5px rgba(0,0,0,.5);}

.overlay2 .link_1 .link_pos .btn2:hover {background-position:20px 23px; padding:16px 23px 16px 58px; box-sizing: border-box; }






canvas { width: 100vw; height: 100vh; display: block; }










@media  screen and (max-width:1400px){
    
.dyd_3 {background:url("../img/intro/dyd_3.png");z-index:1; background-size: 60%;  background-position:115% 82%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_2 {background:url("../img/intro/dyd_2.png");z-index:3; background-size: 75%;  background-position:215% -20%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_1 {background:url("../img/intro/dyd_1.png");z-index:2; background-size: 65%;  background-position:15% 40%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}
    
    
    
.robotis_bg {background:url("../img/intro/robotis_Bg.png");z-index:2; background-size: cover; background-position:center 65%; ;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}
    
    
}



@media  screen and (max-width:1000px){
    
    
.dyd_3 {background:url("../img/intro/dyd_3.png");z-index:1; background-size: 45%;  background-position:100% 82%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_2 {background:url("../img/intro/dyd_2.png");z-index:3; background-size: 55%;  background-position:120% -20%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_1 {background:url("../img/intro/dyd_1.png");z-index:2; background-size: 50%;  background-position:10% 20%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}
    
    
    
.overlay .link_1 .link_pos {position:absolute; width: 300px; height: 200px;left:9%; bottom:2%; text-align: left; color: #000;}
.overlay .link_1 .link_pos .sub_text { font-size: 18px; font-weight: bold;}
.overlay .link_1 .link_pos .title {font-size: 90px; font-weight: 900; margin: -4px 0 0 -9px;}

    
    
    
.overlay2 .link_1 .link_pos {position:absolute; width: 400px; height: 200px;left:9%; bottom:2%; text-align: left; color: #fff;}
.overlay2 .link_1 .link_pos .sub_text { font-size: 30px; font-weight: bold; letter-spacing: -2px; text-shadow: 0px 0px 5px rgba(0,0,0,.5);}
.overlay2 .link_1 .link_pos .title {font-size: 50px; font-weight: bold; margin: 10px 0 10px 0; letter-spacing: -2px; text-shadow: 0px 0px 5px rgba(0,0,0,.5);}

    
    
    .overlay .link_1 .link_pos .btn {font-size: 16px; font-weight: bold; padding:16px 58px 16px 23px; border: 1px solid #000; background: rgba(0,0,0,0.00); margin-top: 15px;  color: #000; background:url("../img/intro/btn_arr.png");  background-position:-120px 23px; background-repeat: no-repeat; letter-spacing: -1.5px;     -ms-transition:all .3s ease-in-out; o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; box-sizing: border-box; cursor: pointer;}
    
    
    .overlay2 .link_1 .link_pos .btn2 {font-size: 16px; font-weight: bold; padding:16px 58px 16px 23px; border: 1px solid #fff; background: rgba(0,0,0,0.00); margin-top: 15px;  color: #fff; background:url("../img/intro/btn_arr2.png");  background-position:-135px 23px; background-repeat: no-repeat; letter-spacing: -1.5px;     -ms-transition:all .3s ease-in-out; o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; box-sizing: border-box; cursor: pointer;}
    
}

@media  screen and (max-width:761px){
    
.sect {position:relative; width: 100%;  height:50%;min-height:inherit;overflow:hidden;text-align:center; float: inherit; background:url("../img/intro/dyd_bg.png"); background-position: top left; background-size: cover;}

.dyd_3 {background:url("../img/intro/dyd_3.png");z-index:1; background-size: 33%;  background-position:80% 90%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_2 {background:url("../img/intro/dyd_2.png");z-index:3; background-size: 45%;  background-position:90% -1%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}

.dyd_1 {background:url("../img/intro/dyd_1.png");z-index:2; background-size: 40%;  background-position:15% 26%;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}
    
    
    
.robotis_bg {background:url("../img/intro/robotis_Bg.png");z-index:2; background-size: cover; background-position:center 65%; ;background-repeat:no-repeat;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);transition:all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1)}
    
    
    
.overlay .link_1 .link_pos {position:absolute; width: 300px; height: 200px;left:9%; bottom:2%; text-align: left; color: #000;}
.overlay .link_1 .link_pos .sub_text { font-size: 18px; font-weight: bold;}
.overlay .link_1 .link_pos .title {font-size: 90px; font-weight: 900; margin: -4px 0 0 -9px;}
    
    
.overlay2 .link_1 .link_pos {position:absolute; width: 400px; height: 200px;left:9%; bottom:2%; text-align: left; color: #fff;}
.overlay2 .link_1 .link_pos .sub_text { font-size: 30px; font-weight: bold; letter-spacing: -2px; text-shadow: 0px 0px 5px rgba(0,0,0,.5);}
.overlay2 .link_1 .link_pos .title {font-size: 50px; font-weight: bold; margin: 10px 0 10px 0; letter-spacing: -2px; text-shadow: 0px 0px 5px rgba(0,0,0,.5);}
    
    
    
}