* { box-sizing: border-box; }

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	list-style: none;
}
html, body {
	width: 100%;
    height : 100%;
	background: #222;
	overflow: hidden;
	font-family: 'Kalam', 'Malgun Gothic';
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	position: absolute;
	-webkit-text-size-adjust:none;
	box-sizing: border-box;
	transform: translateZ(0);
	overflow: hidden;
	color: #222;
}

dl, dt, dd, ol, ul, li {
	margin: 0;
	padding: 0;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

small {
	margin:0 10px 30px;
	display:block;
	font-size:12px;
}

a {
	text-decoration: none;
}


input, textarea {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	line-height: 30px;
	font-size: 16px;
	color: #222;
	background: transparent;
	font-family: 'Kalam', 'Malgun Gothic';
	position: relative;
	padding: 10px;
	border: none;
	outline: none;
	float: left;
	box-sizing: border-box;
	appearance: none;
	z-index: 1;
}

button { appearance:none; font-family: 'Kalam', 'Malgun Gothic';}

input { height: 50px; background: transparent;}

textarea { height: 170px; background: transparent; }

.kor {font-family: 'Malgun Gothic'; }

.txt-white { color: #fff;}
.txt-bold { font-weight: bold; }
.txt-center { text-align: center; }
.txt-left { text-align: left; }
.txt-right { text-align: right; }




/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =title--------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	line-height: 150%;
	transform: translateZ(0);
}

h1 { font-size: 60px; font-weight: 700; /*padding: 100px 0 20px 0;*/ }
h2 { font-size: 36px; font-weight: 700; }
h3 { font-size: 24px; font-weight: 700; }
h4 { font-size: 18px; font-weight: 400; }



.full-h h1 {
	width: 100%;
	height: auto;
	text-align: center;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	font-size: 100px;
	transform-origin: 50% 50%;
	transform: translateX(0) translateY(0) translateZ(0) scale(0,0);
	line-height: 105%;
	position: relative;
}

.full-h h1 > .subtitle {
	font-size: 30px;
	line-height: 150%;
}

.full-h h1 > .icon.title-arrow {
	width: 60px;
	height: 60px;
	background-image: url('../img/icon_title_arrow.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) translateY(130%) translateZ(0);
	animation: title-arrow-anim 0.6s steps(3, end) infinite;
}

@keyframes title-arrow-anim {
	0% { background-position: 0 0; }
	100% { background-position: 0 150%; }
}


.full-h h1 > .icon.title-arrow > div {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateZ(0);
}

.full-h h1 > .icon.title-arrow > .inner1 {background-image: url('../img/icon_title_arrow1.png'); animation:title-arrow1-anim 1s linear infinite; opacity:0;}
.full-h h1 > .icon.title-arrow > .inner2 {background-image: url('../img/icon_title_arrow2.png'); animation:title-arrow2-anim 1s linear infinite; opacity:0;}
.full-h h1 > .icon.title-arrow > .inner3 {background-image: url('../img/icon_title_arrow3.png'); animation:title-arrow3-anim 1s linear infinite; opacity:0;}

@keyframes title-arrow1-anim {
	0% { opacity:0; }
	33% { opacity:1; }
	66% { opacity:0; }
	99% { opacity:0; }
	100% { opacity:0; }
}

@keyframes title-arrow2-anim {
	0% { opacity:0; }
	33% { opacity:0; }
	66% { opacity:1; }
	99% { opacity:0; }
	100% { opacity:0; }
}

@keyframes title-arrow3-anim {
	0% { opacity:0; }
	33% { opacity:0; }
	66% { opacity:0; }
	99% { opacity:1; }
	100% { opacity:0; }
}



/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =rough--------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.rough-wrap {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	float: left;
}



.rough-wrap > .rough-bg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 6px;
	pointer-events: none;
	z-index: 0;
}

.rough-wrap > .rough-bg > svg {
	width: 100%;
	height: 100%;
}

input + .rough-bg > svg > .rough-polygon,
textarea + .rough-bg > svg > .rough-polygon {
	stroke-width:2;
	stroke:#222;
}

input:focus + .rough-bg > svg > .rough-polygon,
textarea:focus + .rough-bg > svg > .rough-polygon {
	stroke-width:2;
	stroke:#ffce00;
}

.rough-wrap > .rough-bg > svg > .rough-polygon {
	fill: #fff;
}

.rough-wrap.dark > .rough-bg > svg > .rough-polygon {
	fill: #222;
}

.rough-wrap.border {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
}

.rough-wrap.border > .rough-bg {
	border-radius: 2px;
}

.rough-wrap.border > .rough-bg > svg > .rough-polygon {
	stroke-width:1;
	stroke:#fff;
	fill:#fff;
	fill-rule: evenodd;
}

.rough-wrap.border.dark > .rough-bg > svg > .rough-polygon {
	stroke-width:1;
	stroke:#222;
	fill:#222;
	fill-rule: evenodd;
}

.rough-wrap.border.red > .rough-bg > svg > .rough-polygon {
	stroke-width:1;
	stroke:#f00;
	fill:#f00;
	fill-rule: evenodd;
}




/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =divider------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.divider {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 0;
	margin: 60px auto;
	border-radius: 20px;
}

.divider > svg {
	width: 2000px;
	height: 4px;
	overflow: visible;
	margin: 0;
}

.divider > svg > polyline {
	fill: none;
	stroke:#222;
	stroke-width:4;
	stroke-linecap: round;
}

.divider.dash > svg > polyline { stroke-dasharray: 14,10,12,10,8,10,16,10,10,10; }
.divider.dot > svg > polyline { stroke-dasharray: 0.5,10; }
.divider.white > svg > polyline { stroke:#fff; }
.divider.thin > svg > polyline { stroke-width:3; }
.divider.thick > svg > polyline { stroke-width:5; }
.divider.fat > svg > polyline { stroke-width:8; }
.divider.fatter > svg > polyline { stroke-width:12; }
.divider.short {
	width: 50px;
	margin: 0;
}

.divider.short.center {
	margin: 0 auto;
}








#mySwipe {
	width: 100%;
	height: auto;
	display: block;
	background: #222;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	visibility: hidden;
}

.swipe-wrap {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
}
.swipe-wrap > div {
	float:left;
	width:100%;
	min-height: 100%;
	position: relative;
	background: #222;
	background-size: 100% auto;
	font-size: 14px;
	color: #666;
	
}

.swipe-wrap > div dl {
	clear: both;
	list-style-type: disc;
	padding: 10px;
}

.swipe-wrap > div dl dt {
	font-size: 30px;
	clear: both;
	margin: 20px 10px;
	text-align: right;
}

.swipe-wrap > div dl dd {
	clear: both;
	list-style-type: disc;
	margin: 20px 10px;
}

.swipe-wrap > div img {
	display: block;
	width: 100%;
	height: auto;
}




.scene-wraper {
	width: 100%;
	height: auto;
	margin: 0 auto;
	opacity: 1;
	position: relative;
	pointer-events: none;
	overflow: hidden;
	border-radius: 4px;
	transform: translateZ(0);
}

.scene-wraper.on {
	opacity: 1;
}

.scene-dummy {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	transform-origin: 0% 0%;
	transform: translateZ(0);
	visibility: hidden;
}

.full-w {
	width: 100% !important;
	height: auto;
	min-height: calc(100vh - 60px);
	overflow: visible;
	padding: 120px 10px;
	margin: 0;
	position: relative;
	background: #fff;
}

.full-w > .deco {
	width: 100%;
	height: 60px;
	position: absolute;
	overflow: visible;
	
}

.full-w > .deco.top{
	top: -4px;
	bottom: auto;
	left: 0;
}

.full-w > .deco.bottom {
	top: auto;
	bottom: -1px;
	left: 0;
	background: #222;
}

.full-w > .deco > .rough-wrap { overflow: visible; }
.full-w > .deco > .rough-wrap > .rough-bg { overflow: visible; }
.full-w > .deco.bottom > .rough-wrap {top: -1px;}

.full-h {
	width: 100vw;
	height: calc(100vh - 60px);
	padding: 0 10px;
	margin-top: 4px;
	position: relative;
	pointer-events: none;
	transform: translateZ(0);
}

.fix {
	position: fixed !important;
	top: 60px !important;
}

.spacer {
	height: 0;
	text-align: center;
}


.btn-slide-top {
	appearance: none;
	width: 60px;
	height: 70px;
	background-image: url('../img/btn_slide_top.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: fixed !important;
	transform: translateZ(0);
	bottom: 10px;
	right: 50px;
	border: none;
	outline: none;
	background-color: transparent;
	cursor: pointer;
	font-size: 10px;
	font-weight: 700;
	line-height: 105%;
	padding-top: 20px;
	opacity: 0;
	pointer-events: none;
	transition: all 1s ease, color 0.01s, background-image 0.01s;
	color: #222;
	-webkit-backface-visibility: hidden;
}

.btn-slide-top:hover {
	background-image: url('../img/btn_slide_top_over.png');
	color: #ffce00;
}

.btn-slide-top.on {
	opacity: 1;
	pointer-events: auto;
}

.front-layer.on > .btn-slide-top {
	pointer-events: none;
}


.btn-send {
	display: block;
	appearance: none;
	width: 200px;
	height: 70px;
	background-image: url('../img/btn_send.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border: none;
	outline: none;
	background-color: transparent;
	cursor: pointer;
	font-size: 30px;
	font-weight: 700;
	line-height: 110%;
	margin: 0 auto;
	color: #222;
}

.btn-send:hover {
	background-image: url('../img/btn_send_over.png');
}


/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =scene-guide--------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.scene-guide {
	width: 240px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	user-select: none;
	cursor: default;
	pointer-events: all;
	z-index: 1;
}

.scene-guide > .scroll-hint {
	width: 180px;
	height: 180px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}

.scene-guide > .scroll-hint > .inner1 {
	width: 100%;
	height: 100%;
	background-image: url('../img/hint_pc.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.scene-guide > .scroll-hint.sp > .inner1 { background-image: url('../img/hint_sp.png'); }
.scene-guide > .scroll-hint.sp > .inner2 { background-image: url('../img/hint_sp.png'); }

.scene-guide > .scroll-hint > .inner2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/hint_pc.png');
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	animation: scroll-hint-anim 0.5s linear infinite alternate;
}

@keyframes scroll-hint-anim {
	0% { opacity:0; }
	100% { opacity:1; }
}

.scene-guide > p {
	text-align: center;
	font-size: 20px;
	padding: 5px 0;
	margin: 0;
	color: #fff;
}

.scene-guide > hr.or {
	display: block;
	border: none;
	width: 240px;
	height: 10px;
	background-image: url('../img/hint_or.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 5px auto;
}


.scene-guide > .btn-auto-play {
	display: block;
	appearance: none;
	width: 200px;
	height: 70px;
	background-image: url('../img/btn_auto_play.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border: none;
	outline: none;
	background-color: transparent;
	cursor: pointer;
	font-size: 24px;
	font-weight: 700;
	line-height: 100%;
	margin: 0 auto;
	padding: 0;
	padding-left: 48px;
	color: #222;
	text-align: left;
	vertical-align: top;
	
}

.scene-guide > .btn-auto-play:hover {
	background-image: url('../img/btn_auto_play_over.png');
	color: #ffce00;
}





/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =header-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#header {
	width: 100%;
	height: 60px;
	overflow: visible;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: #222;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px;
	padding-left: 220px;
	margin: 0;
	transform: translateX(0) translateY(0) translateZ(0);
	transition: all 0.4s ease;
	z-index: 999;
	user-select: none;
}

#header.not-yet {
	transform: translateX(0) translateY(-100%) translateZ(0);
}

#header.on {
	transform: translateX(calc(-100% + 60px)) translateY(0) translateZ(0);
}

#header > .rough-wrap {
	position: absolute;
	top: 4px;
	left: 0;
}

#header > .rough-wrap > .rough-bg { overflow: visible; }

#header > .logo {
	display: block;
	width: 200px;
	height: 40px;
	vertical-align: middle;
	background-image: url('../img/logo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 10px;
	left: 10px;
	cursor: pointer;
}

#header > .gnb {
	display: block;
	width: 100%;
	height: 40px;
	position: relative;
}

#header > .gnb > ul {
	float: right;
	list-style: none;
	width: auto;
	height: 40px;
}

