@charset "UTF-8";

body,html{padding:0;margin:0;}

.kvanimation{
	max-width: 750px;
	height: 800px;
/*	background: #ffbf00;*/
	overflow: hidden;
	position: relative;
}

@media screen and (max-width: 750px){

	.kvanimation{
		height: 0;
		padding-bottom: 106.7%;
	}

}

.kvanimation img{max-width: 100%;}

.kvanimation-header{
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	width: 100%;
	height: 20%;
}

.kvanimation-inner{
	height: 80%;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing:border-box;
}

.kvanimation-scene{display: block;}

.kvanimation-scene > div{
	position: absolute;
}

.kvanimation .cut1-1{
	width: 37%;
	left: 12%;
	top: 5%;
}

.kvanimation .cut1-2{
	width: 32%;
	left: 53%;
	top: 3%;
}

.kvanimation .cut1-3{
	width: 36%;
	left: 10%;
	top: 40%;
}

.kvanimation .cut1-4{
	width: 36%;
	left: 52%;
	top: 40%;
}

.kvanimation .cut1-5{
	width: 80%;
	left: 11%;
	bottom: 4%;
}

.kvanimation .cut2-1{
	width: 84%;
	left: 8%;
	top: 0%;
}

.kvanimation .cut3-1{
	width: 78%;
	left: 16%;
	top: 0%;
}

.kvanimation .cut3-2{
	width: 36%;
	left: 11%;
	bottom: 42%;
	overflow: hidden;
}

.kvanimation .cut3-3{
	width: 25%;
	left: 35%;
	bottom: 42%;
	overflow: hidden;
}

.kvanimation .cut3-4{
	width: 30%;
	left: 54%;
	bottom: 42%;
	overflow: hidden;
}

.kvanimation .cut3-2 img{
	position: absolute;
	left: 0;
	bottom: 0;
}

.kvanimation .cut3-3 img{
	position: absolute;
	left: 0;
	bottom: 0;
}

.kvanimation .cut3-4 img{
	position: absolute;
	left: 0;
	bottom: 0;
}

.kvanimation .cut4-1{
	width: 70%;
	left: 15%;
	top: 2%;
}

.kvanimation .cut4-2{
	width: 70%;
	left: 15%;
	top: 26%;
}

.kvanimation .cut4-3{
	width: 70%;
	left: 15%;
	top: 49%;
}

.kvanimation .cut4-4{
	width: 82%;
	left: 10%;
	top: 19%;
}

.kvanimation .cut5-1{
	width: 100%;
	left: 0;
	top: 2%;
}

.kvanimation .cut5-2{
	width: 27%;
	left: 62%;
	top: 10%;
}

.kvanimation .cut5-3{
	width: 72%;
	left: 14%;
	top: 35%;
}

.kvanimation .cut6-1{
	width: 67%;
	left: 17%;
	top: 8%;
}

.kvanimation-scene > div{opacity:0;}
.kvanimation-scene > div.whiteline{
	opacity:1;
	width: 0px;
	height: 8px;
	background: #fff;
	content: '';
	position: absolute;
}

@media screen and (max-width: 750px){

	.kvanimation-scene > div.whiteline{height: 4px;}

}

.kvanimation-scene > div.whiteline.cut1-6{
	left: 18%;
	bottom: 6%;
}

.kvanimation-scene > div.whiteline.cut2-2{
	left: 24%;
	top: 15%;
}

.kvanimation-scene > div.whiteline.cut3-5{
	left: 43%;
	top: 18%;
}

.kvanimation-scene > div.whiteline.cut4-5{
	left: 43%;
	bottom: 12.5%;
}

.kvanimation-scene > div.whiteline.cut5-4{
	left: 14%;
	bottom: 5.2%;
}

.kvanimation-scene > div.whiteline.cut6-2{
	left: 21.5%;
	top: 30%;
}

