#header {position: fixed; top: 0; left: 0; width: 100%; height: 12rem; background: transparent; z-index: 100;}
#header .logo a {display: block; width: 18.1rem; height: 2.7rem;}
#header .logo img {width: 100%;}
#header .logo-black {display: none;}
#header .inner {max-width: 172rem; height: 100%; column-gap: 5rem;}
#header .gnb {margin-left: auto; height: 100%;}
#header .gnb .header-gnb {height: 100%;}
#header .gnb .header-gnb > ul {column-gap: 12rem; height: 100%;}
#header .gnb .header-gnb > ul > li > a {font-size: 2.1rem; font-weight: 600; padding: 1rem; color: #fff; height: 100%; display: flex; align-items: center; text-transform: uppercase; text-align: center;}
#header .gnb .header-gnb > ul > li.current > a {background: linear-gradient(90deg, #369BFB 4.55%, #18E6A2 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#header .gnb .header-gnb > ul > li > a:hover {background: linear-gradient(90deg, #369BFB 4.55%, #18E6A2 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#header .header-gnb .depth-item {background-color: #fff; border-radius: 1rem; position: absolute; top: 99%; left: 50%; transform: translateX(-50%); width: auto; height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: all 0.3s;}
#header .header-gnb .depth-1 {position: relative;}
#header .header-gnb .depth-1.on .depth-item {visibility: visible; opacity: 1; transition: all 0.5s;}
#header .header-gnb .gnb-depth-2 {padding: 1.6rem 0; visibility: hidden; opacity: 0; transition: all 0.3s;}
#header .header-gnb .depth-2 {white-space: nowrap; padding: 0 1.2rem; text-align: center;}
#header .header-gnb .depth-2 > .depth-2-link span {display: block; padding: 8px 0; font-size: 1.6rem; color: #111; transition: color 0.1s;}
#header .header-gnb .depth-2 > .depth-2-link:hover,
#header .header-gnb .depth-2 > .depth-2-link:focus {color: #007ea5; font-weight: 500;}
#header .header-gnb .depth-1.on .depth-item .gnb-depth-2 {visibility: visible; opacity: 1; transition: all 0.5s;}
#header .header-language ul {display: flex; align-items: center; column-gap: 2rem;}
#header .header-language li {padding: 2px;}
#header .header-language li:first-child {position: relative;}
#header .header-language li:first-child::after {content: "/"; display: inline-block; font-size: 1.6rem; color: #fff; position: absolute; right: -1rem; top: 50%; transform: translate(50%, -50%);}
#header .header-language a {color: #fff;} 
#header .header-language .active {background: linear-gradient(90deg, #369BFB 4.55%, #18E6A2 100%); border-radius: 999px;}
#header .header-language .active a {background: linear-gradient(90deg, #369BFB 4.55%, #18E6A2 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

