@charset "utf-8";

/* fonts */
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url(../fonts/Pretendard-Bold.woff2) format('woff2'), url(../fonts/Pretendard-Bold.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url(../fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url(../fonts/Pretendard-Medium.woff2) format('woff2'), url(../fonts/Pretendard-Medium.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url(../fonts/Pretendard-Regular.woff2) format('woff2'), url(../fonts/Pretendard-Regular.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url(../fonts/Pretendard-Light.woff2) format('woff2'), url(../fonts/Pretendard-Light.woff) format('woff');
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-display: swap;
    src: local('Gmarket Sans Bold'), url(../fonts/GmarketSansBold.woff) format('woff');
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-display: swap;
    src: local('Gmarket Sans Medium'), url(../fonts/GmarketSansMedium.woff) format('woff');
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    font-display: swap;
    src: local('Gmarket Sans Light'), url(../fonts/GmarketSansLight.woff) format('woff');
}

/* base */
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, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 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: inherit; vertical-align: baseline; box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
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;}
table caption {overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
a {color: var(--black); text-decoration: none;}
label, img {vertical-align: middle;}
html {-webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale;}
input {-webkit-border-radius: 0; border-radius: 0; -webkit-appearance: none; appearance: none;}
:focus {outline: 1px solid  var(--white) !important; box-sizing: border-box !important; box-shadow: 0 0 0 1px inset  var(--black) !important;}
:focus:not(:focus-visible) {outline: none !important; box-shadow: none !important;}
::placeholder {color: var(--text-light) !important; font-weight: 400;}
::-webkit-input-placeholder {color: var(--text-light) !important; font-weight: 400;}
:-ms-input-placeholder {color: var(--text-light) !important; font-weight: 400;}
a, button, input, select, div, li, span, p {-webkit-tap-highlight-color: rgba(0,0,0,.025);}

html {font-size: 62.5%;}
body {font-size: 1.6rem; font-family: 'Pretendard', system-ui, -apple-system, sans-serif, sans-serif; color: var(--text); background: var(--white); line-height: 1.5; margin: 0; min-width: 320px;}

:root {
    /* 컬러 */
    --primary-50:  #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --secondary-50:  #fef2f2;
    --secondary-100: #fee2e2;
    --secondary-200: #fecaca;
    --secondary-300: #fca5a5;
    --secondary-400: #f87171;
    --secondary-500: #ef4444;
    --secondary-600: #dc2626;
    --secondary-700: #b91c1c;
    --secondary-800: #991b1b;
    --secondary-900: #7f1d1d;
    --tertiary-50:  #f0fdf4;
    --tertiary-100: #dcfce7;
    --tertiary-200: #bbf7d0;
    --tertiary-300: #86efac;
    --tertiary-400: #4ade80;
    --tertiary-500: #22c55e;
    --tertiary-600: #16a34a;
    --tertiary-700: #15803d;
    --tertiary-800: #166534;
    --tertiary-900: #14532d;
    --accent: #ffa200;

    --bg: #ffffff;
    --bg-alt: #f8f9fa;
    --surface: #ffffff;
    --border: #e0e0e0;
    --text: #212529;
    --text-light: #6c757d;

    --gray-50:  #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --white: #ffffff;
    --black: #171717;

    /* font-family */
    --ff1: Pretendard, system-ui, -apple-system, sans-serif, sans-serif;
    --ff2: GmarketSans, system-ui, -apple-system, sans-serif, sans-serif;

    /* font-size */
    --fs-xs: 1.2rem;
    --fs-sm: 1.4rem;
    --fs-md: 1.6rem;
    --fs-lg: 2rem;
    --fs-xl: 2.4rem;
    --fs-xxl: 3.2rem;
    --fs-xxxl: 4rem;

    /* font-weight */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* space */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 40px;
    --space-xxxl: 48px;

    /* radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* shadow */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);

    /* transition */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;

    /* etc */
    --max-content-width: 1200px;
}

/* color */
.primary-50 {color: var(--primary-50) !important;}
.primary-100 {color: var(--primary-100) !important;}
.primary-200 {color: var(--primary-200) !important;}
.primary-300 {color: var(--primary-300) !important;}
.primary-400 {color: var(--primary-400) !important;}
.primary-500 {color: var(--primary-500) !important;}
.primary-600 {color: var(--primary-600) !important;}
.primary-700 {color: var(--primary-700) !important;}
.primary-800 {color: var(--primary-800) !important;}
.primary-900 {color: var(--primary-900) !important;}
.secondary-50 {color: var(--secondary-50) !important;}
.secondary-100 {color: var(--secondary-100) !important;}
.secondary-200 {color: var(--secondary-200) !important;}
.secondary-300 {color: var(--secondary-300) !important;}
.secondary-400 {color: var(--secondary-400) !important;}
.secondary-500 {color: var(--secondary-500) !important;}
.secondary-600 {color: var(--secondary-600) !important;}
.secondary-700 {color: var(--secondary-700) !important;}
.secondary-800 {color: var(--secondary-800) !important;}
.secondary-900 {color: var(--secondary-900) !important;}
.tertiary-50 {color: var(--tertiary-50) !important;}
.tertiary-100 {color: var(--tertiary-100) !important;}
.tertiary-200 {color: var(--tertiary-200) !important;}
.tertiary-300 {color: var(--tertiary-300) !important;}
.tertiary-400 {color: var(--tertiary-400) !important;}
.tertiary-500 {color: var(--tertiary-500) !important;}
.tertiary-600 {color: var(--tertiary-600) !important;}
.tertiary-700 {color: var(--tertiary-700) !important;}
.tertiary-800 {color: var(--tertiary-800) !important;}
.tertiary-900 {color: var(--tertiary-900) !important;}
.accent {color: var(--accent) !important;}
.bg {color: var(--bg) !important;}
.bg-alt {color: var(--bg-alt) !important;}
.surface {color: var(--surface) !important;}
.border {color: var(--border) !important;}
.text {color: var(--text) !important;}
.text-light {color: var(--text-light) !important;}
.gray-50 {color: var(--gray-50) !important;}
.gray-100 {color: var(--gray-100) !important;}
.gray-200 {color: var(--gray-200) !important;}
.gray-300 {color: var(--gray-300) !important;}
.gray-400 {color: var(--gray-400) !important;}
.gray-500 {color: var(--gray-500) !important;}
.gray-600 {color: var(--gray-600) !important;}
.gray-700 {color: var(--gray-700) !important;}
.gray-800 {color: var(--gray-800) !important;}
.white {color: var(--white) !important;}
.black {color: var(--black) !important;}

/* font-family */
.ff1 {font-family: var(--ff1) !important;}
.ff2 {font-family: var(--ff2) !important;}

/* font-size */
.fs-xs {font-size: var(--fs-xs) !important;}
.fs-sm {font-size: var(--fs-sm) !important;}
.fs-md {font-size: var(--fs-md) !important;}
.fs-lg {font-size: var(--fs-lg) !important;}
.fs-xl {font-size: var(--fs-xl) !important;}
.fs-xxl {font-size: var(--fs-xxl) !important;}
.fs-xxxl {font-size: var(--fs-xxxl) !important;}

/* font-weight */
.fw-light {font-weight: var(--fw-light) !important;}
.fw-regular {font-weight: var(--fw-regular) !important;}
.fw-medium {font-weight: var(--fw-medium) !important;}
.fw-semibold {font-weight: var(--fw-semibold) !important;}
.fw-bold {font-weight: var(--fw-bold) !important;}

/* radius */
.r-sm {border-radius: var(--radius-sm) !important;}
.r-md {border-radius: var(--radius-md) !important;}
.r-lg {border-radius: var(--radius-lg) !important;}

/* shadow */
.shadow-sm {box-shadow: var(--shadow-sm) !important;}
.shadow-md {box-shadow: var(--shadow-md) !important;}
.shadow-lg {box-shadow: var(--shadow-lg) !important;}

/* transition */
.transition-fast {transition: var(--transition-fast) !important;}
.transition {transition: var(--transition-normal) !important;}
.transition-slow {transition: var(--transition-slow) !important;}

/* 부드러운 스크롤 */
html {scroll-behavior: smooth;}
:target {scroll-margin-top: 160px;}
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
}

/* width & height */
.w16 {width: 1.6rem !important;}
.w20 {width: 2rem !important;}
.w24 {width: 2.4rem !important;}
.w30 {width: 3rem !important;}
.w32 {width: 3.2rem !important;}
.w40 {width: 4rem !important;}
.w48 {width: 4.8rem !important;}
.w50 {width: 5rem !important;}
.w56 {width: 5.6rem !important;}
.w60 {width: 6rem !important;}
.w64 {width: 6.4rem !important;}
.w70 {width: 7rem !important;}
.w72 {width: 7.2rem !important;}
.w80 {width: 8rem !important;}
.w88 {width: 8.8rem !important;}
.w90 {width: 9rem !important;}
.w96 {width: 9.6rem !important;}
.w100 {width: 10rem !important;}
.w120 {width: 12rem !important;}
.w150 {width: 15rem !important;}
.w160 {width: 16rem !important;}
.w200 {width: 20rem !important;}
.w240 {width: 24rem !important;}
.w300 {width: 30rem !important;}
.w320 {width: 32rem !important;}
.w400 {width: 40rem !important;}
.w480 {width: 48rem !important;}
.w500 {width: 50rem !important;}
.w560 {width: 56rem !important;}
.w600 {width: 60rem !important;}
.w640 {width: 640rem !important;}
.w800 {width: 80rem !important;}
.w10p {width: 10% !important;}
.w20p {width: 20% !important;}
.w25p {width: 25% !important;}
.w30p {width: 30% !important;}
.w40p {width: 40% !important;}
.w50p {width: 50% !important;}
.w60p {width: 60% !important;}
.w70p {width: 70% !important;}
.w75p {width: 75% !important;}
.w80p {width: 80% !important;}
.w90p {width: 90% !important;}
.w100p {width: 100% !important;}

.max-w300 {max-width: 30rem !important;}
.max-w400 {max-width: 40rem !important;}
.max-w500 {max-width: 50rem !important;}
.max-w600 {max-width: 60rem !important;}
.max-w700 {max-width: 70rem !important;}
.max-w800 {max-width: 80rem !important;}

.h16 {height: 1.6rem !important;}
.h20 {height: 2rem !important;}
.h24 {height: 2.4rem !important;}
.h28 {height: 2.8rem !important;}
.h30 {height: 3rem !important;}
.h32 {height: 3.2rem !important;}
.h40 {height: 4rem !important;}
.h48 {height: 4.8rem !important;}
.h50 {height: 5rem !important;}
.h56 {height: 5.6rem !important;}
.h60 {height: 6rem !important;}
.h64 {height: 6.4rem !important;}
.h70 {height: 7rem !important;}
.h72 {height: 7.2rem !important;}
.h80 {height: 8rem !important;}
.h90 {height: 9rem !important;}
.h100 {height: 10rem !important;}
.h120 {height: 12rem !important;}
.h150 {height: 15rem !important;}
.h160 {height: 16rem !important;}
.h200 {height: 20rem !important;}
.h240 {height: 24rem !important;}
.h300 {height: 30rem !important;}
.h320 {height: 32rem !important;}
.h400 {height: 40rem !important;}
.h480 {height: 48rem !important;}
.h500 {height: 50rem !important;}
.h560 {height: 56rem !important;}
.h600 {height: 60rem !important;}
.h50p {height: 50% !important;}
.h100p {height: 100% !important;}

/* margin */
.m0 {margin: 0 !important;}
.m2 {margin: .2rem !important;}
.m5 {margin: .5rem !important;}
.m10 {margin: 1rem !important;}
.m15 {margin: 1.5rem !important;}
.m20 {margin: 2rem !important;}
.m25 {margin: 2.5rem !important;}
.m30 {margin: 3rem !important;}
.m35 {margin: 3.5rem !important;}
.m40 {margin:4rem !important;}
.m45 {margin: 4.5rem !important;}
.m50 {margin: 5rem !important;}
.m55 {margin: 5.5rem !important;}
.m60 {margin: 6rem !important;}
.m-auto {margin: auto !important;}

.mt-16 {margin-top: -1.6rem !important;}
.mt-8 {margin-top: -.8rem !important;}
.mt0 {margin-top: 0 !important;}
.mt2 {margin-top: .2rem !important;}
.mt4 {margin-top: .4rem !important;}
.mt5 {margin-top: .5rem !important;}
.mt8 {margin-top: .8rem !important;}
.mt10 {margin-top: 1rem !important;}
.mt12 {margin-top: 1.2rem !important;}
.mt15 {margin-top: 1.5rem !important;}
.mt16 {margin-top: 1.6rem !important;}
.mt20 {margin-top: 2rem !important;}
.mt24 {margin-top: 2.4rem !important;}
.mt30 {margin-top: 3rem !important;}
.mt32 {margin-top: 3.2rem !important;}
.mt40 {margin-top: 4rem !important;}
.mt48 {margin-top: 4.8rem !important;}
.mt50 {margin-top: 5rem !important;}
.mt56 {margin-top: 5.6rem !important;}
.mt64 {margin-top: 6.4rem !important;}
.mt80 {margin-top: 8rem !important;}
.mt100 {margin-top: 10rem !important;}
.mt120 {margin-top: 12rem !important;}
.mt140 {margin-top: 14rem !important;}
.mt160 {margin-top: 16rem !important;}
.mt-auto {margin-top: auto !important;}

.mb0 {margin-bottom: 0 !important;}
.mb2 {margin-bottom: .2rem !important;}
.mb4 {margin-bottom: .4rem !important;}
.mb5 {margin-bottom: .5rem !important;}
.mb8 {margin-bottom: .8rem !important;}
.mb10 {margin-bottom: 1rem !important;}
.mb12 {margin-bottom: 1.2rem !important;}
.mb15 {margin-bottom: 1.5rem !important;}
.mb16 {margin-bottom: 1.6rem !important;}
.mb20 {margin-bottom: 2rem !important;}
.mb24 {margin-bottom: 2.4rem !important;}
.mb30 {margin-bottom: 3rem !important;}
.mb32 {margin-bottom: 3.2rem !important;}
.mb40 {margin-bottom: 4rem !important;}
.mb48 {margin-bottom: 4.8rem !important;}
.mb50 {margin-bottom: 5rem !important;}
.mb56 {margin-bottom: 5.6rem !important;}
.mb64 {margin-bottom: 6.4rem !important;}
.mb80 {margin-bottom: 8rem !important;}
.mb100 {margin-bottom: 10rem !important;}
.mb120 {margin-bottom: 12rem !important;}
.mb140 {margin-bottom: 14rem !important;}
.mb160 {margin-bottom: 16rem !important;}
.mb-auto {margin-bottom: auto !important;}

.ml0 {margin-left: 0 !important;}
.ml2 {margin-left: .2rem !important;}
.ml4 {margin-left: .4rem !important;}
.ml5 {margin-left: .5rem !important;}
.ml8 {margin-left: .8rem !important;}
.ml10 {margin-left: 1rem !important;}
.ml12 {margin-left: 1.2rem !important;}
.ml15 {margin-left: 1.5rem !important;}
.ml16 {margin-left: 1.6rem !important;}
.ml20 {margin-left: 2rem !important;}
.ml24 {margin-left: 2.4rem !important;}
.ml30 {margin-left: 3rem !important;}
.ml32 {margin-left: 3.2rem !important;}
.ml40 {margin-left: 4rem !important;}
.ml48 {margin-left: 4.8rem !important;}
.ml50 {margin-left: 5rem !important;}
.ml56 {margin-left: 5.6rem !important;}
.ml64 {margin-left: 6.4rem !important;}
.ml80 {margin-left: 8rem !important;}
.ml100 {margin-left: 10rem !important;}
.ml120 {margin-left: 12rem !important;}
.ml140 {margin-left: 14rem !important;}
.ml160 {margin-left: 16rem !important;}
.ml-auto {margin-left: auto !important;}

.mr0 {margin-right: 0 !important;}
.mr2 {margin-right: .2rem !important;}
.mr4 {margin-right: .4rem !important;}
.mr5 {margin-right: .5rem !important;}
.mr8 {margin-right: .8rem !important;}
.mr10 {margin-right: 1rem !important;}
.mr12 {margin-right: 1.2rem !important;}
.mr15 {margin-right: 1.5rem !important;}
.mr16 {margin-right: 1.6rem !important;}
.mr20 {margin-right: 2rem !important;}
.mr24 {margin-right: 2.4rem !important;}
.mr30 {margin-right: 3rem !important;}
.mr32 {margin-right: 3.2rem !important;}
.mr40 {margin-right: 4rem !important;}
.mr48 {margin-right: 4.8rem !important;}
.mr50 {margin-right: 5rem !important;}
.mr56 {margin-right: 5.6rem !important;}
.mr64 {margin-right: 6.4rem !important;}
.mr80 {margin-right: 8rem !important;}
.mr100 {margin-right: 10rem !important;}
.mr120 {margin-right: 12rem !important;}
.mr140 {margin-right: 14rem !important;}
.mr160 {margin-right: 16rem !important;}
.mr-auto {margin-right: auto !important;}

/* padding */
.p0 {padding: 0 !important;}
.p4 {padding: .4rem !important;}
.p5 {padding: .5rem !important;}
.p8 {padding: .8rem !important;}
.p10 {padding: 1rem !important;}
.p15 {padding: 1.5rem !important;}
.p16 {padding: 1.6rem !important;}
.p20 {padding: 2rem !important;}
.p24 {padding: 2.4rem !important;}
.p30 {padding: 3rem !important;}
.p32 {padding: 3.2rem !important;}
.p40 {padding: 4rem !important;}
.p48 {padding: 4.8rem !important;}
.p50 {padding: 5rem !important;}
.p56 {padding: 5.6rem !important;}
.p60 {padding: 6rem !important;}
.p64 {padding: 6.4rem !important;}
.p72 {padding: 7.2rem !important;}
.p80 {padding: 8rem !important;}
.p100 {padding: 10rem !important;}
.p120 {padding: 12rem !important;}
.p140 {padding: 14rem !important;}
.p160 {padding: 16rem !important;}

.pt0 {padding-top: 0 !important;}
.pt2 {padding-top: .2rem !important;}
.pt4 {padding-top: .4rem !important;}
.pt5 {padding-top: .5rem !important;}
.pt8 {padding-top: .8rem !important;}
.pt10 {padding-top: 1rem !important;}
.pt12 {padding-top: 1.2rem !important;}
.pt15 {padding-top: 1.5rem !important;}
.pt16 {padding-top: 1.6rem !important;}
.pt20 {padding-top: 2rem !important;}
.pt24 {padding-top: 2.4rem !important;}
.pt30 {padding-top: 3rem !important;}
.pt32 {padding-top: 3.2rem !important;}
.pt40 {padding-top: 4rem !important;}
.pt48 {padding-top: 4.8rem !important;}
.pt50 {padding-top: 5rem !important;}
.pt56 {padding-top: 5.6rem !important;}
.pt60 {padding-top: 6rem !important;}
.pt64 {padding-top: 6.4rem !important;}
.pt72 {padding-top: 7.2rem !important;}
.pt80 {padding-top: 8rem !important;}
.pt100 {padding-top: 10rem !important;}
.pt120 {padding-top: 12rem !important;}
.pt140 {padding-top: 14rem !important;}
.pt160 {padding-top: 16rem !important;}

.pb0 {padding-bottom: 0 !important;}
.pb2 {padding-bottom: .2rem !important;}
.pb4 {padding-bottom: .4rem !important;}
.pb5 {padding-bottom: .5rem !important;}
.pb8 {padding-bottom: .8rem !important;}
.pb10 {padding-bottom: 1rem !important;}
.pb12 {padding-bottom: 1.2rem !important;}
.pb15 {padding-bottom: 1.5rem !important;}
.pb16 {padding-bottom: 1.6rem !important;}
.pb20 {padding-bottom: 2rem !important;}
.pb24 {padding-bottom: 2.4rem !important;}
.pb30 {padding-bottom: 3rem !important;}
.pb32 {padding-bottom: 3.2rem !important;}
.pb40 {padding-bottom: 4rem !important;}
.pb48 {padding-bottom: 4.8rem !important;}
.pb50 {padding-bottom: 5rem !important;}
.pb56 {padding-bottom: 5.6rem !important;}
.pb60 {padding-bottom: 6rem !important;}
.pb64 {padding-bottom: 6.4rem !important;}
.pb72 {padding-bottom: 7.2rem !important;}
.pb80 {padding-bottom: 8rem !important;}
.pb100 {padding-bottom: 10rem !important;}
.pb120 {padding-bottom: 12rem !important;}
.pb140 {padding-bottom: 14rem !important;}
.pb160 {padding-bottom: 16rem !important;}
.pb200 {padding-bottom: 20rem !important;}

.pl0 {padding-left: 0 !important;}
.pl4 {padding-left: .4rem !important;}
.pl5 {padding-left: .5rem !important;}
.pl8 {padding-left: .8rem !important;}
.pl10 {padding-left: 1rem !important;}
.pl12 {padding-left: 1.2rem !important;}
.pl14 {padding-left: 1.4rem !important;}
.pl15 {padding-left: 1.5rem !important;}
.pl16 {padding-left: 1.6rem !important;}
.pl20 {padding-left: 2rem !important;}
.pl24 {padding-left: 2.4rem !important;}
.pl30 {padding-left: 3rem !important;}
.pl32 {padding-left: 3.2rem !important;}
.pl40 {padding-left: 4rem !important;}
.pl48 {padding-left: 4.8rem !important;}
.pl50 {padding-left: 5rem !important;}
.pl56 {padding-left: 5.6rem !important;}
.pl60 {padding-left: 6rem !important;}
.pl64 {padding-left: 6.4rem !important;}
.pl72 {padding-left: 7.2rem !important;}
.pl80 {padding-left: 8rem !important;}
.pl100 {padding-left: 10rem !important;}
.pl120 {padding-left: 12rem !important;}
.pl140 {padding-left: 14rem !important;}
.pl160 {padding-left: 16rem !important;}

.pr0 {padding-right: 0 !important;}
.pr4 {padding-right: .4rem !important;}
.pr5 {padding-right: .5rem !important;}
.pr8 {padding-right: .8rem !important;}
.pr10 {padding-right: 1rem !important;}
.pr12 {padding-right: 1.2rem !important;}
.pr14 {padding-right: 1.4rem !important;}
.pr15 {padding-right: 1.5rem !important;}
.pr16 {padding-right: 1.6rem !important;}
.pr20 {padding-right: 2rem !important;}
.pr24 {padding-right: 2.4rem !important;}
.pr30 {padding-right: 3rem !important;}
.pr32 {padding-right: 3.2rem !important;}
.pr34 {padding-right: 3.4rem !important;}
.pr40 {padding-right: 4rem !important;}
.pr48 {padding-right: 4.8rem !important;}
.pr50 {padding-right: 5rem !important;}
.pr56 {padding-right: 5.6rem !important;}
.pr60 {padding-right: 6rem !important;}
.pr64 {padding-right: 6.4rem !important;}
.pr72 {padding-right: 7.2rem !important;}
.pr80 {padding-right: 8rem !important;}
.pr100 {padding-right: 10rem !important;}
.pr120 {padding-right: 12rem !important;}
.pr140 {padding-right: 14rem !important;}
.pr160 {padding-right: 16rem !important;}

/* font-size */
.fs10 {font-size: 1rem !important;}
.fs11 {font-size: 1.1rem !important;}
.fs12 {font-size: 1.2rem !important;}
.fs13 {font-size: 1.3rem !important;}
.fs14 {font-size: 1.4rem !important;}
.fs15 {font-size: 1.5rem !important;}
.fs16 {font-size: 1.6rem !important;}
.fs18 {font-size: 1.8rem !important;}
.fs20 {font-size: 2rem !important;}
.fs24 {font-size: 2.4rem !important;}
.fs32 {font-size: 3.2rem !important;}
.fs40 {font-size: 4rem !important;}
.fs48 {font-size: 4.8rem !important;}
.fs56 {font-size: 5.6rem !important;}
.fs64 {font-size: 6.4rem !important;}
.fs72 {font-size: 7.2rem !important;}
.fs80 {font-size: 8rem !important;}

/* font-weight */
.fw200 {font-weight: 200 !important;}
.fw300 {font-weight: 300 !important;}
.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}

