@charset "utf-8";
.graph{
	width: 1200px;
	height: 560px;
	margin: 0 auto 50px;
	position: relative;
}
.graph img{
	max-width: 100%;
	z-index: 3;
}

.circle{
	width: 390px;
	margin: 0 auto 0;
	position: relative;
	top: 133px;
}
.circle canvas{
	width: 100%;
}
.line1,.line2,.line3,.txt1,.txt2{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

img.line2{
	opacity: 0;
	transition: opacity .5s 1.2s;
}
img.line2.active{
	opacity: 1;
}

img.line1,
img.line3{
	clip-path: inset(0% 50% 0% 50%);
}
img.line3{
	clip-path: inset(50% 0% 50% 0%);
}
img.line1.active,
img.line3.active{
	transition: clip-path 1.5s cubic-bezier(.28,.58,.37,.99);
	transition-delay: .5s;
    clip-path: inset(0 0 0 0);
}
img.line3.active{
	transition-delay: 1.2s;
}

img.txt1,
img.txt2{
	opacity: 0;
	transform: translate(0px, 30px);
	transition: .3s;
	transition-delay: 1.5s;
}
img.txt1.active,
img.txt2.active{
	opacity: 1;
	transform: translate(0px, 0px);
}

@media screen and (max-width:1200px){
	.graph{
		width: calc(1200/1200 * 100vw);
		height: calc(560/1200 * 100vw);
		margin: 0 auto calc(50/1200 * 100vw);
	}
	.circle{
		width: calc(390/1200 * 100vw);
		top: calc(133/1200 * 100vw);
	}
}

@media only screen and (max-width: 768px) {
	.graph{
		width: 100%;
		height: 100.4vw;
		margin: -6vw auto 0;
	}
	.circle{
		width: 50vw;
		top: 25.7vw;
	}
}