@charset "utf-8";

/* common */
.inner { width: calc(100% - 100px); max-width: 1600px; margin: 0 auto; }
.font-mix { font-family: 'Play','Pretendard',sans-serif; }
.font-play{ font-family: var(--font-Play); }
.font-pt{ font-family: var(--font-Pretendard); }

.logo > a { display: block; }
.logo img, .logo svg { width: 100%; }
.button__wrap { display: flex; justify-content: center; align-items: center; }
.btn { display: flex; justify-content: center; align-items: center; }
.btn-more { justify-content: space-between; width: 100%; max-width: 240px; height: 65px; border: none; border-radius: 5px; padding: 0 20px; font-family: var(--font-Play); font-size: 19px; font-weight: 700; color: #111; background-color: #fff; }
.btn-more::after { content: ""; display: block; width: 45px; height: 45px; border-radius: 5px; background: url("/img/common/arrow_next_s.svg") no-repeat center center/auto #000; }

/* header */
.header { position: fixed; left: 0; top: 0; width: 100%; height: var(--header-H); transition: 0.3s;  z-index: 900;  }
.header::before { content: ""; position: absolute; left: 0; top: var(--header-H); display: block; width: 100%; height: 0; background-color: #fff; z-index: -1; transition: 0.3s; }
.header.bg-color { background-color: rgba(0, 0, 0, 0.7); }
.header__inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 40px; }
.header .logo { width: 182px; }
.header .logo > a { display: flex; }
.gnb__wrap { display: flex; align-items: center; }
.gnb { margin-right: 67px; }
.gnb .gnb__list { display: flex; align-items: center; height: 100%; }
.gnb .gnb__list > li { position: relative; width: 160px; height: 100%; text-align: center; color: #fff; transition: width 0.3s; }
.gnb .gnb__list > li * { font-family: var(--font-Mix); }
.gnb .gnb__list > li > a { display: flex; justify-content: center; align-items: center; height: var(--header-H); font-size: 20px; font-weight: 600; transition: 0.3s; }
.gnb .gnb__list > li > a::after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 2px; background-color: var(--main-color); opacity: 0; transition: 0.3s; }
.gnb .gnb__list .text-up { overflow: hidden; position: relative; }
.gnb .gnb__list .text-up > span { display: block; transition: 0.4s; }
.gnb .gnb__list .text-up > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; display: block; }
.gnb .gnb__list > li:hover > a .text-up> span { transform: translateY(-100%); } 
.gnb .gnb__list > li:hover > a { color: var(--main-color); }
.gnb .gnb__list > li:hover > a::after { opacity: 1; }
.gnb .lnb { position: absolute; left: 50%; top: calc(100% - 1px); width: 100%; min-height: 250px; transform: translateX(-50%); font-size: 17px; visibility: hidden; opacity: 0; }
.gnb .lnb__list { padding: 20px 0; }
.gnb .lnb__list > li + li { margin-top: 15px; }
.gnb .lnb__list > li > a { font-weight: 500; }
.gnb .lnb__list > li > a:hover { color: var(--main-color); }
.gnb .lnb__list .am_br { display: none; }
.gnb .depth3 { display: none; }
.gnb__list > li > a.no-lnb + .lnb { display: none; }
#btnAllMenu { position: relative; width: 40px; height: 40px; border: none; background-color: transparent; }
#btnAllMenu .bar { position: absolute; right: 0; width: 100%; height: 2px; background-color: #fff; transition: 0.3s; }
#btnAllMenu .bar:nth-child(1) { top: calc(50% - 8px); }
#btnAllMenu .bar:nth-child(2) { width: 50%; top: calc(50% + 5px); }
#btnAllMenu:hover .bar:nth-child(1) { width: 50%; }
#btnAllMenu:hover .bar:nth-child(2) { width: 100%; }
.lang__box { position: relative; margin-right: 40px; padding: 0 5px; }
.lang__box * { font-family: var(--font-Play); }
.lang__box .btn-lang { position: relative; border: none; width: 39px; padding-right: 10px; font-size: 17px; font-weight: 700; color: #fff; text-align: left; background-color: transparent; }
.lang__box .btn-lang::before { content: ""; position: absolute; left: -32px; top: 50%; display: block; width: 24px; height: 24px; background: url("/img/common/icon_lang.svg") no-repeat center center/contain; transform: translateY(-50%); }
.lang__box .btn-lang::after { content: ""; position: absolute; right: 0; top: 50%; display: inline-block; width: 10px; height: 6px; background: url("/img/common/icon_lang_arrow.svg") no-repeat center center/contain; transform: translateY(-50%); transition: 0.3s; }
.lang__box.on .btn-lang::after { transform: translateY(-50%) rotateX(180deg); }
.lang__box .lang__list { display: none; position: absolute; left: 50%; top: calc(100% + 10px); width: 100%; padding: 5px; background-color: var(--main-color); transform: translateX(-50%); }
.lang__box .lang__list > li { font-size: 17px; font-weight: 700; color: #fff; text-align: center; }
.lang__box .lang__list > li + li { margin-top: 5px; }
.lang__box .lang__list > li > a { opacity: 0.3; transition: 0.3s; }
.lang__box .lang__list > li > a:hover { opacity: 1; }

.header.on { background-color: #fff; }
.header.on::before { height: var(--lnb-H);  border-top: 1px solid #EEEEEE; }
.header.on .logo svg #Group_2 path { fill: #2E2C2F; }
.header.on .gnb .gnb__list > li { color: #AAAAAA; }
.header.on .gnb .lnb { visibility: visible; opacity: 1; transition: opacity 0.3s 0.1s; }
.header.on #btnAllMenu .bar { background-color: #000; }
.header.on .lang__box .btn-lang { color: #000; }
.header.on .lang__box .btn-lang::before,.header.on .lang__box .btn-lang::after { filter: brightness(0); }

#allMenu { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); transform: translateY(-105%); z-index: 950; transition: transform 0.6s; }
#allMenu.on { transform: translateY(0); }
#allMenu .header__inner { position: absolute; left: 0; top: 0; justify-content: right; height: var(--header-H); }
#allMenu .inner { overflow-y: auto; display: flex; align-items: center; height: 100%; }
#allMenu .inner::-webkit-scrollbar { display: none; }
#allMenu .menu__inner {  position: relative; width: 100%; margin: auto 0; padding: 20px 0; color: #fff; z-index: 5; }
#allMenu .gnb__list > li { display: flex; padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: border 0.3s; }
#allMenu .gnb__list > li * { font-family: var(--font-Mix); }
#allMenu .gnb__list > li > a { display: flex; align-items: center; width: 360px; height: 75px; margin-left: 40px; font-size: 42px; font-weight: 700; text-transform: uppercase; }
#allMenu .gnb__list > li > a:not(.no-lnb) { pointer-events: none; }
#allMenu .gnb__list > li:hover { border-color: rgba(255, 255, 255, 0.6); }
#allMenu .lnb { width: calc(100% - 400px); }
#allMenu .lnb__list { display: flex; align-items: flex-start; }
#allMenu .lnb__list > li { width: 20%; padding-right: 20px; }
#allMenu .lnb__list > li > a { display: flex; align-items: center; width: fit-content; height: 75px; font-size: 19px; font-weight: 500; transition: color 0.3s; }
#allMenu .lnb__list .g_br { display: none; }
#allMenu .depth3 > li + li { margin-top: 15px; }
#allMenu .depth3 > li > a { font-size: 18px; color: rgba(255, 255, 255, 0.5); transition: color 0.3s; }
#allMenu .depth3 > li > a:hover { color: #fff; }
#closeAllMenu { width: 15px; height: 15px; border: none; background: url("/img/common/icon_close.svg") no-repeat center center/contain; z-index: 10;  }

/* footer */
.fixed-btn { position: fixed; right: 20px; bottom: 20px; z-index: 100; }
.fixed-btn > a { display: block; width: 60px; height: 60px; border-radius: 50%; background: url("/img/common/btn_link_blog.png") no-repeat center center/auto #fff; z-index: 50; }
.footer { padding: 59px 0; color: #fff; }
.footer__inner { display: flex; align-items: center; gap: 40px 200px; padding: 0 40px; }
.footer .logo { width: 237px; min-width: fit-content; }
.f-address .row { display: flex; font-size: 18px; }
.f-address .row * { font-family: var(--font-Mix); }
.f-address .row .font-pt { font-family: var(--font-Pretendard); }
.f-address .row + .row { margin-top: 15px; }
.f-address .row:nth-child(1) { gap: 15px 60px; }
.f-address .row:nth-child(2) { gap: 15px 20px; }
.f-address .row:nth-child(1) dd { margin-top: 10px; }
.f-address .row:nth-child(2) dl { display: flex; align-items: center; gap: 20px; }
.f-address .row dt { font-weight: 600; }
.f-address .row dd { font-weight: 300; }
.f-address .row dt.font-pt { font-weight: 500; }
.f-address .row dd.font-pt { font-weight: 200; }
.f-info { min-width: max-content; font-size: 18px; }
.f-info a { font-weight: 500; }
.f-info .copyright { margin-top: 15px; font-family: var(--font-Play); font-weight: 600; }

.swiper-opt__area .swiper-button-next, .swiper-opt__area .swiper-button-prev { position: static; margin-top: 0; }
.swiper-button-prev::after, .swiper-button-next::after { display: none; }

@keyframes counter {
    0%{ top: 0; transform: translateY(0);  }
    100%{ top: 1.3em; transform: translateY(-100%); }
}

@media screen and (max-width:1800px){
    .footer__inner { gap: 40px 100px; }
}
@media screen and (max-width:1600px){
    #allMenu .lnb__list .am_br { display: none; }

    .footer__inner { gap: 40px 60px; }
    .footer .logo { width: 180px; }
    .f-address .row, .f-info { font-size: 16px; }
}
@media screen and (max-width:1400px){
    .gnb .gnb__list > li { width: 120px; }
    .gnb .gnb__list > li > a { font-size: 18px; }
    .footer__inner { flex-direction: column; align-items: flex-start; }
    .gnb .lnb { font-size: 14px; }
    #allMenu .gnb__list > li > a { width: 300px; height: 60px; font-size: 32px; }
    #allMenu .lnb { width: calc(100% - 300px); }
    #allMenu .lnb__list > li > a { height: 60px; font-size: 16px; }
    #allMenu .depth3 { margin-top: 20px; }
    #allMenu .depth3 > li > a { font-size: 15px; }

}
@media screen and (max-width:1200px){
    .header { position: fixed; }
    .inner { width: calc(100% - 40px); }
    .btn-more { max-width: 180px; height: 48px; font-size: 16px; padding: 0 15px; }
    .btn-more::after { width: 30px; height: 30px; background-size: 20%; }

    .header__inner,.footer__inner { padding: 0 20px; }
    .gnb { display: none; }
    .header.bg-color { background-color: #fff; }
    .header.bg-color::before { height: var(--lnb-H);  border-top: 1px solid #EEEEEE; }
    .header.bg-color .logo svg #Group_2 path { fill: #2E2C2F; }
    .header.bg-color .gnb .gnb__list > li { width: 180px; color: #AAAAAA; }
    .header.bg-color .gnb .lnb { visibility: visible; opacity: 1; transition: opacity 0.3s 0.1s; }
    .header.bg-color #btnAllMenu .bar { background-color: #000; }
    .header.bg-color .lang__box .btn-lang { color: #000; }
    .header.bg-color .lang__box .btn-lang::before,.header.bg-color .lang__box .btn-lang::after { filter: brightness(0); }
    .lang__box { margin-right: 20px; }

    #allMenu .gnb__list > li > a { width: 220px; height: 50px; font-size: 28px; }
    #allMenu .lnb { width: calc(100% - 220px); }
    #allMenu .lnb__list > li > a { height: 50px; }
}
@media screen and (min-width:1025px){
    #allMenu a:not(.no-lnb) + .lnb, #allMenu .depth3 { display: block !important; }
    #allMenu .lnb__list > li:hover > a { color: var(--main-color); }
}
@media screen and (max-width:1024px){
    :root {
        --header-H: 70px;
    }
    
    .header .logo, .footer .logo { width: 140px; }
    #allMenu .gnb__list > li { flex-direction: column; padding: 20px; }
    #allMenu .gnb__list > li > a { width: fit-content; height: auto; margin-left: 0; }
    #allMenu .gnb__list > li > a:not(.no-lnb) { pointer-events: initial; }
    #allMenu .lnb { display: none; width: 100%; margin-top: 20px; padding: 0 15px; }
    #allMenu .lnb__list { flex-direction: column; }
    #allMenu .lnb__list > li + li { margin-top: 1em; }
    #allMenu .lnb__list > li { width: 100%; }
    #allMenu .lnb__list > li > a { height: auto; color: rgba(255, 255, 255, 0.8); }
    #allMenu .lnb__list > li > a.btn-depth { gap: 10px; }
    #allMenu .lnb__list > li > a.btn-depth::after { content: ""; display: block; width: 8px; height: 13px; background: url("/img/common/arrow_next_s.svg") no-repeat center center/contain; transform: rotate(90deg); opacity: 0.8; }
    #allMenu .lnb__list > li > a.btn-depth.active::after { transform: rotate(-90deg); }
    #allMenu .lnb__list > li > a.btn-depth.active { color: var(--main-color); }
    #allMenu .depth3 { display: none; margin-top: 10px; padding: 10px 15px; background-color: rgba(255, 255, 255, 0.2); }
    #allMenu .depth3 > li > a { color: #fff; }

    .f-address .row { flex-wrap: wrap; }
    .f-address .row, .f-info { font-size: 14px; }
    .f-address .row:nth-child(1) dd { margin-top: 8px; }
    .f-address .row:nth-child(2) dl { gap: 10px; }
    .fixed-btn > a { width: 50px; height: 50px; background-size: 65%; }
}
@media screen and (max-width:1024px) and (pointer: fine) {
    #allMenu .lnb__list > li:hover > a { color: var(--main-color); }
}
@media screen and (max-width:1024px) and (pointer: coarse) {
    #allMenu .lnb__list > li:hover > a:not(.btn-depth) { color: var(--main-color); }
}
@media screen and (max-width: 768px){ 
    .btn-more { max-width: 150px; height: 40px; padding: 0 12px; }
    .btn-more::after { width: 22px; height: 22px;  }
}