/* BASIC css start */
/* BASIC css start */
/* 롤링배너 */
#mainslide{padding-bottom: 30px;}
#mainslide .swiper-pagination-bullet{
    background: #e9e9e9 !important;
    border-radius: 0 !important;
    width: 20px !important;
    height: 4px !important;
    margin: 0 3px !important;
    opacity: 1 !important;}
    
#mainslide .swiper-pagination-bullet-active{background:#000 !important;}



/*중간슬라이더*/
#middleslide .swiper-pagination-bullet{border:1px solid #000; background:none !important; border-radius: 0 !important;width: 6px !important; height: 6px !important; margin: 0 3px !important;opacity:1 !important;}
#middleslide .swiper-pagination-bullet-active{background:#000 !important;}
#middleslide .swiper-pagination{text-align: right !important; left: -10px !important;}



/*진열 타이틀*/
.main h3 {
    font-size: 20px;
    display: inline-block;
    margin: 50px 0 10px 0;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 900;}
    
section p.msg{
    color: #a8a8a8;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    padding-bottom: 15px;
    letter-spacing: -0.5px;}


/*(best)*/
.list_shopping3x ul{padding: 0 3px !important;}
.list_shopping3x li a{padding: 4px !important;}

.list_shopping3x li a figure{position:relative;}


.list_shopping3x li:nth-child(1) a figure .rank,
.list_shopping3x li:nth-child(2) a figure .rank,
.list_shopping3x li:nth-child(3) a figure .rank{display:inherit !important;}