#header > .gnb > ul > li {
	float: left;
	display: inline-block;
	width: auto;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	font-weight: 400;
	margin-right: 20px;
	
}

#header > .gnb > ul > li:last-child {
	margin-right: 10px;
}

#header > .gnb > ul > li > a {
	display: inline-block;
	padding: 0 5px;
	color: #fff;
	/*font-weight: 600;*/
}

#header > .gnb > ul > li > a.on,
#header > .gnb > ul > li > a:hover {
	color: #ffce00;
}

#header > .btn-menu-shortcut {
	appearance: none;
	display: none;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border: none;
	outline: none;
	position: absolute;
	padding: 10px;
	box-sizing: border-box;
	top: 0;
	right: 0;
	
	background-color: #222;
	cursor: pointer;
}

#header > .btn-menu-shortcut > .icon {
	display: block;
	width: 40px;
	height: 40px;
	position: relative;
}

#header > .btn-menu-shortcut > .icon > hr {
	display: block;
	width:24px;
	height: 4px;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -2px;
	margin-left: -12px;
	transform-origin: 100% 50%;
	transition: all 0.5s 0.3s ease;
}

#header > .btn-menu-shortcut > .icon > hr:nth-child(1) {
	background-image: url('../img/btn_menu_shortcut_bar2.png');
	transform: translateX(0) translateY(0) translateZ(0);
}

#header > .btn-menu-shortcut > .icon > hr:nth-child(2) {
	background-image: url('../img/btn_menu_shortcut_bar1.png');
	transform:  rotate(0deg) scale(1,1) translateX(0) translateY(-7px) translateZ(0);
}

#header > .btn-menu-shortcut.on > .icon > hr:nth-child(2) {
	transform: rotate(45deg) scale(0.7,1) translateX(0) translateY(1px) translateZ(0);
}

#header > .btn-menu-shortcut > .icon > hr:nth-child(3) {
	background-image: url('../img/btn_menu_shortcut_bar3.png');
	transform: rotate(0deg) scale(1,1) translateX(0) translateY(7px) translateZ(0);
}

#header > .btn-menu-shortcut.on > .icon > hr:nth-child(3) {
	transform: rotate(-45deg) scale(0.7,1) translateX(0) translateY(-1px) translateZ(0);
}



/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =hidden-gnb---------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.hidden-gnb {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	padding: 10px 10px 10px 70px;
	user-select: none;
}

.hidden-gnb > .bg-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 20px 40px;
	background-image: url('../img/hidden_nav_bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform: translateZ(0);
}

.hidden-gnb > .bg-wrap > .menu-list {
	width: 200px;
	height: auto;
	overflow: hidden;
	padding: 20px 10px;
	margin-top: 20px;
	position: absolute;
	top: 10px;
	left: calc(50% - 100px);
	background-image: url('../img/hidden_nav_menu_bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform: translateX(0) translateY(0) translateZ(0);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.hidden-gnb > .bg-wrap > .menu-list.on {
	transform: translateX(0) translateY(-120%) translateZ(0);
	transition: all 0.4s cubic-bezier(0.600, -0.280, 0.735, 0.045);
}

.hidden-gnb > .bg-wrap > .menu-list > li {
	width: 100%;
	height: 50px;
}

.hidden-gnb > .bg-wrap > .menu-list > li > a {
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #222;
	font-size: 20px;
	font-weight: 700;
}

.hidden-gnb > .bg-wrap > .menu-list > li > a.on,
.hidden-gnb > .bg-wrap > .menu-list > li > a:active {
	color: #ffce00;
}

.hidden-gnb > .bg-wrap > .heart-wrap {
	width: 200px;
	height: 200px;
	overflow: hidden;
	margin: 0 auto;
	position: absolute;
	bottom: 0px;
	left: calc(50% - 100px);
	background-image: url('../img/hidden_nav_heart_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.hidden-gnb > .bg-wrap > .heart-wrap > .heart {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../img/hidden_nav_heart.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	animation: heart-anim 0.8s linear infinite;
}

@keyframes heart-anim {
	0% { transform: translateX(1px) translateZ(0) scale(1,1); }
	20% { transform: translateX(-1px) translateZ(0) scale(1.1,1.1); }
	70% { transform: translateZ(0) scale(1,1); }
	100% { transform: translateX(1px) translateZ(0) scale(1,1); }
}

.hidden-gnb > .bg-wrap > .heart-wrap > .bubble {
	width: 70%;
	height: 70%;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.hidden-gnb > .bg-wrap > .heart-wrap > .bubble > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/hidden_nav_heart_bubble.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateY(100%) translateZ(0);
}

.hidden-gnb > .bg-wrap > .heart-wrap.on > .bubble > .inner {
	animation: heart-bubble-anim 2s linear both;
}

@keyframes heart-bubble-anim {
	0% { transform: translateY(100%) translateZ(0); }
	100% { transform: translateY(-100%) translateZ(0); }
}



.hidden-gnb > .bg-wrap > .heart-wrap > .cover {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../img/hidden_nav_heart_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.hidden-gnb > .bg-wrap > .cover {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../img/hidden_nav_cover.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform: translateZ(0);
	pointer-events: none;
}


/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =footer-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#footer {
	width: 100%;
	height: 60px;
	padding: 10px;
	box-sizing: border-box;
	position: relative;
}

#footer > .copyright {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	text-align: center;
}



/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =layout-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.front-layer {
	width: 100%;
	height: 100%;
	padding: 0;
	padding-top:60px;
	margin: 0 auto;
	position: relative;
	background: #222;
	transform: translateX(0) translateY(0) translateZ(0);
	transition: all 0.4s ease;
	pointer-events: all;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0,0,0,0.9);
}

.front-layer.on {
	transform: translateX(calc(-100% + 60px)) translateY(0) translateZ(0);
	pointer-events: none;
}

.trunk {
	width: 100%;
	height: calc(100vh - 60px);

	overflow-y: scroll;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	margin: 0 auto;
	position: fixed;
	background: #222;
	-webkit-backface-visibility: hidden;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: all;

	scrollbar-base-color: #ffce00;
	scrollbar-3dlight-color: #ffce00;
	scrollbar-highlight-color: #ffce00;
	scrollbar-track-color: #222;
	scrollbar-arrow-color: #fff;
	scrollbar-shadow-color: #ffce00;
	scrollbar-dark-shadow-color: #ffce00;

}

.trunk.not-yet {
	pointer-events: none;
}

@media screen and (min-width: 641px) {
	.trunk::-webkit-scrollbar {
		width: 1em;
	}
	 
	.trunk::-webkit-scrollbar-track {
		border: 6px solid #222;
		background: #fff;
	}
	 
	.trunk::-webkit-scrollbar-thumb {
		background-color: #ffce00;
		outline: 1px solid #ffce00;
	}
}

/* IE 10+ */ /*for signature img bug*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .trunk { transform: translateZ(0);}
}

.chapter {
	width: 100%;
	height: auto;
	overflow: visible;
	opacity: 1;
}

.container {
	width: 100%;
	height: auto;
	min-height: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0 auto;
	position: relative;
	transform: translateZ(0);
}

.container.open {
	overflow: hidden;
}

.paddinger {
	padding: 10px;
}

.blackout {
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;
}

.blackout.on {
	display: block;
}


/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =welcome------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#welcome {
	position:relative;
	width: 100%;
	height:calc(100vh - 60px);
	transform: translateZ(0);
	user-select: none;
	cursor: default;
	z-index: 1;
}

#welcome > .middler {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) translateZ(0);
}

#welcome .signature {
	visibility: visible;
	display: block;
	width: 400px;
	height: 400px;
	padding: 0;
	overflow: visible;
	position: relative;
	margin: 0 auto 20px auto;
	transform: translateX(0) translateY(0) translateZ(0);
}

#welcome .signature.not-yet {
	visibility: hidden;
}

#welcome .signature > div {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
}

#welcome .signature > .shining > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/signature_shining.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: scale(1,1) translateZ(0);
	animation: shining-anim 0.8s 1s linear infinite alternate;
}

@keyframes shining-anim {
	0% { transform: scale(1,1) translateZ(0); }
	100% { transform: scale(0.96,0.96) translateZ(0); }
}

#welcome .signature > .light {
	background-image: url('../img/signature_light.png');
}

#welcome .signature > .preloader.off {
	display: none;
}

#welcome .signature > .preloader > .no-light {
	width: 100%;
	height: 48%;
	position: absolute;
	top: 26%;
	left: 0;
	background-color: #fff;
	background-size: contain;
	transform: scale(1,1) translateZ(0);
	border-radius: 100%;
}

#welcome .signature > .preloader > .light {
	width: 100%;
	height: 48%;
	position: absolute;
	top: 26%;
	left: 0;
	background-color: #ffce00;
	background-size: contain;
	transform: scale(0,0) translateZ(0);
	border-radius: 100%;
}

#welcome .signature > .preloader > .light-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/*background-image: url('../img/signature_light_bg.png');*/
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	background-color: #222;
}

#welcome .signature > .preloader > .light-cover.ready {
	background-color: transparent;
}

#welcome .signature > .preloader > .light-cover > img {
	display: block;
	width: 100%;
	height: auto;
}

#welcome .signature > .progress {
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0;
	bottom: -100px;
	text-align: center;
	line-height: 100px;
	font-size: 48px;
	font-weight: 700;
	vertical-align: middle;
	color: #fff;
	transform: translateX(0) translateY(0) translateZ(0);
	opacity: 1;
	transition: all 0.4s ease;
}

#welcome .signature > .progress.off {
	transform: translateX(0) translateY(50%) translateZ(0);
	opacity: 0;
}

#welcome .signature > .ornament {
	/*background-image: url('../img/signature.png');*/
}

#welcome .signature > .ornament > img {
	display: block;
	width: 100%;
	height: auto;
}




#welcome .slogan {
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 54px;
	font-weight: 700;
	line-height: 120%;
	color: #fff;
	transform: translateX(0) translateY(0) translateZ(0);
	opacity: 1;
	transition: all 0.4s 0.2s ease;
}

#welcome .slogan.not-yet {
	transform: translateX(0) translateY(50%) translateZ(0);
	opacity: 0;
}

#welcome .description {
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 30px;
	font-weight: 400;
	line-height: 120%;
	color: #fff;
	margin-top: 20px;
	transform: translateX(0) translateY(0) translateZ(0);
	opacity: 1;
	transition: all 0.4s 0.4s ease;
}

#welcome .description.not-yet {
	transform: translateX(0) translateY(50%) translateZ(0);
	opacity: 0;
}

#welcome .optimized {
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 16px;
	font-weight: 300;
	line-height: 120%;
	color: #fff;
	margin-top: 20px;
}

#welcome .btn-area {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 20px;
}

#welcome .btn-start {
	display: inline-block;
	appearance: none;
	width: 60px;
	height: 70px;
	background-image: url('../img/btn_start.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	border: none;
	outline: none;
	background-color: transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	padding-top: 12px;
	transition: all 0.4s ease, color 0.01s;
	color: #222;
	position: relative;
	opacity: 1;
}

#welcome .btn-start:hover {
	color: #ffce00;
}

#welcome .btn-start:hover > .icon {
	background-image: url('../img/btn_start_icon_over.png');
}

