/* 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;
    letter-spacing: -1.5px;
    font-family: 'Pretendard';
    word-break: auto-phrase;
	vertical-align: baseline;
    color: var(--black-color);
}

html {
  font-size: 10px;
  overflow-x: hidden;
}
/* 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;
}
span, button, a {color: inherit;}
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;}
/* .main-color { color: var(--main-color);} */
.orange-color { color: var(--orange-color);}
.purple-color { color: var(--purple-color);}
.white-color { color: var(--white-color);}


/* root */
:root {
--container-width: 1720;
--fluid: calc(100vw / var(--container-width));


 /* color */
--main-color: #ef7e32;
--orange-color: #ef7e32;
--purple-color: #5d4581;
--white-color: #fff;
--black-color: #303030;
--gold-color: #C99A4B;
--red-color: #ff3030;
--navy-color: #12233F;
--white-op30: #ffffff4d;

/* font-size */
--font-12: clamp(1rem, .625vw, 1.2rem);
--font-14: clamp(1.2rem, .7292vw, 1.4rem);
--font-15: clamp(1.2rem, .7812vw, 1.5rem);
--font-16: clamp(1.2rem, .8333vw, 1.6rem);
--font-18: clamp(1.2rem, .9375vw, 1.8rem);
--font-20: clamp(1.4rem, 1.0417vw, 2rem);
--font-22: clamp(1.8rem, 1.1458vw, 2.2rem);
--font-24: clamp(1.6rem, 1.25vw, 2.4rem);
--font-28: clamp(1.8rem, 1.4583vw, 2.8rem);
--font-30: clamp(1.83rem, 1.5625vw, 3rem);
--font-32: clamp(2rem, 1.6667vw, 3.2rem);
--font-36: clamp(2.2rem, 1.875vw, 3.6rem);
--font-40: clamp(2.4rem, 2.0833vw, 4rem);
--font-48: clamp(2.6rem, 2.5vw, 4.8rem);
--font-52: clamp(2.8rem, 2.7083vw, 5.2rem);
--font-56: clamp(2.8rem, 2.9167vw, 5.6rem);
--font-60: clamp(3rem, 3.125vw, 6rem);
--font-64: clamp(3.2rem, 3.3333vw, 6.4rem);
--font-72: clamp(3.6rem, 3.75vw, 7.2rem);
--font-80: clamp(4rem, 4.1667vw, 8rem);
--font-130: clamp(6rem, 7.656vw, 13rem);

/* font-family */
--ff-Pretendard : 'Pretendard';
--ff-MaruBuri : 'Maru Buri';
--ff-NotoSansCJKKR : 'NotoSansCJKKR';
--ff-KoPubWorld : 'KoPubWorld';
}

/* font */
[data-font="Pretendard"] { font-family: var(--ff-Pretendard);}
[data-font="MaruBuri"] { font-family: var(--ff-MaruBuri);}
[data-font="NotoSansCJKKR"] { font-family: var(--ff-NotoSansCJKKR);}
[data-font="KoPubWorld"] { font-family: var(--ff-KoPubWorld);}

/* font-weight */
.fw-ex-light { font-weight: 100;}
.fw-light { font-weight: 300;}
.fw-medium { font-weight: 500;}
.fw-semi-bold { font-weight: 600;}
.fw-bold { font-weight: 800;}


/* bg 반응형 */
[data-fluid] {
    position: absolute;
}

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

.flex {
    display: flex;
}

.flex.column {
    flex-direction: column;
}

.flex.a-center {
    align-items: center;
}

.flex.j-center {
    justify-content: center;
}




/* word-flip */
.word-flip { position: relative; display: inline-block; overflow: hidden; line-height: normal; vertical-align: top; }
.word-flip .unit { display: block; 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); }