/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
*/

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,
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;
  vertical-align: baseline;
  font-family: 'Pretendard';
  font-weight: 400;
  letter-spacing: -0.6px; 
  line-height: 1.2;
  color: #3a281f; } 

html { font-size: 10px; user-select: none;} 

/* HTML5 display-role reset for older browsers */
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; } 
a { text-decoration:none; color: var(--black-color); } 
a:hover,a:focus,a:active { text-decoration:none; } 
button { background-color: transparent; border: none; cursor: pointer; } 
.mo-only { display: none; } 
img { width: 100%; max-width: 100%; margin:0 auto; } 
html { overflow-x: clip; scroll-behavior: smooth; }
section { position: relative; } 
.flex { display: flex; } 
.flex.column { flex-direction: column; } 
.flex.a-center { align-items: center; } 
.flex.j-center { justify-content: center; } 
.lenis.lenis-smooth {scroll-behavior: auto !important; /* 브라우저 기본 부드러운 스크롤과 충돌 방지 */}

.custom-show { display: none; } 
.sm-only { display: none; } 
.mo-only { display: none; } 


/* calc(20vw / var(--mainWidth)); */
@media (max-width: 1024px){
 }

@media (max-width: 968px){
 .mo-only { display: block; } 
 .pc-only { display: none; } 
 }

@media (max-width: 480px){
 .sm-none { display: none; } 
 .sm-only { display: block; } 
 }


/* font-size class */
.font-12 { font-size: var(--font-12); } 
.font-14 { font-size: var(--font-14); } 
.font-15 { font-size: var(--font-15); } 
.font-16 { font-size: var(--font-16); } 
.font-18 { font-size: var(--font-18); } 
.font-20 { font-size: var(--font-20); } 
.font-22 { font-size: var(--font-22); } 
.font-24 { font-size: var(--font-24); } 
.font-26 { font-size: var(--font-26); } 
.font-28 { font-size: var(--font-28); } 
.font-30 { font-size: var(--font-30); } 
.font-32 { font-size: var(--font-32); } 
.font-35 { font-size: var(--font-35); } 
.font-36 { font-size: var(--font-36); } 
.font-40 { font-size: var(--font-40); } 
.font-45 { font-size: var(--font-45); } 
.font-48 { font-size: var(--font-48); } 
.font-50 { font-size: var(--font-50); } 
.font-52 { font-size: var(--font-52); } 
.font-56 { font-size: var(--font-56); } 
.font-60 { font-size: var(--font-60); } 
.font-64 { font-size: var(--font-64); } 
.font-68 { font-size: var(--font-68); } 
.font-72 { font-size: var(--font-72); } 
.font-80 { font-size: var(--font-80); } 
.font-100 { font-size: var(--font-100); } 
.font-120 { font-size: var(--font-120); } 
.font-130 { font-size: var(--font-130); } 
.font-150 { font-size: var(--font-150); } 
.font-180 { font-size: var(--font-180); } 
.font-200 { font-size: var(--font-200); } 
.font-270 { font-size: var(--font-270); } 

/* font-weight */
.bold { font-weight: 700; } 
.fw-100 { font-weight: 100; } /* thin */
.fw-200 { font-weight: 200; } /* extra-light */
.fw-300 { font-weight: 300; } /* light */
.fw-400 { font-weight: 400; } /* normal */
.fw-500 { font-weight: 500; } /* medium */
.fw-600 { font-weight: 600; } /* semi-bold */
.fw-700 { font-weight: 700; } /* bold */
.fw-800 { font-weight: 800; } /* extra-bold */

.main-color { color: var(--main-color); } 


/* font */
[data-font="Pretendard"] { font-family: 'Pretendard'; } 
[data-font="MaruBuri"] { font-family: 'Maru Buri'; } 
[data-font="NotoSansCJKKR"] { font-family: 'NotoSansCJKKR'; } 
[data-font="KoPubWorld"] { font-family: 'KoPubWorld'; } 
[data-font="TTSoomyungjol"] { font-family: 'TTSoomyungjol';} 
[data-font="Aurora"] { font-family: 'Aurora', serif; }
[data-font="Bethany Elingston"] { font-family: 'Bethany Elingston'; } 
[data-font="Bembo"] { font-family: 'Bembo Titling MT Std'; } 

