@charset "utf-8";

/* 폰트 설정 */
/* * {font-family:'Pretendard-Var' !important;} */

/* Header */
#header {box-shadow:none;}

/* Main Common */
[class^="main-cont-"] {position:relative; margin-top:100px;}
[class^="main-cont-"]:first-child {margin-top:8px;}
[class^="main-cont-"] .swiper-container {width:100%; height:100%;}
[class^="main-cont-"] .swiper-wrapper {height:100%;}
[class^="main-cont-"] .swiper-slide {overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; transform:translate3d(0,0,0);}
[class^="main-cont-"] .swiper-slide img {width:100%; height:100%; object-fit:cover;}
[class^="main-cont-"] .swiper-slide video {width:100%; height:100%; -webkit-transform:translateZ(0); transform:translateZ(0); will-change:transform, opacity; -webkit-mask-image:-webkit-radial-gradient(white, black); object-fit:cover;}
[class^="main-cont-"] .ui_scroll:has(.tab-unit),
[class^="main-cont-"] .time-unit {margin-top:-4px;}
[class^="main-cont-"].dark {overflow:hidden; padding:48px 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(255, 255, 255, 0.03) 100%);}
[class^="main-cont-"].dark .ui_scroll:after {background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #F8F8F8 50%);}
[class^="main-cont-"].dark .ui_scroll:before {background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #F8F8F8 50%);}

/* 대배너 */
.main-cont-visual > .conts-inner {display:flex; align-items:center; gap:0 16px; height:520px;}
.main-cont-visual [class^="carousel-"] {display:flex; flex-direction:column; justify-content:flex-end;flex:1; overflow:hidden; height:100%; border-radius:20px; position:relative; width:100%; height:100%;}
.main-cont-visual .carousel-r {flex:none; flex-shrink:0; width:308px; height:100%;}
.main-cont-visual .carousel-r .swiper-bottom {right:20px; bottom:8px; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;}
.main-cont-visual .carousel-r .swiper-bottom .swiper-bottom-inner {padding:0;}
.main-cont-visual .visual-block {height:100%;}
.main-cont-visual .visual-block .link {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; font-size:0;}
.main-cont-visual .visual-block .media {position:relative; transition:transform 1s; will-change:transform; height:100%;}
.main-cont-visual .visual-block .media:before {display:block; content:""; position:absolute; bottom:0; left:0; width:100%; height:100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.92%, rgba(0, 0, 0, 0.25) 75.41%);}
.main-cont-visual .visual-block .info {position:absolute; bottom:44px; left:0; width:100%; padding:0 160px 0 60px; box-sizing:border-box; z-index:1; will-change:transform; transition:transform 1s;}
.main-cont-visual .visual-block .info .tit {display:block; overflow:hidden; margin-bottom:4px;}
.main-cont-visual .visual-block .info .tit span {display:block; position:relative; overflow:hidden; max-width:100%; width:84vw; transform:translateX(100px); opacity:0; transition:1s; white-space:nowrap; text-overflow:ellipsis; font-size:32px; font-weight:700; line-height:44px; color:#fff;}
.main-cont-visual .visual-block .info .txt {margin-top:12px; font-size:18px; line-height:28px; color:#fff; transform:translateY(20px); opacity:0; transition:1s; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.main-cont-visual .visual-block .brand {overflow:hidden; position:absolute; bottom:0; left:0; width:100%; height:52px; padding:0 100px 0 20px; align-content:center; background:rgba(0, 0, 0, 0.7); font-size:15px; font-weight:500; line-height:28px; color:#fff; white-space:nowrap; text-overflow:ellipsis; box-sizing:border-box;}
.main-cont-visual .swiper-slide-active .visual-block .info .tit span {transform:translateX(0); opacity:1;}
.main-cont-visual .swiper-slide-active .visual-block .info .tit .line02 {transition-delay:.2s;}
.main-cont-visual .swiper-slide-active .visual-block .info .txt {transform:translateY(0); transition-delay:.4s; opacity:0.7;}

/* 아이콘 배너 모듈 */
.icons-module {position:relative;}
.icons-module ul {display:flex; flex-wrap:wrap; gap:16px;}
.icons-module ul li {position:relative;}
.icons-module a {display:flex; align-items:center; gap:0 8px; padding:4px 16px 4px 4px; box-sizing:border-box; border-radius:20px; background:#fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}
.icons-module .media {display:inline-block; position:relative; overflow:hidden; isolation:isolate; border-radius:50%; width:36px; height:36px; flex-shrink:0;}
.icons-module .media img {width:100%; height:100%; object-fit:cover;}
.icons-module .name {overflow:hidden; position:relative; font-size:15px; font-weight:600; color:#222; line-height:19px;}
.icons-module .swiper-container {display:inline-block; width:auto; max-width:100%;}
.icons-module .swiper-slide {position:relative;}
.icons-module .block {font-size:0; text-align:center;}
.icons-module .block.st01 .swiper-container {padding:0 4px; box-sizing:border-box;}
.icons-module .block.st01 .swiper-slide {width:auto; padding:8px;}
.icons-module .block.st01 .name {max-width:216px; white-space:nowrap;}
.icons-module .block.st01 .new .name {padding-right:6px;}
.icons-module .block.st01 .new .name:before {display:block; content:""; position:absolute; top:0; right:0; width:6px; height:100%; background:#fff;}
.icons-module .block.st01 .new .name:after {display:block; content:""; position:absolute; top:0; right:0; width:4px; height:4px; border-radius:50%; background:#E80F00;}
.icons-module .block.st02 .swiper-slide {width:92px;}
.icons-module .block.st02 a {flex-direction:column; gap:12px 0; width:100%; padding:0; border-radius:0; background:transparent; box-shadow:none;}
.icons-module .block.st02 .media {width:68px; height:68px; border-radius:24px;}
.icons-module .block.st02 .name {font-weight:500; color:#616161; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; white-space:normal; letter-spacing:-0.04em;}
.icons-module .block.st02 .new:after {display:block; content:""; position:absolute; top:0; right:12px; width:15px; height:15px; background:url('../images/ico_new02.png') no-repeat 0 0 /100% auto;}
.icons-module .block.st02 .new .name:before,
.icons-module .block.st02 .new .name:after {display:none;}
.icons-module .block.st02 .swiper-arrow button {top:14px; transform:none;}
.icons-module .block.st03 li > a {gap:0 16px; padding:8px 20px 8px 8px; border-radius:28px;}
.icons-module .block.st03 li .media {width:68px; height:68px; border-radius:24px;}
.icons-module .block.st03 .name {max-width:216px;}

/* iScroll gradation last */
.ui_scroll:before,
.ui_scroll:after {display:block; content:""; position:absolute; top:0; left:0; z-index:2; width:80px; height:100%; background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%); opacity:1; pointer-events:none; transition:opacity .2s ease-in; opacity:0;}
.ui_scroll.scroll-init:before,
.ui_scroll.scroll-init:after {opacity:1;}
.ui_scroll:after {left:auto; right:0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%);}
.ui_scroll.is-first:before {opacity:0;}
.ui_scroll.is-last:after {opacity:0;}
.ui_scroll:has(.icons-module) {margin:-8px; padding:8px;}
.ui_scroll .icons-module .block:after {display:inline-block; content:""; vertical-align:middle; width:8px; height:44px;}
.ui_scroll .icons-module .block {display:flex; align-items:center; flex-wrap:nowrap;}

/* 아이콘 배너 */
.main-cont-icons {margin-top:32px;}
.main-cont-icons + .main-cont-icons {margin-top:32px;}
.main-cont-icons .icons-module .block.st01 .name {max-width:177px; text-overflow:inherit;}

/* 띠배너 */
.main-cont-line {margin-top:60px;}
.main-cont-line .carousel {position:relative;}
.main-cont-line .swiper-container {overflow:hidden; isolation:isolate; border-radius:4px;}
.main-cont-line .swiper-slide {display:flex; flex-direction:column; justify-content:center; position:relative; height:84px; padding:0 54px; box-sizing:border-box;}
.main-cont-line .swiper-slide .link {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; font-size:0;}
.main-cont-line .swiper-slide .media {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.main-cont-line .swiper-slide .media img {width:100%; height:100%; object-fit:fill;}
.main-cont-line .swiper-slide .title {position:relative; overflow:hidden; max-width:950px; font-size:20px; font-weight:600; line-height:24px; color:#222; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-line .swiper-slide.dark .title {color:#fff;}

/* 타임세일 */
.time-unit {margin:0 0 20px;}
.time-unit .tit {font-size:20px; font-weight:500; color:#E80F00; line-height:17px;}
.time-unit .unitin {display:inline-flex; align-items:center;}
.time-unit .unitin span {font-size:20px; font-weight:500; color:#E80F00; line-height:20px;}
.time-unit .unitin span:before {display:inline-block; content:":"; margin:0 6px; font-weight:500; color:currentColor; vertical-align:baseline; line-height:20px;}
.time-unit .unitin span:first-child:before {display:none;}

[data-tab-content] > div {display:none;}
[data-tab-content] > div.on {display:block;}

.main-cont-time .carousel-time .swiper-container:not(.swiper-container-initialized) .swiper-wrapper {gap:16px;}
.main-cont-time .carousel-time .swiper-slide {display:flex; flex-direction:column; gap:30px 0; width:200px;}
.main-cont-time .carousel-time .swiper-slide.max {width:416px;}
.main-cont-time .carousel-time .swiper-slide.max .top {height:456px;}
.main-cont-time .carousel-time .swiper-arrow button {top:208px; transform:none;}
.main-cont-time .swiper-slide.max .time-block .top .overlay img {filter:blur(24px); -webkit-filter:blur(24px);}

/* 팝업스토어 */
.main-cont-cover {position:relative;}
.main-cont-cover .swiper-slide {height:560px; padding-top:100px; box-sizing:border-box;}
.main-cont-cover .swiper-arrow {position:absolute; left:50%; top:0; z-index:2; transform:translateX(-50%); width:1280px; height:100%; pointer-events:none;}
.main-cont-cover .swiper-arrow button {top:310px !important; pointer-events:auto;}
.main-cont-cover .swiper-arrow button.prev {left:-20px;}
.main-cont-cover .swiper-arrow button.next {right:-20px;}
.main-cont-cover .bg {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-cont-cover .bg:before {display:block; content:""; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,0.16); backdrop-filter:blur(60px); -webkit-backdrop-filter: blur(60px); will-change:transform; transform:translateZ(0);}
.main-cont-cover .bg img {width:100%; height:100%; transform:translateZ(0);}
.main-cont-cover .cover-block {display:flex; position:relative; z-index:1; width:1280px; height:100%; margin:0 auto; background:#fff;}
.main-cont-cover .cover-block .preview {overflow:hidden; position:relative; flex:1; min-width:584px;}
.main-cont-cover .cover-block .preview img {width:100%; height:100%; transition:transform .4s ease; will-change:transform;}
.main-cont-cover .cover-block .preview:hover img {transform:scale(1.05);}
.main-cont-cover .cover-block .preview .link {position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; font-size:0;}
.main-cont-cover .cover-block .preview .top,
.main-cont-cover .cover-block .preview .media {height:100%;}
.main-cont-cover .cover-block .preview .bottom {position:absolute; bottom:0; left:0; z-index:1; width:100%; padding:20px; box-sizing:border-box;}
.main-cont-cover .cover-block .preview .bottom .tit {font-size:14px; font-weight:700; color:#222;}
.main-cont-cover .cover-block .preview .bottom .txt {margin-top:7px; font-size:14px; color:#616161;}
.main-cont-cover .cover-block .products {padding:32px; box-sizing:border-box;}
.main-cont-cover .cover-block .products ul {display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:100%;}
.main-cont-cover .cover-block .products ul li {position:relative; aspect-ratio:1;}
.main-cont-cover .cover-block .products ul li:before {display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.03);}
.main-cont-cover .cover-block .products ul li img {width:100%; height:100%;}
.main-cont-cover .cont-unit-head {margin-bottom:63px;}
.main-cont-cover .cont-unit-head .head .inner .brand {overflow:hidden; margin-top:12px; font-size:18px; line-height:24px; color:#222; white-space:nowrap; text-overflow:ellipsis;}

/* 개인화 */
.main-cont-basic .product-thumb {margin-bottom:24px;}

/* 브랜드 혜택 */
.main-cont-brand {overflow:hidden;}
.main-cont-brand .carousel {width:1280px; margin:0 auto; padding:4px 0 0;}
.main-cont-brand .swiper-wrapper {align-items:center;}
.main-cont-brand .swiper-slide {overflow:visible; width:235px !important; transform:translateX(-20.5px) !important; transition:none;}
.main-cont-brand .swiper-slide-active ~ .swiper-slide {transform:translateX(20.5px) !important;}
.main-cont-brand .swiper-slide-active .brand-block {width:276px; transition:none;}
.main-cont-brand .swiper-slide-active .brand-block .top .media {height:370px;}
.main-cont-brand .swiper-slide-active .brand-block .top .media:before {display:none;}
.main-cont-brand .swiper-slide-active .brand-block .bottom .tit {font-size:20px;}
.main-cont-brand .swiper-slide-active .brand-block .bottom .txt {margin-top:4px; font-size:16px;}
.main-cont-brand .swiper-arrow button {top:204px; transform:none;}
.main-cont-brand .brand-block {position:relative; width:235px; min-height:375px; transition:width .4s; will-change:width;}
.main-cont-brand .brand-block .link {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; font-size:0;}
.main-cont-brand .brand-block .top {position:relative;}
.main-cont-brand .brand-block .top .media {overflow:hidden; position:relative; width:100%; height:312px;}
/* .main-cont-brand .brand-block .top .media:before {display:block; content:""; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0, 0, 0, 0.3);} */
.main-cont-brand .brand-block .top .media img {width:100%; height:100%; transition:transform .4s ease; will-change:transform;}
.main-cont-brand .brand-block .top .badge {display:flex; align-items:center; position:absolute; bottom:-10px; left:0; z-index:1; height:20px; min-width:37px; padding:0 8px; box-sizing:border-box; background:rgba(0, 0, 0, 0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:12px; color:#fff; text-align:center; white-space:nowrap;}
.main-cont-brand .brand-block .bottom {padding-top:18px; background:#fff;}
.main-cont-brand .brand-block .bottom .tit {font-size:16px; font-weight:700; line-height:24px; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-brand .brand-block .bottom .txt {font-size:12px; line-height:20px; color:#616161; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-brand .brand-block:hover .top .media img {transform:scale(1.05);}
.main-cont-brand.dark {padding-bottom:0;}

/* 쇼핑혜택 / 지점혜택 */
.main-cont-benefit {padding:20px 0; background: linear-gradient(0deg, #FFFFFF 0%, #F5F5F5 50.48%, #FFFFFF 100%);}
.main-cont-benefit .icons-module {overflow:hidden; max-height:104px; margin:-8px; padding:8px;}

/* 사은품 증정 브랜드 */
.main-cont-gift .swiper-slide {width:308px;}
.main-cont-gift .gift-block {position:relative; overflow:hidden; width:100%;}
.main-cont-gift .gift-block .link {display:block; position:absolute; top:0; left:0; width:100%; z-index:2; height:100%; font-size:0;}
.main-cont-gift .gift-block .top {overflow:hidden; position:relative; width:100%; aspect-ratio:1;}
.main-cont-gift .gift-block .top .media {width:100%; height:100%;}
.main-cont-gift .gift-block .top img {width:100%; height:100%; transition:transform .4s ease; will-change:transform;}
.main-cont-gift .gift-block .bottom {display:flex; flex-direction:column; justify-content:flex-start; position:absolute; bottom:0; left:0; width:100%; height:72px; padding:12px 16px; box-sizing:border-box; background:rgba(0,0,0,0.16); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.main-cont-gift .gift-block .bottom .tit {font-size:16px; font-weight:700; line-height:24px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-gift .gift-block .bottom .txt {margin-top:4px; font-size:15px; line-height:20px; color:#fff; opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-gift .gift-block:hover .top .media img {transform:scale(1.05);}

/* 랭킹 */
.main-cont-rank .swiper-slide {width:1280px;}

/* 브랜드 포커스 */
.main-cont-focus .brand-focus {display:flex; align-items:flex-start; gap:0 16px; height:416px;}
.main-cont-focus .brand-focus .preview {overflow:hidden; position:relative; height:100%; flex:1; display:flex; flex-direction:column;}
.main-cont-focus .brand-focus .preview:before {display:block; content:""; position:absolute; bottom:0; left:0; z-index:1; width:100%; height:100%; background: rgba(0, 0, 0, 0.03);}
.main-cont-focus .brand-focus .preview:after {display:block; content:""; position:absolute; bottom:0; left:0; z-index:1; width:100%; height:160px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 100%); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); mask-image: linear-gradient(to top, black 20%, transparent 100%);}
.main-cont-focus .brand-focus .preview .link {position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; font-size:0;}
.main-cont-focus .brand-focus .preview img {width:100%; height:100%; object-fit:cover; transition:transform .4s ease; will-change:transform;}
.main-cont-focus .brand-focus .preview .top,
.main-cont-focus .brand-focus .preview .media {height:100%;}
.main-cont-focus .brand-focus .preview .bottom {position:absolute; bottom:0; left:0; z-index:2; width:100%; padding:40px; box-sizing:border-box;}
.main-cont-focus .brand-focus .preview .bottom .tit {overflow:hidden; font-size:18px; font-weight:700; color:#222; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-focus .brand-focus .preview .bottom .txt {overflow:hidden; margin-top:12px; font-size:18px; color:#616161; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-focus .brand-focus .preview:hover img {transform:scale(1.05);}
.main-cont-focus .brand-focus .products {display:grid; grid-template-rows:repeat(2, max-content); grid-auto-flow:column; gap:16px;}
.main-cont-focus .brand-focus.dark .preview:after {background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.4) 100%);}
.main-cont-focus .brand-focus.dark .preview .bottom .tit {color:#fff;}
.main-cont-focus .brand-focus.dark .preview .bottom .txt {color:#fff; opacity:.7;}

/* 팝업 위치 덮어쓰기 */
.popup_mall {position:absolute; top:214px; left:40px; z-index:2;}
.popup_mall > .popup_inner {border-radius:0; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}
.floating_popup {position:fixed; bottom:40px; left:40px;}
.floating_popup ,
.floating_popup .item,
.floating_popup .item:before {border-radius:0;}
.floating_popup.floating_popup2 {left:430px;}

@media screen and (min-width:2092px) {
    .popup_mall {left:calc(50% - 465px); transform:translateX(-50%); margin-left:-366px;}
}