@charset "UTF-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ reset ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* font-family */
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-style: normal;
  src: url("/resource/fonts/Pretendard-Thin.subset.woff2") format("woff2"), url("/resource/fonts/Pretendard-Thin.subset.woff") format("woff"), url("/resource/fonts/Pretendard-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  src: url("/resource/fonts/Pretendard-Light.subset.woff2") format("woff2"), url("/resource/fonts/Pretendard-Light.subset.woff") format("woff"), url("/resource/fonts/Pretendard-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  src: url("/resource/fonts/Pretendard-Regular.subset.woff2") format("woff2"), url("/resource/fonts/Pretendard-Regular.subset.woff") format("woff"), url("/resource/fonts/Pretendard-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  src: url("/resource/fonts/Pretendard-Medium.subset.woff2") format("woff2"), url("/resource/fonts/Pretendard-Medium.subset.woff") format("woff"), url("/resource/fonts/Pretendard-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  src: url("/resource/fonts/Pretendard-SemiBold.subset.woff2") format("woff2"), url("/resource/fonts/Pretendard-SemiBold.subset.woff") format("woff"), url("/resource/fonts/Pretendard-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  src: url("/resource/fonts/Pretendard-Bold.subset.woff2") format("woff2"), url("/resource/fonts/Pretendard-Bold.subset.woff") format("woff"), url("/resource/fonts/Pretendard-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-style: normal;
  src: url("/resource/fonts/Pretendard-Black.subset.woff2") format("woff2"), url("/resource/fonts/Pretendard-Black.subset.woff") format("woff"), url("/resource/fonts/Pretendard-Black.ttf") format("truetype");
}
/* base */
html,
body,
div,
span,
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,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

em,
address {
  font-style: normal;
}

html {
  position: relative;
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Pretendard", "Malgun Gothic", "dotum", "sans-serif";
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary,
picture {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
}

ol,
ul {
  list-style: none;
}

legend {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  text-indent: -10000px;
  overflow: hidden;
}

button,
input {
  border-radius: 0;
  color: inherit;
}

input,
select,
textarea,
pre {
  vertical-align: middle;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Pretendard";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
}

h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img {
  margin: 0;
}

img,
fieldset {
  border: 0 none;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0 none;
  margin: 0;
  padding: 0;
  object-fit: cover;
}

hr {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

input[type=button],
input[type=submit],
input[type=reset],
button {
  text-transform: none;
  vertical-align: middle;
  border: 0 none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  font-family: "Pretendard";
}

select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

a {
  color: #000;
  text-decoration: none;
}

a:link,
a:visited {
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: none;
}

a img {
  border: 0;
  padding: 0;
}

:focus,
input:focus,
button:focus,
select:focus,
input[type=radio]:focus + label,
input[type=checkbox]:focus + label {
  outline: 2px dashed #000;
}

table {
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

table caption {
  overflow: hidden;
  left: 0;
  right: 0;
  width: 1px;
  height: 1px;
  margin-left: -10rem;
  text-indent: -10rem;
}

i {
  font-style: normal;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ variables ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
:root {
  /* font */
  --body-xl: 2.1rem;
  --body-lg: 1.9rem;
  --body-md: 1.7rem;
  --body-sm: 1.5rem;
  --body-xs: 1.3rem;
  /* main color */
  --main: #008b4f;
  --main-bg: #f3faf7;
  --main-font: #006f3f;
  --main-dark: #003f24;
  --point: #cfff60;
  --link: #0B50D0;
  --disabled: #6D7882;
  --disabled-bg: #CDD1D5;
  --disabled-line: #B1B8BE;
  --disabled-btn: #D7DCE2;
  --primary: #256ef4;
  --primary-bg: #ECF2FE;
  --secondary: #BD2C0F;
  --secondary-bg: #FDEFEC;
  /* sub color */
  --sub: #3a566e;
  --sub-bg: #f6f9fb;
  --sub-dark: #263c4f;
  --sub-black: #1a2731;
  /* gray color */
  --gray-bg: #f7f7f7;
  --gray-line1: #dddddd;
  --gray-line2: #bbc3cb;
  --gray-font: #85929e;
  --gray-dark: #464c53;
  --gray-black: #111111;
  /* badge */
  --bdg-at: var(--sub-dark);
  --bdg-doc: var(--main-font);
  --bdg-purple: #9318ca;
  --bdg-red: #b4311f;
  --bdg-sky: #0d86ba;
  --bdg-yellow: #a9770b;
  --bdg-green: #006f3f;
  --bdg-blue: #3041b2;
  --bdg-orange: #ce5600;
  --bdg-grass: #678309;
  --bdg-pink: #ce2c72;
  --bdg-brown: #6E2A0D;
  --bdg-cyan: #14506E;
  --bdg-black: #111;
  --bdg-white: #fff;
  --bdg-gray: #888;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ style ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.blind {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  border: 0;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* font */
.body-lg {
  font-size: var(--body-lg);
}

.body-md {
  font-size: var(--body-md);
}

.body-sm {
  font-size: var(--body-sm);
}

.body-xs {
  font-size: var(--body-xs);
}

.fw-300 {
  font-weight: 300;
}

.fw-500 {
  font-weight: 500;
}

.fw-700 {
  font-weight: 700;
}

/* align */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.justify-end {
  justify-content: flex-end;
}

/* icon */
.bi {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  text-indent: -9999em;
}
.bi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask: no-repeat center/contain;
  mask: no-repeat center/contain;
  background-color: currentColor;
}
.bi-bg::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bi-new {
  width: 1.8rem;
  height: 1.8rem;
  background-color: #f66438;
  border-radius: 0.4rem;
}
.bi-new::before {
  width: 0.9rem;
  -webkit-mask-image: url("/resource/images/icon/new.svg");
  mask-image: url("/resource/images/icon/new.svg");
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bi-answer::before {
  -webkit-mask-image: url("/resource/images/icon/answer.svg");
  mask-image: url("/resource/images/icon/answer.svg");
}
.bi-arrow-down::before {
  -webkit-mask-image: url("/resource/images/icon/arrow-down.svg");
  mask-image: url("/resource/images/icon/arrow-down.svg");
}
.bi-arrow-drop-down::before {
  -webkit-mask-image: url("/resource/images/icon/arrow-drop-down.svg");
  mask-image: url("/resource/images/icon/arrow-drop-down.svg");
}
.bi-arrow-drop-up::before {
  -webkit-mask-image: url("/resource/images/icon/arrow-drop-up.svg");
  mask-image: url("/resource/images/icon/arrow-drop-up.svg");
}
.bi-arrow-left::before {
  -webkit-mask-image: url("/resource/images/icon/arrow-left.svg");
  mask-image: url("/resource/images/icon/arrow-left.svg");
}
.bi-arrow-right::before {
  -webkit-mask-image: url("/resource/images/icon/arrow-right.svg");
  mask-image: url("/resource/images/icon/arrow-right.svg");
}
.bi-arrow-sort-both::before {
  -webkit-mask-image: url("/resource/images/icon/arrow-sort-both.svg");
  mask-image: url("/resource/images/icon/arrow-sort-both.svg");
}
.bi-arrow-top::before {
  -webkit-mask-image: url("/resource/images/icon/arrow-top.svg");
  mask-image: url("/resource/images/icon/arrow-top.svg");
}
.bi-attach::before {
  -webkit-mask-image: url("/resource/images/icon/attach.svg");
  mask-image: url("/resource/images/icon/attach.svg");
}
.bi-bookmarks::before {
  -webkit-mask-image: url("/resource/images/icon/bookmarks.svg");
  mask-image: url("/resource/images/icon/bookmarks.svg");
}
.bi-calendar::before {
  -webkit-mask-image: url("/resource/images/icon/calendar.svg");
  mask-image: url("/resource/images/icon/calendar.svg");
}
.bi-call::before {
  -webkit-mask-image: url("/resource/images/icon/call.svg");
  mask-image: url("/resource/images/icon/call.svg");
}
.bi-certification_mobile::before {
  -webkit-mask-image: url("/resource/images/icon/certification_mobile.svg");
  mask-image: url("/resource/images/icon/certification_mobile.svg");
}
.bi-certified::before {
  -webkit-mask-image: url("/resource/images/icon/certified.svg");
  mask-image: url("/resource/images/icon/certified.svg");
}
.bi-close::before {
  -webkit-mask-image: url("/resource/images/icon/close.svg");
  mask-image: url("/resource/images/icon/close.svg");
}
.bi-copy::before {
  -webkit-mask-image: url("/resource/images/icon/copy.svg");
  mask-image: url("/resource/images/icon/copy.svg");
}
.bi-document::before {
  -webkit-mask-image: url("/resource/images/icon/document.svg");
  mask-image: url("/resource/images/icon/document.svg");
}
.bi-document-check::before {
  -webkit-mask-image: url("/resource/images/icon/document-check.svg");
  mask-image: url("/resource/images/icon/document-check.svg");
}
.bi-download::before {
  -webkit-mask-image: url("/resource/images/icon/download.svg");
  mask-image: url("/resource/images/icon/download.svg");
}
.bi-edit::before {
  -webkit-mask-image: url("/resource/images/icon/edit.svg");
  mask-image: url("/resource/images/icon/edit.svg");
}
.bi-ellipsis-horizontal::before {
  -webkit-mask-image: url("/resource/images/icon/ellipsis-horizontal.svg");
  mask-image: url("/resource/images/icon/ellipsis-horizontal.svg");
}
.bi-ellipsis-vertical::before {
  -webkit-mask-image: url("/resource/images/icon/ellipsis-vertical.svg");
  mask-image: url("/resource/images/icon/ellipsis-vertical.svg");
}
.bi-exclamation::before {
  -webkit-mask-image: url("/resource/images/icon/exclamation.svg");
  mask-image: url("/resource/images/icon/exclamation.svg");
}
.bi-expand-less::before {
  -webkit-mask-image: url("/resource/images/icon/expand-less.svg");
  mask-image: url("/resource/images/icon/expand-less.svg");
}
.bi-expand-more::before {
  -webkit-mask-image: url("/resource/images/icon/expand-more.svg");
  mask-image: url("/resource/images/icon/expand-more.svg");
}
.bi-figma-library::before {
  -webkit-mask-image: url("/resource/images/icon/figma-library.svg");
  mask-image: url("/resource/images/icon/figma-library.svg");
}
.bi-global::before {
  -webkit-mask-image: url("/resource/images/icon/global.svg");
  mask-image: url("/resource/images/icon/global.svg");
}
.bi-headphones::before {
  -webkit-mask-image: url("/resource/images/icon/headphones.svg");
  mask-image: url("/resource/images/icon/headphones.svg");
}
.bi-heart::before {
  -webkit-mask-image: url("/resource/images/icon/heart.svg");
  mask-image: url("/resource/images/icon/heart.svg");
}
.bi-home::before {
  -webkit-mask-image: url("/resource/images/icon/home.svg");
  mask-image: url("/resource/images/icon/home.svg");
}
.bi-system-info::before {
  -webkit-mask-image: url("/resource/images/icon/system-info.svg");
  mask-image: url("/resource/images/icon/system-info.svg");
}
.bi-img::before {
  -webkit-mask-image: url("/resource/images/icon/img.svg");
  mask-image: url("/resource/images/icon/img.svg");
}
.bi-inquiry::before {
  -webkit-mask-image: url("/resource/images/icon/inquiry.svg");
  mask-image: url("/resource/images/icon/inquiry.svg");
}
.bi-instagram::before {
  -webkit-mask-image: url("/resource/images/icon/instagram.svg");
  mask-image: url("/resource/images/icon/instagram.svg");
}
.bi-join::before {
  -webkit-mask-image: url("/resource/images/icon/join.svg");
  mask-image: url("/resource/images/icon/join.svg");
}
.bi-link::before {
  -webkit-mask-image: url("/resource/images/icon/link.svg");
  mask-image: url("/resource/images/icon/link.svg");
}
.bi-list::before {
  -webkit-mask-image: url("/resource/images/icon/list.svg");
  mask-image: url("/resource/images/icon/list.svg");
}
.bi-login::before {
  -webkit-mask-image: url("/resource/images/icon/login.svg");
  mask-image: url("/resource/images/icon/login.svg");
}
.bi-logout::before {
  -webkit-mask-image: url("/resource/images/icon/logout.svg");
  mask-image: url("/resource/images/icon/logout.svg");
}
.bi-mail::before {
  -webkit-mask-image: url("/resource/images/icon/mail.svg");
  mask-image: url("/resource/images/icon/mail.svg");
}
.bi-menu::before {
  -webkit-mask-image: url("/resource/images/icon/menu.svg");
  mask-image: url("/resource/images/icon/menu.svg");
}
.bi-more::before {
  -webkit-mask-image: url("/resource/images/icon/more.svg");
  mask-image: url("/resource/images/icon/more.svg");
}
.bi-multi::before {
  -webkit-mask-image: url("/resource/images/icon/multi.svg");
  mask-image: url("/resource/images/icon/multi.svg");
}
.bi-new-folder::before {
  -webkit-mask-image: url("/resource/images/icon/new-folder.svg");
  mask-image: url("/resource/images/icon/new-folder.svg");
}
.bi-opover-info::before {
  -webkit-mask-image: url("/resource/images/icon/opover-info.svg");
  mask-image: url("/resource/images/icon/opover-info.svg");
}
.bi-panel-close::before {
  -webkit-mask-image: url("/resource/images/icon/panel-close.svg");
  mask-image: url("/resource/images/icon/panel-close.svg");
}
.bi-panel-open::before {
  -webkit-mask-image: url("/resource/images/icon/panel-open.svg");
  mask-image: url("/resource/images/icon/panel-open.svg");
}
.bi-pdf::before {
  -webkit-mask-image: url("/resource/images/icon/pdf.svg");
  mask-image: url("/resource/images/icon/pdf.svg");
}
.bi-popover-help::before {
  -webkit-mask-image: url("/resource/images/icon/popover-help.svg");
  mask-image: url("/resource/images/icon/popover-help.svg");
}
.bi-printer::before {
  -webkit-mask-image: url("/resource/images/icon/printer.svg");
  mask-image: url("/resource/images/icon/printer.svg");
}
.bi-reset::before {
  -webkit-mask-image: url("/resource/images/icon/reset.svg");
  mask-image: url("/resource/images/icon/reset.svg");
}
.bi-scrap::before {
  -webkit-mask-image: url("/resource/images/icon/scrap.svg");
  mask-image: url("/resource/images/icon/scrap.svg");
}
.bi-search::before {
  -webkit-mask-image: url("/resource/images/icon/search.svg");
  mask-image: url("/resource/images/icon/search.svg");
}
.bi-setting::before {
  -webkit-mask-image: url("/resource/images/icon/setting.svg");
  mask-image: url("/resource/images/icon/setting.svg");
}
.bi-share::before {
  -webkit-mask-image: url("/resource/images/icon/share.svg");
  mask-image: url("/resource/images/icon/share.svg");
}
.bi-shortcut::before {
  -webkit-mask-image: url("/resource/images/icon/shortcut.svg");
  mask-image: url("/resource/images/icon/shortcut.svg");
}
.bi-star::before {
  -webkit-mask-image: url("/resource/images/icon/star.svg");
  mask-image: url("/resource/images/icon/star.svg");
}
.bi-time::before {
  -webkit-mask-image: url("/resource/images/icon/time.svg");
  mask-image: url("/resource/images/icon/time.svg");
}
.bi-top::before {
  -webkit-mask-image: url("/resource/images/icon/top.svg");
  mask-image: url("/resource/images/icon/top.svg");
}
.bi-upload::before {
  -webkit-mask-image: url("/resource/images/icon/upload.svg");
  mask-image: url("/resource/images/icon/upload.svg");
}
.bi-user::before {
  -webkit-mask-image: url("/resource/images/icon/user.svg");
  mask-image: url("/resource/images/icon/user.svg");
}
.bi-view::before {
  -webkit-mask-image: url("/resource/images/icon/view.svg");
  mask-image: url("/resource/images/icon/view.svg");
}
.bi-view-all::before {
  -webkit-mask-image: url("/resource/images/icon/view-all.svg");
  mask-image: url("/resource/images/icon/view-all.svg");
}
.bi {
  /* icon-fill */
}
.bi-ai::before {
  background: url("/resource/images/icon/ai.svg") no-repeat center/contain;
}
.bi-annotation::before {
  background: url("/resource/images/icon/annotation.svg") no-repeat center/contain;
}
.bi-check-circle::before {
  background: url("/resource/images/icon/check-circle.svg") no-repeat center/contain;
}
.bi-government::before {
  background: url("/resource/images/icon/government.svg") no-repeat center/contain;
}
.bi-delete-circle::before {
  background: url("/resource/images/icon/delete-circle.svg") no-repeat center/contain;
}
.bi-system-danger::before {
  background: url("/resource/images/icon/system-danger.svg") no-repeat center/contain;
}
.bi-system-info::before {
  background: url("/resource/images/icon/system-info.svg") no-repeat center/contain;
}
.bi-system-success::before {
  background: url("/resource/images/icon/system-success.svg") no-repeat center/contain;
}
.bi-system-warning::before {
  background: url("/resource/images/icon/system-warning.svg") no-repeat center/contain;
}

/* badge */
.bdg {
  display: inline-block;
  padding: 0 0.8rem;
  line-height: 2.4rem;
  font-size: var(--body-sm);
  background: #fff;
  border: 1px solid currentColor;
  box-sizing: border-box;
  border-radius: 0.4rem;
}
.bdg-purple {
  /* 무역거래결제 */
  color: var(--bdg-purple);
}
.bdg-red {
  /* 관세통관 */
  color: var(--bdg-red);
}
.bdg-sky {
  /* 위생검역 */
  color: var(--bdg-sky);
}
.bdg-yellow {
  /* 해외인증 */
  color: var(--bdg-yellow);
}
.bdg-green {
  /* 지식재산 */
  color: var(--bdg-green);
}
.bdg-blue {
  /* 계약클레임 */
  color: var(--bdg-blue);
}
.bdg-orange {
  /* 외환환리스크 */
  color: var(--bdg-orange);
}
.bdg-grass {
  /* 물류운송 */
  color: var(--bdg-grass);
}
.bdg-pink {
  /* 마케팅커머스 */
  color: var(--bdg-pink);
}
.bdg-brown {
  /* 지역전문가 */
  color: var(--bdg-brown);
}
.bdg-cyan {
  /* 품목전문가 */
  color: var(--bdg-cyan);
}
.bdg-at {
  /* 기관명 */
  color: var(--bdg-at);
}
.bdg-doc {
  /* 자료실 */
  color: var(--bdg-doc);
}
.bdg-black {
  color: var(--bdg-black);
}
.bdg-white {
  color: var(--bdg-white);
  background: none;
}
.bdg-black-fill {
  color: #fff;
  background: var(--bdg-black);
  border-color: var(--bdg-black);
}

/* button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  vertical-align: middle;
  background: #fff;
  border-radius: 0.8rem;
  box-sizing: border-box;
  line-height: normal;
  cursor: pointer;
}
.btn span {
  display: inline-block;
  font-weight: 500;
}
.btn .bi {
  width: 2rem;
  height: 2rem;
}
.btn-lg {
  min-width: 9rem;
  height: 6.4rem;
  padding: 0 2rem;
  font-size: var(--body-lg);
}
.btn-md {
  min-width: 7.8rem;
  height: 4.8rem;
  padding: 0 1.6rem;
  font-size: var(--body-md);
}
.btn-sm {
  min-width: 6.4rem;
  height: 4rem;
  padding: 0 1.2rem;
  font-size: var(--body-sm);
}
.btn-main {
  background: var(--main);
  color: #fff;
}
.btn-sub {
  background: var(--sub-dark);
  color: #fff;
}
.btn-light {
  border: 1px solid var(--sub-dark);
  box-sizing: border-box;
  color: var(--gray-black);
}
.btn-light-secondary {
  border: 1px solid var(--secondary);
  box-sizing: border-box;
  color: var(--secondary);
}
.btn-primary {
  background: var(--primary-bg);
  color: var(--primary);
  border: 1px solid var(--primary);
  box-sizing: border-box;
}
.btn-secondary {
  background: var(--secondary-bg);
  color: var(--secondary);
  border: 1px solid var(--secondary);
  box-sizing: border-box;
}
.btn-link {
  color: var(--link);
  text-decoration: underline;
}
.btn-bdg {
  cursor: not-allowed;
  pointer-events: none;
}
.btn.disabled {
  background: var(--disabled-btn);
  border-color: var(--disabled-btn);
  color: var(--disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* font */
.font-black {
  color: var(--gray-black);
}
.font-dark {
  color: var(--gray-dark);
}
.font-gray {
  color: var(--gray-font);
}
.font-blue {
  color: #3041b2;
}
.font-main {
  color: var(--main);
}
.font-primary {
  color: var(--primary);
}
.font-secondary {
  color: var(--secondary);
}

@media screen and (max-width: 1024px) {
  /* icon */
  .bi {
    width: 2rem;
    height: 2rem;
  }
  /* badge */
  .bdg {
    padding: 0 1rem;
    line-height: 2.5rem;
    border-radius: 0.5rem;
  }
  /* button */
  .btn {
    gap: 0.5rem;
    border-radius: 0.5rem;
  }
  .btn-lg {
    height: 6rem;
    padding: 0 1.5rem;
    font-size: 1.875rem;
  }
  .btn-md {
    height: 5rem;
    padding: 0 1.5rem;
    font-size: 1.75rem;
  }
  .btn-sm {
    height: 4.25rem;
    padding: 0 1rem;
    font-size: 1.625rem;
  }
}
/* datepicker */
.ui-widget.ui-widget-content {
  overflow: hidden;
  border: none;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  border-radius: 0;
}

.ui-datepicker {
  display: none;
  width: 320px;
  padding: 10px 0;
  z-index: 70 !important;
}
.ui-datepicker th,
.ui-datepicker td {
  padding: 0;
}
.ui-datepicker .ui-widget-header {
  position: relative;
  padding: 14px 0;
  border: none;
  background: #fff;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  font-family: "Pretendard";
  width: 80px;
  height: 36px;
  margin: 0 4px;
  padding: 0 10px;
  border: 1px solid var(--gray-line1);
  font-weight: 500;
  color: #111;
  box-sizing: border-box;
  border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='9px'%3E%3Cpath fill-rule='evenodd' fill='rgb(35, 35, 35)' d='M13.494,2.313 L7.118,8.689 L7.048,8.620 L6.979,8.689 L0.602,2.313 L2.016,0.899 L7.048,5.931 L12.080,0.899 L13.494,2.313 Z'/%3E%3C/svg%3E") no-repeat right 10px center/10px;
}
.ui-datepicker select.ui-datepicker-month {
  margin-left: 8px;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}
.ui-datepicker .ui-datepicker-title .ui-datepicker-year option,
.ui-datepicker .ui-datepicker-title .ui-datepicker-month option {
  background: #fff;
  color: #333;
}
.ui-datepicker .ui-datepicker-calendar {
  width: 300px;
  margin: 0 auto;
  font-size: 16px;
}
.ui-datepicker .ui-datepicker-calendar thead th {
  padding: 0;
  line-height: 36px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 14px;
  width: 36px;
  height: 36px;
  text-indent: -9999px;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='9px'%3E%3Cpath fill-rule='evenodd' fill='rgb(35, 35, 35)' d='M13.494,2.313 L7.118,8.689 L7.048,8.620 L6.979,8.689 L0.602,2.313 L2.016,0.899 L7.048,5.931 L12.080,0.899 L13.494,2.313 Z'/%3E%3C/svg%3E") no-repeat center/14px;
}
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  background: none;
  border: none;
}
.ui-datepicker .ui-datepicker-prev {
  left: 10px;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
  transform: rotate(90deg);
}
.ui-datepicker .ui-datepicker-next {
  right: 10px;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
  transform: rotate(-90deg);
}
.ui-datepicker .ui-state-default {
  display: block;
  border: none;
  width: 36px;
  line-height: 36px;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  color: #111;
  background: #fff;
}
.ui-datepicker .ui-datepicker-today .ui-state-default {
  text-decoration: underline;
}
.ui-datepicker .ui-datepicker-current-day .ui-state-default {
  background: var(--sub-dark);
  color: #fff;
  font-weight: 700;
}
.ui-datepicker .ui-datepicker-buttonpane {
  overflow: hidden;
  width: 280px;
  margin: 0 auto;
  padding: 0;
  border: none;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  cursor: pointer;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 50px;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

@media screen and (max-width: 1024px) {
  .ui-datepicker {
    width: 300px;
  }
  .ui-datepicker .ui-datepicker-calendar {
    width: 280px;
  }
  .ui-datepicker .ui-datepicker-buttonpane {
    width: 260px;
  }
}
@media screen and (max-width: 767px) {
  .ui-datepicker {
    left: 50% !important;
    transform: translateX(-50%);
  }
  .ui-datepicker .ui-datepicker-title,
  .ui-datepicker .ui-datepicker-calendar,
  .ui-datepicker .ui-datepicker-buttonpane button {
    font-size: 14px;
  }
  .ui-datepicker .ui-datepicker-buttonpane button {
    line-height: 40px;
  }
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ common ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-font);
  border-radius: 2rem;
}

::-webkit-scrollbar-track {
  background: var(--gray-line1);
  border-radius: 2rem;
}

::-webkit-scrollbar-corner {
  background: var(--gray-line1);
}

/* skip */
.skipNav {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}
.skipNav a {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -10000px 0 0 -10000px;
  padding: 0;
  background-color: #000;
  text-align: center;
  overflow: hidden;
  color: #fff;
  font-weight: 600;
}
.skipNav a:hover, .skipNav a:active, .skipNav a:focus {
  margin: 0;
  width: 100%;
  height: auto;
  padding: 10px 0;
}

/* header */
.btnMoArea {
  display: none;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  z-index: 50;
}
.header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20.8rem;
  background: rgba(21, 34, 44, 0.9);
  box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.4s, opacity 0.3s;
  z-index: 0;
}
.header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gray-line1);
  z-index: 1;
}
.header .headWrap {
  position: relative;
}
.header .logo {
  position: absolute;
  top: 0;
  left: 2.0833%;
  height: 100%;
  z-index: 1;
}
.header .logo a {
  display: block;
  width: 27.2rem;
  height: 100%;
  background: url(/resource/images/common/logo.png) no-repeat center/contain;
  text-indent: -9999em;
}
.header .headUtil {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 2.0833%;
  height: 100%;
}
.header .headUtil .btns {
  margin-right: 0.4rem;
}
.header .headUtil .btns a,
.header .headUtil .btns button {
  display: block;
  padding: 0 1.6rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 3.8rem;
  color: var(--gray);
  border-radius: 4rem;
  border: 1px solid #263c4f;
  box-sizing: border-box;
}
.header .headUtil > ul {
  display: flex;
  align-items: center;
}
.header .headUtil > ul > li {
  position: relative;
  padding-left: 0.8rem;
  margin-left: 0.8rem;
}
.header .headUtil > ul > li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.6rem;
  background: var(--gray-line1);
  transform: translateY(-50%);
}
.header .headUtil > ul > li:first-child:before {
  display: none;
}
.header .headUtil > ul > li > a,
.header .headUtil > ul > li > button {
  display: flex;
  align-items: center;
}
.header .headUtil > ul > li .txt {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-black);
}
.header .headUtil > ul > li .bi-bg {
  width: 3.6rem;
  height: 3.6rem;
  margin-left: 0.4rem;
  background: var(--gray-line2);
  border-radius: 50%;
}
.header .headUtil > ul > li .bi::before {
  width: 2rem;
  height: 2rem;
  background-color: #fff;
}
.header .headUtil > ul > li .user {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gray-black);
}
.header .headUtil > ul > li .user b {
  position: relative;
  margin-right: 0.4rem;
  padding: 1px 0;
  font-weight: 700;
}
.header .headUtil > ul > li .user b::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gray-black);
}
.header .headUtil .btnMypage {
  position: relative;
}

