/* BASIC css start */
/* 메인 비쥬얼 배너 - 전체 틀 여백 리셋 */
.visual-banner {
    position: relative; 
    overflow: hidden; 
    width: 100% !important;
    margin: 0 auto 60px !important;
}

/* Swiper 컨테이너가 1500px 안에서만 돌도록 제한 */
.visual-banner .mySwiper {
    width: 100% !important;
    max-width: 1500px !important;
    height: 700px !important; /* 세로 높이 고정 */
    margin: 0 auto !important;
    position: relative !important;
    left: 0 !important;
}

/* ★ 핵심: 오른쪽으로 밀리고 잘리는 현상을 물리적으로 차단 */
.visual-banner .swiper-wrapper {
    display: flex !important;
    transform: none !important; /* 스크립트의 강제 가로 밀림 좌표 무력화 */
}

/* ★ 핵심: 개별 슬라이드 크기를 1500px로 박아두고 화면 중앙에 배치 */
.visual-banner .swiper-slide {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 auto !important; /* 슬라이드 자체를 중앙 정렬 */
    opacity: 0 !important;
    transition: opacity 0.5s ease !important; /* 부드러운 페이드 효과 전환 */
}

/* 현재 활성화된 배너만 화면에 노출 */
.visual-banner .swiper-slide-active {
    opacity: 1 !important;
    z-index: 1 !important;
}

/* 자동 배너 이미지 정중앙 크롭 */
.visual-banner .inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* 화살표 및 프로그레스바 기본 스타일 유지 */
.visual-banner .swiper-horizontal .swiper-pagination-progressbar {width:90px; height:2px; top:auto; bottom:19px; left:50%; margin-left:-45px; background-color:rgba(255,255,255,0.5); z-index: 10;}
.visual-banner .swiper-horizontal .swiper-pagination-progressbar span {background: #fff;}
.visual-banner .swiper-button-prev:after,
.visual-banner .swiper-button-next:after {display:none;}
.visual-banner .swiper-button-prev,
.visual-banner .swiper-button-next {z-index: 10;}

/* 텍스트박스 기본 스타일 유지 */
.visual-banner .txtbox {display:inline-block; text-align:center; position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); opacity:0; visibility: hidden; transition:all .8s ease-in; -webkit-transition:all .8s ease-in; z-index: 5;}
.visual-banner .swiper-slide-active .txtbox {opacity:1; top:52%; visibility: visible;}
.visual-banner .txtbox .txt01 {color: #5c1924; font-size: 18px; letter-spacing: 2px; font-weight:500; margin-bottom:10px;}
.visual-banner .txtbox .txt02 {line-height:31px; background-color: rgba(247,247,247,.3); color: #f7f7f7; font-weight: bold; font-size: 12px; letter-spacing: 2px; padding:0 30px;}



/* 중앙배너 */
.midbanner {max-width:1500px; margin:35px auto 15px; display:flex;}
.midbanner a {display:inline-block; flex:1; transition:all .3s ease; -webkit-transition:all .3s ease;}
.midbanner a:hover {opacity:0.7;}
.midbanner a:first-child {margin-right:23px;}
.midbanner a img {width:100%;}

/* BEST 상품 */
.prd01 .item-wrap {position:relative; overflow: inherit;}
.prd01 .item-wrap .item-cont {overflow:hidden;}
.prd01 .cateTit {position:relative;}
.prd01 .controller {position:absolute; top:35px; right:0;}
.prd01 .controller .swiper-fraction {text-align:right; color: #ce7777; font-size: 12px; font-weight: 800; padding-bottom:8px;}
.prd01 .controller .swiper-fraction .swiper-pagination-current {color: #ce7777;}
.prd01 .controller .swiper-pagination {width:90px; height:2px; position:static; background:#f7f7f7;}
.prd01 .controller .swiper-pagination span {background:#ce7777}
.prd01 .swiper-button-prev {left:-80px; top:42%; width: 37px; height: 71px;}
.prd01 .swiper-button-next {right:-80px; top:42%; width: 37px; height: 71px;}
.prd01 .swiper-button-prev:after,
.prd01 .swiper-button-next:after {display:none;}

/* 상품폼 */
.prd-more {text-align:center; margin-top:35px;}
.prd-more a {width:280px; height:56px; line-height:56px; display:inline-block; border-radius:10px; border: 1px solid #f7f7f7; color: #c5c5c5; font-size: 13px; letter-spacing: 1.5px; font-family:'Montserrat',sans-serif; font-weight:bold;}


@media screen and (max-width:1780px){
    .prd01 .swiper-button-next,
    .prd01 .swiper-button-prev {display:none;}
}    



.abcd span {display:inline-block; width:10px; height:10px; border:1px solid #dddddd;}
/* BASIC css end */

