html {
	-webkit-text-size-adjust: 100%;
	line-height: 1.15;
	-moz-tab-size: 4;
	tab-size: 4
}
body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
	margin: 0
}
hr {
	color: inherit;
	height: 0
}
abbr[title] {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}
b, strong {
	font-weight: bolder
}
code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
	font-size: 1em
}
small {
	font-size: 80%
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}
sub {
	bottom: -.25em
}
sup {
	top: -.5em
}
table {
	border-color: inherit;
	text-indent: 0
}
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}
button, select {
	text-transform: none
}
[type=button], button {
-webkit-appearance:button
}
::-moz-focus-inner {
border-style:none;
padding:0
}
legend {
	padding: 0
}
progress {
	vertical-align: baseline
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height:auto
}
::-webkit-search-decoration {
-webkit-appearance:none
}
::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit
}
summary {
	display: list-item
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
	margin: 0
}
button {
	background-color: transparent;
	background-image: none
}
fieldset, ol, ul {
	margin: 0;
	padding: 0
}
ol, ul {
	list-style: none
}
html {
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	line-height: 1.5
}
body {
	font-family: inherit;
	line-height: inherit
}
*, :after, :before {
	border: 0 solid;
	box-sizing: border-box
}
hr {
border-top-width:.0625rem
}
img {
	border-style: solid
}
textarea {
	resize: vertical
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:#9ca3af;
opacity:1
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#9ca3af;
opacity:1
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#9ca3af;
opacity:1
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
color:#9ca3af;
opacity:1
}
input::placeholder, textarea::placeholder {
color:#9ca3af;
opacity:1
}
button {
	cursor: pointer
}
table {
	border-collapse: collapse
}
h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit
}
a {
	color: inherit;
	text-decoration: inherit
}
button, input, optgroup, select, textarea {
	color: inherit;
	line-height: inherit;
	padding: 0
}
code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}
audio, canvas, embed, iframe, img, object, svg, video {
	display: block;
	vertical-align: middle
}
img, video {
	height: auto;
	max-width: 100%
}
*, :after, :before {
--tw-border-opacity:1;
	border-color: rgba(229, 231, 235, var(--tw-border-opacity))
}
body, html {
	font-family: Microsoft JhengHei, 微軟正黑體, Microsoft YaHei, Helvetica, sans-serif
}
a:focus, button:focus, input:focus, textarea:focus {
	outline: none
}
button:disabled {
	cursor: default;
	opacity: .5
}
@media (min-width:1001px) {
body, html {
	font-size: 1rem
}
}
@media (min-width:740px) and (max-width:1001px) and (min-height:428px) {
body, html {
	font-size: 1rem
}
}
@media (max-width:739px), (max-width:1000px) and (max-height:428px) and (orientation:landscape) {
body, html {
	font-size: 4.375vw
}
}
.sr-only {
	clip: rect(0,0,0,0);
	border-width: 0;
height:.0625rem;
margin:-.0625rem;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
width:.0625rem
}
.pointer-events-none {
	pointer-events: none
}
.fixed {
	position: fixed
}
.absolute {
	position: absolute
}
.relative {
	position: relative
}
.inset-0 {
	bottom: 0;
	left: 0;
	right: 0;
	top: 0
}
.z-10 {
	z-index: 10
}
.z-20 {
	z-index: 20
}
.mx-auto {
	margin-left: auto;
	margin-right: auto
}
.mt-2 {
margin-top:.5rem
}
.mt-3 {
margin-top:.75rem
}
.mt-4 {
	margin-top: 1rem
}
.mt-5 {
	margin-top: 1.25rem
}
.mt-8 {
	margin-top: 2rem
}
.mt-20 {
	margin-top: 5rem
}
.mb-2 {
margin-bottom:.5rem
}
.mb-3 {
margin-bottom:.75rem
}
.mb-4 {
	margin-bottom: 1rem
}
.mb-5 {
	margin-bottom: 1.25rem
}
.mb-8 {
	margin-bottom: 2rem
}
.block {
	display: block
}
.inline-block {
	display: inline-block
}
.flex {
	display: -webkit-box;
	display: flex
}
.inline-flex {
	display: -webkit-inline-box;
	display: inline-flex
}
.table {
	display: table
}
.h-8 {
	height: 2rem
}
.h-10 {
	height: 2.5rem
}
.h-12 {
	height: 3rem
}
.w-5 {
	width: 1.25rem
}
.w-8 {
	width: 2rem
}
.w-24 {
	width: 6rem
}
.w-32 {
	width: 8rem
}
.w-1\/3 {
	width: 33.333333%
}
.w-full {
	width: 100%
}
.flex-shrink-0 {
	flex-shrink: 0
}
.flex-grow {
	-webkit-box-flex: 1;
	flex-grow: 1
}
.transform {
--tw-translate-x:0;
--tw-translate-y:0;
--tw-rotate:0;
--tw-skew-x:0;
--tw-skew-y:0;
--tw-scale-x:1;
--tw-scale-y:1;
	-webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@-webkit-keyframes spin {
to {
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
@keyframes spin {
to {
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
@-webkit-keyframes ping {
75%, to {
opacity:0;
-webkit-transform:scale(2);
transform:scale(2)
}
}
@keyframes ping {
75%, to {
opacity:0;
-webkit-transform:scale(2);
transform:scale(2)
}
}
@-webkit-keyframes pulse {
50% {
opacity:.5
}
}
@keyframes pulse {
50% {
opacity:.5
}
}
@-webkit-keyframes bounce {
0%, to {
-webkit-animation-timing-function:cubic-bezier(.8, 0, 1, 1);
animation-timing-function:cubic-bezier(.8, 0, 1, 1);
-webkit-transform:translateY(-25%);
transform:translateY(-25%)
}
50% {
-webkit-animation-timing-function:cubic-bezier(0, 0, .2, 1);
animation-timing-function:cubic-bezier(0, 0, .2, 1);
-webkit-transform:none;
transform:none
}
}
@keyframes bounce {
0%, to {
-webkit-animation-timing-function:cubic-bezier(.8, 0, 1, 1);
animation-timing-function:cubic-bezier(.8, 0, 1, 1);
-webkit-transform:translateY(-25%);
transform:translateY(-25%)
}
50% {
-webkit-animation-timing-function:cubic-bezier(0, 0, .2, 1);
animation-timing-function:cubic-bezier(0, 0, .2, 1);
-webkit-transform:none;
transform:none
}
}
.resize {
	resize: both
}
.flex-wrap {
	flex-wrap: wrap
}
.items-center {
	-webkit-box-align: center;
	align-items: center
}
.justify-end {
	-webkit-box-pack: end;
	justify-content: flex-end
}
.justify-center {
	-webkit-box-pack: center;
	justify-content: center
}
.space-x-2>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse:0;
margin-left:calc(0.5rem*(1 - var(--tw-space-x-reverse)));
margin-right:calc(0.5rem*var(--tw-space-x-reverse))
}
.space-x-3>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse:0;
margin-left:calc(0.75rem*(1 - var(--tw-space-x-reverse)));
margin-right:calc(0.75rem*var(--tw-space-x-reverse))
}
.space-y-4>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse:0;
margin-bottom:calc(1rem*var(--tw-space-y-reverse));
margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))
}
.overflow-hidden {
	overflow: hidden
}
.rounded-md {
border-radius:.375rem
}
.border {
border-width:.0625rem
}
.bg-00 {
	background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
}
.bg-00, .bg-ff {
--tw-bg-opacity:1
}
.bg-ff {
	background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}
