@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Pretendard', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1.3rem}
input, button, figure {margin:0;padding:0;font-family:'Pretendard', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Pretendard', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

button:hover{transition: 0.3s;}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
  -webkit-transition:all 0.30s ease-in-out;
  -moz-transition:all 0.30s ease-in-out;
  -ms-transition:all 0.30s ease-in-out;
  -o-transition:all 0.30s ease-in-out;
  outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
  -webkit-box-shadow:0 0 5px #9ed4ff;
  -moz-box-shadow:0 0 5px #9ed4ff;
  box-shadow:0 0 5px #9ed4ff;
  border:1px solid #558ab7;
}

.placeholdersjs {color:#aaa !important}
  
  :root {
    /* [font-family 설정] -----------------------------*/
    /* 한글 종류 사용: font - 폰트명 */
    --k-ff1: "Pretendard";
    --k-ff2: "SCDream";
    /* 영문 종류 사용: font - 폰트명 */
    --e-ff1: "Montserrat";
    /*------------------------------------------------*/
  }

/* styleGuide.html*/
.guide {
  margin-top: 100px;
}

.guide h3 {
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
}

/*=============================================
=                    input                    =
=============================================*/

select {
  min-width: 13rem;
  border:1px solid #BABABA;
  background: url("../img/select_icon.svg") no-repeat right 1.6rem center;
  background-color: #fff;
}

/* input[type='date'] */
input[type=date] {
  position: relative;
  width: 20rem;
  background: #fff url() no-repeat right 2rem center/15px auto;
}
input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
input[type=date]:before {
  width: 100%;
  height: 100%;
}
input[type=date]:valid:before {
  display: none;
}

/* readonly */
input[readonly=readonly],
textarea[readonly=readonly] {
  color: #a8adbb;
  cursor: not-allowed;
  background-color: #f7f8fa;
}

/* 타겟 이동 : 스크롤 부드럽게 */
html {
  scroll-behavior: smooth;
}

body {
  overflow: visible;
  font-family: var(--e-ff1), var(--k-ff1), var(--k-ff2), san-serif;
}

#wrap {
  overflow: hidden;
  min-width: 140rem;
  width: 100%;
  height: 100%;
}

.container {
  min-width: 32rem;
  max-width: 100%;
  margin: 0 auto;
}
.container.sub {
  max-width: 140rem;
}

/* input [type='text'] */
input,
select,
textarea {
  height: 4rem;
  padding: 0.4rem 1rem;
  border: 1px solid #9DA9BA;
  font-size: 1.4rem;
  color: #424756;
}

table input{height: 4rem;font-size:1.4rem}
table input.w--100{width:100%;} 
table input.w--50{width:50%;}
table input.w--30{width:30%;}
table input.w--10{width:10%;}

input.bg__input{
  width: -webkit-fill-available;
  background-color: #F3F3FA;
  border: 1px solid #9DA9BA;
}

/* input[type='date'] */
input[type=date] {
  position: relative;
  width: 20rem;
  background: #fff url(../img/sub/calendar_i.svg) no-repeat right 2rem center/15px auto;
}
input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
input[type=date]:before {
  width: 100%;
  height: 100%;
}
input[type=date]:valid:before {
  display: none;
}
.date__choice {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* readonly */
input[readonly=readonly],
textarea[readonly=readonly] {
  color: #a8adbb;
  cursor: not-allowed;
  background-color: #f7f8fa;
}

/* txt_only */
.txt_only{
  background-color:#ffffff;
  border:0 !important;
  padding: 0 !important;
  outline: none;
  -webkit-box-shadow:none !important;
  -moz-box-shadow:none !important;
  box-shadow:none !important;
  pointer-events: none;
}
/*=====           End of input          ======*/

/*=============================================
=            checkbox, radio 공통            =
=============================================*/
.input--checkbox__wrap,
.input--radio__wrap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}
.input--radio__wrap label{display: flex;}
.input--checkbox__wrap label:hover,
.input--radio__wrap label:hover {
  cursor: pointer;
}

/*=====  End of checkbox, radio 공통  ======*/
/*=============================================
=               선택 : checkbox               =
=============================================*/
.chkbox-type-01 {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 1.7rem;
  color: #424756;
}

