@charset "utf-8";
/* ========================================
   Google Font
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Color+Emoji&display=swap');

/* ========================================
   Pretendard
======================================== */
@font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: url('font/pretendard/Pretendard-Thin.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: url('font/pretendard/Pretendard-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: url('font/pretendard/Pretendard-Light.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('font/pretendard/Pretendard-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: url('font/pretendard/Pretendard-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: url('font/pretendard/Pretendard-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: url('font/pretendard/Pretendard-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: url('font/pretendard/Pretendard-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: url('font/pretendard/Pretendard-Black.woff2') format('woff2'); }
/* ========================================
   Root
======================================== */
:root {
    --font-base: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; 
    --font-en: 'Inter',sans-serif; 
    --color-black: #111; 
    --color-title: #181818; 
    --color-text: #555; 
    --color-sub: #8d8d8d; 
    --color-line: #ececec; 
    --color-bg: #fff; 
    --color-bg2: #faf9f7; 
    --color-point: #9f8f80; 
}
/* ========================================
   Reset
======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-text-size-adjust: none; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {font-family: var(--font-base); font-size: 15px; font-weight: 400; color: var(--color-text); background: #fff; line-height: 1.75; letter-spacing: -0.025em; word-break: keep-all; }

body, input, textarea, select, button, table, th, td, pre, code { font-family: var(--font-base); }
h1, h2, h3, h4, h5, h6 { color: var(--color-title); font-weight: 500; line-height: 1.2; letter-spacing: -0.055em; }
h1 { font-size: clamp(46px,5vw,72px); }
h2 { font-size: clamp(36px,4vw,56px); }
h3 { font-size: clamp(28px,3vw,40px); }
h4 { font-size: 22px; }
p {line-height: 1.9; color: var(--color-text); }
strong { font-weight: 600; }
small {color: var(--color-sub); }

/* ========================================
   English
======================================== */

.en, .eng, .brand-en, .logo-en, .section-label {font-family: var(--font-en); text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
.section-label {display: inline-block; margin-bottom: 18px; color: var(--color-point); font-size: 12px; }

/* ========================================
   Link
======================================== */

a {color: inherit; text-decoration: none; transition: .3s; }
button {transition: .3s; }

/* ========================================
   Form
======================================== */

input, textarea, select, button {font: inherit; color: inherit; border: none; background: none; }
textarea {resize: vertical; }
input::placeholder, textarea::placeholder { color: #aaa; }

/* ========================================
   Table
======================================== */

table { width: 100%; border-collapse: collapse; }

/* ========================================
   Media
======================================== */

img, svg, video {max-width: 100%; vertical-align: top; border: 0; }
img {height: auto; }

/* ========================================
   List
======================================== */

ul, ol, li {list-style: none; }

/* ========================================
   Accessibility
======================================== */

caption, legend, .blind, .sr-only { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); }

/* ========================================
   Selection
======================================== */
::selection {background: var(--color-point); color: #fff; }
.inner { max-width: 1440px; width: calc(100% - 80px); margin: 0 auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 36px; border: 1px solid #111; transition: .35s; }
img { transition: transform .8s ease; }
a:hover img { transform: scale(1.03); }

/* ========================================
   Emoji
======================================== */

.emoji {font-family: 'Noto Color Emoji',sans-serif!important; }



html, body, button, input, textarea, select, table, th, td, div, span, a, li, p, h1, h2, h3, h4, h5, h6 { font-family: var(--font-base) !important; }
.en, .eng, .brand-en, .logo-en, .section-label, .n28_label, .product_step { font-family: var(--font-en) !important; }