* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
.content {
	min-height:100%;
	height:100%;
	background:#fff;
	position:relative;
	z-index:0;
}
.content h1 {
	padding:75px 0 30px 0;
	text-align:center;
	font-size:30px;
	line-height:30px;
}
.content .buttons {
	max-width:800px;
	margin:0 auto;
	text-align:center;
}
.content .buttons .button {
	display:inline-block;
	text-align:center;
	text-decoration:none;
	background:#efefef;
	padding:10px 15px;
	margin:10px;
	border-radius:3px;
	box-shadow:0 1px 2px rgba(0,0,0,.3);
	color:#333;
	font-weight:bold;
}
.content .buttons .button:hover {
	color:#fff;
	background:#009bd5;
}
/* modal style */ 

html.modal-active,body.modal-active {
	overflow:hidden;
}

/*
#modal-container {
	position:fixed;
	left:0;
	top:0;
	display:table;
	height:100%;
	width:100%;
	z-index:1;
	transform:scale(0);
}
*/
#modal-container .modal-background {
	display:table-cell;
	/*background:rgba(0,0,0,.8);*/
	text-align:center;
	vertical-align:middle;
}

#modal-container-01 .modal-background-01 {
	display:table-cell;
	/*background:rgba(0,0,0,.8);*/
	text-align:center;
	vertical-align:middle;
}

/*
#modal-container .modal-background .modal {
	background:#fff;
	padding:50px;
	display:inline-block;
	border-radius:3px;
	position:relative;
}
*/
#modal-container .modal-background .modal h2 {
	font-size:25px;
	line-height:25px;
	margin-bottom:15px;
}
#modal-container .modal-background .modal p {
	font-size:18px;
	line-height:22px;
}
/* * ------------------------------ * Unfolding Animation * ------------------------------ */ 

