@charset "utf-8";

#wrap { position:relative; width:100%; }

.container { position:relative; max-width:1240px; margin:0 auto; }

#header { position:relative; width:100%; height:115px; margin:0 auto; border-bottom:4px solid #3B7CCA; }
@media (min-width:320px) and (max-width:910px) {
#header { height:45px; }
}

	h1.logo { position:absolute; width:224px; height:79px; top:25px; left:0; }
	h1.logo a { display:block; width:100%; height:100%; font-size:0px; text-indent:-99999px; background:url('/image/logo.png') no-repeat; }
	@media (min-width:320px) and (max-width:910px) {
	h1.logo { position:absolute; width:104px; height:20px; top:10px; left:3.125%; }
	h1.logo a { display:block; width:100%; height:100%; font-size:0px; text-indent:-99999px; background:url('/image/logo_small.png') no-repeat; }
	}

	.gnb { position:absolute; width:58.064%; top:85px; left:25.403%; font-size:0; }
	.gnb li { float:left; width:24%; }
	.gnb li a { font-size:18px; color:#175599; font-weight:500; }
	.gnb li a:hover, .gnb li.gnbSelected a { font-weight:800; margin-left:-1.5px; }

	.gnbToggle { display:none; z-index:9999999999999999999999;}
	@media (min-width:320px) and (max-width:910px) {
	.gnb { display:none; }
	.gnbToggle { display:block; position:absolute; top:14px; right:10px; }
	}

	.tnb { position:absolute; width:auto; top:20px; right:0; font-size:0; }
		.sns { display:inline; margin-right:15px; }
		.sns li { display:inline; margin-right:3px; }
		.sns li:last-child { margin-right:0; }

		.mnb { display:inline-block; margin-top:2px; }
		.mnb li { position:relative; display:inline; margin:0 5px 0 10px; }
		.mnb li:first-child { margin-left:0; }
		.mnb li:last-child { margin-right:0; }
		.mnb li:before { content:""; position:absolute; top:-9px; left:-8px; width:1px; height:12px; border-right:1px solid #CACACB; }
		.mnb li:first-child:before { border:none; }
		.mnb li a { font-size:12px; color:#808184; }
		.mnb li a:hover { color:#111; }

	@media (min-width:320px) and (max-width:910px) {
	.tnb { display:none; }
	}

	.search { position:absolute; top:80px; right:0; }
	.search .small { display:none; }
	@media (min-width:320px) and (max-width:910px) {
	.search { top:13px; right:40px; }
	.search .big { display:none; }
	.search .small { display:block; }
	}
#contents { position:relative; max-width:1240px; margin:0 auto; overflow:hidden; }
	.spot { position:relative; width:100%; height:0; padding-bottom:35.483%; overflow:hidden; }
	@media (min-width:320px) and (max-width:640px) {
	.spot { height:auto; padding-bottom:0; }
	}

		.hotList { position:relative; float:right; width:25.484%; height:auto; z-index:2; }
		@media (min-width:320px) and (max-width:640px) {
		.hotList { float:none; width:100%; }
		}
			.hotList h2 { position:relative; float:none; width:100%; height:135px; background:#175599 url("/image/hot1.png") no-repeat; background-position:20px 25px; font-size:0; }
			.hotList h2 span.clock { display:block; position:absolute; top:40px; right:25px; font-size:12px; color:#fff; font-weight:300; }
			@media (min-width:640px) and (max-width:880px) {
			.hotList h2 span.clock { display:block; position:absolute; top:110px; left:20px; font-size:12px; color:#fff; font-weight:300; }
			}
			@media (min-width:460px) and (max-width:640px) {
			.hotList h2 { float:left; width:20.062%; height:170px; background:#175599 url("/image/hot1small.png") no-repeat; background-position:15px 20px; }
			.hotList h2 span.clock { top:140px; left:15px; font-size:9px; }
			}
			@media (min-width:320px) and (max-width:460px) {
			.hotList h2 { float:left; width:21.875%; height:240px; background:#175599 url("/image/hot1small.png") no-repeat; background-position:15px 20px; }
			.hotList h2 span.clock { top:140px; left:15px; font-size:9px; }
			}

			.hotList .firstArticle { position:relative; float:none; width:95%; height:145px; padding-right:5%; background:#175599; }
			@media (min-width:640px) and (max-width:930px) {
			.hotList .firstArticle { height:0; padding-bottom:100%; }
			}
			.hotList .firstArticle a { display:block; position:relative; width:calc(100%-40px); height:calc(100%-13px); padding-top:13px; padding-left:35px; }
			@media (min-width:460px) and (max-width:640px) {
			.hotList .firstArticle { float:left; width:26.5%; height:170px; }
			.hotList .firstArticle a { padding-top:13px; padding-left:0; }
			}

			.hotList .firstArticle a h3 { text-indent:-15px; font-size:18px; color:#ffff00; font-weight:500; word-break:keep-all; }
			.hotList .firstArticle a p { margin-top:10px; font-size:12px; color:#fff; line-height:16px; word-break:keep-all; }
			.hotList .firstArticle a small { display:inline-block; margin-top:20px; font-size:10px; color:#fff; opacity:0.8; }

			@media (min-width:320px) and (max-width:460px) {
			.hotList .firstArticle { float:none; position:absolute; top:0; right:0; width:73.125%; height:100px; background:#3B7CCA; z-index:1; }
			.hotList .firstArticle a { padding-top:40px; padding-left:40px; }
			.hotList .firstArticle a p { display:none; }
			.hotList .firstArticle a small { margin-top:0; }
			}

			@media (min-width:640px) and (max-width:930px) {
			.hotList .firstArticle a small { display:none; }
			}

			.hotList .otherArticle { position:relative; float:none; width:95%; height:135px; padding-top:25px; padding-right:5%; background:#3B7CCA; }
			@media (min-width:640px) and (max-width:930px) {
			.hotList .otherArticle { display:none; }
			}
			@media (min-width:460px) and (max-width:640px) {
			.hotList .otherArticle { float:left; width:43.438%; height:145px; padding-top:25px; }
			}

			.hotList .otherArticle li { position:relative; width:100%; margin:15px 0; text-indent:20px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
			@media (min-width:1120px) and (max-width:1210px) {
			.hotList .otherArticle li:nth-child(4) { display:none; }
			}
			@media (min-width:1020px) and (max-width:1120px) {
			.hotList .otherArticle li:nth-child(3) { display:none; }
			.hotList .otherArticle li:nth-child(4) { display:none; }
			}
			@media (min-width:930px) and (max-width:1020px) {
			.hotList .otherArticle li:nth-child(2) { display:none; }
			.hotList .otherArticle li:nth-child(3) { display:none; }
			.hotList .otherArticle li:nth-child(4) { display:none; }
			}
			@media (min-width:820px) and (max-width:930px) {
			.hotList .otherArticle li:nth-child(1) { display:none; }
			.hotList .otherArticle li:nth-child(2) { display:none; }
			.hotList .otherArticle li:nth-child(3) { display:none; }
			.hotList .otherArticle li:nth-child(4) { display:none; }
			}
			.hotList .otherArticle li:first-child { margin-top:0; }
			.hotList .otherArticle li:last-child { margin-bottom:0; }
			.hotList .otherArticle li a { font-size:15px; color:#fff; }

			@media (min-width:320px) and (max-width:460px) {
			.hotList .otherArticle { float:none; position:absolute; top:99px; right:0; width:73.125%; height:110px; padding-top:31px; }
			.hotList .otherArticle li { margin:5px 0; }
			.hotList .otherArticle li a { font-size:12px; color:#fff; }
			}

		.visual { position:relative; float:right; width:74.516%; z-index:1; }
		.visual img { width:100%; height:100%; vertical-align:top; }
		@media (min-width:320px) and (max-width:640px) {
		.visual { position:relative; float:none; width:100%; }
		}

	.articleList { clear:both; position:relative; max-width:1264px; width:101.935%; margin-top:25px; margin-left:-0.967%; }
	.articleList li { position:relative; float:left; max-width:292px; width:23.066%; margin:0 0.967% 24px 0.967%; height:330px; overflow:hidden; }
	@media (min-width:320px) and (max-width:640px) {
	.articleList { width:100%; margin-left:0; }
	.articleList li { width:45.314%; margin:0 2.343% 24px 2.343%; height:310px; }
	}
	@media (min-width:460px) and (max-width:640px) {
	.articleList li { height:310px; }
	}
	@media (min-width:320px) and (max-width:460px) {
	.articleList li { height:220px; }
	}

	.articleList li p.img { position:relative; width:100%; height:auto; border-top:3px solid #3B7CCA; }
	.articleList li p.img > img { width:100%; }
	.articleList li span.badge { position:absolute; bottom:-10px; right:10px; }
	.articleList li span.badge img:first-child { margin-right:5px; }
	.articleList li p.title { height:43px; margin-top:10px; font-size:18px; color:#4d4d4f; font-weight:500; overflow:hidden; }
	.articleList li span.cnt { display:inline-block; margin-top:30px; font-size:12px; color:#7d7d7d; }
	@media (min-width:320px) and (max-width:460px) {
	.articleList li p.title { font-size:11px; }
	.articleList li span.cnt { margin-top:10px; font-size:10px; }
	}

	#loadmore { clear:both; position:relative; width:100%; height:95px; padding-top:65px; text-align:center; }
	#loadmore a { display:inline-block; height:95px; padding:25px 50px; }
	#loadingImg {position:fixed; width:100%; height:100%; top:50%; z-index:999999999999999999999999; text-align:center; display:none;}

#footer { clear:both; position:relative; width:100%; height:auto; background:#EBEBEB; text-align:center; }
	.fnb { display:inline-block; margin-top:40px; font-size:0; }
	.fnb li { position:relative; display:inline; margin:0 10px; }
	.fnb li:before { content:""; position:absolute; top:-9px; left:-10px; width:1px; height:10px; background:#7d7d7d; }
	.fnb li:first-child:before { background:none; }
	.fnb li a { font-size:12px; color:#7d7d7d; font-weight:500; }
	.fnb li a:hover { color:#3b7cca; }

	.copyright { display:block; padding-bottom:30px; font-size:12px; color:#7d7d7d; line-height: 16px; margin: 14px auto 0; max-width: 580px; width: calc(100% - 30px);}
	.copyright span { display: inline-block; margin-right: 10px; }
	.copyright span:before { content: ""; width: 3px; height: 3px; background: #999; display: inline-block; margin-bottom: 3px; margin-right: 3px; }

/* »çÀÌµå ¸Þ´º */
.side_sns { position:absolute; top:45px; left:35px; width:100%; font-size:0; }
.side_sns li { display:inline; margin-right:4px; }

.side_mnb { position:absolute; top:75px; left:35px; font-size:0; }
.side_mnb li { position:relative; display:inline; margin-right:20px; }
.side_mnb li:before { content:""; position:absolute; top:-12px; left:-10px; width:1px; height:14px; background:#fff; }
.side_mnb li:first-child:before { background:none; }
.side_mnb li a { font-size:15px; color:#fff; }

.side_gnb { position:absolute; top:140px; left:35px; }
.side_gnb li { position:relative; line-height:40px; }
.side_gnb li a { font-size:18px; color:#fff; font-weight:600; }
.side_gnb li.side_gnbSelected a { color:#FFFF00; }


/* quick _mobile */
.quick_m {position:absolute; top:350px; left:35px; border-top: 1px solid #8898aa; padding-top: 15px; width: 136px;}
li.qm_1, li.qm_2, li.qm_3 { text-indent: 25px; margin-bottom: 15px; margin-left: 5px;}
li a { font-size: 16px; color: #fff; }
li.qm_1 { background: url(/image/m_icon1.png) no-repeat; background-size: 20px 20px; }
li.qm_2 { background: url(/image/m_icon2.png) no-repeat; background-size: 20px 19px; }
li.qm_3 { background: url(/image/m_icon3.png) no-repeat; background-size: 20px 20px; }

li.qm_4 {  margin-top: 50px; border-top:1px solid #8898aa; }
li.qm_4 a { background: url(/image/m_icon_c.png) no-repeat top center; background-size: 63px; background-position-y:15px; display: block; padding-top: 50px; letter-spacing: -0.5px; text-align: center; }


.boardWrap { position:relative; width:100%; margin:50px 0; }


/* quick _PC */
#fl_menu { position: absolute; right: 10px; top: 115px; z-index: 9; width: 80px; height:360px; box-shadow: 1px 2px 5px #4b4b4b}
#fl_menu ul { background: url(/image/quick.jpg) no-repeat; padding-top: 48px; }
#fl_menu ul li { width:100%; }
#fl_menu ul li a { display: block; font-size: 0; width: 100%; height: 76px; }
#fl_menu ul li.quick_list04 a { height: 84px; }
	@media (min-width:320px) and (max-width:910px) {
	#fl_menu { display:none; }
	}