/* ------------------------------------------------- 공통  ----------------------------------------------- */

#wrapper {
	width: 100%;
	background: ;
}

#wrap {
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;
}

#subwrap {
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;
}

section#main-content {
	width: 100%;
	margin: 8% 0 9%
}

img {
	max-width: 100%;
	width: 100%;
}

section.right-col li span {
	display: none;
}

#copyright {
	position: relative;
	height: 100%;
	color: #fff;
	background: #555;
	font-size: 0.7em;
	letter-spacing: 0em;
	text-align: center;
	padding: 15px;
	line-height: 145%;
}

.cb {
	clear: both;
}

/* -------------------------------------------------- 모바일용 ----------------------------------------------- */

@media all and (min-width:320px) {

	#wrap {
		width: 90%;
	}

	section.right-col li {
		float: left;
		position: relative;
		width: 50%;
		margin: 0 auto;
		padding: 0 6.3% 0 0;
	}

	.sidebar figcaption {
		display: none;
	}

	section.right-col li span.mspan {
		display: block;
		position: absolute;
		left: 88.7%;
		top: 0;

		z-index: 9998;
		font-size: 1.0em;
		color: #fff;

		font-style: normal;
		font-display: block;
		background: #999;
		width: 89%;
		margin: l;
		left: 88.7%;
		height: 90%;
		text-align: center;
		line-height: 1.2em;
	}

	ul.sidebar {
		display: block;
	}

	#mosaic_div {
		display: none;
	}

	section.right-col li span.mspan1 {
		background: #6F8E3F
	}

	section.right-col li span.mspan2 {
		background: #131419
	}

	section.right-col li span.mspan3 {
		background: #97AA9D
	}

}

/* -------------------------------------------------- 태블릿용 ----------------------------------------------- */

@media all and (min-width:600px) {

	#wrap {
		width: 90%;
	}

	section.left-col {
		width: 100%;
		padding-top: 0%;
		margin: 0.5% 0;
	}

	section.right-col {
		width: 100%;
		margin: 0 auto;
	}

	section.right-col li {
		float: left;
		position: relative;
		width: 27%;
		padding: 0 6.3% 5% 0;
	}

	section.right-col li:first-child {
		background: #91bd4e;
	}

	section.right-col li:first-child+li {
		background: #12101a;
	}

	section.right-col li:first-child+li+li {
		background: #cce8d2;
	}

	section.right-col li span.pcspan,
	section.right-col li span.mspan {
		display: none;
	}

	section.right-col li span {
		display: block;
		position: absolute;
		bottom: 0%;
		padding: 3% 0;
		z-index: 9999;
		font-size: 0.8em;
		color: #fff;
		font-display: block;
		font-style: normal;
		background: #999;
		width: 89%;
		margin: l;
		left: 5%;
		text-align: center;
		line-height: 1.2em;
	}



	section.right-col li:first-child+li {}

	section.right-col li:first-child+li+li {}

	ul.sidebar {
		display: block;
		width: 10%;
		margin: 0;
		padding: 0;
	}

	.sidebar figcaption {
		display: none;
	}
}

ul.sidebar {
	width: 100%;
	float: left;
	padding: 1% 0;
}

ul.sidebar li {
	width: 20%;
	float: left;
}

section.bottom_left {
	width: 100%;
}

section.bottom_left ul li {
	width: 25%;
	float: left;
}

section.bottom_right {
	width: 100%;
	background: #FFF9AF;
}

section.bottom_right p {
	width: 50%;
	margin: 0 auto;
}


/* --------------------------------------------------- pc 용   ----------------------------------------------- */

@media all and (min-width:1024px) {

	#wrap {
		width: 90%;
		;
	}

	section.left-col {
		width: 68%;
		float: left;
		margin: 0 2% 0 0;
		padding-top: 0%;
	}

	section.right-col {
		width: 18%;
		float: left;
		margin-right: 2%;
	}

	ul.sidebar {
		width: 10%;
		float: left;
		margin: 0;
		padding: 0;
	}

	ul.sidebar li {
		width: 100%;
		float: left;
	}

	#mosaic_div {
		width: 10%;
		float: left;
		margin: 0;
		left: 0;
	}

	#mosaic_div div {
		width: 100%;
		float: left;
	}

	.sidebar figcaption {
		display: none;
	}

	section.right-col li {
		float: left;
		width: 100%;
		float: left;
		position: relative;
		padding: 0 0 6.89% 0;

	}

	section.right-col li span,
	section.right-col li span.mspan {
		display: none;
	}

	section.right-col li span.pcspan {
		display: block;
		position: absolute;
		bottom: 0%;
		padding: 2% 0;
		z-index: 9999;
		font-size: 0.8em;
		color: #fff;
		background: #455868;
		width: 100%;
		left: 0;
		line-height: 1.2em;
		text-align: center;
	}

	section.bottom_left {
		width: 70%;
		float: left;
		padding: 2% 0;

	}

	section.bottom_left ul li {
		float: left;
		width: 22.99999%;
		padding-right: 1.999999%;
	}

	section.bottom_right {
		width: 30%;
		float: left;
		padding: 2% 0;
		background: transparent;
	}

	section.bottom_right p {
		width: 100%;
		margin: 0;
	}

	#nav {
		padding: 20px 20px 0 20px;
	}

	ul.sidebar {
		display: none;
	}

	#mosaic_div {
		display: block;
	}
}

#container {
	background: url("../images/bg2.png");
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	min-height: 1100px;
}

/* PC용 배너 */


.mosaic-block {
	float: left;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 5.6999em;
	background: #fff url(../images/progress.gif) no-repeat center center;

}

.mosaic-backdrop {
	display: none;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background: #111;
}

.mosaic-overlay {
	display: none;
	z-index: 5;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111;
}

.details h4 {
	font-size: 0.9em;
	padding: 13% 0;
	text-align: center;
}

.details p {
	font-size: 0.8em;
	margin: 0 2%;
	text-align: center;
}

.fade .mosaic-overlay {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter: alpha(opacity=00);
	background: url("../images/bg-black.png");
}

/*** End Animation Styles ***/