#modal-container.one {
	/*transform:scaleX(0) scaleY(1);*/ animation:unfoldIn 1s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.one .modal-background .modal {
	/* 초기 display:none 처럼 크기를 0 으로 하여 보여주지 않음*/ transform:scale(0);
	/* 0.5 초 동안 애니메이션을 실행,단 0.8초 지연시켜 0.8초 후에 애니메이션을 실행 */ animation:zoomIn .5s .8s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.one.out {
	transform:scale(1);
	animation:unfoldOut 1s .3s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.one.out .modal-background .modal {
	animation:zoomOut 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}


#modal-container-01.one {
	/*transform:scaleX(0) scaleY(1);*/ animation:unfoldIn 1s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container-01.one .modal-background .modal {
	/* 초기 display:none 처럼 크기를 0 으로 하여 보여주지 않음*/ transform:scale(0);
	/* 0.5 초 동안 애니메이션을 실행,단 0.8초 지연시켜 0.8초 후에 애니메이션을 실행 */ animation:zoomIn .5s .8s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container-01.one.out {
	transform:scale(1);
	animation:unfoldOut 1s .3s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container-01.one.out .modal-background .modal {
	animation:zoomOut 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}

/* Dimmed showing */ @keyframes unfoldIn {
	0% {
		transform:scaleX(0) scaleY(0.005);
	}
	50% {
		/* 0.5 초간 세로 크기는 작은상태로 가로 너비만 확대 */ transform:scaleX(1) scaleY(0.005);
	}
	100% {
		/* 0.5 초간 세로 크기를 확대 */ transform:scaleY(1) scaleX(1);
	}
}
/* Show modal content */ @keyframes zoomIn {
	from {
		transform:scale(0);
	}
	to {
		transform:scale(1);
	}
}
/* Hide modal content */ @keyframes zoomOut {
	from {
		transform:scale(1);
	}
	to {
		transform:scale(0);
	}
}
/* Dimmed hiding */ @keyframes unfoldOut {
	0% {
		transform:scale(1)
	}
	50% {
		transform:scaleX(1) scaleY(0.005);
	}
	100% {
		transform:scaleX(0) scaleY(0.005);
	}
}
/* * ------------------------------ * Revealing Animation * ------------------------------ */ #modal-container.two {
	transform:scale(1);
}
#modal-container.two .modal-background {
	background:transparent;
	/*animation:fadeIn .5s cubic-bezier(0.165,0.84,0.44,1) forwards;*/
}
#modal-container.two .modal-background .modal {
	/* 콘텐츠를 초기에 보여주지 않음 */ opacity:0;
	animation:scaleUp 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
.content.two {
	/* 콘텐츠 크기를 줄임 */ animation:scaleBack 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.two.out {
	/* 전체 모달 컨테이너를 숨김 처리(다른 애니메이션이 모두 끝난 0.5초 후에 처리하기 위해 0.5초 지연시킴 */ animation:quickScaleDown 0s .5s linear forwards;
}
#modal-container.two.out .modal-background {
	animation:fadeOut 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.two.out .modal-background .modal {
	animation:scaleDown 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
.content.two.out {
	animation:scaleForward 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
/* Dimmed showing */ @keyframes fadeIn {
	0% {
		background:transparent;
	}
	100% {
		background:rgba(0,0,0,.7);
	}
}
/* Show modal content from bottom to top */ @keyframes scaleUp {
	0% {
		/* 모달 콘텐츠를 하단에 위치시킴 */ transform:scale(.8) translateY(1000px);
		opacity:0;
	}
	100% {
		/* 모달 콘텐츠를 본래 위치로 돌려놓음 */ transform:scale(1) translateY(0);
		opacity:1;
	}
}
/* Shrink content */ @keyframes scaleBack {
	0% {
		transform:scale(1);
	}
	100% {
		transform:scale(.8);
	}
}
/* Hide modal container*/ @keyframes quickScaleDown {
	0% {
		transform:scale(1);
	}
	99.9% {
		transform:scale(1);
	}
	100% {
		transform:scale(0);
	}
}
/* Dimmed hiding */ @keyframes fadeOut {
	0% {
		background:rgba(0,0,0,.7);
	}
	100% {
		background:transparent;
	}
}
/* modal content from top to bottom */ @keyframes scaleDown {
	0% {
		transform:scale(1) translateY(0);
		opacity:1;
	}
	100% {
		transform:scale(.8) translateY(1000px);
		opacity:0;
	}
}
@keyframes scaleBack {
	0% {
		transform:scale(1);
	}
	100% {
		transform:scale(.85);
	}
}
@keyframes scaleForward {
	0% {
		transform:scale(0.85);
	}
	100% {
		transform:scale(1);
	}
}
/* * ------------------------------ * Uncovering Animation * ------------------------------ */ #modal-container.three {
	z-index:0;
	transform:scale(1);
}
#modal-container.three .modal-background {
	background:rgba(0,0,0,.9);
}
#modal-container.three .modal-background .modal {
	animation:moveUp 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
.content.three {
	z-index:1;
	animation:slideUpLarge 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.three.out .modal-background .modal {
	animation:moveDown 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
.content.three.out {
	animation:slideDownLarge 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
/* Show Modal content*/ @keyframes moveUp {
	/* 하단에서 */ 0% {
		transform:translateY(200px);
	}
	/* 중앙으로 위치 */ 100% {
		transform:translateY(0);
	}
}
/* Slide up Content */ @keyframes slideUpLarge {
	0% {
		transform:translateY(0);
	}
	100% {
		transform:translateY(-100%);
	}
}
/* Hide Modal content */ @keyframes moveDown {
	/* 중앙에 있는 모달 콘텐츠를 */ 0% {
		transform:translateY(0);
	}
	/* 하단으로 위치 */ 100% {
		transform:translateY(200px);
	}
}
/* Slide down content */ @keyframes slideDownLarge {
	0% {
		transform:translateY(-100%);
	}
	100% {
		transform:translateY(0);
	}
}
/* * ------------------------------ * Blow Up Animation * ------------------------------ */ #modal-container.four {
	z-index:2;
	transform:scale(1);
}
#modal-container.four .modal-background {
	/*background:rgba(0,0,0,0.9);*/
}
#modal-container.four .modal-background .modal {
	animation:blowUpModal 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
.content.four {
	z-index:1;
	animation:blowUpContent 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.four.out .modal-background .modal {
	animation:blowUpModalTwo 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
.content.four.out {
	animation:blowUpContentTwo 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
/* Show modal content */ @keyframes blowUpModal {
	0% {
		transform:scale(0);
	}
	100% {
		transform:scale(1);
	}
}
/* Hide content */ @keyframes blowUpContent {
	0% {
		transform:scale(1);
		opacity:1;
	}
	/* 원본 크기에서 2배로 커지면서 투명도를 서서히 낮춤 */ 99.9% {
		transform:scale(2);
		opacity:0;
	}
	/* 마지막에 숨김 처리 */ 100% {
		transform:scale(0);
	}
}
/* Hide modal content */ @keyframes blowUpModalTwo {
	0% {
		transform:scale(1);
		opacity:1;
	}
	100% {
		transform:scale(0);
		opacity:0;
	}
}
/* Show content */ @keyframes blowUpContentTwo {
	0% {
		transform:scale(2);
		opacity:0;
	}
	100% {
		transform:scale(1);
		opacity:1;
	}
}
/* * ------------------------------ * Meep Meep Animation * ------------------------------ */ #modal-container.five {
	transform:scale(1);
}
#modal-container.five .modal-background {
	background:transparent;
	animation:fadeIn 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.five .modal-background .modal {
	transform:translateX(-1500px);
	animation:roadRunnerIn 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.five.out {
	animation:quickScaleDown 0s .5s linear forwards;
}
#modal-container.five.out .modal-background {
	animation:fadeOut 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.five.out .modal-background .modal {
	animation:roadRunnerOut 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
/* 모달 콘텐츠 반동 효과로 나타나기 */ @keyframes roadRunnerIn {
	0% {
		transform:translateX(-1500px) skewX(30deg) scaleX(1.3);
	}
	70% {
		transform:translateX(50px) skewX(0deg) scaleX(0.9);
	}
	100% {
		transform:translateX(0px) skewX(0deg) scaleX(1);
	}
}
/* 모달 콘텐츠 반동 효과로 숨기기 */ @keyframes roadRunnerOut {
	0% {
		transform:translateX(0px) skewX(0deg) scaleX(1);
	}
	30% {
		transform:translateX(-100px) skewX(-5deg) scaleX(0.9);
	}
	100% {
		transform:translateX(1500px) skewX(30deg) scaleX(1.3);
	}
}
/* * ------------------------------ * James Bond Animation * ------------------------------ */ #modal-container.six {
	transform:scale(1);
}
#modal-container.six .modal-background {
	background:transparent;
	animation:fadeIn 0.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.six .modal-background .modal {
	/* 초기 모달 콘텐츠 크기 및 라운드 정의 */ width:200px;
	height:200px;
	border-radius:100%;
	overflow:hidden;
	animation:JamesBond 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.six .modal-background .modal h2,#modal-container.six .modal-background .modal p {
	/* 콘텐츠 내용 숨김 */ opacity:0;
	position:relative;
	/* 원형 모달이 본래 모양을 완성된 후 1.4 지연후에 보여줌 */ animation:modalContentFadeIn .5s 1.4s linear forwards;
}
#modal-container.six.out {
	animation:slowFade .5s 1.5s linear forwards;
}
#modal-container.six.out .modal-background {
	background-color:rgba(0,0,0,0.7);
	animation:fadeToRed 2s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.six.out .modal-background .modal {
	border-radius:3px;
	height:162px;
	width:227px;
	animation:killShot 1s cubic-bezier(0.165,0.84,0.44,1) forwards;
}
#modal-container.six.out .modal-background .modal h2,#modal-container.six.out .modal-background .modal p {
	animation:modalContentFadeOut 0.5s 0.5 cubic-bezier(0.165,0.84,0.44,1) forwards;
}
/* Show modal content:round shape */ @keyframes JamesBond {
	0% {
		transform:translateX(1000px);
	}
	80% {
		transform:translateX(0px);
		width:150px;
		height:150px;
		border-radius:100%;
	}
	90% {
		border-radius:3px;
		width:340px;
		height:240px;
	}
	100% {
		border-radius:3px;
		width:300px;
		height:200px;
	}
}
/* 모달 콘텐츠 내의 요소 효과 처리 */ @keyframes modalContentFadeIn {
	0% {
		opacity:0;
		top:-20px;
	}
	100% {
		opacity:1;
		top:0;
	}
}
/* 전체 모달 컨테이너 숨김처리 */ @keyframes slowFade {
	0% {
		opacity:1;
	}
	99.9% {
		opacity:0;
		transform:scale(1);
	}
	100% {
		transform:scale(0);
	}
}
/* 박스 그림자를 이용한 효과 */ @keyframes fadeToRed {
	0% {
		box-shadow:inset 0 0 0 rgba(201,24,24,0.8);
	}
	100% {
		/* y 축 박스 그림자를 위에서부터 아래로 내리는 효과 */ box-shadow:inset 0 2000px 0 rgba(201,24,24,0.8);
	}
}
/* 모달 콘텐츠 비스듬히 하단으로 떨어뜨림 */ @keyframes killShot {
	0% {
		transform:translateY(0) rotate(0deg);
		opacity:1;
	}
	100% {
		/* 하단으로 회전시켜 떨어뜨림 */ transform:translateY(400px) rotate(45deg);
		opacity:0;
	}
}
/* 모달 콘텐츠가 떨어질 때 효과처리 */ @keyframes modalContentFadeOut {
	0% {
		opacity:1;
		top:0;
	}
	100% {
		opacity:0;
		top: -20px;
	}
}