@charset "utf-8";
@import url(./default.css);
* { box-sizing: border-box;}
body.main_new_body{
  position: relative;
  font-family: 'pret-m';
  color: #474747;
  background-color: #EFEFEF;
}
.h_btnn:hover {
  background-color: #474747 !important;
  border: 2px solid #474747 !important;
}
.bg-wrap{
  width: 100%;
  position:relative;
  overflow: hidden;
  z-index: 9998;
}
.bg-wrap img{
  display: block;
  width: 100%;
  filter: brightness(0.5);
}
.ac_box {
}

.ac_box .acco1 {
  width: 80%;
}

.ac_box .acco2 {
  width: 60%;
}

.ac_box .acco3 {
  width: 60%;
}

.margin1{
  margin-bottom: 5%;
}
.ac_box .accordion {
  border: none;
  background-color: transparent;
  transition: 0.4s;
}

.ac_box .flex {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  column-gap: 10px;
  row-gap: 5px;
}

.ac_box label {
  display: flex;
  margin-right: 5px;
  align-items: baseline;
}

.ac_box .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  font-size: 18px;
}

.accordion {
  cursor: pointer;
  padding: 3px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  width: 95%;
  border-bottom: 2px solid #000;
  font-size: 24px;
}


.ac_box .accordion:hover + .panel,
.ac_box .accordion.active + .panel,
.ac_box .panel:hover {
  max-height: 500px;
  transition: max-height 0.4s ease-out;
  display: block;  /* 추가된 부분 */
}

.ac_box .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  font-size: 18px;
  display: none;  /* 추가된 부분 */
}

/* 추가된 부분: .active인 경우에도 마우스 클릭 시 펼쳐진 상태 유지를 위해 */
.ac_box .accordion:active + .panel {
  max-height: 500px;
  transition: max-height 0.4s ease-out;
  display: block;  /* 추가된 부분 */
}

.panel {
  display: none;
  overflow: hidden;
}
.panel p{
  word-break: keep-all;
  width: 95%;
  line-height: 35px;
  font-size: 22px;
  font-family: 'GowunDodum-Regular';
}

.accordion:after {
  content: ''; /* Unicode character for "plus" sign (+) */
  display: block;
  background-image: url(/images/common/acco_arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 13px;
  float: right;
  margin-left: 5px;
  margin-top: 10px;
  width: 17px;
  height: 15px;
}


.textbox{
  color: #fff;
  position: absolute;
  bottom: 30%;
  left: 10%;
  z-index: 9999;
}
.textbox p {
  font-size: 1.09vw;
  margin-bottom: 15px;
} 
.textbox h2 {
  font-size: 2.6vw;
  line-height: 1.5;
}

#mobile{
  display: none;

}
.banner{
  display: none;
  width: 100%;
  margin: 0 auto;
  margin-top: 10%;
}
.banner img{
  display: block;
  width: 100%;
}

/* 전체 검색 필터 영역 */
.search-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 65px 0;
}
/* 각 필터 전체 영역 */
.each-filter-wrap {
  width: 100%;
	max-width: 1300px;
	display: flex;
  justify-content: center;
	align-items: center;
	gap: 47px;
}

/* 각 필터 타이틀 영역("날짜선택" 등) */
.filter-title {
  width: 10%;
	font-size: 30px;
  font-family: 'pret-b';
	color: #474747;
	white-space: nowrap;
  text-align: right;
}

/* 각 필터 내용 영역*/
.filter-content {
  width: 80%;
  position: relative;
	display: flex;
	align-items: center;
  padding: 19px 40px 50px;
  border-bottom: 1px solid #474747;
	gap: 18px;
  font-size: 23px;
  letter-spacing: 0.46px;
}
.filter-content.days_inner {
  padding: 19px 40px;
  background: #fff;
	border-radius: 19px;
  border-bottom: none;
}

