/* BASIC css start */
#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;
}
.item-wrap .item-cont.specroll { gap:0 10px; }

.item-wrap .item-cont .item-brand .item-list { display:flex; align-items:center; gap:20px; }
.brand-prd .item-wrap .item-cont { display:block; width:100%; }
.brand-prd .item-wrap,
.brand-prd .product-wrap { width:100%; }

.brand-prd .item-wrap .item-cont .item-brand { padding:20px 0; border-bottom:1px solid #e5e8eb; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .thumb { border-radius:6px; flex: 0 0 90px; height:90px; margin-bottom:0; }
.brand-prd .item-wrap .item-cont .item-brand .item-list .thumb img { border-radius:6px; }
.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-price { margin:6px 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:36px; height:36px; line-height:35px; border-radius:100px; border:1px solid #e2e4e6; }

.footer-banner { width:100%; overflow: hidden; height:70px; line-height:70px; margin:80px auto; background:#f7f7f7; }
.footer-banner .loop-banner { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: flex; 
    width: max-content; 
    /* animation 관련 속성 삭제 완료 */
}
.footer-banner .loop-banner li { flex-shrink: 0; width: 150px; text-align:center; }
.button-next,
.button-prev { cursor:pointer; }

.bt-box { width:1240px; margin:0 auto; display:flex; gap:20px; }
.bt-box > div { width:610px; height:260px; box-sizing:border-box; border:1px solid #e5e8eb; border-radius:10px; padding:30px; }
.bt-box > div .title { font-size:18px; letter-spacing:-0.2px; line-height:150%; font-family: 'GmarketSans', sans-serif !important; margin-bottom:20px; }
.bt-box .notice .list {}
.bt-box .notice .list li { display:flex; align-items: center; font-size:14px; line-height:150%; margin-bottom:12px; }
.bt-box .notice .list li:last-child { margin-bottom:0; }
.bt-box .notice .list li a { font-size:14px; 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:flex; gap:10px; margin-bottom:25px; }

.bt-box .cs .cs-btn a { width:270px; height:50px; border-radius:4px; text-align:center; line-height:50px; box-sizing:border-box; border:1px solid #d1d6db; font-size:15px; 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: 80px 17px;
    padding-left: 108px;
    text-align: left;
}
.bt-box .cs .list li { font-size:13px; line-height:150%; letter-spacing:0.2px; color:#6b7684; padding-left:32px; margin-bottom:7px; }
.bt-box .cs .list li.num { background:url('/design/mpmall2025/Img/icon_call.png') 0 1px 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 1px no-repeat; }
.bt-box .cs .list li.time { background:url('/design/mpmall2025/Img/icon_clock.png') 0 0 no-repeat; }

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 메인 비쥬얼 배너 */

.visual-wrapper { 
    width: 100%; 
    position: relative; 
    overflow: hidden; /* 페이지 전체 가로 스크롤 방지 */
    margin-bottom:40px;
}

.visual-wrapper .main-visual { 
    width: 100%; 
    max-width: 1240px; /* 슬라이드 기준 너비 */
    margin: 0 auto; 
    position: relative; 
    overflow: visible !important; /* 양옆 슬라이드 노출을 위해 유지 */
}

html body #mainSpot .visual-wrapper .main-visual .swiper-slide { 
    width: 1240px; /* !important 제거 */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: all 0.5s;
}

.visual-wrapper .main-visual .swiper-slide-active { 
    opacity: 1; 
}

.visual-wrapper .main-visual .swiper-slide img { width: 100%; max-width: 100%; height: auto; backface-visibility: hidden; object-fit: cover; object-position: center; }

.visual-wrapper .pagination-area {
    padding-left: 0 !important;
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
    justify-content: center !important; 
}

.visual-wrapper .slide-counter { z-index: 10; font-weight:500; font-size: 12px; white-space: nowrap; }

.visual-wrapper .slide-counter .current { color: #222; }


html body #mainSpot .swiper-pagination-bar {
    display: flex !important; /* 메이크샵 시스템 방어용 */
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 500px !important; /* 다시 고정값으로 시도 (안 뜨는 문제 해결 우선) */
    height: 3px !important;
    z-index: 100;
}
#mainSpot .swiper-pagination-bullet {
    flex: 1 !important; /* 이 설정이 있어야 위로 안 올라가고 가로로 꽉 찹니다 */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #666 !important; /* 비활성 색상 */
    opacity: 1 !important;
    transition: background 0.3s;
}
#mainSpot .swiper-pagination-bullet-active {
    background: #f2f2f2 !important; /* 활성 색상 */
}
#mainSpot .slide-counter,
#mainSpot .swiper-button-next,
#mainSpot .swiper-button-prev,
#mainSpot .button-next,
#mainSpot .button-prev,
#mainSpot .swiper-button-box {
    display: none !important;
}
#mainSpot .swiper-button-box { display:grid; z-index: 50; position: relative; }
#mainSpot .button-next,
#mainSpot .button-prev { width: 22px; height: 22px; }
#mainSpot .button-prev { background:url('/design/mpmall2025/mobile/img/slide_arrow_prev.png') 1px no-repeat; grid-column: 1 / span 1; }
#mainSpot .button-next { background:url('/design/mpmall2025/mobile/img/slide_arrow_next.png') 5px no-repeat; grid-column: 2 / span 1; }



#mainSpot .swiper-button-prev { left:0; right:auto }
#mainSpot .swiper-button-next { left:auto; right:0 }
#mainSpot .swiper-pagination-lock,
#mainSpot .swiper-button-lock {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.link_connect { width:1240px; margin: auto; }
.link_connect > ul { display:flex; flex-flow: row wrap; gap: 30px; justify-content: center; }
.link_connect ul li .tit { font-size: 14px;}
.link_connect > ul > li { text-align:center; }
.link_connect > ul > li:last-child { }
.link_connect > ul > li .icon { 
    display: block; 
    width: 85px; 
    height: 85px; 
    background-color: #f6f8fc; 
    border-radius: 20px; 
    background-repeat: no-repeat; 
}
.link_connect > ul > li.ballvic .icon { background-image: url('/design/mpmall2025/Img/link_ballvic_.png'); background-position: center; }
.link_connect > ul > li.recellby .icon { background-image: url('/design/mpmall2025/Img/link_recellby_.png'); background-position: center; }
.link_connect > ul > li.ss .icon { background-image: url('/design/mpmall2025/Img/link_ss_.png'); background-position: center; }
.link_connect > ul > li.lg .icon { background-image: url('/design/mpmall2025/Img/link_lg_.png'); background-position: center; }
.link_connect > ul > li.event .icon { background-image: url('/design/mpmall2025/Img/link_event_2.png'); background-position: center; }
.link_connect ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;            
    text-decoration: none;
}
.link_connect > ul > li a:hover .icon {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #b9b9b9;
}

