@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src:
    local("Pretendard Variable"),
    url("./fonts/PretendardVariable.woff2") format("woff2-variations");
}

/* ========================== 초기화 [s] */
* {
  -webkit-text-size-adjust: none;
}
*,
:after,
:before {
  box-sizing: border-box;
}

:root {
  --primary: #023069;
  --dark: #222;
  --txt: #444;
  --sub: #666;
  --line: #cfd7e6;
  --bg-light: #f5fafe;
  --mainsize: 1400px;
  --widesize: 1840px;
  --hd-height: 80px;
  --k-font: "Pretendard Variable";
  --e-font: "Montserrat", sans-serif;
}

html {
  font-size: 62.5%;
} /* 1rem = 10px */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
body {
  background: #fff;
  font-size: 1.6rem;
  font-family: var(--k-font);
  color: var(--txt);
  overflow-x: hidden;
  word-break: keep-all;
}
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
textarea,
select {
  font-family: var(--k-font);
}
a {
  color: inherit;
  text-decoration: none !important;
}
a:hover {
  text-decoration: none !important;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ol,
ul,
dl,
dt,
dd {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input,
button {
  margin: 0;
  padding: 0;
  font-family: var(--k-font);
  outline: none;
}
input[type="submit"] {
  cursor: pointer;
}
button {
  cursor: pointer;
  background: none;
}
textarea,
select {
  font-family: var(--k-font);
}
select {
  margin: 0;
}
label,
input,
button,
select,
img {
  vertical-align: middle;
}
img {
  max-width: 100%;
}

.sound_only {
  display: inline-block !important;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  border: 0 !important;
  overflow: hidden !important;
}
#wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
/* ========================== 초기화 [e] */

/* ========================== 공통 레이아웃 */
.inner {
  max-width: var(--mainsize);
  margin: 0 auto;
  padding: 0 20px;
}
.wide-inner {
  max-width: var(--widesize);
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--e-font);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--primary);
  text-align: center; /* NEWS 등 기본은 중앙정렬, SERVICE는 main.css에서 좌측정렬로 override */
}

/* ========================== HEADER : 전체 높이 항상 최대 80px(--hd-height) */
#hd {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  width: 100%;
  height: var(--hd-height);
}

#hd_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
#top_nav_wrap {
  position: relative;
  width: 100%;
  height: var(--hd-height);
  transition: box-shadow 0.2s;
}
#top_nav_wrap.fixed {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

#top_nav_wrap .h_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
#top_logo {
  display: flex;
  align-items: center;
}
#top_logo img {
  width: 17.4rem;
}

/* nav : 1depth 아이템 각각에 2depth 박스가 개별로 내려옴 */
#top_nav {
  display: flex;
  align-items: center;
  gap: 5rem;
}
#top_nav li.list {
  position: relative;
  text-align: center;
}
#top_nav > li > a {
  display: block;
  padding: 6px 0;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--dark);
  white-space: nowrap;
  transition: color 0.15s;
}
#top_nav > li:hover > a,
#top_nav > li.on > a {
  color: var(--primary);
}

/* 서브페이지 body에 cate01~06 클래스를 주면 헤더의 해당 카테고리가 활성 색상으로 표시됨 */
body.cate01 #top_nav .list01 > a,
body.cate02 #top_nav .list02 > a,
body.cate03 #top_nav .list03 > a,
body.cate04 #top_nav .list04 > a,
body.cate05 #top_nav .list05 > a,
body.cate06 #top_nav .list06 > a {
  color: var(--primary);
}

#top_nav li ul {
  position: absolute;
  display: none;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 190px;
  padding: 14px 0;
  margin-top: 14px;
  background: var(--primary);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(2, 48, 105, 0.25);
}
#top_nav li ul a {
  display: block;
  padding: 9px 20px;
  font-size: 1.5rem;
  color: #fff;
  transition:
    opacity 0.15s,
    font-weight 0.15s;
}
@media (hover: hover) {
  #top_nav li ul a:hover {
    opacity: 0.75;
    font-weight: 600;
  }
}

/* 우측 전체메뉴 버튼 : 3x3 점 9개 <-> X, 같은 위치에서 모양만 전환
   전체메뉴(#allMenu, z-index:150)가 열리면 헤더 자체는 가려지고 이 버튼만 그 위(160)에 남아있어야 함 */
