/*
! tailwindcss v3.4.0 | 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: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
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;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.font-primary {
font-family: 'ABC Whyte Inktrap';
}
.font-secondary {
font-family: 'Noto Sans TC', 'sans-serif';
}
.fluid-fs {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
}
.text-body-sm {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body-sm);
--min-fs: var(--text-body-sm-min);
}
.text-body-xs {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body-xs);
--min-fs: var(--text-body-xs-min);
}
.text-body-xxs {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body-xxs);
--min-fs: var(--text-body-xxs-min);
}
.title {
/* Title */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-title);
--min-fs: var(--text-title-min);
font-style: normal;
font-weight: 400;
line-height: 120%;
/* 81.6px */
}
.text-40 {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-40);
--min-fs: var(--text-40-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.text-22 {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-22);
--min-fs: var(--text-22-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.text-24 {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-24);
--min-fs: var(--text-24-min);
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.heading1 {
/* H1 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h1);
--min-fs: var(--text-h1-min);
font-style: normal;
font-weight: 400;
line-height: 120%;
/* 48px */
}
.heading2 {
/* H2 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h2);
--min-fs: var(--text-h2-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.heading3 {
/* H3 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h3);
--min-fs: var(--text-h3-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.heading4 {
/* H4 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h4);
--min-fs: var(--text-h4-min);
font-style: normal;
font-weight: 400;
line-height: 130%;
/* 36.4px */
}
.heading5 {
/* H5 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h5);
--min-fs: var(--text-h5-min);
font-style: normal;
font-weight: 400;
line-height: 140%;
/* 33.6px */
}
.\!heading6 {
/* H6 */
}
.heading6 {
/* H6 */
}
.\!heading6 {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
}
.heading6 {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
}
.\!heading6 {
--max-fs: var(--text-h6) !important;
--min-fs: var(--text-h6-min) !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
}
.heading6 {
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.text-button {
/* Button */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-button);
--min-fs: var(--text-button-min);
font-style: normal;
font-weight: 400;
/* line-height: normal; */
line-height: 1.37;
}
.body-lg {
/* Body Big */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body-lg);
--min-fs: var(--text-body-lg-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.text-body {
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 33px */
}
.eyebrow {
/* Eyebrow */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-eyebrow);
--min-fs: var(--text-eyebrow-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.footer {
/* Footer */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-footer);
--min-fs: var(--text-footer-min);
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 30px */
}
html[lang="zh-Hant"] .footer {
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-footer-cn);
--min-fs: var(--text-footer-cn-min);
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.nav {
/* Nav */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-nav);
--min-fs: var(--text-nav-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.pointer-events-none {
pointer-events: none;
}
.visible {
visibility: visible;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.\!right-2 {
right: 0.5rem !important;
}
.\!top-3 {
top: 0.75rem !important;
}
.-left-2 {
left: -0.5rem;
}
.-left-3 {
left: -0.75rem;
}
.-left-4 {
left: -1rem;
}
.-right-2 {
right: -0.5rem;
}
.-right-3 {
right: -0.75rem;
}
.-right-4 {
right: -1rem;
}
.-top-\[3px\] {
top: -3px;
}
.bottom-0 {
bottom: 0px;
}
.bottom-6 {
bottom: 1.5rem;
}
.bottom-\[-2px\] {
bottom: -2px;
}
.bottom-\[200px\] {
bottom: 200px;
}
.bottom-\[30px\] {
bottom: 30px;
}
.left-0 {
left: 0px;
}
.left-1\/2 {
left: 50%;
}
.left-5 {
left: 1.25rem;
}
.right-0 {
right: 0px;
}
.right-2 {
right: 0.5rem;
}
.right-3 {
right: 0.75rem;
}
.right-6 {
right: 1.5rem;
}
.right-\[-10px\] {
right: -10px;
}
.right-\[-30px\] {
right: -30px;
}
.right-\[40px\] {
right: 40px;
}
.top-0 {
top: 0px;
}
.top-1\/2 {
top: 50%;
}
.top-3 {
top: 0.75rem;
}
.top-5 {
top: 1.25rem;
}
.top-\[-14px\] {
top: -14px;
}
.top-\[-45px\] {
top: -45px;
}
.top-\[-8\.5px\] {
top: -8.5px;
}
.top-\[10\%\] {
top: 10%;
}
.top-\[200px\] {
top: 200px;
}
.top-\[240px\] {
top: 240px;
}
.top-\[50\%\] {
top: 50%;
}
.top-\[70px\] {
top: 70px;
}
.top-\[80px\] {
top: 80px;
}
.top-\[calc\(100\%\+20px\)\] {
top: calc(100% + 20px);
}
.\!z-\[11\] {
z-index: 11 !important;
}
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-50 {
z-index: 50;
}
.z-\[-1\] {
z-index: -1;
}
.z-\[100\] {
z-index: 100;
}
.z-\[11\] {
z-index: 11;
}
.z-\[12\] {
z-index: 12;
}
.z-\[13\] {
z-index: 13;
}
.z-\[1\] {
z-index: 1;
}
.z-\[3\] {
z-index: 3;
}
.z-\[999\] {
z-index: 999;
}
.z-\[9\] {
z-index: 9;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.clear-none {
clear: none;
}
.m-0 {
margin: 0px;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.my-7 {
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-\[30px\] {
margin-top: 30px;
margin-bottom: 30px;
}
.my-\[50px\] {
margin-top: 50px;
margin-bottom: 50px;
}
.\!mb-0 {
margin-bottom: 0px !important;
}
.\!mb-2 {
margin-bottom: 0.5rem !important;
}
.\!mb-4 {
margin-bottom: 1rem !important;
}
.\!mb-5 {
margin-bottom: 1.25rem !important;
}
.\!mb-\[10px\] {
margin-bottom: 10px !important;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-7 {
margin-bottom: 1.75rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-9 {
margin-bottom: 2.25rem;
}
.mb-\[10px\] {
margin-bottom: 10px;
}
.mb-\[16px\] {
margin-bottom: 16px;
}
.mb-\[20px\] {
margin-bottom: 20px;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-\[20px\] {
margin-left: 20px;
}
.mr-0 {
margin-right: 0px;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-2\.5 {
margin-right: 0.625rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-4 {
margin-right: 1rem;
}
.mr-5 {
margin-right: 1.25rem;
}
.mt-0 {
margin-top: 0px;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-2\.5 {
margin-top: 0.625rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-7 {
margin-top: 1.75rem;
}
.mt-\[10px\] {
margin-top: 10px;
}
.mt-\[25px\] {
margin-top: 25px;
}
.mt-\[30px\] {
margin-top: 30px;
}
.mt-\[40px\] {
margin-top: 40px;
}
.mt-\[50px\] {
margin-top: 50px;
}
.mt-\[80px\] {
margin-top: 80px;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.line-clamp-none {
overflow: visible;
display: block;
-webkit-box-orient: horizontal;
-webkit-line-clamp: none;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.\!hidden {
display: none !important;
}
.hidden {
display: none;
}
.\!aspect-\[80\/80\] {
aspect-ratio: 80/80 !important;
}
.aspect-\[1\/1\] {
aspect-ratio: 1/1;
}
.aspect-\[1180\/500\] {
aspect-ratio: 1180/500;
}
.aspect-\[13\/8\] {
aspect-ratio: 13/8;
}
.aspect-\[14\/12\] {
aspect-ratio: 14/12;
}
.aspect-\[14\/9\] {
aspect-ratio: 14/9;
}
.aspect-\[1760\/746\] {
aspect-ratio: 1760/746;
}
.aspect-\[1920\/869\] {
aspect-ratio: 1920/869;
}
.aspect-\[380\/280\] {
aspect-ratio: 380/280;
}
.aspect-\[380\/380\] {
aspect-ratio: 380/380;
}
.aspect-\[4\/3\] {
aspect-ratio: 4/3;
}
.aspect-\[520\/320\] {
aspect-ratio: 520/320;
}
.aspect-\[560\/340\] {
aspect-ratio: 560/340;
}
.aspect-\[560\/360\] {
aspect-ratio: 560/360;
}
.aspect-\[600\/600\] {
aspect-ratio: 600/600;
}
.aspect-\[7\/5\] {
aspect-ratio: 7/5;
}
.aspect-\[80\/80\] {
aspect-ratio: 80/80;
}
.aspect-\[840\/600\] {
aspect-ratio: 840/600;
}
.aspect-\[88\/80\] {
aspect-ratio: 88/80;
}
.aspect-\[880\/373\] {
aspect-ratio: 880/373;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.size-\[15px\] {
width: 15px;
height: 15px;
}
.size-\[30px\] {
width: 30px;
height: 30px;
}
.size-\[36px\] {
width: 36px;
height: 36px;
}
.size-max {
width: -moz-max-content;
width: max-content;
height: -moz-max-content;
height: max-content;
}
.\!h-20 {
height: 5rem !important;
}
.h-10 {
height: 2.5rem;
}
.h-16 {
height: 4rem;
}
.h-3 {
height: 0.75rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-7 {
height: 1.75rem;
}
.h-8 {
height: 2rem;
}
.h-\[0\.5px\] {
height: 0.5px;
}
.h-\[100vh\] {
height: 100vh;
}
.h-\[1px\] {
height: 1px;
}
.h-\[230px\] {
height: 230px;
}
.h-\[24px\] {
height: 24px;
}
.h-\[2px\] {
height: 2px;
}
.h-\[50px\] {
height: 50px;
}
.h-\[70px\] {
height: 70px;
}
.h-\[71px\] {
height: 71px;
}
.h-\[80px\] {
height: 80px;
}
.h-\[80vh\] {
height: 80vh;
}
.h-\[84px\] {
height: 84px;
}
.h-\[calc\(100vh-70px\)\] {
height: calc(100vh - 70px);
}
.h-auto {
height: auto;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-full {
height: 100%;
}
.max-h-4 {
max-height: 1rem;
}
.max-h-\[60px\] {
max-height: 60px;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.min-h-8 {
min-height: 2rem;
}
.min-h-\[180px\] {
min-height: 180px;
}
.min-h-\[20px\] {
min-height: 20px;
}
.min-h-\[50px\] {
min-height: 50px;
}
.min-h-\[65px\] {
min-height: 65px;
}
.min-h-\[90vh\] {
min-height: 90vh;
}
.min-h-screen {
min-height: 100vh;
}
.\!w-20 {
width: 5rem !important;
}
.\!w-\[50px\] {
width: 50px !important;
}
.w-0 {
width: 0px;
}
.w-1\/4 {
width: 25%;
}
.w-10 {
width: 2.5rem;
}
.w-3 {
width: 0.75rem;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.w-6 {
width: 1.5rem;
}
.w-7 {
width: 1.75rem;
}
.w-8 {
width: 2rem;
}
.w-\[24px\] {
width: 24px;
}
.w-\[50px\] {
width: 50px;
}
.w-\[60px\] {
width: 60px;
}
.w-\[80px\] {
width: 80px;
}
.w-\[88px\] {
width: 88px;
}
.w-\[90\%\] {
width: 90%;
}
.w-auto {
width: auto;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.min-w-8 {
min-width: 2rem;
}
.min-w-\[100px\] {
min-width: 100px;
}
.min-w-\[103px\] {
min-width: 103px;
}
.min-w-\[190px\] {
min-width: 190px;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[80px\] {
min-width: 80px;
}
.min-w-\[81px\] {
min-width: 81px;
}
.min-w-\[84px\] {
min-width: 84px;
}
.min-w-full {
min-width: 100%;
}
.max-w-10 {
max-width: 2.5rem;
}
.max-w-\[1280px\] {
max-width: 1280px;
}
.max-w-\[1400px\] {
max-width: 1400px;
}
.max-w-\[1920px\] {
max-width: 1920px;
}
.max-w-\[500px\] {
max-width: 500px;
}
.max-w-\[60px\] {
max-width: 60px;
}
.max-w-\[680px\] {
max-width: 680px;
}
.max-w-\[749px\] {
max-width: 749px;
}
.max-w-\[768px\] {
max-width: 768px;
}
.max-w-\[800px\] {
max-width: 800px;
}
.max-w-\[80px\] {
max-width: 80px;
}
.max-w-\[820px\] {
max-width: 820px;
}
.max-w-\[840px\] {
max-width: 840px;
}
.max-w-full {
max-width: 100%;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.table-fixed {
table-layout: fixed;
}
.-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-full {
--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));
}
.-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-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));
}
.translate-y-\[-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));
}
.rotate-90 {
--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));
}
.rotate-\[180deg\] {
--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));
}
.scale-0 {
--tw-scale-x: 0;
--tw-scale-y: 0;
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));
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.list-decimal {
list-style-type: decimal;
}
.list-disc {
list-style-type: disc;
}
.columns-1 {
-moz-columns: 1;
columns: 1;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[180px_auto\] {
grid-template-columns: 180px auto;
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.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;
}
.gap-0 {
gap: 0px;
}
.gap-1 {
gap: 0.25rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-8 {
gap: 2rem;
}
.gap-\[10px\] {
gap: 10px;
}
.gap-\[16px\] {
gap: 16px;
}
.gap-\[20px\] {
gap: 20px;
}
.gap-\[2px\] {
gap: 2px;
}
.gap-\[40px\] {
gap: 40px;
}
.gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
.gap-x-5 {
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.gap-y-10 {
row-gap: 2.5rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.gap-y-2\.5 {
row-gap: 0.625rem;
}
.gap-y-5 {
row-gap: 1.25rem;
}
.gap-y-\[10px\] {
row-gap: 10px;
}
.space-x-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-\[50px\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(50px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(50px * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.text-ellipsis {
text-overflow: ellipsis;
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-nowrap {
text-wrap: nowrap;
}
.break-all {
word-break: break-all;
}
.\!rounded-none {
border-radius: 0px !important;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-none {
border-radius: 0px;
}
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border-\[0\.5px\] {
border-width: 0.5px;
}
.border-y {
border-top-width: 1px;
border-bottom-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
.border-b-0 {
border-bottom-width: 0px;
}
.border-b-\[1px\] {
border-bottom-width: 1px;
}
.border-l-\[4px\] {
border-left-width: 4px;
}
.border-t {
border-top-width: 1px;
}
.border-t-\[1px\] {
border-top-width: 1px;
}
.border-none {
border-style: none;
}
.border-\[\#222\] {
--tw-border-opacity: 1;
border-color: rgb(34 34 34 / var(--tw-border-opacity));
}
.border-\[\#7A7A7A\] {
--tw-border-opacity: 1;
border-color: rgb(122 122 122 / var(--tw-border-opacity));
}
.border-\[\#A7A7A7\] {
--tw-border-opacity: 1;
border-color: rgb(167 167 167 / var(--tw-border-opacity));
}
.border-\[\#BDBDBD\] {
--tw-border-opacity: 1;
border-color: rgb(189 189 189 / var(--tw-border-opacity));
}
.border-\[\#D3D3D3\] {
--tw-border-opacity: 1;
border-color: rgb(211 211 211 / var(--tw-border-opacity));
}
.border-\[\#D8D9DA\] {
--tw-border-opacity: 1;
border-color: rgb(216 217 218 / var(--tw-border-opacity));
}
.border-\[\#ddd\] {
--tw-border-opacity: 1;
border-color: rgb(221 221 221 / var(--tw-border-opacity));
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-transparent {
border-color: transparent;
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-b-\[\#D3D3D3\] {
--tw-border-opacity: 1;
border-bottom-color: rgb(211 211 211 / var(--tw-border-opacity));
}
.border-l-\[\#222\] {
--tw-border-opacity: 1;
border-left-color: rgb(34 34 34 / var(--tw-border-opacity));
}
.border-l-white {
--tw-border-opacity: 1;
border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.bg-\[\#0000001a\] {
background-color: #0000001a;
}
.bg-\[\#00000096\] {
background-color: #00000096;
}
.bg-\[\#000\] {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-\[\#0E0E0E\] {
--tw-bg-opacity: 1;
background-color: rgb(14 14 14 / var(--tw-bg-opacity));
}
.bg-\[\#22222266\] {
background-color: #22222266;
}
.bg-\[\#222222\] {
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}
.bg-\[\#222\] {
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}
.bg-\[\#3E3C3C\] {
--tw-bg-opacity: 1;
background-color: rgb(62 60 60 / var(--tw-bg-opacity));
}
.bg-\[\#BDBDBD\] {
--tw-bg-opacity: 1;
background-color: rgb(189 189 189 / var(--tw-bg-opacity));
}
.bg-\[\#D3D3D3\] {
--tw-bg-opacity: 1;
background-color: rgb(211 211 211 / var(--tw-bg-opacity));
}
.bg-\[\#D8D9DA\] {
--tw-bg-opacity: 1;
background-color: rgb(216 217 218 / var(--tw-bg-opacity));
}
.bg-\[\#E9E9E9\] {
--tw-bg-opacity: 1;
background-color: rgb(233 233 233 / var(--tw-bg-opacity));
}
.bg-\[\#F6F6F6\] {
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}
.bg-\[\#F8F8F8\] {
--tw-bg-opacity: 1;
background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-black-000 {
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.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;
}
.object-left {
-o-object-position: left;
object-position: left;
}
.p-0 {
padding: 0px;
}
.p-1 {
padding: 0.25rem;
}
.p-10 {
padding: 2.5rem;
}
.p-2 {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-7 {
padding: 1.75rem;
}
.p-\[10px\] {
padding: 10px;
}
.p-\[20px\] {
padding: 20px;
}
.p-\[24px\] {
padding: 24px;
}
.\!px-6 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.\!py-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-\[20px\] {
padding-left: 20px;
padding-right: 20px;
}
.px-\[40px\] {
padding-left: 40px;
padding-right: 40px;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-7 {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.py-\[10px\] {
padding-top: 10px;
padding-bottom: 10px;
}
.py-\[18px\] {
padding-top: 18px;
padding-bottom: 18px;
}
.py-\[1px\] {
padding-top: 1px;
padding-bottom: 1px;
}
.py-\[30px\] {
padding-top: 30px;
padding-bottom: 30px;
}
.py-\[50px\] {
padding-top: 50px;
padding-bottom: 50px;
}
.py-\[60px\] {
padding-top: 60px;
padding-bottom: 60px;
}
.pb-0 {
padding-bottom: 0px;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-14 {
padding-bottom: 3.5rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-2\.5 {
padding-bottom: 0.625rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-7 {
padding-bottom: 1.75rem;
}
.pb-\[100px\] {
padding-bottom: 100px;
}
.pb-\[14px\] {
padding-bottom: 14px;
}
.pb-\[20px\] {
padding-bottom: 20px;
}
.pb-\[50px\] {
padding-bottom: 50px;
}
.pl-4 {
padding-left: 1rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.pl-\[30px\] {
padding-left: 30px;
}
.pr-10 {
padding-right: 2.5rem;
}
.pr-4 {
padding-right: 1rem;
}
.pt-10 {
padding-top: 2.5rem;
}
.pt-14 {
padding-top: 3.5rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-2\.5 {
padding-top: 0.625rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-7 {
padding-top: 1.75rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-\[20px\] {
padding-top: 20px;
}
.pt-\[30px\] {
padding-top: 30px;
}
.pt-\[34px\] {
padding-top: 34px;
}
.pt-\[40px\] {
padding-top: 40px;
}
.pt-\[46\.7\%\] {
padding-top: 46.7%;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-\[16px\] {
font-size: 16px;
}
.text-\[20px\] {
font-size: 20px;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.\!font-normal {
font-weight: 400 !important;
}
.font-\[420\] {
font-weight: 420;
}
.font-\[450\] {
font-weight: 450;
}
.font-bold {
font-weight: 700;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.leading-9 {
line-height: 2.25rem;
}
.leading-\[1\.37\] {
line-height: 1.37;
}
.leading-\[1\.4\] {
line-height: 1.4;
}
.leading-\[130\%\] {
line-height: 130%;
}
.leading-\[140\%\] {
line-height: 140%;
}
.leading-\[150\%\] {
line-height: 150%;
}
.leading-\[160\%\] {
line-height: 160%;
}
.leading-\[25\.6px\] {
line-height: 25.6px;
}
.text-\[\#222222\] {
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
}
.text-\[\#222529\] {
--tw-text-opacity: 1;
color: rgb(34 37 41 / var(--tw-text-opacity));
}
.text-\[\#222\] {
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
}
.text-\[\#3A4045\] {
--tw-text-opacity: 1;
color: rgb(58 64 69 / var(--tw-text-opacity));
}
.text-\[\#4E4E4E\] {
--tw-text-opacity: 1;
color: rgb(78 78 78 / var(--tw-text-opacity));
}
.text-\[\#7A7A7A\] {
--tw-text-opacity: 1;
color: rgb(122 122 122 / var(--tw-text-opacity));
}
.text-\[\#7B7B7B\] {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-black-000 {
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
}
.text-black-400 {
--tw-text-opacity: 1;
color: rgb(122 122 122 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-primary {
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
.underline-offset-1 {
text-underline-offset: 1px;
}
.accent-\[\#121213\] {
accent-color: #121213;
}
.accent-\[\#222\] {
accent-color: #222;
}
.opacity-0 {
opacity: 0;
}
.opacity-10 {
opacity: 0.1;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-70 {
opacity: 0.7;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
outline-style: solid;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-none {
--tw-blur: blur(0);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_1px_4px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
--tw-drop-shadow: drop-shadow(0 1px 4px rgba(0,0,0,0.25));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
--tw-sepia: sepia(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Third Party Libraries */
/**
* Swiper 11.0.7
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2024 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: February 27, 2024
*/
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}
:root{--swiper-theme-color:#007aff}
:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}
.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}
.swiper-vertical>.swiper-wrapper{flex-direction:column}
.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}
.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}
.swiper-horizontal{touch-action:pan-y}
.swiper-vertical{touch-action:pan-x}
.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}
.swiper-slide-invisible-blank{visibility:hidden}
.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}
.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}
.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}
.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}
.swiper-3d .swiper-wrapper{transform-style:preserve-3d}
.swiper-3d{perspective:1200px}
.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}
.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}
.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}
.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}
.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}
.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}
.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}
.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}
.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}
.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}
.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}
.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}
.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}
.swiper-lazy-preloader-black{--swiper-preloader-color:#000}
@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}
:root{--swiper-navigation-size:44px}
.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}
.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}
.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}
.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;transform-origin:center}
.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}
.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}
.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}
.swiper-button-lock{display:none}
.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}
.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}
.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}
.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}
.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}
.swiper-pagination.swiper-pagination-hidden{opacity:0}
.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}
.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}
.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}
button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}
.swiper-pagination-bullet:only-child{display:none!important}
.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}
.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}
.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}
.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}
.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}
.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}
.swiper-pagination-lock{display:none}
.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}
.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}
.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}
.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}
.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}
.swiper-scrollbar-cursor-drag{cursor:move}
.swiper-scrollbar-lock{display:none}
.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}
.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}
.swiper-slide-zoomed{cursor:move;touch-action:none}
.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}
.swiper-grid>.swiper-wrapper{flex-wrap:wrap}
.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}
.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}
.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}
.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}
.swiper-fade .swiper-slide-active{pointer-events:auto}
.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}
.swiper-cube{overflow:visible}
.swiper-cube .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}
.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}
.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}
.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}
.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}
.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}
.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}
.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}
.swiper-flip{overflow:visible}
.swiper-flip .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1}
.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}
.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}
.swiper-creative .swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}
.swiper-cards{overflow:visible}
.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}
@font-face {
font-family: "Noto Sans TC";
src: url(../fonts/NotoSansTC-VariableFont_wght.ttf?30eb38a7f9422e9badacf6bf124b5504) format("truetype");
}
@font-face {
font-family: "ABC Whyte Inktrap";
src: url(../fonts/ABCWhyteInktrap-Regular.ttf?c590421435d3aaaadaf49f20ac5d72cc) format("truetype");
font-weight: 400;
}
@font-face {
font-family: "ABC Whyte Inktrap";
src: url(../fonts/ABCWhyteInktrap-Medium.ttf?5ff091368ba5f683c0e997d89cb1a3ab) format("truetype");
font-weight: 500;
}
:root {
--primary: #222;
--black-000: #222222;
--black-200: #4E4E4E;
--black-400: #7A7A7A;
--black-600: #A7A7A7;
--black-700: #BDBDBD;
--black-800: #D3D3D3;
--black-900: #E9E9E9;
--grey: #F6F6F6;
--white: #FFFFFF;
--min-vw: 640;
--max-vw: 1920;
/* convert to px */
--min-vw-px: calc(var(--min-vw) * 1px);
--max-vw-px: calc(var(--max-vw) * 1px);
/* font sizes at --max-vw */
--text-title: 48;
--text-40: 40;
/* 48 */
--text-h1: 36;
/* 36 */
--text-h2: 32;
/* 32 */
--text-h3: 28;
/* 28 */
--text-h4: 25;
/* 24 */
--text-24: 24;
--text-h5: 25;
--text-22: 22;
/* 20 */
--text-h6: 20;
/* 18 */
--text-body-lg: 20;
/* 22 */
--text-body: 16;
/* 18 */
--text-button: 16;
/* 18 */
--text-eyebrow: 16;
/* 18 */
--text-footer: 14;
--text-footer-cn: 16;
/* 16 */
--text-nav: 16;
/* 18 */
--text-body-sm: 16;
--text-body-xs: 14;
--text-body-xxs: 14;
/* 18 */
/* font sizes at --min-vw */
--text-title-min: calc(var(--text-title) * 0.668);
--text-40-min: calc(var(--text-40) * 0.668);
--text-h1-min: calc(var(--text-h1) * 0.78);
--text-h2-min: calc(var(--text-h2) * 0.785);
--text-h3-min: calc(var(--text-h3) * 0.8);
--text-h4-min: calc(var(--text-h4) * 0.76);
--text-h5-min: calc(var(--text-h5) * 0.68);
--text-24-min: calc(var(--text-24) * 0.68);
--text-22: calc(var(--text-22) * 0.68);
--text-h6-min: calc(var(--text-h6) * 0.75);
--text-body-lg-min: calc(var(--text-body-lg) * 0.8);
--text-body-min: calc(var(--text-body) * 0.88);
--text-button-min: calc(var(--text-button) * 0.875);
--text-eyebrow-min: calc(var(--text-eyebrow) * 0.88);
--text-footer-min: calc(var(--text-footer) * 1);
--text-footer-cn-min: calc(var(--text-footer-cn) * 0.88);
--text-nav-min: calc(var(--text-nav) * 0.9);
--text-body-sm-min: calc(var(--text-body-sm) * 0.9);
--text-body-xs-min: calc(var(--text-body-xs)* 1);
--text-body-xxs-min: calc(var(--text-body-xxs) * 1);
}
.primary-brand {
color: var(--primary)
}
.text-black-000 {
color: var(--black-000)
}
.text-black-200 {
color: var(--black-200)
}
.text-black-400 {
color: var(--black-400)
}
.text-black-600 {
color: var(--black-600)
}
.text-black-700 {
color: var(--black-700)
}
.text-black-800 {
color: var(--black-800)
}
.text-black-900 {
color: var(--black-900)
}
.bg-grey {
background-color: var(--grey)
}
.bg-black-000 {
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}
.text-white {
color: var(--white);
}
html {
font-family: 'ABC Whyte Inktrap';
}
html[lang="zh-Hant"] * {
font-family: 'Noto Sans TC', 'sans-serif';
}
html[lang="zh-Hant"] .text-button {
font-weight: 400;
}
#more , #less{
font-weight: 400;
}
/* Configure website containers here */
:root {
--container: 1880px;
--container-md: 1760px;
--container-md-px: 3.19%;
}
.container {
/* max-width: 1920px; */
width: 100%;
padding: 0 20px;
margin: 0 auto;
}
@media (min-width: 768px) {
.container-md {
max-width: 2560px;
margin: 0 auto;
padding-right: var(--container-md-px);
padding-left: var(--container-md-px);
}
}
@media screen and (max-width:767px) {
.product-list-table thead {
display: none;
}
.a-button.product-list-table thead {
display: none;
}
.product-list-table tr {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 1.25rem;
}
.product-list-table td {
display: block;
justify-content: space-between;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
}
}
.woocommerce-account-fields .select2-selection, .shipping_address .select2-selection, .woocommerce-billing-fields .select2-selection {
border-width: 0px;
}
.woocommerce-account-fields .select2-selection__arrow, .shipping_address .select2-selection__arrow, .woocommerce-billing-fields .select2-selection__arrow {
top: 0.75rem !important;
right: 0.5rem !important;
}
.woocommerce-account-fields input, .woocommerce-account-fields .select2-container, .shipping_address input, .shipping_address .select2-container, .woocommerce-billing-fields input, .woocommerce-billing-fields .select2-container {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
line-height: normal;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(211 211 211 / var(--tw-border-opacity));
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
font-weight: 400 !important;
}
.woocommerce-account-fields label, .shipping_address label, .woocommerce-billing-fields label {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
line-height: normal;
margin-bottom: 10px;
font-weight: 400 !important;
}
.woocommerce-account-fields p#billing_city_field,
.woocommerce-account-fields p#billing_country_field,
.woocommerce-account-fields p#billing_email_field,
.shipping_address p#billing_city_field,
.shipping_address p#billing_country_field,
.shipping_address p#billing_email_field,
.woocommerce-billing-fields p#billing_city_field,
.woocommerce-billing-fields p#billing_country_field,
.woocommerce-billing-fields p#billing_email_field {
float: left;
clear: none;
}
.woocommerce-account-fields p#billing_postcode_field,
.woocommerce-account-fields p#billing_state_field,
.woocommerce-account-fields p#billing_phone_field,
.shipping_address p#billing_postcode_field,
.shipping_address p#billing_state_field,
.shipping_address p#billing_phone_field,
.woocommerce-billing-fields p#billing_postcode_field,
.woocommerce-billing-fields p#billing_state_field,
.woocommerce-billing-fields p#billing_phone_field {
float: right;
clear: none;
}
.woocommerce-account-fields p#billing_state_field,
.woocommerce-account-fields p#billing_country_field,
.woocommerce-account-fields p#billing_city_field,
.woocommerce-account-fields p#billing_postcode_field,
.woocommerce-account-fields p#billing_email_field,
.woocommerce-account-fields p#billing_phone_field,
.woocommerce-account-fields p#billing_last_name_field,
.woocommerce-account-fields p#billing_first_name_field,
.shipping_address p#billing_state_field,
.shipping_address p#billing_country_field,
.shipping_address p#billing_city_field,
.shipping_address p#billing_postcode_field,
.shipping_address p#billing_email_field,
.shipping_address p#billing_phone_field,
.shipping_address p#billing_last_name_field,
.shipping_address p#billing_first_name_field,
.woocommerce-billing-fields p#billing_state_field,
.woocommerce-billing-fields p#billing_country_field,
.woocommerce-billing-fields p#billing_city_field,
.woocommerce-billing-fields p#billing_postcode_field,
.woocommerce-billing-fields p#billing_email_field,
.woocommerce-billing-fields p#billing_phone_field,
.woocommerce-billing-fields p#billing_last_name_field,
.woocommerce-billing-fields p#billing_first_name_field {
width: calc(50% - 10px);
}
.woocommerce-account-fields .form-row, .shipping_address .form-row, .woocommerce-billing-fields .form-row {
margin-bottom: 1.25rem !important;
padding: 0px;
}
@media(max-width:640px) {
.woocommerce-account-fields .form-row, .shipping_address .form-row, .woocommerce-billing-fields .form-row {
margin-bottom: 12px;
}
.woocommerce-account-fields p#billing_state_field,
.woocommerce-account-fields p#billing_country_field,
.woocommerce-account-fields p#billing_city_field,
.woocommerce-account-fields p#billing_postcode_field,
.woocommerce-account-fields p#billing_email_field,
.woocommerce-account-fields p#billing_phone_field,
.woocommerce-account-fields p#billing_last_name_field,
.woocommerce-account-fields p#billing_first_name_field,
.shipping_address p#billing_state_field,
.shipping_address p#billing_country_field,
.shipping_address p#billing_city_field,
.shipping_address p#billing_postcode_field,
.shipping_address p#billing_email_field,
.shipping_address p#billing_phone_field,
.shipping_address p#billing_last_name_field,
.shipping_address p#billing_first_name_field,
.woocommerce-billing-fields p#billing_state_field,
.woocommerce-billing-fields p#billing_country_field,
.woocommerce-billing-fields p#billing_city_field,
.woocommerce-billing-fields p#billing_postcode_field,
.woocommerce-billing-fields p#billing_email_field,
.woocommerce-billing-fields p#billing_phone_field,
.woocommerce-billing-fields p#billing_last_name_field,
.woocommerce-billing-fields p#billing_first_name_field {
width: 100%;
}
}
.woocommerce-account-fields p#billing_address_1_field, .shipping_address p#billing_address_1_field, .woocommerce-billing-fields p#billing_address_1_field {
margin-bottom: 10px !important;
}
.nt-checkout-login-form input {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
line-height: normal;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(211 211 211 / var(--tw-border-opacity));
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
font-weight: 400 !important;
}
.nt-checkout-login-form label {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
line-height: normal;
margin-bottom: 10px;
font-weight: 400 !important;
}
.payment-complete .paymentItem {
margin-bottom: 10px;
display: grid;
grid-template-columns: 180px auto;
grid-template-rows: repeat(1, minmax(0, 1fr));
gap: 1.25rem;
}
.payment-complete .paymentItem:last-child {
margin-bottom: 0px;
}
@media (min-width: 640px) {
.payment-complete .paymentItem {
grid-template-columns: auto 380px;
}
}
@media (min-width: 1024px) {
.payment-complete .paymentItem {
grid-template-columns: auto 440px;
}
}
@media (max-width: 520px) {
.payment-complete .paymentItem {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.5rem;
}
.payment-complete .paymentItem>label {
text-align: left;
}
}
/* account dashboard */
.account-container {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 1024px) {
.account-container {
flex-wrap: nowrap;
}
}
.menu-sidebar-container li {
position: relative;
border-radius: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
color: var(--black-200);
}
@media (min-width: 640px) {
.menu-sidebar-container li {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
@media (min-width: 1280px) {
.menu-sidebar-container li {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.menu-sidebar-container li.active {
background: rgba(153, 191, 234, 0.20);
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000)}
.dashboard-card-item-container {
margin-top: 0.75rem;
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.75rem;
}
@media (min-width: 640px) {
.dashboard-card-item-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.dashboard-card-item-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.dashboard-card-item-container {
grid-gap: 0.75rem;
}
.menu-sidebar-container {
position: relative;
margin-bottom: 2rem;
width: 100%;
}
@media (min-width: 640px) {
.menu-sidebar-container {
margin-bottom: 2.5rem;
}
}
@media (min-width: 1024px) {
.menu-sidebar-container {
margin-bottom: 0px;
margin-right: 2rem;
width: 260px;
}
}
@media (min-width: 1280px) {
.menu-sidebar-container {
margin-right: 2.5rem;
width: 320px;
}
}
.menu-sidebar-container ul.account-menu-item-container {
display: none;
flex-direction: column;
border-radius: 1rem;
border-width: 1px;
padding: 1rem;
}
.a-button.menu-sidebar-container ul.account-menu-item-container {
display: none;
}
@media (min-width: 640px) {
.menu-sidebar-container ul.account-menu-item-container {
padding: 1.25rem;
}
}
@media (min-width: 1024px) {
.menu-sidebar-container ul.account-menu-item-container {
display: flex;
}
}
.dashboard-card-item img {
filter: brightness(0) saturate(100%) invert(23%) sepia(66%) saturate(2357%) hue-rotate(306deg) brightness(79%) contrast(100%);
}
.menu-sidebar-container ul.account-menu-item-container li {
margin-bottom: 0.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.menu-sidebar-container ul.account-menu-item-container li a {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
line-height: normal;
font-weight: 400;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.menu-sidebar-container ul.account-menu-item-container li:hover {
background: #F8F8F8;
}
.menu-sidebar-container ul.account-menu-item-container li:hover a {
font-weight: bold;
}
.menu-sidebar-container ul.account-menu-item-container li:hover img {
filter: brightness(0) saturate(100%) invert(23%) sepia(66%) saturate(2357%) hue-rotate(306deg) brightness(79%) contrast(100%);
}
.menu-sidebar-container ul.account-menu-item-container li.is-active {
background: #E9E9E9;
}
.menu-sidebar-container ul.account-menu-item-container li.is-active a {
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
.menu-sidebar-container ul.account-menu-item-container li.is-active img {
filter: brightness(0) saturate(100%) invert(23%) sepia(66%) saturate(2357%) hue-rotate(306deg) brightness(79%) contrast(100%);
}
.menu-sidebar-container ul li {
cursor: pointer;
}
.menu-sidebar-container ul li label {
pointer-events: none;
display: block;
}
.account-container .contentContainer {
width: 100%;
}
@media (min-width: 1024px) {
.account-container .contentContainer {
width: calc(100% - 320px);
flex-grow: 1;
}
}
@media (min-width: 1280px) {
.account-container .contentContainer {
width: calc(100% - 340px);
}
}
.account-menu-item-container li>a {
align-items: center;
}
.account-menu-item-container li>a img {
margin-right: 0.5rem;
gap: 0px;
}
.menu-sidebar-container ul.account-menu-item-container.show {
top: calc(100% + 20px);
left: 0px;
display: flex;
width: 100%;
}
@media (min-width: 1024px) {
.menu-sidebar-container ul.account-menu-item-container.show {
top: 0px;
}
}
.menu-sidebar-container ul.account-menu-item-container.show {
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
}
.activepageContianer {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
border-radius: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
@media (min-width: 640px) {
.activepageContianer {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
@media (min-width: 1280px) {
.activepageContianer {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.activepageContianer {
background-color: rgba(153, 191, 234, 0.20);
}
.activepageContianer>a {
display: flex;
width: -moz-max-content;
width: max-content;
align-items: center;
}
.activepageContianer>a img {
margin-right: 0.5rem;
}
.accountSubMenuControl {
display: flex;
height: 1.5rem;
width: 25%;
cursor: pointer;
align-items: center;
justify-content: flex-end;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.accountSubMenuControl svg {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.accountSubMenuControl.active svg {
--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));
}
li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--logout {
position: relative;
margin-top: 10px;
padding-top: 1.25rem;
}
li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--logout ::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
display: inline-block;
height: 1px;
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(216 217 218 / var(--tw-bg-opacity));
}
.edit-account .form-row {
margin-bottom: 1.25rem !important;
}
.edit-account fieldset .form-row {
margin-bottom: 1rem !important;
}
.edit-account fieldset .form-row:last-child {
margin-bottom: 0px !important;
}
.edit-account .form-row-first,
.edit-account .form-row.form-row-last {
width: calc(50% - 10px) !important;
}
.displayed_name span em {
display: block;
padding-top: 0.5rem;
font-weight: 400;
font-style: normal;
--tw-text-opacity: 1;
color: rgb(122 122 122 / var(--tw-text-opacity));
color: var(--black-400);
font-size: 16px;
}
.payment_methods p {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6) !important;
--min-fs: var(--text-h6-min) !important;
font-style: normal !important;
line-height: normal !important;
font-weight: 400 !important;
}
.payment_methods label {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6) !important;
--min-fs: var(--text-h6-min) !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
}
/* Dashboard Edit Address */
.woo-edit-addresss h3 {
/* H5 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h5);
--min-fs: var(--text-h5-min);
font-style: normal;
font-weight: 400;
line-height: 140%;
/* 33.6px */
margin-bottom: 0.75rem;
}
@media (min-width: 1024px) {
.woo-edit-addresss h3 {
margin-bottom: 1.75rem;
}
}
.woo-edit-addresss label {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
line-height: normal;
margin-bottom: 0.5rem;
display: block;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
.woo-edit-addresss input, .woo-edit-addresss .select2 {
/* H6 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h6);
--min-fs: var(--text-h6-min);
font-style: normal;
line-height: normal;
width: 100%;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(211 211 211 / var(--tw-border-opacity));
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-weight: 400;
}
.woo-edit-addresss span.select2-selection.select2-selection--single {
border-width: 0px;
}
.woo-edit-addresss .form-row {
margin-bottom: 1.25rem !important;
}
.woo-edit-addresss .address-field {
margin-bottom: 0.5rem !important;
}
.woo-edit-addresss .form-row-first, .woo-edit-addresss .form-row.form-row-last {
width: calc(50% - 10px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 0.75rem;
right: 0.5rem;
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
right: 1.5rem;
top: 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));
}
.single-product .product.outofstock .woocommerce-product-gallery__image img {
opacity: 0.7;
}
.woocommerce-product-gallery__image img {
aspect-ratio: 800/640 !important;
width: 100% !important;
-o-object-fit: contain !important;
object-fit: contain !important;
}
#wishlist-product-image {
max-width: 80px !important;
}
@media (max-width: 1023px) {
#wishlist-product-image {
max-width: 60px !important;
}
}
span.highlight {
background: #d9d9d9;
}
p.form-row.form-row-wide.create-account {
margin-top: 10px;
padding: 0px;
}
p.form-row.form-row-wide.create-account span {
/* Button */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-button);
--min-fs: var(--text-button-min);
font-style: normal;
font-weight: 400;
/* line-height: normal; */
line-height: 1.37;
}
html[lang="zh-Hant"] p.form-row.form-row-wide.create-account span {
font-weight: 400;
}
input#rememberme.woocommerce-form__input.woocommerce-form__input-checkbox {
height: 1.5rem;
width: 1.5rem;
accent-color: #222;
}
button.woocommerce-button.button.woocommerce-form-login__submit {
/* Button */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-button);
--min-fs: var(--text-button-min);
font-style: normal;
font-weight: 400;
/* line-height: normal; */
line-height: 1.37;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
html[lang="zh-Hant"] button.woocommerce-button.button.woocommerce-form-login__submit {
font-weight: 400;
}
button.woocommerce-button.button.woocommerce-form-login__submit {
border: 1px solid var(--black-000);
background: white;
color: var(--black-000);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
padding: 10px 20px;
}
@media(max-width: 640px) {
button.woocommerce-button.button.woocommerce-form-login__submit {
padding: 12px 20px;
}
}
button.woocommerce-button.button.woocommerce-form-login__submit:hover {
background-color: var(--black-100);
color: var(--black-000);
border: 1px solid var(--black-100);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
@media (min-width: 768px) {
button.woocommerce-button.button.woocommerce-form-login__submit {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
display: flex;
align-items: center;
}
.woocommerce-form-login__rememberme > span {
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 33px */
margin-left: 0.75rem;
}
.wc-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.wc-popup-overlay.active {
display: flex;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.wc-popup-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
transform: scale(0.8) translateY(20px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
.wc-popup-image {
width: 100%;
height: auto;
max-height: 80vh;
-o-object-fit: contain;
object-fit: contain;
display: block;
}
.wc-popup-close {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
color: #333;
transition: all 0.3s ease;
z-index: 10000;
}
.wc-popup-close:hover {
background: white;
transform: scale(1.1);
}
.wc-popup-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
color: #333;
transition: all 0.3s ease;
}
.wc-popup-nav:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.wc-popup-prev {
left: 15px;
}
.wc-popup-next {
right: 15px;
}
.wc-popup-counter {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
}
/* Add cursor pointer to WooCommerce gallery images */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
cursor: pointer;
}
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled button {
border-radius: 0px;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
border: 1px solid var(--black-000);
background: white;
color: var(--black-000);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
padding: 10px 20px;
}
@media(max-width: 640px) {
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled button {
padding: 12px 20px;
}
}
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled button:hover {
background-color: var(--black-100);
color: var(--black-000);
border: 1px solid var(--black-100);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled button{
background-color: transparent !important;
color: #222 !important;
border-radius: 0px;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
border: 1px solid var(--black-000);
background: white;
color: var(--black-000);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
padding: 10px 20px;
}
@media(max-width: 640px) {
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled button {
padding: 12px 20px;
}
}
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled button:hover {
background-color: var(--black-100);
color: var(--black-000);
border: 1px solid var(--black-100);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
@media (max-width: 768px) {
.wc-popup-nav {
width: 40px;
height: 40px;
font-size: 16px;
}
.wc-popup-close {
width: 35px;
height: 35px;
font-size: 18px;
}
}
#home-carousel .swiper-slide {
height: auto;
}
@media (min-width: 1024px) {
.banner-slider .swiper-pagination {
bottom: 1.25rem;
}
}
/* .home-artist-name>li:nth-child(6) {
@apply !hidden lg:!block;
} */
@media(max-width: 640px) {
.banner-slider .swiper-pagination {
position: absolute;
/* top: 62%; */
transform: translateY(-50%);
}
}
.carousel-slider .swiper-slide {
height: auto;
/* @apply md:flex md:flex-col md:justify-end; */
}
/* .footer-newsletter-form div.wpforms-container-full {
margin: 0 !important;
@apply relative max-w-full md:max-w-[80%] 4xl:max-w-[70%];
}
.footer-newsletter-form .wpforms-container .wpforms-field {
padding: 0;
}
.footer-newsletter-form .wpforms-container input.wpforms-field-medium {
max-width: 100%;
}
.footer-newsletter-form div.wpforms-container-full .wpforms-form em.wpforms-error {
position: absolute !important;
}
.footer-newsletter-form{
position: relative;
}
.footer-newsletter-form .wpforms-container .wpforms-submit-container {
position: absolute;
right: 24px;
top: 0%;
transform: translateY(-50%);
margin-top: 0 !important;
padding: 0 !important;
width: 30px;
@apply h-[50px] md:h-[60px];
button,
div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
font-size: 0;
background-color: transparent !important;
position: relative;
right: 0;
padding: 0;
width: 100%;
height: 100%;
}
button[type=submit]:hover {
background: none !important;
}
button::before,
div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
content: url('data:image/svg+xml,');
display: flex;
align-items: center;
justify-content: center;
position: absolute;
color: white;
width:100%;
height: 100%;
top: 50%;
transform: translateY(-50%);
right: 24px;
}
}
.footer-newsletter-form div.wpforms-container-full input[type=email] {
padding: 16px 24px;
border: 1px solid #A7A7A7;
background-color: transparent;
border-radius: 0;
@apply text-body-sm font-primary h-[50px] md:h-[60px];
} */
.footer-newsletter-form .gform-theme--framework .gform-field-label:where(:not([class*=gform-field-label--type-])) {
display: none;
}
.a-button.footer-newsletter-form .gform-theme--framework .gform-field-label:where(:not([class*=gform-field-label--type-])) {
display: none;
}
.footer-newsletter-form .ginput_container.ginput_container_email {
position: relative;
max-width: 100%;
}
@media (min-width: 1024px) {
.footer-newsletter-form .ginput_container.ginput_container_email {
max-width: 680px;
}
}
.footer-newsletter-form form {
position: relative;
max-width: 680px;
}
.footer-newsletter-form .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)){
padding: 16px 24px;
border: 1px solid #A7A7A7;
background-color: transparent;
border-radius: 0;
font-family: 'ABC Whyte Inktrap';
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body-sm);
--min-fs: var(--text-body-sm-min);
height: 50px;
}
@media (min-width: 768px) {
.footer-newsletter-form .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
height: 60px;
}
}
.footer-newsletter-form .gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .footer-newsletter-form .gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .footer-newsletter-form .gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .footer-newsletter-form .gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .footer-newsletter-form .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .footer-newsletter-form .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .footer-newsletter-form .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
z-index: 1;
background-color: transparent;
opacity: 0;
--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);
}
.footer-newsletter-form .gform-footer.gform_footer.top_label {
z-index: 1;
margin-top: 0px;
border-width: 0px;
background-color: transparent;
}
.footer-newsletter-form .gform-footer.gform_footer.top_label::after{
content: url('data:image/svg+xml,');
position: absolute;
top: 0.75rem;
z-index: 0;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
color: var(--white);
}
.footer-newsletter-form .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.footer-newsletter-form .gform-theme--foundation .gform_footer {
position: absolute;
right: 0px;
top: -3px;
}
@media (min-width: 768px) {
.footer-newsletter-form .gform-theme--foundation .gform_footer {
top: 0px;
}
}
.home section[block-name="shops"] .shop-pb {
padding-bottom: 0px;
}
.newdetail p {
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
/* 33px */
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
line-height: 150%;
}
.newdetail h3 {
/* H3 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h3);
--min-fs: var(--text-h3-min);
font-style: normal;
font-weight: 400;
line-height: normal;
padding-bottom: 1.25rem;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
@media (min-width: 768px) {
.newdetail h3 {
padding-bottom: 2.5rem;
}
}
.newdetail h4 {
/* H4 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h4);
--min-fs: var(--text-h4-min);
font-style: normal;
font-weight: 400;
line-height: 130%;
/* 36.4px */
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
.newdetail h5 {
/* H5 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h5);
--min-fs: var(--text-h5-min);
font-style: normal;
font-weight: 400;
line-height: 140%;
/* 33.6px */
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
.newdetail figure.wp-block-image.size-large {
width: 100%;
}
p > a {
overflow-wrap: break-word;
}
@media (max-width: 480px) {
.newdetail p {
word-break: break-word;
}
}
#textContainer {
display: -webkit-box;
-webkit-line-clamp: 8; /* show 7 lines */
-webkit-box-orient: vertical;
overflow: hidden;
transition: all 0.3s ease;
}
#textContainer.expanded {
-webkit-line-clamp: unset;
overflow: visible;
}
.aligncenter {
margin-left: auto;
margin-right: auto;
}
.alignright {
margin-left: auto;
}
/* .zoom{
height:100vh;
width:100%;
} */
.exhibition-sidebar .sb-item {
/* Nav */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-nav);
--min-fs: var(--text-nav-min);
font-style: normal;
line-height: normal;
white-space: nowrap;
border-left-width: 4px;
--tw-border-opacity: 1;
border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 1rem;
padding-left: 1rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(122 122 122 / var(--tw-text-opacity));
color: var(--black-400);
}
@media (min-width: 1024px) {
.exhibition-sidebar .sb-item {
margin-bottom: 0.625rem;
white-space: nowrap;
padding-right: 0px;
}
}
.exhibition-sidebar .sb-item.active {
border-left-width: 4px;
--tw-border-opacity: 1;
border-left-color: rgb(34 34 34 / var(--tw-border-opacity));
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
.mb-sbar::-webkit-scrollbar {
display: none;
}
.exhibition-detail {
/* .sb-content {
@apply py-[30px] lg:py-[60px] border-b border-[#D3D3D3];
}
.sb-content:first-child {
@apply pt-0;
} */
}
.carousel-slider .swiper-button-next:after,
.carousel-slider .swiper-button-prev:after {
display: none;
}
.a-button.carousel-slider .swiper-button-next:after,.a-button
.carousel-slider .swiper-button-prev:after {
display: none;
}
.exhibition-detail-full .swiper-button-next:after,
.exhibition-detail-full .swiper-button-prev:after {
display: none;
}
.a-button.exhibition-detail-full .swiper-button-next:after,.a-button
.exhibition-detail-full .swiper-button-prev:after {
display: none;
}
.exhibition-detail-full .swiper-button-next,
.exhibition-detail-full .swiper-button-prev {
/* background-color: #222; */
}
.artwork-slider .swiper-button-next:after,
.artwork-slider .swiper-button-prev:after {
content: '';
}
.exhibition-detail-event .swiper-button-next:after,
.exhibition-detail-event .swiper-button-prev:after {
display: none;
}
.a-button.exhibition-detail-event .swiper-button-next:after,.a-button
.exhibition-detail-event .swiper-button-prev:after {
display: none;
}
.exhibition-detail-event .swiper-button-next {
right: 0px;
}
.exhibition-detail-event .swiper-button-prev {
left: 0px;
}
.exhibition-detail-event .swiper-button-next,
.exhibition-detail-event .swiper-button-prev {
height: 2.5rem;
width: 2.5rem;
}
@media (min-width: 1366px) {
.exhibition-detail-event .swiper-button-next,
.exhibition-detail-event .swiper-button-prev {
height: 65px;
width: 65px;
}
}
.embed-container {
position: relative;
padding-bottom: 42.3%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media(max-width: 1023px) {
.mb-sbar {
overflow-x: auto;
}
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
select[name="sort_by"],
select[name="product_cat"],
select[name="sub_product_cat"] {
border: 1px solid #222222;
padding: 12px 40px 12px 24px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
select[name="product_cat"]::-ms-expand,
select[name="sub_product_cat"]::-ms-expand {
display: none;
}
select[name="product_cat"]:focus-visible,
select[name="sub_product_cat"]:focus-visible {
outline: none;
}
.artist-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: #222222;
transition: width 0.8s cubic-bezier(0.45, 0, 0.27, 1);
}
.artist-link:hover::after {
width: 100%;
color: #222222;
}
#home-artists li {
display: inline-block;
}
#home-artists li.active .artist-link::after {
width: 100%;
color: #222222;
}
.information-wrapper > * ,
.information-wrapper > p {
font-family: 'ABC Whyte Inktrap';
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
line-height: 150%;
/* 33px */
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
#header-container .header-link {
/* Nav */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-nav);
--min-fs: var(--text-nav-min);
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
margin-top: 10px;
min-width: 50px;
text-wrap: nowrap;
padding-top: 0.625rem;
text-align: center;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
}
@media (min-width: 1280px) {
#header-container .header-link {
min-width: 80px;
}
}
@media (min-width: 1536px) {
#header-container .header-link {
min-width: 120px;
}
}
#header-container .header-link::before {
position: absolute;
top: 0px;
left: 0px;
height: 2px;
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(211 211 211 / var(--tw-bg-opacity));
--tw-content: "";
content: var(--tw-content);
transition: all 0.4s;
}
#header-container .header-link:hover {
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
transition: all 0.4s;
}
#header-container .header-link:hover::before {
height: 4px;
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
transition: all 0.4s;
}
#header-container .wpml-ls-legacy-list-horizontal {
padding: 0;
}
#header-container .wpml-ls-legacy-list-horizontal a {
padding: 0px 10px 0px;
}
#header-container .wpml-ls-legacy-list-horizontal:last-child a{
padding-right: 0;
}
.mobile-nav-menu {
transition: all 0.3s;
}
.mobile-nav-menu input::-moz-placeholder {
font-size: 18px;
}
.mobile-nav-menu input::placeholder {
font-size: 18px;
}
.mobile-nav-menu .input-wrapper {
position: relative;
display: flex;
height: 27px;
width: 100%;
align-items: center;
justify-content: space-between;
}
.mobile-nav-menu .input-wrapper::before {
position: absolute;
left: 0px;
bottom: -10px;
height: 1px;
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(122 122 122 / var(--tw-bg-opacity));
--tw-content: "";
content: var(--tw-content);
}
.mobile-nav-menu.active-menu {
z-index: 100;
opacity: 100;
transition: all 0.3s;
}
.header-link-container {
display: none;
align-items: center;
gap: 1.25rem;
}
.a-button.header-link-container {
display: none;
}
@media (min-width: 1024px) {
.header-link-container {
display: flex;
gap: 17px;
}
}
@media (min-width: 1280px) {
.header-link-container {
gap: 24px;
}
}
@media(min-width: 1260px) {
.header-link-container {
gap: 28px;
}
}
.header-link-container-mobile {
margin-top: 40px;
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 24px;
}
.header-link-mobile {
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
line-height: 150%;
/* 33px */
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
color: var(--white);
}
.cart-label {
position: absolute;
top: -9px;
right: -8px;
display: flex;
width: 1.25rem;
height: 1.25rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
font-size: 12px;
}
:root {
--primary: #222;
--black-000: #222222;
--black-200: #4e4e4e;
--black-400: #7a7a7a;
--black-600: #a7a7a7;
--black-700: #bdbdbd;
--black-800: #d3d3d3;
--black-900: #e9e9e9;
--black-100: #D9D9D9;
--grey: #f6f6f6;
--white: #ffffff;
}
@media(min-width: 1024px) {
/* body {
zoom: 0.75;
} */
}
.site-content {
margin-top: 80px;
}
@media (min-width: 1024px) {
.site-content {
margin-top: 100px;
}
}
.swiper-pagination-bullet {
background-color: #ccc;
width: 15px;
height: 15px;
border-radius: 50%;
}
@media (max-width: 768px) {
.swiper-pagination-bullet {
width: 10px;
height: 10px
}
}
.swiper-pagination-bullet-active {
background-color: #fff;
}
.button_wrapper {
background-color: #ffffff;
}
.button-primary {
border: 1px solid var(--black-000);
background: white;
color: var(--black-000);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
padding: 10px 20px !important;
}
@media(max-width: 640px) {
.button-primary,
.button-secondary {
padding: 12px 20px !important;
}
}
.button-primary:hover {
background-color: var(--black-100) !important;
color: var(--black-000);
border: 1px solid var(--black-100);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
.border-secondary {
border: 1px solid #FFFFFF;
color: #FFFFFF;
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
.button-mobile {
border: 1px solid #222;
color: #222;
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
.border-secondary:hover,
.button-mobile:hover {
background-color: var(--black-100);
border: 1px solid var(--black-100);
color: var(--black-000) !important;
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
.button-secondary {
color: #FFFFFF;
background-color: var(--black-000);
border: 1px solid transparent;
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
padding: 10px 20px !important;
}
.button-secondary:hover {
border: 1px solid #FFFFFF;
background-color: var(--black-100);
transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
}
.button-arrow {
display: flex;
/* background-color: var(--black-000); */
color: #FFFFFF;
width: 65px;
height: 65px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
transition: all .30s ease-in-out;
-moz-transition: all .30s ease-in-out;
-webkit-transition: all .30s ease-in-out;
}
@media (max-width: 1366px) {
.button-arrow {
width: 48px;
height: 48px
}
}
@media (max-width: 769px) {
.button-arrow {
width: 35px;
height: 35px
}
.button-arrow img {
height: 20px;
}
}
#home-carousel .carousel-slider .swiper-button-next, #home-carousel .carousel-slider .swiper-button-prev{
top: var(--swiper-navigation-top-offset, 62%);
}
@media(max-width: 640px){
#home-carousel .carousel-slider .swiper-button-next, #home-carousel .carousel-slider .swiper-button-prev{
top: var(--swiper-navigation-top-offset, 50%)
}
}
#home-affiliates .swiper-button-next:after, #home-affiliates .swiper-button-prev:after {
display: none;
}
.a-button#home-affiliates .swiper-button-next:after,.a-button #home-affiliates .swiper-button-prev:after {
display: none;
}
.popup-slider-ex .swiper-button-prev::after,
.popup-slider-ex .swiper-button-next::after,
.popup-slider .swiper-button-prev::after,
.popup-slider .swiper-button-next::after,
#artistdetail-exhibition .swiper-button-next::after,
#artistdetail-exhibition .swiper-button-prev::after {
display: none;
}
#artist_detail_content table,.single-exhibition table {
width: 100%;
}
#textContainer table {
width: 100%;
}
.a-button.hidden {
display: none;
}
.button-arrow:hover {
/* background-color: var(--primary);
color: #FFFFFF;
transition: all .30s ease-in-out;
-moz-transition: all .30s ease-in-out;
-webkit-transition: all .30s ease-in-out; */
}
.border-gray {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(189 189 189 / var(--tw-border-opacity));
}
.artist-template-default.single-artist #home-carousel .border-gray {
border-width: 0px;
}
.a-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
}
.a-pagination span,
.a-pagination a {
/* Button */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-button);
--min-fs: var(--text-button-min);
font-style: normal;
/* line-height: normal; */
line-height: 1.37;
display: flex;
height: 2.5rem;
width: 2.5rem;
align-items: center;
justify-content: center;
padding: 0.625rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
html[lang="zh-Hant"] .a-pagination span,html[lang="zh-Hant"]
.a-pagination a {
font-weight: 400;
}
.a-pagination span.current {
--tw-text-opacity: 1;
color: rgb(123 123 123 / var(--tw-text-opacity));
}
.a-pagination a.prev.page-numbers svg {
--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));
}
.underline-link::after {
content: "";
display: block;
width: 0;
height: 1px;
background: #222222;
transition: width 0.8s cubic-bezier(0.45, 0, 0.27, 1);
}
.underline-link:hover::after,
.underline-link.active::after {
width: 100%;
color: #222222;
}
/* @media (max-width: 640px) {
.content>div {
display: none;
}
.content1>div {
display: block;
}
} */
.underline-offset-custom {
text-underline-offset: 10px;
}
.wysiwyg-edtior-wrapper h1 {
/* H4 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h4);
--min-fs: var(--text-h4-min);
font-style: normal;
/* 36.4px */
margin-bottom: 10px;
font-weight: 700;
line-height: 130%;
}
.wysiwyg-edtior-wrapper h4 {
/* H4 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h4);
--min-fs: var(--text-h4-min);
font-style: normal;
font-weight: 400;
line-height: 130%;
/* 36.4px */
padding-bottom: 0.625rem;
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
color: var(--black-000);
}
.wysiwyg-edtior-wrapper p {
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 33px */
}
.wysiwyg-edtior-wrapper ul {
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 33px */
margin-left: 20px;
list-style-type: disc;
}
.wysiwyg-edtior-wrapper .item {
padding-bottom: 1.25rem;
}
@media (min-width: 1024px) {
.wysiwyg-edtior-wrapper .item {
padding-bottom: 2.5rem;
}
}
.backlink {
position: relative;
color: #222;
}
.backlink-white {
position: relative;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
color: var(--white);
}
.underline-offset-custom {
text-decoration: none;
}
.backlink::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: currentColor;
transition: width 0.3s ease, left 0.3s ease;
}
.backlink-white::after {
content: "";
background-color: currentColor;
transition: width 0.3s ease, left 0.3s ease;
position: absolute;
left: 0px;
bottom: -2px;
height: 2px;
width: 100%;
}
.backlink:hover::after {
width: 0;
right: 100%;
}
.backlink-white:hover::after {
right: 100%;
width: 0px;
}
.text-ellipsis {
display: -webkit-box;
--webkit-line-clamp: 2;
--webkit-box-orient: vertical;
overflow: hidden;
}
/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.overlay.active {
opacity: 1;
pointer-events: all;
}
/*Popup Overlay */
.popupoverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 50;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.popupoverlay.active {
opacity: 1;
pointer-events: all;
}
/* Prevent body scrolling */
body.noscroll {
overflow: hidden;
}
#searchInput::-moz-placeholder {
/* Body Big */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body-lg);
--min-fs: var(--text-body-lg-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
#searchInput::placeholder {
/* Body Big */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body-lg);
--min-fs: var(--text-body-lg-min);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.footer-embed.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.footer-embed.embed-container iframe,
.footer-embed.embed-container object,
.footer-embed.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header-logo a img {
height: 100%;
max-height: 60px;
}
@media (min-width: 1024px) {
.header-logo a img {
max-height: 80px;
}
}
.woocommerce-form-login .woo-slg-social-wrap,
.woocommerce-form-register .woo-slg-social-wrap {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
}
.nt-login-register .woo-slg-login-wrapper {
margin-right: 0;
margin-bottom: 16px;
width: 100%;
}
.woo-slg-social-btn.woo-slg-social-login-googleplus,
.woo-slg-social-btn.woo-slg-social-login-facebook,
.woo-slg-social-container .woo-slg-social-btn,
.woo-slg-social-container .woo-slg-social-btn:hover,
.woo-slg-social-container .woo-slg-social-btn:active,
.woo-slg-social-container .woo-slg-social-btn:visited {
background-color: white;
width: 100%;
max-width: 100%;
box-shadow: none;
padding: 12px;
border-radius: 0;
color: #1F1F1F !important;
/* Body */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-body);
--min-fs: var(--text-body-min);
font-style: normal;
line-height: 150%;
/* 33px */
font-weight: 400;
}
.woo-slg-gp-icon {
background-image: url('data:image/svg+xml,');
}
.woo-slg-fb-icon {
background-image: url('data:image/svg+xml,');
}
.woo-slg-icon {
display: inline-block;
position: relative;
width: 25px;
height: 25px;
background-repeat: no-repeat;
border-right: 0;
margin-bottom: -6px;
}
.wp-block-embed.wp-block-embed-youtube iframe {
width: 100%;
height: 100%;
aspect-ratio: 880/373;
}
#information.sb-content ul {
list-style-position: inside;
list-style-type: disc;
}
#information.sb-content ol {
list-style-position: inside;
list-style-type: decimal;
}
#information.sb-content a {
text-decoration-line: underline;
}
@media screen and (max-width: 639px) {
#information figure {
width: 100% !important;
}
}
@media screen and (max-width: 481px) {
.mobile-popup-slider-container {
display: flex;
align-items: center;
justify-content: center;
height: 80vh
}
}
/* .artistbanner {
@apply after:content-[''] after:block after:w-full after:h-full after:absolute after:left-0 after:top-0;
&:after {
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
z-index: 0;
}
} */
#gallery .main-slider {
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
overflow: hidden;
}
#gallery .main-slider .swiper-wrapper {
/* @apply h-auto; */
/* @apply h-[230px] sm:h-[350px] lg:h-[400px] xl:h-[430px] 4xl:h-[500px] 5xl:h-[600px]; */
height: 230px;
}
@media (min-width: 640px) {
#gallery .main-slider .swiper-wrapper {
height: 350px;
}
}
@media (min-width: 1024px) {
#gallery .main-slider .swiper-wrapper {
height: 430px;
}
}
@media (min-width: 1440px) {
#gallery .main-slider .swiper-wrapper {
height: 600px;
}
}
.main-slider {
position: relative;
}
.main-slider .swiper-slide {
position: relative;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.main-slider .swiper-slide img {
aspect-ratio: 1/1;
height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.main-slider .swiper-slide .my-zoom {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.main-slider .swiper-slide .my-zoom img {
aspect-ratio: 1/1;
width: auto;
-o-object-fit: contain;
object-fit: contain;
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev,
#popup-gallery .swiper-button-next,
#popup-gallery .swiper-button-prev {
top: 50%;
width: 30px;
height: 30px;
--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));
border-width: 1px;
border-color: transparent;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
color: var(--white);
}
@media (min-width: 1024px) {
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev,
#popup-gallery .swiper-button-next,
#popup-gallery .swiper-button-prev {
width: 50px;
height: 50px;
}
}
.main-slider .swiper-button-next {
right: 0px;
}
#popup-gallery .swiper-button-next {
right: var(--container-md-px);
}
#popup-gallery .swiper-button-next svg,
.main-slider .swiper-button-next svg {
--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));
}
.main-slider .swiper-button-prev {
left: 0px;
}
#popup-gallery .swiper-button-prev {
left: var(--container-md-px);
}
.main-slider .swiper-button-next::after,
.main-slider .swiper-button-prev::after,
#popup-gallery .swiper-button-next::after,
#popup-gallery .swiper-button-prev::after,
.home-publication-slider .swiper-button-next::after,
.home-publication-slider .swiper-button-prev::after {
display: none;
}
.a-button.main-slider .swiper-button-next::after,.a-button
.main-slider .swiper-button-prev::after,.a-button
#popup-gallery .swiper-button-next::after,.a-button
#popup-gallery .swiper-button-prev::after,.a-button
.home-publication-slider .swiper-button-next::after,.a-button
.home-publication-slider .swiper-button-prev::after {
display: none;
}
.main-slider .swiper-button-next:hover,
.main-slider .swiper-button-prev:hover,
#popup-gallery .swiper-button-next:hover,
#popup-gallery .swiper-button-prev:hover {
/* @apply border-secondary; */
}
.thumbnail-container {
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
height: 84px;
width: -moz-fit-content;
width: fit-content;
min-width: 84px;
max-width: 768px;
overflow: hidden;
}
@media (min-width: 1440px) {
.thumbnail-container {
max-width: 840px;
}
}
.thumbnail-container .swiper-slide {
height: 50px;
width: 50px;
cursor: pointer;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.my-zoom-popup .thumbnail-container {
margin: 0px;
height: 84px;
width: -moz-fit-content;
width: fit-content;
min-width: 84px;
max-width: 768px;
}
@media (min-width: 1024px) {
.my-zoom-popup .thumbnail-container {
max-width: 733px;
}
}
@media (min-width: 1440px) {
.my-zoom-popup .thumbnail-container {
max-width: 840px;
}
}
/* @media screen and (min-width:1280px) {
width: 84px !important;
} */
@media screen and (min-width: 1024px) {
#gallery .thumbnail-container .swiper-slide {
width: 50px !important
}
}
#popup-gallery .close-btn {
width: 15px;
height: 15px;
}
@media (min-width: 1024px) {
#popup-gallery .close-btn {
width: 1.5rem;
height: 1.5rem;
}
}
#popup-gallery .close-btn svg {
width: 100%;
height: 100%;
}
@media screen and (max-width: 1023px) {
.thumbnail-container .swiper-slide {
width: 50px !important;
}
}
.thumbnail-container .swiper-slide img {
aspect-ratio: 1/1;
height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
padding: 0.5rem;
}
.thumbnail-container .swiper-slide-thumb-active {
position: relative;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(34 34 34 / var(--tw-border-opacity));
}
.my-zoom-popup .main-slider .swiper-wrapper {
height: 100vh;
/* @apply h-[230px] sm:h-[350px] lg:h-[400px] xl:h-[430px] 4xl:h-[500px] 5xl:h-[600px]; */
}
.my-zoom-popup .main-slider .swiper-button-next {
right: 0px;
}
@media (min-width: 1366px) {
.my-zoom-popup .main-slider .swiper-button-next {
top: 50%;
}
}
.my-zoom-popup .main-slider .swiper-button-prev {
left: 0px;
}
@media (min-width: 1366px) {
.my-zoom-popup .main-slider .swiper-button-prev {
top: 50%;
}
}
.my-zoom-popup .main-slider .swiper-wrapper .swiper-slide img {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.zoom-btn {
top: 50%;
right: 40px;
z-index: 3;
margin-top: 50px;
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));
align-items: center;
justify-content: center;
gap: 1.25rem;
}
@media (min-width: 768px) {
.zoom-btn {
position: absolute;
margin-top: 0px;
width: auto;
}
}
@media (min-width: 1440px) {
.zoom-btn {
right: 60px;
}
}
@media (min-width: 1920px) {
.zoom-btn {
right: 80px;
}
}
.zoom-btn .plus-btn,
.zoom-btn .minus-btn {
/* H1 */
--max-fs: var(--text-base);
--min-fs: var(--text-base-min);
--slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));
--min-fs-px: calc(var(--min-fs) * 1px);
--max-fs-px: calc(var(--max-fs) * 1px);
--fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));
font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
--max-fs: var(--text-h1);
--min-fs: var(--text-h1-min);
font-style: normal;
font-weight: 400;
line-height: 120%;
/* 48px */
display: flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 541px) {
#gallery .main-slider {
max-width: 500px;
}
}
@media screen and (max-width: 481px) {
#gallery .main-slider {
max-width: 440px;
}
}
@media screen and (max-width: 415px) {
#gallery .main-slider {
max-width: 374px;
}
}
@media screen and (max-width: 394px) {
#gallery .main-slider {
max-width: 353px;
}
}
@media screen and (max-width: 391px) {
#gallery .main-slider {
max-width: 350px;
}
}
@media screen and (max-width: 376px) {
#gallery .main-slider {
max-width: 335px;
}
}
@media screen and (max-width: 361px) {
#gallery .main-slider {
max-width: 320px;
}
}
@media screen and (max-width: 341px) {
#gallery .main-slider {
max-width: 300px;
}
}
@media screen and (max-width: 321px) {
#gallery .main-slider {
max-width: 280px;
}
}
.news-date {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 100%;
min-height: 20px;
}
.news-title {
height: 100%;
min-height: 50px;
}
@media (min-width: 1024px) {
.news-title {
min-height: 60px;
}
}
@media (min-width: 1440px) {
.news-title {
min-height: 65px;
}
}
.news-desc {
height: 100%;
min-height: 65px;
}
@media (min-width: 640px) {
.news-desc {
min-height: 72px;
}
}
.placeholder\:text-black-400::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(122 122 122 / var(--tw-text-opacity));
}
.placeholder\:text-black-400::placeholder {
--tw-text-opacity: 1;
color: rgb(122 122 122 / var(--tw-text-opacity));
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.before\:left-0::before {
content: var(--tw-content);
left: 0px;
}
.before\:top-1\/2::before {
content: var(--tw-content);
top: 50%;
}
.before\:block::before {
content: var(--tw-content);
display: block;
}
.before\:h-\[1px\]::before {
content: var(--tw-content);
height: 1px;
}
.before\:w-1\/2::before {
content: var(--tw-content);
width: 50%;
}
.before\:-translate-y-1\/2::before {
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));
}
.before\:content-normal::before {
content: var(--tw-content);
align-content: normal;
}
.before\:bg-\[\#D8D9DA\]::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(216 217 218 / var(--tw-bg-opacity));
}
.after\:absolute::after {
content: var(--tw-content);
position: absolute;
}
.after\:left-0::after {
content: var(--tw-content);
left: 0px;
}
.after\:right-0::after {
content: var(--tw-content);
right: 0px;
}
.after\:top-1\/2::after {
content: var(--tw-content);
top: 50%;
}
.after\:block::after {
content: var(--tw-content);
display: block;
}
.after\:h-\[1px\]::after {
content: var(--tw-content);
height: 1px;
}
.after\:h-full::after {
content: var(--tw-content);
height: 100%;
}
.after\:w-1\/2::after {
content: var(--tw-content);
width: 50%;
}
.after\:w-full::after {
content: var(--tw-content);
width: 100%;
}
.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\:content-normal::after {
content: var(--tw-content);
align-content: normal;
}
.after\:bg-\[\#D8D9DA\]::after {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(216 217 218 / var(--tw-bg-opacity));
}
.after\:content-\[\'\'\]::after {
--tw-content: '';
content: var(--tw-content);
}
.first\:px-0:first-child {
padding-left: 0px;
padding-right: 0px;
}
.first\:text-left:first-child {
text-align: left;
}
.last\:mr-0:last-child {
margin-right: 0px;
}
.last\:border-b-0:last-child {
border-bottom-width: 0px;
}
.last\:border-none:last-child {
border-style: none;
}
.last\:pb-0:last-child {
padding-bottom: 0px;
}
.last\:pb-2:last-child {
padding-bottom: 0.5rem;
}
.last\:pl-1:last-child {
padding-left: 0.25rem;
}
.last\:pr-0:last-child {
padding-right: 0px;
}
.last\:text-right:last-child {
text-align: right;
}
.focus-within\:outline-none:focus-within {
outline: 2px solid transparent;
outline-offset: 2px;
}
.hover\:bg-primary:hover {
--tw-bg-opacity: 1;
background-color: rgb(34 34 34 / var(--tw-bg-opacity));
}
.hover\:bg-transparent:hover {
background-color: transparent;
}
.hover\:text-\[\#222\]:hover {
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
}
.hover\:text-gray-700:hover {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.hover\:text-primary:hover {
--tw-text-opacity: 1;
color: rgb(34 34 34 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.hover\:backdrop-blur-sm:hover {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.hover\:duration-300:hover {
transition-duration: 300ms;
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus-visible\:outline-none:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.group:hover .group-hover\:flex {
display: flex;
}
.group:hover .group-hover\:translate-y-1 {
--tw-translate-y: 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));
}
.group:hover .group-hover\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
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));
}
.group:hover .group-hover\:scale-105 {
--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));
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
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));
}
.group:hover .group-hover\:scale-\[1\.05\] {
--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));
}
.group:hover .group-hover\:border-none {
border-style: none;
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:blur-sm {
--tw-blur: blur(4px);
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);
}
.group:hover .group-hover\:transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.group:hover .group-hover\:duration-300 {
transition-duration: 300ms;
}
@media (min-width: 480px) {
.xs\:flex-row {
flex-direction: row;
}
.xs\:items-center {
align-items: center;
}
.xs\:px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.last\:xs\:pl-2:last-child {
padding-left: 0.5rem;
}
}
@media (min-width: 640px) {
.sm\:mb-0 {
margin-bottom: 0px;
}
.sm\:mb-10 {
margin-bottom: 2.5rem;
}
.sm\:mb-7 {
margin-bottom: 1.75rem;
}
.sm\:mb-8 {
margin-bottom: 2rem;
}
.sm\:mb-9 {
margin-bottom: 2.25rem;
}
.sm\:mr-4 {
margin-right: 1rem;
}
.sm\:h-6 {
height: 1.5rem;
}
.sm\:h-9 {
height: 2.25rem;
}
.sm\:h-\[350px\] {
height: 350px;
}
.sm\:min-h-\[72px\] {
min-height: 72px;
}
.sm\:w-6 {
width: 1.5rem;
}
.sm\:w-9 {
width: 2.25rem;
}
.sm\:w-\[calc\(\(100\%-80px\)\/2\)\] {
width: calc((100% - 80px) / 2);
}
.sm\:w-auto {
width: auto;
}
.sm\:min-w-\[360px\] {
min-width: 360px;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sm\:grid-cols-\[auto_380px\] {
grid-template-columns: auto 380px;
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:flex-nowrap {
flex-wrap: nowrap;
}
.sm\:gap-2 {
gap: 0.5rem;
}
.sm\:p-5 {
padding: 1.25rem;
}
.sm\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.sm\:py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
}
@media (min-width: 768px) {
.md\:absolute {
position: absolute;
}
.md\:bottom-\[unset\] {
bottom: unset;
}
.md\:top-1\/2 {
top: 50%;
}
.md\:mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.md\:my-\[60px\] {
margin-top: 60px;
margin-bottom: 60px;
}
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:mb-5 {
margin-bottom: 1.25rem;
}
.md\:ml-3 {
margin-left: 0.75rem;
}
.md\:mr-4 {
margin-right: 1rem;
}
.md\:mr-8 {
margin-right: 2rem;
}
.md\:mt-0 {
margin-top: 0px;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:aspect-\[14\/9\] {
aspect-ratio: 14/9;
}
.md\:aspect-\[160\/131\] {
aspect-ratio: 160/131;
}
.md\:aspect-\[1760\/746\] {
aspect-ratio: 1760/746;
}
.md\:aspect-\[880\/373\] {
aspect-ratio: 880/373;
}
.md\:aspect-square {
aspect-ratio: 1 / 1;
}
.md\:h-6 {
height: 1.5rem;
}
.md\:h-\[60px\] {
height: 60px;
}
.md\:h-full {
height: 100%;
}
.md\:max-h-\[373px\] {
max-height: 373px;
}
.md\:min-h-\[unset\] {
min-height: unset;
}
.md\:w-6 {
width: 1.5rem;
}
.md\:w-auto {
width: auto;
}
.md\:w-fit {
width: -moz-fit-content;
width: fit-content;
}
.md\:min-w-\[34\.09\%\] {
min-width: 34.09%;
}
.md\:max-w-20 {
max-width: 5rem;
}
.md\:max-w-\[60\%\] {
max-width: 60%;
}
.md\:max-w-\[80\%\] {
max-width: 80%;
}
.md\:-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));
}
.md\:columns-2 {
-moz-columns: 2;
columns: 2;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:flex-col {
flex-direction: column;
}
.md\:flex-nowrap {
flex-wrap: nowrap;
}
.md\:items-start {
align-items: flex-start;
}
.md\:items-center {
align-items: center;
}
.md\:justify-start {
justify-content: flex-start;
}
.md\:justify-center {
justify-content: center;
}
.md\:gap-10 {
gap: 2.5rem;
}
.md\:gap-5 {
gap: 1.25rem;
}
.md\:gap-\[20px\] {
gap: 20px;
}
.md\:gap-\[48px\] {
gap: 48px;
}
.md\:gap-\[80px\] {
gap: 80px;
}
.md\:gap-y-10 {
row-gap: 2.5rem;
}
.md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.md\:overflow-hidden {
overflow: hidden;
}
.md\:border-b-0 {
border-bottom-width: 0px;
}
.md\:border-b-\[1px\] {
border-bottom-width: 1px;
}
.md\:border-r {
border-right-width: 1px;
}
.md\:object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.md\:p-5 {
padding: 1.25rem;
}
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.md\:px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.md\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.md\:px-\[140px\] {
padding-left: 140px;
padding-right: 140px;
}
.md\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.md\:py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.md\:py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.md\:py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.md\:py-\[100px\] {
padding-top: 100px;
padding-bottom: 100px;
}
.md\:py-\[18px\] {
padding-top: 18px;
padding-bottom: 18px;
}
.md\:pb-0 {
padding-bottom: 0px;
}
.md\:pb-1 {
padding-bottom: 0.25rem;
}
.md\:pb-10 {
padding-bottom: 2.5rem;
}
.md\:pb-20 {
padding-bottom: 5rem;
}
.md\:pb-3 {
padding-bottom: 0.75rem;
}
.md\:pb-5 {
padding-bottom: 1.25rem;
}
.md\:pb-6 {
padding-bottom: 1.5rem;
}
.md\:pl-16 {
padding-left: 4rem;
}
.md\:pl-5 {
padding-left: 1.25rem;
}
.md\:pr-16 {
padding-right: 4rem;
}
.md\:pt-0 {
padding-top: 0px;
}
.md\:pt-10 {
padding-top: 2.5rem;
}
.md\:pt-20 {
padding-top: 5rem;
}
.md\:pt-5 {
padding-top: 1.25rem;
}
.md\:pt-\[80px\] {
padding-top: 80px;
}
.md\:text-center {
text-align: center;
}
.md\:text-start {
text-align: start;
}
.md\:last\:mb-6:last-child {
margin-bottom: 1.5rem;
}
}
@media (min-width: 1024px) {
.lg\:relative {
position: relative;
}
.lg\:right-\[60px\] {
right: 60px;
}
.lg\:top-0 {
top: 0px;
}
.lg\:z-50 {
z-index: 50;
}
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:my-7 {
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.lg\:my-\[100px\] {
margin-top: 100px;
margin-bottom: 100px;
}
.lg\:mb-0 {
margin-bottom: 0px;
}
.lg\:mb-10 {
margin-bottom: 2.5rem;
}
.lg\:mb-2 {
margin-bottom: 0.5rem;
}
.lg\:mb-2\.5 {
margin-bottom: 0.625rem;
}
.lg\:mb-6 {
margin-bottom: 1.5rem;
}
.lg\:mb-7 {
margin-bottom: 1.75rem;
}
.lg\:ml-\[35px\] {
margin-left: 35px;
}
.lg\:mr-10 {
margin-right: 2.5rem;
}
.lg\:mr-20 {
margin-right: 5rem;
}
.lg\:mr-8 {
margin-right: 2rem;
}
.lg\:mr-\[26px\] {
margin-right: 26px;
}
.lg\:mr-\[35px\] {
margin-right: 35px;
}
.lg\:mt-0 {
margin-top: 0px;
}
.lg\:mt-1 {
margin-top: 0.25rem;
}
.lg\:mt-10 {
margin-top: 2.5rem;
}
.lg\:mt-20 {
margin-top: 5rem;
}
.lg\:mt-5 {
margin-top: 1.25rem;
}
.lg\:mt-6 {
margin-top: 1.5rem;
}
.lg\:mt-7 {
margin-top: 1.75rem;
}
.lg\:mt-\[100px\] {
margin-top: 100px;
}
.lg\:mt-\[40px\] {
margin-top: 40px;
}
.lg\:mt-\[60px\] {
margin-top: 60px;
}
.lg\:\!block {
display: block !important;
}
.lg\:block {
display: block;
}
.lg\:flex {
display: flex;
}
.lg\:hidden {
display: none;
}
.lg\:aspect-\[13\/8\] {
aspect-ratio: 13/8;
}
.lg\:aspect-\[14\/9\] {
aspect-ratio: 14/9;
}
.lg\:aspect-\[17\/16\] {
aspect-ratio: 17/16;
}
.lg\:aspect-\[1760\/746\] {
aspect-ratio: 1760/746;
}
.lg\:aspect-\[560\/460\] {
aspect-ratio: 560/460;
}
.lg\:size-\[50px\] {
width: 50px;
height: 50px;
}
.lg\:h-6 {
height: 1.5rem;
}
.lg\:h-\[400px\] {
height: 400px;
}
.lg\:h-\[430px\] {
height: 430px;
}
.lg\:h-full {
height: 100%;
}
.lg\:max-h-\[746px\] {
max-height: 746px;
}
.lg\:max-h-\[80px\] {
max-height: 80px;
}
.lg\:min-h-\[60px\] {
min-height: 60px;
}
.lg\:w-2\/6 {
width: 33.333333%;
}
.lg\:w-3\/4 {
width: 75%;
}
.lg\:w-4\/6 {
width: 66.666667%;
}
.lg\:w-6 {
width: 1.5rem;
}
.lg\:w-9 {
width: 2.25rem;
}
.lg\:w-\[260px\] {
width: 260px;
}
.lg\:w-\[32\.95\%\] {
width: 32.95%;
}
.lg\:w-\[35\%\] {
width: 35%;
}
.lg\:w-\[395px\] {
width: 395px;
}
.lg\:w-\[400px\] {
width: 400px;
}
.lg\:w-\[67\.05\%\] {
width: 67.05%;
}
.lg\:w-\[80\%\] {
width: 80%;
}
.lg\:w-\[calc\(\(100\%-80px\)\/2\)\] {
width: calc((100% - 80px) / 2);
}
.lg\:w-\[calc\(100\%-320px\)\] {
width: calc(100% - 320px);
}
.lg\:w-\[calc\(100\%_-_395px\)\] {
width: calc(100% - 395px);
}
.lg\:w-full {
width: 100%;
}
.lg\:max-w-20 {
max-width: 5rem;
}
.lg\:max-w-\[112px\] {
max-width: 112px;
}
.lg\:max-w-\[680px\] {
max-width: 680px;
}
.lg\:max-w-\[733px\] {
max-width: 733px;
}
.lg\:max-w-full {
max-width: 100%;
}
.lg\:grow {
flex-grow: 1;
}
.lg\:columns-4 {
-moz-columns: 4;
columns: 4;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-\[auto_440px\] {
grid-template-columns: auto 440px;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-col {
flex-direction: column;
}
.lg\:flex-nowrap {
flex-wrap: nowrap;
}
.lg\:items-start {
align-items: flex-start;
}
.lg\:justify-center {
justify-content: center;
}
.lg\:gap-10 {
gap: 2.5rem;
}
.lg\:gap-20 {
gap: 5rem;
}
.lg\:gap-y-0 {
row-gap: 0px;
}
.lg\:gap-y-5 {
row-gap: 1.25rem;
}
.lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.lg\:space-y-\[100px\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(100px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(100px * var(--tw-space-y-reverse));
}
.lg\:whitespace-nowrap {
white-space: nowrap;
}
.lg\:p-7 {
padding: 1.75rem;
}
.lg\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.lg\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.lg\:px-\[145px\] {
padding-left: 145px;
padding-right: 145px;
}
.lg\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.lg\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.lg\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.lg\:py-\[100px\] {
padding-top: 100px;
padding-bottom: 100px;
}
.lg\:py-\[60px\] {
padding-top: 60px;
padding-bottom: 60px;
}
.lg\:pb-10 {
padding-bottom: 2.5rem;
}
.lg\:pb-20 {
padding-bottom: 5rem;
}
.lg\:pb-5 {
padding-bottom: 1.25rem;
}
.lg\:pb-8 {
padding-bottom: 2rem;
}
.lg\:pb-\[100px\] {
padding-bottom: 100px;
}
.lg\:pb-\[60px\] {
padding-bottom: 60px;
}
.lg\:pb-\[80px\] {
padding-bottom: 80px;
}
.lg\:pl-20 {
padding-left: 5rem;
}
.lg\:pl-\[60px\] {
padding-left: 60px;
}
.lg\:pr-0 {
padding-right: 0px;
}
.lg\:pr-20 {
padding-right: 5rem;
}
.lg\:pt-10 {
padding-top: 2.5rem;
}
.lg\:pt-11 {
padding-top: 2.75rem;
}
.lg\:pt-12 {
padding-top: 3rem;
}
.lg\:pt-20 {
padding-top: 5rem;
}
.lg\:pt-\[100px\] {
padding-top: 100px;
}
.lg\:pt-\[60px\] {
padding-top: 60px;
}
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.last\:lg\:pl-5:last-child {
padding-left: 1.25rem;
}
}
@media (min-width: 1280px) {
.xl\:col-span-2 {
grid-column: span 2 / span 2;
}
.xl\:mr-10 {
margin-right: 2.5rem;
}
.xl\:h-\[430px\] {
height: 430px;
}
.xl\:w-\[320px\] {
width: 320px;
}
.xl\:w-\[calc\(100\%-340px\)\] {
width: calc(100% - 340px);
}
.xl\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xl\:gap-10 {
gap: 2.5rem;
}
.xl\:gap-20 {
gap: 5rem;
}
.xl\:gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
.xl\:gap-x-20 {
-moz-column-gap: 5rem;
column-gap: 5rem;
}
.xl\:gap-y-\[60px\] {
row-gap: 60px;
}
.xl\:p-20 {
padding: 5rem;
}
.xl\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.xl\:px-\[280px\] {
padding-left: 280px;
padding-right: 280px;
}
.xl\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.xl\:pl-\[100px\] {
padding-left: 100px;
}
.xl\:pr-\[100px\] {
padding-right: 100px;
}
.xl\:pt-6 {
padding-top: 1.5rem;
}
}
@media (min-width: 1366px) {
.\32xl\:top-\[50\%\] {
top: 50%;
}
.\32xl\:mb-7 {
margin-bottom: 1.75rem;
}
.\32xl\:h-\[65px\] {
height: 65px;
}
.\32xl\:w-\[320px\] {
width: 320px;
}
.\32xl\:w-\[34\.09\%\] {
width: 34.09%;
}
.\32xl\:w-\[500px\] {
width: 500px;
}
.\32xl\:w-\[65px\] {
width: 65px;
}
.\32xl\:w-\[calc\(100\%_-_500px\)\] {
width: calc(100% - 500px);
}
.\32xl\:min-w-\[34\.09\%\] {
min-width: 34.09%;
}
.\32xl\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.\32xl\:gap-\[20px\] {
gap: 20px;
}
.\32xl\:gap-\[5px\] {
gap: 5px;
}
.\32xl\:p-7 {
padding: 1.75rem;
}
.\32xl\:px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.\32xl\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.\32xl\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.\32xl\:py-\[180px\] {
padding-top: 180px;
padding-bottom: 180px;
}
.\32xl\:pb-12 {
padding-bottom: 3rem;
}
.\32xl\:pb-20 {
padding-bottom: 5rem;
}
.\32xl\:pt-16 {
padding-top: 4rem;
}
.\32xl\:pt-\[100px\] {
padding-top: 100px;
}
}
@media (min-width: 1440px) {
.\33xl\:right-\[60px\] {
right: 60px;
}
.\33xl\:mt-\[60px\] {
margin-top: 60px;
}
.\33xl\:h-\[600px\] {
height: 600px;
}
.\33xl\:min-h-\[65px\] {
min-height: 65px;
}
.\33xl\:max-w-\[840px\] {
max-width: 840px;
}
.\33xl\:max-w-max {
max-width: -moz-max-content;
max-width: max-content;
}
.\33xl\:gap-20 {
gap: 5rem;
}
.\33xl\:p-\[80px\] {
padding: 80px;
}
.\33xl\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.\33xl\:py-\[100px\] {
padding-top: 100px;
padding-bottom: 100px;
}
.\33xl\:pb-\[100px\] {
padding-bottom: 100px;
}
.\33xl\:pb-\[60px\] {
padding-bottom: 60px;
}
.\33xl\:pt-\[100px\] {
padding-top: 100px;
}
.\33xl\:pt-\[80px\] {
padding-top: 80px;
}
.last\:3xl\:pl-10:last-child {
padding-left: 2.5rem;
}
}
@media (min-width: 1536px) {
.\34xl\:h-\[500px\] {
height: 500px;
}
.\34xl\:max-w-\[70\%\] {
max-width: 70%;
}
.\34xl\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1680px) {
.\35xl\:mt-0 {
margin-top: 0px;
}
.\35xl\:h-\[600px\] {
height: 600px;
}
.\35xl\:items-center {
align-items: center;
}
.\35xl\:pb-\[6px\] {
padding-bottom: 6px;
}
}
@media (min-width: 1920px) {
.\36xl\:right-\[80px\] {
right: 80px;
}
.\36xl\:line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.\36xl\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
}