/* 메인 배너	*/
#mVisual_wrap {
	position: relative;
	width: 100%;
	margin: 0 auto; 
	margin-top: -1px !important;
	overflow: hidden;
}
#mVisual_wrap .m_visual {
	position: relative;
	width: 100%;
	margin:0 auto;
	text-align: center;
	object-fit: cover;
	object-position: center center;
}
[class^="main_visual"] img,
[class*=" main_visual"] img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.m_visual .arrow_wrap { width:100%; height:auto; }
.m_visual .arrow_wrap > a { display:inline-block; height:auto; }
.m_visual .arrow_wrap > a.ab_left {position:absolute; left:10px; top: 50%; transform: translateY(-50%); width: 3rem; height: auto; }
a.ab_left img,a.ab_right img {filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));}
.m_visual .arrow_wrap > a.ab_right {position:absolute; right:10px; top: 50%; transform: translateY(-50%); width: 3rem; height: auto; } 	
.m_visual .bar_wrap {width:100%; margin:0 auto; position:relative; }
.bar_wrap .inner { position:absolute; left:50%; margin-left: -915px; bottom:35px; }
.bar_wrap .inner ul { text-align: center; }
.bar_wrap .inner ul li { display: inline-block; margin: 0 0px; }
.bar_wrap .inner ul li a { height: 24px; }

