@charset "utf-8";
/* (c) WEBsiting.kr */
body{font-family:"Noto Sans KR", sans-serif}
.trans02{-webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
.trans03{-webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-duration: 0.3s; transition-timing-function: ease; }
.trans04{-webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease; }
.trans05{-webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-duration: 0.5s; transition-timing-function: ease; }
.trans06{-webkit-transition-duration: 0.6s; -webkit-transition-timing-function: ease; transition-duration: 0.6s; transition-timing-function: ease; }

/* 상단으로 이동 버튼 */
#btnTop {position: fixed;right: 10px;bottom:10px;width:45px;height:45px;background: #101828; color: #fff;border: none;border-radius: 50%;cursor: pointer;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;box-shadow: 0 4px 12px rgba(0,0,0,0.15);z-index: 999;}
#btnTop:hover {background: #6366f1;transform: translateY(-3px);}
#btnTop.show {opacity: 1;visibility: visible;}

#head{width:100%; background:#172130; color:#fff; border-bottom:1px solid #000;}
#head:after{content:'';display:block ;clear:both;}
	#HDlogo{float:left; padding:15px 20px;}
	#HDlogo a{display:block; color:#fff; font-size:1.8em;font-family:"Arial Black","Noto Sans KR"; font-weight:900;}
	#HDlogo small{display:block; color:#9395eb; font-size:1em;}
	#HDnav{float:left; margin-left:30px;}
	#HDnav > ul{}
	#HDnav > ul:after{content:'';display:block ;clear:both;}
	#HDnav > ul > li{float:left; padding:15px 5px; position:relative;}
	#HDnav > ul > li > a{color:#fff; font-size:1.2em; display:block; padding:15px 20px; border-radius:6px; border:1px solid transparent;}
	#HDnav > ul > li > ul{visibility:hidden; opacity:0; background:#fff; position:absolute; width:220px; top:76px; left:50%; margin-left:-110px; padding:15px; border:1px solid #ddd; border-radius:8px;
	-webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);-moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2)}
	#HDnav > ul > li:hover > a{background:RGBA(0,0,0,0.5); border:1px solid RGBA(255,255,255,0.13);}
	#HDnav > ul > li:hover > ul{visibility:visible; opacity:100%; top:80px;}

	#HDnav > ul > li > ul > li a{display:block; padding:10px 15px; font-size:1.1em; text-align:left; border:1px solid transparent; border-radius:4px;}
	#HDnav > ul > li > ul > li a:hover{background:RGBA(0,0,0,0.05); border:1px solid RGBA(0,0,0,0.08);color:#000;}

	#HDuser{float:right; padding:20px 20px;}
	#HDuser a{display:inline-block;vertical-align:middle; padding:12px 20px; color:RGBA(255,255,255,0.6); font-size:1.05em;border-radius:4px;}
	#HDuser a:hover{color:RGBA(255,255,255,0.9); opacity:80%;}
	.btnGoPaged,
	#HDuser a.btnGoPaged{background:#4f46e5; color:#fff;}
	#HDuser a.btnMWnav{display:none;}
	#HDuser a.lineA{position:relative;}
	#HDuser a.lineA:after{content:'';display:block; width:1px; height:14px; position:absolute; left:0px; top:50%; margin-top:-7px; background:RGBA(255,255,255,0.2);}

#foot{background:#f1f3f8; text-align:center; padding:80px 15px; color:RGBA(0,0,0,0.5);}

.pcNo{display:none !important;}