/* 입실일 / 퇴실일 공통 */
.day1,
.day2 {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* "입실일", "퇴실일" */
.date_text {
	white-space: nowrap;
}

/* 날짜 input */
.days_inner input[type="date"] {
	border: none;
	outline: none;
	padding: 10px 19px;
  border-radius: 15px;
	background-color: #F3F3F3;
	cursor: pointer;
  font-size: 23px;
  font-family: 'pret-m';
  color: #474747;
  user-select: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.6);
	cursor: pointer;
}
/* ~ 표시 */
.between {
	font-size: 30px;
	margin: 0 24px 0 32px;
}
/* 1박 2일 */
#days {
	position: absolute;
  white-space: nowrap;
  right: 11%;
}

/* 검색필터 - 공용 */
.filter-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 3.7vw;
  width: 100%;
}
@media (min-width:1921px) {
  .filter-list {
    gap: 70px;
  }
}
.filter-list li {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  cursor: pointer;
}

/* 검색필터 - 테마, 할인 */
.filter-list.theme input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* label을 li처럼 동작하게 */
.filter-list.theme label {
	display: flex; /* 기존 li 스타일 유지 */
  flex-direction: column;
	align-items: center;
  gap: 10px;
	width: 100%;
	height: 100%;
  padding: 5px;
	cursor: pointer;
}

/* 체크된 상태 스타일 (기존 li.active 대체) */
.filter-list.theme input[type="checkbox"]:checked + label {
	color: #A17442;
}
/* 체크되었을 때 아이콘 색 변화 */
.filter-list.theme input[type="checkbox"]:checked + label img {
	filter: brightness(0) saturate(100%) invert(41%) sepia(18%) saturate(823%) hue-rotate(348deg);
}
.filter-list.discount {
  justify-content: flex-start;
  margin-left: 10px;
}


/* 지역 필터  */
.filter-list.area { 
  gap: 48px;
  justify-content: flex-start;
}
.filter-list.area li {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]{
  /* display: none; */
  width: 18px;
  height: 18px;
  border:1px solid #474747;
  margin-right: 8px;
} 
.filter-list.area input[type="checkbox"] {
	accent-color: #A17442;
  cursor: pointer;
}
.filter-list.area li:has(input[type="checkbox"]:checked) {
  color: #A17442;
}
/* .filter-list li:hover, .filter-list.area li:has(input[type="checkbox"]:checked) {
  color: #A17442;
}

.filter-list li:hover input[type="checkbox"] + label img {
	filter: brightness(0) saturate(100%) invert(41%) sepia(18%) saturate(823%) hue-rotate(348deg);
} */


.filter-list li label { cursor: pointer;}

/* 검색 버튼 */
.btn-search {
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: 9px;
  font-size: 26px;
  letter-spacing: 1.3px;
  background-color: #9b9b9b;
  color: #fff;
  margin: 0 auto 150px;
  width: 192px;
  height: 64px;
  cursor: pointer;
  outline: none;
  border: none;
}
.btn-search:hover {
  background-color: #474747;
}