/* line-height */
.lh16 {line-height: 1.6rem !important;}
.lh20 {line-height: 2rem !important;}
.lh22 {line-height: 2.2rem !important;}
.lh24 {line-height: 2.4rem !important;}
.lh28 {line-height: 2.8rem !important;}
.lh30 {line-height: 3rem !important;}
.lh32 {line-height: 3.2rem !important;}
.lh34 {line-height: 3.4rem !important;}
.lh40 {line-height: 4rem !important;}
.lh48 {line-height: 4.8rem !important;}

/* float */
.f-clear:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}
* html .f-clear {height: 1%;}
.f-clear {display: block; min-height: 1%;}
.clear {clear: both;}
.f-left {float: left;}
.f-right {float: right;}

/* overflow */
.scroll {overflow: scroll;}
.scroll-x {overflow-x: scroll;}
.scroll-y {overflow-y: scroll;}
.scroll-auto {overflow: auto;}

/* align */
.t-left {text-align: left !important;}
.t-center {text-align: center !important;}
.t-right {text-align: right !important;}
.v-top {vertical-align: top !important;}
.v-middle {vertical-align: middle !important;}
.v-bottom {vertical-align: bottom !important;}
.indent {text-indent: -1.1em; padding-left: 1.1em;}

/* border-no */
.nobo {border: none !important;}
.nobo-t {border-top: none !important;}
.nobo-b {border-bottom: none !important;}
.nobo-l {border-left: none !important;}
.nobo-r {border-right: none !important;}