@media all and (max-width: 1200px)
{
	#HDlogo{padding:10px 15px;}
	#HDlogo a{font-size:1.4em;}
	#HDlogo small{font-size:0.92em;}

	#HDnav{display:block; float:none; position:fixed; left:0px; top:0px; bottom:0px; width:100%; z-index:999;}
	#HDnav > ul{padding:60px 20px 20px; width:260px; background:#0e1624; height:100%; overflow:auto;}
	#HDnav:after{content:''; display:block; position:fixed; z-index:-1; width:100%; left:0px; top:0px; bottom:0px; background:RGBA(0,0,0,0.777); cursor:pointer;}
	#HDnav:before{content:'←'; cursor:pointer; display:block; position:fixed; z-index:2; left:10px; top:10px; font-size:18px; color:#fff; 
		width:40px; height:40px; line-height:40px; text-align:center; background:#6366f1; border-radius:5px;
		-webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease;}
	#HDnav > ul > li{float:none; padding:0px; border-bottom:1px solid RGBA(255,255,255,0.05); position:static;}
	#HDnav > ul > li > ul{padding:5px; border:0px; background:RGBA(255,255,255,0.03); visibility:visible; position:static; opacity:100%;margin-left:0px;}
	#HDnav > ul > li > ul li{}
	#HDnav > ul > li > ul li a{color:RGBA(255,255,255,0.7); padding:7px 15px;}
	#HDnav > ul > li > ul li a:hover{color:#fff;}
	#HDnav > ul > li .btnGoPaged{margin-top:15px;}

	
	#HDnav,
	#HDnav:after,
	#HDnav:before{margin-left:-101%;}
	.on #HDnav,
	.on #HDnav:after,
	.on #HDnav:before{margin-left:0;}

	.mwNo{display:none !important;}
	.pcNo{display:block !important;}

	#HDuser{float:right; padding:15px 10px;}
	#HDuser a.btnMWnav{display:block; color:#fff; font-size:22px;padding:0 10px; margin-left:5px; transform:scaleY(-1); cursor:pointer;}
}

/* 메인페이지 */
.mainBox{width:100%; max-width:1200px; margin:60px auto; background:URL('../img/mvs.jpg') no-repeat right center #172130; background-size:cover; border-radius:15px;}
.mainBox > div{padding:120px 60px; color:#fff; font-size:1.2em;}
.mainBox > div h2{font-size:4em; padding-bottom:30px; }
.mainBox > div h2 small{display:block; font-size:0.4em; color:#5452ee;}
.mainBox > div a{display:inline-block; padding:15px 30px; color:#fff; background:#5452ee; border-radius:8px; }
.mainBox > div a:hover{transform:scale(1.05);}

@media all and (max-width: 1200px)
{
	.mainBox{width:auto; margin:15px; clear:both;}
}
@media all and (max-width: 980px)
{
	.mainBox{background:URL('../img/mvs.jpg') no-repeat right bottom #172130; background-size:150% auto;}
	.mainBox > div{padding:50px 30px 65%; color:#fff; font-size:1em;}
	.mainBox > div h2{font-size:2.5em; padding-bottom:15px;}
}
.mainCont{width:100%; max-width:1200px; margin:60px auto;}
.mainCont ul{overflow:hidden; margin-bottom:60px;}
.mainCont ul li{float:left; width:33.33333%;}
.mainCont ul li a{display:block; overflow:hidden; padding:25px; margin:10px; border-radius:10px;
	-webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);-moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);}
.mainCont ul li a:hover{transform:scale(1.05);}
.mainCont ul li a i{display:block; float:right; margin-left:20px; width:100px;}
.mainCont ul li a:hover i{transform:scale(1.1);}
.mainCont ul li a i img{display:block; width:100%; height:auto; border-radius:8px;}
.mainCont ul li a b{display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size:1.4em; color:#111; height:1.4em; overflow:hidden;}
.mainCont ul li a em{display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height:3.9em; line-height:1.3em; overflow:hidden; margin:20px 0; font-size:0.92em; color:#999; }
.mainCont ul li a u{display:inline-block; text-decoration:none; padding:5px 8px; color:#fff; background:#452ae9; border-radius:5px;}
.mainCont ul li a u.soon{background:#999;}

.mainCont ul li a icT,
.mainCont ul li a icS,
.mainCont ul li a icP,
.mainCont ul li a icN{display:inline-block; padding:2px 4px; border-radius:3px; background:#000; font-size:11px; font-weight:bold; color:#fff; margin-bottom:5px;}
.mainCont ul li a icT{background:#25a2d8;}
.mainCont ul li a icS{background:#8bd1b4;}
.mainCont ul li a icP{background:#03848c;}
.mainCont ul li a icN{background:#CBBBAB;}
.mainCont ul li a icT:after{content:'THEME'}
.mainCont ul li a icS:after{content:'SKIN'}
.mainCont ul li a icP:after{content:'PLUGIN'}
.mainCont ul li a icN:after{content:'NEW'}

@media all and (max-width: 1200px)
{
	.mainCont ul li{width:50%;}
}
@media all and (max-width: 800px)
{
	.mainCont ul li{float:none; width:100%;}
}
@media all and (max-width: 600px)
{
	.mainCont ul li a{padding:15px;}
	.mainCont ul li a i{width:77px;}
	.mainCont ul li a b{height:auto;display:block;}
}