html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
:root {
--clr-schema: light;
--clr-ui-white: #fff;
--clr-ui-black: #111;
--clr-ui-text: #111;
--clr-ui-background: #fff;
--clr-ui-error-background: #f44336;
--clr-ui-error-text: #fff;
--clr-ui-success-background: #388e3c;
--clr-ui-success-text: #fff;
--clr-ui-surface: #fff;
--clr-sementic-pink: #fec5fb;
--clr-sementic-shockingly-pink: #f100cb;
--clr-sementic-orange: #ff8709;
--clr-sementic-lilac: #9d95ff;
--clr-sementic-green: #abff84;
--clr-sementic-blue: #00bae2;
--clr-sementic-grey: #808080;
--clr-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--clr-box-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--clr-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--clr-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--clr-box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--clr-box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--clr-box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--clr-box-shadow-none: 0 0 rgba(0, 0, 0, 0);
--clr-overlay-white-0dp: rgba(255, 255, 255, 0);
--clr-overlay-white-1dp: rgba(255, 255, 255, 0.0509803922);
--clr-overlay-white-2dp: rgba(255, 255, 255, 0.0705882353);
--clr-overlay-white-3dp: rgba(255, 255, 255, 0.0784313725);
--clr-overlay-white-4dp: rgba(255, 255, 255, 0.0901960784);
--clr-overlay-white-6dp: rgba(255, 255, 255, 0.1098039216);
--clr-overlay-white-8dp: rgba(255, 255, 255, 0.1215686275);
--clr-overlay-white-12dp: rgba(255, 255, 255, 0.1411764706);
--clr-overlay-white-16dp: rgba(255, 255, 255, 0.1490196078);
--clr-overlay-white-24dp: rgba(255, 255, 255, 0.1607843137);
--clr-overlay-black-0dp: rgba(0, 0, 0, 0);
--clr-overlay-black-1dp: rgba(0, 0, 0, 0.0509803922);
--clr-overlay-black-2dp: rgba(0, 0, 0, 0.0705882353);
--clr-overlay-black-3dp: rgba(0, 0, 0, 0.0784313725);
--clr-overlay-black-4dp: rgba(0, 0, 0, 0.0901960784);
--clr-overlay-black-6dp: rgba(0, 0, 0, 0.1098039216);
--clr-overlay-black-8dp: rgba(0, 0, 0, 0.1215686275);
--clr-overlay-black-12dp: rgba(0, 0, 0, 0.1411764706);
--clr-overlay-black-16dp: rgba(0, 0, 0, 0.1490196078);
--clr-overlay-black-24dp: rgba(0, 0, 0, 0.1607843137);
--clr-primary-default: #7f0021;
--clr-primary-variant: #4c0013;
--clr-primary-contrast: #ff99aa;
--clr-primary-background: linear-gradient(90deg, #120005 0%, #111111 100%);
--clr-header-background-default: rgba(255, 255, 255, 0.8);
--clr-header-background-visible: #fff;
--clr-footer-background-default: #f1f0ee;
--clr-input-background-default: #ffffff;
--clr-input-background-disabled: #eeeeee;
--clr-input-background-hover: #fafafa;
--clr-input-background-click: #eeeeee;
--clr-input-border-default: #e0e0e0;
--clr-input-border-checkbox: #9e9e9e;
--clr-input-border-disabled: #f5f5f5;
--clr-input-border-focus: #66001a;
--clr-input-border-hover: #ff6680;
--clr-gray-50: #fafafa;
--clr-gray-100: #f5f5f5;
--clr-gray-200: #eeeeee;
--clr-gray-300: #e0e0e0;
--clr-gray-400: #bdbdbd;
--clr-gray-500: #9e9e9e;
--clr-gray-600: #757575;
--clr-gray-700: #616161;
--clr-gray-800: #424242;
--clr-gray-900: #212121;
--clr-gray-950: #121212;
--clr-secondary-default: #01a299;
--clr-secondary-variant: #018786;
--clr-secondary-contrast: #03dac5;
--family-ko-heading: Pretendard, sans-serif;
--family-ko-body: Pretendard, sans-serif;
--family-en-heading: Pretendard, sans-serif;
--family-en-body: Pretendard, sans-serif;
--header-height: 8rem;
--nav-height: 6rem;
--gutter-x: 8rem;
--gutter-y: 2.4rem;
--background-header: rgba(255, 255, 255, 0.88);
--transition-header: all 240ms cubic-bezier(0.4, 0, 0.6, 1);
--z-index-header: 1000rem;
--transition-swiper: all 0.35s cubic-bezier(0.6, 0, 0.4, 1);
--transition-button: all 0.32s cubic-bezier(0.6, 0, 0.4, 1);
--transition-modal: 0.32s 150ms cubic-bezier(0.4, 0, 0.6, 1);
--z-index-modal: 999.8rem;
--transition-input: all 0.36s cubic-bezier(0.6, 0, 0.4, 1);
--z-index-backdrop: 0rem;
--container-margin: clamp(2.4rem, 6.7313915858vw - 0.1242718447rem, 12.8rem);
--card-radius: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
}
@media (max-width: 768px) {
:root {
--header-height: 6.4rem;
--nav-height: 4.8rem;
--gutter-x: 2rem;
--gutter-y: 2rem;
}
}
[data-theme='dark'] {
--clr-schema: dark;
--clr-ui-text: #fff;
--clr-ui-background: #111;
--clr-ui-error-background: #e57373;
--clr-ui-error-text: #000;
--clr-ui-surface: #000;
--clr-primary-default: #ff99aa;
--clr-primary-variant: #ffccd5;
--clr-primary-contrast: #7f0021;
--clr-secondary-default: #03dac5;
--clr-secondary-variant: #01a299;
--clr-secondary-contrast: #018786;
}
[data-theme='admin-light'] {
--clr-schema: light;
--clr-ui-text: #000;
--clr-ui-background: #fff;
--clr-ui-error-background: #b00020;
--clr-ui-error-text: #fff;
--clr-ui-surface: #f9f9f9;
--clr-sementic-blue: #0d6efd;
--clr-sementic-green: #198754;
--clr-sementic-skyblue: #0dcaf0;
--clr-sementic-red: #ab2e3c;
--clr-sementic-yellow: #ffc107;
--clr-primary-default: #ee7b19;
--clr-primary-variant: #d66d10;
--clr-primary-contrast: #f5b893;
--clr-secondary-default: #189ef0;
--clr-secondary-variant: #007ed0;
--clr-secondary-contrast: #92cef6;
}
[data-theme='admin-dark'] {
--clr-schema: dark;
--clr-ui-text: #fff;
--clr-ui-background: #000;
--clr-ui-error-background: #cf6679;
--clr-ui-error-text: #000;
--clr-ui-surface: #212121;
--clr-primary-default: #f5b893;
--clr-primary-variant: #f9d3bd;
--clr-primary-contrast: #d66d10;
--clr-secondary-default: #92cef6;
--clr-secondary-variant: #189ef0;
--clr-secondary-contrast: #007ed0;
}
.clr-schema {
color: var(--clr-schema);
}
.bg-schema {
background-color: var(--clr-schema);
}
.clr-ui-white {
color: var(--clr-ui-white);
}
.bg-ui-white {
background-color: var(--clr-ui-white);
}
.clr-ui-black {
color: var(--clr-ui-black);
}
.bg-ui-black {
background-color: var(--clr-ui-black);
}
.clr-ui-text {
color: var(--clr-ui-text);
}
.bg-ui-text {
background-color: var(--clr-ui-text);
}
.clr-ui-background {
color: var(--clr-ui-background);
}
.bg-ui-background {
background-color: var(--clr-ui-background);
}
.clr-ui-error-background {
color: var(--clr-ui-error-background);
}
.bg-ui-error-background {
background-color: var(--clr-ui-error-background);
}
.clr-ui-error-text {
color: var(--clr-ui-error-text);
}
.bg-ui-error-text {
background-color: var(--clr-ui-error-text);
}
.clr-ui-success-background {
color: var(--clr-ui-success-background);
}
.bg-ui-success-background {
background-color: var(--clr-ui-success-background);
}
.clr-ui-success-text {
color: var(--clr-ui-success-text);
}
.bg-ui-success-text {
background-color: var(--clr-ui-success-text);
}
.clr-ui-surface {
color: var(--clr-ui-surface);
}
.bg-ui-surface {
background-color: var(--clr-ui-surface);
}
.clr-sementic-pink {
color: var(--clr-sementic-pink);
}
.bg-sementic-pink {
background-color: var(--clr-sementic-pink);
}
.clr-sementic-shockingly-pink {
color: var(--clr-sementic-shockingly-pink);
}
.bg-sementic-shockingly-pink {
background-color: var(--clr-sementic-shockingly-pink);
}
.clr-sementic-orange {
color: var(--clr-sementic-orange);
}
.bg-sementic-orange {
background-color: var(--clr-sementic-orange);
}
.clr-sementic-lilac {
color: var(--clr-sementic-lilac);
}
.bg-sementic-lilac {
background-color: var(--clr-sementic-lilac);
}
.clr-sementic-green {
color: var(--clr-sementic-green);
}
.bg-sementic-green {
background-color: var(--clr-sementic-green);
}
.clr-sementic-blue {
color: var(--clr-sementic-blue);
}
.bg-sementic-blue {
background-color: var(--clr-sementic-blue);
}
.clr-sementic-grey {
color: var(--clr-sementic-grey);
}
.bg-sementic-grey {
background-color: var(--clr-sementic-grey);
}
.clr-box-shadow-sm {
color: var(--clr-box-shadow-sm);
}
.bg-box-shadow-sm {
background-color: var(--clr-box-shadow-sm);
}
.clr-box-shadow-default {
color: var(--clr-box-shadow-default);
}
.bg-box-shadow-default {
background-color: var(--clr-box-shadow-default);
}
.clr-box-shadow-md {
color: var(--clr-box-shadow-md);
}
.bg-box-shadow-md {
background-color: var(--clr-box-shadow-md);
}
.clr-box-shadow-lg {
color: var(--clr-box-shadow-lg);
}
.bg-box-shadow-lg {
background-color: var(--clr-box-shadow-lg);
}
.clr-box-shadow-xl {
color: var(--clr-box-shadow-xl);
}
.bg-box-shadow-xl {
background-color: var(--clr-box-shadow-xl);
}
.clr-box-shadow-2xl {
color: var(--clr-box-shadow-2xl);
}
.bg-box-shadow-2xl {
background-color: var(--clr-box-shadow-2xl);
}
.clr-box-shadow-inner {
color: var(--clr-box-shadow-inner);
}
.bg-box-shadow-inner {
background-color: var(--clr-box-shadow-inner);
}
.clr-box-shadow-none {
color: var(--clr-box-shadow-none);
}
.bg-box-shadow-none {
background-color: var(--clr-box-shadow-none);
}
.clr-overlay-white-0dp {
color: var(--clr-overlay-white-0dp);
}
.bg-overlay-white-0dp {
background-color: var(--clr-overlay-white-0dp);
}
.clr-overlay-white-1dp {
color: var(--clr-overlay-white-1dp);
}
.bg-overlay-white-1dp {
background-color: var(--clr-overlay-white-1dp);
}
.clr-overlay-white-2dp {
color: var(--clr-overlay-white-2dp);
}
.bg-overlay-white-2dp {
background-color: var(--clr-overlay-white-2dp);
}
.clr-overlay-white-3dp {
color: var(--clr-overlay-white-3dp);
}
.bg-overlay-white-3dp {
background-color: var(--clr-overlay-white-3dp);
}
.clr-overlay-white-4dp {
color: var(--clr-overlay-white-4dp);
}
.bg-overlay-white-4dp {
background-color: var(--clr-overlay-white-4dp);
}
.clr-overlay-white-6dp {
color: var(--clr-overlay-white-6dp);
}
.bg-overlay-white-6dp {
background-color: var(--clr-overlay-white-6dp);
}
.clr-overlay-white-8dp {
color: var(--clr-overlay-white-8dp);
}
.bg-overlay-white-8dp {
background-color: var(--clr-overlay-white-8dp);
}
.clr-overlay-white-12dp {
color: var(--clr-overlay-white-12dp);
}
.bg-overlay-white-12dp {
background-color: var(--clr-overlay-white-12dp);
}
.clr-overlay-white-16dp {
color: var(--clr-overlay-white-16dp);
}
.bg-overlay-white-16dp {
background-color: var(--clr-overlay-white-16dp);
}
.clr-overlay-white-24dp {
color: var(--clr-overlay-white-24dp);
}
.bg-overlay-white-24dp {
background-color: var(--clr-overlay-white-24dp);
}
.clr-overlay-black-0dp {
color: var(--clr-overlay-black-0dp);
}
.bg-overlay-black-0dp {
background-color: var(--clr-overlay-black-0dp);
}
.clr-overlay-black-1dp {
color: var(--clr-overlay-black-1dp);
}
.bg-overlay-black-1dp {
background-color: var(--clr-overlay-black-1dp);
}
.clr-overlay-black-2dp {
color: var(--clr-overlay-black-2dp);
}
.bg-overlay-black-2dp {
background-color: var(--clr-overlay-black-2dp);
}
.clr-overlay-black-3dp {
color: var(--clr-overlay-black-3dp);
}
.bg-overlay-black-3dp {
background-color: var(--clr-overlay-black-3dp);
}
.clr-overlay-black-4dp {
color: var(--clr-overlay-black-4dp);
}
.bg-overlay-black-4dp {
background-color: var(--clr-overlay-black-4dp);
}
.clr-overlay-black-6dp {
color: var(--clr-overlay-black-6dp);
}
.bg-overlay-black-6dp {
background-color: var(--clr-overlay-black-6dp);
}
.clr-overlay-black-8dp {
color: var(--clr-overlay-black-8dp);
}
.bg-overlay-black-8dp {
background-color: var(--clr-overlay-black-8dp);
}
.clr-overlay-black-12dp {
color: var(--clr-overlay-black-12dp);
}
.bg-overlay-black-12dp {
background-color: var(--clr-overlay-black-12dp);
}
.clr-overlay-black-16dp {
color: var(--clr-overlay-black-16dp);
}
.bg-overlay-black-16dp {
background-color: var(--clr-overlay-black-16dp);
}
.clr-overlay-black-24dp {
color: var(--clr-overlay-black-24dp);
}
.bg-overlay-black-24dp {
background-color: var(--clr-overlay-black-24dp);
}
.clr-primary-default {
color: var(--clr-primary-default);
}
.bg-primary-default {
background-color: var(--clr-primary-default);
}
.clr-primary-variant {
color: var(--clr-primary-variant);
}
.bg-primary-variant {
background-color: var(--clr-primary-variant);
}
.clr-primary-contrast {
color: var(--clr-primary-contrast);
}
.bg-primary-contrast {
background-color: var(--clr-primary-contrast);
}
.clr-primary-background {
color: var(--clr-primary-background);
}
.bg-primary-background {
background-color: var(--clr-primary-background);
}
.clr-header-background-default {
color: var(--clr-header-background-default);
}
.bg-header-background-default {
background-color: var(--clr-header-background-default);
}
.clr-header-background-visible {
color: var(--clr-header-background-visible);
}
.bg-header-background-visible {
background-color: var(--clr-header-background-visible);
}
.clr-footer-background-default {
color: var(--clr-footer-background-default);
}
.bg-footer-background-default {
background-color: var(--clr-footer-background-default);
}
.clr-input-background-default {
color: var(--clr-input-background-default);
}
.bg-input-background-default {
background-color: var(--clr-input-background-default);
}
.clr-input-background-disabled {
color: var(--clr-input-background-disabled);
}
.bg-input-background-disabled {
background-color: var(--clr-input-background-disabled);
}
.clr-input-background-hover {
color: var(--clr-input-background-hover);
}
.bg-input-background-hover {
background-color: var(--clr-input-background-hover);
}
.clr-input-background-click {
color: var(--clr-input-background-click);
}
.bg-input-background-click {
background-color: var(--clr-input-background-click);
}
.clr-input-border-default {
color: var(--clr-input-border-default);
}
.bg-input-border-default {
background-color: var(--clr-input-border-default);
}
.clr-input-border-checkbox {
color: var(--clr-input-border-checkbox);
}
.bg-input-border-checkbox {
background-color: var(--clr-input-border-checkbox);
}
.clr-input-border-disabled {
color: var(--clr-input-border-disabled);
}
.bg-input-border-disabled {
background-color: var(--clr-input-border-disabled);
}
.clr-input-border-focus {
color: var(--clr-input-border-focus);
}
.bg-input-border-focus {
background-color: var(--clr-input-border-focus);
}
.clr-input-border-hover {
color: var(--clr-input-border-hover);
}
.bg-input-border-hover {
background-color: var(--clr-input-border-hover);
}
.clr-gray-50 {
color: var(--clr-gray-50);
}
.bg-gray-50 {
background-color: var(--clr-gray-50);
}
.clr-gray-100 {
color: var(--clr-gray-100);
}
.bg-gray-100 {
background-color: var(--clr-gray-100);
}
.clr-gray-200 {
color: var(--clr-gray-200);
}
.bg-gray-200 {
background-color: var(--clr-gray-200);
}
.clr-gray-300 {
color: var(--clr-gray-300);
}
.bg-gray-300 {
background-color: var(--clr-gray-300);
}
.clr-gray-400 {
color: var(--clr-gray-400);
}
.bg-gray-400 {
background-color: var(--clr-gray-400);
}
.clr-gray-500 {
color: var(--clr-gray-500);
}
.bg-gray-500 {
background-color: var(--clr-gray-500);
}
.clr-gray-600 {
color: var(--clr-gray-600);
}
.bg-gray-600 {
background-color: var(--clr-gray-600);
}
.clr-gray-700 {
color: var(--clr-gray-700);
}
.bg-gray-700 {
background-color: var(--clr-gray-700);
}
.clr-gray-800 {
color: var(--clr-gray-800);
}
.bg-gray-800 {
background-color: var(--clr-gray-800);
}
.clr-gray-900 {
color: var(--clr-gray-900);
}
.bg-gray-900 {
background-color: var(--clr-gray-900);
}
.clr-gray-950 {
color: var(--clr-gray-950);
}
.bg-gray-950 {
background-color: var(--clr-gray-950);
}
.clr-secondary-default {
color: var(--clr-secondary-default);
}
.bg-secondary-default {
background-color: var(--clr-secondary-default);
}
.clr-secondary-variant {
color: var(--clr-secondary-variant);
}
.bg-secondary-variant {
background-color: var(--clr-secondary-variant);
}
.clr-secondary-contrast {
color: var(--clr-secondary-contrast);
}
.bg-secondary-contrast {
background-color: var(--clr-secondary-contrast);
}
[data-theme='dark'] .clr-schema {
color: var(--clr-schema);
}
[data-theme='dark'] .bg-schema {
background-color: var(--clr-schema);
}
[data-theme='dark'] .clr-ui-text {
color: var(--clr-ui-text);
}
[data-theme='dark'] .bg-ui-text {
background-color: var(--clr-ui-text);
}
[data-theme='dark'] .clr-ui-background {
color: var(--clr-ui-background);
}
[data-theme='dark'] .bg-ui-background {
background-color: var(--clr-ui-background);
}
[data-theme='dark'] .clr-ui-error-background {
color: var(--clr-ui-error-background);
}
[data-theme='dark'] .bg-ui-error-background {
background-color: var(--clr-ui-error-background);
}
[data-theme='dark'] .clr-ui-error-text {
color: var(--clr-ui-error-text);
}
[data-theme='dark'] .bg-ui-error-text {
background-color: var(--clr-ui-error-text);
}
[data-theme='dark'] .clr-ui-surface {
color: var(--clr-ui-surface);
}
[data-theme='dark'] .bg-ui-surface {
background-color: var(--clr-ui-surface);
}
[data-theme='dark'] .clr-primary-default {
color: var(--clr-primary-default);
}
[data-theme='dark'] .bg-primary-default {
background-color: var(--clr-primary-default);
}
[data-theme='dark'] .clr-primary-variant {
color: var(--clr-primary-variant);
}
[data-theme='dark'] .bg-primary-variant {
background-color: var(--clr-primary-variant);
}
[data-theme='dark'] .clr-primary-contrast {
color: var(--clr-primary-contrast);
}
[data-theme='dark'] .bg-primary-contrast {
background-color: var(--clr-primary-contrast);
}
[data-theme='dark'] .clr-secondary-default {
color: var(--clr-secondary-default);
}
[data-theme='dark'] .bg-secondary-default {
background-color: var(--clr-secondary-default);
}
[data-theme='dark'] .clr-secondary-variant {
color: var(--clr-secondary-variant);
}
[data-theme='dark'] .bg-secondary-variant {
background-color: var(--clr-secondary-variant);
}
[data-theme='dark'] .clr-secondary-contrast {
color: var(--clr-secondary-contrast);
}
[data-theme='dark'] .bg-secondary-contrast {
background-color: var(--clr-secondary-contrast);
}
[data-theme='admin-light'] .clr-schema {
color: var(--clr-schema);
}
[data-theme='admin-light'] .bg-schema {
background-color: var(--clr-schema);
}
[data-theme='admin-light'] .clr-ui-text {
color: var(--clr-ui-text);
}
[data-theme='admin-light'] .bg-ui-text {
background-color: var(--clr-ui-text);
}
[data-theme='admin-light'] .clr-ui-background {
color: var(--clr-ui-background);
}
[data-theme='admin-light'] .bg-ui-background {
background-color: var(--clr-ui-background);
}
[data-theme='admin-light'] .clr-ui-error-background {
color: var(--clr-ui-error-background);
}
[data-theme='admin-light'] .bg-ui-error-background {
background-color: var(--clr-ui-error-background);
}
[data-theme='admin-light'] .clr-ui-error-text {
color: var(--clr-ui-error-text);
}
[data-theme='admin-light'] .bg-ui-error-text {
background-color: var(--clr-ui-error-text);
}
[data-theme='admin-light'] .clr-ui-surface {
color: var(--clr-ui-surface);
}
[data-theme='admin-light'] .bg-ui-surface {
background-color: var(--clr-ui-surface);
}
[data-theme='admin-light'] .clr-sementic-blue {
color: var(--clr-sementic-blue);
}
[data-theme='admin-light'] .bg-sementic-blue {
background-color: var(--clr-sementic-blue);
}
[data-theme='admin-light'] .clr-sementic-green {
color: var(--clr-sementic-green);
}
[data-theme='admin-light'] .bg-sementic-green {
background-color: var(--clr-sementic-green);
}
[data-theme='admin-light'] .clr-sementic-skyblue {
color: var(--clr-sementic-skyblue);
}
[data-theme='admin-light'] .bg-sementic-skyblue {
background-color: var(--clr-sementic-skyblue);
}
[data-theme='admin-light'] .clr-sementic-red {
color: var(--clr-sementic-red);
}
[data-theme='admin-light'] .bg-sementic-red {
background-color: var(--clr-sementic-red);
}
[data-theme='admin-light'] .clr-sementic-yellow {
color: var(--clr-sementic-yellow);
}
[data-theme='admin-light'] .bg-sementic-yellow {
background-color: var(--clr-sementic-yellow);
}
[data-theme='admin-light'] .clr-primary-default {
color: var(--clr-primary-default);
}
[data-theme='admin-light'] .bg-primary-default {
background-color: var(--clr-primary-default);
}
[data-theme='admin-light'] .clr-primary-variant {
color: var(--clr-primary-variant);
}
[data-theme='admin-light'] .bg-primary-variant {
background-color: var(--clr-primary-variant);
}
[data-theme='admin-light'] .clr-primary-contrast {
color: var(--clr-primary-contrast);
}
[data-theme='admin-light'] .bg-primary-contrast {
background-color: var(--clr-primary-contrast);
}
[data-theme='admin-light'] .clr-secondary-default {
color: var(--clr-secondary-default);
}
[data-theme='admin-light'] .bg-secondary-default {
background-color: var(--clr-secondary-default);
}
[data-theme='admin-light'] .clr-secondary-variant {
color: var(--clr-secondary-variant);
}
[data-theme='admin-light'] .bg-secondary-variant {
background-color: var(--clr-secondary-variant);
}
[data-theme='admin-light'] .clr-secondary-contrast {
color: var(--clr-secondary-contrast);
}
[data-theme='admin-light'] .bg-secondary-contrast {
background-color: var(--clr-secondary-contrast);
}
[data-theme='admin-dark'] .clr-schema {
color: var(--clr-schema);
}
[data-theme='admin-dark'] .bg-schema {
background-color: var(--clr-schema);
}
[data-theme='admin-dark'] .clr-ui-text {
color: var(--clr-ui-text);
}
[data-theme='admin-dark'] .bg-ui-text {
background-color: var(--clr-ui-text);
}
[data-theme='admin-dark'] .clr-ui-background {
color: var(--clr-ui-background);
}
[data-theme='admin-dark'] .bg-ui-background {
background-color: var(--clr-ui-background);
}
[data-theme='admin-dark'] .clr-ui-error-background {
color: var(--clr-ui-error-background);
}
[data-theme='admin-dark'] .bg-ui-error-background {
background-color: var(--clr-ui-error-background);
}
[data-theme='admin-dark'] .clr-ui-error-text {
color: var(--clr-ui-error-text);
}
[data-theme='admin-dark'] .bg-ui-error-text {
background-color: var(--clr-ui-error-text);
}
[data-theme='admin-dark'] .clr-ui-surface {
color: var(--clr-ui-surface);
}
[data-theme='admin-dark'] .bg-ui-surface {
background-color: var(--clr-ui-surface);
}
[data-theme='admin-dark'] .clr-primary-default {
color: var(--clr-primary-default);
}
[data-theme='admin-dark'] .bg-primary-default {
background-color: var(--clr-primary-default);
}
[data-theme='admin-dark'] .clr-primary-variant {
color: var(--clr-primary-variant);
}
[data-theme='admin-dark'] .bg-primary-variant {
background-color: var(--clr-primary-variant);
}
[data-theme='admin-dark'] .clr-primary-contrast {
color: var(--clr-primary-contrast);
}
[data-theme='admin-dark'] .bg-primary-contrast {
background-color: var(--clr-primary-contrast);
}
[data-theme='admin-dark'] .clr-secondary-default {
color: var(--clr-secondary-default);
}
[data-theme='admin-dark'] .bg-secondary-default {
background-color: var(--clr-secondary-default);
}
[data-theme='admin-dark'] .clr-secondary-variant {
color: var(--clr-secondary-variant);
}
[data-theme='admin-dark'] .bg-secondary-variant {
background-color: var(--clr-secondary-variant);
}
[data-theme='admin-dark'] .clr-secondary-contrast {
color: var(--clr-secondary-contrast);
}
[data-theme='admin-dark'] .bg-secondary-contrast {
background-color: var(--clr-secondary-contrast);
}
.no-heading-1 {
font-size: clamp(3.6rem, 2.9126213592vw + 2.5077669903rem, 8.1rem);
line-height: clamp(4.356rem, 3.5242718447vw + 3.0343980583rem, 9.801rem);
font-weight: 700;
}
.no-heading-2 {
font-size: clamp(3.2rem, 1.4239482201vw + 2.6660194175rem, 5.4rem);
line-height: clamp(3.872rem, 1.7229773463vw + 3.2258834951rem, 6.534rem);
font-weight: 700;
}
.no-heading-3 {
font-size: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem);
line-height: clamp(3.388rem, 1.5663430421vw + 2.8006213592rem, 5.808rem);
font-weight: 700;
}
.no-heading-4 {
font-size: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
line-height: clamp(2.178rem, 1.4097087379vw + 1.6493592233rem, 4.356rem);
font-weight: 700;
}
.no-heading-5 {
font-size: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
line-height: clamp(2.057rem, 1.1747572816vw + 1.6164660194rem, 3.872rem);
font-weight: 700;
}
.no-heading-6 {
font-size: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
line-height: clamp(1.936rem, 0.9398058252vw + 1.5835728155rem, 3.388rem);
font-weight: 700;
}
.no-heading-7 {
font-size: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
line-height: clamp(1.936rem, 0.6265372168vw + 1.7010485437rem, 2.904rem);
font-weight: 700;
}
.no-body-1 {
font-size: clamp(1.8rem, 0.1941747573vw + 1.727184466rem, 2.1rem);
line-height: clamp(2.397rem, 0.3650485437vw + 2.2601067961rem, 2.961rem);
font-weight: 400;
}
.no-body-2 {
font-size: clamp(1.7rem, 0.142394822vw + 1.6466019417rem, 1.92rem);
line-height: clamp(2.397rem, 0.200776699vw + 2.3217087379rem, 2.7072rem);
font-weight: 400;
}
.no-body-3 {
font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
line-height: clamp(2.256rem, 0.1825242718vw + 2.1875533981rem, 2.538rem);
font-weight: 400;
}
.no-body-4 {
font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
line-height: clamp(2.115rem, 0.0912621359vw + 2.080776699rem, 2.256rem);
font-weight: 400;
}
.no-body-5 {
font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
line-height: clamp(1.833rem, 0.0912621359vw + 1.798776699rem, 1.974rem);
font-weight: 400;
}
.no-body-6 {
font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
line-height: clamp(1.551rem, 0.0912621359vw + 1.516776699rem, 1.692rem);
font-weight: 400;
}
.no-display-1 {
font-size: clamp(20rem, 5.6957928803vw + 17.8640776699rem, 28.8rem);
line-height: 1;
font-weight: 700;
}
.no-display-2 {
font-size: clamp(12.8rem, 4.6601941748vw + 11.0524271845rem, 20rem);
line-height: 1;
font-weight: 700;
}
.no-display-3 {
font-size: clamp(4rem, 5.6957928803vw + 1.8640776699rem, 12.8rem);
line-height: 1;
font-weight: 700;
}
.no-display-4 {
font-size: clamp(2.4rem, 4.142394822vw + 0.8466019417rem, 8.8rem);
line-height: 1;
font-weight: 700;
}
.no-section-xl {
padding-top: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
padding-bottom: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.no-section-xl--top {
padding-top: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.no-section-xl--bottom {
padding-bottom: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.no-section-xl--left {
padding-left: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.no-section-xl--right {
padding-right: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.no-section-lg {
padding-top: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
padding-bottom: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
}
.no-section-lg--top {
padding-top: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
}
.no-section-lg--bottom {
padding-bottom: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
}
.no-section-lg--left {
padding-left: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
}
.no-section-lg--right {
padding-right: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
}
.no-section-md {
padding-top: clamp(4.1rem, 2.6537216828vw + 3.1048543689rem, 8.2rem);
padding-bottom: clamp(4.1rem, 2.6537216828vw + 3.1048543689rem, 8.2rem);
}
.no-section-md--top {
padding-top: clamp(4.1rem, 2.6537216828vw + 3.1048543689rem, 8.2rem);
}
.no-section-md--bottom {
padding-bottom: clamp(4.1rem, 2.6537216828vw + 3.1048543689rem, 8.2rem);
}
.no-section-md--left {
padding-left: clamp(4.1rem, 2.6537216828vw + 3.1048543689rem, 8.2rem);
}
.no-section-md--right {
padding-right: clamp(4.1rem, 2.6537216828vw + 3.1048543689rem, 8.2rem);
}
.no-section-sm {
padding-top: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
padding-bottom: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-section-sm--top {
padding-top: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-section-sm--bottom {
padding-bottom: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-section-sm--left {
padding-left: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-section-sm--right {
padding-right: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-pd-0 {
padding-top: clamp(0rem, 0vw + 0rem, 0rem);
padding-bottom: clamp(0rem, 0vw + 0rem, 0rem);
padding-left: clamp(0rem, 0vw + 0rem, 0rem);
padding-right: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-pd-0--top {
padding-top: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-pd-0--bottom {
padding-bottom: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-pd-0--left {
padding-left: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-pd-0--right {
padding-right: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-pd-4 {
padding-top: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
padding-bottom: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
padding-left: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
padding-right: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-pd-4--top {
padding-top: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-pd-4--bottom {
padding-bottom: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-pd-4--left {
padding-left: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-pd-4--right {
padding-right: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-pd-8 {
padding-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
padding-bottom: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
padding-left: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
padding-right: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-pd-8--top {
padding-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-pd-8--bottom {
padding-bottom: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-pd-8--left {
padding-left: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-pd-8--right {
padding-right: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-pd-16 {
padding-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
padding-bottom: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
padding-left: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
padding-right: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-pd-16--top {
padding-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-pd-16--bottom {
padding-bottom: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-pd-16--left {
padding-left: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-pd-16--right {
padding-right: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-pd-24 {
padding-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
padding-bottom: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
padding-left: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
padding-right: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-pd-24--top {
padding-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-pd-24--bottom {
padding-bottom: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-pd-24--left {
padding-left: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-pd-24--right {
padding-right: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-pd-36 {
padding-top: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
padding-bottom: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
padding-left: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
padding-right: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-pd-36--top {
padding-top: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-pd-36--bottom {
padding-bottom: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-pd-36--left {
padding-left: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-pd-36--right {
padding-right: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-pd-48 {
padding-top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
padding-bottom: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
padding-left: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
padding-right: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-pd-48--top {
padding-top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-pd-48--bottom {
padding-bottom: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-pd-48--left {
padding-left: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-pd-48--right {
padding-right: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-pd-64 {
padding-top: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
padding-bottom: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
padding-left: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
padding-right: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-pd-64--top {
padding-top: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-pd-64--bottom {
padding-bottom: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-pd-64--left {
padding-left: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-pd-64--right {
padding-right: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-pd-80 {
padding-top: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
padding-bottom: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
padding-left: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
padding-right: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-pd-80--top {
padding-top: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-pd-80--bottom {
padding-bottom: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-pd-80--left {
padding-left: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-pd-80--right {
padding-right: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-pd-108 {
padding-top: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
padding-bottom: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
padding-left: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
padding-right: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-pd-108--top {
padding-top: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-pd-108--bottom {
padding-bottom: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-pd-108--left {
padding-left: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-pd-108--right {
padding-right: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-pd-120 {
padding-top: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
padding-bottom: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
padding-left: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
padding-right: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-pd-120--top {
padding-top: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-pd-120--bottom {
padding-bottom: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-pd-120--left {
padding-left: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-pd-120--right {
padding-right: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-mg-0 {
margin-top: clamp(0rem, 0vw + 0rem, 0rem);
margin-bottom: clamp(0rem, 0vw + 0rem, 0rem);
margin-left: clamp(0rem, 0vw + 0rem, 0rem);
margin-right: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-mg-0--top {
margin-top: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-mg-0--bottom {
margin-bottom: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-mg-0--left {
margin-left: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-mg-0--right {
margin-right: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-mg-4 {
margin-top: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
margin-bottom: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
margin-left: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
margin-right: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-mg-4--top {
margin-top: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-mg-4--bottom {
margin-bottom: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-mg-4--left {
margin-left: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-mg-4--right {
margin-right: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-mg-8 {
margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
margin-bottom: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
margin-left: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
margin-right: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-mg-8--top {
margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-mg-8--bottom {
margin-bottom: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-mg-8--left {
margin-left: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-mg-8--right {
margin-right: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-mg-16 {
margin-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
margin-bottom: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
margin-left: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
margin-right: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-mg-16--top {
margin-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-mg-16--bottom {
margin-bottom: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-mg-16--left {
margin-left: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-mg-16--right {
margin-right: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-mg-24 {
margin-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
margin-bottom: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
margin-left: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
margin-right: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-mg-24--top {
margin-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-mg-24--bottom {
margin-bottom: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-mg-24--left {
margin-left: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-mg-24--right {
margin-right: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-mg-36 {
margin-top: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
margin-bottom: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
margin-left: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
margin-right: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-mg-36--top {
margin-top: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-mg-36--bottom {
margin-bottom: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-mg-36--left {
margin-left: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-mg-36--right {
margin-right: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-mg-48 {
margin-top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
margin-bottom: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
margin-left: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
margin-right: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-mg-48--top {
margin-top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-mg-48--bottom {
margin-bottom: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-mg-48--left {
margin-left: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-mg-48--right {
margin-right: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-mg-64 {
margin-top: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
margin-bottom: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
margin-left: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
margin-right: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-mg-64--top {
margin-top: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-mg-64--bottom {
margin-bottom: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-mg-64--left {
margin-left: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-mg-64--right {
margin-right: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-mg-80 {
margin-top: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
margin-bottom: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
margin-left: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
margin-right: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-mg-80--top {
margin-top: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-mg-80--bottom {
margin-bottom: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-mg-80--left {
margin-left: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-mg-80--right {
margin-right: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-mg-108 {
margin-top: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
margin-bottom: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
margin-left: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
margin-right: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-mg-108--top {
margin-top: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-mg-108--bottom {
margin-bottom: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-mg-108--left {
margin-left: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-mg-108--right {
margin-right: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-mg-120 {
margin-top: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
margin-bottom: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
margin-left: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
margin-right: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-mg-120--top {
margin-top: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-mg-120--bottom {
margin-bottom: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-mg-120--left {
margin-left: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-mg-120--right {
margin-right: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-round-0 {
overflow: hidden;
border-radius: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-round-0--top-left {
overflow: hidden;
border-top-left-radius: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-round-0--top-right {
overflow: hidden;
border-top-right-radius: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-round-0--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-round-0--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-round-4 {
overflow: hidden;
border-radius: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-round-4--top-left {
overflow: hidden;
border-top-left-radius: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-round-4--top-right {
overflow: hidden;
border-top-right-radius: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-round-4--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-round-4--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-round-8 {
overflow: hidden;
border-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-round-8--top-left {
overflow: hidden;
border-top-left-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-round-8--top-right {
overflow: hidden;
border-top-right-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-round-8--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-round-8--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-round-16 {
overflow: hidden;
border-radius: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-round-16--top-left {
overflow: hidden;
border-top-left-radius: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-round-16--top-right {
overflow: hidden;
border-top-right-radius: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-round-16--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-round-16--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-round-24 {
overflow: hidden;
border-radius: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-round-24--top-left {
overflow: hidden;
border-top-left-radius: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-round-24--top-right {
overflow: hidden;
border-top-right-radius: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-round-24--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-round-24--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-round-36 {
overflow: hidden;
border-radius: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-round-36--top-left {
overflow: hidden;
border-top-left-radius: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-round-36--top-right {
overflow: hidden;
border-top-right-radius: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-round-36--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-round-36--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-round-48 {
overflow: hidden;
border-radius: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-round-48--top-left {
overflow: hidden;
border-top-left-radius: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-round-48--top-right {
overflow: hidden;
border-top-right-radius: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-round-48--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-round-48--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-round-64 {
overflow: hidden;
border-radius: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-round-64--top-left {
overflow: hidden;
border-top-left-radius: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-round-64--top-right {
overflow: hidden;
border-top-right-radius: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-round-64--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-round-64--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-round-80 {
overflow: hidden;
border-radius: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-round-80--top-left {
overflow: hidden;
border-top-left-radius: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-round-80--top-right {
overflow: hidden;
border-top-right-radius: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-round-80--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-round-80--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-round-108 {
overflow: hidden;
border-radius: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-round-108--top-left {
overflow: hidden;
border-top-left-radius: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-round-108--top-right {
overflow: hidden;
border-top-right-radius: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-round-108--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-round-108--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-round-120 {
overflow: hidden;
border-radius: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-round-120--top-left {
overflow: hidden;
border-top-left-radius: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-round-120--top-right {
overflow: hidden;
border-top-right-radius: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-round-120--bottom-left {
overflow: hidden;
border-bottom-left-radius: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-round-120--bottom-right {
overflow: hidden;
border-bottom-right-radius: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-gap-0 {
gap: clamp(0rem, 0vw + 0rem, 0rem);
}
.no-gap-4 {
gap: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.no-gap-8 {
gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.no-gap-16 {
gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.no-gap-24 {
gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-gap-36 {
gap: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.no-gap-48 {
gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-gap-64 {
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
.no-gap-80 {
gap: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
}
.no-gap-108 {
gap: clamp(5.4rem, 3.4951456311vw + 4.0893203883rem, 10.8rem);
}
.no-gap-120 {
gap: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.no-fluid-container-xs {
max-width: 375pxpx;
padding-left: var(--container-margin);
padding-right: var(--container-margin);
margin-left: auto;
margin-right: auto;
}
.no-container-xs {
max-width: 375px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1300px) {
.no-container-xs {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-fluid-container-sm {
max-width: 544pxpx;
padding-left: var(--container-margin);
padding-right: var(--container-margin);
margin-left: auto;
margin-right: auto;
}
.no-container-sm {
max-width: 544px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1300px) {
.no-container-sm {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-fluid-container-md {
max-width: 768pxpx;
padding-left: var(--container-margin);
padding-right: var(--container-margin);
margin-left: auto;
margin-right: auto;
}
.no-container-md {
max-width: 768px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1300px) {
.no-container-md {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-fluid-container-lg {
max-width: 1024pxpx;
padding-left: var(--container-margin);
padding-right: var(--container-margin);
margin-left: auto;
margin-right: auto;
}
.no-container-lg {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1300px) {
.no-container-lg {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-fluid-container-xl {
max-width: 1300pxpx;
padding-left: var(--container-margin);
padding-right: var(--container-margin);
margin-left: auto;
margin-right: auto;
}
.no-container-xl {
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1300px) {
.no-container-xl {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-fluid-container-2xl {
max-width: 1680pxpx;
padding-left: var(--container-margin);
padding-right: var(--container-margin);
margin-left: auto;
margin-right: auto;
}
.no-container-2xl {
max-width: 1680px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1300px) {
.no-container-2xl {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-fluid-container-3xl {
max-width: 1760pxpx;
padding-left: var(--container-margin);
padding-right: var(--container-margin);
margin-left: auto;
margin-right: auto;
}
.no-container-3xl {
max-width: 1760px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1300px) {
.no-container-3xl {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-ar-square {
aspect-ratio: 1 / 1;
}
.no-ar-video {
aspect-ratio: 16 / 9;
}
.no-ar-portrait {
aspect-ratio: 3 / 4;
}
.no-ar-landscape {
aspect-ratio: 4 / 3;
}
.no-ar-widescreen {
aspect-ratio: 21 / 9;
}
.no-ar-cinematic {
aspect-ratio: 2.35 / 1;
}
.no-ar-golden {
aspect-ratio: 1.618 / 1;
}
.no-row {
display: flex;
margin-left: calc(var(--gutter-x) * -0.5);
margin-right: calc(var(--gutter-x) * -0.5);
margin-top: calc(var(--gutter-y) * -1);
flex-wrap: wrap;
}
.no-row > * {
width: 100%;
max-width: 100%;
padding-left: calc(var(--gutter-x) * 0.5);
padding-right: calc(var(--gutter-x) * 0.5);
margin-top: var(--gutter-y);
}
.no-col {
flex: 1 0 0%;
}
.no-col-1 {
width: 8.3333333333%;
max-width: 100%;
}
.no-col-2 {
width: 16.6666666667%;
max-width: 100%;
}
.no-col-3 {
width: 25%;
max-width: 100%;
}
.no-col-4 {
width: 33.3333333333%;
max-width: 100%;
}
.no-col-5 {
width: 41.6666666667%;
max-width: 100%;
}
.no-col-6 {
width: 50%;
max-width: 100%;
}
.no-col-7 {
width: 58.3333333333%;
max-width: 100%;
}
.no-col-8 {
width: 66.6666666667%;
max-width: 100%;
}
.no-col-9 {
width: 75%;
max-width: 100%;
}
.no-col-10 {
width: 83.3333333333%;
max-width: 100%;
}
.no-col-11 {
width: 91.6666666667%;
max-width: 100%;
}
.no-col-12 {
width: 100%;
max-width: 100%;
}
@media (max-width: 375px) {
.no-col-xs-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-1 {
width: 8.3333333333%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-2 {
width: 16.6666666667%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-3 {
width: 25%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-4 {
width: 33.3333333333%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-5 {
width: 41.6666666667%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-6 {
width: 50%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-7 {
width: 58.3333333333%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-8 {
width: 66.6666666667%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-9 {
width: 75%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-10 {
width: 83.3333333333%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-11 {
width: 91.6666666667%;
max-width: 100%;
}
}
@media (max-width: 375px) {
.no-col-xs-12 {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 544px) {
.no-col-sm-12 {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.no-col-md-12 {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 1024px) {
.no-col-lg-12 {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 1300px) {
.no-col-xl-12 {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 1680px) {
.no-col-2xl-12 {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 1760px) {
.no-col-3xl-12 {
width: 100%;
max-width: 100%;
}
}
@media (max-width: ) {
.no-col-default-12 {
width: 100%;
max-width: 100%;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: manipulation;
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
}
body {
background: var(--clr-ui-surface);
color: var(--clr-ui-text);
color-scheme: var(--clr-schema);
line-height: 1.45;
font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
font-family: Pretendard;
line-height: 1.41;
overflow-x: hidden;
}
::selection {
background: var(--clr-primary-default);
color: var(--clr-ui-white);
}
ul,
ol {
list-style: none;
}
img {
width: 100%;
}
a {
color: var(--clr-ui-black);
text-decoration: none;
display: block;
}
em,
address {
font-style: normal;
}
button {
background: none;
border: none;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
font-family: var(--family-en-body);
cursor: pointer;
line-height: var(--lh-base);
}
label {
cursor: pointer;
}
textarea {
resize: none;
}
input,
textarea,
select,
option {
border: none;
outline: none;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
input,
textarea,
select,
option {
border: none;
outline: none;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
b {
font-weight: 700;
}
@media (max-width: 768px) {
br {
display: none;
}
}
@font-face {
font-family: 'Oswald';
src: url('/resource/vendor/fonts/Oswald/static/Oswald-Regular.ttf');
font-weight: 400;
}
@font-face {
font-family: 'Oswald';
src: url('/resource/vendor/fonts/Oswald/static/Oswald-SemiBold.ttf');
font-weight: 600;
}
@font-face {
font-family: 'Oswald';
src: url('/resource/vendor/fonts/Oswald/static/Oswald-Bold.ttf');
font-weight: 700;
}
@font-face {
font-family: 'Pretendard';
src: url('/resource/vendor/fonts/Pretendard/woff2/Pretendard-Bold.woff2');
font-weight: 700;
}
@font-face {
font-family: 'Pretendard';
src: url('/resource/vendor/fonts/Pretendard/woff2/Pretendard-ExtraBold.woff2');
font-weight: 600;
}
@font-face {
font-family: 'Pretendard';
src: url('/resource/vendor/fonts/Pretendard/woff2/Pretendard-Medium.woff2');
font-weight: 500;
}
@font-face {
font-family: 'Pretendard';
src: url('/resource/vendor/fonts/Pretendard/woff2/Pretendard-Regular.woff2');
font-weight: 400;
}
@font-face {
font-family: 'Pretendard';
src: url('/resource/vendor/fonts/Pretendard/woff2/Pretendard-Light.woff2');
font-weight: 300;
}
@font-face {
font-family: 'EB Garamond';
src: url('/resource/vendor/fonts/EB_Garamond/static/EBGaramond-Bold.ttf');
font-weight: 700;
}
@font-face {
font-family: 'EB Garamond';
src: url('/resource/vendor/fonts/EB_Garamond/static/EBGaramond-ExtraBold.ttf');
font-weight: 800;
}
* {
word-break: keep-all;
}
.of-h {
overflow: hidden;
}
.uppercase {
text-transform: uppercase;
}
img {
transition: var(--default-transition);
}
a:hover .img img {
transform: scale(1.04);
}
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.reverse {
order: 2;
}
.info {
font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
color: var(--clr-gray-700);
}
.t-center {
text-align: center;
}
.fm-title {
font-family: var(--family-en-heading);
}
.fm-body {
font-family: var(--family-en-body);
}
.h-24 {
height: 2.4rem;
}
.w-100 {
width: 100%;
}
.fw-400 {
font-weight: 400;
}
.fw-700 {
font-weight: 700;
}
.h-100 {
height: 100%;
}
@media (max-width: 544px) {
.sm-w-100 {
width: 100%;
}
}
.notice {
color: var(--clr-ui-success-background);
}
.box-bg {
background: var(--clr-gray-50);
padding: 3rem 5rem;
border-radius: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem);
font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
color: var(--clr-gray-800);
}
.box-bg--white {
background: var(--clr-ui-white);
}
@media (max-width: 1024px) {
.box-bg {
padding: 2.4rem 3.6rem;
}
}
@media (max-width: 768px) {
.box-bg {
padding: 2rem 2.8rem;
}
}
.box-bg ul {
display: flex;
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
flex-direction: column;
}
.box-stroke--primary {
border: 1px solid var(--clr-primary-default);
background: var(--clr-ui-white);
}
.list-style-disc {
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.list-style-disc ul {
display: flex;
flex-direction: column;
gap: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
}
.list-style-disc ul li {
list-style: disc;
margin-left: 2rem;
color: var(--clr-gray-800);
}
.tag {
font-size: clamp(1.7rem, 0.2588996764vw + 1.6029126214rem, 2.1rem);
font-weight: 400;
padding: 0.8rem 1.6rem;
border-radius: 5rem;
display: inline-flex;
}
.tag-bg--primary {
background: var(--clr-primary-default);
color: var(--clr-ui-white);
}
.symbol {
width: clamp(12rem, 11.6504854369vw + 7.6310679612rem, 30rem);
}
@media (max-width: 544px) {
.symbol {
display: none;
}
}
.symbol-color--yellow {
color: #f5b401;
}
.symbol-color--red {
color: #f05133;
}
.symbol-color--blue {
color: #00acc5;
}
@media (max-width: 1024px) {
.symbol-wrap {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.symbol-wrap {
grid-template-columns: 8fr 4fr !important;
}
}
@media (max-width: 544px) {
.symbol-wrap {
grid-template-columns: 1fr !important;
}
}
#accordion ul > li {
border-radius: clamp(0.3rem, 0.1941747573vw + 0.227184466rem, 0.6rem);
overflow: hidden;
}
#accordion ul > li .tag {
transition: var(--default-transition);
}
@media (max-width: 768px) {
#accordion ul > li .tag {
display: none;
}
}
#accordion ul > li > button {
background: var(--clr-gray-50);
padding: 2rem 3.6rem;
transition: var(--default-transition);
}
@media (max-width: 768px) {
#accordion ul > li > button {
padding: 1.4rem 2.4rem;
}
}
#accordion ul > li > button.active {
background: var(--clr-primary-default);
color: var(--clr-ui-white);
}
#accordion ul > li > button.active .tag {
background: var(--clr-ui-white);
color: var(--clr-primary-default);
}
#accordion ul > li > button.active .arrow {
transform: rotate(180deg);
}
#accordion ul > li .inner {
padding: 2rem 3.6rem;
background: var(--clr-gray-50);
display: none;
}
@media (max-width: 768px) {
#accordion ul > li .inner {
padding: 1.4rem 2.4rem;
}
}
#accordion ul > li p {
text-align: start;
font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
}
#accordion ul > li .arrow {
font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
transition: var(--default-transition);
}
.bullet {
position: relative;
padding-left: 1.6rem;
}
.bullet::after {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 5px;
height: 5px;
border-radius: 100%;
background: var(--clr-gray-800);
}
.circle {
position: absolute;
left: 0;
top: 0;
width: 20rem;
}
.circle svg {
width: 100%;
}
.quote {
position: absolute;
}
.quote-1 {
left: -3rem;
top: -1rem;
}
.quote-2 {
right: 5rem;
}
.pos-r {
position: relative;
}
.font-en {
font-family: 'Oswald';
}
.no-container-xl {
width: 100%;
max-width: 1664px;
margin: 0 auto;
height: 100%;
padding: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem) 0;
}
@media (max-width: 1680px) {
.no-container-xl {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-container {
width: 100%;
max-width: 1664px;
margin: 0 auto;
height: 100%;
}
.section_title {
font-weight: 700;
font-size: clamp(2.8rem, 2.071197411vw + 2.0233009709rem, 6rem);
}
.main_title-lg {
font-size: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
}
.main_title-md {
font-size: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
}
.main_title-sm {
font-size: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.sub_title-lg {
font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
}
.sub_title-md {
font-size: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.sub_title-sm {
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
}
.main_color {
color: #df212e;
}
.main_bg_color {
background-color: #df212e;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.btn {
border: none;
z-index: 1;
overflow: hidden;
transition: color 0.2s;
width: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
height: clamp(3.5rem, 2.5889967638vw + 2.5291262136rem, 7.5rem);
position: relative;
text-align: center;
}
.btn span {
display: inline-block;
min-width: 0.3em;
text-transform: uppercase;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
opacity: 0;
transform: translate(0, -20px);
}
.btn::before {
content: attr(data-text);
position: absolute;
width: 100%;
left: 0;
transition: 0.3s cubic-bezier(0.5, -1, 0.5, 2);
text-transform: uppercase;
letter-spacing: 1px;
opacity: 1;
transform: translate(0, 0px);
}
.btn:hover::before,
.btn:focus::before {
opacity: 0;
transform: translate(0, 20px);
}
.btn:hover span,
.btn:focus span {
opacity: 1;
transform: translate(0, 0);
}
.btn span:nth-child(1) {
transition-delay: 0.025s;
}
.btn span:nth-child(2) {
transition-delay: 0.05s;
}
.btn span:nth-child(3) {
transition-delay: 0.075s;
}
.btn span:nth-child(4) {
transition-delay: 0.1s;
}
.btn span:nth-child(5) {
transition-delay: 0.125s;
}
.btn span:nth-child(6) {
transition-delay: 0.15s;
}
.btn span:nth-child(7) {
transition-delay: 0.175s;
}
.btn span:nth-child(8) {
transition-delay: 0.2s;
}
.btn span:nth-child(9) {
transition-delay: 0.225s;
}
.btn span:nth-child(10) {
transition-delay: 0.25s;
}
.no-header {
width: 100%;
position: fixed;
left: 0;
top: 0;
background-color: #000;
height: 7rem;
z-index: 10;
transition: ease all 0.5s;
}
.no-header.active {
background-color: #fff;
}
.no-header.active .no-h-logo #logo_white {
display: none;
}
.no-header.active #logo_black {
display: block !important;
}
.no-header.active .no-header__gnb--item a {
color: #000 !important;
position: relative;
}
.no-header.active .no-header__gnb--item a:hover {
color: rgba(0, 0, 0, 0) !important;
}
.no-header.active .no-header__gnb--item a::before {
color: #000 !important;
}
.no-header.active .no-mobile_toggle_btn--line {
background-color: #000 !important;
}
.no-header .no-container .no-header_inner {
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6.4rem;
position: relative;
}
@media (max-width: 1680px) {
.no-header .no-container .no-header_inner {
padding-right: 2rem;
padding-left: 2rem;
}
}
.no-header .no-container .no-header_inner .no-h-logo {
width: 7rem;
}
.no-header .no-container .no-header_inner .no-h-logo a {
display: flex;
justify-content: center;
align-items: center;
transition: ease all 0.3s;
}
.no-header .no-container .no-header_inner .no-h-logo a #logo_black {
display: none;
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb {
display: flex;
align-items: center;
width: 100%;
}
@media (max-width: 1024px) {
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb {
display: none;
}
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item {
width: 12rem;
text-align: center;
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item a {
display: inline-block;
width: 100%;
color: rgba(255, 255, 255, 0.8);
font-size: 1.6rem;
position: relative;
font-weight: 500;
transition: 0.2s;
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item a::before {
content: '';
position: absolute;
left: 50%;
transform: translate(-50%);
width: 100%;
transition: 0.2s;
opacity: 0;
visibility: hidden;
font-weight: 500;
font-size: 1.6rem;
color: #fff;
font-family: 'Pretendard';
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item a:hover {
color: rgba(0, 0, 0, 0);
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item a:hover::before {
opacity: 1;
visibility: visible;
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item:nth-child(1) a::before {
content: '회사소개';
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item:nth-child(2) a::before {
content: '파워타임스' !important;
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item:nth-child(3) a::before {
content: '가까운 지점 찾기' !important;
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item:nth-child(4) a::before {
content: '스포츠샵' !important;
}
.no-header .no-container .no-header_inner .no-header__menu .no-header__gnb--item:nth-child(5) a::before {
content: '가맹문의' !important;
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn {
width: 2.8rem;
height: 2rem;
position: relative;
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
display: none;
}
@media (max-width: 1024px) {
.no-header .no-container .no-header_inner .no-mobile_toggle_btn {
display: block;
}
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn--line {
width: 100%;
height: 0.2rem;
background-color: #fff;
transition: ease all 0.3s;
position: absolute;
left: 0;
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn--line:nth-child(1) {
top: 0;
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn--line:nth-child(1).active {
transform: translate(0px, 7px) rotate(45deg);
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn--line:nth-child(2) {
top: 7px;
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn--line:nth-child(2).active {
opacity: 0;
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn--line:nth-child(3) {
top: 14px;
}
.no-header .no-container .no-header_inner .no-mobile_toggle_btn--line:nth-child(3).active {
transform: translate(0px, -7px) rotate(-45deg);
}
.no-header .no-container .no-header_inner .no-header-m {
position: absolute;
top: 7rem;
right: 0;
width: 100%;
height: 100vh;
background-color: #fff;
display: none;
}
.no-header .no-container .no-header_inner .no-header-m__inner {
padding-top: 5.6rem;
}
.no-header .no-container .no-header_inner .no-header-m__gnb {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.no-header .no-container .no-header_inner .no-header-m__gnb--item {
padding: 1.2rem 1.6rem;
}
.no-header .no-container .no-header_inner .no-header-m__gnb--item a {
display: block;
width: 100%;
height: 100%;
font-weight: 500;
color: #000;
font-size: clamp(1.8rem, 0.1294498382vw + 1.8485436893rem, 1.6rem);
display: flex;
justify-content: center;
}
.no-footer {
background-color: #131313;
}
.no-footer__inner {
width: 100%;
max-width: 1664px;
margin: 0 auto;
padding: 6.2rem 0 4rem 0;
}
@media (max-width: 1700px) {
.no-footer__inner {
padding: 2rem 0 2.4rem 0;
padding-left: 2rem;
padding-right: 2rem;
}
}
.no-footer__inner-top .footer-logo {
width: 7rem;
}
@media (max-width: 768px) {
.no-footer__inner-top .footer-logo {
margin: 0 auto;
}
}
.no-footer__inner-mid {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 3rem 0 6.4rem 0;
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
.no-footer__inner-mid {
justify-content: center;
padding: 1.6rem 0;
}
}
.no-footer__inner-mid .__wrap {
width: 100%;
display: flex;
justify-content: flex-start;
padding-bottom: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
@media (max-width: 768px) {
.no-footer__inner-mid .__wrap {
justify-content: center;
flex-wrap: wrap;
}
}
.no-footer__inner-mid dl {
display: flex;
justify-content: center;
gap: 0.8rem;
padding-left: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
font-weight: 300;
}
@media (max-width: 768px) {
.no-footer__inner-mid dl {
gap: 0.4rem;
padding-left: 0;
}
}
@media (max-width: 544px) {
.no-footer__inner-mid dl {
width: 100%;
}
}
.no-footer__inner-mid dl:first-child {
padding-left: 0;
}
.no-footer__inner-mid dl dt {
color: rgba(255,255,255,0.4);
font-size: 1.2rem;
}
.no-footer__inner-mid dl dd {
color: rgba(255,255,255,0.2);
font-size: 1.2rem;
}
.no-footer__inner-mid .address {
padding-left: 0;
}
@media (max-width: 768px) {
.no-footer__inner-mid .address {
justify-content: center;
}
}
.no-footer__inner-mid .no-footer_mid_r {
padding-top: 3rem;
position: absolute;
right: 0;
top: 0;
}
@media (max-width: 768px) {
.no-footer__inner-mid .no-footer_mid_r {
width: 100%;
position: static;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 1.2rem;
}
}
.no-footer__inner-mid .no-footer_mid_r--pr {
padding-bottom: 2rem;
display: flex;
justify-content: center;
gap: 3.2rem;
}
@media (max-width: 768px) {
.no-footer__inner-mid .no-footer_mid_r--pr {
width: 100%;
padding-bottom: 0.8rem;
text-align: center;
}
}
.no-footer__inner-mid .no-footer_mid_r--pr a {
display: inline;
color: #fff;
font-weight: 500;
font-size: clamp(1.1rem, 0.1941747573vw + 1.027184466rem, 1.4rem);
}
.no-footer__inner-mid .no-footer_mid_r--pr a:first-child {
position: relative;
}
.no-footer__inner-mid .no-footer_mid_r--pr a:first-child::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -1.6rem;
width: 1px;
height: 1.2rem;
background-color: #9ca3af;
}
.no-footer__inner-mid .no-footer_mid_r--sns {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 2rem;
}
.no-footer__inner-mid .no-footer_mid_r--sns a {
display: inline-block;
width: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
}
.no-footer__inner-low {
position: relative;
}
.no-footer__inner-low address {
font-size: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
padding: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4rem) 0;
color: #fff;
}
@media (max-width: 768px) {
.no-footer__inner-low address {
text-align: center;
padding-bottom: 0;
}
}
.no-sub-visual {
height: clamp(24rem, 15.5339805825vw + 18.1747572816rem, 48rem);
overflow: hidden;
margin-top: 7rem;
}
.no-sub-visual-img {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.no-sub-visual-img::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.no-sub-visual .no-container-xl {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
position: relative;
text-align: center;
}
@media (max-width: 768px) {
.no-sub-visual .no-container-xl {
justify-content: center;
align-items: center;
}
}
.no-sub-visual .no-container-xl h2 {
font-weight: 700;
color: #fff;
line-height: 1.15;
}
.no-sub-visual .no-container-xl p {
font-weight: 500;
padding-top: clamp(1.6rem, 1.2944983819vw + 1.1145631068rem, 3.6rem);
color: #fff;
}
.grid-col-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.grid-col-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.grid-col-4 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-8 {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1024px) {
.grid-col-8 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.grid-col-8 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.grid-col-8 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 768px) {
.grid-col-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 544px) {
.grid-col-5 {
grid-template-columns: repeat(2, 1fr);
}
}
.grid-process {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1024px) {
.grid-process {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.grid-col-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.grid-col-3 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.grid-col-2 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1024px) {
.grid-col-6 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.grid-col-6 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 544px) {
.grid-col-6 {
grid-template-columns: repeat(2, 1fr);
}
}
.grid-col-7 {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
@media (max-width: 1024px) {
.grid-col-7 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.grid-col-7 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 544px) {
.grid-col-7 {
grid-template-columns: repeat(2, 1fr);
}
}
.grid-col-4-8 {
display: grid;
grid-template-columns: 4fr 8fr;
}
@media (max-width: 1024px) {
.grid-col-4-8 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-7-5 {
display: grid;
grid-template-columns: 7fr 5fr;
}
@media (max-width: 1024px) {
.grid-col-7-5 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-3-9 {
display: grid;
grid-template-columns: 3fr 9fr;
}
@media (max-width: 1024px) {
.grid-col-3-9 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-9-3 {
display: grid;
grid-template-columns: 9fr 3fr;
}
@media (max-width: 1024px) {
.grid-col-9-3 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-8-4 {
display: grid;
grid-template-columns: 8fr 4fr;
}
@media (max-width: 1024px) {
.grid-col-8-4 {
grid-template-columns: repeat(1, 1fr);
}
}
.grid-col-5-7 {
display: grid;
grid-template-columns: 5fr 7fr;
}
@media (max-width: 1024px) {
.grid-col-5-7 {
grid-template-columns: repeat(1, 1fr);
}
}
.f {
display: flex;
}
.fd-c {
flex-direction: column;
}
.fd-r {
flex-direction: row;
}
.f-w {
flex-wrap: wrap;
}
@media (max-width: 768px) {
.md-f-w {
flex-wrap: wrap;
}
}
.fs-0 {
flex-shrink: 0;
}
@media (max-width: 1024px) {
.lg-fd-c {
flex-direction: column;
}
}
@media (max-width: 768px) {
.md-fd-c {
flex-direction: column;
}
}
@media (max-width: 544px) {
.sm-fd-c {
flex-direction: column;
}
}
.ji-c {
justify-items: center;
}
.fd-r-rev {
flex-direction: row-reverse;
}
.fd-c-rev {
flex-direction: column-reverse;
}
@media (max-width: 1024px) {
.lg-fd-r-rev {
flex-direction: row-reverse;
}
}
@media (max-width: 768px) {
.md-fd-r-rev {
flex-direction: row-reverse;
}
}
@media (max-width: 1024px) {
.lg-fd-c-rev {
flex-direction: column-reverse;
}
}
@media (max-width: 768px) {
.md-fd-c-rev {
flex-direction: column-reverse;
}
}
.ai-c {
align-items: center;
}
.ai-fe {
align-items: flex-end;
}
.ai-fs {
align-items: flex-start;
}
.ai-in {
align-items: inherit;
}
.jc-c {
justify-content: center;
}
.jc-fe {
justify-content: flex-end;
}
.jc-fs {
justify-content: flex-start;
}
.jc-in {
justify-content: inherit;
}
.jc-sb {
justify-content: space-between;
}
@media (max-width: 1300px) {
.xl-ai-c {
align-items: center;
}
}
@media (max-width: 1024px) {
.lg-ai-c {
align-items: center;
}
}
@media (max-width: 768px) {
.md-ai-c {
align-items: center;
}
}
@media (max-width: 544px) {
.sm-ai-c {
align-items: center;
}
}
@media (max-width: 1300px) {
.xl-ai-fe {
align-items: flex-end;
}
}
@media (max-width: 1024px) {
.lg-ai-fe {
align-items: flex-end;
}
}
@media (max-width: 768px) {
.md-ai-fe {
align-items: flex-end;
}
}
@media (max-width: 544px) {
.sm-ai-fe {
align-items: flex-end;
}
}
@media (max-width: 1300px) {
.xl-ai-fs {
align-items: flex-start;
}
}
@media (max-width: 1024px) {
.lg-ai-fs {
align-items: flex-start;
}
}
@media (max-width: 768px) {
.md-ai-fs {
align-items: flex-start;
}
}
@media (max-width: 544px) {
.sm-ai-fs {
align-items: flex-start;
}
}
@media (max-width: 1300px) {
.xl-ai-in {
align-items: inherit;
}
}
@media (max-width: 1024px) {
.lg-ai-in {
align-items: inherit;
}
}
@media (max-width: 768px) {
.md-ai-in {
align-items: inherit;
}
}
@media (max-width: 544px) {
.sm-ai-in {
align-items: inherit;
}
}
@media (max-width: 1300px) {
.xl-jc-c {
justify-content: center;
}
}
@media (max-width: 1024px) {
.lg-jc-c {
justify-content: center;
}
}
@media (max-width: 768px) {
.md-jc-c {
justify-content: center;
}
}
@media (max-width: 544px) {
.sm-jc-c {
justify-content: center;
}
}
@media (max-width: 1300px) {
.xl-jc-fe {
justify-content: flex-end;
}
}
@media (max-width: 1024px) {
.lg-jc-fe {
justify-content: flex-end;
}
}
@media (max-width: 768px) {
.md-jc-fe {
justify-content: flex-end;
}
}
@media (max-width: 544px) {
.sm-jc-fe {
justify-content: flex-end;
}
}
@media (max-width: 1300px) {
.xl-jc-fs {
justify-content: flex-start;
}
}
@media (max-width: 1024px) {
.lg-jc-fs {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.md-jc-fs {
justify-content: flex-start;
}
}
@media (max-width: 544px) {
.sm-jc-fs {
justify-content: flex-start;
}
}
@media (max-width: 1300px) {
.xl-jc-in {
justify-content: inherit;
}
}
@media (max-width: 1024px) {
.lg-jc-in {
justify-content: inherit;
}
}
@media (max-width: 768px) {
.md-jc-in {
justify-content: inherit;
}
}
@media (max-width: 544px) {
.sm-jc-in {
justify-content: inherit;
}
}
.skin-list {
width: 100%;
}
.skin-list colgroup col:nth-child(1) {
width: 10%;
}
.skin-list colgroup col:nth-child(2) {
width: 67%;
}
.skin-list colgroup col:nth-child(3) {
width: 12%;
}
.skin-list colgroup col:nth-child(4) {
width: 12%;
}
.skin-list th,
.skin-list td {
padding: 2rem 1.6rem;
font-size: clamp(1.4rem, 0.1941747573vw + 1.327184466rem, 1.7rem);
}
@media (max-width: 768px) {
.skin-list th,
.skin-list td {
padding: 1.6rem 1.2rem;
}
}
.skin-list thead {
width: 100%;
border-bottom: 1.4px solid var(--clr-gray-200);
background: var(--clr-gray-50);
}
.skin-list thead tr th {
color: var(--clr-gray-900);
}
.skin-list thead tr th:nth-child(1) {
text-align: center;
}
.skin-list thead tr th:nth-child(2) {
text-align: start;
}
.skin-list thead tr th:nth-child(3) {
text-align: center;
}
.skin-list thead tr th:nth-child(4) {
text-align: center;
}
.skin-list tbody tr {
transition: var(--default-transition);
cursor: pointer;
border-bottom: 1px solid var(--clr-gray-50);
}
.skin-list tbody tr:hover {
background: var(--default-table-hover);
}
.skin-list tbody tr td {
color: var(--clr-gray-600);
font-weight: 400;
}
.skin-list tbody tr td a {
color: var(--clr-gray-600);
}
.skin-list tbody tr td:nth-child(1) {
text-align: center;
}
.skin-list tbody tr td:nth-child(2) {
text-align: start;
}
.skin-list tbody tr td:nth-child(3) {
text-align: center;
}
.skin-list tbody tr td:nth-child(4) {
text-align: center;
}
.skin-write,
.skin-confirm {
width: 100%;
max-width: 54rem;
margin: 0 auto;
}
.swiper-btn,
.no-btn {
align-items: center;
background: 0 0;
border: none;
border-radius: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
cursor: pointer;
display: inline-flex;
font-weight: 400;
gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem);
justify-content: center;
font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
letter-spacing: -0.01em;
overflow: hidden;
line-height: 1.41;
padding: 0.7rem 1.4rem;
position: relative;
text-decoration: none;
transition: var(--default-transition);
}
.no-arrow-btn {
display: inline-flex;
align-items: center;
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
cursor: pointer;
font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem);
font-weight: 400;
transition: var(--default-transition);
}
.no-arrow-btn:hover span {
box-shadow: var(--clr-box-shadow-lg);
transform: translateX(5px);
transition-delay: 0.05s;
}
.no-arrow-btn:hover p {
transform: translateX(6px);
}
.no-arrow-btn span {
width: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
height: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
transition: var(--default-transition);
}
.no-arrow-btn p {
transition: var(--default-transition);
}
.no-arrow-btn--bg-primary span {
background: var(--clr-ui-black);
color: var(--clr-ui-white);
}
.no-arrow-btn--bg-primary p {
color: var(--clr-ui-white);
}
.no-arrow-btn--bg-white span {
background: var(--clr-ui-white);
color: var(--clr-gray-900);
}
.no-arrow-btn--bg-white p {
color: var(--clr-ui-white);
}
.no-arrow-btn--bg-black span {
background: var(--clr-ui-black);
color: var(--clr-ui-white);
}
.no-arrow-btn--bg-black p {
color: var(--clr-gray-900);
}
.no-btn i {
flex-shrink: 0;
}
.no-btn--stroke {
border: 1px solid var(--clr-ui-text);
color: var(--clr-ui-text);
}
.no-btn--stroke:hover {
background: var(--clr-primary-default);
color: var(--clr-ui-background);
border-color: var(--clr-ui-background);
}
.no-btn--primary {
background: var(--clr-primary-default);
color: var(--clr-ui-background);
}
.no-btn--primary:hover {
background: var(--clr-primary-variant);
}
.no-btn--black {
background: var(--clr-gray-900);
color: var(--clr-ui-background);
}
.no-btn--black:hover {
background: var(--clr-gray-800);
}
.no-btn--error {
background: var(--clr-ui-error);
color: var(--clr-ui-background);
}
.swiper-btn {
position: static;
padding: 0;
width: clamp(3.6rem, 1.0355987055vw + 3.2116504854rem, 5.2rem);
height: clamp(3.6rem, 1.0355987055vw + 3.2116504854rem, 5.2rem);
margin-top: 0;
border-radius: 100%;
}
.swiper-btn::after {
color: var(--clr-gray-900);
font-weight: 400;
font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
}
.swiper-btn--stroke {
background: rgba(0, 0, 0, 0);
border: 1px solid var(--clr-primary-default);
}
.swiper-btn--stroke::after {
color: var(--clr-primary-default);
}
.swiper-btn--primary {
background: var(--clr-primary-default);
color: var(--clr-ui-white);
}
.swiper-button-next:hover {
transform: translateX(2px);
box-shadow: var(--clr-box-shadow-lg);
}
.swiper-button-prev:hover {
transform: translateX(-2px);
box-shadow: var(--clr-box-shadow-lg);
}
textarea,
input:required,
input {
padding: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem);
box-shadow: var(--input-box-shadow);
transition: var(--input-border-transition);
width: auto;
color: var(--clr-gray-500);
border-radius: 0.6rem;
}
textarea:hover,
input:hover {
box-shadow: var(--input-box-shadow-hover);
}
textarea:focus,
input:focus {
box-shadow: var(--input-box-shadow-focus);
}
textarea::placeholder,
input:required::placeholder,
input::placeholder {
color: var(--clr-gray-500);
}
label {
margin-bottom: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem);
display: block;
color: var(--clr-gray-600);
font-weight: 600;
}
.check-box-wrap label {
margin-bottom: 0;
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
.check-box-wrap .check {
width: 1.8rem;
height: 1.8rem;
display: none;
}
.check-box-wrap input[id='check']:checked + label {
border: none;
background-image: url(/resource/images/icon/check_t.svg);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.check-box-wrap input + label {
display: block;
width: 1.8rem;
height: 1.8rem;
cursor: pointer;
flex-shrink: 0;
background: var(--clr-base-white);
border: 1px solid var(--clr-gray-500);
border-radius: 0.2rem;
}
input[type='checkbox'] {
border: 2px solid #000;
padding: 0;
height: auto;
box-shadow: none;
width: auto;
border-radius: inherit;
}
input:required {
background: var(--clr-gray-50);
}
input:required:hover,
input:required:focus {
box-shadow: var(--input-box-shadow);
}
textarea {
min-height: 30rem;
resize: none;
overflow: hidden;
}
@media (max-width: 768px) {
textarea {
min-height: 16rem;
}
}
.input-wrap-saving {
display: flex;
border: 1px solid rgba(75, 85, 99, 0.2);
background: #fff;
color: #4b5563;
height: 10.2rem;
align-items: center;
border-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
padding: 1rem 2rem;
justify-content: space-between;
box-shadow: var(--input-box-shadow);
}
.input-wrap-saving input {
text-align: end;
font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
width: 100%;
font-weight: 700;
padding: 0;
height: auto;
box-shadow: none;
border-radius: 0;
color: var(--clr-primary-800);
}
.input-wrap-saving input::placeholder {
color: var(--clr-primary-800);
}
.input-wrap-saving > span {
flex-shrink: 0;
font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem);
font-weight: 500;
}
.input-wrap-saving div {
display: flex;
gap: 0.6rem;
align-items: center;
}
.input-wrap-saving div p {
color: var(--clr-primary-700);
}
.input-range {
position: relative;
width: 100%;
}
.input-range-slider {
position: absolute;
top: 50%;
left: 0;
height: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
background: var(--clr-primary-800);
transform: translateY(-50%);
z-index: 1;
border-radius: 2rem 0 0 2rem;
}
input[type='range'].custom-range {
-webkit-appearance: none;
width: 100%;
height: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem);
border-radius: 5px;
outline: none;
background: var(--clr-gray-100);
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
padding: 0;
box-shadow: none;
}
input[type='range'].custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
height: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
border-radius: 50%;
background: #fff;
cursor: pointer;
position: relative;
border: 5px solid var(--clr-primary-800);
z-index: 2;
}
input[type='range'].custom-range::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4caf50;
cursor: pointer;
}
.overlay-black,
.overlay-primary,
.overlay-white,
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: var(--default-transition);
opacity: 0;
}
.overlay-white {
background-color: var(--clr-ui-white);
}
.overlay-white:hover {
opacity: 0.16;
}
.overlay-primary {
background-color: var(--clr-primary-500);
}
.overlay-primary:hover {
opacity: 0.16;
}
.overlay-black {
background-color: #022047;
}
.overlay-black:hover {
opacity: 0.08;
}
dialog::backdrop {
display: none;
}
#backdrop {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
position: fixed;
top: 0;
left: 0;
z-index: var(--z-index-backdrop);
opacity: 0;
visibility: hidden;
will-change: opacity, visibility;
transition: var(--transition-modal);
transition-property: opacity, visibility;
}
#backdrop.visible {
opacity: 1;
visibility: visible;
}
dialog {
opacity: 0;
visibility: hidden;
width: 100%;
position: fixed;
bottom: 0%;
left: 50%;
transform: translate(-50%, 50%);
max-width: 80rem;
padding: 3rem 3.6rem;
z-index: var(--z-index-modal);
background: #fff;
max-height: 64dvh;
overflow: auto;
will-change: opacity, visibility;
transition: var(--transition-modal);
transition-property: opacity, visibility;
border-radius: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
dialog[open] {
opacity: 1;
visibility: visible;
}
dialog:not([open]) {
opacity: 0;
visibility: hidden;
}
@media (max-width: 1024px) {
dialog {
max-width: inherit;
width: calc(100% - 2rem);
padding: 2rem;
max-height: inherit;
}
}
.no-board-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7rem);
}
.no-board-pagination .prevnext {
display: flex;
align-items: center;
justify-content: center;
width: clamp(3rem, 0.3883495146vw + 2.854368932rem, 3.6rem);
height: clamp(3rem, 0.3883495146vw + 2.854368932rem, 3.6rem);
position: relative;
color: var(--clr-gray-400);
transition: ease all 0.3s;
background: rgba(0, 0, 0, 0);
border-radius: 3.6rem;
}
.no-board-pagination .prevnext i {
font-size: 1.4rem;
}
.no-board-pagination .prevnext:hover {
background: rgba(2, 32, 71, 0.06);
}
.no-board-pagination .page-wrap {
display: flex;
gap: 0.6rem;
}
.no-board-pagination .num {
width: clamp(3rem, 0.3883495146vw + 2.854368932rem, 3.6rem);
height: clamp(3rem, 0.3883495146vw + 2.854368932rem, 3.6rem);
transition: ease all 0.3s;
display: flex;
align-items: center;
justify-content: center;
position: relative;
gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem);
border-radius: 3.6rem;
font-weight: 500;
color: var(--clr-gray-500);
}
.no-board-pagination .num:hover {
background: rgba(2, 32, 71, 0.06);
}
.no-board-pagination .num.active {
color: var(--clr-gray-900);
background: rgba(2, 32, 71, 0.1);
}
.dropdown {
width: 100%;
transition: all 0.5s ease;
position: relative;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
height: 100%;
text-align: left;
border-radius: 0.4rem;
box-shadow: var(--input-box-shadow);
transition: var(--input-border-transition);
height: clamp(4.8rem, 0.6472491909vw + 4.5572815534rem, 5.8rem);
outline: none;
background: #fff;
color: #4b5563;
}
@media (max-width: 768px) {
.dropdown {
height: 4.5rem;
}
}
.dropdown:hover {
box-shadow: 0 0 4px #ccc;
box-shadow: var(--input-box-shadow-hover);
}
.dropdown .select {
cursor: pointer;
display: flex;
width: 100%;
padding: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem);
justify-content: space-between;
align-items: center;
height: 100%;
}
.dropdown .select > i {
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
color: inherit;
cursor: pointer;
transition: all 0.3s ease-in-out;
float: right;
line-height: 20px;
}
.dropdown.active {
box-shadow: var(--input-box-shadow-focus);
}
.dropdown.active .select > i {
transform: rotate(-90deg);
}
.dropdown-menu {
position: absolute;
width: 100%;
left: 0;
margin-top: 1px;
box-shadow: 0 1px 2px #ccc;
border-radius: 0 1px 2px 2px;
overflow: hidden;
display: none;
max-height: 42rem;
overflow-y: auto;
background: var(--clr-ui-white);
z-index: 9;
padding: 0;
list-style: none;
}
@media (max-width: 768px) {
.dropdown-menu {
max-height: 16rem;
}
}
.dropdown-menu li {
padding: 1.6rem 3rem;
transition: all 0.2s ease-in-out;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6rem;
}
.dropdown-menu li:hover {
background-color: var(--clr-gray-50);
}
.dropdown-menu li:active {
background-color: inherit;
}
main {
background-color: #000;
}
main .br1 .no-container-xl h2 {
text-align: center;
color: #fff;
}
main .br1 .no-container-xl .no-contents_wrap {
margin-top: clamp(3.6rem, 3.1067961165vw + 2.4349514563rem, 8.4rem);
display: flex;
align-items: center;
gap: clamp(2.4rem, 2.5889967638vw + 1.4291262136rem, 6.4rem);
}
@media (max-width: 768px) {
main .br1 .no-container-xl .no-contents_wrap {
flex-wrap: wrap;
}
}
main .br1 .no-container-xl .no-contents_wrap-img {
width: 50%;
height: 65rem;
border-radius: 1.6rem;
overflow: hidden;
}
@media (max-width: 768px) {
main .br1 .no-container-xl .no-contents_wrap-img {
height: 30rem;
width: 100%;
}
}
main .br1 .no-container-xl .no-contents_wrap-txt {
width: 50%;
}
@media (max-width: 768px) {
main .br1 .no-container-xl .no-contents_wrap-txt {
width: 100%;
text-align: center;
}
}
main .br1 .no-container-xl .no-contents_wrap-txt h3 {
padding-bottom: 2.4rem;
color: #fff;
font-weight: 600;
}
main .br1 .no-container-xl .no-contents_wrap-txt p {
font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
padding-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
line-height: 1.61;
color: #fff;
}
main .br1 .no-container-xl .no-contents_wrap-txt p:first-of-type {
padding-top: 0;
}
main .br1 .no-container-xl .btn_wrap{
padding-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
main .br1 .no-container-xl .btn_wrap a{
display: flex;
justify-content: center;
align-items: center;
color: #fff;
width: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
height: clamp(3.5rem, 2.5889967638vw + 2.5291262136rem, 7.5rem);
border-radius: 5rem;
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
font-weight: 700;
transition: color 0.2s;
margin: 0 auto;
margin-top: 6rem;
}
main .br2 {
background-color: #212121;
overflow:hidden;
}
main .br2 .no-container-xl .no-contents_wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
@media (max-width: 768px) {
main .br2 .no-container-xl .no-contents_wrap {
grid-template-columns: repeat(1, 1fr);
}
}
main .br2 .no-container-xl .no-contents_wrap--item-img {
height: clamp(35rem, 9.7087378641vw + 31.359223301rem, 50rem);
border-radius: 1.6rem;
overflow: hidden;
}
main .br2 .no-container-xl .no-contents_wrap--item-txt {
padding-top: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
color: #fff;
}
@media (max-width: 768px) {
main .br2 .no-container-xl .no-contents_wrap--item-txt {
text-align: center;
}
}
main .br2 .no-container-xl .no-contents_wrap--item-txt h3 {
font-weight: 700;
}
main .br2 .no-container-xl .no-contents_wrap--item-txt p {
padding-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
main {
background-color: #000;
}
main .fc1 .no-contents_wrap {
display: flex;
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
align-items: center;
}
@media (max-width: 1024px) {
main .fc1 .no-contents_wrap {
flex-wrap: wrap;
}
}
main .fc1 .no-contents_wrap-img {
width: 50%;
}
@media (max-width: 1024px) {
main .fc1 .no-contents_wrap-img {
width: 100%;
}
}
main .fc1 .no-contents_wrap-img figure {
width: clamp(18rem, 17.4757281553vw + 11.4466019417rem, 45rem);
margin: 0 auto;
}
main .fc1 .no-contents_wrap-txt {
width: 50%;
color: #fff;
}
@media (max-width: 1024px) {
main .fc1 .no-contents_wrap-txt {
width: 100%;
text-align: center;
}
}
main .fc1 .no-contents_wrap-txt h3 {
padding-bottom: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
main .fc1 .no-contents_wrap-txt p {
padding-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
main .fc1 .no-contents_wrap-txt p:nth-of-type(1) {
padding-top: 0;
}
main .fc2 .no-container-xl h3 {
color: #fff;
text-align: center;
font-weight:600;
}
main .fc2 .no-container-xl h3 span {
font-weight: 700;
font-size: clamp(2.8rem, 2.071197411vw + 2.0233009709rem, 6rem);
}
main .fc2 .no-container-xl .no-fc_form {
padding-top: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
@media (max-width: 1024px) {
main .fc2 .no-container-xl .no-fc_form {
width: 100%;
}
}
main .fc2 .no-container-xl .no-fc_form--item {
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
gap: 2.4rem;
padding: 0 clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
border: 1px solid #666;
border-radius: 1.2rem;
font-size: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
text-align: left;
}
main .fc2 .no-container-xl .no-fc_form--item p {
font-size: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
width: 8rem;
}
main .fc2 .no-container-xl .no-fc_form--item input {
width: 100%;
height: 6rem;
background-color: #000;
border: none;
font-size: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
}
main .fc2 .no-container-xl .no-fc_form--item select {
width: 65%;
height: 6rem;
background-color: #000;
border: none;
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
color: #fff;
}
@media (max-width: 768px) {
main .fc2 .no-container-xl .no-fc_form--item select {
width: 70%;
}
}
main .fc2 .no-container-xl .no-fc_form--item textarea {
background-color: #000;
width: 90%;
}
main .fc2 .no-container-xl .no-fc_form .pr-box {
border: 1px solid #666;
border-radius: 1.2rem;
color: #fff;
height: clamp(16rem, 9.0614886731vw + 12.6019417476rem, 30rem);
padding: 1.6rem 2.4rem;
overflow-y: auto;
font-size: 1.4rem;
margin-top: clamp(0.8rem, 1.8122977346vw + 0.1203883495rem, 3.6rem);
}
main .fc2 .no-container-xl .no-fc_form .pr-box p {
padding-top: 2rem;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
font-weight: 500;
}
main .fc2 .no-container-xl .no-fc_form .pr-box span {
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
main .fc2 .no-container-xl .no-fc_form .pr-box p:nth-of-type(1) {
padding-top: 0;
}
main .fc2 .no-container-xl .no-fc_form .pr-box ul {
padding-top: 1rem;
}
main .fc2 .no-container-xl .no-fc_form .pr-box ul li {
padding: 0.6rem 0;
}
main .fc2 .no-container-xl .no-fc_form .no-chk-agree {
display: flex;
align-items: center;
padding-top: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
}
main .fc2 .no-container-xl .no-fc_form .no-chk-agree input {
width: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
height: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
position: relative;
}
main .fc2 .no-container-xl .no-fc_form .no-chk-agree input:checked::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-image: url('/resource/images/icon/fc_cs_check.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
height: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
z-index: 2;
}
main .fc2 .no-container-xl .no-fc_form .no-chk-agree label {
transform: translateY(3px);
margin-left: 1rem;
font-size: 1.4rem;
font-weight: 500;
color:#fff;
}
@media (max-width: 544px) {
main .fc2 .no-container-xl .no-fc_form .no-chk-agree label {
font-size: 1.4rem;
}
}
main .fc2 .no-container-xl .no-fc_form .btn_red {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
width: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
height: clamp(3.5rem, 2.5889967638vw + 2.5291262136rem, 7.5rem);
border-radius: 5rem;
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
font-weight: 700;
transition: color 0.2s;
margin-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
}
main .no-link-section {
background-color: #333;
}
main .no-link-section .no-container-xl .no-contents_wrap {
display: grid;
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
main .no-link-section .no-container-xl .no-contents_wrap {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
main .no-link-section .no-container-xl .no-contents_wrap {
grid-template-columns: repeat(1, 1fr);
gap: 6.4rem;
}
}
main .no-link-section .no-container-xl .no-contents_wrap--item {
border-radius: 1.6rem;
overflow: hidden;
position: relative;
}
main .no-link-section .no-container-xl .no-contents_wrap--item-img {
height: clamp(30rem, 12.9449838188vw + 25.145631068rem, 50rem);
}
main .no-link-section .no-container-xl .no-contents_wrap--item-txt {
background-color: #000;
padding: 3.6rem 2.4rem;
border-bottom-left-radius: 1.6rem;
border-bottom-right-radius: 1.6rem;
text-align: center;
}
main .no-link-section .no-container-xl .no-contents_wrap--item-txt h3 {
font-weight: 600;
color: #fff;
}
main .no-link-section .no-container-xl .no-contents_wrap--item .btn_red {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
width: clamp(9rem, 3.2362459547vw + 7.786407767rem, 14rem);
height: clamp(3.5rem, 0.9708737864vw + 3.1359223301rem, 5rem);
border-radius: 5rem;
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
font-weight: 700;
transition: color 0.2s;
margin: 0 auto;
margin-top: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
}
main {
background-color: #000;
}
main .sh1 {
border-bottom: 2px solid #ddd;
}
main .sh1 .no-container-xl .no-contents_wrap {
display: flex;
align-items: center;
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
@media (max-width: 768px) {
main .sh1 .no-container-xl .no-contents_wrap {
flex-wrap: wrap;
}
}
main .sh1 .no-container-xl .no-contents_wrap-txt {
color: #fff;
}
@media (max-width: 768px) {
main .sh1 .no-container-xl .no-contents_wrap-txt {
width: 100%;
text-align: center;
order: 2;
}
}
main .sh1 .no-container-xl .no-contents_wrap-txt h3 {
font-weight: 700;
padding-bottom: clamp(2.6rem, 0.3883495146vw + 2.454368932rem, 3.2rem);
}
main .sh1 .no-container-xl .no-contents_wrap-txt p {
padding-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
main .sh1 .no-container-xl .no-contents_wrap-txt p:nth-of-type(1) {
padding-top: 0;
}
main .sh1 .no-container-xl .no-contents_wrap-img {
border-radius: 1.6rem;
overflow: hidden;
}
@media (max-width: 768px) {
main .sh1 .no-container-xl .no-contents_wrap-img {
width: 100%;
height: 25rem;
}
}
main .sh2 .no-ribbon_banner {
position: relative;
overflow: hidden;
width: 100%;
height: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid #ddd;
}
main .sh2 .no-ribbon_banner .banner-top {
position: absolute;
width: 100%;
white-space: nowrap;
top: 50%;
transform: translateY(-50%);
animation-direction: normal;
}
main .sh2 .no-ribbon_banner .banner-top span {
display: inline-flex;
background-color: #000;
padding: 1rem 0;
width: 200%;
animation: text-to-left 50s linear infinite;
font-size: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
color: #fff;
font-weight: bold;
}
@media (max-width: 768px) {
main .sh2 .no-ribbon_banner .banner-top span {
animation: text-to-left 15s linear infinite;
}
}
main .sh2 .no-ribbon_banner .banner-top span img {
padding-right: 0.5rem;
width: clamp(5rem, 1.9417475728vw + 4.2718446602rem, 8rem);
}
@keyframes text-to-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
main .sh3 .no-content-wrap {
padding: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem) 0;
height: 75rem;
}
main .sh4 .no-content_title {
padding: clamp(1.6rem, 1.2944983819vw + 1.1145631068rem, 3.6rem) 0;
background-color: #fff;
border-bottom: 2px solid #ddd;
}
main .sh4 .no-content_title h2 {
color: #000;
text-align: center;
}
main .sh4 .no-contents__grid {
display: flex;
flex-wrap: wrap;
}
main .sh4 .no-contents__grid--item {
width: 25%;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: clamp(45rem, 25.8899676375vw + 35.2912621359rem, 85rem);
position: relative;
overflow:hidden;
}
@media (max-width: 1024px) {
main .sh4 .no-contents__grid--item {
width: 33.333%;
}
}
@media (max-width: 768px) {
main .sh4 .no-contents__grid--item {
width: 50%;
}
}
@media (max-width: 544px) {
main .sh4 .no-contents__grid--item {
width: 100%;
}
}
main .sh4 .no-contents__grid--item-img {
width:clamp(29rem, 10.355987055vw + 25.1165048544rem, 45rem);
margin: 0 auto;
transform: scale(1);
transition: ease all 0.3s;
}
main .sh4 .no-contents__grid--item-txt {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
padding: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem)
clamp(2.4rem, 2.5889967638vw + 1.4291262136rem, 6.4rem);
transition: ease all 0.3s;
opacity: 0;
visibility: hidden;
}
main .sh4 .no-contents__grid--item-txt h3 {
font-weight: 600;
color: #fff;
}
main .sh4 .no-contents__grid--item:hover .no-contents__grid--item-img {
transform: scale(1.14);
}
main .sh4 .no-contents__grid--item:hover .no-contents__grid--item-txt {
opacity: 1;
visibility: visible;
}
main .sh4 .no-contents_banner {
background-image: url('/resource/images/sub/sh_c07.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: clamp(40rem, 22.6537216828vw + 31.5048543689rem, 75rem);
position: relative;
border-bottom: 1px solid #ddd;
}
main .sh4 .no-contents_banner::before {
content: '';
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
}
main .sh4 .no-contents_banner span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: clamp(4rem, 5.0485436893vw + 2.1067961165rem, 11.8rem);
color: #fff;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
main {
overflow-x: hidden;
}
main .no-main-seciton {
height: 100vh;
background-color: #000;
position: relative;
}
main .no-main-seciton .no-container-xl {
position: relative;
overflow: hidden;
}
main .no-main-seciton .no-container-xl .main-section_title {
position: absolute;
top: 50%;
left: 0;
transform:translateY(-50%);
line-height: 1.21;
font-size: clamp(4rem, 5.6957928803vw + 1.8640776699rem, 12.8rem);
z-index: 5;
font-weight: 700;
color: #fff;
text-transform: uppercase;
}
@media (max-width: 1680px) {
main .no-main-seciton .no-container-xl .main-section_title {
padding-left: 2rem;
padding-right: 2rem;
}
}
main .no-main-seciton .no-container-xl .main-section_title h3 {
overflow: hidden;
position: relative;
}
main .no-main-seciton .no-container-xl .main-section_title h3 span {
display: block;
position: relative;
transform: translateY(15rem);
}
@keyframes ani02 {
0% {
transform: translateY(15rem);
}
100% {
transform: translateY(0);
}
}
main .no-main-seciton .no-container-xl .main-section_title p {
font-size: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
padding-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
font-weight: 500;
overflow: hidden;
}
main .no-main-seciton .no-container-xl .main-section_title p .ani_s {
display: block;
position: relative;
transform: translateY(15rem);
}
main .no-main-seciton .no-container-xl .main-section_title .btn_wrap {
overflow: hidden;
}
main .no-main-seciton .no-container-xl .main-section_title .btn_wrap .fc_btn {
border-radius: 5rem;
color: #fff;
font-size: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
display: flex;
justify-content: center;
align-items: center;
margin-top: clamp(2.4rem, 2.5889967638vw + 1.4291262136rem, 6.4rem);
transform: translateY(15rem);
}
main .no-main-seciton__bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
main .no-main-seciton__bg .main_video {
width: 100%;
height: 100%;
object-fit: cover;
}
main .s2 {
width: 100%;
height: 100vh;
background-image: url('/resource/images/main/main-c2-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
main .s2 .no-container-xl {
position: relative;
}
main .s2 .no-container-xl .no-img_wrap--item {
position: absolute;
overflow: hidden;
border-radius: 1rem;
width: clamp(20rem, 9.7087378641vw + 16.359223301rem, 35rem);
height: clamp(15rem, 6.4724919094vw + 12.572815534rem, 25rem);
opacity: 0.6;
}
main .s2 .no-container-xl .no-img_wrap--i1 {
top: 25rem;
left: 5rem;
}
@media (max-width: 544px) {
main .s2 .no-container-xl .no-img_wrap--i1 {
display: none;
}
}
main .s2 .no-container-xl .no-img_wrap--i2 {
bottom: 28rem;
left: 30%;
}
@media (max-width: 544px) {
main .s2 .no-container-xl .no-img_wrap--i2 {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 45rem;
display: none;
}
}
main .s2 .no-container-xl .no-img_wrap--i3 {
right: 0;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 1680px) {
main .s2 .no-container-xl .no-img_wrap--i3 {
right: 2rem;
}
}
@media (max-width: 544px) {
main .s2 .no-container-xl .no-img_wrap--i3 {
display: none;
}
}
main .s2 .no-container-xl .no-txt_wrap {
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
main .s2 .no-container-xl .no-txt_wrap {
padding-left: 2rem;
padding-right: 2rem;
}
}
main .s2 .no-container-xl .no-txt_wrap p {
color: #fff;
font-size: clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 5.6rem);
text-align: center;
font-weight: 700;
}
@media (max-width: 544px) {
main .s2 .no-container-xl .no-txt_wrap p {
font-size: 2rem;
word-break: keep-all;
}
}
main .s2 .no-container-xl .no-txt_wrap p span {
font-weight: 700;
}
main .s3 {
width: 100%;
height: 100%;
background-image: url('/resource/images/main/main-c3-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
main .s3::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
main .s3 .no-container-xl {
z-index: 5;
position: relative;
display:flex;
}
main .s3 .no-container-xl .no-contents_wrap {
display: flex;
align-items: center;
gap: clamp(2.4rem, 2.5889967638vw + 1.4291262136rem, 6.4rem);
}
@media (max-width: 1024px) {
main .s3 .no-container-xl .no-contents_wrap {
flex-wrap: wrap;
}
}
main .s3 .no-container-xl .no-contents_wrap-txt {
width: 50%;
}
@media (max-width: 1024px) {
main .s3 .no-container-xl .no-contents_wrap-txt {
width: 100%;
text-align: center;
}
}
main .s3 .no-container-xl .no-contents_wrap-txt h3 {
color: #fff;
font-weight: 700;
}
main .s3 .no-container-xl .no-contents_wrap-txt p {
color: #fff;
font-weight: 600;
padding-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
main .s3 .no-container-xl .no-contents_wrap-txt--btn {
margin-top: 3.6rem;
display: flex;
gap: 2.4rem;
}
@media (max-width: 1024px) {
main .s3 .no-container-xl .no-contents_wrap-txt--btn {
justify-content: center;
}
}
main .s3 .no-container-xl .no-contents_wrap-txt--btn .btn_red {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
width: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
height: clamp(3.5rem, 2.5889967638vw + 2.5291262136rem, 7.5rem);
border-radius: 5rem;
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
font-weight: 700;
transition: color 0.2s;
}
main .s3 .no-container-xl .no-contents_wrap-txt--btn .btn_white {
background-color: #fff;
width: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
height: clamp(3.5rem, 2.5889967638vw + 2.5291262136rem, 7.5rem);
border-radius: 5rem;
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
transition: color 0.2s;
}
main .s3 .no-container-xl .no-contents_wrap__grid {
width: 50%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.4rem;
}
@media (max-width: 1024px) {
main .s3 .no-container-xl .no-contents_wrap__grid {
width: 100%;
}
}
@media (max-width: 375px) {
main .s3 .no-container-xl .no-contents_wrap__grid {
grid-template-columns: repeat(1, 1fr);
}
}
main .s3 .no-container-xl .no-contents_wrap__grid--item {
border-radius: 1.6rem;
overflow: hidden;
}
main .s4 {
background-color: #000;
}
main .s4 .no-container-xl .no-content_wrap {
display: flex;
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
@media (max-width: 1024px) {
main .s4 .no-container-xl .no-content_wrap {
flex-wrap: wrap;
}
}
main .s4 .no-container-xl .no-content_wrap-txt {
width: 45%;
}
@media (max-width: 1024px) {
main .s4 .no-container-xl .no-content_wrap-txt {
width: 100%;
text-align: center;
}
}
main .s4 .no-container-xl .no-content_wrap-txt h2 {
color: #fff;
font-weight: 700;
}
main .s4 .no-container-xl .no-content_wrap-txt p {
padding-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
color: #fff;
font-weight: 500;
}
main .s4 .no-container-xl .no-content_wrap-txt .btn_red {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
width: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
height: clamp(3.5rem, 2.5889967638vw + 2.5291262136rem, 7.5rem);
border-radius: 5rem;
font-size: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
font-weight: 700;
transition: color 0.2s;
margin-top: 3.6rem;
}
@media (max-width: 1024px) {
main .s4 .no-container-xl .no-content_wrap-txt .btn_red {
margin: 0 auto;
margin-top: 2.4rem;
}
}
main .s4 .no-container-xl .no-content_wrap-txt__list {
padding-top: clamp(3rem, 4.5307443366vw + 1.3009708738rem, 10rem);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
}
main .s4 .no-container-xl .no-content_wrap-txt__list--item {
border-radius: 0.8rem;
overflow: hidden;
background-color: #515151;
}
main .s4 .no-container-xl .no-content_wrap-img {
width: 55%;
background-image: url('/resource/images/main/main-c4-04.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 1.6rem;
}
@media (max-width: 1024px) {
main .s4 .no-container-xl .no-content_wrap-img {
width: 100%;
height: 35rem;
}
}
main .s5 {
background-color: #000;
}
main .s5 .no-container-xl h2 {
color: #fff;
font-weight: 700;
}
main .s5 .no-container-xl .no-contents__wrap {
padding-top: clamp(3.6rem, 3.1067961165vw + 2.4349514563rem, 8.4rem);
}
main .s5 .no-container-xl .no-contents__wrap-3grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.4rem;
margin-bottom: 2.4rem;
}
@media (max-width: 768px) {
main .s5 .no-container-xl .no-contents__wrap-3grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
main .s5 .no-container-xl .no-contents__wrap-3grid {
grid-template-columns: repeat(1, 1fr);
}
}
main .s5 .no-container-xl .no-contents__wrap-3grid--item {
overflow: hidden;
border-radius: 1.6rem;
position: relative;
}
main .s5 .no-container-xl .no-contents__wrap-3grid--item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.8) 100%);
z-index: 2;
}
main .s5 .no-container-xl .no-contents__wrap-3grid--item img {
transition: ease all 0.5s;
}
main .s5 .no-container-xl .no-contents__wrap-3grid--item:hover img {
transform: scale(1.15);
z-index: -1;
}
main .s5 .no-container-xl .no-contents__wrap-3grid--item .--txt_wrap {
position: absolute;
bottom: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
left: clamp(1.2rem, 1.2944983819vw + 0.7145631068rem, 3.2rem);
width: 100%;
line-height: 1.15;
z-index: 3;
}
@media (max-width: 544px) {
main .s5 .no-container-xl .no-contents__wrap-3grid--item .--txt_wrap {
bottom: 3.6rem;
left: 3.2rem;
}
}
main .s5 .no-container-xl .no-contents__wrap-3grid--item .--txt_wrap p {
color: #fff;
font-weight: 400;
}
@media (max-width: 768px) {
main .s5 .no-container-xl .no-contents__wrap-3grid--item .--txt_wrap p {
font-size: 1.4rem;
}
}
main .s5 .no-container-xl .no-contents__wrap-3grid--item .--txt_wrap h3 {
color: #fff;
font-weight: 600;
padding-top: 0.8rem;
}
@media (max-width: 768px) {
main .s5 .no-container-xl .no-contents__wrap-3grid--item .--txt_wrap h3 {
font-size: 2rem;
}
}
main .s5 .no-container-xl .no-contents__wrap-3grid .item-logo {
display: none;
}
@media (max-width: 768px) {
main .s5 .no-container-xl .no-contents__wrap-3grid .item-logo {
display: block;
border: none;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
background-image: url('/resource/images/logo/logo-white.svg');
background-position: center;
background-repeat: no-repeat;
background-size: clamp(16rem, 5.1779935275vw + 14.0582524272rem, 24rem);
}
main .s5 .no-container-xl .no-contents__wrap-3grid .item-logo::before {
z-index: -1;
}
}
@media (max-width: 544px) {
main .s5 .no-container-xl .no-contents__wrap-3grid .item-logo {
display: none;
}
}
main .s5 .no-container-xl .no-contents__wrap-2grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.4rem;
}
@media (max-width: 544px) {
main .s5 .no-container-xl .no-contents__wrap-2grid {
grid-template-columns: repeat(1, 1fr);
}
}
main .s5 .no-container-xl .no-contents__wrap-2grid--item {
overflow: hidden;
border-radius: 1.6rem;
position: relative;
}
main .s5 .no-container-xl .no-contents__wrap-2grid--item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgb(0, 0, 0) 100%);
z-index: 2;
}
main .s5 .no-container-xl .no-contents__wrap-2grid--item img {
transition: ease all 0.5s;
}
main .s5 .no-container-xl .no-contents__wrap-2grid--item:hover img {
transform: scale(1.15);
z-index: -1;
}
main .s5 .no-container-xl .no-contents__wrap-2grid--item .--txt_wrap {
position: absolute;
bottom: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem);
left: clamp(1.2rem, 1.2944983819vw + 0.7145631068rem, 3.2rem);
width: 100%;
line-height: 1.15;
z-index: 3;
}
@media (max-width: 544px) {
main .s5 .no-container-xl .no-contents__wrap-2grid--item .--txt_wrap {
bottom: 3.6rem;
left: 3.2rem;
}
}
main .s5 .no-container-xl .no-contents__wrap-2grid--item .--txt_wrap p {
color: #fff;
font-weight: 400;
}
main .s5 .no-container-xl .no-contents__wrap-2grid--item .--txt_wrap h3 {
color: #fff;
font-weight: 600;
padding-top: 0.8rem;
}
main .s5 .no-container-xl .no-contents__wrap .btn_red {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
width: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
height: clamp(3.5rem, 2.5889967638vw + 2.5291262136rem, 7.5rem);
border-radius: 5rem;
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
font-weight: 700;
transition: color 0.2s;
margin: 0 auto;
margin-top: 6rem;
}
main .s6 {
background-color: #000;
overflow:hidden;
}
main .s6 .no-container-xl h2 {
color: #fff;
}
main .s6 .no-container-xl .title_wrap {
display: flex;
justify-content: space-between;
}
main .s6 .no-container-xl .title_wrap .success_btn {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
width: clamp(12rem, 3.8834951456vw + 10.5436893204rem, 18rem);
height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
font-size: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
border: 1px solid #000;
border-radius: 30rem;
margin-top: 3rem;
position: relative;
}
@media (max-width: 768px) {
main .s6 .no-container-xl .title_wrap .success_btn {
display: none;
}
}
main .s6 .no-container-xl .success_slider {
margin-top: clamp(3.6rem, 3.1067961165vw + 2.4349514563rem, 8.4rem);
width: 100%;
height: 100%;
overflow: visible;
}
main .s6 .no-container-xl .success_slider__wrap--slide a {
display: block;
width: 100%;
height: 100%;
position: relative;
border-radius: 0.8rem;
overflow: hidden;
}
main .s6 .no-container-xl .success_slider__wrap--slide a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.85) 100%);
z-index: 3;
}
main .s6 .no-container-xl .success_slider__wrap--slide a img {
transition: ease all 0.6s;
}
main .s6 .no-container-xl .success_slider__wrap--slide a .--item {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
padding: 2.4rem clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
overflow: hidden;
transition: ease all 0.4s;
z-index: 4;
}
main .s6 .no-container-xl .success_slider__wrap--slide a .--item h3 {
font-weight: 700;
text-transform: uppercase;
}
@media (max-width: 768px) {
main .s6 .no-container-xl .success_slider__wrap--slide a .--item h3 {
font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
}
}
main .s6 .no-container-xl .success_slider__wrap--slide a .--item p {
padding-top: 1.6rem 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.6s;
}
main .s6 .no-container-xl .success_slider__wrap--slide a:hover .--item p {
max-height: 10rem;
}
main .s6 .no-container-xl .success_slider__wrap--slide a:hover img {
transform: scale(1.14);
}
main .s6 .no-container-xl .success_slider .success_prv {
left: -15rem;
color: #fff;
width: 6.2rem;
height: 6.2rem;
border-radius: 50%;
background-color: #212121;
border: 2px solid #333;
}
main .s6 .no-container-xl .success_slider .success_prv::after {
font-size: 1.8rem;
}
main .s6 .no-container-xl .success_slider .success_prv:hover {
transform: translateX(0);
box-shadow: none;
}
main .s6 .no-container-xl .success_slider .swiper-button-prev.swiper-button-disabled,
main .s6 .no-container-xl .success_slider .swiper-button-next.swiper-button-disabled {
opacity: 0.45;
}
main .s6 .no-container-xl .success_slider .success_nxt {
right: -15rem;
color: #fff;
width: 6.2rem;
height: 6.2rem;
border-radius: 50%;
background-color: #212121;
border: 2px solid #333;
}
main .s6 .no-container-xl .success_slider .success_nxt::after {
font-size: 1.8rem;
}
main .s6 .no-container-xl .success_slider .success_nxt:hover {
transform: translateX(0);
box-shadow: none;
}
.top_btn {
width: 4.4rem;
height: 4.4rem;
border-radius: 0.8rem;
background-color: #2b2b2b;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
position: fixed;
right: 3rem;
bottom: 5rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.top_btn i {
font-size: 1.8rem;
}
.modal {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.9);
}
.modal .inner {
width: 80%;
max-width: 1200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal .inner img {
width: 100%;
height: 50rem;
position: relative;
}
@media (max-width: 768px) {
.modal .inner img {
height: 30rem;
}
}
.modal .inner .text-content {
color: #fff;
padding-top: 2rem;
}
.modal .inner .text-content h3 {
font-weight: 700;
}
.modal .inner .text-content p {
padding-top: 1.2rem;
}
.c_btn {
font-size: 3rem;
color: #fff;
cursor: pointer;
position: absolute;
top: -30px;
right: -30px;
}
.modal .prev_btn,
.modal .next_btn {
color: #fff;
font-size: 4rem;
position: absolute;
top: 50%;
cursor: pointer;
}
.modal .prev_btn {
left: -50px;
cursor: pointer;
}
.modal .next_btn {
right: -50px;
cursor: pointer;
}
.modal span {
color: #fff;
font-size: 12px;
}
.inner > h3 {
text-align: left;
color: #fff;
} /*# sourceMappingURL=style.css.map */
/* 캡챠 서식 */
.captcha-wrap .no-captcha {
width: 100%;
}
.captcha-wrap .no-captcha__box {
display: flex;
align-items: center;
gap: 1rem;
}
.capcha_txt{
text-align:left !important;
font-size:1.4rem;
}
@media (max-width: 499px) {
.captcha-wrap .no-captcha__box {
flex-direction: column;
align-items: flex-start;
}
}
.captcha-wrap .no-captcha__box .no-captcha__img {
height: 5rem;
width: 16rem;
display: flex;
align-items: center;
justify-content: center;
background-color:#DF212E;
border-radius: 0.6rem;
overflow: hidden;
}
.captcha-wrap .no-captcha__box .no-captcha__img img{
object-fit:contain;
width:100%;
}
@media (max-width: 499px) {
.captcha-wrap .no-captcha__box .no-captcha__img {
width: 100%;
}
}
.captcha-wrap input {
border: none;
height: auto;
border:1px solid #666;
background:#000;
width: 30rem;
padding: 2.4rem;
border-radius: 0.6rem;
height: 4rem;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.61;
color: #fff;
padding-right: 2.4rem;
font-family: 'Pretendard', sans-serif;
font-weight: 300;
}
@media (max-width: 768px) {
.captcha-wrap input {
font-size: 1.4rem;
}
}
@media (max-width: 499px) {
.captcha-wrap input {
width: 100%;
}
}
.captcha-wrap input::placeholder {
color: #999;
}
.captcha-wrap input:focus {
outline: none;
}
.no-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.no-popup__inner {
background-color: #212121;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 62.5rem;
width: 60%;
}
@media screen and (max-width: 1024px) {
.no-popup__inner {
width: 70%;
}
}
@media screen and (max-width: 768px) {
.no-popup__inner {
width: 80%;
}
}
.no-popup__zone {
display: flex;
}
.no-popup__image {
padding: 2.4rem;
}
.no-popup__image picture {
position: relative;
overflow: hidden;
height: 0;
width: 100%;
padding-bottom: 62.5%;
}
.no-popup__image picture img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.35s;
}
.no-popup__content {
padding: 1rem 2.4rem 2.4rem;
color: #fff;
text-align: center;
word-break: keep-all;
}
@media screen and (max-width: 768px) {
.no-popup__content {
padding: 1rem 2.4rem 2.4rem;
}
}
@media screen and (max-width: 544px) {
.no-popup__content {
padding: 0.8rem 1.6rem 1rem;
}
}
.no-popup__title {
font-weight: 700;
font-size: 3.2rem;
line-height: 1.333;
}
@media screen and (max-width: 1024px) {
.no-popup__title {
font-size: 2.8rem;
}
}
@media screen and (max-width: 768px) {
.no-popup__title {
font-size: 2.4rem;
}
}
@media screen and (max-width: 544px) {
.no-popup__title {
font-size: 2rem;
}
}
.no-popup__desc {
line-height: 1.45;
padding: 1rem 0 3.2rem;
font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
.no-popup__desc {
font-size: 1.4rem;
padding: 1rem 0 2.4rem;
}
}
@media screen and (max-width: 544px) {
.no-popup__desc {
font-size: 1.2rem;
padding: 0.8rem 0 1.6rem;
}
}
.no-popup__pos {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.no-popup__pos a {
min-width: 18rem;
font-weight: 500;
border: 1px solid #fff;
border-radius: 4.8rem;
height: 4.8rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.9rem 2.4rem;
color: #fff;
transition: 0.15s;
font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
.no-popup__pos a {
font-size: 1.4rem;
height: 4rem;
border-radius: 4rem;
min-width: 16rem;
}
}
@media screen and (max-width: 544px) {
.no-popup__pos a {
font-size: 1.2rem;
height: 3.6rem;
border-radius: 3.6rem;
}
}
.no-popup__pos a:hover {
background: #fff;
color: #212121;
}
.no-popup-ctrl {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
padding: 0.4rem 1.6rem;
background-color: #212121;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 768px) {
.no-popup-ctrl {
padding: 0.4rem 1rem;
}
}
.no-popup-ctrl__off input[type='checkbox'] {
display: none;
}
.no-popup-ctrl__off label {
padding: 0.7rem 1rem 0.5rem;
border-radius: 5.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.15s;
color: #a5a5a5;
}
.no-popup-ctrl__off label:hover {
color: #eee;
background-color: #333;
}
.no-popup-ctrl__off label span {
transition: 0.15s;
font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
.no-popup-ctrl__off label span {
font-size: 1.2rem;
}
}
.no-popup-ctrl__close a {
padding: 0.7rem 1.4rem;
border-radius: 5.5rem;
color: #a5a5a5;
transition: 0.15s;
font-size: 1.4rem;
transition: 0.15s;
}
@media screen and (max-width: 768px) {
.no-popup-ctrl__close a {
font-size: 1.2rem;
}
}
.no-popup-ctrl__close a:hover {
color: #eee;
background-color: #333;
}
.no-popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
}
.popup-pager {
position: static;
padding-bottom: 2.4rem;
}
@media screen and (max-width: 768px) {
.popup-pager {
padding-bottom: 1rem 0;
}
}
.popup-pager .swiper-pagination-bullet {
background-color: #666;
opacity: 1;
}
.popup-pager .swiper-pagination-bullet-active {
background-color: #c9dc44;
}
#load {
width: 100%;
height: 100%;
position: fixed;
display: block;
opacity: 1;
background: url('/resource/images/main/loading.jpg') no-repeat center;
background-size: cover;
z-index: 99999;
text-align: center;
opacity: 1; /* 초기 투명도 */
transition: opacity 1.6s ease-out; /* 부드럽게 페이드아웃 */
display: none; /* 초기에 숨김 */
}
#load.hide {
opacity: 0; /* 사라질 때 투명도 조절 */
}
.animated-main {
animation: ani02 1.4s 2.5s forwards;
}
.animated-sub {
animation: ani02 1.5s 2.6s forwards;
}
.animated-btn {
animation: ani02 1.6s 2.7s forwards;
}
.animated-main-fast {
animation: ani02 0.8s 0.8s forwards;
}
.animated-sub-fast {
animation: ani02 0.9s 0.9s forwards;
}
.animated-btn-fast {
animation: ani02 1s 1s forwards;
}
.cs-tab{
display:flex;
align-items: center;
justify-content: center;
gap: clamp(1rem, 0.9061488673vw + 0.6601941748rem, 2.4rem);
}
.cs-tab li a{
color:#fff;
border:1px solid #fff;
border-radius:5.5rem;
width: clamp(10rem, 3.8834951456vw + 8.5436893204rem, 16rem);
height: clamp(4.2rem, 0.9061488673vw + 3.8601941748rem, 5.6rem);
font-size: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
display:flex;
align-items: center;
justify-content: center;
padding:1rem 0;
font-weight:600;
}
.cs-tab li a.active{
border:1px solid #df212e;
background: #df212e;
}
.modal-policy{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1200;
display: none;
}
.modal-policy .no-container-lg.modal_box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.modal-policy .no-container-lg.modal_box .close-btn {
position: absolute;
right: 8rem;
top: -4rem;
z-index: 1300;
cursor: pointer;
background-color: #000;
border-radius: 50%;
width: 4rem;
height: 4rem;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s ease all;
}
.modal-policy .no-container-lg.modal_box .close-btn:hover {
background-color: #df212e;
}
@media (max-width: 1024px) {
.modal-policy .no-container-lg.modal_box .close-btn {
right: 50%;
top: auto;
bottom: -6rem;
}
}
.modal-policy .no-container-lg.modal_box .close-btn i {
font-size: 2.4rem;
font-weight: 600;
color: #fff;
}
.modal__inner {
width: 100%;
max-width: 768px;
height: 58rem;
margin: 0 auto;
background-color: #fff;
overflow-y: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.modal__inner .policy-box {
width: 100%;
}
.modal__inner .policy-box p {
font-size: 18px;
font-weight: bold;
margin: 20px 0 10px;
color: #333;
}
.modal__inner .policy-box span {
font-size: 14px;
line-height: 1.6;
color: #555;
display: block;
margin-bottom: 15px;
}
.modal__inner .policy-box ul {
list-style: disc;
padding-left: 20px;
margin-bottom: 20px;
}
.modal__inner .policy-box ul li {
font-size: 14px;
line-height: 1.6;
color: #555;
margin-bottom: 10px;
}
.modal__inner .policy-box li:last-child {
margin-bottom: 0;
}
.no-sub-powertimes{
overflow:hidden;
}
.no-sub-powertimes__inner {
max-width: 1280px;
margin: 0 auto;
}
.no-sub-powertimes__inner .times-wrap-top {
border: 3px solid #fff;
height: 8rem;
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-top {
padding-left: 2rem;
padding-right: 2rem;
height: 6rem;
}
}
.no-sub-powertimes__inner .times-wrap-top .link {
width: 20%;
height: 100%;
padding: 0 2.4rem;
display: flex;
align-items: center;
justify-content: center;
border-right: 3px solid #fff;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-top .link {
display: none;
}
}
.no-sub-powertimes__inner .times-wrap-top .link a {
color: #fff;
position: relative;
}
.no-sub-powertimes__inner .times-wrap-top .link a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #fff;
transition: 0.4s ease all;
}
.no-sub-powertimes__inner .times-wrap-top .link a:hover::after {
width: 100%;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-top .link {
display: none;
}
}
.no-sub-powertimes__inner .times-wrap-top .time-logo {
width: 60%;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-top .time-logo {
width: 90%;
}
}
.no-sub-powertimes__inner .times-wrap-top .time-logo img {
width: clamp(6rem, 1.2944983819vw + 5.5145631068rem, 8rem);
display: flex;
align-items: center;
justify-content: center;
}
.no-sub-powertimes__inner .times-wrap-top .time-logo p {
color: #fff;
font-size: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
font-weight: 700;
font-family: 'EB Garamond';
}
.no-sub-powertimes__inner .times-wrap-top .time-sns {
width: 20%;
height: 100%;
display: flex;
padding: 0 2.4rem;
justify-content: space-between;
align-items: center;
border-left: 3px solid #fff;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-top .time-sns {
width: 10%;
border-left: 0;
justify-content: flex-end;
gap: clamp(0.8rem, 1.0355987055vw + 0.4116504854rem, 2.4rem);
padding: 0;
}
}
.no-sub-powertimes__inner .times-wrap-top .time-sns p {
color: #fff;
font-size: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
font-weight: 600;
}
@media (max-width: 544px) {
.no-sub-powertimes__inner .times-wrap-top .time-sns p {
display: none;
}
}
.no-sub-powertimes__inner .times-wrap-top .time-sns--item {
display: flex;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.no-sub-powertimes__inner .times-wrap-top .time-sns--item li {
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: #df212e;
display: flex;
align-items: center;
justify-content: center;
}
.no-sub-powertimes__inner .times-wrap-top .time-sns--item li i {
color: #fff;
}
.no-sub-powertimes__inner .times-wrap-mid {
padding: 2.4rem;
display: flex;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-mid {
flex-direction: column;
}
}
@media (max-width: 768px) {
.no-sub-powertimes__inner .times-wrap-mid {
padding-left: 0;
padding-right: 0;
}
}
.no-sub-powertimes__inner .times-wrap-mid figure {
width: 90%;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-mid figure {
width: 100%;
}
}
.no-sub-powertimes__inner .times-wrap-mid .text {
width: 10%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-mid .text {
width: 100%;
}
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-mid .text {
flex-direction: row;
}
}
.no-sub-powertimes__inner .times-wrap-mid .text .icon {
width: 4.5rem;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-mid .text .icon {
display: none;
}
.no-sub-powertimes__inner .times-wrap-mid .text .icon img {
width: 4.5rem;
}
}
.no-sub-powertimes__inner .times-wrap-mid .text .text-wrap {
width: 80%;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-mid .text .text-wrap {
width: 100%;
}
}
.no-sub-powertimes__inner .times-wrap-mid .text .text-wrap h3 {
font-size: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: #df212e;
font-weight: 700;
writing-mode: vertical-rl;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-mid .text .text-wrap h3 {
writing-mode: unset;
}
.no-sub-powertimes__inner .times-wrap-mid .text .text-wrap h3 br{
display:none;
}
}
.no-sub-powertimes__inner .times-wrap-bottom .text-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
@media (max-width: 1024px) {
.no-sub-powertimes__inner .times-wrap-bottom .text-container {
grid-template-columns: repeat(1, 1fr);
gap: 3.2rem;
}
}
.no-sub-powertimes__inner .times-wrap-bottom .text-container .title h2 {
font-size: clamp(4.8rem, 3.8834951456vw + 3.3436893204rem, 10.8rem);
color: #df212e;
font-weight: 800;
}
.no-sub-powertimes__inner .times-wrap-bottom .text-container .title p {
text-transform: uppercase;
color: #fff;
font-weight: 700;
font-size: clamp(2.4rem, 0.6472491909vw + 2.1572815534rem, 3.4rem);
}
.no-sub-powertimes__inner .times-wrap-bottom .text-container .desc h3 {
color: #fff;
font-weight: 600;
font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.no-sub-powertimes__inner .times-wrap-bottom .text-container .desc p {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-sub-powertimes__inner .times-wrap-bottom .low-text {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.no-sub-powertimes__inner .times-wrap-bottom .low-text dl {
display: flex;
gap: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem);
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
@media (max-width: 768px) {
.no-sub-powertimes__inner .times-wrap-bottom .low-text dl {
flex-direction: column;
}
}
.no-sub-powertimes__inner .times-wrap-bottom .low-text dl dt {
color: #fff;
font-weight: 700;
}
.no-sub-powertimes__inner .times-wrap-bottom .low-text dl dd {
color: rgba(255, 255, 255, 0.8);
}
.no-sub-powertimes__inner .times-wrap-bottom .last-text {
line-height: 1.51;
color: rgba(255, 255, 255, 0.8);
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
padding-top:2.4rem;
word-break: break-word;
}
@media (max-width: 768px) {
.no-sub-powertimes__inner .times-wrap-bottom .last-text br{
display:block;
}
}
@media (max-width: 480px) {
.no-sub-powertimes__inner .times-wrap-bottom .last-text br{
display:none;
}
}
.no-sub-powertimes__inner .times-wrap-bottom .last-text span {
color: #fff;
font-weight: 700;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
/* popup */
.main-popup-wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100005;
}
.main-popup {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 3000;
animation: popupAppear 1.6s .2s forwards;
width: 75%;
}
@keyframes popupAppear {
0% {
opacity: 0;
top: 55%;
}
100% {
opacity: 1;
top: 50%;
}
}
.main-popup-top .swiper-component {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem;
}
.main-popup-top .swiper-component .arrow {
position: relative;
top: 0;
left: 0;
right: 0;
width: auto;
height: auto;
margin-top: 0;
width: clamp(4rem, 0.1294498382vw + 3.9514563107rem, 4.2rem);
height: clamp(4rem, 0.1294498382vw + 3.9514563107rem, 4.2rem);
border-radius: 50%;
border: 1px solid #fff;
transition: background-color 0.3s;
}
.main-popup-top .swiper-component .arrow:hover {
background-color: rgba(255, 255, 255, 0.24);
}
.main-popup-top .swiper-component .arrow i {
font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.main-popup-top .swiper-component .arrow::after {
display: none;
}
.main-popup-mid {
margin: 1.5rem 0 1rem;
overflow: hidden;
border-radius: 1.2rem;
}
.main-popup-mid li .img-box {
padding-top: 139%;
position: relative;
display: flex;
border-radius: 1.2rem;
overflow: hidden;
}
.main-popup-mid li .img-box a img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
object-position: center;
}
.main-popup-bottom {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.main-popup-bottom label {
cursor: pointer;
color: #fff;
height: 100%;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
display: flex;
align-items: center;
position: relative;
}
.main-popup-bottom label:hover {
text-decoration: underline;
}
.main-popup-bottom label img {
width: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
margin-right: 0.5rem;
}
.main-popup-bottom label input {
display: none;
}
.main-popup-bottom button {
background: none;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
margin-left: auto;
color: #fff;
display: flex;
align-items: center;
gap: 0.5rem;
line-height: 1.3;
}
.main-popup-bottom button:hover {
text-decoration: underline;
}
.main-popup-bottom button i {
font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
}
.main-popup-bg {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background: rgba(0, 0, 0, 0.65);
}
#popupImage-on {
display: none;
}