.mypageList {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 20rem;
  margin-top: 1rem;
  background: #fff;
  border: 2px solid #069457;
  border-radius: 1.2rem;
  box-shadow: 6px 6px 2px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  z-index: 10;
}
.mypageList .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 2px solid #069457;
}
.mypageList .info .name {
  font-size: var(--body-md);
  color: var(--gray-black);
}
.mypageList .info .name b {
  margin-right: 0.4rem;
  color: var(--sub-dark);
}
.mypageList ul {
  display: block;
  padding: 1.2rem 0;
}
.mypageList ul li {
  margin: 0;
  padding: 0;
}
.mypageList ul li::before {
  display: none;
}
.mypageList ul li a {
  display: block;
  padding: 0.8rem 2rem;
  font-size: 1.5rem;
  color: #1d1d1d;
}
.mypageList ul li a:focus, .mypageList ul li a:hover {
  font-weight: 700;
  color: var(--main-font);
  text-decoration: underline;
}

.gnb {
  position: relative;
}
.gnb .moTopArea {
  display: none;
}

.gnbList {
  display: flex;
  justify-content: center;
}
.gnbList > li > a {
  display: block;
  padding: 0 4.4rem;
  text-align: center;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gray-dark);
}
.gnbList > li > a span {
  display: block;
  padding: 4.5rem 0;
}
.gnbList > li > div {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}
.gnbList > li > div ul {
  display: flex;
  justify-content: center;
  gap: 6rem;
}
.gnbList > li > div ul > li > a {
  display: block;
  padding: 3rem;
  font-size: var(--body-lg);
  font-weight: 500;
  color: #fff;
}
.gnbList > li > div ul > li > a:focus, .gnbList > li > div ul > li > a:hover {
  color: var(--point);
}