@media(max-width:1200px){
  /* ~ 표시 */
.between {
	margin: 0 16px 0 24px;
}
/* 1박2일 */
#days  { right: 2%;} 

input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
/* 지역 필터  */
.filter-list.area { 
  justify-content: flex-start;
  gap: 3vw;
}

}
@media (max-width:1024px){
  /* 검색 필터 전체 영역 */
  .search-filter {
    padding: 40px 6.25vw;
    gap: 40px;
  }
  /* 각 필터 전체 영역 */
  .each-filter-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  /* 각 필터 타이틀 ("날짜선택" 등) */
  .filter-title {
    width: 100%;
    font-size: 18px;
    text-align: left;
    overflow: hidden;
  }
  .filter-title::after {
    content: '';
    display: inline-block;
    width: 96%;
    height: 1px;
    background-color: #474747;
    margin-left: 15px;
    margin-bottom: 5px;
  }
  /* 각 필터 내용 영역 */
  .filter-content {
    width: 100%;
    flex-direction: column;
    border-bottom: none;
    padding: 19px 10px;
    align-items: flex-start;
    border-radius: 14px;
    gap: 18px;
    font-size: 14px;
    letter-spacing: 0.28px;
  }
  .filter-content.days_inner {
    width: 80%;
    padding: 19px 40px;
    border-radius: 14px;
  }
  /* 날짜 input */
  .days_inner input[type="date"] {
    padding: 10px 19px;
    border-radius: 10px;
    font-size: 15px;
  }
  /* ~ 표시 */
  .between {
    font-size:19px;
    margin: 0 22px;
  }
  /* 1박2일 */
  #days  { 
    position: static;
    margin: 0 7px;
  } 

  /* 검색필터 */
  .filter-list { 
    justify-content: flex-start;
    gap: 7vw;
  }
  .filter-list li {
    font-size: 15px;
    letter-spacing: 0.3px;
  }

 /* 검색 버튼 */
  .btn-search {
    width: 148px;
    height: 43px;
    font-size: 16px;
    letter-spacing: 0.8px;
    margin: 0 auto 120px;
  }

  /* 테마, 할인 이미지 사이즈 축소 */
  .filter-list.theme label img {
    max-width: 63px;
  }
  .filter-list.theme img.discount01 {
    max-width: 65px;
  }
  .filter-list.theme img.discount02 {
    max-width: 100px;
  }

  .filter-list.discount {
    justify-content: center;
    margin-left: 0px;
  }
}
@media(max-width:500px){
      .filter-content {
        align-items: flex-start;
        border-radius: 14px;
        width: 100%;
        margin: 0 auto;
        padding: 14px 0;
        gap: 10px;
        font-size: 14px;
        letter-spacing: 0.28px;
    }
    .filter-content.days_inner { 
      width: 100%;
      padding: 14px 8vw;
    }

    /* 검색필터 */
    .filter-list { 
      justify-content: center;
      gap: 9.6vw;
    }
    .filter-list li {
      font-size: 14px;
    }

    /* 지역 필터  */
    .filter-list.area { 
      gap: 9vw;
      justify-content: center;
    }

   
}
@media(max-width:400px){
    .filter-content.days_inner { padding: 14px 3vw 14px 5vw; }
}
@media(max-width:359px){
    .filter-content.days_inner { padding: 14px 3vw; }
    .filter-list.area {
        gap: 8vw;
    }
}



@media(max-width:991px){

  
 
  .bg-wrap {
    height: 300px;
  }
  .bg-wrap img {
    height: 300px;
  }
  .textbox p {
    font-size: 1.5vw;
    margin-bottom: 15px;
  } 
  .textbox h2 {
    font-size: 3vw;
    line-height: 1.5;
  }
  
}
@media(max-width:768px){
  
  .header .logo {
    width: 116px !important;
    top: 18% !important;
    left: 1.5% !important;
    transform: translate(-3%,-50%) !important;
  }
  .h_btnn {
    font-size: 13px !important;
  }
  input[type="checkbox"] + label{
    border-color: #474747;
  }
  .bg-wrap img{
    width: 100%;
  }

  .bg-wrap{
    position: relative;
  }

  .textbox{
    left: 5%;
  }
  #text_pc{
    display: none;
  }
  .textbox h2{
    font-size: 22px;
    word-break: keep-all;
  }
  .textbox p{
    font-size: 14px;
  }
  .banner{
    display: block;
  }
}

@media(max-width:500px){
  .bg-wrap{
    min-height: 280px;
  }
  .bg-wrap img{
    min-height: 280px;
  }
}



/* 배너 실시간 공구 숙소 */
.real-time-banner {
  padding: 0 10vw 90px;
}

.banner-header {
  text-align: center;
  margin-bottom: 40px;
}
.banner-header h2 {
  font-size: 40px;
  margin-bottom: 15px;
}
.banner-header p {
  font-size: 21px;
}
.real-time-banner .swiper-wrap {
  position: relative;
  width: 100%;
}
.real-time-banner .swiper.real-time-swiper {
  overflow: hidden;
}

