/* BASIC css start */
/* [모바일 최종] 이미지 노출 보장 스크롤 애니메이션 */

/* 1. 초기 상태: !important를 제거하여 자바스크립트가 작동하기 전 이미지 실종 방지 */
.cateTit, .notice, .cs, 
.visual-wrapper, .link_connect li, 
.item-list, .product_item, .brand-box .brand {
    opacity: 0;
    transform: translateY(30px); /* 모바일은 30px이 가장 적당함 */
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.6s ease-out;
    visibility: visible !important;
}

/* 2. 실행 상태: 클래스가 붙으면 확실하게 노출 (여기에 !important 배치) */
html body .active-ani {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 3. 모바일 링크 커넥트 아이콘 보호 */
.link_connect .icon {
    display: block !important;
    visibility: visible !important;
}

/* 4. 메인 비주얼 커스텀 프로그레스바 위치 보정 */
.main-container .swiper-pagination-bar {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important; 
    z-index: 50 !important;
}

.main-container .swiper-pagination-bullet {
    flex: 1 !important;
    height: 3px !important;
    background: #666666 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
}
.main-container .swiper-pagination-bullet-active {
    background: #f2f2f2 !important;
}

/* 터치 지원 기기를 위한 모바일 Hover 효과 대응 (:active 속성 결합) */
.link_connect > ul > li a:hover .icon,
.link_connect > ul > li a:active .icon {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #b9b9b9;
}

#mainSpot,
#mainSpot .swiper-wrapper,
#mainSpot .swiper-slide,
.hotdeal-box .swiper-wrapper,
.hotdeal-box .swiper-slide,
.brand-box .swiper-wrapper,
.brand-box .swiper-slide {
  height: auto !important;
}

.header-main { display:block !important; }
#header .header_fd { border: 0 !important; }
.product_list_wrap.list_st3 .product_item .desc_container .info .pname a { font-size:12px; }
.item-wrap .item-cont .item-brand .item-list { display:flex; align-items:center; gap:14px; }
.brand-prd .item-wrap .item-cont { display:block; width:100%; border-top:1px solid #e5e8eb; }
.brand-prd .item-wrap,
.brand-prd .product-wrap { width:100%; }
.hotdeal-box { overflow:hidden; }
.hotdeal-box .swiper-slide { flex-shrink: 0; }
.main .swiper-pagination-hotdeal { text-align:center; }
.main .swiper-pagination-clickable .swiper-pagination-bullet { margin:0 5px !important; background:#e5e8eb !important; opacity:1 !important; }
.main .swiper-pagination-clickable .swiper-pagination-bullet-active { background:#222 !important; }

.brand-prd .item-wrap .item-cont .item-brand { padding:16px 0; border-bottom:1px solid #e5e8eb; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .thumb { border-radius:6px; flex: 0 0 80px; width:80px; margin-bottom:0; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .thumb img { border-radius:6px; width:100%; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .prd-info { flex: 1; min-width: 0; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .prd-info .prd-name { text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.brand-prd .item-wrap .item-cont .item-brand .item-list .prd-info .prd-name a { font-size:13px; line-height:140%; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .prd-info .prd-price { margin:5px 0 12px; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .preview-box { flex: 0 0 63px; text-align:center; flex-shrink: 0; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .preview-box .preview { position:relative; display:block; width:30px; height:30px; line-height:26px; border-radius:100px; border:1px solid #e2e4e6; text-align:center; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .preview-box .preview img { width:20px; }

.footer-banner { width:100%; overflow: hidden;margin:50px auto; background:#f7f7f7; padding:10px 0; }
.footer-banner .loop-banner { display: flex; padding:10px 0; width: max-content;  animation-timing-function: linear; animation-iteration-count: infinite; }
.footer-banner .loop-banner li { flex-shrink: 0; padding:0 15px; text-align:center; }

.brand-box { padding:0 20px; position:relative; width:100%; box-sizing:border-box; }
.brand-box .brand-scroll { overflow: visible !important;}
.brand-box .brand-wrapper .brand .img img { width:100%; }
.brand-box .brand-wrapper .brand .text {  box-sizing:border-box; position:relative; }
.brand-box .brand-wrapper .brand .text .title p { padding:20px 0 20px 10px; font-size:15px; font-weight:600; line-height:140%; color:#333d4b; }
.brand-box .brand-wrapper .brand .text .title a { position:absolute; right:0; top:28px; }
.brand-box .brand-scroll .swiper-pagination { bottom:-35px; }

.bt-box { width:100%; margin:0 auto; display:grid; gap:15px; padding:0 20px; box-sizing:border-box; }
.bt-box > div { width:100%; padding:20px; box-sizing:border-box; border:1px solid #e5e8eb; border-radius:8px; }
.bt-box > div .title { font-size:16px; letter-spacing:-0.2px; line-height:150%; font-family: 'GmarketSans', sans-serif !important; margin-bottom:18px; }
.bt-box .notice .list {}
.bt-box .notice .list li { display:flex; align-items: center; font-size:12px; line-height:140%; margin-bottom:10px; }
.bt-box .notice .list li:last-child { margin-bottom:0; }
.bt-box .notice .list li a { font-size:12px; line-height:150%; letter-spacing:1.2px; }
.bt-box .notice .list li span { color:#8b95a1; margin-left: auto; }
.bt-box .notice .title { position:relative; }
.bt-box .notice .title .more-notice { display:block; position:absolute; padding-left:10px; right:0; top:0; }

.bt-box .cs .cs-btn { display:grid; gap:8px; margin-bottom:20px; }

.bt-box .cs .cs-btn a { width:100%; height:48px; border-radius:3.5px; text-align:center; line-height:48px; box-sizing:border-box; border:1px solid #d1d6db; font-size:14px; font-weight:500; }
.bt-box .cs .cs-btn a.kakao { background-color:#eedd44; background-image:url('/design/mpmall2025/Img/icon_kakao.png'); border-color:#eedd44; color: #412929;
    background-repeat: no-repeat;
    background-position: 95px 17px;
    padding-left: 120px;
    text-align: left;
}
.bt-box .cs .list li { font-size:13px; line-height:150%; letter-spacing:0.2px; color:#6b7684; padding-left:27px; margin-bottom:7px; }
.bt-box .cs .list li.num { background:url('/design/mpmall2025/Img/icon_call.png') 0 2px no-repeat; font-size:16px; font-weight:700; letter-spacing:0.2px; color:#333d4b; }
.bt-box .cs .list li.mail { background:url('/design/mpmall2025/Img/icon_mail.png') 0 0 no-repeat; }
.bt-box .cs .list li.time { background:url('/design/mpmall2025/Img/icon_clock.png') 0 0 no-repeat; }

.service-wrap { width:100%; margin:0 auto; padding:0 13px; box-sizing:border-box; }
.service-wrap .service-box { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.service-wrap .service-box .con {width:50%;}
.service-wrap .service-box .con .img img { width:100%; border-radius:6px 6px 0 0;}
.service-wrap .service-box .con .txt { 
    height:70px;
    background:#f2f4f6;
    border-radius:0px 0px 10px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.service-wrap .service-box .con .txt p { width:100%; line-height:150%; font-size:11px; padding:0 5px; text-overflow:ellipsis;overflow:hidden;white-space:nowrap; }
.service-wrap .service-box .con .txt p.strong { font-size:13px; font-weight:600; }

.btn-more { width:100%; text-align:center; margin:10px auto 50px; }
.btn-more > a { margin:0 auto; display:block; width:130px; height:38px; line-height:38px; border:1px solid #e5e8eb; border-radius:100px; color:#1c1c1c; font-size:12px;
background:url('/design/mpmall2025/Img/btn_more.png') no-repeat; background-position:81px; }

.link_connect { width:100%; padding-top: 20px; padding-bottom: 40px; box-sizing:border-box;  margin:0 auto; }
.link_connect > ul { display:flex; flex-flow: row wrap;justify-content: center; gap: 25px; }
.link_connect > ul > li { text-align:center; }
.link_connect > ul > li:last-child { }

.link_connect > ul > li > a { display:block; width:100%; margin:0 auto; font-weight:500; color:#222; }
.link_connect > ul.first > li > a {margin-bottom:26px; }
.link_connect > ul > li > a .tit { margin-top:12px; font-size: 14px; text-align: center; }
.link_connect > ul > li.mileage a { width:57px; }
.link_connect > ul > li .icon { display:block; width:70px; height:70px; background-color:#f6f8fc; border-radius:16px; background-repeat:no-repeat; }
.link_connect > ul > li.hotdeal .icon { background-image: url('/design/mpmall2025/Img/link_hotdeal.png'); background-position: 7px; }
.link_connect > ul > li.mileage .icon { background-image: url('/design/mpmall2025/Img/link_m.png'); background-position: 11px; }
.link_connect > ul > li.sample .icon { background-image: url('/design/mpmall2025/Img/link_sample.png'); background-position: 11px; }
.link_connect > ul > li.delivery .icon { background-image: url('/design/mpmall2025/Img/link_delivery.png'); background-position: 12px; }
.link_connect > ul > li.golf .icon { background-image: url('/design/mpmall2025/Img/link_golf.png'); background-position: 11px; }
.link_connect > ul > li.interior .icon { background-image: url('/design/mpmall2025/Img/link_interior.png'); background-position: 11px; }
.link_connect > ul > li.ballvic .icon { background-image: url('/design/mpmall2025/mobile/img/link_ballvic_m.png'); background-position: center; }
.link_connect > ul > li.recellby .icon { background-image: url('/design/mpmall2025/Img/link_recellby_m.png'); background-position: center; }
.link_connect > ul > li.ss .icon { background-image: url('/design/mpmall2025/mobile/img/link_ss_m.png'); background-position: center; }
.link_connect > ul > li.lg .icon { background-image: url('/design/mpmall2025/mobile/img/link_lg_m.png'); background-position: center; }
.link_connect > ul > li.event .icon { background-image: url('/design/mpmall2025/Img/link_event_2.png'); background-position: center; }

.best-tab-menu { width:100%; margin:0 auto; }
.best-tab-menu ul.tabs { display:flex; flex-flow: row wrap; gap: 8px; justify-content: center; margin-bottom:20px; }
.best-tab-menu ul.tabs li { width:94px; cursor:pointer; color:#1c1c1c; font-size:12px; font-weight:400; height:29px; line-height:29px; text-align:center; box-sizing:border-box; border-radius:4px; background:#fff; border:1px solid #e5e8eb; }
.best-tab-menu ul.tabs li.active { border-color:#222; background:#222; color:#fff; font-weight:600; }

.best-tab-menu .tab-content .content { display: none; }
.best-tab-menu .tab-content .content.active { display: block; }

.mid-wrapper { margin:20px 0 10px; width:100%; overflow:hidden; position:relative; }
.mid-visual .swiper-slide {  width: 100%; }
.mid-wrapper img { width:100%; }

/* 롤링배너 */
#mainSpot { position:relative; width:100%; overflow:hidden; }
#mainSpot img{ width: 100%;}
#mainSpot .swiper-pagination{ top: auto; bottom: 24px; left: 50%; transform: translateX(-50%); width: 55%; height: 2px;}
#mainSpot .pagination-area { position:absolute; bottom:10px; width:100%; padding:0 20px; box-sizing:border-box; margin:0 auto; display:flex; gap:30px; align-items: center; z-index:50; }
#mainSpot .slide-counter { z-index: 10; font-weight:500; font-size: 12px; white-space: nowrap; }

#mainSpot .swiper-button-box { display:flex; z-index: 10; width:43px;flex: 0 0 43px; overflow: hidden;  }
#mainSpot .swiper-pagination-progressbar { position:relative; }
#mainSpot .button-next,
#mainSpot .button-prev { width: 20px; height: 12px; cursor: pointer; }
#mainSpot .button-prev { background:url('/design/mpmall2025/mobile/img/slide_arrow_prev.png') no-repeat;}
#mainSpot .button-next { background:url('/design/mpmall2025/mobile/img/slide_arrow_next.png') 13px no-repeat; margin-left:auto; }

/* 상품 */
.procont{ margin: 30px 0 0; }
.procont .items li a img{ width: 100%; border-radius: 8px;}
.procont .items .slick-list{ padding-left: 62px;}
.procont .items .slick-slide{padding-right: 15px;}
.procont .items .slick-slide:nth-of-type(1){ margin-left: -48px;}

.cateTit{ padding: 50px 0 20px; text-align:center; }
.cateTit h2 { font-size:20px; color:#222; font-weight:600;}
.shop_info{ margin: 11px 0 0;}
.prd-brnd{ margin: 0 0 2px; color: #757575;}
.listName{ margin: 0 0 10px;}

.prd-price .dc_per{ font-weight:700; color: #9b40a9; font-size: 14px;}
.prd-price .price{ font-size: 14px; font-weight:600; }
.prd-price strike { color: #8b95a1; font-size: 14px;}

/* 띠배너 */
.longbnnr{margin: 40px 0 0;}

/* 이미지배너 */
.imgBanner{ margin: 40px 15px 0;}
.imgBanner div{ margin: 0 0 15px;}
.imgBanner img{ width: 100%;}

/* 탭상품 */
.tab_swip{width: 100%; margin-bottom: 7px; overflow: hidden;}
.tab_swip .tab:after{content:''; display:block; clear:both}
.tab_swip .tab div{float: left; width: initial !important; height: auto; padding: 10px 20px;}
.tab_swip .tab div.live{}
.tab_swip .tab div.live span{border-bottom: 2px solid #000; color:#000}
.tab_swip .tab div span{ padding: 2px 0; color: #757575; font-size: 1rem; font-family: 'Noto Sans KR', sans-serif;}
.intabarea {display:none}
.intabarea.active{display:block}

.tabarea {margin-top:40px}
.tabarea .list_shopping2x ul.items{padding: 0 15px;}
.tabarea .list_shopping2x ul.items:after{content:''; display:block; clear:both}
.tabarea .list_shopping2x ul.items li{ width: 100%; border: 1px solid #efefef; border-radius: 10px; margin: 0 0 10px;}
.tabarea .list_shopping2x ul.items li a{padding-bottom: 0; }
.tabarea .list_shopping2x ul.items li a > div{ position: relative; padding: 15px;}
.tabarea .list_shopping2x ul.items li a > div:after{content:''; display:block; clear:both}
.tabarea .list_shopping2x ul.items li a .thumb{float: left; width: 40%; }
.tabarea .list_shopping2x ul.items li a .thumb img{border-radius: 10px;}
.tabarea .list_shopping2x ul.items li a div .list_shoppingInfo{ float: right; width: 54%; margin-top: 0; }
.tabarea .list_shopping2x ul.items li a div .list_shoppingInfo .shop_info{ text-align: left;}
.tabarea .list_shopping2x ul.items li a div .list_shoppingInfo .shop_info .prd-brnd{ margin: 0 0 4px; font-size: 13px;}
.tabarea .list_shopping2x ul.items li a div .list_shoppingInfo .shop_info .listName{ font-size: 14px; }
.tabarea .list_shopping2x ul.items li a div .list_shoppingInfo .shop_info .prd-price{ position: absolute; bottom: 25px;}

/* 더보기 */
.more{margin: 10px 0 0;}
.more a{display: block; margin: 0 15px;}

/* 인스타영역 */
.insta_area{ padding: 40px 15px 60px;}
.insta_area .sectionTit{margin:0 0 10px}
.insta_area .sectionTit:after{content:''; display:block; clear:both}
.insta_area .sectionTit h2{ float: left; font-size: 1.2rem; font-family: 'Noto Sans KR', sans-serif; font-weight: 500;}
.insta_area .sectionTit h2 img{ width: 22px; margin: 0 4px 0 0; vertical-align: sub;}
.insta_area .sectionTit p{ float:right; margin: 2px 0 0; color:#ccc; font-size: .8rem; font-family: 'Noto Sans KR', sans-serif;}
.insta_area .sectionTit div i img{ width: 100%;}

/*쿠폰 혜택 버튼*/
.main .coupon-benefit {position:relative; margin:-25px 0 10px 0} 
.main .btn-coupon { display:inline-block; height:16px; padding:0; margin-left:5px; border:1px solid #000; font-size:10px;}
.main .btn-coupon span { display:inline-block; height:16px; padding:0 5px; color:#fff; background:#000; vertical-align:top; font-size:11px; }
.main .btn-coupon em { display:inline-block; height:16px; padding:0 3px 0 0; font-size:10px; vertical-align:top; color:#000; }

/* 메인 배너 숫자 카운터 및 화살표 버튼 강제 숨김 처리 (PC 버전과 동일화) */
#mainSpot .slide-counter,
#mainSpot .swiper-button-next,
#mainSpot .swiper-button-prev,
#mainSpot .button-next,
#mainSpot .button-prev,
#mainSpot .swiper-button-box {
    display: none !important;
}



/* 1. 회색 배경 섹션 - [수정] 상단 padding을 40px에서 30px로 10px 감축 */
.bg-gray-area {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background-color: #f8f9fa !important;
    margin: 40px 0 !important;
    padding: 30px 0 40px 0 !important; /* 위쪽만 30px로 줄여 인기상품 여백 조정 */
    display: block !important;
    overflow: hidden !important;
}

/* 2~3. 리스트 및 개별 카드 설정 유지 */
.bg-gray-area .product_list_wrap {
    display: block !important;
    padding: 0 !important; 
    text-align: center !important;
}

.bg-gray-area .product_item {
    display: inline-block !important;
    vertical-align: top !important;
    width: 49% !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    margin: 0 0.4% 10px 0.4% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    min-height: 350px !important; 
}

/* 4. 이미지 영역 (유지) */
.bg-gray-area .product_item figure {
    padding: 12px 10px 0 10px !important;
    margin: 0 !important;
}

/* 5. 텍스트 컨테이너 */
.bg-gray-area .desc_container {
    text-align: left !important;
    padding: 0 10px !important;
}

/* 6. 상품명 (상단 밀착 유지) */
.bg-gray-area .pname {
    margin: 0 !important;
    padding: 0 !important;
}

.bg-gray-area .pname a {
    display: block !important;
    padding-top: 0px !important; 
    /* [조정] 가격을 조금 내리기 위해 하단 여백을 8px에서 12px로 살짝 상향 */
    padding-bottom: 12px !important; 
}

/* 7. 가격 - [수정] 너무 붙지 않게 조금 아래로 이동 */
.bg-gray-area .listPrice {
    display: block !important;
    text-align: left !important;
    /* [조정] 음수 마진을 없애고 정상 위치로 복귀하여 미세하게 내림 */
    margin-top: 0px !important; 
    padding-bottom: 0 !important; 
}

/* 슬라이드 추가 버전 css */
/* 1. 컨테이너: 양옆 슬라이드가 삐져나와 보이도록 문을 열어둠 */
.brand-box .brand-scroll.swiper-container {
    overflow: visible !important;
}

/* 2. 부모 박스: 슬라이드가 화면 밖으로 넘어가서 가로 스크롤이 생기는 것 방지 */
.brand-box {
    overflow: hidden !important;
    position: relative;
    width: 100%;
}

/* 3. 래퍼: 자바스크립트 좌표 계산 오차를 줄이기 위해 여백 초기화 */
.brand-box .brand-wrapper.swiper-wrapper {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    height: auto !important;
}

/* 4. 개별 슬라이드: 너비를 85%로 고정하여 양옆에 7.5%씩 여유 공간 확보 */
.brand-box .swiper-slide.brand {
    box-sizing: border-box;
    transition: transform 0.5s, opacity 0.5s;
}

/* 6. 텍스트 영역: 기존 디자인 수치 유지 */
.brand-box .brand-wrapper .brand .text .title p {
    padding: 20px 0 20px 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 140%;
    color: #333d4b;
    text-align: left;
}
/* 단독 최저가(hotdeal-box) 2단 배열 유지 + 박스 높이 고정 */

/* 1. 슬라이드 하나 안에 상품 2개씩 배치되도록 유도 (원래 구조 복구) */
.hotdeal-box .swiper-slide {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    height: auto !important;
}

/* 2. 상품 카드 너비를 다시 49%로 조정 (그래야 한 줄에 2개씩 나옴) */
.hotdeal-box .product_item {
    width: 49% !important; /* 다시 2단으로 복구 */
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    margin-bottom: 10px !important; /* 위아래 간격 */
    overflow: hidden !important;
}

/* 3. 내부 레이아웃 설정 */
.hotdeal-box .product_item figure {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 12px 10px !important;
    margin: 0 !important;
}

/* 4. [핵심] 상품명 높이 고정 (박스 사이즈 통일) */
.hotdeal-box .pname a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* 최대 2줄 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    height: 2.8em !important; /* 2줄 높이 강제 확보 */
    line-height: 1.4 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    white-space: normal !important;
    color: #222 !important;
}

/* 5. 텍스트 컨테이너 정렬 */
.hotdeal-box .desc_container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* 6. 가격 정보 하단 고정 */
.hotdeal-box .listPrice {
    margin-top: auto !important;
    padding-bottom: 5px !important;
    text-align: left !important;
}
/* BASIC css end */