@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Roboto:wght@900&family=Noto+Serif+TC:wght@400;500;600&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 aniFade {
				0% {
								opacity: 0.25;
				}
				100% {
								opacity: 1;
				}
}
@keyframes aniFadeIn {
				0% {
								opacity: 0;
				}
				100% {
								opacity: 1;
				}
}
@keyframes aniLoading {
				50% {
								opacity: 0;
				}
				100% {
								opacity: 1;
				}
}
html, body {
				font-size: 100px;
				font-family: "Noto Sans TC", Arial, Helvetica, "微軟正黑體", Microsoft JhengHei, Apple LiGothic, "蘋果儷中黑";
}

#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 .btn-box.blue a {
				background-image: linear-gradient(to bottom, #2a59e2, #002694);
}
#wrapper #main .btn-box.red a {
				background-image: linear-gradient(to bottom, #e61239, #a5001e);
}
#wrapper #main .btn-box a {
				color: #fff;
				border-radius: 0.5em;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
}
#wrapper #main .btn-box a .txt {
				font-size: 1.2em;
				font-weight: 900;
				text-align: center;
				margin: 0 0.5em;
}
#wrapper #main .btn-box a .icon {
				width: 0.86em;
}

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

.loading {
				width: 100%;
				height: calc(var(--vh, 1vh) * 100);
				background-color: #E50039;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99999;
}
.loading .container {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
}
.loading .container .dot {
				width: 0.2em;
				height: 0.2em;
				border-radius: 99999px;
				background-color: #fff;
				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;
}

.fadeAlert-leave-active {
				transition: opacity 0.15s;
}

.fadeAlert-enter-active {
				transition: opacity 0.5s 0.4s;
}

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

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

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

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

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

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

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

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

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

header {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
				max-width: 750px;
				z-index: 100;
}
header .container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 0.19rem;
				box-sizing: border-box;
}
header .container .logo {
				width: 1.25rem;
				transform: translate(-0.05rem, -0.1rem);
}
header .container .btn-info {
				font-size: 0.2rem;
				font-family: "Roboto";
				font-weight: bold;
				letter-spacing: 0.004rem;
				color: #fff;
				border-radius: 999px;
				background-color: #002694;
				width: 1.5em;
				height: 1.5em;
				text-align: center;
				line-height: 1.5em;
				border: solid 1px #fff;
				box-sizing: border-box;
				transform: translateY(-0.07rem);
}

.time-bar .container {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 0.65em;
}
.time-bar .container .clock-box {
				width: 2.5em;
				height: 2.5em;
				border-radius: 9999px;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 0.15em 0 0 #002694;
				border: solid 1px #002694;
				box-sizing: border-box;
				flex-shrink: 0;
				transform: translateX(0.45em);
				z-index: 1;
}
.time-bar .container .clock-box .clock {
				width: 1.55em;
}
.time-bar .container .bar-bg {
				width: 10.1em;
				height: 0.9em;
				background-color: #fff;
				border-radius: 100px;
				box-shadow: 0 0.15em 0 0 #002694;
				border: solid 2px #fff;
				transform: translateX(-0.35em);
				position: relative;
}
.time-bar .container .bar-bg .bar {
				height: 0.7em;
				width: var(--timeLine);
				transition: 0.1s;
				background-color: #219fd9;
				border-radius: 100px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
}
.time-bar .container .bar-bg .bar.warn {
				background-color: #E50039;
}

.level-bar {
				position: relative;
				z-index: 10;
}
.level-bar .container {
				display: flex;
				justify-content: space-between;
				width: 5.5em;
				margin: auto;
				margin-bottom: 1.85em;
}
.level-bar .container .dot {
				width: 0.5em;
				height: 0.5em;
				border-radius: 9999px;
				border: solid 1px #fff;
				background-color: #ffd6de;
				box-sizing: border-box;
				transition: 0.3s;
}
.level-bar .container .dot.active {
				background-color: #002694;
				transition: 0.3s;
}
.level-bar .container .dot:nth-of-type(2) {
				position: relative;
				z-index: 5;
}
.level-bar .container .dot:nth-of-type(2)::before, .level-bar .container .dot:nth-of-type(2)::after {
				content: "";
				width: 1.5em;
				height: 1px;
				background-color: #fff;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				z-index: -2;
}
.level-bar .container .dot:nth-of-type(2)::before {
				left: 0.75em;
}
.level-bar .container .dot:nth-of-type(2)::after {
				right: 0.75em;
}