.list_shopping3x li a figure .rank{display:none; position:absolute;background:#cacaca; width: 35px; height: 35px; z-index: 9999; top: 0; left: 0; font-size: 12px !important; text-align: center; color: #fff !important; line-height: 35px; font-weight: bold; font-family: roboto;}




.list_shopping3x li:nth-child(1) a figure .rank{background:#474747 !important;}

.list_shopping3x .list_shoppingInfo{}
.list_shopping3x .list_shoppingInfo .listName {color: #343434 !important; font-family: malgun Gothic !important; font-size: 14px; font-weight: normal; padding-bottom: 8px; letter-spacing: -1px;}

.list_shopping3x .list_shoppingInfo .listDiscount{}
.list_shopping3x .list_shoppingInfo .listDiscount del{ font-family: roboto; font-weight:300; color: #acacac;}
.list_shopping3x .list_shoppingInfo .listPrice{font-family: roboto; font-weight:300; color: #000; font-size: 14px; margin-top: -3px;}



#notice {
    border: 1px solid #e7e7e7;
    vertical-align: top;
    padding: 10px;
    margin: 50px 10px 10px;
    display: block;
}    
#notice h5{
    font-size: 13px;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 9px;
    margin-bottom: 10px;
    text-indent: 6px;
    font-weight: bold;
    position: relative;
}


#notice h5 a{
    position: absolute;
    right: 0;
    width: unset;
    margin: 0;}
    
#notice li,#notice li a{font-size:11px; color:#8a8a8a}
#notice li a{
    vertical-align: top;
    width: 70%;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    box-sizing: border-box;
    }
    
#notice li{padding: 5px; }
#notice li p{float:right;width: 20%;box-sizing: border-box;}
#notice li span{line-height: 13px;display: inline-block;margin-right: 5px;width: 2%;box-sizing: border-box;}
#notice li span img{vertical-align: middle;}
/*(new)*/
.MK_block_new_product{display: block; margin-top: 5px;}
.list_shopping2x ul{padding: 0 7px !important;}
.list_shopping2x li a{padding: 0 5px 18px 5px !important;}
.list_shopping2x .list_shoppingInfo .listName.bold {color: #343434 !important; font-family: malgun Gothic !important; font-size: 13px; font-weight: normal; padding-bottom: 3px !important;}
.list_shopping2x .list_shoppingInfo .listName {color: #8d8d8d; font-family: malgun Gothic !important; font-size: 13px; font-weight: normal; padding-bottom: 8px;}
.list_shopping2x .list_shoppingInfo .listDiscount{ display: inline-block; margin-right: 3px;}
.list_shopping2x .list_shoppingInfo .listDiscount del{font-size: 14px; font-family: roboto; font-weight:300; color: #acacac;}
.list_shopping2x .list_shoppingInfo .listPrice{display: inline-block; font-family: roboto; font-weight:300; color: #000; font-size: 14px; margin-top: -3px; font-weight: bold;}

/*상단2개배너*/
.main .topBanner {border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; margin-top: 10px; padding: 20px 10px; margin-bottom: 10px;}     
.main .topBanner .topBannerLeft {width:49%; float:left; position:relative; border-right: 1px solid #e7e7e7;}
.main .topBanner .topBannerRight {width:49%; float:right; position:relative;}
.main .topBanner img {width:100%; vertical-align:top;}
.main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}


/*하단4개배너*/
#endBnr {margin-top:20px;}
#endBnr img{width:100%;}
#endBnr  .end_top{}
#endBnr  .end_mid{}
#endBnr  .end_mid a{display:inline-block; width:49%}
#endBnr  .end_bottom{}



/*중간2개배너*/
.main .midBanner {margin-top: 6px;}     
.main .midBanner .midBannerLeft {width:49%; float:left; position:relative; border-right: 1px solid #e7e7e7;}
.main .midBanner .midBannerRight {width:49%; float:right; position:relative;}
.main .midBanner img {width:100%; vertical-align:top;}
.main .midBanner .midBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}

.mb6{margin-bottom:6px;}


/* 인스타그램 영역 */
#instagram{text-align:center; margin-top: 30px;}
#instagram h1 img.tit{width: 115px;}
#instagram p{margin-top:10px; font-size: 12px; color: #a8a8a8; letter-spacing: -1px;}
#instagram a{float:right; margin-top: -25px; margin-right: 10px;}
#instagram .inner{margin-top:15px;}
#instagram .inner img{width:100%}



/*기타*/
.color{margin-bottom: 6px;}



/* 카테고리 추천 탭 */

/* =========================================
   [업그레이드] 카테고리 추천 탭 (Chip Style)
   ========================================= */

/* 1. 전체 컨테이너 */
.cate_wrap {
    border: none;
    border-radius: 16px;
    padding: 25px 20px;
    margin: 30px 15px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative; /* 전체보기 버튼의 기준점 */
}

.cate_wrap:after {
    content: "";
    display: block;
    clear: both;
}

/* 2. 대분류 아이콘 (상단 3개 탭) */
.cate_wrap .main_cate {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cate_wrap .main_cate span {
    flex: 1;
    text-align: center;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s;
    margin-bottom: 0;
    padding: 0;
}

.cate_wrap .main_cate span.active {
    opacity: 1;
    transform: scale(1.05);
}

.cate_wrap .main_cate span img {
    width: 70%;
    max-width: 90px;
    display: inline-block;
}

/* 3. 중분류 리스트 (텍스트 버튼 영역) */
.sub_cate dd {
    display: none;
}

.sub_cate.active {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sub_cate.active dd {
    display: block;
}

/* ★ [수정됨] 전체보기 버튼 스타일 ★ */
#mct1-1 .tab_all {
    display: block !important;
}

.tab_all {
    position: absolute;
    top: 20px;                 /* 상단 위치 조정 */
    right: 20px;               /* 우측 위치 조정 */
    z-index: 10;
    width: auto !important;
    text-align: right !important;
}

.tab_all span {
    display: inline-block;
    font-size: 13px !important;    /* 글자 크기 키움 */
    color: #fff !important;        /* 글자색 흰색으로 변경 */
    background-color: #6c78b4 !important; /* 배경색 남색 적용 */
    padding: 7px 18px !important;  /* 버튼 크기(여백) 키움 */
    border-radius: 30px;           /* 둥근 모서리 */
    font-weight: bold !important;  /* 글자 굵게 */
    text-decoration: none !important; /* 밑줄 제거 */
    box-shadow: 0 3px 6px rgba(108, 120, 180, 0.3) !important; /* 그림자 추가 */
    border: none !important;
}

/* 기존 dl 스타일 초기화 */
.cate_wrap dl {
    width: 100%;
    margin: 0;
    display: block;
}

.cate_wrap dl dt {
    display: none;
}

/* 개별 버튼 디자인 (Chips) */
.cate_wrap dl dd {
    float: none;
    width: auto;
    flex-grow: 0;
    padding: 0;
}

.cate_wrap dl dd span {
    display: block;
    padding: 8px 16px;
    background-color: #f4f6f8;
    color: #666;
    border-radius: 20px;
    font-size: 13px;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.5px;
    transition: all 0.2s;
    text-align: center;
    box-shadow: none !important;
}

/* 선택되었을 때 (Active) 디자인 */
.cate_wrap dl dd.current span,
.cate_wrap dl dd:hover span {
    background-color: #6c78b4;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(108, 120, 180, 0.4) !important;
    text-decoration: none;
}

/* 탭 컨텐츠 영역 */
.tabcontent {
    display: none;
}
.tabcontent.current {
    display: block;
}
.item-wrap .item-cont .item-list {
    height: 491px;
}

/* 하단 더보기 버튼 */
.cate_more {
    clear: both;
    text-align: center;
    padding-top: 50px;
}
.cate_more a {
    display: inline-block;
    border: 1px solid #000;
    color: #000;
    padding: 17px 52px;
    font-size: 17px;
}

/* 리스트 타이틀 */
.list_shopping2x h2 {
    margin: 10px 0 35px;
    display: inline-block;
}

/* 모바일 화면 최적화 */
@media only screen and (max-width: 768px) {
    .cate_wrap {
        padding: 20px 15px;
        margin: 20px 10px;
    }
    
    .cate_wrap dl dd {
        flex-grow: 1;
        text-align: center;
    }
    
    .cate_wrap dl dd span {
        font-size: 12px;
        padding: 8px 10px;
        white-space: nowrap;
    }
    
    /* 모바일에서 전체보기 버튼 위치 미세 조정 */
    .tab_all {
        top: 20px;
        right: 15px;
    }
    
    /* 모바일에서는 전체보기 버튼 패딩을 살짝 줄여서 공간 확보 */
    .tab_all span {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

/* BASIC css end */

.custom_tit {
    text-align: left;
    margin-bottom: 20px;
}
.custom_tit h1 {
    font-size: 18px;
    margin-bottom: 7px;
    color: #484848;
}
.custom_tit h1 img{
    width: 17px;
    margin-left: 6px;
    vertical-align: bottom;
}

.custom_tit span {
    font-size: 13px;
    color: #949494;
}

/*.custom_tit img{
    width:46%;
}*/
.cate_wrap dl dd.current span {
    box-shadow: inset 0 -10px 0 #d0d0ec;
    font-weight: bold;
}

span.review_cnt {
    box-shadow: inset 0 -8px 0 #d0d0ec;
    /*background: #d0d0ea;*/
    font-weight: bold;
}


/* 스크롤시 동적효과 적용 */
.fadeInUp {
	transition:all 1s ease;
	opacity:0;
	transform:translateY(30px);
}
.animate {
	transform:translateY(0px);
	transform:translateX(0px);
	opacity:1;
}

@media only screen and (max-width: 768px) {
    /* 상품 설명(서브네임) 타겟팅 */
    .list_shopping3x .list_shoppingInfo .listName:not(.bold),
    .list_shopping2x .list_shoppingInfo .listName:not(.bold) {
        
        /* 모바일에서만 적용될 글자 크기 (PC는 13~14px이므로 12px로 축소) */
        font-size: 10.5px !important; 
        
        /* 자간을 좁혀서 한 줄에 글자가 더 많이 들어가도록 설정 */
        letter-spacing: -1.3px !important;
/* BASIC css end */