@charset "utf-8";
@keyframes batu{
	from{
		opacity:0;
	}50%{
		opacity:1;
	}to{
		opacity:0;
	}
}
@keyframes batu2{
	from{
		opacity:0;
	}50%{
		opacity:1;
	}to{
		opacity:0;
	}
}
@keyframes button{
	from{
		opacity:0;
	}to{
		opacity:1;
	}
}
h2{
	position:absolute;
	top:60px;
}
#wrapg{
	position:absolute;
	left:20px;
	top:150px;
	width:720px;
	height:808px;
	overflow:hidden;
}
#axtannien{
	position:absolute;
	top:3px;
	left:-20px;
	width:190px;
	z-index:2;
}
#axtan1{
	position:absolute;
	top:3px;
	left:135px;
}
#zenkin1{
	position:absolute;
	top:0px;
	left:145px;
}
#zenkin2{
	position:absolute;
	top:0px;
	left:345px;
}
#tannien{
	position:absolute;
	top:344px;
	left:15px;
	width:120px;
	height:120px;
	z-index:2;
}
#ereasiitatop{
	position:absolute;
	top:339px;
	left:0px;
	width:140px;
	height:65px;
	overflow:hidden;
	z-index:1;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
#ereasiitabottom{
	position:absolute;
	top:404px;
	left:0px;
	width:140px;
	height:110px;
	overflow:hidden;
	z-index:1;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
#siitatop{
	position:absolute;
	top:5px;
	left:15px;
	height:120px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
#siitabottom{
	position:absolute;
	top:-60px;
	left:15px;
	height:120px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform:rotate(180deg);
}
#ereagrp{
	position:absolute;
	top:0px;
	left:170px;
	width:500px;
	height:808px;
}
#axsinx{
	position:absolute;
	top:404px;
	left:0px;
	width:500px;
	z-index:2;
}
#axtany{
	position:absolute;
	top:0px;
	left:33px;
	height:808px;
	z-index:2;
}
#axsinh{
	position:absolute;
	top:400px;
	left:45px;
	width:450px;
	z-index:2;
}
#ereatan1{
	position:absolute;
	top:524px;
	left:45px;
	width:114px;
	height:0px;
	vertical-align:bottom;

	overflow:hidden;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	z-index:2;
}
#ereatan2{
	position:absolute;
	top:781px;
	left:145px;
	width:210px;
	height:0px;
	overflow:hidden;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	z-index:2;
}
#ereatan3{
	position:relative;
	top:781px;
	left:345px;
	width:114px;
	height:0px;
	overflow:hidden;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	z-index:2;
}
.tan{
	position:absolute;
	height:808px;
	vertical-align:bottom;
	display:inline-block;
	left:0px;
	bottom:0;
	/*height:121px;*/
}
#ereaxline{
	position:absolute;
	top:402px;
	left:45px;
	width:0px;
	height:8px;
	overflow:hidden;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
#xline{
	position:absolute;
	top:0px;
	left:0px;
	width:400px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	z-index:1;
}
#dotaxh{
	position:absolute;
	top:402px;
	left:43px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

.lines{
	opacity:0;
	color:red;
	position: absolute;
	border:solid 1px;
	background:red;
	width:0px;
	height:0px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	z-index:2;
}
#line1{
	opacity:0;
	color:red;
	position: absolute;
	border:solid 1px;
	background:red;
	width:0px;
	height:0px;
	animation-duration:0.75s;
	animation-fill-mode:forwards;
	animation-delay:0.25s;
	transform-origin:left center;
	z-index:2;
}
#tenp{
	position:absolute;
	top:402px;
	left:75px;
	width:62px;
	height:4px;
	transform-origin:left center;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	z-index:2;
}
#batu{
	opacity:0;
	position:absolute;
	left:35px;
	top:240px;
	animation-duration:1s;
	animation-delay:0.5s;
}
footer{
	position:absolute;
	top:160px;
	z-index: 3;
	animation-duration:2s;
	animation-fill-mode:forwards;
}
#fnname{
	position:absolute;
	left:380px;
	top:60px;
}
#btn{
	z-index: 3;
}