.chkbox-type-01 input[type=checkbox] {
  visibility: visible; /* 기본적으로 보이도록 설정 */
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  padding: 0;
  border: 1px solid #E0E0E0;
  border-radius: 3px;
  cursor: pointer;
  opacity: 1; /* 기본적으로 보이도록 설정 */
  background-color: #fff;
  -webkit-appearance: none;
  box-sizing: border-box;
  vertical-align: middle;
}

.chkbox-type-01.hidden input[type=checkbox] {
  visibility: hidden; /* 체크박스를 시각적으로 숨김 */
  position: absolute; /* 레이아웃에서 제거 */
  opacity: 0; /* 체크박스를 시각적으로 숨김 */
  pointer-events: none; /* 클릭 불가 */
}

.chkbox-type-01 input[type=checkbox]::before {
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  content: "✓"; /* 체크 표시 */
  transform: scale(0) translate(-50%, -50%);
}

.chkbox-type-01 input[type=checkbox]:checked {
  color: white;
  background-color: #4379FF !important;
  border-color: #4379FF !important;
}

.chkbox-type-01 input[type=checkbox]:checked::before {
  border-radius: 4px;
  transform: scale(1) translate(-50%, -50%);
}

/*=====     End of 선택 : checkbox     ======*/
/*=============================================
=                 선택 : radio                =
=============================================*/
.input--radio__wrap .item {
  display: flex;
  align-items: center;
  line-height: 1;
}

[type=radio] {
  line-height: 1;
  vertical-align: middle;
}

[type=radio] {
  width: 18px;
  height: 18px;
  border: 6px solid #E0E0E0;
  border-radius: 50%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

[type=radio] + span,
[type=radio] + label {
  margin-left: 7px;
  font-size: 1.7rem;
}

[type=radio]:checked {
  border: 6px solid #4379FF;
}

[type=radio]:hover {
  cursor: pointer;
}

input:disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.5;
}

/*=====       End of 선택 : radio       ======*/


