@charset "utf-8";
/*font*/


/*Reset*/
*, *:after, *:before{margin:0; padding:0; box-sizing: border-box; word-break:keep-all;}
html, body, span, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, address, big, cite, mark, code, em, img, strong, sub, b, u, i,
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, menu, section, summary, time,  audio, video {  
	font-weight: normal;
    font-size:100%;
    font-family: 'Spoqa Han Sans Neo', sans-serif;
}

h1, h2, h3, h4, h5, h6 {clear:both; font-weight:normal; font-weight:500; margin-top: 0; }
ul, ol, li{list-style: none;}
table {width:100%; border-collapse: collapse; border-spacing: 0; table-layout:fixed;}
a{color: inherit; text-decoration: none; cursor:pointer;}
img {vertical-align:middle; border:0}
label {cursor:pointer;}
i, em, cite, address{font-style:normal;}
button{cursor: pointer; border: 0; overflow: hidden; white-space: nowrap; background: transparent; font-family: inherit; border-radius:2px;}
button:hover{opacity:0.9;}
button, input, select, textarea, radio{outline: none;}
input, select, textarea{padding:6px 8px; vertical-align:middle; border: 1px solid #c2c2c2; letter-spacing:-0.03em; font-family:inherit;  font-size:inherit;}
input[type="file"] {display:none;}
input[type="checkbox"], input[type="radio"]{margin:0;  padding: 0;}
input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
input:disabled {background: #e3e3e3;}
textarea {overflow: auto; font-family:inherit; resize:none;}
hr {border: 0; height:1px; border-top: 1px dotted rgba(0, 0, 0, 0.4); margin:9px 0 0;}
::placeholder {opacity:0.4; }
*:focus {outline: none;}

html{width:100%; overflow-x:hidden;}
/*Common*/
.hidden{position:absolute; visibility:hidden; font-size:0;}
table caption{visibility:hidden; font-size:0;}




@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    src: local('Spoqa Han Sans Neo Bold'),
    url('../fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansNeo-Bold.woff') format('woff'),
    url('../fonts/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}


@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    src: local('Spoqa Han Sans Neo Medium'),
    url('../fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansNeo-Medium.woff') format('woff'),
    url('../fonts/SpoqaHanSansNeo-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    src: local('Spoqa Han Sans Neo Regular'),
    url('../fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansNeo-Regular.woff') format('woff'),
    url('../fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 300;
    src: local('Spoqa Han Sans Neo Light'),
    url('../fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansNeo-Light.woff') format('woff'),
    url('../fonts/SpoqaHanSansNeo-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 100;
    src: local('Spoqa Han Sans Neo Thin'),
    url('../fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansNeo-Thin.woff') format('woff'),
    url('../fonts/SpoqaHanSansNeo-Thin.ttf') format('truetype');
}


/* 애니메이션 */
section.on [class*="fade_in"] {opacity:0;}	
section .fade_in_up, section .fade_in_left, section .fade_in_right {opacity: 0}

section.on .fade_in_up{
	animation-name: fadeInUp;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:0;
}

section.on .fade_in_up:nth-child(1){animation-delay:0}
section.on .fade_in_up:nth-child(2){animation-delay:0.4s}
section.on .fade_in_up:nth-child(3){animation-delay:0.8s}
section.on .fade_in_up:nth-child(4){animation-delay:1.2s}
section.on .fade_in_up:nth-child(5){animation-delay:1.4s}
section.on .fade_in_up:nth-child(6){animation-delay:1.6s}

section.on .fade_in_left{
	animation-name: fadeInLeft;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}

section.on .fade_in_right:nth-child(1){animation-delay: 0.1s}
section.on .fade_in_right:nth-child(2){animation-delay: 0.3s}
section.on .fade_in_right:nth-child(3){animation-delay: 0.5s}
section.on .fade_in_right:nth-child(4){animation-delay: 0.7s}
section.on .fade_in_right:nth-child(5){animation-delay: 0.9s}
section.on .fade_in_right:nth-child(6){animation-delay: 1s}
section.on .fade_in_right:nth-child(7){animation-delay: 1.3s}

section.on .fade_in_right{
	animation-name: fadeInRight;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}	

section.on .fade_in_on{
	animation-name: fadeInOn;
	animation-duration:3s;
	animation-fill-mode: forwards;
	animation-delay:1.5s;
}

 
@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInOn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeInOn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoWrapper video{
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
 	background-image: /* our video */;
 	background-position: center center;
 	background-size: contain;
    object-fit: cover; /*cover video background */
}

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}

.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 
  
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;
  
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}