@charset "UTF-8";

/* 폰트 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  src: local('Pretendard Light'), url(../font/Pretendard-Light.woff) format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  src: local('Pretendard Regular'), url(../font/Pretendard-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  src: local('Pretendard Medium'), url(../font/Pretendard-Medium.woff) format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff) format('woff');
}
@font-face {
  font-family: 'GMarketSans';
  src: local('GMarketSans Medium'), url(../font/GmarketSansMedium.woff) format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'GMarketSans';
  src: local('GMarketSans Bold'), url(../font/GmarketSansBold.woff) format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'KIMM_Bold';
  src: url(../font/KIMM_Bold.woff2) format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button {margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all; word-wrap: break-word}
body, button, input, select, table, textarea {font-family: 'Pretendard'; font-size: 1em; font-weight: 400; color: #000; line-height: 1.2; letter-spacing: -0.04em}
html {height: 100%;}
body {height: 100%; box-sizing: border-box; 
  -webkit-text-size-adjust: none; /* 크롬, 사파리, 오페라 신버전 */ 
  -ms-text-size-adjust: none; /* IE */ 
  -moz-text-size-adjust: none; /* 파이어폭스 */ 
  -o-text-size-adjust: none; /* 오페라 구버전 */}
button, fieldset, img {border: 0 none}
fieldset, img {border: 0}
img, li {vertical-align: top}
ol, ul, dl, menu, li {list-style: none}
address, em {font-style: normal}
a {color: inherit; text-decoration: none;}
a:active, a:focus, a:hover {text-decoration: none;}
button {border: 0; background: 0 0; cursor: pointer}
table {margin: 0; padding: 0; border: 0; border-spacing: 0; border-collapse: collapse;}
input, select, textarea {border: 0; background: 0; appearance: none; border-radius: 0; box-shadow: none}
embed, iframe, img, object, video {max-width: 100%}
input[type=search]::-ms-clear, input[type=search]::-ms-reveal, input[type=text]::-ms-clear, input[type=text]::-ms-reveal {display: none; width: 0; height: 0}
input[type=search]::-webkit-search-cancel-button {-webkit-appearance: none}
input[type='text'], input[type='password'], input[type='submit'], input[type='search'] {appearance: none; border-radius: 0; background-color: transparent}
button, input[type='button'], input[type='submit'], input[type='reset'], input[type='file'] {appearance: button; border-radius: 0}
*, *:before, *:after {box-sizing: border-box;}
form {margin: 0; padding: 0;}
fieldset {margin: 0; padding: 0; border: 0 none;}
caption, legend {position: static; margin: -1px; padding: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); word-break: initial; word-wrap: initial;}
.blind, .sr-only {position: absolute !important; margin: 0 !important; padding: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); word-break: normal; word-wrap: normal;}
.blind { position: absolute; margin: -1px; padding: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; word-break: normal; word-wrap: normal;}
.clear {zoom: 1;}
.clear:after {content: ""; display: block; clear: both;}
table {width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed;}
body.modal {overflow: hidden;}
body:has(.modal) {height: 100%; overflow: hidden;}
body:has(dialog[open]) {overflow: hidden;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
button {border: 0 none; background-color: transparent; cursor: pointer;}
figure {margin: 0;}

/* 입력서식 */
input, button, label, textarea, select {vertical-align: middle;}
input[type=text], input[type=password], input[type=number], input[type=tel], input[type=email], textarea {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
input[type=text][disabled], input[type=password][disabled], input[type=number][disabled], input[type=tel][disabled], input[type=email][disabled], textarea[disabled] {background: transparent;}
input[type=text][readonly=readonly], input[type=password][readonly=readonly], input[type=number][readonly=readonly], input[type=tel][readonly=readonly], input[type=email][readonly=readonly] {background: transparent;}
select {box-sizing: border-box; appearance: none;}
select::-ms-expand {display: none;}
textarea {width: 100%; min-height: 60px; resize: none; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;}
select[style], input[style], input[size] {width: auto; min-width: 0;}
button, input[type=submit] {border: 0; padding: 0; cursor: pointer; background: transparent;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
input[type=file] {margin: auto;}
input::placeholder {font-size: 1em;}
input[type=text]::-ms-clear {display: none;}
input:focus::placeholder, textarea:focus::placeholder {color: transparent;}
input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type='number'] {-moz-appearance: textfield;}
.bf::before, .af::after {display: block; content: "";}
/* ============================== //reset.css ============================== */

/* 본문바로가기 */
#accessibility a {overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: #000; color: #fff; text-align: center; z-index: 1100;}
#accessibility a:focus, #accessibility a:active {width: 100%; height: 45px; padding: 10px}

.kimm { font-family: 'KIMM_Bold';}

:root {
  --main_color: #09276b;

  --input_bg_color: #eef2f9;
  --table_bg_color01: #f7f7f7;
  --input_border: #9da4b8;
  --border_color: #d5d9e0;

  --sub_color01: #3970eb;
  --sub_color02: #ba522a;
  --sub_color03: #8d8d8d;
  --sub_color04: #ae0f0f;
  --sub_color05: #373f81;
  --sub_color06: #4334af;
  --sub_color07: #49961a;
  --sub_color08: #119c9f;
  --sub_color09: #0f3a9c;

  --text_s: 14px;
  --text_m: 16px;
  --text_l: 18px;
  --text_xl: 20px;

  --title_m: 26px;
}

@media screen and (max-width:768px){
  :root {
    --title_m: 18px;
    --text_xl: 14px;
    --text_l: 14px;
    --text_m: 11px;
  }
}

body{
  letter-spacing: -0.06em;
}
body.modal {
  width: 100%;
  height: 100vh;
  max-width: 100vw;
  overflow: hidden !important;
}

/* 헤더 */
.header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding-bottom: 25px;
  box-shadow: 0px 0px 2px var(--border_color);
  transition: 0.3s;
  transform: translateY(0px);
}
.header.scroll {
  transform: translateY(-70px);
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
}
.main_logo .on {
  display: none;
}
.hd_top {
  padding: 25px 0;
}
.hd_top .sec_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hd_top .main_logo img {
  max-height: 41px;
}
.hd_top .sns_list {
  display: flex;
  align-items: center;
  gap: 15px;
}
.hd_top .sns_list .sns_item {
  width: 32px;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: contain;
}
.hd_top .sns_list .sns_item.youtube {
  background-image: url(../img/hd_sns_youtube.png);
}
.hd_top .sns_list .sns_item.blog {
  background-image: url(../img/hd_sns_blog.png);
}
.hd_top .sns_list .sns_item.insta {
  background-image: url(../img/hd_sns_insta.png);
}
.hd_bot .sec_inner {
  display: flex;
  align-items: center;
}
.nav {
  margin-left: 20px;
}
.util_area .srh_btn.moblie {
  display: none;
}
.util_area .ham_btn + .sitemap {
  display: none;
}
.util_area .ham_btn.on + .sitemap {
  display: flex;
}
.util_area .ham_btn {
  width: 45px;
  aspect-ratio: 1 / 1;
  background-color: var(--input_bg_color);
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.util_area .ham_btn:hover {
  background-color: var(--main_color);
}
.util_area .ham_btn:hover span {
  background-color: #fff;
}
.util_area .ham_btn span {
  width: 20px;
  height: 2px;
  background-color: #000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.2s ease-in-out;
}
.util_area .ham_btn span:nth-child(1) {
  top: 15px;
}
.util_area .ham_btn span:nth-child(2) {
  top: calc(50% - 1px);
}
.util_area .ham_btn span:nth-child(3) {
  bottom: 14px;
}
/* 사이트맵 */
.sitemap {
  height: calc(100vh + 70px);
  position: fixed;
  top: 0;
  left: 0;
  inset: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.sitemap .inner {
  width: 100%;
  max-width: 1000px;
  background-color: #fff;
  border-radius: 10px;
  padding: 40px 10px 40px;
}
.sitemap .sitemap_wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sitemap .sitemap_tit {
  margin-bottom: 70px;
}
.sitemap .sitemap_tit span {
  display: inline-block;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: var(--sub_color01);
  border-bottom: 3px solid var(--sub_color01);
  padding-bottom: 10px;
}
.sitemap .sitemap_grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
}
.sitemap_depth01_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 0 30px;
  position: relative;
}
.sitemap_depth01_wrap:not(:last-of-type)::after {
  content: '';
  width: 1px;
  height: 400px;
  background-color: var(--border_color);
  position: absolute;
  right: 0;
  top: -20px;
}
.sitemap_depth01_wrap .sitemap_depth01 {
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
.sitemap_depth01_wrap:hover .sitemap_depth01 {
  color: #09276b;
}
.sitemap_depth02_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.sitemap_depth02_wrap .sitemap_depth02 {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.sitemap_depth02_wrap .sitemap_depth02:hover {
  color: var(--sub_color01);
}
.sitemap_depth02_wrap li:has(.sitemap_depth03_wrap:hover) .sitemap_depth02 {
  color: var(--sub_color01);
}
.sitemap_depth02_wrap .sitemap_depth03:hover {
  color: var(--sub_color01);
}
.sitemap_depth03_wrap li {
  position: relative;
  padding-left: 10px;
  margin-top: 10px;
}
.sitemap_depth03_wrap li::before {
  content: '';
  width: 6px;
  height: 1px;
  background-color: #000;
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 0;
}
.sitemap .btn_sitemap_close {
  width: 45px;
  aspect-ratio: 1 / 1;
  background: url(../img/ico_sitemap_close.png)no-repeat;
  position: absolute;
  top: 0;
  right: 20px;
  transition: all 0.2s ease-in-out;
}
.sitemap .btn_sitemap_close:hover {
  transform: rotate(180deg);
}
.depth01_wrap {
  display: flex;
  align-items: center;
  gap: 50px;
}
.depth01_wrap > li {
  position: relative;
}
.depth01_wrap .depth01 {
  height: 100%;
  min-height: 45px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.depth01_wrap .depth01.on {
  color: var(--main_color);
}
.depth02_wrap {
  height: max-content;
  display: none;
  min-width: 180px;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid var(--border_color);
  padding: 30px 20px;
  border-radius: 10px;
  z-index: 50;
  box-shadow: 0px 0px 10px var(--border_color);
}
.depth02_wrap .depth02_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.depth02_wrap .depth02_list .depth02 {
  font-size: 18px;
  font-weight: 500;
}
.depth02_wrap .depth02_list .depth02:hover {
  color: var(--sub_color01);
}
.depth03_wrap .depth03_list>li {
  margin-top: 10px;
  position: relative;
  padding-left: 10px;
}
.depth03_wrap .depth03_list>li::before {
  content: '';
  width: 6px;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  top: 8px;
  left: 0;
}
.depth02_list li:has(.depth03_wrap:hover) .depth02 {
  color: var(--sub_color01);
}
.depth03_wrap:hover .depth03:hover {
  color: var(--sub_color01);
}
.srh_box_wrap {
  margin-left: auto;
}
.srh_box {
  min-width: 325px;
  height: 45px;
  border-radius: 45px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--input_bg_color);
}
.srh_box input {
  font-size: 16px;
  height: 100%;
  outline: none;
}
.srh_box .srh_btn > i {
  font-size: 20px;
}
.srh_box_wrap .total_close {
  display: none;
}
.sitemap .sitemap_menu{
  padding: 40px 0 0;
}
.sitemap .sitemap_menu > ul{
  display: flex;
  justify-content: center;
}
.sitemap .sitemap_menu_item{
  padding: 5px 15px;
}
.sitemap .sitemap_menu li:not(:first-of-type){
  border-left: 1px solid #000;
}
@media screen and (max-width: 1024px) {
  .hd_bot .depth01_wrap {
    gap: 20px;
  }
  .depth01_wrap .depth01 {
    font-size: 18px;
  }
}

@media screen and (min-width: 767px) {
  .sitemap_depth02_wrap {
    display: flex !important;
  }
}

@media screen and (max-width: 768px) {
  .header {
    padding-bottom: 0;
  }
  .header.scroll {
    transform: translateY(-50px);
  }
  .header.on .sitemap {
    display: block;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .hd_top .sec_inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
  }
  .hd_top .sns_list {
    margin-left: auto;
    gap: 10px;
    order: 1;
  }
  .hd_top .sns_list .sns_item {
    width: 25px;
  }
  .hd_top .main_logo {
    padding-top: 8px;
  }
  .hd_top .main_logo img {
    max-height: 26px;
  }
  .hd_bot .util_area {
    position: absolute;
    top: 65px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .util_area .ham_btn.on span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .util_area .ham_btn.on span:nth-child(2) {
    opacity: 0;
  }
  .util_area .ham_btn.on span:nth-child(3) {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .util_area .srh_btn.moblie {
    display: block;
  }
  .util_area .srh_btn.moblie i {
    font-size: 24px;
  }
  .sitemap {
    top: 115px;
    height: calc(100vh - 115px);
    background-color: #fff;
    box-shadow: 0 -10px 10px -5px rgba(0, 0, 0, 0.1);
    padding: 0;
  }
  .sitemap .inner {
    max-width: 100%;
    height: 100%;
    padding: 0;
  }
  .sitemap .sitemap_tit {
    display: none;
  }
  .sitemap .btn_sitemap_close {
    display: none;
  }
  .sitemap .sitemap_grid {
    display: flex;
    flex-direction: column;
  }
  .sitemap_depth01_wrap {
    gap: 0;
    align-items: flex-start;
    border-bottom: 1px solid #c5c5c5;
    padding: 0;
  }
  .sitemap_depth01_wrap:has(.sitemap_depth02_wrap) .sitemap_depth01::after {
    content: '';
    width: 15px;
    aspect-ratio: 15 / 9;
    background: url(../img/ico_pathdown.png)no-repeat;
    display: inline-block;
  }
  .sitemap_depth01_wrap .title_box {
    width: 100%;
  }
  .sitemap_depth01_wrap .sitemap_depth01 {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }
  .sitemap_depth01_wrap .sitemap_depth01.on {
    border-bottom: 1px solid #c5c5c5;
  }
  .sitemap_depth01_wrap:not(:last-of-type)::after {
    display: none;
  }
  .sitemap_depth02_wrap {
    display: none;
    width: 100%;
    padding: 20px;
    background-color: #eef3f9;
  }
  .sitemap_depth02_wrap>li:not(:last-of-type) {
    margin-bottom: 20px;
  }
  .sitemap_depth02_wrap .sitemap_depth02 {
    text-align: start;
    font-size: 16px;
  }
  .sitemap_depth03_wrap>li {
    margin-top: 8px;
  }
  .nav {
    display: none;
  }
  .srh_box_wrap {
    display: none;
    width: 100%;
    position: fixed;
    top: 115px;
    left: 0;
    background-color: #fff;
    border-top: 1px solid var(--border_color);
    box-shadow: 10px 10px 10px var(--border_color);
    padding: 30px 20px;
    z-index: 100;
  }
  .srh_box_wrap .srh_inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .srh_box_wrap .srh_inner form {
    width: calc(100% - 55px);
  }
  .srh_box {
    flex: 1;
    min-width: 0;
    gap: 10px;
  }
  .srh_box input {
    width: 100%;
  }
  .srh_box_wrap .total_close {
    width: 45px;
    height: 45px;
    background-color: var(--main_color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .srh_box_wrap .total_close > i {
    font-size: 25px;
    line-height: 1;
  }
  .sitemap .sitemap_menu{
    padding: 20px 0 0;
  }
  .sitemap .sitemap_menu_item{
    padding: 3px 10px;
    font-size: 14px;
  }
}

/* 푸터 */
.footer {
  background-color: #353b44;
}
.footer .ft_top {
  padding: 25px 0;
  border-bottom: 1px solid #4c545f;
}
.footer .ft_top .link_wrap a {
  font-size: 18px;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  color: #fff;
}
.footer .ft_top .link_wrap a:hover {
  color: var(--sub_color08);
}
.footer .ft_top .link_wrap:last-of-type a {
  margin-right: 60px;
}
.footer .ft_bot {
  padding: 45px 0 80px;
}
.footer .ft_bot .sec_inner {
  display: flex;
  justify-content: space-between;
}
.footer .ft_bot .left {
  display: flex;
  gap: 50px;
}
.footer .ft_bot .left .ft_logo img {
  max-height: 42px;
}
.footer .ft_bot .left .ft_text > p {
  display: block;
  margin-bottom: 15px;
}
.footer .ft_bot .left .address {
  font-size: 16px;
  font-weight: 300;
  color: #b3b3b3;
}
.footer .ft_bot .left .call {
  font-size: 16px;
  font-weight: 300;
  color: #b3b3b3;
  margin-left: 20px;
}
.footer .ft_bot .left .copyright {
  font-size: 16px;
  color: #d0d0d0;
}

@media screen and (max-width: 1024px) {
  .footer .ft_top .link_wrap a {
    font-size: 16px;
  }
  .footer .ft_top .link_wrap:last-of-type a {
    margin-right: 30px;
  }
  .footer .ft_bot .left {
    gap: 30px;
  }
}

@media screen and (max-width: 768px) {
  .footer .ft_top {
    padding: 0px;
    border-bottom: none;
  }
  .footer .ft_top .sec_inner{
    padding: 0;
  }
  .footer .ft_top .link_wrap {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    width: 100%;
  }
  .footer .ft_top .link_wrap a{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #4c545f;
    border-bottom: 1px solid #4c545f;
  }
  .footer .ft_top .link_wrap a:nth-of-type(2n){
    border-right: none;
  }
  .footer .ft_top .link_wrap:last-of-type a {
    margin-right: 0;
  }
  .footer .ft_bot {
    padding: 35px 10px 60px;
  }
  .footer .ft_bot .left {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .footer .ft_bot .left .ft_logo img {
    max-height: 33px;
  }
  .footer .ft_bot .left .ft_text {
    text-align: center;
  }
  .footer .ft_bot .left .address {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .footer .ft_bot .left .call {
    font-size: 14px;
    margin-top: 5px;
    margin-left: 0;
    display: block;
  }
  .footer .ft_bot .left .copyright {
    font-size: 14px;
  }
  .footer .ft_bot .sec_inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0;
  }
}