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

html,body{ 
	width:100%;
	height:100%;
	/*background-color: #2B2C33;*/
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-top: 0px;

	background: #26272E;  /* fallback for old browsers */
	/* background: -webkit-linear-gradient(to top, #4286f4, #373B44, #2B2C33, #272726);  /* Chrome 10-25, Safari 5.1-6 */	
	/* background: linear-gradient(to top, #4286f4, #373B44, #2B2C33, #272726); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	height: 100%; 
}


#particles-js{
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-repeat:repeat;

}

img { 
	border:0; 
	}

#WebGLCanvas { 
	width:100%; 
	height:100%; 
	position:absolute; 
	top:0; 
	bottom:0; 
	}
	
.overbox { 
	position:fixed; 
	width:100%; 
	height:100%; 
	overflow:auto;
	top:0; 
	bottom:0; 
	left:0; 
	right:0;
	background-image:url(../images/bg_space.gif); 
	background-repeat:repeat-x; 
	background-repeat:repeat-y; 
	}
	

#logo { position:absolute; left:45px; top:45px; width:66px; height:91px; cursor:pointer; }
#logo > div { position:absolute; width:66px; height:91px; background-repeat:no-repeat; }
.logo { background-image:url('../images/main_logo.png'); }
.logo_on { opacity:0; background-image:url('../images/main_logo_on.png'); }

#mm_ul { list-style:none; position:absolute; right:45px; top:45px; padding:0; margin:0; transition:all 0.30s ease-out; -webkit-transition:all 0.30s ease-out; -moz-transition:all 0.30s ease-out; }
#mm_ul > li { float:left; width:150px; height:40px; margin-left:6px; background-repeat:no-repeat; cursor:pointer; transition:all 0.30s ease-out; -webkit-transition:all 0.30s ease-out; -moz-transition:all 0.30s ease-out; }
#mm_ul > li > div { position:absolute; width:150px; height:40px; background-repeat:no-repeat; }
#mm_ul > li:first-child { margin-left:0; }
.mm_div_00 { background-image:url('../images/btn_portfolio.png'); }
.mm_div_01 { background-image:url('../images/btn_dplay.png'); }
.mm_div_02 { background-image:url('../images/btn_client.png'); }
.mm_div_03 { background-image:url('../images/btn_contact.png'); }
.mm_div_00_on { opacity:0; background-image:url('../images/btn_portfolio_on.png'); }
.mm_div_01_on { opacity:0; background-image:url('../images/btn_dplay_on.png'); }
.mm_div_02_on { opacity:0; background-image:url('../images/btn_client_on.png'); }
.mm_div_03_on { opacity:0; background-image:url('../images/btn_contact_on.png'); }

#bottom { bottom:0px; width:100%; height:49px; background-color:#FFF; border-top:solid 1px #D9D9D9; font-family:'Noto Sans KR', sans-serif; }
.cpr_div_left { float:left; color:#222; margin:14px 0 0 40px; transition:all 0.30s ease-out; }
.cpr_div_left > ul { list-style:none; margin:0; padding:0; }
.cpr_div_left > ul > li { float:left; font-size:13.5px; font-weight:700; letter-spacing:0.825px; transform:skew(-0.03deg); }
.cpr_div_left > ul > li:not(:first-child):before { content:'/'; margin:0 8px; font-size:12px; font-weight:300; color:#666; }
.cpr_div_left > ul > li > span { font-weight:700; cursor:pointer; transition:all 0.30s ease-out; }
.cpr_div_left > ul > li > span:hover { color:#00bfd5; }
.cpr_div_right { float:right; margin:17px 39px 0 0; font-size:9.5px; font-weight:500; letter-spacing:1.085px; color:#a0a0a0; transform:skew(-0.03deg); transition:all 0.30s ease-out; }

@media (max-width:900px) {

.cpr_div_left { margin-left:25px; }
.cpr_div_right { margin-right:25px; }

}

@media (max-width:750px) {

#bottom { height:auto; padding-bottom:15px; }

#bottom > div { float:none; text-align:center; margin-left:0; margin-right:0; }
.cpr_div_left > ul { display:table; width:auto; margin:0 auto; }
.cpr_div_right { margin:7px 0 0 0; }

}

#mv_div { width:790px; height:383px; margin:45px 0px 100px 0px; padding:82px 0 0 0; font-family:'Nanumsquare', sans-serif; color:#fff; text-align:center; transition:all 0.30s ease-out; }
#mv_div > h1 { width:100%; height:137px; margin:10px 0 0 0; background-position:center; background-repeat:no-repeat; }
#mv_div > h4 { margin:20px 0 0 0px; font-size:17px; font-weight:300; letter-spacing:2px; transition:all 0.30s ease-out; }
#mv_div > h4:after { display:block; content:''; width:170px; height:2px; margin:46px 0 0 -1px; transition:all 0.30s ease-out; margin-left:auto; margin-right:auto; }
#mv_div > h3 { margin:48px 0 0 0; font-size:21px; font-weight:400; letter-spacing:-1.05px; transition:all 0.30s ease-out; }
#mv_div > h5 { margin:13px 0 0 0; }
#mv_div > h5 > p { line-height:22px; padding:0; margin:0; font-size:14px; font-weight:300; letter-spacing:-0.7px; color:rgba(255,255,255,0.8); transform:skew(-0.03deg); transition:all 0.30s ease-out; }

/*.mv_01 { background-image:url('../images/bg_visual_01.png'); }
.mv_02 { background-image:url('../images/bg_visual_02.png'); }
.mv_03 { background-image:url('../images/bg_visual_03.png'); }*/

.mv_01 > h1 { background-image:url('../images/text_visual_01.png'); }
.mv_02 > h1 { background-image:url('../images/text_visual_02.png'); }
.mv_03 > h1 { background-image:url('../images/text_visual_03.png'); }

#mv_div.mv_03 > h4 { font-size:18px; font-weight:300; transition:all 0.30s ease-out; }
#mv_div.mv_03 > h4 > strong { font-weight:800; }

#mv_div.mv_01 > h4:after { background:#C09F7D; }
#mv_div.mv_02 > h4:after { background:#C09F7D; }
#mv_div.mv_03 > h4:after { background:#C09F7D; margin-top:45px; }

@media (max-width:1200px) {

#mv_div { width:calc(100% - 72px); padding-left:27px; padding-right:45px; margin-top:90px; background-position:top right 45px; }

}

@media (max-width:750px) {

#logo { position:static; margin:35px auto; }
#mm_ul { position:static; width:auto; display:table; margin:-10px auto 0 auto; }

#mv_div { width:calc(100% - 30px); padding-top:50px; padding-left:15px; padding-right:15px; margin-top:0; background-position:top right -35px; }

}

@media (max-width:600px) {

#mv_div { background-size:80%; }
#mv_div > h1 { width:100%; height:122px; background-size:auto 100%; }
#mv_div > h4 { font-size:17px; }
#mv_div > h4:after { margin:40px 0 0 -1px; margin-left:auto; margin-right:auto; }
/*#mv_div > h3 { margin:43px 0 0 21px; font-size:19px; }
#mv_div > h5 > p { line-height:21px; font-size:13px; }*/

#mv_div.mv_03 > h4 { font-size:16px; }
#mv_div.mv_03 > h4:after { margin-top:41px; }

}

#clt_ul { display:table; list-style:none; width:1130px; height:auto; padding:0; margin:-26px 0 56px 0; }
#clt_ul > li { float:left; padding:38px 0; border-bottom:solid 1px rgba(255,255,255,0.2); transition:all 0.30s ease-out; -webkit-transition:all 0.30s ease-out; -moz-transition:all 0.30s ease-out; }
#clt_ul > li > img { transition:all 0.30s ease-out; -webkit-transition:all 0.30s ease-out; -moz-transition:all 0.30s ease-out; }


#clt_ul > li:nth-child(n+1):nth-child(-n+4) { padding-right:calc((100% - 767px) / 4); }
#clt_ul > li:nth-child(n+6):nth-child(-n+9) { padding-right:calc((100% - 807px) / 4); }
#clt_ul > li:nth-child(n+11):nth-child(-n+14) { padding-right:calc((100% - 714px) / 4); }
#clt_ul > li:nth-child(n+16):nth-child(-n+19) { padding-right:calc((100% - 833px) / 4); }

#clt_ul > li:nth-child(5n) { padding-right:0; }
#clt_ul > li:nth-child(n+16):nth-child(-n+20) { border-bottom:none; }

@media (max-width:1200px) {

#clt_ul { display:table; width:calc(100% - 100px); margin:-40px 50px 46px 50px; }

}

@media (max-width:1100px) {

#clt_ul > li:nth-child(n+1):nth-child(-n+4) { padding-right:inherit; }
#clt_ul > li:nth-child(n+6):nth-child(-n+9) { padding-right:inherit; }
#clt_ul > li:nth-child(n+11):nth-child(-n+14) { padding-right:inherit; }
#clt_ul > li:nth-child(n+16):nth-child(-n+19) { padding-right:inherit; }

#clt_ul > li:nth-child(n+1):nth-child(-n+3) { padding-right:calc((100% - 681px) / 3); }
#clt_ul > li:nth-child(n+5):nth-child(-n+7) { padding-right:calc((100% - 600px) / 3); }
#clt_ul > li:nth-child(n+9):nth-child(-n+11) { padding-right:calc((100% - 660px) / 3); }
#clt_ul > li:nth-child(n+13):nth-child(-n+15) { padding-right:calc((100% - 563px) / 3); }
#clt_ul > li:nth-child(n+17):nth-child(-n+19) { padding-right:calc((100% - 617px) / 3); }

#clt_ul > li:nth-child(5n) { padding-right:inherit; }
#clt_ul > li:nth-child(4n) { padding-right:0; }
#clt_ul > li:nth-child(n+16):nth-child(-n+20) { border-bottom:solid 1px rgba(255,255,255,0.2); }
#clt_ul > li:nth-child(n+17):nth-child(-n+20) { border-bottom:none; }

}

@media (max-width:850px) {

#clt_ul { margin-top:-60px; }

#clt_ul > li { padding-top:27px; padding-bottom:27px; }
#clt_ul > li:nth-child(n+1):nth-child(-n+3) { padding-right:inherit; }
#clt_ul > li:nth-child(n+5):nth-child(-n+7) { padding-right:inherit; }
#clt_ul > li:nth-child(n+9):nth-child(-n+11) { padding-right:inherit; }
#clt_ul > li:nth-child(n+13):nth-child(-n+15) { padding-right:inherit; }
#clt_ul > li:nth-child(n+17):nth-child(-n+19) { padding-right:inherit; }

#clt_ul > li:nth-child(n+1):nth-child(-n+2) { padding-right:calc((100% - 501px) / 2); }
#clt_ul > li:nth-child(n+4):nth-child(-n+5) { padding-right:calc((100% - 506px) / 2); }
#clt_ul > li:nth-child(n+7):nth-child(-n+8) { padding-right:calc((100% - 414px) / 2); }
#clt_ul > li:nth-child(n+10):nth-child(-n+11) { padding-right:calc((100% - 520px) / 2); }
#clt_ul > li:nth-child(n+13):nth-child(-n+14) { padding-right:calc((100% - 347px) / 2); }
#clt_ul > li:nth-child(n+16):nth-child(-n+17) { padding-right:calc((100% - 583px) / 2); }
#clt_ul > li:nth-child(n+19):nth-child(-n+19) { padding-right:calc(100% - 250px); }

#clt_ul > li:nth-child(4n) { padding-right:inherit; }
#clt_ul > li:nth-child(3n) { padding-right:0; }
#clt_ul > li:nth-child(n+17):nth-child(-n+20) { border-bottom:solid 1px rgba(255,255,255,0.2); }
#clt_ul > li:nth-child(n+19):nth-child(-n+20) { border-bottom:none; }

}

@media (max-width:700px) {

#clt_ul { width:calc(100% - 50px); margin:-40px 25px 46px 25px; }

#clt_ul > li { width:50%; height:100px; padding:0; }
#clt_ul > li > img { max-width:calc(100% - 30px); margin-top:15px; }

#clt_ul > li:nth-child(n+1):nth-child(-n+2) { padding-right:inherit; }
#clt_ul > li:nth-child(n+4):nth-child(-n+5) { padding-right:inherit; }
#clt_ul > li:nth-child(n+7):nth-child(-n+8) { padding-right:inherit; }
#clt_ul > li:nth-child(n+10):nth-child(-n+11) { padding-right:inherit; }
#clt_ul > li:nth-child(n+13):nth-child(-n+14) { padding-right:inherit; }
#clt_ul > li:nth-child(n+16):nth-child(-n+17) { padding-right:inherit; }
#clt_ul > li:nth-child(n+19):nth-child(-n+19) { padding-right:inherit; }

#clt_ul > li:nth-child(3n) { padding-right:inherit; }

}

@media (max-width:600px) {

#clt_ul { margin-top:-90px; }

}

.ctu_div { width:100%; max-width:785px; margin:0 auto; text-align:center; }
.ctu_div > div { width:785px; }
.ctu_div > div > iframe { width:785px; }

@media (max-width:850px) {

.ctu_div { width:calc(100% - 80px); max-width:none; }
.ctu_div > div, .ctu_div > div > iframe { width:100%; }

}

@media (max-width:750px) {

.ctu_div { width:calc(100% - 64px); max-width:none; }

}

@media (max-width:600px) {

.ctu_div { margin-top:-50px; }

}