.header.active::before {
  opacity: 1;
  transform: translateY(0);
}
.header.active::after {
  background: rgba(255, 255, 255, 0.2);
}
.header.active .logo a {
  background-image: url(/resource/images/common/logo_wh.png);
}
.header.active .headUtil .btns a,
.header.active .headUtil .btns button {
  color: #fff;
  background: var(--main);
  border-color: var(--main);
}
.header.active .headUtil ul li .txt {
  color: #fff;
}
.header.active .headUtil ul li .bi-bg {
  background: rgba(255, 255, 255, 0.2);
}
.header.active .headUtil ul li .user {
  color: #fff;
}
.header.active .headUtil ul li .user b {
  color: var(--point);
}
.header.active .headUtil ul li .user b::before {
  background: var(--point);
}
.header.active .gnbList > li > a {
  color: #fff;
}

@media screen and (max-width: 1400px) {
  .header .logo a {
    width: 21rem;
  }
  .header .headUtil {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.8rem;
  }
  .gnbList > li a {
    padding: 0 2.4rem;
    font-size: 2.1rem;
  }
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 56.25%;
  }
  .btnMoArea {
    display: flex;
    gap: 1.25rem;
  }
  .btnMoGnb button {
    display: block;
    width: 3rem;
    height: 8.125rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='32' viewBox='0 0 40 32' fill='none'%3E%3Cpath d='M38.4135 14.1955C39.2897 14.1955 40 15.0034 40 16C40 16.9966 39.2897 17.8045 38.4135 17.8045H1.58654C0.710318 17.8045 0 16.9966 0 16C0 15.0034 0.710318 14.1955 1.58654 14.1955H38.4135Z' fill='%2385929E'/%3E%3Cpath d='M38.4135 0C39.2897 0 40 0.807907 40 1.80451C40 2.80112 39.2897 3.60902 38.4135 3.60902H21.6667H1.58654C0.710318 3.60902 0 2.80112 0 1.80451C0 0.807907 0.710318 0 1.58654 0H38.4135Z' fill='%2385929E'/%3E%3Cpath d='M38.4135 28.391C39.2897 28.391 40 29.1989 40 30.1955C40 31.1921 39.2897 32 38.4135 32H1.58654C0.710318 32 0 31.1921 0 30.1955C0 29.1989 0.710318 28.391 1.58654 28.391H38.4135Z' fill='%2385929E'/%3E%3C/svg%3E") no-repeat center/2.5rem;
    text-indent: -9999em;
  }
  .btnMoUser {
    position: relative;
  }
  .btnMoUser button {
    display: block;
    width: 3.125rem;
    height: 8.125rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Cpath d='M40.0664 41.667V37.5C40.0663 35.7143 39.3564 34.0019 38.0938 32.7393C36.91 31.5556 35.3311 30.858 33.667 30.7754L33.333 30.7666H16.666C14.8803 30.7667 13.1679 31.4766 11.9053 32.7393C10.6426 34.0019 9.9327 35.7143 9.93262 37.5V41.667C9.93262 42.5506 9.21666 43.2666 8.33301 43.2666C7.44935 43.2666 6.7334 42.5506 6.7334 41.667V37.5C6.73348 34.8656 7.77979 32.3393 9.64258 30.4766C11.5054 28.6138 14.0316 27.5675 16.666 27.5674H33.333C35.9675 27.5674 38.4946 28.6137 40.3574 30.4766C42.22 32.3393 43.2665 34.8658 43.2666 37.5V41.667C43.2666 42.5506 42.5497 43.2666 41.666 43.2666C40.7825 43.2664 40.0664 42.5505 40.0664 41.667Z' fill='%2385929E'/%3E%3Cpath d='M31.7334 14.583C31.7332 10.8644 28.7186 7.84961 25 7.84961C21.2815 7.84979 18.2668 10.8645 18.2666 14.583C18.2666 18.3016 21.2814 21.3162 25 21.3164C28.7187 21.3164 31.7334 18.3017 31.7334 14.583ZM34.9336 14.583C34.9336 20.069 30.486 24.5166 25 24.5166C19.5141 24.5164 15.0674 20.0689 15.0674 14.583C15.0676 9.09724 19.5142 4.65057 25 4.65039C30.4859 4.65039 34.9334 9.09713 34.9336 14.583Z' fill='%2385929E'/%3E%3C/svg%3E") no-repeat center/3.125rem;
    text-indent: -9999em;
  }
  .header {
    padding: 0 5.5555%;
  }
  .header::before {
    display: none;
    opacity: 1;
    position: fixed;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
    z-index: 10;
  }
  .header.open::before {
    display: block;
  }
  .header .headWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header .logo {
    position: static;
  }
  .header .logo a {
    width: 26.375rem;
    height: 4.5rem;
    background-image: url(/resource/images/common/logo_mo.png);
  }
  .header .headUtil {
    display: none;
  }
  .mypageList {
    left: auto;
    right: -2rem;
    top: 90%;
    margin-top: 0;
  }
  .mypageList ul li a {
    font-size: 1.625rem;
  }
  .gnbWrap {
    display: none;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 600px;
    padding: 0;
    z-index: 210;
    background: #fff;
    transition: none;
  }
  .gnbWrap::-webkit-scrollbar {
    display: none;
  }
  .gnb {
    height: 100%;
    padding-top: 14.375rem;
    box-sizing: border-box;
  }
  .gnb .moTopArea {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .gnb .moTopArea h2 {
    padding-left: 5.5555%;
    font-size: 2.5rem;
    color: var(--gray-black);
    line-height: 7.5rem;
  }
  .gnb .btnGnbClose {
    position: absolute;
    top: 0;
    right: 5.5555%;
    z-index: 1;
  }
  .gnb .btnGnbClose button {
    display: block;
    width: 3rem;
    height: 7.5rem;
    text-indent: -9999em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.2605 8.46941C37.8853 7.8448 38.8984 7.84486 39.5232 8.46941C40.1481 9.09419 40.1479 10.1072 39.5232 10.7321L26.2576 23.9968L39.531 37.2712C40.1558 37.896 40.1557 38.909 39.531 39.5339C38.9062 40.1587 37.8932 40.1587 37.2684 39.5339L23.9959 26.2604L10.7234 39.5339C10.0986 40.1587 9.0856 40.1587 8.46074 39.5339C7.83604 38.909 7.83597 37.896 8.46074 37.2712L21.7332 23.9968L8.46855 10.7321C7.84384 10.1072 7.84373 9.09419 8.46855 8.46941C9.09336 7.84486 10.1065 7.8448 10.7312 8.46941L23.9959 21.7341L37.2605 8.46941Z' fill='%2385929E'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  .gnb .moGnbUtil {
    display: flex;
    width: 100%;
    border: 1px solid var(--gray-line1);
    border-width: 1px 0;
  }
  .gnb .moGnbUtil li {
    position: relative;
    flex: 1;
  }
  .gnb .moGnbUtil li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1rem;
    background: var(--gray-line1);
    transform: translateY(-50%);
  }
  .gnb .moGnbUtil li:first-child::before {
    display: none;
  }
  .gnb .moGnbUtil li a,
  .gnb .moGnbUtil li button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 6.625rem;
  }
  .gnb .moGnbUtil li span {
    font-size: 1.625rem;
    color: var(--gray-black);
  }
  .gnbList {
    display: block;
    background: var(--sub-bg);
  }
  .gnbList > li > a {
    padding: 0 5.5555%;
    font-size: 2rem;
    font-weight: 500;
    text-align: left;
    color: var(--gray-black);
  }
  .gnbList > li > a span {
    padding: 2.125rem 0;
  }
  .gnbList > li.opNav > a span {
    position: relative;
  }
  .gnbList > li.opNav > a span::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.52928 16.8111C7.87245 17.4022 7.81919 18.4139 8.41031 19.0707L22.8097 35.0707C23.1131 35.4079 23.5454 35.6004 23.999 35.6004C24.4525 35.6004 24.8848 35.4079 25.1882 35.0708L39.5892 19.0708C40.1804 18.414 40.1272 17.4023 39.4704 16.8112C38.8136 16.22 37.8019 16.2732 37.2108 16.93L23.9991 31.6087L10.7889 16.9301C10.1978 16.2733 9.18611 16.22 8.52928 16.8111Z' fill='%2385929E'/%3E%3C/svg%3E") no-repeat center/contain;
    transition: 0.2s;
  }
  .gnbList > li.open > a span::after {
    transform: rotate(180deg);
  }
  .gnbList .gnbCont {
    position: static;
    background: #fff;
  }
  .gnbList .gnbCont > ul {
    display: block;
    padding: 1.25rem 0;
  }
  .gnbList .gnbCont > ul > li > a {
    padding: 1.5rem 11.1111%;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--gray-black);
  }
  .gnbList .gnbCont > ul > li > a:focus, .gnbList .gnbCont > ul > li > a:hover {
    color: var(--gray-black);
  }
  .header .active {
    height: auto;
    backdrop-filter: none;
  }
  .header .active::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
}
@media screen and (max-width: 960px) {
  body {
    min-width: 320px;
  }
}
@media all and (max-width: 720px) {
  html {
    font-size: 50%;
  }
}
/* footer */
.footer {
  position: relative;
  padding: 0 2%;
  background: var(--gray-dark);
}
.footer .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.footer .utilArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.3rem 0;
}
.footer .util {
  display: flex;
  gap: 4rem;
}
.footer .util li a {
  display: block;
  font-size: 1.9rem;
  font-weight: 500;
  color: #d0e3ef;
}
.footer .site {
  display: flex;
  gap: 1.2rem;
}
.footer .familySite {
  position: relative;
}
.footer .familySite > button {
  width: 20rem;
  height: 5rem;
  padding: 0 2.4rem;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3rem;
  box-sizing: border-box;
}
.footer .familySite > button span {
  display: block;
  position: relative;
  font-size: 1.7rem;
  font-weight: 500;
  color: #fff;
}
.footer .familySite > button span::before, .footer .familySite > button span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.5rem;
  height: 1px;
  margin-top: -1px;
  background: #fff;
  transition: 0.2s;
}
.footer .familySite > button span::after {
  transform: rotate(90deg);
}
.footer .familySite > button.active span::after {
  transform: rotate(0deg);
}
.footer .familySite .siteList {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 130%;
  padding: 0.8rem;
  background: #fff;
  border: 1px solid #069457;
  border-radius: 1.2rem;
  box-shadow: 6px 6px 2px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  transform: translateX(-50%);
  z-index: 10;
}
.footer .familySite .siteList ul {
  overflow-y: auto;
  max-height: 45rem;
}
.footer .familySite .siteList ul li a {
  display: block;
  padding: 0.8rem;
  font-size: 1.5rem;
  color: #1d1d1d;
}
.footer .familySite .siteList ul li a:focus, .footer .familySite .siteList ul li a:hover {
  font-weight: 700;
  color: var(--main-font);
  text-decoration: underline;
}
.footer .infoArea {
  display: flex;
  align-items: center;
  gap: 8rem;
  padding: 3rem 0;
  border-top: 1px solid #7f808b;
}
.footer .logo {
  flex-shrink: 0;
  width: 27.2rem;
  height: 4.8rem;
  background: url(/resource/images/common/logo_wh.png) no-repeat center/contain;
  text-indent: -9999em;
}
.footer .infoBox {
  padding: 1rem 0 2rem;
  color: #fff;
}
.footer .infoBox .util {
  display: none;
}
.footer .infoBox .addr {
  display: flex;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.footer .infoBox .addr .call {
  display: flex;
  margin-left: 1rem;
}
.footer .infoBox .addr .call span {
  position: relative;
  padding: 0 1rem;
}
.footer .infoBox .addr .call span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.6rem;
  background: #fff;
  transform: translateY(-50%);
}
.footer .infoBox .addr .call span:first-child::before {
  display: none;
}
.footer .infoBox .addr .call span b {
  margin-right: 1rem;
  font-weight: 500;
}
.footer .infoBox .addr br,
.footer .infoBox .copy br,
.footer .infoBox .txt br {
  display: none;
}
.footer .infoBox .copy {
  margin-top: 0.4rem;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.footer .infoBox .txt {
  margin-top: 0.8rem;
  font-size: 1.5rem;
  font-weight: 300;
}

@media screen and (max-width: 1400px) {
  .footer .logo {
    width: 21rem;
  }
  .footer .util li a {
    font-size: 1.7rem;
  }
  .footer .familySite .siteList {
    width: 120%;
  }
  .footer .infoArea {
    gap: 4rem;
  }
}
@media screen and (max-width: 1024px) {
  .footer {
    padding: 0;
  }
  .footer .utilArea {
    padding: 0;
  }
  .footer .utilArea .util {
    display: none;
  }
  .footer .util {
    flex-wrap: wrap;
    gap: 1rem 0;
    max-width: 90%;
    margin: 2rem auto;
  }
  .footer .util li {
    position: relative;
    width: 50%;
  }
  .footer .util li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.5rem;
    background: #d0e3ef;
    transform: translateY(-50%);
  }
  .footer .util li:nth-child(odd)::before {
    display: none;
  }
  .footer .util li a {
    font-size: 1.75rem;
    text-align: center;
  }
  .footer .site {
    position: relative;
    gap: 0;
    width: 100%;
  }
  .footer .familySite {
    position: static;
    flex: 1;
    border-left: 1px solid #7f808b;
  }
  .footer .familySite:first-child {
    border: none;
  }
  .footer .familySite > button {
    width: 100%;
    height: 5.75rem;
    padding: 0 11.1111%;
    border: none;
    border-radius: 0;
  }
  .footer .familySite > button span {
    font-size: 1.625rem;
  }
  .footer .familySite .siteList {
    width: 100%;
  }
  .footer .familySite .siteList ul {
    max-height: 30rem;
  }
  .footer .familySite .siteList ul li a {
    font-size: 1.625rem;
  }
  .footer .infoArea {
    flex-direction: column;
    gap: 0;
    padding: 5rem 5.5555%;
  }
  .footer .logo {
    width: 26.375rem;
    height: 4.5rem;
    background-image: url(/resource/images/common/logo_wh_mo.png);
  }
  .footer .infoBox {
    padding: 0;
  }
  .footer .infoBox .util {
    display: flex;
  }
  .footer .infoBox .addr,
  .footer .infoBox .copy,
  .footer .infoBox .txt {
    font-size: 1.625rem;
    text-align: center;
  }
  .footer .infoBox .addr {
    flex-direction: column;
  }
  .footer .infoBox .addr .call {
    margin: 0;
    justify-content: center;
  }
  .footer .infoBox .copy {
    margin-top: 0;
  }
}
@media screen and (max-width: 720px) {
  .footer .infoBox .addr br,
  .footer .infoBox .copy br,
  .footer .infoBox .txt br {
    display: block;
  }
}
/* layerPopup */
.layerPopup {
  overflow-y: auto;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 2%;
  box-sizing: border-box;
  z-index: 110;
}
.layerPopup.active {
  display: flex;
}
.layerPopup .popInner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  min-height: 700px;
}
.layerPopup .popItem {
  overflow: hidden;
  max-width: 600px;
  border-radius: 1rem;
  box-shadow: 6px 6px 2px 0 rgba(0, 0, 0, 0.04);
}
.layerPopup .popItem .img {
  width: 100%;
}
.layerPopup .popItem .img a {
  display: block;
}
.layerPopup .popItem .img img {
  width: 100%;
}
.layerPopup .popItem .btnBox {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  background: #fff;
}
.layerPopup .popItem .btnBox button {
  position: relative;
  font-size: var(--body-lg);
  color: var(--gray-black);
  line-height: 1.5;
}
.layerPopup .popItem .btnBox button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: no-repeat center;
  transform: translateY(-50%);
}
.layerPopup .popItem .btnBox .oneDayClose {
  padding-left: 3.2rem;
  font-weight: 300;
}
.layerPopup .popItem .btnBox .oneDayClose::before {
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.66748 8.00033L7.50958 12.667L14.0008 2.66699' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 1.6rem;
  background-color: var(--primary);
  border-radius: 0.4rem;
}
.layerPopup .popItem .btnBox .layerPopClose {
  padding-right: 2.4rem;
  font-weight: 500;
}
.layerPopup .popItem .btnBox .layerPopClose::before {
  left: auto;
  right: 0;
  width: 2rem;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.5253 3.52925C15.7856 3.26895 16.2073 3.26906 16.4676 3.52925C16.728 3.78959 16.728 4.21127 16.4676 4.47163L10.9403 9.998L16.4715 15.5302C16.7315 15.7905 16.7316 16.2123 16.4715 16.4726C16.2112 16.7329 15.7885 16.733 15.5282 16.4726L9.99792 10.9414L4.46764 16.4726C4.20729 16.7328 3.78557 16.7329 3.52526 16.4726C3.26499 16.2123 3.26505 15.7906 3.52526 15.5302L9.05553 9.99897L3.52819 4.47163C3.26822 4.21131 3.26811 3.7895 3.52819 3.52925C3.78855 3.2689 4.21121 3.26889 4.47155 3.52925L9.99792 9.05561L15.5253 3.52925Z' fill='%23464C53'/%3E%3C/svg%3E");
  background-size: contain;
}