.kvanimation-scene > div.whiteline.cut6-3{
	left: 50%;
	top: 30%;
}

.kvanimation-scene > div.whiteline.cut6-4{
	left: 51%;
	top: 43%;
}


/* animation */


.kvanimation .cut1-5{transform: translate(-50px,0);}

.kvanimation .cut1-1.is-active,
.kvanimation .cut1-2.is-active,
.kvanimation .cut1-3.is-active,
.kvanimation .cut1-4.is-active{
	animation: poyon 0.8s linear 0s 1;
	animation-fill-mode: forwards;
}

.kvanimation .cut1-5.is-active{
	opacity: 1;
	transform: translate(0px,0);
	transition: all .4s ease;
}

.kvanimation .cut2-1{transform: translate(0px,30px);}

.kvanimation .cut2-1.is-active{
	opacity: 1;
	transform: translate(0px,0);
	transition: all .4s ease;
}

.kvanimation .cut3-1{
	transform: translate(0px,20px);
}

.kvanimation .cut3-1.is-active{
	opacity: 1;
	transform: translate(0px,0);
	transition: all .4s ease;
}

.kvanimation .cut3-2,
.kvanimation .cut3-3,
.kvanimation .cut3-4{height: 0;}

.kvanimation .cut3-2.is-active,
.kvanimation .cut3-3.is-active,
.kvanimation .cut3-4.is-active{
	height: 37%;
	opacity: 1;
	transition: all .4s ease;
}

.kvanimation .cut4-1,
.kvanimation .cut4-2,
.kvanimation .cut4-3{transform: translate(-50px,0);}


.kvanimation .cut4-1.is-active,
.kvanimation .cut4-2.is-active,
.kvanimation .cut4-3.is-active{
	opacity: 1;
	transform: translate(0px,0);
	transition: all .4s ease;
}

.kvanimation .cut4-4.is-active{
	animation: poyon 0.8s linear 0s 1;
	animation-fill-mode: forwards;
}

.kvanimation .cut5-1{
	transform: translate(-50px,0);
}

.kvanimation .cut5-2{
	transform: translate(50px,0);
}

.kvanimation .cut5-3{
	transform: translate(0px,20px);
}

.kvanimation .cut5-1.is-active,
.kvanimation .cut5-2.is-active,
.kvanimation .cut5-3.is-active{
	opacity: 1;
	transform: translate(0px,0);
	transition: all .4s ease;
}

.kvanimation .cut6-1.is-active{
	animation: growIn 0.5s linear 0s 1;
	animation-fill-mode: forwards;
}

.kvanimation-scene > div.whiteline.is-active{transition: all .4s ease;}
.kvanimation-scene > div.whiteline.cut1-6.is-active{width:43%;}
.kvanimation-scene > div.whiteline.cut2-2.is-active{width:47%;}
.kvanimation-scene > div.whiteline.cut3-5.is-active{width:24%;}
.kvanimation-scene > div.whiteline.cut4-5.is-active{width:20%;}
.kvanimation-scene > div.whiteline.cut5-4.is-active{width:70%;}
.kvanimation-scene > div.whiteline.cut6-2.is-active{width:24%;}
.kvanimation-scene > div.whiteline.cut6-3.is-active{width:28%;}
.kvanimation-scene > div.whiteline.cut6-4.is-active{width:26%;}


@keyframes poyon {
  0%   { transform: scale(0.5, 0.5) translate(0%, 0%);opacity:0;}
  15%  { transform: scale(0.95, 0.95) translate(0%, 3%);opacity: 1;}
  30%  { transform: scale(1.05, 0.9) translate(0%, 5%); }
  50%  { transform: scale(0.9, 1.05) translate(0%, -5%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%);opacity: 1; }
}


@keyframes growIn {
    0% {transform: scale(0.2); opacity:0;}
    50% {transform: scale(1.1);}
    100% {transform: scale(1); opacity:1;}
}