@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Roboto&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;
}

@font-face {
				font-family: "TimesNewRoman";
				src: url(../fonts/TimesNewRoman.ttf);
				font-weight: 300;
}
@keyframes aniLoading {
				50% {
								opacity: 0;
				}
				100% {
								opacity: 1;
				}
}
@keyframes aniFloat {
				100% {
								transform: translateY(15%);
				}
}
html, body {
				font-size: 100px;
				font-family: "Noto Sans TC", Arial, Helvetica, "微軟正黑體", Microsoft JhengHei, Apple LiGothic, "蘋果儷中黑";
				overflow-x: hidden;
}

#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 a.btn-menu, #wrapper a.btn-close, #wrapper a.btn-up {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 0.45rem;
				height: 0.45rem;
				border-radius: 9999px;
				overflow: hidden;
				background: url("../images/bg-btn-circle.png") no-repeat center/contain;
}

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

.loading {
				width: 100%;
				height: 100vh;
				background-color: #f6cfd4;
				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: #FEEBBE;
				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;
}

.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.25s;
}

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

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

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

header {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 999;
}
header .container {
				display: flex;
				justify-content: space-between;
				padding: 0.15rem 0.2rem;
}
header .container a.logo {
				width: 1.49rem;
}
header .container a.btn-menu {
				position: fixed;
				top: 0.15rem;
				right: 0.2rem;
				z-index: 9999;
}
header .container a.btn-menu .icon {
				width: 0.2rem;
}

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

.menu .container {
				padding-bottom: 6.3em;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: url("../images/bg-menu.png") no-repeat center/cover;
				background-position-y: bottom;
}
.menu .container a.btn-close {
				position: fixed;
				top: 0.15rem;
				right: 0.2rem;
}
.menu .container a.btn-close .icon {
				width: 0.2rem;
}
.menu .container .logo {
				width: 7.45em;
				margin-bottom: 1.1em;
}
.menu .container .slogan {
				width: 12.4em;
				margin-bottom: 0.8em;
}
.menu .container .link-box a {
				color: #534026;
				font-size: 1.2em;
				font-weight: bold;
				line-height: 1.7;
				padding: 0.6em 1.1875em 0.6em 0.23em;
				position: relative;
}
.menu .container .link-box a::before {
				content: "";
				height: 0.45em;
				width: 0.79em;
				background: url("../images/ic-top.svg") no-repeat center/contain;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%) rotate(90deg);
}
.menu .container .link-box a:not(:last-of-type) {
				border-bottom: dashed 1px #707070;
}

.generate .container {
				padding-top: 15vh;
				padding-bottom: 1em;
				background: url("../images/bg-generate.png") no-repeat center/cover;
				background-position-y: bottom;
				height: 100vh;
				width: 100%;
				box-sizing: border-box;
}
.generate .container h2 {
				display: flex;
				justify-content: center;
				margin-bottom: 0.75em;
				right: 1em;
				position: relative;
}
.generate .container h2 .title {
				width: 10.6em;
}
.generate .container h2 #aniDot {
				position: absolute;
				right: 2em;
				top: 50%;
				transform: translateY(calc(-50% + 0.7em));
				width: 3.5em;
				height: 3.5em;
}
.generate .container p.txt {
				color: #534026;
				font-weight: bold;
				font-size: 1em;
				line-height: 1.4;
				text-align: center;
				margin-bottom: 0.5em;
}
.generate .container p.txt .highlight {
				color: #d15c9c;
}
.generate .container .warning-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				border-radius: 0.5em;
				padding: 0.45em 1.5em;
				width: 16em;
				margin: auto;
				margin-bottom: 0.75em;
				box-sizing: border-box;
}
.generate .container .warning-box h4 {
				color: #d15c9c;
				font-size: 0.9em;
				font-weight: bold;
				line-height: 1.5;
				margin-bottom: 0.3em;
}
.generate .container .warning-box .notice-box {
				display: flex;
				align-items: center;
				justify-content: center;
}
.generate .container .warning-box .notice-box p:nth-of-type(1) {
				display: flex;
				align-items: center;
				margin-right: 1em;
				position: relative;
}
.generate .container .warning-box .notice-box p:nth-of-type(1)::after {
				content: "";
				width: 1px;
				height: 0.9em;
				background-color: #093c89;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: -0.5em;
}
.generate .container .warning-box .notice-box p:nth-of-type(1) .icon {
				width: 1em;
				margin-right: 0.25em;
}
.generate .container .warning-box .notice-box p:nth-of-type(1) .txt {
				color: #093c89;
				font-size: 0.75em;
				font-weight: bold;
}
.generate .container .warning-box .notice-box p:nth-of-type(2) {
				color: #093c89;
				font-size: 0.65em;
				line-height: 1.23;
}
.generate .container p.note {
				color: #d15c9c;
				font-size: 0.65em;
				text-align: center;
				margin-bottom: 1.64em;
}
.generate .container .btn-box {
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				bottom: 1em;
}
.generate .container .btn-box a.btn-confirm {
				width: 10.15em;
				margin: auto;
}

