/* BASIC css start */
/* 해당 섹션 안에서만 스타일 적용 */

.icon-text-item:nth-child(5) .icon {
    width: 80px;
    height: 80px;
}

.custom-icons {
  display: flex;
  justify-content: center;
  gap: 10px;  /* 아이콘 간의 간격 */
  flex-wrap: wrap; /* 화면 크기에 맞춰 아이템을 줄 바꿈 */
  padding: 20px 25px;
}

.custom-icons .icon-text-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 80px; /* 각 아이템의 크기 제한 */
  margin-top: 20px;  /* 아이콘 전체에 여백 추가 */
  flex: 1 1 calc(25% - 10px); /* 4개씩 배치 */
  box-sizing: border-box;
}

.custom-icons .icon-wrapper {
  width: 70px;  /* 아이콘 크기 */
  height: 70px; /* 아이콘 크기 */
  background-color: #f5f5f5; /* 배경색 */
  border-radius: 35%; /* 원형 모양 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px; /* 아이콘과 텍스트 사이 간격 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 효과가 부드럽게 적용되도록 transition 추가 */
  overflow:hidden;
}

.custom-icons .icon {
  width: 48px;  /* 이미지 크기 */
  height: 48px; /* 이미지 크기 */
}

/* 마우스 올렸을 때 확대 + 그림자 효과 */
.custom-icons .icon-wrapper:hover {
  transform: scale(1.05); /* 아이콘을 5%만 확대 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 작은 그림자 효과 */
  transition: all 0.3s ease; /* 부드러운 애니메이션 */
}

.custom-icons .text {
  font-size: 14px;
  color: #5e5e5e;
  font-weight: bold;
  line-height: 1.4;
}



/* 롤링배너 */
#event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .event-imgs { position: relative; }
#event .MS_img-area { float: left; }
#event .MS_img-area:not(:first-child) { display: none; }
#event .MS_img-area img { width: 100%; }
#event .pagination { position: relative; left: 0; text-align: center; width: 100%; }
#event .pagination .swiper-pagination-switch { display: inline-block; margin: 0 2px; text-indent: -9999px; background: url(/images/d3/m_01/bull/event_now@2x.gif) no-repeat 0 50%; background-size: 19px 7px; width: 10px; height: 10px; }
#event .pagination .swiper-active-switch { background-position: -12px 50%; }
/* //롤링배너 */
.main .topBanner {margin-top:15px;}
.main .topBanner .topBannerLeft {width:49%; float:left; position:relative;}
.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;}

