@charset "UTF-8";

/** .content-main */
.page20 .content-main .content-img-wrap {
	position: relative;
	width: 600px;
	height: 435px;
	margin: 10px 0 10px 190px;
	border-radius: 20px;
	background-color: #e3eed4;
}

@media screen and (max-height: 768px) {
	.page20 .content-main .content-img-wrap {
		width: 78.125vh;
		height: 56.6406vh;
		margin: 1.302vh 0 1.302vh 24.7395vh;
		border-radius: 2.6041vh;
	}
}

.page20 .content-main .content-img-wrap .step-img-wrap {
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 0;
}
.page20 .content-main .content-img-wrap .step-img-wrap.step1 {
	top: calc(50% - 10px);
	left: calc(50% - 140px);
	width: 669px;
	height: 394px;
	animation: fadeInEx .3s ease .4s forwards;
}

@media screen and (max-height: 768px) {
	.page20 .content-main .content-img-wrap .step-img-wrap.step1 {
		top: calc(50% - 1.302vh);
		left: calc(50% - 18.2291vh);
		width: 87.1093vh;
		height: 51.302vh;
	}
}

.page20 .content-main .content-img-wrap .step-img-wrap.step2 {
	top: calc(50% - 56px);
	left: calc(50% - 20px);
	width: 271px;
	height: 142px;
	animation: fadeInEx .3s ease 1.4s forwards;
}

@media screen and (max-height: 768px) {
	.page20 .content-main .content-img-wrap .step-img-wrap.step2 {
		top: calc(50% - 7.2916vh);
		left: calc(50% - 2.6041vh);
		width: 35.2864vh;
		height: 18.4895vh;
	}
}

.page20 .content-main .content-img-wrap .step-img-wrap.step3 {
	top: calc(50% - 67px);
	right: calc(50% - 540px);
	width: 276px;
	height: 229px;
	animation: fadeInEx .3s ease 2.4s forwards;
}

@media screen and (max-height: 768px) {
	.page20 .content-main .content-img-wrap .step-img-wrap.step3 {
		top: calc(50% - 8.7239vh);
		right: calc(50% - 70.3125vh);
		width: 35.9375vh;
		height: 29.8177vh;
	}
}

.page20 .content-main .content-img-wrap .step-img-wrap.step4 {
	bottom: calc(50% - 324px);
	left: calc(50% - 129px);
	width: 316px;
	height: 252px;
	animation: fadeInEx .3s ease 3.4s forwards;
}

@media screen and (max-height: 768px) {
	.page20 .content-main .content-img-wrap .step-img-wrap.step4 {
		bottom: calc(50% - 42.1875vh);
		left: calc(50% - 16.7968vh);
		width: 41.1458vh;
		height: 32.8125vh;
	}
}

.page20 .content-main .content-img-wrap .step-img-wrap.step5 {
	right: calc(50% - 590px);
	bottom: calc(50% - 310px);
	width: 371px;
	height: 164px;
	animation: fadeInEx .3s ease 4.4s forwards;
}

@media screen and (max-height: 768px) {
	.page20 .content-main .content-img-wrap .step-img-wrap.step5 {
		right: calc(50% - 76.8229vh);
		bottom: calc(50% - 40.3645vh);
		width: 48.3072vh;
		height: 21.3541vh;
	}
}

.page20 .content-main .content-text {
	animation: fadeIn .3s ease .2s forwards;
	opacity: 0;
	font-size: 22px;
	text-align: center;
}

@media screen and (max-height: 768px) {
	.page20 .content-main .content-text {
		font-size: 2.8645vh;
	}
}