@charset "utf-8"; @import url('/css/font.css'); @import url('/css/helper.css'); @import url('/css/icon.css'); @import url('/css/vendor/swiper-bundle.min.css') layer(swiper); @layer layout, main, content, swiper, base; /*
* Base CSS Document
*/
/* Root Var */
:root { /* basic */
    --header-height: 100rem;
    --slider-height: 600rem;
    --hero-height: 550rem; 
    --topbar-height: 35rem; 
    --lnb-height : 50rem; 
    --logo-width : 120rem; 
    --inr-narrow: 1200; 
    --inr: 1400; 
    --inr-wide: 1920; 
    --inr-width: .92; 
    --font-size: 18rem; 
    --line-height: 1.5; 
    --font1: Pretendard; 
    --font2: SUIT; 
    /* color */
    --primary: #1c3a6f; --primary1: #1954B9; --primary2: #aec4ea; --secondary: #1C6F35; --secondary1: #19B93C; --secondary2: #70FF6B; --accent: #e74c3c; --accent1: #ec7063; --accent2: #c0392b; --white: #ffffff; --black: #101010; --grey: #1f2123; --grey1: #f2f2f2; --grey2: #e6e6e6; --grey3: #cccccc; --grey4: #b3b3b3; --grey5: #999999; --grey6: #666666; --grey7: #4d4d4d; --grey8: #333333; --box-shadow:  0px 4px 15px -1px rgba(0,0,0,0.3); --text-shadow: 0px 3px 4px rgba(0,0,0,0.5); /* font */
    --fs68: clamp(46rem, calc( 68 / var(--inr) * 100vw ), 68rem);
    --fs60: clamp(48rem, calc( 60 / var(--inr) * 100vw ), 60rem); 
    --fs50: clamp(40rem, calc( 50 / var(--inr) * 100vw ), 50rem); 
    --fs45: clamp(36rem, calc( 45 / var(--inr) * 100vw ), 45rem); 
    --fs44: clamp(34rem, calc( 44 / var(--inr) * 100vw ), 44rem); 
    --fs42: clamp(36rem, calc( 42 / var(--inr) * 100vw ), 42rem); 
    --fs40: clamp(34rem, calc( 40 / var(--inr) * 100vw ), 40rem); 
    --fs36: clamp(28rem, calc( 36 / var(--inr) * 100vw ), 36rem); 
    --fs34: clamp(28rem, calc( 34 / var(--inr) * 100vw ), 34rem); 
    --fs32: clamp(26rem, calc( 32 / var(--inr) * 100vw ), 32rem); 
    --fs30: clamp(28rem, calc( 30 / var(--inr) * 100vw ), 30rem); 
    --fs28: clamp(26rem, calc( 28 / var(--inr) * 100vw ), 28rem); 
    --fs26: clamp(24rem, calc( 26 / var(--inr) * 100vw ), 26rem); 
    --fs24: clamp(22rem, calc( 24 / var(--inr) * 100vw ), 24rem); 
    --fs22: clamp(20rem, calc( 22 / var(--inr) * 100vw ), 22rem); 
    --fs20: clamp(18rem, calc( 20 / var(--inr) * 100vw ), 20rem); 
    --fs18: clamp(18rem, calc( 20 / var(--inr) * 100vw ), 20rem); 
    --fs16: clamp(16rem, calc( 18 / var(--inr) * 100vw ), 18rem); 
    --fs14: clamp(12rem, calc( 14 / var(--inr) * 100vw ), 14rem); 
    --fs12: clamp(10rem, calc( 12 / var(--inr) * 100vw ), 12rem); 
}
@media(prefers-reduced-motion:no-preference) {
 html { scroll-behavior: smooth; }
 }
/* reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { accent-color: var(--white); height: 100%; word-break: break-word; overflow-wrap: break-word; }
@media(min-width:1280px) {
 html { font-size: clamp(0px, calc( ( 100 / ( var(--inr) / var(--inr-width) ) ) * 1vw ), 1px ); }
 }
@media(min-width:1921px) {
 html { font-size: clamp(0px, calc( ( 100 / 1920 ) * 1vw ), 500px ); }
 }
@media(max-width:1279px) and (min-width:768px) {
 html { font-size: clamp(0px, calc( ( 100 / 768 ) * .75vw ), 5px ); }
 }
@media(max-width:767px) {
 html { font-size: clamp(0px, calc( ( 100 / 412 ) * .875vw ), 5px ); }
 }
body { font-size: var(--font-size); font-family: var(--font1), var(--font2), -apple-system, system-ui, sans-serif; line-height: var(--line-height); min-height: 100vh; display: flex; flex-direction: column; text-transform: inherit; }
@layer base { body,p,span,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,button { margin:0; padding:0; }
input,textarea,button,select { font-family: inherit; font-size: inherit; color: inherit; }
img, fieldset, button { border:0; }
textarea { overflow:auto; resize: none; }
button { background: 0; font-weight: inherit; color: inherit; cursor:pointer; }
img { vertical-align:middle; }
address, em { font-style:normal; }
table { border-spacing:0; border-collapse:collapse; }
caption { overflow:hidden; line-height:0; text-indent:-2000em; }
legend, .hidden { padding:0; margin:0; overflow:hidden !important; text-indent:100%; white-space:nowrap; font-size:0; }
i { font-style:normal; }
summary::-webkit-details-marker { display: none; }
article, aside, details, figcaption, figure, hgroup, menu { display:block; }
figure { padding:0px; margin:0px; }
button { border: none; background: none; cursor: pointer; }
input, button, textarea { font-family: inherit; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
textarea { resize: vertical; }
code, pre { font-family: monospace, monospace; }
input[type=submit], input[type=button], button { cursor: pointer; }
 }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { -ms-scroll-chaining: none; overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
a { text-decoration: none; color: inherit; }
ul,ol,li { list-style:none; }
/* mobile */
body { -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; }

* { outline-color: var(--primary); }
/* 말줄임표 */
.ellipsis { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: normal; word-break: break-all; }
/* hide */
@media(min-width: 768px) {
 #wrap .show-mo { display: none; }
 }
@media(min-width: 1280px) {
 #wrap .show-tab { display: none; }
 }
@media(max-width: 1279px) {
 #wrap .hide-tab { display: none; }
#wrap .show-tab.block { display: block; }
#wrap .show-tab.flex { display: flex; }
#wrap .show-tab.inline_block { display: inline-block; }
#wrap .show-tab.inline_flex { display: inline-flex; }
 }
@media(max-width: 767px) {
 #wrap .hide-mo { display: none; }
#wrap .show-mo.block { display: block; }
#wrap .show-mo.flex { display: flex; }
#wrap .show-mo.inline_block { display: inline-block; }
#wrap .show-mo.inline_flex { display: inline-flex; }
 }
.inr { max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); margin: 0 auto; }
.inr-wide { max-width: calc(var(--inr-wide) * 1rem); width: calc(var(--inr-width) * 100%); margin: 0 auto; }
.inr-narrow { max-width: calc(var(--inr-narrow) * 1rem); width: calc(var(--inr-width) * 100%); margin: 0 auto; }
