@charset "UTF-8";

/* [2026-09-01 감사] 웹폰트 @import 를 여기서 뺐습니다.
   @import 는 '이 CSS 를 다 받은 뒤에야' 글꼴을 받으러 갑니다(순서대로 대기).
   HTML 의 <link> 로 옮기면 CSS 와 글꼴을 동시에 받아 화면이 더 빨리 뜹니다.
   실제 <link> 는 public/header.html 과 mxcms/preview.php 에 있습니다. */

/* reset */
html, body {height: 100%; -webkit-text-size-adjust: none}
html {-webkit-box-sizing: border-box;box-sizing: border-box;}
*, *:before, *:after {-webkit-box-sizing: inherit;box-sizing: inherit;}
body {font:1rem/1.5625 'Noto Sans KR', sans-serif; letter-spacing: -0.05em; color: #3a332c;}
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}
hr, 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-layout: fixed; */}
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}
h1, h2, h3, h4, h5, h6 {font-size:inherit; font-weight:normal}
input, select, button, textarea {font:inherit; color:inherit; letter-spacing:inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
textarea {overflow-y:auto; resize:none}

@media (max-width: 992px) {
	html {font-size: 14px;}
	body {line-height: 1.5;}
}

@media (max-width: 576px) {
	html {font-size: 12px;}
}

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

/* common */
.clearfix::after {content:""; display:block; clear:both}
.d_flex {display:-webkit-box;display:-ms-flexbox;display:flex;}
.d_inflex {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}
.flex_ct {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.flex_lt {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
.flex_rt {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
.flex_vct {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.flex_vlt {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.flex_vrt {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.flex_column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.txt_ct {text-align:center}
.txt_lt {text-align: left;}
.txt_rt {text-align:right}
.txt_keep {word-break: keep-all;}
.txt_break {word-break: break-all;}

.inner,
.inner_lg,
.inner_md {position: relative;  margin: 0 auto; padding: 0 1.25rem;}
.inner {max-width: calc(1614px + 2.5rem);}
.inner_lg {max-width: calc(1600px + 2.5rem);} 
.inner_md {max-width: calc(1290px + 2.5rem);}

.t_show,
.xm_show,
.m_show,
.xp_show {display: none;}
.m_hide,
.xm_hide,
.t_hide,
.xt_hide,
.p_hide {display: block;}

@media (min-width: 1501px) {
	.xp_show {display: block !important;}
}

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

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

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

@media (max-width: 766px) {
	.xm_hide {display: none !important;}
	.xm_show {display: block !important;}
}

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

/* text */
.poppins {font-family: 'Poppins', sans-serif;}
.nanumSq {font-family: 나눔스퀘어, 'NanumSquare', 'Noto Sans KR', sans-serif;}
.cormorant {font-family: 'Cormorant Garamond', serif;}

/* color */
.txt_grey,
.txt_gray {color: #666 !important;}
.txt_white {color: #fff !important;}
.txt_red {color: #ed1746 !important;}
.txt_deepred {color: #ae001d !important;}
.txt_brown {color: #524c46 !important;}

.bg_grey,
.bg_gray {background-color: #f4f4f4;}

/* margin */
.mt40 {margin-top: 2.5rem;}
.mt45 {margin-top: 2.813rem;}

@media (max-width: 992px) {
	.mt15m {margin-top: 1.25rem;}
	.mt26m {margin-top: 2.167rem;}

	/* text */
	.txt13m {font-size: 1.084rem !important; line-height: 1.513 !important;}
}

/* btn */
.el_btn {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition-property: color, background, fill; transition-property: color, background, fill; -webkit-transition-duration: .3s; transition-duration: .3s;}
/* [2026-09-01 감사] 브랜드 빨강 #ed1746 은 흰 배경 위에서 명도대비가 4.36:1 로,
   웹 접근성 기준(일반 글자 4.5:1)에 살짝 못 미쳤습니다.
   글자가 옅어 보여 눈이 불편한 분들이 읽기 어렵습니다.
   2% 만 어둡게 한 #e81745 로 바꾸면 4.53:1 이 되어 기준을 넘깁니다.
   (색 차이는 눈으로 구분되지 않습니다. 이 버튼에만 적용하고
    다른 곳의 브랜드색은 그대로 두었습니다) */
.el_btn_more {font-size: 0.875rem; line-height: 1; font-weight: 500; letter-spacing: -0.025em; background: #fff; color: #e81745; border: 1px solid #e81745; width: 9rem; height: 2.5rem; border-radius: 1.25rem;}
.el_btn_more svg {margin-left: .15em; transform: translateY(4%);}
.el_btn_more:hover {background: #e81745; color: #fff;} 
.el_btn_more:hover {fill: #fff;}
.el_btn_basic {background: rgba(255,255,255,0.8); color: #ed1746; font-size: 15px; letter-spacing: -0.025em; font-weight: 500; width: 200px; height: 40px; border-radius: 4px; fill: #ed1746;}
.el_btn_basic svg {height: .9em; margin-left: .54em;}
.el_btn_basic:hover {background: #ed1746; color: #fff; fill: #fff;} 

@media (max-width: 992px) {
	.el_btn_more {width: 65.5%; max-width: 240px; height: 2.75rem; border-radius: 1.38rem; font-size: 1.167rem;}
	.el_btn_basic {background: #ed1746; color: #fff; fill: #fff; font-size: 0.917rem; width: 12.5rem; height: 2.5rem;} 
}

#wrap {min-width: 320px;}

/* header */
#header {position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}
.header_inner {height: 78px;}
.header_logo {width: 145px; position: relative;}
.header_logo a {display: block;}
.header_logo svg {width: 100%; vertical-align: top; fill: #444b51; -webkit-transition: fill 0.5s ease-in-out; transition: fill 0.5s ease-in-out;}
.dark .header_logo svg {fill: #fff;}
.header_title {display: none; text-transform: uppercase;}

@media (min-width: 993px) {
	body:not(.mainpage) #header {transition-property: background, box-shadow; -webit-transition-property: background, box-shadow; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: ease; transition-timing-function: ease;}
	body:not(.mainpage).scroll #header {background: #fff; box-shadow: 0 1px 16px rgba(186,180,176,.28);}
}

@media (max-width: 992px) {
	body:not(.mainpage) #header {border-bottom: 1px solid #ebebeb; background: #fff;}
	body:not(.mainpage) .header_title {display: block;}
	body:not(.mainpage) .header_logo:not(.nav_logo) {display: none;}
	.header_inner {height: 64px;}
	.header_logo {width: 102px; margin: 0 auto;}
	.header_title {text-align: center; margin: auto; font-size: 1.25rem; letter-spacing: -0.025em; font-weight: 700; color: #444b51;} 
}

@media (max-width: 576px) {
	.header_inner {height: 53px;}
	.header_logo {width: 87px;}
}

/* gnb */
.header_nav {-webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#gnb {width: 70%; max-width: 620px; letter-spacing: 0; font-weight: 500; margin-left: auto;}
.gnb_list {display: -ms-flexbox; display:-webkit-box; display:flex;}
.gnb_list > li {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; position: relative;}
.gnb_link {display: block; line-height: 78px; text-align: center;  -webkit-transition: color 0.3s ease-in-out;  transition: color 0.3s ease-in-out; font-size: 14px; letter-spacing: 0; color: #222; text-transform: uppercase;} 
.dark:not(.nav_on) .gnb_link {color: #fff;}
li.on .gnb_link {color: #ed1746;} 

.ie #gnb {margin-left: inherit;}

body:not(.nav_on) .gnb_sub {position: absolute; top: 78px; left: 50%; width: 120px; margin-left: -60px; background: #fff; -webkit-box-shadow: rgba(0, 0, 0, 0.15) -5px 10px 16px 1px; box-shadow: rgba(0, 0, 0, 0.15) -5px 10px 16px 1px; text-align: center; padding: 12px 0 15px; display: none;}
.sub_link {display: block; font-size: 14px; line-height: 1.3; letter-spacing: 0; padding: 0.65em 0; color: #3a332c;}
.sub_link > span {display: inline-block; position: relative;}
.sub_link > span::before,
.sub_link > span::after {content: ""; display: block; position: absolute; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: cubic-bezier(.18,.52,.43,.99); transition-timing-function: cubic-bezier(.18,.52,.43,.99);}
.sub_link > span::before {width: 4px; height: 4px; border-radius: 50%; background: #f16178; right: 0; top: -4px; opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition-property: all; transition-property: all; }
.sub_link > span::after {width: 0; height: 1px; background: #3a332c; left: 0; bottom: 0; -webkit-transition-property: width; transition-property: width; }
body:not(.nav_on) .sub_link:hover > span::before {opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%);}
body:not(.nav_on) .sub_link:hover > span::after {width: 100%;}

@media (max-width: 992px) {
	.header_nav {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; z-index: 100; visibility: hidden;  pointer-events: none; -webkit-transform: translate(100%); transform: translate(100%); -webkit-transition: transform .3s cubic-bezier(.18, .52, .43, .99); transition: transform .3s cubic-bezier(.18, .52, .43, .99); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center;} 
	.header_nav.on {pointer-events: all; visibility: visible; -webkit-transform: translate(0); transform: translate(0);}
	.nav_header {height: 64px; border-bottom: 1px solid #e8e8e8;}
	#gnb {border-top: 1px solid #e8e8e8; width: 100%; max-width: inherit; margin: 0 0 1.66rem; padding-top: 4rem;}
	.gnb_list {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
	.gnb_list > li {flex: 1 1 auto;} /* ie 틀어짐 방지 */ 
	.gnb_link {font-size: 2.167rem; font-weight: 600; letter-spacing: -0.025em; line-height: 2.64; position: relative; z-index: 1;}
	.gnb_sub {display: block !important; height: auto !important; padding: 0 0 0.83rem !important;}
	.gnb_sub li:first-of-type {margin-top: -1.66rem;}
	.sub_link {font-size: 1.417rem; letter-spacing: -0.025em; padding: 0; line-height: 3.1; color: #666;}
}

@media (max-width: 576px) {
	.nav_header {height: 53px;}
}

.header_utiil {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto;} 
.header_utiil a {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20px; height: 20px; text-align: center;}
.header_utiil a + a {margin-left: 10px;}
.header_utiil svg {height: 20px; fill: #444b51; -webkit-transition: fill 0.5s ease-in-out; transition: fill 0.5s ease-in-out;}
.dark:not(.nav_on) .header_utiil svg {fill: #fff;}
.header_utiil a.utiil_btn {width: 72px; height: 20px; letter-spacing: -0.025em; border-radius: 6px; background: #ed1746; color: #fff; font-size: 10px;}
.header_utiil a.utiil_btn img {width: auto; height: 10px; margin-right: 5px; fill: #fff; -webkit-transition: none; transition: none;}

@media (max-width: 992px) {
	.header_utiil a {width: 2.5rem; height: 2.5rem;}
	.header_utiil a + a {margin-left: 2.5rem;}
	.header_utiil svg {height: 2.5rem;}
	.header_utiil a.utiil_btn {width: 9.02rem; height: 2.5rem; font-size: 1.172rem; border-radius: 0.5rem;}
	.header_utiil a.utiil_btn img {height: 1.194rem; margin-right: 0.722rem;}
}

@media (min-width: 993px) {
	.ie .header_utiil {margin-left: inherit; position: absolute; top: 50%; right: 1.25rem; margin-top: -10px;}
}


.nav_btn {position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; width: 4.167rem; height: 100%;}
.nav_toggle {right: 0; cursor: pointer; z-index: 150;}
.nav_toggle .line {position: absolute; font-size: 1.666rem; display: block; width: 1em; height: 0.101em; background: #444b51; -webkit-transition: background 0.5s ease-in-out, opacity 0.3s ease-out, transform 0.3s ease-out; transition: background 0.5s ease-in-out, opacity 0.3s ease-out, transform 0.3s ease-out;}
.nav_toggle .line:first-of-type {-webkit-transform: translateY(-0.26em);transform: translateY(-0.26em);}
.nav_toggle .line:last-of-type {-webkit-transform: translateY(0.26em);transform: translateY(0.26em);}
.nav_toggle.on .line:first-of-type {-webkit-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);}
.nav_toggle.on .line:nth-last-of-type(2) {opacity: 0;}
.nav_toggle.on .line:last-of-type {-webkit-transform: translateY(0) rotate(-45deg);transform: translateY(0) rotate(-45deg);}

.dark:not(.nav_on) .nav_toggle .line {background: #fff;}

.nav_back {left: 0;}
.nav_back img {width: 2.166rem;}

@media (min-width: 993px) {
	.nav_toggle,
	.nav_back,
	.nav_header {display: none;}
}

@media (max-width: 992px) {
	.header_utiil {margin: 0;}
}

/* container */
#container {min-height: 80vh; position: relative;}

body:not(.mainpage) #container {padding-bottom: 100px;}
#container.no_bottom {padding-bottom: 0 !important;}

@media (max-width: 992px) {
	body:not(.mainpage) #container {padding-bottom: 60px;}
}

@media (max-width: 576px) {
	body:not(.mainpage) #container {padding-bottom: 50px;}
}

/* footer */
#footer {background: rgba(0, 6, 15, 0.88); color: #fff; padding: 60px 0;}
.footer_menu {font-size: 1.125rem; line-height: 1; margin-bottom: 1.1em;}
.footer_menu > li + li {padding-left: 0.612em; margin-left: 0.612em; border-left: 1px solid #fff;}
.footer_menu a {display: block;}
#footer address > span {white-space: nowrap;}

@media (min-width: 993px) {
	.footer_inner {padding-left: calc(200px + 1.25rem + 4.05%);}
	.footer_logo {position: absolute; left: 1.25rem; top: 20px; width: 200px;}
}

@media (max-width: 992px) {
	#footer {text-align: center; padding: 40px 0;}
	.footer_menu {font-size: 1.167rem; margin-bottom: 2.2em;}
	.footer_logo {width: 170px; margin: 0 auto 1.4rem;}
}

@media (max-width: 576px) {
	#footer {padding: 30px 0;}
	.footer_logo {width: 146px;}
}

.gotoTop_wrap {position: relative;}
.gotoTop {font-size: 4.125rem; width: 1em; height: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; background: rgba(68, 75, 81, .7); box-shadow: 0 3px 5px rgba(0,0,0,.1); position: fixed; right: 40px; bottom: 120px; z-index: 50; } 
.gotoTop img {max-width: 16px;}

@media (min-width: 993px) {
	.gotoTop.fixed {position: absolute;}
	.mainpage .gotoTop_wrap {display: none;}
	
}

@media (max-width: 992px) {
	.gotoTop {font-size: 3.334rem; right: 1.25rem; bottom: 1.25rem;}
	.gotoTop img {max-width: 0.801rem;}
}