/* default */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Noto+Serif+KR:wght@200;300;400;500;600;700&display=swap');
html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, code, address, ul, ol, li, menu, nav, section, article, aside, dl, dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption {margin:0; padding:0;}
ul, ol, li {list-style:none;}
a {color:inherit; text-decoration:none; outline:none;}
input, button, select, fieldset, textarea {border-radius: 0; appearance: none; border: 0; font-family: inherit;}
input:focus, select:focus {outline: 0;}
button:focus, a:focus, button, a {outline: none;}
h1, h2, h3, h4, strong, th {font-weight:normal; font-family:inherit; color:inherit;}
em {font-style: normal;}
html, body {font-family: 'Noto Sans KR';}
html.not-scroll, html.not-scroll body {overflow-y: hidden;}
html {color: #222;}
.skip, legend {overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(1px, 1px, 1px, 1px);}
* {box-sizing: border-box; word-break: keep-all;}

a:focus, button:focus, input:focus, select:focus {outline: 1px dashed #ddd;}
button {cursor: pointer; background-color: transparent;}
br {font-size: 0;}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.fr { display:none;}

/* 기본 레이아웃 */
body.main_img {min-height: 150vh; margin-top: 90px; background-color: #ddd;}
.wrap {overflow-x: hidden;}
.layout {max-width: 1400px; width:100%; margin: 0 auto;}
@media (max-width:1440px) {
  .layout {padding-left: 20px; padding-right: 0px;}
}
@media (max-width:1024px) {
  body.main_img {margin-top: 65px;}
}

.header.sub { background-position: 0 90px;}

#logo-txt {
    display: inline;
    padding: 30px 0 0 10px;
    width: 220px;
}


/* 상단 헤더 */
.header-gnb-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 155px; background-color: #fff; transition: all 0.5s; z-index: 10000;}
.header-gnb-wrap .logo-inner {position: relative; display:block; height:90px;}
.header-gnb-wrap .logo-inner .header-logo {position: absolute; top: 4px; z-index:99;}
.header-gnb-wrap .logo-inner .header-logo a img {display: block; width:170px;}
.header-gnb-wrap .logo-inner .header-lng {position:absolute; top: 14px; right:60px;}
.header-gnb-wrap .logo-inner .header-lng .lng {display:inline-block;}
.header-gnb-wrap .logo-inner .header-lng .btn_log { display:inline-block; height: 45px; padding:10px 10px 0 10px; background: #729b3c; border: 1px solid rgba(40, 49, 6, 0.2); color: #FFF; font-family: 'Pretendard-Regular'; font-size: 18px; font-weight: 500; border-radius: 30px; justify-content: center;}
.header-gnb-wrap .header-inner {position: relative; text-align: left; top:90px;}
.header-gnb-wrap .header-gnb {display: inline-block;}
.header-gnb-wrap .header-gnb .gnb-depth-1 {display: flex; text-align: center;}
.header-gnb-wrap .header-gnb .depth-1 {position: relative;}
.header-gnb-wrap .header-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; height: 65px; padding: 0 30px; font-size: 19px; font-weight: bold;}
.header-gnb-wrap .header-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header-gnb-wrap .header-gnb .depth-1 > .depth-1-link > span.fr { display: none;}
.header-gnb-wrap .header-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: 0; width: 0; height: 11px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: #9bb620;}
.header-gnb-wrap .header-gnb .depth-1.current > a > span::before {content: ""; display: block; width:calc(100% + 4px);}
.header-gnb-wrap .header-gnb .depth-1 .depth-item {background-color: #313341; position: absolute; top: 100%; left: 0; width: 100%; height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: all 0.3s;}
.header-gnb-wrap .header-gnb .depth-1.current .depth-item {visibility: visible; opacity: 1; transition: all 0.5s;}
.header-gnb-wrap .header-gnb .depth-1 .depth-item .gnb-depth-2 {padding: 10px 0; visibility: hidden; opacity: 0; transition: all 0.3s;}
.header-gnb-wrap .header-gnb .depth-1.current .depth-item .gnb-depth-2 {visibility: visible; opacity: 1; transition: all 0.5s;}
.header-gnb-wrap .header-gnb .depth-2 > .depth-2-link {display: block; padding: 8px 0; font-size: 17px; color: #ddd; transition: color 0.1s;}
.header-gnb-wrap .header-gnb .depth-2 > .depth-2-link .fr { font-size:16px;}
.header-gnb-wrap .header-gnb .depth-2 > .depth-2-link:hover,
.header-gnb-wrap .header-gnb .depth-2 > .depth-2-link:focus {color: #9bb620; font-weight: 500;}

.header-gnb-wrap .mobile-gnb {display: none;}
.header-gnb-wrap .mobile-gnb .sidebar-btn {position: relative; width: 65px; height: 65px; z-index: 1;}
.header-gnb-wrap .mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 20px; width: 24px; height: 2px; background-color: #222;}
.header-gnb-wrap .mobile-gnb .sidebar-btn span:nth-child(1) {top: 22px;}
.header-gnb-wrap .mobile-gnb .sidebar-btn span:nth-child(2) {top: 32px; transition: opacity 0s 0.15s;}
.header-gnb-wrap .mobile-gnb .sidebar-btn span:nth-child(3) {top: 42px;}
.header-gnb-wrap .mobile-gnb .sidebar-btn span:nth-child(1), .header-gnb-wrap .mobile-gnb .sidebar-btn span:nth-child(3) {transition: top 0.15s 0.15s, transform 0.15s, width 0.15s, left 0.15s;}
.header-gnb-wrap .mobile-gnb.open .sidebar-btn span:nth-child(2) {opacity: 0; transition: opacity 0.15s;}
.header-gnb-wrap .mobile-gnb.open .sidebar-btn span:nth-child(1), .header-gnb-wrap .mobile-gnb.open .sidebar-btn span:nth-child(3) {top: 32px; width: 30px; transition: top 0.15s, transform 0.15s 0.15s, width 0.15s 0.15s, left 0.15s 0.15s;}
.header-gnb-wrap .mobile-gnb.open .sidebar-btn span:nth-child(1) {left: 18px; transform: rotate(45deg);}
.header-gnb-wrap .mobile-gnb.open .sidebar-btn span:nth-child(3) {left: 18px; transform: rotate(-45deg);}
.header-gnb-wrap .mobile-gnb .sidebar-wrap {position: fixed; width: 100%; height: calc(100vh - 65px); top: 65px; left: 0; background-color: rgba(233,246,242,0.7); visibility: hidden; opacity: 0; transition: all 0.5s;}
.header-gnb-wrap .mobile-gnb.open .sidebar-wrap {visibility: visible; opacity: 1;}
.header-gnb-wrap .mobile-gnb .sidebar-wrap .sidebar {position: absolute; top: 0; right: 0; width: 100%; max-width: 375px; height: 100%; background-color: #fff; transform: translateX(100%); transition: all 0.5s;}
.header-gnb-wrap .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
.header-gnb-wrap .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto;}
.header-gnb-wrap .mobile-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; position: relative; padding: 0 60px 0 25px; height: 60px; font-size: 17px; font-weight: bold;}
.header-gnb-wrap .mobile-gnb .depth-1 > .depth-1-link:not(:only-child)::before {content: "▼"; display: block; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); font-size: 10px;}
.header-gnb-wrap .mobile-gnb .depth-1.open > .depth-1-link:not(:only-child)::before {content: '▲';}
.header-gnb-wrap .mobile-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header-gnb-wrap .mobile-gnb .depth-1 > .depth-1-link > span.fr {display:none;}
.header-gnb-wrap .mobile-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: 0; width: 0; height: 9px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: #9bb620;}
.header-gnb-wrap .mobile-gnb .depth-1.open > .depth-1-link > span::before {width:calc(100% + 4px);}
.header-gnb-wrap .mobile-gnb .gnb-depth-2 {max-height: 0; overflow: hidden; padding: 0; background-color: #edf6fc; text-align: left; box-sizing: content-box; transition: all 0.35s ease-in-out;}
.header-gnb-wrap .mobile-gnb .depth-1.open .gnb-depth-2 {padding: 10px 0;}
.header-gnb-wrap .mobile-gnb .depth-2 > .depth-2-link {display: block; visibility: hidden; opacity: 0; padding: 7px 25px; font-size: 14px; font-weight: 500; color: #777; transition: all 0.35s;}
.header-gnb-wrap .mobile-gnb .depth-2 > .depth-2-link.active {color: #007ea5; font-weight: bold;} /* 현재 페이지 활성화 되어있음을 알리는 active 클래스 */
.header-gnb-wrap .mobile-gnb .depth-1.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}
@media (max-width: 1440px){
  .header-inner.layout {padding-right: 0;}
}
@media (max-width:1240px) {
  .header-gnb-wrap .header-gnb .depth-1 > .depth-1-link {padding: 0 45px;}
  .header-gnb-wrap .header-gnb .depth-1 > .depth-1-link {font-size: 18px;}
  .header-gnb-wrap .header-gnb .depth-2 > .depth-2-link {font-size: 16px;}
}
@media (max-width:1024px) {
  .header-gnb-wrap {position: fixed; width: 100%; height: 65px; overflow: visible;}
  .header-gnb-wrap .header-inner {text-align: right; top: 0;}
  .header-gnb-wrap .header-logo {top: 12px;}
  .header-gnb-wrap .header-logo img {width: 100px;}
  .header-gnb-wrap .logo-inner .header-logo a img {display: block; width:100px;}
  .header-gnb-wrap .header-gnb {display: none;}
  .header-gnb-wrap .mobile-gnb {display: block;}
  #logo-txt { display: none;}
}
@media (max-width:500px) {
  html.not-scroll .header-gnb-wrap .header-logo {opacity: 0;}
  .header-gnb-wrap .mobile-gnb .sidebar-wrap .sidebar {max-width: 100%;}
  .header-gnb-wrap .logo-inner .header-lng {z-index:1;}
  .header-gnb-wrap .logo-inner .header-lng .btn_log { height:35px;}
  .btn_log > a > .fr {font-size:13px;}
}
/* 상단 헤더 End */