/* show & hide */
.show {display: block !important;}
.hide {display: none !important;}

/* display */
.inbl {display: inline-block !important;}
.inline {display: inline !important;}
.block {display: block !important;}

/* flex */
.flex {display: flex !important;}
.flex-col {display: flex !important; flex-direction: column !important;}
.sb {justify-content: space-between !important;}
.ac {align-items: center !important;}
.as {align-items: start !important;}
.ae {align-items: end !important;}
.jc {justify-content: center !important;}
.js {justify-content: start !important;}
.je {justify-content: end !important;}
.flex-wrap {flex-wrap: wrap !important;}
.flex-nowrap {flex-wrap: nowrap !important;}
.flex1 {flex: 1 !important;}
.flex0 {flex: 0 0 auto !important;}
.gap0 {gap: 0 !important;}
.gap4 {gap: .4rem !important;}
.gap8 {gap: .8rem !important;}
.gap12 {gap: 1.2rem !important;}
.gap16 {gap: 1.6rem !important;}
.gap24 {gap: 2.4rem !important;}
.gap28 {gap: 2.8rem !important;}
.gap32 {gap: 3.2rem !important;}
.gap40 {gap: 4rem !important;}
.gap48 {gap: 4.8rem !important;}
.gap56 {gap: 5.6rem !important;}
.gap64 {gap: 6.4rem !important;}
.gap72 {gap: 7.2rem !important;}
.gap80 {gap: 8rem !important;}

