/* BASIC css start */
/* BASIC css start */
/* 롤링배너 */
#mainVisual { visibility: hidden; position:relative; overflow:hidden; } 
#mainVisual img { width:100%; margin-top:35px;} /* 그리드메뉴 한줄 추가시생성 margin-top:35px; */
#mainVisual .bx-pager { /*position:absolute; bottom:10px; */ margin-top:20px; left:0; right:0; z-index:60; text-align:center; letter-spacing: -1px; } 
#mainVisual .bx-pager-item { transition:all 0.3s ease; -webkit-transition:all 0.3s ease; display:inline-block; position:relative; } 
#mainVisual .bx-pager-link { display:inline-block; width:24px; height:4px; font-size:0; background:#a2a2a2; margin:3px; } /* bar사이즈 원본 width:74px; bar사이사이간격 margin:3px; */
#mainVisual .bx-pager-link.active { background:#000; } 
#mainVisual .bx-controls-direction { position:absolute; bottom:4%; width:100%; text-align:center; display:inline-block; z-index:60; } 

/* HJ 타임세일 */
.timesale_wrap { position: relative; width: 100%; margin: 45px auto 0; box-sizing: border-box; margin-bottom:-40px;}    /*  타임이벤트시 윗배너와의 간격 margin: 40px 으로 변경 이벤트1개일때 margin: 20px  margin-bottom:-40px; 생성   이벤트 종료시 margin: -15px    */
.timesale_wrap .timer_count_cont { padding: 0px 12px 20px; } 
.timesale_wrap .timer_count_cont .tit { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: rgb(51, 51, 51); font-size: 18px; line-height: normal; font-weight: 600; letter-spacing: 0.2px; } 
.timesale_wrap .timer_count_cont .subtit { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 15px; color: rgb(143, 143, 143); font-weight: 400; letter-spacing: normal; line-height: 1.29; margin: 10px 0 10; text-align: left;} 
.timesale_wrap .timer_count_cont .subtit3 { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; color: rgb(143, 143, 143); font-weight: 400; letter-spacing: normal; line-height: 1.29; margin: 0px 0 10; text-align: left;} 
.timesale_wrap .timer_count_cont .timer {display: flex;align-items: center;justify-content: flex-start;padding: 8px 0 19px;} 
.timesale_wrap .timer_count_cont .timer .lottie-timer { margin-right: 10px; width: 27px; height: 27px; margin-bottom:10px;}  /* 생성   margin-bottom:10px;   */
.timesale_wrap .timer_count_cont .timer .count { display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; font-size: 17px; font-weight: 600; color: rgb(51, 51, 51); } 
.timesale_wrap .timer_count_cont .timer .count span { position:relative; border: 1px solid #ddd; border-radius: 5px; width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 20px; margin: 0 3px; margin-bottom:10px;} /* 생성   margin-bottom:10px;  font-size: 20px;   */
.timesale_wrap .timer_count_cont .timer .count span.day { color: #ff0000;} /* font-size: 20px; 생성  */
.timesale_wrap .timer_count_cont .timer .count span.hours { margin-left:5px; } /* font-size: 20px; 생성  */
.timesale_wrap .timer_count_cont .timer .count span.seconds { color:#c0c0c0; } /* font-size: 20px; 생성  */
.timesale_wrap .timer_count_cont .subtit2 { display: none; padding-top: 0; font-size: 14px; color: rgb(204, 204, 204); font-weight: normal; line-height: 1.43; letter-spacing: -0.4px; } 
.timesale_wrap .timer_list_cont .item-wrap { padding: 0; } 
.timesale_wrap .timer_list_cont .item-wrap .list_1x { width: 1095px; } 
.timesale_wrap .timer_list_cont .item-wrap .list_1x .thumb { height: 425px; overflow: hidden; } 
.timesale_wrap .timer_list_cont .item-wrap .list_1x .thumb img.MS_prod_img_l { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } 
.timesale_wrap .timer_list_cont .item-wrap .list_1x dd ul { box-sizing: border-box; } 
.timesale_wrap .timer_list_cont .item-wrap .list_1x dd ul li,
.timesale_wrap .timer_list_cont .item-wrap .list_1x dd ul li * { font-size: 21px; } 
.timesale_wrap .timer_list_cont .item-wrap .list_1x dd ul li.prd-subname,
.timesale_wrap .timer_list_cont .item-wrap .list_1x dd ul li.prd-subname * { font-size: 17px; } 
.timesale_wrap .preview-box { display:none; } 
.timesale_wrap .thumb { position: relative; } 
.timesale_wrap .thumb .dc_per { position: absolute; top: 0; left: 0; background: #ff0000; width: 50px; height: 40px; text-align: center; line-height: 35px; color: #fff; font-size: 16px; }  /* 썸네일 좌측상단 할인률 네모크기   */

/* 배너 영역 */
.banner { zoom: 1; overflow: hidden; } 
.banner a { padding:10px; display: block; margin: 5% auto; } 
.banner a img { width:100%; margin-top: -25px; } 

/* 롤링상품진열 MD's Pick */
.mdPickWrap { position:relative; padding:40px 0; margin-bottom: 20px;  margin: 0px} 
.mdPickWrap .banner img { width:100%; margin-top:-45px; } /* 추가된것 margin-top:15px; */
.mdPickWrap .ttl { text-align: center; font-size: 20px; font-weight: bold; padding: 5% 0 2%; letter-spacing:6px; margin-top:-20px; } /* 이벤트종로시 margin-top:-40px; 이벤트1개시 margin-top:-20px;  이벤트종로시 margin-top:-10px; */
.mdPickWrap .ttl01 { text-align: center; font-size: 20px; font-weight: bold; padding: 5% 0 2%; letter-spacing:6px; } /* 추가된 줄 */
.mdPickWrap .ttl3 { text-align: center; font-size: 13px; font-weight: bold; padding: 0.5% 0 1%; margin-left:-6px; } 
.mdPickWrap .ttl2 { text-align: center; font-size: 13px; font-weight: bold; padding: 0.5% 0 1%; } 
.mdPickWrap figcaption { margin-top:10px } 
.mdPickWrap .sliderArea { position:static; margin: 20px 10px 10px; } /* 20px */
.swiper-pagination-clickable .swiper-pagination-bullet { background:#a2a2a2; opacity:1; margin: 0 0.8%; width: 7px; border-radius: 0; height: 4px; margin-bottom: 20px;} 
.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active { background:#000; opacity:1; } /* 바컬러 background:#b77c5a; */
.mdPickWrap .swiperBtn { color:#111; font-size: 27px; width: 8%; height:22%; position:absolute; top:90%; text-align:center; background-image: none; z-index:11; } 

.mdPickWrap .list { /*margin: 0 3px; */width: 32%; text-align:center } 
.mdPickWrap .list img { width: 100%; max-width: 100%; } 
.swiper-pagination-fraction { bottom:7px; } 


/* 메인 타이틀 */
.main h3 { font-size: 20px; display: inline-block; margin: 10px auto 15px; width: 100%; text-align: center; font-weight:bold; letter-spacing:1px; } 
.main .specialProduct h3 { font-size: 18px; display: inline-block; margin: 50px auto 15px; width: 100%; text-align: center; } 

/*
.longban { margin: 50px 0 0px; } 
.longban a img { width:100%; } 
*/

.ftmid .ftImgBx { padding:0px; position:relative } 
.ftmid .ftImgBx li .thumb { margin: 0;  margin-top:0px; }  /*  width:360px; height:237px;   */
.ftmid .ftImgBx li .thumb img { width:100%; height:100%; cursor:pointer } 
.ftmid .bx-pager { position:absolute; bottom: 20px; left:170px;; z-index:60; text-align:center; z-index:12 } 
.ftmid .bx-pager-item { transition:all 0.3s ease; -webkit-transition:all 0.3s ease; display:inline-block; position:relative; } 
.ftmid .bx-pager-link { display:inline-block; width: 10px; height: 10px; font-size:0; margin: 0 5px; background-color: #bcbcbc; border-radius: 100%; } 
.ftmid .bx-pager-link.active { width: 10px; background-color: rgba(45, 45, 45, 0.8); } 

.list_shoppingx li img.listPic { margin-bottom: 10px; } 
.timesale_wrap .listPrice { font-size: 19px;  margin-bottom:30px;}  /*  margin-bottom:30px; 생성  */
.timesale_wrap .listPrice .dc_per { color: #ff0000; } 
.timesale_wrap .listPrice del { font-size: 15px; } 
/* BASIC css end */


/*  메인배너 아래 배너    */
#mainBnSet { padding:30px 3px 0px; position:relative }   /*   padding:3px 3px 28px;   */
#mainBnSet ul { *zoom:1 }
#mainBnSet ul:after { display:block; clear:both; content:'' }
#mainBnSet ul li { float:left; width:50% }
#mainBnSet ul li a { display:block; padding:2px }
#mainBnSet ul li a img { width:100% }

#mainBnSet2 { padding:0px 3px 0px; position:relative }   /*   padding:3px(탑간격) 3px 28px;(bottom 간격)   */
#mainBnSet2 ul { *zoom:1 }
#mainBnSet2 ul:after { display:block; clear:both; content:'' }
#mainBnSet2 ul li { float:left; width:100% }
#mainBnSet2 ul li a { display:block; padding:2px }
#mainBnSet2 ul li a img { width:100% }


/* =========================================
   중간 배너 독립형 슬라이더
   Swiper와 무관한 전용 CSS
========================================= */

#jks-middle-banner-test {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#jks-middle-banner-test .jks-mb-track {
    display: flex;
    width: 100%;
    transform: translateX(0);
    transition: transform 0.4s ease;
    will-change: transform;
}

#jks-middle-banner-test .jks-mb-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#jks-middle-banner-test .jks-mb-slide a {
    display: block;
    width: 100%;
}

#jks-middle-banner-test .jks-mb-slide img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

/* 오른쪽 하단 페이지 표시 */
#jks-middle-banner-test .jks-mb-pagination {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: auto;
    padding: 7px 9px;
    margin: 0;

    background: rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    box-sizing: border-box;
}

/* 비활성 점 */
#jks-middle-banner-test .jks-mb-dot {
    display: block;
    flex: 0 0 7px;

    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;

    padding: 0;
    margin: 0;

    border: 1px solid #333;
    border-radius: 50%;
    background: transparent;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

/* 현재 배너의 점 */
#jks-middle-banner-test .jks-mb-dot.is-active {
    background: #222;
    border-color: #222;
}


/* ========================================
   신규가입 배너 자연스러운 교차 페이드
======================================== */

#mainBnSet #jksWelcomeBannerLink {
    display: block;
    width: 100%;
}

#mainBnSet #jksWelcomeBannerSlider {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

#mainBnSet #jksWelcomeBannerSlider .jks-welcome-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

#mainBnSet #jksWelcomeBannerSlider .jks-welcome-slide.is-active {
    opacity: 1;
}

/* BASIC css end */