.tool {
				position: fixed;
				bottom: -0.85em;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
				z-index: 100;
}
.tool .container {
				min-height: 256px;
				background: url("../images/bg-tools.png") no-repeat center/contain;
}
.tool .container .tool-box {
				display: flex;
				justify-content: center;
}
.tool .container .tool-box .item {
				position: relative;
}
.tool .container .tool-box .item::before {
				content: "";
				width: 5.75em;
				height: 5.75em;
				border-radius: 9999px;
				background-color: #a10929;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -1em);
				transition: 0.25s;
}
.tool .container .tool-box .item:nth-of-type(2) {
				margin: 0 0.55em;
}
.tool .container .tool-box .item:nth-of-type(3)::after, .tool .container .tool-box .item:nth-of-type(1)::after {
				content: "";
				width: 1px;
				height: 2em;
				background-color: #fff;
				position: absolute;
				top: 8em;
}
.tool .container .tool-box .item:nth-of-type(3)::after {
				left: -0.3em;
}
.tool .container .tool-box .item:nth-of-type(1)::after {
				right: -0.3em;
}
.tool .container .tool-box .item.focus::before {
				background-color: #FFD667;
				transition: 0.25s;
}
.tool .container .tool-box .item.soda .pic {
				left: 0.35em;
}
.tool .container .tool-box .item .pic {
				width: 6.25em;
				z-index: 1;
				position: relative;
}
.tool .container .tool-box .item .txt {
				width: 4.5em;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 4.1em;
}

.popup {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.85);
				z-index: 999;
}
.popup .container {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
}

.product .container .product-box {
				padding: 2em 3.2em;
				box-sizing: border-box;
				text-align: center;
}
.product .container .product-box .title-box {
				display: inline-block;
				padding: 0.35em 0;
				border-top: dotted 2px #002694;
				border-bottom: dotted 2px #002694;
				margin-bottom: 0.425em;
				position: relative;
				z-index: 10;
}
.product .container .product-box .title-box h2 {
				color: #002694;
				font-size: 1.4em;
				font-weight: 900;
				letter-spacing: 0.02em;
				line-height: normal;
				text-shadow: 0 2px 0 #fff;
}
.product .container .product-box .title-box p {
				color: #002694;
				font-size: 1em;
				font-weight: 500;
				letter-spacing: 0.02em;
				line-height: normal;
}
.product .container .product-box .info-box {
				width: 11.5em;
				margin: auto;
				margin-bottom: 1em;
				display: flex;
				justify-content: center;
				position: relative;
				z-index: 15;
}
.product .container .product-box .info-box p {
				color: #fff;
				font-size: 1em;
				font-weight: 900;
				line-height: 3.4em;
				min-width: 84px;
				top: -0.7em;
				left: 0.1em;
				transform: rotate(-10deg) translate(-0.5em, -0.85em);
				z-index: 1;
}
.product .container .product-box .info-box p::before {
				content: "";
				width: 5.8em;
				height: 3.1em;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: #e61239;
				z-index: -1;
}
.product .container .product-box .info-box h3 {
				color: #e61239;
				font-size: 1em;
				font-weight: bold;
				line-height: normal;
				letter-spacing: 0.02em;
				transform: translateX(0.65em);
}
.product .container .product-box .time-box {
				margin-bottom: 2.175em;
				position: relative;
				z-index: 20;
}
.product .container .product-box .time-box .pic {
				width: 4.8em;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-6em, 2.8em);
				z-index: 1;
}
.product .container .product-box .time-box .time {
				color: #002694;
				font-size: 5em;
				font-weight: 900;
				font-family: "Roboto";
				display: inline-block;
				line-height: 1.73em;
				text-align: center;
				width: 1.73em;
				height: 1.73em;
				background-color: #fff;
				border-radius: 9999px;
				box-shadow: -0.05em 0.05em 0 0 #002694;
				margin-left: 0.74em;
				position: relative;
}
.product .container .product-box .time-box .time::before {
				content: "";
				width: 1.16em;
				height: 0.39em;
				background: url("../images/title-save.png") no-repeat center/contain;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -0.15em);
}
.product .container .product-box .time-box .time::after {
				content: "分鐘";
				color: #fff;
				font-size: 0.16em;
				font-weight: 900;
				text-align: center;
				line-height: 3.375em;
				width: 3.375em;
				height: 3.375em;
				background-color: #002694;
				border-radius: 9999px;
				position: absolute;
				bottom: 0;
				right: 0;
}
.product .container .product-box .slogan {
				width: 11.5em;
				margin: auto;
				margin-bottom: 0.85em;
}
.product .container .product-box .btn-box a {
				width: 9em;
				height: 2.5em;
}

