@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i");
/*서울 한강체*/
@font-face {
font-family: 'SeoulHangangM';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulHangangM.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}


/*
	Story by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #ffffff;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	html {
		font-size: 18pt;
	}

	body {
		background-color: #ffffff;
	}

	body, input, select, textarea {
		font-family: 'SeoulHangang';
    font-weight: normal;
    font-style: normal;
		line-height: 1.65;
	}

	a {
		-moz-transition: color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out;
		text-decoration: underline;
	}

		a:hover {
			text-decoration: none;
		}

	strong, b {
		line-height: 1.2;
		font-size: 2em;
		font-weight: 500;
		color: #ffffff;
	}

	em {
		font-style: italic;
	}

	p {
		margin-top: 2.5rem;
		font-size: 1.05rem;
		font-weight: 500;
		color: #786868;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 300;
		line-height: 1.375;
		margin: 0 0 1rem 0;
		word-break: keep-all;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			text-decoration: none;
		}

	h1 {
		font-size: 2.75rem;
		line-height: 2;
		font-weight: 700;
		text-shadow: 1px 1px 2px #eeeeee;
		letter-spacing: 0.5rem;
	}

	h2 {
		max-width: 22rem;
		line-height: 1.5;
		font-size: 2.5rem;
		color: #eeeeee;
	}

	h3 {
		color: #ff4444;
		font-size: 2.2rem;
		font-weight: 500;
	}

	h4 {
		color: #454545;
		font-size: 1.2rem;
		font-weight: 500;
	}

	h5 {
		font-size: 0.9rem;
	}

	h6 {
		font-size: 0.7rem;
	}

	sub {
		font-size: 0.8rem;
		position: relative;
		top: 0.5rem;
	}

	sup {
		font-size: 0.8rem;
		position: relative;
		top: -0.5rem;
	}

	blockquote {
		border-left: solid 4px;
		font-style: italic;
		margin: 0 0 2rem 0;
		padding: 0.5rem 0 0.5rem 2rem;
	}

	code {
		border-radius: 4px;
		font-family: 'SeoulHangang';
		font-size: 0.9em;
		margin: 0 0.25rem;
		padding: 0.25rem 0.325rem;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: 'SeoulHangang';
		font-size: 0.9em;
		margin: 0 0 2rem 0;
	}

	pre code {
		display: block;
		line-height: 1.5;
		padding: 0.75rem 1rem;
		overflow-x: auto;
	}

	hr {
		border: 0;
		border-bottom: solid 1px;
		margin: 2.5rem 0;
	}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}


	input, select, textarea {
		color: #000000;
	}

	blockquote {
		border-left-color: rgba(0, 0, 0, 0.2);
	}

	code {
		background: rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.2);
	}

	hr {
		border-bottom-color: rgba(0, 0, 0, 0.2);
	}


/* Button */

		input[type="submit"],
		input[type="reset"],
		input[type="button"],
		button,
		.button {
			-moz-appearance: none;
			-webkit-appearance: none;
			-ms-appearance: none;
			appearance: none;
			-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			border: 0;
			cursor: pointer;
			display: inline-block;
			letter-spacing: 0.125em;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;
			white-space: nowrap;
			font-size: 18px;
			line-height: 3.75em;
			border-radius: 3.75em;
			padding: 0 2.5em;
			text-overflow: ellipsis;
			overflow: hidden;
			font-family: 'Roboto';
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #000000;
			color: #ffffff !important;
			box-shadow: none;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary i{
			float: left;
			margin: 0.375em 0.3em 0 0;
		}

		input[type="submit"].primary:hover,
		input[type="reset"].primary:hover,
		input[type="button"].primary:hover,
		button.primary:hover,
		.button.primary:hover {
			background-color: #ffffff;
			color: #000000 !important;
			font-weight: bold;
		}


/* Image */

	.image {
		border: 0;
		border-radius: 4px;
		display: inline-block;
		position: relative;
	}

		.image img {
			display: block;
			border-radius: 4px;
		}

		.image.left, .image.right {
			width: 40%;
			max-width: 10rem;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			margin: 0 1.5rem 1rem 0;
			top: 0.25rem;
		}

		.image.right {
			float: right;
			margin: 0 0 1rem 1.5rem;
			top: 0.25rem;
		}

		.image.main {
			display: block;
			margin: 0 0 3rem 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* List */

		ul {
			list-style: disc;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

		ul.alt li {
			border-top: solid 1px;
			padding: 0.5rem 0;
		}

		ul.alt li:first-child {
			border-top: 0;
			padding-top: 0;
		}


		ul.alt li {
			border-top-color: rgba(0, 0, 0, 0.2);
		}

/* Actions */

		ul.actions {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			cursor: default;
			list-style: none;
			padding-left: 0;
		}

		ul.actions li {
			vertical-align: middle;
		}

			ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.15rem 0 0 0;
			}

			ul.actions.stacked li:first-child {
				padding-top: 0;
			}

		@media screen and (max-width: 480px) {
			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}
			ul.actions:not(.fixed) li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				padding: 1rem 0 0 0;
				text-align: center;
				width: 100%;
			}

			ul.actions:not(.fixed) li:first-child {
				padding-top: 0;
			}
		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	.top {
		font-family: 'Cafe24Oneprettynight' !important;
		top: 1.2rem;
		left: 15%;
		position: absolute;
		width: 100%;
		color: #eeeeee;
		font-size: 1.5rem;
		text-align: left;
		z-index: 1;
	}

/* Banner (transitions) */

	.banner.onload-content-fade-down .title {
		-moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out;
		-webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out;
		-ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out;
		transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out;
	}

	body.is-preload .banner.onload-content-fade-down .title {
		-moz-transform: translateY(-1rem);
		-webkit-transform: translateY(-1rem);
		-ms-transform: translateY(-1rem);
		transform: translateY(-1rem);
		opacity: 0;
	}

	.banner.onload-image-fade-in .image img {
		-moz-transition: opacity 0.75s ease-in-out;
		-webkit-transition: opacity 0.75s ease-in-out;
		-ms-transition: opacity 0.75s ease-in-out;
		transition: opacity 0.75s ease-in-out;
	}

	body.is-preload .banner.onload-image-fade-in .image img {
		opacity: 0;
	}

	.banner.onscroll-content-fade-in .title {
		-moz-transition: opacity 0.75s ease-in-out;
		-webkit-transition: opacity 0.75s ease-in-out;
		-ms-transition: opacity 0.75s ease-in-out;
		transition: opacity 0.75s ease-in-out;
	}

	.banner.onscroll-content-fade-in.is-inactive .title {
		opacity: 0;
	}

	.banner.onscroll-image-fade-in .image img {
		-moz-transition: opacity 0.75s ease-in-out;
		-webkit-transition: opacity 0.75s ease-in-out;
		-ms-transition: opacity 0.75s ease-in-out;
		transition: opacity 0.75s ease-in-out;
	}

	.banner.onscroll-image-fade-in.is-inactive .image img {
		opacity: 0;
	}


/* Banner (style5) */

	.banner.style5 {
		padding: 4.5rem 7rem 3.15rem 7rem;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		background-color: inherit;
		position: relative;
		text-align: center;
		overflow-x: hidden;
	}

		.banner.style5 .title {
			position: relative;
			z-index: 1;
		}

		.banner.style5 .image {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 0;
			background-color: #eeeeee;
			background: linear-gradient(0.15turn, #ff7474, #ff4060, #f44d4d);
		}

		.banner.style5 .image img {
			-moz-object-fit: cover;
			-webkit-object-fit: cover;
			-ms-object-fit: cover;
			object-fit: cover;
			-moz-object-position: center;
			-webkit-object-position: center;
			-ms-object-position: center;
			object-position: center;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 0;
			opacity: 0.33;
		}

		/* .banner.style5.fullscreen {
			min-height: 100vh;
		} */

		.banner.style5.content-align-left {
			text-align: left;
		}

		.banner.style5.content-align-right {
			text-align: right;
		}

		.banner.style5.image-position-left .image img {
			-moz-object-position: left;
			-webkit-object-position: left;
			-ms-object-position: left;
			object-position: left;
		}

		.banner.style5.image-position-right .image img {
			-moz-object-position: right;
			-webkit-object-position: right;
			-ms-object-position: right;
			object-position: right;
		}

		.banner .image {
			background-color: rgba(0, 0, 0, 0.125);
		}

		.banner.invert .image {
			background-color: rgba(255, 255, 255, 0.125);
		}

/* Spotlight (transitions) */

		.spotlight.onload-content-fade-in .content {
			-moz-transition: opacity 0.75s ease-in-out;
			-webkit-transition: opacity 0.75s ease-in-out;
			-ms-transition: opacity 0.75s ease-in-out;
			transition: opacity 0.75s ease-in-out;
		}

		body.is-preload .spotlight.onload-content-fade-in .content {
			opacity: 0;
		}

		body.is-preload .spotlight.onload-image-fade-in .image img {
			opacity: 0;
		}

		.spotlight.onscroll-content-fade-in .content {
			-moz-transition: opacity 0.75s ease-in-out;
			-webkit-transition: opacity 0.75s ease-in-out;
			-ms-transition: opacity 0.75s ease-in-out;
			transition: opacity 0.75s ease-in-out;
		}

		.spotlight.onscroll-content-fade-in.is-inactive .content {
			opacity: 0;
		}

		.spotlight.onscroll-image-fade-in .image img {
			-moz-transition: opacity 0.75s ease-in-out;
			-webkit-transition: opacity 0.75s ease-in-out;
			-ms-transition: opacity 0.75s ease-in-out;
			transition: opacity 0.75s ease-in-out;
		}

		.spotlight.onscroll-image-fade-in.is-inactive .image img {
			opacity: 0;
		}

/* Spotlight (style1) */

		.spotlight.style1 {
			-moz-align-items: -moz-stretch;
			-webkit-align-items: -webkit-stretch;
			-ms-align-items: -ms-stretch;
			align-items: stretch;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
			-moz-justify-content: -moz-flex-end;
			-webkit-justify-content: -webkit-flex-end;
			-ms-justify-content: -ms-flex-end;
			justify-content: flex-end;
			position: relative;
			overflow-x: hidden;
			text-align: left;
			width: 1200px;
			margin: 0 auto;
		}


		.spotlight.style1 .content {
			-moz-align-self: center;
			-webkit-align-self: center;
			-ms-align-self: center;
			align-self: center;
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
			-moz-flex-shrink: 1;
			-webkit-flex-shrink: 1;
			-ms-flex-shrink: 1;
			flex-shrink: 1;
		}

		.spotlight.style1 .image {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			width: 600px;
			height: 800px;
			border-radius: 0;
		}

		.spotlight.style1 .image img {
			-moz-object-fit: cover;
			-webkit-object-fit: cover;
			-ms-object-fit: cover;
			object-fit: cover;
			-moz-object-position: center;
			-webkit-object-position: center;
			-ms-object-position: center;
			object-position: center;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 0;
		}

		.spotlight.style1.orient-right {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

		.spotlight.style1.content-align-center {
			text-align: center;
		}

		.spotlight.style1.content-align-right {
			text-align: left;
		}

		.spotlight.style1.image-position-left .image img {
			-moz-object-position: left;
			-webkit-object-position: left;
			-ms-object-position: left;
			object-position: left;
		}

		.spotlight.style1.image-position-right .image img {
			-moz-object-position: right;
			-webkit-object-position: right;
			-ms-object-position: right;
			object-position: right;
		}

	.spotlight .image {
		background-color: rgba(0, 0, 0, 0);
	}


/* Wrapper (style1) inner */

	.wrapper.style1 > .inner {
		padding: 4rem 2rem 4rem 2rem ;
		margin: 0 auto;
		max-width: 100%;
		background-color: #eeeeee;
	}

	.wrapper.style1 .inner p {
		font-size: 0.85rem;
		margin: 1.2rem 0 1.2rem 0;
	}

	.inner .button {
		margin-bottom: 0;
		background-color: #f44d4d;
		color: #ffffff !important;
	}

	.inner .button:hover {
		margin-bottom: 0;
		background-color: #ffffff;
		color: #000000 !important;
		font-weight: bold;
	}

	.info {
		margin-top: 2rem;
	}
	.inner .icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
		margin-bottom: 1rem;
	}

	.icons li {
		display: inline-block;
		padding: 0 1rem;
	}

	.icons li a {
		color: #000000;
	}

	.icons li a:hover {
		color: #f44d4d;
	}

	.copyright {
		font-family: 'Roboto';
		list-style: none;
		color: #999999;
	}

	.copyright li {
		font-size: 0.8rem;
		padding: 0 0.25rem;
	}

	.copyright li a {
		color: #666666;
	}

	.copyright li a:hover {
		text-decoration: none;
		color: #f44d4d;
		font-weight: bold;
	}



/* media query */

	@media screen and (max-width: 1480px) and (min-width: 861px) {
		.divided section:nth-child(n+3):nth-child(2n+1) .content {
			padding: 0 0 0 4rem;
		}
		.divided section:nth-child(2n) .content {
			margin-right: 2rem;
		}
	}

	@media screen and (max-width: 1200px) {
		html {
			font-size: 16pt;
			font-family: 'SeoulHangang';
		}
		.spotlight.style1 {
			width: 100%;
		}
		.spotlight.style1 .image {
			width: 50%;
		}
		.top {
			left: 7.5%;
		}
	}

	@media screen and (max-width: 1200px) and (orientation: portrait) {
		.spotlight.style1 {
			-moz-flex-direction: column-reverse;
			-webkit-flex-direction: column-reverse;
			-ms-flex-direction: column-reverse;
			flex-direction: column-reverse;
			text-align: center !important;
		}
		.spotlight.style1 .image {
			width: auto;
			height: 800px;
			margin: 0 auto;
		}
		.spotlight.style1 .image img {
			position: relative;
		}
	}

	@media screen and (max-width: 860px) and (orientation: portrait) {
		.spotlight.style1.orient-right {
			-moz-flex-direction: column-reverse;
			-webkit-flex-direction: column-reverse;
			-ms-flex-direction: column-reverse;
			 flex-direction: column-reverse;
		}
		.content {
			max-width: 24rem;
		}
		.divided section:nth-child(n+4):nth-child(-n+5) h3 {
			max-width: 24rem;
			text-align: center;
		}
		footer {
			padding-top: 4rem;
		}
	}

	@media screen and (max-width: 780px) {
		.banner.style5 {
			padding: 5rem 2em 1rem 2rem;
		}
		.title h2 {
			font-size: 2rem;
			max-width: 18rem;
		}
		.content{
			margin-top: -50px;
			z-index: 1;
			font-size: 0.7rem;
		}
		.content h3 {
			font-size: 1.8rem;
			margin: 0 1rem;
		}
		.content p {
			margin: 1rem;
		}
		.button {
			margin-bottom: 2rem;
		}
	}

	@media screen and (max-width: 457px) {
		.title h2 {
			font-size: 1.75rem;
			max-width: 16rem;
		}
		.banner.style5 {
			padding: 5rem 1em 1rem 1rem;
		}

	@media screen and (max-width: 375px) {
		html, body {
			width: 375px;
		}
	}