.bubble-cluster {
	position: absolute;
	z-index: 11;
	opacity: 0;
	&.bottom {
		.dot {
			&:nth-child(1) {
				width: 6px;
				height: 6px;
				animation-duration: 12s;

				.img {
					animation-duration: 12s;
				}
			}

			&:nth-child(3) {
				width: 3px;
				height: 3px;
				animation-duration: 8s;

				.img {
					animation-duration: 8s;
				}
			}
		}
	}

	.dot {
		position: absolute;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		transform-origin: center;

		.img {
			width: 100%;
			height: 100%;
			background: url('../img/layout/dot.svg') no-repeat left top;
			background-size: contain;
			animation-duration: 2s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
		}

		&:nth-child(1) {
			width: 10px;
			height: 10px;
		}

		&:nth-child(2) {
			width: 5px;
			height: 5px;
			animation-duration: 9s;

			.img {
				animation-duration: 9s;
			}
		}

		&:nth-child(3) {
			width: 18px;
			height: 18px;
			animation-duration: 4s;

			.img {
				animation-duration: 4s;
			}
		}
		&:nth-child(4) {
			.img {
				animation-duration: 6s;
			}
		}
		&:nth-child(5) {
			.img {
				animation-duration: 3s;
			}
		}
		&:nth-child(6) {
			.img {
				animation-duration: 8s;
			}
		}
	}
}
.run {
	.bubble-cluster {
		opacity: 1;
		.dot {
			animation-name: gift-dot-y;
			.img {
				animation-name: gift-dot-x;
			}
		}
	}
}