.alert {
				background-color: transparent;
}
.alert .container {
				position: relative;
}
.alert .container::after {
				content: "";
				width: 15em;
				height: 10em;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				box-shadow: 0 0 4em 0 #151415;
				z-index: -1;
}
.alert .container .alert-box {
				padding: 2.8em 3.15em 1.5em 3.15em;
				box-sizing: border-box;
				background: url("../images/bg-alert.png") no-repeat center/contain;
				position: relative;
				z-index: 5;
}
.alert .container .alert-box::before {
				content: "";
				width: 4.2em;
				height: 4.75em;
				background: url("../images/idea.png") no-repeat center/contain;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -2.7em);
}
.alert .container .alert-box p {
				color: #002694;
				font-size: 1em;
				text-align: center;
				font-weight: 500;
				letter-spacing: 0.02em;
				line-height: normal;
				margin-bottom: 1.25em;
}
.alert .container .alert-box .btn-box a {
				width: 9em;
				height: 2.5em;
}

.kitchen > .container, .bathroom > .container, .toilet > .container {
				padding-top: 0.75em;
				box-sizing: border-box;
				height: 100vh;
				height: calc(var(--vh, 1vh) * 100);
				overflow: hidden;
				position: relative;
}
.kitchen > .container .shine, .bathroom > .container .shine, .toilet > .container .shine {
				position: absolute;
				mix-blend-mode: screen;
				animation: aniFade 1s infinite alternate ease-in-out;
}
.kitchen > .container .shine-line, .bathroom > .container .shine-line, .toilet > .container .shine-line {
				width: 16.5em;
				position: absolute;
				top: -0.25em;
				left: 50%;
				transform: translate(-50%, 0%);
				mix-blend-mode: screen;
				opacity: 0;
				animation: aniFadeIn 1s 0.25s forwards;
}
.kitchen > .container .title-level, .bathroom > .container .title-level, .toilet > .container .title-level {
				width: 13.85em;
				margin: auto;
				margin-bottom: 15.45em;
				position: relative;
				z-index: 10;
}

.main {
				background: url("../images/bg-final.png") no-repeat center/cover;
				background-size: 100%;
				background-position-y: top;
				background-color: #520203;
}
.main .container {
				padding-top: 10em;
				box-sizing: border-box;
				min-height: 100vh;
				min-height: calc(var(--vh, 1vh) * 100);
}
.main .container .title {
				width: 15em;
				margin: auto;
				margin-bottom: 1em;
}
.main .container .mom {
				width: 15em;
				margin: auto;
}
.main .container .time-box {
				position: relative;
				top: -1.5em;
				width: 17.35em;
				margin: auto;
				margin-bottom: 1.2em;
}
.main .container .time-box .time {
				color: #002694;
				font-size: 1.6em;
				font-weight: 900;
				font-family: "Roboto";
				letter-spacing: 0.45em;
				line-height: normal;
				position: absolute;
				right: 2.38em;
				bottom: 0.718em;
}
.main .container .info-box {
				position: relative;
				top: -1.5em;
}
.main .container .info-box .slogan {
				width: 11.5em;
				margin: auto;
				margin-bottom: 0.135em;
}
.main .container .info-box p {
				color: #fff;
				font-size: 0.9em;
				font-weight: bold;
				line-height: normal;
				text-align: center;
}
.main .container .btn-box a {
				width: 16em;
				height: 3.5em;
				position: relative;
				top: -0.5em;
}