#welcome .btn-start.not-yet {
	transform: translateX(0) translateY(50%) translateZ(0);
	opacity: 0;
}

#welcome .btn-start > .icon {
	display: block;
	width: 25px;
	height: 17px;
	background-image: url('../img/btn_start_icon.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -12.5px;
	transform: translateX(0) translateY(0) translateZ(0);
	animation: btn-start-anim 1s linear infinite alternate;
}

@keyframes btn-start-anim {
	0% { transform: translateX(0) translateY(0) translateZ(0); }
	100% { transform: translateX(0) translateY(40%) translateZ(0); }
}


/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =who_we_are---------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#who_we_are .scene-wraper {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: visible;
}

.blackhole {
	width: 38.3%;
	height: 68%;
	position: absolute;
	top: 36.6%;
	left: 42.2%;
	overflow: hidden;
	transform-origin: 50% 50%;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	animation: blackhole-anim 0.5s linear infinite alternate;
}

@keyframes blackhole-anim {
	0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1,1); }
	100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0.98,0.98); }
}

.blackhole > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/space_blackhole.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-sizing: border-box;
	position: relative;
	transform: translateZ(0) scale(0,0);
	transform-origin: 50% 50%;
	
}




.space {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0% 0%;
	transform: translateZ(0);
	opacity: 0;
}

.space-bg {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}


.planet1 {
	width: 8.4%;
	height: 15%;
	background-image: url('../img/space_planet1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
	position: absolute;
	top: 54%;
	left: 41%;
	transform: translateZ(0);
}

@keyframes planet1-anim {
	0% { transform: translateY(3%) translateZ(0); }
	100% { transform: translateY(-3%) translateZ(0); }
}


.planet1 > .ptn {
	width: 100%;
	height: 300%;
	overflow: hidden;
	transform: translateZ(0);
	animation: planet1-ptn-anim 8s linear infinite;
	background-image: url('../img/space_planet1_ptn.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
}

@keyframes planet1-ptn-anim {
	0% { transform: translateY(-50%) translateZ(0); }
	100% { transform: translateY(0%) translateZ(0); }
}

.planet1 > .cover {
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}


.planet2 {
	width: 11.8%;
	height: 21%;
	background-image: url('../img/space_planet2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	top: 74.5%;
	left: 58.5%;
	animation: planet2-anim 2s linear infinite alternate;
}

@keyframes planet2-anim {
	0% { transform: translateY(-3%) translateZ(0) rotate(5deg); }
	100% { transform: translateY(3%) translateZ(0) rotate(-5deg); }
}

.planet2 > .hole {
	width: 31.7%;
	height: 21.5%;
	background-image: url('../img/space_planet2_hole.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 6.5%;
	left: 33.8%;
	animation: planet2-hole-anim 2s ease infinite;
}

@keyframes planet2-hole-anim {
	0% { transform: translateZ(0) scale(1,1); }
	20% { transform: translateZ(0) scale(0.2,0.2); }
	90% { transform: translateZ(0) scale(1,1); }
	100% { transform: translateZ(0) scale(1,1); }
}

.planet2 > .smoke {
	width: 155%;
	height: 89.4%;
	position: absolute;
	top: 17%;
	left: 50%;
	animation: planet2-smoke-anim 2s linear infinite;
}

@keyframes planet2-smoke-anim {
	0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0,0); }
	50% { transform: translateX(-50%) translateY(-150%) translateZ(0) scale(0.3,0.3); opacity: 1; }
	100% { transform: translateX(-50%) translateY(-150%) translateZ(0) scale(1,1); opacity: 0; }
}

.planet2 > .smoke > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/space_planet2_smoke.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	animation: planet2-smoke-inner-anim 0.3s ease infinite alternate;
}

@keyframes planet2-smoke-inner-anim {
	0% { transform: translateZ(0) rotate(3deg); }
	100% { transform: translateZ(0) rotate(-3deg); }
}

.planet3 {
	width: 16.9%;
	height: 30%;
	background-image: url('../img/space_planet3.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	top: 6.3%;
	left: 61%;
	-webkit-perspective: 600px; /* Chrome, Safari, Opera */
    perspective: 600px;
	animation: planet3-anim 2s ease infinite alternate;
}

@keyframes planet3-anim {
	0% { transform: translateY(3%) translateZ(0); }
	100% { transform: translateY(-3%) translateZ(0); }
}

.planet3 > .ring {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform:  rotateZ(-20deg) rotateX(70deg);
	border-radius: 50%;
}

.planet3 > .ring > .inner {
	width: 100%;
	height: 100%;
	
	border-radius: 50%;
	background-image: url('../img/space_planet3_ring.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	animation: planet3-ring-anim 16s linear infinite;
}

@keyframes planet3-ring-anim {
	0% { transform: translateZ(0) rotate(0deg) scale(1.6,1.6); }
	100% { transform: translateZ(0) rotate(359deg) scale(1.6,1.6); }
}

.planet3 > .cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


.planet4 {
	width: 32.8%;
	height: 58.3%;
	background-image: url('../img/space_planet4.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	top: 55.6%;
	left: -8.9%;
}

.planet4 > .cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 50% 50%;
	animation: planet4-cover-anim 24s linear infinite;
}

@keyframes planet4-cover-anim {
	0% { transform: translateZ(0) rotate(0deg); }
	100% { transform: translateZ(0) rotate(359deg); }
}



.planet5 {
	width: 14.2%;
	height: 80.4%;
	background-image: url('../img/space_planet5.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-sizing: border-box;
	position: absolute;
	top: 12%;
	right: -2%;
	transform-origin: 100% 50%;
	animation: planet5-anim 2s ease-in infinite alternate;
}

@keyframes planet5-anim {
	0% { transform: scale(0.9,0.9) translateZ(0); }
	100% { transform: scale(1,1) translateZ(0); }
}

.planet5 > .ptn1 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 50% 50%;
}

.planet5 > .ptn2 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 50% 50%;
	animation: planet5-ptn2-anim 1s ease-out infinite alternate;
}

@keyframes planet5-ptn2-anim {
	0% { opacity:0; }
	100% { opacity:1; }
}




.ufo {
	width: 45.8%;
	height: 65.5%;
	box-sizing: border-box;
	position: absolute;
	top: 36.6%;
	left: 42.2%;
	transform-origin: 0% 0%;
	transform: translateX(0) translateY(0) translateZ(0);
	opacity: 1;
}

.ufo > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/ufo.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;

	transform-origin: 0% 0%;
	transform: scale(0,0);
	animation: ufo-anim 1s steps(2, end) infinite;
}

@keyframes ufo-anim {
	0% { background-position: 0 0; }
	100% { background-position: 0 200%; }
}





/*earth scene*/
.earth-scene {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.earth-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/earth_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	top: 0;
	left: 0;
}

.earth {
	width: 43.7%;
	height: 77.7%;
	background-image: url('../img/earth.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: 50% 50%;
	transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0.1,0.1);
}

.speedy-effect {
	width: 100%;
	height: 61%;
	background-image: url('../img/earth_speedy_effect.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 0;
	transform-origin: 50% 50%;
	transform: translateY(-50%) translateZ(0);
	animation: speedy-effect-anim 0.5s linear infinite alternate;
}

@keyframes speedy-effect-anim {
	0% { transform: translateY(-50%) translateZ(0) rotate(-0.2deg) scale(1,1); }
	100% { transform: translateY(-50%) translateZ(0) rotate(0.2deg) scale(1.05,1.05); }
}

.ufo-inside {
	width: 100%;
	height: 39.9%;
	background-image: url('../img/earth_ufo_inside.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
}



#who_we_are .scene2 {
	opacity: 1;
}





#who_we_are .vision {
	width: 680px;
	height: 300px;
	position: relative;
	margin: 0 auto;
	margin-bottom: 30px;
}

#who_we_are .vision div {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
#who_we_are .vision > .seq1 {
	
}

#who_we_are .vision > .seq1 > .inner1 {
	background-image: url('../img/contents_vision1_1.png');
}

#who_we_are .vision > .seq1 > .inner2 {
	background-image: url('../img/contents_vision1_2.png');
	animation: vision-noise-anim 0.1s infinite alternate;
}

@keyframes vision-noise-anim {
	0% { opacity:0; }
	100% { opacity:1; }
}

#who_we_are .vision > .seq2 {
	background-image: url('../img/contents_vision2.png');
	opacity:0;
	animation: vision-seq2-anim 6s infinite;
}

@keyframes vision-seq2-anim {
	0% { opacity:0; }
	10% { opacity:1; }
	20% { opacity:1; }
	30% { opacity:0; }
	40% { opacity:0; }
	50% { opacity:0; }
	60% { opacity:0; }
	70% { opacity:0; }
	80% { opacity:0; }
	90% { opacity:0; }
	100% { opacity:0; }
}

#who_we_are .vision > .seq3 {
	background-image: url('../img/contents_vision3.png');
	opacity:0;
	animation: vision-seq3-anim 6s infinite;
}

@keyframes vision-seq3-anim {
	0% { opacity:0; }
	10% { opacity:0; }
	20% { opacity:0; }
	30% { opacity:0; }
	40% { opacity:1; }
	50% { opacity:1; }
	60% { opacity:0; }
	70% { opacity:0; }
	80% { opacity:0; }
	90% { opacity:0; }
	100% { opacity:0; }
}

#who_we_are .vision > .seq4 {
	background-image: url('../img/contents_vision4.png');
	opacity:0;
	animation: vision-seq4-anim 6s infinite;
}

@keyframes vision-seq4-anim {
	0% { opacity:0; }
	10% { opacity:0; }
	20% { opacity:0; }
	30% { opacity:0; }
	40% { opacity:0; }
	50% { opacity:0; }
	60% { opacity:0; }
	70% { opacity:0; }
	80% { opacity:1; }
	90% { opacity:1; }
	100% { opacity:0; }
}

#who_we_are h4 {
	margin-top: 30px;
}


.members {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 60px;
}

.members > ul {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.members > ul > li {
	width: 33.33%;
	height: auto;
	overflow: hidden;
	float: left;
	padding: 0 20px;
	margin: 30px 0;
	position: relative;
	clear: none;
}

.members > ul > li > img {
	display: block;
	width: 100%;
	height: auto;
	float: left;
}

.members > ul > li > p.name {
	font-size: 24px;
	font-weight: 700;
}

.members > ul > li > p.part {
	font-size: 18px;
	font-weight: 700;
}

.members > ul > li > p.message {
	font-size: 16px;
	font-weight: 400;
}








/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =what we do---------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#what_we_do .scene-wraper {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: visible;
}


#what_we_do .scene1 {
	background: #222;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	overflow: visible;
}

#what_we_do .scene1 > .hidden-wrap {
	width: 100%;
	height: 100%;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

#what_we_do .scene1 > .hidden-wrap > .head {
	width: 45.6%;
	height: 99.7%;
	transform-origin: 36.9% 49.2%;
	transform: translateX(-10%) translateY(20%) translateZ(0) rotate(0deg);
	position: absolute;
	top: -42%;
	left: 33.2%;
}

#what_we_do .scene1 > .hidden-wrap > .head > .inner1 {
	width: 100%;
	height: 100%;
	background-image: url('../img/what_we_do_scene1_head1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}

#what_we_do .scene1 > .hidden-wrap > .head > .inner2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/what_we_do_scene1_head2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#what_we_do .scene1 > .hidden-wrap > .gun {
	width: 94.3%;
	height: 143%;
	transform: translateX(-10%) translateY(50%) translateZ(0) rotate(-3deg);
	position: absolute;
	top: -5.2%;
	left: 7.6%;
}

