@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Roboto&family=Lato&family=Noto+Serif+TC:wght@400;500;600&family=Montserrat:wght@100..900&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
				margin: 0;
				padding: 0;
				border: 0;
				font: inherit;
				vertical-align: baseline;
}

ol, ul {
				list-style: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
				display: block;
}

audio, canvas, video {
				display: inline-block;
}

audio:not([controls]) {
				display: none;
				height: 0;
}

[hidden] {
				display: none;
}

a, input {
				-webkit-tap-highlight-color: transparent;
}
a:focus, input:focus {
				outline: 0;
}
a:active, a:hover, input:active, input:hover {
				outline: 0;
}

abbr[title] {
				border-bottom: 1px dotted;
}

b, strong {
				font-weight: bold;
}

dfn {
				font-style: italic;
}

hr {
				box-sizing: content-box;
				height: 0;
}

mark {
				background: #ff0;
				color: #000;
}

code, kbd, pre, samp {
				font-family: monospace, serif;
				font-size: 1em;
}

pre {
				white-space: pre-wrap;
}

q {
				quotes: "“" "”" "‘" "’";
}

small {
				font-size: 80%;
}

sub {
				font-size: 75%;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
}

sup {
				font-size: 75%;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
				top: -0.5em;
}

sub {
				bottom: -0.25em;
}

img {
				width: 100%;
				height: auto;
				display: block;
}

svg:not(:root) {
				overflow: hidden;
}

figure {
				margin: 0;
}

fieldset {
				border: 1px solid #c0c0c0;
				margin: 0 2px;
				padding: 0.35em 0.625em 0.75em;
}

legend {
				border: 0;
				padding: 0;
}

button, input, select, textarea {
				font-family: inherit;
				font-size: 100%;
				margin: 0;
}

button, input {
				line-height: normal;
				background-color: transparent;
				border: none;
}

button, select {
				text-transform: none;
}

select, input {
				-webkit-appearance: none;
				outline: none;
				border: none;
				background-color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
				-webkit-transition: background-color 5000s ease-in-out 0s;
				transition: background-color 5000s ease-in-out 0s;
}

button, html input[type=button] {
				-webkit-appearance: button;
				cursor: pointer;
}

input[type=reset], input[type=submit] {
				-webkit-appearance: button;
				cursor: pointer;
}

button[disabled], html input[disabled] {
				cursor: default;
}

input[type=checkbox], input[type=radio] {
				box-sizing: border-box;
				padding: 0;
}
input[type=search] {
				-webkit-appearance: textfield;
				box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
				-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
				border: 0;
				padding: 0;
}

textarea {
				overflow: auto;
				vertical-align: top;
}

table {
				border-collapse: collapse;
				border-spacing: 0;
}

.clearfix {
				zoom: 1;
}
.clearfix:before {
				content: "";
				display: table;
}
.clearfix:after {
				content: "";
				display: table;
				clear: both;
}

html {
				font-family: sans-serif;
				line-height: 1;
				font-size: 16px;
}

a {
				text-decoration: none;
				color: black;
				display: block;
				cursor: pointer;
}

@keyframes aniDown {
				0% {
								transform: translateY(0) rotate(90deg);
				}
				50% {
								transform: translateY(20%) rotate(90deg);
				}
				100% {
								transform: translateY(0) rotate(90deg);
				}
}
@keyframes aniLoading {
				50% {
								opacity: 0;
				}
				100% {
								opacity: 1;
				}
}
html, body {
				font-size: 100px;
				font-family: "Noto Sans TC", Arial, Helvetica, "微軟正黑體", Microsoft JhengHei, Apple LiGothic, "蘋果儷中黑";
				position: relative;
}

#wrapper #main {
				position: relative;
				max-width: 1920px;
				margin: auto;
				font-size: 0.2rem;
}
@media screen and (max-width: 768px) {
				#wrapper #main {
								font-size: 4.67vw;
				}
}
#wrapper #main .link-box a {
				color: #0b1267;
				font-size: 0.9em;
				text-decoration: underline;
				text-align: center;
}
#wrapper #main .btn-box a {
				color: #fff;
				height: 2.75em;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: linear-gradient(to bottom, #001fdb, #06146a);
				border-radius: 1.375em;
}
#wrapper #main .btn-box a .txt {
				font-size: 1em;
				font-weight: 500;
}
#wrapper #main .btn-box a .icon {
				width: 0.365em;
				margin-left: 0.5em;
}

