@charset "utf-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*==========================================================================
Base
==========================================================================*/
/* word-break: break-all; word-wrap: break-word; */
html, body,div,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,textarea,p,blockquote,p,iframe,span,strong,em { margin:0; padding:0; font-size:inherit; word-break:keep-all; word-break:break-word; -webkit-text-size-adjust:none; }
body{font-family:'Roboto','Noto Sans Korean', 'Noto Sans KR', sans-serif,'돋움', Dotum, AppleGothic, sans-serif, "Yu Gothic","MS PGothic"; font-size:14px;color:#333;line-height:25px;font-weight:400; padding:0px;margin:0px; letter-spacing: -0.5px; }
html, body {width:100%;height:100%;}
header, hgroup, footer, section, article, aside, nav, canvas, figure, figcaption { display:block; }
table { font-size:inherit; border-collapse:collapse; border-spacing:0; table-layout:fixed; }
th, td { word-wrap:break-word; word-break:break-all; }
fieldset, iframe { border:0; vertical-align:top; }
small { font-size:12px; color:#666; }
img { border:0; font-size:0; vertical-align:top; }
address,cite,code,dfn,em,var { font-style:normal; font-weight:normal; }
li, dd { list-style:none; word-break:keep-all; word-break:break-word; }
hr { display:none; }
caption { overflow:hidden;width:100%;height:1px;font-size:1px;line-height:0;text-indent:-9999px; margin-top:-1px; }
legend {  overflow:hidden; left:-9999px; text-indent:9999px; width:0; height:0; overflow:hidden; line-height:0; white-space:nowrap; color:#000; }
button { padding:0; border:0; cursor:pointer; background:none; vertical-align:middle; font-size:12px; appearance: none; moz-appearance: none; border:0; *overflow:visible; outline:none; font-family:'Roboto'/*,"Sawarabi Gothic"*/,'Noto Sans JP','Noto Sans Korean', 'Noto Sans KR', sans-serif,'돋움', Dotum, AppleGothic, sans-serif, "Yu Gothic","MS PGothic"; }
h1, h2, h3, h4, h5, h6 { padding:0px;margin:0px;font-size:16px; }
a, a code { color:#5c5c5c; text-decoration:none;  /*마우스오버시 자연스럽게*/transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease; }
a:active, a:active code { color:#000; text-decoration:none;  /*마우스오버시 자연스럽게*/transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease; }
a:hover, a:hover code, a:focus, a:focus code { text-decoration:none; color:#f9694f; /*마우스오버시 자연스럽게*/transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease;  }
sup,sub { font-size:0.8em; }
checkbox { vertical-align:middle}
a {outline:none; select-dummy: expression(this.hideFocus=true); cursor:pointer}
.hand {cursor:pointer}
input, select { border:#f4f4f4; box-shadow: 0 1px 1px #ccd6e2; padding: 15px 0 ; text-indent: 15px;  width:100%; height: 19px;  font-family:"Noto Sans JP",'Roboto','Noto Sans Korean', 'Noto Sans KR', sans-serif,'돋움', Dotum, AppleGothic, sans-serif;}
table { width:100%}

*::before, *::after { box-sizing:border-box;}

select::-ms-expand{display:none} /*IE10,11 셀렉트 버튼 없애기*/

/* ==========================basic end ==========================*/

@media all and (max-width:1200px) {
	
}
@media all and (max-width:650px) {
	body{font-size:15px}
}
@media all and (max-width:450px) {
	body{font-size:14px}
}


/*20주년로고*/
.nubicom_20th { position: absolute; right: 10px; top: 10px; width: 150px;}
.nubicom_20th img { width: 100%; }

/*인트로*/
.intro_header h2 { width:300px; margin:0 auto;  position: relative; padding: 30px 0 0 0}
.intro_header h2 img { width:100%;}
.visual_video {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: auto;
    background-size: cover;
}
#intro_txt { text-align: center; color: #fff; font-size: 25px; line-height: 35px; position:relative; width:100%; margin-top: 100px;text-shadow: 1px 1px 3px #000;}
#intro_txt dl { margin-top: 50px;  margin-bottom:80px}
#intro_txt dl dt { font-size:93px; line-height: 98px;  margin-bottom: 20px; letter-spacing: -4px;}
#intro_txt dl dd { font-size: 35px; line-height:45px;} 
#intro_txt > ul > li { display: inline-table; width: 365px; }
#intro_txt > ul > li > a { display: block; padding: 15px 0; color:#c3c3c3;  background: url(/intro/img/arrow_img.png) no-repeat 95% center rgba(0,0,0,0.6); font-size: 25px; border: 2px solid #c3c3c3;}
#intro_txt > ul > li > a:hover {  text-decoration: underline}
#intro_txt > ul > li p { font-size:13px;}

.home_bt > li > div { width: 52%; margin: 10px auto 0; text-align: left; }
.home_bt > li > div > ul > li { font-size:19px; line-height: 40px;  background: url(/intro/img/dot.png) no-repeat left center; text-indent: 15px;}
.home_bt > li > div > ul > li a { color: #fff}
.home_bt > li > div > ul > li a:hover { text-decoration: underline}

/* maker logo */
 .maker_logo_area {margin-top:10px;}
 .home_bt .maker_bt ul {width:100%;}
 .home_bt .maker_bt li {float:left; width:49%; padding:0; margin:0 0 0 2px;}
/*.maker_bt  li:last-child {width:45%; float:right;} */
/*.maker_bt  li:nth-child(even) { float:right}*/

.clear {clear: both;}

.intro_footer { position: fixed; bottom: 0; font-size: 13px; text-align: center; background:rgba(0,0,0,0.8); width: 100%; padding: 2px 0; color: #e6e6e6; }
.intro_footer a {  color: #21b3b3; margin-left: 10px; text-decoration: underline }


@media screen and (max-width:1440px) { 
}
@media screen and (max-width:1366px) { 
}

@media screen and (max-width:1280px) { 
}

/*모바일 버튼 나옴 1075*/
@media screen and (max-width:1075px) { 
	
	/*20주년로고*/
	.nubicom_20th { width: 100px}

	/*인트로*/
	.intro_header h2 { width:250px;}
	#intro_txt { letter-spacing: -0.5px; margin-top: 77px; margin-bottom: 77px;}
	#intro_txt dl dt { font-size:72px; line-height: 85px; margin-bottom: 10px;}
	#intro_txt dl dd { font-size:33px;}
	#intro_txt > ul > li {width:250px;}
	#intro_txt > ul > li a { font-size:21px; padding: 11px 0}
	                                                                     
}

@media screen and (max-width:1024px) { 

	
	/*인트로*/
	#intro_txt  { font-size:20px; }
	#intro_txt dl { margin: 27px 0 58px 0;}
	#intro_txt dl dt { font-size:60px; line-height: 80px; margin-bottom: 0}
	#intro_txt dl dd { font-size:29px;}
	#intro_txt > ul > li { width:295px;}
	
	#intro_txt > ul > li a { font-size:17px; padding:5px 0}
	.home_bt > li > div > ul > li {font-size:14px; line-height:27px;}
	.home_bt > li > div { width: 55%}
	
	.home_bt .maker_bt li img{width:90%;}
	
}

@media screen and (max-width:976px) { 	
}

@media screen and (max-width:767px) {  
	
	/*20주년로고*/
	.nubicom_20th { width: 90px}
	
	/*인트로*/
	.visual_video { left:0;transform: translate(-55%, 0);}
	.intro_header h2 { width:213px;}
	#intro_txt { width:95%; margin: 0 auto; top:40px; position: relative;}
	#intro_txt dl dt { font-size:2.5em; line-height: 63px; }
	#intro_txt dl dd { font-size:1em; line-height: 30px}
	#intro_txt > ul > li { width:80%; margin-bottom: 5px}
	
	.home_bt > li > div > ul > li { font-size: 16px; line-height: 29px; }

}

@media screen and (max-width:640px) {  	
}
	
@media screen and (max-width:560px){		
}
@media screen and (max-width:480px){  
	/*인트로*/
	#intro_txt {top:30px;}
	#intro_txt dl { margin: 19px 0 40px 0}
	#intro_txt dl dt { font-size:2em; line-height: 59px;}

}

@media screen and (max-width:360px) {  

	#intro_txt dl dt { font-size:1.8em; }

}