.result .container {
				padding-top: 4em;
				padding-bottom: 1.5em;
				background: url("../images/bg-result.png") no-repeat center/cover;
				background-position-y: bottom;
				width: 100%;
				box-sizing: border-box;
}
.result .container .result-pic {
				position: relative;
				margin-bottom: 2.35em;
}
.result .container .result-pic .audio-box audio {
				display: none;
}
.result .container .result-pic #aniMusic {
				position: absolute;
				right: 0;
				top: -3em;
				width: 15em;
				height: 15em;
}
.result .container .result-pic .pic {
				width: 12.5em;
				margin: auto;
}
.result .container .result-pic p.name {
				color: #fff;
				font-size: 1.5em;
				font-weight: bold;
				text-shadow: 0 2px 0 #534026;
				line-height: 1.5;
				position: absolute;
				left: 50%;
				bottom: 0.81em;
				transform: translateX(-50%);
}
.result .container .result-pic p.name::before {
				content: "";
				width: 9.6em;
				height: 4.03em;
				position: absolute;
				background: url("../images/bg-name.png") no-repeat center/contain;
				left: 50%;
				top: -0.83em;
				transform: translate(-50%, 0);
				z-index: -1;
}
.result .container .title-box {
				text-align: center;
				margin-bottom: 1em;
}
.result .container .title-box h3 {
				color: #534026;
				font-size: 1em;
				font-weight: 500;
				line-height: 1.45;
				margin-bottom: 0.25em;
				display: inline-block;
				position: relative;
}
.result .container .title-box h3::before, .result .container .title-box h3::after {
				content: "";
				width: 1em;
				height: 1em;
				background: url("../images/ic-star.svg") no-repeat center/contain;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
}
.result .container .title-box h3::before {
				left: -1.35em;
}
.result .container .title-box h3::after {
				right: -1.25em;
}
.result .container .title-box h4 {
				color: #d15c9c;
				font-size: 0.65em;
				font-family: "TimesNewRoman";
				line-height: 1.15;
				margin-bottom: 1.15em;
}
.result .container .title-box p {
				color: #093c89;
				font-size: 0.8em;
				line-height: 1.63;
				position: relative;
				transform: translateY(0%);
				animation: aniFloat infinite alternate 0.5s ease-in;
}
.result .container .title-box p::before, .result .container .title-box p::after {
				content: "";
				width: 0.875em;
				height: 0.75em;
				position: absolute;
				top: 50%;
				transform: translate(-50%, -40%);
				background: url("../images/ic-tri-down.svg") no-repeat center/contain;
}
.result .container .title-box p::before {
				left: 9.5em;
}
.result .container .title-box p::after {
				left: 17.3em;
}
.result .container .lyric-box {
				margin-bottom: 1.5em;
				position: relative;
}
.result .container .lyric-box p {
				color: #534026;
				font-size: 0.9em;
				text-align: center;
				line-height: 1.67;
				height: 6.66em;
				overflow-y: scroll;
}
.result .container p.note {
				color: #d15c9c;
				font-size: 0.65em;
				font-weight: 500;
				text-align: center;
				margin-bottom: 2.15em;
}
.result .container .btn-box {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
}
.result .container .btn-box a {
				width: 9.15em;
}
.result .container .btn-box a.btn-create {
				width: 11em;
}
.result .container .btn-box a.btn-recreate {
				width: 18.05em;
}

