@charset "utf-8";
@keyframes button{
	from{
		opacity:0;
	}to{
		opacity:1;
	}
}
h2{
	position:absolute;
	top:60px;
}
#wrapg{
	position:absolute;
	left:20px;
	top:150px;
	width:720px;
	height:220px;
	overflow:hidden;
}
#axtannien{
	position:absolute;
	top:15px;
	left:-20px;
	width:190px;
	height:190px;
	z-index:2;
}
#tannien{
	position:absolute;
	top:50px;
	left:15px;
	width:120px;
	height:120px;
	z-index:2;
}
#ereasiitatop{
	position:absolute;
	top:0px;
	left:0px;
	width:140px;
	height:110px;
	overflow:hidden;
	z-index:1;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
#ereasiitabottom{
	position:absolute;
	top:110px;
	left:0px;
	width:140px;
	height:110px;
	overflow:hidden;
	z-index:1;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
#siitatop{
	position:absolute;
	top:50px;
	left:15px;
	width:120px;
	height:120px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
#siitabottom{
	position:absolute;
	top:-60px;
	left:15px;
	width:120px;
	height:120px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform:rotate(180deg);
}
#ereagrp{
	position:absolute;
	top:0px;
	left:170px;
	width:500px;
	height:220px;
}
#axsinxh{
	position:absolute;
	top:50px;
	left:0px;
	width:502px;
	height:126px;
	z-index:2;
}
#axsiny{
	position:absolute;
	top:0px;
	left:45px;
	height:220px;
	z-index:2;
}
#axsinh{
	position:absolute;
	top:105px;
	left:45px;
	width:450px;
	z-index:2;
}
#ereasin{
	position:absolute;
	top:50px;
	left:45px;
	width:0px;
	height:121px;
	overflow:hidden;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	z-index:2;
}
#sin1{
	position:absolute;
	top:0px;
	left:0px;
	width:400px;
	height:121px;
}
#ereaxline{
	position:absolute;
	top:108px;
	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;
/*	opacity:0;*/
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	z-index:1;
}
#dotaxh{
	position:absolute;
	top:108px;
	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;
}
#tenp{
	position:absolute;
	top:108px;
	left:75px;
	width:62px;
	height:4px;
	transform-origin:left center;
/*	border-radius:50%;
	background:purple;
	position:absolute;*/
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	z-index:2;
}
footer{
	position:absolute;
	top:370px;
	animation-duration:2s;
	animation-fill-mode:forwards;
}
#fnname{
	position:absolute;
	left:380px;
	top:60px;
}