@charset "UTF-8";

:root {
	font-size: 1rem;
	--font-base: 'Pretendard', 'Noto Sans KR', sans-serif;
	--font-sebang: 'SEBANG Gothic', 'Noto Sans KR', sans-serif;
	--font-esamanru: 'esamanru', 'Noto Sans KR', sans-serif;
	--color-point: #bf221d;
	--color-deep: #7d1613;
	--color-light: #e6202a;
	--color-red: #8c1815;
	--color-yellow: #ffdc2e;
	--color-black: #1d1d1b;
	--color-gray: #666;
	--color-gray2: #999;
	--color-gray3: #545454;
	--color-gray4: #e5e5e5;
	--color-gray5: #b2b2b2;
	--color-gray6: #808080;
	--size10: clamp(6px, 1.667vw * 0.6, 10px);
	--size10-5: clamp(5px, 1.389vw * 0.7, 10px);
	--size14: clamp(12px, 3.333vw * 0.5, 14px);
	--size16: clamp(14px, 3.889vw * 0.5, 16px);
	--size16-8: clamp(8px, 2.223vw * 0.65, 16px);
	--size18: clamp(14px, 3.889vw  * 0.5, 18px);
	--size18-16: clamp(16px, 4.444vw  * 0.5, 18px);
	--size20: clamp(10px, 2.778vw * 0.7, 20px);
	--size20-6: clamp(6px, 1.667vw, 20px);
	--size20-16: clamp(16px, 4.444vw * 0.5, 20px);
	--size20-17: clamp(17px, 4.723vw * 0.5, 20px);
	--size24: clamp(20px, 5.556vw * 0.5, 24px);
	--size26: clamp(12px, 3.333vw * 0.8, 26px);
	--size26-14: clamp(14px, 3.889vw * 0.65, 26px);
	--size26-22: clamp(22px, 6.111vw * 0.65, 26px);
	--size28: clamp(14px, 3.889vw * 0.6, 28px);
	--size30: clamp(18px, 5vw * 0.6, 30px);
	--size30-14: clamp(14px, 3.889vw * 0.75, 30px);
	--size30-20: clamp(20px, 5.556vw * 0.55, 30px);
	--size32: clamp(14px, 3.889vw * 0.8, 32px);
	--size32-16: clamp(16px, 4.444vw * 0.7, 32px);
	--size32-17: clamp(17px, 4.723vw * 0.7, 32px);
	--size33: clamp(25px, 6.944vw * 0.5, 33px);
	--size36: clamp(16px, 4.444vw * 0.8, 36px);
	--size40: clamp(15px, 4.167vw * 0.9, 40px);
	--size40-30: clamp(30px, 8.333vw * 0.5, 40px);
	--size41: clamp(23px, 6.389vw * 0.65, 41px);
	--size43: clamp(16px, 4.444vw * 0.9, 43px);
	--size47: clamp(19px, 5.278vw * 0.95, 47px);
	--size48: clamp(37px, 10.278vw * 0.5, 48px);
	--size49: clamp(29px, 8.056vw * 0.55, 49px);
	--size50: clamp(24px, 6.667vw * 0.75, 50px);
	--size50-35: clamp(35px, 9.722vw * 0.55, 50px);
	--size52: clamp(18px, 5vw * 0.9, 52px);
	--size52-44: clamp(44px, 12.222vw * 0.45, 52px);
	--size54: clamp(26px, 7.223vw * 0.7, 54px);
	--size56: clamp(24px, 6.667vw * 0.7, 56px);
	--size58: clamp(24px, 6.667vw * 0.7, 58px);
	--size58-38: clamp(38px, 10.556vw * 0.55, 58px);
	--size60: clamp(40px, 11.112vw * 0.55, 60px);
	--size60-26: clamp(26px, 7.223vw * 0.85, 60px);
	--size60-36: clamp(36px, 10vw * 0.6, 60px);
	--size62: clamp(42px, 11.667vw * 0.55, 62px);
	--size70: clamp(42px, 11.667vw * 0.6, 70px);
	--size70-50: clamp(50px, 13.889vw * 0.5, 70px);
	--size70-54: clamp(54px, 15vw * 0.5, 70px);
	--size80: clamp(52px, 14.444vw * 0.55, 80px);
	--size80-30: clamp(30px, 8.333vw, 80px);
	--size80-32: clamp(32px, 8.889vw * 0.9, 80px);
	--size80-34: clamp(34px, 9.445vw * 0.9, 80px);
	--size80-40: clamp(40px, 11.112vw * 0.7, 80px);
	--size80-42: clamp(42px, 11.667vw * 0.6, 80px);
	--size83: clamp(38px, 10.556vw * 0.75, 83px);
	--size85: clamp(43px, 11.944vw * 0.7, 85px);
	--size100: clamp(42px, 11.667vw * 0.75, 100px);
	--size110: clamp(40px, 11.112vw, 110px);
	--size115: clamp(80px, 22.222vw * 0.55, 115px);
	--size120: clamp(46px, 12.778vw * 0.85, 120px);
	--size135: clamp(65px, 18.056vw * 0.75, 135px);
	--size138: clamp(63px, 17.5vw * 0.8, 138px);
	--size140: clamp(70px, 19.444vw * 0.7, 140px);
	--size152: clamp(70px, 19.444vw * 0.8, 152px);
	--size157: clamp(65px, 18.056vw * 0.85, 157px);
	--size160: clamp(63px, 17.5vw * 0.9, 160px);
	--size160-80: clamp(80px, 22.222vw * 0.7, 160px);
	--size160-70: clamp(70px, 19.444vw * 0.85, 160px);
	--size162: clamp(70px, 19.444vw * 0.85, 162px);
	--size168: clamp(80px, 22.222vw * 0.75, 168px);
	--size170: clamp(80px, 22.222vw * 0.75, 170px);
	--size280: clamp(160px, 44.444vw * 0.65, 280px);
	--lineH16: 1.625;
	--lineH100: 1.2;
	--font-sm: 300;
	--font-rg: 400;
	--font-md: 500;
	--font-semi: 600;
	--font-bd: 700;
	--max-mdd: 1320px;
	--max-full: 1920px;
	--rds6: 6px;
	--rds6-sm: 6px;
	--text-shadow: 3px 5.2px 0px rgba(0, 0, 0, 0.22);
	--text-shadow2: 3px 5.2px 0px rgba(0, 0, 0, 0.22);
	--box-shadow: clamp(2.5px, 0.694vw * 0.7, 5px) clamp(4.33px, 1.203vw * 0.7, 8.66px) clamp(10px, 2.778vw * 0.7, 20px) rgba(0, 0, 0, 0.3);
	--pdd: clamp(16px, 4.359vw, 4.166666vw);
	--trans: .3s ease;
	--easing_in: cubic-bezier(.44,0,.99,.73);
	--easing_out: cubic-bezier(.18,.61,.34,.99);
	--easing_inOut: cubic-bezier(.69,.02,.16,1.15);
	--easing_bounce: cubic-bezier(.68,-0.33,.49,1.3);
	--header: 90px;
	--quick: 113px;
}

