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

/*========== Import ==========*/
@import url("reset.css");
@import url("fonts.css");
@import url("header.css");
@import url("layout.css?ver_202510");
@import url("popup.css");

/*========== Base ==========*/
* { letter-spacing: -0.025em; -webkit-font-smoothing: antialiased;font-family: 'Pretendard Variable', 'Pretendard', sans-serif;scroll-behavior: smooth; } 
html { width: 100%; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; font-weight: 500; font-variation-settings: 'wght' 500; letter-spacing: -0.025em; -webkit-tap-highlight-color: transparent; background-color: #fff; } 
body { width: 100%; margin: 0; font-size: 1rem; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; line-height: 1.37; letter-spacing: -0.025em; color: var(--text_11);} 
canvas * { font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important; } 
a { display: block; width: 100%; text-decoration: none;font-family: 'Pretendard Variable', 'Pretendard', sans-serif; cursor: pointer; color: var(--text_11); } 
button {font-size: 1rem;font-family: 'Pretendard Variable', 'Pretendard', sans-serif; color: var(--text_11);}
span {display: inline-block; font-weight: inherit; font-family: inherit; }
* ::placeholder{ font-size: inherit; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--gray_95);}
body.scroll-disable {overflow: hidden;}

/* 대체 텍스트 숨김처리 */
.sr-only {position: absolute;z-index: -1;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.scroll-disable { height:100dvh; min-height:100dvh; -ms-touch-action: pan-y; touch-action: pan-y; } 

/* 비활성화 */
.disabled { cursor: default; pointer-events: none; outline: none !important; }
:disabled { outline: none !important; }

/* Scroll */
html::-webkit-scrollbar { width: 10px; height: 10px; background-color: #fff; border-radius: 6px; } 
html::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 6px; } 
html::-webkit-scrollbar-track { background-color: #fff; } 

body * ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #fff; border-radius: 6px; } 
body * ::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 6px; } 
body * ::-webkit-scrollbar-track { background-color: #fff;} 

/*========== Root ==========*/
:root { 
    /* Primary Color */
    --point_bg: #F6F5EF; 
    --point_bg_line: #DFC764; 
    --point_txt_gold: #9B7F00; 
    --point_txt_green: #17B1AD; 
    --point_txt_blue: #087CC3; 
    --point_black: #0A0506;
    --point_red: #E13814;

    /* Badge Color */
    --badge_green_light_bg: #e7f7f7;
    --badge_green_bg: #e5f6f0;
    --badge_green: #08A86C;
    --badge_pur_bg: #eeecf5;
    --badge_pur: #5A4599;
    --badge_org_bg: #fff1e9;
    --badge_org: #F7752F;
    --badge_blue_bg: #e5f2f9;
} 

/*========== Custom Design - Button ==========*/
.arrow-down {display: inline-block;width: 18px; height: 18px; margin-left: 10px; background-image: url('../images/icon-arrow-down.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 300ms;}
.on:not(.head-area) .arrow-down {transform: rotate(180deg);}
@media screen and (max-width: 860px) {
    .arrow-down {width: 14px; height: 14px;margin-left: 4px;}
}

/*========== Custom Design - list ==========*/
.list-style > li {position: relative;padding: 0 0 0 16px;font-size: 20px;font-weight: 600;font-variation-settings: 'wght' 600;color: var(--point_black);text-align: left;line-height: 1.3; word-break: keep-all;}
.list-style > li * {line-height: inherit;}
.list-style > li + li {margin: 6px 0 0;}
.list-style.col2 {flex-wrap: wrap;gap: 10px 0;}
.list-style.col2 > li {width: auto; min-width: 300px;}
.list-style.col2 > li:nth-child(2n) {width: calc(100% / 2);}
.list-style.col2 > li + li {margin: 0;}
.list-style > li:not(.flex-wrap).circle::before {content: '';position: absolute;top: 9px;left: 0;width: 8px;height: 8px;background-color: var(--point_txt_gold);border-radius: 50%;}
.list-style > li.circle-sm {padding: 0 0 0 6px;margin-left: 16px; font-size: 17px; font-weight: 400;font-variation-settings: 'wght' 400; color: var(--point_black);}
.list-style > li.circle-sm::before {content: '';position: absolute;top: 0.52em;left: 0;width: 2px;height: 2px;background-color: var(--point_black);border-radius: 50%;}
.list-style > li.list-text {display: flex; font-size: 18px; font-weight: 400; font-variation-settings: 'wght' 400; line-height: 1.2; color: var(--point_black);}
.list-style > li.list-text:not(.column) +li.list-text {margin: 8px 0 0;}
.list-style > li.list-text.column > span {position: relative; padding-right: 9px; margin-right: 9px; color: #777; word-break: keep-all;}
.list-style > li.list-text.column > span:after {content: '';position: absolute;top: 4px;right: 0;width: 1px;height: 15px;background-color: #777;}
.list-style > li.list-text.column.merge {display: flex;}
.list-style > li.list-text.column.merge .list-txt-inner {display: flex; flex-direction: column; gap: 4px;}
.list-style > li.indent {margin-left: 25px;padding-left: 0;}
.list-style > li.no-dot {padding-left: 0;}
.list-style > li.circle-sm.indent::before {display: none;}
.list-style > li.circle-sm.no-dot::before {display: none;}
.list-style > li em {font-weight: 400;font-variation-settings: 'wght' 400;}
.list-style > li.circle.flex-wrap {flex-wrap: wrap; padding: 0;}
.list-style > li.circle.flex-wrap .circle {position: relative;padding: 0 0 0 16px;}
.list-style > li.circle.flex-wrap .circle::before {content: '';position: absolute;top: 9px;left: 0;width: 8px;height: 8px;background-color: var(--point_txt_gold);border-radius: 50%;}
.list-style > li.circle.flex-wrap .circle-sm {position: relative; padding: 0 0 0 6px;margin-left: 16px; font-size: 17px; font-weight: 400;font-variation-settings: 'wght' 400; color: var(--point_black);}
.list-style > li.circle.flex-wrap .circle-sm::before {content: '';position: absolute;top: 0.52em;left: 0;width: 2px;height: 2px;background-color: var(--point_black);border-radius: 50%;}
.list-style > li.circle-xs {margin-top: 4px; font-size: 14px;font-weight: 400;font-variation-settings: 'wght' 400; color: #333;}
.list-style > li:has(.icon-indent) {display: flex;gap: 4px;}

.sub-list {position: relative; margin: 30px 0 0; }
.sub-list > li {font-size: 16px;font-weight: 400;font-variation-settings: 'wght' 400;color: #666;word-break: keep-all;line-height: 1.2;}
.sub-list > li:has(.icon-indent) {display: flex;gap: 4px;}
.sub-list.right > li {justify-content: flex-end;text-align: right;}
.sub-list > li + li {margin: 4px 0 0;}

@media screen and (max-width: 1480px) {
    .list-style > li.circle.flex-wrap {flex-direction: column;gap: 12px;}
    .list-style > li.circle.flex-wrap .flex-wrap.col2.flex-wrap {flex-direction: column; gap: 10px;}
    .list-style > li.circle.flex-wrap .flex-wrap.col2.flex-wrap .circle {margin: 0 !important;}
}
@media screen and (max-width: 920px) {
    .list-style > li {padding: 0 0 0 14px; font-size: 16px;}
    .list-style > li + li {margin: 4px 0 0;}
    .list-style > li:not(.flex-wrap).circle {padding-left: 14px;}
    .list-style > li:not(.flex-wrap).circle::before {top: 5px;width: 6px; height: 6px;}
    .list-style > li.circle.flex-wrap .circle {padding-left: 14px;}
    .list-style > li.circle.flex-wrap .circle::before {top: 5px;width: 6px; height: 6px;}
    .list-style > li.circle-sm { font-size: 14px;}
    .detail-list .list-style > li {font-size: 15px;}
    .detail-list .list-style > li.circle-sm {font-size: 14px;}
    .sub-list > li {font-size: 12px;}
    .list-style > li.list-text {font-size: 14px;}
    .list-style > li.list-text.column > span {margin-right: 7px; padding-right: 7px;}
    .list-style > li.list-text.column > span:after {top: 3px; height: 10px;}
    .list-style.col2 {gap: 6px 0;}
    .list-style.col2 > li {min-width: auto;}
    .list-style > li.circle.flex-wrap .circle-sm {font-size: 14px;}
    .list-style > li.circle-xs {font-size: 12px;}
}

/*========== Custom Design - Badge ==========*/
.badge-wrap {display: flex;align-items: center;gap: 5px;}
.badge {padding: 5px 10px; border-radius: 45px; font-size: 15px; font-weight: 600; font-variation-settings: 'wght' 600; line-height: 1; text-align: center; box-sizing: content-box; }
.badge.green {background-color: var(--badge_green_bg);color: var(--badge_green);}
.badge.pur {background-color: var(--badge_pur_bg);color: var(--badge_pur);}
.badge.org {background-color: var(--badge_org_bg);color: var(--badge_org);}
.badge.blue {background-color: var(--badge_blue_bg);color: var(--point_txt_blue);}
.badge.light-green {background-color: var(--badge_green_light_bg);color: var(--point_txt_green);}
.badge-wrap em {font-size: 14px; font-weight: 400; font-variation-settings: 'wght' 400; color: #333; line-height: 1.2; word-break: keep-all;}

.btn-wrap { display: flex; gap: 8px; align-items: center; justify-content: center; line-height: 1; } 
.btn-wrap.left { justify-content: flex-start; } 
.btn-wrap.right { justify-content: flex-end; } 
.btn-wrap a { width: auto; } 

.basic-btn { display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; min-width: 102px; padding: 16px 12px; border-radius: 4px; border: 1px solid #000; background-color: #000; color: #fff; font-size: 15px; font-weight: 600; font-variation-settings: 'wght' 600; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: background-color 300ms, border-color 300ms;} 
.basic-btn.icon-arrow span {position: relative; display: inline-block; padding-right: 24px;}
.basic-btn.icon-arrow span::after { content: ''; position: absolute; top: 50%; right: 0; transform: translate(0, -50%) rotate(90deg); width: 14px; height: 14px; background-image: url("../images/icon-next-white.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 300ms; }
.basic-btn.icon-arrow.on span::after { transform: translate(0, -50%) rotate(-90deg); }
.basic-btn:hover {background-color: #333;border-color: #333;}
.icon-btn { width: 30px; height: 30px; background-image: url('../images/icon-arrow-btn-w.svg'); background-repeat: no-repeat; background-position: center center; background-size: 15px auto; border-radius: 50%; background-color: var(--point_txt_gold); }

.link .icon-btn { transition: transform 0.68s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } 
.link:hover .icon-btn { -webkit-animation: diagonalMove 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: diagonalMove 0.68s cubic-bezier(0.4, 0, 0.2, 1) forwards; } 
@keyframes diagonalMove { 
    0% { transform: translate(0, 0); } 
    50% { transform: translate(4px, -4px); } 
    100% { transform: translate(0, 0); } 
}
@media screen and (max-width: 1100px) {
    .icon-btn {width: 24px; height: 24px; background-size: 12px auto;}
    @keyframes diagonalMove { 
        0% { transform: translate(0, 0); } 
        50% { transform: translate(2px, -2px); } 
        100% { transform: translate(0, 0); } 
    }
}
@media screen and (max-width: 768px) {
    .badge {padding: 4px 9px; font-size: 12px;}
    .badge-wrap em {font-size: 12px; }
}

/*========== Custom Design - Swiper ==========*/
.swiper-indicator {position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 8px;}
.swiper-button-prev { opacity: 1 !important; position: static !important; z-index: 100; top: auto !important; left: auto !important; width: 54px; height: 54px;margin: 0; background-image: url('../images/icon-prev.svg'); background-repeat: no-repeat; background-position: center center; background-size: 24px auto; border-radius:4px; background-color: #fff; border: 1px solid #000; transition: all 300ms;}
.swiper-button-next { opacity: 1 !important; position: static !important; z-index: 100; top: auto !important; left: auto !important; width: 54px; height: 54px;margin: 0; background-image: url('../images/icon-next.svg'); background-repeat: no-repeat; background-position: center center; background-size: 24px auto; border-radius:4px; background-color: #fff; border: 1px solid #000; transition: all 300ms;}
.swiper-button-prev:hover, .swiper-button-prev.active {background-color: #000;background-image: url('../images/icon-prev-white.svg');}
.swiper-button-next:hover, .swiper-button-next.active {background-color: #000;background-image: url('../images/icon-next-white.svg');}
.swiper-button-prev.swiper-button-disabled:hover, .swiper-button-prev.active.swiper-button-disabled {opacity: 0.5 !important; border-color: #999; background-color: #dadada;background-image: url('../images/icon-prev.svg');}
.swiper-button-next.swiper-button-disabled:hover, .swiper-button-next.active.swiper-button-disabled {opacity: 0.5 !important; border-color: #999; background-color: #dadada;background-image: url('../images/icon-next.svg');}
.swiper-button-prev:focus, .swiper-button-next:focus {outline: 2px dashed var(--point_txt_gold);outline-offset: 2px;}
@media screen and (max-width: 768px) {
    .swiper-indicator {gap: 6px;}
    .swiper-button-prev {width: 34px; height: 34px;background-size: 16px auto;}
    .swiper-button-next {width: 34px; height: 34px;background-size: 16px auto;}
}