@charset "UTF-8";

:root {
	--font: 1.041667vw;
	font-size: clamp(18px, var(--font) * 1.7, 20px);
	--base: 20;
	--wbase: 1920;
	--hbase: 1080;
	--vw: 100vw;
	--vh: 100vh;
	--noto: "Noto Serif KR", serif;
	--color-bg: #252d2c;
	--color-primary: #89896b;
	--color-hover: #b5b571;
	--color-text: #6d6d51;
	--color-deep: #636248;
	--color-deep2: #3c3b2e;
	--color-light: #c9c9b5;
	--size5: calc((5 / var(--base)) * 1rem);
	--size6: calc((6 / var(--base)) * 1rem);
	--size8: calc((8 / var(--base)) * 1rem);
	--size9: calc((9 / var(--base)) * 1rem);
	--size10: calc((10 / var(--base)) * 1rem);
	--size11: calc((11 / var(--base)) * 1rem);
	--size12: calc((12 / var(--base)) * 1rem);
	--size13: calc((13 / var(--base)) * 1rem);
	--size14: calc((14 / var(--base)) * 1rem);
	--size15: calc((15 / var(--base)) * 1rem);
	--size16: calc((16 / var(--base)) * 1rem);
	--size17: calc((17 / var(--base)) * 1rem);
	--size18: calc((18 / var(--base)) * 1rem);
	--size19: calc((19 / var(--base)) * 1rem);
	--size20: calc((20 / var(--base)) * 1rem);
	--size21: calc((21 / var(--base)) * 1rem);
	--size22: calc((22 / var(--base)) * 1rem);
	--size23: calc((23 / var(--base)) * 1rem);
	--size24: calc((24 / var(--base)) * 1rem);
	--size25: calc((25 / var(--base)) * 1rem);
	--size26: calc((26 / var(--base)) * 1rem);
	--size27: calc((27 / var(--base)) * 1rem);
	--size28: calc((28 / var(--base)) * 1rem);
	--size30: calc((30 / var(--base)) * 1rem);
	--size33: calc((33 / var(--base)) * 1rem);
	--size34: calc((34 / var(--base)) * 1rem);
	--size35: calc((35 / var(--base)) * 1rem);
	--size40: calc((40 / var(--base)) * 1rem);
	--size50: calc((50 / var(--base)) * 1rem);
	--size57: calc((57 / var(--base)) * 1rem);
	--size60: calc((60 / var(--base)) * 1rem);
	--size70: calc((70 / var(--base)) * 1rem);
	--size73: calc((73 / var(--base)) * 1rem);
	--size90: calc((90 / var(--base)) * 1rem);
	--size100: calc((100 / var(--base)) * 1rem);
	--vw100: max(64px, min(5.208334vw * 1.2, 100px));
	--vw100b: max(58px, min(5.208334vw * 1.1, 100px));
	--vw100c: max(69px, min(5.208334vw * 1.3, 100px));
	--vh1080: max(56.25vmax, 100vh);
	--max1800: calc((1800 / var(--base)) * 1rem);
	--max1520: calc((1520 / var(--base)) * 1rem);
	--min1024: calc(1024px - var(--scrollbar));
	--header: calc((117 / var(--base)) * 1rem);
	--gl-pdd: 24px;
	--pdd: max(21px, calc((40 / var(--wbase)) * var(--vw)));
	--pdd-lg: max(32px, calc((60 / var(--wbase)) * var(--vw)));
	--fw-lt: 300;
	--fw-md: 500;
	--fw-semi: 600;
	--fw-bd: 700;
	--trans: .3s ease;
	--easing-out: cubic-bezier(.39,.35,.52,.99);
	--easing-out2: cubic-bezier(.18,.61,.34,.99);
}

