@charset "utf-8";

/* common */
body.fixed { overflow: hidden; }
.inner { max-width: 1600px; width: calc(100% - 40px); margin: 0 auto; }

/* header */
.header { position:absolute; top:0; left:0; width:100%; height: var(--header-H); z-index: 900; transition: color 0.2s ease-in; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%); }
.header::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: 0.2s ease-in; z-index: -1; }
.header::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.10) 100%); transition: 0.2s ease-in; z-index: -1; }
.header__inner { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 48px; }
.header__left { display: flex; align-items: center; }
.header .logo a { display: flex; justify-content: center; align-items: center; }
.header .logo svg path { transition: fill 0.2s ease-in; }
.gnb { margin-left: 100px; }
.gnb * { font-family: var(--font-Rubik); }
.gnb .gnb__list { display: flex; align-items: center; gap: 64px; }
.gnb .gnb__list > li { position: relative; }
.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 .gnb__list > li > a > span { position: relative; padding-left: 16px; }
.gnb .gnb__list > li > a > span::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 8px; height: 8px; background-color: var(--main-color); opacity: 0; transition: 0.1s ease-in; }
.gnb .lnb { position: absolute; left: 0; top: calc(100% - 5px); opacity: 0; visibility: hidden; transform: scale(0); transform-origin: top left; transition: 0.1s ease-in; }
.gnb .lnb__list { padding: 32px; border-radius: 8px; color: #fff; background-color: var(--main-color); }
.gnb .lnb__list > li + li { margin-top: 6px; }
.gnb .lnb__list > li > a { font-size: 18px; font-weight: 500; opacity: 0.6; white-space: nowrap; transition: 0.1s ease-in; }
.gnb .lnb__list > li > a:hover { opacity: 1; }
.gnb .gnb__list > li:hover > a > span::before { opacity: 1; }
.gnb .gnb__list > li:hover .lnb { transform: scale(1); opacity: 1; visibility: visible; }
.header__right { display: flex; align-items: center; gap: 40px; z-index: 10; }
.header .link__box { display: flex; align-items: center; gap: 8px; transition: 0.2s ease-in; transition-property: opacity, visibility; }
.header .link__box.off { display: none; }
.header .link__box > a { display: flex; justify-content: center; align-items: center; gap: 2px; height: 40px; border-radius: 8px; padding-left: 20px; padding-right: 16px; font-size: 16px; font-weight: 500; color: #fff; background-color: var(--main-color); transition: 0.2s ease-in; }
.header .link__box > a.color-black { background-color: #111; }
.header .link__box > a .icon { overflow: hidden; position: relative; width: 18px; height: 18px; }
.header .link__box > a .icon::before,
.header .link__box > a .icon::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: url("/img/common/link_arrow.svg") no-repeat center center/contain; transition: 0.2s ease-in; }
.header .link__box > a .icon::after { transform: translate(-25%, 25%); opacity: 0; }
.header .link__box > a:hover .icon::before { transform: translate(25%, -25%); opacity: 0; }
.header .link__box > a:hover .icon::after { transform: translate(0, 0); opacity: 1; }
.lang__list { display: flex; align-items: center; gap: 25px; transition: 0.2s ease-in; transition-property: opacity, visibility; }
.lang__list.off { display: none; }
.lang__list > li { position: relative; }
.lang__list > li > a { font-family: var(--font-Rubik); font-size: 17px; font-weight: 500; color: #444; opacity: 0.5; transition: 0.2s ease-in; }
.lang__list > li > a.on { opacity: 1; }
.lang__list > li::before { content: ""; position: absolute; left: -13px; top: 50%; display: block; width: 1px; height: 10px; background-color: #444; opacity: 0.25; transform: translateY(-50%); transition: 0.2s ease-in; }
.lang__list > li:first-child::before { display: none; }
#btnAllMenu { display: flex; justify-content: center; align-items: center; border: none; background-color: transparent; }
#btnAllMenu:hover svg rect:not(.red) { --rectColor: #111; animation: menuHover 0.1s both; animation-delay: var(--time); }
#btnAllMenu.on svg rect:not(.red) { --rectColor: #fff; fill: #fff;}
#btnAllMenu.on svg rect:not(:nth-child(2),:nth-child(8)) { animation: fadeOut 0.3s 0.3s both; }
#btnAllMenu.on svg rect:nth-child(2) { animation: menuIcon1 0.6s 0.6s both; }
#btnAllMenu.on svg rect:nth-child(8) { animation: menuIcon2 0.6s 0.6s both; transform-box: fill-box; transform-origin: center center; }
#btnAllMenu.on svg { animation: rotate 0.6s 1.2s both; }

/* header color-w */
.header.color-w { color: #fff; background: none; }
.header.color-w::after { opacity: 1; }
.header.color-w .logo svg .word { fill: #fff; }
.header.color-w .logo svg .text path { fill: #fff; }
.header.color-w .lang__list > li::before { background-color: #fff; }
.header.color-w .lang__list > li > a { color: #fff; }
.header.color-w .link__box > a.color-black { color: #111; background-color: #fff; }
.header.color-w .link__box > a.color-black .icon::before, 
.header.color-w .link__box > a.color-black .icon::after { -webkit-filter: invert(1); filter: invert(1); }
.header.color-w #btnAllMenu svg rect:not(.red) { --rectColor: #fff; fill: #fff; }

/* allMenu */
#allMenu { overflow: hidden; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #0A0A0A; color: #fff; z-index: 5; }
#allMenu .bg { position: absolute; left: -4px; bottom: -8px; max-width: 82.3%; }
#allMenu .menu__header { display: none; position: absolute; left: 0; top: 0; width: 100%; height: var(--header-H); }
#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; max-height: 100%; margin: auto; }
#allMenu .logo { width: 240px; }
#allMenu .logo > img { width: 100%; } 
#allMenu .gnb__list { padding-left: 32px; }
#allMenu .gnb__list > li + li { margin-top: 80px; }
#allMenu .gnb__list > li > a { font-size: 68px; font-weight: 700; }
#allMenu .gnb__list > li > a > span { position: relative; font-family: var(--font-Rubik); }
#allMenu .gnb__list > li > a > span::before { content: ""; position: absolute; left: -32px; top: 0; display: block; width: 12px; height: 12px; background-color: var(--main-color); opacity: 0; transition: 0.2s ease-in; }
#allMenu .gnb__list > li:hover > a > span::before { opacity: 1; }
#allMenu .lnb { margin-top: 32px; }
#allMenu .lnb__list { overflow: hidden; display: flex; flex-wrap: wrap; gap: 10px 41px; }
#allMenu .lnb__list > li { position: relative; }
#allMenu .lnb__list > li::before { content: ""; position: absolute; left: -21px; top: 50%; display: inline-block; width: 1px; height: 16px; background-color: rgba(255, 255, 255, 0.25); transform: translateY(-50%); }
#allMenu .lnb__list > li:first-child::before { display: none; }
#allMenu .lnb__list > li > a { font-size: 22px; font-weight: 500; transition: color 0.2s ease-in; }
#allMenu .lnb__list > li > a:hover { color: var(--main-color); }

.main-top { display: none; }
.btn-top { overflow: hidden; position: fixed; right: 48px; bottom: 48px; width: 64px; height: 64px; border-radius: 50px; border: none; font-size: 15px; font-weight: 600; color: #fff; background-color: #0A0A0A; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.2); transition-duration: 0.3s; transition-property: background-color, visibility, opacity; opacity: 0; visibility: hidden; z-index: 800; }
.btn-top.color-w { background-color: #fff; color: #111; }
.btn-top.on { visibility: visible; opacity: 1; }
.btn-top > span { display: inline-block; transition: 0.3s 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(70%)); opacity: 0; transition: 0.3s ease-in; }
.btn-top:hover { background-color: var(--main-color); }
.btn-top:hover > span { opacity: 0; transform: translateY(-120%); }
.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) + 48px); }

/* footer */
.footer { position: relative; padding: 80px 0 40px; background-color: #0A0A0A; color: #fff; }
.footer .logo { width: 75px; }
.footer .logo a { display: block; }
.footer__inner { padding: 0 48px; }
.footer__top { display: flex; justify-content: space-between; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; }
.footer__top .f-title { font-size: 56px; font-weight: 700; line-height: 1.4; color: #fff; }
.footer__top .btn-download { justify-content: space-between; width: 217px; height: 60px; padding: 0 30px; border-radius: 10px; font-size: 18px; font-weight: 500; color: #fff; background-color: #222222; transition: 0.3s ease-in; }
.footer__top .btn-download::after { content: ""; display: block; width: 20px; height: 20px; background: url("/img/common/icon_download.svg") no-repeat center center/contain; }
.footer__top .btn-download:hover { color: #fff; background-color: var(--main-color); }
.footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; margin: 80px 0; padding-bottom: 20px; }
.f-info .f-link { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.f-info .f-link > li { position: relative; }
.f-info .f-link > li::before { content: ""; position: absolute; left: -16px; top: 50%; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.25); transform: translateY(-50%); }
.f-info .f-link > li:first-child::before { display: none; }
.f-info .f-link > li > a { font-size: 18px; font-weight: 500; color: #fff; }
.f-address { margin-top: 24px; }
.f-address .row { overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 25px; }
.f-address .row + .row { margin-top: 12px; }
.f-address .row > dl { position: relative; display: flex; gap: 4px; font-size: 18px; }
.f-address .row > dl::before { content: ""; position: absolute; left: -13px; top: 50%; display: inline-block; width: 1px; height: 12px; background-color: rgba(255, 255, 255, 0.25); transform: translateY(-50%); }
.f-address .row > dl:first-child::before { display: none; }
.f-address .row > dl > dt { font-family: var(--font-Rubik); font-weight: 500; }
.f-address .row > dl > dd { font-family: var(--font-Rubik); font-weight: 300; }
.f-menu .gnb__list { display: flex; gap: 40px; }
.f-menu .gnb__list > li { width: 241px; padding: 20px 0 20px 40px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.f-menu .gnb__list > li > a { font-size: 22px; font-weight: 600; }
.f-menu .lnb { margin-top: 20px; }
.f-menu .lnb__list > li + li { margin-top: 8px; }
.f-menu .lnb__list > li > a { font-size: 18px; font-weight: 300; }
.copyright { padding-top: 41px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-family: var(--font-Rubik); font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, 0.7); }

/* btn */
.button__wrap { display: flex; justify-content: center; align-items: center; }
.btn { display: flex; justify-content: center; align-items: center; }
.btn-hover { overflow: hidden; position: relative; justify-content: space-between; width: 234px; height: 68px; padding: 0 30px; border: none; border-radius: 12px; background-color: #fff; transition: border-color 0.3s ease-in; }
.btn-hover > span { display: inline-block; font-family: var(--font-Rubik); font-size: 20px; font-weight: 500; color: #111; white-space: nowrap; transition: color 0.3s ease-in; z-index: 5; }
.btn-hover > span::before { content: ""; position: absolute; left: 0; top: 0; display: inline-block; width: 100%; height: 100%; border-radius: 12px; border: 2px solid #E1E1E1; box-sizing: border-box; opacity: 1; transition: opacity 0.3s ease-in; }
.btn-hover::before, .btn-hover::after { content: ""; position: absolute; right: 30px; top: 50%; display: block; width: 8px; height: 8px; transform: translateY(-50%); transition: opacity 0.3s ease-in; }
.btn-hover::before { background-color: #F32C29; }
.btn-hover::after { background-color: #fff; opacity: 0; z-index: 3; }
.btn-hover:hover::before { animation: btnMoreHover 0.3s ease-in both; } 
.btn-hover:hover::after { opacity: 1; }
.btn-hover:hover > span { color: #fff; }
.btn-hover:hover > span::before { opacity: 0; }
.btn-hover.c-black::before { background-color: #111; }
.btn-hover.size-l { width: 280px; height: 72px; padding: 0 32px; }
.btn-hover.size-l:hover::before { animation: btnMoreHover2 0.3s ease-in both; } 

@keyframes btnMoreHover {
    0% { transform: translateY(-50%) scale(1); }
    100% { transform: translateY(-50%) scale(60); }
}

@keyframes btnMoreHover2 {
    0% { transform: translateY(-50%) scale(1); }
    100% { transform: translateY(-50%) scale(100); }
}

/* privacy */
.privacy { font-size:18px; font-weight: 300; color: #444444; }
.privacy * { line-height: 1.6; }
.privacy > p { line-height: 1.7; }
.privacy > p + dl { margin-top: 80px; }
.privacy > dl + dl { margin-top: 80px; }
.privacy > dl > dt { font-size: 1.55em; font-weight: 500; line-height: 1.3; color: #111; }
.privacy > dl > dd { padding-top: 32px; }
.privacy > dl > dd p + ul { margin-top: 20px; }
.privacy > dl > dd ul li + li { margin-top: 4px; }
.privacy > dl > dd ul.mg-gap { margin: 32px 0; }
.privacy > dl > dd .dot-list > li { position: relative; font-size: 0.89em; padding-left: 1.56em; }
.privacy > dl > dd .dot-list > li::before { content: ""; position: absolute; left: 0.625em; top: 0.75em; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #444444; }
.privacy > dl > dd .dot-list > li b { margin-right: 0.44em; }
.privacy > dl > dd .dot-list > li b.mr0 { margin-right: 0; }
.privacy > dl > dd p > em { font-weight: 500; }
.sTxt { margin-top: 20px; }
.sTxt .title { font-weight: 500; line-height: 1.6; }
.sTxt > ul { margin-top: 12px; }

@keyframes menuHover {
    0% { fill: var(--rectColor); }
    100% { fill: var(--main-color); }
}
@keyframes fadeOut {
    0%{ opacity: 1; }
    100%{ opacity: 0; }
}
@keyframes menuIcon1 {
    0%{ width: 6px; height: 6px; }
    50%{ width: 24px; height: 2px; }
    100%{ width: 24px; height: 2px; transform: translate(0px, 2px); }
}
@keyframes menuIcon2 {
    0%{ width: 6px; height: 6px; }
    50%{ width: 24px; height: 2px; transform: translate(-18px, 0px); }
    100%{ width: 24px; height: 2px; transform: translate(-18px, 2px) rotate(90deg); }
}
@keyframes rotate {
    0%{ transform: rotate(0); }
    100%{ transform: rotate(45deg); }
}

@media screen and (max-width: 1700px) {
    .header__inner, .footer__inner { padding: 0 20px; }
}

@media screen and (max-width: 1640px) {
    .footer__top .f-title { font-size: 3.4vw; }
    .f-menu .gnb__list { gap: 20px; }
    .f-menu .gnb__list > li { width: 200px; padding: 15px 0 15px 20px; }
    .f-menu .lnb__list > li > a { font-size: 16px; }
}

@media screen and (max-width: 1400px) {
    .gnb { margin-left: 60px; }
    .gnb .gnb__list { gap: 40px; }

    #allMenu .logo { width: 160px; }
    #allMenu .gnb__list > li + li { margin-top: 60px; }
    #allMenu .gnb__list > li > a { font-size: 50px; }
    #allMenu .lnb__list > li > a { font-size: 20px; }

    .f-menu { display: none; }

}
@media screen and (max-width: 1200px) {
    :root { 
        --header-H: 70px;
    }
    .header__left .logo { width: 50px; }
    .header__left { z-index: 10; }
    .gnb { display: none; }
    .header__right .link__box { display: none; }
    .lang__list.off { display: none; }

    .header { position: fixed; }
    .header::after { display: none; }
    .header.bg { background: none; }
    .header.bg::before { opacity: 1; }
    .header.bg:not(.color-w) { color: #fff; }
    .header.bg:not(.color-w) .logo svg .word { fill: #fff; }
    .header.bg:not(.color-w) .logo svg .text path { fill: #fff; }
    .header.bg:not(.color-w) .lang__list > li::before { background-color: #fff; }
    .header.bg:not(.color-w) .lang__list > li > a { color: #fff; }
    .header.bg:not(.color-w) .link__box > a.color-black { color: #111; background-color: #fff; }
    .header.bg:not(.color-w) .link__box > a.color-black .icon::before, 
    .header.bg:not(.color-w) .link__box > a.color-black .icon::after { -webkit-filter: invert(1); filter: invert(1); }
    .header.bg:not(.color-w) #btnAllMenu svg rect:not(.red) { --rectColor: #fff; fill: #fff; }

    #allMenu .logo { display: none; }
    #allMenu .menu__header { display: block; }
    #allMenu .link__box { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); }

    .btn-top { right: 20px; bottom: 20px; width: 50px; height: 50px; font-size: 13px; }
    .btn-top.fixed { bottom: calc(var(--footer-H) + 20px); }

    .privacy { font-size: 16px; }
    .privacy > p + dl { margin-top: 50px; }
    .privacy > dl > dd { padding-top: 20px; }
    .privacy > dl > dd ul.mg-gap { margin: 20px 0; }
    .privacy > dl + dl { margin-top: 50px; }
    .privacy > dl > dd p + ul { margin-top: 15px; }
    .privacy > dl > dt { font-size: 1.4em; }
}

@media screen and (max-width: 1024px) {
    #allMenu .gnb__list > li + li { margin-top: 40px; }
    #allMenu .gnb__list > li > a { font-size: 40px; }
    #allMenu .lnb { margin-top: 20px; }
    #allMenu .lnb__list > li > a { font-size: 18px; }

    .footer {  padding: 60px 0 30px; }
    .footer__bottom { margin: 40px 0 30px; padding-bottom: 0; }
    .f-info .f-link { margin-top: 30px; }
    .f-info .f-link > li > a { font-size: 16px; }
    .f-address .row > dl { font-size: 16px; }
    .copyright { padding-top: 30px; }

    .btn-hover { width: 180px; height: 55px; padding: 0 20px; border-radius: 10px;}
    .btn-hover > span { font-size: 16px; }
    .btn-hover > span::before { border-radius: 10px; }
    .btn-hover::before, .btn-hover::after { right: 20px; }
    .btn-hover.size-l { width: 200px; height: 65px; padding: 0 20px; }
}

@media screen and (max-width: 768px) {
    .header .link__box > a { height: 35px; padding-left: 15px; padding-right: 10px; font-size: 14px; }
    .header .link__box > a .icon { width: 15px; height: 15px; }

    #allMenu .gnb__list { padding-left: 20px; }
    #allMenu .gnb__list > li > a { font-size: 32px; }
    #allMenu .gnb__list > li > a > span::before { width: 10px; height: 10px; left: -20px; }
    #allMenu .lnb { margin-top: 15px; }
    #allMenu .lnb__list { gap: 10px 31px; }
    #allMenu .lnb__list > li::before { left: -16px; height: 14px; }
    #allMenu .lnb__list > li > a { font-size: 16px; }

    .footer { padding: 40px 0 20px; }
    .footer__top .f-title { font-size: 26px; }
    .footer__top .btn-download { width: 160px; height: 45px; padding: 0 20px; border-radius: 5px; font-size: 16px; }
    .footer__top .btn-download::after { width: 18px; height: 18px; }
    .footer .logo { width: 60px; }
    .f-info .f-link { gap: 20px; }
    .f-info .f-link > li::before { width: 3px; height: 3px; left: -11px; }
    .f-info .f-link > li > a { font-size: 15px; }
    .f-address { margin-top: 20px; }
    .f-address .row { gap: 10px 25px; }
    .f-address .row + .row { margin-top: 10px; }
    .f-address .row > dl { width: 100%; font-size: 15px; }
    .footer__bottom { margin: 30px 0 20px;}
    .copyright { padding-top: 20px; font-size: 14px; }

    .btn-hover { width: 150px; height: 45px; padding: 0 15px; border-radius: 5px; }
    .btn-hover > span { font-size: 15px; }
    .btn-hover > span::before { border-radius: 5px; }
    .btn-hover::before, .btn-hover::after { right: 15px; }
    .btn-hover.size-l { height: 55px; padding: 0 15px; }

    .privacy { font-size: 14px; }
    .privacy > p + dl { margin-top: 40px; }
    .privacy > dl + dl { margin-top: 40px; }
    .privacy > dl > dd { padding-top: 15px; }
    .privacy > dl > dd ul.mg-gap { margin: 15px 0; }
    .privacy > dl > dd .dot-list > li { font-size: 14px; }
    .privacy > dl > dd .dot-list > li::before { width: 3px; height: 3px; }
    .privacy > dl > dd p + ul { margin-top: 10px; }
    .privacy > dl > dt { font-size: 1.3em; }
    .sTxt > ul { margin-top: 8px; }
}

@media screen and (max-width: 640px) {
    .footer__top { flex-direction: column-reverse; row-gap: 20px; align-items: flex-start; }
    .footer__top .f-title { font-size: 22px; }
}