.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-blue {
		background-color: #ffffff;
		opacity: .6;
}
.sparkle-cyan {
		background-color: #00d6d6;
		opacity: .6;
}
.sparkle-white {
		background-color: #ffffff;
		opacity: .8;
}
.sparkle-gold {
		background-color: #97efef;
		opacity: .6;
}
.highlight-area {
		position: absolute;
		z-index: 5;
		opacity: 0;
		border-radius: 15px;
		background: rgba(0, 255, 255, 0);
		pointer-events: none;
}
/* 四個主要區域的位置 */
.area1 {
		top: 20%;
		left: 25%;
		width: 15%;
		height: 50%;
		-webkit-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		transform: rotate(-5deg);
}
.area2 {
		top: 5%;
		left: 35%;
		width: 13%;
		height: 30%;
		-webkit-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg);
}
.area3 {
		top: 20%;
		left: 48%;
		width: 20%;
		height: 50%;
		-webkit-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg);
}
.area4 {
		top: 10%;
		left: 70%;
		width: 15%;
		height: 45%;
		-webkit-transform: rotate(-12deg);
		-ms-transform: rotate(-12deg);
		transform: rotate(-12deg);
}
@-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;
		}
}