/* BASIC css start */
/* 상단 */
body #commonNavi {border-bottom:none;}
body #commonNavi .logo {display: none;}
body #commonNavi .header_logo .symbol {display: block; width: 25px; height: 50px; line-height: 50px; padding: 0; margin: 0 auto;}
body #commonNavi.headerFixed .symbol { display: none !important; }
body #commonNavi.headerFixed .logo { display: block !important; }
body #commonNavi.headerFixed { border-bottom: 1px solid var(--gray-09); }
body #commonNavi .header_logo .back_btn {display:none;}
body #commonNavi .header_logo .inform {display:block;}


/* 상품 정보 */
.items .productInfo { padding: 10px 5px 0 0; }
.items .productInfo .listCode .styleCode { width: 65%; }
.items .productInfo .listName { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all !important; }
.items .productInfo .listDiscount { display: none; }


/* 1단3열슬라이드 */
.row1 .items { padding: var(--defalt-padding); gap: 0 20px; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: 94%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.row1 .items li { padding: 12px 0; border-bottom: 1px solid var(--gray-09); }
.row1 .items li:nth-child(3n) { border-bottom: 0 !important; }
.row1 .items li:nth-child(3n+1) { padding-top: 0 !important; }

.row1 .items li figure > a { width: 67%; }
.row1 .items .productInfo .listName {-webkit-line-clamp: 1;}


/* 2단4단배열 */
.productArea .items { display: flex; gap: 24px 10px; width: auto; padding: var(--defalt-padding); grid-template-columns: auto; grid-auto-flow: column; grid-template-rows: auto auto; overflow: auto hidden; overscroll-behavior: contain auto; scrollbar-width: none; }
.productArea .items li { min-width: calc(-20px + 45.6667vw); max-width: calc(-20px + 45.6667vw); }


@media screen and ( min-width: 601px ) {
    .productArea .items li { min-width: calc(-20px + 270px); max-width: calc(-20px + 270px); }
}


/* 메인배너 */
.main_slide { padding-top: 5px; }
.main_slide .swiper-slide { width: 90%; margin: 0 -1%; transform: scale(.9); transition: transform .3s linear; }
.main_slide .swiper-slide.swiper-slide-active { transform: scale(1); }
.main_slide .swiper-slide.transition-none { transform: scale(1); transition: none; }
.main_slide .swiper-slide .img { position: relative; border-radius: 14px; overflow: hidden; }
.main_slide .swiper-slide .img:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 57%; background: linear-gradient(360deg, var(--pri-black), transparent); opacity: .4; }
.main_slide .swiper-slide .mv { position: relative; border-radius: 14px; overflow: hidden; display: flex; justify-content: center; align-items: center; aspect-ratio: 67 / 80; }
.main_slide .swiper-slide .mv video { max-width: 100%; object-fit: cover; }
.main_slide .swiper-slide.img_hide { display: none !important; }
.main_slide .swiper-pagination { width: auto; border-radius: 50px!important; right: 8%; left:inherit; bottom: 3%; padding: 4px 8px; background: rgba(34,34,34,.5); font-size: 10px; color: var(--gray-95); }
.main_slide .swiper-pagination .swiper-pagination-current { color: var(--pri-white); font-weight: 500; }

.main_slide .txt_box{ color: var(--pri-white); position: absolute; bottom: 12%; left: 10%; }
.main_slide .txt_box .tag { padding-bottom: 5px; }
.main_slide .txt_box .tag img { width: auto; height: 22px; }
.main_slide .txt_box .cate { font-size:13px; font-weight:500; margin-bottom:8px; }
.main_slide .txt_box .tit { font-size: 28px; font-weight: bold; line-height: 34px; letter-spacing: -1px; }
.main_slide .txt_box .des { font-size: 14px; margin-top: 12px; }


/* 메인배너_프로모션사용 */
.imgnone:before { display: none!important; }


/* 서브 배너 */
.sub_banner { display: flex; gap: 8px; padding: var(--defalt-padding); padding-top:16px; }
.sub_banner a { position: relative; width: 25%; border-radius:12px; overflow:hidden; }
.sub_banner a span { position: absolute; bottom: 7px; left: 0; width: 100%; text-align: center; font-size: 10px; font-weight: 600; }
.sub_banner .fcWh { color: var(--pri-white); }