#what_we_do .scene1 > .hidden-wrap > .gun > .inner1 {
	width: 100%;
	height: 100%;
	background-image: url('../img/what_we_do_scene1_gun1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}

#what_we_do .scene1 > .hidden-wrap > .gun > .inner2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/what_we_do_scene1_gun2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}


#what_we_do .scene1 > .ring {
	width: 100%;
	height: 176.4%;
	background-image: url('../img/what_we_do_scene1_ring.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: -38.2%;
	left: 0;
}

#what_we_do .scene1 > .ring1 {transform: translateZ(0) scale(0) rotate(0deg);}
#what_we_do .scene1 > .ring2 {transform: translateZ(0) scale(0) rotate(80deg);}
#what_we_do .scene1 > .ring3 {transform: translateZ(0) scale(0) rotate(175deg);}
#what_we_do .scene1 > .ring4 {transform: translateZ(0) scale(0) rotate(280deg);}
#what_we_do .scene1 > .ring5 {transform: translateZ(0) scale(0) rotate(155deg);}
#what_we_do .scene1 > .ring6 {transform: translateZ(0) scale(0) rotate(120deg);}

#what_we_do .scene2 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
}

#what_we_do .tech-info {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 40px;
}

#what_we_do .tech-info > li {
	width: 50%;
	height: auto;
	overflow: hidden;
	padding: 0 20px;
	margin: 30px 0;
	float: left;
	position: relative;
}

#what_we_do .tech-info > li > .description {
	margin-top: 10px;
	float: left;
}




/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =contact us---------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#contact_us .scene-wraper {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: visible;
}

#contact_us .scene1 {
	overflow: hidden;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#contact_us .scene1 > .paper-wrap {
	width: 100%;
	height: 100%;
	-webkit-perspective: 1100px; /* Chrome, Safari, Opera */
    perspective: 1100px;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
}

#contact_us .scene1 > .paper-wrap > .paper {
	width: 90%;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateX(32%) translateY(50%) rotateX(55deg) rotateY(6deg) rotateZ(-24deg);
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

#contact_us .scene1 > .paper-wrap > .paper > .wave1 {
	width: 100%;
	height: 100%;
	background-image: url('../img/contact_scene1_wave.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	animation: contact_s1-wave1-anim 6s linear infinite;
}

@keyframes contact_s1-wave1-anim {
	0% { transform: translateY(0) translateZ(0); }
	100% { transform: translateY(100%) translateZ(0); }
}

#contact_us .scene1 > .paper-wrap > .paper > .wave2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/contact_scene1_wave.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform: translateY(-100%) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	animation: contact_s1-wave2-anim 6s linear infinite;
}

@keyframes contact_s1-wave2-anim {
	0% { transform: translateY(-100%) translateZ(0); }
	100% { transform: translateY(0) translateZ(0); }
}


#contact_us .scene1 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/contact_scene1_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
}


#contact_us .scene1 > .needle1 {
	width: 11.6%;
	height: 41.9%;
	overflow: hidden;
	position: absolute;
	top: 37%;
	left: 22.7%;
}

#contact_us .scene1 > .needle1 > .inner1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle1_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle1-anim 0.4s linear infinite;
}

#contact_us .scene1 > .needle1 > .inner2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle1_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle2-anim 0.4s linear infinite;
}



#contact_us .scene1 > .needle2 {
	width: 13.9%;
	height: 39.4%;
	overflow: hidden;
	position: absolute;
	top: 33.3%;
	left: 34.1%;
}

#contact_us .scene1 > .needle2 > .inner1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle2_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle1-anim 1.6s linear infinite;

}

#contact_us .scene1 > .needle2 > .inner2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle2_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle2-anim 1.6s linear infinite;
}

#contact_us .scene1 > .needle3 {
	width: 16.7%;
	height: 38.8%;
	overflow: hidden;
	position: absolute;
	top: 29.5%;
	left: 45.7%;
}

#contact_us .scene1 > .needle3 > .inner1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle3_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle1-anim 0.6s linear infinite;
}

#contact_us .scene1 > .needle3 > .inner2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle3_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle2-anim 0.6s linear infinite;
}

#contact_us .scene1 > .needle4 {
	width: 16.9%;
	height: 34.8%;
	overflow: hidden;
	position: absolute;
	top: 27.2%;
	left: 56.6%;
}

#contact_us .scene1 > .needle4 > .inner1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle4_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle1-anim 0.5s linear infinite;
}

#contact_us .scene1 > .needle4 > .inner2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle4_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle2-anim 0.5s linear infinite;
}

#contact_us .scene1 > .needle5 {
	width: 18.8%;
	height: 33.8%;
	overflow: hidden;
	position: absolute;
	top: 24.1%;
	left: 67.5%;
}

#contact_us .scene1 > .needle5 > .inner1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle5_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle1-anim 1.2s linear infinite;
}

#contact_us .scene1 > .needle5 > .inner2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_needle5_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-needle2-anim 1.2s linear infinite;
}

@keyframes contact-s1-needle1-anim {
	0% { opacity:0; }
	50% { opacity:1; }
	100% { opacity:0; }
}

@keyframes contact-s1-needle2-anim {
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}



#contact_us .scene1 > .bulb {
	width: 15.1%;
	height: 32%;
	overflow: hidden;
	position: absolute;
	top: 5.4%;
	left: 83.2%;
}

#contact_us .scene1 > .bulb > .inner1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_bulb1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
}

#contact_us .scene1 > .bulb > .inner2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/contact_scene1_bulb2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: contact-s1-bulb-anim 0.6s linear infinite alternate;
}

@keyframes contact-s1-bulb-anim {
	0% { opacity:0; }
	25% { opacity:0; }
	75% { opacity:1; }
	100% { opacity:1; }
}






#contact_us .scene2 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	/*opacity: 0;*/
}

#contact_us .scene3 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
}

#contact_us .contact-info {
	width: 100%;
	height: auto;
	overflow: hidden;
}

#contact_us .contact-info > li {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 40px;
	float: left;
}

#contact_us .contact-info > li:nth-child(2),
#contact_us .contact-info > li:nth-child(3) { width: 50%; }

#contact_us .contact-info p {
	font-size: 60px;
	word-break: break-all;
}

#contact_us .contact-info > li:nth-child(1) p {
	font-size: 24px;
}


.form-mail {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.form-mail > p {
	font-size: 30px;
	font-weight: 700;
}

.form-mail > form {
	margin-top: 20px;
}

.form-mail .left-box,
.form-mail .right-box {
	width: 50%;
	height: auto;
	overflow: hidden;
	float: left;
	padding: 0 5px;
	margin: 0;
	position: relative;
}

.form-mail .left-box > .rough-wrap,
.form-mail .right-box > .rough-wrap {
	margin: 5px 0;
	float: left;
}

.form-mail .btn-wrap {
	width: 100%;
	height: auto;
	overflow: hidden;
	float: left;
	margin-top: 20px;
}

.map-wrap {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 5px;
	position: relative;
}

#map_canvas {
	width: 100%;
	height: 300px;
}





/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =our partners--------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#our_partners .scene-wraper {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: visible;
}

#our_partners .scene1 {
	background-image: url('../img/clinets_scene1_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#our_partners .scene1 > .dial {
	width: 18.2%;
	height: 32.5%;
	background-image: url('../img/clinets_scene1_dial.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	transform-origin: 50% 50%;
	transform: translateZ(0);
	position: absolute;
	top: 36.4%;
	left: 58.4%;
}

#our_partners .scene1 > .hand {
	width: 31.5%;
	height: 82.6%;
	background-image: url('../img/clinets_scene1_hand.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	transform-origin: 53.7% 11%;
	transform: translateX(-60%) translateY(50%) translateZ(0) rotate(-20deg);
	position: absolute;
	top: 43.7%;
	left: 50.4%;
}


#our_partners .scene2 {
	background-image: url('../img/clinets_scene2_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#our_partners .scene2 > .shining {
	width: 86%;
	height: 66%;
	background-image: url('../img/clinets_scene2_shining.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: translateZ(0);
	position: absolute;
	top: 14.1%;
	left: 7%;
	animation: partners-s2-shining-anim 0.6s 1s linear infinite alternate;
}

@keyframes partners-s2-shining-anim {
	0% { transform: scale(1,1) translateZ(0); }
	100% { transform: scale(0.96,0.96) translateZ(0); }
}

#our_partners .scene2 > .gold {
	width: 67.6%;
	height: 50.7%;
	background-image: url('../img/clinets_scene2_gold.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	transform: translateZ(0);
	position: absolute;
	top: 30.7%;
	left: 17%;
}

#our_partners .scene3 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
}

#our_partners h4 {
	margin-top: 30px;
}

.partners-list {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 20px;
}

.partners-list > li {
	width: 25%;
	height: auto;
	overflow: hidden;
	padding: 20px 40px;
	float: left;
}

.partners-list > li > .logo-holder {
	width: 100%;
	height: auto;
	overflow: hidden;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
}



/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =epilogue------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
#epilogue {

}

#epilogue .scene1 {
	background-image: url('../img/epilogue_scene1_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene1 > .wolf {
	width: 5.2%;
	height: 5.3%;
	position: absolute;
	transform: translateZ(0);
}

#epilogue .scene1 > .wolf.ptn1 {
	transform-origin: 50% 300%;
	top: 45%;
	left: 20%;
	animation: wolf-around-anim 10s linear infinite;
}
@keyframes wolf-around-anim {
	0% { transform: rotate(0deg) translateZ(0); }
	100% { transform: rotate(359deg) translateZ(0); }
}

#epilogue .scene1 > .wolf.ptn2 {
	transform-origin: 50% 50%;
	top: 25%;
	left: 70%;
	animation: wolf-ply-anim 12s linear infinite;
}
@keyframes wolf-ply-anim {
	0% { transform: translateX(0) translateY(0) translateZ(0); }
	50% { transform: translateX(0) translateY(700%) translateZ(0); }
	100% { transform: translateX(0) translateY(0) translateZ(0); }
}

#epilogue .scene1 > .wolf.ptn1 > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene1_wolf.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	animation: wolf-leg-anim 0.5s steps(2, end) infinite,
				wolf-zigzag-anim 8s linear infinite alternate;
}

#epilogue .scene1 > .wolf.ptn2 > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene1_wolf.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	transform-origin: 50% 50%;
	animation: wolf-leg-anim 0.5s steps(2, end) infinite,
				wolf-turn-anim 12s linear infinite;
}

@keyframes wolf-leg-anim {
	0% { background-position: 0 0; }
	100% { background-position: 0 200%; }
}

@keyframes wolf-zigzag-anim {
	0% { transform: translateY(-100%) translateZ(0); }
	100% { transform: translateY(100%) translateZ(0); }
}

@keyframes wolf-turn-anim {
	0% { transform: rotate(90deg) translateZ(0); }
	49% { transform: rotate(90deg) translateZ(0); }
	50% { transform: rotate(270deg) translateZ(0); }
	99% { transform: rotate(270deg) translateZ(0); }
	100% { transform: rotate(90deg) translateZ(0); }
}

#epilogue .scene1 > .tree {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene1_tree.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
}

#epilogue .scene1 > .car {
	width: 8%;
	height: 44.9%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene1_car.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	transform: translateY(-150%);
	position: absolute;
	top: 0;
	left: 42.9%;
}




#epilogue .scene2 {
	width: 60%;
	background-image: url('../img/epilogue_scene2_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene2 > .music {
	width: 26.5%;
	height: 22%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene2_music.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 15.5%;
	left: 72%;
}

#epilogue .scene2 > .handle {
	width: 92.1%;
	height: 65.5%;
	background-image: url('../img/epilogue_scene2_handle.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 100%;
	position: absolute;
	top: 34.3%;
	left: 2.4%;
	animation: handle-anim 1s linear infinite alternate;
	transform: translateZ(0);
}

