@charset "utf-8";
/* Info
 ========================================================================== */
/**
    * 1. Writer: Lee A Jin. (Weaverloft Corp.)
    * 2. Production Date: 2025-10
    * 3. Client: 한국면세점협회
    * 4. Description: English Style
 */

/*========== Header ==========*/
:lang(en) .header-logo {width: 360px;}
@media screen and (min-width: 1181px) {
    :lang(en) .nav-dep1-list span::after {content: '';display: block;position: absolute;bottom: 0;left: 50%;width: 0%;height: 3px;background-color: var(--point_red);transform: translateX(-50%);font-size: inherit;}
    :lang(en) .nav-dep1-list a:focus-visible {color: var(--point_red);}
    :lang(en) .nav-dep1-list.active a {color: var(--point_red);}
    :lang(en) .nav-dep1-list.active a span::after {width: 110%;transition: width 400ms;}
    @media (hover: hover) {
        :lang(en) .nav-dep1-list a:hover {color: var(--point_red);}
    }
}
@media screen and (max-width: 1480px) {
    :lang(en) .gnb { height: clamp(60px, 6.08vw, 90px); } 
    :lang(en) .header-logo {width: 290px;}
    :lang(en) .nav-dep1 {gap: 40px;}
    :lang(en) .nav-dep1-list a {font-size: 16px;}
    :lang(en) .nav-side-wrap .lang-btn {font-size: 14px;}
    :lang(en) .nav-side-wrap .lang-btn span {min-height: 20px;padding-left: 24px;background-size: 20px auto;}
}
@media screen and (max-width: 1180px) {
    :lang(en) #header {height: 60px; background-color: #fff;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
    :lang(en) .header-bg { opacity: 0; position: fixed; top: 0; left: 0; transition: 300ms ease-in-out; }
    :lang(en) .gnb {background-color: transparent; box-shadow: none;}
    :lang(en) #header .menu-wrap { display: block; display: -webkit-box; display: -ms-flexbox; } 
    :lang(en) #header .menu-btn {width: 40px;}
    :lang(en) #header .menu-btn-list { width: 18px;height: 15px;}
    :lang(en) .gnb-bg { display: block; position: fixed; z-index: 1100; top: 0; right: -276px; width: 100%; max-width: 274px; height: 100vh; height: 100dvh; background-color: #fff; border-radius: 16px 0 0 16px; transition: right 300ms ease-in-out;}
    :lang(en) .nav-side-wrap {display: flex; align-items: center; position: fixed; z-index: 1110; top: 0; right: -276px; width: calc(100% - 32px); max-width: calc(274px - 32px);height: 60px; margin: 0 16px; border-bottom: 1px solid #ddd;transition: right 300ms ease-in-out;}
    :lang(en) .hide-menu-list {top: 100%;transform: translate(0, -8px);min-width: 75px;}
    :lang(en) .nav-wrap {position: fixed; z-index: 1105; top: 60px; right: -276px; width: 100%; max-width: 274px; height: calc(100vh - 60px); height: calc(100dvh - 60px);transition: right 300ms ease-in-out;}
    :lang(en) .nav-dep1 {flex-direction: column;gap: 0;align-items: self-start; margin-top: 17px; padding: 0 16px; }
    :lang(en) .nav-dep1-list {width: 100%; height: auto;}
    :lang(en) .nav-dep1-list a { padding: 14px 10px; border-radius: 4px;}
    :lang(en) .nav-dep1-list.active a {background-color: var(--point_bg);}
    :lang(en) .nav-dep1-list:not(.active) a:hover {color: var(--point_txt_gold);}

    /* 모바일 메뉴 */
    :lang(en) .head-area.on .header-bg {opacity: 1; z-index: 1005;width: 100%; height: 100vh; height: 100dvh; background-color: rgba(0, 0, 0, 0.6);}
    :lang(en) .head-area.on #header .menu-wrap { position: relative; z-index: 1120; } 
    :lang(en) .head-area.on .gnb-bg { right: 0; }
    :lang(en) .head-area.on .nav-side-wrap {right: 0; }
    :lang(en) .head-area.on .nav-wrap {right: 0; }
}
@media screen and (max-width: 360px) {
    :lang(en) .header-logo {width: 240px;}
}

/*========== Contents ==========*/
:lang(en) .section-wrap {padding-bottom: 100px;}
:lang(en) .badge-wrap.flex1 {flex: initial !important;}
:lang(en) .flex-wrap.col2.f-wrap {flex-wrap: initial !important;flex-direction: column;gap: 10px;}
:lang(en) .flex-wrap.col2 > span {flex: auto; margin: 0 !important;}
@media screen and (max-width: 1100px) {
    :lang(en) .section-wrap {padding-bottom: 50px;}
}
@media screen and (max-width: 920px) {
    :lang(en) .flex-wrap.col2.f-wrap {gap: 4px;}
}

/*========== Duty ==========*/
:lang(en) .duty-sec .duty-slide-link.lotte figure {max-width: 36%;}
:lang(en) .lottePop .modal-footer .inner.flex-wrap > .left .duty-logo {max-width: 30%;}
@media screen and (max-width: 1100px) {
    :lang(en) .lottePop .modal-footer .inner.flex-wrap > .left .duty-logo {max-width: 45% !important;}
}

/*========== Map ==========*/  
:lang(en) .map-slide {max-height: 81%;} 
:lang(en) .map-swiper .list-style > li.list-text.column {flex-wrap: wrap; gap: 4px;}
:lang(en) .map-point-btn.seoul {top: 15%; left: 32%;} 
:lang(en) .map-point-btn.incheon { top: 21%; left: 15%;} 
:lang(en) .map-point-btn.pyeongtaek { top: 26%; left: 40%;} 
:lang(en) .map-point-btn.cheongju { top: 39%; left: 42%;} 
:lang(en) .map-point-btn.daegu { top: 57%; left: 76%;} 
:lang(en) .map-point-btn.ulsan { bottom: 29%;right: -14%;} 
:lang(en) .map-point-btn.busan { bottom: 21%; right: -8%;} 
:lang(en) .map-point-btn.jeju { bottom: 6%;right: 3%;} 
@media screen and (max-width: 1480px) {
    :lang(en) .map-point-btn.busan {right: -11%;}
}
@media screen and (max-width: 1380px) {
    :lang(en) .map-point-btn.busan {right: -9%;}
    :lang(en) .map-point-btn.cheongju {left: 45%;} 
}
@media screen and (max-width: 580px) {
    :lang(en) .map-point-btn.seoul {top: 14%; left: 34%;} 
    :lang(en) .map-point-btn.incheon { top: 20%; left: 11%;} 
    :lang(en) .map-point-btn.pyeongtaek { left: 45%;} 
    :lang(en) .map-point-btn.cheongju { left: 49%;} 
    :lang(en) .map-point-btn.daegu { top: 55%; left: 79%;} 
    :lang(en) .map-point-btn.ulsan { bottom: 27%;right: -22%;} 
    :lang(en) .map-point-btn.busan { bottom: 19%; right: -16%;} 
    :lang(en) .map-point-btn.jeju { bottom: 3%;right: -8%;} 
}

/*========== Footer ==========*/
:lang(en) .footer-sec .min-inner .left figure img {max-width: 280px;}
:lang(en) .footer-sec .min-inner .left figure figcaption {font-size: 15px;}
:lang(en) .footer-sec .min-inner .right ul li + li {padding-left: 20px;margin-left: 20px;}
:lang(en) .footer-sec .min-inner .right ul li:nth-child(1) span {min-width: 72px;font-size: 15px;}
:lang(en) .footer-sec .min-inner .right ul li:nth-child(2) span {min-width: 90px;font-size: 15px;}
:lang(en) .footer-sec .min-inner .right ul li:nth-child(1) a {max-width: 200px;}
:lang(en) .footer-sec .min-inner .right ul li:nth-child(2) a {max-width: 290px;}
@media screen and (max-width: 1480px) {
    :lang(en) .footer-sec .min-inner > .flex-wrap.between {flex-direction: column;gap: 40px;}
    :lang(en) .footer-sec .min-inner .right {align-self: center;}
}
@media screen and (max-width: 920px) {
    :lang(en) .footer-sec .min-inner .left figure figcaption {font-size: 13px; text-align: center;}
    :lang(en) .footer-sec .min-inner .right ul li:nth-child(1) span {min-width: 60px;font-size: 14px;}
    :lang(en) .footer-sec .min-inner .right ul li:nth-child(2) span {min-width: 60px;font-size: 14px;}
    :lang(en).footer-sec .min-inner .right > .flex-wrap {flex-wrap: wrap;gap: 20px;}
    :lang(en) .footer-sec .min-inner .right ul li a {width: 154px;}
    :lang(en) .footer-sec .min-inner .right ul li + li a {width: 226px;}
    :lang(en) .footer-sec .min-inner .right ul li + li {padding-left: 0; margin-left: 0;}
    :lang(en) .footer-sec .min-inner .right ul li + li::before {display: none;}
}