:root {
  --max-width:1600px;
  --main-color:#86333b;
  --sub-color:#323848;
  --main-font-size: 2.1rem;
  --subject-font-size: 25px;
  --cont-font-size: 1.2rem;
  --small-font-size: 1.1rem;
  --v-small-font-size: 16px;

  --sub-main-font-size:1.8rem;
}

a, button, p, span, b, div, li {font-family: 'Pretendard'; letter-spacing:-0.02em; color:#333;}
h5, h6, h5 *, h6 * {font-family: 'Pretendard'; color:#333;}
h1, h2, h3, h4,
h1 *, h2 *, h3 *, h4 * {font-family: 'Pretendard'; letter-spacing:-0.04em; color:#666}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, a *, button *, p *, span *, b *, div * {color:inherit;}

* {margin: 0; padding: 0; box-sizing: border-box;}
a {text-decoration: none;color: inherit;}
ul, ol {list-style: none;}
button { all: unset; cursor: pointer;}
body {font-family: Arial, sans-serif;font-size: 16px;line-height: 1.5;color: #333;background-color: #fff;}
img {max-width: 100%;height: auto;}
table {border-collapse: collapse;width: 100%;}

header .top-nav .top-nav-inner,
header .bottom-nav .bottom-nav-inner,
.container .contents_wrap .contents .row{max-width:var(--max-width); margin:0 auto;}


/* 공용 클래스 */
.d-flex {display:flex;}
.d-flex.column {flex-direction:column;}
.d-flex.row {flex-direction:row;}
.d-flex.wrap {flex-wrap:wrap;}
.d-flex.nowrap {flex-wrap:nowrap;}
.d-flex.align-center {align-items:center;}
.d-flex.align-start {align-items:flex-start;}
.d-flex.align-end {align-items:flex-end;}
.d-flex.justify-center {justify-content:center;}
.d-flex.justify-start {justify-content:flex-start;}
.d-flex.justify-end {justify-content:flex-end;}
.d-flex.justify-between {justify-content:space-between;}
.d-flex.justify-around {justify-content:space-around;}
.d-flex.justify-evenly {justify-content:space-evenly;}

.gap-1 {gap:10px;}
.gap-2 {gap:20px;}
.gap-3 {gap:30px;}
.gap-4 {gap:40px;}
.gap-5 {gap:50px;}





/* 헤더 */
/* 상단 로고 */
#top-logo {max-width:200px; font-size:0;}
#top-logo > a {display:flex; height:80px; align-items:center;}
.login > a {color:#efefef;}
header {position:relative; z-index:999; box-shadow:0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);}
/* 언어 변경 버튼 */
header .lan-change .lan-btn {display:flex; align-items:center; gap:5px; color:#efefef; font-size:15px;}
/* 상단 네비게이션 */
header .top-nav {background:var(--main-color);}
header .top-nav .top-nav-inner {display:flex; justify-content:flex-end; align-items:center; gap:20px; padding:5px 20px;}
header .top-nav .top-nav-inner .link-box {display:flex; align-items:center; gap:26px;}
header .top-nav .top-nav-inner .link-box > li {position:relative;}
header .top-nav .top-nav-inner .link-box > li::before {position:absolute; content:''; left:-10px; top:50%; transform:translateY(-50%); width:2px; height:50%; background:#ffffff6b;}
header .top-nav .top-nav-inner .link-box > li > a {display:flex; align-items:center; gap:5px; color:#efefef; font-size:15px;}
/* 홈페이지 네비게이션션 */
header .bottom-nav {border:1px solid #eee; background:#fff;}
header .bottom-nav .bottom-nav-inner {position:relative; display:flex; justify-content:space-between; align-items:center;}
header .bottom-nav .bottom-nav-inner::after {content:''; display:block; clear: both;}
header .bottom-nav .bottom-nav-inner .menu {display:flex; justify-content:flex-end; gap:25px; width:calc(100% - 200px); margin:0 0 0 auto;}
header .bottom-nav .bottom-nav-inner .menu > li {position:relative;}
header .bottom-nav .bottom-nav-inner .menu > li > a {display:block; position: relative; z-index: 1001; width: 100%; height:80px; overflow: hidden; line-height:80px; text-overflow:ellipsis; white-space:nowrap; text-align:center; padding:0 30px; font-size:1.4em; font-weight:700;}
header .bottom-nav .bottom-nav-inner .menu .submenu {display: none; position:absolute; top:80px; left:-40px; background:white; border:3px solid #a93437; list-style:none; width:230px; padding:15px 0; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1); z-index:99; border-radius:20px;}
header .bottom-nav .bottom-nav-inner .menu .submenu > li {padding:5px 15px;}
header .bottom-nav .bottom-nav-inner .menu .submenu > li a {display:block; color:#333; font-size:1.1em; font-weight:600; word-break:keep-all; font-size:var(--cont-font-size);}
header .bottom-nav .bottom-nav-inner .menu .submenu > li a:hover {color:var(--main-color);}

header .bottom-nav .bottom-nav-inner .menu > li.on > a > span {color:var(--main-color);}
header .bottom-nav .bottom-nav-inner .menu .submenu > li.on > a {color:var(--main-color);}

/*모바일 메뉴*/
header .bottom-nav .bottom-nav-inner .m-menu {display:none;}


/* 본문 */
.container {position:relative; padding:50px 0; background:#f9f9f9;}
.sub .container {background:#fff;}
.container::after {content:''; display:block; overflow:hidden; clear: both;}
.container .row {max-width:var(--max-width); margin-left:auto; margin-right:auto;}
.container .row.full {max-width:100%;}



/* 푸터 */
footer .inner {max-width:var(--max-width); margin:0 auto; position:relative;}
footer {background:#39414a; display:block; padding:40px 0; color:#bbb;}
/* 웹접근성 인증 마크 */
footer .inner .wa {position:absolute; right:0; top:0; height:40px;}
footer .inner .wa img {display:block; height:100%;}
footer .inner .top_f .mark {display:block; text-align:right;}
footer .inner .top_f .mark .icon {font-size:0;}
footer .inner .top_f .mark .icon > img {height:40px;}
/* 유관기관 */
footer .organization h4 {display:block; font-size:17px; color:#fff; margin-bottom:10px;}
footer .organization ul {display:flex; gap:10px;}
footer .organization ul li a {display:block; height:100%; font-size:0; border-radius:5px; overflow:hidden; color:inherit;}
footer .organization ul li a span {font-size:0;}
/* 사이트 정보 */
footer .footer_logo {margin-top:30px; margin-bottom:10px; padding-top:30px; border-top:1px solid #f5f5f54a;}
footer .footer-info .info {width:50%; display:flex; flex-wrap:wrap; column-gap:15px; row-gap:5px;}
footer .footer-info .info > p {color:#bbb;}
footer .footer-info .info .copyright {width:100%;}
footer .footer-info .etc-links {width:50%; display:flex; justify-content: flex-end; align-items:center; gap:20px;}
footer .footer-info .etc-links > li > a {color:#bbb; transition:all .3s;}
footer .footer-info .etc-links > li > a:hover {color:#fff;}


@media (max-width:1162px) {
  #top-logo {max-width:150px;}
  header .bottom-nav .bottom-nav-inner .menu > li > a {padding:0 10px; font-size:1.2em;}
}

@media (max-width:1024px) {
  :root {
    --main-font-size: 1.3em;
    --cont-font-size: 1em;
    --small-font-size: 1em;
    --sub-main-font-size: 1em;
    --sub-sub-font-size: 1em;
  }

  .container {padding:30px 15px;}
  footer {padding:40px 15px;}
  footer .organization h4 {font-size:14px;}
  footer .organization ul {flex-wrap:wrap; justify-content:space-between;}
  footer .inner .wa {top:-25px;}
  .d-flex {flex-direction:column; gap:10px;}
  footer .footer-info .info {width:100%;}
  footer .footer-info .etc-links {width:100%; flex-wrap:wrap; justify-content:flex-start;}
  footer .footer-info .etc-links > li > a {font-size:14px;}
  footer .footer-info .info > p {font-size:14px;}
}

@media (max-width:900px) {
  #top-logo {max-width:130px;}

  header .bottom-nav .bottom-nav-inner .menu {display:none;}
  header .bottom-nav .bottom-nav-inner .m-menu {display:block; font-size:0;}

  header .bottom-nav .bottom-nav-inner {padding:5px 15px;}
  header .bottom-nav .bottom-nav-inner::after {display:none;}
  header .bottom-nav .bottom-nav-inner .m-menu .m_toggle_btn {background:#eee; padding:5px; border-radius:50%;}
  header .bottom-nav .bottom-nav-inner .m-menu .m_toggle_btn > i {font-size:20px;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub {display:none;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub.on {display:block; position:fixed; left:0; top:0; background:#fff; width:100%; height:100%; padding:20px; font-size:15px; overflow-y: scroll;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .inner {}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .sitemap-header {display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ccc;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .sitemap-header .logo {font-size:0; width:130px;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .sitemap-header i {font-size:20px; color:#333;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li {margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #efefef;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li:last-child {margin-bottom:0;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li > button {display:flex; width:100%; align-items:center; justify-content:space-between; font-weight:600;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li.on > button {color:var(--main-color);}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li.active > button > i {transform:rotate(180deg);}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container .submenu {margin-top:15px; background:#eee; padding:20px 10px; border-radius:5px;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container .submenu > li {margin-bottom:5px; padding-left:10px;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container .submenu > li > a {display:block;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container > ul > li > a > span {font-weight:600;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container > ul > li.on > a > span {color:var(--main-color);}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container .submenu > li:last-child {margin-bottom:0;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container .submenu .submenu {margin-top:5px; padding:0;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container .submenu .submenu > li {position:relative;}
  header .bottom-nav .bottom-nav-inner .m-menu .m-sub .m-main-menu > li .sub-menu-container .submenu .submenu > li::before {position:absolute; content:''; left:0; top:9px; width:3px; height:3px; background:#666; border-radius:50%;}
  header .lan-change .lan-btn,
  header .top-nav .top-nav-inner .link-box > li > a {font-size:13px;}

  .menu-item .sub-menu-container .submenu {display:none !important;}
  .menu-item.active .sub-menu-container .submenu {display:block !important;}
}


@media (max-width:500px) {
  :root {
    --main-font-size: 1.1em;
    --sub-main-font-size:1.1em;
  }
}