.pc-ham-btn {
  position: relative;
  z-index: 160;
  width: 20px;
  height: 20px;
  margin-left: 30px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.pc-ham-btn span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dark);
  transition:
    top 0.3s ease,
    left 0.3s ease,
    background-color 0.15s;
}
.pc-ham-btn span:nth-child(1) {
  top: 0;
  left: 0;
}
.pc-ham-btn span:nth-child(2) {
  top: 0;
  left: 8px;
}
.pc-ham-btn span:nth-child(3) {
  top: 0;
  left: 16px;
}
.pc-ham-btn span:nth-child(4) {
  top: 8px;
  left: 0;
}
.pc-ham-btn span:nth-child(5) {
  top: 8px;
  left: 8px;
}
.pc-ham-btn span:nth-child(6) {
  top: 8px;
  left: 16px;
}
.pc-ham-btn span:nth-child(7) {
  top: 16px;
  left: 0;
}
.pc-ham-btn span:nth-child(8) {
  top: 16px;
  left: 8px;
}
.pc-ham-btn span:nth-child(9) {
  top: 16px;
  left: 16px;
}
/* 상하좌우 4개 점이 가운데로 모여 대각선 5개 점(X)만 남도록 */
.pc-ham-btn.on span:nth-child(2),
.pc-ham-btn.on span:nth-child(4),
.pc-ham-btn.on span:nth-child(6),
.pc-ham-btn.on span:nth-child(8) {
  top: 8px;
  left: 8px;
}
@media (hover: hover) {
  .pc-ham-btn:hover span {
    background: var(--primary);
  }
}
/* 전체메뉴가 열려있는 동안(X 상태)에는 항상 흰색 */
.pc-ham-btn.on span {
  background: #fff;
}

/* 전체메뉴 풀스크린 오버레이 */
#allMenu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  height: 100dvh;
  background-color: rgba(1, 35, 77, 0.75);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: #fff;
  overflow-y: auto;
}
#allMenu.on {
  display: block;
  animation: allMenuIn 0.3s ease;
}
@keyframes allMenuIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#allMenu .allMenu-inner {
  position: relative;
  max-width: var(--mainsize);
  margin: 0 auto;
  padding: 140px 20px 80px;
  min-height: 100%;
}
#allMenu .allMenu-logo {
  position: absolute;
  left: 20px;
  top: 60px;
}
#allMenu .allMenu-logo img {
  width: 17.4rem;
}

#allMenu .allMenu-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
}
#allMenu .allMenu-list > li > strong {
  display: block;
  margin-bottom: 28px;
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
}
#allMenu .allMenu-list > li > ul li a {
  display: block;
  padding: 10px 0;
  font-size: 1.9rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s;
}
@media (hover: hover) {
  #allMenu .allMenu-list > li > ul li a:hover {
    color: #fff;
  }
}

@media (max-width: 1024px) {
  #allMenu .allMenu-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }
  #allMenu .allMenu-inner {
    padding: 100px 20px 60px;
  }
  /* PC 전체메뉴를 연 채로 모바일 폭까지 좁히면(리사이즈) .on이 남아있어도 강제로 숨김 - 모바일에서는 #navWrap만 사용 */
  #allMenu {
    display: none !important;
  }
}
@media (max-width: 480px) {
  #allMenu .allMenu-list {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* 반응형 메뉴 [s] */
#topmenuM {
  display: none;
  position: relative;
  width: 100%;
  height: var(--hd-height);
  padding: 0 20px;
  background-color: #fff;
  font-family: var(--k-font);
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 0.2s;
}
#topmenuM.fixed {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

#m_logo {
  position: relative;
}
#m_logo a {
  display: inline-block;
}
#m_logo img {
  width: 130px;
}

/* #navWrap(전체메뉴, z-index:150)가 열리면 모바일 헤더도 가려지고 이 버튼만 위(160)에 흰색으로 남아있어야 함 */
#m_navBtn {
  position: relative;
  z-index: 160;
  width: 26px;
  height: 20px;
  cursor: pointer;
}
#m_navBtn span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background-color: var(--dark);
}
#m_navBtn span:before,
#m_navBtn span:after {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--dark);
  transition: all 0.2s;
}
#m_navBtn span:before {
  top: -8px;
}
#m_navBtn span:after {
  top: 8px;
}
#m_navBtn.on span {
  background: transparent;
}
#m_navBtn.on span:before {
  top: 0;
  background-color: #fff;
  transform: rotate(45deg);
}
#m_navBtn.on span:after {
  top: 0;
  background-color: #fff;
  transform: rotate(-45deg);
}

/* 모바일 전체메뉴 : PC #allMenu와 동일하게 풀스크린 + 블러, 아코디언으로 열고 닫힘 */
#navWrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  height: 100dvh;
  background-color: rgba(1, 35, 77, 0.75);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: #fff;
  overflow-y: auto;
}
#navWrap.on {
  display: block;
  animation: allMenuIn 0.3s ease;
}
#navWrap .inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: 100px 0 60px;
}
#navWrap .inner .mo_hd_copy {
  margin-top: 20px;
  padding: 0 30px;
  font-size: 1.2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