.visual { width:100%; background:#ededed;}
.visual #mainImg { position:relative; overflow:hidden;}
.visual #mainImg .m_img { width:100%;height:100%; text-align:center; margin:0 auto; max-width:640px;} 
.visual #mainImg .m_img li { overflow:hidden;  position: relative; }

.tit_hd_h2 {  margin: 30px 0 10px 0; font-size: 1.9em; text-align: center; color: #333; text-transform: uppercase; line-height: 1.2em; }
.tit_hd_h2 span { font-size: 11px; display: block; color: #666;  text-transform: none !important;  } 
.tit_hd_h3 {  margin: 30px 0 15px 0; font-size: 1.5em; text-align: center; color: #333; text-transform: uppercase; line-height: 1.2em; }
.tit_hd_h3 span { font-size: 11px; display: block; color: #666;  text-transform: none !important;  } 

.maincon { max-width:640px; margin:0 auto;}
.maincon .m_ban01 a { display:block;}
.maincon .m_ban02 { overflow:hidden; position:relative; padding:0 0 30px;}
.maincon .m_ban01 img { max-width:100%; }

#bestItemWrap { margin: 20px 0;  }
#bestItemWrap h2 { display: none;}
.best_product  { position: relative; }
.best_product .goodsList { overflow: hidden; width: 100%;  display: table; }
.best_product .goodsList li { display: inline-block;  width: 100%; max-width:640px; margin: 0 auto; box-sizing: border-box; text-align: center; vertical-align: top;  }
.best_product .goodsList li > div { padding: 4px 10px; box-sizing: border-box; text-align: center; display: block; width: 100%;  position: relative; }
.best_product .goodsList li .info_txt { margin-top:10px; }
.best_product .goodsList li div.thumb img { width:100%; }
.best_product .goodsList li .discount span.sale { width: 50px !important; height: 50px !important; line-height: 50px !important; font-size: 1.2em; } 
.best_product .goodsList li .discount { right: 6px; }

.best_product .goodsList li p.price strike { display: block;  } 
.best_product .goodsList li p.suj a { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }                                        
.best_product .goodsList li .price {  display: inline-block; margin-top: 5px; }

.best_product .goodsList li > div > span.no { position: absolute; top: 0; left: 6px; background: #ce2727; width: 80px; height: 73px; color: #fff; display: block; text-align: center; padding-top: 10px; box-sizing: border-box; }
.best_product .goodsList li > div > span.no strong { display: block; font-size: 2.8em; margin-top: 10px; font-weight: normal; }
/* special 상품 */
.maincon { max-width:640px; margin:0 auto; font-size: 9px; }
.maincon .m_weeks .bx-wrapper { margin:0 auto; }
.maincon .m_weeks a { display:block;}
.maincon .m_weeks { overflow:hidden; position:relative; padding:10px 0 30px;}
.roll {  }
.roll img { max-width: 100%;  }

.gnbWrap { margin-bottom: 0px !important; }
.m_weeks { overflow: hidden; padding: 4px 10px; box-sizing: border-box;  }
.m_weeks .bx-viewport { width: 99% !important; margin: 0 auto; }
.m_weeks .thumb { position: relative; margin-bottom: 10px; }





/* .m_banner02 */
.m_banner02 { width: 100%; max-width: 650px; margin: 0 auto; position: relative; }
.m_banner02 ul { list-style: none; padding: 0; margin: 0; }
.m_banner02 li { display: inline-block; }
.m_banner02 img { width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; padding-top: 30px; }




/* 신상품 */
.newPrd { overflow: hidden; width:99%; margin: 0 auto; }
.newPrd .thumb { position: relative; margin-bottom: 10px; }

/* main_banner01 */
.main_banner01 { width:100%; max-width: 640px; margin: 30px auto 0; position: relative; }

/* main_banner02 */
.main_banner02 { width:100%; max-width: 640px; margin: 30px auto 0; position: relative; overflow: hidden; }

/* main_banner03 */
.main_banner03 { width:100%; max-width: 640px; margin: 30px auto 0; position: relative; }
.main_banner03 a { display: block; margin-bottom: 5px; text-align: center; }
.main_banner03 img { max-width:100%; }


 /**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.c om
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 * 지우지 마세요 /
 /** RESET AND LAYOUT
===================================*/
.bx-wrapper { padding: 0; *zoom: 1; top: 0;  }
.bx-wrapper img {  width: 100%;  display: block;  /* min-height: 450px; */ }
 /** THEME
===================================*/
.bx-wrapper .bx-viewport {  }
 /* DIRECTION CONTROLS (NEXT / PREV) */  
.m_img .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0; width: 100%; }
.m_img .bx-pager { width: 229px;  left: 50%; z-index: 9999;  bottom: 42px; /*top: 58%; */  position: absolute; margin-left: -45px; display:none; }
.m_img .bx-pager-item a { width: 17px; height: 16px; text-indent: -999em; margin-right: 7px; display: inline-block; background: url(../_image/bull_mainImg_off.png) no-repeat; float: left;  }
.m_img .bx-pager-item a.active { background: url(../_image/bull_mainImg_on.png) no-repeat; }
 /* DIRECTION CONTROLS (NEXT / PREV) */
.m_img .bx-wrapper .bx-prev {  background: url(/design/d4-0161/skin_type020/m/images/m_arrow_l.png) no-repeat; left:4px }
.m_img .bx-wrapper .bx-next {  background: url(/design/d4-0161/skin_type020/m/images/m_arrow_r.png) no-repeat; right:-10px }
.m_img .bx-wrapper .bx-controls-direction { /* margin-left: 97px; position: relative; */ display: none; }
.m_img .bx-wrapper .bx-controls-direction a { position: absolute; top: 45%; outline: 0; width: 42px; height: 78px; background-size:63%; text-indent: -9999px; z-index: 1000; }
.m_img .bx-wrapper .bx-controls-direction a.disabled { display: none; } 

#bx-pager { position: absolute; bottom:0; left:0 ;  max-width: 640px; width: 100%; z-index: 100; }
#bx-pager a { display: inline-block; padding: 0 7px; text-align: center; border: 1px solid #ddd; height: 30px; line-height: 30px; background: #fff; margin-left: -3px; }
#bx-pager a.active { background: #5b5852; color: #fff; font-weight: bold; }

.m_weeks .bx-controls-direction { display:none !important;}
.m_weeks .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0; width: 100%; }
.m_weeks .bx-pager { width: 100%;  left: 50%; z-index: 200;  bottom: 0px;  position: absolute; margin-left: -20px;  }
.m_weeks .bx-pager-item a { width: 8px; height: 8px; border-radius: 50%; text-indent: -999em; margin-right: 7px; display: inline-block; background: #ededed; float: left;  }
.m_weeks .bx-pager-item a.active { background: #666;}

/* 베스트상품 */
.best_product .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0; width: 100%; border:1px dotted red }
.best_product .bx-pager { width: 100%;  z-index: 9999;  bottom: 16%; /*top: 58%; */  position: absolute;  display: table; text-align: center; }
.best_product .bx-pager > div { display: inline-block; text-align: center; margin: 0 5px; }
.best_product .bx-pager-item {  }
.best_product .bx-pager-item a { text-indent: -999em;   width: 10px; height: 10px; border-radius: 50%; background: #fff; display: block;  }
.best_product .bx-pager-item a.active { background: #555; }
/* DIRECTION CONTROLS (NEXT / PREV) */  
.best_product .bx-wrapper .bx-controls-direction { position: absolute; top: 45%; width: 100%;   display: none; }
.best_product .bx-wrapper .bx-controls-direction a { position: absolute; top: 0;  outline: 0; width: 27px; height: 52px;  text-indent: -9999px; z-index: 9999;  }
.best_product .bx-wrapper .bx-controls-direction a.disabled { display: none; }    
.best_product .bx-wrapper .bx-controls-direction a { text-indent: -999em; }   
.best_product .bx-wrapper .bx-prev { left: 0; background: url(/design/d4-0692/s023/images/main_best_arrow_l.png) no-repeat;  background-size: 80%; }
.best_product .bx-wrapper .bx-next { right: 0; background: url(/design/d4-0692/s023/images/main_best_arrow_r.png) no-repeat; background-size: 80%; }

/* .banner01 DIRECTION CONTROLS (NEXT / PREV) */
.main_banner01 .bx-wrapper .bx-controls-direction {  width: 100%; position: absolute; top: 45%; z-index: 9999; }
.main_banner01 .bx-wrapper .bx-controls-direction a { position: absolute; top: 0;  outline: 0;  text-indent: -9999px; z-index: 19999; height: 30px; opacity: 0.3; width: 30px; background: #000;  }
.main_banner01 .bx-wrapper .bx-controls-direction a.disabled {  display: none; }    
.main_banner01 .bx-wrapper .bx-controls-direction a { text-indent: -999em; }   
.main_banner01 .bx-wrapper .bx-prev { left: 0;   }
.main_banner01 .bx-wrapper .bx-next {  right: 0px;  }
.main_banner01 .bx-wrapper .bx-controls-direction a i { text-indent: 0px !important;  color: #fff; font-size: 1.5em; width:100%; height:100%; position: absolute; top:5px; left:0; text-align: center; }
.main_banner01 .bx-wrapper .bx-controls-direction a:hover {  opacity: 0.5; }

.main_banner01  .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0; width: 100%;  }
.main_banner01  .bx-pager { width: 100%;   z-index: 9999;  bottom: 10px;  position: absolute;  display: table; text-align: center; display: none;   }
.main_banner01  .bx-pager > div { display: inline-block; text-align: center; margin: 0 5px; }
.main_banner01  .bx-pager-item {  }
.main_banner01  .bx-pager-item a { text-indent: -999em;   width: 9px; height: 9px; border-radius: 50%; background: #fff; display: block;  }
.main_banner01  .bx-pager-item a.active { background: #555;}

/* .main_banner02 */
.main_banner02 .bx-controls-direction { display:none !important;}
.main_banner02 .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0; width: 100%; }
.main_banner02 .bx-pager { width: 100%;  left: 50%; z-index: 200;  bottom: 10px;  position: absolute; margin-left: -20px;  }
.main_banner02 .bx-pager-item a { width: 8px; height: 8px; border-radius: 50%; text-indent: -999em; margin-right: 7px; display: inline-block; background: #ededed; float: left;  }
.main_banner02 .bx-pager-item a.active { background: #666;}

.tabletOnly { display: none; }

/* 추천상품 */
#recmd {  }
#recmd figure { display: table; width:100%; }
.list_shopping1x li { border-top: 1px solid #f0f0f0; }
.list_shopping1x li img.listPic,
.list_shopping1x .list_shoppingInfo { display: inline-block; vertical-align: middle; float: none;  box-sizing: border-box; }

/* 스폐셜상품 */
.list_shopping3x ul {  }
.list_shopping3x li { box-sizing: border-box; text-align: center; }

/* 모바일 전용 */
@media (max-width: 640px) and (min-width: 320px) {
.m_ban02 img { width:100% !important; }
.m_ban02 li {width:9.8% !important; border-right:1px solid #ededed; }
}

.items { text-align: left !important; }




#md_hoiceWrap {
    margin: 30px 0 10px 0; /* 아래쪽 마진을 줄여서 배너와 버튼 간의 간격을 줄임 */
    border: 1px solid #e8e8e8;
    background: #64ffd3;
    width: 100%; /* 페이지 전체 너비에 맞추기 */
    max-width: 100%; /* 최대 너비를 100%로 설정 */
    overflow: hidden; /* 넘치는 부분 잘라내기 */
    padding: 0; /* 여백 제거 */
}

#md_hoiceWrap .Wrap {
    display: table;
    width: 100%; /* Wrap을 100% 너비로 설정 */
}

#md_hoiceWrap .Wrap > div {
    display: table-cell;
    border-right: 1px solid #e8e8e8;
    position: relative;
}

#md_hoiceWrap .Wrap > div:last-child {
    border: none;
}

#md_hoiceWrap .Wrap > div a {
    position: absolute;
    bottom: 35px;
    left: 45px;
    border: 1px solid #e4e4e4;
    background: #fff;
    font-size: 11px;
    padding: 3px 0 3px 13px;
    width: 80px;
    box-sizing: border-box;
    border-radius: 2px;
}

/* 배너 이미지 크기 조정 */
#md_hoiceWrap .Wrap > div img {
    width: 100%;  /* 배너가 100% 너비에 맞게 조정되도록 */
    height: auto; /* 비율에 맞게 높이 자동 조정 */
    object-fit: cover; /* 이미지가 잘리지 않도록 비율을 유지하며 영역에 맞게 잘림 */
}

#banner_type01 .Wrap > div a i {
    display: inline-block;
    padding-left: 5px;
}


/* 버튼 그룹 중앙 정렬 */
.button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* 각 버튼을 이미지로 대체 */
.button-group .tab-button {
    margin: 0 2px; /* 버튼 사이 여백을 5px로 줄임 */
    display: inline-block; /* 이미지 버튼을 블록처럼 표시 */
    width: 120px; /* 버튼 크기 (이미지의 크기) */
    text-align: center; /* 텍스트 중앙 정렬 */
    cursor: pointer;
}

/* 버튼 클릭 시 콘텐츠를 표시하기 위한 스타일 */
.button-group .button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 이미지 스타일 (원형 제거하고 이미지 크기만 조절) */
.button-group .tab-button img {
    width: 40%; /* 버튼 크기에 맞게 이미지 크기 조정 */
    height: 40%; /* 버튼 크기에 맞게 이미지 크기 조정 */
    object-fit: cover; /* 이미지 비율 유지하며 크기에 맞게 자르기 */
    transition: transform 0.3s ease; /* 이미지에 호버 효과 추가 */
}

/* 이미지 버튼에 호버 효과 */
.button-group .tab-button:hover img {
    transform: scale(1.05); /* 마우스 오버 시 이미지 크기 약간 확대 */
}

/* 텍스트 스타일 (폰트 연하고 크기 조절) */
.button-group .button-text {
    margin-top: 5px; /* 이미지와 텍스트 간격 */
    font-size: 11px; /* 텍스트 크기 (사이즈 조절) */
    color: #333; /* 텍스트 색상 */
    font-weight: 300; /* 텍스트 연하게 (가벼운 폰트) */
}

/* 카테고리 리스트 기본적으로 숨기기 */
.category-list {
    display: none;
}

/* 첫 번째 카테고리만 기본적으로 보이게 설정 */
.category-list[data-tab="1"] {
    display: block;
}

/* active 클래스를 가진 카테고리만 보이도록 설정 */
.category-list.active {
    display: block;
}

/* 버튼 클릭시 활성화되는 버튼 스타일 */
.tab-button.active {
    font-weight: 500; /* 활성화된 버튼의 텍스트는 조금 더 진하게 */
    color: #007BFF;  /* 활성화된 버튼 텍스트 색상 */
}

/* 호버 효과 */
.tab-button:hover {
    font-weight: 600; /* 버튼에 마우스를 올렸을 때 텍스트 두껍게 */
    color: #007BFF; /* 버튼에 마우스를 올렸을 때 텍스트 색상 */
}

/* BASIC css end */