@media screen and (max-width: 1024px) {
  .layerPopup {
    padding: 0 5.5555%;
    align-items: flex-start;
  }
  .layerPopup .popInner {
    flex-direction: column;
    min-height: auto;
  }
  .layerPopup .popItem .btnBox {
    padding: 1.75rem 2.5rem;
  }
  .layerPopup .popItem .btnBox button {
    font-size: 1.75rem;
    line-height: 3rem;
  }
  .layerPopup .popItem .btnBox .oneDayClose {
    padding-left: 3.5rem;
  }
  .layerPopup .popItem .btnBox .oneDayClose::before {
    width: 3rem;
    height: 3rem;
    background-size: 1.75rem;
    border-radius: 0.5rem;
  }
  .layerPopup .popItem .btnBox .layerPopClose {
    padding-right: 2.5rem;
  }
}
/* popupWrap */
.popupWrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 2%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  z-index: 60;
}
.popupWrap.active {
  display: flex;
}
.popupWrap .popInner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.popupWrap .popContent {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  width: 100%;
  min-width: 300px;
  max-width: 1200px;
  max-height: 80%;
  background: #fff;
  padding: 4rem;
  border-radius: 1.2rem;
  box-shadow: 6px 6px 2px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}
.popupWrap .popContent.mx56 {
  max-width: 560px;
}
.popupWrap .popContent.mx76 {
  max-width: 760px;
}
.popupWrap .popTitArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}
.popupWrap .popTitArea .popTit {
  font-size: 3rem;
  letter-spacing: -0.025em;
  word-break: keep-all;
}
.popupWrap .popTitArea .popTit.flex {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.popupWrap .popTitArea .popTit .txtInfo {
  padding: 0;
  font-size: var(--body-lg);
  font-weight: 400;
}
.popupWrap .popTitArea .popTit .txtInfo::before {
  display: none;
}
.popupWrap .popTitArea .conTit,
.popupWrap .popTitArea .conTit2 {
  margin: 0;
}
.popupWrap .popTitArea + .conTit2 {
  margin-top: 0;
}
.popupWrap .btnPopClose .bi {
  width: 3.6rem;
  height: 3.6rem;
}
.popupWrap .btnPopClose .bi::before {
  background: var(--gray-font);
}

@media screen and (max-width: 1024px) {
  .popupWrap {
    padding: 0 2.7777%;
  }
  .popupWrap .popContent {
    padding: 2.5rem;
    border-radius: 0.75rem;
  }
  .popupWrap .popContent.mx56, .popupWrap .popContent.mx76 {
    max-width: none;
  }
  .popupWrap .popTitArea {
    margin-bottom: 2.5rem;
  }
  .popupWrap .popTitArea .popTit {
    font-size: 2.5rem;
  }
  .popupWrap .popTitArea .popTit.flex {
    gap: 0.5rem;
  }
  .popupWrap .popTitArea .popTit .txtInfo {
    font-size: 1.875rem;
  }
  .popupWrap .btnPopClose .bi {
    width: 3rem;
    height: 3rem;
  }
}
/* alert */
#cstAlert {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
}
#cstAlert .altContent {
  width: 56rem;
  padding: 4.8rem 4rem 5.6rem;
  word-break: keep-all;
  text-align: center;
  background: #fff;
  border-radius: 1.2rem;
  box-sizing: border-box;
}
#cstAlert .altTit {
  color: #1e2124;
  font-size: 2.3rem;
  font-weight: 700;
}
#cstAlert .altTxt {
  margin-top: 1.6rem;
  font-size: var(--body-md);
  color: var(--gray-dark);
  letter-spacing: -0.025em;
}
#cstAlert .altBtn {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.4rem;
}

@media screen and (max-width: 1024px) {
  #cstAlert .altContent {
    border-radius: 0.75rem;
    width: 77.7777%;
    max-width: 60rem;
    padding: 3rem 2.5rem 3.5rem;
  }
  #cstAlert .altTit {
    font-size: 2.375rem;
  }
  #cstAlert .altTxt {
    margin-top: 1rem;
    font-size: 1.75rem;
  }
  #cstAlert .altBtn {
    margin-top: 2rem;
    gap: 0.75rem;
  }
}