.game .container .info-box {
				width: 17.5em;
				height: 21.5em;
				background: url("../images/bg-note.png") no-repeat center/contain;
				padding-top: 1.8em;
				box-sizing: border-box;
				text-align: center;
				position: relative;
}
.game .container .info-box .coin {
				position: absolute;
}
.game .container .info-box .coin.coin1 {
				width: 1.1em;
				height: 0.8em;
				right: 1.6em;
				top: -1.1em;
				transform: translateY(-100%);
}
.game .container .info-box .coin.coin2 {
				width: 1.6em;
				left: 0.9em;
				top: 5.25em;
}
.game .container .info-box .red-envelope {
				position: absolute;
				width: 6.7em;
				left: 50%;
				top: 0;
				transform: translate(-50%, -2.25em);
}
.game .container .info-box .title {
				width: 7.95em;
				margin: auto;
				margin-bottom: 2em;
				position: relative;
				z-index: 1;
}
.game .container .info-box h2 {
				color: #ffeead;
				font-size: 1.2em;
				font-weight: 900;
				margin-bottom: 0.2em;
				line-height: normal;
}
.game .container .info-box p {
				color: #ffd6de;
				font-size: 0.9em;
				font-weight: 500;
				line-height: normal;
				letter-spacing: 0.015em;
				margin-bottom: 2.9em;
}
.game .container .info-box p .highlight {
				font-family: "Roboto";
}
.game .container .info-box .btn-box a {
				width: 9em;
				height: 2.5em;
}

.kitchen > .container {
				position: relative;
				background: url("../images/bg-kitchen.png") no-repeat center/cover;
				background-position-y: bottom;
}
.kitchen > .container .shine1 {
				width: 3em;
				top: 50%;
				right: 2em;
				animation-delay: 0.5s;
}
.kitchen > .container .shine2 {
				width: 2em;
				top: 40%;
				left: 2em;
				transform: rotate(50deg);
				animation-delay: 0.25s;
}
.kitchen > .container .shine3 {
				width: 1.5em;
				top: 40%;
				right: 6em;
				transform: rotate(150deg);
				animation-delay: 0.2s;
}
.kitchen > .container .shine4 {
				width: 2em;
				top: 40%;
				left: 2em;
				transform: rotate(50deg);
				animation-delay: 0.25s;
}
.kitchen > .container .shine5 {
				width: 1em;
				top: 60%;
				left: 6em;
				transform: rotate(50deg);
				animation-delay: 0.5s;
}
.kitchen > .container .oil {
				position: absolute;
				transform: scale(0);
				transition: 0.25s;
				opacity: 1;
}
.kitchen > .container .oil.oil1 {
				width: 15em;
				right: -8em;
				top: -7em;
				transform: rotate(-90deg) scale(0);
}
.kitchen > .container .oil.oil1.show {
				transition: 0.25s 0.1s;
				transform: rotate(-90deg) scale(1);
}
.kitchen > .container .oil.oil2 {
				width: 13em;
				right: -7.5em;
				top: 18.8em;
}
.kitchen > .container .oil.oil2.show {
				transition: 0.35s;
				transform: scale(1);
}
.kitchen > .container .oil.oil3 {
				width: 18em;
				top: 19.35em;
				left: -10em;
				transform: rotate(-180deg) scale(0);
}
.kitchen > .container .oil.oil3.show {
				transition: 0.35s;
				transform: rotate(-180deg) scale(1);
}
.kitchen > .container .oil.oil4 {
				width: 9em;
				left: -2em;
				top: 5.65em;
}
.kitchen > .container .oil.oil4.show {
				transition: 0.2s 0.15s;
				transform: scale(1);
}
.kitchen > .container .oil.oil5 {
				width: 2.5em;
				right: 5em;
				top: 17em;
}
.kitchen > .container .oil.oil5.show {
				transition: 0.35s;
				transform: scale(1);
}
.kitchen > .container .oil.oil6 {
				width: 5em;
				right: 5em;
				top: 10em;
}
.kitchen > .container .oil.oil6.show {
				transition: 0.35s 0.1s;
				transform: scale(1);
}
.kitchen > .container .oil.oil7 {
				width: 5em;
				left: 5.85em;
				top: 15.45em;
}
.kitchen > .container .oil.oil7.show {
				transition: 0.5s;
				transform: scale(1);
}
.kitchen > .container .oil.oil8 {
				width: 5em;
				left: 7.85em;
				top: 22.45em;
				transform: scale(0) rotate(180deg);
}
.kitchen > .container .oil.oil8.show {
				transition: 0.5s;
				transform: scale(1) rotate(180deg);
}
.kitchen > .container .oil.oil9 {
				width: 5em;
				left: 0;
				top: 0;
				transform: scale(0) rotate(180deg);
}
.kitchen > .container .oil.oil9.show {
				transition: 0.5s;
				transform: scale(1) rotate(180deg);
}
.kitchen > .container .oil.oil10 {
				width: 5em;
				right: 0;
				top: 5em;
				transform: scale(0) rotate(180deg);
}
.kitchen > .container .oil.oil10.show {
				transition: 0.5s;
				transform: scale(1) rotate(180deg);
}
.kitchen > .container .oil.oil11 {
				width: 5em;
				left: 4em;
				top: 12.5em;
				transform: scale(0) rotate(30deg);
}
.kitchen > .container .oil.oil11.show {
				transition: 0.5s;
				transform: scale(1) rotate(30deg);
}
.kitchen > .container .oil.oil12 {
				width: 2.5em;
				left: 8em;
				top: 20em;
				transform: scale(0) rotate(120deg);
}
.kitchen > .container .oil.oil12.show {
				transition: 0.5s;
				transform: scale(1) rotate(120deg);
}
.kitchen > .container .product .container {
				position: relative;
}
.kitchen > .container .product .container::before {
				content: "";
				width: 7em;
				height: 10.65em;
				position: absolute;
				top: 0;
				left: -0.2em;
				background: url("../images/lantern.png") no-repeat center/contain;
}
.kitchen > .container .product .container .product-box {
				background: url("../images/bg-board-g.png") no-repeat center/contain;
}