@keyframes handle-anim {
	0% { transform: rotate(-1deg) translateZ(0); }
	100% { transform: rotate(1deg) translateZ(0); }
}

#epilogue .scene2 > .handle > .hand {
	width: 32.7%;
	height: 76.2%;
	background-image: url('../img/epilogue_scene2_hand.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	transform-origin: 50% 50%;
	position: absolute;
	top: -19.8%;
	left: 16%;
	transform: translateZ(0);
	animation: finger-anim 1s steps(3, end) infinite;
}

@keyframes finger-anim {
	0% { background-position: 0 0; }
	100% { background-position: 0 150%; }
}



#epilogue .scene3 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	
}

#epilogue .scene3 > .bg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene3_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
	animation: car-bg-anim 0.8s ease infinite alternate;
}

@keyframes car-bg-anim {
	0% { transform: translateX(0) translateY(-1) translateZ(0); }
	100% { transform: translateX(0) translateY(2px) translateZ(0); }
}

#epilogue .scene3 > .cover {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene3_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
	animation: car-cover-anim 0.8s ease infinite alternate;
}

@keyframes car-cover-anim {
	0% { transform: translateX(0) translateY(0) translateZ(0); }
	100% { transform: translateX(0) translateY(4px) translateZ(0); }
}

#epilogue .scene3 > .head1 {
	width: 15.9%;
	height: 46.1%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene3_head1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 80%;
	position: absolute;
	top: -1%;
	left: 14.8%;
	animation: head1-anim 4s linear infinite;
	transform: translateZ(0);
}

@keyframes head1-anim {
	0% { transform: rotate(1deg) translateZ(0); }
	20% { transform: rotate(4deg) translateZ(0); }
	30% { transform: rotate(2deg) translateZ(0); }
	50% { transform: rotate(0deg) translateZ(0); }
	100% { transform: rotate(1deg) translateZ(0); }
}

#epilogue .scene3 > .head2 {
	width: 16.6%;
	height: 50.2%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene3_head2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 80%;
	position: absolute;
	top: -5.9%;
	left: 62.5%;
	animation: head2-anim 0.3s ease infinite alternate;
	transform: translateZ(0);
}

@keyframes head2-anim {
	0% { transform: rotate(-1deg) translateZ(0); }
	100% { transform: rotate(1deg) translateZ(0); }
}

#epilogue .scene3 > .handle {
	width: 37.8%;
	height: 35.5%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene3_handle.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 100%;
	position: absolute;
	top: 42.8%;
	left: 51.2%;
	animation: small-handle-anim 1s linear infinite alternate;
	transform: translateZ(0);
}

@keyframes small-handle-anim {
	0% { transform: rotate(-1.5deg) translateZ(0); }
	100% { transform: rotate(1.5deg) translateZ(0); }
}





#epilogue .scene4 {
	width: 90%;
	overflow: visible;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: #222;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	
	opacity: 0;
}

#epilogue .scene4 > .window-through {
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
}

#epilogue .scene4 > .window-through > .forest-far {
	width: 100%;
	height: 58.7%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene4_forest_far.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 7.3%;
	left: 0;
	transform: translateZ(0);
}

#epilogue .scene4 > .window-through > .forest-close {
	width: 100%;
	height: 58.7%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene4_forest_close.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 7.3%;
	left: 0;
	transform: translateZ(0);
}

#epilogue .scene4 > .window-through > .falling {
	width: 33.1%;
	height: 6%;
	overflow: hidden;
	transform-origin: 0% 50%;
	position: absolute;
	top: 28.4%;
	left: 43%;
	transform: rotate(-30deg) translateZ(0);
}

#epilogue .scene4 > .window-through > .falling > .inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene4_falling.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 0% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(100%) translateZ(0);
}

#epilogue .scene4 > .window-through > .boom {
	width: 22.5%;
	height: 35.5%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene4_boom.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 100%;
	position: absolute;
	top: 1.5%;
	left: 35.8%;
	transform: scale(0) translateZ(0);
}

#epilogue .scene4 > .car {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene4_car.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
	animation: s4-car-anim 0.8s ease infinite alternate;
}

@keyframes s4-car-anim {
	0% { transform: translateX(0) translateY(2px) translateZ(0); }
	100% { transform: translateX(0) translateY(6px) translateZ(0); }
}

#epilogue .scene4 > .arm {
	width: 71.5%;
	height: 47.1%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene4_arm.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 65%;
	left: 30%;
	transform: translateZ(0);
	animation: s4-car-anim 0.7s ease infinite alternate;
}



#epilogue .scene5 {
	width: 65%;
	background-image: url('../img/epilogue_scene5_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene5 > .char1-eye-w {
	width: 27%;
	height: 11.4%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene5_char1_eye_w.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 17.7%;
	left: 57.9%;
	transform: translateX(1px) translateZ(0);
}

#epilogue .scene5 > .char1-eye {
	width: 27%;
	height: 11.4%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene5_char1_eye.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 17.7%;
	left: 57.9%;
	animation: s5-eye-anim 3s linear infinite;
}



@keyframes s5-eye-anim {
	0% { transform: translateZ(0); opacity:0; }
	5% { transform: translateZ(0); opacity:1; }
	10% { transform: translateZ(0); opacity:0; }
	15% { transform: translateZ(0); opacity:1; }
	20% { transform: translateZ(0); opacity:0; }
	25% { transform: translateZ(0); opacity:1; }
	30% { transform: translateZ(0); opacity:0; }
	35% { transform: translateZ(0); opacity:1; }
	100% { transform: translateZ(0); opacity:1; }
}

#epilogue .scene5 > .ques1 {
	width: 34.5%;
	height: 47.3%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene5_char1_ques.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 6.4%;
	left: 5%;
	transform: scale(0) translateZ(0);
}

#epilogue .scene5 > .char2-eye-w {
	width: 28.4%;
	height: 9.2%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene5_char2_eye_w.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 76.8%;
	left: 15.7%;
	transform: translateX(-1px) translateZ(0);
}

#epilogue .scene5 > .char2-eye {
	width: 28.4%;
	height: 9.2%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene5_char2_eye.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 76.8%;
	left: 15.7%;
	animation: s5-eye-anim 3s linear infinite;
}

#epilogue .scene5 > .ques2 {
	width: 36.2%;
	height: 48.2%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene5_char2_ques.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 43%;
	left: 59.8%;
	transform: scale(0) translateZ(0);
}




#epilogue .scene6 {
	width: 34%;
	background-image: url('../img/epilogue_scene6_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene6 > .smoke {
	width: 54%;
	height: 54.8%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene6_smoke.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: -1%;
	left: 23%;
	transform: translateZ(0);
	animation: s6-smoke-anim 2s linear infinite alternate;
}

@keyframes s6-smoke-anim {
	0% { transform: skewY(10deg) translateZ(0); }
	100% { transform: skewY(-10deg) translateZ(0); }
}

#epilogue .scene6 > .arm {
	width: 42.9%;
	height: 49.8%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene6_arm.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	bottom: -5%;
	left: 50%;
	transform: translateY(100%) translateZ(0);
}




#epilogue .scene7 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene7 > .bg1 {
	width: 168%;
	height: 100%;
	background-image: url('../img/epilogue_scene7_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transform-origin: 100% 50%;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	right: 0;
	animation: s7-bg1-anim 3s linear infinite;
}

@keyframes s7-bg1-anim {
	0% { transform: translateX(0) translateZ(0); }
	100% { transform: translateX(100%) translateZ(0); }
}

#epilogue .scene7 > .bg2 {
	width: 168%;
	height: 100%;
	background-image: url('../img/epilogue_scene7_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transform-origin: 100% 50%;
	transform: translateX(-100%) translateZ(0);
	position: absolute;
	top: 0;
	right: 0;
	animation: s7-bg2-anim 3s linear infinite;
}

@keyframes s7-bg2-anim {
	0% { transform: translateX(-100%) translateZ(0); }
	100% { transform: translateX(0) translateZ(0); }
}

#epilogue .scene7 > .car {
	width: 65.8%;
	height: 84.2%;
	background-image: url('../img/epilogue_scene7_car.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}

#epilogue .scene7 > .car > .wheel {
	width: 33.9%;
	height: 97.8%;
	background-image: url('../img/epilogue_scene7_wheel.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 42%;
	left: 34.1%;
	animation: s7-wheel-anim 0.3s linear infinite;
}

@keyframes s7-wheel-anim {
	0% { transform: rotate(0deg) translateZ(0); }
	100% { transform: rotate(-359deg) translateZ(0); }
}

#epilogue .scene7 > .smoke {
	width: 30%;
	height: 60.6%;
	transform: translateX(0) translateZ(0);
	position: absolute;
	top: 33.9%;
	left: 65.4%;
}

#epilogue .scene7 > .smoke > div {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#epilogue .scene7 > .smoke > .smoke1 { background-image: url('../img/epilogue_scene7_smoke1.png'); }
#epilogue .scene7 > .smoke > .smoke2 { background-image: url('../img/epilogue_scene7_smoke2.png'); }
#epilogue .scene7 > .smoke > .smoke3 { background-image: url('../img/epilogue_scene7_smoke3.png'); }
#epilogue .scene7 > .smoke > .smoke4 { background-image: url('../img/epilogue_scene7_smoke4.png'); }
#epilogue .scene7 > .smoke > .smoke5 { background-image: url('../img/epilogue_scene7_smoke5.png'); }
#epilogue .scene7 > .smoke > .smoke6 { background-image: url('../img/epilogue_scene7_smoke6.png'); }
#epilogue .scene7 > .smoke > .smoke7 { background-image: url('../img/epilogue_scene7_smoke7.png'); }






#epilogue .scene8 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	
}

#epilogue .scene8 > .bg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene8_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
}

#epilogue .scene8 > .cover {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene8_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
}

#epilogue .scene8 > .smoke {
	width: 6.1%;
	height: 29.5%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene8_smoke.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 4.9%;
	left: 56.6%;
	transform: translateZ(0);
	animation: s8-smoke-anim 2s linear infinite alternate;
}

@keyframes s8-smoke-anim {
	0% { transform: skewY(20deg) translateZ(0); }
	100% { transform: skewY(-20deg) translateZ(0); }
}

#epilogue .scene8 > .car {
	width: 43.2%;
	height: 49.6%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene8_car.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 43.8%;
	left: 19.1%;
	transform: translateX(-200%) translateY(200%) translateZ(0);
}

#epilogue .scene8 > .bird {
	width: 10.1%;
	height: 40.4%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene8_bird.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 45.7%;
	left: 60.6%;
	transform: translateZ(0);
	animation: s8-bird-anim 3s ease infinite alternate;
}

@keyframes s8-bird-anim {
	0% { transform: scaleY(1) translateZ(0); }
	10% { transform: scaleY(0.96) translateZ(0); }
	90% { transform: scaleY(0.96) translateZ(0); }
	100% { transform: scaleY(1) translateZ(0); }
}




#epilogue .scene9 {
	width: 47%;
	background-image: url('../img/epilogue_scene9_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene9 > .smoke {
	width: 26.3%;
	height: 33.9%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene9_smoke.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: -3%;
	left: 23.6%;
	transform: translateZ(0);
	animation: s9-smoke-anim 2s linear infinite alternate;
}

@keyframes s9-smoke-anim {
	0% { transform: skewY(10deg) translateZ(0); }
	100% { transform: skewY(-10deg) translateZ(0); }
}

#epilogue .scene9 > .wow {
	width: 27.5%;
	height: 24.6%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene9_wow.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 54%;
	left: 36%;
	transform: scale(0) translateZ(0);
}