/* root */
:root {
--mainWidth: 19.2;
 --container-width: 1500;
 --fluid: calc(100vw / var(--container-width));
 /* color */
 --main-color : #edcbc9;
 --white-color: #ffffff;
 --white-color-40: #ffffff4d;
 --black-color: #111;
 --black-color-90: #1d1d1d;
 --gold-color: #C99A4B;
 --orange-color: #F79948;
 --navy-color: #12233F;
 --purple-color: #5b4c9d;
/* font-size */
 --font-12: max(9px, calc(12vw / var(--mainWidth)));
 --font-14: max(9px, calc(14vw / var(--mainWidth)));
 --font-15: max(9px, calc(15vw / var(--mainWidth)));
 --font-16: max(9px, calc(16vw / var(--mainWidth)));
 --font-18: max(9px, calc(18vw / var(--mainWidth)));
 --font-20: max(9px, calc(20vw / var(--mainWidth)));
 --font-22: max(9px, calc(22vw / var(--mainWidth)));
 --font-24: max(12px, calc(24vw / var(--mainWidth)));
 --font-26: max(12px, calc(26vw / var(--mainWidth)));
 --font-28: max(12px, calc(28vw / var(--mainWidth)));
 --font-30: max(12px, calc(30vw / var(--mainWidth)));
 --font-32: max(14px, calc(32vw / var(--mainWidth)));
 --font-35: max(14px, calc(35vw / var(--mainWidth)));
 --font-36: max(14px, calc(36vw / var(--mainWidth)));
 --font-40: max(16px, calc(40vw / var(--mainWidth)));
 --font-45: max(16px, calc(45vw / var(--mainWidth)));
 --font-48: max(16px, calc(48vw / var(--mainWidth)));
 --font-50: max(16px, calc(50vw / var(--mainWidth)));
 --font-52: max(16px, calc(52vw / var(--mainWidth)));
 --font-56: max(16px, calc(56vw / var(--mainWidth)));
 --font-60: max(16px, calc(60vw / var(--mainWidth)));
 --font-64: max(18px, calc(64vw / var(--mainWidth)));
 --font-68: max(18px, calc(68vw / var(--mainWidth)));
 --font-72: max(18px, calc(72vw / var(--mainWidth)));
 --font-80: max(18px, calc(80vw / var(--mainWidth)));
 --font-100: max(20px, calc(100vw / var(--mainWidth)));
 --font-130: max(20px, calc(130vw / var(--mainWidth)));
 --font-120: max(20px, calc(120vw / var(--mainWidth)));
 --font-150: max(20px, calc(150vw / var(--mainWidth)));
 --font-180: max(20px, calc(180vw / var(--mainWidth)));
 --font-200: max(20px, calc(200vw / var(--mainWidth)));
 --font-270: max(20px, calc(270vw / var(--mainWidth)));
 }

/* bg 반응형 */
[data-bg] { width: min(calc(var(--w) * 1px), calc(var(--fluid) * var(--w))); height: min(calc(var(--h) * 1px), calc(var(--fluid) * var(--h))); } 

[data-has-pseudo] { position: relative; } 

[data-pseudo="all"]:before,
[data-pseudo="all"]:after,
[data-pseudo="before"]:before,
[data-pseudo="after"]:after { position: absolute; content: ''; display: block; width: min(calc(var(--w) * 1px), calc(var(--fluid) * var(--w))); height: min(calc(var(--h) * 1px), calc(var(--fluid) * var(--h))); } 

/* word-flip */
.word-flip { position: relative; display: inline-block; overflow: hidden; line-height: normal; vertical-align: top; }
.word-flip .unit { display: block; font-weight: 400; transition: transform .35s cubic-bezier(.65, 0, .35, 1); white-space: nowrap; will-change: transform;}
.word-flip .unit:last-child { position: absolute; top: 0; left: 0; transform: translateY(100%); }
a:hover .word-flip .unit:first-child { transform: translateY(-100%); }
a:hover .word-flip .unit:last-child { transform: translateY(0); }

/* created marker */
/* <a href="http://tdcompany.co.kr/" class="created__maker" target="_blank">Created By TD Company</a> */
.created__maker {    color: rgba(0, 0, 0, 0.5); transition: 0.3s;}
.created__maker:hover {text-shadow: 0 0 4px rgba(255, 255, 255, 0.7), 0 0 8px rgba(255, 255, 255, 0.5);}