.bathroom > .container {
				background: url("../images/bg-bathroom.png") no-repeat center/cover;
				background-position-y: bottom;
}
.bathroom > .container .shine1 {
				width: 3em;
				top: 50%;
				right: 2em;
				animation-delay: 0.5s;
}
.bathroom > .container .shine4 {
				width: 2em;
				top: 40%;
				left: 2em;
				transform: rotate(50deg);
				animation-delay: 0.25s;
}
.bathroom > .container .shine5 {
				width: 1.5em;
				top: 40%;
				right: 6em;
				transform: rotate(150deg);
				animation-delay: 0.2s;
}
.bathroom > .container .shine3 {
				width: 2em;
				top: 40%;
				left: 2em;
				transform: rotate(50deg);
				animation-delay: 0.25s;
}
.bathroom > .container .shine2 {
				width: 1em;
				top: 60%;
				left: 6em;
				transform: rotate(50deg);
				animation-delay: 0.5s;
}
.bathroom > .container .mold {
				position: absolute;
				transform: scale(0);
				transition: 0.25s;
}
.bathroom > .container .mold.mold1 {
				width: 17em;
				right: 0;
				top: 0;
}
.bathroom > .container .mold.mold1.show {
				transition: 0.25s 0.2s;
				transform: scale(1);
}
.bathroom > .container .mold.mold2 {
				width: 12.3em;
				right: 0;
				top: 6.65em;
				transform: rotate(180deg) scale(0);
}
.bathroom > .container .mold.mold2.show {
				transition: 0.25s 0.15s;
				transform: rotate(180deg) scale(1);
}
.bathroom > .container .mold.mold3 {
				width: 11em;
				right: -3.5em;
				top: 16.1em;
}
.bathroom > .container .mold.mold3.show {
				transition: 0.2s 0.2s;
				transform: scale(1);
}
.bathroom > .container .mold.mold4 {
				width: 14.5em;
				left: -1em;
				top: 17.55em;
				transform: rotateY(-180deg) scale(0);
				z-index: 1;
}
.bathroom > .container .mold.mold4.show {
				transition: 0.25s 0.15s;
				transform: rotate(-180deg) scale(1);
}
.bathroom > .container .mold.mold5 {
				width: 14.5em;
				left: -3em;
				top: 5.5em;
}
.bathroom > .container .mold.mold5.show {
				transition: 0.15s 0.15s;
				transform: scale(1);
}
.bathroom > .container .mold.mold6 {
				width: 4.5em;
				left: 8em;
				top: 19.5em;
}
.bathroom > .container .mold.mold6.show {
				transition: 0.15s 0.15s;
				transform: scale(1);
}
.bathroom > .container .mold.mold7 {
				width: 4.5em;
				right: 12em;
				top: 15.5em;
}
.bathroom > .container .mold.mold7.show {
				transition: 0.15s 0.15s;
				transform: scale(1);
}
.bathroom > .container .mold.mold8 {
				width: 2.5em;
				right: 2em;
				top: 15.5em;
}
.bathroom > .container .mold.mold8.show {
				transition: 0.15s 0.15s;
				transform: scale(1);
}
.bathroom > .container .mold.mold9 {
				width: 7.5em;
				left: -3em;
				top: 1.5em;
}
.bathroom > .container .mold.mold9.show {
				transition: 0.15s 0.15s;
				transform: scale(1) rotate(70deg);
}
.bathroom > .container .product .container {
				position: relative;
}
.bathroom > .container .product .container::before {
				content: "";
				width: 5em;
				height: 15em;
				position: absolute;
				top: 0;
				left: -0.9em;
				background: url("../images/firecracker.png") no-repeat center/contain;
}
.bathroom > .container .product .container .product-box {
				background: url("../images/bg-board-b.png") no-repeat center/contain;
}

