@charset "utf-8";

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700;900&display=swap);

/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
html { -webkit-text-size-adjust: 100%; line-height: 1.15; -moz-tab-size: 4; -o-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: -0.25em; }
sup { top: -0.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],
[type=reset],
[type=submit],
button { -webkit-appearance: button; }
::-moz-focus-inner { border-style: none; padding: 0; }
:-moz-focusring { outline: 1px dotted ButtonText; }
:-moz-ui-invalid { box-shadow: none; }
legend { padding: 0; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
::-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; -webkit-box-sizing: border-box; box-sizing: border-box; }
hr { border-top-width: 1px; }
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; }
[role=button],
button { cursor: pointer; }
:-moz-focusring { outline: auto; }
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%; }
[hidden] { display: none; }
*,
::after,
::before { --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; --tw-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)); --tw-border-opacity: 1; border-color: #e5e7eb; border-color: rgba(229, 231, 235, var(--tw-border-opacity)); }
.pointer-events-none { pointer-events: none; }
.absolute { position: absolute; }
.relative { position: relative; }
.left-1\/2 { left: 50%; }
.bottom-\[-44px\] { bottom: -2.75em; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.bottom-0 { bottom: 0; }
.right-0 { right: 0; }
.top-\[4px\] { top: 0.25em; }
.left-\[4px\] { left: 0.25em; }
.bottom-\[4px\] { bottom: 0.25em; }
.right-\[4px\] { right: 0.25em; }
.z-10 { z-index: 10; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-\[12px\] { margin-bottom: 0.75em; margin-top: 0.75em; }
.mt-\[20px\] { margin-top: 1.25em; }
.box-border { -webkit-box-sizing: border-box; box-sizing: border-box; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.table { display: table; }
.h-\[45px\] { height: 2.8125em; }
.h-full { height: 100%; }
.h-\[53px\] { height: 3.3125em; }
.h-\[60px\] { height: 3.75em; }
.h-0 { height: 0; }
.h-\[30px\] { height: 1.875em; }
.h-\[15px\] { height: 0.9375em; }
.max-h-\[1500px\] { max-height: 93.75em; }
.w-full { width: 100%; }
.w-\[92px\] { width: 5.75em; }
.w-\[297px\] { width: 18.5625em; }
.w-\[30px\] { width: 1.875em; }
.w-\[15px\] { width: 0.9375em; }
.border-collapse { border-collapse: collapse; }
.-translate-x-1\/2 { --tw-translate-x: -50%; -webkit-transform: var(--tw-transform); -ms-transform: var(--tw-transform); transform: var(--tw-transform); }
.list-decimal { list-style-type: decimal; }
.items-center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
.space-y-\[10px\] > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(0.625em*var(--tw-space-y-reverse)); margin-top: calc(0.625em*(1 - var(--tw-space-y-reverse))); }
.overflow-hidden { overflow: hidden; }
.border-\[3px\] { border-width: 0.1875em; }
.border { border-width: 1px; }
.border-t-\[3px\] { border-top-width: 0.1875em; }
.border-l-\[3px\] { border-left-width: 0.1875em; }
.border-r-\[3px\] { border-right-width: 0.1875em; }
.border-b-\[3px\] { border-bottom-width: 0.1875em; }
.border-t-\[2px\] { border-top-width: 2px; }
.border-l-\[2px\] { border-left-width: 2px; }
.border-r-\[2px\] { border-right-width: 2px; }
.border-b-\[2px\] { border-bottom-width: 2px; }
.border-solid { border-style: solid; }
.border-\[\#fff\] { --tw-border-opacity: 1; border-color: #fff; border-color: rgba(255, 255, 255, var(--tw-border-opacity)); }
.bg-\[\#3a2f3e\] { --tw-bg-opacity: 1; background-color: #3a2f3e; background-color: rgba(58, 47, 62, var(--tw-bg-opacity)); }
.bg-\[\#191919\] { --tw-bg-opacity: 1; background-color: #191919; background-color: rgba(25, 25, 25, var(--tw-bg-opacity)); }
.bg-\[\#000\] { --tw-bg-opacity: 1; background-color: #000; background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); }
.bg-contain { background-size: contain; }
.fill-current { fill: currentColor; }
.pt-\[60px\] { padding-top: 3.75em; }
.pb-\[40px\] { padding-bottom: 2.5em; }
.pb-\[80px\] { padding-bottom: 5em; }
.pt-\[40px\] { padding-top: 2.5em; }
.pb-\[56\.25\%\] { padding-bottom: 56.25%; }
.text-center { text-align: center; }
.text-\[15px\] { font-size: 0.9375em; }
.text-\[23px\] { font-size: 1.4375em; }
.text-\[16px\] { font-size: 1em; }
.leading-\[60px\] { line-height: 3.75em; }
.tracking-\[1px\] { letter-spacing: 1px; }
.tracking-\[2px\] { letter-spacing: 2px; }
.text-\[\#fff\] { --tw-text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--tw-text-opacity)); }
.\!text-\[\#fff\] { --tw-text-opacity: 1 !important; color: #fff !important; color: rgba(255, 255, 255, var(--tw-text-opacity)) !important; }
.line-through { text-decoration: line-through; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.transition { -webkit-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -o-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; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

@media (max-width: 639px), (max-width: 999px) and (max-height: 428px) and (orientation: landscape) {
  .m\:top-\[50px\] { top: 3.125em; }
  .m\:bottom-\[-75px\] { bottom: -4.6875em; }
  .m\:mx-\[-30px\] { margin-left: -1.875em; margin-right: -1.875em; }
  .m\:my-\[-15px\] { margin-bottom: -0.9375em; margin-top: -0.9375em; }
  .m\:mb-\[19px\] { margin-bottom: 1.1875em; }
  .m\:mt-\[10px\] { margin-top: 0.625em; }
  .m\:mb-\[25px\] { margin-bottom: 1.5625em; }
  .m\:hidden { display: none; }
  .m\:h-\[674px\] { height: 42.125em; }
  .m\:h-\[120px\] { height: 7.5em; }
  .m\:w-\[464px\] { width: 29em; }
  .m\:w-screen { width: 100vw; }
  .m\:w-\[973px\] { width: 60.8125em; }
  .m\:w-\[1188px\] { width: 74.25em; }
  .m\:w-full { width: 100%; }
  .m\:flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
  .m\:overflow-x-scroll { overflow-x: scroll; }
  .m\:px-\[30px\] { padding-left: 1.875em; padding-right: 1.875em; }
  .m\:py-\[15px\] { padding-bottom: 0.9375em; padding-top: 0.9375em; }
  .m\:pt-\[47px\] { padding-top: 2.9375em; }
  .m\:pb-\[85px\] { padding-bottom: 5.3125em; }
  .m\:pl-\[140px\] { padding-left: 8.75em; }
  .m\:pt-\[80px\] { padding-top: 5em; }
  .m\:pt-\[40px\] { padding-top: 2.5em; }
  .m\:text-\[20px\] { font-size: 1.25em; }
  .m\:text-\[25px\] { font-size: 1.5625em; }
  .m\:text-\[30px\] { font-size: 1.875em; }
}

@media (min-width: 640px) {
  .pt\:absolute { position: absolute; }
  .pt\:left-\[125px\] { left: 7.8125em; }
  .pt\:left-\[435px\] { left: 27.1875em; }
  .pt\:left-\[535px\] { left: 33.4375em; }
  .pt\:top-\[110px\] { top: 6.875em; }
  .pt\:top-\[108px\] { top: 6.75em; }
  .pt\:top-\[215px\] { top: 13.4375em; }
  .pt\:bottom-\[-47px\] { bottom: -2.9375em; }
  .pt\:mx-\[-12\.5px\] { margin-left: -0.78125em; margin-right: -0.78125em; }
  .pt\:mx-\[-13\.5px\] { margin-left: -0.84375em; margin-right: -0.84375em; }
  .pt\:mb-\[27px\] { margin-bottom: 1.6875em; }
  .pt\:flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  .pt\:h-\[293px\] { height: 18.3125em; }
  .pt\:h-\[79px\] { height: 4.9375em; }
  .pt\:w-\[868px\] { width: 54.25em; }
  .pt\:min-w-\[600px\] { min-width: 37.5em; }
  .pt\:justify-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
  .pt\:px-\[80px\] { padding-left: 5em; padding-right: 5em; }
  .pt\:px-\[20px\] { padding-left: 1.25em; padding-right: 1.25em; }
  .pt\:px-\[12\.5px\] { padding-left: 0.78125em; padding-right: 0.78125em; }
  .pt\:px-\[13\.5px\] { padding-left: 0.84375em; padding-right: 0.84375em; }
  .pt\:pt-\[20px\] { padding-top: 1.25em; }
  .pt\:pb-\[60px\] { padding-bottom: 3.75em; }
  .pt\:pl-\[75px\] { padding-left: 4.6875em; }
  .pt\:pl-\[78px\] { padding-left: 4.875em; }
  .pt\:pt-\[40px\] { padding-top: 2.5em; }
  .pt\:text-\[15px\] { font-size: 0.9375em; }
  .pt\:text-\[12px\] { font-size: 0.75em; }
  .pt\:text-\[33px\] { font-size: 2.0625em; }
  .pt\:tracking-\[1px\] { letter-spacing: 1px; }
}

@media (min-width: 1001px) {
  .p\:mx-auto { margin-left: auto; margin-right: auto; }
  .p\:max-w-\[1000px\] { max-width: 62.5em; }
}
:root { --font-family: arial, "微軟正黑體", "Helvetica Neue", helvetica, "新細明體", "蘋果儷黑體", verdana, sans-serif; --line-height: 1.5; --img-url: "../images/img.png"; --color: (wh:#fff, bk:#000, ); }
body,
html { -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; background: #000; font-family: var(--font-family); line-height: var(--line-height); width: 100%; }
a,
button { cursor: pointer; }
figure { margin: 0; padding: 0; }
button { background: none; border: none; font-family: var(--font-family); padding: 0; }
button,
img { display: block; }
img { width: 100%; }
em { font-style: normal; }
a { text-decoration: none; }

@media (min-width: 1001px) { .lBd { font-size: 16px; } }

@media (min-width: 1001px) and (max-width: 1000px) { .lBd { font-size: 1.6vw; } }

@media (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 640px) and (max-width: 1001px) and (min-height: 428px) { .lBd { font-size: 1.6vw; } }

@media (max-width: 639px), (max-width: 999px) and (max-height: 428px) and (orientation: landscape) { .lBd { font-size: 2.5vw; } }
.m-tit::after,
.m-tit::before { --tw-border-opacity: 1; border-color: #fff; border-color: rgba(255, 255, 255, var(--tw-border-opacity)); border-style: solid; content: ""; display: block; height: 1.875em; position: absolute; width: 1.875em; }
.m-tit::before { border-left-width: 0.1875em; border-top-width: 0.1875em; left: 0; top: 0; }
.m-tit::after { border-bottom-width: 0.1875em; border-right-width: 0.1875em; bottom: 0; right: 0; }
.m-btn::after,
.m-btn::before { --tw-border-opacity: 1; border-color: #fff; border-color: rgba(255, 255, 255, var(--tw-border-opacity)); border-style: solid; content: ""; display: block; height: 0.9375em; position: absolute; width: 0.9375em; }
.m-btn::before { border-left-width: 2px; border-top-width: 2px; left: 0.25em; top: 0.25em; }
.m-btn::after { border-bottom-width: 2px; border-right-width: 2px; bottom: 0.25em; right: 0.25em; }
.m-arrow-close { opacity: 0; pointer-events: none; }
.m-arrow-close.is-act { opacity: 1; pointer-events: auto; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }
.m-arrow-open { opacity: 1; }
.m-arrow-open.is-act { opacity: 0; pointer-events: none; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }
.m-cnt { max-height: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.m-cnt.is-act { max-height: 93.75em; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }
body > .wrapper .content { padding-bottom: 0; }

@media (min-width: 640px) { .flow { background: url(../../assets/imgs/flow.png?1e5829f0) no-repeat 50%; background-size: contain; } }

@media (max-width: 639px), (max-width: 999px) and (max-height: 428px) and (orientation: landscape) { .flow { background: url(../../assets/imgs/flow_m.png?175ba377) no-repeat 50%; background-size: contain; } }