/* ==================================
main
================================== */
.intro{position: relative;}
.product_sec .fp-overflow{height: 100%;}
.product_sec .fp-overflow .inner{padding-top: 12%;}
h1 { font-size: 6em; font-size: calc(2em + 2vw); font-family: arial, helvetica; margin: 0; }
.mid_1 .intro p { width: 100%; font-size: 1.65em; }
.section { font-family: arial,helvetica; color: #fff; text-align:center;}
main#main_slider { height:650px; position: relative; }
.m_slide { height:100%; width: 100%; opacity: 0; position: absolute;transition: all 1s ease; display: flex; align-items: center; justify-content: flex-start; font-size: 3em; background-repeat: no-repeat; background-size: cover; }
.m_slide:nth-child(1) { background-image: url('../img/visual_img01.png'); }
.m_slide:nth-child(2) { background-image: url('../img/visual_img01.png'); }
.m_slide:nth-child(3) { background-image: url('../img/visual_img01.png'); }
.m_slide.active { left: 0; opacity: 1; z-index: 1; }
.m_slide__title{width: 80%; margin: 0 auto;}
.m_slide__title .b_tit{
  font-size:5rem;
  font-weight: 600;
}
.m_slide__title .s_tit{padding-top:2rem;}
.m_slide__title .s_tit p{font-size:22px;}

.mid_1 .controls { position: absolute; bottom: 80px; left: 100px; z-index:9; display: flex; align-items: center; gap: 20px; }
.mid_1 #prev, #next { font-size: 2em; background: none; border: none; cursor: pointer; }
.mid_1 #slide-number { font-size: 1.2em; }
.mid_1 .progress-bar { display: none;width: 360px; height: 3px;background: rgba(255, 255, 255, 0.26);overflow: hidden; position: relative; }
.mid_1 .progress { height: 100%; width: 0%; background: #ffffff; transition: width linear; }

.fp-section { background-repeat: no-repeat; background-size: cover; }
.fp-section:nth-child(2) { background-image: url('../img/m_section01_bg.jpg'); }
.fp-section:nth-child(3) { background-image: url('../img/m_section02_bg.jpg'); }
.fp-section:nth-child(4) { background-image: url('../img/m_section03_bg.jpg'); }
.fp-section:nth-child(5) { background-image: url('../img/m_section04_bg.jpg'); }
.fp-section:nth-child(6) { background-image: url('../img/m_section05_bg.jpg'); }


@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.s_tit,
.b_tit,
.ss_tit {
  opacity: 0;
  text-align: left;
}

.s_tit h2,
.b_tit p,
.ss_tit p {
  text-align: left;
}

.m_slide.active .s_tit {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.0s;
}

.m_slide.active .b_tit {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.5s;
}

.m_slide.active .ss_tit {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 1.0s;
  font-size:1.5rem;
}

/* scroll down */

.scrollDown {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
}

.scrollDown__inner {
  display: flex;
  align-items: center;
  gap: 8px; /* 텍스트와 바 사이 간격 */
}

.scrollDown h4 {
  font-size: 14px;
  transform: rotate(90deg);
  transform-origin: left;
  white-space: nowrap;
  margin-bottom: 11rem;
}

.animated-bar {
  position: relative;
  width: 2px;
  height: 100px;
  background-color: rgba(225, 225, 225, 0.4);
  overflow: hidden;
}

.white-line {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.6;
  animation: scrollDown 1.5s ease-in-out infinite;
}

@keyframes scrollDown {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}


/* content common */
.flex{display: flex;}
.flex-column{display: flex;flex-direction: column;}
.flex-center{display: flex;align-items: center;}

.font_b{font-weight: 600 !important;}

.main_tit_wrap{gap: 4rem;}
.main_tit_wrap .p_tit__area h2{margin-top: 0.85rem;font-size:22px; font-weight: 600;color:#327454;}
.main_tit_wrap .b_tit__area .tit{display:flex;flex-direction:column;font-size:44px; font-weight: 300;color:#1C1D1D;}
.main_tit_wrap .b_tit__area .txt{margin-top: 3rem;font-size:18px; font-weight: 300;color:#6C6C6C;}

/* section01 */

.arrow_btn {
  margin-top: 20px;
}

.arrow {
  width:56px;
  height:56px;
  background: #F3F3F3;
  border: none;
  padding: 10px 14px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 50px;
}
.arrow:hover{background-color:#000000;transition: 0.2s;}

.cont_left{
  display: flex;
  width: 16%;
  margin-right: 4%;
  flex-direction: column;
  justify-content: space-between;
}
.slider-container {
  width: 100%;
  position: absolute;
  top: 0;
  right: -20%;
  overflow: hidden;
}

/* 스크롤바 스타일 */
.slider-container::-webkit-scrollbar {
  height: 6px;
}

.slider-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

.slider-container::-webkit-scrollbar-track {
  background-color: #eee;
}

/* ==================================
animation area
================================== */
/* Scroll Down(Animation) - arrow */
@keyframes scrollIcon {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(0);
  }
}
/* 흐르는 배경 */
@keyframes flowAni {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.back-to-position {opacity: 0;transition: 1s;}

.back-to-position.to-right {transform: translateX(-150px);}
.back-to-position.to-left {transform: translateX(150px);}
.back-to-position.to-top {transform: translateY(150px);}
.back-to-position.to-btm {transform: translateY(-150px);}
.show .back-to-position {opacity: 1;transform: translateX(-150px);}
.show .back-to-position {opacity: 1;transform: translateY(0);}
.show .back-to-position.delay-0 {transition-delay: 0s;}
.show .back-to-position.delay-1 {transition-delay: 0.3s;}
.show .back-to-position.delay-2 {transition-delay: 0.6s;}
.show .back-to-position.delay-3 {transition-delay: 0.9s;}
.show .back-to-position.delay-4 {transition-delay: 1.2s;}
.show .back-to-position.delay-5 {transition-delay: 1.5s;}
.show .back-to-position.delay-6 {transition-delay: 1.8s;}

/* ==================================
animation area : end
================================== */


.top__btn { position: fixed; bottom: 2rem; right: 2rem; z-index: 3; opacity: 0.4; }
.top__btn:hover { opacity: 1; transition: 0.2s; }


/* ==================================
footer
================================== */
.footer {
  background-color: #14181C;
}
.footer .inner{
  width:80%;
  margin:0 auto;
  padding:7rem 0;
  color:#ffffff;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.footer .inner .f_logo{width:216px;}
.footer .inner .f_logo img{width:100%;}
.footer .inner .f_content{
  width:80%;
  display: flex;
  justify-content: space-between;
}
.footer .inner .f_content ul{
  display: flex;
  gap: 42px;
  margin-bottom: 3rem;
}
.footer .inner .f_content ul li{
  font-size:1.8rem;
  font-weight: 600;
}
.footer .inner .f_content p{
  font-size:1.6rem;
  line-height: 180%;
  display: flex;
}
.footer .inner .f_content p span{
  width:30px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.footer .inner .f_content p span:after{
  content: "";
  background-color: #5D5D5D;
  width:1px;
  height: 1.6rem;
  position: absolute;
  left: 50%;
  top: 8px;
}
.footer .inner .f_content .copy{font-size:1.6rem;margin-top:3rem;color:#A0A0A0;}
.footer .inner .f_content a{font-size:1.8rem;font-weight:600;color:#ffffff}

/* 우측 하단 고정 제거 + 우측 정렬 */
.footer .inner .f_content {
  /* 기존: display:flex; justify-content:space-between; 유지 */
  align-items: center;              /* 수직 가운데 정렬 */
}

.footer .inner .f-partner-links {
  position: static !important;      /* absolute 제거 */
  right: auto; bottom: auto;        /* 혹시 남아있는 값 무효화 */
  margin-left: auto;                /* 오른쪽으로 붙이기 */
  display: flex;
  align-items: center;
  gap: 20px;                        /* 로고 간격 */
  padding-right: 8px;               /* 너무 모서리에 붙지 않게 */
}

/* 로고 크기 업 */
.footer .inner .f-partner-links .logo img {
  height: 52px;                     /* 필요시 48~64px 사이로 조정 */
  width: auto;
  display: block;
  opacity: 0.95;
  transition: transform .2s ease, opacity .2s ease;
  filter:brightness(0) invert(1);   /* 로고 흰색 처리 */
}

.footer .inner .f-partner-links .logo:hover img {
  transform: translateY(-2px);
  opacity: 1;
}

@media (max-width:1400px){
  .footer .inner{flex-direction: column;}

  .footer .inner .f_content { align-items: flex-start; }
  .footer .inner .f-partner-links { margin-top: 12px; }
}
@media (max-width:1200px){
}
@media (max-width:1024px){
  .footer .inner .f_content p {
    display: flex;
    flex-direction: column;
  }
  .footer .inner .f_content p span{display: none;}

  .footer .inner .f_content { flex-direction: column; align-items: flex-start; }
  .footer .inner .f-partner-links { margin-left: 0; gap: 14px; padding-right: 0; }
  .footer .inner .f-partner-links .logo img { height: 44px; }
}
@media (max-width:780px){
}

/* ==================================
footer : end
================================== */

/*
 *
 * 스크롤 플러그인 커스텀
 *
 */
body {
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

/*특정 부분 스크롤바 없애기*/
.scroll {
  -ms-overflow-style: none;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 0.6rem;
  background-color: #95a1b8 !important;
}

.mCSB_scrollTools .mCSB_draggerContainer {
  width: 0.6rem;
  border-radius: 0.3rem;
  background-color: #d7dbe4 !important;
}

.health-map .content__area .loca-result__list ul {
  border-radius: 0;
}

.mCSB_container {
  overflow: visible !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
  display: none;
}

.info--i {
  display: inline-block;
  background: url("../images/main/box-info_i.png") top 2px center/contain no-repeat;
}

/* 가로 스크롤 */
.scroll-x .mCSB_draggerContainer {
  width: auto !important;
}
.scroll-x .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 100%;
  margin: auto;
}
.scroll-x .mCSB_scrollTools .mCSB_draggerContainer {
  height: 0.6rem !important;
}



/* X(닫기 버튼) - icon */
.close--i {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.close--i:before, .close--i:after {
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 12px;
  content: "";
  background-color: #fff;
}
.close--i:before {
  transform: rotate(45deg);
}
.close--i:after {
  transform: rotate(-45deg);
}

/*
 *
 * 말줄임(... 처리)
 *
 */
.txt-overflow {
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.txt-clamp {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/*=====     End of 통합검색 - modal     ======*/
/*=============================================
=                    HEADER                   =
=============================================*/
/* 메인 메뉴 - 기본상태 */
header {
  position: fixed;
  z-index: 60;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  transition: 0.5s;
}
.header__gnb__right button svg .cls-1,
.header__gnb__right button svg .cls-2 {
  fill: var(--fc-bold) !important;
}
.header__gnb__right button svg .cls-1 {
  isolation: isolate;
}

.header__gnb {
  width: 100%;
  font-family: var(--k-ff1);
}

.header__gnb__wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 8rem;
  height: 9rem;
}

.header__gnb__logo {
  position: relative;
  z-index: 100;
}
.header__gnb__logo img {
  height: 3.7rem;
}

.header__gnb__pc {
  position: fixed;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  box-sizing: border-box;
}
.header__gnb__pc .item {
  display: flex;
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid #e5e5e5;
  background-color: #fff;
}
.header__gnb__pc .item .inner {
  display: flex;
  margin: 0 8rem;
}
.header__gnb__pc .header__gnb__left {
  position: relative;
  z-index: 1;
  min-width: 31.5rem;
  padding: 8.8rem 0 8rem;
  border-right: 1px solid #e5e5e5;
  text-align: left;
}
.header__gnb__pc .header__gnb__left:after {
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 30rem;
  height: 18.8rem;
  background: url("../images/common/gnb_bg.jpg") bottom right/cover no-repeat;
  content: "";
}
.header__gnb__pc .header__gnb__left span {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-family: var(--e-ff1);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #2a3242;
}
.header__gnb__pc .header__gnb__left p {
  font-size: 1.6rem;
  color: #757a87;
}
.header__gnb__pc .header__gnb__menu {
  display: flex;
  justify-content: flex-end;
  margin-top: -1px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  transition: 0.3s;
  padding-right: 18rem;
}
.header__gnb__pc .header__gnb__menu > li {
  width: 15rem;
  margin: 0;
}
.header__gnb__pc .header__gnb__menu > li:hover .item {
  display: block;
}
.header__gnb__pc .header__gnb__menu > li .item {
  display: none;
  box-shadow: 0.5rem 0.5rem 0.8rem rgba(100, 110, 144, 0.1);
}
.header__gnb__pc .depth1 a {
  display: inline-block;
  position: relative;
  height: 9rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 9rem;
  color: #303543;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.header__gnb__pc .depth1 a:hover {
  color: var(--primary);
}
.header__gnb__pc .depth1 a.active:after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary);
  content: "";
}
.header__gnb__pc .depth2 {
  display: flex;
  flex-wrap: wrap;
  margin-left: 6rem;
  padding: 4rem 0 5rem;
  text-align: left;
  gap: 4rem;
}
.header__gnb__pc .depth2 h3 a {
  display: inline-block;
  display: flex;
  align-items: center;
  position: relative;
  width: 24rem;
  height: 5rem;
  padding-left: 2.5rem;
  border: 1px solid var(--bd-basic2);
  border-radius: 0.8rem;
  font-size: 1.7rem;
  font-weight: 500;
  color: #3e4556;
  box-sizing: border-box;
  background-color: #f7f8fa;
}
.header__gnb__pc .depth2 h3 a:after {
  position: absolute;
  right: 0;
  width: 12px;
  height: 7px;
  margin-right: 2.5rem;
  background: url("../images/common/arrow3_i.png") center/contain no-repeat;
  content: "";
}
.header__gnb__pc .depth3 {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
  gap: 2rem;
}
.header__gnb__pc .depth3 > li {
  position: relative;
  padding-left: 1.5rem;
}
.header__gnb__pc .depth3 > li:after {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  content: "";
  background-color: var(--primary);
  transform: translateY(-50%);
}
.header__gnb__pc .depth3 h4 a {
  font-size: 1.6rem;
  font-weight: 500;
  color: #757a87;
}
.header__gnb__pc .depth3 h4 a:hover {
  font-weight: 600;
  color: var(--main);
}


/* 찾기, 사이트맵 버튼 */
.header__gnb__right {
  display: flex;
  align-items: center;
  z-index: 20;
}
.header__gnb__right button svg .cls-1 {
  isolation: isolate;
}
.header__gnb__right button svg .cls-2 {
  fill: #fff;
  stroke-width: 0px;
}

#btnSearchOpen {
  width: 2.6rem;
  height: 2.6rem;
  margin-right: 4.5rem;
}

#btnSiteMap,
#btnMobileMenu {
  width: 2.5rem;
  height: 2rem;
}

#mobileMenu {
  display: none;
}

.btn--login_pc{
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E6E6E6;
    padding: 1rem 1.5rem;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 600;
}

/* GNB - 모바일 */
.header__gnb__mo {
  display: none;
}

/* width(노트북 1200px 기준) => xl */
@media (max-width: 1200px) {
  .header__gnb__wrap {
    margin: 0 3rem;
  }
  .header__gnb__wrap .header__gnb__menu > li {
    width: 15rem;
  }
}
@media (max-width: 1024px) {
  header {
    min-width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .header__gnb{
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
  }
  .header__gnb__pc {
    display: none;
  }
  #mobileMenu {
    position: fixed !important;
    top: 0;
    z-index: 9990;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  #mobileMenu .modal-btn--close:hover {
    background-color: inherit;
  }
  #mobileMenu.active {
    display: block !important;
  }
  #mobileMenu.active .header__mo__menu {
    display: flex;
    flex-direction: column;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    gap: 1rem;
  }
  #mobileMenu.active .header__mo__menu .item:not(:last-child),
  #mobileMenu.active .header__mo__menu .header__mo__menu .item:not(:last-child) {
    padding-bottom: 0;
  }
  #mobileMenu.active .header__mo__top {
    border-bottom: 1px solid #c8c8c8;
  }
  #mobileMenu.active .header__mo__top .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 9rem;
    margin: 0 3rem;
  }
  #mobileMenu.active .header__mo__top .modal-btn--close {
    position: static !important;
    width: 20px;
    height: 20px;
  }
  #mobileMenu.active .header__mo__top .modal-btn--close .close--i:before, #mobileMenu.active .header__mo__top .modal-btn--close .close--i:after {
    height: 20px;
    background-color: #424756;
  }
  #mobileMenu.active .header__mo__btm {
    padding: 0 3rem 3rem;
  }
  #mobileMenu.active .header__mo__btm .header__mo__btn {
    display: flex;
    padding: 2.5rem 0;
    gap: 2rem;
  }
  #mobileMenu.active .header__mo__btm .header__mo__btn li {
    flex-grow: 1;
  }
  #mobileMenu.active .header__mo__btm .header__mo__btn li.btn--login a {
    background-color: #3b5bc6;
  }
  #mobileMenu.active .header__mo__btm .header__mo__btn li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.4rem 0;
    border-radius: 0.7rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: #fff;
  }
  #mobileMenu.active .header__mo__btm .header__mo__btn li a i {
    position: relative;
    width: 1.8rem;
    height: 1.9rem;
    margin-right: 1rem;
  }
  #mobileMenu.active .header__mo__btm .header__mo__btn li a i:before {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1.8rem;
    height: 1.9rem;
    content: "";
  }
  #siteMap .depth1 {
    flex-wrap: wrap;
    width: auto;
    gap: 15rem;
  }
  #siteMap .depth2 > li {
    padding-bottom: 2.5rem;
  }
  #btnSiteModal {
    display: block;
    position: relative;
    padding-right: 2.2rem;
    color: #fff;
  }
  #btnSiteModal:after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 5px solid #fff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    transform: translateY(-2px);
  }
  #btnSiteMap {
    display: none;
  }
  .login--before .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--bd-basic2);
    text-align: center;
    gap: 3rem;
  }
  .login--before p,
  .login--before .btn__list {
    width: 80%;
  }
  .login--before .btn__list li a {
    width: auto !important;
    padding: 0 1rem;
  }
}
.accordion,
.header__mo__menu {
  font-family: var(--k-ff1);
  color: #424756;
}
.accordion .item .depth1,
.accordion .item .inner-accordion-header > a,
.header__mo__menu .item .depth1,
.header__mo__menu .item .inner-accordion-header > a {
  padding-left: 3.5rem;
}
.accordion .item.active .depth1,
.header__mo__menu .item.active .depth1 {
  border: 1px solid var(--primary);
  border-radius: 0.7rem 0.7rem 0 0 !important;
  color: #fff;
  background-color: var(--primary);
}
.accordion .item.active .arrow--i,
.header__mo__menu .item.active .arrow--i {
  transform: rotate(315deg);
}
.accordion .item.active .depth2 .inner-accordion.active .plus--i:before,
.header__mo__menu .item.active .depth2 .inner-accordion.active .plus--i:before {
  transform: rotate(0deg);
}
.accordion .item.active .depth2 .inner-accordion-header,
.header__mo__menu .item.active .depth2 .inner-accordion-header {
  position: relative;
}
.accordion .item.active .depth2 .inner-accordion-header a,
.header__mo__menu .item.active .depth2 .inner-accordion-header a {
  display: block;
  width: 100%;
  height: 100%;
}
.accordion .item.active .depth2 .inner-accordion-header .plus--i,
.header__mo__menu .item.active .depth2 .inner-accordion-header .plus--i {
  position: absolute;
  top: 50%;
  right: 4rem;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
}
.accordion .item.active .depth2 .inner-accordion-header .plus--i:before, .accordion .item.active .depth2 .inner-accordion-header .plus--i:after,
.header__mo__menu .item.active .depth2 .inner-accordion-header .plus--i:before,
.header__mo__menu .item.active .depth2 .inner-accordion-header .plus--i:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 13px;
  height: 2px;
  content: "";
  transition: 0.3s;
  background-color: #424756;
}
.accordion .item.active .depth2 .inner-accordion-header .plus--i:before,
.header__mo__menu .item.active .depth2 .inner-accordion-header .plus--i:before {
  transform: rotate(90deg);
}
.accordion .depth1,
.header__mo__menu .depth1 {
  position: relative;
  padding-left: 0 !important;
  border: 1px solid var(--bd-basic2);
  border-radius: 0.7rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 6.5rem;
  box-sizing: border-box;
}
.accordion .depth1:hover,
.header__mo__menu .depth1:hover {
  cursor: pointer;
}
.accordion .depth1 a,
.header__mo__menu .depth1 a {
  display: block;
  padding-left: 3.5rem;
}
.accordion .depth1 .arrow--i,
.header__mo__menu .depth1 .arrow--i {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 4rem;
  width: 10px;
  height: 10px;
  border-top: 3px solid #969faf;
  border-right: 3px solid #969faf;
  transition: 0.5s;
  transform: translateY(-50%) rotate(135deg);
}
.accordion .depth1.active,
.header__mo__menu .depth1.active {
  border: 1px solid var(--primary);
  border-radius: 0.7rem 0.7rem 0 0;
  color: #fff;
  background-color: var(--primary);
}
.accordion .depth1.active .arrow--i,
.header__mo__menu .depth1.active .arrow--i {
  transform: rotate(315deg);
}
.accordion .depth2,
.header__mo__menu .depth2 {
  font-size: 1.6rem;
  font-weight: 600;
}
.accordion .depth2 > li,
.header__mo__menu .depth2 > li {
  margin-top: -1px;
}
.accordion .depth2 > li h3,
.header__mo__menu .depth2 > li h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--bd-basic2);
  line-height: 5.8rem;
}
.accordion .depth3,
.header__mo__menu .depth3 {
  padding: 2rem 0;
  border: 1px solid var(--bd-basic2);
  border-top: none;
}
.accordion .depth3 a,
.header__mo__menu .depth3 a {
  position: relative;
  margin-left: 3.5rem;
  padding-left: 1.2rem;
  font-size: 1.6rem;
  line-height: 4.5rem;
}
.accordion .depth3 a:before,
.header__mo__menu .depth3 a:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
  background-color: #3b5bc6;
}



/*  */
.pc_no{display: none;}

/* width(모바일 576px 기준) => sm */
@media (max-width: 576px) {
  #mobileMenu.active .header__mo__btm .header__mo__btn {
    gap: 1rem;
  }
}
/* width(모바일 768px 기준) => md */
@media (max-width: 768px) {
  #linkAll.modal.active .site-modal__tit strong {
    margin-top: 1rem;
    font-size: 2.5rem;
  }
  #btnSiteModal {
    font-size: 1.2rem;
  }
  .header__gnb__wrap,
  #mobileMenu.active .header__mo__top .inner {
    margin: 0 2rem;
  }
  #mobileMenu.active .header__mo__btm .header__mo__btn {
    gap: 1rem;
  }
  .pc_no{display: block;}
  .btn-wrap.center{width: 100%;display: flex;justify-content: center;gap: 1rem;}
}
/*=====           End of HEADER         ======*/