.toilet > .container {
				background: url("../images/bg-toilet.png") no-repeat center/cover;
				background-position-y: bottom;
}
.toilet > .container .shine5 {
				width: 3em;
				top: 50%;
				right: 2em;
				animation-delay: 0.5s;
}
.toilet > .container .shine4 {
				width: 2em;
				top: 40%;
				left: 2em;
				transform: rotate(50deg);
				animation-delay: 0.25s;
}
.toilet > .container .shine2 {
				width: 1.5em;
				top: 40%;
				right: 6em;
				transform: rotate(150deg);
				animation-delay: 0.2s;
}
.toilet > .container .shine3 {
				width: 2em;
				top: 40%;
				left: 2em;
				transform: rotate(50deg);
				animation-delay: 0.25s;
}
.toilet > .container .shine1 {
				width: 1em;
				top: 60%;
				left: 6em;
				transform: rotate(50deg);
				animation-delay: 0.5s;
}
.toilet > .container .dirty {
				position: absolute;
				mix-blend-mode: screen;
				transform: scale(0);
				transition: 0.25s;
}
.toilet > .container .dirty.dirty1 {
				width: 15em;
				right: -6em;
				top: -5em;
}
.toilet > .container .dirty.dirty1.show {
				transition: 0.2s 0.25s;
				transform: scale(1);
}
.toilet > .container .dirty.dirty2 {
				width: 6em;
				right: -2em;
				top: 12.65em;
}
.toilet > .container .dirty.dirty2.show {
				transition: 0.25s 0.2s;
				transform: scale(1);
}
.toilet > .container .dirty.dirty3 {
				width: 12em;
				left: -1em;
				top: 19.3em;
}
.toilet > .container .dirty.dirty3.show {
				transition: 0.15s 0.15s;
				transform: scale(1);
}
.toilet > .container .dirty.dirty4 {
				width: 15.45em;
				left: -1em;
				top: 8em;
}
.toilet > .container .dirty.dirty4.show {
				transition: 0.25s 0.15s;
				transform: scale(1);
}
.toilet > .container .dirty.dirty5 {
				width: 4em;
				left: 7.8em;
				top: 9em;
}
.toilet > .container .dirty.dirty5.show {
				transition: 0.15s 0.3s;
				transform: scale(1);
}
.toilet > .container .dirty.dirty6 {
				width: 7em;
				left: 2.8em;
				top: -12em;
				transform: scale(0) rotate(50deg);
}
.toilet > .container .dirty.dirty6.show {
				transition: 0.15s 0.3s;
				transform: scale(1) rotate(50deg);
}
.toilet > .container .dirty.dirty7 {
				width: 5em;
				right: 1.8em;
				top: 9em;
}
.toilet > .container .dirty.dirty7.show {
				transition: 0.15s 0.3s;
				transform: scale(1);
}
.toilet > .container .dirty.dirty8 {
				width: 8em;
				left: 7.8em;
				top: 14em;
}
.toilet > .container .dirty.dirty8.show {
				transition: 0.15s 0.3s;
				transform: scale(1);
}
.toilet > .container .dirty.dirty9 {
				width: 7em;
				left: 10.8em;
				top: 19em;
}
.toilet > .container .dirty.dirty9.show {
				transition: 0.15s 0.3s;
				transform: scale(1) rotate(-50deg);
}
.toilet > .container .product .container {
				position: relative;
}
.toilet > .container .product .container::before {
				content: "";
				width: 7em;
				height: 10.65em;
				position: absolute;
				top: 0;
				left: -0.2em;
				background: url("../images/lantern.png") no-repeat center/contain;
}
.toilet > .container .product .container .product-box {
				background: url("../images/bg-board-g.png") no-repeat center/contain;
}

