/* default */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
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: "var(--body-inter)", "var(--body-noto)", sans-serif; font-weight: 400; font-optical-sizing: auto; padding: 0; margin: 0; word-break: keep-all; -webkit-text-size-adjust: 100%;}
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;
}

/* 공통적용 */


/* header 헤더 */
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: rgb(255, 255, 255, 0.7); transition: all 0.5s; z-index: 10000;}
.header .header-inner {height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.header .header-logo {width: 100%; max-width: 140px; margin-left: 50px;}
.header .header-logo a {width: 100%; height: 100vh; max-height: 100px; display: flex; align-items: center;}
.header .header-logo img {display: block; width: 100%;}
.header .header-gnb {display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.header .header-gnb .gnb-depth-1 {display: flex; text-align: center;}
.header .header-gnb .depth-1 {position: relative;}
.header .header-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; height: 100px; padding: 0 65px; font-size: 20px; font-weight: 500; outline: none;}
.header .header-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header .header-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: -8px; width: 0; height: 1px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: var(--black-color-1);}
.header .header-gnb .depth-1.current > a > span::before {content: ""; display: block; width:calc(100% + 4px);}
.header .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 .header-gnb .depth-1.current .depth-item {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-1 .depth-item .gnb-depth-2 {padding: 10px 0; visibility: hidden; opacity: 0; transition: all 0.3s; background: rgba(255, 255, 255, 0.5);}
.header .header-gnb .depth-1.current .depth-item .gnb-depth-2 {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-2 > .depth-2-link {display: block; padding: 8px 0; font-size: 17px; color: var(--black-color-1); transition: color 0.1s;}
.header .header-gnb .depth-2 > .depth-2-link:hover,
.header .header-gnb .depth-2 > .depth-2-link:focus {color: var(--point-color-1); font-weight: 500;}

.header .mobile-gnb {display: none;}
.header .mobile-gnb .sidebar-btn {position: relative; width: 80px; height: 80px; z-index: 1; outline: none;}
.header .mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 28px; width: 25px; height: 2px; background-color: #222;}
.header .mobile-gnb .sidebar-btn span:nth-child(1) {top: 29px;}
.header .mobile-gnb .sidebar-btn span:nth-child(2) {top: 39px; transition: opacity 0s 0.15s;}
.header .mobile-gnb .sidebar-btn span:nth-child(3) {top: 49px;}
.header .mobile-gnb .sidebar-btn span:nth-child(1), .header .mobile-gnb .sidebar-btn span:nth-child(3) {transition: top 0.15s 0.15s, transform 0.15s, width 0.15s, left 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(2) {opacity: 0; transition: opacity 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1), .header .mobile-gnb.open .sidebar-btn span:nth-child(3) {top: 39px; width: 30px; transition: top 0.15s, transform 0.15s 0.15s, width 0.15s 0.15s, left 0.15s 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1) {left: 25px; transform: rotate(45deg);}
.header .mobile-gnb.open .sidebar-btn span:nth-child(3) {left: 25px; transform: rotate(-45deg);}
.header .mobile-gnb .sidebar-wrap {position: fixed; width: 100%; height: calc(100vh - 80px); top: 80px; left: 0; background-color: rgba(0, 0, 0, 0.7); visibility: hidden; opacity: 0; transition: all 0.5s;}
.header .mobile-gnb.open .sidebar-wrap {visibility: visible; opacity: 1;}
.header .mobile-gnb .sidebar-wrap .sidebar {position: absolute; top: 0; right: 0; width: 100%; max-width: 375px; height: 100%; background-color: rgb(255, 255, 255, 0.7); transform: translateX(100%); transition: all 0.5s;}
.header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
.header .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto; padding: 0;}
.header .mobile-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; position: relative; padding: 0 60px 0 25px; height: 60px; font-size: 18px; font-weight: 400;}
.header .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: 18px;}
.header .mobile-gnb .depth-1.open > .depth-1-link:not(:only-child)::before {content: '-';}
.header .mobile-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header .mobile-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: -8px; width: 0; height: 2px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: var(--black-color-1);}
.header .mobile-gnb .depth-1.open > .depth-1-link > span::before {width:calc(100% + 4px);}
.header .mobile-gnb .gnb-depth-2 {max-height: 0; overflow: hidden; padding: 0; background-color: rgb(255, 255, 255, 0.5); text-align: left; box-sizing: content-box; transition: all 0.35s ease-in-out;}
.header .mobile-gnb .depth-1.open .gnb-depth-2 {padding: 10px 0;}
.header .mobile-gnb .depth-2 > .depth-2-link {display: block; visibility: hidden; opacity: 0; padding: 10px 25px; font-size: 16px; font-weight: 500; color: var(--black-color-1); transition: all 0.35s;}
.header .mobile-gnb .depth-2 > .depth-2-link.active {color: var(--point-color-1); font-weight: bold;} /* 현재 페이지 활성화 되어있음을 알리는 active 클래스 */
.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}

