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

/*========== 공통 ==========*/
.info-icon-box {gap: 16px;}
.info-icon-list { flex: 1; min-width: 0; padding: 24px; padding-right: 15px; background-color: var(--point_bg); border: 1px solid var(--point_bg_line); border-radius: 10px; }
.info-icon-list dl {height: 100%; padding-left: 100px; background-position: left center; background-repeat: no-repeat; background-size: auto 100%;}
.info-icon-list.drink dl {background-image: url('../images/info-drink.svg');}
.info-icon-list.smoke dl {background-image: url('../images/info-perfume.svg');}
.info-icon-list.perfume dl {background-image: url('../images/info-smoke.svg');}
.info-icon-list dl dt { font-size: 22px; font-weight: 700; font-variation-settings: 'wght' 700; line-height: 1.3; color: var(--point_txt_gold); word-break: keep-all;}
.info-icon-list dl dd { margin-top: 10px; font-size: 17px; font-weight: 400; font-variation-settings: 'wght' 400; line-height: 1.2; color: var(--point_black); word-break: keep-all;}
@media screen and (max-width: 1480px) {
    .info-icon-list dl {padding: 100px 0 0 0;background-position: top center;background-size: 80px auto;}
    .info-icon-list dl dt {text-align: center;}
    .info-icon-list dl dd {text-align: center;}
}
@media screen and (max-width: 920px) {
    .info-icon-box {gap: 12px;}
    .info-icon-list {padding: 16px 4px;}
    .info-icon-list dl dd {font-size: 14px;}
    .info-icon-list dl {padding: 66px 0 0 0;background-size: 52px auto;}
}