@media (min-width: 1921px) {
	:root {
		font-size: min(var(--font), 22px);
		--vw100: calc((100 / var(--base)) * 1rem);
		--vw100b: calc((100 / var(--base)) * 1rem);
		--vw100c: calc((100 / var(--base)) * 1rem);
		--gl-pdd: max(var(--size60), 5vw);
	}
}

*, *::before, *::after {box-sizing: border-box;}
body {word-break: keep-all; word-wrap: break-word;  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: none; background: var(--color-bg); font-family: "Pretendard Variable", Pretendard, sans-serif;} 
body, div, dl, dt, dd, th, td, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, p, blockquote, button, input, textarea {margin:0; padding:0;}
section, article, header, footer, main, nav, aside, hgroup, figure, figcaption {display:block; margin:0; padding:0}
table caption, legend, .blind {position: absolute !important; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
table {width:100%; border-collapse: collapse; border-spacing:0;}
table th {font-weight:normal}
img, fieldset, button, input {border:0; vertical-align: middle;}
img, svg {max-width:100%; border: 0; vertical-align: top; outline: none;}
img {width: auto; height: auto;}
ul, ol, li {list-style:none} 
em, address {font-style:normal}
label, button {cursor:pointer}
a {color:inherit; text-decoration:none}
button::-moz-focus-inner {padding:0; border:0}
input, select, button, textarea {-webkit-appearance: none; -moz-appearance: none; appearance: none; font:inherit; color:inherit; border: 0; background: transparent;}
textarea {overflow-y:auto; resize:none}
h1, h2, h3, h4, h5, h6 {font-size:inherit; font-weight: inherit}
strong {font-weight: var(--fw-bd);}
[hidden] {display: none; pointer-events: none;}
[disabled], :disabled {pointer-events: none;}

body *::-webkit-scrollbar {width: 8px; border-radius: 4px;}
body *::-webkit-scrollbar:horizontal {height: 8px;}
body *::-webkit-scrollbar-track {background: none;}
body *::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.2); border-radius: 4px;}

/* skip navigation */
#accessibility {position:absolute; z-index:99999; top:0; left:5%; width:90%}
#accessibility a {position:absolute; top:-2px; left:0; width:100%; height:0; overflow:hidden; background:#fff; color:#000; display: flex; justify-content: center; align-items: center;}
#accessibility a:focus, #accessibility a:active {height:50px; top: 0; border:1px solid #000;}

html.lenis, html.lenis body {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}

/* common */
.ly_inner {--max: var(--max1800);margin-inline: auto; position: relative; width: 100%; max-width: calc(var(--max) + var(--gl-pdd) * 2); padding-left: var(--gl-pdd); padding-right: var(--gl-pdd); margin-inline: auto; position: relative; height: 100%; transition: padding, max-width, min-width .2s ease;}
.d_grid {display: grid;}
.txt_wrap {white-space: nowrap;}
.h1080 {height: var(--vh1080);}

@media (min-height: 1080px) {
	.h1080 {height: 100vh;}
}

@media (min-width: 1921px) {
	.ly_inner {max-width: inherit; min-width: var(--max1800);}
}

/* font */
.txt_noto {font-family: var(--noto) !important;}
.fs_20 {font-size: var(--size20) !important;}
.fs_25 {font-size: var(--size25) !important;}
.fs_30 {font-size: var(--size30) !important;}
.fs_35 {font-size: var(--size35) !important;}
.fs_40 {font-size: var(--size40) !important;}
.lh_28 {line-height: var(--size28);}
.lh_35 {line-height: var(--size35);}
.lh_50 {line-height: var(--size50);}
.lt_5 {letter-spacing: 0.05em !important;}
.fw_lt {font-weight: var(--fw-lt) !important;}
.fw_md {font-weight: var(--fw-md) !important;}
.fw_bd {font-weight: var(--fw-bd) !important;}

/* color */
.txt_primary {color: var(--color-primary) !important;}