.result > .container {
				padding: 2.5em 0;
				box-sizing: border-box;
				overflow: hidden;
				position: relative;
				background: url("../images/bg-result.png") no-repeat center/contain;
				background-size: 100% 100%;
				min-height: 100vh;
				min-height: calc(var(--vh, 1vh) * 100);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
}
.result > .container::after {
				content: "";
				width: 7em;
				height: 5em;
				position: absolute;
				bottom: -2em;
				left: 50%;
				transform: translateX(-50%);
				background: url("../images/envelope.png") no-repeat center/contain;
}
.result > .container .title-box .slogan {
				width: 11.5em;
				margin: 0 auto;
				margin-bottom: 0.885em;
}
.result > .container .title-box .title {
				width: 7.9em;
				margin: 0 auto;
				margin-bottom: 0.55em;
}
.result > .container .sub-box {
				display: flex;
				justify-content: flex-end;
				width: 16em;
				margin: 0 auto;
				padding: 0.55em 0;
				border-top: dotted 2px #002694;
				border-bottom: dotted 2px #002694;
				margin-bottom: 0.425em;
				position: relative;
}
.result > .container .sub-box::before {
				content: "";
				width: 2.5em;
				height: 2.5em;
				position: absolute;
				right: -1em;
				top: -1em;
				transform: rotateY(-180deg);
				z-index: 1;
				background: url("../images/flower.png") no-repeat center/contain;
}
.result > .container .sub-box .product-box {
				display: flex;
				position: absolute;
				left: -0.25em;
				bottom: -1em;
}
.result > .container .sub-box .product-box .product {
				width: 1.85em;
}
.result > .container .sub-box .time-box {
				display: flex;
				justify-content: center;
				margin-left: auto;
				margin-right: 2.25em;
				position: relative;
}
.result > .container .sub-box .time-box span {
				color: #fff;
				font-size: 2.5em;
				font-weight: 900;
				line-height: 1.36em;
				text-align: center;
				font-family: "Roboto";
				width: 0.92em;
				height: 1.36em;
				border-radius: 0.1em;
				background-color: #002694;
				margin: 0 0.065em;
}
.result > .container .sub-box .time-box p {
				position: absolute;
				color: #002694;
				font-size: 0.8em;
				font-weight: 900;
				line-height: normal;
				bottom: 0em;
				right: -2.75em;
}
.result > .container > p {
				color: #002694;
				font-size: 1em;
				font-weight: bold;
				text-align: center;
				line-height: normal;
				margin-bottom: 1.35em;
}
.result > .container .pic {
				width: 16.25em;
				margin: 0 auto;
				margin-bottom: 1.8em;
				position: relative;
}
.result > .container .pic::before {
				content: "";
				width: 3.25em;
				height: 3.25em;
				position: absolute;
				left: -1em;
				top: -1.35em;
				z-index: 1;
				background: url("../images/flower.png") no-repeat center/contain;
}
.result > .container .pic::after {
				content: "";
				width: 1.5em;
				height: 1.5em;
				position: absolute;
				right: 3.2em;
				bottom: -1em;
				z-index: 1;
				background: url("../images/coin-2.png") no-repeat center/contain;
}
.result > .container .btn-box a {
				width: 14em;
				height: 2.5em;
				position: relative;
}
.result > .container .btn-box a::before {
				content: "";
				width: 1em;
				height: 1em;
				position: absolute;
				top: -0.5em;
				right: 0.45em;
				background: url("../images/coin-1.png") no-repeat center/contain;
				filter: drop-shadow(0 8px 6px rgba(52, 0, 0, 0.5));
}

