@charset "utf-8";
@import url('/css/helper.css');
@import url('/css/icon.css');
@import url('/css/font.css');
@import url('/css/vendor/swiper-bundle.min.css') layer(swiper);

@layer layout, main, content, swiper, base;

/* Root Variables */
:root {
    /* Layout */
    --header-height: 100px;
    --slider-height: 100vh;
    --hero-height: 310px;
    --topbar-height: 35px;
    --lnb-height: 50px;
    --logo-width: 180px;
    --inr-narrow: 1400;
    --inr: 1700;
    --inr-wide: 1920;
    --inr-width: 1;
    
    /* Typography */
    --font-size: 16px;
    --line-height: 1.5;
    --font1: 'Pretendard', sans-serif;
    
    /* Colors */
    --primary: #222;
    --primary1: #79a6f4;
    --primary2: #7c969b;
    --secondary: #5cb75a;
    --secondary1: #89EB87;
    --secondary2: #BAF7B9;
    --accent: #BD8F5C;
    --accent1: #ffde00;
    --accent2: #d62e26;
    --white: #ffffff;
    --black: #101010;
    --grey: #1f2123;
    --grey1: #f7f7f7;
    --grey2: #e6e6e6;
    --grey3: #cecbcc;
    --grey4: #b3b3b3;
    --grey5: #999999;
    --grey6: #666666;
    --grey7: #555555;
    --grey8: #333333;
    
    /* Effects */
    --box-shadow: 0px 4px 15px -1px rgba(0,0,0,0.3);
    --text-shadow: 0px 3px 4px rgba(0,0,0,0.5);
    
    /* Font Sizes */
    --fs68: clamp(46px, calc(68 / var(--inr) * 100vw), 68px);
    --fs60: clamp(48px, calc(60 / var(--inr) * 100vw), 60px);
    --fs55: clamp(40px, calc(55 / var(--inr) * 100vw), 55px); 
    --fs50: clamp(40px, calc(50 / var(--inr) * 100vw), 50px);
    --fs40: clamp(34px, calc(40 / var(--inr) * 100vw), 40px);
    --fs30: clamp(28px, calc(30 / var(--inr) * 100vw), 30px);
    --fs22: clamp(20px, calc(22 / var(--inr) * 100vw), 22px); 
    --fs20: clamp(18px, calc(20 / var(--inr) * 100vw), 20px);
    --fs18: clamp(16px, calc(18 / var(--inr) * 100vw), 18px); 
    --fs16: clamp(16px, calc(16 / var(--inr) * 100vw), 16px);
    --fs14: clamp(14px, calc(14 / var(--inr) * 100vw), 14px);
    --fs12: clamp(12px, calc(12 / var(--inr) * 100vw), 12px);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    accent-color: var(--primary);
    height: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive Font Scaling */
@media (min-width: 1280px) {
    html { font-size: calc(100 / (var(--inr) / var(--inr-width)) * 1vw); }
}
@media (min-width: 1921px) {
    html { font-size: calc(100 / 1920 * 1vw); }
}
@media (max-width: 1279px) and (min-width: 768px) {
    html { font-size: calc(100 / 768 * 0.75vw); }
}
@media (max-width: 767px) {
    html { font-size: calc(100 / 412 * 0.875vw); }
}

/* Body */
body {
    font-size: var(--font-size);
    font-family: var(--font1);
    line-height: var(--line-height);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-transform: inherit;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

/* Utility Classes */
.ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
    word-break: break-word;
}

.inr, .inr-wide, .inr-narrow {
    max-width: calc(var(--inr-width) * 100%);
    margin: 0 auto;
}

.inr { width: calc(var(--inr) * 1px); }
.inr-wide { width: calc(var(--inr-wide) * 1px); }
.inr-narrow { width: calc(var(--inr-narrow) * 1px); }
.inr-full { width: 100%;}

@media (max-width: 1800px) {
    :root { --inr-width: 0.92; }
}

/* Accessibility & Other Resets */
a { text-decoration: none; color: inherit; }
ul, ol, li { list-style: none; }
button {
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

img, fieldset, button { border: 0; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
textarea { resize: vertical; }
code, pre { font-family: monospace, monospace; }
input, button, textarea { font-family: inherit; }
input[type=submit], input[type=button], button { cursor: pointer; }
/* reset */
@layer base{
    *{ outline-color: var(--primary); }
    *, *::before, *::after{ box-sizing: border-box; }
    :where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dd){ margin:0; padding: 0; }
    :where(input,textarea,button,select){ font: inherit; color: inherit; caret-color: var(--primary); }
    a{ text-decoration: none; color: inherit; }
    /* address, em{font-style:normal;} */
    button{ padding: 0; background: 0; border: 0; cursor:pointer; }
    caption, legend{ overflow:hidden; position: absolute; width: 0; height: 0; border: 0; }
    input{ margin: 0; }
    pre{ margin:0; font-family: inherit; white-space: pre-wrap; }
    summary::-webkit-details-marker{ display: none; }
    svg:focus, svg *:focus{ outline:none; }
    table{ border-spacing:0; border-collapse:collapse;}
    textarea{ resize: none; }
    ul,ol,li{list-style:none;}
    img{ display: block; width: 100%; }
    address.footer-info {
        font-style: normal !important;
    }
}