.spark-container {
		position: relative;
		width: 100%;
		max-width: 100%;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
}
.sparkle {
		position: absolute;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		pointer-events: none;
		z-index: 3;
		opacity: 0;
}
/* 使用CSS定義的顏色 */
.sparkle-yellow {
		background-color: #fecf16;
		opacity: .8;
}
.sparkle-light {
		background-color: #fff0a1;
		opacity: .9;
}
.sparkle-white {
		background-color: #ffffff;
		opacity: .8;
}
.sparkle-gold {
		background-color: #fee14e;
		opacity: .9;
}
.highlight-area {
		position: absolute;
		z-index: 2;
		opacity: 0;
		background: rgba(255, 255, 255, 0);
		pointer-events: none;
}
/* 四個主要區域的位置 */
/* 中央 */
.area1 {
		width: 100%;
		height: 20%;
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
}
.area2 {
		width: 100%;
		height: 20%;
		left: 0;
		right: 0;
		top: 25%;
		margin: auto;
}
.area3 {
		width: 100%;
		height: 20%;
		left: 0;
		right: 0;
		top: 50%;
		margin: auto;
}
.area4 {
		width: 100%;
		height: 20%;
		left: 0;
		right: 0;
		top: 75%;
		margin: auto;
}
@-webkit-keyframes float-up {
		0% {
				-webkit-transform: translateY(0) scale(1);
				transform: translateY(0) scale(1);
				opacity: 0;
		}
		10% {
				opacity: 1;
		}
		90% {
				opacity: 0.8;
		}
		100% {
				-webkit-transform: translateY(-100px) scale(0);
				transform: translateY(-100px) scale(0);
				opacity: 0;
		}
}
@keyframes float-up {
		0% {
				-webkit-transform: translateY(0) scale(1);
				transform: translateY(0) scale(1);
				opacity: 0;
		}
		10% {
				opacity: 1;
		}
		90% {
				opacity: 0.8;
		}
		100% {
				-webkit-transform: translateY(-100px) scale(0);
				transform: translateY(-100px) scale(0);
				opacity: 0;
		}
}
@-webkit-keyframes float-diagonal {
		0% {
				-webkit-transform: translate(0, 0) scale(1);
				transform: translate(0, 0) scale(1);
				opacity: 0;
		}
		10% {
				opacity: 1;
		}
		90% {
				opacity: 0.8;
		}
		100% {
				-webkit-transform: translate(var(--tx), var(--ty)) scale(0);
				transform: translate(var(--tx), var(--ty)) scale(0);
				opacity: 0;
		}
}
@keyframes float-diagonal {
		0% {
				-webkit-transform: translate(0, 0) scale(1);
				transform: translate(0, 0) scale(1);
				opacity: 0;
		}
		10% {
				opacity: 1;
		}
		90% {
				opacity: 0.8;
		}
		100% {
				-webkit-transform: translate(var(--tx), var(--ty)) scale(0);
				transform: translate(var(--tx), var(--ty)) scale(0);
				opacity: 0;
		}
}
@-webkit-keyframes highlight-pulse {
		0% {
				opacity: 0;
		}
		50% {
				opacity: 0.3;
		}
		100% {
				opacity: 0;
		}
}
@keyframes highlight-pulse {
		0% {
				opacity: 0;
		}
		50% {
				opacity: 0.3;
		}
		100% {
				opacity: 0;
		}
}