.loading[data-v-0b130853] { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #ffffff; z-index: 9999; } .loading.notindex[data-v-0b130853] { background: rgba(255, 255, 255, 0.1); } .loading .center[data-v-0b130853] { left: 50%; top: 50%; } .loading .center .ld[data-v-0b130853] { width: 100px; left: -50px; top: -50px; } .loading.ajax[data-v-95a164ba] { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0); z-index: 9999; } .loading.ajax .center[data-v-95a164ba] { left: 50%; top: 50%; } .loading.ajax .center .ld[data-v-95a164ba] { width: 100px; left: -50px; top: -50px; } .nav-pc > div[data-v-351aded0] { cursor: pointer; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --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-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::-ms-backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --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-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --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-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }/* ! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: currentColor; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ tab-size: 4; /* 3 */ font-family: Chakra Petch, Noto Sans TC, Microsoft JhengHei, ui-sans-serif, system-ui; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; } @media (min-width: 375px) { .container { max-width: 375px; } } @media (min-width: 640px) { .container { max-width: 640px; padding-right: 2rem; padding-left: 2rem; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .left-0 { left: 0px; } .right-0 { right: 0px; } .top-0 { top: 0px; } .isolate { isolation: isolate; } .order-1 { order: 1; } .order-10 { order: 10; } .order-11 { order: 11; } .order-12 { order: 12; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-first { order: -9999; } .order-last { order: 9999; } .col-auto { grid-column: auto; } .float-right { float: right; } .float-left { float: left; } .float-none { float: none; } .m-0 { margin: 0px; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 0.75rem; } .m-4 { margin: 1rem; } .m-5 { margin: 1.25rem; } .m-auto { margin: auto; } .mx-0 { margin-left: 0px; margin-right: 0px; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-0 { margin-top: 0px; margin-bottom: 0px; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; } .my-4 { margin-top: 1rem; margin-bottom: 1rem; } .my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; } .my-auto { margin-top: auto; margin-bottom: auto; } .-mb-1 { margin-bottom: -0.25rem; } .-mb-2 { margin-bottom: -0.5rem; } .-mb-3 { margin-bottom: -0.75rem; } .-mt-1 { margin-top: -0.25rem; } .-mt-2 { margin-top: -0.5rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1rem; } .ml-auto { margin-left: auto; } .mr-2 { margin-right: 0.5rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: 2rem; } .mt-auto { margin-top: auto; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .h-1 { height: 0.25rem; } .h-auto { height: auto; } .h-full { height: 100%; } .w-auto { width: auto; } .w-full { width: 100%; } .flex-shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .border-collapse { border-collapse: collapse; } .transform { transform: translate(var(--tw-translate-x), 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)); } .resize { resize: both; } .list-disc { list-style-type: disc; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-nowrap { flex-wrap: nowrap; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .text-wrap { text-wrap: wrap; } .text-nowrap { text-wrap: nowrap; } .rounded { border-radius: 0.25rem; } .border { border-width: 1px; } .border-0 { border-width: 0px; } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } .bg-blue { --tw-bg-opacity: 1; background-color: rgb(64 86 144 / var(--tw-bg-opacity)); } .bg-gray-dark { --tw-bg-opacity: 1; background-color: rgb(51 51 51 / var(--tw-bg-opacity)); } .bg-green-light { --tw-bg-opacity: 1; background-color: rgb(246 255 0 / var(--tw-bg-opacity)); } .bg-orange { --tw-bg-opacity: 1; background-color: rgb(231 188 117 / var(--tw-bg-opacity)); } .bg-red-dark { --tw-bg-opacity: 1; background-color: rgb(76 14 18 / var(--tw-bg-opacity)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .bg-yellow { --tw-bg-opacity: 1; background-color: rgb(244 209 149 / var(--tw-bg-opacity)); } .bg-yellow-light { --tw-bg-opacity: 1; background-color: rgb(251 223 174 / var(--tw-bg-opacity)); } .p-0 { padding: 0px; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .pb-8 { padding-bottom: 2rem; } .pl-1 { padding-left: 0.25rem; } .pl-2 { padding-left: 0.5rem; } .pl-5 { padding-left: 1.25rem; } .pr-1 { padding-right: 0.25rem; } .pr-2 { padding-right: 0.5rem; } .pr-3 { padding-right: 0.75rem; } .pt-3 { padding-top: 0.75rem; } .pt-6 { padding-top: 1.5rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .align-baseline { vertical-align: baseline; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .align-text-top { vertical-align: text-top; } .align-text-bottom { vertical-align: text-bottom; } .font-sans { font-family: Chakra Petch, Noto Sans TC, Microsoft JhengHei, ui-sans-serif, system-ui; } .font-sans-only { font-family: Noto Sans TC, Microsoft JhengHei, ui-sans-serif, system-ui; } .text-2xl { font-size: 1.375rem; } .text-3xl { font-size: 1.5rem; } .text-4xl { font-size: 1.625rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-sm { font-size: .875rem; } .text-xl { font-size: 1.25rem; } .text-xs { font-size: .75rem; } .font-black { font-weight: 900; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .italic { font-style: italic; } .text-cyan { --tw-text-opacity: 1; color: rgb(13 168 252 / var(--tw-text-opacity)); } .text-cyan-dark { --tw-text-opacity: 1; color: rgb(0 155 241 / var(--tw-text-opacity)); } .text-green-light { --tw-text-opacity: 1; color: rgb(246 255 0 / var(--tw-text-opacity)); } .text-red { --tw-text-opacity: 1; color: rgb(216 36 48 / var(--tw-text-opacity)); } .text-red-medium { --tw-text-opacity: 1; color: rgb(169 42 51 / var(--tw-text-opacity)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .text-yellow { --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); } .text-yellow-dark { --tw-text-opacity: 1; color: rgb(255 229 124 / var(--tw-text-opacity)); } .text-yellow-light { --tw-text-opacity: 1; color: rgb(251 223 174 / var(--tw-text-opacity)); } .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline { outline-style: solid; } .blur { --tw-blur: blur(8px); 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 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); 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); } .invert { --tw-invert: invert(100%); 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 { 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); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } /*PARAMETER*/ /*@view_width:100%;;*/ :root { --color: #fff; --bgc: #3e3e3e; --fontSize: 24px; } /*PARAMETER*/ /*@view_width:100%;;*/ :root { --color: #fff; --bgc: #3e3e3e; --fontSize: 24px; } .transparent { background-color: transparent; background: none; } .custom-input { appearance: none; box-shadow: none; border-radius: none; border: none; outline: none; } .custom-input:focus { outline: none; } .test-frame { border: #f00 solid 1px; border: solid #f00 1px; } .cursorp { cursor: pointer; } .inv { display: none; } .text-justify { text-align: justify; } .display-5 { font-size: 2.9rem; } .fright { float: right; } .fixscaleBlur { /* IE 9 */ /* Chrome, Safari, Opera */ transform: translateZ(0); } .hidescrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .hidescrollbar::-webkit-scrollbar { display: none; } .t-justify { text-align: justify; } .t-justify:after { content: ''; display: inline-block; width: 100%; } .setScrollbarStyle { /* width */ /* Handle on hover */ } .setScrollbarStyle::-webkit-scrollbar { width: 5px; } .setScrollbarStyle::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.8); } .setScrollbarStyle::-webkit-scrollbar-thumb { background: gray; border-radius: 2px; } .setScrollbarStyle::-webkit-scrollbar-thumb:hover { background: gray; } .transparent { background-color: transparent; background: none; } .custom-input { appearance: none; box-shadow: none; border-radius: none; border: none; outline: none; } .custom-input:focus { outline: none; } .test-frame { border: #f00 solid 1px; border: solid #f00 1px; } .cursorp { cursor: pointer; } .inv { display: none; } .text-justify { text-align: justify; } .display-5 { font-size: 2.9rem; } .fright { float: right; } .fixscaleBlur { /* IE 9 */ /* Chrome, Safari, Opera */ transform: translateZ(0); } .hidescrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .hidescrollbar::-webkit-scrollbar { display: none; } .t-justify { text-align: justify; } .t-justify:after { content: ''; display: inline-block; width: 100%; } .setScrollbarStyle { /* width */ /* Handle on hover */ } .setScrollbarStyle::-webkit-scrollbar { width: 5px; } .setScrollbarStyle::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.8); } .setScrollbarStyle::-webkit-scrollbar-thumb { background: gray; border-radius: 2px; } .setScrollbarStyle::-webkit-scrollbar-thumb:hover { background: gray; } .heavy { font-weight: 900; } .bolder { font-weight: 700; } .bold { font-weight: 700; } .normal { font-weight: 500; } .thin { font-weight: 300; } .narrow { -webkit-transform: scale(0.9, 1); -moz-transform: scale(0.9, 1); -ms-transform: scale(0.9, 1); -o-transform: scale(0.9, 1); } .large { font-size: 1.1em; } .small { font-size: 0.9em; } .input-inv { -webkit-appearance: none; background: none; outline: none; appearance: none; box-shadow: none; border-radius: none; border: none; } .hover-grad { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+1,ffffff+48,ffffff+100&0+14,1+49,0+84 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0.97) 48%, #ffffff 49%, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1); /* IE6-9 fallback on horizontal gradient */ } .d-inline-block { display: inline-block; } .grad { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1bf89+0,e8ddbf+100 */ background: #d1bf89; background: linear-gradient(to right, #d1bf89 0%, #e8ddbf 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1bf89', endColorstr='#e8ddbf', GradientType=1); } .text-glow { text-shadow: 0px 0px 30px #fff, 0px 0px 10px #fff; } .text-glow-strong { text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; } @keyframes glowing { 0% { opacity: 0.3; } 10% { opacity: 0.4; } 50% { opacity: 1; } 90% { opacity: 0.4; } 100% { opacity: 0.3; } } /* TTTTTTTTTTTTTTTTTTTTTTTRRRRRRRRRRRRRRRRR AAA NNNNNNNN NNNNNNNN SSSSSSSSSSSSSSS IIIIIIIIIITTTTTTTTTTTTTTTTTTTTTTT OOOOOOOOO NNNNNNNN NNNNNNNN T:::::::::::::::::::::TR::::::::::::::::R A:::A N:::::::N N::::::N SS:::::::::::::::SI::::::::IT:::::::::::::::::::::T OO:::::::::OO N:::::::N N::::::N T:::::::::::::::::::::TR::::::RRRRRR:::::R A:::::A N::::::::N N::::::NS:::::SSSSSS::::::SI::::::::IT:::::::::::::::::::::T OO:::::::::::::OO N::::::::N N::::::N T:::::TT:::::::TT:::::TRR:::::R R:::::R A:::::::A N:::::::::N N::::::NS:::::S SSSSSSSII::::::IIT:::::TT:::::::TT:::::TO:::::::OOO:::::::ON:::::::::N N::::::N TTTTTT T:::::T TTTTTT R::::R R:::::R A:::::::::A N::::::::::N N::::::NS:::::S I::::I TTTTTT T:::::T TTTTTTO::::::O O::::::ON::::::::::N N::::::N T:::::T R::::R R:::::R A:::::A:::::A N:::::::::::N N::::::NS:::::S I::::I T:::::T O:::::O O:::::ON:::::::::::N N::::::N T:::::T R::::RRRRRR:::::R A:::::A A:::::A N:::::::N::::N N::::::N S::::SSSS I::::I T:::::T O:::::O O:::::ON:::::::N::::N N::::::N T:::::T R:::::::::::::RR A:::::A A:::::A N::::::N N::::N N::::::N SS::::::SSSSS I::::I T:::::T O:::::O O:::::ON::::::N N::::N N::::::N T:::::T R::::RRRRRR:::::R A:::::A A:::::A N::::::N N::::N:::::::N SSS::::::::SS I::::I T:::::T O:::::O O:::::ON::::::N N::::N:::::::N T:::::T R::::R R:::::R A:::::AAAAAAAAA:::::A N::::::N N:::::::::::N SSSSSS::::S I::::I T:::::T O:::::O O:::::ON::::::N N:::::::::::N T:::::T R::::R R:::::R A:::::::::::::::::::::A N::::::N N::::::::::N S:::::S I::::I T:::::T O:::::O O:::::ON::::::N N::::::::::N T:::::T R::::R R:::::R A:::::AAAAAAAAAAAAA:::::A N::::::N N:::::::::N S:::::S I::::I T:::::T O::::::O O::::::ON::::::N N:::::::::N TT:::::::TT RR:::::R R:::::R A:::::A A:::::A N::::::N N::::::::NSSSSSSS S:::::SII::::::II TT:::::::TT O:::::::OOO:::::::ON::::::N N::::::::N T:::::::::T R::::::R R:::::R A:::::A A:::::A N::::::N N:::::::NS::::::SSSSSS:::::SI::::::::I T:::::::::T OO:::::::::::::OO N::::::N N:::::::N T:::::::::T R::::::R R:::::R A:::::A A:::::A N::::::N N::::::NS:::::::::::::::SS I::::::::I T:::::::::T OO:::::::::OO N::::::N N::::::N TTTTTTTTTTT RRRRRRRR RRRRRRRAAAAAAA AAAAAAANNNNNNNN NNNNNNN SSSSSSSSSSSSSSS IIIIIIIIII TTTTTTTTTTT OOOOOOOOO NNNNNNNN NNNNNNN */ .list-enter-active, .list-leave-active { transition: all 0.3s ease-out; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } .slide-fade-enter-active { transition: all 0.3s ease; } .slide-fade-leave-active { transition: all 0.2s; } .slide-fade-enter, .slide-fade-leave-to { transform: translateY(30px); opacity: 0; } /* BBBBBBBBBBBBBBBBB AAA SSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEE B::::::::::::::::B A:::A SS:::::::::::::::SE::::::::::::::::::::E B::::::BBBBBB:::::B A:::::A S:::::SSSSSS::::::SE::::::::::::::::::::E BB:::::B B:::::B A:::::::A S:::::S SSSSSSSEE::::::EEEEEEEEE::::E B::::B B:::::B A:::::::::A S:::::S E:::::E EEEEEE B::::B B:::::B A:::::A:::::A S:::::S E:::::E B::::BBBBBB:::::B A:::::A A:::::A S::::SSSS E::::::EEEEEEEEEE B:::::::::::::BB A:::::A A:::::A SS::::::SSSSS E:::::::::::::::E B::::BBBBBB:::::B A:::::A A:::::A SSS::::::::SS E:::::::::::::::E B::::B B:::::B A:::::AAAAAAAAA:::::A SSSSSS::::S E::::::EEEEEEEEEE B::::B B:::::B A:::::::::::::::::::::A S:::::S E:::::E B::::B B:::::B A:::::AAAAAAAAAAAAA:::::A S:::::S E:::::E EEEEEE BB:::::BBBBBB::::::BA:::::A A:::::A SSSSSSS S:::::SEE::::::EEEEEEEE:::::E B:::::::::::::::::BA:::::A A:::::A S::::::SSSSSS:::::SE::::::::::::::::::::E B::::::::::::::::BA:::::A A:::::AS:::::::::::::::SS E::::::::::::::::::::E BBBBBBBBBBBBBBBBBAAAAAAA AAAAAAASSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEE */ html, body { position: relative; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); font-family: Chakra Petch, Noto Sans TC, Microsoft JhengHei, ui-sans-serif, system-ui; overflow: hidden; background: url(./../../img/090afc822f039330f081.jpg); background-repeat: repeat; } html .btm-deco, body .btm-deco, html .top-deco, body .top-deco { position: fixed; left: 0px; width: 100%; height: 12vh; background: url(./../../img/1070f1267513d6ae6283.png) 0 0 / auto 100% repeat-x; } html .top-deco, body .top-deco { top: 0px; } html .btm-deco, body .btm-deco { bottom: 0px; -webkit-transform: scale(1, -1); -moz-transform: scale(1, -1); -ms-transform: scale(1, -1); -o-transform: scale(1, -1); } body:before { content: ''; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); } body > .mask { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background: url(./../../img/090afc822f039330f081.jpg); -webkit-mask-image: url(./../../img/fc966d3095f50a434eea.png); mask-image: url(./../../img/fc966d3095f50a434eea.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 10%; mask-position: 50% 10%; -webkit-mask-size: 220vw; mask-size: 220vw; } @media (min-width: 640px) { body > .mask { -webkit-mask-size: 1408px; mask-size: 1408px; } } a:link, a:hover, a:active, a:visited, a:focus { text-decoration-line: underline; } * { -webkit-tap-highlight-color: transparent; } h1 { font-size: 1.875rem; } @media (min-width: 640px) { h1 { font-size: 1.625rem; } } h2 { font-size: 1.5rem; font-weight: 700; } @media (min-width: 640px) { h2 { font-size: 1.5rem; } } h3 { font-size: 1.375rem; font-weight: 700; } h4 { font-size: 1.25rem; font-weight: 700; } h5 { font-size: 1rem; font-weight: 700; } @media (min-width: 640px) { h5 { font-size: 1.125rem; font-weight: 700; } } img { /* IE 9 */ /* Chrome, Safari, Opera */ /* IE 9 */ /* Chrome, Safari, Opera */ transform: translateZ(0); } ul { list-style-type: disc; padding-left: 1.25rem; } input { outline: none; border: none; background-image: none; background-color: transparent; background: rgba(0, 0, 0, 0.4); border-radius: 6px; } .preload { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -1px; top: -1px; } .hidding { position: absolute; opacity: 0; } .btn-default { position: relative; cursor: pointer; --tw-bg-opacity: 1; background-color: rgb(231 188 117 / var(--tw-bg-opacity)); padding: 0.25rem; padding-left: 1rem; padding-right: 1rem; min-width: 100px; border-radius: 20px; box-shadow: 0 0px 6px 3px rgba(0, 0, 0, 0.2); } .btn-default p { position: relative; text-align: center; font-size: 1.25rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(169 42 51 / var(--tw-text-opacity)); } .btn-default.btn-blue { background: #3f558f; } .btn-default.btn-blue p { --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); } button { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 4px; } .form-checkcheckbox { position: relative; width: 100%; font-size: .75rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 640px) { .form-checkcheckbox { font-size: 14px; } } .form-checkcheckbox [type="checkbox"]:checked, .form-checkcheckbox [type="checkbox"]:not(:checked) { position: absolute; left: -9999px; } .form-checkcheckbox [type="checkbox"]:checked + label, .form-checkcheckbox [type="checkbox"]:not(:checked) + label { position: relative; padding-left: calc(26px); padding-top: 0px; cursor: pointer; display: inline-block; text-align: left; } @media (min-width: 640px) { .form-checkcheckbox [type="checkbox"]:checked + label, .form-checkcheckbox [type="checkbox"]:not(:checked) + label { font-size: 14px; } } .form-checkcheckbox [type="checkbox"]:checked + label:before, .form-checkcheckbox [type="checkbox"]:not(:checked) + label:before { content: ''; --bg-opacity: 1; background-color: #e7e7e7; background-color: rgba(231, 231, 231, var(--bg-opacity)); position: absolute; width: 20px; height: 20px; left: 0; top: 3px; border-radius: 3px; } .form-checkcheckbox [type="checkbox"]:checked + label:after, .form-checkcheckbox [type="checkbox"]:not(:checked) + label:after { content: ''; width: 12px; height: 12px; position: absolute; top: 7px; left: 4px; --bg-opacity: 1; --tw-bg-opacity: 1; background-color: rgb(169 42 51 / var(--tw-bg-opacity)); transition: all 0.01s ease; border-radius: 3px; } .form-checkcheckbox [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .form-checkcheckbox [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } .form-checkcheckbox [type="checkbox"]:disabled:checked + label:before, .form-checkcheckbox [type="checkbox"]:disabled:not(:checked) + label:before { border-color: #ccc; background-color: #eee; } /* CCCCCCCCCCCCC OOOOOOOOO MMMMMMMM MMMMMMMMPPPPPPPPPPPPPPPPP OOOOOOOOO NNNNNNNN NNNNNNNNEEEEEEEEEEEEEEEEEEEEEENNNNNNNN NNNNNNNNTTTTTTTTTTTTTTTTTTTTTTT CCC::::::::::::C OO:::::::::OO M:::::::M M:::::::MP::::::::::::::::P OO:::::::::OO N:::::::N N::::::NE::::::::::::::::::::EN:::::::N N::::::NT:::::::::::::::::::::T CC:::::::::::::::C OO:::::::::::::OO M::::::::M M::::::::MP::::::PPPPPP:::::P OO:::::::::::::OO N::::::::N N::::::NE::::::::::::::::::::EN::::::::N N::::::NT:::::::::::::::::::::T C:::::CCCCCCCC::::CO:::::::OOO:::::::OM:::::::::M M:::::::::MPP:::::P P:::::PO:::::::OOO:::::::ON:::::::::N N::::::NEE::::::EEEEEEEEE::::EN:::::::::N N::::::NT:::::TT:::::::TT:::::T C:::::C CCCCCCO::::::O O::::::OM::::::::::M M::::::::::M P::::P P:::::PO::::::O O::::::ON::::::::::N N::::::N E:::::E EEEEEEN::::::::::N N::::::NTTTTTT T:::::T TTTTTT C:::::C O:::::O O:::::OM:::::::::::M M:::::::::::M P::::P P:::::PO:::::O O:::::ON:::::::::::N N::::::N E:::::E N:::::::::::N N::::::N T:::::T C:::::C O:::::O O:::::OM:::::::M::::M M::::M:::::::M P::::PPPPPP:::::P O:::::O O:::::ON:::::::N::::N N::::::N E::::::EEEEEEEEEE N:::::::N::::N N::::::N T:::::T C:::::C O:::::O O:::::OM::::::M M::::M M::::M M::::::M P:::::::::::::PP O:::::O O:::::ON::::::N N::::N N::::::N E:::::::::::::::E N::::::N N::::N N::::::N T:::::T C:::::C O:::::O O:::::OM::::::M M::::M::::M M::::::M P::::PPPPPPPPP O:::::O O:::::ON::::::N N::::N:::::::N E:::::::::::::::E N::::::N N::::N:::::::N T:::::T C:::::C O:::::O O:::::OM::::::M M:::::::M M::::::M P::::P O:::::O O:::::ON::::::N N:::::::::::N E::::::EEEEEEEEEE N::::::N N:::::::::::N T:::::T C:::::C O:::::O O:::::OM::::::M M:::::M M::::::M P::::P O:::::O O:::::ON::::::N N::::::::::N E:::::E N::::::N N::::::::::N T:::::T C:::::C CCCCCCO::::::O O::::::OM::::::M MMMMM M::::::M P::::P O::::::O O::::::ON::::::N N:::::::::N E:::::E EEEEEEN::::::N N:::::::::N T:::::T C:::::CCCCCCCC::::CO:::::::OOO:::::::OM::::::M M::::::MPP::::::PP O:::::::OOO:::::::ON::::::N N::::::::NEE::::::EEEEEEEE:::::EN::::::N N::::::::N TT:::::::TT CC:::::::::::::::C OO:::::::::::::OO M::::::M M::::::MP::::::::P OO:::::::::::::OO N::::::N N:::::::NE::::::::::::::::::::EN::::::N N:::::::N T:::::::::T CCC::::::::::::C OO:::::::::OO M::::::M M::::::MP::::::::P OO:::::::::OO N::::::N N::::::NE::::::::::::::::::::EN::::::N N::::::N T:::::::::T CCCCCCCCCCCCC OOOOOOOOO MMMMMMMM MMMMMMMMPPPPPPPPPP OOOOOOOOO NNNNNNNN NNNNNNNEEEEEEEEEEEEEEEEEEEEEENNNNNNNN NNNNNNN TTTTTTTTTTT */ #swal2-content { font-size: 1.125rem; font-weight: 500; } button.swal2-styled.swal2-confirm { --tw-bg-opacity: 1; background-color: rgb(169 42 51 / var(--tw-bg-opacity)); font-size: 1.125rem; font-weight: 700; } button.swal2-styled.swal2-confirm:focus { box-shadow: none; } .swal-button:focus { box-shadow: none; } .pop .swiper-container-vertical > .swiper-scrollbar { position: absolute; width: 2px; height: calc(100% - 40px); right: 1px; background: rgba(0, 0, 0, 0.3); } .pop .swiper-scrollbar-drag { width: 4px; left: calc(50% - 2px); --tw-bg-opacity: 1; background-color: rgb(231 188 117 / var(--tw-bg-opacity)); } /* NAV */ nav.navbar { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; overflow: hidden; z-index: 999; -webkit-transition: all 0.1s 0s ease-in; -moz-transition: all 0.1s 0s ease-in; -ms-transition: all 0.1s 0s ease-in; -o-transition: all 0.1s 0s ease-in; } nav.navbar.disable { height: 60px; -webkit-transition: all 0.1s 0.2s ease-in; -moz-transition: all 0.1s 0.2s ease-in; -ms-transition: all 0.1s 0.2s ease-in; -o-transition: all 0.1s 0.2s ease-in; } nav.navbar .inner { position: absolute; left: 0px; top: 0px; width: 100%; overflow: hidden; height: calc(100%); -webkit-transition: opacity 0.2s 0.1s ease-in; -moz-transition: opacity 0.2s 0.1s ease-in; -ms-transition: opacity 0.2s 0.1s ease-in; -o-transition: opacity 0.2s 0.1s ease-in; opacity: 1; background: rgba(0, 0, 0, 0.25); } nav.navbar .inner.disable { left: 100%; opacity: 0; -webkit-transition: opacity 0.2s 0s ease-in; -moz-transition: opacity 0.2s 0s ease-in; -ms-transition: opacity 0.2s 0s ease-in; -o-transition: opacity 0.2s 0s ease-in; } nav.navbar .inner .inner-wrapper { position: absolute; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding-top: 1rem; padding-bottom: 1rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 10px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; right: 25px; top: 25px; } @media (min-width: 640px) { nav.navbar .inner .inner-wrapper { right: calc(50% - 0.5 * 640px + 25px); } } nav.navbar .inner a { position: relative; padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: right; font-size: 1rem; font-weight: 500; color: rgb(255 255 255 / var(--tw-text-opacity)); --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); text-decoration-line: none; display: block; min-width: 120px; } @media (min-width: 640px) { nav.navbar .inner a { font-size: 1.125rem; } } nav.navbar .inner a.btn-logout:after { content: ''; position: absolute; --tw-bg-opacity: 1; background-color: rgb(244 209 149 / var(--tw-bg-opacity)); width: calc(100% - 30px); height: 1px; left: 15px; top: 1px; opacity: 0.5; } nav.navbar .nav-toggle { right: 0px; top: 0px; cursor: pointer; width: 60px; height: 50px; } @media (min-width: 640px) { nav.navbar .nav-toggle { right: calc(50% - 0.5 * 640px); } } nav.navbar .nav-toggle > * { position: absolute; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); width: calc(100% - 24px); height: 2px; right: 12px; border-radius: 2px; top: calc(33.3% - 1px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1); } nav.navbar .nav-toggle > *:nth-child(2) { top: calc(50% - 1px); width: calc(100% - 29px); } nav.navbar .nav-toggle > *:last-child { top: calc(66.6% - 1px); width: calc(100% - 34px); } nav.navbar .nav-toggle:before { content: ''; position: absolute; --tw-bg-opacity: 1; background-color: rgb(231 188 117 / var(--tw-bg-opacity)); width: 30px; height: 30px; left: calc(50% - 15px); top: calc(50% - 15px + 2px); border-radius: 50%; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } nav.navbar .nav-toggle.expand > * { --tw-bg-opacity: 1; background-color: rgb(216 36 48 / var(--tw-bg-opacity)); width: calc(70% - 24px); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); top: calc(50% - 1px + 2px); left: calc(15% + 12px); } nav.navbar .nav-toggle.expand > *:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } nav.navbar .nav-toggle.expand:before { opacity: 1; } /* MMMMMMMM MMMMMMMM AAA IIIIIIIIIINNNNNNNN NNNNNNNN M:::::::M M:::::::M A:::A I::::::::IN:::::::N N::::::N M::::::::M M::::::::M A:::::A I::::::::IN::::::::N N::::::N M:::::::::M M:::::::::M A:::::::A II::::::IIN:::::::::N N::::::N M::::::::::M M::::::::::M A:::::::::A I::::I N::::::::::N N::::::N M:::::::::::M M:::::::::::M A:::::A:::::A I::::I N:::::::::::N N::::::N M:::::::M::::M M::::M:::::::M A:::::A A:::::A I::::I N:::::::N::::N N::::::N M::::::M M::::M M::::M M::::::M A:::::A A:::::A I::::I N::::::N N::::N N::::::N M::::::M M::::M::::M M::::::M A:::::A A:::::A I::::I N::::::N N::::N:::::::N M::::::M M:::::::M M::::::M A:::::AAAAAAAAA:::::A I::::I N::::::N N:::::::::::N M::::::M M:::::M M::::::M A:::::::::::::::::::::A I::::I N::::::N N::::::::::N M::::::M MMMMM M::::::M A:::::AAAAAAAAAAAAA:::::A I::::I N::::::N N:::::::::N M::::::M M::::::M A:::::A A:::::A II::::::IIN::::::N N::::::::N M::::::M M::::::M A:::::A A:::::A I::::::::IN::::::N N:::::::N M::::::M M::::::M A:::::A A:::::A I::::::::IN::::::N N::::::N MMMMMMMM MMMMMMMMAAAAAAA AAAAAAAIIIIIIIIIINNNNNNNN NNNNNNN */ .app { position: fixed; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; height: 100%; width: 100%; overflow: hidden; } .app_c { width: 100%; height: 100%; } .app_c main { width: 100%; height: 100%; overflow: hidden; } .app_c main .view { width: 100%; height: 100%; overflow: hidden; } .pop { position: fixed; left: 0px; top: 0px; display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; background: rgba(0, 0, 0, 0.5); } .pop .box { position: relative; width: calc(100% - 80px); isolation: isolate; -webkit-transform: scale(0.85, 0.85); -moz-transform: scale(0.85, 0.85); -ms-transform: scale(0.85, 0.85); -o-transform: scale(0.85, 0.85); opacity: 0; -webkit-transition: all 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @media (min-width: 640px) { .pop .box { width: calc(640px - 120px); } } .pop .box .bg- { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; border-radius: 8px; background: url(./../../img/090afc822f039330f081.jpg) 50% 50% / auto repeat; } .pop .box .bg-:before { position: absolute; content: ''; border: 2px solid #f4d195; border: solid 2px #f4d195; border-radius: 8px; width: calc(100% - 12px); height: calc(100% - 12px); left: 6px; top: 6px; opacity: 0.8; } .pop .box-inner { position: relative; height: 100%; width: 100%; } .pop .box-inner .tit { position: relative; margin-top: 1.5rem; text-align: center; font-size: 1.25rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); line-height: 1.5rem; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); } .pop .box-inner .tit:before, .pop .box-inner .tit:after { content: ''; position: absolute; --tw-bg-opacity: 1; background-color: rgb(244 209 149 / var(--tw-bg-opacity)); width: 6px; height: 6px; top: calc(50% - 3px); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .pop .box-inner .tit:before { left: -20px; } .pop .box-inner .tit:after { right: -20px; } .pop .box-inner h3 { position: relative; margin-top: 1.5rem; text-align: center; font-size: 1.25rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); line-height: 1.5rem; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); } .pop .box.active { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); } .pop .btns { position: relative; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-around; width: calc(100% - 0px); } .pop .btns > * { position: relative; width: 118px; opacity: 0; } .pop .btns > * .text { position: absolute; left: 0px; top: 0px; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; font-size: 1.625rem; font-weight: 900; } .pop .btn-close { position: absolute; cursor: pointer; --tw-bg-opacity: 1; background-color: rgb(231 188 117 / var(--tw-bg-opacity)); width: 32px; height: 32px; border-radius: 50%; right: -12px; top: -12px; } .pop .btn-close:before, .pop .btn-close:after { content: ''; position: absolute; --tw-bg-opacity: 1; background-color: rgb(216 36 48 / var(--tw-bg-opacity)); height: 2px; width: 18px; left: calc(50% - 9px); top: calc(50% - 1px); } .pop .btn-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .pop .btn-close:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } /* PPPPPPPPPPPPPPPPP AAA NNNNNNNN NNNNNNNNEEEEEEEEEEEEEEEEEEEEEELLLLLLLLLLL P::::::::::::::::P A:::A N:::::::N N::::::NE::::::::::::::::::::EL:::::::::L P::::::PPPPPP:::::P A:::::A N::::::::N N::::::NE::::::::::::::::::::EL:::::::::L PP:::::P P:::::P A:::::::A N:::::::::N N::::::NEE::::::EEEEEEEEE::::ELL:::::::LL P::::P P:::::P A:::::::::A N::::::::::N N::::::N E:::::E EEEEEE L:::::L P::::P P:::::PA:::::A:::::A N:::::::::::N N::::::N E:::::E L:::::L P::::PPPPPP:::::PA:::::A A:::::A N:::::::N::::N N::::::N E::::::EEEEEEEEEE L:::::L P:::::::::::::PPA:::::A A:::::A N::::::N N::::N N::::::N E:::::::::::::::E L:::::L P::::PPPPPPPPP A:::::A A:::::A N::::::N N::::N:::::::N E:::::::::::::::E L:::::L P::::P A:::::AAAAAAAAA:::::A N::::::N N:::::::::::N E::::::EEEEEEEEEE L:::::L P::::P A:::::::::::::::::::::A N::::::N N::::::::::N E:::::E L:::::L P::::P A:::::AAAAAAAAAAAAA:::::A N::::::N N:::::::::N E:::::E EEEEEE L:::::L LLLLLL PP::::::PP A:::::A A:::::A N::::::N N::::::::NEE::::::EEEEEEEE:::::ELL:::::::LLLLLLLLL:::::L P::::::::P A:::::A A:::::A N::::::N N:::::::NE::::::::::::::::::::EL::::::::::::::::::::::L P::::::::P A:::::A A:::::A N::::::N N::::::NE::::::::::::::::::::EL::::::::::::::::::::::L PPPPPPPPPPAAAAAAA AAAAAAANNNNNNNN NNNNNNNEEEEEEEEEEEEEEEEEEEEEELLLLLLLLLLLLLLLLLLLLLLLL */ .popPanel .box { position: relative; font-family: Chakra Petch, ui-sans-serif; } .popPanel .box .bg- { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; background: #bc2832; border-radius: 8px; } .popPanel .box .bg-:before { position: absolute; top: 0px; left: 0px; width: 100%; content: ''; height: 200%; background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); top: -75%; border: none; } .popPanel .panel { margin-left: auto; margin-right: auto; padding-top: 1rem; padding-bottom: 1rem; width: 70vw; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; } .popPanel .panel .key { position: relative; display: flex; cursor: pointer; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); width: 23.331vw; height: 23.331vw; } .popPanel .panel .key .circ { position: absolute; border: 1px solid #f4d195; border: solid 1px #f4d195; width: 70%; height: 70%; border-radius: 50%; left: 15%; top: 15%; } .popPanel .panel .key .circ:before { content: ''; position: absolute; width: 110%; height: 100%; left: -5%; top: 10%; background: url(./../../img/07ab223d5c59df1cd4ee.png) 50% 100% / contain no-repeat; } .popPanel .panel .key .circ:after { content: ''; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.1); opacity: 0; border-radius: 50%; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; } .popPanel .panel .key .circ:hover:after { opacity: 1; } .popPanel .panel .key.func .circ { background: #450c10; } .popPanel .panel .key > * { position: relative; } .popPanel .panel .key p { font-size: 1.125rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .popPanel .panel .key .ico { width: 20px; } .popPanel .panel .key .ico.ico-back { width: 25px; } @media (min-width: 640px) { .popPanel .panel { width: calc(0.6 * 640px); } .popPanel .panel .key { font-size: 1.375rem; width: calc(0.3333 * 0.6 * 640px); height: calc(0.3333 * 0.6 * 640px); } .popPanel .panel .ico { width: 30px; } .popPanel .panel .ico.ico-back { width: 37.5px; } } .popPanel .input { position: relative; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: center; font-weight: 500; --tw-text-opacity: 1; color: rgb(251 223 174 / var(--tw-text-opacity)); background: #a4212a; font-size: 3rem; border-radius: 8px 8px 0 0; box-shadow: inset 0 -5px 15px 5px rgba(0, 0, 0, 0.15); } .popList, .popRule { font-family: Noto Sans TC, Microsoft JhengHei, ui-sans-serif, system-ui; font-size: 1rem; } .popList .box, .popRule .box { width: 80%; height: 80%; max-width: 512px; } .popList .box .box-inner, .popRule .box .box-inner { position: relative; top: 0px; display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; padding-bottom: 0.75rem; padding-top: 1.5rem; } .popList .box .box-inner .tit, .popRule .box .box-inner .tit { margin-top: 0px; } .popList .box .list, .popRule .box .list { position: relative; flex-grow: 1; overflow: hidden; width: calc(100% - 40px); -webkit-mask-image: linear-gradient(black calc(100% - 40px), transparent 100%); mask-image: linear-gradient(black calc(100% - 40px), transparent 100%); } .popList .box .list .swiper-container, .popRule .box .list .swiper-container { position: relative; height: 100%; overflow: hidden; } .popList .box .list .swiper-wrapper, .popRule .box .list .swiper-wrapper { height: auto; } .popList .box .list .swiper-slide, .popRule .box .list .swiper-slide { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: auto; } .popList .box .list .item, .popRule .box .list .item { position: relative; display: flex; align-items: center; justify-content: flex-start; padding-top: 0.25rem; padding-bottom: 0.25rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .popList .box .list .item:before, .popRule .box .list .item:before { content: ''; position: absolute; --tw-bg-opacity: 1; background-color: rgb(251 223 174 / var(--tw-bg-opacity)); height: 1px; bottom: 4px; left: 2px; width: calc(100% - 20px); visibility: hidden; } .popList .box .list .item:last-child, .popRule .box .list .item:last-child { margin-bottom: 30px; } .popList .box .list .item .label, .popRule .box .list .item .label { position: relative; margin-left: 1rem; display: flex; align-items: center; --tw-bg-opacity: 1; background-color: rgb(251 223 174 / var(--tw-bg-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; font-weight: 500; color: #bd2832; border-radius: 14px; visibility: hidden; } .popList .box .list .item.winner, .popRule .box .list .item.winner { color: #fffc00; } .popList .box .list .item.winner:before, .popRule .box .list .item.winner:before { content: ''; position: absolute; } .popList .box .list .item.self .label, .popRule .box .list .item.self .label, .popList .box .list .item.winner .label, .popRule .box .list .item.winner .label, .popList .box .list .item.self:before, .popRule .box .list .item.self:before, .popList .box .list .item.winner:before, .popRule .box .list .item.winner:before { visibility: visible; } .popList .box .loadmore, .popRule .box .loadmore { width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; text-align: center; font-size: 1.125rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .popRule ._sub { position: relative; margin-top: 1rem; margin-bottom: 0.25rem; text-align: left; font-size: 1rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); border-radius: 18px; } .popRule p, .popRule li { text-align: left; font-size: .875rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .popRule .bg-red-dark-opacity-50 { background: #7a2228; } /* POPINFO */ .popInfo .box, .popMsg .box { min-height: 70%; } @media (min-width: 640px) { .popInfo .box, .popMsg .box { min-height: 450px; } } .popInfo .box .bg-, .popMsg .box .bg- { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; border-radius: 8px; background: url(./../../img/090afc822f039330f081.jpg) 50% 50% / auto repeat; } .popInfo .box .bg-:before, .popMsg .box .bg-:before { position: absolute; content: ''; border: 2px solid #f4d195; border: solid 2px #f4d195; border-radius: 8px; width: calc(100% - 12px); height: calc(100% - 12px); left: 6px; top: 6px; opacity: 0.8; } .popInfo .box .box-inner .box-sms, .popMsg .box .box-inner .box-sms, .popInfo .box .box-inner .box-userinfo, .popMsg .box .box-inner .box-userinfo { position: relative; display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: flex-start; opacity: 0; } .popInfo .box .box-inner .form, .popMsg .box .box-inner .form { position: relative; width: 100%; } .popInfo .box .box-inner .form .field-group, .popMsg .box .box-inner .form .field-group { position: relative; margin-left: auto; margin-right: auto; margin-top: 1rem; display: flex; width: 100%; align-items: center; justify-content: center; width: calc(100% - 50px); } .popInfo .box .box-inner .form .field-group > p, .popMsg .box .box-inner .form .field-group > p { position: relative; padding-right: 0.5rem; text-align: right; font-size: 1rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); min-width: 110px; } .popInfo .box .box-inner .form .field-group .input, .popMsg .box .box-inner .form .field-group .input { position: relative; flex-grow: 1; font-size: 1.125rem; --tw-text-opacity: 1; color: rgb(251 223 174 / var(--tw-text-opacity)); } .popInfo .box .box-inner .form .field-group .input input, .popMsg .box .box-inner .form .field-group .input input { position: relative; height: 100%; width: 100%; padding: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 1.125rem; --tw-text-opacity: 1; color: rgb(251 223 174 / var(--tw-text-opacity)); border: 1px solid #f4d195; border: solid 1px #f4d195; } .popInfo .box .box-inner .form .field-group .input input:-ms-input-placeholder, .popMsg .box .box-inner .form .field-group .input input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; } .popInfo .box .box-inner .form .field-group .input input::placeholder, .popMsg .box .box-inner .form .field-group .input input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; } .popInfo .box .box-inner .form .field-group .input input:-ms-input-placeholder, .popMsg .box .box-inner .form .field-group .input input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; } .popInfo .box .box-inner .form .field-group .input input:-ms-input-placeholder, .popMsg .box .box-inner .form .field-group .input input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; } .popInfo .box .box-inner .form .field-group .input input::placeholder, .popMsg .box .box-inner .form .field-group .input input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; } .popInfo .box .box-inner .form .field-group .input input:-ms-input-placeholder, .popMsg .box .box-inner .form .field-group .input input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; } .popInfo .box .box-inner .form .field-group .input input::-ms-input-placeholder, .popMsg .box .box-inner .form .field-group .input input::-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; } .popInfo .box .box-inner .form .btn-sms, .popMsg .box .box-inner .form .btn-sms { position: relative; cursor: pointer; --tw-bg-opacity: 1; background-color: rgb(51 51 51 / var(--tw-bg-opacity)); padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.75rem; padding-right: 0.75rem; --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); border-radius: 15px; box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.25); } .popInfo .box .box-inner .form .btn-sms .secs, .popMsg .box .box-inner .form .btn-sms .secs { position: absolute; top: 0px; left: 0px; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(216 36 48 / var(--tw-text-opacity)); background: rgba(255, 255, 255, 0.8); border-radius: 15px; } .popInfo .box .box-inner .form .ps, .popMsg .box .box-inner .form .ps { margin-left: auto; margin-right: auto; text-align: center; width: calc(100% - 20px); } .popInfo .box .box-inner .form .ps p, .popMsg .box .box-inner .form .ps p { margin-left: auto; margin-right: auto; font-size: .75rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .popInfo .box .box-inner .form .ps.psUser, .popMsg .box .box-inner .form .ps.psUser { width: calc(100% - 50px); } .popInfo .box .box-inner .ui, .popMsg .box .box-inner .ui { position: relative; display: flex; align-items: center; justify-content: space-around; width: calc(100% - 50px); margin-bottom: 45px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .popInfo .box .box-inner .ui.disable, .popMsg .box .box-inner .ui.disable { opacity: 0.7; } .popInfo .box .box-inner .ui .blokcer, .popMsg .box .box-inner .ui .blokcer { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); opacity: 0; } .popInfo .box .box-inner .records, .popMsg .box .box-inner .records { position: relative; margin-left: auto; margin-right: auto; text-align: center; width: calc(100% - 50px); } .popInfo .box .box-inner .records .record, .popMsg .box .box-inner .records .record { padding: 0.5rem; text-align: left; border: 1px solid #f4d195; border: solid 1px #f4d195; background: rgba(0, 0, 0, 0.15); border-radius: 8px; } .popInfo .box .box-inner .records .record p, .popMsg .box .box-inner .records .record p { font-size: .875rem; } .popMsg .box { min-height: 100px; } .popMsg .box-inner { position: relative; display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 0; } .popMsg .box-inner > p { font-size: 1.125rem; } .t-shadow { text-shadow: 0px 0px 8px #000000; } /* IIIIIIIIIINNNNNNNN NNNNNNNNDDDDDDDDDDDDD EEEEEEEEEEEEEEEEEEEEEEXXXXXXX XXXXXXX I::::::::IN:::::::N N::::::ND::::::::::::DDD E::::::::::::::::::::EX:::::X X:::::X I::::::::IN::::::::N N::::::ND:::::::::::::::DD E::::::::::::::::::::EX:::::X X:::::X II::::::IIN:::::::::N N::::::NDDD:::::DDDDD:::::DEE::::::EEEEEEEEE::::EX::::::X X::::::X I::::I N::::::::::N N::::::N D:::::D D:::::D E:::::E EEEEEEXXX:::::X X:::::XXX I::::I N:::::::::::N N::::::N D:::::D D:::::DE:::::E X:::::X X:::::X I::::I N:::::::N::::N N::::::N D:::::D D:::::DE::::::EEEEEEEEEE X:::::X:::::X I::::I N::::::N N::::N N::::::N D:::::D D:::::DE:::::::::::::::E X:::::::::X I::::I N::::::N N::::N:::::::N D:::::D D:::::DE:::::::::::::::E X:::::::::X I::::I N::::::N N:::::::::::N D:::::D D:::::DE::::::EEEEEEEEEE X:::::X:::::X I::::I N::::::N N::::::::::N D:::::D D:::::DE:::::E X:::::X X:::::X I::::I N::::::N N:::::::::N D:::::D D:::::D E:::::E EEEEEEXXX:::::X X:::::XXX II::::::IIN::::::N N::::::::NDDD:::::DDDDD:::::DEE::::::EEEEEEEE:::::EX::::::X X::::::X I::::::::IN::::::N N:::::::ND:::::::::::::::DD E::::::::::::::::::::EX:::::X X:::::X I::::::::IN::::::N N::::::ND::::::::::::DDD E::::::::::::::::::::EX:::::X X:::::X IIIIIIIIIINNNNNNNN NNNNNNNDDDDDDDDDDDDD EEEEEEEEEEEEEEEEEEEEEEXXXXXXX XXXXXXX */ section .moneys { position: absolute; left: 0px; top: 0px; width: 100%; height: calc(50%); -webkit-mask-image: linear-gradient(black calc(100% - 120px), transparent 100%); mask-image: linear-gradient(black calc(100% - 120px), transparent 100%); } section .container-fluid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } section p { --tw-text-opacity: 1; color: rgb(251 223 174 / var(--tw-text-opacity)); } section .inner { position: relative; display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; /* AAA UUUUUUUU UUUUUUUU CCCCCCCCCCCCC A:::A U::::::U U::::::U CCC::::::::::::C A:::::A U::::::U U::::::U CC:::::::::::::::C A:::::::A UU:::::U U:::::UU C:::::CCCCCCCC::::C A:::::::::A U:::::U U:::::U C:::::C CCCCCC A:::::A:::::A U:::::D D:::::UC:::::C A:::::A A:::::A U:::::D D:::::UC:::::C A:::::A A:::::A U:::::D D:::::UC:::::C A:::::A A:::::A U:::::D D:::::UC:::::C A:::::AAAAAAAAA:::::A U:::::D D:::::UC:::::C A:::::::::::::::::::::A U:::::D D:::::UC:::::C A:::::AAAAAAAAAAAAA:::::A U::::::U U::::::U C:::::C CCCCCC A:::::A A:::::AU:::::::UUU:::::::U C:::::CCCCCCCC::::C A:::::A A:::::AUU:::::::::::::UU CC:::::::::::::::C A:::::A A:::::A UU:::::::::UU CCC::::::::::::C AAAAAAA AAAAAAA UUUUUUUUU CCCCCCCCCCCCC */ } section .inner > * { position: relative; } section .inner > .logo, section .inner > .title > img, section .inner .star, section .inner .fab, section .inner > .sub, section .inner > .desc { opacity: 0; } section .inner .logo { width: 106px; z-index: 2; } @media (min-width: 640px) { section .inner .logo { width: 159px; } } section .inner .title { z-index: 1; width: 299.5px; } @media (min-width: 640px) { section .inner .title { width: 404.325px; } } section .inner .title .star { position: absolute; width: 14%; } section .inner .title .star.s0 { left: -1.5%; top: -25%; } section .inner .title .star.s1 { width: 12%; left: 17%; top: 10%; } section .inner .title .star.s2 { width: 12%; left: 40%; top: 40%; } section .inner .title .star.s3 { width: 12%; left: 59%; top: 20%; } section .inner .title .star.s4 { right: -4.1%; top: -15%; } section .inner .title .fab { position: absolute; width: 120%; left: -10%; top: -18%; } section .inner .sub { z-index: 2; margin-top: -0.5rem; width: 321.5px; } @media (min-width: 640px) { section .inner .sub { margin-top: -1rem; width: 482.25px; } } section .inner .desc { text-align: center; z-index: 2; line-height: 1.25rem; text-shadow: 0px 0px 8px #000000; } @media (min-width: 640px) { section .inner .desc { font-size: 1.125rem; } } section .inner .label { position: absolute; display: flex; align-items: center; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; background: rgba(0, 0, 0, 0.9); border-radius: 14px; } section .inner .label img { width: 13px; } section .inner .label p { position: relative; padding-left: 0.25rem; font-size: .75rem; --tw-text-opacity: 1; color: rgb(244 209 149 / var(--tw-text-opacity)); } section .inner .auctions { position: relative; width: 100%; } section .inner .items { position: relative; width: 100%; overflow: hidden; min-height: 575px; } @media (min-width: 640px) { section .inner .items { min-height: 670px; } } @media (min-width: 2000px) { section .inner .items { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%); } } section .inner .items .sense-zone { position: absolute; height: 100%; overflow: hidden; width: 100%; top: 56px; } section .inner .items .sense-zone .sense { position: absolute; width: 380px; height: 100%; left: calc(50% - 190px); } section .inner .items .sense-zone .btn-left, section .inner .items .sense-zone .btn-right { position: absolute; cursor: pointer; width: 50px; padding: 10px; top: calc(50% - 20px); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; } section .inner .items .sense-zone .btn-left.disable, section .inner .items .sense-zone .btn-right.disable { opacity: 0; } section .inner .items .sense-zone .btn-left { left: 0px; } section .inner .items .sense-zone .btn-right { right: 0px; } section .inner .items .sense-zone .btn-right img { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); } @media (min-width: 640px) { section .inner .items .sense-zone .btn-left { left: auto; right: calc(50% + 150px); } section .inner .items .sense-zone .btn-right { right: auto; left: calc(50% + 150px); } } section .inner .item { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 320px; left: calc(50% - 160px); } @media (min-width: 640px) { section .inner .item { width: 380px; left: calc(50% - 190px); } } section .inner .item .countdown, section .inner .item .info { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s 0.1s ease-out; -moz-transition: all 0.3s 0.1s ease-out; -ms-transition: all 0.3s 0.1s ease-out; -o-transition: all 0.3s 0.1s ease-out; } section .inner .item .countdown { top: 30px; } section .inner .item .info { top: -30px; } section .inner .item .card { z-index: 1; } section .inner .item .info { z-index: 0; } section .inner .item .countdown, section .inner .item .msgPanel .hint { position: relative; margin-left: auto; margin-right: auto; margin-top: 0.25rem; display: flex; align-items: center; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); font-size: 0.85rem; min-height: 48px; } @media (min-width: 640px) { section .inner .item .countdown, section .inner .item .msgPanel .hint { min-height: 56px; } } section .inner .item .countdown > *, section .inner .item .msgPanel .hint > * { position: relative; } section .inner .item .countdown:before, section .inner .item .msgPanel .hint:before { content: ''; position: absolute; width: calc(100% + 20px); height: 20px; left: calc(-10px); top: calc((100% - 20px) * 0.5); border-radius: 10px; background: rgba(0, 0, 0, 0.75); } section .inner .item .countdown img, section .inner .item .msgPanel .hint img { width: 14px; } section .inner .item .countdown .date-style, section .inner .item .msgPanel .hint .date-style, section .inner .item .countdown .price-style, section .inner .item .msgPanel .hint .price-style { margin-bottom: 0.5rem; padding-left: 0.25rem; text-align: center; font-weight: 500; font-size: 1.6rem; } section .inner .item .countdown .date-style:not(.dd), section .inner .item .msgPanel .hint .date-style:not(.dd), section .inner .item .countdown .price-style:not(.dd), section .inner .item .msgPanel .hint .price-style:not(.dd) { width: 36px; } @media (min-width: 640px) { section .inner .item .countdown .date-style:not(.dd), section .inner .item .msgPanel .hint .date-style:not(.dd), section .inner .item .countdown .price-style:not(.dd), section .inner .item .msgPanel .hint .price-style:not(.dd) { width: 45px; } } section .inner .item .countdown .date-style.price-style, section .inner .item .msgPanel .hint .date-style.price-style, section .inner .item .countdown .price-style.price-style, section .inner .item .msgPanel .hint .price-style.price-style { width: auto; } section .inner .item .countdown .price-style, section .inner .item .msgPanel .hint .price-style { --tw-text-opacity: 1; color: rgb(255 229 124 / var(--tw-text-opacity)); } @media (min-width: 640px) { section .inner .item .countdown, section .inner .item .msgPanel .hint { font-size: 1rem; } section .inner .item .countdown .date-style, section .inner .item .msgPanel .hint .date-style { font-size: 2rem; } } section .inner .item .card, section .inner .item .info { width: 250px; } @media (min-width: 640px) { section .inner .item .card, section .inner .item .info { width: 275px; } } section .inner .item .card { position: relative; margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.2); -moz-filter: brightness(0.7); -ms-filter: brightness(0.7); filter: brightness(0.7); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; } @media (min-width: 640px) { section .inner .item .card { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } } section .inner .item .card > * { position: relative; } section .inner .item .card .label { position: absolute; } section .inner .item .card .label.label-top { top: -14px; right: -15px; } section .inner .item .card .label.label-records { bottom: -20px; left: calc(50% - 55px); } section .inner .item .card .bg-gold { position: absolute; background: url(./../../img/59f3f0fca4fab8a714d8.png) 0 0 / 100% auto repeat; width: calc(100% + 12px); height: calc(100% + 12px); left: -6px; top: -6px; border-radius: 8px; box-shadow: 6px 6px 10px 4px rgba(0, 0, 0, 0.25); opacity: 0; } section .inner .item .card .bg- { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; --tw-bg-opacity: 1; background-color: rgb(64 86 144 / var(--tw-bg-opacity)); border-radius: 6px; } section .inner .item .card .bg- .btm-deco, section .inner .item .card .bg- .top-deco { position: absolute; opacity: 0.8; height: 23%; } section .inner .item .card .name { margin-left: -0.25rem; margin-right: -0.25rem; display: flex; align-items: center; font-size: 1.125rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); text-shadow: 0px 0px 8px #000000; } section .inner .item .card .name img { width: 6px; } section .inner .item .card .cover { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); width: 100%; height: 150px; border: 3px solid #f4d195; border: solid 3px #f4d195; border-radius: 3px; } @media (min-width: 640px) { section .inner .item .card .cover { height: 240px; } } section .inner .item .card .cover .conver-inner { position: relative; height: 100%; width: 100%; } section .inner .item .card .cover .serial { position: absolute; font-weight: 700; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); font-size: 4.2rem; top: calc(100% + 10px); right: -5px; opacity: 0.1; } section .inner .item .card .cover .bidscount { position: absolute; padding-top: 0px; padding-bottom: 0px; padding-right: 0.75rem; padding-left: 1.25rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); bottom: 5px; right: -7px; } section .inner .item .card .cover .bidscount:before { content: ''; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); opacity: 0.8; border: 1px solid #aaa; border: solid 1px #aaa; -webkit-transform: skew(-15deg, 0); -moz-transform: skew(-15deg, 0); -ms-transform: skew(-15deg, 0); -o-transform: skew(-15deg, 0); } section .inner .item .card .cover .bidscount p { position: relative; text-align: center; font-size: .875rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } section .inner .item .card .dsc { min-height: 82px; } section .inner .item .card .dsc p { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); font-size: 0.85rem; } section .inner .item .card .price { display: flex; border: 1px solid #f4d195; border: solid 1px #f4d195; background: rgba(0, 0, 0, 0.3); } section .inner .item .card .price > * { position: relative; padding-top: 0.25rem; padding-bottom: 0.25rem; } section .inner .item .card .price .price-l { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; opacity: 0.7; } section .inner .item .card .price .price-l p { font-size: 0.85rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } section .inner .item .card .price .price-l:before { content: ''; position: absolute; width: 1px; height: calc(100% - 0px); right: 0; top: 0px; background: #f4d195; } section .inner .item .card .price .price-r { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; } section .inner .item .info { position: relative; min-height: 130px; } section .inner .item .info .input { position: relative; margin-left: auto; margin-right: auto; cursor: pointer; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; font-size: 1.375rem; font-weight: 500; width: 85%; border-radius: 30px ; } section .inner .item .info .input .invalid { opacity: 0.65; } @media (min-width: 640px) { section .inner .item .info .input { width: 90%; } } section .inner .item .info .input .bg- { position: absolute; top: 0px; left: 0px; background: #4c0e12; width: calc(100% + 0px); height: calc(100% + 0px); border-radius: 30px; } section .inner .item .info .input .bg-gold, section .inner .item .info .input .bg-glow { position: absolute; --tw-bg-opacity: 1; background-color: rgb(244 209 149 / var(--tw-bg-opacity)); width: calc(100% + 4px); height: calc(100% + 4px); left: -2px; top: -2px; border-radius: 30px; } section .inner .item .info .input .bg-glow { background: none; box-shadow: 0 0 10px 5px rgba(233, 195, 131, 0.9); animation: glowing 2.5s infinite; } section .inner .item .info .input .grad { position: absolute; top: 0px; left: 0px; background: #ffffff; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 52%, rgba(255, 255, 255, 0) 100%); width: 25%; height: 500%; top: -205%; left: 30%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); } section .inner .item .info .msgPanel, section .inner .item .info .result { display: flex; flex-direction: column; } section .inner .item .info .bided { display: flex; flex-direction: column; } section .inner .item .info .msgPanel .hint { min-height: auto; } section .inner .item .info .msgPanel .hint:before { bottom: 0; border-radius: 20px; } section .inner .item .info .msgPanel .hint p { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } section .inner .item .info .result .winner-box { position: relative; margin-top: 0.75rem; width: 100%; padding-top: 0.5rem; padding-bottom: 0.5rem; background: rgba(0, 0, 0, 0.6); } section .inner .item .info .result .winner-box p { position: relative; text-align: center; font-size: .875rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } section .inner .item .info .result .winner-box .price-style { font-size: 1.375rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(255 229 124 / var(--tw-text-opacity)); } section .inner .item .info .result .winner-box .congrads { position: absolute; left: -9px; top: -6px; } section .inner .item .info .result .winner-box .congrads .dot { display: flex; align-items: center; justify-content: center; --tw-bg-opacity: 1; background-color: rgb(251 223 174 / var(--tw-bg-opacity)); font-size: 1.25rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(169 42 51 / var(--tw-text-opacity)); width: 30px; height: 30px; border-radius: 50%; } section .inner .item.active .countdown, section .inner .item.active .info, section .inner .item.active .bg-gold { opacity: 1; visibility: visible; } section .inner .item.active .countdown, section .inner .item.active .info { top: 0; } section .inner .item.active .card { -moz-filter: brightness(1); -ms-filter: brightness(1); filter: brightness(1); } section .inner .item:nth-child(1) .card .bg-, section .inner .item:nth-child(5) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(64 86 144 / var(--tw-bg-opacity)); } section .inner .item:nth-child(2) .card .bg-, section .inner .item:nth-child(6) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(207 62 72 / var(--tw-bg-opacity)); } section .inner .item:nth-child(3) .card .bg-, section .inner .item:nth-child(7) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(117 75 157 / var(--tw-bg-opacity)); } section .inner .item:nth-child(4) .card .bg-, section .inner .item:nth-child(8) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(214 83 65 / var(--tw-bg-opacity)); } section .inner .item:nth-child(9) .card .bg-, section .inner .item:nth-child(13) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(64 86 144 / var(--tw-bg-opacity)); } section .inner .item:nth-child(10) .card .bg-, section .inner .item:nth-child(14) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(207 62 72 / var(--tw-bg-opacity)); } section .inner .item:nth-child(11) .card .bg-, section .inner .item:nth-child(15) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(117 75 157 / var(--tw-bg-opacity)); } section .inner .item:nth-child(12) .card .bg-, section .inner .item:nth-child(16) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(214 83 65 / var(--tw-bg-opacity)); } section .inner .item:nth-child(17) .card .bg-, section .inner .item:nth-child(21) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(64 86 144 / var(--tw-bg-opacity)); } section .inner .item:nth-child(18) .card .bg-, section .inner .item:nth-child(22) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(207 62 72 / var(--tw-bg-opacity)); } section .inner .item:nth-child(19) .card .bg-, section .inner .item:nth-child(23) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(117 75 157 / var(--tw-bg-opacity)); } section .inner .item:nth-child(20) .card .bg-, section .inner .item:nth-child(24) .card .bg- { --tw-bg-opacity: 1; background-color: rgb(214 83 65 / var(--tw-bg-opacity)); }