/* 기획전 배너 */
.event_banner { padding: 16px 0 50px 0 !important; text-align: center; }
.event_banner .list { padding: var(--defalt-padding); display: flex; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.event_banner .list:first-child { padding-bottom: 5px; }
.event_banner .list::-webkit-scrollbar { display: none; }
.event_banner .list a { display: flex; align-items: center; justify-content: center; padding: 3px 20px 3px 18px; margin-left: 5px; border: 1px solid var(--gray-09); border-radius: 30px; }
.event_banner .list a:first-child { margin-left: 0 !important; }
.event_banner .list a img { width: 30px; height: 30px; border-radius: 30px; }
.event_banner .list a p { padding: 0 8px; font-size: 15px; font-weight: 500; }
.event_banner .list a.new_point{border:1px solid var(--pri-brand); color: var(--pri-brand);}


/* 이벤트 배너 */
.middle_banner { margin-bottom: 70px !important; padding-bottom: 30px; padding-top: 15px; }
.middle_banner .swiper-pagination-bullet { background: var(--gray-02); width: 15px; height: 2px; margin: 0 !important; border-radius: 0; opacity: 1; }
.middle_banner .swiper-pagination-bullet-active { background: var(--pri-black); }


/* 추천컬렉션 */
.collecArea .collec_slide { padding: 0 20px; }
.collecArea .collec_slide .swiper-slide a:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(360deg, #000000, transparent); opacity: .7; }
.collecArea .collec_slide .swiper-slide p { position: absolute; bottom: 9%; left: 0; width: 100%; color: #fff; font-size: 20px; font-weight: 600; text-align: center; }


/* 컬렉션배너 */
.collection_banner { margin-bottom: 70px !important; padding-bottom: 30px; padding-top: 15px; }
.collection_banner .swiper-slide { position: relative; background-size: cover; background-position-x: 22%; background-repeat: no-repeat; }
.collection_banner .swiper-slide a { display: block; padding-bottom: 19%; }
.collection_banner .swiper-pagination-bullet { background: var(--gray-02); width: 15px; height: 2px; margin: 0 !important; border-radius: 0; opacity: 1; }
.collection_banner .swiper-pagination-bullet-active { background: var(--pri-black); }


/* 탭 슬라이드 */
.tabArea { position: relative; }
.tabArea .tab_menu { padding: var(--defalt-padding); padding-bottom:16px; }
.tabArea .tab_menu .swiper-slide { display: inline-table; width: auto; padding-right: 5px; }
.tabArea .tab_menu .swiper-slide > span { display: block; padding: 7px 14px; border: 1px solid var(--gray-20); border-radius: 50px; line-height: 15px; font-size: 14px; cursor: pointer; color: var(--gray-00); }
.tabArea .tab_menu .swiper-slide.swiper-slide-thumb-active > span { background: var(--pri-black); color: var(--pri-white); border: 1px solid var(--pri-black); }
.tabArea .tab_list .swiper-slide { background: var(--pri-white); }


/* 실시간급상승 */
.realtime_slide .swiper-wrapper { transition-timing-function: linear; }
.realtime_slide .swiper-slide { width: 35%; }
.realtime_slide .items .productInfo { padding: 10px 4px 0 4px; }
.realtime_slide .items .productInfo .listName { line-height: 18px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.5px; }


/* 썸머 기획전 */
.swim_slide { padding: 0 22px 0 20px; }
.swim_slide.swiper-grid-column > .swiper-wrapper { flex-direction: row; }
.swim_slide .swiper-slide .guide_bn { position: relative; display: block; margin-bottom: 5px; }
.swim_slide .swiper-slide .guide_bn p { position: absolute; top: 35px; left: 25px; font-size: 14px; line-height: 18px; color: var(--black-05); }
.swim_slide .swiper-slide .guide_bn p b { display: block; font-size: 26px; line-height: 32px; padding-bottom: 10px; }
.swim_slide ul:last-child {display:none;}
.row2 .swim_slide .items .swiper-slide li { padding: 12px 0; border-bottom: 1px solid var(--gray-09); opacity: 0; transition: opacity 0.5s; }
.row2 .swim_slide .items .swiper-slide li:last-child { border-bottom: 0; }
.row2 .swim_slide .items .swiper-slide.swiper-slide-active li { opacity: 1; }
.row2 .swim_slide .items .productThumb { width: 28%; }
.swim_slide .items .productInfo { width: 72%; }
.swim_slide .items .productInfo .listName { font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.5px; }


/* 아울렛 */
.outletArea .cols3 { padding: var(--defalt-padding) !important; }
.outletArea .section-banner { padding: var(--defalt-padding); padding-bottom:20px; }


/* 타임딜 */
.sale_slide .swiper-slide { position: relative; width: 70%; }
.sale_slide .swiper-slide .productInfo { padding: 12px 12px 0 12px; opacity: 0; transition: opacity 0.5s; }
.sale_slide .swiper-slide .productInfo .listName { text-overflow: ellipsis; white-space: nowrap; }
.sale_slide .swiper-slide.swiper-slide-active .productInfo { opacity: 1; }


/* 시즌기획전 */
.planMain {  }
.planMain .plan_title { position: relative; margin: var(--defalt-margin); margin-bottom: 20px; }
.planMain .plan_title:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(360deg, #000000, transparent); opacity: .6; }
.planMain .plan_title p { position: absolute; bottom: 30px; left: 20px; font-size: 16px; color: #fff; }
.planMain .plan_title span { display: block; padding-bottom: 10px; font-size: 26px; font-weight: 600; }
.planMain .items li { min-width: calc(-20px + 32vw); max-width: calc(-20px + 32vw); }
.planMain .items .productInfo .listPrice strike { display: none; }


/* 영상 */
.main_mv { margin-bottom: 64px; padding: 50px 0; text-align: center; background: #000; color: #fff; }
.main_mv video { width: 90%; border-radius: 10px; }
.main_mv iframe { width: 90%; border-radius: 10px; border: 0; }
.main_mv .mv_tit { font-size: 16px; padding-bottom: 20px; letter-spacing: 1.5px; }
.main_mv .mv_tit p { display: block; font-size: 27px; font-weight: 400; margin-top: 20px; letter-spacing: 0px; }
.main_mv .mv_tit p b { font-weight: 700; }
.main_mv .mv_txt { font-size: 15px; padding-top: 15px; color: #ccc; }


/* 할인쿠폰 타이머 */
.countOneDayP { position: relative; padding: 16px 20px 0 20px; }
.countOneDayP .timebox { position: relative; background: var(--pri-black); padding: 12px 15px; overflow: hidden; border-radius: 10px; font-weight: 600; }
.countOneDayP .timebox .titA { color: var(--pri-white); font-size: 14px; }
.countOneDayP .timebox .titA b { font-size: 15px; font-weight: 500; }
.countOneDayP .timebox .titB { position: relative; height: 20px; padding-left: 17px; color: #15d7d2; font-size: 14px; }
.countOneDayP .timebox .titB font { display: none; }
.countOneDayP .timebox .titB:before { content: ""; position: absolute; top: 4px; left: 0; width: 13px; height: 13px; background: url(//xexymix.jpg3.kr/xexymix/main/mobile/2025/timer_icon_250806.png) no-repeat center; background-size: cover; }
.countOneDayP .timebox .titB .txtB { padding-right: 3px; }
.countOneDayP .timebox a { position: absolute; top: 16px; right: 15px; width: 70px; height: 30px; line-height: 30px; background: #15d7d2; color: var(--pri-white); font-size: 13px; text-align: center; border-radius: 5px; }
.countOneDayP .timebox .timeel { display: inline-block; float: left; height: 20px; line-height: 20px; text-align: center; }
.countOneDayP .timebox .hours,
.countOneDayP .timebox .minutes,
.countOneDayP .timebox .seconds { width: 20px; height: 20px; font-size: 15px; font-weight: 500; }
.countOneDayP .timebox .dot { position: relative; width: 3px; }
.countOneDayP .timebox .dot:before,
.countOneDayP .timebox .dot:after { content: ""; position: absolute; width: 1.5px; height: 1.5px; border-radius: 5px; background: #15d7d2; }
.countOneDayP .timebox .dot:before { top: 35%; left: 50%; transform: translateX(-50%); }
.countOneDayP .timebox .dot:after { top: 59%; left: 50%; transform: translateX(-50%); }


/* 할인쿠폰 배너 */
.countCoupon { display: none; position: relative; padding: 16px 20px 0 20px; }
.countCoupon .couponbox { position: relative; background: #070f57; padding: 12px 15px; overflow: hidden; border-radius: 10px; font-weight: 600; }
.countCoupon .couponbox .titA { display: block; color: var(--pri-white); font-size: 14px; line-height: 26px; }
.countCoupon .couponbox .titA b { font-size: 15px; font-weight: 600; }
.countCoupon .couponbox a { position: absolute; top: 10px; right: 15px; width: 70px; height: 30px; line-height: 30px; background: #ea500a; color: var(--pri-white); font-size: 13px; text-align: center; border-radius: 5px; }

/* BASIC css end */