/* Swiper 영역 */
.bx-wrapper {
	position: relative;
  width: 100%;
  aspect-ratio: 3 / 2 !important;
  margin: 0 auto;
  overflow: hidden;
}
.bx-viewport {
  width: 100% !important;
  overflow: hidden;
  position: relative;
  height: auto !important;
}
.bxslider {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bxslider li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.swiper-pagination {
	position: absolute;
  width: auto !important;
  bottom: 20px;
  right: 0;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  text-align: center
}
.detail_visual {
	position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color : #ccc;
}
.detail_visual .swiper-slide {
	width: 100%;
  height: 100%;
  overflow: hidden;
}
.detail_visual .swiper-slide > img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.bx-prev,
.bx-next {
  display: block !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3rem;
  height: auto;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
}
.bx-prev {left: 10px;}
.bx-next {right: 10px;}
.bx-prev img, .bx-next img{
	display:block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}


/* 퀵 아이콘 리스트	*/
.quick_icon_list { width: 100%;	padding:30px 0;	font-size:0; text-align: center; }
.quick_icon_list li{ display: inline-block;	width: 16.6666%; color:#111; font-size: 1rem;}
.quick_icon_list li a{ display:block; width:100%; color:#111; }
.quick_icon_list li a img{ display:block; width:40px; margin: auto; padding-bottom: 4px; }
.quick_icon_list li a span{ display:block; width:100%; font-size:14px; font-weight: 500; margin-top: 5px;}

/* 메인 공통 */
.goodsList-wrap, .reserMonthly-wrap { margin-bottom: 60px; }
.goodsList-title {
	position: relative;
	display: flex;
	width: auto;
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 600;
	align-items: center; 
	color:#111;
}
.tit-top { display: flex; justify-content:space-between;}
.tit-top a {font-size: 13px; cursor: pointer; }
.main-goodsList { 
	position:relative; 
	display: flex; 
	flex-flow: nowrap; 
	justify-content: flex-start; 
	gap:16px;
	padding-bottom: 10px;
	/*overflow: hidden;
	overflow-x: scroll;
	-ms-overflow-style: none;*/
	overflow-x: auto;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
/*.main-goodsList::-webkit-scrollbar { /*display:none;*/ }*/
.main-goodsList::-webkit-scrollbar {
  height: 6px; /* 가로 스크롤일 경우 높이 설정 */
}

.main-goodsList::-webkit-scrollbar-track {
  background: transparent; /* 트랙은 배경과 자연스럽게 */
}

.main-goodsList::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.main-goodsList::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
.main-goodsList .goods {
	position:relative;
	display:flex;
	width: 100%;
	max-width: 224px; 
	height: auto;
	box-sizing: border-box;
}
.main-goodsList .goods > a{
	display: block;
}
.main-goodsList .goods .goods-image {	
	position:relative;
	display: block;
	width:224px;
	max-width: 224px;
	height:224px;
	background-color: #ccc;
	aspect-ratio: 1 / 1;
	object-fit: cover; 
	border-radius:8px; 
}
.goods-content { position:relative; width: 100%; padding-top: 12px; box-sizing: border-box; z-index:0; color:#111;}
.goods-content .goods-info-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;}
.goods-content .goods-info-top .goods-date { font-weight:600; }
.goods-content .goods-info-top .goods-reser { font-size:15px; }
.goods-content .goods-info-top .goods-reser span { color:#0088ff; font-weight: 800;}
.goods-content .goods-title {
	display: -webkit-box;
	font-size:16px;
	font-weight: 500;
	/*word-break: keep-all;*/
	overflow-wrap: break-word;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 48px;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.goods-content .goods-price { margin-top: 4px; font-size:18px; font-weight:700; color:#111; }
.goods-content .goods-price > span { font-size:14px; font-weight:400; margin-left: 2px; color:#111;}

/*메인 상품 뱃지*/
.goods .label-state { 
	display: block;
	position:absolute;
	top:8px;
	left:8px;
	border-radius: 5px; 
	text-align: center;
	align-items: center;
	font-size: 11px;
	/*line-height: 20px;*/
	font-weight: 600; 
	color: #fff;
	z-index: 2;
	box-sizing: border-box; 
}
.badgeList { position:absolute; display: flex; flex-wrap: nowrap; top:8px; left:8px; gap: 6px; }
.badgeList .badge {
	position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 30px;
  box-sizing: border-box;
  z-index: 2;
  text-align: center;
}
/* 뱃지 스타일 */
.badge1 { background-color : #06b986; } /* 단독 */
.badge2 { background-color : #865DFB; } /* 연합 */
.badge3 { background-color : #FE8262; }	/* 직원 */

/* 메인 - 월별 예약 현황 */
/*.reserMonthly-wrap { margin-top: 10px; }*/
.listTop { display: flex; justify-content:space-between; margin-bottom: 12px; /*padding: 0 20px;*/}
.listTop .monthlySelect { 
	width: 100px;
	border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  outline: none;
}
 .monthlySelect:focus { border-color: #06b986; box-shadow: 0 0 3px rgba(6, 185, 134, 0.5); }
.listTop a {font-size: 14px;}
/*.monthList {
	padding: 0 20px;
} 반응형 추가*/
.monthly-buttons { 
	display: block;
	margin-bottom: 20px;
	white-space: nowrap;
	overflow-x: scroll;
	-ms-overflow-style: none;
}
.monthly-buttons::-webkit-scrollbar{
  display:none;
}
.monthly-buttons li {
	display: inline-block;
	box-sizing: border-box;
}
.month { 
	width: 50px;
	height: 34px;
	padding:7px 0;
	margin-right: 6px;
	border:1px solid #ddd;
	border-radius:20px;
	align-content: center;
	font-size: 14px;
	font-weight: 500;
	color: #555; 
	vertical-align: middle;
	white-space: nowrap; 
	cursor: pointer; 
	box-sizing: border-box; 
}
.month.on { background: linear-gradient(to right, #88DA91, #06b986); border: none; color: #fff; font-weight: 600;}

/* 2025-08-05 */
/* 월별예약현황 더보기 버튼 추가 */
.goods .m-btn-more {
	width: 100px;
	height: 100%;
	box-sizing: border-box;
	display: table !important;
}
.btn-more {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 15px;
	color: #333;
	line-height: 22px;
}
.btn-more:before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	text-align: center;
	margin: 0 auto 20px;
	background: url('/images/main/btn-more.png') no-repeat left top;
	background-size: 40px;
}


/* 상품 추천 버튼 */
.tag-buttons,
.tag-buttons-recomm {
	display:flex;
	column-gap: 12px;
	flex-wrap: nowrap;
	margin-bottom: 20px;
	/*padding: 0 20px; 반응형 추가*/
	overflow: hidden;
	overflow-x: scroll;
	-ms-overflow-style: none;
}
.tag-buttons::-webkit-scrollbar,
.tag-buttons-recomm::-webkit-scrollbar {
  display:none;
}
.tagBtn,
.tagBtnRecomm {
	align-content: center;
	vertical-align: middle;
	padding: 7px 16px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
	font-size: 15px;
	font-weight: 500;
	color: #555;
	white-space: nowrap;
	cursor: pointer;
}
.tagBtn.on,
.tagBtnRecomm.on {
	border:none;
	background: linear-gradient(to right, #88DA91, #06b986);
	color: #fff;
	font-weight: 600;
}

/* 월별 예약 현황 */
.main-goodsListAll {
	display: inline-block;
	width: 100%;
	overflow-x: hidden;
}
.main-goodsListAll li {
	display: inline-block !important;
	width: 32% !important;
	margin-right: 2%;
	margin-bottom: 50px;
}
.main-goodsListAll li:nth-child(3n) {
	margin-right: 0;
}
.main-goodsListAll .goods {
	max-width: 100%;
}
.main-goodsListAll .goods .goods-image {
	width: 100%;
	height: auto;
	max-width: none;
} 

@media all and (max-width:720px) {
	
}
@media all and (max-width:640px) {
	.quick_icon_list li {
    width: 33.3333% !important; /* 한 줄에 3개 */
  }
  .main-lnb-list {
  	display:none;
  }
	.main-goodsListAll li {
		width: 49% !important;
	}
	.main-goodsListAll li:nth-child(2n) {
		margin-right: 0;
	}
	.main-goodsListAll li:nth-child(3n) {
		margin-right: 2%;
	}
	.main-goodsListAll li:nth-child(6n) {
		margin-right: 0;
	}
	#mVisual_wrap {
		padding: 0 20px;
	}
	#mVisual_wrap .m_visual .bx-wrapper {
  	border-radius: 10px;
	}
	.goods-date {
		font-size: 15px;
	}
}
@media all and (max-width:480px) {

}
@media screen and (max-width:390px) {
	.main-goodsListAll li {
		width: 100% !important;
	}
	.main-goodsListAll li:nth-child(3n) {
		margin-right: 0;
	}
}