#__vconsole {
				position: relative;
				z-index: 1000000;
}

header {
				position: absolute;
				top: 1.43em;
				right: 0.75em;
				z-index: 99;
}
header .container {
				display: flex;
				align-items: flex-end;
				position: relative;
}
header .container::before {
				content: "";
				width: 22.5em;
				height: 2.13em;
				background: url("../images/bg-state-blue.png") no-repeat center/contain;
				position: absolute;
				right: -5em;
				bottom: -0.47em;
}
header .container .state-box {
				display: flex;
				align-items: center;
				width: 14em;
				height: 2.25em;
				padding-left: 1em;
				margin-right: 0.5em;
				box-sizing: border-box;
				position: relative;
				z-index: 1;
				background: url("../images/bg-state-white.png") no-repeat center/contain;
}
header .container .state-box p {
				color: #0b1267;
				font-size: 0.75em;
				font-weight: 300;
}
header .container .state-box .heart-box {
				margin-left: 0.185em;
				display: flex;
				align-items: center;
}
header .container .state-box .heart-box .heart {
				margin: 0 0.125em;
}
header .container a.btn-info {
				width: 1.065em;
				position: relative;
				bottom: 0.1em;
				z-index: 1;
}

.lightbox {
				position: fixed;
				top: 0;
				left: 0;
				height: 100vh;
				width: 100%;
				z-index: 999;
}
.lightbox .container {
				height: 100%;
				width: 100%;
}

.sections {
				overflow-x: hidden;
				position: absolute;
				width: 100%;
				top: 0;
}

.loading {
				width: 100%;
				height: 100vh;
				background-image: linear-gradient(to bottom, #ffffff, #d6efff);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99999;
}
.loading .container {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
}
.loading .container .dot-box {
				display: flex;
				margin-bottom: 0.1rem;
}
.loading .container .dot {
				width: 0.2em;
				height: 0.2em;
				border-radius: 99999px;
				background-color: #0c1563;
				animation-name: aniLoading;
				animation-iteration-count: infinite;
				animation-duration: 1.5s;
				margin: 0 0.05em;
}
.loading .container .dot:first-of-type {
				animation-delay: 0.1s;
}
.loading .container .dot:nth-of-type(2) {
				animation-delay: 0.25s;
}
.loading .container .dot:last-of-type {
				animation-delay: 0.4s;
}
.loading .container p {
				color: #0c1563;
				font-size: 0.15rem;
				letter-spacing: 0.03em;
}

.fadeLoading-enter-active {
				transition: 0.5s;
}

.fadeLoading-leave-active {
				transition: 0.5s;
}

.fadeLoading-enter-from, .fadeLoading-leave-to {
				opacity: 0;
}

.fadeLoading-enter-to, .fadeLoading-leave-from {
				opacity: 1;
}

.fade-leave-active {
				transition: opacity 0.35s;
}

.fade-enter-active {
				transition: opacity 0.35s;
}

.fade-enter-from {
				opacity: 0;
}

.fade-leave-to {
				opacity: 0;
}

.fade-enter-to {
				opacity: 1;
}

.fade-leave-from {
				opacity: 1;
}

.fadeArticle-leave-active {
				transition: opacity 0s;
}

.fadeArticle-enter-active {
				transition: opacity 0.25s 0.1s;
}

.fadeArticle-enter-from,
.fadeArticle-leave-to {
				opacity: 0;
}

.fadeArticle-enter-to {
				opacity: 1;
}

.fadeArticle-leave-from {
				opacity: 1;
				position: absolute;
}

.home > .container {
				padding: 6.95em 0.75em 8em 0.75em;
				height: 100vh;
				height: calc(var(--vh, 1vh) * 100);
				box-sizing: border-box;
				background: url("../images/bg.png") no-repeat center/cover;
				position: relative;
}
.home > .container::before {
				content: "";
				width: 100%;
				height: 7.25em;
				background: url("../images/dec-bottom.png") no-repeat center/contain;
				background-position-x: right;
				position: absolute;
				bottom: 0;
				right: 0;
}
.home > .container .logo {
				position: absolute;
				width: 3.55em;
				top: 1em;
				left: 0.95em;
}
.home > .container h2 {
				color: #0b1267;
				text-align: center;
				font-weight: 500;
				line-height: normal;
				margin-bottom: 1.5em;
				position: relative;
}
.home > .container h2::before {
				content: "";
				width: 2.95em;
				height: 2.95em;
				background: url("../images/ic-q.svg") no-repeat center/contain;
				position: absolute;
				top: -1.85em;
				left: 1.9em;
}
.home > .container h2 span {
				display: block;
}
.home > .container h2 span:nth-of-type(1) {
				font-size: 1em;
				margin-left: 0.95em;
}
.home > .container h2 span:nth-of-type(2) {
				font-size: 1.5em;
}
.home > .container .option-box {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
}
.home > .container .option-box a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 9em;
				height: 4.9em;
				margin: 0 0.375em 0.6em 0.375em;
				padding-right: 1.35em;
				box-sizing: border-box;
				position: relative;
				background: url("../images/btn-option.png") no-repeat center/contain;
}
.home > .container .option-box a .icon {
				margin-right: 0.6em;
}
.home > .container .option-box a .txt {
				color: #0b1267;
				font-size: 1em;
				line-height: normal;
				position: relative;
}
.home > .container .option-box a .txt::after {
				content: "";
				height: 0.365em;
				width: 0.365em;
				background: url("../images/ic-arrow-blue.svg") no-repeat center/contain;
				position: absolute;
				top: 55%;
				transform: translateY(-50%);
				right: -0.9em;
}
.home > .container .option-box a .used {
				color: #f44479;
				font-size: 0.65em;
				background-color: #fff;
				padding: 0.5em 0.7em 0.5em 1.85em;
				border-radius: 9999px;
				position: absolute;
				top: 0;
				left: 0;
				box-shadow: 0 3px 20px 0 #a8c5e6;
}
.home > .container .option-box a .used::before {
				content: "";
				width: 1em;
				height: 0.83em;
				background: url("../images/ic-heart-status.svg") no-repeat center/contain;
				position: absolute;
				top: 52.5%;
				transform: translateY(-50%);
				left: 0.7em;
}