#epilogue .scene9 > .char1 {
	width: 65.3%;
	height: 71%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene9_char1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 36%;
	right: 54.2%;
	transform: translateX(-20%) translateY(100%) translateZ(0);
}

#epilogue .scene9 > .char2 {
	width: 70.8%;
	height: 75.7%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene9_char2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 31.9%;
	left: 49.8%;
	transform: translateX(20%) translateY(100%) translateZ(0);
}





#epilogue .scene10 {
	width: 70%;
	background-image: url('../img/epilogue_scene10_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	
}

#epilogue .scene10 > .alien {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene10_alien.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
	animation: s10-alien-anim 2s linear infinite;
}

@keyframes s10-alien-anim {
	0% { transform: translateX(2px) translateY(2px) translateZ(0); }
	5% { transform: translateX(0) translateY(0) translateZ(0); }
	10% { transform: translateX(2px) translateY(2px) translateZ(0); }
	15% { transform: translateX(0) translateY(0) translateZ(0); }
	20% { transform: translateX(2px) translateY(2px) translateZ(0); }
	25% { transform: translateX(0) translateY(0) translateZ(0); }
	30% { transform: translateX(2px) translateY(2px) translateZ(0); }
	35% { transform: translateX(0) translateY(0) translateZ(0); }
	100% { transform: translateX(0) translateY(0) translateZ(0); }
}

#epilogue .scene10 > .shoes1-1 {
	width: 29.4%;
	height: 36.6%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene10_shoes1_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 80.9%;
	left: 25.6%;
	transform: translateY(100%) translateZ(0);
}

#epilogue .scene10 > .shoes1-2 {
	width: 29.4%;
	height: 36.6%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene10_shoes1_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 80.9%;
	left: 25.6%;
	transform: translateY(100%) translateZ(0);
}

#epilogue .scene10 > .shoes2-1 {
	width: 35.2%;
	height: 52.6%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene10_shoes2_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 59.8%;
	left: 71.5%;
	transform: translateX(100%) translateY(100%) translateZ(0);
}

#epilogue .scene10 > .shoes2-2 {
	width: 35.2%;
	height: 52.6%;
	overflow: hidden;
	background-image: url('../img/epilogue_scene10_shoes2_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	position: absolute;
	top: 59.8%;
	left: 71.5%;
	transform: translateX(100%) translateY(100%) translateZ(0);
}




#epilogue .scene11 {
	width: 85%;
	background-image: url('../img/epilogue_scene11_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene11 > .char1 {
	width: 23.1%;
	height: 79.1%;
	background-image: url('../img/epilogue_scene11_char1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-220%) translateY(50%) translateZ(0) scale(1.5);
	position: absolute;
	top: 23.6%;
	left: 22%;
}

#epilogue .scene11 > .char2 {
	width: 22.1%;
	height: 69.5%;
	background-image: url('../img/epilogue_scene11_char2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-200%) translateY(50%) translateZ(0) scale(1.5);
	position: absolute;
	top: 31.7%;
	left: -2.4%;
}





#epilogue .scene12 {
	width: 34%;
	background-image: url('../img/epilogue_scene12_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene12 > .car {
	width: 24.6%;
	height: 45.5%;
	background-image: url('../img/epilogue_scene12_car.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(350%) translateZ(0);
	position: absolute;
	top: -45.5%;
	left: 48.1%;
}

#epilogue .scene12 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene12_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}




#epilogue .scene13 {
	width: 55%;
	background-image: url('../img/epilogue_scene13_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	-webkit-perspective: 600px; /* Chrome, Safari, Opera */
    perspective: 600px;
}

#epilogue .scene13 > .needle {
	width: 44%;
	height: 66.8%;
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	transform: translateX(20%) translateY(-13%) translateZ(0) rotateZ(20deg) rotateY(-25deg) rotateX(20deg);
	position: absolute;
	top: 0;
	left: 0;
}

#epilogue .scene13 > .needle > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene13_needle.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 110%;
	transform: rotate(0deg) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}





#epilogue .scene14 {
	width: 50%;
	background-image: url('../img/epilogue_scene14_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene14 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene14_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	animation: s14-bg-anim 0.2s infinite;
}

@keyframes s14-bg-anim {
	0% { opacity:1; }
	100% { opacity:0; }
}

#epilogue .scene14 > .car {
	width: 126.3%;
	height: 72.1%;
	background-image: url('../img/epilogue_scene14_car.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 27.9%;
	left: 7.2%;
	animation: s14-car-anim 0.5s ease-out infinite alternate;
}

@keyframes s14-car-anim {
	0% { transform: translateX(0) translateY(2px) translateZ(0); }
	25% { transform: translateX(0) translateY(-2px) translateZ(0); }
	50% { transform: translateX(0) translateY(2px) translateZ(0); }
	75% { transform: translateX(0) translateY(-2px) translateZ(0); }
	100% { transform: translateX(0) translateY(2px) translateZ(0); }
}





#epilogue .scene15 {
	width: 34%;
	background-image: url('../img/epilogue_scene15_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene15 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene15_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	animation: s15-bg-anim 0.5s ease-out infinite alternate;
}

@keyframes s15-bg-anim {
	0% { opacity:1; }
	100% { opacity:0; }
}

#epilogue .scene15 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene15_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}

#epilogue .scene15 > .car {
	width: 96.8%;
	height: 55.8%;
	background-image: url('../img/epilogue_scene15_car.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: scale(1) translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 44.6%;
	left: 20.5%;
}





#epilogue .scene16 {
	width: 50%;
	background-image: url('../img/epilogue_scene16_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene16 > .bg1 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene16_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
}

#epilogue .scene16 > .char1 {
	width: 23.7%;
	height: 51.2%;
	background-image: url('../img/epilogue_scene16_char1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 25.4%;
	left: 63.7%;
	opacity: 0;
}

#epilogue .scene16 > .char1-head {
	width: 10.5%;
	height: 12%;
	background-image: url('../img/epilogue_scene16_char1_head.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 17.9%;
	left: 73.5%;
	opacity: 0;
	animation: s16-char1-anim 0.5s ease-out infinite alternate;
}

@keyframes s16-char1-anim {
	0% { transform: translateX(0) translateY(1px) translateZ(0); }
	100% { transform: translateX(0) translateY(2px) translateZ(0); }
}

#epilogue .scene16 > .char2 {
	width: 15.8%;
	height: 42.8%;
	background-image: url('../img/epilogue_scene16_char2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 20.7%;
	left: 53.7%;
	opacity: 0;
}

#epilogue .scene16 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene16_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}





#epilogue .scene17 {
	width: 50%;
	background-image: url('../img/epilogue_scene17_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}



#epilogue .scene18 {
	width: 55%;
	background-image: url('../img/epilogue_scene18_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene18 > .arm {
	width: 85.3%;
	height: 93.3%;
	background-image: url('../img/epilogue_scene18_arm.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 21.3% 7%;
	transform: rotate(30deg) translateZ(0);
	position: absolute;
	top: 18.6%;
	left: 34.3%;
}

#epilogue .scene18 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene18_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}




#epilogue .scene19 {
	background-image: url('../img/epilogue_scene19_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene19 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene19_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	animation: s19-bg-anim 1s ease-out infinite alternate;
}

@keyframes s19-bg-anim {
	0% { opacity:1; }
	100% { opacity:0; }
}

#epilogue .scene19 > .cover1 {
	width: 50%;
	height: 100%;
	transform: translateX(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

#epilogue .scene19 > .cover1 > .inner {
	width: 103.3%;
	height: 100%;
	background-image: url('../img/epilogue_scene19_cover1.png');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(3.2%) translateZ(0);
	position: absolute;
	top: 0;
	right: 0;
}

#epilogue .scene19 > .cover2 {
	width: 50%;
	height: 100%;
	transform: translateX(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 50%;
	overflow: hidden;
}

#epilogue .scene19 > .cover2 > .inner {
	width: 103.3%;
	height: 100%;
	background-image: url('../img/epilogue_scene19_cover2.png');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-3.2%) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}




