﻿.snow_board {
		left: 0;
		right: 0;
		top: -10px;
		bottom: 0;
		margin: auto;
}
.snow-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		overflow: hidden;
}
.snowflake {
		position: absolute;
		background: #ffffff;
		border-radius: 50%;
		opacity: 0.8;
		-webkit-animation: fall linear infinite;
		        animation: fall linear infinite;
}
@-webkit-keyframes fall {
		to {
				-webkit-transform: translateY(100vh) translateX(var(--drift));
				        transform: translateY(100vh) translateX(var(--drift));
				opacity: 0;
		}
}
@keyframes fall {
		to {
				-webkit-transform: translateY(100vh) translateX(var(--drift));
				        transform: translateY(100vh) translateX(var(--drift));
				opacity: 0;
		}
}
.sparkle-container {
		position: absolute;
		top: 69%;
		left: auto;
		right: 0;
		width: 100%;
		max-width: 70%;
		height: 18%;
		pointer-events: none;
}
.sparkle {
		position: absolute;
		border-radius: 50%;
		-webkit-animation: sparkle-anim ease-in-out infinite;
		        animation: sparkle-anim ease-in-out infinite;
		background: -o-radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(245, 250, 255, 0.7) 40%, rgba(230, 240, 255, 0.4) 65%, transparent 100%);
		background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(245, 250, 255, 0.7) 40%, rgba(230, 240, 255, 0.4) 65%, transparent 100%);
		-webkit-box-shadow:
				0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 15px 6px rgba(245, 250, 255, 0.6), 0 0 25px 10px rgba(230, 240, 255, 0.3);
		        box-shadow:
				0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 15px 6px rgba(245, 250, 255, 0.6), 0 0 25px 10px rgba(230, 240, 255, 0.3);
}
@-webkit-keyframes sparkle-anim {
		0%, 100% {
				opacity: 0;
				-webkit-transform: scale(0);
				        transform: scale(0);
		}
		50% {
				opacity: 1;
				-webkit-transform: scale(1);
				        transform: scale(1);
		}
}
@keyframes sparkle-anim {
		0%, 100% {
				opacity: 0;
				-webkit-transform: scale(0);
				        transform: scale(0);
		}
		50% {
				opacity: 1;
				-webkit-transform: scale(1);
				        transform: scale(1);
		}
}
/* 煙霧圖片動畫效果 */
.kv_peo_smoke_on {
		-webkit-animation: smokeRise 4s ease-in-out infinite;
		        animation: smokeRise 4s ease-in-out infinite;
		-webkit-transform-origin: center bottom;
		    -ms-transform-origin: center bottom;
		        transform-origin: center bottom;
		-webkit-transform: translateY(5px);
		    -ms-transform: translateY(5px);
		        transform: translateY(5px);
		opacity: 0;
}
@-webkit-keyframes smokeRise {
		0% {
				opacity: 0;
				-webkit-transform: translateY(5px);
				        transform: translateY(5px);
		}
		20% {
				opacity: 0.8;
		}
		100% {
				opacity: 0;
				-webkit-transform: translateY(-30px);
				        transform: translateY(-30px);
		}
}
@keyframes smokeRise {
		0% {
				opacity: 0;
				-webkit-transform: translateY(5px);
				        transform: translateY(5px);
		}
		20% {
				opacity: 0.8;
		}
		100% {
				opacity: 0;
				-webkit-transform: translateY(-30px);
				        transform: translateY(-30px);
		}
}