.info {
				background: url("../images/bg.png") no-repeat center/100% 36em;
				background-position-y: top;
				overflow-x: hidden;
}
.info .container {
				padding: 4em 1.5em 3em 1.5em;
				overflow-y: scroll;
				box-sizing: border-box;
				background-image: linear-gradient(to bottom, rgba(221, 227, 249, 0), #d7e9ff 2%, #d7e9ff);
				position: relative;
				color: #151515;
}
.info .container .logo {
				position: absolute;
				width: 3.55em;
				top: 1em;
				left: 0.95em;
}
.info .container a.btn-close {
				width: 2.25em;
				position: fixed;
				top: 1em;
				right: 1em;
				z-index: 1;
}
.info .container .title-box {
				margin-bottom: 2em;
}
.info .container .title-box h2 {
				color: #0b1267;
				font-size: 1.3em;
				font-weight: bold;
				line-height: 1.46;
				text-align: center;
}
.info .container .title-box h3 {
				color: #0b1267;
				font-size: 1em;
				line-height: 1.45;
				letter-spacing: 0.15em;
				text-align: center;
				margin-bottom: 1.3em;
}
.info .container .title-box h3 span {
				font-size: 0.7em;
}
.info .container .title-box p {
				font-size: 0.8em;
				line-height: 1.63;
}
.info .container .category {
				margin-bottom: 2em;
}
.info .container .category h4 {
				color: #fff;
				font-size: 0.9em;
				text-align: center;
				width: 18.05em;
				height: 2.16em;
				line-height: 2.16em;
				margin: auto;
				margin-bottom: 1.11em;
				background-image: linear-gradient(to right, rgba(244, 68, 121, 0), rgba(244, 68, 121, 0.94) 28%, rgba(244, 68, 121, 0.94) 72%, rgba(244, 68, 121, 0));
}
.info .container .category > p {
				font-size: 0.8em;
				line-height: 1.63;
}
.info .container .category h5 {
				font-size: 0.8em;
				line-height: 1.63;
				margin-top: 1.5em;
}
.info .container .category ul {
				font-size: 0.8em;
				font-family: Lato;
				line-height: 1.63;
}
.info .container .category ul.circle {
				list-style: circle;
				margin-bottom: 1em;
				padding-left: 1em;
}
.info .container .category ul.circle span {
				color: #555;
				font-size: 0.875em;
				display: block;
}
.info .container .category ul.custom li {
				display: flex;
}
.info .container .category ul.custom li span {
				text-align: center;
				line-height: 1.425em;
				background-color: #fff;
				border-radius: 9999px;
				font-size: 0.875em;
				width: 1.425em;
				height: 1.425em;
				flex-shrink: 0;
				margin-top: 0.35em;
}
.info .container .category ul.custom li p {
				margin-left: 0.4375em;
}
.info .container .category ul.desc {
				list-style-type: desc;
				padding-left: 1.5em;
}
.info .container .category ul li a {
				display: inline;
				color: #257cbc;
				text-decoration: underline;
}
.info .container .category .item {
				padding-left: 1em;
				margin-bottom: 0.8em;
}
.info .container .category .item .title {
				font-size: 0.8em;
				line-height: 1.63;
				margin-bottom: 0.8em;
				position: relative;
}
.info .container .category .item .title::before {
				content: "";
				width: 1em;
				height: 1em;
				background: url("../images/ic-sparkle-1.svg") no-repeat center/contain;
				position: absolute;
				top: 0.35em;
				left: -0.3125em;
				transform: translateX(-100%);
}
.info .container .category .item span.sub {
				color: #fff;
				font-size: 0.8em;
				background-color: #0b1267;
				display: inline-block;
				border-radius: 0.25em;
				margin-bottom: 0.75em;
				padding: 0.35em 0.85em;
}

.share-result {
				position: fixed;
				top: 0;
				left: 0;
				height: 100vh;
				width: 100%;
				-webkit-backdrop-filter: blur(1.02em);
				backdrop-filter: blur(1.02em);
				display: flex;
				justify-content: center;
				align-items: center;
}
.share-result .container {
				height: auto;
				width: 15em;
				padding: 1.3em 0 1.15em 0;
				border-radius: 0.8em;
				border: solid 1px #fff;
				background-image: linear-gradient(311deg, rgba(255, 255, 255, 0.3) 97%, #fff 47%, rgba(255, 255, 255, 0.53) 6%);
				text-align: center;
}
.share-result .container h2 {
				color: #0b1267;
				font-size: 1.45em;
				font-weight: bold;
				line-height: 1.48;
				margin-bottom: 0.48em;
				position: relative;
}
.share-result .container h2::before {
				content: "";
				width: 0.72em;
				height: 0.72em;
				background: url("../images/ic-sparkle-1.svg") no-repeat center/contain;
				position: absolute;
				top: 0;
				left: 1.01em;
}
.share-result .container h2::after {
				content: "";
				width: 0.48em;
				height: 0.48em;
				background: url("../images/ic-sparkle-2.svg") no-repeat center/contain;
				position: absolute;
				top: 0.9em;
				right: 1.1em;
}
.share-result .container p {
				color: #151515;
				font-size: 0.9em;
				margin-bottom: 1.8em;
}
.share-result .container p .highlight {
				color: #f44479;
}
.share-result .container .btn-box a {
				width: 8.65em;
}

.result .container {
				position: relative;
}
.result .container .fix-box {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 95vh;
				height: calc(var(--vh, 1vh) * 95);
}
.result .container .fix-box::before {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
}
.result .container .fix-box.hotel {
				background: url("../images/bg-hotel.png") no-repeat center/cover;
}
.result .container .fix-box.hotel::before {
				background: url("../images/open-hotel.png") no-repeat center/cover;
}
.result .container .fix-box.room {
				background: url("../images/bg-room.png") no-repeat center/cover;
}
.result .container .fix-box.room::before {
				background: url("../images/open-room.png") no-repeat center/cover;
}
.result .container .fix-box .logo {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
}
.result .container .fix-box .man {
				width: 17em;
				position: absolute;
				left: 53%;
				bottom: 1em;
				transform: translateX(-50%);
}
.result .container .fix-box .dialog-box {
				width: 11.88em;
				height: 6.75em;
				position: absolute;
				top: 10em;
				left: -0.8em;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 2;
				background: url("../images/bg-speak.png") no-repeat center/contain;
}
.result .container .fix-box .dialog-box.A {
				top: 13.5em;
}
.result .container .fix-box .dialog-box.B {
				top: 13.7em;
				width: 14.08em;
				height: 8em;
}
.result .container .fix-box .dialog-box.C {
				top: 15em;
				left: 50%;
				transform: translateX(-50%);
				width: 17.6em;
				height: 10em;
}
.result .container .fix-box .dialog-box.D {
				top: 13em;
				width: 13.2em;
				height: 10em;
}
.result .container .fix-box .dialog-box.E {
				left: auto;
				right: -0.5em;
				top: 14em;
				width: 12.32em;
				height: 10em;
}
.result .container .fix-box .dialog-box.F {
				top: 13.5em;
				width: 13.2em;
				height: 10em;
}
.result .container .fix-box .dialog-box p {
				color: #151515;
				font-size: 0.7em;
				line-height: normal;
}
.result .container .fix-box .txt-box {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 5em;
				left: 50%;
				transform: translateX(-50%);
				width: 18.9em;
				height: 7.9em;
				z-index: 2;
				background: url("../images/bg-dia-left.png") no-repeat center/contain;
}
.result .container .fix-box .txt-box::before {
				content: "";
				width: 2.25em;
				height: 2.25em;
				position: absolute;
				top: -0.5em;
				right: 0.6em;
				background: url("../images/ic-idea.svg") no-repeat center/contain;
}
.result .container .fix-box .txt-box .pdt {
				width: 4.45em;
				flex-shrink: 0;
				margin-right: 0.35em;
				transform: translateY(-0.4em);
}
.result .container .fix-box .txt-box p {
				color: #0b1267;
				font-size: 0.8em;
				line-height: normal;
}
.result .container .fix-box .txt-box p .highlight {
				color: #f44479;
				font-size: 1.375em;
				font-weight: bold;
}
.result .container .fix-box .txt-box > span {
				width: 100%;
				position: absolute;
				color: #fff;
				font-size: 0.5em;
				text-shadow: 0 0 5px #000;
				text-align: center;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 100%);
}
.result .container .scroll-box {
				position: relative;
				padding-top: calc(var(--vh, 1vh) * 87);
				box-sizing: border-box;
				pointer-events: none;
}
.result .container .scroll-box::before {
				content: "";
				width: 100%;
				height: 36.75em;
				position: absolute;
				top: calc(var(--vh, 1vh) * 87);
				left: 50%;
				transform: translateX(-50%);
				background: url("../images/bg.png") no-repeat center/cover;
				background-position-y: top;
				pointer-events: none;
				clip-path: polygon(0 6%, 100% 0%, 100% 100%, 0% 100%);
}
.result .container .scroll-box .ic-scroll {
				display: flex;
				justify-content: center;
				align-items: center;
				outline: solid 2px #f44479;
				border-radius: 1.5em;
				background-image: linear-gradient(to bottom, #ea3f72, #ff588b);
				width: 15em;
				height: 3em;
				margin: auto;
				box-sizing: border-box;
				margin-bottom: 4.5em;
				position: relative;
				z-index: 1;
}
.result .container .scroll-box .ic-scroll .icon {
				transform: rotate(90deg);
				width: 0.45em;
				margin-right: 0.6em;
				animation: aniDown infinite alternate 0.85s ease-in-out;
}
.result .container .scroll-box .ic-scroll .txt {
				color: #fff;
				font-size: 1.2em;
				font-weight: bold;
}
.result .container .scroll-box .ic-scroll .txt span {
				color: #ffffd2;
				font-weight: bold;
}
.result .container .scroll-box .unbind, .result .container .scroll-box .binded {
				pointer-events: auto;
				position: relative;
				z-index: 1;
}
.result .container .scroll-box .unbind::after, .result .container .scroll-box .binded::after {
				content: "";
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				background-image: linear-gradient(to bottom, rgba(221, 227, 249, 0), #d5d3ff 29%, #b0ccfb);
}
.result .container .scroll-box .unbind {
				padding-bottom: 0.01em;
}
.result .container .scroll-box .unbind::after {
				height: 16.95em;
}
.result .container .scroll-box .binded {
				padding-bottom: 2.5em;
}
.result .container .scroll-box .binded::after {
				height: 13.7em;
}
.result .container .scroll-box .binding-box {
				width: 20em;
				margin: auto;
				display: flex;
				flex-direction: column;
				border: 1px solid #fff;
				border-radius: 0.8em;
				padding: 1.35em 1.8em 1.2em 0.75em;
				box-sizing: border-box;
				background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.3));
				position: relative;
				margin-bottom: 2em;
}
.result .container .scroll-box .binding-box::before {
				content: "";
				width: 8.475em;
				height: 12em;
				position: absolute;
				bottom: 0em;
				right: -0.8em;
				background: url("../images/pic-phone.png") no-repeat center/contain;
}
.result .container .scroll-box .binding-box p {
				color: #28292e;
				font-size: 0.9em;
				line-height: normal;
}
.result .container .scroll-box .binding-box p .green {
				color: #23b71a;
				font-family: Montserrat;
				font-weight: bold;
}
.result .container .scroll-box .binding-box p .icon {
				width: 1.44em;
				display: inline-block;
				margin: 0 0.25em;
}
.result .container .scroll-box .binding-box p .highlight {
				font-weight: bold;
}
.result .container .scroll-box .binding-box > span {
				font-size: 0.7em;
				line-height: 1.44;
				color: #666666;
				font-family: Montserrat;
				margin-top: 0.5em;
				margin-bottom: 1.8em;
}
.result .container .scroll-box .binding-box a.btn-bind {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 9999px;
				background-image: linear-gradient(to bottom, #0fd5ae, #009f80);
				width: 6.7em;
				height: 1.85em;
}
.result .container .scroll-box .binding-box a.btn-bind .txt {
				color: #fff;
				font-size: 1em;
				font-weight: 500;
}
.result .container .scroll-box .binding-box a.btn-bind .icon {
				width: 0.3em;
				margin-left: 0.3em;
}
.result .container .scroll-box .step-box {
				position: relative;
				z-index: 1;
}
.result .container .scroll-box .step-box h2 {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #0b1267;
				font-size: 1.4em;
				font-weight: bold;
				text-shadow: 1px 2px 0 #fff;
				line-height: normal;
				text-align: center;
				margin-bottom: 0.79em;
				position: relative;
}
.result .container .scroll-box .step-box h2::before {
				content: "";
				width: 0.79em;
				height: 0.79em;
				position: absolute;
				top: 0.2em;
				left: 3.6em;
				transform: translate(-50%, -50%);
				background: url("../images/ic-sparkle-1.svg") no-repeat center/contain;
}
.result .container .scroll-box .step-box h2::after {
				content: "";
				width: 0.43em;
				height: 0.43em;
				position: absolute;
				bottom: 0.65em;
				left: 3em;
				transform: translate(-50%, -50%);
				background: url("../images/ic-sparkle-2.svg") no-repeat center/contain;
}
.result .container .scroll-box .step-box h2 .highlight {
				display: inline-block;
				font-size: 1.9em;
				font-family: Montserrat;
				text-shadow: 0 3px 0 #fff;
				transform: rotate(5deg);
				margin: 0 0.15em;
				position: relative;
}
.result .container .scroll-box .step-box h2 .highlight::before {
				content: "";
				width: 0.27em;
				height: 0.27em;
				position: absolute;
				top: 0.1em;
				right: -1.55em;
				transform: translate(-50%, -50%) rotate(-5deg);
				background: url("../images/ic-sparkle-1.svg") no-repeat center/contain;
}
.result .container .scroll-box .step-box .item {
				width: 19.6em;
				border-top-left-radius: 0.8em;
				border-bottom-left-radius: 0.8em;
				background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.3));
				padding: 0.8em 1.3em 0.9em 6.55em;
				box-sizing: border-box;
				margin-left: auto;
				margin-bottom: 2.25em;
				position: relative;
}
.result .container .scroll-box .step-box .item h3 {
				color: #fff;
				font-size: 0.95em;
				font-weight: bold;
				letter-spacing: 0.12em;
				position: absolute;
				top: -0.8em;
				left: -1em;
				z-index: 2;
}
.result .container .scroll-box .step-box .item h3::before {
				content: "";
				width: 5em;
				height: 4.74em;
				position: absolute;
				left: 1.59em;
				top: 1.1em;
				transform: translate(-50%, -50%);
				z-index: -1;
				background: url("../images/bg-title.png") no-repeat center/contain;
}
.result .container .scroll-box .step-box .item h3 .highlight {
				font-size: 1.68em;
				font-family: Montserrat;
}
.result .container .scroll-box .step-box .item .pic {
				position: absolute;
				z-index: 2;
}
.result .container .scroll-box .step-box .item:nth-of-type(1) .pic {
				width: 7.105em;
				left: -0.25em;
				top: -1em;
}
.result .container .scroll-box .step-box .item:nth-of-type(2) .pic {
				width: 3.75em;
				left: 1.65em;
				top: 0.75em;
}
.result .container .scroll-box .step-box .item:nth-of-type(3) .pic {
				width: 5.45em;
				top: 1.15em;
				left: 0.55em;
}
.result .container .scroll-box .step-box .txt {
				display: flex;
				flex-direction: column;
				line-height: normal;
}
.result .container .scroll-box .step-box .txt h4 {
				color: #0b1267;
				font-size: 1.2em;
				font-weight: bold;
}
.result .container .scroll-box .step-box .txt p {
				color: #151515;
				font-size: 0.9em;
}
.result .container .scroll-box .step-box .txt p .note {
				color: #666666;
				font-size: 0.77em;
}
.result .container .scroll-box .prize-box {
				width: 17.9em;
				padding: 0em 0.925em 0em 0.925em;
				box-sizing: border-box;
				margin: auto;
				border-top-left-radius: 1em;
				border-top-right-radius: 1em;
				box-shadow: 10px 10px 20px 0 #b3d7fd;
				background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.85) 61%, rgba(255, 255, 255, 0));
				position: relative;
				z-index: 1;
}
.result .container .scroll-box .prize-box h3 {
				color: #0b1267;
				font-size: 1em;
				line-height: 1.45;
				width: 9.25em;
				height: 3.6em;
				background-color: #fff;
				border-radius: 999px;
				padding-left: 2em;
				padding-top: 0.35em;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: -1.15em;
}
.result .container .scroll-box .prize-box.game {
				padding-top: 2em;
				padding-bottom: 4.35em;
}
.result .container .scroll-box .prize-box.game h3::before {
				content: "";
				width: 2.53125em;
				height: 2.3625em;
				background: url("../images/ic-in-heart.svg") no-repeat center/contain;
				position: absolute;
				top: -1em;
				left: -0.75em;
}
.result .container .scroll-box .prize-box.game .record-box {
				margin-bottom: 1.8em;
				position: relative;
}
.result .container .scroll-box .prize-box.game .record-box::before {
				content: "";
				width: 7.5em;
				height: 9.45em;
				position: absolute;
				top: 0.5em;
				right: -1.2em;
				transform: translateY(-100%);
				background: url("../images/pic-man-prize.png") no-repeat center/contain;
}
.result .container .scroll-box .prize-box.share {
				padding-top: 1.45em;
				padding-bottom: 1.6em;
				position: relative;
}
.result .container .scroll-box .prize-box.share::after {
				content: "";
				width: 100%;
				height: 10.7em;
				position: absolute;
				bottom: -2em;
				left: 50%;
				transform: translateX(-50%);
				background-image: linear-gradient(to bottom, rgba(221, 227, 249, 0), #d5d3ff 60%, #b0ccfb);
				z-index: -1;
}
.result .container .scroll-box .prize-box.share h3::before {
				content: "";
				width: 2.25em;
				height: 2.1em;
				background: url("../images/ic-in-share.svg") no-repeat center/contain;
				position: absolute;
				top: -0.92em;
				left: -0.265em;
}
.result .container .scroll-box .prize-box.share .record-box {
				margin-bottom: 0.6em;
}
.result .container .scroll-box .prize-box .prize {
				position: absolute;
				width: 5.9em;
				top: -1.6em;
				right: 0.6em;
}
.result .container .scroll-box .prize-box h4 {
				color: #151515;
				font-size: 0.9em;
				line-height: normal;
				margin-left: 1.11em;
				margin-bottom: 1.44em;
				position: relative;
				z-index: 1;
}
.result .container .scroll-box .prize-box h4 .highlight {
				color: #f44479;
				font-size: 1.72em;
				font-weight: 600;
				font-family: Montserrat;
				margin: 0 0.2em;
}
.result .container .scroll-box .prize-box .record-box {
				border: dashed 1px #debeca;
				border-radius: 0.75em;
				padding: 0.35em 1.1em 0.35em 0.9em;
				display: flex;
				align-items: center;
				justify-content: center;
}
.result .container .scroll-box .prize-box .record-box .icon-box {
				display: flex;
				margin-right: 0.4em;
}
.result .container .scroll-box .prize-box .record-box .icon-box .icon {
				width: 1.05em;
				margin: 0 0.125em;
}
.result .container .scroll-box .prize-box .record-box .icon-box .icon span {
				display: inline-block;
				width: 100%;
				height: 100%;
				border-radius: 9999px;
				background-color: #eaeaea;
}
.result .container .scroll-box .prize-box .record-box p {
				color: #151515;
				font-size: 0.8em;
				line-height: normal;
				display: flex;
				justify-content: center;
				align-items: center;
}
.result .container .scroll-box .prize-box .record-box p .highlight {
				color: #f44479;
				font-size: 2em;
				font-weight: 600;
				font-family: Montserrat;
				margin: 0 0.2em;
}
.result .container .scroll-box .prize-box .note-box {
				margin-bottom: 1.4em;
}
.result .container .scroll-box .prize-box .note-box p.note {
				display: flex;
				margin-bottom: 0.5em;
}
.result .container .scroll-box .prize-box .note-box p.note .icon {
				width: 0.8em;
				flex-shrink: 0;
				margin-right: 0.25em;
				margin-top: 0.1em;
}
.result .container .scroll-box .prize-box .note-box p.note .txt {
				color: #272727;
				font-size: 0.7em;
				line-height: 1.43;
}
.result .container .scroll-box .prize-box .btn-box a {
				width: 16.05em;
}
.result .container .scroll-box .link-box {
				position: relative;
				z-index: 1;
}

.scene > .container, .room > .container {
				min-height: 100vh;
				min-height: calc(var(--vh, 1vh) * 100);
				box-sizing: border-box;
				background-size: cover;
				background-position-x: center;
				position: relative;
}
.scene > .container .logo, .room > .container .logo {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
}
.scene > .container .dialog-box, .room > .container .dialog-box {
				width: 20em;
				height: 8.25em;
				position: absolute;
				left: 50%;
				bottom: 2.8em;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				background: url("../images/bg-dia-right.png") no-repeat center/contain;
}
.scene > .container .dialog-box p, .room > .container .dialog-box p {
				color: #151515;
				font-size: 0.9em;
				line-height: normal;
}
.scene > .container .dialog-box p span.highlight, .room > .container .dialog-box p span.highlight {
				color: #0b1267;
				font-size: 1.33em;
				font-weight: 500;
}
.scene > .container .dialog-box a.btn-next, .room > .container .dialog-box a.btn-next {
				width: 2.7em;
				position: absolute;
				bottom: 1.35em;
				right: 1.55em;
}
.scene > .container .dialog-box a.btn-next::before, .room > .container .dialog-box a.btn-next::before {
				content: "";
				width: 250%;
				height: 400%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
}

.scene > .container {
				background-image: var(--bg-scene);
}
.scene > .container .dialog-box a.btn-next {
				width: 2.7em;
				position: absolute;
				bottom: 1.35em;
				right: 1.5em;
}

.room > .container {
				background-image: var(--bg-room);
}
.room > .container #aniMusic {
				position: absolute;
				left: 5%;
				top: 15%;
				width: 80%;
				height: 70%;
}
.room > .container .man-box {
				position: absolute;
				top: 5.5em;
				right: 1.3em;
}
.room > .container .man-box .profile {
				width: 5em;
}
.room > .container .man-box #aniBell {
				position: absolute;
				right: -0.35em;
				bottom: -0.35em;
				width: 2.5em;
				height: 2.5em;
}
.room > .container .dialog-box {
				flex-direction: column;
}
.room > .container .dialog-box .btn-box {
				margin-top: 1em;
				margin-bottom: -3.25em;
}
.room > .container .dialog-box .btn-box a {
				width: 11.75em;
}
/*# sourceMappingURL=main.css.map */