#epilogue .scene20 {
	width: 60%;
	background-image: url('../img/epilogue_scene20_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene20 > .seq {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#epilogue .scene20 > .seq1 { background-image: url('../img/epilogue_scene20_seq1.png'); }
#epilogue .scene20 > .seq2 { background-image: url('../img/epilogue_scene20_seq2.png'); }
#epilogue .scene20 > .seq3 { background-image: url('../img/epilogue_scene20_seq3.png'); }
#epilogue .scene20 > .seq4 { background-image: url('../img/epilogue_scene20_seq4.png'); }
#epilogue .scene20 > .seq5 { background-image: url('../img/epilogue_scene20_seq5.png'); }
#epilogue .scene20 > .seq6 { background-image: url('../img/epilogue_scene20_seq6.png'); }
#epilogue .scene20 > .seq7 { background-image: url('../img/epilogue_scene20_seq7.png'); }
#epilogue .scene20 > .seq8 { background-image: url('../img/epilogue_scene20_seq8.png'); }
#epilogue .scene20 > .seq9 { background-image: url('../img/epilogue_scene20_seq9.png'); }
#epilogue .scene20 > .seq10 { background-image: url('../img/epilogue_scene20_seq10.png'); }
#epilogue .scene20 > .seq11 { background-image: url('../img/epilogue_scene20_seq11.png'); }
#epilogue .scene20 > .seq12 { background-image: url('../img/epilogue_scene20_seq12.png'); }





#epilogue .scene21 {
	width: 70%;
	background-image: url('../img/epilogue_scene21_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene21 > .light {
	width: 48.7%;
	height: 100.3%;
	background-image: url('../img/epilogue_scene21_light.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% -20%;
	transform: translateZ(0);
	position: absolute;
	top: -7%;
	left: 25%;
	animation: s21-light-anim 1s ease-in-out infinite alternate;
}

@keyframes s21-light-anim {
	0% { transform: rotate(-4deg) translateZ(0); }
	100% { transform: rotate(4deg) translateZ(0); }
}




#epilogue .scene22 {
	width: 80%;
	background-image: url('../img/epilogue_scene22_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene22 > .arm1 {
	width: 51.9%;
	height: 62.9%;
	background-image: url('../img/epilogue_scene22_arm1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 9%;
	left: 63.8%;
	animation: s22-arm1-anim 0.6s ease-in-out infinite alternate;
}

@keyframes s22-arm1-anim {
	0% { transform: translateX(-1%) translateY(0) translateZ(0); }
	100% { transform: translateX(0) translateY(0) translateZ(0); }
}

#epilogue .scene22 > .arm2 {
	width: 64.6%;
	height: 69.1%;
	background-image: url('../img/epilogue_scene22_arm2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 27.2%;
	left: 46.3%;
	animation: s22-arm2-anim 0.6s ease-in-out infinite alternate;
}

@keyframes s22-arm2-anim {
	0% { transform: translateX(1%) translateY(0) translateZ(0); }
	100% { transform: translateX(0) translateY(0) translateZ(0); }
}

#epilogue .scene22 > .knot {
	width: 4.6%;
	height: 19.2%;
	background-image: url('../img/epilogue_scene22_knot.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 25.1%;
	left: 61.5%;
	animation: s22-knot-anim 0.6s ease-in-out infinite alternate;
}

@keyframes s22-knot-anim {
	0% { transform: rotate(-3deg) translateX(0) translateY(1px) translateZ(0); }
	100% { transform: rotate(3deg) translateX(-1px) translateY(0) translateZ(0); }
}




#epilogue .scene23 {
	width: 60%;
	background-image: url('../img/epilogue_scene20_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene23 > .seq {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#epilogue .scene23 > .seq1 { background-image: url('../img/epilogue_scene23_seq1.png'); }
#epilogue .scene23 > .seq2 { background-image: url('../img/epilogue_scene23_seq2.png'); }
#epilogue .scene23 > .seq3 { background-image: url('../img/epilogue_scene23_seq3.png'); }
#epilogue .scene23 > .seq4 { background-image: url('../img/epilogue_scene23_seq4.png'); }
#epilogue .scene23 > .seq5 { background-image: url('../img/epilogue_scene23_seq5.png'); }
#epilogue .scene23 > .seq6 { background-image: url('../img/epilogue_scene23_seq6.png'); }
#epilogue .scene23 > .seq7 { background-image: url('../img/epilogue_scene23_seq7.png'); }
#epilogue .scene23 > .seq8 { background-image: url('../img/epilogue_scene23_seq8.png'); }
#epilogue .scene23 > .seq9 { background-image: url('../img/epilogue_scene23_seq9.png'); }
#epilogue .scene23 > .seq10 { background-image: url('../img/epilogue_scene23_seq10.png'); }
#epilogue .scene23 > .seq11 { background-image: url('../img/epilogue_scene23_seq11.png'); }
#epilogue .scene23 > .seq12 { background-image: url('../img/epilogue_scene23_seq12.png'); }




#epilogue .scene24 {
	width: 65%;
	background-color: #222;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene24 > .morning {
	width: 100%;
	height: 100%;
	background-color: #fff;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#epilogue .scene24 > .sun {
	width: 156.8%;
	height: 193.6%;
	background-image: url('../img/epilogue_scene24_sun.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 50%;
	transform: translateX(100%) translateY(100%) translateZ(0) rotate(90deg);
	position: absolute;
	top: -67.1%;
	left: -63.6%;
}

#epilogue .scene24 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene24_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}




#epilogue .scene25 {
	width: 85%;
	background-image: url('../img/epilogue_scene25_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene25 > .char1-head {
	width: 15.5%;
	height: 49.3%;
	background-image: url('../img/epilogue_scene25_char1_head.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 15.7%;
	left: 22.5%;
	animation: s25-char1-head-anim 1s infinite alternate;
}

@keyframes s25-char1-head-anim {
	0% { transform: rotate(0deg) translateX(0) translateY(0) translateZ(0); }
	100% { transform: rotate(3deg) translateX(-1px) translateY(1px) translateZ(0); }
}

#epilogue .scene25 > .char1-arm {
	width: 32.8%;
	height: 70.4%;
	background-image: url('../img/epilogue_scene25_char1_arm.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 23.8%;
	left: 12%;
}

#epilogue .scene25 > .char2-head {
	width: 6.5%;
	height: 24%;
	background-image: url('../img/epilogue_scene25_char2_head.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: -8.7%;
	left: 80.4%;
	animation: s25-char2-head-anim 3s ease infinite alternate;
}

@keyframes s25-char2-head-anim {
	0% { transform: translateX(0) translateY(0) translateZ(0); }
	20% { transform: translateX(0) translateY(1px) translateZ(0); }
	80% { transform: translateX(0) translateY(1px) translateZ(0); }
	100% { transform: translateX(0) translateY(0) translateZ(0); }
}

#epilogue .scene25 > .char2-arm {
	width: 8.5%;
	height: 15.7%;
	background-image: url('../img/epilogue_scene25_char2_arm.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 8.2%;
	left: 82.2%;
	animation: s25-char2-arm-anim 1s infinite alternate;
}

@keyframes s25-char2-arm-anim {
	0% { transform: translateX(-1px) translateY(0) translateZ(0); }
	50% { transform: translateX(-2px) translateY(1px) translateZ(0); }
	100% { transform: translateX(-3px) translateY(0) translateZ(0); }
}

#epilogue .scene25 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene25_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}





#epilogue .scene26 {
	width: 70%;
	background-image: url('../img/epilogue_scene26_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene26 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene26_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#epilogue .scene26 > .wow {
	width: 44.6%;
	height: 73.2%;
	background-image: url('../img/epilogue_scene26_wow.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: scale(0,0) translateZ(0);
	position: absolute;
	top: 14.2%;
	left: 50.9%;
}

#epilogue .scene26 > .bulb {
	width: 44.6%;
	height: 73.2%;
	background-image: url('../img/epilogue_scene26_bulb.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: scale(0,0) translateZ(0);
	position: absolute;
	top: 14.2%;
	left: 50.9%;
}




#epilogue .scene27 {
	width: 80%;
	background: #222;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene27 > .leg {
	width: 70%;
	height: 69.8%;
	background-image: url('../img/epilogue_scene27_leg.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateZ(0);
	position: absolute;
	top: 49.8%;
	left: 18%;
	animation: s27-leg-anim 0.4s steps(2, end) infinite;
}

@keyframes s27-leg-anim {
	0% { background-position: 0 0; }
	100% { background-position: 0 200%; }
}

#epilogue .scene27 > .stair {
	width: 100%;
	height: 100%;
	transform: translateY(40%) translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	animation: s27-stair-anim 0.2s infinite;
}

@keyframes s27-stair-anim {
	0% { transform: translateY(40%) translateZ(0) scale(1,1); }
	100% { transform: translateY(60%) translateZ(0) scale(1.1,1); }
}

#epilogue .scene27 > .stair > .rough-wrap {
	position: absolute;
	width: 80%;
	height: 20%;
	top: 50%;
	left: 50%;
	transform-origin: 50% 50%;
}

#epilogue .scene27 > .stair > .rough-wrap:nth-child(1) { transform: translateX(-50%) translateY(0%) translateZ(0) scale(1,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(2) { transform: translateX(-50%) translateY(-100%) translateZ(0) scale(0.9,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(3) { transform: translateX(-50%) translateY(-200%) translateZ(0) scale(0.8,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(4) { transform: translateX(-50%) translateY(-300%) translateZ(0) scale(0.7,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(5) { transform: translateX(-50%) translateY(-400%) translateZ(0) scale(0.6,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(6) { transform: translateX(-50%) translateY(-500%) translateZ(0) scale(0.5,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(7) { transform: translateX(-50%) translateY(-600%) translateZ(0) scale(0.4,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(8) { transform: translateX(-50%) translateY(-700%) translateZ(0) scale(0.3,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(9) { transform: translateX(-50%) translateY(-800%) translateZ(0) scale(0.2,1); }
#epilogue .scene27 > .stair > .rough-wrap:nth-child(10) { transform: translateX(-50%) translateY(-900%) translateZ(0) scale(0.1,1); }

#epilogue .scene27 > .stair > .rough-wrap > .rough-bg > svg > .rough-polygon {
	fill: #fff;
	stroke-width:3;
	stroke:#222;
}




#epilogue .scene28 {
	background-image: url('../img/epilogue_scene28_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene28 > .head {
	width: 9.6%;
	height: 23.4%;
	background-image: url('../img/epilogue_scene28_head.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 100%;
	transform: translateZ(0);
	position: absolute;
	top: 33.2%;
	left: 44.1%;
	animation: s28-head-anim 5s linear infinite;
}

@keyframes s28-head-anim {
	0% { transform: translateZ(0) rotate(-6deg); }
	3% { transform: translateZ(0) rotate(4deg); }
	50% { transform: translateZ(0) rotate(4deg); }
	53% { transform: translateZ(0) rotate(-6deg); }
	100% { transform: translateZ(0) rotate(-6deg); }
}

#epilogue .scene28 > .tail {
	width: 1.8%;
	height: 2.3%;
	background-image: url('../img/epilogue_scene28_tail.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 13.6% 25%;
	transform: translateZ(0);
	position: absolute;
	top: 67.5%;
	left: 26.9%;
	animation: s28-tail-anim 1s infinite alternate;
}

@keyframes s28-tail-anim {
	0% { transform: translateZ(0) rotate(-4deg); }
	100% { transform: translateZ(0) rotate(4deg); }
}

#epilogue .scene28 > .light1 {
	width: 20.5%;
	height: 27.4%;
	background-image: url('../img/epilogue_scene28_light1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 0%;
	transform: translateZ(0);
	position: absolute;
	top: -2.6%;
	left: 38.1%;
}

#epilogue .scene28 > .light2 {
	width: 20.5%;
	height: 27.4%;
	background-image: url('../img/epilogue_scene28_light2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 0%;
	transform: translateZ(0);
	position: absolute;
	top: -2.6%;
	left: 38.1%;
	animation: s28-light2-anim 0.8s ease-out infinite alternate;
}

@keyframes s28-light2-anim {
	0% { opacity:1; }
	100% { opacity:0; }
}




#epilogue .scene29 {
	width: 55%;
	background-image: url('../img/epilogue_scene29_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene29 > .head {
	width: 46%;
	height: 60.8%;
	background-image: url('../img/epilogue_scene29_head.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 50% 75%;
	transform: translateZ(0);
	position: absolute;
	top: 7.2%;
	left: 57.6%;
	animation: s29-head-anim 5s linear infinite;
}

@keyframes s29-head-anim {
	0% { transform: translateZ(0) rotate(-4deg); }
	3% { transform: translateZ(0) rotate(2deg); }
	50% { transform: translateZ(0) rotate(2deg); }
	53% { transform: translateZ(0) rotate(-4deg); }
	100% { transform: translateZ(0) rotate(-4deg); }
}

#epilogue .scene29 > .arm1 {
	width: 67.4%;
	height: 74.5%;
	background-image: url('../img/epilogue_scene29_arm1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: 0% 100%;
	transform: translateZ(0);
	position: absolute;
	top: 68.4%;
	left: 15.8%;
	animation: s29-arm1-anim 2s linear infinite alternate;
}

@keyframes s29-arm1-anim {
	0% { transform: translateZ(0) rotate(1deg); }
	100% { transform: translateZ(0) rotate(-1deg); }
}

#epilogue .scene29 > .arm2 {
	width: 59%;
	height: 71.6%;
	transform-origin: 0% 100%;
	transform: translateZ(0);
	position: absolute;
	top: 47.8%;
	left: -14%;
	animation: s29-arm2-anim 0.6s linear infinite alternate;
}

@keyframes s29-arm2-anim {
	0% { transform: translateZ(0) rotate(1deg); }
	100% { transform: translateZ(0) rotate(-1deg); }
}

#epilogue .scene29 > .arm2 > .inner1 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene29_arm2_1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0%;
	left: 0%;
	animation: s29-arm2-1-anim 0.6s linear infinite alternate;
}

@keyframes s29-arm2-1-anim {
	0% { opacity:1; }
	50% { opacity:1; }
	51% { opacity:0; }
	100% { opacity:0; }
}

#epilogue .scene29 > .arm2 > .inner2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene29_arm2_2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0%;
	left: 0%;
	opacity: 0;
	animation: s29-arm2-2-anim 0.6s linear infinite alternate;
}

@keyframes s29-arm2-2-anim {
	0% { opacity:0; }
	50% { opacity:0; }
	51% { opacity:1; }
	100% { opacity:1; }
}





#epilogue .scene30 {
	width: 55%;
	background-image: url('../img/epilogue_scene30_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene30 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene30_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}




#epilogue .scene31 {
	width: 55%;
	background: #fff;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene31 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene31_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}


#epilogue .scene31 > .gloss {
	width: 16%;
	height: 37.2%;
	background-image: url('../img/epilogue_scene31_gloss.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-350%) translateZ(0);
	position: absolute;
	top: 21.3%;
	left: 100%;
}

#epilogue .scene31 > .dot {
	width: 18.4%;
	height: 5.3%;
	background-image: url('../img/epilogue_scene31_gloss.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 85.2%;
	left: 5.8%;
}

#epilogue .scene31 > .dot > div {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0%;
	left: 0%;
	opacity: 0;
}

#epilogue .scene31 > .dot > .inner1 { background-image: url('../img/epilogue_scene31_dot1.png'); }
#epilogue .scene31 > .dot > .inner2 { background-image: url('../img/epilogue_scene31_dot2.png'); }
#epilogue .scene31 > .dot > .inner3 { background-image: url('../img/epilogue_scene31_dot3.png'); }




#epilogue .scene32 {
	width: 55%;
	background-image: url('../img/epilogue_scene32_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene32 > .wow {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene32_wow.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0%;
	left: 0%;
	animation: s32-wow-anim 0.5s linear infinite alternate;
}

@keyframes s32-wow-anim {
	0% { transform: scale(1,1) translateZ(0); }
	100% { transform: scale(1.04,1.04) translateZ(0); }
}





#epilogue .scene33 {
	width: 33%;
	background-image: url('../img/epilogue_scene33_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene33 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene33_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0%;
	left: 0%;
	animation: s33-bg2-anim 0.4s linear infinite;
}

@keyframes s33-bg2-anim {
	0% { opacity:0; }
	1% { opacity:1; }
	50% { opacity:1; }
	51% { opacity:0; }
	100% { opacity:0; }
}





#epilogue .scene34 {
	width: 70%;
	background-image: url('../img/epilogue_scene34_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene34 > .eye1 {
	width: 86%;
	height: 54.6%;
	background-image: url('../img/epilogue_scene34_eye1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 24%;
	left: 8.1%;
}

#epilogue .scene34 > .eye2 {
	width: 86%;
	height: 54.6%;
	background-image: url('../img/epilogue_scene34_eye2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 24%;
	left: 8.1%;
	opacity: 0;
	animation: s34-eye2-anim 0.4s linear infinite;
}

@keyframes s34-eye2-anim {
	0% { opacity:0; }
	100% { opacity:1; }
}




#epilogue .scene35 {
	width: 70%;
	background-image: url('../img/epilogue_scene35_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene35 > .mouth {
	width: 42.9%;
	height: 97.6%;
	background-image: url('../img/epilogue_scene35_mouth.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 45.9%;
	left: 28.5%;
	animation: s35-mouth-anim 1.5s linear infinite;
}

@keyframes s35-mouth-anim {
	0% { transform: translateX(0) translateY(0%) translateZ(0); }
	10% { transform: translateX(0) translateY(8%) translateZ(0); }
	20% { transform: translateX(0) translateY(0%) translateZ(0); }
	30% { transform: translateX(0) translateY(4%) translateZ(0); }
	40% { transform: translateX(0) translateY(0%) translateZ(0); }
	50% { transform: translateX(0) translateY(6%) translateZ(0); }
	60% { transform: translateX(0) translateY(0%) translateZ(0); }
	70% { transform: translateX(0) translateY(2%) translateZ(0); }
	80% { transform: translateX(0) translateY(7%) translateZ(0); }
	100% { transform: translateX(0) translateY(0%) translateZ(0);}
}





#epilogue .scene36 {
	width: 60%;
	background-image: url('../img/epilogue_scene36_bg1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene36 > .bg2 {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene36_bg2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0%;
	left: 0%;
	opacity: 0;
}





#epilogue .scene37 {
	width: 60%;
	background: #222;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene37 > .hand {
	width: 44%;
	height: 50.3%;
	transform: translateZ(0);
	position: absolute;
	top: 3.9%;
	left: 40.4%;
	animation: s37-hand-anim 1.5s linear infinite;
}

@keyframes s37-hand-anim {
	0% { transform: translateX(0) translateY(0%) translateZ(0); }
	10% { transform: translateX(-3%) translateY(8%) translateZ(0); }
	20% { transform: translateX(-6%) translateY(0%) translateZ(0); }
	30% { transform: translateX(-9%) translateY(4%) translateZ(0); }
	40% { transform: translateX(-12%) translateY(0%) translateZ(0); }
	50% { transform: translateX(-15%) translateY(6%) translateZ(0); }
	60% { transform: translateX(0) translateY(0%) translateZ(0); }
	70% { transform: translateX(0) translateY(2%) translateZ(0); }
	80% { transform: translateX(0) translateY(7%) translateZ(0); }
	100% { transform: translateX(0) translateY(0%) translateZ(0);}
}

#epilogue .scene37 > .hand > .inner {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene37_hand.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0%;
	left: 0%;
	animation: s37-hand-inner-anim 0.2s linear infinite alternate;
}

@keyframes s37-hand-inner-anim {
	0% { transform: translateX(0%) translateY(0%) translateZ(0); }
	100% { transform: translateX(1%) translateY(0%) translateZ(0);}
}

#epilogue .scene37 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene37_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	animation: s37-cover-anim 0.6s linear infinite alternate;
}

@keyframes s37-cover-anim {
	0% { transform: translateX(0) translateY(0%) translateZ(0); }
	100% { transform: translateX(0) translateY(1%) translateZ(0);}
}




#epilogue .scene38 {
	width: 60%;
	background-image: url('../img/epilogue_scene38_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene38 > .leg {
	width: 22.4%;
	height: 41.6%;
	background-image: url('../img/epilogue_scene38_leg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(0) translateY(0) translateZ(0);
	position: absolute;
	top: 18.1%;
	left: 30.5%;
}

#epilogue .scene38 > .wow1 {
	width: 56.5%;
	height: 100.6%;
	background-image: url('../img/epilogue_scene38_wow1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 5.1%;
	left: 23.1%;
}

#epilogue .scene38 > .wow2 {
	width: 56.5%;
	height: 100.6%;
	background-image: url('../img/epilogue_scene38_wow2.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 5.1%;
	left: 23.1%;
	opacity: 0;
	animation: s38-wow2-anim 0.4s linear infinite alternate;
}

@keyframes s38-wow2-anim {
	0% { opacity:0; }
	100% { opacity:1; }
}

#epilogue .scene38 > .cover {
	width: 100%;
	height: 100%;
	background-image: url('../img/epilogue_scene38_cover.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
}




#epilogue .scene39 {
	width: 80%;
	background-image: url('../img/epilogue_scene39_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene39 > .seq {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#epilogue .scene39 > .seq1 { background-image: url('../img/epilogue_scene39_seq1.png'); animation: s39-seq1-anim 0.6s linear infinite; }
#epilogue .scene39 > .seq2 { background-image: url('../img/epilogue_scene39_seq3.png'); animation: s39-seq2-anim 0.6s linear infinite; }
#epilogue .scene39 > .seq3 { background-image: url('../img/epilogue_scene39_seq2.png'); animation: s39-seq3-anim 0.6s linear infinite; }
#epilogue .scene39 > .seq4 { background-image: url('../img/epilogue_scene39_seq4.png'); animation: s39-seq4-anim 0.6s linear infinite; }

@keyframes s39-seq1-anim {
	0% { opacity:1; }
	25% { opacity:1; }
	26% { opacity:0; }
	100% { opacity:0; }
}

@keyframes s39-seq2-anim {
	0% { opacity:0; }
	24% { opacity:0; }
	25% { opacity:1; }
	50% { opacity:1; }
	51% { opacity:0; }
	100% { opacity:0; }
}

@keyframes s39-seq3-anim {
	0% { opacity:0; }
	49% { opacity:0; }
	50% { opacity:1; }
	75% { opacity:1; }
	76% { opacity:0; }
	100% { opacity:0; }
}

@keyframes s39-seq4-anim {
	0% { opacity:0; }
	74% { opacity:0; }
	75% { opacity:1; }
	100% { opacity:1; }
}




#epilogue .scene40 {
	width: 80%;
	background: #222;
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}

#epilogue .scene40 > .seq {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateZ(0);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#epilogue .scene40 > .seq1 { background-image: url('../img/epilogue_scene40_seq1.png'); opacity: 1; }
#epilogue .scene40 > .seq2 { background-image: url('../img/epilogue_scene40_seq2.png'); }
#epilogue .scene40 > .seq3 { background-image: url('../img/epilogue_scene40_seq3.png'); }
#epilogue .scene40 > .seq4 { background-image: url('../img/epilogue_scene40_seq4.png'); }
#epilogue .scene40 > .seq5 { background-image: url('../img/epilogue_scene40_seq5.png'); }


#epilogue .scene41 {
	transform: translateX(-50%) translateY(-50%) translateZ(0);
	position: absolute;
	top: 50%;
	left: 50%;
	
}

#epilogue .scene41 > p {
	width: 100%;
	height: auto;
	text-align: center;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	font-size: 30px;
	font-weight: 300;
	transform-origin: 50% 50%;
	transform: translateX(0) translateY(0) translateZ(0) scale(1,1);
	line-height: 150%;
	position: relative;
	opacity: 0;
	color: #fff;
}

