/* INTRO CSS */

html, body, .stage-wrap, .stage { height: 100%; }
html { font-size: 10px;  }
body { background-color: #000; overflow: hidden; }

.cor-logo { width: 20rem; height: 4rem; background: url(../images/intro/logo.png) no-repeat 50% 50% / contain; position: fixed; z-index: 5000; left: 3rem; top: 3rem; }
.skip-a { text-align: center; display: none; width: 120px; height: 46px; line-height: 46px; font-size: 16px; color: #FFF; position: fixed; z-index: 5001; right: 30px; bottom: 30px; opacity: .5; background-color: rgba(0,0,0,0.4); border: 1px solid #FFF; border-radius: 4px; }
.skip-a:hover { background-color: rgba(0,0,0,0.5); opacity: 1; }

/* keyframe */
@keyframes clip01txtmove {
	0% { 
		-webkit-transform: translate(5rem,0);	
		transform: translate(12rem,0); 
		-webkit-transform: scale(2,2);
		transform: scale(2,2);
		opacity: 0;
	}
	10% { 
		-webkit-transform: translate(0,0);		
		transform: translate(0,0); 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		opacity: 1;
	}
	70% { 
		-webkit-transform: translate(0,0);		
		transform: translate(0,0); 
		opacity: 1;
	}
	100% { 
		-webkit-transform: translate(-35rem,0);		
		transform: translate(-35rem,0); 
		opacity: 0;
	}
}
@keyframes clip01rotate {
	0% { 
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 0;
	}
	5% { 
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
		opacity: 1;
	}
	10% { 
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}
	15% { 
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
		opacity: 1;
	}
	20% { 
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}
	70% { 
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}
	100% { 
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		-webkit-transform: scale(2,2);
		transform: scale(2,2);
		opacity: 0;
	}
}

@keyframes clip02clip {
	0% { 
		opacity: 0;
	}
	10% { 
		opacity: 1;
	}
	90% { 
		opacity: 1;
	}
	100% { 
		opacity: 1;
	}
}
@keyframes clip02mask {
	0% { 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		opacity: 1;
	}
	20% { 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		opacity: 1;
	}
	100% { 
		-webkit-transform: scale(15,15);
		transform: scale(15,15);
		opacity: 0;
	}
}
@keyframes clip02bg {
	0% { 
		-webkit-transform: scale(1.3,1.3);
		transform: scale(1.3,1.3);
	}
	100% { 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
	}
}
@keyframes clip02bright {
	0% { 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		opacity: 1;
	}
	20% { 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		opacity: 1;
	}
	100% { 
		-webkit-transform: scale(15,15);
		transform: scale(15,15);
		opacity: 0;
	}
}

@keyframes stage3in {
	0% { 
		-webkit-transform: scale(2,2);
		transform: scale(2,2);
		opacity: 0;
	}

	100% { 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		opacity: 1;
	}
}
@keyframes clip3in {
	0% { 
		-webkit-transform: scale(1.6,1.6);
		transform: scale(1.6,1.6);
		opacity: 0;
	}

	100% { 
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		opacity: 1;
	}
}


.stage-wrap { position: relative; width: 100%; height: 100%;}
.stage { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden;}
.stage-1 { display: table; z-index: 10; }
	.stage-1 .inner { display: table-cell; vertical-align: middle; height: 100%; text-align: center;}

	.clip1.mc { background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; display: inline-block; }
	.clip1.mc1 { height: 6rem; width: 28rem; background-image: url(../images/intro/clip01-t1.png); 
		-webkit-animation: 	clip01txtmove 2s ease-in-out both;
		animation: 				clip01txtmove 2s ease-in-out both;
	}
	.clip1.mc2 { height: 6rem; width: 29rem; background-image: url(../images/intro/clip01-t2.png); 
		-webkit-animation: 	clip01txtmove 2s ease-in-out 0.5s both;
		animation: 				clip01txtmove 2s ease-in-out 0.5s both;
	}
	.clip1.mc3 { height: 8rem; width: 4rem; background-image: url(../images/intro/pz.png); margin-bottom: -1rem;
		-webkit-animation: 	clip01rotate 2s ease-in-out 0.6s both;
		animation: 				clip01rotate 2s ease-in-out 0.6s both;
	}

.stage-2 { z-index: 20; }
.stage-2 .clip, .stage-2 .bg, .stage-2 .mask { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
	.clip2-1 { z-index: 21; opacity: 0; 
		-webkit-animation: 	clip02clip 3s ease-in-out 3s both;
		animation: 				clip02clip 3s ease-in-out 3s both;
	}
		.clip2-1 .bg { background: url(../images/intro/clip02-bg1.jpg) no-repeat 50% 50% / cover; 
		}
		.clip2-1 .mask	{ background: url(../images/intro/mask-text-01.svg) no-repeat 50% 50% / cover; 
		-webkit-animation: 	clip02mask 2s ease-in-out 3s both;
		animation: 				clip02mask 2s ease-in-out 3s both;
	}
	.clip2-2 { z-index: 22; opacity: 0; 
		-webkit-animation: 	clip02clip 3s ease-in-out 5s both;
		animation: 				clip02clip 3s ease-in-out 5s both;
	}
		.clip2-2 .bg 	{ background: url(../images/intro/clip02-bg2.jpg) no-repeat 50% 50% / cover; 
		}
		.clip2-2 .mask	{ background: url(../images/intro/mask-text-02.svg) no-repeat 50% 50% / cover; 
		-webkit-animation: clip02mask 2s ease-in-out 5s both;
		animation: clip02mask 2s ease-in-out 5s both;
	}

.stage-3 { z-index: 30; background: url(../images/intro/clip03-bg.jpg) no-repeat 50% 50% / cover; display: table; 
	-webkit-animation: 	stage3in 2s ease-in-out 6s both; 
	animation: 				stage3in 2s ease-in-out 6s both; 
	}
	.stage-3 .inner { display: table-cell; vertical-align: middle; height: 100%; text-align: center;}

	.clip3 { width: 60rem; height: 25rem; background: url(../images/intro/clip03-t1.png) no-repeat 50% 50% / contain; margin-left: 15%; 
		-webkit-animation: 	clip3in 1s ease-in-out 8s both; 
		animation: 				clip3in 1s ease-in-out 8s both; 
	}
@media (max-width: 829px) {
	.stage-3 { background: url(../images/intro/clip03-bg.jpg) no-repeat 72% 0 / cover;  }
	.clip3 { margin-left: 0; margin-top: 75%; width: 100%; height: 14rem; }
}