.bg-f5 {
--tw-bg-opacity:1;
	background-color: rgba(245, 245, 245, var(--tw-bg-opacity))
}
.bg-1db2e5 {
--tw-bg-opacity:1;
	background-color: rgba(29, 178, 229, var(--tw-bg-opacity))
}
.bg-2fcd83 {
--tw-bg-opacity:1;
	background-color: rgba(47, 205, 131, var(--tw-bg-opacity))
}
.bg-f0f8ff {
--tw-bg-opacity:1;
	background-color: rgba(240, 248, 255, var(--tw-bg-opacity))
}
.bg-ce3e3d {
--tw-bg-opacity:1;
	background-color: rgba(206, 62, 61, var(--tw-bg-opacity))
}
.bg-opacity-50 {
--tw-bg-opacity:0.5
}
.p-2 {
padding:.5rem
}
.p-3 {
padding:.75rem
}
.px-2 {
padding-left:.5rem;
padding-right:.5rem
}
.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem
}
.text-center {
	text-align: center
}
.text-12 {
font-size:.75rem
}
.text-14 {
font-size:.875rem
}
.text-16 {
	font-size: 1rem
}
.text-18 {
	font-size: 1.125rem
}
.text-20 {
	font-size: 1.25rem
}
.text-30 {
	font-size: 1.875rem
}
.text-48 {
	font-size: 3rem
}
.font-bold {
	font-weight: 700
}
.text-80 {
--tw-text-opacity:1;
	color: rgba(128, 128, 128, var(--tw-text-opacity))
}
.text-595757 {
--tw-text-opacity:1;
	color: rgba(89, 87, 87, var(--tw-text-opacity))
}
.text-9c {
	color: rgba(156, 156, 156, var(--tw-text-opacity))
}
.text-9c, .text-ff {
--tw-text-opacity:1
}
.text-ff {
	color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.text-ce3e3d {
--tw-text-opacity:1;
	color: rgba(206, 62, 61, var(--tw-text-opacity))
}
.text-c63636 {
--tw-text-opacity:1;
	color: rgba(198, 54, 54, var(--tw-text-opacity))
}
.text-5c5c5c {
--tw-text-opacity:1;
	color: rgba(92, 92, 92, var(--tw-text-opacity))
}
.text-1db2e5 {
--tw-text-opacity:1;
	color: rgba(29, 178, 229, var(--tw-text-opacity))
}
.text-fbcf7c {
--tw-text-opacity:1;
	color: rgba(251, 207, 124, var(--tw-text-opacity))
}
.underline {
	text-decoration: underline
}
.opacity-10 {
	opacity: .1
}
*, :after, :before {
--tw-shadow:0 0 #0000
}
.shadow-sm {
--tw-shadow:0 0.0625rem 0.125rem 0 rgba(0,0,0,0.05);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
*, :after, :before {
--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/ );
--tw-ring-offset-width:0;
--tw-ring-offset-color:#fff;
--tw-ring-color:rgba(59,130,246,0.5);
--tw-ring-offset-shadow:0 0 #0000;
--tw-ring-shadow:0 0 #0000
}
.filter {
--tw-blur:var(--tw-empty,/*!*/ /*!*/ );
--tw-brightness:var(--tw-empty,/*!*/ /*!*/ );
--tw-contrast:var(--tw-empty,/*!*/ /*!*/ );
--tw-grayscale:var(--tw-empty,/*!*/ /*!*/ );
--tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/ );
--tw-invert:var(--tw-empty,/*!*/ /*!*/ );
--tw-saturate:var(--tw-empty,/*!*/ /*!*/ );
--tw-sepia:var(--tw-empty,/*!*/ /*!*/ );
--tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/ );
	-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.drop-shadow {
--tw-drop-shadow:drop-shadow(0 0.0625rem 0.125rem rgba(0,0,0,0.1)) drop-shadow(0 0.0625rem 0.0625rem rgba(0,0,0,0.06))
}
.transition {
	-webkit-transition-duration: .15s;
	transition-duration: .15s;
	-webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
	-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.ease-in-out {
	-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.fade-enter-active {
	-webkit-transition: opacity .6s;
	transition: opacity .6s
}
.fade-enter, .fade-leave-active {
	opacity: 0
}
.img-shadow {
-webkit-filter:drop-shadow(.1875rem .1875rem .3125rem rgba(0,0,0,.3));
filter:drop-shadow(.1875rem .1875rem .3125rem rgba(0,0,0,.3))
}
.loginStep figure {
	height: 1.25rem;
margin-right:.3125rem;
	width: 1.25rem
}
.loginSuccess figure {
	height: 5.4375rem;
	width: 9.375rem
}
.loginSuccessBtn figure {
	width: 12.875rem
}
.formInp {
	border: 0;
border-bottom:.0625rem solid rgba(0,0,0,.1);
	height: 2.5rem;
	margin: 0;
	padding: 0;
	-webkit-transition: border-color .15s ease-in-out;
	transition: border-color .15s ease-in-out;
	width: 100%
}
.formInp:disabled {
	-webkit-text-fill-color: #cdcdcd;
	background-color: transparent;
	color: #cdcdcd;
	opacity: 1
}
.formInp:focus {
border-bottom:.125rem solid #1db2e5
}
.formInp:focus+.formTitle {
	color: #9c9c9c;
font-size:.75rem;
top:-.625rem
}
select.formInp {
	padding-right: 1.25rem
}
input.formInp:checked+div i {
	background: #2396ec;
border:.0625rem solid #2396ec
}
input.formInp:checked+div i:before {
	opacity: 1
}
input.formInp+div i {
border:.0625rem solid #c2c2c2;
border-radius:.3125rem;
	cursor: pointer;
height:.875rem;
margin-right:.3125rem;
margin-top:.125rem;
	position: relative;
	-webkit-transition: all .15s;
	transition: all .15s;
width:.875rem
}
input.formInp+div i:before {
	background-image: url(../../assets/img/common/ico-ticked.png?87f750ff);
	background-repeat: no-repeat;
	background-size: 100% auto;
	content: "";
	height: 100%;
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity .15s;
	transition: opacity .15s;
	width: 100%
}
.formItem {
	position: relative
}
.formTitle {
	color: #595757;
	font-size: 1rem;
	left: 0;
	pointer-events: none;
	position: absolute;
top:.5rem;
	-webkit-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out
}
.formTitle.active {
	color: #9c9c9c;
font-size:.75rem;
top:-.625rem
}
.modal {
border-radius:.3125rem;
	position: relative;
	width: 17.5rem
}
.modal:after, .modal:before {
	background: url(../../assets/img/common/modal-bg.png?777d2863) 50% no-repeat;
	background-size: 100% auto;
	content: "";
	height: 3.125rem;
	position: absolute;
	width: 3.125rem
}
.modal:before {
left:.625rem;
top:.625rem;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1)
}
.modal:after {
right:.625rem;
top:.625rem
}
.modal:after, .modal:before, .modalCnt:after, .modalCnt:before {
	background: url(../../assets/img/common/modal-bg.png?777d2863) 50% no-repeat;
	background-size: 100% auto;
	content: "";
	height: 3.125rem;
	position: absolute;
	width: 3.125rem
}
.modalCnt:before {
bottom:.625rem;
left:.625rem;
	-webkit-transform: scale(-1);
	transform: scale(-1)
}
.modalCnt:after {
bottom:.625rem;
right:.625rem;
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1)
}
.modalCnt {
	overflow: hidden;
padding:2.5rem .625rem 2.5rem 1.25rem
}
.modalFam {
	max-height: 37.5rem;
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 1.25rem;
padding-right:.625rem
}
.modalBtn {
	bottom: -1.5625rem;
	left: 50%;
	margin-left: -1.5625rem;
	position: absolute
}
.modalBtn:before {
	background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.1) 1%, hsla(0,0%,100%,.37) 36%, #fff);
	background-image: linear-gradient(180deg, hsla(0,0%,100%,.1) 1%, hsla(0,0%,100%,.37) 36%, #fff);
	content: "";
	height: 1.875rem;
	left: 50%;
	margin-left: -7.8125rem;
	pointer-events: none;
	position: absolute;
	top: -1.875rem;
	width: 15.625rem
}
.modalClose {
	background-image: -webkit-linear-gradient(312deg, #fbcf7c 2%, #dba14f 71%);
	background-image: linear-gradient(138deg, #fbcf7c 2%, #dba14f 71%);
	border-radius: 50%;
	height: 3.125rem;
	width: 3.125rem
}
.modalClose figure {
	height: 1.5rem;
	width: 1.5rem
}
.modalTerm ul li {
	display: -webkit-box;
	display: flex
}
.modalTerm ul li:before {
	content: "•";
padding-left:.625rem;
	width: 30%
}
@media (max-width:739px), (max-width:1000px) and (max-height:428px) and (orientation:landscape) {
.modalFam {
	max-height: 60vh
}
}
.anim .animFade {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
.anim .indexEnv, .anim .indexEnv:after, .anim .indexEnv:before {
	opacity: 1
}
.anim .indexEnv:before {
-webkit-transform:rotate(15deg) translateX(3.125rem) translateY(-.625rem);
transform:rotate(15deg) translateX(3.125rem) translateY(-.625rem)
}
.anim .indexEnv:after {
-webkit-transform:rotate(-15deg) translateX(-3.125rem) translateY(-.625rem);
transform:rotate(-15deg) translateX(-3.125rem) translateY(-.625rem)
}
.anim .indexHd:after, .anim .indexHd:before {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0)
}
/*.anim .indexStep1:before {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}*/
.anim .indexStep1 .goddess {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
.anim .indexStep1 .walletdog {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
.anim .indexStep1 .fomo {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
.anim .indexStep1 .cloud:after, .anim .indexStep1 .cloud:before, .anim .indexStep1:after, .anim .indexStep2 .cloud:after, .anim .indexStep2 .cloud:before, .anim .indexStep2:after {
	opacity: 1
}
.animFade {
	opacity: 0;
	-webkit-transform: translateY(1.25rem);
	transform: translateY(1.25rem);
	-webkit-transition: all .6s;
	transition: all .6s
}
.index {
	background: url(../../assets/img/common/bg-pattern.png?b54b8b27) 50% repeat;
	min-height: 45.625rem;
	padding-top: 2.625rem
}
.indexHd {
	padding-top: 4.5rem;
	position: relative;
	z-index: 1;
	color: #5c5c5c;
}
.indexHd:after, .indexHd:before {
	content: "";
	opacity: 0;
	pointer-events: none;
	position: absolute;
	-webkit-transition: .6s ease-in .3s;
	transition: .6s ease-in .3s;
	z-index: -1
}
.indexHd:before {
	background: url(../../assets/img/common/tree1.png?7d03758f) 50% no-repeat;
	background-size: 100% auto;
	height: 7.6rem;
	right: 0;
	top: 1rem;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	width: 6.072rem;
}
.indexHd:after {
	background: url(../../assets/img/common/tree2.png?3aa0d450) 50% no-repeat;
	background-size: 100% auto;
	height: 4.125rem;
	left: -1.25rem;
	top: 13.125rem;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	width: 5rem
}
.indexHd figure {
	position: relative;
	width: 15rem
}
.indexHd figure:before {
	background: url(../../assets/img/common/sp.png?16abd8d8) 50% no-repeat;
	background-size: 100% auto;
	content: "";
	height: 2.5rem;
	left: 50%;
	margin-left: -4.0625rem;
	position: absolute;
	top: -2.8125rem;
	width: 8.125rem
}
.indexBd {
	position: relative;
	z-index: 2
}
.indexEnv {
	height: 9.25rem;
	opacity: 0;
	position: relative;
	-webkit-transition: opacity .3s ease-in-out .6s;
	transition: opacity .3s ease-in-out .6s;
	width: 6.0625rem;
	z-index: 1
}
.indexEnv:after, .indexEnv:before {
	background: url(../../assets/img/common/redenvelope.png?826e5ab8) 50% no-repeat;
	background-size: 100% auto;
	bottom: 0;
	content: "";
	height: 8.5625rem;
	left: 0;
	opacity: 0;
	position: absolute;
	-webkit-transform-origin: bottom center;
	transform-origin: bottom center;
	-webkit-transition: all .6s ease-in-out .9s;
	transition: all .6s ease-in-out .9s;
	width: 5.625rem;
	z-index: -1
}
.indexEnv:after, .indexEnv:before {
	-webkit-transform: rotate(0deg) translateX(0) translateY(0);
	transform: rotate(0deg) translateX(0) translateY(0)
}
.indexBtn {
	position: relative;
	z-index: 1
}
.indexBtn figure {
	width: 12.875rem
}
.indexBtn:before {
	background: url(../../assets/img/common/firework.png?dde91230) 50% no-repeat;
	background-size: 100% auto;
	content: "";
	height: 3.75rem;
	margin-bottom: -1.5625rem;
	margin-left: -1.5625rem;
	width: 3.75rem;
	z-index: -1
}
.indexBtn:before, .indexFt {
	bottom: 0;
	left: 0;
	position: absolute
}
.indexFt {
	overflow: hidden;
	padding-top: 6.25rem;
	width: 100%;
	z-index: 1
}
.indexFt:before {
	animation: cloud 8s ease-in-out .3s infinite reverse;
	background: url(../../assets/img/common/fan.png?9ada6da7) 50% no-repeat;
	background-size: 100% auto;
	bottom: 0;
	content: "";
	height: 9.375rem;
	left: 50%;
	margin-left: -12.5rem;
	position: absolute;
	top: 1.25rem;
	width: 25rem;
	z-index: -1
}
.indexFt .deco1, .indexFt .deco2 {
	z-index: -2
}
.indexFt .deco1, .indexFt .deco1:before, .indexFt .deco2, .indexFt .deco2:before {
	background: url(../../assets/img/common/dec.png?e120e3e4) 50% no-repeat;
	background-size: 100% auto;
	height: 6.25rem;
	position: absolute;
	width: 6.25rem
}
.indexFt .deco1:before, .indexFt .deco2:before {
	content: "";
	left: 1.875rem;
	top: 1.875rem
}
.indexFt .deco1 {
	-webkit-animation: cloud 5s ease-in-out .3s infinite;
	animation: cloud 5s ease-in-out .3s infinite;
	left: -1.875rem;
	top: 0;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1)
}
.indexFt .deco2 {
	-webkit-animation: cloud 4s ease-in-out .3s infinite;
	animation: cloud 4s ease-in-out .3s infinite;
	right: -1.875rem;
	top: 0
}
.indexBtnEvent {
	background-image: -webkit-linear-gradient(left, #e45653, #c73736);
	background-image: linear-gradient(90deg, #e45653, #c73736);
	height: 2.5rem;
	position: relative;
	width: 100%
}
.indexBtnEvent:before {
	background-image: -webkit-linear-gradient(left, #fccf7c, #dca24f);
	background-image: linear-gradient(90deg, #fccf7c, #dca24f);
	content: "";
height:.1875rem;
	left: 0;
	position: absolute;
top:-.1875rem;
	width: 100%
}
.indexEnvBtn {
	color: #fff;
	font-family: 'Noto Serif TC', serif;
	font-weight: 700;
	height: 5.8125rem;
	overflow: visible;
	position: relative;
	-webkit-transition: opacity .15s;
	transition: opacity .15s;
	width: 3.75rem
}
/*.indexEnvBtn:before {
	background: url(../../assets/img/common/goddess.png?ebe7c657) 50% no-repeat;
	background-size: 100% auto;
	content: "";
	height: 4.8125rem;
	left: 50%;
	margin-left: -1.5625rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 1.25rem;
	-webkit-transform: rotate(-15deg) transformx(1.875rem);
	transform: rotate(-15deg) transformx(1.875rem);
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	width: 1.875rem;
	z-index: -1
}*/
/*.indexEnvBtn.anim:before {
	animation: goddess2 1s ease-in-out 3s infinite;
}*/
.indexEnvBtn:after {
	-webkit-box-align: center;
	align-items: center;
	background: url(../../assets/img/common/redenvelope2.png?05814c82) 50% no-repeat;
	background-size: 100% auto;
	content: attr(label);
	display: -webkit-box;
	display: flex;
	font-size: 1.25rem;
	font-weight: 700;
	height: 100%;
	-webkit-box-pack: center;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	-webkit-transform:translateZ(.0625rem);
	transform:translateZ(.0625rem);
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	width: 100%;
	z-index: -1
}

.shake {
  animation-name: shake;
}
.indexEnvBtn.active:after {
	-webkit-animation: redenv 1.5s ease-in-out 1s;
	animation: redenv 1.5s ease-in-out 1s
}
.indexEnvBtn.activeChoose {
-webkit-transform:scale(2.5) translateZ(.625rem) rotate(10deg);
transform:scale(2.5) translateZ(.625rem) rotate(10deg);
	-webkit-transition: -webkit-transform .3s ease-in-out;
	transition: -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out;
	transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}
.indexStep1, .indexStep2 {
	position: relative;
	z-index: 1
}
.indexStep1:after, .indexStep2:after {
	-webkit-animation: cloud 5s ease-in-out .3s infinite;
	animation: cloud 5s ease-in-out .3s infinite;
	height: 1.375rem;
	width: 2.5rem;
	z-index: -1
}
.indexStep1 .cloud:after, .indexStep1 .cloud:before, .indexStep1:after, .indexStep2 .cloud:after, .indexStep2 .cloud:before, .indexStep2:after {
	background: url(../../assets/img/common/cloud.png?bbf4286d) 50% no-repeat;
	background-size: 100% auto;
	content: "";
-webkit-filter:drop-shadow(.1875rem .1875rem .3125rem rgba(0,0,0,.3));
filter:drop-shadow(.1875rem .1875rem .3125rem rgba(0,0,0,.3));
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	-webkit-transition: opacity .6s 1s;
	transition: opacity .6s 1s
}
.indexStep1 .cloud:after, .indexStep1 .cloud:before, .indexStep2 .cloud:after, .indexStep2 .cloud:before {
	height: 1.875rem;
	width: 3.375rem;
	z-index: 1
}
.indexStep1 .cloud:before, .indexStep2 .cloud:before {
	animation: cloud 5s ease-in-out .6s infinite reverse
}
.indexStep1 .cloud:after, .indexStep2 .cloud:after {
	-webkit-animation: cloud 5s ease-in-out .9s infinite;
	animation: cloud 5s ease-in-out .9s infinite
}
/*.indexStep1:before {
	background: url(../../assets/img/common/goddess.png?ebe7c657) 50% no-repeat;
	background-size: 100% auto;
	content: "";
	height: 8rem;
	left: 50%;
	margin-left: -1.5625rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: -3.75rem;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	-webkit-transition: .6s ease-in-out 1.2s;
	transition: .6s ease-in-out 1.2s;
	width: 3.125rem;
	z-index: -1
}*/
.indexStep1 .goddess {
	/*height: 8rem;*/
	left: 50%;
	margin-left: -3rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: -4.2rem;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	-webkit-transition: .6s ease-in-out 1.2s;
	transition: .6s ease-in-out 1.2s;
	width: 6rem;
	z-index: -1
}
.indexStep1 .walletdog {
	left: 31%;
	margin-left: -3rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: -1.5rem;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	-webkit-transition: .6s ease-in-out 1.2s;
	transition: .6s ease-in-out 1.2s;
	width: 3.4375rem;
	z-index: -1
}
.indexStep1 .fomo {
	left: 68.75%;
	margin-left: -.5rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: -1.5rem;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	-webkit-transition: .6s ease-in-out 1.2s;
	transition: .6s ease-in-out 1.2s;
	width: 3.4375rem;
	z-index: -1
}


.indexStep1:after {
	margin-left: 3.25rem;
	top: -3.85rem;
}
.indexStep1 .cloud:before {
	margin-left: 5.625rem;
	top: 3.4375rem
}
.indexStep1 .cloud:after {
	margin-left: -8.125rem;
	top: 7.5rem
}
.indexStep2:after {
	margin-left: -10.625rem;
	top: 12.5rem;
	z-index: 1
}
.indexStep2 .cloud:before {
	margin-left: 7.5rem;
top:.625rem
}
.indexStep2 .cloud:after {
margin-left:.625rem;
	top: 20.625rem
}
.indexStep2 .indexEnvBtn.activeChoose .goddess,
.indexStep2 .indexEnvBtn.opacity-10 .goddess {
	display: none;
}
.indexStep2 .d-none {
	display: none;
}
.indexStep2 .goddess {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
	-webkit-transition: .6s ease-in-out .6s;
	transition: .6s ease-in-out .6s;
}
.indexStep2 .goddess img.opacity-10 {
	opacity: 0;
}
.indexStep2 .goddess-1 {
	left: 5%;
	margin-left: -2.8rem;
	top: -58%;
	width: 5.6rem;
	-webkit-transform: translateX(25%) translateY(50%);
	transform: translateX(25%) translateY(50%);
	animation: goddess1 2.5s ease-in-out;
}
.indexStep2 .goddess-2 {
	left: 95%;
	margin-left: -2.5rem;
	top: -57%;
	width: 5rem;
	-webkit-transform: translateX(-25%) translateY(50%);
	transform: translateX(-25%) translateY(50%);
	animation: goddess2 2.5s ease-in-out 0s;
}
/*.anim .indexStep2 .goddess-1 {
	opacity: 1;
	-webkit-transform: translateX(0%) translateY(50%);
	transform: translateX(0%) translateY(50%);
}
.anim .indexStep2 .goddess-2 {
	opacity: 1;
	-webkit-transform: translateX(0%) translateY(50%);
	transform: translateX(0%) translateY(50%);
}*/

.indexStep3 {
	position: relative;
	z-index: 1
}
.indexStep3:after, .indexStep3:before {
	content: "";
	position: absolute;
	z-index: -1
}
.indexStep3:before {
	background: url(../../assets/img/common/bg-radial.png?59c19c80) 50% no-repeat;
	background-size: 100% auto;
	height: 16.875rem;
	left: 0;
	top: 0;
	width: 17.5rem
}
.indexStep3:after {
	background: url(../../assets/img/common/img-snake.png) 50% 0 no-repeat;
	background-size: 100% auto;
	bottom: 0;
	height: 10.625rem;
	left: 50%;
	margin-left: -6.25rem;
	width: 12.5rem;
}
.indexStep3 .text-30 {
	font-family: 'Noto Serif TC', serif;
	font-weight: 700;
}
.indexStep3 .modalCnt {
	padding-bottom: 1.25rem;
	padding-top: 1.25rem
}
.indexStep3 .modalFam {
	padding-bottom: 0
}
.indexAppBtn figure {
	position: relative;
-webkit-transform:translateZ(.0625rem);
transform:translateZ(.0625rem);
	width: 8.75rem;
	z-index: 1
}
.indexSpara {
	background: #fff;
	display: block;
height:.0625rem;
margin:.625rem auto;
	position: relative;
	width: 6.875rem
}
.indexSpara:after, .indexSpara:before {
	background: #fff;
	border-radius: 50%;
	content: "";
height:.25rem;
	position: absolute;
width:.25rem
}
.indexSpara:before {
	left: 0;
top:-.0625rem
}
.indexSpara:after {
	right: 0;
top:-.0625rem
}
@-webkit-keyframes redenv {
	0%, to {
	-webkit-transform:rotate(0deg) translateZ(.0625rem);
	transform:rotate(0deg) translateZ(.0625rem)
	}
	20%, 60% {
	-webkit-transform:rotate(5deg) translateZ(.0625rem);
	transform:rotate(5deg) translateZ(.0625rem)
	}
	40%, 80% {
	-webkit-transform:rotate(-5deg) translateZ(.0625rem);
	transform:rotate(-5deg) translateZ(.0625rem)
	}
}
@keyframes redenv {
	0%, to {
	-webkit-transform:rotate(0deg) translateZ(.0625rem);
	transform:rotate(0deg) translateZ(.0625rem)
	}
	20%, 60% {
	-webkit-transform:rotate(5deg) translateZ(.0625rem);
	transform:rotate(5deg) translateZ(.0625rem)
	}
	40%, 80% {
	-webkit-transform:rotate(-5deg) translateZ(.0625rem);
	transform:rotate(-5deg) translateZ(.0625rem)
	}
}
@-webkit-keyframes god {
	0%, to {
	-webkit-transform:rotate(-15deg) translateX(1.875rem);
	transform:rotate(-15deg) translateX(1.875rem)
	}
	50% {
	-webkit-transform:rotate(-30deg) translateX(0);
	transform:rotate(-30deg) translateX(0)
	}
}
@keyframes god {
	0%, to {
	-webkit-transform:rotate(-15deg) translateX(1.875rem);
	transform:rotate(-15deg) translateX(1.875rem)
	}
	50% {
	-webkit-transform:rotate(-30deg) translateX(0);
	transform:rotate(-30deg) translateX(0)
	}
}
@-webkit-keyframes cloud {
	0%, to {
	-webkit-transform:translateX(.3125rem);
	transform:translateX(.3125rem)
	}
	50% {
	-webkit-transform:translateX(-.3125rem);
	transform:translateX(-.3125rem)
	}
}
@keyframes cloud {
	0%, to {
	-webkit-transform:translateX(.3125rem);
	transform:translateX(.3125rem)
	}
	50% {
	-webkit-transform:translateX(-.3125rem);
	transform:translateX(-.3125rem)
	}
	}
	@media (min-width:740px) and (min-height:428px) {
	.pt\:max-w-320 {
		max-width: 20rem
	}
}

@-webkit-keyframes goddess1 {
	0%, to {
		opacity: 0;
	-webkit-transform: translateX(25%) translateY(50%);
	transform: translateX(25%) translateY(50%);
	}
	25%, 75% {
		opacity: 1;
	-webkit-transform: translateX(0%) translateY(50%);
	transform: translateX(0%) translateY(50%);
	}
	85% {
		opacity: 0;
	-webkit-transform: translateX(25%) translateY(50%);
	transform: translateX(25%) translateY(50%);
	}
}
@keyframes goddess1 {
	0%, to {
		opacity: 0;
	-webkit-transform: translateX(25%) translateY(50%);
	transform: translateX(25%) translateY(50%);
	}
	25%, 75% {
		opacity: 1;
	-webkit-transform: translateX(0%) translateY(50%);
	transform: translateX(0%) translateY(50%);
	}
	85% {
		opacity: 0;
	-webkit-transform: translateX(25%) translateY(50%);
	transform: translateX(25%) translateY(50%);
	}
}

@-webkit-keyframes goddess2 {
	0%, to {
		opacity: 0;
	-webkit-transform: translateX(-25%) translateY(50%);
	transform: translateX(-25%) translateY(50%);
	}
	25%, 75% {
		opacity: 1;
	-webkit-transform: translateX(0%) translateY(50%);
	transform: translateX(0%) translateY(50%);
	}
	85% {
		opacity: 0;
	-webkit-transform: translateX(-25%) translateY(50%);
	transform: translateX(-25%) translateY(50%);
	}
}
@keyframes goddess2 {
	0%, to {
		opacity: 0;
	-webkit-transform: translateX(-25%) translateY(50%);
	transform: translateX(-25%) translateY(50%);
	}
	25%, 75% {
		opacity: 1;
	-webkit-transform: translateX(0%) translateY(50%);
	transform: translateX(0%) translateY(50%);
	}
	85% {
		opacity: 0;
	-webkit-transform: translateX(-25%) translateY(50%);
	transform: translateX(-25%) translateY(50%);
	}
}


.indexEnvBtn .goddess {
	display: none;
}

.indexEnvBtn.anim .goddess {
	display: block;
}

#indexEnvBtn1 .goddess-1,
#indexEnvBtn2 .goddess-1,
#indexEnvBtn3 .goddess-1 {
	display: none;
}

#indexEnvBtn4 .goddess-2,
#indexEnvBtn5 .goddess-2,
#indexEnvBtn6 .goddess-2 {
	display: none;
}

#indexEnvBtn7 .goddess-1,
#indexEnvBtn8 .goddess-1,
#indexEnvBtn9 .goddess-1 {
	display: none;
}

.indexEnvBtn.anim:after {
	-webkit-animation: shake .8s ease-in-out 2.2s;
	animation: shake .8s ease-in-out 2.2s;
}

@keyframes shake {
	0%, to {
	-webkit-transform:rotate(0deg) translateZ(.0625rem);
	transform:rotate(0deg) translateZ(.0625rem)
	}
	20%, 60% {
	-webkit-transform:rotate(5deg) translateZ(.0625rem);
	transform:rotate(5deg) translateZ(.0625rem)
	}
	40%, 80% {
	-webkit-transform:rotate(-5deg) translateZ(.0625rem);
	transform:rotate(-5deg) translateZ(.0625rem)
	}
}


.loginFam button:disabled {
	background-color: #e0e0e0 !important;
	color: #c2c2c2 !important;
	pointer-events: none;
	opacity: 1;
}

.loginFam button:disabled .text-ff {
	color: #c2c2c2 !important;
}


.prompt-modal .main-text {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.prompt-modal .sub-text {
  font-size: 16px;
  margin-bottom: 20px;
}

.prompt-modal img {
	margin: 0 auto 10px;
}

.prompt-modal .btn-primary {
	position: relative;
	cursor: pointer;
	box-shadow: 0;
	padding: 0;
	border: 0;
	transition: background color 0.5s ease;
	width: 100%;
	max-width: 200px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 5px;
	font-weight: 700;
	margin: 0 auto;
	font-size: 18px;
	letter-spacing: .01em;
	display: block;
	text-decoration: none;
	overflow: hidden;
	color: #fff;
	background-color: #1db2e5;
}

.prompt-modal .btn-primary:disabled {
  background-color: #e0e0e0 !important;
  color: #c2c2c2 !important;
  pointer-events: none;
  opacity: 1;
}

.prompt-modal .btn-primary:hover, .prompt-modal .btn-primary:active {
  color: #fff;
  background-color: #78d1f0;
}

.prompt-modal .btn-primary:not(:disabled):not(.disabled):active,
.prompt-modal .btn-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: #18a1d1;
}