/*========== Intro Section ==========*/
.intro-sec .max-inner {height: 100%;}
.intro-sec .max-inner .section-content {overflow: hidden; position: relative; aspect-ratio: 1700 / 840; width: 100%; max-height: 808px; margin: 30px 0 20px; padding: 0; background-image: url("../images/bg-main.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%;border-radius: 20px;}
.intro-sec .festival-logo {display: flex; align-items: center; justify-content: center; aspect-ratio: 395 / 38; max-width: 24%; margin-left: auto;}
.intro-sec .festival-logo img {width: 70%; }
.intro-sec .festa-img {position: absolute; bottom: 90px; max-width: 60%; width: 100%; aspect-ratio: 1020 / 477;}

@media screen and (max-width: 1740px) {
    .intro-sec .mid-inner {max-width: 100%; margin: 0 40px;}
}
@media screen and (max-width: 920px) {
    .intro-sec { padding: 16px 0;} 
    .intro-sec .max-inner .section-content { margin: 0; aspect-ratio:328/668; width: 100%; max-height: initial; background-image: url("../images/bg-main-mo.png"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
    .intro-sec .mid-inner {display: flex;justify-content: center;margin: 0;}
    .intro-sec .festival-logo {display: none;}
    .intro-sec .festa-img {max-width: none; width: auto; height: 70%; bottom: clamp(40px, 10.87vw, 110px); aspect-ratio: initial;}
    .intro-sec .festa-img img {width: auto; height: 100%;}
}

/*========== 면세점 로고 슬라이더 ==========*/
/* .duty-sec .section-content {padding: 0; margin: 140px 0;} */
.duty-slide-wrap {position: relative;}
.duty-slide-wrap .swiper-indicator {position: absolute; top: -114px; right: 0;}
.duty-swiper {overflow: visible; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y; }
.duty-slide {display: flex; flex-direction: column; gap: 24px; width: 383px; height: auto; flex-shrink: 0; -webkit-user-select: none; user-select: none; touch-action: pan-x pan-y;}
.duty-slide .flex-wrap.column {gap: 24px;}
.duty-slide-link { overflow: hidden; display: block; position: relative; overflow: hidden; transition: background-color 300ms; -webkit-user-select: none; user-select: none; touch-action: pan-x pan-y; }
.duty-slide-link figure {position: relative; z-index: 2; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;max-width: 78%; margin: 0 auto;}
.duty-slide-link figure img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; object-fit: contain;}
.duty-slide-link.round {position: relative; width: 100%; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-position: center center; background-size: cover;border-radius: 50%;}
.duty-slide-link.round::after { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); transition: background-color 300ms;}
.duty-slide-link.round.hd {background-image: url('../images/bg-logo-hyundai.jpg');}
.duty-slide-link.round.grand {background-image: url('../images/bg-logo-grand.jpg');}
.duty-slide-link.round.jeju-ss {background-image: url('../images/bg-logo-jeju-ss.jpg');}
.duty-slide-link.round.shilla {background-image: url('../images/bg-logo-01.jpg');}
.duty-slide-link.round.busan {background-image: url('../images/bg-logo-busan.jpg');}
.duty-slide-link.round.jdc {background-image: url('../images/bg-logo-03.jpg');}
.duty-slide-link.round.kyungbok {background-image: url('../images/bg-logo-kyungbokkun.jpg');}
.duty-slide-link.round.fortune {background-image: url('../images/bg-logo-fortune.jpg');}
.duty-slide-link.round.ulsan {background-image: url('../images/bg-logo-ulsan.jpg');}
.duty-slide-link.round .round-img.hover {display: none;}

/* 배경 색상 클래스들 */
.duty-slide-link.red {background-color: #D6001F;}
.duty-slide-link.brown {background-color: #7E5E32;}
.duty-slide-link.blue {background-color: #002341;}
.duty-slide-link.dark {background-color: #2B2E28;}
.duty-slide-link.purple {background-color: #421B79;}
.duty-slide-link.gray {background-color: #474645;}
.duty-slide-link.pured {background-color: #520B12;}
.duty-slide-link.yellow {background-color: #C79D68;}

/* hover */
.duty-slide-link.red:hover {background-color: #f30527;}
.duty-slide-link.brown:hover {background-color: #a17232;}
.duty-slide-link.blue:hover {background-color: #013a6a;}
.duty-slide-link.dark:hover {background-color: #40423e;}
.duty-slide-link.purple:hover {background-color: #581fa7;}
.duty-slide-link.gray:hover {background-color: #545454;}
.duty-slide-link.pured:hover {background-color: #8e131f;}
.duty-slide-link.yellow:hover {background-color: #d7b890;}
.duty-slide-link.round:hover::after {background-color: rgba(0, 0, 0, 0.5);}
.duty-slide-link.round:hover .round-img:not(.hover) {display: none;}
.duty-slide-link.round:hover .round-img.hover {display: block;}

/* 프로그래스 바 */
.progress-indicator {position: relative;width: 100%;}
.duty-progress-bar { display: none; position: absolute; left: 0; right: 0; height: 4px; background-color:#ddd; border-radius:4px; overflow: hidden; }
.duty-progress-fill { height: 100%; background-color: var(--point_black); border-radius: 4px; transition: width 300ms ease; width: 0%; }

@media screen and (max-width: 920px) {
    .duty-progress-bar {display: block;}
    .duty-slide .flex-wrap.column {gap: 16px;}
    .indicator-wrap {display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; height: 34px; margin-top: 40px;}
    .duty-slide-wrap .swiper-indicator {position: static; top: auto; right: auto;}
}

/*========== 주요 행사 상세 내용 ==========*/
.detail-sec {background-color: var(--point_bg);}
.detail-list-wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
.detail-list-wrap .detail-list .detail-list-link {width: 100%; height: 100%; padding: 26px 20px 40px; border-radius: 16px; background-color: #fff;}
.detail-sec .btn-wrap.mo {display: none;}
@media screen and (max-width: 920px) {
    .detail-sec .btn-wrap.mo {display: flex; margin-top: 42px;}
    .detail-sec .sub-list.right {margin-top: 15px;}
    .detail-sec .section-content {padding-bottom: 80px;}
    .detail-list-wrap {grid-template-columns: 1fr;gap: 12px;}
    .detail-list-wrap .detail-list .detail-list-link {padding: 20px 16px;}
}

/*========== 전국 주요 면세점 행사 지도 ==========*/
.map-sec { position: relative; background-image: url('../images/map-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.map-sec::after { content: ''; position: absolute; top: 0; right: 0; transform: translate(1.04vw, -10.42vw); aspect-ratio: 482 / 364; max-width: 435px; width: clamp(340px, 25.1vw, 600px); background-image: url('../images/illu-top.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.map-sec .section-content {overflow: hidden;position: relative; }
.map-sec .section-content::before { content: ''; position: absolute; top: 50%; left:0; transform: translate(-30%, -74%);aspect-ratio: 408 / 344; max-width: 408px; width: clamp(204px, 21.25vw, 408px); background-image: url('../images/map-bg-left.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.map-sec .section-content::after { content: ''; position: absolute; top: 0; left: 50%; transform:translate(-25%, -25%); aspect-ratio: 1 / 1; max-width: 475px; width: clamp(235px, 27.29vw, 475px); background-image: url('../images/map-bg-right.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.map-sec .min-inner {position: relative; z-index: 2;}
.map-sec .sub-title {color: #0A0506;}
.map-content { gap: 5.47vw; margin: 40px 0 0;}
.map-content .left {position: relative; flex: 1; max-width: 710px; min-width: 500px;}
.map-content .left::after { content: ''; position: absolute; bottom: 0; left:0; transform: translate(-8.95vw, 3vw);aspect-ratio: 525 / 433; max-width: 475px; width: clamp(100px, 27.29vw, 470px); background-image: url('../images/illu-bottom.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.map-content .right { max-width: 628px; width: 50%;}

.map-point-wrap { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; } 
.map-point-btn { display: flex; align-items: flex-end; justify-content: center; position: absolute;z-index: 3; border: none; background: none; cursor: pointer; transition: transform 0.3s ease; } 
.map-point-btn.active {z-index: 4;}
.map-point-btn.seoul {top: 16%; left: 34%; transform: translate(-50%, -50%); } 
.map-point-btn.incheon { top: 21%; left: 14%; transform: translate(-50%, -50%); } 
.map-point-btn.pyeongtaek { top: 28%; left: 34%; transform: translate(-50%, -50%); } 
.map-point-btn.cheongju { top: 39%; left: 39%; transform: translate(-50%, -50%); } 
.map-point-btn.daegu { top: 56%; left: 75%; transform: translate(-50%, -50%); } 
.map-point-btn.ulsan { bottom: 29%;right: -6%; transform: translate(-50%, -50%); } 
.map-point-btn.busan { bottom: 21%; right: -13%; transform: translate(-50%, -50%);} 
.map-point-btn.jeju { bottom: 4%;right: -11%; transform: translate(-50%, -50%); } 
.map-point-btn img {width: 58px;-transition: transform 0.68s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; transform-origin: bottom center;}
.map-point-btn span { display: inline-block; padding: 4px 10px; border-radius: 15px; font-size: 18px; font-weight: 700; font-variation-settings: 'wght' 700; line-height: 1.2; color: var(--point_black); transition: all 0.3s 0.1s; -webkit-transition: all 0.3s 0.1s; -moz-transition: all 0.3s 0.1s; -ms-transition: all 0.3s 0.1s; -o-transition: all 0.3s 0.1s; }
.map-point-btn.active span { background-color: var(--point_black);color: #fff;}
.map-point-btn:hover img { -webkit-animation: mapPointer 0.68s ease-in-out forwards; animation: mapPointer 0.68s ease-in-out forwards; } 
.map-point-btn.active img { -webkit-animation: mapPointer 0.68s ease-in-out 0.1s forwards; animation: mapPointer 0.68s ease-in-out 0.1s forwards; } 
@keyframes mapPointer { 
    0% { transform: translate(0, 0) scale(1); } 
    50% { transform: translate(0, 5px) scale(0.94);} 
    100% { transform: translate(0, 0) scale(1);} 
}

/* Slider Style */
.map-slide-wrap { overflow: hidden; position: relative; height: 813px; border-radius: 16px; background-color: #fff;}
.map-swiper {position: relative;overflow: hidden; height: 100%; padding: 0 0 40px; background-image: url('../images/map-slide-seoul.svg');background-position: right 45px bottom 40px; background-size: auto; background-repeat: no-repeat; }
.map-swiper.bg-seoul { background-image: url('../images/map-slide-seoul.svg'); }
.map-swiper.bg-incheon { background-image: url('../images/map-slide-incheon.svg'); }
.map-swiper.bg-jeju { background-image: url('../images/map-slide-jeju.svg'); }
.map-swiper.bg-busan { background-image: url('../images/map-slide-busan.svg'); }
.map-swiper.bg-pyeongtaek { background-image: url('../images/map-slide-pyeongtaek.svg'); }
.map-swiper.bg-cheongju { background-image: url('../images/map-slide-cheongju.svg'); }
.map-swiper.bg-daegu { background-image: url('../images/map-slide-daegu.svg'); }
.map-swiper.bg-ulsan { background-image: url('../images/map-slide-ulsan.svg'); }
.map-swiper .swiper-wrapper {position: relative;width: 100%;height: 100%;z-index: 1;display: flex;transition-property: transform;box-sizing: content-box;}
.map-slide {overflow: hidden;overflow-y: auto; max-height: 87%;flex-shrink: 0;width: 100%;height: 100%;position: relative;transition-property: transform;}
.map-slide-title { padding: 45px 0 20px; margin: 0 40px 30px; border-bottom: 2px solid var(--point_black); font-size: 38px; font-weight: 700; font-variation-settings: 'wght' 700; line-height: 1.2; color: var(--point_black); }
.map-slide-title span {display: inline-block;position: relative; }
.map-slide-title .total { display: flex; justify-content: center; align-items: center; position: absolute; top: -4px; right: -28px; width: 24px; aspect-ratio: 1 / 1; border-radius: 50%; font-size: 14px; font-weight: 600; font-variation-settings: 'wght' 600; line-height: 1.2; color: #fff;}
.map-slide-title.seoul .total {background-color: var(--point_txt_green);}
.map-slide-title.incheon .total {background-color: var(--badge_org);}
.map-slide-title.jeju .total {background-color: var(--badge_green);}
.map-slide-title.busan .total {background-color: var(--point_txt_blue);}
.map-slide-title.pyeongtaek .total {background-color:var(--badge_pur);}
.map-slide-title.cheongju .total {background-color:var(--badge_pur);}
.map-slide-title.daegu .total {background-color:var(--badge_pur);}
.map-slide-title.ulsan .total {background-color:var(--badge_pur);}
.map-slide.seoul .list-style > li.circle {color: var(--point_txt_green);}
.map-slide.incheon .list-style > li.circle {color: var(--badge_org);}
.map-slide.jeju .list-style > li.circle {color: var(--badge_green);}
.map-slide.busan .list-style > li.circle {color: var(--point_txt_blue);}
.map-slide.pyeongtaek .list-style > li.circle {color:var(--badge_pur);}
.map-slide.cheongju .list-style > li.circle {color:var(--badge_pur);}
.map-slide.daegu .list-style > li.circle {color:var(--badge_pur);}
.map-slide.ulsan .list-style > li.circle {color:var(--badge_pur);}
.map-slide.seoul .list-style > li.circle::before {background-color: var(--point_txt_green);}
.map-slide.incheon .list-style > li.circle::before {background-color: var(--badge_org);}
.map-slide.jeju .list-style > li.circle::before {background-color: var(--badge_green);}
.map-slide.busan .list-style > li.circle::before {background-color: var(--point_txt_blue);}
.map-slide.pyeongtaek .list-style > li.circle::before {background-color:var(--badge_pur);}
.map-slide.cheongju .list-style > li.circle::before {background-color:var(--badge_pur);}
.map-slide.daegu .list-style > li.circle::before {background-color:var(--badge_pur);}
.map-slide.ulsan .list-style > li.circle::before {background-color:var(--badge_pur);}
.map-slide-conts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 15px;margin: 0 40px; padding-bottom: 40px;}
.map-slide-conts.single-item {grid-template-columns: 1fr;}
.map-slide-conts .single-last {grid-column: 1 / -1;}
.map-slide-wrap .swiper-indicator {position: absolute; top: 48px; right: 40px;}

.map-swiper .list-style > li:not(.circle-xs) {font-size: 18px;}
.map-swiper .list-style > li.list-text {font-size: 16px;}
.map-swiper .list-style > li:not(.flex-wrap).circle::before {top: 7px; width: 7px; height: 7px;}
.map-swiper .list-style > li.list-text.column > span:after {top: 4px;height: 11px;}

@media screen and (min-width: 1921px) {
    .map-sec::after { transform: translate(20px, -200px); -webkit-transform: translate(20px, -200px); -moz-transform: translate(20px, -200px); -ms-transform: translate(20px, -200px); -o-transform: translate(20px, -200px); }
    .map-content .left::after {transform: translate(-220px, 75px);}
}
@media screen and (max-width: 1840px) {
    .map-sec::after { transform: translate(1.04vw, -7vw); }
}
@media screen and (max-width: 1740px) {
    .map-content .left::after { width: clamp(210px, 20.29vw, 345px); transform: translate(0, 2.25vw);}
}
@media screen and (max-width: 1480px) {
    .map-slide-title {font-size: 28px;}
    .map-slide-wrap .swiper-indicator {top: 24px;right: 16px;}
    .map-slide-wrap .swiper-button-prev {width: 42px; height: 42px;}
    .map-slide-wrap .swiper-button-next {width: 42px; height: 42px;}
}
@media screen and (max-width: 1380px) {
    .map-point-btn.seoul {left: 35%;}
    .map-point-btn.ulsan {right: -8%;}
    .map-point-btn.busan {right: -19%;}
    .map-point-btn img {width: 48px;}
}
@media screen and (max-width: 1280px) {
    .map-content {gap: 30px;}
    .map-slide-title {padding: 32px 0 14px;margin: 0 24px 24px;}
    .map-slide-conts {margin: 0 24px;}
    .map-point-btn.seoul {top: 16%;left: 36%;}
    .map-point-btn.incheon {top: 21%;left: 14%;}
    .map-point-btn.ulsan {right: -10%;}
    .map-point-btn.busan {right: -20%;bottom: 21%;}
    .map-point-btn.jeju {right: -14%;}
}
@media screen and (max-width: 1200px) {
    .map-point-btn.seoul {top: 15%; left: 34%; } 
    .map-point-btn.busan {right: -15%;}
    .map-point-btn span {font-size: 14px;}
}
@media screen and (max-width: 1100px) {
    .map-swiper {background-image: none !important;}
    .map-sec {background-image: url('../images/map-bg-mo.jpg');}
    .map-sec::after { width: clamp(160px, 30.43vw, 280px); transform: translate(1.04vw, -11.42vw);}
    .map-content {flex-direction: column; margin-top: 30px;}
    .map-sec .section-content::before {transform: translate(-30%, -140%);}
    .map-sec .section-content::after {transform: translate(15%, -30%);}
    .map-content .left {min-width: auto;}
    .map-point-btn.seoul {top: 16%; left: 34%; } 
    .map-point-btn.incheon { top: 21%; left: 14%; } 
    .map-point-btn.pyeongtaek { top: 28%; left: 34%; } 
    .map-point-btn.cheongju { top: 39%; left: 39%; } 
    .map-point-btn.daegu { top: 56%; left: 75%; } 
    .map-point-btn.ulsan { bottom: 29%;right: -6%; } 
    .map-point-btn.busan { bottom: 21%; right: -13%;} 
    .map-point-btn.jeju { bottom: 4%;right: -11%; } 
    .map-content .right {display: none;}
    .map-slide-title {font-size: 22px;}
    .map-slide-wrap .swiper-button-prev {width: 34px; height: 34px; background-size: 16px auto;}
    .map-slide-wrap .swiper-button-next {width: 34px; height: 34px; background-size: 16px auto;}
}
@media screen and (max-width: 920px) {
    .map-slide-title {margin: 0 16px 20px;}
    .map-slide-conts {margin: 0 16px;}
    .map-swiper .list-style > li:not(.circle-xs) {font-size: 16px;}
    .map-swiper .list-style > li.list-text {font-size: 14px;}
    .map-swiper .list-style > li:not(.flex-wrap).circle::before {top: 5px;width: 6px; height: 6px;}
    .map-swiper .list-style > li.list-text.column > span:after {top: 3px;height: 10px;}
}
@media screen and (max-width: 768px) {
    .map-content .left::after { width: clamp(160px, 22.83vw, 280px); transform: translate(0, 9.77vw); }
    .map-slide-title .total {width: 16px; height: 16px;right: -20px;font-size: 11px; line-height: 1;}
    .map-slide-conts {grid-template-columns: 1fr;}
}
@media screen and (max-width: 580px) {
    .map-content .left {max-width: 310px;}
    .map-point-btn.seoul {top: 14%; left: 37%; } 
    .map-point-btn.incheon { top: 20%; left: 11%; } 
    .map-point-btn.pyeongtaek { top: 28%; left: 39%; } 
    .map-point-btn.cheongju { top: 38%; left: 42%; } 
    .map-point-btn.daegu { top: 56%; left: 77%; } 
    .map-point-btn.ulsan { bottom: 29%;right: -17%; } 
    .map-point-btn.busan { bottom: 19%; right: -25%;} 
    .map-point-btn.jeju { bottom: 3%;right: -26%; } 
    .map-point-btn img {width: 33px;}
    .map-point-btn span {padding: 4px 6px;font-size: 12px;}
}

/*========== 기타 안내사항 ==========*/
.info-content {display: flex; justify-content: space-between; gap: 3.75vw; padding: 30px 68px 30px 28px; background-image: url('../images/info-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.info-cont-box {max-width: 890px;width: 65%; padding: 50px 48px 40px; background-color: #fff; border-radius: 16px;}
.info-sec .list-style + .list-style {margin-top: 36px;}
.info-sec .list-style > li.circle {font-size: 24px;}
.info-sec .list-style > li.circle-sm {font-size: 18px;}
.info-sec .sub-list {margin: 34px 0 0;}
.info-sec .info-icon-box {display: flex;gap: 16px; margin: 20px 0 0;}

@media screen and (max-width: 1580px) {
    .info-content {padding:30px;gap: 30px;}
    .info-sec .min-inner + .min-inner {margin: 0;}
    .info-cont-box {padding: 30px;}
    .info-sec .info-icon-box {gap: 10px;}
}
@media screen and (max-width: 920px) {
    .info-content {flex-direction: column; padding:16px 16px 30px;background-image: url('../images/info-bg-mo.jpg'); }
    .info-cont-box {max-width: 100%; width: 100%; padding: 30px 16px;}
    .info-sec .list-style + .list-style {margin-top: 12px;}
    .info-sec .list-style > li.circle {font-size: 16px;}
    .info-sec .list-style > li.circle-sm {font-size: 14px;}
    .info-sec .list-style > li.circle-sm.mt10 {margin-top: 4px !important;}
    .info-sec .info-icon-list dl dt {font-size: 16px;}
    .info-sec .info-icon-list dl dd {font-size: 13px;}
    .info-sec .sub-list {margin: 14px 0 0;}
    .info-sec .festa-img {max-width: none;width: 74%; margin: 0 auto;}
}