@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700');
@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&family=Roboto:wght@700&display=swap');
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}

body {
	margin:0; padding:0;
	font-family: 'Nanum Gothic', "Dotum", sans-serif;
	color: #424242;
	font-size: 16px;
	line-height:160%;
	word-break:keep-all;
}

body .eng {
	font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #222;
	word-break:keep-all;
}

b, strong {
	font-weight:700;
}

div, section {
	margin:0; padding:0;
	font-size:middle;
	}
	
ul, ol, li, dl, dt, dd {
	margin: 0;
	paddding: 0;
	list-style: none;
}
a, a:active {
	color:#666; text-decoration:none;
	}
a:hover {
	text-decoration: none;
	color: #36C;
}
img {border:none; padding:0; margin:0;}

.mgl0 {margin-left:0!important;}

#wrap {margin:0; padding:0; width:100%; height:100%;}

.top_area {padding:5px; box-sizing:border-box;}
.top_area ul {width:100%; max-width:1000px; margin:0 auto; overflow:hidden; zoom:1; clear:both;}
.top_area ul .logo {float:left; margin-top:2px;}
.top_area ul .go_btn {float:right; margin-top:10px; color:#c3c1c1; font-size:0.867em; font-weight:600;}
.top_area ul .go_btn a {color:#7f7e7e;}

.topimg {display:flex; align-items:center; justify-content:center; height:530px; background:url(images/topimg.jpg) repeat-x center top; background-size:cover;}
.top_txt {width:90%; max-width:985px; margin:0 auto; color:#fff; font-size:36px; font-weight:700; line-height:1.3; font-family: 'Noto Sans KR', sans-serif; text-align:center;}
.top_txt strong {color:#ede620;}
.top_txt p:last-child {max-width:700px; margin: 0 auto; margin-top:20px; font-size:28px; font-weight:400;}
.top_txt p:last-child span {display:inline-block; margin-top:50px;}

.rowMid {background:#f6f6f6 url(images/bg_l.png) no-repeat;}
.rowMid > div {padding:95px 0; background:url(images/bg_r.png) no-repeat bottom right;}
.rowMid ul {display:flex;width:90%; max-width:1200px; margin:0 auto; z-index:10;}
.rowMid li {width:calc(50% - 10px); margin-left:10px;}
.rowMid li:first-child {margin-left:0;}
.rowMid li span {display:block; overflow:hidden;}
.rowMid li:last-child span {height:183.5px; margin-bottom:10px;}


.support {padding:10px 0; border-bottom:1px solid #ECECEC;}
.support span {display:block; width:100%; max-width:1200px; margin:10px auto;}
.support img {display:block; width:100%; max-width:314px;}


#container {width:90%; max-width:1000px; margin:0 auto; padding-top:80px; text-align:center;}
.ph1 {width:100%; margin:0 auto; margin-bottom:40px; font-size:18px; line-height:2;}
.ph1 strong {color:#000;}
.ph1 .btn {display:inline-block; margin-top:60px; padding:15px 60px; background:#444cb1; border-radius:5px; border:none; color:#fff; text-decoration:none;}
.ph1 em {display:block; margin-top:40px; color:#c18023; font-style:normal; font-size:16px;}
.ph1 em a {color:inherit; text-decoration:underline;}
.eng .ph1 {width:90%;}

.guide {color:#ca6f1f; text-align:left;}

#reple {border-top:2px solid #333;}

#copyright {margin:30px 0 0 0; padding:40px 0; background:#ddd; height:100%; font-size:14px; text-align: center;}
#copyright a {font-weight: bold}


/* Media Query */


/* 모바일 */

@media all and (max-width:1024px){
.top_area ul {width:100%; marign:0 20px; box-sizing:border-box;}
.top_area ul .go_btn {float:right; margin-top:15px;}
.support span {width:95%; margin:10px;}
.cont_text, .cont_guide, .news {margin:30px 10px; padding:0;}
}

@media all and (max-width:768px){
	.topimg {height: 400px;}
	.topimg img {height:100%;}
	
	.rowMid ul {display:block;}
	.rowMid li {width:100%; margin-left:0;}
	.rowMid li span {text-align:center;}
	
}

/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:640px) { 
	#container {width:90%; margin:0 auto; padding-top:40px;}
	.ph1 {line-height:200%;}
}

@media all and (max-width:480px){
	.top_txt {font-size:28px;}
	.top_txt p:last-child {font-size:18px;}
	
	.rowMid > div {padding:40px 0;}
	.rowMid li:first-child img {width:100%;}
	.rowMid li:last-child span {display:flex; align-items:center; justify-content:center;}
	
}

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

	
}

.c_color0{background:#AD78B8 !important;}
.c_color1{background:#43B556 !important;}
.c_color2{background:#1c61ad !important;}
.c_color3{background:#CC669B !important;}
.c_color4{background:#da4338 !important;}
.c_color5{background:#dcc050 !important;}
.c_color6{background:#5099dc !important;}
.c_color7{background:#50d7dc !important;}
.c_color8{background:#a7cd33 !important;}
.c_color9{background:#dd802d !important;}


#main-list, #main-list *{box-sizing:border-box;}
#main-list{zoom:1;border-top: 2px solid #000;padding: 30px 0 15px;}
#main-list:after{content:""; display:block; clear:both;}
#main-list li{float: left;width: 16.66666%;}
#main-list li a{display: block;padding: 3px 5px;}
#main-list li a .thumb-img{position: relative;display: block;height: 0;padding-top: 68%;}
#main-list li a .thumb-img img{position: absolute;left:0;top:0;width: 100%;height: 100%;}
#main-list li a strong{display: block;height: 40px;line-height: 20px;word-break: break-all;overflow: hidden;margin-top: 3px;font-size:14px;text-align:center;}
#main-list li a:hover{text-decoration: none;color:#06f}

@media screen and (max-width: 1000px){
	#main-list{padding: 15px 0px;}
	#main-list li{width: 25%;}
}

@media all and (max-width:768px){
	.ph1 {font-size:16px; line-height:1.6;}
	.ph1 .btn {margin-top: 40px;}
	.ph1 em {font-size:14px;}
	#main-list{padding: 15px 0px;}
	#main-list li{width: 50%;}
}
@media all and (max-width:600px){
	#main-list li{width: 100%;}
}

.page {padding:5px 0 30px 0; text-align:center;margin-bottom: 20px;}
.page img {vertical-align:middle;}
.page a, .page strong {color:#333; display:inline-block;width:25px;text-align:center;}
.page a:hover, .page strong{color:#006699; font-weight:600;}