.meter-animation {
	position: absolute;
	width: 103px;
	height: 140px;

	.animation-stage {
		width: 103px;
		height: 140px;
	}

	.meter {
		width: 103px;
		height: 140px;
		background: url('../img/layout/meter.svg') no-repeat left top;
		background-size: contain;
	}

	.dot {
		position: absolute;
		animation-duration: 4s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		width: 18px;
		height: 18px;
		background: url('../img/layout/dot.svg') no-repeat left top;
		background-size: contain;

		&:nth-child(1) {
			left: 5px;
			top: 5px;
			animation-delay: -0.3s;
			animation-duration: 6s;
		}

		&:nth-child(2) {
			left: 42px;
			top: 5px;
		}

		&:nth-child(3) {
			left: 80px;
			top: 5px;
			animation-duration: 5s;
		}
	}
}
.tilted {
	transform: rotate(-90deg);
}
.meter-animation-two {
	position: absolute;
	width: 103px;
	height: 94px;

	.animation-stage {
		width: 103px;
		height: 140px;
	}

	.meter {
		width: 103px;
		height: 94px;
		background: url('../img/layout/meter-two.svg') no-repeat left top;
		background-size: contain;
	}

	.dot {
		position: absolute;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		width: 18px;
		height: 18px;
		background: url('../img/layout/dot.svg') no-repeat left top;
		background-size: contain;

		&:nth-child(1) {
			left: 4px;
			top: 5px;
			animation-delay: -0.3s;
			animation-duration: 5s;
		}

		&:nth-child(2) {
			left: 42px;
			top: 5px;
		}

		&:nth-child(3) {
			left: 80px;
			top: 5px;
			animation-delay: -0.9s;
			animation-duration: 4s;
		}
	}
}

.run {
	.meter-animation {
		.dot {
			animation-name: meter-move-1;
		}
	}
	.meter-animation-two {
		.dot {
			animation-name: meter-move-2;
		}
	}
}