.info .container {
				display: block;
				background-color: #CAD6F7;
				padding: 2.15em 1.6em;
				box-sizing: border-box;
				overflow-y: scroll;
}
.info .container a.btn-top {
				position: fixed;
				right: 1em;
				bottom: 2em;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 2em;
				height: 2em;
				border-radius: 999px;
				background-color: #e61239;
				background-image: linear-gradient(to bottom, #e61239, #a5001e);
				filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.2));
}
.info .container a.btn-top .icon {
				width: 0.76em;
}
.info .container a.btn-close {
				position: fixed;
				bottom: 2em;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: linear-gradient(to bottom, #e61239, #a5001e);
				width: 7.6em;
				height: 2.6em;
				border-radius: 999px;
				filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.2));
}
.info .container a.btn-close .icon {
				width: 1em;
				margin-right: 0.365em;
}
.info .container a.btn-close .txt {
				color: #fff;
				font-size: 1em;
}
.info .container > .title {
				width: 10.7em;
				margin: auto;
				margin-bottom: 1.5em;
}
.info .container h4 {
				color: #002694;
				font-size: 0.9em;
				font-weight: 500;
				line-height: 1.56;
				margin-bottom: 1.66em;
}
.info .container .item h2 {
				color: #002694;
				font-size: 1.3em;
				font-weight: bold;
				letter-spacing: 0.2em;
				line-height: normal;
				border-top: dotted 2px #002694;
				border-bottom: dotted 2px #002694;
				padding: 0.38em 0 0.5em 0;
				margin-bottom: 1.11em;
				text-shadow: 0 2px 0 #fff;
				text-align: center;
}
.info .container .item h2.ls {
				letter-spacing: normal;
}
.info .container .item {
				margin-bottom: 2.5em;
}
.info .container .item ul.normal {
				color: #7c81bf;
				font-size: 0.9em;
				line-height: 1.44;
				padding-left: 1em;
				list-style: decimal;
				margin-bottom: 0.55em;
}
.info .container .item ul.normal li a {
				display: inline-block;
				color: #7c81bf;
				text-decoration: underline;
}
.info .container .item h3 {
				color: #002694;
				font-size: 0.9em;
				font-weight: 500;
				line-height: 1.33;
				display: flex;
				margin-bottom: 0.55em;
}
.info .container .item p.des {
				color: #7c81bf;
				font-size: 0.9em;
				line-height: 1.44;
				margin-bottom: 0.5em;
}
.info .container .item p.des .small {
				font-size: 0.72em;
}
.info .container .item .info-box .item {
				margin-bottom: 0;
}
.info .container .item .info-box .item.prize ul li {
				margin-bottom: 1em;
}
.info .container .item .info-box span.title {
				color: #fff;
				font-size: 0.9em;
				font-weight: 500;
				line-height: 1.89;
				padding: 0.05em 0.65em;
				background-color: #002694;
				border-radius: 0.5em;
				margin-top: 1.66em;
				margin-bottom: 0.8em;
				display: inline-block;
}
.info .container .item .info-box p.small {
				font-size: 0.65em;
				color: #7c81bf;
				line-height: 1.44;
				margin-bottom: 0.5em;
}
.info .container .item .info-box ul.prize {
				display: flex;
				flex-direction: column;
				list-style: decimal;
				padding-left: 1em;
				color: #2f6686;
}
.info .container .item .info-box ul.prize li:not(:last-of-type) {
				margin-bottom: 1em;
}
.info .container .item .info-box ul.prize p {
				font-size: 0.9em;
				color: #002694;
				line-height: 1.44;
}
.info .container .item .info-box ul.prize span {
				font-size: 0.65em;
				color: #e61239;
				line-height: normal;
}
.info .container .item .info-box ul.prize .pic {
				margin: 1em auto 0 auto;
				padding-right: 1.7em;
}
.info .container .item .info-box ul.prize .pic.envelope {
				width: 6.9em;
}
.info .container .item .info-box ul.prize .pic.products {
				width: 10.5em;
}
/*# sourceMappingURL=main.css.map */