.best-tab-menu { width:1240px; 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:110px; cursor:pointer; color:#1c1c1c; font-size:15px; font-weight:400; height:41px; line-height:41px; text-align:center; box-sizing:border-box; border-radius:6px; 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; }


/* 상품 목록 영역 */
.cateTit{  padding: 60px 0 40px; text-align: center; }
.cateTit h2{ color: #222; font-size: 30px; font-weight: bold;}
.slick-slide a{ border: 0; outline:0}
.product-wrap { margin:0 auto; position:relative; width:1240px }

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

.mid-wrapper { position: relative; max-width: 1240px; margin:80px auto 20px; border-radius:10px; overflow:hidden; }
.mid-wrapper .swiper-button-box { position:absolute; right:15px; bottom:10px; display:flex; z-index: 10; }
.mid-wrapper .button-next,
.mid-wrapper .button-prev { width: 22px; height: 22px; }
.mid-wrapper .button-prev { background:url('/design/mpmall2025/Img/btn_prev.png') no-repeat; grid-column: 1 / span 1; }
.mid-wrapper .button-next { background:url('/design/mpmall2025/Img/btn_next.png') no-repeat; grid-column: 2 / span 1; margin-left:4px; }

.hotdeal-box { padding-bottom: 60px !important; /* 회색 배경이 시작되기 전 흰색 여백 */
    background-color: #ffffff; /* 명시적 흰색 설정 */ }
.hotdeal-box .button-next,
.hotdeal-box .button-prev,
.brand-box .button-prev,
.brand-box .button-next { width: 80px; height: 80px; position:absolute; top:183px; }
.hotdeal-box .button-prev,
.brand-box .button-prev { left:-90px;  background:url('/design/mpmall2025/Img/arrow_prev.png') no-repeat; }
.hotdeal-box .button-next,
.brand-box .button-next { right:-90px; background:url('/design/mpmall2025/Img/arrow_next.png') no-repeat; }

.hotdeal-scroll { position: relative; overflow: hidden; text-align: center; width:1240px; margin :0 auto; }
.hotdeal-scroll .swiper-slide { text-align: center; }
.hotdeal-scroll .item-cont { display: flex; }
.hotdeal-scroll .swiper-slide { text-align: center; }
.hotdeal-scroll .swiper-slide img { width:100%; }

/* 1. 기본 레이아웃 (원래 안 유지) */
.brand-box { width:1240px; position:relative; margin:0 auto;}

/* 2. 슬라이더 기능 끄기 (수정됨) */
.brand-box .brand-scroll { 
    position: relative; 
    overflow: visible !important; /* 2줄 노출을 위해 변경 */
    text-align: center; 
    width: 1240px; 
    margin: 0 auto; 
}

/* 3. 3개씩 2줄 배치 (추가됨) */
.brand-box .brand-scroll .brand-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;      /* 줄바꿈 허용 */
    gap: 40px 20px;                 /* 브랜드 간 간격 */
    width: 100% !important;
    transform: none !important;      /* 제멋대로 돌아가는 현상 방지 */
    height: auto !important;
}

/* 4. 개별 브랜드 박스 크기 (추가됨) */
.brand-box .brand {
    width: calc(33.33% - 14px) !important; /* 3등분 */
    flex-shrink: 0 !important;
}

/* 5. 타이틀 스타일 (사용자님의 원래 안과 100% 동일) */
.brand-box .brand-scroll .brand-wrapper .brand .title { 
    display:flex; 
    padding:20px 10px; 
    align-items: center; 
    border-bottom:1px solid #e5e8eb; 
}

.brand-box .brand-scroll .brand-wrapper .brand .title > p { 
    /* 폰트가 풀린다면 여기에 font-family: 'GmarketSans' !important; 를 한 줄 추가해야 합니다 */
    font-size:18px; 
    font-weight:800; 
    line-height:140%; 
    text-align:left; 
}

.brand-box .brand-scroll .brand-wrapper .brand .title > a { 
    margin-left: auto; 
}

/* 6. 이미지 및 버튼 처리 */
.brand-box .brand .img img { width: 100%; height: auto; display: block; }
.brand-box .swiper-button-box { display: none !important; } /* 화살표 숨김 */

.service-wrap { width:1240px; margin:0 auto; }
.service-wrap .service-box { display:flex; gap:20px; align-items:center; margin-bottom:20px; border-radius:10px; overflow:hidden; }
.service-wrap .service-box .con {border-radius:10px; overflow:hidden; }
.service-wrap .service-box .con .img { }
.service-wrap .service-box .con .txt {  height:110px; background:#f2f4f6;  border-radius:0 0 10px 10px;  text-align: center; display: flex; flex-direction: column;  justify-content: center; align-items: center; }
.service-wrap .service-box .con .txt p { line-height:150%; font-size:16px; }
.service-wrap .service-box .con .txt p.strong { font-size:20px; font-weight:600; }

/* 탭 상품 기능 */
.tab_in_wrap.active{ border:0px !important;}
.tabarea{width: 100%; max-width: 1200px; margin: 20px auto 40px; text-align: center;}
.tabarea .tab{ display: inline-block; width:100%; max-width: 1200px;}
.tabarea .tab > li{float: left; margin: 0 40px 0 0;}
.tabarea .tab > li > span{ color: #757575; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; cursor: pointer;}
.tabarea .item_container{ padding: 15px 0;}
.tabarea .item_container .item-wrap{ display: none; position: relative; overflow: unset;}
.tabarea .morview{position: absolute; top: -30px; right: 0;}
.tabarea .morview a{color: #ff7777; font-size: 15px; font-family: 'Noto Sans KR', sans-serif;}
.tabarea .item_container .item-wrap.active{ display: block;}
.tabarea .item_container .item-wrap .item-cont .item-list{position: relative; width: 588px; padding: 0; margin: 0 20px 20px 0; border: 1px solid #efefef; border-radius: 10px;}
.tabarea .item_container .item-wrap .item-cont .item-list:nth-of-type(2n){margin-right:0}
.tabarea .item_container .item-wrap .item-cont .item-list a{display: block; padding: 20px;}
.tabarea .item_container .item-wrap .item-cont .item-list a:after{display:block; clear:both; content:'' }
.tabarea .item_container .item-wrap .item-cont .item-list .thumb{ width: 220px; float: left;}
.tabarea .item_container .item-wrap .item-cont .item-list .prd-info{ width: 308px; float: left; padding: 20px 0 20px 20px;}
.tabarea .item_container .item-wrap .item-cont .item-list .prd-info .prd-name{ color: #424242; font-family: 'Noto Sans KR', sans-serif; font-size: 18px; line-height: 20px;}
.tabarea .item-wrap .item-cont .item-list .prd-brnd{ margin: 0px 0 8px; font-size: 16px;}
.tabarea .item-wrap .item-cont .item-list .prd-price{ position: absolute; bottom: 40px; color: #D22525; font-size: 16px;}
.tabarea .item-wrap .item-cont .item-list .prd-price .dc_per,
.tabarea .item-wrap .item-cont .item-list .prd-price .price{font-size: 20px;}
.tabarea .item-wrap .item-cont .item-list .prd-price strike{ font-size: 14px;}

.popular-section-bg {
    width: 100vw;
    margin-top: 80px !important;
    margin-left: calc(-50vw + 50%);
    background-color: #f6f8fc; 
    border-top: 1px solid #e5e8eb; /* 핵심: 위쪽 1px 실선 추가 */
    border-bottom: 1px solid #e5e8eb; /* 핵심: 아래쪽 1px 실선 추가 */
    padding: 60px 0 80px;
    box-sizing: border-box;
}
.popular-section-bg .cateTit { 
    padding-top: 0 !important; 
}


/* [초고속 최적화] 슬라이더 충돌 없는 상승 애니메이션 */
.cateTit h2, 
.link_connect ul li, 
.hotdeal-box .item-list, 
.brand-box .brand,
.popular-section-bg .item-list,
.product-wrap .item-list,
.tabarea .item-list,
.service-wrap .service-box,
.bt-box > div,
.best-tab-menu .item-list,
.tab-content-best .item-list,
.tab-content-popular .item-list {
    opacity: 0;
    transform: translateY(40px);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;
    /* 성능 저하의 주범인 will-change 속성 완전 삭제 */
}

/* 실행 상태 */
html body .scroll-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* [보호] 이미지 강제 노출 설정 유지 */
.link_connect .icon, .brand-box img {
    display: block !important;
    visibility: visible !important;
}

/* Swiper 화살표 자동 숨김 기능 강제 무력화 */
.brand-box .swiper-button-lock,
.brand-box .swiper-button-disabled,
.hotdeal-box .swiper-button-lock,
.hotdeal-box .swiper-button-disabled,
.brand-box .button-prev,
.brand-box .button-next,
.hotdeal-box .button-prev,
.hotdeal-box .button-next,
.mid-wrapper .button-prev,
.mid-wrapper .button-next {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
}

/* 연한 그레이 배경 섹션 공통 스타일 */
.bg-gray-area {
    width: 100vw; /* 화면 꽉 차게 */
    margin-left: calc(-50vw + 50%); /* 중앙 정렬 유지하며 배경만 확장 */
    background-color: #f8f9fa; /* 세련되고 연한 그레이 */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

/* 해당 섹션 내의 타이틀 및 텍스트 가독성 강화 */
.bg-gray-area .cateTit h2 {
    color: #222222 !important; /* 요청하신 진한 색상 강제 적용 */
    margin-bottom: 20px;
}

/* 상품명 텍스트 가독성 */
.bg-gray-area .prd-info .prd-name a {
    color: #222222 !important;
    font-weight: 500;
}

/* 탭 메뉴가 배경 위에서 묻히지 않도록 조정 */
.bg-gray-area .tabs-best li {
    background: #ffffff; /* 탭 버튼은 흰색으로 띄워서 대비 효과 */
}
.bg-gray-area .tabs-best li.active {
    background: #222222;
    color: #ffffff;
}



/* 1. 겉을 감싸는 큰 박스들은 투명하게 (회색 배경이 보이게) */
.bg-gray-area .hotdeal-box, 
.bg-gray-area .product-wrap,
.bg-gray-area .item-slide {
    background-color: transparent !important;
}

/* 2. 상품 낱개 카드(내용물)는 다시 흰색으로 채우기 */
.bg-gray-area .item-list {
    background-color: #ffffff !important; /* 내용물은 흰색으로 */
    padding: 15px;      /* 카드 안쪽 여백 */
    border-radius: 10px; /* 모서리 둥글게 (선택사항) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 살짝 입체감 (선택사항) */
    margin-bottom: 10px;
}
/* BASIC css end */