#epilogue > .full-w {
	height: 60px !important;
	min-height: 60px;
	padding: 0;
	background: transparent;
}



/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =media query--------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
@media screen and (max-width: 320px) {
	.hidden-gnb { padding: 10px 5px 10px 65px; }
	#welcome .slogan {font-size: 32px !important; }
	#welcome .description {font-size: 16px !important;}
}

@media screen and (max-width: 640px) {
	.pc-only { display: none; }
	.mobile-only.inline { display: inline; }
	.mobile-only.block { display: block; }
	.mobile-only.inlineblock { display: inline-block; }

	.full-w { padding: 60px 10px; }
	.full-h h1 { font-size: 40px; line-height: 105%; }
	.full-h h1 > .subtitle { font-size: 14px; line-height: 150%; }

	#welcome .signature { width: 200px; height: 200px; }
	#welcome .slogan {font-size: 36px; }
	#welcome .description {font-size: 18px;}

	.scene-guide { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0.7,0.7); }
	.btn-slide-top { bottom: 5px; right: 5px;}

	#who_we_are .vision { width: 300px; height: 132px; margin-bottom:20px; }
	.members > ul > li { width: 50%; padding: 0 10px; margin: 20px 0; }
	.members > ul > li:nth-child(1),
	.members > ul > li:nth-child(3),
	.members > ul > li:nth-child(5) { clear: both;}
	.members > ul > li > p.name { font-size: 18px; }
	.members > ul > li > p.part { font-size: 14px; }




	#what_we_do .tech-info { margin-top: 20px; }
	#what_we_do .tech-info > li { padding: 0 10px; margin: 20px 0; }
	#what_we_do .tech-info > li > h3 { font-size: 18px; }

	#contact_us .contact-info > li:nth-child(2),
	#contact_us .contact-info > li:nth-child(3) { width: 100%; }
	#contact_us .contact-info p { font-size: 36px; }
	#contact_us .contact-info > li:nth-child(1) p { font-size: 18px; }

	.form-mail .left-box,
	.form-mail .right-box { width: 100%; }
	

	#map_canvas { height: 200px; }

	.partners-list > li { width: 50%; padding:10px 20px; }

	#epilogue .scene6 { width: 44%; }
	#epilogue .scene9 { width: 57%; }
	#epilogue .scene12 { width: 44%; }
	#epilogue .scene15 { width: 44%; }
	#epilogue .scene16 { width: 60%; }
	#epilogue .scene33 { width: 43%; }
	#epilogue .scene41 > p { font-size:18px; }

}

@media screen and (min-width: 641px) {
	.mobile-only { display: none; }
	.pc-only.inline { display: inline; }
	.pc-only.block { display: block; }
	.pc-only.inlineblock { display: inline-block; }
	.members > ul > li:nth-child(1),
	.members > ul > li:nth-child(4) { clear: both;}
}

@media screen and (max-width: 1000px) {
	#header > .gnb { display: none; }
	#header > .btn-menu-shortcut { display: block; }
	
}

@media screen and (min-width: 641px) and (max-width: 1000px) {
	.partners-list > li { width: 33.33%; padding:10px 20px; }
}

@media screen and (min-width: 1201px) {
	.container {width: 1200px; }
	.container.open { overflow: visible; }
}