/************************
EVENT MODE
************************/
.event-mode.countdown-space {
		top: 120px;
		z-index: 10;
}
.open + .event-mode.countdown-space {
		top: 50px;
}
.event-mode .countdown-block {
		background: -webkit-gradient(linear, left top, left bottom, from(#98a4b3), color-stop(40%, #64748b), to(#2a3542));
		background: -o-linear-gradient(top, #98a4b3 0%, #64748b 40%, #2a3542 100%);
		background: linear-gradient(to bottom, #98a4b3 0%, #64748b 40%, #2a3542 100%);
		padding: .25rem 0;
		height: 90px;
}
.event-mode .countdown-block .is-title {
		max-width: 230px;
		margin-right: 1.5rem;
}
.event-mode .countdown-block .text {
		color: #ffffff;
		font-size: 1.75rem;
		font-weight: bold;
		font-style: italic;
		line-height: 1;
}
.event-mode .countdown-block .text .date {
		color: #c9cdd2;
		font-size: .8125rem;
		font-weight: normal;
		font-style: normal;
		margin-top: 5px;
}
.event-mode .countdown-block .is-gift {
		max-width: 75px;
		margin-left: 2rem;
		margin-right: 2rem;
}
.event-mode .countdown-block .btn {
		color: #ffffff;
		border-radius: 5rem;
		padding: .25rem 1rem;
}
.event-mode .countdown-block .btn:focus, .event-mode .countdown-block .btn:active, .event-mode .countdown-block .btn:hover {
		color: #000000 !important;
		background-color: #ffffff !important;
}
.event-mode + .main-content .key-visual {
		background-color: #748397;
}
.event-mode + .main-content .key-visual .bg {
		margin-top: 0;
}
.info-modal.event-modal .modal-body {
		background: -webkit-gradient(linear, left top, left bottom, from(#b2bdca), color-stop(30%, #64748b), color-stop(80%, #2a3542));
		background: -o-linear-gradient(top, #b2bdca 0%, #64748b 30%, #2a3542 80%);
		background: linear-gradient(to bottom, #b2bdca 0%, #64748b 30%, #2a3542 80%);
		border-radius: 2rem;
		padding: 4rem 6rem;
}
.info-modal.event-modal .modal-content {
		background-color: transparent;
}
.info-modal.event-modal .is-title {
		max-width: 240px;
		margin-right: 1rem;
}
.info-modal.event-modal .is-gift {
		max-width: 96%;
		font-weight: normal;
		aspect-ratio: 365 / 380;
}
.info-modal.event-modal .is-gift img {
		left: 0;
		top: 0;
		pointer-events: none;
}
/* ===== 初始狀態：靜止、隱藏 ===== */
.info-modal.event-modal .is-gift .gift_item_in_1, .info-modal.event-modal .is-gift .gift_item_in_2 {
		position: absolute;
		opacity: 0;
		-webkit-transform: translateY(-340px) rotate(-6deg);
		-ms-transform: translateY(-340px) rotate(-6deg);
		transform: translateY(-340px) rotate(-6deg);
		/* 不跑動畫 */
		-webkit-animation: none;
		animation: none;
}
.info-modal.event-modal .is-gift .gift_item_in_1 {}
.info-modal.event-modal .is-gift .gift_item_in_2 {}
/* ===== .show 才觸發 ===== */
.info-modal.event-modal.show .is-gift .gift_item_in_1 {
		-webkit-animation:
				parachute-drop 1s 0.1s ease forwards, parachute-sway 3s ease-in-out 1.8s infinite;
		animation:
				parachute-drop 1s 0.1s ease forwards, parachute-sway 3s ease-in-out 1.8s infinite;
}
.info-modal.event-modal.show .is-gift .gift_item_in_2 {
		-webkit-animation:
				parachute-drop 1s 0.45s ease forwards, parachute-sway-r 3.2s ease-in-out 2.1s infinite;
		animation:
				parachute-drop 1s 0.45s ease forwards, parachute-sway-r 3.2s ease-in-out 2.1s infinite;
}
/* 降落進場 */
@-webkit-keyframes parachute-drop {
		0% {
				opacity: 0;
				-webkit-transform: translateY(-100%) rotate(-6deg);
				transform: translateY(-100%) rotate(-6deg);
		}
		100% {
				opacity: 1;
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
}
@keyframes parachute-drop {
		0% {
				opacity: 0;
				-webkit-transform: translateY(-100%) rotate(-6deg);
				transform: translateY(-100%) rotate(-6deg);
		}
		100% {
				opacity: 1;
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
}
/* 懸浮飄動（左） */
@-webkit-keyframes parachute-sway {
		0% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
		25% {
				-webkit-transform: translateY(-9px) rotate(-2deg);
				transform: translateY(-9px) rotate(-2deg);
		}
		50% {
				-webkit-transform: translateY(-4px) rotate(1.5deg);
				transform: translateY(-4px) rotate(1.5deg);
		}
		75% {
				-webkit-transform: translateY(-11px) rotate(-1deg);
				transform: translateY(-11px) rotate(-1deg);
		}
		100% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
}
@keyframes parachute-sway {
		0% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
		25% {
				-webkit-transform: translateY(-9px) rotate(-2deg);
				transform: translateY(-9px) rotate(-2deg);
		}
		50% {
				-webkit-transform: translateY(-4px) rotate(1.5deg);
				transform: translateY(-4px) rotate(1.5deg);
		}
		75% {
				-webkit-transform: translateY(-11px) rotate(-1deg);
				transform: translateY(-11px) rotate(-1deg);
		}
		100% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
}
/* 懸浮飄動（右） */
@-webkit-keyframes parachute-sway-r {
		0% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
		30% {
				-webkit-transform: translateY(-11px) rotate(2deg);
				transform: translateY(-11px) rotate(2deg);
		}
		55% {
				-webkit-transform: translateY(-5px) rotate(-1.5deg);
				transform: translateY(-5px) rotate(-1.5deg);
		}
		80% {
				-webkit-transform: translateY(-8px) rotate(1deg);
				transform: translateY(-8px) rotate(1deg);
		}
		100% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
}
@keyframes parachute-sway-r {
		0% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
		30% {
				-webkit-transform: translateY(-11px) rotate(2deg);
				transform: translateY(-11px) rotate(2deg);
		}
		55% {
				-webkit-transform: translateY(-5px) rotate(-1.5deg);
				transform: translateY(-5px) rotate(-1.5deg);
		}
		80% {
				-webkit-transform: translateY(-8px) rotate(1deg);
				transform: translateY(-8px) rotate(1deg);
		}
		100% {
				-webkit-transform: translateY(0px) rotate(0deg);
				transform: translateY(0px) rotate(0deg);
		}
}
.info-modal.event-modal .is-subtitle {
		font-size: 2.125rem;
		color: #ffffff;
		font-weight: bold;
		line-height: 1;
		margin-bottom: .5rem;
		font-style: italic;
}
.info-modal.event-modal .text {
		font-size: 1.125rem;
		color: #ffffff;
		line-height: 1.5;
		font-weight: normal;
}
.info-modal.event-modal .remark-text {
		font-weight: normal;
		font-size: 1rem;
		color: #ffffff;
		line-height: 1.5;
}
.info-modal.event-modal .remark-text a {
		text-decoration: underline;
		color: #ffffff;
}
.info-modal.event-modal .remark-text a:hover {
		color: #c6d3e4;
}
.info-modal.event-modal .btn-link {
		font-size: 1.25rem;
		color: #ffffff;
		line-height: 1.5;
		padding: .25rem 0;
		font-weight: bold;
		position: relative;
}
.info-modal.event-modal .btn-link:hover {
		text-decoration: none;
		color: #c6d3e4;
}
.info-modal.event-modal .btn-link:hover::after {
		background-color: #c6d3e4;
}
.info-modal.event-modal .btn-link::after {
		content: '';
		width: 100%;
		height: 1px;
		display: block;
		background-color: #ffffff;
		position: absolute;
		bottom: 0;
}
@media screen and (max-width: 1199px) {
		.event-mode .countdown-block .is-title {
				max-width: 18vw;
				margin-right: 1rem;
		}
		.event-mode .countdown-block .text {
				font-size: 1.5rem;
		}
		.event-mode .countdown-block .text .date {
				font-size: .75rem;
		}
		.event-mode .countdown-block .is-gift {
				max-width: 6vw;
				margin-left: 1.5rem;
				margin-right: 1.5rem;
		}
		.info-modal.event-modal .modal-body {
				padding: 3rem 2.5rem;
		}
		.info-modal.event-modal .is-title {
				max-width: 20vw;
				margin-right: .5rem;
		}
		.info-modal.event-modal .is-subtitle {
				font-size: 1.5rem;
		}
		.info-modal.event-modal .text {
				font-size: 1rem;
				letter-spacing: normal;
		}
		.info-modal.event-modal .remark-text {
				font-size: .75rem;
		}
		.info-modal.event-modal .btn-link {
				font-size: .875rem;
		}
}
@media screen and (max-width: 991px) {
		.event-mode.countdown-space {
				top: 50px;
		}
		.event-mode .countdown-block .is-title {
				max-width: 22vw;
				margin-right: 1rem;
		}
		.event-mode .countdown-block .is-gift {
				max-width: 7vw;
				margin-left: 1rem;
				margin-right: 1.5rem;
		}
		.event-mode + .main-content .key-visual .bg {
				margin-top: 0;
		}
		.event-mode .countdown-block {
				height: 75px;
		}
		.info-modal.event-modal .text {
				font-size: .875rem;
		}
		.info-modal.event-modal .is-subtitle {
				font-size: 1.375rem;
		}
}
@media screen and (max-width: 767px) {
		.info-modal.event-modal .is-subtitle {
				font-size: 1.275rem;
		}
		.event-mode .countdown-block {
				height: 60px;
		}
		.event-mode + .main-content .key-visual .bg {
				margin-top: 0;
		}
		.event-mode .countdown-block .text {
				font-size: 1.25rem;
		}
		.event-mode .countdown-block .text .date {
				font-size: .65rem;
		}
}
@media screen and (max-width: 576px) {
		.event-mode .countdown-block .is-title {
				max-width: 28vw;
				margin-right: .5rem;
		}
		.event-mode .countdown-block .text {
				font-size: .95rem;
		}
		.event-mode .countdown-block .text .date {
				font-size: .625rem;
		}
		.event-mode .countdown-block .is-gift {
				max-width: 10vw;
				margin-left: .5rem;
				margin-right: .75rem;
		}
		.event-mode .countdown-block .btn {
				font-size: .75rem;
				padding: .25rem .5rem;
		}
		.info-modal.event-modal .is-title {
				max-width: 45vw;
				margin-right: 0;
				margin-bottom: .5rem;
		}
		.info-modal.event-modal .is-subtitle {
				font-size: 1.5rem;
		}
		.info-modal.event-modal .modal-body {
				padding: 2rem 1.75rem;
		}
		.info-modal.event-modal .is-gift {
				max-width: 80%;
				margin: auto;
		}
		.event-mode .countdown-block .is-gift {
				display: none !important;
		}
		.event-mode .countdown-block .text {
				margin-right: .75rem;
		}
}
@media screen and (max-width:568px) and (orientation: landscape) {
		.info-modal.event-modal .is-title {
				max-width: 35vw;
		}
		.info-modal.event-modal .is-gift {
				max-width: 60%;
				margin: auto;
		}
		.event-mode .countdown-block .is-title {
				max-width: 22vw;
				margin-right: .5rem;
		}
		.event-mode .countdown-block .text {
				font-size: .875rem;
		}
}
@media screen and (max-width: 375px) {
		.event-mode .countdown-block .is-title {
				max-width: 28vw;
				margin-right: .5rem;
		}
		.event-mode .countdown-block .text {
				font-size: .875rem;
		}
		.event-mode .countdown-block .text .date {
				margin-top: 3px;
		}
		.info-modal.event-modal .modal-body {
				padding: 2rem 1.5rem;
		}
}
@media screen and (max-width: 320px) {
		.event-mode .countdown-block .is-title {
				max-width: 30vw;
				margin-right: .5rem;
		}
}