@charset "UTF-8";
*,
*::before,
*::after {
	box-sizing: border-box; /* Set the sizing of an element to include it's border */
}
* {
	margin: 0; /* Set the default margin to 0 */
	padding: 0; /* Set the default padding to 0 */
}
ul[role="list"],
ol[role="list"] {
	list-style: none; /* Turn off numbered and unordered list decoration */
}
a:not([class]) {
	text-decoration-skip-ink: auto; /* Makes link undelines look better */
}
img,
picture,
svg,
video,
canvas {
	max-width: 100%; /* Makes it responsive */
	height: auto; /* Makes it responsive */
	vertical-align: middle; /* Makes text next to inline images look better */
	font-style: italic; /* If the images don't load it makes the alt decription look better */
	background-repeat: no-repeat;
	/* The background repeat and size are there if you want to load a picture first like a backroung image that is worse quality while the better quality image loads */
	background-size: cover;
}
input,
button,
textarea,
select {
	font: inherit; /* Makes these elements inherit fonts */
	border: 0;
} /* Turns off animation for people who don't want to see them */
body,
html {
	height: 100%; /* Makes the body element full screen */
}
:root {
	--ds: 1900;
	--vw: 100vw;
}
@media (max-width: 767px) {
	:root {
		--ds: 520;
	}
}
@media (min-width: 768px) and (max-width: 767px) {
	:root {
		--ds: 960;
	}
}
@media (min-width: 768px) and (max-width: 992px) {
	:root {
		--ds: 1300;
	}
}
@media (min-width: 993px) and (max-width: 1200px) {
	:root {
		--ds: 1700;
	}
}
@media (min-width: 1201px) and (max-width: 1400px) {
	:root {
		--ds: 1700;
	}
}
html {
	font-size: 10px;
	font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
	font-optical-sizing: auto;
}
html.fixed {
	overflow: hidden;
}
body {
	background-color: #000;
	overflow: hidden;
}
body.fixed {
	overflow: hidden;
}
.wrap {
	position: relative;
}
.site-main {
	position: relative;
}
.device-size {
	position: fixed;
	right: 0;
	bottom: 0;
	font-size: 1.2rem;
	color: #fff;
	z-index: 2000;
	padding: 8px;
	background-color: #000;
}
.loading {
	position: fixed;
	z-index: 500;
	background-color: #000;
	color: #eaa041;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	transition: opacity 1s ease-in-out;
	gap: 1.6rem;
	top: 0;
}
.loading.loaded {
	opacity: 0;
	pointer-events: none;
}
.loading p {
	font-size: 1rem;
	color: #eaa041;
	z-index: 10;
	text-shadow: 0 0 1rem #eaa041;
}
.loader {
	width: 48px;
	height: 48px;
	border: 5px dotted #eaa041;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	animation: rotation 2s linear infinite;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.site-header {
	width: 100%;
	height: calc(80 / var(--ds) * var(--vw));
	background-color: rgba(187, 227, 255, 0.8);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 40;
}
@media (max-width: 767px) {
	.site-header {
		padding-left: calc(30 / var(--ds) * var(--vw));
		padding-right: calc(30 / var(--ds) * var(--vw));
	}
}
.site-header__inner {
	width: calc(1200 / var(--ds) * var(--vw));
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}
@media (max-width: 767px) {
	.site-header__inner {
		width: 100%;
	}
}
.site-header__maplestory-logo {
	display: block;
	width: calc(90 / var(--ds) * var(--vw));
}
.site-header__nav {
	display: flex;
	gap: calc(8 / var(--ds) * var(--vw));
	align-items: center;
}
.site-header__sns {
	display: flex;
	justify-content: center;
	gap: calc(8 / var(--ds) * var(--vw));
}
.site-header__btn {
	background: transparent url("../../images/btn-account-bg@2x.png") no-repeat 0 0;
	background-size: 200%;
	width: calc(89 / var(--ds) * var(--vw));
	height: calc(53 / var(--ds) * var(--vw));
	font-size: 0;
	position: relative;
	cursor: pointer;
}
@media (max-width: 767px) {
	.site-header__btn {
		width: calc(65 / var(--ds) * var(--vw));
		height: calc(39 / var(--ds) * var(--vw));
	}
}
.site-header__btn::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent url("../../images/btn-account-bg@2x.png") no-repeat 0 0;
	background-size: 200%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity 300ms;
}
.site-header__btn.signout {
	background-position: 0 0;
}
.site-header__btn.signout::after {
	background-position: 0 100%;
}
.site-header__btn.signin {
	background-position: 100% 0;
}
.site-header__btn.signin::after {
	background-position: 100% 100%;
}
@media (hover: hover) {
	.site-header__btn:hover::after {
		opacity: 1;
	}
}
.site-header__btn-sns {
	background: transparent url("../../images/btn-sns-bg@2x.png") no-repeat 0 0;
	background-size: 300%;
	width: calc(53 / var(--ds) * var(--vw));
	height: calc(52 / var(--ds) * var(--vw));
	font-size: 0;
	position: relative;
}
@media (max-width: 767px) {
	.site-header__btn-sns {
		width: calc(40 / var(--ds) * var(--vw));
		height: calc(39 / var(--ds) * var(--vw));
	}
}
.site-header__btn-sns::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent url("../../images/btn-sns-bg@2x.png") no-repeat 0 0;
	background-size: 300%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity 300ms;
}
.site-header__btn-sns.ig {
	background-position: 0 0;
}
.site-header__btn-sns.ig::after {
	background-position: 0 100%;
}
.site-header__btn-sns.fb {
	background-position: 50% 0;
}
.site-header__btn-sns.fb::after {
	background-position: 50% 100%;
}
.site-header__btn-sns.yt {
	background-position: 100% 0;
}
.site-header__btn-sns.yt::after {
	background-position: 100% 100%;
}
@media (hover: hover) {
	.site-header__btn-sns:hover::after {
		opacity: 1;
	}
}
.section-index {
	position: relative;
	aspect-ratio: 1920/860;
	background: #000 url("../../images/index-bg.jpg") no-repeat center top;
	background-size: cover;
}
@media (max-width: 767px) {
	.section-index {
		aspect-ratio: 1170/1760;
		background: #000 url("../../images/index-bg-m.jpg") no-repeat center top;
		background-size: cover;
	}
}
@media (min-width: 768px) and (max-width: 992px) {
	.section-index {
		aspect-ratio: 1920/1200;
	}
}
@media (min-width: 1401px) and (max-width: 1920px) {
	.section-index {
		aspect-ratio: 1920/810;
	}
}
.section-index__stage-wrap {
	position: absolute;
	width: calc(1150 / var(--ds) * var(--vw));
	height: calc(600 / var(--ds) * var(--vw));
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -43%, 0);
	z-index: 20;
}
@media (max-width: 767px) {
	.section-index__stage-wrap {
		width: calc(450 / var(--ds) * var(--vw));
		height: auto;
		aspect-ratio: 677/803;
		transform: translate3d(-50%, -50.5%, 0);
		z-index: 20;
	}
}
.section-index__stage-wrap::after {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	background: linear-gradient(360deg, rgba(255, 252, 252, 0) 0%, rgb(255, 255, 255) 100%);
	width: 100%;
	height: calc(104 / var(--ds) * var(--vw));
	z-index: 1100;
	pointer-events: none;
}
.section-index__btn-download {
	background: transparent url("../../images/btn-download-bg.png") no-repeat 0 0;
	background-size: 100%;
	width: calc(106 / var(--ds) * var(--vw));
	height: calc(289 / var(--ds) * var(--vw));
	font-size: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-594%, -33%, 0);
	z-index: 50;
	cursor: pointer;
	transition: transform 300ms;
}
@media (max-width: 767px) {
	.section-index__btn-download {
		background: transparent url("../../images/btn-download-bg-m@2x.png") no-repeat 0 0;
		background-size: cover;
		aspect-ratio: 447/116;
		height: auto;
		width: calc(320 / var(--ds) * var(--vw));
		transform: translate3d(-50%, 350%, 0);
	}
}
.section-index__btn-download::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent url("../../images/btn-download-bg.png") no-repeat 0 100%;
	background-size: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity 300ms;
}
@media (hover: hover) {
	.section-index__btn-download:hover {
		transform: translate3d(-594%, -35%, 0) scale(1.1);
	}
	.section-index__btn-download:hover::after {
		opacity: 1;
	}
}
.section-index__main-title {
	width: calc(747 / var(--ds) * var(--vw));
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate3d(-50%, 516%, 0);
	z-index: 120;
}
@media (max-width: 767px) {
	.section-index__main-title {
		width: calc(420 / var(--ds) * var(--vw));
		transform: translate3d(-50%, 720%, 0);
	}
}
.section-index__stage-border {
	content: "";
	position: absolute;
	width: calc(1170 / var(--ds) * var(--vw));
	height: calc(621 / var(--ds) * var(--vw));
	background: transparent url("../../images/border-bg@2x.png") no-repeat center top;
	background-size: cover;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -43%, 0);
	z-index: 40;
	pointer-events: none;
}
@media (max-width: 767px) {
	.section-index__stage-border {
		width: calc(472 / var(--ds) * var(--vw));
		aspect-ratio: 697/823;
		height: auto;
		background: transparent url("../../images/border-bg-m@2x.png") no-repeat center top;
		background-size: cover;
		transform: translate3d(-50%, -50%, 0);
	}
}
.section-index__stage-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	background-color: #fff;
}
@media (max-width: 767px) {
	.section-index__stage-inner {
		overflow-y: scroll;
	}
}
.section-index__stage {
	position: absolute;
	width: calc(1150 / var(--ds) * var(--vw));
	height: calc(3100 / var(--ds) * var(--vw));
	background: #9bdc16 url("../../images/stage-bg.jpg") no-repeat center top;
	background-size: cover;
	bottom: 0;
	left: 0;
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	perspective: 1000;
}
@media (max-width: 767px) {
	.section-index__stage {
		background: transparent url("../../images/stage-bg-m.jpg") no-repeat 0 0;
		background-size: cover;
		width: calc(450 / var(--ds) * var(--vw));
		aspect-ratio: 672/3581;
		height: auto;
		position: relative;
	}
}
.section-index__arrow {
	width: calc(175 / var(--ds) * var(--vw));
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 50;
}
@media (max-width: 767px) {
	.section-index__arrow {
		width: calc(125 / var(--ds) * var(--vw));
	}
}
.section-index__arrow.left {
	transform: translate3d(-280%, -340%, 0);
}
@media (max-width: 767px) {
	.section-index__arrow.left {
		transform: translate3d(-176%, -496%, 0);
	}
}
.section-index__arrow.right {
	transform: translate3d(180%, -340%, 0);
}
@media (max-width: 767px) {
	.section-index__arrow.right {
		transform: translate3d(76%, -496%, 0);
	}
}
.section-index__arrow img {
	animation: up-down 1500ms infinite;
}
.section-index__event-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(281 / var(--ds) * var(--vw));
	height: calc(333 / var(--ds) * var(--vw));
	cursor: pointer;
	transition: margin 300ms;
}
.section-index__event-icon img {
	position: relative;
	z-index: 0;
}
@media (max-width: 767px) {
	.section-index__event-icon {
		width: calc(186 / var(--ds) * var(--vw));
		aspect-ratio: 542/506;
		height: auto;
	}
}
.section-index__event-icon::before,
.section-index__event-icon::after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	opacity: 0;
	transition: opacity 300ms;
	pointer-events: none;
}
@media (max-width: 767px) {
	.section-index__event-icon::after {
		display: none;
	}
}
.section-index__event-icon::before {
	background: transparent url("../../images/icon-disable@2x.png") no-repeat center top;
	background-size: cover;
	opacity: 0;
}
@media (max-width: 767px) {
	.section-index__event-icon::before {
		background: transparent url("../../images/icon-disable-m@2x.png") no-repeat center top;
		background-size: cover;
	}
}
@media (hover: hover) {
	.section-index__event-icon:hover {
		margin-top: -0.8rem;
	}
	.section-index__event-icon:hover::after {
		opacity: 1;
	}
}
.section-index__event-icon.event01 {
	transform: translate3d(-149%, 49%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event01 {
		transform: translate3d(-99%, 246%, 0);
	}
}
.section-index__event-icon.event01::after {
	background: transparent url("../../images/icon-01-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event02 {
	transform: translate3d(-50%, 50%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event02 {
		transform: translate3d(0%, 248%, 0);
	}
}
.section-index__event-icon.event02::after {
	background: transparent url("../../images/icon-02-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event03 {
	transform: translate3d(50%, 50%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event03 {
		transform: translate3d(0%, 157%, 0);
	}
}
.section-index__event-icon.event03::after {
	background: transparent url("../../images/icon-03-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event04 {
	transform: translate3d(99%, -47%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event04 {
		transform: translate3d(-100%, 156%, 0);
	}
}
.section-index__event-icon.event04::after {
	background: transparent url("../../images/icon-04-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event05 {
	transform: translate3d(0%, -47%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event05 {
		transform: translate3d(-100%, 66%, 0);
	}
}
.section-index__event-icon.event05::after {
	background: transparent url("../../images/icon-05-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event06 {
	transform: translate3d(-99%, -47%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event06 {
		transform: translate3d(0%, 66%, 0);
	}
}
.section-index__event-icon.event06::after {
	background: transparent url("../../images/icon-06-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event07 {
	transform: translate3d(-198%, -47%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event07 {
		transform: translate3d(-100%, -27%, 0);
	}
}
.section-index__event-icon.event07::after {
	background: transparent url("../../images/icon-07-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event08 {
	transform: translate3d(-148%, -139%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event08 {
		transform: translate3d(0%, -26%, 0);
	}
}
.section-index__event-icon.event08::after {
	background: transparent url("../../images/icon-08-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event09 {
	transform: translate3d(-50%, -143%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event09 {
		transform: translate3d(0%, -134%, 0);
	}
}
.section-index__event-icon.event09::after {
	background: transparent url("../../images/icon-09-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event10 {
	transform: translate3d(50%, -143%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event10 {
		transform: translate3d(-100%, -128%, 0);
	}
}
.section-index__event-icon.event10::after {
	background: transparent url("../../images/icon-10-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event11 {
	transform: translate3d(99%, -234%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event11 {
		transform: translate3d(-100%, -223%, 0);
	}
}
.section-index__event-icon.event11::after {
	background: transparent url("../../images/icon-11-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event12 {
	transform: translate3d(0%, -235%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event12 {
		transform: translate3d(1%, -226%, 0);
	}
}
.section-index__event-icon.event12::after {
	background: transparent url("../../images/icon-12-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event13 {
	transform: translate3d(-99%, -234%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event13 {
		transform: translate3d(-100%, -342%, 0);
	}
}
.section-index__event-icon.event13::after {
	background: transparent url("../../images/icon-13-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event14 {
	transform: translate3d(-198%, -236%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event14 {
		transform: translate3d(0%, -342%, 0);
	}
}
.section-index__event-icon.event14::after {
	background: transparent url("../../images/icon-14-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event15 {
	transform: translate3d(-149%, -332%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event15 {
		transform: translate3d(0%, -433%, 0);
	}
}
.section-index__event-icon.event15::after {
	background: transparent url("../../images/icon-15-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event16 {
	transform: translate3d(-50%, -332%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event16 {
		transform: translate3d(-100%, -433%, 0);
	}
}
.section-index__event-icon.event16::after {
	background: transparent url("../../images/icon-16-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event17 {
	transform: translate3d(49%, -335%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event17 {
		transform: translate3d(0%, -525%, 0);
	}
}
.section-index__event-icon.event17::after {
	background: transparent url("../../images/icon-17-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event18 {
	transform: translate3d(49%, -435%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event18 {
		transform: translate3d(-100%, -525%, 0);
	}
}
.section-index__event-icon.event18::after {
	background: transparent url("../../images/icon-18-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event19 {
	transform: translate3d(-51%, -434%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event19 {
		transform: translate3d(-100%, -615%, 0);
	}
}
.section-index__event-icon.event19::after {
	background: transparent url("../../images/icon-19-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.event20 {
	transform: translate3d(-150%, -434%, 0);
}
@media (max-width: 767px) {
	.section-index__event-icon.event20 {
		transform: translate3d(0%, -614%, 0);
	}
}
.section-index__event-icon.event20::after {
	background: transparent url("../../images/icon-20-on@2x.png") no-repeat center top;
	background-size: cover;
}
.section-index__event-icon.disable {
	pointer-events: none;
}
.section-index__event-icon.disable img {
	opacity: 0;
}
.section-index__event-icon.disable::before {
	opacity: 1;
}
@keyframes up-down {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -10%;
	}
}
.modal {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 1200;
	left: 0;
	top: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease;
}
.modal.active {
	pointer-events: auto;
	opacity: 1;
}
.modal__overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.modal__ui {
	position: relative;
	width: calc(656 / var(--ds) * var(--vw));
	height: calc(398 / var(--ds) * var(--vw));
	background: transparent url("../../images/modal-bg@2x.png") no-repeat 0 0;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	padding: calc(92 / var(--ds) * var(--vw)) calc(30 / var(--ds) * var(--vw)) 0;
}
@media (max-width: 767px) {
	.modal__ui {
		width: calc(480 / var(--ds) * var(--vw));
		height: auto;
		background-size: cover;
		aspect-ratio: 656/398;
		padding: calc(64 / var(--ds) * var(--vw)) calc(20 / var(--ds) * var(--vw)) 0;
	}
}
.modal__title {
	color: #fff;
	font-size: calc(36 / var(--ds) * var(--vw));
	text-align: center;
	margin-bottom: calc(12 / var(--ds) * var(--vw));
}
@media (max-width: 767px) {
	.modal__title {
		font-size: calc(24 / var(--ds) * var(--vw));
		margin-bottom: calc(8 / var(--ds) * var(--vw));
	}
}
.modal__text {
	color: #fff;
	font-size: calc(30 / var(--ds) * var(--vw));
	text-align: center;
	line-height: 1.2;
	margin-bottom: calc(30 / var(--ds) * var(--vw));
	white-space: pre-line;
}
@media (max-width: 767px) {
	.modal__text {
		font-size: calc(20 / var(--ds) * var(--vw));
		margin-bottom: calc(12 / var(--ds) * var(--vw));
		line-height: 1.5;
	}
}
.modal__btn-close {
	width: calc(40 / var(--ds) * var(--vw));
	height: calc(40 / var(--ds) * var(--vw));
	background: transparent url("../../images/btn-close-bg@2x.png") no-repeat 0 0;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	translate: -85% 85%;
	cursor: pointer;
	transition: scale 300ms ease;
}
@media (hover: hover) {
	.modal__btn-close:hover {
		scale: 1.2;
	}
}
@media (max-width: 767px) {
	.modal__btn-close {
		width: calc(30 / var(--ds) * var(--vw));
		height: calc(30 / var(--ds) * var(--vw));
	}
}
.modal__btn-more {
	width: calc(228 / var(--ds) * var(--vw));
	height: calc(67 / var(--ds) * var(--vw));
	background: transparent url("../../images/btn-more-bg@2x.png") no-repeat 0 0;
	background-size: cover;
	display: block;
	font-size: 0;
	margin: 0 auto;
	transition: scale 300ms ease;
}
@media (hover: hover) {
	.modal__btn-more:hover {
		scale: 1.1;
	}
}
@media (max-width: 767px) {
	.modal__btn-more {
		width: calc(180 / var(--ds) * var(--vw));
		aspect-ratio: 228/67;
		height: auto;
		background-size: cover;
	}
}
.modal__icon {
	width: calc(239 / var(--ds) * var(--vw));
	height: calc(204 / var(--ds) * var(--vw));
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate3d(-50%, -50%, 0);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: transparent;
}
.modal__icon.icon01 {
	background-image: url("../../images/modal-icon01@2x.png");
}
.modal__icon.icon02 {
	background-image: url("../../images/modal-icon02@2x.png");
}
.modal__icon.icon03 {
	background-image: url("../../images/modal-icon03@2x.png");
}
.modal__icon.icon04 {
	background-image: url("../../images/modal-icon04@2x.png");
}
.modal__icon.icon05 {
	background-image: url("../../images/modal-icon05@2x.png");
}
.modal__icon.icon06 {
	background-image: url("../../images/modal-icon06@2x.png");
}
.modal__icon.icon07 {
	background-image: url("../../images/modal-icon07@2x.png");
}
.modal__icon.icon08 {
	background-image: url("../../images/modal-icon08@2x.png");
}
.modal__icon.icon09 {
	background-image: url("../../images/modal-icon09@2x.png");
}
.modal__icon.icon10 {
	background-image: url("../../images/modal-icon10@2x.png");
}
.modal__icon.icon11 {
	background-image: url("../../images/modal-icon11@2x.png");
}
.modal__icon.icon12 {
	background-image: url("../../images/modal-icon12@2x.png");
}
.modal__icon.icon13 {
	background-image: url("../../images/modal-icon13@2x.png");
}
.modal__icon.icon14 {
	background-image: url("../../images/modal-icon14@2x.png");
}
.modal__icon.icon15 {
	background-image: url("../../images/modal-icon15@2x.png");
}
.modal__icon.icon16 {
	background-image: url("../../images/modal-icon16@2x.png");
}
.modal__icon.icon17 {
	background-image: url("../../images/modal-icon17@2x.png");
}
.modal__icon.icon18 {
	background-image: url("../../images/modal-icon18@2x.png");
}
.modal__icon.icon19 {
	background-image: url("../../images/modal-icon19@2x.png");
}
.modal__icon.icon20 {
	background-image: url("../../images/modal-icon20@2x.png");
}
@media (max-width: 767px) {
	.modal__icon {
		width: calc(180 / var(--ds) * var(--vw));
		height: auto;
		background-size: cover;
		aspect-ratio: 239/204;
	}
}
.video-intro {
	position: fixed;
	width: 100%;
	height: 100svh;
	left: 0;
	top: 0;
	background-color: #000;
	z-index: 400;
	transition: opacity 0.6s;
}
.video-intro video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	object-fit: cover;
}
@media (max-width: 767px) {
	.video-intro video {
		height: 50vh;
	}
}
.video-intro.hide {
	opacity: 0;
	pointer-events: none;
}
.site-header__state {
	display: flex;
}
.loadingProgress {
	width: 100%;
	height: 100%;
	background: url(https://tw.hicdn.beanfun.com/beanfun/beanfun/common_assets/images/loading/type1.gif) 50% 50% rgba(0, 0, 0, 0.75) no-repeat;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2147483648;
}
.lb-share .gbox-wrap {
	max-width: 685px;
	width: 100%;
	background: transparent;
	padding: 0;
}
.lb-share .gbox-close {
	width: 110px;
	height: 121px;
	background-size: cover;
	background-image: url("../../images/btn-close.png");
	font-size: 0;
	right: 38px;
	top: 50px;
}
.lb-share .gbox-content {
	padding: 0;
}
.lb-share-content {
	position: relative;
}
.lb-share-btn-group {
	position: absolute;
	top: 620px;
	left: 120px;
	display: flex;
	column-gap: 20px;
}
.lb-share-btn__download {
	width: 186px;
	height: 74px;
	background-image: url("../../images/btn-download.png");
	background-size: cover;
	font-size: 0;
	filter: drop-shadow(0 0 4px #fffcaa) drop-shadow(0 0 4px #fffcaa);
}
.lb-share-btn__share {
	width: 186px;
	height: 74px;
	background-image: url("../../images/btn-share.png");
	background-size: cover;
	font-size: 0;
	filter: drop-shadow(0 0 4px #fffcaa) drop-shadow(0 0 4px #fffcaa);
}
@media (max-width: 767px) {
	.lb-share .gbox-wrap {
		max-width: calc(685 / 767 * 100vw);
	}
	.lb-share .gbox-close {
		width: calc(110 / 767 * 100vw);
		height: calc(121 / 767 * 100vw);
		right: calc(38 / 767 * 100vw);
		top: calc(50 / 767 * 100vw);
	}
	.lb-share-btn-group {
		position: absolute;
		top: calc(620 / 767 * 100vw);
		left: calc(120 / 767 * 100vw);
		column-gap: calc(20 / 767 * 100vw);
	}
	.lb-share-btn__download {
		width: calc(186 / 767 * 100vw);
		height: calc(74 / 767 * 100vw);
		filter: drop-shadow(0 0 calc(4 / 767 * 100vw) #fffcaa) drop-shadow(0 0 calc(4 / 767 * 100vw) #fffcaa);
	}
	.lb-share-btn__share {
		width: calc(186 / 767 * 100vw);
		height: calc(74 / 767 * 100vw);
		filter: drop-shadow(0 0 calc(4 / 767 * 100vw) #fffcaa) drop-shadow(0 0 calc(4 / 767 * 100vw) #fffcaa);
	}
}
.site-header__btn-certificate {
	background: transparent url("../../images/btn-certificate@2x.png") no-repeat 0 0;
	background-size: 100%;
	width: calc(186 / var(--ds) * var(--vw));
	height: calc(68 / var(--ds) * var(--vw));
	font-size: 0;
	position: relative;
	cursor: pointer;
}
@media (max-width: 767px) {
	.site-header__btn-certificate {
		width: calc(107 / var(--ds) * var(--vw));
		height: calc(39 / var(--ds) * var(--vw));
	}
}
.site-header__btn-certificate::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent url("../../images/btn-certificate@2x.png") no-repeat 0 100%;
	background-size: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity 300ms;
}
@media (hover: hover) {
	.site-header__btn-certificate:hover::after {
		opacity: 1;
	}
}