@charset "utf-8";

/* Main - Common */
[class^="mn-"] {padding:0 0 50px;}
#container {padding-bottom:0;}

/* Main - Contents */
.banner-block {position:relative;}
.banner-block a {display:block;}
.banner-block .cm-media {height:58.67vw;}
.banner-block .info {position:absolute; left:0; bottom:0; width:100%; padding:0 30px 30px; box-sizing:border-box;}
.banner-block .info p {position:relative; overflow:hidden; font-size:18px; font-weight:bold; font-family:'PretendardBold','Microsoft YaHei'; line-height:25px; color:#fff; transform:translateX(100px); opacity:0; transition:1s; white-space:nowrap; text-overflow:ellipsis;}
.swiper-slide-active .banner-block .info p {opacity:1; transform:translateX(0);}
.swiper-slide-active .banner-block .info p:nth-child(2) {transition-delay:.2s;}

.mn-tab {padding-bottom:20px;}
.mn-tab .ui-scroll + .ui-scroll {margin-top:10px;}
.mn-tab .fm-choice > label {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.mn-headline {display:flex; flex-wrap:wrap; position:relative; padding:20px; box-sizing:border-box;}
.mn-headline .title {flex:1; max-width:80%; font-size:18px; color:#222; font-weight:bold; font-family:'PretendardBold','Microsoft YaHei'; line-height:26px; white-space:normal; word-break:break-word;}
.mn-headline .utill {display:flex; align-items:center; margin-left:auto;}
.mn-headline .utill .btn-all {display:inline-flex; align-items:flex-end; height:100%; padding-bottom:2.5px; box-sizing:border-box;}
.mn-headline .utill .btn-all span {font-size:13px; color:#666; line-height:18px;}

.mn-banner {padding:0;}
.mn-banner .swiper-pagination:not(.swiper-pagination-lock) {display:flex;}
.mn-banner .swiper-pagination {position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:1; width:calc(100% - 40px);}
.mn-banner .swiper-pagination .swiper-pagination-bullet {flex:1; width:auto; min-width:0; height:2px; margin-left:0; border-radius:0; background:#fff; opacity:.6;}
.mn-banner .swiper-pagination .swiper-pagination-bullet-active {position:relative; border-radius:0; background:#222; opacity:1;}

.mn-category {padding:0;}
.mn-category .cont .ui-scroll {padding:20px 0;}
.mn-category .cont .ui-scroll .ui-scroll-inner {padding:0 0 0 6.4vw;}
.mn-category .cont .ui-scroll .ui-scroll-inner:after {width:4.27vw;}
.mn-category .cont .ui-scroll .ui-scroll-inner:has(li:nth-last-child(n+6), li:nth-last-child(n+6) ~ li):after {width:6.4vw;}
.mn-category .cont ul:nth-child(2) {margin-top:2.67vw;}
.mn-category .cont ul li {display:inline-block; position:relative; width:12.54vw; margin-left:5.3vw; font-size:0; vertical-align:top;}
.mn-category .cont ul li:first-child(-n+2) {margin-left:0;}
.mn-category .cont ul li a {display:flex; flex-direction:column;}
.mn-category .cont ul li .img {display:block; overflow:hidden; width:12.54vw; height:12.54vw; border-radius:2.67vw; isolation:isolate;}
.mn-category .cont ul li .img img {width:100%; height:100%; object-fit:cover;}
.mn-category .cont ul li .title {overflow:hidden; height:30px; margin-top:5px; font-size:11px; color:#222; text-align:center; word-break:break-all; line-height:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-all;}
.mn-category .cont ul li.new:before {display:inline-block; content:""; position:absolute; top:-2px; right:-2px; z-index:1; width:20px; height:20px; background:url('../images/ico_new.png') no-repeat 0 0 /100% auto;}
.mn-category ~ .mn-category .cont .ui-scroll {padding:20px 0 50px;}

.mn-linebanner {padding:0 0 10px;}
.mn-linebanner .cont .swiper-slide {overflow:hidden; width:89.33vw;}
.mn-linebanner .cont .swiper-slide .cm-media {height:10.13vw;}
.mn-linebanner .cont .swiper-slide .title {display:block; overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%; padding:0 13.3vw; font-size:12px; color:#fff; white-space:nowrap; box-sizing:border-box; line-height:10.13vw; text-overflow:ellipsis; text-align:left;}
.mn-linebanner .cont .swiper-slide .title strong {font-weight:bold; font-family:'PretendardBold','Microsoft YaHei';}
.mn-linebanner .cont .swiper-slide:first-child:nth-last-child(1) {width:100vw;}

.mn-sale .cont ul {display:grid; grid-template-rows:repeat(2, auto); gap:0; justify-content:start; grid-auto-flow:column; width:100%; box-sizing:border-box;}
.mn-sale .cont ul li {width:137px; margin-left:10px;}
.mn-sale .cont ul li:nth-child(even) {margin-top:20px;}
.mn-sale .cont ul li:nth-child(-n+2) {margin-left:0;}
.sale-block {position:relative; background:rgba(224,224,224,0.2);}
.sale-block .view {position:relative;}
.sale-block .view .tag-area {position:absolute; top:0; left:0; z-index:1;}
.sale-block .view .cm-media {height:137px;}
.sale-block .info {width:calc(100% - 10px); padding:9px 10px 0; background:#fff; box-sizing:border-box;}
.sale-block .info .title {overflow:hidden; margin-bottom:5px; font-size:13px; font-weight:bold; color:#222; line-height:16px; white-space:nowrap; text-overflow:ellipsis;}

.mn-today .mn-headline {padding:40px 20px; background:#C5B9AC;}
.mn-today .mn-headline .title {margin-right:9px; color:#fff;}
.mn-today .mn-headline .utill .btn-all span {color:#EEEEEE;}
.mn-today .mn-headline:has(.time-area) {padding-top:34px;}
.mn-today .mn-headline:has(.time-area) .title {flex:none; margin-top:6px;}
.mn-today .mn-headline .time-area {margin-top:6px;}
.mn-today .cont {margin-top:-20px;}
.mn-today:after {display:block; content:""; clear:both;}

.mn-exhib .cont ul li + li {margin-left:10px;}
.exhib-block {display:inline-block; position:relative; width:100%; max-width:162px; vertical-align:top; font-size:0;}
.exhib-block .view {position:relative;}
.exhib-block .view .cm-media {width:162px; height:224px;}
.exhib-block .view .tag-area {position:absolute; bottom:-10px; left:0;}
.exhib-block .info {padding-top:20px;}
.exhib-block .info .brand {overflow:hidden; font-size:14px; font-weight:bold; font-family:'PretendardBold','Microsoft YaHei'; line-height:16px; color:#222; white-space:nowrap; text-overflow:ellipsis;}
.exhib-block .info .text {overflow:hidden; width:100%; margin-top:5px; font-size:12px; line-height:16px; color:#777; white-space:nowrap; text-overflow:ellipsis;}

.mn-hotsale .mn-headline {padding:40px 20px 60px; background:linear-gradient(104deg, #DE3831 23.27%, #FB9156 98.39%);}
.mn-hotsale .mn-headline .title {margin-right:9px; color:#fff;}
.mn-hotsale .mn-headline .utill .btn-all span {color:#EEEEEE;}
.mn-hotsale .cont {margin-top:-40px;}
.mn-hotsale:after {display:block; content:""; clear:both;}

.mn-special .cont {padding:0 20px;}
.mn-special .banner-block .cm-media {height:26.67vw;}
.mn-special .banner-block .info {padding:0 20px 20px;}
.mn-special .banner-block .info p {font-size:14px; line-height:19px;}
.mn-special .banner-block + .product-board {margin-top:20px;}

.mn-brand .cont {padding-left:20px;}
.mn-brand .swiper-slide {width:86.93vw;}
.mn-brand .swiper-slide:only-child {width:100%; padding-right:20px; box-sizing:border-box;}
.mn-brand .banner-block .info {padding:0 20px 40px;}
.mn-brand .banner-block .info p {font-size:14px; line-height:16px; transition:none; opacity:1; transform:none;}
.mn-brand .banner-block .info p.brand {display:inline-block; margin-top:5px; padding-right:13px; background:url('../images/ico_arrow08.png') no-repeat right center /5px auto; font-size:11px; font-weight:normal; line-height:14px;}
.mn-brand .swiper-slide .product-board.variable {margin-top:-20px; padding:0 10px;}

/* 2024-01-03 : CN몰 개선(목록/검색) */
/* [참고] SUB쪽 상품모듈이 기존 메인 상품모듈과 상이하여 일부 내용은 MAIN 전용으로 수정 */
.main .product-board:has(.product-block.type2) {--order:1;}
.main .product-board:has(.product-block.type2) > ul > li {height:auto;}
.main .product-block.type2 {display:flex; max-width:100%;}
.main .product-block.type2 .view {width:120px;}
.main .product-block.type2 .view .cm-media:before {display:none;}
.main .product-block.type2 .info {flex:1; align-content:flex-start; min-width:0; min-height:126px; padding-top:0; padding-left:10px;}
.main .product-block.type2 .info .top {margin-bottom:5px;}
.main .product-block.type2 .info .name {display:block; -webkit-line-clamp:1; height:auto; white-space:nowrap;}
.main .product-block.type2 .info .price-area {margin-top:5px;}
.main .product-block.type2 .info .tag-area.stock {margin-top:2px;}
.main .product-block.type3 .info {display:block; min-height:140px;}
.main .product-block.type3 .info .top {margin-bottom:5px;}
.main .product-block.type3 .info .price-area {margin-top:5px;}
.main .swiper-slide .product-block.st1 {max-width:100%;}
.main .mn-ranking .product-block.type3 .info {min-height:110px;} /* 2024-06-14 : 메인 랭킹 상품모듈 여백 수정 */

/* 2024-03-27 : 공통 상품 태그 변경에 따른 이전 클래스 복원 */
.tag-area .tag.type4.local  {background:#ff5d02; color:#FFF2EB;} /* 중국배송 */
.tag-area .tag.type4.super {background:#DE3831; color:#fff;} /* 초특가 */
.tag-area .tag.type4.special {background:#FCE0DF; color:#DE3831;} /* 특가 */
.tag-area .tag.type4.gift {background:#FFF2EB; color:#EC7A38;} /* 사은품 */
.tag-area .tag.type4.new {background:#EBF3FF; color:#3D8AFF;} /* 신상품 */
.tag-area .tag.type4.only {background:#DBB577; color:#fff;} /* 온리신라 */
.tag-area .tag.type4.day  {background:#3D8AFF; color:#fff;} /* 당일구매(3시간/5시간) */
.tag-area .tag.type4.income, /* 병행수입 */
.tag-area .tag.type4.direct, /* 직매입 */
.tag-area .tag.type4.flat, /* 균일가 */
.tag-area .tag.type4.ad {background:#6D6D6D; color:#fff;} /* 광고 */
.tag-area .tag.type4.online {background:#FCF6F0; color:#BA8236;} /* 온라인 */
.tag-area .tag.type4.out {background:#444444; color:#fff;} /* 일시품절 */

/* 2024-06-11 : 메인 ASIS 토스트 팝업 마크업 대응 */
[data-toast] {display:none; position: fixed; top: 0; left: 0; z-index: 125; width: 100%; height: 100%;}
[data-toast] > div {display: flex; justify-content: center; -webkit-justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center;}
[data-toast] > div span{display:inline-block; position: relative; width:89.3vw; border-radius:0.5vw; background-color: rgba(0, 0, 0, 0.8); font-size:14px; color:#fff; line-height: 1.2; padding:12px 20px; overflow:hidden;box-sizing:border-box}
[data-toast] > div span > a{display:block; padding-top:5px; color:#999; font-size:11px;}
[data-toast] > div span > a .link {display:inline-block; padding-right:8px; background:url('../img/v2/ico_arrow_link.png') no-repeat 100% 50%; background-size:3.5px auto; border-bottom:1px solid #999;}

/* 2024-06-13 : 메인 가로스크롤 상품모듈 이미지 사이즈 고정 */
.product-board ul.ui-scroll .product-block {min-width:162px;}