.home .container {
				padding-top: 14.8em;
				padding-bottom: 1em;
				background: url("../images/bg-home.png") no-repeat center/cover;
				background-position-y: top;
				height: 100vh;
				width: 100%;
				box-sizing: border-box;
}
.home .container .slogan {
				width: 14.5em;
				margin: auto;
				margin-bottom: 0.5em;
}
.home .container p.title {
				color: #534026;
				font-size: 1em;
				font-weight: bold;
				line-height: 1.4;
				text-align: center;
				margin-bottom: 0.5em;
}
.home .container p.title .highlight {
				color: #d15c9c;
}
.home .container .form-box {
				margin-bottom: 1.7em;
				position: relative;
}
.home .container .form-box .input-box {
				width: 17.5em;
				height: 3em;
				margin: auto;
				margin-bottom: 0.7em;
				background: url("../images/border-form.png") no-repeat center/contain;
}
.home .container .form-box .input-box input {
				color: #534026;
				font-size: 0.9em;
				text-align: center;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0.1em 0.5em;
}
.home .container .form-box .input-box.wish {
				position: relative;
}
.home .container .form-box .input-box.wish::after {
				content: "*也可以透過骰子隨機生成呦";
				color: #d15c9c;
				font-size: 0.65em;
				font-weight: 500;
				line-height: 1.46;
				position: absolute;
				right: 0;
				bottom: -0.45em;
				transform: translateY(100%);
}
.home .container .form-box a.btn-random {
				position: absolute;
				width: 3.25em;
				right: 0.7em;
				bottom: 0.15em;
}
.home .container p.note {
				color: #534026;
				font-size: 0.8em;
				font-weight: bold;
				line-height: 1.5;
				text-align: center;
				padding-left: 1.625em;
				margin-bottom: 1em;
				position: relative;
}
.home .container p.note::before {
				content: "";
				width: 1.25em;
				height: 1.25em;
				border-radius: 9999px;
				border: solid 2px #534026;
				box-sizing: border-box;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-6.8em, -50%);
}
.home .container p.note::after {
				content: "";
				width: 0.375em;
				height: 0.375em;
				border-radius: 9999px;
				background-color: #d15c9c;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-6.35em, -50%);
}
.home .container .btn-box a.btn-generate {
				width: 14em;
				margin: auto;
}

.share .container {
				padding-top: 4.25em;
				padding-bottom: 1em;
				background: url("../images/bg-share.png") no-repeat center/cover;
				background-position-y: bottom;
				width: 100%;
				box-sizing: border-box;
}
.share .container .title {
				width: 16.5em;
				margin: auto;
				margin-bottom: 0.85em;
}
.share .container ul.info-box {
				width: 13em;
				margin: auto;
				margin-bottom: 4.65em;
				transform: translateX(-0.1em);
}
.share .container ul.info-box li {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;
}
.share .container ul.info-box li:not(:last-of-type) {
				border-bottom: 1px dashed #707070;
}
.share .container ul.info-box li .pic {
				width: 4em;
				margin-right: 0.25em;
}
.share .container ul.info-box li p.txt-box {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #534026;
				font-size: 1em;
				line-height: 1.2;
}
.share .container ul.info-box li p.txt-box .highlight {
				color: #d15c9c;
				font-family: Roboto;
				font-size: 1.2em;
				font-weight: 900;
}
.share .container ul.info-box li p.txt-box .bold {
				font-weight: bold;
				margin-right: 0.25em;
}
.share .container ul.info-box li .product {
				position: absolute;
				width: 4.15em;
				top: -0.5em;
				right: 0.25em;
				transform: translateX(100%);
}
.share .container .accumulation-box {
				margin-bottom: 2.5em;
				position: relative;
}
.share .container .accumulation-box::before {
				content: "";
				width: 16.9em;
				height: 9.15em;
				background: url("../images/border-share.png") no-repeat center/contain;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-0.65em, -38%);
}
.share .container .accumulation-box p.count {
				color: #d15c9c;
				font-size: 3em;
				font-family: Roboto;
				font-weight: 500;
				text-align: center;
				line-height: 1.18;
				margin-bottom: 0.83em;
}
.share .container .accumulation-box p.note {
				color: #d15c9c;
				font-size: 0.65em;
				text-align: center;
				font-weight: 500;
				line-height: 1.46;
				position: absolute;
				left: 50%;
				bottom: -2.65em;
				transform: translateX(-50%);
}
.share .container .btn-box {
				position: relative;
				z-index: 1;
}
.share .container .btn-box a.btn-invite {
				width: 14em;
				margin: auto;
}