.real-time-banner .swiper-wrapper {
  justify-content: center;
  padding-left: 10px;
}

/* 슬라이드 개수 5개 이상일 때 */
.real-time-banner.align-start .swiper-wrapper {
	justify-content: flex-start;
  padding-left: 0;
}

.real-time-banner.align-center .swiper-wrapper {
	justify-content: center;
}

.real-time-banner .swiper-slide {
  position: relative;
  border-radius: 16px;
  /* overflow: visible; */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
/* .real-time-banner .swiper-slide .slide-inner {
  overflow: hidden;
  border-radius: 16px;
} */
.real-time-banner .swiper-slide img {
  width: 100%;
  object-fit: cover;
  display: block;
  max-width: 368px;
}

.slide-text {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 25px 0 20px 20px;
  z-index: 1;
  background: transparent linear-gradient(0deg, #4B3A26 0%, #4B3A26DD 33%, #4B3A2600 100%) 0% 0% no-repeat padding-box;
  color: #fff;
}

.slide-text strong {
  display: block;
  width: 91%;
  font-size: 23px;
  letter-spacing: 1.15px;
  margin-bottom: 7px;
  font-weight: normal;

  display: -webkit-box;
	-webkit-line-clamp: 2;   /* 최대 2줄 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
}

.slide-text span {
  display: inline-block;
  width: 97%;
  font-size: 18px;
  letter-spacing: 0.9px;
  font-family: 'pret-r';
}
/*중앙 예약하기 문구 */
.reser-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  background-color: rgba(75,58,38,0.45);
  opacity: 0;
}
.reser-text span {
  display: block;
  transform: translateY(50%);
  transition: all 0.5s ease;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.75px;
}
.reser-text:hover {
  opacity: 1;
}
.reser-text:hover span{
  transform: translateY(0);
}
/* 화살표 */

/* 기본 화살표 아이콘 제거 */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-prev, .swiper-button-next {
  font-size: 24px;
  color: #000 !important; 
  font-family: sans-serif !important;
  font-weight: 600;
  width: 60px !important;
  height: 60px !important;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 10px #00000029;
}
/* 이전 버튼 (<) */
.swiper-button-prev {
  left: -30px !important;
}
.swiper-button-prev::before {
  content: "〈";
  transform: translateX(-6px);
}

/* 다음 버튼 (>) */
.swiper-button-next {
  right: -30px !important;
}
.swiper-button-next::before {
  content: "〉";
  transform: translateX(6px);
}

@media(max-width:1200px){
  .real-time-banner .swiper-wrap { padding: 0 10px;}
  .banner-header h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .banner-header p {
    font-size: 16px;
  }
  .slide-text strong {
    font-size: 19px;
    letter-spacing: 0.95px;
    margin-bottom: 3px;
  }
  .slide-text span {
    font-size: 13px;
    letter-spacing: 0.65px;
  }
  /*중앙 예약하기 문구 */
  .reser-text {
    background-color: rgba(75,58,38,0);
    opacity: 1;
  }
  .reser-text span {
    transform: translateY(0);
    font-size: 14px;
    letter-spacing: 0.7px;
  }



  .swiper-button-prev, .swiper-button-next {
    font-size: 20px;
    width: 50px !important;
    height: 50px !important;
  }
  .swiper-button-prev {
    left: -15px !important;
  }
  .swiper-button-next {
    right: -15px !important;
  }
  .swiper-button-prev::before {
    transform: translateX(-5px);
  }
  .swiper-button-next::before {
    transform: translateX(5px);
  }
}
@media(max-width:768px){
  .real-time-banner {
    padding-bottom: 0;
  }
  .real-time-banner .swiper-wrapper {
    justify-content: flex-start;
    padding-left: 0;
  }
 
}
@media(max-width:500px) {
   .banner-header h2 {
    font-size: 25px;
    margin-bottom: 10px;
  }
  .banner-header p {
    font-size: 13px;
    word-break: keep-all;
  }
}