.el_svg :where(svg, c-icon) {fill: currentColor; width: 100%;}
[class*="bl_video"] {position: relative;}
[class*="bl_video"] :is(iframe, video, img) {position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover;  object-fit: cover;}
[class*="bl_video"] img.hide {opacity: 0; transition: opacity var(--trans);}
.bl_video {aspect-ratio: var(--rto, 1/0.56192);}
.bl_video_bg {position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;}
.bl_video_bg iframe {width: 100vw; height: 56.25vw; min-height: 100vh; min-height: 100svh; min-width: 177.77vh; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/* icon */
[class*="el_ico"] {--size: 33px; --ratio: 1; display: inline-block; width: var(--size); aspect-ratio: var(--ratio); background-repeat: no-repeat; background-position: center; background-size: contain; position: relative; flex-shrink: 0; vertical-align: top;}
[class*="el_ico"] img {width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain;}
[class*="el_ico"] svg {fill: currentColor; width: 100%;}
c-icon {display: inline-block; vertical-align: top;}

/* btn */
.el_btn {--cl: inherit; --bg: transparent; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; color: var(--cl); background-color: var(--bg); line-height: 1; white-space: nowrap; position: relative;flex-shrink: 0; transition: var(--trans); transition-property: color, background, border;}
.el_btn.btn1 {--h: var(--size57); --cl: var(--color-bg); --bg: var(--color-primary); font-size: var(--size18); font-weight: var(--fw-bd); height: var(--h); border-radius: calc(var(--h) / 2); padding: 0 var(--size25); gap: var(--size9);}
.el_btn.btn1::after {content: ""; display: block; width: var(--size30); height: var(--size5); background: url('../../images/icon/ico_arr_btn.png') no-repeat center/contain; margin-left: var(--size5); margin-right: 2px; pointer-events: none;}
.el_btn.btn1.hover:is(:hover, :focus-visible) {--bg: var(--color-bg); --cl: var(--color-primary);}
.el_btn c-icon {pointer-events: none;}
.el_btn.w246 {width: calc((246 / var(--base)) * 1rem);}
.el_btn.w246::after {margin-left: auto; margin-right: var(--size9);}

/* img */
.el_img, .el_thumb {--r: 0; --rto: inherit; overflow: hidden; border-radius: var(--r); position: relative; aspect-ratio: var(--rto); position: relative;}
:where(.el_img, .el_thumb) img {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center;object-position: center;}
:where(.el_img, .el_thumb).ccl {--r: 50%;}
.el_thumb.bd {--bd: var(--color-bg);}
.el_thumb.bd::after {content: ""; position: absolute; inset: 0; border: 1px solid var(--bd); border-radius: var(--r); z-index: 1; pointer-events: none;} 
.el_thumb.ccl {border-radius: 50%;}

/* modal */
.modal {--pt: 6vh; --pmax: 600px; --maxH: calc(100vh - var(--pt) * 2); position: fixed; inset: 0; z-index: 999; pointer-events: none; display: none;} 
.modal.open {display: block;}
.modal_module {position: fixed; inset: 0; display: grid; place-items: center; padding: var(--pt) var(--gl-pdd); pointer-events: none; width: 100%; min-width: var(--min1024); overflow-x: auto;}
.modal_content {width: 100%; position: relative; pointer-events: all;}
.modal_close {position: absolute; right: 20px; top: 20px; font-size: 1.2rem; font-weight: var(--fw-bd);}

.dim {position: fixed; inset: 0; background: var(--color-bg); z-index: 600;}

/* header */ 
.ly_header {position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: var(--header); transition: top var(--trans);}
.ly_header .ly_inner {display: flex; justify-content: space-between; align-items: center;}
body.down .ly_header.fixed {top: calc(var(--header) * -1);}
body:not(.down) .ly_header.fixed {top: 0;}
.header_logo {width: calc((230 / var(--base)) * 1rem); flex-shrink: 0; margin-left: calc((10 / var(--wbase)) * var(--vw));}
.header_logo a {display: block; color: var(--color-primary);}
.header_logo c-icon {pointer-events: none;}

/* gnb */
.ly_gnb {margin-right: calc((37 / var(--wbase)) * var(--vw));}
.gnb_list {display: flex; justify-content: space-between; width: calc((386 / var(--base)) * 1rem);}
.gnb_link {font-size: 1rem; font-weight: var(--fw-md); color: var(--color-primary); transition: color var(--trans);}
.gnb_link:is(:hover, :focus-visible) {color: var(--color-hover);}

.ly_container {position: relative;}

/* footer */
.ly_footer {padding: calc((120 / var(--base)) * 1rem) 0 calc((282 / var(--base)) * 1rem);}
.ly_footer .ly_inner {color: var(--color-text);}
.ly_footer .col {padding-left: var(--pdd); position: relative;}
.ly_footer .btns {position: absolute; right: 0; top: calc(var(--size5) * -1);}
.ft_logo {width: calc((287 / var(--base)) * 1rem); margin-bottom: var(--size50);}
.ft_address {margin-bottom: calc((72 / var(--base)) * 1rem); line-height: var(--size28);}
.ft_address :where(dt, dd) {display: inline;}
.ft_address dd::after {content: "\A"; display: block;}
.ft_address dt::before {content: "· ";}
:where(.ft_address, .ft_contact) dt {font-weight: var(--fw-bd);}
.ft_contact {display: grid; grid-template-rows: min-content auto; justify-content: start; gap: var(--size12) max(53px, calc((100 / var(--wbase)) * var(--vw))); line-height: .8;}
.ft_contact dt {grid-row: 1/2;}
.ft_contact dd {grid-row: 2/-1; align-self: end;}
.ft_copy {font-size: 16px; font-weight: var(--fw-md); margin-top: calc((85 / var(--base)) * 1rem);} 


/* animation */
[data-anim] {--delay: 0s; --dist: 150px; --dur: 0.8s;}
[data-anim]:not([data-anim="group"]), [data-anim-inline] {opacity: 0;}
[data-anim="group"].show [data-anim-inline] {opacity: 1 !important; animation-play-state: paused !important;}

[data-anim="fadeUp"].on,
[data-anim="group"].on [data-anim-inline="fadeUp"] {animation-name: slideUp, fadeIn; animation-duration: var(--dur), var(--dur); animation-delay: var(--delay), var(--delay); animation-timing-function: var(--easing-out2), ease; animation-fill-mode: both, both;}
[data-anim="fadeLeft"].on,
[data-anim="group"].on [data-anim-inline="fadeLeft"] {animation-name: slideLeft, fadeIn; animation-duration: var(--dur), var(--dur); animation-delay: var(--delay), var(--delay); animation-timing-function: var(--easing-out2), ease; animation-fill-mode: both, both;}
[data-anim="zoomIn"], [data-anim-inline="zoomIn"] {--scl: 1.4; --dur: 3s; opacity: 1; filter: brightness(0.2); transform: scale(var(--scl))}
[data-anim="zoomIn"].on,
[data-anim="group"].on [data-anim-inline="zoomIn"] {animation: zoomIn var(--dur) var(--delay) var(--easing-out2) both; transform-origin: center 10%;}

.txt_anim_wrap {overflow: hidden;}
span.txt_anim_wrap {display: inline-block; vertical-align: top;}
.txt_anim {display: inline-block; white-space:nowrap; vertical-align: top; --dur: 0.6s;}

@keyframes slideUp {
	0% {
		transform: translateY(var(--dist));
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes slideUp2 {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(var(--dist));
	}
}

@keyframes slideLeft {
	0% {
		transform: translateX(var(--dist));
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes zoomOut {
	0% {
		transform: scale(var(--scl));
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(var(--scl));
	}
	100% {
		transform: scale(1);
	}
	0%, 5% {
		filter: brightness(0.2);
	}
	100% {
		filter: brightness(1);
	}
}