@charset "utf-8";

/* common */
.inner { width: calc(100% - 40px); max-width: 1600px; margin: 0 auto; }
.mo-br { display: none; }

/* btn */
.button__wrap { display: flex; justify-content: center; }
.btn { display: flex; justify-content: center; align-items: center; }
.btn-hover { width: 240px; height: 68px; border: none; border-radius: 10px; font-size: 18px; font-weight: 500; color: #fff; background-color: var(--main-color); transition: 0.3s ease-in; }
.btn-hover:hover { background-color: var(--main-color2); }
.btn-hover-text { position: relative; width: 200px; height: 60px; border-radius: 10px; font-size: 18px; font-weight: 500; line-height: 1.7; color: var(--main-color2); background-color: #E5F5FF; transition: background-color 0.3s; }
.btn-hover-text > span { display: inline-block; transition: 0.3s ease-in; }
.btn-hover-text::after { content: attr(data-text); position: absolute; left: 0; top: 50%; display: block; width: 100%; text-align: center; color: #fff; transform: translateY(calc(-50% + 14.5px)); opacity: 0; transition: 0.3s ease-in; }
.btn-hover-text:hover { background-color: var(--main-color2); }
.btn-hover-text:hover > span { opacity: 0; transform: translateY(-14.5px); }
.btn-hover-text:hover::after { opacity: 1; transform: translateY(-50%); }

/* header */
.header { overflow: hidden; position: fixed; left: 0; top: 0; width: 100%; height: var(--header-H); padding: 0 48px; background-color: #fff; transition: 0.3s; z-index: 950; }
.header.scroll { transform: translateY(-100%); }
.header__inner { position: relative; display: flex; justify-content: center; height: var(--header-H); }
.header__inner .logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.logo > a { display: flex; }
.logo > a > img, .logo > a > svg { width: 100%; }
.gnb .gnb__list { display: flex; }
.gnb .gnb__list > li { position: relative; width: 200px; transition: color 0.3s;  }
.gnb .gnb__list > li::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 1px; height: 100%; background-color: #EEEEEE; opacity: 0; transition: opacity 0.3s; z-index: 10; }
.gnb .gnb__list > li > a { display: flex; justify-content: center; align-items: center; height: var(--header-H); font-size: 20px; font-weight: 500; text-align: center; }
.gnb .lnb { padding-bottom: 48px; visibility: hidden; opacity: 0; }
.gnb .lnb__list > li { text-align: center; }
.gnb .lnb__list > li + li { margin-top: 12px; }
.gnb .lnb__list > li > a { font-size: 18px; color: #444; transition: color 0.3s }
.header .depth3 { display: none; }
.header-btn__area { position: absolute; right: 0; top: 50%; display: flex; align-items: center; gap: 40px; transform: translateY(-50%); z-index: 10; }
.lang__list { display: flex; gap: 24px; }
.lang__list.off { visibility: hidden; }
.lang__list > li { position: relative; font-size: 16px; font-weight: 500; color: #C8D5DF; }
.lang__list > li::before { content: ""; position: absolute; left: -16px; top: 50%; display: block; width: 8px; height: 12px; background: url("/img/common/icon_slash.svg") no-repeat center center/contain; transform: translateY(-50%); }
.lang__list > li:first-child::before { display: none; }
.lang__list > li > a.on { color: var(--main-color2); }
.btn-all-menu { position: relative; display: flex; border: none; background: none; }
.btn-all-menu svg { transform-box: fill-box; transform-origin: center center; }
.btn-all-menu svg rect { transform-box: fill-box; transform-origin: center center; transition: 0.2s; }

.header.color-w { background-color: transparent; }
.header.color-w .logo svg path { fill: #fff; }
.header.color-w .gnb__list > li { color: #fff; }
.header.color-w .lang__list > li { color: rgba(255, 255, 255, 0.5); }
.header.color-w .lang__list > li > a.on { color: #fff; }
.header.color-w .lang__list > li::before { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); opacity: 0.5; }
.header.color-w .btn-all-menu svg rect { fill: #fff; }

.header.on { height: var(--gnb-H); background-color: #fff; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08); }
.header.on .logo svg path { fill: var(--main-color); }
.header.on .gnb__list > li { color: #111; }
.header.on .gnb .lnb { visibility: visible; opacity: 1; transform: translateY(0); }
.header.on .gnb .gnb__list > li::before { opacity: 1; }
.header.on .lang__list > li { color: #C8D5DF; }
.header.on .lang__list > li > a.on { color: var(--main-color2); }
.header.on .lang__list > li::before { -webkit-filter: none; filter: none; opacity: 1; }
.header.on .btn-all-menu svg rect { fill: var(--main-color); }
.gnb .gnb__list > li:hover { background-color: #0613A5; color: #fff; }
.gnb .gnb__list > li:hover .lnb__list a { color: rgba(255, 255, 255, 0.6); }
.gnb .gnb__list > li:hover .lnb__list a:hover { color: rgba(255, 255, 255, 1); }

.btn-all-menu.on svg rect { fill: #fff; }
.btn-all-menu.on svg rect:nth-child(2),
.btn-all-menu.on svg rect:nth-child(3) { animation: fadeOut 0.3s 0.3s both; }
.btn-all-menu.on svg rect:nth-child(1) { animation: menuIcon1 0.6s 0.6s both; }
.btn-all-menu.on svg rect:nth-child(4) { animation: menuIcon2 0.6s 0.6s both; }
.btn-all-menu.on svg { animation: rotate 0.6s 1.2s both; }

@keyframes fadeOut {
    0%{ opacity: 1; }
    100%{ opacity: 0; }
}
@keyframes menuIcon1 {
    0%{ width: 10px; height: 10px; }
    50%{ width: 24px; height: 3px; transform: translate(-14px, 0); }
    100%{ width: 24px; height: 3px; transform: translate(-14px, -3.5px); }
}
@keyframes menuIcon2 {
    0%{ width: 10px; height: 10px; }
    50%{ width: 24px; height: 3px; transform: translateY(7px); }
    100%{ width: 24px; height: 3px; transform: translateY(10.5px) rotate(90deg); }
}
@keyframes rotate {
    0%{ transform: rotate(0); }
    100%{ transform: rotate(45deg); }
}

#allMenu { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; background-color: #030A53; color: #fff; z-index: 5; }
#allMenu .menu__wrap { display: flex; align-items: center; height: 100%; }
#allMenu .menu__inner { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; justify-content: space-between; gap: 40px; width: calc(100% - 40px); max-width: 1600px; max-height: 100%; margin: auto; padding-top: 40px; padding-bottom: 40px; }
#allMenu .logo { position: static; max-width: calc(43.75% - 40px); transform: none; }
#allMenu .logo img { width: 379px; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
#allMenu .gnb__list { width: 56.25%; }
#allMenu .gnb__list > li { display: flex; align-items: center; gap: 40px; padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
#allMenu .gnb__list > li:first-child { border-top: none; padding-top: 0; }
#allMenu .gnb__list > li:last-child { padding-bottom: 0; }
#allMenu .gnb__list > li > a { display: flex; width: calc(31.77% - 40px); font-size: 44px; font-weight: 500; opacity: 0.6; transition: 0.3s ease-in; }
#allMenu .lnb { width: 68.23%; }
#allMenu .lnb__list { overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 41px; }
#allMenu .lnb__list > li { position: relative; text-align: center; font-size: 28px; }
#allMenu .lnb__list > li > a { opacity: 0.6; transition: 0.3s ease-in; }
#allMenu .lnb__list > li::before { content: ""; position: absolute; left: -21px; top: 50%; display: block; width: 1px; height: 0.71em; background-color: rgba(255, 255, 255, 0.6); transform: translateY(-50%); }
#allMenu .lnb__list > li:first-child::before { display: none; }
#allMenu .gnb__list > li:hover > a { opacity: 1; }
#allMenu .lnb__list > li > a:hover { opacity: 1; }
#allMenu .gnb__list > li { transform: translateY(-10px); opacity: 0; transition: opacity ease-out, transform ease-out; transition-delay: calc(var(--time)*0.2s + 0.3s); transition-duration: 0.5s; }
#allMenu.on .gnb__list > li { transform: translateY(0); opacity: 1; }

/* footer */
.btn-top { overflow: hidden; position: fixed; right: 40px; bottom: 40px; width: 80px; height: 80px; border-radius: 50px; border: none; font-size: 16px; font-weight: 500; line-height: 1.4; color: #fff; background-color: #0A0A0A; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); transition-duration: 0.2s; transition-property: background-color, visibility, opacity; opacity: 0; visibility: hidden; z-index: 800; }
.btn-top.on { visibility: visible; opacity: 1; }
.btn-top > span { display: inline-block; transition: 0.2s ease-in; }
.btn-top::after { content: attr(data-text); position: absolute; left: 0; top: 50%; display: block; width: 100%; text-align: center; color: #fff; transform: translateY(calc(81%)); opacity: 0; transition: 0.2s ease-in; }
.btn-top:hover { background-color: var(--main-color); }
.btn-top:hover > span { opacity: 0; transform: translateY(-131%); }
.btn-top:hover::after { opacity: 1; transform: translateY(-50%); }
.btn-top:hover { background-color: var(--main-color); }
.btn-top.fixed { position: absolute; bottom: calc(var(--footer-H) + 40px); }
.footer { position: relative; padding: 80px 48px; background-color: #0A0A0A; color: #DDDDDD; }
.footer__inner { display: flex; justify-content: space-between; }
.footer .logo svg path { fill: #DDDDDD; }
.footer-info .top { display: flex; gap: 40px; }
.footer-info .copyright { margin-top: 24px; font-size: 18px; color: #666666; }
.f-link__list { display: flex; align-items: center; gap: 8px; }
.f-link__list > li > a { display: inline-block; padding: 7.5px 20px; border-radius: 30px; font-size: 16px; font-weight: 500; background-color: #1B1B1B; }
.f-address { overflow: hidden; margin-top: 40px; font-size: 18px; }
.f-address > .row { display: flex; flex-wrap: wrap; gap: 12px 25px; }
.f-address > .row + .row { margin-top: 12px; }
.f-address > .row dl { position: relative; display: flex; gap: 4px; }
.f-address > .row dl::before { content: ""; position: absolute; left: -13px; top: 50%; display: block; width: 1px; height: 15px; background-color: rgba(255, 255, 255, 0.25); transform: translateY(-50%); }
.f-address > .row dl:first-child::before { display: none; }
.f-address > .row dt { font-weight: 500; }
.f-address > .row dd { color: #AAAAAA; }

.f-site { position: relative; width: fit-content; height: 60px; z-index: 750; }
.f-site .btn-f-site { position: relative; width: 280px; height: 100%; padding: 0 24px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background-color: #0A0A0A; cursor: pointer; font-size: 16px; text-align: left; color: #AAAAAA; transition: 0.2s ease-in; }
.f-site .btn-f-site::after { content: ""; position: absolute; right: 24px; top: 50%; display: block; width: 20px; height: 20px; margin-left: 10px; background: url("/img/common/icon_f_select_arrow.svg") no-repeat center center/contain; transform: translateY(-50%); transition: 0.2s ease-in; }
.f-site .f-site__list { overflow-y: auto; position: absolute; left: 0; top: 100%; display: none; width: 100%; max-height: 180px; padding: 5px 24px 31px; border: 1px solid rgba(255, 255, 255, 0.1); border-top: none; background-color: #0A0A0A; scrollbar-width: thin; scrollbar-color: #666 transparent; z-index: 5; }
.f-site .f-site__list::-webkit-scrollbar{ width: 4px; }
.f-site .f-site__list::-webkit-scrollbar-thumb{background-color: #666666; border-radius: 8px; }
.f-site .f-site__list::-webkit-scrollbar-track{ border-radius: 8px; }
.f-site .f-site__list > li + li { margin-top: 8px; }
.f-site .f-site__list > li { text-align: left; }
.f-site .f-site__list > li > a { font-size: 16px; color: #666; transition: 0.2s ease-in; }
.f-site .f-site__list > li > a:hover { color: #fff; }
.f-site.on { z-index: 810; }
.f-site.on .btn-f-site { border-radius: 10px 10px 0 0; border-bottom: none; }
.f-site.on .btn-f-site::after { transform: translateY(-50%) rotate(-180deg); }
.f-site.on .f-site__list { border-radius: 0 0 10px 10px; border-top: none; }
.btn-f-link { display: block; width: 160px; height: fit-content; padding: 10px 20px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.1); }

@media (hover: none) and (pointer: coarse) {
    #allMenu .gnb__list > li > a { opacity: 1; }
}

@media screen and (max-width:1640px) {
    .header { padding: 0 20px; }
    .gnb .gnb__list > li { width: 160px; }
    .gnb .gnb__list > li > a { font-size: 18px; }
    .gnb .lnb__list > li > a { font-size: 16px; }

    #allMenu .logo { width: calc(30% - 40px); }
    #allMenu .logo img { width: 260px; }
    #allMenu .gnb__list { width: 70%; }
    #allMenu .gnb__list > li > a { width: calc(27% - 40px); }
    #allMenu .lnb { width: 73%; }

    .footer { padding: 80px 20px; }
}
@media screen and (max-width:1400px) {
    .header__inner .logo { width: 160px; }
    .gnb .gnb__list > li { width: 120px; }
    .gnb .gnb__list > li > a { font-size: 16px; }
    .gnb .lnb__list > li > a { font-size: 14px; }

    #allMenu .gnb__list > li > a { font-size: 36px; }
    #allMenu .lnb__list > li { font-size: 20px; }
}

@media screen and (max-width:1200px) {
    .btn-hover-text { width: 180px; height: 55px; font-size: 16px; }
    
    .header .gnb { display: none; }
    #allMenu .logo img { width: 200px; }
    #allMenu .gnb__list > li > a { font-size: 30px; }
    #allMenu .lnb__list > li { font-size: 16px; }
    
    .f-address, .footer-info .copyright { font-size: 16px; }
    .f-link__list > li > a { font-size: 14px; }
}
@media screen and (max-width:1024px) {
    :root{
        --header-H: 70px;
    }

    .btn-hover { width: 200px; height: 55px; font-size: 16px; }

    .header__inner .logo { width: 120px; }
    .header .header__inner .logo { z-index: 10; }
    .header .header__inner .logo.on svg path { fill: #fff; }
    .header-btn__area { gap: 30px; }
    #allMenu .logo { display: none;}
    #allMenu .gnb__list { width: 100%; }
    #allMenu .menu__wrap { padding-top: var(--header-H); }
    #allMenu .menu__inner { flex-direction: column; }
    #allMenu .gnb__list > li > a { width: 160px; }
    #allMenu .lnb { width: calc(100% - 200px); }

    .btn-top { right: 20px; bottom: 20px; width: 50px; height: 50px; font-size: 13px; }
    .btn-top.fixed { position: absolute; bottom: calc(var(--footer-H) + 20px); }
    .footer { padding: 60px 20px; }
    .footer__inner { flex-direction: column-reverse; row-gap: 40px; }
    .f-site { height: 50px; margin-left: auto; }
    .f-site .btn-f-site { width: 240px; font-size: 14px; }
    .f-site .f-site__list { padding: 5px 24px 24px; }
    .f-site .f-site__list > li > a { font-size: 14px; }
    .btn-f-link { width: 140px; }
}
@media screen and (max-width:768px) {
    #allMenu .menu__wrap { align-items: flex-start; }
    #allMenu .gnb__list > li { display: block; padding: 20px 0; }
    #allMenu .gnb__list > li > a { font-size: 22px; pointer-events: initial; }
    #allMenu .lnb { width: 100%; margin-top: 15px; }
    #allMenu .lnb__list > li { font-size: 15px; }

    .footer__inner { row-gap: 20px; }
    .footer-info .top .logo { width: 160px; }
    .f-address { margin-top: 20px; }
    .f-address > .row .w-100 { width: 100%; }
    .f-address > .row .w-100 + dl::before { display: none; }
    .f-site { margin-left: 0; }
    .f-address, .footer-info .copyright { font-size: 14px; }
}
@media screen and (max-width:640px) {
    .footer-info .top { flex-direction: column; row-gap: 20px; }
}