#header .mobile-gnb {display: none;}
#header .sidebar-btn {position: relative; width: 2.4rem; height: 2rem; background: transparent; border: none; outline: none; z-index: 110; cursor: pointer;}
#header .sidebar-btn span {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 4px;}
#header .sidebar-btn span:nth-of-type(1) { top: 0;}
#header .sidebar-btn span:nth-of-type(2) { top: 0.9rem;}
#header .sidebar-btn span:nth-of-type(3) {bottom: 0; }
#header .mobile-gnb.open .sidebar-btn span {background: #111;}
#header .mobile-gnb.open .sidebar-btn span:nth-of-type(1) {-webkit-transform: translateY (0.9rem) rotate (-45deg); transform: translateY(0.9rem) rotate(-45deg);}
#header .mobile-gnb.open .sidebar-btn span:nth-of-type(2) {opacity: 0;}
#header .mobile-gnb.open .sidebar-btn span:nth-of-type(3) {-webkit-transform: translateY(-0.85rem) rotate(45deg); transform: translateY(-0.85rem) rotate(45deg);}
#header .mobile-gnb .sidebar-wrap {position: fixed; width: 100%; height: 100svh; top: 0; left: 0; background-color: rgba(0,0,0,0.5); 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: #fff; transform: translateX(100%); transition: all 0.5s;}
#header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
#header .mobile-gnb .sidebar > ul {height: 100%; overflow-y: auto;}
#header .mobile-gnb .sidebar .depth-1-link {display: flex; align-items: center; position: relative; padding: 0 60px 0 25px; height: 60px; font-size: 17px; font-weight: bold; text-transform: uppercase;}
#header .mobile-gnb .sidebar > ul > li > .depth-1-link:not(:only-child)::before {content: "+"; display: block; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); font-size: 2.8rem; font-weight: 300}
#header .mobile-gnb .sidebar > ul > li.open > .depth-1-link:not(:only-child)::before {content: '−';}
#header .mobile-gnb .sidebar > ul > li > .depth-1-link > span {position: relative; display: block; line-height: normal;}
#header .mobile-gnb .sidebar > ul > li > .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: #60ccf6;}
#header .mobile-gnb .sidebar > ul > li.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: #edf6fc; text-align: left; box-sizing: content-box; transition: all 0.35s ease-in-out;}
#header .mobile-gnb .sidebar > ul > li.open .gnb-depth-2 {padding: 10px 0;}
#header .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 .mobile-gnb .depth-2 > .depth-2-link.active {color: #007ea5; font-weight: bold;}
#header .mobile-gnb .sidebar > ul > li.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}

/* 헤더 영문 */
#header.header-en .gnb .header-gnb > ul {column-gap: 5rem;}

/* 헤더 스크롤 */
#header.scroll-down {height: 6rem; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.3s ease;}
#header.scroll-down .logo-black {display: block;}
#header.scroll-down .logo-white {display: none;}
#header.scroll-down .gnb .header-gnb > ul > li > a {font-size: 1.8rem; color: #111;}
#header.scroll-down .sidebar-btn span {background: #111;}
#header.scroll-down .header-language a {color: #111;}
#header.scroll-down .header-language li:first-child::after {color: #111;}

/* 푸터 */
footer {background: #212A37; min-height: 20rem; padding: 5rem 0;}
footer .inner {column-gap: 6rem;}
footer .footer-info {display: flex; flex-direction: column; row-gap: 1.5rem;}
footer .footer-info * {color: #fff;}
footer .footer-info h6 {font-weight: 700;}
footer .footer-info ul {column-gap: 0.6rem;}
footer .footer-info li:not(:last-child) {}
footer .footer-info li:not(:last-child)::after {content: "·"; display: inline-block; font-size: inherit; color: #fff; margin-left: 0.6rem;}
footer .footer-link {margin-left: auto; flex-shrink: 0;}
footer .footer-link a {color: #fff; font-weight: 700;}

@media (hover: hover) {
    .footer-link a:hover {text-decoration: underline; text-underline-offset: 3px;}
}

@media (max-width: 1600px) {
    #header {height: 8rem;}
    #header .gnb .header-gnb > ul {column-gap: 4.8vw;}

    /* 헤더 영문 */
    #header.header-en .gnb .header-gnb > ul {column-gap: 0.6vw;}
}

@media (max-width: 1280px) {
    #header .logo a {width: 16rem;}
    #header .gnb .header-gnb > ul {column-gap: 3.2vw;}
}

@media (max-width: 1024px) {
    #header .mobile-gnb {display: block;}
    #header .header-gnb {display: none;}
    #header .gnb {display: flex; align-items: center;}
    #header .pc-only {display: none;}
    #header .header-language.mobile-only {height: 8rem; display: flex; align-items: center; padding-left: 25px;}
    #header .header-language a {color: #111;}
    #header .header-language li:first-child::after {color: #111;}

    footer .inner {flex-wrap: wrap; row-gap: 3rem;}
    footer .inner > div {width: 100%;}
    footer .footer-info {order: 3;}
    footer .footer-link {order: 2;}
}

@media (max-width: 768px) {
    /* #header .header-language a {font-size: 2rem; font-weight: 500;} */

    footer .footer-info li {width: 100%;}
    footer .footer-info li:not(:last-child)::after {display: none;}
}