/* .m_lnb 아코디언은 #topmenuM이 아니라 #navWrap(풀스크린 오버레이) 안에 실제로 위치함 */
#navWrap .m_lnb .m_bmenu {
  display: block;
  position: relative;
  width: 100%;
  padding: 16px 30px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: none;
  font-size: 1.8rem;
  color: #fff;
  text-align: left;
  font-family: var(--k-font);
}
#navWrap .m_lnb .m_bmenu:after {
  position: absolute;
  right: 30px;
  content: "+";
  color: #fff;
  font-size: 1.8rem;
  font-weight: 300;
}
#navWrap .m_lnb .m_bmenu.on:after {
  content: "−";
}

#navWrap .m_smenu {
  display: none;
  padding: 6px 30px 14px;
  background-color: rgba(255, 255, 255, 0.06);
}
#navWrap .m_smenu li a {
  display: block;
  padding: 8px 0;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.75);
}
#navWrap .m_smenu li a:hover {
  color: #fff;
}

/* 헤더 반응형 */
@media (max-width: 1300px) {
  #top_nav_wrap .h_center {
    padding: 0 20px;
  }
  #top_nav {
    gap: 3rem;
  }
  #top_nav > li > a {
    font-size: 1.5rem;
  }
}
@media (max-width: 1024px) {
  :root {
    --hd-height: 60px;
  }
  #top_nav_wrap {
    display: none;
  }
  #topmenuM {
    display: flex;
  }
}
/* 모바일 메뉴를 연 채로 PC 폭까지 넓히면(반응형 확인 등) .on이 남아있어도 강제로 숨김 - PC에서는 #allMenu만 사용 */
@media (min-width: 1025px) {
  #navWrap {
    display: none !important;
  }
}
/* 반응형 메뉴 [e] */

/* ========================== MAIN */
#container {
  position: relative;
  width: 100%;
  min-height: 1080px;
  padding-top: var(--hd-height);
}
#container_wrapper {
  position: relative;
  width: 100%;
  zoom: 1;
}
#container_wrapper:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}

#section > section {
  position: relative;
}

/* ========================== FOOTER */
#ft {
  position: relative;
  overflow: hidden;
  padding: 60px 0 30px;
  margin: 0 20px;
  background-color: #edf3f8;
  color: var(--txt);
  border-radius: 30px 30px 0 0;
}
#ft .inner {
  max-width: var(--widesize);
}

#ft .ft_top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 40px;
}
#ft .ft_logo {
  flex-shrink: 0;
  padding-top: 6px;
}
#ft .ft_logo img {
  width: 220px;
  opacity: 0.6;
}

#ft .ft_sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 40px;
}
#ft .ft_col {
  width: 135px;
}
#ft .ft_col strong {
  display: block;
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #000;
}
#ft .ft_col ul li a {
  display: block;
  padding: 3px 0;
  font-size: 1.5rem;
  line-height: 2;
  color: var(--txt);
}
@media (hover: hover) {
  #ft .ft_col ul li a:hover {
    color: var(--primary);
  }
}

#ft .ft_divider {
  height: 1px;
  background-color: rgba(2, 48, 105, 0.1);
  margin-bottom: 30px;
}

#ft .ft_bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
#ft .ft_info p {
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--txt);
}
#ft .ft_info p .bar {
  padding: 0 8px;
  color: #ced4e2;
}
#ft .ft_info p.copy {
  margin-top: 15px;
  font-size: 1.4rem;
  color: var(--sub);
}

#ft .ft_cs {
  flex-shrink: 0;
  text-align: right;
}
#ft .ft_cs .cs_label {
  font-size: 1.6rem;
  color: var(--txt);
}
#ft .ft_cs .cs_tel {
  margin: 5px 0;
  font-family: var(--e-font);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--txt);
}
#ft .ft_cs .cs_tel .point {
  color: var(--primary);
}
#ft .ft_cs .cs_time {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--txt);
}

@media (max-width: 1400px) {
  #ft .ft_sitemap {
    display: none;
  }
}
@media (max-width: 1024px) {
  #ft {
    margin: 0 12px;
    padding: 40px 0 24px;
  }
  #ft .ft_top {
    flex-direction: column;
    gap: 30px;
  }
  #ft .ft_bottom {
    flex-direction: column;
    gap: 20px;
  }
  #ft .ft_cs {
    text-align: left;
  }
}

.swal2-container {
  z-index: 9999 !important;
}
.swal2-container .swal2-popup {
  box-sizing: border-box;
  font-size: 1.6rem !important;
}
.swal2-container .swal2-popup button.swal2-styled {
  margin: 0.3125em !important;
  padding: 0.625em 1.1em !important;
  font-family: inherit !important;
  line-height: normal !important;
}
.swal2-container .swal2-popup button.swal2-close {
  padding: 0 !important;
}