/* scrollbar */
.scrollbar::-webkit-scrollbar {width: .8rem;}
.scrollbar::-webkit-scrollbar-thumb {background: #999; border-radius: .4rem;}
.scrollbar::-webkit-scrollbar-track {background: #f1f3f5; border-radius: .4rem;}

/* text ellipsis */
.text-el1 {text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: 100px; overflow: hidden;}
.text-el2 {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.4em; height: 1.8em; -webkit-line-clamp: 2;}
.text-el3 {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.4em; height: 4.2em; -webkit-line-clamp: 3;}

/* form */
input[type=text], input[type=password], input[type=file], input[type=email], input[type=number], input[type=tel], input[type=search], input[type=url] {border-radius: .8rem; border: .1rem solid var(--border); background: var(--white); padding: 1.6rem; line-height: 2.2rem; font-size: 1.6rem; font-weight: 600; box-sizing: border-box; vertical-align: middle; color: var(--text);}
input[type=text]:disabled, input[type=password]:disabled, input[type=file]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=tel]:disabled, input[type=search]:disabled, input[type=url]:disabled {background: var(--gray-100); color: var(--gray-400);}
input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=url]:focus {outline: 1px solid #222;}
input[type=text].lg, input[type=password].lg, input[type=file].lg, input[type=email].lg, input[type=number].lg, input[type=tel].lg, input[type=search].lg, input[type=url].lg {font-size: 1.8rem; line-height: 2.2rem; padding: 2rem;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type="number"] {-moz-appearance: textfield;}
.checkbox {display: inline-flex; padding: .8rem 0; align-items: center;}
.checkbox input {position: absolute; opacity: 0; pointer-events: none;}
.checkbox span {display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; color: var(--gray-700);}
.checkbox span::before {content: ''; display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/ic_checkbox_off.svg') no-repeat center / 100% 100%; transition: all 0.2s ease; flex: 0 0 2.2rem;}
.checkbox input:checked + span::before {background-image: url('../images/ic_checkbox_on.svg');}
.radio {line-height: 2.4rem; display: inline-flex;}
.radio input {position: absolute; opacity: 0; pointer-events: none;}
.radio span {display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; color: var(--gray-700); line-height: 2.4rem; word-break: keep-all;}
.radio span::before {content: ''; display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/ic_radio_off.svg') no-repeat center / 100% 100%; transition: all 0.2s ease; flex: 0 0 2.2rem;}
.radio input:checked + span::before {background-image: url('../images/ic_radio_on.svg');}
textarea {border-radius: .8rem; border: 1px solid var(--border); background: var(--white); min-height: 10rem; padding: 2rem; box-sizing: border-box; resize: none; font-size: 1.6rem; line-height: 2.4rem; text-align: left; color: var(--text); width: 100%;}
textarea:focus {border: 1px solid var(--black);}
textarea:disabled {background: var(--gray-100); color: var(--gray-400);}

/* button */
button[type=button], input[type=submit] input[type=button] {cursor: pointer; border: 0; transition: all .2s;}
button[type=button]:disabled, input[type=submit]:disabled, input[type=button]:disabled {cursor: default; pointer-events: none;}
.btn, .btn.primary {display: inline-flex; padding: .8rem 1.3rem; justify-content: center; align-items: center; gap: .8rem; border-radius: .8rem; border: .1rem solid var(--primary-500); background: var(--primary-500); color: var(--white); font-size: 1.4rem; text-align: center; font-weight: 600; line-height: 2.2rem; font-style: normal; white-space: nowrap; vertical-align: middle; height: 4rem; min-width: 8rem;}
.btn:hover, .btn.primary:hover {border-color: var(--primary-600); background: var(--primary-600); color: var(--white);}
.btn:focus, .btn.primary:focus {border-color: var(--primary-500); background: var(--primary-500); color: var(--white);}
.btn:disabled, .btn.primary:disabled {color: rgba(255,255,255,.7); opacity: .5;}
.btn.ssm {font-size: 1.2rem; font-weight: 500; line-height: 2rem; padding: .4rem .8rem; height: 2.8rem; min-width: 5.6rem;}
.btn.sm {font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; padding: .7rem .9rem; height: 3.2rem;}
.btn.md {font-size: 1.4rem; font-weight: 600; line-height: 2.2rem; padding: .8rem 1.3rem; height: 4rem;}
.btn.xl48 {font-size: 1.6rem; font-weight: 600; line-height: 2rem; padding: 1.3rem 1.7rem; height: 4.8rem;}
.btn.xl56 {font-size: 1.6rem; font-weight: 600; line-height: 2rem; padding: 1.7rem 2.1rem; height: 5.6rem; min-width: 12rem;}
.btn.xl64 {font-size: 1.8rem; font-weight: 600; line-height: 2.2rem; padding: 2rem 2.3rem; height: 6.4rem;}
.btn.xl72 {font-size: 2rem; font-weight: 600; line-height: 2.4rem; padding: 2.3rem 2.7rem; height: 7.2rem;}
.btn.xl80 {font-size: 2rem; font-weight: 600; line-height: 2.4rem; padding: 2.7rem 3.5rem; height: 8rem;}
.btn.black {border: 1px solid var(--black); background: var(--black); color: var(--white) !important;}
.btn.black:hover {border-color: #000; background: #000;}
.btn.black:focus {border-color: var(--black); background: var(--black);}
.btn.black:disabled {border-color: var(--gray-300); background: var(--gray-300); color: var(--gray-400);}
.btn.gray {border: 1px solid var(--gray-400); background: var(--gray-400); color: var(--black);}
.btn.gray:hover {border-color: var(--gray-500); background: var(--gray-500); color: var(--black);}
.btn.gray:focus {border-color: var(--gray-500); background: var(--gray-500); color: var(--black);}
.btn.gray:disabled {border-color: var(--gray-300); background: var(--gray-300); color: var(--gray-400);}
.btn.outline {border: 1px solid var(--border); background: var(--white); color: var(--black);}
.btn.outline:hover {border-color: var(--black); color: var(--black);}
.btn.outline:focus {border-color: var(--black); background: var(--black); color: var(--white);}
.btn.outline:disabled {border-color: var(--gray-300); background: var(--gray-300); color: var(--gray-400);}

.btn.round {border-radius: 8rem;}
.btn .ic {width: 1.4rem; height: 1.4rem;}
.btn-go {display: flex; gap: .4rem; align-items: center; font-size: 1.4rem;}
.btn-go::after {content: ''; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; background: url(../images/ic_arrow_right3.svg) no-repeat center / contain;}
.btn-go.black::after {background: url(../images/ic_arrow_right2_w.svg);}
.btn-txt {color: var(--text); text-decoration: underline; white-space: nowrap; padding: 0 1.2rem; line-height: 2.4rem;}
.btn-txt2 {color: var(--white); position: relative;}
.btn-txt2::after {content: ''; display: block; width: 100%; height: .1rem; background: var(--white); position: absolute; bottom: -.4rem; left: 0;}

.btn-txt-go {color: var(--text); text-decoration: underline; white-space: nowrap; padding: 0 .8rem; line-height: 1.8rem; background: transparent; display: flex; gap: .8rem; align-items: center; font-size: 1.4rem; font-weight: 500;}
.btn-txt-go::after {content: ''; display: block; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; background: url(../images/ic_arrow_right3.svg) no-repeat center / contain;}

.btn-more {border-radius: .8rem; background: var(--white); box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); padding: 1rem 0; display: flex; gap: 1.6rem; align-items: center; font-size: 1.6rem;}
.btn-more::after {content: ''; display: block; width: 2rem; height: 2rem; background: url(../images/ic_arrow_down5.svg) no-repeat center / contain;}
.btn-more.active::after {transform: rotate(180deg);}

/* popup */
.pop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.5); z-index: 100; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; padding: 4rem;}
.pop.show {visibility: visible; opacity: 1; pointer-events: all; display: flex !important;}
.pop-container {display: flex; width: 100%; max-width: 90rem; padding: 4rem 3rem; flex-direction: column; justify-content: center; align-items: center; border-radius: .8rem; background: #fff; max-height: 100%; position: relative;}
.pop .tit {font-size: 3.2rem; font-weight: 700; line-height: 3.4rem; margin-bottom: 3rem;}
.pop h3 {font-size: 2rem; margin-top: 4rem;}
.pop p, .pop ul, .pop ol {text-align: left; font-size: 1.8rem; font-weight: 400; line-height: 1.6;}
.pop li {margin-bottom: 1rem; line-height: 1.35;}
.pop ul, .pop ol {margin-bottom: 1rem; padding: 1rem;}
.pop p.t {margin-top: 1rem;}
.pop .pop-cont {overflow: auto; height: calc( 100% - 10rem ); padding: 0 2rem;}
.pop .pop-cont::-webkit-scrollbar {width: .6rem;}
.pop .pop-cont::-webkit-scrollbar-thumb {background: rgba(0,0,0,0); border-radius: .3rem; transition: background .3s;}
.pop-container:hover .pop-cont::-webkit-scrollbar-thumb {background: rgba(0,0,0,.15); }
.pop .pop-cont::-webkit-scrollbar-track {background: transparent; border-radius: .2.5rem;}
.pop .btn-wrap {margin-top: 4rem; display: flex; gap: .8rem; width: 100%; justify-content: center;}
.pop .btn-wrap .btn {max-width: 24rem; width: 100%;}
.pop .btn-close {width: 4.8rem; height: 4.8rem; background: url(../images/ic_pop_close.svg) no-repeat center / contain; position: absolute; top: 2rem; right: 2rem; cursor: pointer; overflow: hidden; text-indent: -9999px;}

/* tooltip */
.tooltip {position: absolute; background-color: var(--black); color: #fff; padding: .8rem 1.6rem; border-radius: .8rem; font-size: 1.4rem; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s ease; font-weight: 400; text-align: center; transition: all .3s ease; width: max-content; max-width: 36.2rem; left: 50%; bottom: calc(100% + 1rem); z-index: 1;}
.btn-help:hover ~ .tooltip {opacity: 1;}
.tooltip::after {content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: .8rem .8rem 0 .8rem; border-color: var(--black) transparent transparent transparent; position: absolute; left: 50%; top: 100%; transform: translate(-50%);}
.tooltip.right {left: auto; right: -1rem; transform: none;}
.tooltip.right::after {left: auto; right: .6rem;}
.tooltip.left {left: -1rem; transform: none;}
.tooltip.left::after {left: 2.2rem;}

/* toast */
.toast {position: absolute; background-color: var(--black); color: #fff; padding: 1.2rem 1.6rem; border-radius: .8rem; font-size: 1.4rem; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s ease; font-weight: 400; text-align: center; transition: all .3s ease; width: max-content; max-width: 36.2rem; left: 50%; bottom: calc(100% + 1rem); z-index: 1;}
.toast.show {opacity: 1;}

/* list */
.list-dot > li {color: var(--text); font-size: 1.4rem; font-weight: 400; line-height: 1.5; position: relative; padding-left: 2rem; word-break: keep-all; margin-bottom: .4rem;}
.list-dot > li::before {content: ''; width: .3rem; height: .3rem; border-radius: .2rem; display: inline-block; background: var(--text); position: absolute; top: 1rem; left: .8rem;}
.list-bar > li {color: var(--text); font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; position: relative; padding-left: 2rem; word-break: keep-all;}
.list-bar > li::before {content: '-'; width: .4rem; height: .4rem; border-radius: .2rem; display: inline-block; position: absolute; top: 0; left: .8rem;}
.list-star > li {color: var(--text); font-size: 1.2rem; font-weight: 400; line-height: 2rem; position: relative; padding-left: 1.2rem; word-break: keep-all;}
.list-star > li::before {content: '*'; display: inline-block; position: absolute; top: 0; left: .4rem;}
.list-num > li {list-style: decimal; margin-left: 1.6rem; padding: .4rem 0;}
.list-num > li:first-child {padding-top: 0;}
.list-num > li:last-child {padding-bottom: 0;}

/* table */
.tbl-basic {border-collapse: collapse; table-layout: auto; border: 0; padding: 0; border-top: .2rem solid var(--gray-600); width: 100%; background:var(--white); margin-bottom: 5.6rem;}
.tbl-basic th {background: var(--bg-alt); border-bottom: 1px solid var(--border); border-right: 1px solid #eee; font-weight: 600; vertical-align: middle; padding: 1.6rem .8rem; text-align: center; font-size: 1.6rem; line-height: 2rem;}
.tbl-basic td {background: var(--white); border-bottom: 1px solid var(--border); border-right: 1px solid #eee; font-weight: 400; vertical-align: middle;  padding: 1.6rem .8rem; text-align: center; font-size: 1.6rem; line-height: 2.4rem;}
.tbl-basic.min th, .tbl-basic.min td {font-size: 1.4rem; padding: 1.6rem .4rem;}
.tbl-basic th:last-child, .tbl-basic td:last-child {border-right: none;}
.tbl-basic th[scope="row"] {background: var(--bg-alt);}
.tbl-basic td:last-child[rowspan] {border-left: 1px solid #eee;}
.tbl-basic.nobo th, .tbl-basic.nobo td {border-right: none;}
.ic-file {width: 2rem; height: 2rem; vertical-align: middle;}
.tbl-basic.t-left th, .tbl-basic.t-left td {text-align: left; padding-left: 1.6rem;}
.tbl-basic em {color: #b60f0f; font-weight: bold; margin-right: .4rem;}

/* 모바일 전용 & PC 전용 */
.pc {display: block !important;}
.pc.flex {display: flex !important;}
.pc.flex-col {display: flex !important; flex-direction: column !important;}
.mo, .mo.flex, .mo.flex-col {display: none !important;}
@media screen and (max-width: 768px) {
    .mo {display: block !important;}
    .mo.flex {display: flex !important;}
    .mo.flex-col {display: flex !important; flex-direction: column !important;}
    .pc, .pc.flex, .pc.flex-col {display: none !important;}
}

/* 공통 */
body {opacity: 0; background: #000; color: #fff;}
body.fixed {overflow: hidden;}
.wrap {display: flex; flex-direction: column; justify-content: center;}
.inner {width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 2rem;}
.content-wrap {background: #000;}
.underline {text-decoration: underline;}
.video-wrap {position: relative; width: 100%; padding-top: 56.25%;}
.video-wrap iframe,
.video-wrap > video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* 바로가기 */
.skip {position: absolute;}
.skip a {display: block; position: fixed; left: 0; top: -9999px; overflow: hidden; width: 100%; background: black; color: #fff; font-size: 1.2em; font-weight: bold; text-align: center;}
.skip a:focus {position: fixed; top: 0; padding: 1.1em 0; z-index: 99999; outline: none !important;}

/* 헤더 */
.header {position: fixed; top: 0; left: 0; width: 100%; z-index: 2; padding: 6rem 0; }
.header .inner {display: flex; justify-content: space-between; align-items: center; height: 7rem; border-radius: 3.5rem; padding: 0 4.8rem; background: rgba(208,208,208,0); transition: all .3s ease;}
.header h1 {flex: 0 0 110px;}
.header h1 a {display: inline-block;}
.header h1 a img {width: 100%;}
.header h1 a:hover img, .sub .header h1 a img {visibility: hidden;}
.header h1 a:hover, .sub .header h1 a {background: url(../images/logo_yellow.svg) no-repeat center / 100% 100%;}
.nav {display: flex; gap: 1rem; transition: all .3s;}
.nav li {}
.nav li a {font-size: 1.8rem; color: var(--white); font-weight: 500; padding: 1rem 2.2rem; border-radius: 2rem; white-space: nowrap; transition: all .3s;}
.nav li a:hover {color: #FFFB00;}
.nav li a.current {background: #FFFB00; color: #000;}
.header.fixed .inner {background: rgba(208,208,208,.66); backdrop-filter: blur(1rem); width: 750px; padding-right: 2rem;}
.header.fixed h1 a {background: url(../images/logo_black.svg) no-repeat center / 100% 100%;}
.header.fixed h1 a img {visibility: hidden;}
.header.fixed h1 a:hover {background: url(../images/logo_yellow.svg) no-repeat center / 100% 100%;}
.header.fixed .nav {gap: .2rem;}
.header.fixed .nav li a {color: #000; padding: 1rem 2.2rem; border-radius: 2rem; white-space: nowrap;}
.header.fixed .nav:hover li a.current {background: none;}
.header.fixed .nav li a:hover,
.header.fixed .nav li a.current, .header.fixed .nav:hover li a.current:hover {background: #FFFB00; color: #000;}
.btn-menu {width: 2rem; height: 2rem; position: fixed; top: 3rem; right: 2rem; background: url(../images/ic_nav.svg) no-repeat center / 100% 100%; display: none; z-index: 2; overflow: hidden; text-indent: -999px;}
body.bg-w .header h1 a, .contact .header h1 a {background: url(../images/logo_black.svg) no-repeat center / 100% 100%;}
body.bg-w .header h1 a img, .contact .header h1 a img {visibility: hidden;}
body.bg-w .nav li a, .contact .nav li a {color: #000;}
body.bg-w .nav li a:hover, .contact .nav li a:hover {color: #FFA900;}
body.bg-w .nav li a.current:hover, .contact .nav li a.current:hover {color: #000;}

.nav::-webkit-scrollbar {width: .4rem;}
.nav::-webkit-scrollbar-track {background: transparent;}
.nav::-webkit-scrollbar-thumb {background: rgba(255,255,255,.5);}
.nav::-webkit-scrollbar-thumb:hover {background: rgba(255,255,255,.8);}

/* 푸터 */
.footer {background: #F2F2F2; position: relative;}
.footer .inner {max-width: 1580px; margin: 0 auto; padding: 20rem 2.5rem 3rem;}
.footer .btn-top {font-size: 1.8rem; position: absolute; top: 11.8rem; left: 11rem; background: transparent; color: #000;}
.footer .btn-top:hover {color: #FFA900}
.footer .btn-top::before {content: ''; display: inline-block; width: 1.8rem; height: 1.8rem; background: url(../images/ic_top.svg) no-repeat center / contain; margin-right: 1.2rem; margin-top: -.4rem; vertical-align: middle;}
.footer .btn-top:hover::before {background-image: url(../images/ic_top_hover.svg)}
.footer .contact-list {text-align: right; display: flex; flex-direction: column; gap: 2rem; margin-bottom: 3.2rem;}
.footer .contact-list li {font-size: 2rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; color: #6c6c6c;}
.footer .txt1 {text-align: right; color: #000; font-weight: 500; font-size: 3rem; line-height: 1.35; margin-bottom: 12rem;}
.footer .txt2 {color: #FFE100; font-size: 12.5rem; font-weight: 900; letter-spacing: -0.038em; font-family: "GmarketSans";}
.footer .txt2 img {width: 100%;}

/* 퀵메뉴 */
.quick-wrap {width: 100%; max-width: 1750px; position: fixed; bottom: 13.5rem; left: 50%; transform: translateX(-50%); z-index: 10; text-align: right;}
.quick-wrap .btn-info {width: 8rem; height: 8rem; background: url(../images/ic_quick.svg) no-repeat center / contain; border-radius: 50%; font-size: 1px; cursor: pointer; text-indent: -9999px; overflow: hidden; margin-right: 2rem;}
.quick-wrap .info-modal {width: 31rem; background: #fff; border-radius: 2rem; padding: 7.5rem 3.8rem 3.8rem; position: absolute; bottom: 9rem; right: 2.4rem; box-shadow: 0 .6rem .8rem 0 rgba(0, 0, 0, 0.08); display: none; opacity: 0; translate: 0 1rem; transition: opacity .3s ease, translate .3s ease, display .3s allow-discrete;}
.quick-wrap .info-modal.show {display: block; opacity: 1; translate: 0 0;}
@starting-style {
    .quick-wrap .info-modal.show {opacity: 0; translate: 0 1rem;}
}
.quick-wrap .info-modal .btn-close {width: 4.8rem; height: 4.8rem; background: url(../images/ic_pop_close.svg) no-repeat center / contain; position: absolute; top: 2rem; right: 2rem; cursor: pointer; overflow: hidden; text-indent: -9999px;}
.quick-wrap .info-modal h3 {font-size: 2.4rem; font-weight: 700; text-align: center; line-height: 1.35; letter-spacing: -0.02em; color: #000; margin-bottom: 2rem; text-align: left;}
.quick-wrap .info-modal a {display: block; font-size: 1.8rem; font-weight: 700; line-height: calc( 5.4rem - .2rem ); letter-spacing: -0.02em; color: #000; margin-bottom: 1.4rem; text-align: left; height: 5.4rem; border-radius: 2.7rem; border: 1px solid #000; padding: 0 4rem; width: fit-content;}
.quick-wrap .info-modal a:hover {background: #eef7ff;}
.quick-wrap .info-modal a:nth-last-of-type(1) {margin-bottom: 0;}

/* 메인 */
.main {background: #000;}
.main-group1 {position: relative; width: 100%; height: 100vh; max-height: 222vw;  z-index: 1; padding-top: 240px; background: #000;}
.main-group1 .inner {max-width: 1680px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin: 0 auto;}
.main-group1 .main-tit {margin: auto;}
.main-group1 .main-tit .txt {text-align: center; font-family: "GmarketSans"; font-size: 7.4rem; font-style: normal; font-weight: 600; line-height: 1.4; letter-spacing: -0.1rem; color: #fff;}
.main-group1 .main-tit .txt1 {color: #FFE100;}
.main-group1 .main-tit br {display: none;}
.main-group1 .ic-muto {width: 17.4rem; margin: auto auto 7rem; min-width: 69px;}
.main-group1 video, 
.main-group2 video, 
.main-group2 img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1;}
.main-group1 video {opacity: .25;}
.main-group2 {height: 100vh; padding: 15rem 0; position: relative; display: flex; align-items: center; justify-content: center; background: url(../images/main_bg2.jpg) no-repeat center bottom / cover;}
.main-group2 .inner {max-width: 1400px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; position: relative;}
.main-group2 p {color: #fff; font-weight: 400; font-size: 2.6rem; position: absolute; top: 2rem; left: 2rem; text-align: left; line-height: 1.35;}
.main-group2 p strong {color: #FFE100; font-weight: 400;}
.main-group2 .hyphen {}
.main-group2 ul {text-align: center; overflow: hidden; height: auto; margin: auto; padding: 0 4rem;}
.main-group2 ul::-webkit-scrollbar {width: .4rem; display: none;}
.main-group2 ul::-webkit-scrollbar-track {background: transparent;}
.main-group2 ul::-webkit-scrollbar-thumb {background: rgba(255,255,255,.2);}
.main-group2 ul::-webkit-scrollbar-thumb:hover {background: rgba(255,255,255,.4);}
.main-group2 ul li {color: rgba(207, 207, 207, 0.30); font-family: "GmarketSans"; font-size: 7.4rem; font-weight: 400; line-height: 1.7; letter-spacing: -0.02em; transition: color .3s;}
.main-group2 ul li.current {color: #fff;}
.main-group3 {position: relative; height: 50vw; max-height: 96rem; overflow: hidden; background: #FFB600;}
.main-group3 .inner {max-width: 1580px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; margin: 0 auto; position: relative; z-index: 1;}
.main-group3 .main-bg3 {width: 100%; height: 100vw; position: absolute; top: 0; left: 0; overflow: hidden; max-width: 1920px; max-height: 1920px;}
.main-group3 .main-bg3 img {width: 100%; height: 100%; object-fit: cover;}
.main-group3 .txt {width: 31.5%; margin: auto 0; text-align: left;}
.main-group3 .txt .txt1 {width: 28.6vw; max-width: 55rem;}
.main-group3 .txt p {margin: 4rem 0 0 2vw; font-size: 1.8rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: #6B4420; word-break: keep-all;}

/* 서브 공통 */
.sub-head {height: 100vh; min-height: 90rem; background: url() no-repeat center / cover;}
.sub-head .inner {max-width: 1280px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; position: relative;}
.sub-head h2 {font-size: 7.4rem; color: #fff; line-height: 1.35;}
.sub-head h2 br {}
.btn-explore {font-size: 1.8rem; position: absolute; bottom: 2.6rem; left: 2rem; background: transparent; color: #fff; display: inline-block; cursor: pointer;}
.btn-explore:hover {color: #FFE100}
.btn-explore::before {content: ''; display: inline-block; width: 1.8rem; height: 1.8rem; background: url(../images/ic_top.svg) no-repeat center / contain; margin-right: 1.2rem; margin-top: -.4rem; vertical-align: middle; transform: rotate(180deg); filter: invert(1);}
.btn-explore:hover::before {background-image: url(../images/ic_top_hover.svg); filter: brightness(1.2) hue-rotate(8deg);}
.sub-content {padding: 20rem 0; text-align: center; background: #fff; color: #000;}
.sub-content .inner {max-width: 1320px;}
.sub-content .txt1 {font-size: 5rem; line-height: 1.25; font-weight: 700; margin-bottom: 4.8rem; text-align: left;}
.sub-content .txt1 .highlight {position: relative;}
.sub-content .txt1 .highlight::after {content: ''; width: 1px; height: .5em; left: 0; position: absolute; bottom: 0; background: #FFFB00; mix-blend-mode: multiply; transition: width .5s ease;}
.sub-content .txt1 .highlight.active::after {width: 100%;}
.sub-content .txt2 {font-size: 5rem; line-height: 1.25; font-weight: 700; margin-bottom: 7.3rem; text-align: center;}
.sub-content .txt3 {color: #FFBF00; text-align: center; font-size: 5rem; line-height: 1.25; font-weight: 700;}
.stit-orange {color: #FFBF00; text-align: left; font-size: 2.8rem; font-weight: 600; margin-bottom: .25em;}
.stit-dot {font-size: 2.6rem; color: #000; font-weight: 600; letter-spacing: -.02em; position: relative;}
.stit-dot::before {width: 1.3rem; height: 1.3rem; border-radius: 1.3rem; content: ''; display: inline-block; position: absolute; top: -1.8rem; left: 0; background: #FFE100;}
.mb200 {margin-bottom: 20rem !important;}
.mb180 {margin-bottom: 18rem !important;}
.mb160 {margin-bottom: 16rem !important;}
.mt-5p {margin-top: -5% !important;}
.mt-10p {margin-top: -10% !important;}
.mt-15p {margin-top: -15% !important;}
.mt-20p {margin-top: -20% !important;}
.mt-25p {margin-top: -25% !important;}
.mt-30p {margin-top: -30% !important;}
.mt-35p {margin-top: -35% !important;}
.mt-40p {margin-top: -40% !important;}

/* Performance */
.performance .sub-head {background-image: url(../images/head_performance.jpg);}
.list-wrap {display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 14rem; text-align: left;}
.list-item {padding: 4.6rem 2.8rem 2.8rem; border: 1px solid #ddd; border-radius: .4rem; flex: 0 1 calc( 25% - .9rem ); box-sizing: border-box; position: relative;}
.list-item::before {width: 1.25rem; height: 1.25rem; border-radius: 1.25rem; content: ''; display: inline-block; position: absolute; top: 2.2rem; right: 2rem; background: #FFE100;}
.list-item h4 {font-size: 2.6rem; line-height: 1.4; letter-spacing: -.02em; margin-bottom: 1rem;}
.list-item h4 span {display: block; font-size: 2rem; font-weight: 500;}
.list-item p {color: #6C6C6C; font-size: 1.6rem; letter-spacing: -.02em;}
.performance .illust1 {width: 100%; max-width: 960px; margin: 0 auto; margin-bottom: 18rem;}
.performance .illust2 {width: 100%; max-width: 960px; margin: 0 auto; margin-bottom: 4rem;}
.performance .illust3 {width: 100%; max-width: 1120px; margin: 0 auto; margin-bottom: 4rem;}

/* Projects */
.projects .sub-head {background-image: url(../images/head_projects.jpg);}
.projects .sub-head h2 {font-size: 6.4rem; letter-spacing: -.02em;}
.project-list {width: 100%; display: flex; flex-direction: column; gap: 0;}
.project-list li {max-width: 61rem; width: calc( 50% - 3rem ); text-align: left; margin-right: 3rem; flex: 0 1 61rem; letter-spacing: -.02em; position: relative; flex: 0; border-radius: 1.8rem;}
.project-list li div {position: absolute; padding: 9rem 5.3rem 5rem; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.project-list li:nth-child(even) {margin-left: auto; margin-right: 0;}
.project-list li:nth-child(n+2) {margin-top: -20%;}
.project-list li img {width: 100%; transition: all .3s ease; border-radius: 2.4rem;}
.project-list li:hover img {transform: scale(1.05); box-shadow: 1em 2em 2em rgba(0,0,0,.15);}
.project-list li h4 {font-size: 4.4rem; color: #fff; margin-bottom: .25em; position: relative; line-height: 1.25;}
.project-list li h4::before {width: 1.3rem; height: 1.3rem; border-radius: 1.3rem; content: ''; display: inline-block; position: absolute; top: -1.4rem; left: 0; background: #FFE100;}
.project-list li p {font-size: 1.3rem; color: #fff; letter-spacing: 0; font-weight: 300;}
.project-list li.type2 div {position: static; height: auto; padding: 3.4rem 0 0;}
.project-list li.type2 h4 {font-size: 2.6rem; margin-bottom: .25em; margin-top: 2rem; color: #000;}
.project-list li.type2 h4::before {top: -2rem;}
.project-list li.type2 p {color: #6c6c6c;}
.project-list li.type2 + li {margin-top: -18%;}

/* Contact us */
.contact {background: #fff; color: #000;}
.contact .content-wrap {background: #fff;}
.contact .sub-head h2 {color: #000;}
.contact .sub-head {height: auto; padding-top: 29.4rem; min-height: auto; margin-bottom: -6%;}
.contact .sub-head ~ .sub-content {padding-top: 0; text-align: left;}
.contact-info {display: flex; justify-content: flex-end; align-items: center;}
.contact-info .contact-list {font-size: 2rem; text-align: left; margin-bottom: 10rem;}
.contact-info .contact-list li {color: #6c6c6c; line-height: 1.35; margin-bottom: 1em;}
.contact-info .contact-list li:nth-child(2) {font-weight: 700; color: #000;}
.contact-info .map {max-width: 63rem; width: 70%; margin-bottom: 20rem;}

.btn-submit {height: 8rem; min-width: 21.4rem; padding: 0 6rem; font-size: 3.2rem; background: #000; border: none; border-radius: 4rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; line-height: 1; cursor: pointer;}
.link-underline {text-decoration: underline; color: #FFBF00;}
.inp-wrap {display: flex; flex-wrap: wrap; gap: 2rem 8rem;}
.inp-item {border-bottom: 1px solid #8D8D8D; position: relative; flex: 0 1 calc( 50% - 4rem );}
.inp-item .stit-dot {display: block; margin-bottom: .5rem;}
.inp-item input {border: none; width: 100%; border-radius: .4rem; padding: 1em .5em;}
.inp-item input::placeholder {color: #8D8D8D;}
.agree {margin: 8rem 0 14rem; font-size: 2.2rem;}

/* About */
.about .sub-head {background-image: url(../images/head_about.jpg);}
.about .sub-head h2 {margin-bottom: 2rem; word-break: keep-all;}
.about .sub-head p {font-size: 3rem; font-weight: 400; letter-spacing: 0; line-height: 1.3;}
.about .sub-content .txt1 {margin-bottom: 0;}
.about .sub-content .txt4 {text-align: left; font-size: 2.6rem; margin-bottom: 3.6rem;}
.about .illust1 {width: 100%; max-width: 1560px; margin: 0 auto; margin-bottom: 18rem;}
.about .illust2 {width: 100%; max-width: 665px; margin: 0 auto; margin-bottom: 36rem;}
.about .illust3 {width: 100%; max-width: 1280px; margin: 0 auto; margin-top: 13rem; margin-bottom: 0;}
.list-wrap2 {display: flex; flex-direction: column; text-align: left; gap: 5rem; margin-bottom: 12rem;}
.list-wrap2 div {padding: 6rem 0; display: flex; border-top: 1px solid #8d8d8d;}
.list-wrap2 .stit-dot {flex: 1 1 40%; margin-left: 3rem; font-size: 2.9rem;}
.list-wrap2 .stit-dot::before {top: 1.2rem; left: -3rem;}
.list-wrap2 p {flex: 1 1 60%; font-size: 2.6rem; word-break: keep-all;}
.num-wrap {display: flex; justify-content: space-around; align-items: flex-start; width: 100%; border-top: 1px solid #8d8d8d; padding: 6.8rem 0 12rem;}
.num-wrap li {display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 1; flex: 1;}
.num-wrap li strong {font-size: 7rem; margin-bottom: -.1em;}
.num-wrap li div {height: 9.8rem; width: 25rem;}
.num-wrap li div strong + span {font-size: 3rem; display: inline-block; margin-top: -2.2em; margin-left: .2rem; vertical-align: middle; color: #000; font-weight: 600;}
.num-wrap li span {display: block; color: #A3A3A3; font-size: 2.8rem;}
.history-wrap {display: flex; flex-direction: column; position: relative;}
.history-wrap > li {line-height: 1.1; text-align: left; width: 43%; position: relative; z-index: 1;}
.history-wrap > li:nth-of-type(n+2) {margin-top: -10rem;}
.history-wrap > li:nth-child(odd) {margin-left: auto;}
.history-wrap > li:nth-child(1)::before {content: ''; width: 1.7rem; height: 1.7rem; border-radius: 1.7rem; background: #FFE100; position: absolute; top: 0; left: -16.25%; transform: translateX(-50%);}
.history-wrap > li:nth-child(3)::before {content: ''; width: 1.7rem; height: 1.7rem; border-radius: 1.7rem; background: #FFE100; position: absolute; top: 0; left: -16.25%; transform: translateX(-50%);}
.history-wrap > li:nth-child(3) {padding-bottom: 40rem;}
.history-wrap > li:last-child {margin: 0 auto; background: #fff; padding-bottom: 10rem; padding-top: 6rem;}
.history-wrap > li:last-child::before {content: ''; width: 1.7rem; height: 1.7rem; border-radius: 1.7rem; background: #FFE100; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.history-wrap > li strong {font-size: 20rem; display: block; letter-spacing: -.04em;}
.history-wrap > li span {font-size: 2.8rem; margin-bottom: 2rem; display: block; font-weight: 600;}
.history-wrap > li ul {display: flex; flex-direction: column; gap: .5rem;}
.history-wrap > li ul li {color: #4D4D4D; font-size: 2.6rem; line-height: 1.4; font-weight: 300;}
.history-wrap::before {content: ''; display: block; width: 1px; height: 100%; background: #000; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.banner {background: url(../images/about4.jpg) no-repeat center / cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 6rem; text-align: left; font-weight: 600; line-height: 1.3; padding: 1.7em 2rem;}
.banner p {max-width: 1320px; width: 100%;}


/* responsive */
@media screen and (max-width: 1900px) {
    .footer .txt2 {font-size: calc(100vw / 15.5); padding-right: 9rem;}
    .quick-wrap {bottom: 6.5vw; width: 100%; max-width: 1580px;}
}

@media screen and (max-width: 1700px) {
    .main-group1 .main-tit .txt {font-size: 4.3vw;}
    .quick-wrap {bottom: 6.5vw; right: 4%;}
}

@media screen and (max-width: 1600px) {
    .quick-wrap {right: 2.5rem;}
    .main-group3 .txt {width: 36%;}
    .main-group3 .txt p {margin: 2rem 0 0 2vw;}
    .main-group3 .txt .txt1 {width: 32vw;}
    .main-group3 {height: 60vw;}
    .history-wrap > li ul li {font-size: 2.2rem;}
}

@media screen and (max-width: 1400px) {
    .main-group2 ul li {font-size: 4.6vw;}
    .project-list li {width: calc( 50% - 1rem ); margin-right: 1rem;}
    .project-list li div {padding: 4rem 2.4rem 2.4rem;}
    .list-wrap2 p br {display: none;}
    .history-wrap > li strong {font-size: 16rem;}
    .banner {font-size: 4rem;}
}

@media screen and (max-width: 1000px) {
    .main-group1 {padding-top: 0;}
    .main-group1 .main-tit br {display: inline;}
    .main-group1 .main-tit .txt {font-size: 4.8rem;}
    .main-group1 .main-tit .txt .txt1 {margin-bottom: 1em;}
    .main-group1 .ic-muto {width: 18%;}
    .main-group3 .txt p {font-size: 1.6rem;}
    .footer .txt2 {padding-right: 8rem;}
    
    .sub-head h2 {font-size: 5rem;}
    .sub-content {padding: 10rem 0;}
    .sub-content .txt1 {font-size: 4rem;}
    .sub-content .txt1 ~ .txt1 {font-size: 3rem;}
    .list-item {flex: 0 1 calc(50% - 0.6rem);}
    .sub-content .txt2 {font-size: 4rem;}
    .performance .illust1 {width: 96%; margin-bottom: 10rem;}
    .performance .illust2 {width: 96%; margin-bottom: 4rem; margin-top: 1rem;}
    .performance .illust3 {width: 96%; margin-bottom: 1rem; margin-top: 1rem;}
    .sub-content .txt2 {margin-bottom: 4rem;}
    .stit-orange {font-size: 2rem;}
    .sub-content .txt3 {font-size: 3rem;}
    .project-list li h4 {font-size: 3.2rem;}
    .mb200 {margin-bottom: 14rem !important;}
    .mb180 {margin-bottom: 8rem !important;}
    .mb160 {margin-bottom: 10rem !important;}
    .inp-wrap {gap: 2rem 4rem;}
    .agree {font-size: 1.8rem;}
    .contact-info .map {margin-bottom: 10rem;}
    .about .sub-head p {font-size: 2rem;}
    .history-wrap > li strong {font-size: 12rem;}
    .history-wrap > li span {font-size: 2.4rem;}
    .history-wrap > li ul li {font-size: 2rem;}
    .banner {font-size: 3rem;}
    .about .sub-content .txt4 {font-size: 2.2rem;}
    .list-wrap2 p {font-size: 2.2rem;}
}

@media screen and (max-width: 800px) {
    .header {padding: 3rem 2rem; z-index: 11; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);}
    .header .inner {height: auto; border-radius: 0; padding: 0;}
    .header.fixed .inner {background: transparent; backdrop-filter: none; width: 100%; padding-right: 0;}
    .header h1 {flex: 0 0 60px; line-height: 2rem; z-index: 2; position: relative;}
    .btn-menu {display: block;}
    .contact .btn-menu {background-image: url(../images/ic_nav_black.svg)}
    .nav {flex-direction: column; gap: 1rem; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1; padding: 10rem 2rem; background: #FFE100; display: none;}
    .nav li a {padding: .5em 1em; font-size: 2.2rem; display: inline-block; color: #000; border-radius: 2em; transition: all .3s;}
    .nav li a:hover {background: #000;}
    .btn-menu.is-open {background: url(../images/ic_pop_close.svg) no-repeat center / 250% 250%; filter: none;}
    .nav.is-open {display: flex;}
    .nav.is-open li a.current {background: #fff;}
    .nav.is-open li a:hover {background: #fff; color: #000;}
    .header h1.is-open a img {visibility: hidden;}
    .header h1.is-open a {background: url(../images/logo_black.svg) no-repeat center / 100% 100%;}
    .main-group1 .main-tit .txt {font-size: 3.2rem;}
    .main-group2 {height: auto; padding: 6rem 0;}
    .main-group2 .inner {height: auto; gap: 6rem; overflow: visible;}
    .main-group2 p {position: static; font-size: 1.6rem; width: 180px; text-align: center;}
    .main-group2 p br, .main-group2 p .hyphen {display: none;}
    .main-group2 ul {padding: 0;}
    .main-group2 ul li {font-size: 2.4rem;}
    .main-group3 {height: 100vw; background: #FFB600;}
    .main-group3 .main-bg3 img {margin-left: -20%; height: 100%; object-fit: cover;}
    .main-group3 .txt {width: 58%;}
    .main-group3 .txt .txt1 {width: 90%; max-width: 400px; margin-top: 0;}
	.footer .inner {padding: 6rem 2.5rem 3rem;}
    .footer .btn-top {font-size: 1.2rem; top: 2rem; left: 1.5rem;}
    .footer .btn-top::before {width: 1.3rem; height: 1.2rem; margin-right: .8rem; margin-top: -.15rem;}
    .footer .contact-list li {font-size: 1.4rem;}
    .footer .txt1 {font-size: 1.4rem; margin-bottom: calc( 3rem + 6vw ); font-weight: 600;}
    .footer .txt2 {font-size: calc(8.3vw - .6rem); text-align: center; padding: 0;}
    .quick-wrap {bottom: calc( 5rem + 7vw ); right: 2rem;}
    .quick-wrap .btn-info {width: 4.5rem; height: 4.5rem;}
    
    .sub-head {height: 24.8rem; min-height: auto;}
    .sub-head .inner {padding-top: 6%;}
    .sub-head h2 {font-size: 2.6rem;}
    .btn-explore {display: none;}
    .sub-content {padding: 4.7rem 0;}
    .sub-content .txt1 {font-size: 2rem; word-break: keep-all; margin-bottom: 1em;;}
    .sub-content .txt1 ~ .txt1 {font-size: 1.6rem;}
    .list-wrap {flex-direction: column; gap: 1rem; margin-bottom: 4.2rem;}
    .list-item {padding: 3.4rem 2.4rem 2.4rem;}
    .list-item h4 {font-size: 2.1rem; word-break: keep-all;}
    .list-item h4 span {font-size: 1.6rem; word-break: keep-all;}
    .list-item p {font-size: 1.4rem; word-break: keep-all;}
    .sub-content .txt2 {font-size: 2rem; margin-bottom: 3rem;}
    .stit-orange {font-size: 1.3rem;}
    .sub-content .txt3 {font-size: 1.6rem;}
    .mb180 {margin-bottom: 5.5rem !important;}
    .performance .illust1 {margin-bottom: 6.2rem;}
    .performance .illust2 {margin-bottom: 2rem; margin-top: 1rem;}
    .performance .illust3 {margin-bottom: 1rem; margin-top: 1rem;}
    .projects .sub-head h2 {font-size: 1.7rem;}
    .mb160 {margin-bottom: 2.5rem !important;}
    .mb200 {margin-bottom: 5rem !important;}
    .project-list li {margin: 0 auto 3rem !important;}
    .project-list li h4 {font-size: 2.4rem;}
    .project-list li.type2 h4 {font-size: 1.5rem;}
    .project-list li h4::before {width: .7rem; height: .7rem; border-radius: .7rem; top: -1rem !important;}
    .project-list li.type2 div {padding: .8rem 0 0;}
    .project-list li.type2 h4::before {top: -1rem !important;}
    .project-list li div {padding: 3.4rem 2.8rem 2.8rem;}
    .project-list li {width: 100%;}    
    .contact .sub-head {padding-top: 8rem; margin-bottom: 4rem;}
    .contact-info {flex-direction: column; gap: 4rem;}
    .contact-info .contact-list {font-size: 1.6rem; margin-bottom: 1rem; width: 100%;}
    .contact-info .contact-list li:first-child br {display: none;}
    .stit-dot {font-size: 1.8rem;}
    .stit-dot::before {width: .7rem; height: .7rem; border-radius: .7rem; top: -1rem;}
    .sub-content .txt1.mb80 {margin-bottom: 4rem !important;}
    .inp-item input {padding: .8em .2em; font-size: 1.4rem;}
    .inp-item {flex: 0 1 100%;}
    .contact-info .map {margin-bottom: 10rem; width: 96%;}
    .agree {margin: 2rem 0 3rem; font-size: 1.4rem;}
    .btn-submit {height: 5rem; min-width: 13.2rem; padding: 0 4rem; font-size: 2rem; line-height: 1; margin: 0 auto 2rem;}
    .about .sub-head p {font-size: 1.4rem;}
    .about .sub-head h2 {margin-bottom: 1rem;}
    .about .sub-content .txt4 {font-size: 1.3rem; margin-bottom: 1.5rem; line-height: 1.35; word-break: keep-all;}
    .about .illust1 {margin-bottom: 2rem; min-height: 250px; object-fit: cover;}
    .sub-content .txt1.mb40 {margin-bottom: 1rem !important;}
    .about .sub-content .txt4 br {display: none;}
    .list-wrap2 {margin-top: 4rem; gap: 0; margin-bottom: 4rem;}
    .list-wrap2 div {flex-direction: column; padding: 2rem 0;}
    .list-wrap2 p {font-size: 1.4rem; line-height: 1.4; padding: 0 1.5rem;}
    .list-wrap2 p br {display: none;}
    .list-wrap2 .stit-dot {margin-left: 1.5rem; font-size: 1.6rem; margin-bottom: .5rem;}
    .list-wrap2 .stit-dot::before {top: .8rem; left: -1.5rem;}
    .about .illust2 {width: 96%; margin-bottom: 6rem;}
    .about .illust3 {width: 96%; margin-top: 2rem;}
    .num-wrap {padding: 1rem 0 5rem; gap: 0;}
    .num-wrap li strong {font-size: 3rem;}
    .num-wrap li div strong + span {font-size: 1.6rem; margin-top: -1.3em;}
    .num-wrap li div {height: 4rem; width: 100%;}
    .num-wrap li span {font-size: 1.3rem;}
    .history-wrap > li {width: 45%;}
    .history-wrap > li strong {font-size: 4rem;}
    .history-wrap > li span {font-size: 1.5rem; margin-bottom: .4em;}
    .history-wrap > li ul li {font-size: 1.3rem;}
    .history-wrap > li ul li br {display: none;}
    .history-wrap > li:nth-of-type(n+2) {margin-top: -5rem;}
    .history-wrap > li:nth-child(3) {padding-bottom: 10rem;}
    .history-wrap > li:last-child {width: 60%; padding-top: 2rem; padding-bottom: 4rem;}
    .history-wrap > li:last-child strong {text-align: center;}
    .history-wrap > li:nth-child(1)::before,
    .history-wrap > li:nth-child(3)::before {width: 1rem; height: 1rem; top: -.2rem; left: -1.7rem;}
    .history-wrap > li:last-child::before {width: 1rem; height: 1rem;}
    .banner {font-size: 1.5rem;}
    .pop {padding: 2rem;}
    .pop-container {padding: 3rem 1rem;}
    .pop .tit {font-size: 2rem; line-height: 1.5; margin-bottom: 1rem;}
    .pop p, .pop ul, .pop ol {font-size: 1.4rem;}
    .pop h3 {font-size: 1.6rem; margin-top: 2rem;}
    .pop .btn-close {width: 3.2rem; height: 3.2rem;}
}

@media screen and (max-width: 480px) {
    .main-group1 .main-tit .txt {font-size: 2.6rem;}
    .main-group3 .txt p {margin: 2rem 0 0 1rem; font-size: 1.3rem;}
    .footer .txt2 {font-size: calc(8.3vw - .45rem);}
    .quick-wrap {bottom: calc(4rem + 7vw);}
    .quick-wrap .info-modal {width: 24rem; border-radius: 2rem; padding: 6rem 2.5rem 2.5rem; bottom: 5rem; right: 2.4rem;}
    .quick-wrap .info-modal .btn-close {width: 3.2rem; height: 3.2rem;}
    .quick-wrap .info-modal h3 {font-size: 2rem;}
    .quick-wrap .info-modal a {font-size: 1.5rem; line-height: calc(4rem - .2rem); height: 4rem; border-radius: 2rem; padding: 0 2rem;}
}