.header-language {position: relative; margin-right: 50px; background: var(--point-color-1); border-radius: 17px; padding: 1px 1px}
.header-language .lang-btn {display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--white-color-1); padding: 6px 10px; border-radius: 16px; letter-spacing: 0.05em; line-height: 1;}
.header-language .lang-btn img {width: 20px; flex-shrink: 0;}
.header-language .lang-btn span {font-size: 15px; font-weight: 500;}
.header-language .lang-popup {display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--white-color-1); border: 1px solid #e0e0e0; border-radius: 4px; min-width: 68px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100;}
.header-language .lang-popup.open {display: block;}
.header-language .lang-popup ul {padding: 4px 0;}
.header-language .lang-popup li a {display: block; padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--black-color-1); text-align: center; transition: background .12s;}
.header-language .lang-popup li a:hover {background: #f5f5f5; color: #222;}
.header-language .lang-popup li.lang-active a {color: var(--point-color-1); font-weight: 700;}

.mheader-language {margin-top: 30px; display: flex; justify-content: center; align-items: center;}
.mheader-language .mlang-inner {display: flex; align-items: center; overflow-x: auto; max-width: 100%;}
.mheader-language .mlang-btn {flex-shrink: 0; background: var(--point-color-1); padding: 10px 16px; border-radius: 20px; display: flex; justify-content: center; align-items: center; gap: 5px;}
.mheader-language .mlang-btn img {width: 20px; flex-shrink: 0;}
.mheader-language .mlang-btn span {font-size: 15px; font-weight: 500; color: var(--white-color-1);}
.mheader-language .mlang-slide {display: flex; align-items: center; max-width: 0; overflow: hidden; transition: max-width 0.35s ease;}
.mheader-language .mlang-slide.open {max-width: 600px;}
.mheader-language .mlang-slide a {flex-shrink: 0; display: flex; align-items: center; padding: 8px 16px; font-size: 15px; font-weight: 600; color: var(--point-color-1); white-space: nowrap; border-left: 1px solid #eee;}

@media (max-width:1240px) {
  .header .header-gnb .depth-1 > .depth-1-link {padding: 0 45px;}
  .header .header-gnb .depth-1 > .depth-1-link {font-size: 18px;}
  .header .header-gnb .depth-2 > .depth-2-link {font-size: 16px;}
}
@media (max-width:1024px) {
  .header {position: fixed; width: 100%; height: 80px; overflow: visible;}
  .header .header-inner {text-align: right;}
  .header .header-logo {margin-left: 20px;}
  .header .header-logo a {height: 80px;}
  .header .header-logo img {width: 100%; max-width: 120px;}
  .header .header-gnb {display: none;}
  .header .mobile-gnb {display: block;}
}
@media (max-width:500px) {
  html.not-scroll .header .header-logo {opacity: 0;}
  .header .mobile-gnb .sidebar-wrap .sidebar {max-width: 100%;}
}
/* header End */

/* footer css */
.footer {background: var(--black-color-1); color: var(--white-color-1); padding: 80px 50px;}
.footer .footer-inner {width: 100%; margin: 0; display: flex; flex-direction: column; gap: 40px;}
.footer .footer-inner img {width: 100%; max-width: 200px; filter: brightness(0) invert(1);}
.footer .footer-inner p {margin: 0; font-size: 18px; line-height: 180%;}

@media (max-width:1024px) {
    .footer {padding: 60px 20px;}
    .footer .footer-inner {gap: 20px; align-items: center;}
    .footer .footer-inner img {max-width: 120px;}
    .footer .footer-inner p {margin: 0; font-size: 16px; line-height: 180%; text-align: center;}
}

/* main css */
.sm_con_wp {width: 100%; height: 100vh; background: #313341;}