@media (max-width: 992px) {
	:root {
		--header: 70px;
		--lineH16: 1.57142;
		--lineH100: 1.2692;
		--rds6-sm: 5px;
		--text-shadow: 1.5px 2.6px 0px rgba(0, 0, 0, 0.22);
		--quick: max(40.278vw * 0.5, 145px);
	}
}

@media (max-width: 576px) {
	:root {
		--rds6-sm: 4px;
	}
}

body {overflow-x: hidden; overflow-y: scroll; -webkit-text-size-adjust: none; word-break: keep-all; word-wrap: break-word; color: #000;} 
*, *::before, *::after {box-sizing: border-box; line-height: inherit; font-family: var(--font-base);}
* {letter-spacing: -0.01em;}
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; 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;}
ul, ol, li {list-style:none}
em, address {font-style:normal}
label, button {cursor:pointer}
a {color:inherit; text-decoration:none}
button {vertical-align:top; background:transparent; font:inherit; -webkit-appearance: none; border: 0;}
button::-moz-focus-inner {padding:0; border:0}
a[disabled],
button:disabled {pointer-events: none;}
a.underline,
button.underline {text-decoration: underline;}
h1, h2, h3, h4, h5, h6 {font-size:inherit; font-weight:normal}
input, select, button, textarea {font:inherit; color:inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
textarea {overflow-y:auto; resize:none}

/* common */
@media (min-width: 1561px) {
	.xlg_show {display: none !important;}
}

@media (min-width: 1321px) {
	.lg_show {display: none !important;}
}

@media (max-width: 1320px) {
	.lg_hide {display: none !important;}
}

@media (min-width: 993px) {
	.t_show {display: none !important;}
}

@media (max-width: 992px) {
	.t_hide {display: none !important;}
}

@media (min-width: 577px) {
	.m_show {display: none !important;}
}

@media (max-width: 576px) {
	.m_hide {display: none !important;}
}

.ly_inner {position: relative; margin: 0 auto; width: 100%; max-width: calc(var(--max, var(--max-mdd)) + var(--pdd) * 2); padding-left: var(--pdd); padding-right: var(--pdd);}
.ly_inner.full {--max: 1920px;}
.txt_wrap {white-space: nowrap;}
.txt_ct {text-align: center;}
.noscroll {overflow: hidden;} 
body.noscroll,
.noscroll .ly_header {padding-right: var(--scrollbar);}

.el_img > img,
.el_img > picture img {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}

.font-set {--size: var(--size16); --line: var(--lineH16); --mg: calc(var(--size) * (1 - var(--line)) * var(--fator, 0.5)); font-size: var(--size); line-height: var(--line);  margin: var(--mg) 0;}

.esamanru, .esamanru * {font-family: var(--font-esamanru) !important;}
.sebang, .sebang * {font-family: var(--font-sebang) !important;}
.txt_yellow {color: var(--color-yellow) !important;}
.txt_point {color: var(--color-light) !important;}

#wrap {min-width: 320px; overflow: hidden;}

/* header */
.preload .ly_header,
.preload .ly_header * {transition: none !important;}
.ly_header {position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background: rgba(0,0,0,0.2); transition: background var(--trans); transition-property: background, top;}
.header_inner {height: var(--header); display: flex; align-items: center; transition: height var(--trans);}
.header_logo {position: relative; z-index: 300;}
.header_logo a {display: block; width: clamp(125px, 34.7223vw * 0.6, 212px);} 
.header_gnb {height: 100%;}
.gnb_list {display: flex;}
.gnb_link {--color: #fff; font-family: var(--font-sebang); font-size: 20px; line-height: 1; font-weight: var(--font-bd); letter-spacing: 0; color: var(--color); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: color var(--trans);}
.gnb_link span {display: inline-block; position: relative; font-family: inherit;}
.gnb_link span::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: translateY(8px) scaleX(var(--scale, 0)); transition: transform .3s ease-out; will-change: transform; pointer-events: none;}
.gnb_link:is(.active, :hover, :focus-visible) {--color: var(--color-yellow);}
.gnb_link.active span::after {--scale: 1;}

@media (min-width: 993px) {
	.header_logo {margin-left: 40px;}
	.header_gnb {width: 68%; max-width: 884px; margin-left: auto;}
	.gnb_list {height: 100%;}
	.gnb_list > li {flex-grow: 1;}
}

@media (max-width: 992px) {
	.header_gnb {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 200; transform: translateX(calc(var(--x, 1) * 100%)); transition: transform .3s var(--easing_out), padding-top var(--trans); pointer-events: none;   visibility: hidden; will-change: transform; background: var(--color-point); padding-top: var(--header); display: flex; align-items: center;}
	.header_gnb.open {--x: 0;  pointer-events: auto;}
	.gnb_list {--size: max(6.111vw * 0.55, 22px); flex-direction: column; width: 100%;}
	.gnb_link {font-size: var(--size); height: 2.8182em;}
}

/* toggle */ 
.nav_toggle {--w: 24px; position: relative; width: calc(var(--w) + var(--pdd) * 2); margin-right: calc(var(--pdd) * -1); height: 100%; z-index: 300; margin-left: auto;}
.nav_toggle .line {display: block; width: var(--w); height: 3px; background: #fff; position: absolute; left: 50%; top: 50%; transform-origin: center; transform: translate(-50%, -50%); transition: var(--trans); transition-property: background, transform, margin-top, opacity;}

.nav_toggle .line:nth-child(1),
.nav_toggle .line:nth-child(3) {margin-top: var(--mg, -7px);}
.nav_toggle .line:nth-child(3) {--mg: 7px;}

.nav_toggle.on .line:nth-child(1),
.nav_toggle.on .line:nth-child(3) {--mg: 0; --rotate: 45deg; transform: translate(-50%, -50%) rotate(var(--rotate)); }
.nav_toggle.on .line:nth-child(3) {--rotate: -45deg;}
.nav_toggle.on .line:nth-child(2) {transform: translate(-50%, -50%) scaleX(0); opacity: 0;}

.ly_container {position: relative;}

/* footer */
.ly_footer {background: #1d1d1b; color: var(--color-gray5); padding: 40px 0 calc(var(--quick) + var(--pb, 50px)); position: relative;}
.footer_inner {display: flex; gap: 70px;} 
.footer_logo {flex-shrink: 0; width: clamp(167px, 46.389vw * 0.5, 199px); opacity: 0.7;}
.footer_content {flex-basis: 1;}
.footer_content address {display: block;}
.footer_content address span {display: inline-block; margin-right: 0.9375em;}
.footer_content .copy {--size: var(--size14); --factor: 0.55; --mt: 22px; display: block; margin-top: calc(var(--mg) + var(--mt)); font-weight: var(--font-sm); color: #666; text-transform: uppercase;}

@media (min-width: 993px) {
	.footer_logo {margin-left: 40px;}
}

@media (max-width: 992px) {
	.ly_footer {--pb: 55px;}
	.footer_inner {flex-direction: column; gap: 26px;}
	.footer_content address span {margin-right: 0.5em; letter-spacing: -0.035em;}
	.footer_content .copy {--mt: 28px;}
}

/* 빠른상담신청 */
.quick_contact {position: fixed; left: 0; bottom: 0; width: 100%; height: var(--quick); background: #e60012; z-index: 10; box-shadow: -8px 0px 10px rgba(0, 0, 0, 0.1);}
.quick_contact .inner,
.quick_form,
.quick_form .col {display: flex; align-items: center;}
.quick_contact .inner {height: 100%;}
.quick_contact .img {flex-shrink: 0; width: min(11.042vw * 1.5, 212px); margin: -25px min(1.198vw, 23px) 0 min(0.782vw, 15px); filter: drop-shadow(var(--box-shadow));} /* 1920px 기준 */
.quick_contact .heading {flex-shrink: 0; font-size: min(1.563vw * 1.5, 30px); line-height: 1; white-space: nowrap; font-weight: var(--font-bd); color: #fff; padding-right: min(2.6045vw, 50px);}
.quick_form {gap: var(--size16-8);}
.quick_form .inputs {flex-grow: 1; width: 100%; gap: var(--size10-5);}
.quick_form .frm_input {flex: 1; border-color: var(--color-red);}
.quick_form .agree {color: #fff; white-space: nowrap; font-size: 16px; line-height: 1; min-height: var(--size20-16);}
.quick_form .agree .btn {position: relative; margin-right: 4px;}
.quick_form .agree .btn::after {content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: currentColor;}
.quick_form .frm_checkbox {display: inline-flex; align-items: center;}
.quick_form .frm_checkbox label {width: var(--size20-16); height: var(--size20-16); display: inline-block; padding: 0; margin-right: 8px;}
.quick_form .btn_submit {flex-shrink: 0; font-size: var(--size24); font-weight: var(--font-bd); color: #000; background: var(--color-yellow); width: min(11.98vw, 230px); height: 2.6667em; border-radius: var(--rds6); box-shadow: var(--text-shadow2); padding-top: .3em;}

@media (min-width: 993px) {
	.quick_form .inputs {height: 54px; max-width: 710px;}
	.quick_form .agree {padding-right: min(1.250vw, 24px);}
}

@media (max-width: 992px) {
	.quick_form {flex-direction: column; align-items: flex-start; width: 100%;}
	.quick_form .frm_input {--pl: 0.9286em;}
	.quick_form .agree {font-size: var(--size14);}
	.quick_form .btn_submit {width: 100%; height: 2.35em;}
}

.gotoTop {position: fixed; right: 1.510vw; bottom: 42px; margin-bottom: var(--quick); z-index: 20; width: 56px; transition: opacity var(--trans); display: block;} /* 1920px 기준 */
.gotoTop:not(.on) {opacity: 0;}

@media (max-width: 992px) {
	.gotoTop {width: 50px; right: min(1.667vw, 6px); bottom: 32px; transform: translateY(30%);}
	.gotoTop.fixed {position: absolute; bottom: 0; margin-bottom: 0;}
}

/* form */
.frm_field {display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px clamp(30px, 3.024vw, 50px)} /* 992px 기준 */
.frm_field .row {display: grid; grid-template-columns: min-content 1fr; align-items: center;}
.frm_label {font-size: var(--size20-16); line-height: 1; font-weight: var(--font-bd); color: var(--color-black); position: relative;} 
.frm_label.req::after {--x: 0.7em; --y: -0.3em; content: "*"; position: absolute; right: 0; top: 0; font-family: var(--font-base); color: var(--color-red); transform: translate(var(--x), var(--y));}
.frm_input {--pl: 1.4375em; width: 100%; font-size: var(--size16); height: var(--size52-44); background: #fff; border: 1px solid var(--color-gray2); border-radius: var(--rds6); color: var(--color-black); padding: 0 var(--pl);}
.frm_input::-webkit-input-placeholder {color: var(--color-gray6);}
.frm_input::-moz-placeholder {color: var(--color-gray6);}
.frm_input::placeholder {color: var(--color-gray6);}
.frm_radio input,
.frm_checkbox input {position: absolute; opacity: 0; pointer-events: none;}
.frm_radio_box {--bd: var(--color-gray2); display: flex; border-radius: var(--rds6); overflow: hidden; position: relative;}
.frm_radio_box .frm_radio {flex: 1;}
.frm_radio_box label {background: var(--bg, #fff); display: flex; justify-content: center; align-items: center; font-size: var(--size16); height: var(--size52-44); border: 1px solid var(--bd);}
.frm_radio_box .frm_radio:first-of-type label {border-top-left-radius: var(--rds6); border-bottom-left-radius: var(--rds6); border-right: 0;}
.frm_radio_box .frm_radio:last-of-type label {border-top-right-radius: var(--rds6); border-bottom-right-radius: var(--rds6); border-left: 0;}
.frm_radio_box .frm_radio input:checked + label {--bg: var(--color-point); color: #fff; border-color: var(--color-point);}
.frm_checkbox label {--w: var(--size20-16);  position: relative; padding-left: calc(var(--w) + var(--pl, 0.875em)); display: inline-block;}
.frm_checkbox label::before {content: ""; position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: 1; background: #fff; border: 1px solid var(--color-gray2); border-radius: var(--rds6-sm);}
.frm_checkbox input:checked + label::before {background: var(--color-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath fill='%23fff' d='M5.46 11 0 5.04l1.57-1.29 3.8 4.15C6.49 6.57 8.74 3.95 11.76.73l.69-.73L14 1.3l-.69.73C8.98 6.65 6.26 10 6.23 10.04l-.77.96Z'/%3E%3C/svg%3E") no-repeat center/70% auto; border-color: var(--color-light);}
.frm_checkbox.white label::before,
.frm_checkbox.white input:checked + label::before {border-color: transparent; background-color: #fff;}
.frm_checkbox.white input:checked + label::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath fill='%238c1815' d='M5.46 11 0 5.04l1.57-1.29 3.8 4.15C6.49 6.57 8.74 3.95 11.76.73l.69-.73L14 1.3l-.69.73C8.98 6.65 6.26 10 6.23 10.04l-.77.96Z'/%3E%3C/svg%3E");}
.frm_agree {display: flex; align-items: center; font-size: var(--size18); color: var(--color-black);}
.frm_agree .frm_checkbox {font-weight: var(--font-bd);}
.frm_agree .btn {margin-left: auto;} 
.frm_field + .frm_agree {margin-top: var(--size50);}

@media (min-width: 993px) {
	.frm_agree {background: #fff; height: 64px; border-radius: var(--rds6); border: 1px solid var(--color-gray2); padding: 0 23px; font-size: 18px;}
}

@media (max-width: 992px) {
	.frm_field {grid-template-columns: 1fr; gap: max(7.2223vw * .5, 26px);}
	.frm_field .row {grid-template-columns: 1fr; gap: max(2.223vw * .5, 8px);}
	.frm_label.req::after {--x: 0.75em; --y: -0.25em;}
	.frm_input {--pl: 1.07143em;}
	.frm_checkbox label {--pl: 0.57143em;}
	.frm_agree .btn {font-size: 0.78572em;}
}

/* btn */
.el_btn {--color: inherit; --bg: transparent; --bd: 1px solid transparent; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; color: var(--color); background: var(--bg); border: 1px solid var(--bd); line-height: 1; padding-bottom: .15em;}
.btn_area {display: flex; justify-content: center;}

/* modal */
.modal {display: none; position: fixed; left: 0; top: 0; z-index: 999;}
.modal.open {display: block;}
.modal.hide {opacity: 0; pointer-events: none; transition: opacity .3s ease;}
.modal_module {position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; padding: 6.875vh calc(var(--pdd) - 6px); pointer-events: none;}
.modal_content {width: 100%; max-width: 580px; background: #fff; position: relative; pointer-events: all; box-shadow: -4px 6.93px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden;}
.modal_body {padding: 40px; color: #4c4c4c; position: relative;}
.modal .heading {font-size: 24px; line-height: 1; font-weight: var(--font-bd); color: var(--color-black); margin-bottom: var(--size48);}
.modal .heading.lv2 {font-size: 20px; line-height: 1; margin-bottom: 22px;}
.modal .modal_close {position: absolute; right: 24px; top: 24px; width: var(--size26-22); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.44' height='20.438'%3E%3Cpath fill='%23111' d='m20.43 1.427-19 19-1.42-1.416 19-19ZM1.43.011l19 19-1.42 1.416-19-19Z'/%3E%3C/svg%3E") no-repeat center / 80%;}

.dim {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.67); z-index: 900; display: none;}

@media (max-width: 992px) {
	.modal {--pl: min(5.8824%, 40px);}
	.modal_body {padding: 40px var(--pl);}
	.modal .heading {margin-bottom: 38px;}
	.modal .heading.lv2 {margin-bottom: 17px;}
	.modal .modal_close {right: calc(var(--pl) * 0.6); top: 16px;}
}