@charset "utf-8";
.inner {width: calc(100% - 100px); max-width: 1123px; margin: 0 auto;}

/********* 헤더 *********/
#hd {width: 100%; background-color: #fff; transition: background-color 0.2s;}
#hd.scroll {position: fixed; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.2); z-index: 99999; backdrop-filter: blur(3px);}
#hd.scroll:hover {background-color: #fff;}
#hd.gnb-open,
#hd.scroll.gnb-open {background-color: #1F2933;}
#hd.gnb-open #hd_wrapper #logo img,
#hd.gnb-open #hd_wrapper #gnb_1dul,
#hd.gnb-open #hd_wrapper .auth-links,
#hd.gnb-open #hd_wrapper .btn-hamburger {filter: invert(1);}
#hd_wrapper {height: 80px; display: flex; align-items: center; justify-content: space-between; column-gap: 50px;}
#hd_wrapper #logo img {}
#hd_wrapper #gnb {flex: 1;}
#hd_wrapper .hd-btn-wrap {display: flex; align-items: center; column-gap: 16px;}
#hd_wrapper .auth-links {display: flex; align-items: center; column-gap: 30px;}
#hd_wrapper .auth-links a {font-size: 17px; color: #505050;}
#hd_wrapper .auth-links a svg {display: none;}
#hd_wrapper .lang-select {position: relative; display: flex; align-items: center; justify-content: center;}
#hd_wrapper .lang-select .lang-list {display: none; flex-direction: column; row-gap: 20px; z-index: 10000; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);}
#hd_wrapper .lang-select .lang-list.open {display: flex;}
#hd_wrapper .lang-select img {width: 35px; height: 35px;}
#hd_wrapper .btn-hamburger {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}
#hd_wrapper .btn-hamburger .icon-open {width: 40px; height: 40px;}
#hd_wrapper .btn-hamburger .icon-close {display: none; max-width: 40px; max-height: 40px;}
.gnb-open #hd_wrapper .btn-hamburger .icon-open  {display: none;}
.gnb-open #hd_wrapper .btn-hamburger .icon-close {display: block;}
#hd_wrapper #gnb {height: 100%; width: fit-content; margin: 0 auto; border-radius: 100px;}
#gnb .gnb_wrap {width: 100%; height: 100%;}
#hd_wrapper + #logo {padding-top: 58px;}
#hd_wrapper + #logo a {padding: 24px 0 20px; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
#hd_wrapper + #logo a svg {width: 100%; transition: filter 0.2s;}
#hd_wrapper + #logo a svg path {transition: fill 0.2s;}
#hd_wrapper:has(.gnb_al_li_plus:hover) + #logo a svg path {fill: #DADADA;}
#hd_wrapper #gnb_1dul {height: 100%; display: flex; align-items: center; justify-content: center; column-gap: 50px;}
#gnb_1dul .gnb_1dli,
.gnb_1da {height: 100%;}
#gnb_1dul .gnb_1dli {position: relative;}
#gnb_1dul .gnb_1da {display: flex; align-items: center; justify-content: center; white-space: nowrap;}
#gnb_1dul .gnb_1da span {font-size: 17px; position: relative; padding: 5px 0; margin: -5px 0;}
#gnb_1dul .gnb_1da span::after {transition: width 0.2s; content: ''; background-color: #000; width: 0; height: 1px; position: absolute; top: calc(100% - 5px); left: 0;}
#gnb_1dul .gnb_1da:hover span::after {width: 100%;}
/* 하위메뉴 */
#gnb_1dul .gnb_2dul {position: absolute; left: 50%; top: 100%; transform: translate(-50%); width: fit-content; display: none; background-color: #fff; padding: 0 24px;}
#gnb_1dul .gnb_1dli {white-space: nowrap;}
#gnb_1dul .gnb_1dli:hover > .gnb_2dul {display: block;}
#gnb_1dul .gnb_2dul .gnb_about_title,
#gnb_1dul .gnb_2dul:has(.gnb_3dul) .gnb_2da {font-size: 18px; font-weight: 600; margin-bottom: 10px;}
#gnb_1dul .gnb_2dul .gnb_about_title,
#gnb_1dul .gnb_2dul_box {text-align: center; width: fit-content;}
#gnb_1dul .gnb_2dul_box:has(.gnb_3dul) {display: flex; align-items: flex-start; column-gap: 80px;}
#gnb_1dul .gnb_3dul {display: flex; flex-direction: column; align-items: center;}
#gnb_1dul .gnb_3dli {width: 100%;}
#gnb_1dul .gnb_2dul_box:not(:has(.gnb_3dul)) .gnb_2da,
#gnb_1dul .gnb_3da {width: 100%; padding: 10px 3px; font-size: 17px;color: #575757; background-color: transparent; transition: background-color 0.2s;}
#gnb_1dul .gnb_2dul_box:not(:has(.gnb_3dul)) .gnb_2da:hover,
#gnb_1dul .gnb_3da:hover {color: #1C1C1C;}
html:has(.gnb-open),
body:has(.gnb-open) {overflow: hidden;}
#hd_wrapper #gnb .gnb_mnal {display: none;}
#gnb_all {color: #fff; display: none; padding-top: 50px; z-index: 999; position: fixed; top: 80px; right: 0; background-color: #1F2933; width: 100%; height: calc(100dvh - 80px);}
#gnb_all_bg {display: none; z-index: 888; position: fixed; top: 80px; right: 0; background-color: rgba(0, 0, 0, 0.4); width: 100%; height: calc(100dvh - 80px);}
.gnb_al_ul { row-gap: 50px; scrollbar-color: #fff #1F2933; --scrollbar-size: 6px; overflow-y: auto; padding-bottom: 54px; height: calc(100% - 37px - 52px); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
.gnb_al_li {width: calc(100% / 5); display: flex; flex-direction: column; align-items: center;}
.gnb_al_li > ul { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
#gnb_all h2 {text-align: center; font-size: 40px; font-weight: 600; color: #fff; margin-bottom: 37px;}
#gnb_all .gnb_3dul {display: none;}
#gnb_all .gnb_all_2dli.is-open > .gnb_3dul {display: block;}
#gnb_all .gnb_all_2dli.has-3depth > .gnb_all_2da {cursor: pointer;}
.gnb_al_a {width: 100%; max-width: 180px; display: flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 50px; background-color: #fff; font-size: 17px;  color: #000; font-weight: 500; margin-bottom: 10px;}
.has-3depth .gnb_all_2da {padding: 10px; display: flex; align-items: center; justify-content: center; column-gap: 10px;}
.gnb_all_2dli .gnb_all_2da svg {transition: transform 0.2s;}
.gnb_all_2dli.is-open .gnb_all_2da svg {transform: rotate(180deg);}
.gnb_all_2dli .gnb_all_2da,
.gnb_all_2dli .gnb_3da {width: 100%; padding: 10px; font-size: 16px; color: #E3E3E3;}

/********* 푸터 *********/
#ft {background-color: #1F2933; color: #CBD5E1; padding: 40px 0;}
#ft .top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px;}
#ft .top .ft-links {display: flex; align-items: center; justify-content: center; column-gap: 18px;}
#ft .top .ft-links a,
#ft .top .ft-links span {font-size: 13px;}
#ft .top .ft-sns {display: flex; align-items: center; justify-content: center; column-gap: 20px;}
#ft .bot {display: flex; align-items: center; justify-content: flex-start; column-gap: 60px;}
#ft .bot .ft-info {display: flex; flex-wrap: wrap; row-gap: 6px; column-gap: 16px;}
#ft .bot .ft-info span {font-size: 12px;}
#ft .bot .copy {font-size: 12px; margin-top: 14px;}