@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 100;
	src: local('Noto Sans Thin'), local('NotoSans-Thin'),
	url(../font/NotoSansKR-Thin-Hestia.eot),
	url(../font/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
	url(../font/NotoSansKR-Thin-Hestia.woff) format('woff'),
	url(../font/NotoSansKR-Thin-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 300;
	src: local('Noto Sans Light'), local('NotoSans-Light'),
	url(../font/NotoSansKR-Light-Hestia.eot),
	url(../font/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
	url(../font/NotoSansKR-Light-Hestia.woff) format('woff'),
	url(../font/NotoSansKR-Light-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 350;
	src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
	url(../font/NotoSansKR-DemiLight-Hestia.eot),
	url(../font/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
	url(../font/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
	url(../font/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 400;
	src: local('Noto Sans Regular'), local('NotoSans-Regular'),
	url(../font/NotoSansKR-Regular-Hestia.eot),
	url(../font/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
	url(../font/NotoSansKR-Regular-Hestia.woff) format('woff'),
	url(../font/NotoSansKR-Regular-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 500;
	src: local('Noto Sans Medium'), local('NotoSans-Medium'),
	url(../font/NotoSansKR-Medium-Hestia.eot),
	url(../font/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
	url(../font/NotoSansKR-Medium-Hestia.woff) format('woff'),
	url(../font/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 700;
	src: local('Noto Sans Bold'), local('NotoSans-Bold'),
	url(../font/NotoSansKR-Bold-Hestia.eot),
	url(../font/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
	url(../font/NotoSansKR-Bold-Hestia.woff) format('woff'),
	url(../font/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 900;
	src: local('Noto Sans Black'), local('NotoSans-Black'),
	url(../font/NotoSansKR-Black-Hestia.eot),
	url(../font/NotoSansKR-Black-Hestia.eot?#iefix) format('embedded-opentype'),
	url(../font/NotoSansKR-Black-Hestia.woff) format('woff'),
	url(../font/NotoSansKR-Black-Hestia.otf) format('opentype');
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-family: 'Noto Sans Korean';	font-weight: 300;
}

body {
	line-height: 1; }

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

nav ul {
	list-style: none; }

blockquote, q {
	quotes: none; }

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

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent; }

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none; }

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold; }

del {
	text-decoration: line-through; }

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help; }

table {
	border-collapse: collapse;
	border-spacing: 0; }

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0; }

input, select {
	vertical-align: middle; }

/*
 * variables
 */
/* Default Equations */
/* Penner Equations (approximated) originally created by @robpenner */
/*
 * mixins
 */
/*
 * keyframe animation
 */
@-webkit-keyframes fadeIn {
	0% {
	opacity: 0; }
	100% {
	opacity: 1; } }
@-moz-keyframes fadeIn {
	0% {
	opacity: 0; }
	100% {
	opacity: 1; } }
@keyframes fadeIn {
	0% {
	opacity: 0; }
	100% {
	opacity: 1; } }
@-webkit-keyframes fadeOut {
	0% {
	opacity: 1; }
	100% {
	opacity: 0; } }
@-moz-keyframes fadeOut {
	0% {
	opacity: 1; }
	100% {
	opacity: 0; } }
@keyframes fadeOut {
	0% {
	opacity: 1; }
	100% {
	opacity: 0; } }
@-webkit-keyframes scaleUp {
	100% {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; } }
@-moz-keyframes scaleUp {
	100% {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; } }
@keyframes scaleUp {
	100% {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; } }
@-webkit-keyframes backgroundError {
	0% {
	background: #FBFFE8; }
	20% {
	background: #D5F2F2; }
	40% {
	background: #EAEDFE; }
	60% {
	background: #FFF0F0; }
	80% {
	background: #CDF0FE; }
	100% {
	background: #FBFFE8; } }
@-moz-keyframes backgroundError {
	0% {
	background: #FBFFE8; }
	20% {
	background: #D5F2F2; }
	40% {
	background: #EAEDFE; }
	60% {
	background: #FFF0F0; }
	80% {
	background: #CDF0FE; }
	100% {
	background: #FBFFE8; } }
@keyframes backgroundError {
	0% {
	background: #FBFFE8; }
	20% {
	background: #D5F2F2; }
	40% {
	background: #EAEDFE; }
	60% {
	background: #FFF0F0; }
	80% {
	background: #CDF0FE; }
	100% {
	background: #FBFFE8; } }
/*
 * fonts
*/
@font-face {
	font-family: 'Styrene B Web';
	src: url("fonts/StyreneB-Regular-Web.woff2") format("woff2"), url("fonts/StyreneB-Regular-Web.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-stretch: normal; }
/*
 * global
 */
/*
* {
	-webkit-overflow-scrolling: touch;
}
*/
body {
	font-family: 'Noto Sans Korean';
	/*font-family: helvetica, arial, sans-serif;
	font-feature-settings: "liga", "kern";*/ }

h1, h2, h3, p, a, span, ul li, input {
	font-family: 'Noto Sans Korean', helvetica, arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	color: inherit;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-size: 13px;
	line-height: 20px;
	color: #555; }

a {
	color: inherit;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent; }

ul {
	list-style: none; }

img {
	max-width: 100%; }

img,
video {
	-moz-user-select: -moz- none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
	-moz-user-drag: -moz- none;
	-webkit-user-drag: none;
	user-drag: none; }

main, section, aside, div {
	position: relative; }

/*
 * layout
 */
body {
	overscroll-behavior: none; }
	body:before {
	content: '';
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
	z-index: 4;
	opacity: 0;
	-webkit-transition: opacity 0.7s ease-out;
	-moz-transition: opacity 0.7s ease-out;
	-ms-transition: opacity 0.7s ease-out;
	-o-transition: opacity 0.7s ease-out;
	transition: opacity 0.7s ease-out; }
	body > div#loader {
	position: fixed;
	width: 0;
	height: 5px;
	top: 0;
	left: 0;
	background: #fff;
	display: block;
	z-index: 5;
	pointer-events: none; }
	body > header a {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	z-index: 2;
	color: #555;
	-moz-user-select: -moz- none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none; }
	body > header a.index {
		left: 13px;
		transform: translateY(-50%) rotate(0); }
	body > header a.about {
		right: 13px; }
	body main {
	background-color: #fff; }
	body main article {
		position: relative;
		z-index: 5;
		overflow: hidden; }
		body main article header {
		-webkit-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
		-moz-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
		-ms-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
		-o-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
		transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1); }
		body main article header h1, body main article header span, body main article header a {
			position: fixed;
			top: 50%;
			z-index: 2;
			color: #AAA;
			mix-blend-mode: difference;
			writing-mode: vertical-rl;
			-moz-user-select: -moz- none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-o-user-select: none;
			user-select: none; }
		body main article header h1, body main article header a, body main article header span {
			-webkit-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			-moz-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			-ms-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			-o-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1); }
		body main article header h1, body main article header span {
			left: 13px;
			transform: translateY(-50%) rotate(-180deg); }
		body main article header h1 {
			text-align: center; }
		body main article header span {
			opacity: 0; }
		body main article header a {
			right: 13px;
			transform: translateY(-50%); }
		body main article header.fade h1 {
			opacity: 0;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-ms-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s; }
		body main article footer {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		cursor: pointer; }

		body main article section:not(.about):nth-of-type(1) {
		width: 100vw;
		height: 100vh;
		overflow: hidden; }
		body main article section:not(.about):nth-of-type(1) div {
			width: 100%;
			height: 100%;
			transform-origin: top left; }
			body main article section:not(.about):nth-of-type(1) div.active {
			-webkit-transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			-moz-transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			-ms-transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			-o-transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1); }
		body main article section:not(.about):nth-of-type(1) video,
		body main article section:not(.about):nth-of-type(1) img {
			width: 100%;
			height: 100%;
			object-fit: cover; }
			body main article section:not(.about):nth-of-type(1) video.top-left,
			body main article section:not(.about):nth-of-type(1) img.top-left {
			object-position: top left; }
			body main article section:not(.about):nth-of-type(1) video.top-center,
			body main article section:not(.about):nth-of-type(1) img.top-center {
			object-position: top center; }
			body main article section:not(.about):nth-of-type(1) video.top-right,
			body main article section:not(.about):nth-of-type(1) img.top-right {
			object-position: top right; }
			body main article section:not(.about):nth-of-type(1) video.center-left,
			body main article section:not(.about):nth-of-type(1) img.center-left {
			object-position: center left; }
			body main article section:not(.about):nth-of-type(1) video.center-center,
			body main article section:not(.about):nth-of-type(1) img.center-center {
			object-position: center center; }
			body main article section:not(.about):nth-of-type(1) video.center-right,
			body main article section:not(.about):nth-of-type(1) img.center-right {
			object-position: center right; }
			body main article section:not(.about):nth-of-type(1) video.bottom-left,
			body main article section:not(.about):nth-of-type(1) img.bottom-left {
			object-position: bottom left; }
			body main article section:not(.about):nth-of-type(1) video.bottom-center,
			body main article section:not(.about):nth-of-type(1) img.bottom-center {
			object-position: bottom center; }
			body main article section:not(.about):nth-of-type(1) video.bottom-right,
			body main article section:not(.about):nth-of-type(1) img.bottom-right {
			object-position: bottom right; }
		body main article section:not(.about):nth-of-type(1).peek {
			-webkit-transition: height 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			-moz-transition: height 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			-ms-transition: height 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			-o-transition: height 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			transition: height 1.2s cubic-bezier(0.83, 0, 0.17, 1);
			height: calc(100vh - 180px); }
		body main article section:not(.about):nth-of-type(2) {
		background: #fff; }
		body main article section:not(.about):nth-of-type(2) > p {
			text-align: center;
			margin: 0 auto;
			max-width: 600px;
			padding: 40px 60px 0;
			font-size: 16px;
			line-height: 25px; }
		body main article section:not(.about):nth-of-type(2) > div {
			padding: 20px 0;
			width: 100%;
			overflow: hidden; }
			body main article section:not(.about):nth-of-type(2) > div > div img,
			body main article section:not(.about):nth-of-type(2) > div > div video {
			object-fit: contain;
			display: block;
			margin: 0 auto; }
			body main article section:not(.about):nth-of-type(2) > div > div.half, body main article section:not(.about):nth-of-type(2) > div > div.full {
			width: 100%; }
			body main article section:not(.about):nth-of-type(2) > div > div.full img,
			body main article section:not(.about):nth-of-type(2) > div > div.full video {
			width: 100%; }
			body main article section:not(.about):nth-of-type(2) > div > div.half:nth-of-type(1) {
			margin-bottom: 40px; }
			body main article section:not(.about):nth-of-type(2) > div > div.half img,
			body main article section:not(.about):nth-of-type(2) > div > div.half video {
			width: 75%; }
			body main article section:not(.about):nth-of-type(2) > div:nth-of-type(1) {
			padding-top: 40px; }
			body main article section:not(.about):nth-of-type(2) > div:last-child {
			padding-bottom: 0; }
			body main article section:not(.about):nth-of-type(2) > div:last-child > div.half:last-child {
				margin-bottom: 40px; }
		/*body main article section.about > div:nth-of-type(1) {
		width: 100vw;
		height: 100vh; }
		body main article section.about > div:nth-of-type(1) div {
			top: 15%;
			left: 25%;
			width: 50%;
			height: 70%;
			transform-origin: top left; }
			body main article section.about > div:nth-of-type(1) div.active {
			-webkit-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
			-moz-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
			-ms-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
			-o-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
			transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1); }
		body main article section.about > div:nth-of-type(1) img,
		body main article section.about > div:nth-of-type(1) video {
			width: 100%;
			height: 100%;
			object-fit: contain; }
		body main article section.about > div:nth-of-type(2) {
		padding: 0 0 100px; }
		body main article section.about > div:nth-of-type(2) > h1 {
			text-align: center;
			margin: 0 auto 40px;
			font-size: 20px;
			line-height: 28px;
			transform: matrix(0.65, 0, 0, 0.65, 0, -200);
			transform-origin: bottom;
			-webkit-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			-moz-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			-ms-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			-o-transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1);
			transition: opacity 0.6s cubic-bezier(0, 0, 0.58, 1); }
		body main article section.about > div:nth-of-type(2) > p {
			text-align: center;
			margin: 0 auto 40px;
			max-width: 600px;
			padding: 0 60px; }
		body main article section.about > div:nth-of-type(2) > div {
			padding: 0 80px; }
			body main article section.about > div:nth-of-type(2) > div div {
			margin: 0 auto 40px; }
			body main article section.about > div:nth-of-type(2) > div div p {
				text-align: center; }
		body main article section.about > div:nth-of-type(3) {
		padding: 0 40px;
		overflow: auto; }
		body main article section.about > div:nth-of-type(3) p {
			text-align: center;
			margin: 0 auto 80px;
			max-width: 600px;
			padding: 0 60px; }
		body main article section.about > div:nth-of-type(3) > div {
			float: left;
			width: 50%;
			text-align: center;
			height: calc( 30vw + 100px ); }
			body main article section.about > div:nth-of-type(3) > div a span:nth-of-type(1) {
			text-decoration: underline; }
			body main article section.about > div:nth-of-type(3) > div img {
			width: 100%;
			height: 30vw;
			object-fit: contain;
			mix-blend-mode: multiple;
			opacity: .5; }
			body main article section.about > div:nth-of-type(3) > div span {
			display: block; }
		@media (hover: hover) {
			body main article section.about > div:nth-of-type(3) div img {
			-webkit-transition: all 0.5s ease-out;
			-moz-transition: all 0.5s ease-out;
			-ms-transition: all 0.5s ease-out;
			-o-transition: all 0.5s ease-out;
			transition: all 0.5s ease-out; }
			body main article section.about > div:nth-of-type(3) div span {
			opacity: 0;
			-webkit-transition: all 0.5s ease-out;
			-moz-transition: all 0.5s ease-out;
			-ms-transition: all 0.5s ease-out;
			-o-transition: all 0.5s ease-out;
			transition: all 0.5s ease-out; }
			body main article section.about > div:nth-of-type(3) div:hover img {
			-webkit-transition: all 0.1s ease-out;
			-moz-transition: all 0.1s ease-out;
			-ms-transition: all 0.1s ease-out;
			-o-transition: all 0.1s ease-out;
			transition: all 0.1s ease-out;
			mix-blend-mode: initial;
			opacity: 1; }
			body main article section.about > div:nth-of-type(3) div:hover span {
			-webkit-transition: all 0.1s ease-out;
			-moz-transition: all 0.1s ease-out;
			-ms-transition: all 0.1s ease-out;
			-o-transition: all 0.1s ease-out;
			transition: all 0.1s ease-out;
			opacity: 1; } }
		body main article section.about > div:nth-of-type(4) {
		padding: 40px;
		overflow: auto; }
		body main article section.about > div:nth-of-type(4) p {
			text-align: center;
			margin: 0 auto;
			max-width: 600px;
			padding: 0 60px; }
			body main article section.about > div:nth-of-type(4) p a {
			text-decoration: underline; }
			body main article section.about > div:nth-of-type(4) p a:hover {
				text-decoration: none; }*/
		body main article section.slides,
		body main article section.about {
		-webkit-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
		-moz-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
		-ms-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
		-o-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
		transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75); }
/*		body main article.up header a {
		position: absolute;
		bottom: 150vh;
		top: auto;
		transform: translateY(50%); }*/
	body main aside {
		overscroll-behavior: none; }
		body main aside.cover {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100%;
		overflow: hidden;
		display: none;
		z-index: 6;
		background: #fff;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		cursor: pointer; }
		body main aside.cover img,
		body main aside.cover video {
			width: 100%;
			height: 100%;
			object-fit: cover; }
			body main aside.cover video{
			width: 106%;
			height: 106%;
			margin-left: -3%;
			margin-top: -3%;
			}
			body main aside.cover img.top-left,
			body main aside.cover video.top-left {
			object-position: top left; }
			body main aside.cover img.top-center,
			body main aside.cover video.top-center {
			object-position: top center; }
			body main aside.cover img.top-right,
			body main aside.cover video.top-right {
			object-position: top right; }
			body main aside.cover img.center-left,
			body main aside.cover video.center-left {
			object-position: center left; }
			body main aside.cover img.center-center,
			body main aside.cover video.center-center {
			object-position: center center; }
			body main aside.cover img.center-right,
			body main aside.cover video.center-right {
			object-position: center right; }
			body main aside.cover img.bottom-left,
			body main aside.cover video.bottom-left {
			object-position: bottom left; }
			body main aside.cover img.bottom-center,
			body main aside.cover video.bottom-center {
			object-position: bottom center; }
			body main aside.cover img.bottom-right,
			body main aside.cover video.bottom-right {
			object-position: bottom right; }
		body main aside.cover span {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			-webkit-transform: scale(1.2);
			-moz-transform: scale(1.2);
			-ms-transform: scale(1.2);
			-o-transform: scale(1.2);
			transform: scale(1.2); }
			body main aside.cover span img {
			-webkit-filter: blur(30px);
			-moz-filter: blur(30px);
			-ms-filter: blur(30px);
			-o-filter: blur(30px);
			filter: blur(30px); }
		body main aside.cover:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/*background: rgba(0, 0, 0, 0.15) url(../images/logo_suap.svg) no-repeat center center;*/
			background: rgba(0, 0, 0, 0.25);
			background-size: 65%;
			z-index: 2;
			-webkit-transition: opacity 0.4s ease-out;
			-moz-transition: opacity 0.4s ease-out;
			-ms-transition: opacity 0.4s ease-out;
			-o-transition: opacity 0.4s ease-out;
			transition: opacity 0.4s ease-out; }
		body main aside.cover.active {
			display: block; }
		body main aside.projects {
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100vw;
		height: 100%;
		overflow: auto;
		cursor: move;
		cursor: grab;
		cursor: -moz-grab;
		cursor: -webkit-grab;
		background: #fff;
		-ms-overflow-style: none;
		overflow: -moz-scrollbars-none;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch; }
		body main aside.projects::-webkit-scrollbar {
			display: none; }
		body main aside.projects:active {
			cursor: grabbing;
			cursor: -moz-grabbing;
			cursor: -webkit-grabbing; }
		body main aside.projects nav {
			text-align: center;
			width: 350vw;
			padding: 25vh 25vw;
			transform: matrix(1, 0, 0, 1, 0, 0);
			font-size: 0;
			-webkit-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
			-moz-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
			-ms-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
			-o-transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
			transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75); }
			body main aside.projects nav a {
			font-size: initial;
			position: absolute;
			display: inline-block;
			vertical-align: middle;
			text-decoration: none;
			will-change: transform;
			transform-origin: center;
			-webkit-transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
			-moz-transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
			-ms-transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
			-o-transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
			transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
			-moz-user-select: -moz- none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-o-user-select: none;
			user-select: none;
			-moz-user-drag: -moz- none;
			-webkit-user-drag: none;
			user-drag: none;
			-webkit-backface-visibility: hidden;
			-webkit-perspective: 1000; }
			body main aside.projects nav a span:nth-of-type(1) {
				position: relative;
				display: flex; }
				body main aside.projects nav a span:nth-of-type(1) video,
				body main aside.projects nav a span:nth-of-type(1) img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
				opacity: 0; }
				body main aside.projects nav a span:nth-of-type(1) video.loaded,
				body main aside.projects nav a span:nth-of-type(1) img.loaded {
					opacity: 1; }
				body main aside.projects nav a span:nth-of-type(1):before {
				position: relative;
				content: '';
				pointer-events: none;
				width: 100%;
				background: rgba(0, 0, 0, 0.1);
				padding-bottom: var(--ratio);
				z-index: -1; }
			body main aside.projects nav a span:nth-of-type(2) {
				text-align: left;
				display: block;
				opacity: 0;
				width: 0;
				white-space: nowrap;
				overflow: hidden;
				margin-top: 10px;
				-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
				-moz-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
				-ms-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
				-o-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
			@media (hover: hover) {
				body main aside.projects nav a:hover span:nth-of-type(2) {
				-webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), width 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
				-moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), width 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
				-ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), width 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
				-o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), width 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
				transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), width 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
				opacity: 1;
				width: 100%; } }
			body main aside.projects nav a.small {
				width: 210px; }
			body main aside.projects nav a.medium {
				width: 240px; }
			body main aside.projects nav a.large {
				width: 280px; }
		body main aside.index {
		position: fixed;
		width: 100vw;
		height: 100%;
		top: 0;
		left: 0;
		overflow: auto;
		z-index: 3;
		display: none; }
		body main aside.index header a {
			position: fixed;
			top: 50vh;
			right: 20px;
			z-index: 2;
			color: #555;
			transform: translateY(-50%);
			writing-mode: vertical-rl;
			-moz-user-select: -moz- none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-o-user-select: none;
			user-select: none; }
		body main aside.index nav {
			padding: 50px 30px; }
			body main aside.index nav a {
			line-height: 30px;
			color: #555;
			display: table;
			text-decoration: none;
			-webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
			-moz-transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
			-ms-transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
			-o-transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
			transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1); }
		body main aside.helper {
		position: fixed;
		width: 100vw;
		height: 100vh;
		display: none;
		pointer-events: none; }
	body.page-template-page-project main article {
	/*
	header{

		h1, span, a{
			@include transition( none );
			@include animation( fadeIn .6s $easeOut 0s forwards );
		}

	}
	*/ }
	body.page-template-page-project main article section:nth-of-type(1) {
		background: #fff; }
	body.page-template-page-project main aside.projects, body.project main aside.projects {
	pointer-events: none; }
	body.page-template-page-about main aside.projects, body.about main aside.projects {
	pointer-events: none; }
	body.page-template-page-about article.press header span, body.about article.press header span {
	opacity: 1; }
	body.page-template-page-about article.up header span, body.about article.up header span {
	position: absolute;
	bottom: 150vh;
	top: auto;
	transform: translateY(50%) rotate(-180deg); }
	body.error404 main {
	color: #555;
	-webkit-animation: backgroundError 10s linear infinite;
	-moz-animation: backgroundError 10s linear infinite;
	-o-animation: backgroundError 10s linear infinite;
	animation: backgroundError 10s linear infinite; }
	body.error404 main article section {
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: center; }
		body.error404 main article section p {
		text-align: center; }
		body.error404 main article section p a {
			text-decoration: underline; }
			body.error404 main article section p a:hover {
			text-decoration: none; }
	body.loading header,
	body.loading main {
	pointer-events: none; }
	body.loading:before {
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	opacity: 1; }
	body.cover-scale aside.cover {
	/*
	top: 50%;
	left: 50%;
	@include transform( translate3d( -50%, -50%, 0) );
	*/
	background: none;
	-webkit-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
	-moz-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
	-ms-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
	-o-transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1);
	transition: all 1.4s cubic-bezier(0.83, 0, 0.17, 1); }
	body.cover-scale aside.cover:before {
		opacity: 0; }
	body.index > header {
	display: none; }
	body.index main aside.projects {
	pointer-events: none; }
	body.index main aside.projects nav a {
		mix-blend-mode: multiply;
		opacity: 0.2; }
		body.index main aside.projects nav a.sharp {
		mix-blend-mode: initial;
		opacity: 1;
		-webkit-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
		-moz-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
		-ms-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
		-o-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
		transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1); }
	body.index main aside.index {
	display: block;
	opacity: 0;
	-webkit-animation: fadeIn 800ms cubic-bezier(0, 0, 0.58, 1) forwards;
	-moz-animation: fadeIn 800ms cubic-bezier(0, 0, 0.58, 1) forwards;
	-o-animation: fadeIn 800ms cubic-bezier(0, 0, 0.58, 1) forwards;
	animation: fadeIn 800ms cubic-bezier(0, 0, 0.58, 1) forwards; }
	body.about-move main aside.projects nav a:last-child {
	-webkit-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
	-moz-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
	-ms-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
	-o-transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1);
	transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0s cubic-bezier(0, 0, 0.58, 1); }

/*
 * media queries
 */
@media screen and (min-width: 760px) {
/*	h1, h2, h3, p, a, span, ul li, input {
	font-size: 16px;
	line-height: 25px; */
	}

	body > header a.index {
	left: 20px; }
	body > header a.about {left : 30px; bottom: 30px; right: auto; top: auto; transform:none; writing-mode:initial; }
	body main article header h1, body main article header span {
	left: 20px; }
	body main article header a {
	right: 20px; }
	body main article header a.fz2 {
	font-size: 3em;
	color: #000;
	opacity: 0.7;
	right: 37px;
	}
	body main article section:not(.about):nth-of-type(2) p {
	padding: 80px 60px;
	font-size: 20px;
	line-height: 28px; }
	body main article section:not(.about):nth-of-type(2) > div {
	display: flex;
	height: auto;
	opacity: 0;
	-webkit-transition: opacity 0.6s ease-in-out;
	-moz-transition: opacity 0.6s ease-in-out;
	-ms-transition: opacity 0.6s ease-in-out;
	-o-transition: opacity 0.6s ease-in-out;
	transition: opacity 0.6s ease-in-out; }
	body main article section:not(.about):nth-of-type(2) > div > div {
		display: flex;
		justify-content: center;
		text-align: left;
		padding: 20px;
		width: calc( 100vw - 40px );
		height: calc( 100vh - 40px ); }
		body main article section:not(.about):nth-of-type(2) > div > div img,
		body main article section:not(.about):nth-of-type(2) > div > div video {
		max-height: 100%; }
		body main article section:not(.about):nth-of-type(2) > div > div.half:nth-of-type(1) {
		margin-bottom: 0; }
		body main article section:not(.about):nth-of-type(2) > div > div.full.small img,
		body main article section:not(.about):nth-of-type(2) > div > div.full.small video {
		max-width: 50%; }
		body main article section:not(.about):nth-of-type(2) > div > div.full.medium img,
		body main article section:not(.about):nth-of-type(2) > div > div.full.medium video {
		max-width: 75%; }
		body main article section:not(.about):nth-of-type(2) > div > div.full.large img,
		body main article section:not(.about):nth-of-type(2) > div > div.full.large video {
		max-width: 100%; }
		body main article section:not(.about):nth-of-type(2) > div > div.small img,
		body main article section:not(.about):nth-of-type(2) > div > div.small video {
		height: 50%; }
		body main article section:not(.about):nth-of-type(2) > div > div.medium img,
		body main article section:not(.about):nth-of-type(2) > div > div.medium video {
		height: 67%; }
		body main article section:not(.about):nth-of-type(2) > div > div.large img,
		body main article section:not(.about):nth-of-type(2) > div > div.large video {
		height: 100%; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover video {
		width: 100%;
		height: 100%;
		object-fit: cover; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.top-left img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.top-left video {
		object-position: top left; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.top-center img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.top-center video {
		object-position: top center; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.top-right img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.top-right video {
		object-position: top right; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.center-left img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.center-left video {
		object-position: center left; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.center-center img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.center-center video {
		object-position: center center; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.center-right img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.center-right video {
		object-position: center right; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.bottom-left img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.bottom-left video {
		object-position: bottom left; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.bottom-center img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.bottom-center video {
		object-position: bottom center; }
		body main article section:not(.about):nth-of-type(2) > div > div.cover.bottom-right img,
		body main article section:not(.about):nth-of-type(2) > div > div.cover.bottom-right video {
		object-position: bottom right; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).top-left {
		align-items: flex-start;
		justify-content: flex-start; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).top-center {
		align-items: flex-start;
		justify-content: center; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).top-right {
		align-items: flex-start;
		justify-content: flex-end; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).center-left {
		align-items: center;
		justify-content: flex-start; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).center-center {
		align-items: center;
		justify-content: center; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).center-right {
		align-items: center;
		justify-content: flex-end; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).bottom-left {
		align-items: flex-end;
		justify-content: flex-start; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).bottom-center {
		align-items: flex-end;
		justify-content: center; }
		body main article section:not(.about):nth-of-type(2) > div > div:not(.cover).bottom-right {
		align-items: flex-end;
		justify-content: flex-end; }
	body main article section:not(.about):nth-of-type(2) > div.show {
		opacity: 1; }
	body main article section:not(.about):nth-of-type(2) > div:nth-of-type(1) {
		padding-top: 0px; }
	body main article section:not(.about):nth-of-type(2) > div:last-child {
		padding-bottom: 100px; }
		body main article section:not(.about):nth-of-type(2) > div:last-child > div.half:last-child {
		margin-bottom: 0px; }
	/*body main article section.about > div:nth-of-type(2) > h1 {
	font-size: 54px;
	line-height: 75px;
	margin: 20px auto 100px;
	transform: matrix(0.3, 0, 0, 0.3, 0, -200); }
	body main article section.about > div:nth-of-type(2) > p {
	margin: 0 auto 100px; }
	body main article section.about > div:nth-of-type(2) > div {
	display: flex;
	justify-content: center; }
	body main article section.about > div:nth-of-type(2) > div div {
		margin: 0;
		width: 33.3333%; }
	body main article section.about > div:nth-of-type(3) div {
	width: 33.3333%;
	height: calc( 25vw + 100px ); }
	body main article section.about > div:nth-of-type(3) div img {
		height: 25vw; }*/
	body main aside.cover:before { background-size: 45%; }
	body main aside.projects nav { width: 200vw; padding: 28vh 28vw 13vh; overflow: hidden; min-height: 100vh; }
	body main aside.projects nav a.small {width: 420px; }
	body main aside.projects nav a.medium {width: 540px; }
	body main aside.projects nav a.large {width: 600px; }

@media screen and (min-width: 1200px) {
/*	body main article section.about > div:nth-of-type(3) div {
	width: 20%;
	height: calc( 15vw + 100px ); }
	body main article section.about > div:nth-of-type(3) div img {
		height: 15vw; } */
}

/*# sourceMappingURL=style.css.map */


button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}
button {
	background-color: transparent;
	overflow: visible;
	border: 0;
	outline: 0;
}
button,
select {
	text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled],
html input[disabled] {
	cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}
.projects a{font-family: 'Noto Sans Korean'; font-weight: 400;}
.projects a .t1{color: #fff; font-size: 14px; line-height: 1.5; margin-bottom: 10px; text-align: left;}
.projects a .t1 span.txt{color: #fff;	display: block; position: relative; padding-left: 5px;}
.projects a .t1 span.txt:after{position: absolute;left: 0;top: 4px;width: 2px;height: 16px;background-color: #fff;content: "";}
.projects a .t1 b{color: #fff; font-size: 18px; line-height: 1.5; font-weight: 400; display: block; }

.area_sitemap{position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.8); z-index: 7; display: none;}
.area_sitemap .btn_close{position: absolute; right: 30px; top: 30px; font-size: 40px; color: #fff;}
.area_sitemap .menu li{display: block; text-align: center;}
.area_sitemap .menu li:first-child{margin-top: 0;}
.area_sitemap .menu li a{
	display: block;
	padding-top: 20px; padding-bottom: 20px;
	font-family: 'Noto Sans Korean';
	font-size: 36px; line-height: 1.5; color: #fff; font-weight: 500; display: inline-block;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);


}
.area_sitemap .menu:hover li a{opacity: 0.5;}
.area_sitemap .menu li a:hover{
	padding-top: 30px; padding-bottom: 30px;
 opacity: 1;
 -webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);

}

.top_menu{position: fixed;right: 48px;top: 22px;z-index: 5;display: flex;justify-content: flex-end;align-items: center;}
.top_menu .mn{margin-left: 50px;}
.top_menu .mn a{color: #fff;font-size: 21px;display: inline-flex;justify-content: center;align-items: center;line-height: 1; padding: 9px;}
.top_menu .mn.lng{margin-left: 80px;}
.top_menu .mn.lng a{font-size: 18px;border: 2px #fff solid;color:#fff;padding: 8px 19px;border-radius: 11px;}

.project .header-bar{position: fixed;left: 0;top: 0;width: 100%;height: 0; width: 100%; z-index: 6;background-color: rgba(0, 0, 0, 0.5);}
.project .header-bar{ height: 80px; }
.project .btn_event,
.project .logo_top,
.project .top_menu{ z-index:7; }

@media screen and (max-width: 840px) {
	.project .header-bar{ height: 15vw; }
	.top_menu{position: fixed;right: 16vw;top: 3.3vw;}
	.top_menu .mn{ display: none; }
	.top_menu .lng{ display: block; }
	.top_menu .mn.lng a{font-size: 4vw; padding: 1.5vw 4vw;border-radius: 2vw;}
}


.pr-pt-s{padding-top: 20px !important;}
.pr-mt-s{margin-top: 20px !important;}
.ta-c{text-align: center !important;}
.ta-r{text-align: right !important;}
.inr-c{max-width: 1400px; margin-left: auto; margin-right: auto;}
.inr-c3{max-width: 1752px; margin-left: auto; margin-right: auto;}
.jc-c{justify-content: center;}

.cover .logo{position: absolute; left: 50%; top: 50%; width: 1126px; height: 383px; margin-left: -563px; margin-top: -191px; z-index: 2; }
.cover .txt{position: absolute;left: 0;top: 0;width: 100%;height: 100%;margin-left: 0;margin-top: 0;z-index: 3;opacity: 0;text-align: center;}
.cover .txt .flex{position: absolute;left: 0;top: 0;width: 100%;height: 100%; display: flex; align-items: center;justify-content: center;}
.cover .txt .inner{display: inline-block; text-align: left; background-image: url(../images/main/ico_qq1.png) , url(../images/main/ico_qq2.png);background-repeat: no-repeat;background-position: 0 0 , 100% 100%;padding:20px 96px;color: #fff;font-size: 24px;line-height: 1.8; font-weight: 500;}
@media screen and (max-width: 840px) {
	.cover .txt .inner{padding:4vw 15vw;font-size: 4vw;background-size:10vw;margin: 0 8vw;word-break: keep-all;text-align: center;}
	.cover .txt br{display:none; }
	.area_sitemap .menu li a{

	padding-top: 3vw; padding-bottom: 3vw;
	font-family: 'Noto Sans Korean';
	font-size: 7vw;
}
	.area_sitemap .menu li a:hover{
		padding-top: 2vw; padding-bottom: 2vw;
	}
}


.logo_top{position: fixed; left: 25px; top: 30px; z-index: 2;}
.btn_search{position: fixed;right: 51px;top: 30px;z-index: 2; display: none !important;}
/*.btn_event{position: fixed;right: 130px;top: 30px;z-index: 5;}*/
.btn_event{position: fixed;right: 51px;top: 20px;z-index: 5;}
.btn_event2{position: fixed;right: 40px;bottom: 91px;z-index: 5;}



.btn_sitemap{position: fixed;right: 50px;bottom: 38px;z-index: 7;width: 31px;height: 29px; font-family: 'Noto Sans Korean'; font-weight: 300;}
.btn_sitemap span{position: absolute; left: 0; top: 0; width: 100%; height: 3px; background-color: #fff;
-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	}
.btn_sitemap span.n2{top: 50%; margin-top: -1px; width: 70%;}
.btn_sitemap span.n3{bottom: 0; top: auto;}

.btn_sitemap:hover span{background-color: #b10003;}
.btn_sitemap:hover span.n2{ width: 100%; }
.btn_sitemap.active span{background-color: #b10003;}
.btn_sitemap.active span.n1{top: 50%; margin-top: -1px;}
.btn_sitemap.active span.n3{bottom: 50%; margin-top: 1px;}

.project .btn_sitemap span{ background: #ccc; }
.project .btn_event2{z-index: 6;}
.project .btn_sitemap{z-index: 7;}


.b-box .box_txt1{position: absolute; font-weight: 400; font-size: 14px; font-family: 'Noto Sans Korean';}
.b-box.about .box_txt1{left: -21px;top: -57px;background-color: #a3a3a3;color: #000;text-align: center;padding: 7px 13px;width: 150px;border-radius: 10px;display: none;font-size: 14px;}
.b-box.about .box_txt1 i{position: absolute;left: 50%;bottom: -21px;font-size: 35px;color: #a3a3a3;margin-left: -25px;}

.b-box.index .box_txt1{left: 39px;top: 0px;background-color: #a3a3a3;color: #000;text-align: center;padding: 7px 13px;width: 100px; border-radius: 10px;display: none;font-size: 14px;writing-mode: initial;}
.b-box.index .box_txt1 i{position: absolute;left: 4px;bottom: 2px;font-size: 35px;color: #a3a3a3;margin-left: -25px;}

.b-box.btn_sitemap .box_txt1{left: -65px;background-color: #a3a3a3;color: #000;text-align: center;padding: 7px 13px;width: 113px; border-radius: 10px;display: none;bottom: 46px;font-size: 14px;}
.b-box.btn_sitemap .box_txt1 i{position: absolute;left: 50%;bottom: -21px;font-size: 35px;color: #a3a3a3;margin-left: -4px;}


.b-box.btn_event2 .box_txt1{left: -58px;background-color: #a3a3a3;color: #000;text-align: center;padding: 7px 13px;width: 113px; border-radius: 10px;display: none;bottom: 70px;font-size: 14px;}
.b-box.btn_event2 .box_txt1 i{position: absolute;left: 50%;bottom: -21px;font-size: 35px;color: #a3a3a3;margin-left: -4px;}

.b-box.btn_event .box_txt1{left: -50px;background-color: #a3a3a3;color: #000;text-align: center;padding: 7px 13px;width: 113px; border-radius: 10px;display: none;bottom: -50px;font-size: 14px;}
.b-box.btn_event .box_txt1 i{position: absolute;left: 50%;bottom: 22px;font-size: 35px;color: #a3a3a3;margin-left: -16px;}

.b-box.btn_lng{ position: relative; display: inline-flex; align-items: center; justify-content: center; }
.b-box.btn_lng .box_txt1{left: -28px;background-color: #a3a3a3;color: #000;text-align: center;padding: 7px 13px;width: 83px;border-radius: 10px;display: none;bottom: -49px;font-size: 14px;}
.b-box.btn_lng .box_txt1 i{position: absolute;left: 50%;bottom: 12px;font-size: 35px;color: #a3a3a3;margin-left: -16px;}

.index .main_options{opacity: 0.2;}

body main aside.index{z-index: 5;}
body main aside.index nav{display: flex;align-items: center;height: 100vh;}
body main aside.index nav a{color:#fff; font-size:18px; padding: 2px 0 3px;}
body main aside.index header a{color: #fff; font-size: 50px; right: 50px;}

body > header a.index img{width: 40px;}

.btn_search img{width: 40px;}
.btn_event img{width: 40px;}
.btn_event2 img{width: 50px;}


body main aside.index header a.allProduct{width:auto;height:auto;background:#fff;writing-mode: horizontal-tb;padding: 16px 66px;right: 122px; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; left: 0; right: auto; bottom: 0; top: auto;}
body main aside.index header a.allProduct span{ color:#000; font-size:16px; text-align:right; display:block; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
body main aside.index header a.allProduct:hover{background-color: #000; color: #fff;}
body main aside.index header a.allProduct:hover span{color: #fff;}


body main article section:not(.about):nth-of-type(1) .write img{width: auto; height: auto;}
body main article section:not(.about):nth-of-type(1) .write{position: absolute;right: 0;bottom: 0;z-index: 1;width: 100%;height: auto; opacity: 0; padding-bottom: 0;}
body main article section:not(.about):nth-of-type(1).peek .write{opacity: 1;-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;}

	.logo_top img{width: 80px;}

.slides .btn_event2{z-index: 6;}


body main article .no_cont{width: auto; height: auto;}


.sub2-cont{position: relative; height: 168px;}
.wrap_sub3{ position: absolute; left: 0; top: 0; width: 100%; height: 168px; background-color: rgba(0, 0, 0, 0.57);	}

@media screen and (max-width: 840px) {
	body main aside.projects nav a.small{width: 45vw;}
	body main aside.projects nav a.medium{width: 48vw;}
	body main aside.projects nav a.large{width: 52vw;}

	.logo_top{position: fixed;left: 5vw;top: 5vw;z-index: 2;}
	.btn_search{position: fixed;right: 5vw;top: 3vw;z-index: 2;}
	.btn_event{position: fixed;right: 5vw;top: 3vw;z-index: 2;}
	.logo_top img{width: 15vw;}
	.btn_search img{width: 8vw;}
	.btn_event img{width: 8vw;}

	#ui_head_artist{max-width: 50vw;}
	.cover .logo{position: absolute;left: 50%;top: 50%;width: 90vw;height: auto;margin-left: -45vw;margin-top: -15vw;z-index: 2;}
	.cover .logo img{width:100%}


	body main aside.index nav{display: flex;align-items: center;height: 100vh;}
	body main aside.index nav a{color:#fff; font-size:4vw; padding: 1vw 0 1vw;}
	body main aside.index header a{color: #fff; font-size: 7vw; right: 4vw;}
	body main aside.index header a.allProduct{padding: 2vw 15vw;left: 0;top: 93vh;}
	body main aside.index header a.allProduct span{ font-size:3vw;}
	body > header a.index img{width: 40px;}
	body main aside.index header a { right: 5vw; user-select: none; }

	.btn_event2 img{width: 8vw;}
	.btn_event2{position: fixed;right: 5vw;bottom: 20vw;}
	.btn_sitemap{position: fixed;right: 5vw;bottom: 7vw;z-index: 5;width: 8vw;height: 7vw;font-family: 'Noto Sans Korean';font-weight: 300;}
	.b-box.btn_event2 .box_txt1,
	.b-box.index .box_txt1,
	.b-box.btn_event .box_txt1,
	.b-box.about .box_txt1,
	.b-box.btn_sitemap .box_txt1{display:none !important;}
/*	.project .btn_event2{position: fixed;right: 1vw;bottom: 6vw;}*/


}




.tit_df{display:flex;align-items: center; margin-bottom:30px;}
.tit_st1 .tit_df .t1 {margin-bottom: 0;}
.lst_sns ul{display:flex; margin-left:40px; margin-top:7px; }
.footer_sub .lst_sns ul{display:flex; margin-left:17px; margin-top:7px; }
.lst_sns ul li{margin-right:5px;font-size: 0;}
.lst_sns a{ position:static; left:auto; top:auto;right:auto;bottom:auto;}
@media screen and (max-width: 840px) {
	.tit_df{margin-bottom:5vw;}
	.lst_sns ul{display:flex; margin-left:5vw; margin-top:0; }
	.lst_sns ul li{margin-right:0.1vw;font-size: 0;}
	.lst_sns ul li img{width:19px;}
}