.info .container {
				padding: 5.25em 1.9em 3em 1.9em;
				background: url("../images/bg-info.png") no-repeat center/100% 36em;
				background-position-y: top;
				background-color: #F4C4CC;
				box-sizing: border-box;
}
.info .container a.btn-up {
				position: fixed;
				right: 1.2em;
				bottom: 2.4em;
}
.info .container .slogan {
				width: 16.4em;
				margin: auto;
				margin-bottom: 1em;
}
.info .container p.info {
				color: #534026;
				font-size: 0.8em;
				line-height: 1.63;
				margin-bottom: 1.875em;
}
.info .container p.info.bold {
				font-weight: bold;
}
.info .container p.info.blue {
				color: #093c89;
				margin-top: -0.7em;
}
.info .container .item {
				margin-bottom: 1.5em;
}
.info .container .item span.highlight {
				color: #093c89;
				font-weight: normal;
}
.info .container .item span.note {
				font-size: 0.75em;
				font-weight: normal;
}
.info .container .item h3 {
				color: #d15c9c;
				font-size: 1.1em;
				font-weight: 500;
				line-height: normal;
				padding-bottom: 0.16em;
				border-bottom: 1px dashed #d15c9c;
				margin-bottom: 0.45em;
}
.info .container .item .sub-item {
				margin-bottom: 0.5em;
}
.info .container .item .sub-item p.sub {
				color: #fff;
				font-size: 0.8em;
				font-weight: bold;
				padding: 0.7em;
				border-radius: 9999px;
				background-color: #d15c9c;
				display: inline-block;
				margin-bottom: 0.625em;
}
.info .container .item p.txt, .info .container .item ul.list, .info .container .item ul.customized {
				color: #534026;
				font-size: 0.8em;
				line-height: 1.63;
}
.info .container .item p.txt {
				margin-bottom: 0.6em;
}
.info .container .item p.txt span.highlight {
				color: #534026;
				display: inline-block;
				text-decoration: underline;
}
.info .container .item ul.list {
				list-style: decimal;
				padding-left: 1.2em;
}
.info .container .item ul.list.bold {
				font-weight: bold;
				margin-bottom: 0.5em;
}
.info .container .item ul.customized.white {
				margin-left: 0.3em;
				width: 21.125em;
				box-sizing: border-box;
				background-color: rgba(255, 255, 255, 0.2);
				padding: 0.5em 0.7em 0.6em 0.65em;
				margin-top: -1.25em;
}
.info .container .item ul.customized.white li span.title {
				width: 1.1em;
				flex-shrink: 0;
}
.info .container .item ul.customized.step {
				margin-bottom: 0.85em;
}
.info .container .item ul.customized.step li {
				flex-direction: column;
}
.info .container .item ul.customized.step li span.title {
				color: #d15c9c;
				font-weight: bold;
}
.info .container .item ul.customized.star {
				margin-left: 1.2em;
				padding-right: 1.3em;
}
.info .container .item ul.customized.star span.title {
				color: #534026;
				font-size: 0.9em;
				margin-right: 0.5em;
}
.info .container .item ul.customized.star span.txt {
				color: #093c89;
}
.info .container .item ul.customized li {
				display: flex;
}
/*# sourceMappingURL=main.css.map */