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

/* Tailwind */

/* ! tailwindcss v3.1.7 | 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: #F8F8F8;
    /* 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.
*/

html {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    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";
    /* 4 */
}

/*
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. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/*
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-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: 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,
[type='button'],
[type='reset'],
[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;
}

/*
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::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 1;
    /* 1 */
    color: #DFDFDF;
    /* 2 */
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    opacity: 1;
    /* 1 */
    color: #DFDFDF;
    /* 2 */
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    /* 1 */
    color: #DFDFDF;
    /* 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;
}

/*== Font ==*/

html {
    font-family: 'Roboto', 'Noto Sans TC', 'Helvetica', 'Arial', 'Segoe UI Emoji', sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
    /* outline: 1px solid red; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input,
textarea,
select,
button,
checkbox,
radio {
    -webkit-user-select: auto;
}

/*== Body ==*/

body .b-wrap {
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

body.teritary3,
body.teritary3 > .b-wrap,
body.teritary3 > main {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}

body.teritary4,
body.teritary4 > .b-wrap,
body.teritary4 > main {
    --tw-bg-opacity: 1;
    background-color: rgb(251 251 251 / var(--tw-bg-opacity));
}

input,
button,
textarea,
input:focus,
button:focus,
textarea:focus {
    font-family: 'Roboto', 'Noto Sans TC', 'Helvetica', 'Arial', 'Segoe UI Emoji', sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

a,
div,
span,
p,
i,
a:focus,
div:focus,
span:focus,
p:focus,
i:focus {
    font-family: 'Roboto', 'Noto Sans TC', 'Helvetica', 'Arial', 'Segoe UI Emoji', sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow-wrap: break-word;
}

a {
    cursor: pointer;
}

/*== Header ==*/

/* Basic: No Fixed */

header h1,
.b-appIntro h1 {
    position: absolute;
    text-indent: -200%;
    font-size: 12px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.header {
    display: flex;
    height: 60px;
    width: 100%;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .header {
        height: 76px;
        border-width: 1px;
        border-style: solid;
        border-bottom-color: rgb(192 192 192 / .18);
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: rgb(192 192 192 / .25);
        --tw-shadow: var(--tw-shadow-colored);
    }
}

.basic-header {
    display: flex;
    height: 60px;
    width: 100%;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .basic-header {
        height: 76px;
        border-width: 1px;
        border-style: solid;
        border-bottom-color: rgb(192 192 192 / .18);
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: rgb(192 192 192 / .25);
        --tw-shadow: var(--tw-shadow-colored);
    }
}

.basic-header {
    position: relative;
}

.basic-header .header-wrap {
    display: flex;
    width: 100%;
    max-width: 1120px;
}

@media (min-width: 768px) {
    .basic-header .header-wrap {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1680px) {
    .basic-header .header-wrap {
        max-width: 1920px;
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

.basic-header .header-wrap .header-logo {
    display: flex;
    height: 1.5rem;
}

.basic-header .header-wrap .header-logo img {
    display: block;
    height: 100%;
}

/* Installments | Verify */

.bnpl-header {
    display: flex;
    height: 60px;
    width: 100%;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .bnpl-header {
        height: 76px;
        border-width: 1px;
        border-style: solid;
        border-bottom-color: rgb(192 192 192 / .18);
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: rgb(192 192 192 / .25);
        --tw-shadow: var(--tw-shadow-colored);
    }
}

.bnpl-header {
    position: relative;
    justify-content: space-between;
}

.bnpl-header .header-wrap {
    display: flex;
    width: 100%;
    max-width: 1120px;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .bnpl-header .header-wrap {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1680px) {
    .bnpl-header .header-wrap {
        max-width: 1920px;
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

.bnpl-header .header-wrap .header-logo-wrap {
    display: flex;
    height: 1.5rem;
}

.bnpl-header .header-wrap .header-logo-wrap a,
.bnpl-header .header-wrap .header-logo-wrap span {
    height: 1.5rem;
}

.bnpl-header .header-wrap .header-logo-wrap a img,
.bnpl-header .header-wrap .header-logo-wrap span img {
    display: block;
    height: 100%;
}

.bnpl-header .header-wrap .header-logo-wrap a img,
.bnpl-header .header-wrap .header-logo-wrap a {
    cursor: default;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

/* Index */

.index-header {
    display: flex;
    height: 60px;
    width: 100%;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .index-header {
        height: 76px;
        border-width: 1px;
        border-style: solid;
        border-bottom-color: rgb(192 192 192 / .18);
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: rgb(192 192 192 / .25);
        --tw-shadow: var(--tw-shadow-colored);
    }
}

.index-header {
    position: fixed;
    top: 0px;
    z-index: 1000;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.index-header .header-wrap {
    display: flex;
    width: 100%;
    max-width: 1120px;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .index-header .header-wrap {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1680px) {
    .index-header .header-wrap {
        max-width: 1920px;
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

.index-header .header-wrap .header-logo {
    display: flex;
    height: 1.5rem;
}

.index-header .header-wrap .header-logo img {
    display: block;
    height: 100%;
}

.index-header .header-wrap .header-user-box {
    display: flex;
    align-items: center;
}

.index-header .header-wrap .header-user-box .header-login {
    position: relative;
}

.index-header .header-wrap .header-user-box .header-login::before {
    visibility: hidden;
    position: absolute;
    left: 50%;
    bottom: -1.75rem;
    display: inline-block;
    --tw-translate-x: -50%;
    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));
    border-radius: 1.5rem;
    background-color: #f0f1ffd2;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
    opacity: 0;
    transition-duration: 200ms;
    content: var(--tw-content);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.index-header .header-wrap .header-user-box .header-login:hover::before {
    transition-duration: 200ms;
    content: var(--tw-content);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 768px) {
    .index-header .header-wrap .header-user-box .header-login:hover::before {
        visibility: visible;
        content: var(--tw-content);
        opacity: 1;
    }
}

.index-header .header-wrap .header-user-box .header-login {
    margin-right: 1rem;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(240 241 255 / var(--tw-bg-opacity));
}

.index-header .header-wrap .header-user-box .header-login::before {
    width: 40px;
    --tw-content: '登入';
    content: var(--tw-content);
}

@media (min-width: 768px) {
    .index-header .header-wrap .header-user-box .header-login {
        height: 1.75rem;
        width: 1.75rem;
    }
}

.index-header .header-wrap .header-user-box .header-number {
    margin-right: 1rem;
    display: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: default;
    border-radius: 1.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(234 234 240 / var(--tw-border-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .index-header .header-wrap .header-user-box .header-number {
        display: flex;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        font-size: 13px;
        line-height: 16px;
    }
}

.index-header .header-wrap .header-user-box .header-setting {
    position: relative;
}

.index-header .header-wrap .header-user-box .header-setting::before {
    visibility: hidden;
    position: absolute;
    left: 50%;
    bottom: -1.75rem;
    display: inline-block;
    --tw-translate-x: -50%;
    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));
    border-radius: 1.5rem;
    background-color: #f0f1ffd2;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
    opacity: 0;
    transition-duration: 200ms;
    content: var(--tw-content);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.index-header .header-wrap .header-user-box .header-setting:hover::before {
    transition-duration: 200ms;
    content: var(--tw-content);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 768px) {
    .index-header .header-wrap .header-user-box .header-setting:hover::before {
        visibility: visible;
        content: var(--tw-content);
        opacity: 1;
    }
}

.index-header .header-wrap .header-user-box .header-setting {
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
}

.index-header .header-wrap .header-user-box .header-setting::before {
    width: 40px;
    --tw-content: '設定';
    content: var(--tw-content);
}

@media (min-width: 768px) {
    .index-header .header-wrap .header-user-box .header-setting {
        height: 1.75rem;
        width: 1.75rem;
    }
}

.index-header + .header-clear {
    display: block;
    height: 60px;
    width: 100%;
}

@media (min-width: 768px) {
    .index-header + .header-clear {
        height: 76px;
    }
}

.index-header ~ main::before {
    position: relative;
    display: block;
    height: 60px;
    width: 100%;
    content: var(--tw-content);
    background-color: inherit;
}

@media (min-width: 768px) {
    .index-header ~ main::before {
        content: var(--tw-content);
        height: 76px;
    }
}

/* Phase 2 */

.app-header {
    display: flex;
    height: 60px;
    width: 100%;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .app-header {
        height: 76px;
        border-width: 1px;
        border-style: solid;
        border-bottom-color: rgb(192 192 192 / .18);
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: rgb(192 192 192 / .25);
        --tw-shadow: var(--tw-shadow-colored);
    }
}

.app-header {
    display: none;
}

@media (min-width: 768px) {
    .app-header {
        position: fixed;
        display: flex;
    }
}

.app-header .header-wrap .header-user-box {
    display: none;
}

/*== Header Return ==*/

/* Installments | Verify */

.header-return-wrap {
    z-index: 800;
    display: inline-block;
}

@media (min-width: 768px) {
    .header-return-wrap {
        position: absolute;
        top: 76px;
        left: 50%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 100%;
        --tw-translate-x: -50%;
        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));
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .header-return-wrap {
        max-width: 1120px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 1680px) {
    .header-return-wrap {
        width: 100%;
        max-width: 1920px;
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

.header-return-wrap .button-return {
    margin-left: 1.25rem;
    margin-bottom: -1rem;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

@media (min-width: 768px) {
    .header-return-wrap .button-return {
        margin: 0px;
        margin-top: 30px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .header-return-wrap .button-return:hover {
        opacity: 0.7;
    }
}

.header-return-wrap .button-return svg {
    margin-left: 2px;
    margin-right: 0.75rem;
    display: inline-block;
    height: 18px;
    width: 11px;
}

/* Phase 2 */

.page-return-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 800;
    height: 60px;
    width: 100%;
    background-color: inherit;
}

@media (min-width: 768px) {
    .page-return-wrap {
        position: absolute;
        top: 76px;
        left: 50%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        height: auto;
        --tw-translate-x: -50%;
        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));
        background-color: transparent;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .page-return-wrap {
        max-width: 1120px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 1680px) {
    .page-return-wrap {
        width: 100%;
        max-width: 1920px;
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

.page-return-wrap .page-return {
    display: flex;
    height: 60px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .page-return-wrap .page-return {
        margin-top: 30px;
        height: auto;
        padding-left: 0px;
        padding-right: 0px;
    }
}

.page-return-wrap .page-return svg {
    display: flex;
    height: 14px;
    width: 7px;
}

@media (min-width: 768px) {
    .page-return-wrap .page-return svg {
        margin-left: 2px;
        margin-right: 0.75rem;
        display: inline-block;
        height: 18px;
        width: 11px;
    }
}

.page-return-wrap .page-return p {
    display: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .page-return-wrap .page-return p {
        display: flex;
    }
}

.page-title {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    z-index: 900;
    display: flex;
    --tw-translate-x: -50%;
    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));
    align-items: center;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .page-title {
        position: relative;
        top: 0px;
        z-index: 0;
        margin-bottom: 1.5rem;
        justify-content: center;
    }
}

.page-title h2 {
    display: flex;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
}

@media (min-width: 768px) {
    .page-title h2 {
        font-size: 18px;
        line-height: 30px;
        font-weight: 500;
    }
}

/*== Main ==*/

/* Main Page Height */

main.bnpl-main-h-full {
    min-height: calc(100vh - 60px - 64px - 152.5px);
}

@media (min-width: 768px) {
    main.bnpl-main-h-full {
        min-height: calc(100vh - 76px - 102px);
    }
}

main.main-h-full {
    min-height: calc(100vh - 60px - 152.5px);
}

@media (min-width: 768px) {
    main.main-h-full {
        min-height: calc(100vh - 76px - 102px);
    }
}

.index-header ~ main.main-h-full {
    min-height: calc(100vh - 152.5px);
}

@media (min-width: 768px) {
    .index-header ~ main.main-h-full {
        min-height: calc(100vh - 102px);
    }
}

/*== Footer ==*/

footer {
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

footer .footer-wrap {
    max-width: 1120px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    footer .footer-wrap {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        width: calc(100% - 40px);
        justify-content: space-between;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

@media (min-width: 1680px) {
    footer .footer-wrap {
        max-width: 1920px;
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

footer .footer-wrap div {
    margin-bottom: 1.75rem;
    display: inline-block;
    height: 22px;
}

@media (min-width: 768px) {
    footer .footer-wrap div {
        margin-bottom: 0px;
        display: flex;
    }
}

footer .footer-wrap div img {
    display: block;
    height: 100%;
}

footer .footer-wrap p {
    align-self: center;
    font-size: 12px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(92 92 92 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    footer .footer-wrap p {
        display: flex;
    }
}

footer .footer-wrap p span {
    display: block;
}

@media (min-width: 768px) {
    footer .footer-wrap p span {
        display: inline-block;
    }
}

*, ::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-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: ;
}

::-webkit-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-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: ;
}

::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-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: ;
}

/*== Animation ==*/

@-webkit-keyframes ping {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ping {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes arrowEffect {
    0% {
        left: 0;
    }

    50% {
        left: 3px;
    }

    100% {
        left: 0;
    }
}

@keyframes arrowEffect {
    0% {
        left: 0;
    }

    50% {
        left: 3px;
    }

    100% {
        left: 0;
    }
}

@-webkit-keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes verticalDrift {
    0% {
        transform: translateY(0px) rotate();
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate();
    }
}

@keyframes verticalDrift {
    0% {
        transform: translateY(0px) rotate();
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate();
    }
}

.animate-success-back {
    transform-origin: center;
    --tw-scale-x: .5;
    --tw-scale-y: .5;
    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));
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    -webkit-animation: ping 0.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    animation: ping 0.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.animate-success-check {
    transform-origin: center;
    --tw-scale-x: .5;
    --tw-scale-y: .5;
    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));
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    -webkit-animation: ping 1s 0.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    animation: ping 1s 0.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.animate-progress {
    transition-duration: 300ms;
    transition-timing-function: linear;
    -webkit-animation: progressBar 2s cubic-bezier(0.33, 1, 0.68, 1) both;
    animation: progressBar 2s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.animate-vertical-drift {
    transition-duration: 300ms;
    transition-timing-function: linear;
    -webkit-animation: verticalDrift 4.5s ease-in-out infinite;
    animation: verticalDrift 4.5s ease-in-out infinite;
}

/*== Alert ==*/

.alert {
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert .alert-modal {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 12px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    opacity: 0.8;
}

.alert .alert-icon {
    margin-right: 0.75rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.drawer {
    position: relative;
    z-index: 1000;
}

.drawer .drawer-backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgb(58 58 58 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.7;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.drawer .drawer-modal {
    position: fixed;
    bottom: 0;
    z-index: 1000;
    display: flex;
    width: 100%;

    justify-content: center;
}

.drawer .drawer-alert {
    width: 100vw;
    --tw-bg-opacity: 1;
    background: white;
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 2.5rem 1.75rem;
}

.drawer .drawer-content {
    margin: auto;
    margin-bottom: 2.5rem;
    --tw-text-opacity: 1;
    color: #212121;
}

.drawer .drawer-content .title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
}

.drawer .drawer-content .info {
    font-size: 1rem;
    line-height: 1.75rem;
    margin-top: 0.75rem;
}

.drawer .drawer-button {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.drawer .drawer-button button {
    display: inline-flex;
    justify-content: center;
}

.btn-primary {
    color: white;
    background: #ff8f08;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #ff8f08;
    padding: 0.625rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.btn-outline {
    color: #212121;
    background: white;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #212121;
    padding: 0.625rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}


/*== PopUp ==*/

.popup {
    position: relative;
    z-index: 1000;
}

.popup .popup-backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgb(58 58 58 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.7;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.popup .popup-backdrop-white {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.popup .popup-modal {
    position: fixed;
    top: 50%;
    z-index: 1000;
    display: flex;
    width: 100%;
    --tw-translate-y: -50%;
    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));
    justify-content: center;
    text-align: center;
}

.popup .popup-modal-bottom {
    position: fixed;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.popup .popup-alert {
    max-height: 600px;
    width: 83.333333%;
    min-width: 300px;
    max-width: 400px;
    overflow-y: auto;
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

@media (min-width: 768px) {
    .popup .popup-alert {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

.popup .popup-alert-deeplink {
    max-height: 600px;
    width: 91.666667%;
    min-width: 300px;
    max-width: 400px;
    overflow-y: auto;
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.popup .popup-alert-deeplink .popup-button {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
}

.popup .popup-alert.ident {
    height: 314px;
    width: 312px;
    padding: 2.25rem;
}

.popup .popup-alert.ident .popup-content {
    width: 100%;
}

/* 把.text-primary2拿掉，影響Installments | Promo | Verify */

.popup .popup-content {
    margin: auto;
    margin-bottom: 1.75rem;
    width: 264px;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.popup .popup-content.primary2 {
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.popup .popup-content.black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.popup .popup-content h3 {
    margin-bottom: 1.5rem;
    font-size: 17px;
    line-height: 26px;
    font-weight: 700;
}

.popup .popup-content p,
.popup-content ul {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

.popup .popup-content ul {
    margin-left: 0.875rem;
    list-style-position: outside;
    list-style-type: decimal;
    text-align: left;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

.popup .popup-button {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 264px;
}

.popup .popup-button button {
    display: inline-flex;
    justify-content: center;
}

.popup-input {
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(255 143 8 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.popup-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(255 143 8 / var(--tw-border-opacity));
    --tw-shadow: 0 0 5px rgba(255, 143, 8, 0.3);
    --tw-shadow-colored: 0 0 5px 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-width: 0px;
    outline-color: #FF8F08;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* Bill */

.popup-close-button {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 12px;
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-shadow-color: rgb(137 137 137 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.popup-close-button:hover {
    transition-duration: 500ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .popup-close-button {
        top: 1.5rem;
        right: 1.5rem;
    }
}

.popup-close-button span {
    position: relative;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    --tw-rotate: 45deg;
    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));
    align-items: center;
    justify-content: center;
}

.popup-close-button span::before {
    position: absolute;
    display: flex;
    height: 0.75rem;
    width: 1.5px;
    border-radius: 10px;
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
}

.popup-close-button span::after {
    position: absolute;
    display: flex;
    height: 0.75rem;
    width: 1.5px;
    --tw-rotate: 90deg;
    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));
    border-radius: 10px;
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
}

/*== full banner PopUp ==*/

#popup-full-backdrop .popup-full-modal-bottom {
    position: fixed;
    top: 50%;
    z-index: 1000;
    display: flex;
    width: 100%;
    --tw-translate-y: -50%;
    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));
    justify-content: center;
    text-align: center;
}

#popup-full-backdrop #popup-full {
    position: relative;
    max-height: 600px;
    width: 83.333333%;
    min-width: 300px;
    max-width: 335px;
    border-radius: 20px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 0px 13px 0px rgba(154, 154, 154, 0.15);
    --tw-shadow-colored: 0 0px 13px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

#popup-full-backdrop #top-letter {
    position: absolute;
    top: -60px;
    right: 1rem;
    z-index: 1010;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

#popup-full-backdrop .image-frame {
    position: relative;
    height: 330px;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    border-width: 0px;
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(255 143 8 / var(--tw-bg-opacity));
}

#popup-full-backdrop #popup-full .image-frame .title {
    margin-bottom: 1rem;
    padding-top: 3rem;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

#popup-full-backdrop #popup-full .image-frame p {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

#popup-full-backdrop #popup-full .image-frame p span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

#popup-full-backdrop #popup-full .image-frame img {
    position: absolute;
}

#popup-full-backdrop #popup-full button {
    box-sizing: border-box;
    width: 50%;
    border-radius: 40px;
    border-width: 1px;
    border-style: solid;
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 14px;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

#popup-full-backdrop #popup-full button:hover {
    opacity: 0.9;
    --tw-brightness: brightness(1.05);
    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);
}

#popup-full-backdrop #popup-full #overdue-alert {
    overflow: hidden;
    font-size: 14px;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: rgb(110 110 110 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}


/*== Toast ==*/

.toast {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 2.5rem;
    z-index: 1000;
    margin: auto;
    display: none;
}

@media (min-width: 768px) {
    .toast {
        bottom: 4rem;
    }
}

.toast.toast-twmOrange .toast-wrap {
    bottom: 2.5rem;
    margin: auto;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 143 8 / var(--tw-bg-opacity));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.toast.toast-secondary1 .toast-wrap {
    bottom: 2.5rem;
    margin: auto;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    border-radius: 10px;
    background-color: rgb(33 33 33 / 0.8);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.toast .toast-wrap div {
    margin-right: 1rem;
    height: 30px;
}

.toast .toast-wrap div img {
    display: block;
    height: 100%;
}

.toast .toast-wrap p {
    font-size: 12px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .toast .toast-wrap p {
        font-size: 13px;
        line-height: 18px;
    }
}

/*== Button ==*/

/* Installments | Promo | Verify */

.button-outlined {
    box-sizing: border-box;
    border-radius: 9999px;
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 143 8 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 0.625rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 143 8 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.button-outlined:hover {
    --tw-border-opacity: 1;
    border-color: rgb(255 155 11 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 155 11 / var(--tw-text-opacity));
}

.button-secondary {
    box-sizing: border-box;
    border-radius: 9999px;
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(192 192 192 / var(--tw-border-opacity));
    background-color: transparent;
    padding: 0.625rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.button-secondary:hover {
    border-color: rgb(115 115 115 / 0.6);
}

.button-contained {
    box-sizing: border-box;
    border-radius: 9999px;
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 143 8 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 143 8 / var(--tw-bg-opacity));
    padding: 0.625rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.button-contained:hover {
    --tw-border-opacity: 1;
    border-color: rgb(255 155 11 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 155 11 / var(--tw-bg-opacity));
}

.button-disabled {
    cursor: default;
    --tw-border-opacity: 1;
    border-color: rgb(223 223 223 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(223 223 223 / var(--tw-bg-opacity));
}

.button-disabled:hover {
    --tw-border-opacity: 1;
    border-color: rgb(223 223 223 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(223 223 223 / var(--tw-bg-opacity));
}

/* Phase 1 */

.btn-outlined {
    box-sizing: border-box;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
    padding: 0.625rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.btn-outlined:hover {
    opacity: 0.9;
    --tw-brightness: brightness(1.05);
    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);
}

.btn-outlined.primary1 {
    --tw-border-opacity: 1;
    border-color: rgb(255 103 0 / var(--tw-border-opacity));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity));
}

.btn-contained {
    box-sizing: border-box;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding: 0.625rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.btn-contained:hover {
    opacity: 0.9;
    --tw-brightness: brightness(1.05);
    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);
}

.btn-contained.primary1 {
    --tw-border-opacity: 1;
    border-color: rgb(255 103 0 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-contained.primary1.disabled {
    --tw-border-opacity: 1;
    border-color: rgb(207 207 207 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(207 207 207 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-outlined-icon-r {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(33 33 33 / var(--tw-border-opacity));
    background-color: transparent;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.btn-outlined-icon-r.animate {
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition-duration: 300ms;
}

.btn-outlined-icon-r.animate::before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    --tw-translate-x: -100%;
    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));
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
    opacity: 0;
    transition-duration: 500ms;
    content: var(--tw-content);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 768px) {
    .btn-outlined-icon-r.animate:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    .btn-outlined-icon-r.animate:hover::before {
        --tw-translate-x: 0px;
        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));
        content: var(--tw-content);
        opacity: 1;
    }
}

.btn-outlined-icon-r.animate:hover > i img {
    transition-duration: 300ms;
}

@media (min-width: 768px) {
    .btn-outlined-icon-r.animate:hover > i img {
        --tw-invert: invert(1);
        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);
    }
}

.btn-outlined-icon-r.animate i {
    margin-left: 0.5rem;
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
}

.btn-outlined-icon-r.animate i img {
    display: block;
    width: 100%;
}

/*== Input ==*/

/* Installments */

.input-box-outlined {
    pointer-events: none;
    width: 100%;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.input-box-outlined::-moz-placeholder {
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(192 192 192 / var(--tw-text-opacity));
}

.input-box-outlined:-ms-input-placeholder {
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(192 192 192 / var(--tw-text-opacity));
}

.input-box-outlined::placeholder {
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(192 192 192 / var(--tw-text-opacity));
}

.input-box-outlined:focus {
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
    --tw-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    --tw-shadow-colored: 0 0 5px 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-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.input-box-outlined.error {
    --tw-border-opacity: 1;
    border-color: rgb(255 0 0 / var(--tw-border-opacity));
}

.input-box-outlined:-moz-read-only {
    pointer-events: none;
    width: 100%;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    -moz-transition-property: all;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.input-box-outlined:read-only {
    pointer-events: none;
    width: 100%;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.input-box-outlined:read-only::-moz-placeholder {
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.input-box-outlined:read-only:-ms-input-placeholder {
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.input-box-outlined:-moz-read-only::placeholder {
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.input-box-outlined:read-only::placeholder {
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.input-box-outlined:-moz-read-only:focus {
    border-color: rgb(223 223 223 / var(--tw-border-opacity));
    --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);
    outline-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
}

.input-box-outlined:read-only:focus {
    border-color: rgb(223 223 223 / var(--tw-border-opacity));
    --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);
    outline-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
}

.input-box-wrap {
    position: relative;
}

.input-box-wrap .input-box-title {
    position: absolute;
    top: -6px;
    left: 1.5rem;
    z-index: 10;
    font-size: 13px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.input-box-wrap .input-box-title::before {
    position: absolute;
    top: 6px;
    left: -4px;
    z-index: -1;
    height: 1px;
    width: calc(100% + 8px);
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.input-box-wrap .input-box-title span {
    position: relative;
    z-index: 10;
    display: flex;
    font-size: 13px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.checkbox-square-primary2 input[type='radio'],
.checkbox-square-primary2 input[type='checkbox'],
.checkbox-round-secondary1 input[type='radio'],
.checkbox-round-secondary1 input[type='checkbox'] {
    display: none;
}

.checkbox-square-primary2 label {
    position: relative;
    display: flex;
    vertical-align: middle;
}

.checkbox-square-primary2 label::before {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(207 207 207 / var(--tw-border-opacity));
    content: var(--tw-content);
    background-color: transparent;
}

.checkbox-square-primary2 label::after {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    background-image: url('../images/icon/icon-checkbox-true.svg');
    content: var(--tw-content);
    opacity: 0;
}

.checkbox-square-primary2 input:checked ~ label::before,
.installments-terms-checkbox.active label::before {
    --tw-border-opacity: 1;
    border-color: rgb(45 45 108 / var(--tw-border-opacity));
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 108 / var(--tw-bg-opacity));
}

.checkbox-square-primary2 input:checked ~ label::after,
.installments-terms-checkbox.active label::after {
    content: var(--tw-content);
    opacity: 1;
}

.checkbox-round-secondary1 label.checkbox {
    position: relative;
    display: flex;
    vertical-align: middle;
}

.checkbox-round-secondary1 label.checkbox::before {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(207 207 207 / var(--tw-border-opacity));
    content: var(--tw-content);
    background-color: transparent;
}

.checkbox-round-secondary1 label.checkbox::after {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    background-image: url('../images/icon/icon-checkbox-true.svg');
    content: var(--tw-content);
    opacity: 0;
}

.checkbox-round-secondary1 input:checked ~ label.checkbox::before {
    --tw-border-opacity: 1;
    border-color: rgb(33 33 33 / var(--tw-border-opacity));
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
}

.checkbox-round-secondary1 input:checked ~ label.checkbox::after {
    content: var(--tw-content);
    opacity: 1;
}

/*== Select ==*/

.select-box {
    position: relative;
}

.select-box select.select-hidden {
    visibility: hidden;
    display: none;
    opacity: 0;
}

.select-box .select {
    position: relative;
    display: flex;
    height: 45px;
    width: 100%;
    cursor: pointer;
    flex-direction: column;
    justify-content: flex-start;
}

.select-box .select-title {
    position: absolute;
    top: -6px;
    left: 1.5rem;
    z-index: 10;
    font-size: 13px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.select-box .select-title::before {
    position: absolute;
    top: 6px;
    left: -4px;
    z-index: -1;
    height: 1px;
    width: calc(100% + 8px);
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.select-box .select-styled {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    cursor: pointer;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.select-box .select-styled::after {
    position: absolute;
    right: 1rem;
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    background-image: url('../images/icon/icon-dropdown-arrow-black.svg');
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    content: var(--tw-content);
    transition-timing-function: linear;
}

.select-box.error .select-styled {
    --tw-border-opacity: 1;
    border-color: rgb(255 0 0 / var(--tw-border-opacity));
}

.select-box.primary2 .select-styled::after {
    content: var(--tw-content);
    background-image: url('../images/icon/icon-dropdown-arrow-blue.svg');
}

.select-box.primary2 .select-styled,
.select-box.primary2 .select-options li {
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.select-box.center .select-styled,
.select-box.center .select-options li {
    text-align: center;
}

.select-box .select-styled:active,
.select-box .select-styled.active {
    display: block;
    --tw-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select-box .select-styled:active::after,
.select-box .select-styled.active::after {
    content: var(--tw-content);
    --tw-rotate: 180deg;
    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));
}

.select-box .select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0px;
    right: 0px;
    z-index: 30;
    max-height: 300px;
    width: 100%;
    cursor: pointer;
    overflow-y: auto;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    --tw-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select-box .select-options li {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(110 110 110 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.select-box .select-options li:hover,
.select-options li.is-selected {
    background-color: rgb(223 223 223 / 0.2);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.select-box .select-options li[rel='hide'],
.select-box .select-options li[rel='placeholder'] {
    display: none;
}

.select-box .select-styled.placeholder {
    --tw-text-opacity: 1;
    color: rgb(192 192 192 / var(--tw-text-opacity));
}

/*== Switcher ==*/

.checkbox-switcher-wrap .checkbox-switcher {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(234 234 240 / var(--tw-bg-opacity));
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.checkbox-switcher-wrap input[type='checkbox'] {
    display: none;
}

.checkbox-switcher-wrap.checkbox-switcher-md .checkbox-switcher {
    height: 1.5rem;
    width: 2.5rem;
    transition-duration: 300ms;
}

.checkbox-switcher-wrap.checkbox-switcher-md .checkbox-switcher::after {
    top: 2px;
    left: 2px;
    height: 1.25rem;
    content: var(--tw-content);
    width: 1.25rem;
}

.checkbox-switcher-wrap.checkbox-switcher-lg .checkbox-switcher {
    height: 2.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.checkbox-switcher-wrap.checkbox-switcher-lg .checkbox-switcher::after {
    top: 0.25rem;
    left: 0.25rem;
    height: 2rem;
    content: var(--tw-content);
    width: 2rem;
}

.checkbox-switcher-wrap.checkbox-switcher-lg .checkbox-switcher span {
    position: absolute;
    left: 0px;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    line-height: 20px;
    line-height: 2.5rem;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
    transition: 0.2s cubic-bezier(0.54, 1.6, 0.5, 1);
}

.checkbox-switcher-wrap.checkbox-switcher-lg .checkbox-switcher i {
    position: absolute;
    left: calc(100% - 36px);
    top: 0.25rem;
    z-index: 10;
    height: 2rem;
    width: 2rem;
    padding: 0.125rem;
}

.checkbox-switcher-wrap .checkbox-switcher::after {
    position: absolute;
    display: block;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    transition: 0.2s cubic-bezier(0.54, 1.6, 0.5, 1);
}

.checkbox-switcher-wrap input:checked + .checkbox-switcher {
    --tw-bg-opacity: 1;
    background-color: rgb(35 225 88 / var(--tw-bg-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.checkbox-switcher-wrap.checkbox-switcher-md input:checked + .checkbox-switcher::after {
    left: calc(100% - 22px);
}

.checkbox-switcher-wrap.checkbox-switcher-lg input:checked + .checkbox-switcher::after {
    left: calc(100% - 36px);
}

.checkbox-switcher-wrap.checkbox-switcher-lg input:checked + .checkbox-switcher span {
    padding-left: 0.625rem;
    text-align: left;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
    transition: 0.2s cubic-bezier(0.54, 1.6, 0.5, 1);
}

/*== ScrollBar ==*/

/* Promo */

.promo-modal::-webkit-scrollbar {
    width: 0.25rem;
}

.promo-modal::-webkit-scrollbar-track {
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.promo-modal::-webkit-scrollbar-thumb {
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@media (min-width: 640px) {
    .promo-modal::-webkit-scrollbar-thumb {
        --tw-bg-opacity: 1;
        background-color: rgb(223 223 223 / var(--tw-bg-opacity));
    }
}

/* 若需使用通用Scrollbar樣式，可套用class="rounded-gray-scrollbar" */

.rounded-gray-scrollbar::-webkit-scrollbar,
.select-box .select-options::-webkit-scrollbar,
.popup .overflow-y-scroll::-webkit-scrollbar {
    width: 0.375rem;
}

.rounded-gray-scrollbar::-webkit-scrollbar-track,
.select-box .select-options::-webkit-scrollbar-track,
.popup .overflow-y-scroll::-webkit-scrollbar-track {
    border-width: 0px;
    background-color: transparent;
}

.rounded-gray-scrollbar::-webkit-scrollbar-thumb,
.select-box .select-options::-webkit-scrollbar-thumb,
.popup .overflow-y-scroll::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    border-width: 0px;
    background-color: transparent;
}

@media (min-width: 640px) {
    .rounded-gray-scrollbar::-webkit-scrollbar-thumb,
    .select-box .select-options::-webkit-scrollbar-thumb,
    .popup .overflow-y-scroll::-webkit-scrollbar-thumb {
        --tw-bg-opacity: 1;
        background-color: rgb(223 223 223 / var(--tw-bg-opacity));
    }
}

/*== Message ==*/

.form-error-message {
    display: flex;
    justify-content: flex-end;
    align-self: center;
    text-align: right;
    vertical-align: middle;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(247 54 3 / var(--tw-text-opacity));
}

.form-error-message i {
    margin-left: 0.25rem;
    display: inline-block;
    height: 1rem;
    width: 1rem;
}

/*== Text Tag ==*/

.text-tag-errorRed {
    position: absolute;
    top: -0.75rem;
    right: 0.5rem;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 241 / var(--tw-bg-opacity));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 13px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(255 0 0 / var(--tw-text-opacity));
}

/*== Image ==*/

a .avatar,
.avatar {
    position: relative;
    box-sizing: border-box;
    height: 2.75rem;
    width: 2.75rem;
    overflow: hidden;
    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(234 234 240 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    background-size: cover;
    background-position: center;
    vertical-align: middle;
    font-size: 0px;
}

a .avatar img,
.avatar img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: auto;
    min-height: 100%;
    width: 100%;
    border-width: 0px;
    border-color: transparent;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

a .avatar img:not([src]),
a .avatar img[src=''] {
    opacity: 0;
}

/*== List Item ==*/

.list-row-item,
.order-history-item {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    width: 100%;
    max-width: 610px;
    justify-content: space-between;
    border-radius: 10px;
    border-width: 1px;
    padding: 1rem;
    border-color: #9a9a9a16;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 12px;
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-shadow-color: #9a9a9a26;
    --tw-shadow: var(--tw-shadow-colored);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.list-row-item:hover,
.order-history-item:hover {
    --tw-shadow-color: #9a9a9a47;
    --tw-shadow: var(--tw-shadow-colored);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .list-row-item,
    .order-history-item {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        padding: 2rem;
    }
}

.list-row-content,
.order-history-item .order-history-content {
    margin-left: 1rem;
    display: inline-block;
    width: 36vw;
    min-width: 100px;
    max-width: 20rem;
}

@media screen and (max-width: 375px) {
    .list-row-content,
    .order-history-item .order-history-content {
        width: 43vw;
    }
}

.list-row-title,
.order-history-item .order-history-brand {
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    line-height: 24px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.list-row-date,
.order-history-item .order-history-date {
    margin-bottom: 0.25rem;
    display: flex;
    font-size: 13px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.list-row-installment,
.order-history-item .order-history-installment {
    font-size: 14px;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.list-row-state,
.order-history-item .order-history-state {
    font-size: 14px;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.list-row-total,
.order-history-item .order-history-total {
    align-self: flex-start;
    text-align: right;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .list-row-total,
    .order-history-item .order-history-total {
        font-size: 18px;
        line-height: 30px;
    }
}

/*== Terms ==*/

.terms-list {
    list-style-position: outside;
    font-size: 14px;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.terms-list.secondary1 {
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.terms-list li {
    font-weight: 500;
}

.terms-sublist {
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;
    margin-left: 1rem;
    list-style-type: decimal;
}

.terms-sublist li {
    list-style-type: lower-latin;
    font-weight: 400;
}

.terms-sublist ul {
    margin-left: 1.25rem;
    list-style-type: none;
    font-weight: 400;
}

.terms-sublist ul li {
    list-style-type: lower-roman;
    /* @apply -indent-5 before:content-['('counter(my-counter)')'] before:mr-0.5;
    counter-increment: my-counter; */
}

.terms-sublist ul li ol li {
    margin-left: 1.25rem;
    list-style-type: disc;
}

/*== Promo ==*/

.promo-modal {
    position: fixed;
    top: 0px;
    left: 50%;
    z-index: 1000;
    margin: auto;
    height: 100vh;
    width: 100%;
    max-width: 436px;
    --tw-translate-x: -50%;
    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));
    overflow-y: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

@media (min-width: 640px) {
    .promo-modal {
        top: 50%;
        height: 95vh;
        max-height: 740px;
        --tw-translate-y: -50%;
        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));
        overflow-y: auto;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.promo-modal .swiper-button-next::after,
.promo-modal .swiper-button-prev::after {
    content: '';
}

.promo-modal .swiper-button-prev,
.swiper-button-next {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 0px;
    height: auto;
    width: auto;
    align-content: space-between;
    align-items: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    opacity: 1;
}

.promo-modal .swiper-button-prev.swiper-button-disabled,
.promo-modal .swiper-button-next.swiper-button-disabled {
    opacity: 0;
}

.promo-modal .swiper-pagination span.swiper-pagination-bullet {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
    display: inline-block;
    height: 5px;
    width: 5px;
    cursor: pointer;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(228 228 226 / var(--tw-bg-opacity));
    opacity: 1;
}

.promo-modal .swiper-pagination span.swiper-pagination-bullet-active {
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 108 / var(--tw-bg-opacity));
}

.promo-modal .inner-plan {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.promo-modal .inner-process {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (min-width: 640px) {
    .promo-modal .inner-process {
        min-height: 306px;
    }
}

.promo-modal .plan-col {
    margin-top: 1rem;
    display: flex;
    height: 86px;
    width: 48%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: rgb(228 228 226 / 0.4);
    text-align: center;
    --tw-shadow: 0 0 8px rgba(96, 96, 96, 0.1);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.promo-modal .plan-col.active {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(255 143 8 / var(--tw-border-opacity));
}

.promo-modal .plan-col div .promo-tag {
    margin-bottom: 0.25rem;
    display: inline-block;
    width: auto;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 143 8 / var(--tw-bg-opacity));
    padding: 2px;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.promo-modal .plan-col div p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 143 8 / var(--tw-text-opacity));
}

.promo-modal .plan-col div p span {
    align-items: flex-end;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.promo-modal .plan-total-wrapper {
    display: block;
    width: 100%;
}

.promo-modal .plan-total-wrapper p {
    margin-top: 1rem;
    text-align: left;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.promo-modal .plan-total-wrapper p span {
    display: inline;
}

/*== Installments ==*/

.plan-wrap .plan-item {
    margin-top: 14px;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.plan-wrap .plan-tag {
    width: 25%;
    min-width: 94px;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 245 239 / var(--tw-bg-opacity));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(255 143 8 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
    .plan-wrap .plan-tag {
        width: 20%;
    }
}

/* .plan-wrap .plan-item.plan-disabled{
    @apply cursor-default;
  } */

.plan-wrap .plan-item.plan-disabled .plan-tag {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.plan-wrap .plan-item:hover > .plan-tag,
.plan-wrap .plan-item:hover > .plan-price {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

@media (min-width: 1024px) {
    .plan-wrap .plan-item:hover > .plan-tag,
    .plan-wrap .plan-item:hover > .plan-price {
        opacity: 0.6;
    }
}

.plan-wrap .plan-highlight {
    --tw-bg-opacity: 1;
    background-color: rgb(255 143 8 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.plan-wrap .plan-item .plan-price {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.plan-wrap .plan-item.plan-disabled .plan-price {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.plan-wrap .plan-price span {
    margin-left: 0.25rem;
    font-size: 14px;
    line-height: 20px;
}

.plan-wrap .active {
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 143 8 / var(--tw-border-opacity));
    --tw-shadow-color: rgb(0 0 0 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
}

@media (min-width: 1024px) {
    .plan-wrap .plan-item.active:hover > .plan-tag,
    .plan-item.active:hover > .plan-price,
    .plan-wrap .plan-item.plan-disabled.active:hover > .plan-tag,
    .plan-item.plan-disabled.active:hover > .plan-price {
        opacity: 1;
    }
}

.plan-payment-deadline-item {
    position: relative;
    width: 52px;
    cursor: pointer;
    opacity: 0.3;
    --tw-shadow: 0px 0px 14px rgba(255, 219, 194, 0.5);
    --tw-shadow-colored: 0px 0px 14px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.plan-payment-deadline-item.active {
    opacity: 1;
}

.plan-payment-deadline-item img {
    display: block;
    width: 100%;
}

.plan-payment-deadline-item span {
    position: absolute;
    bottom: 0.625rem;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    background-image: linear-gradient(90deg, #ff6700 0%, #ffae11 100%);
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.plan-tab-dropdown {
    display: flex;
    cursor: pointer;
    justify-content: space-between;
}

.plan-tab-dropdown .plan-col-dropdown-arrow {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: linear;
}

.plan-tab-dropdown.toggle .plan-col-dropdown-arrow {
    --tw-rotate: 180deg;
    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));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: linear;
}

.plan-tab-dropdown .plan-col-dropdown-arrow img {
    display: inline-block;
    vertical-align: middle;
}

.plan-content-dropdown {
    padding-top: 1rem;
}

.b-installments .plan-col-title {
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

/*== Index ==*/

/* Index > Swiper Slider */

@media (min-width: 1280px) {
    .b-index .swiper-wrapper .swiper-slide:first-child {
        margin-left: 0px;
    }

    .b-index .index-order .order-carousel .swiper-wrapper .swiper-slide:first-child {
        margin-left: -10px;
    }

    .b-index .swiper-wrapper .swiper-slide:last-child {
        margin-right: 0px;
    }
}

.b-index .order-carousel-button-next,
.b-index .news-carousel-button-next,
.b-index .rec-carousel-button-next {
    position: absolute;
    right: -1.25rem;
    top: 60%;
    z-index: 10;
    display: none;
    height: 1.5rem;
    width: 1.5rem;
    --tw-translate-y: -50%;
    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));
}

@media (min-width: 1280px) {
    .b-index .order-carousel-button-next,
    .b-index .news-carousel-button-next,
    .b-index .rec-carousel-button-next {
        display: inline-block;
    }
}

/* Index > Overview */

.index-overview {
    margin: auto;
    margin-bottom: 2rem;
    display: flex;
    max-width: 1160px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .index-overview {
        margin-bottom: 60px;
    }
}

.index-overview .overview-quota-price.hide {
    position: relative;
    top: 0.125rem;
    letter-spacing: .14em;
}

.index-overview .eye-box {
    position: absolute;
    right: 1rem;
    z-index: 10;
    margin-left: 0.5rem;
    margin-top: -0.25rem;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    border-radius: 9999px;
    background-color: #ffffff33;
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.index-overview .eye-box:hover {
    transition-duration: 300ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .index-overview .eye-box {
        right: 1.75rem;
    }

    .index-overview .eye-box:hover {
        opacity: 0.75;
        --tw-shadow: 0 0 6px 0px #FF5C4633;
        --tw-shadow-colored: 0 0 6px 0px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
}

.index-overview.disabled .eye-box {
    display: none;
}

.index-overview.disabled .overview-col:first-child a .overview-quota-price {
    display: inline-block;
    min-width: 105px;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .index-overview.disabled .overview-col:first-child a .overview-quota-price {
        min-width: 131px;
        font-size: 24px;
        line-height: 36px;
    }
}

/* Index > Order */

.index-order .order-carousel a {
    margin-left: 0.375rem;
    margin-right: 0.375rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    width: 18rem;
    justify-content: space-between;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-shadow: 1px 0 12px 0px #9a9a9a26;
    --tw-shadow-colored: 1px 0 12px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.index-order .order-carousel a:hover {
    --tw-shadow: 0 0 12px 0px #9a9a9a47;
    --tw-shadow-colored: 0 0 12px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .index-order .order-carousel a {
        margin-top: 1.5rem;
        padding-bottom: 2rem;
    }
}

a .order-avatar,
.order-avatar {
    position: relative;
    box-sizing: border-box;
    height: 2.75rem;
    width: 2.75rem;
    overflow: hidden;
    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(234 234 240 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    background-size: cover;
    background-position: center;
    vertical-align: middle;
    font-size: 0px;
}

a .order-avatar img,
.order-avatar img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: auto;
    min-height: 100%;
    width: 100%;
    border-width: 0px;
    border-color: transparent;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

a .order-avatar img:not([src]),
a .order-avatar img[src=''] {
    opacity: 0;
}

.index-order .order-carousel a .order-content {
    display: inline-block;
}

@media (min-width: 1280px) {
    .index-order .order-carousel a:first-child {
        --tw-shadow: 2px 0 12px 0px #9a9a9a26;
        --tw-shadow-colored: 2px 0 12px 0px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .index-order .order-carousel a:first-child:hover {
        --tw-shadow: 2px 0 12px 0px #9a9a9a47;
        --tw-shadow-colored: 2px 0 12px 0px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
}

/* Index > News */

.index-news .news-carousel a.swiper-slide {
    position: relative;
    margin-left: 0.375rem;
    margin-right: 0.375rem;
    display: flex;
    width: auto;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}

.index-news .news-carousel a.swiper-slide .news-img {
    position: relative;
    height: 170px;
    width: 335px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.index-news .news-carousel a.swiper-slide .news-img::after {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    transition-duration: 300ms;
    content: var(--tw-content);
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .index-news .news-carousel a.swiper-slide .news-img {
        width: 364px;
    }
}

.index-news .news-carousel a.swiper-slide .news-img::after {
    background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(179, 179, 179, 0) 50%,
            rgba(115, 115, 115, 0.4) 72%,
            rgba(50, 50, 50, 0.8) 100%
    );
}

.index-news .news-carousel a.swiper-slide.empty .news-img::after {
    content: var(--tw-content);
    opacity: 0;
}

.index-news .news-carousel a:hover > .news-img::after {
    transition-duration: 300ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .index-news .news-carousel a:hover > .news-img::after {
        opacity: 0.7;
    }
}

.index-news .news-carousel .news-content {
    position: absolute;
    bottom: 1.25rem;
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.index-news .news-carousel .news-carousel-pagination span.swiper-pagination-bullet {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: inline-block;
    height: 7px;
    width: 7px;
    cursor: pointer;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(234 234 240 / var(--tw-bg-opacity));
    opacity: 1;
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.index-news .news-carousel .news-carousel-pagination span.swiper-pagination-bullet:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(207 207 207 / var(--tw-bg-opacity));
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.index-news .news-carousel .news-carousel-pagination span.swiper-pagination-bullet-active {
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity));
}

.index-news .news-carousel .news-carousel-pagination span.swiper-pagination-bullet-active:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity));
}

/* Index > Recommend */

.index-rec .rec-carousel a {
    margin-left: 0.625rem;
    margin-right: 0.625rem;
    margin-top: 0.75rem;
    margin-bottom: 1.75rem;
    display: flex;
    width: 180px;
    flex-direction: column;
    font-size: 0px;
}

@media (min-width: 768px) {
    .index-rec .rec-carousel a {
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
        width: 210px;
    }
}

.index-rec .rec-carousel a .rec-img img {
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.index-rec .rec-carousel a .rec-img:hover > img {
    transition-duration: 500ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .index-rec .rec-carousel a .rec-img:hover > img {
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
        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));
    }
}

.index-rec .rec-carousel-pagination.swiper-pagination-progressbar {
    top: initial;
    bottom: 0px;
    left: 50%;
    height: 1px;
    width: calc(100% - 40px);
    --tw-translate-x: -50%;
    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));
    --tw-bg-opacity: 1;
    background-color: rgb(234 234 240 / var(--tw-bg-opacity));
}

@media (min-width: 1280px) {
    .index-rec .rec-carousel-pagination.swiper-pagination-progressbar {
        width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.index-rec .rec-carousel-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
}

/* Index > QA */

.index-qa .qa-page {
    margin-top: 2rem;
    display: flex;
    width: auto;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity));
    transition-duration: 500ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .index-qa .qa-page {
        margin-top: 3rem;
    }
}

.index-qa .qa-page {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.index-qa .qa-page:hover > svg {
    -webkit-animation: arrowEffect 0.8s linear alternate infinite;
    animation: arrowEffect 0.8s linear alternate infinite;
    position: relative;
    transition-duration: 300ms;
    transition-timing-function: linear;
}

/*== Index QA | FAQ ==*/

.qa-tab-carousel .qa-tab {
    margin-right: 0.875rem;
    display: flex;
    width: auto;
    border-radius: 10px;
}

.qa-tab-carousel .qa-tab a {
    display: flex;
    width: auto;
    cursor: pointer;
    border-radius: 10px;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity));
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.qa-tab-carousel .qa-tab a:hover {
    opacity: 0.75;
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.qa-tab-carousel .qa-tab.active a {
    background-color: rgb(255 103 0 / 0.05);
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.qa-tab-carousel .qa-tab.active a:hover {
    opacity: 1;
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.qa-list {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.qa-list .qa-item {
    margin-top: 1.25rem;
    cursor: pointer;
}

.qa-list .qa-item .qa-question {
    position: relative;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    padding-left: 1rem;
    padding-right: 2rem;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.qa-list .qa-item .qa-question::after {
    position: absolute;
    top: 26px;
    right: 1rem;
    height: 9px;
    width: 9px;
    --tw-translate-y: -50%;
    --tw-rotate: 135deg;
    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));
    border-top-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
    transition-duration: 200ms;
    content: var(--tw-content);
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .qa-list .qa-item .qa-question {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        padding-left: 1.25rem;
        padding-right: 2.5rem;
        font-size: 15px;
        line-height: 24px;
    }

    .qa-list .qa-item .qa-question::after {
        top: 2rem;
        content: var(--tw-content);
        right: 1.25rem;
    }
}

.qa-list .qa-item.open .qa-question::after {
    content: var(--tw-content);
    --tw-rotate: -45deg;
    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));
}

.qa-list .qa-item .qa-answer {
    height: auto;
    cursor: default;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.qa-list .qa-item .qa-answer a {
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.qa-list .qa-item .qa-answer a:hover {
    --tw-text-opacity: 1;
    color: rgb(110 110 110 / var(--tw-text-opacity));
}

/*== News ==*/

.news-article .article-content a {
    font-weight: 700;
    transition-duration: 300ms;
    transition-timing-function: linear;
}

.news-article .article-content a:hover {
    --tw-text-opacity: 1;
    color: rgb(110 110 110 / var(--tw-text-opacity));
}

/*== App Intro ==*/

.app-intro-carousel .app-intro-carousel-pagination span.swiper-pagination-bullet {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: inline-block;
    height: 2px;
    width: 27px;
    cursor: pointer;
    border-radius: 30px;
    --tw-bg-opacity: 1;
    background-color: rgb(234 234 240 / var(--tw-bg-opacity));
    opacity: 1;
}

.app-intro-carousel .app-intro-carousel-pagination span.swiper-pagination-bullet-active {
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity));
}

/*== Order History ==*/

.order-history-wrap {
    margin-left: auto;
    margin-right: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    width: calc(100% - 40px);
    max-width: 610px;
}

.order-history-carousel .swiper-slide .order-history-item-empty,
.order-history-carousel .swiper-slide .order-history-item {
    opacity: 0;
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.order-history-carousel .swiper-slide.swiper-slide-active .order-history-item-empty,
.order-history-carousel .swiper-slide.swiper-slide-active .order-history-item {
    opacity: 1;
    transition-duration: 100ms;
    transition-timing-function: linear;
}

.order-history-tab.active {
    --tw-border-opacity: 1;
    border-color: rgb(255 103 0 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity));
}

/*== Order History ==*/

.order-history-col .order-history-notice:hover ~ .order-history-notice-hover {
    transition-duration: 300ms;
    transition-timing-function: linear;
}

@media (min-width: 768px) {
    .order-history-col .order-history-notice:hover ~ .order-history-notice-hover {
        opacity: 1;
    }
}

/*== Quota Info ==*/

/* 待修改 */

@media screen and (max-width: 360px) {
    .quota-info-total p {
        font-size: 12px;
        line-height: 16px;
    }
}

.quota-graident.switch-off {
    opacity: 0.4;
}

.quota-graident .quota-price.switch-off {
    font-size: 18px;
    line-height: 30px;
}

.quota-switch {
    position: absolute;
    right: 36px;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    height: 30px;
    width: 88px;
    cursor: pointer;
    align-items: center;
    border-radius: 20px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 0.25rem;
    font-size: 10px;
}

.switch-content {
    --tw-text-opacity: 1;
    color: rgb(110 110 110 / var(--tw-text-opacity));
}

.switch-state {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    background-image: linear-gradient(90deg, #ff6700 0%, #ffae11 100%);
}

.switch-on .switch-content {
    --tw-translate-x: 0.25rem;
    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));
}

.switch-on .switch-state {
    --tw-translate-x: 3.5rem;
    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));
}

/*== Bill ==*/

.b-bill .page-return-wrap {
    position: absolute;
}

.b-bill .page-title {
    position: absolute;
    top: -2.5rem;
}

.b-bill .index-header ~ main::before {
    content: var(--tw-content);
    background-image: linear-gradient(270deg, #ffa024 3.87%, #ff5c46 93.47%);
}

@media (min-width: 768px) {
    .b-bill .index-header ~ main::before {
        content: var(--tw-content);
        background-image: none;
    }
}

.b-bill .bill-tab {
    width: 50%;
    cursor: pointer;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(234 234 240 / var(--tw-border-opacity));
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(92 92 92 / var(--tw-text-opacity));
}

.b-bill .bill-tab:hover {
    opacity: 0.8;
}

.b-bill .bill-subtab {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 13px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(92 92 92 / var(--tw-text-opacity));
    border-color: #9a9a9a16;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 12px;
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-shadow-color: #9a9a9a26;
    --tw-shadow: var(--tw-shadow-colored);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.b-bill .bill-subtab:hover {
    --tw-shadow-color: #9a9a9a47;
    --tw-shadow: var(--tw-shadow-colored);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.b-bill .bill-tab.active,
.b-bill .bill-subtab.active {
    --tw-border-opacity: 1;
    border-color: rgb(255 103 0 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity));
}

.b-bill .list-row-installment {
    position: relative;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 160%;
}

.popup .popup-modal-payment {
    position: fixed;
    bottom: 0px;
    z-index: 1000;
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

@media (min-width: 768px) {
    .popup .popup-modal-payment {
        bottom: 50%;
        --tw-translate-y: 50%;
        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));
    }
}

.popup-contnent-payment {
    position: relative;
    max-height: 408px;
    width: 100%;
    max-width: 535px;
    overflow-y: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .popup-contnent-payment {
        border-radius: 1.5rem;
        padding: 3.5rem;
    }
}

.popup-contnent-payment h3 {
    margin-bottom: 1rem;
    font-size: 14px;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .popup-contnent-payment h3 {
        margin-bottom: 1.5rem;
    }
}

.popup-contnent-payment .popup-item-payment {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 14px;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.popup-contnent-payment .popup-item-payment:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity));
}

.popup-contnent-payment .popup-item-payment .popup-item-name-payment {
    display: flex;
}

.popup-contnent-payment .popup-item-payment .popup-item-name-payment img {
    margin-right: 0.5rem;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
}

.popup-contnent-payment .popup-item-payment img.popup-item-arrow-payment {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
}

.popup-contnent-payment .popup-item-payment.disabled {
    cursor: default;
    color: rgb(33 33 33 / 0.3);
}

.popup-contnent-payment .popup-item-payment.disabled:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}

.popup-contnent-payment .popup-item-payment.disabled .popup-item-name-payment img {
    opacity: 0.3;
}

.popup-contnent-payment .popup-item-payment.disabled img.popup-item-arrow-payment {
    opacity: 0.3;
}

/*== Bill Payment Details ==*/

.b-billPaymentDetails .check-list {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 3.5rem;
}

.b-billPaymentDetails .payment-details-latefee .check-list {
    padding-bottom: 1.75rem;
}

.b-billPaymentDetails .payment-details .payment-details-list {
    padding-top: 1.25rem;
}

.b-billPaymentDetails .payment-details {
    position: relative;
    padding-bottom: 1.25rem;
}

.b-billPaymentDetails .check-list .check-content-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.b-billPaymentDetails .check-list .check-content-left i {
    margin-right: 0.75rem;
    display: flex;
    height: 14px;
    width: 14px;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 108 / var(--tw-bg-opacity));
}

.b-billPaymentDetails .check-list .check-content-left i img {
    display: block;
    width: 100%;
}

.b-billPaymentDetails .check-list .check-content-left p {
    display: flex;
    text-align: left;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.b-billPaymentDetails .check-list .check-content-right p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.b-billPaymentDetails .check-list .check-content-left i {
    position: relative;
}

.b-billPaymentDetails .check-list .check-content-left i::after {
    position: absolute;
    left: 6px;
    bottom: -3rem;
    height: 2rem;
    border-left-width: 1px;
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-left-color: rgb(207 207 207 / var(--tw-border-opacity));
}

.b-billPaymentDetails .check-list:last-of-type .check-content-left i::after {
    content: var(--tw-content);
    display: none;
}

.b-billPaymentDetails .check-list:last-of-type {
    padding-bottom: 0px;
}

.b-billPaymentDetails .payment-details-latefee .check-list .check-content-left i::after {
    content: var(--tw-content);
    display: none;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    flex-direction: row;
    padding-left: 1.25rem;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow p {
    margin-right: 0.25rem;
    display: flex;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.plan-tab-dropdown .b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow i {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: linear;
}

.plan-tab-dropdown.toggle .b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow i {
    --tw-rotate: 180deg;
    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));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: linear;
}

.plan-tab-dropdown .b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow i img {
    display: inline-block;
    vertical-align: middle;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow i {
    display: flex;
    width: 1.25rem;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow i img {
    display: block;
    width: 100%;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow-expand {
    position: absolute;
    bottom: 3.5rem;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow-collapse {
    display: none;
    padding-top: 0.75rem;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-arrow-collapse i {
    --tw-rotate: 180deg;
    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));
}

/* 展開/收起 */

.b-billPaymentDetails .payment-details.payment-details-more input[type='radio'],
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-expand:checked
~ .payment-details-arrow-expand {
    display: none;
}

.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-expand:checked
~ .payment-details-arrow-collapse,
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-expand:checked
~ .payment-details-list
.check-list {
    display: flex;
}

.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-expand:checked
~ .payment-details-list
.check-list:last-of-type {
    padding-top: 0px;
}

.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-expand:checked
~ .payment-details-list
.check-list:nth-of-type(3)
.check-content-left
i::after {
    content: var(--tw-content);
    border-style: solid;
}

.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-arrow-collapse,
.b-billPaymentDetails .payment-details.payment-details-more .payment-details-list .check-list,
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-list
.check-list {
    display: none;
}

.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-arrow-expand,
.b-billPaymentDetails .payment-details.payment-details-more .payment-details-list .check-list:first-of-type,
.b-billPaymentDetails .payment-details.payment-details-more .payment-details-list .check-list:nth-of-type(2),
.b-billPaymentDetails .payment-details.payment-details-more .payment-details-list .check-list:nth-of-type(3),
.b-billPaymentDetails .payment-details.payment-details-more .payment-details-list .check-list:last-of-type,
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-list
.check-list:first-of-type,
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-list
.check-list:nth-of-type(2),
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-list
.check-list:nth-of-type(3),
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-list
.check-list:last-of-type {
    display: flex;
}

.b-billPaymentDetails .payment-details.payment-details-more .payment-details-list .check-list:last-of-type,
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-list
.check-list:last-of-type {
    padding-top: 2.25rem;
}

.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-list
.check-list:nth-of-type(3)
.check-content-left
i::after,
.b-billPaymentDetails
.payment-details.payment-details-more
.payment-details-radio-collapse:checked
~ .payment-details-list
.check-list:nth-of-type(3)
.check-content-left
i::after {
    content: var(--tw-content);
    border-style: dashed;
}

/*== Bill Late Fee ==*/

.bill-latefee-col {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.25rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(234 234 240 / var(--tw-border-opacity));
    padding-bottom: 1.25rem;
}

.bill-latefee-col:last-child {
    border-style: none;
    padding-bottom: 0px;
}

.bill-period-col {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.25rem;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.bill-period-col::after {
    position: absolute;
    left: 8px;
    bottom: -2rem;
    height: 1.75rem;
    width: 1px;
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(207 207 207 / var(--tw-bg-opacity));
}

.bill-period-col:last-child {
    margin-bottom: 0px;
}

.bill-period-col:last-child::after {
    content: var(--tw-content);
    display: none;
}

.bill-period-col.all {
    margin-bottom: 1rem;
}

.bill-period-col.all::after {
    content: var(--tw-content);
    display: none;
}

.bill-period-col.overdue {
    --tw-text-opacity: 1;
    color: rgb(255 0 0 / var(--tw-text-opacity));
}

.bill-period-col.current {
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

/*== LBS ==*/

.lbs-search-btn-wrap {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 3rem;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .lbs-search-btn-wrap {
        margin-bottom: 1.5rem;
        height: 4rem;
        width: calc(100% - 40px);
        border-radius: 10px;
        border-width: 1px;
        padding: 1.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-color: #9a9a9a16;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: #9a9a9a26;
        --tw-shadow: var(--tw-shadow-colored);
        transition-duration: 500ms;
        transition-timing-function: linear;
    }

    .lbs-search-btn-wrap:hover {
        --tw-shadow-color: #9a9a9a47;
        --tw-shadow: var(--tw-shadow-colored);
        transition-duration: 500ms;
        transition-timing-function: linear;
    }
}

@media (min-width: 1280px) {
    .lbs-search-btn-wrap {
        width: 100%;
        max-width: 1120px;
    }
}

@media (min-width: 1680px) {
    .lbs-search-btn-wrap {
        max-width: 80rem;
    }
}

.lbs-search-btn-wrap .lbs-search-btn {
    display: flex;
    height: 3rem;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-items: center;
    font-size: 15px;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .lbs-search-btn-wrap .lbs-search-btn {
        height: 4rem;
    }
}

.lbs-search-btn-wrap .lbs-search-btn i {
    margin-right: 0.25rem;
    height: 1.5rem;
    width: 1.5rem;
}

.lbs-frame {
    /* 120為瀏覽器高度 */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: calc(100vh - 108px - 140px);
    height: calc(var(--vh) * 100 - 108px - 140px);
}

@media (min-width: 768px) {
    .lbs-frame {
        height: calc(100vh - 244px - 23.5px);
        max-height: 768px;
        width: calc(100% - 40px);
        border-radius: 10px;
        border-width: 1px;
        padding: 2rem;
        border-color: #9a9a9a16;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: #9a9a9a26;
        --tw-shadow: var(--tw-shadow-colored);
        transition-duration: 500ms;
        transition-timing-function: linear;
    }

    .lbs-frame:hover {
        --tw-shadow-color: #9a9a9a47;
        --tw-shadow: var(--tw-shadow-colored);
        transition-duration: 500ms;
        transition-timing-function: linear;
    }
}

@media (min-width: 1280px) {
    .lbs-frame {
        width: 100%;
        max-width: 1120px;
    }
}

@media (min-width: 1680px) {
    .lbs-frame {
        max-width: 80rem;
    }
}

@media (min-width: 768px) {
    .lbs-frame.lbs-frame-maps {
        min-height: 660px;
        padding-top: 5rem;
    }
}

.lbs-frame.lbs-frame-maps h3 {
    position: absolute;
    top: 2rem;
    display: none;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .lbs-frame.lbs-frame-maps h3 {
        display: block;
    }
}

.lbs-frame.lbs-frame-search .lbs-search-box {
    flex-wrap: wrap;
}

.lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar,
.lbs-frame.lbs-frame-search .lbs-search-district-box::-webkit-scrollbar {
    width: 1px;
}

.lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar-track,
.lbs-frame.lbs-frame-search .lbs-search-district-box::-webkit-scrollbar-track {
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(234 234 240 / var(--tw-bg-opacity));
}

.lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar-thumb,
.lbs-frame.lbs-frame-search .lbs-search-district-box::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    border-width: 0px;
    background-color: transparent;
}

@media (min-width: 640px) {
    .lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar-thumb,
    .lbs-frame.lbs-frame-search .lbs-search-district-box::-webkit-scrollbar-thumb {
        --tw-bg-opacity: 1;
        background-color: rgb(207 207 207 / var(--tw-bg-opacity));
    }
}

@media (min-width: 768px) {

    .popup .lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar {
        width: 0.375rem;
    }


    .popup .lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar-track {
        border-width: 0px;
        background-color: transparent;
    }


    .popup .lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        border-width: 0px;
        background-color: transparent;
    }

    @media (min-width: 640px) {

        .popup .lbs-frame.lbs-frame-search .lbs-search-county-box::-webkit-scrollbar-thumb {
            --tw-bg-opacity: 1;
            background-color: rgb(223 223 223 / var(--tw-bg-opacity));
        }
    }

    .lbs-frame.lbs-frame-search .lbs-search-county-box {
        height: 100%;
        width: 180px;
        overflow-y: scroll;
        padding-right: 1.5rem;
        vertical-align: top;
    }
}

.lbs-frame.lbs-frame-search .lbs-search-district-box {
    /* md:w-[calc(100%-185px)] */
}

@media (min-width: 768px) {
    .lbs-frame.lbs-frame-search .lbs-search-district-box {
        height: 100%;
        width: 450px;
        overflow-y: auto;
        padding-left: 1.5rem;
        vertical-align: top;
    }
}

.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(33 33 33 / var(--tw-border-opacity));
    background-color: transparent;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate {
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition-duration: 300ms;
}

.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate::before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    --tw-translate-x: -100%;
    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));
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
    opacity: 0;
    transition-duration: 500ms;
    content: var(--tw-content);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 768px) {
    .lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    .lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate:hover::before {
        --tw-translate-x: 0px;
        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));
        content: var(--tw-content);
        opacity: 1;
    }
}

.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate:hover > i img {
    transition-duration: 300ms;
}

@media (min-width: 768px) {
    .lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate:hover > i img {
        --tw-invert: invert(1);
        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);
    }
}

.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate i {
    margin-left: 0.5rem;
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
}

.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county.animate i img {
    display: block;
    width: 100%;
}

.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county {
    display: flex;
    justify-content: space-between;
    border-color: transparent;
    font-weight: 400;
}

.lbs-frame.lbs-frame-search .lbs-search-box div {
    display: flex;
    width: 50%;
    cursor: pointer;
    justify-content: space-between;
    border-radius: 10px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.lbs-frame.lbs-frame-search .lbs-search-box div:active {
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .lbs-frame.lbs-frame-search .lbs-search-box div {
        margin-bottom: 0.25rem;
    }

    .lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county {
        width: 100%;
    }

    .lbs-frame.lbs-frame-search .lbs-search-district-box div.lbs-search-district {
        display: inline-block;
        width: auto;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.lbs-frame.lbs-frame-search .lbs-search-box div.active {
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.lbs-frame.lbs-frame-search .lbs-search-box div.active > i img,
.lbs-frame.lbs-frame-search .lbs-search-county-box div.lbs-search-county:active > i img {
    --tw-invert: invert(1);
    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);
}

.lbs-info {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {
    .lbs-info {
        position: absolute;
        top: 104px;
        left: 3.5rem;
        border-radius: 10px;
        --tw-shadow: 0 0 12px;
        --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-shadow-color: #9a9a9a26;
        --tw-shadow: var(--tw-shadow-colored);
    }
}

.lbs-info .lbs-info-wrap {
    display: flex;
    height: 140px;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {
    .lbs-info .lbs-info-wrap {
        height: auto;
        max-height: 154px;
        width: 400px;
        align-items: flex-start;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.lbs-info .lbs-info-wrap i img {
    display: block;
    width: 100%;
}

.lbs-info .lbs-info-wrap .lbs-info-store p {
    font-size: 14px;
    line-height: 24px;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.lbs-info .lbs-info-wrap .lbs-info-store i {
    position: relative;
    top: -0.125rem;
    margin-right: 0.25rem;
    display: inline-block;
    width: 1.25rem;
}

.lbs-info .lbs-info-wrap p.lbs-info-name {
    margin-left: 1.75rem;
    margin-bottom: 0.5rem;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.lbs-info .lbs-info-wrap .lbs-info-store .lbs-info-content {
    display: inline-block;
    width: calc(100% - 60px);
    vertical-align: top;
}

.lbs-info .lbs-info-wrap .lbs-info-direction {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: flex-end;
}

.lbs-info .lbs-info-wrap .lbs-info-direction i {
    margin-bottom: 0.25rem;
    display: block;
    width: 1.5rem;
}

.lbs-info .lbs-info-wrap .lbs-info-direction p {
    font-size: 13px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

/*== easypay ==*/

.easypay-plan-wrap {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

@media (min-width: 768px) {
    .easypay-plan-wrap {
        padding: 2.25rem;
    }
}

.easypay-plan-wrap .easypay-payment-plan {
    display: flex;
    width: 33.333333%;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: solid;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.easypay-wrap {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    border-bottom-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 1rem;
    width: calc(100% - 40px);
    max-width: 610px;
}

@media (min-width: 768px) {
    .easypay-wrap {
        border-radius: 1.5rem;
        padding: 2.25rem;
    }
}

.easypay-wrap h3 {
    margin-bottom: 1rem;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
    .easypay-wrap h3 {
        margin-bottom: 1.5rem;
    }
}

.easypay-wrap > ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
}

.easypay-wrap .easypay-item {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 14px;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.easypay-wrap .easypay-item > label {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
}

.easypay-wrap .easypay-item > label > p {
    font-weight: 500;
}

.easypay-wrap .easypay-input {
    margin-right: 1rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(228 228 231 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.easypay-wrap .easypay-input:checked {
    margin-left: 2px;
    margin-right: 18px;
    height: 0.75rem;
    width: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity));
    outline-width: 1px;
    outline-color: #e4e4e7;
}

.easypay-wrap > ul > li > label svg {
    margin-right: 0.5rem;
    height: 1.5rem;
    width: 1.5rem;
}

.pointer-events-none {
    pointer-events: none;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}


.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-y-0 {
    top: 0px;
    bottom: 0px;
}

.-bottom-1\/2 {
    bottom: -50%;
}

.left-\[90\%\] {
    left: 90%;
}

.top-1\/2 {
    top: 50%;
}

.bottom-0 {
    bottom: 0px;
}

.top-\[13px\] {
    top: 13px;
}

.right-5 {
    right: 1.25rem;
}

.top-0 {
    top: 0px;
}

.left-0 {
    left: 0px;
}

.top-\[135px\] {
    top: 135px;
}

.top-\[115px\] {
    top: 115px;
}

.right-2 {
    right: 0.5rem;
}

.bottom-\[28px\] {
    bottom: 28px;
}

.right-10 {
    right: 2.5rem;
}

.bottom-\[25px\] {
    bottom: 25px;
}

.right-\[122px\] {
    right: 122px;
}

.bottom-\[-40px\] {
    bottom: -40px;
}


.-top-10 {
    top: -2.5rem;
}

.right-0 {
    right: 0px;
}

.left-1\/2 {
    left: 50%;
}

.top-6 {
    top: 1.5rem;
}

.right-6 {
    right: 1.5rem;
}

.bottom-auto {
    bottom: auto;
}

.top-5 {
    top: 1.25rem;
}

.left-5 {
    left: 1.25rem;
}

.bottom-20 {
    bottom: 5rem;
}

.bottom-5 {
    bottom: 1.25rem;
}

.z-\[1000\] {
    z-index: 1000;
}

.z-20 {
    z-index: 20;
}

.z-10 {
    z-index: 10;
}

.clear-both {
    clear: both;
}

.m-auto {
    margin: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.mx-1\.5 {
    margin-left: 0.375rem;
    margin-right: 0.375rem;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mt-9 {
    margin-top: 2.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.mb-bottom {
    margin-bottom: 80px;
}

.mb-2\.5 {
    margin-bottom: 0.625rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.ml-4 {
    margin-left: 1rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-0\.5 {
    margin-right: 0.125rem;
}

.mr-0 {
    margin-right: 0px;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mt-7 {
    margin-top: 1.75rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-32 {
    margin-bottom: 8rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mr-6 {
    margin-right: 1.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.-mt-2 {
    margin-top: -0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mt-24 {
    margin-top: 6rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.mr-2\.5 {
    margin-right: 0.625rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mb-24 {
    margin-bottom: 6rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-7 {
    margin-bottom: 1.75rem;
}

.mt-\[72px\] {
    margin-top: 72px;
}

.ml-5 {
    margin-left: 1.25rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2\.5 {
    margin-top: 0.625rem;
}

.mb-0\.5 {
    margin-bottom: 0.125rem;
}

.mb-0 {
    margin-bottom: 0px;
}

.mt-8 {
    margin-top: 2rem;
}

.ml-1\.5 {
    margin-left: 0.375rem;
}

.mt-1\.5 {
    margin-top: 0.375rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-3\.5 {
    margin-top: 0.875rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mb-14 {
    margin-bottom: 3.5rem;
}

.mb-9 {
    margin-bottom: 2.25rem;
}

.mt-20 {
    margin-top: 5rem;
}

.ml-20 {
    margin-left: 5rem;
}

.ml-3\.5 {
    margin-left: 0.875rem;
}

.mt-\[calc\(55\.22\%-69\.5px-20px\)\] {
    margin-top: calc(55.22% - 69.5px - 20px);
}

.mr-9 {
    margin-right: 2.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.mt-14 {
    margin-top: 3.5rem;
}

.mb-\[120px\] {
    margin-bottom: 120px;
}

.box-border {
    box-sizing: border-box;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.hidden {
    display: none;
}

.h-6 {
    height: 1.5rem;
}

.h-5 {
    height: 1.25rem;
}

.h-4 {
    height: 1rem;
}

.h-0\.5 {
    height: 0.125rem;
}

.h-0 {
    height: 0px;
}

.h-32 {
    height: 8rem;
}

.h-auto {
    height: auto;
}

.h-8 {
    height: 2rem;
}

.h-\[78vh\] {
    height: 78vh;
}

.h-3 {
    height: 0.75rem;
}

.h-\[calc\(100\%-24px-26px-24px-24px-44px-24px\)\] {
    height: calc(100% - 24px - 26px - 24px - 24px - 44px - 24px);
}

.h-\[calc\(100\%-24px-26px-24px-24px\)\] {
    height: calc(100% - 24px - 26px - 24px - 24px);
}

.h-full {
    height: 100%;
}

.h-\[246px\] {
    height: 246px;
}

.h-\[65px\] {
    height: 65px;
}

.h-\[2px\] {
    height: 2px;
}

.h-60 {
    height: 15rem;
}

.h-\[46px\] {
    height: 46px;
}

.h-20 {
    height: 5rem;
}

.h-9 {
    height: 2.25rem;
}

.h-\[3px\] {
    height: 3px;
}

.h-\[90px\] {
    height: 90px;
}

.h-7 {
    height: 1.75rem;
}

.max-h-\[408px\] {
    max-height: 408px;
}

.min-h-full {
    min-height: 100%;
}

.w-full {
    width: 100%;
}

.w-\[calc\(100\%-40px\)\] {
    width: calc(100% - 40px);
}

.w-5 {
    width: 1.25rem;
}

.w-9\/12 {
    width: 75%;
}

.w-1\/2 {
    width: 50%;
}

.w-4\/12 {
    width: 33.333333%;
}

.w-7\/12 {
    width: 58.333333%;
}

.w-4 {
    width: 1rem;
}

.w-\[62vw\] {
    width: 62vw;
}

.w-3\/6 {
    width: 50%;
}

.w-9 {
    width: 2.25rem;
}

.w-5\/12 {
    width: 41.666667%;
}

.w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.w-3\/12 {
    width: 25%;
}

.w-8\/12 {
    width: 66.666667%;
}

.w-6\/12 {
    width: 50%;
}

.w-\[100px\] {
    width: 100px;
}

.w-7 {
    width: 1.75rem;
}

.w-\[182px\] {
    width: 182px;
}

.w-32 {
    width: 8rem;
}

.w-\[calc\(100\%-48px\)\] {
    width: calc(100% - 48px);
}

.w-6 {
    width: 1.5rem;
}

.w-3 {
    width: 0.75rem;
}

.w-\[968px\] {
    width: 968px;
}

.w-\[100vw\] {
    width: 100vw;
}

.w-\[246px\] {
    width: 246px;
}

.w-\[65px\] {
    width: 65px;
}

.w-\[27px\] {
    width: 27px;
}

.w-\[114px\] {
    width: 114px;
}

.w-60 {
    width: 15rem;
}

.w-\[160px\] {
    width: 160px;
}

.w-auto {
    width: auto;
}

.w-\[124px\] {
    width: 124px;
}

.w-\[48\%\] {
    width: 48%;
}

.w-\[72px\] {
    width: 72px;
}

.w-2\/6 {
    width: 33.333333%;
}

.w-4\/6 {
    width: 66.666667%;
}

.min-w-\[84px\] {
    min-width: 84px;
}

.min-w-\[120px\] {
    min-width: 120px;
}

.min-w-\[105px\] {
    min-width: 105px;
}

.min-w-\[300px\] {
    min-width: 300px;
}

.min-w-\[200px\] {
    min-width: 200px;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-\[320px\] {
    max-width: 320px;
}

.max-w-\[100px\] {
    max-width: 100px;
}

.max-w-\[242px\] {
    max-width: 242px;
}

.max-w-\[450px\] {
    max-width: 450px;
}

.max-w-\[300px\] {
    max-width: 300px;
}

.max-w-\[610px\] {
    max-width: 610px;
}

.max-w-\[400px\] {
    max-width: 400px;
}

.max-w-screen-px-5 {
    max-width: 1160px;
}

.max-w-screen {
    max-width: 1120px;
}

.max-w-\[504px\] {
    max-width: 504px;
}

.max-w-\[800px\] {
    max-width: 800px;
}

.max-w-\[0\] {
    max-width: 0;
}

.max-w-\[928px\] {
    max-width: 928px;
}

.max-w-\[600px\] {
    max-width: 600px;
}

.max-w-\[170px\] {
    max-width: 170px;
}

.max-w-\[448px\] {
    max-width: 448px;
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    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));
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    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));
}

.translate-x-7 {
    --tw-translate-x: 1.75rem;
    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));
}

.translate-x-0 {
    --tw-translate-x: 0px;
    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));
}

.scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    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));
}

.scale-120 {
    --tw-scale-x: 1.2;
    --tw-scale-y: 1.2;
    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));
}

.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));
}

@-webkit-keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 82, 82, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 82, 82, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.animate-pulse-red {
    -webkit-animation: pulse-red 2s infinite;
    animation: pulse-red 2s infinite;
}

@-webkit-keyframes icon-bounce {
    0% {
        transform: scale(1, 1) translateY(0);
    }

    10% {
        transform: scale(1.1, .9) translateY(0);
    }

    30% {
        transform: scale(.9, 1.1) translateY(-12px);
    }

    50% {
        transform: scale(1.05, .95) translateY(0);
    }

    57% {
        transform: scale(1, 1) translateY(-6px);
    }

    64% {
        transform: scale(1, 1) translateY(0);
    }

    100% {
        transform: scale(1, 1) translateY(0);
    }
}

@keyframes icon-bounce {
    0% {
        transform: scale(1, 1) translateY(0);
    }

    10% {
        transform: scale(1.1, .9) translateY(0);
    }

    30% {
        transform: scale(.9, 1.1) translateY(-12px);
    }

    50% {
        transform: scale(1.05, .95) translateY(0);
    }

    57% {
        transform: scale(1, 1) translateY(-6px);
    }

    64% {
        transform: scale(1, 1) translateY(0);
    }

    100% {
        transform: scale(1, 1) translateY(0);
    }
}

.animate-icon-bounce {
    -webkit-animation: icon-bounce cubic-bezier(0.280, 0.840, 0.420, 1) 2s infinite;
    animation: icon-bounce cubic-bezier(0.280, 0.840, 0.420, 1) 2s infinite;
}

@-webkit-keyframes drop-bounce {
    0% {
        transform: translateY(-330px);
    }

    70% {
        transform: scale(1.2) translateY(50px);
    }

    100% {
        transform: scale(1.2) translateY(-30px);
    }
}

@keyframes drop-bounce {
    0% {
        transform: translateY(-330px);
    }

    70% {
        transform: scale(1.2) translateY(50px);
    }

    100% {
        transform: scale(1.2) translateY(-30px);
    }
}

.animate-drop-bounce {
    -webkit-animation: drop-bounce 0.3s ease-out;
    animation: drop-bounce 0.3s ease-out;
}

@-webkit-keyframes move-downward {
    20% {
        transform: translateY(0);
    }

    40%, 60% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes move-downward {
    20% {
        transform: translateY(0);
    }

    40%, 60% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

.animate-move-downward {
    -webkit-animation: move-downward 1.5s ease-in infinite;
    animation: move-downward 1.5s ease-in infinite;
}

@-webkit-keyframes move-upward {
    20% {
        transform: translateY(0);
    }

    40%, 60% {
        transform: translateY(8px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes move-upward {
    20% {
        transform: translateY(0);
    }

    40%, 60% {
        transform: translateY(8px);
    }

    100% {
        transform: translateY(0);
    }
}

.animate-move-upward {
    -webkit-animation: move-upward 1.5s ease-in infinite;
    animation: move-upward 1.5s ease-in infinite;
}


@-webkit-keyframes zoom-n-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.95);
    }
}

@keyframes zoom-n-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.95);
    }
}

.animate-zoom-n-pulse {
    -webkit-animation: zoom-n-pulse 2s infinite;
    animation: zoom-n-pulse 2s infinite;
}

@-webkit-keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    -webkit-animation: bounce 1s infinite;
    animation: bounce 1s infinite;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.list-outside {
    list-style-position: outside;
}

.list-disc {
    list-style-type: disc;
}

.list-decimal {
    list-style-type: decimal;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.content-center {
    align-content: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-4 {
    gap: 1rem;
}

.self-center {
    align-self: center;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-\[30px\] {
    border-radius: 30px;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-r-\[10px\] {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.rounded-b-\[10px\] {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.rounded-t-10 {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.border {
    border-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.border-t-\[40px\] {
    border-top-width: 40px;
}

.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-primary1 {
    --tw-border-opacity: 1;
    border-color: rgb(255 103 0 / var(--tw-border-opacity));
}

.border-teritary1 {
    --tw-border-opacity: 1;
    border-color: rgb(234 234 240 / var(--tw-border-opacity));
}

.border-teritary5 {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-primary2 {
    --tw-border-opacity: 1;
    border-color: rgb(45 45 108 / var(--tw-border-opacity));
}

.border-teritary2 {
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
}

.border-secondary4\/70 {
    border-color: rgb(207 207 207 / 0.7);
}

.border-twmOrange {
    --tw-border-opacity: 1;
    border-color: rgb(255 143 8 / var(--tw-border-opacity));
}

.border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(192 192 192 / var(--tw-border-opacity));
}

.border-gray-300\/40 {
    border-color: rgb(228 228 226 / 0.4);
}

.border-t-gray-400 {
    --tw-border-opacity: 1;
    border-top-color: rgb(223 223 223 / var(--tw-border-opacity));
}

.border-b-gray-500 {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(192 192 192 / var(--tw-border-opacity));
}

.border-t-gray-500 {
    --tw-border-opacity: 1;
    border-top-color: rgb(192 192 192 / var(--tw-border-opacity));
}

.border-t-teritary5 {
    --tw-border-opacity: 1;
    border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.bg-teritary5 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-primary1 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity));
}

.bg-teritary3 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}

.bg-teritary2 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity));
}

.bg-\[\#FFD600\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 214 0 / var(--tw-bg-opacity));
}

.bg-\[\#FFF3F3\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 243 243 / var(--tw-bg-opacity));
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}

.bg-twmOrange {
    --tw-bg-opacity: 1;
    background-color: rgb(255 143 8 / var(--tw-bg-opacity));
}

.bg-teritary1 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 234 240 / var(--tw-bg-opacity));
}

.bg-gray-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(223 223 223 / var(--tw-bg-opacity));
}

.bg-transparent {
    background-color: transparent;
}

.bg-\[\#FFEEE3\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 238 227 / var(--tw-bg-opacity));
}

.fill-primary2 {
    fill: #2D2D6C;
}

.fill-twmOrange {
    fill: #FF8F08;
}

.fill-twmBlue {
    fill: #2D2D6C;
}

.fill-twmRed {
    fill: #F73603;
}

.fill-white {
    fill: #fff;
}

.stroke-black {
    stroke: #000;
}

.stroke-teritary5 {
    stroke: #FFFFFF;
}

.stroke-primary1 {
    stroke: #FF6700;
}

.stroke-primary2 {
    stroke: #2D2D6C;
}

.stroke-twmOrange {
    stroke: #FF8F08;
}

.stroke-\[1\.2px\] {
    stroke-width: 1.2px;
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.object-center {
    -o-object-position: center;
    object-position: center;
}

.p-5 {
    padding: 1.25rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-\[3px\] {
    padding: 3px;
}

.p-1 {
    padding: 0.25rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-\[14px\] {
    padding-left: 14px;
    padding-right: 14px;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}


.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.pb-8 {
    padding-bottom: 2rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pb-9 {
    padding-bottom: 2.25rem;
}

.pt-7 {
    padding-top: 1.75rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-10 {
    padding-bottom: 2.5rem;
}

.pb-\[114\%\] {
    padding-bottom: 114%;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pl-6 {
    padding-left: 1.5rem;
}

.pb-2\.5 {
    padding-bottom: 0.625rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pt-2\.5 {
    padding-top: 0.625rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pb-\[50\.75\%\] {
    padding-bottom: 50.75%;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-10 {
    padding-right: 2.5rem;
}

.pb-\[55\.22\%\] {
    padding-bottom: 55.22%;
}

.pb-7 {
    padding-bottom: 1.75rem;
}

.pt-8 {
    padding-top: 2rem;
}

.pl-11 {
    padding-left: 2.75rem;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.align-middle {
    vertical-align: middle;
}

.align-text-bottom {
    vertical-align: text-bottom;
}

.align-sub {
    vertical-align: sub;
}

.text-h3 {
    font-size: 20px;
    line-height: 30px;
}

.text-sub2 {
    font-size: 15px;
    line-height: 24px;
}

.text-body {
    font-size: 14px;
    line-height: 24px;
}

.text-cap1 {
    font-size: 13px;
    line-height: 16px;
}

.text-cap2 {
    font-size: 12px;
    line-height: 16px;
}

.text-sub1 {
    font-size: 16px;
    line-height: 24px;
}

.text-3xl {
    font-size: 30px;
    line-height: 36px;
}

.text-h4 {
    font-size: 18px;
    line-height: 30px;
}

.text-h2 {
    font-size: 24px;
    line-height: 36px;
}

.text-\[0px\] {
    font-size: 0px;
}

.text-base {
    font-size: 16px;
    line-height: 24px;
}

.text-sm {
    font-size: 14px;
    line-height: 20px;
}

.text-s {
    font-size: 13px;
    line-height: 18px;
}

.text-m {
    font-size: 15px;
    line-height: 22px;
}

.text-xs {
    font-size: 12px;
    line-height: 16px;
}

.text-l {
    font-size: 17px;
    line-height: 26px;
}

.text-lg {
    font-size: 18px;
    line-height: 28px;
}

.text-xl {
    font-size: 20px;
    line-height: 28px;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.font-bold {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
}

.leading-8 {
    line-height: 2rem;
}

.leading-5 {
    line-height: 1.25rem;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-primary1 {
    --tw-text-opacity: 1;
    color: rgb(255 103 0 / var(--tw-text-opacity));
}

.text-secondary1 {
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.text-secondary3 {
    --tw-text-opacity: 1;
    color: rgb(137 137 137 / var(--tw-text-opacity));
}

.text-primary2 {
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.text-teritary5 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-errorRed {
    --tw-text-opacity: 1;
    color: rgb(255 0 0 / var(--tw-text-opacity));
}

.text-primary2\/60 {
    color: rgb(45 45 108 / 0.6);
}

.text-twmOrange {
    --tw-text-opacity: 1;
    color: rgb(255 143 8 / var(--tw-text-opacity));
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(92 92 92 / var(--tw-text-opacity));
}

.text-secondary1\/95 {
    color: rgb(33 33 33 / 0.95);
}

.text-secondary2 {
    --tw-text-opacity: 1;
    color: rgb(110 110 110 / var(--tw-text-opacity));
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(62 62 62 / var(--tw-text-opacity));
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity));
}

.text-twmBlue {
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.text-twmRed {
    --tw-text-opacity: 1;
    color: rgb(247 54 3 / var(--tw-text-opacity));
}

.underline {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.shadow-\[0_0_13px_rgba\(154\2c 154\2c 154\2c 0\.2\)\] {
    --tw-shadow: 0 0 13px rgba(154, 154, 154, 0.2);
    --tw-shadow-colored: 0 0 13px 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-\[0_1px_16px_0px_\#94949440\] {
    --tw-shadow: 0 1px 16px 0px #94949440;
    --tw-shadow-colored: 0 1px 16px 0px 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-popup {
    --tw-shadow: 0 0 13px 0 #9A9A9A8C;
    --tw-shadow-colored: 0 0 13px 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);
}

.shadow-\[0_0_6px_rgba\(96\2c 96\2c 96\2c 0\.1\)\] {
    --tw-shadow: 0 0 6px rgba(96, 96, 96, 0.1);
    --tw-shadow-colored: 0 0 6px 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-card {
    --tw-shadow: 0 0 13px 0 #9a9a9a26;
    --tw-shadow-colored: 0 0 13px 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);
}

.ring-0 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -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-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.ease-linear {
    transition-timing-function: linear;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}


/*== ScrollBar Hidden ==*/

.scrollbar {
    overflow: hidden;
}

/*== Color | Background Gradient | Text Gradient ==*/

.gradient-2 {
    background-image: linear-gradient(270deg, #ffa024 3.87%, #ff5c46 93.47%);
}

.text-gradient {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.box-outerGlow {
    border-color: #9a9a9a16;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 12px;
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-shadow-color: #9a9a9a26;
    --tw-shadow: var(--tw-shadow-colored);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.box-outerGlow:hover {
    --tw-shadow-color: #9a9a9a47;
    --tw-shadow: var(--tw-shadow-colored);
    transition-duration: 500ms;
    transition-timing-function: linear;
}

/*== Image ==*/

.img-h-full {
    display: block;
    height: 100%;
}

.img-w-full {
    display: block;
    width: 100%;
}

/*== Width ==*/

.col-max-w {
    width: calc(100% - 40px);
    max-width: 610px;
}

/*== Input ==*/

.single-input {
    height: 60px;
    width: 44px;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(234 234 240 / var(--tw-border-opacity));
    text-align: center;
}

/* -----------
Root
----------- */

:root {
    --vh: 1vh;
}

/* -----------
Base
----------- */

/* -----------
Utilities
----------- */

/* -----------
Components
----------- */

.loader {
    position: relative;
    display: inline-block;
    height: 0.25rem;
    width: 100%;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}

.loader::after {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 0.25rem;
    width: 192px;
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity));
    -webkit-animation: animloader 2s linear infinite;
    animation: animloader 2s linear infinite;
}

@-webkit-keyframes animloader {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}

@keyframes animloader {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}

.placeholder\:text-sm::-moz-placeholder {
    font-size: 14px;
    line-height: 20px;
}

.placeholder\:text-sm:-ms-input-placeholder {
    font-size: 14px;
    line-height: 20px;
}

.placeholder\:text-sm::placeholder {
    font-size: 14px;
    line-height: 20px;
}

.placeholder\:text-twmBlue\/40::-moz-placeholder {
    color: rgb(45 45 108 / 0.4);
}

.placeholder\:text-twmBlue\/40:-ms-input-placeholder {
    color: rgb(45 45 108 / 0.4);
}

.placeholder\:text-twmBlue\/40::placeholder {
    color: rgb(45 45 108 / 0.4);
}

.before\:absolute::before {
    content: var(--tw-content);
    position: absolute;
}

.before\:top-12::before {
    content: var(--tw-content);
    top: 3rem;
}

.before\:right-\[18px\]::before {
    content: var(--tw-content);
    right: 18px;
}

.before\:bottom-2::before {
    content: var(--tw-content);
    bottom: 0.5rem;
}

.before\:left-0::before {
    content: var(--tw-content);
    left: 0px;
}

.before\:flex::before {
    content: var(--tw-content);
    display: flex;
}

.before\:h-\[190px\]::before {
    content: var(--tw-content);
    height: 190px;
}

.before\:h-5::before {
    content: var(--tw-content);
    height: 1.25rem;
}

.before\:w-\[190px\]::before {
    content: var(--tw-content);
    width: 190px;
}

.before\:w-5::before {
    content: var(--tw-content);
    width: 1.25rem;
}

.before\:rounded-full::before {
    content: var(--tw-content);
    border-radius: 9999px;
}

.before\:border::before {
    content: var(--tw-content);
    border-width: 1px;
}

.before\:border-secondary4::before {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(207 207 207 / var(--tw-border-opacity));
}

.before\:bg-teritary1::before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(234 234 240 / var(--tw-bg-opacity));
}

.before\:bg-transparent::before {
    content: var(--tw-content);
    background-color: transparent;
}

.after\:absolute::after {
    content: var(--tw-content);
    position: absolute;
}

.after\:top-1\/2::after {
    content: var(--tw-content);
    top: 50%;
}

.after\:right-0::after {
    content: var(--tw-content);
    right: 0px;
}

.after\:-right-0::after {
    content: var(--tw-content);
    right: -0px;
}

.after\:right-1\/2::after {
    content: var(--tw-content);
    right: 50%;
}

.after\:top-0::after {
    content: var(--tw-content);
    top: 0px;
}

.after\:left-0::after {
    content: var(--tw-content);
    left: 0px;
}

.after\:z-10::after {
    content: var(--tw-content);
    z-index: 10;
}

.after\:mx-auto::after {
    content: var(--tw-content);
    margin-left: auto;
    margin-right: auto;
}

.after\:my-2::after {
    content: var(--tw-content);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.after\:my-1\.5::after {
    content: var(--tw-content);
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
}

.after\:mx-0::after {
    content: var(--tw-content);
    margin-left: 0px;
    margin-right: 0px;
}

.after\:my-1::after {
    content: var(--tw-content);
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.after\:block::after {
    content: var(--tw-content);
    display: block;
}

.after\:flex::after {
    content: var(--tw-content);
    display: flex;
}

.after\:h-11::after {
    content: var(--tw-content);
    height: 2.75rem;
}

.after\:h-6::after {
    content: var(--tw-content);
    height: 1.5rem;
}

.after\:h-\[1px\]::after {
    content: var(--tw-content);
    height: 1px;
}

.after\:h-5::after {
    content: var(--tw-content);
    height: 1.25rem;
}

.after\:h-full::after {
    content: var(--tw-content);
    height: 100%;
}

.after\:w-\[0\.5px\]::after {
    content: var(--tw-content);
    width: 0.5px;
}

.after\:w-\[18px\]::after {
    content: var(--tw-content);
    width: 18px;
}

.after\:w-5::after {
    content: var(--tw-content);
    width: 1.25rem;
}

.after\:w-full::after {
    content: var(--tw-content);
    width: 100%;
}

.after\:w-\[14px\]::after {
    content: var(--tw-content);
    width: 14px;
}

.after\:-translate-y-1\/2::after {
    content: var(--tw-content);
    --tw-translate-y: -50%;
    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));
}

.after\:-translate-x-1\/2::after {
    content: var(--tw-content);
    --tw-translate-x: -50%;
    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));
}

.after\:rounded-10::after {
    content: var(--tw-content);
    border-radius: 10px;
}

.after\:border-r-\[1px\]::after {
    content: var(--tw-content);
    border-right-width: 1px;
}

.after\:border-r::after {
    content: var(--tw-content);
    border-right-width: 1px;
}

.after\:border-secondary4::after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(207 207 207 / var(--tw-border-opacity));
}

.after\:border-teritary5::after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.after\:bg-white::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.after\:bg-teritary5::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.after\:bg-\[url\(\'\.\.\/images\/icon\/icon-checkbox-true\.svg\'\)\]::after {
    content: var(--tw-content);
    background-image: url('../images/icon/icon-checkbox-true.svg');
}

.after\:bg-\[url\(\'\.\.\/images\/img\/image-bg-pattern\.png\'\)\]::after {
    content: var(--tw-content);
    background-image: url('../images/img/image-bg-pattern.png');
}

.after\:bg-cover::after {
    content: var(--tw-content);
    background-size: cover;
}

.after\:bg-no-repeat::after {
    content: var(--tw-content);
    background-repeat: no-repeat;
}

.after\:text-primary2::after {
    content: var(--tw-content);
    --tw-text-opacity: 1;
    color: rgb(45 45 108 / var(--tw-text-opacity));
}

.after\:opacity-0::after {
    content: var(--tw-content);
    opacity: 0;
}

.hover\:bg-twmOrangeLight:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 155 11 / var(--tw-bg-opacity));
}

.hover\:text-twmOrangeLight:hover {
    --tw-text-opacity: 1;
    color: rgb(255 155 11 / var(--tw-text-opacity));
}

.hover\:opacity-70:hover {
    opacity: 0.7;
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}

.hover\:duration-100:hover {
    transition-duration: 100ms;
}

.hover\:ease-linear:hover {
    transition-timing-function: linear;
}

.focus\:border-gray-300\/60:focus {
    border-color: rgb(228 228 226 / 0.6);
}

.focus\:border-teritary2:focus {
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity));
}

.focus\:shadow-\[0_0_12px_rgba\(96\2c 96\2c 96\2c 0\.15\)\]:focus {
    --tw-shadow: 0 0 12px rgba(96, 96, 96, 0.15);
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-0:focus {
    outline-width: 0px;
}

.focus\:ring-0:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.active\:rounded-full:active {
    border-radius: 9999px;
}

.active\:bg-teritary2:active {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity));
}

@media (min-width: 640px) {
    .sm\:top-8 {
        top: 2rem;
    }

    .sm\:right-12 {
        right: 3rem;
    }

    .sm\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .sm\:mt-24 {
        margin-top: 6rem;
    }

    .sm\:-ml-\[18px\] {
        margin-left: -18px;
    }

    .sm\:mb-4 {
        margin-bottom: 1rem;
    }

    .sm\:mb-14 {
        margin-bottom: 3.5rem;
    }

    .sm\:mt-\[120px\] {
        margin-top: 120px;
    }

    .sm\:mt-2 {
        margin-top: 0.5rem;
    }

    .sm\:mb-9 {
        margin-bottom: 2.25rem;
    }

    .sm\:h-\[360px\] {
        height: 360px;
    }

    .sm\:max-h-\[600px\] {
        max-height: 600px;
    }

    .sm\:w-\[360px\] {
        width: 360px;
    }

    .sm\:max-w-\[250px\] {
        max-width: 250px;
    }

    .sm\:max-w-\[264px\] {
        max-width: 264px;
    }

    .sm\:flex-col {
        flex-direction: column;
    }

    .sm\:items-center {
        align-items: center;
    }

    .sm\:justify-center {
        justify-content: center;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

    .sm\:pt-9 {
        padding-top: 2.25rem;
    }

    .sm\:text-center {
        text-align: center;
    }

    .sm\:before\:bottom-2::before {
        content: var(--tw-content);
        bottom: 0.5rem;
    }

    .sm\:before\:h-\[292px\]::before {
        content: var(--tw-content);
        height: 292px;
    }

    .sm\:before\:w-\[292px\]::before {
        content: var(--tw-content);
        width: 292px;
    }
}

@media (min-width: 768px) {
    body.md\:teritary3,
    body.md\:teritary3 > .b-wrap,
    body.md\:teritary3 > main {
        --tw-bg-opacity: 1;
        background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    }

    .md\:static {
        position: static;
    }

    .md\:relative {
        position: relative;
    }

    .md\:top-auto {
        top: auto;
    }

    .md\:right-auto {
        right: auto;
    }

    .md\:top-7 {
        top: 1.75rem;
    }

    .md\:bottom-auto {
        bottom: auto;
    }

    .md\:my-5 {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .md\:my-4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .md\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .md\:mt-6 {
        margin-top: 1.5rem;
    }

    .md\:mb-3 {
        margin-bottom: 0.75rem;
    }

    .md\:mt-3 {
        margin-top: 0.75rem;
    }

    .md\:mb-10 {
        margin-bottom: 2.5rem;
    }

    .md\:mb-6 {
        margin-bottom: 1.5rem;
    }

    .md\:ml-auto {
        margin-left: auto;
    }

    .md\:mb-1\.5 {
        margin-bottom: 0.375rem;
    }

    .md\:mb-1 {
        margin-bottom: 0.25rem;
    }

    .md\:mt-12 {
        margin-top: 3rem;
    }

    .md\:mb-14 {
        margin-bottom: 3.5rem;
    }

    .md\:mt-\[60px\] {
        margin-top: 60px;
    }

    .md\:mr-0 {
        margin-right: 0px;
    }

    .md\:mb-8 {
        margin-bottom: 2rem;
    }

    .md\:mt-10 {
        margin-top: 2.5rem;
    }

    .md\:mb-bottom {
        margin-bottom: 80px;
    }

    .md\:mt-5 {
        margin-top: 1.25rem;
    }

    .md\:block {
        display: block;
    }

    .md\:inline-block {
        display: inline-block;
    }

    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:h-\[185px\] {
        height: 185px;
    }

    .md\:h-24 {
        height: 6rem;
    }

    .md\:min-h-\[100\.05vh\] {
        min-height: 100.05vh;
    }

    .md\:w-full {
        width: 100%;
    }

    .md\:min-w-\[131px\] {
        min-width: 131px;
    }

    .md\:max-w-\[504px\] {
        max-width: 504px;
    }

    .md\:max-w-\[424px\] {
        max-width: 424px;
    }

    .md\:max-w-\[610px\] {
        max-width: 610px;
    }

    .md\:max-w-\[1208px\] {
        max-width: 1208px;
    }

    .md\:flex-col {
        flex-direction: column;
    }

    .md\:items-center {
        align-items: center;
    }

    .md\:justify-center {
        justify-content: center;
    }

    .md\:gap-6 {
        gap: 1.5rem;
    }

    .md\:rounded-10 {
        border-radius: 10px;
    }

    .md\:border-none {
        border-style: none;
    }

    .md\:bg-teritary3 {
        --tw-bg-opacity: 1;
        background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    }

    .md\:bg-none {
        background-image: none;
    }

    .md\:stroke-primary2 {
        stroke: #2D2D6C;
    }

    .md\:stroke-\[2px\] {
        stroke-width: 2px;
    }

    .md\:p-9 {
        padding: 2.25rem;
    }

    .md\:py-9 {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .md\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .md\:py-14 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .md\:px-9 {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }

    .md\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .md\:px-\[92px\] {
        padding-left: 92px;
        padding-right: 92px;
    }

    .md\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .md\:pt-20 {
        padding-top: 5rem;
    }

    .md\:pt-12 {
        padding-top: 3rem;
    }

    .md\:pt-8 {
        padding-top: 2rem;
    }

    .md\:pt-\[66px\] {
        padding-top: 66px;
    }

    .md\:pt-10 {
        padding-top: 2.5rem;
    }

    .md\:pt-16 {
        padding-top: 4rem;
    }

    .md\:pt-0 {
        padding-top: 0px;
    }

    .md\:pt-4 {
        padding-top: 1rem;
    }

    .md\:pb-\[37\.581\%\] {
        padding-bottom: 37.581%;
    }

    .md\:text-left {
        text-align: left;
    }

    .md\:text-sub1 {
        font-size: 16px;
        line-height: 24px;
    }

    .md\:text-3xl {
        font-size: 30px;
        line-height: 36px;
    }

    .md\:text-h4 {
        font-size: 18px;
        line-height: 30px;
    }

    .md\:text-sub2 {
        font-size: 15px;
        line-height: 24px;
    }

    .md\:text-body {
        font-size: 14px;
        line-height: 24px;
    }

    .md\:text-h2 {
        font-size: 24px;
        line-height: 36px;
    }

    .md\:text-h3 {
        font-size: 20px;
        line-height: 30px;
    }

    .md\:text-black {
        --tw-text-opacity: 1;
        color: rgb(0 0 0 / var(--tw-text-opacity));
    }

    .md\:text-secondary1 {
        --tw-text-opacity: 1;
        color: rgb(33 33 33 / var(--tw-text-opacity));
    }

    .md\:shadow-\[0_1px_16px_0px_\#94949440\] {
        --tw-shadow: 0 1px 16px 0px #94949440;
        --tw-shadow-colored: 0 1px 16px 0px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .md\:gradient-2 {
        background-image: linear-gradient(270deg, #ffa024 3.87%, #ff5c46 93.47%);
    }

    .md\:after\:my-3::after {
        content: var(--tw-content);
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .md\:after\:h-10::after {
        content: var(--tw-content);
        height: 2.5rem;
    }

    .md\:after\:border-secondary1::after {
        content: var(--tw-content);
        --tw-border-opacity: 1;
        border-color: rgb(33 33 33 / var(--tw-border-opacity));
    }

    .md\:hover\:text-secondary2:hover {
        --tw-text-opacity: 1;
        color: rgb(110 110 110 / var(--tw-text-opacity));
    }

    .md\:hover\:opacity-50:hover {
        opacity: 0.5;
    }
}

@media (min-width: 1024px) {
    .lg\:float-right {
        float: right;
    }

    .lg\:float-left {
        float: left;
    }

    .lg\:mt-0 {
        margin-top: 0px;
    }

    .lg\:mt-4 {
        margin-top: 1rem;
    }

    .lg\:min-h-\[700px\] {
        min-height: 700px;
    }

    .lg\:w-\[48\.85\%\] {
        width: 48.85%;
    }

    .lg\:bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }

    .lg\:p-6 {
        padding: 1.5rem;
    }

    .lg\:p-4 {
        padding: 1rem;
    }

    .lg\:pt-0 {
        padding-top: 0px;
    }

    .lg\:pl-0 {
        padding-left: 0px;
    }

    .lg\:pb-1 {
        padding-bottom: 0.25rem;
    }

    .lg\:after\:absolute::after {
        content: var(--tw-content);
        position: absolute;
    }

    .lg\:after\:inline-block::after {
        content: var(--tw-content);
        display: inline-block;
    }

    .lg\:after\:bg-white::after {
        content: var(--tw-content);
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }
}

@media (min-width: 1280px) {
    .xl\:mx-5 {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }

    .xl\:ml-5 {
        margin-left: 1.25rem;
    }

    .xl\:mr-5 {
        margin-right: 1.25rem;
    }

    .xl\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .xl\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .xl\:pr-3 {
        padding-right: 0.75rem;
    }
}

/* 3TET Banner */
.banner-3tet {
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 2rem;
    display: flex;
    max-width: 1160px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .banner-3tet {
        margin-bottom: 60px;
    }
}

.banner-3tet a {
    height: fit-content;
    width: 100%;
}

.banner-3tet .img-3tet {
    position: relative;
    height: 0;
    width: 100%;
    padding-top: 22.38%;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.size-8 {
    height: 2rem;
    width: 2rem;
}

.text-\[\#4673E5\] {
    color: #4673E5;
}