@charset "UTF-8";
  .main-text {
      font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
      font-size: 30px;
      font-weight: bold;
      fill: #2c3e50;
    }

    .com-bg {
      fill: #e74c3c;
      rx: 8;
    }

    .com-text {
      font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
      font-size: 28px;
      font-weight: bold;
      fill: #ffffff;
    }

    .topmenu {
      border: 0px solid #000;
    }

    .topmenu li {
      min-width: 220px;
      text-align: center;
    }
    .topmenu li a.on{font-weight: 800; font-size:20px; }
    .footer-layout2{background-color: #373737 !important;}
    /* flatpickr 연도 선택 필드 강제 복원 및 스타일 복구 */
/* 연도 전체 영역을 위로 올림 */
.flatpickr-current-month .numInputWrapper {
  position: relative !important;
  top: -20px !important; /* 숫자 조정 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 연도 숫자 스타일 */
.flatpickr-current-month input.cur-year {
  all: unset;
  width: 70px !important;
  font-size: 16px !important;
  text-align: center !important;
  color: #000 !important;
  appearance: auto !important;
  -moz-appearance: textfield !important;
}
/* 룸선택 UI */
.room-popup {
  position: absolute;
  top: 100%; /* trigger 밑에 나오도록 */
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  z-index: 9999;
  display: none; /* 초기 상태 */
}

.room {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px;
  background: #f5f5f5;
  border-radius: 5px;
}
.room label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.room-popup {
  z-index: 9999;
  position: absolute;
}
.cursor-pointer{
  cursor:pointer !important;
}
.th-sort-bar{border-bottom:2px solid #444;}
.nice-select-left20 .current {
  padding-left: 20px; /* 원하는 만큼 조절 가능 */
}
/* 옵션체크버튼 */
.facility-option {
  display: inline-block;
  padding: 8px 14px;
  margin: 6px 6px 0 0;
  border: 1px solid #ccc;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s ease;
  user-select: none;
}

.facility-option.selected {
  background-color: var(--theme-color);
  color: #fff;
  border-color: var(--theme-color);
}
.no-bg-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .carousel-indicators {
  display: flex !important;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  z-index: 10;
}
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #999;
  margin: 0 4px;
  opacity: 0.5;
  transition: opacity 0.6s ease;
  border: none;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #333;
}
ul, li{padding-left:0; list-style: none;}
.font-100{font-weight:100 !important;}
.font-200{font-weight:200 !important;}
.font-300{font-weight:300 !important;}
.font-400{font-weight:400 !important;}
.font-500{font-weight:500 !important;}
.font-600{font-weight:600 !important;}
.font-700{font-weight:700 !important;}
.font-800{font-weight:800 !important;}
.font-900{font-weight:900 !important;}

.font-12{font-size: 12px !important;}
.font-13{font-size: 13px !important;}
.font-14{font-size: 14px !important;}
.font-16{font-size: 16px !important;}
.font-18{font-size: 18px !important;}
.font-20{font-size: 20px !important;}
.font-22{font-size: 22px !important;}
.font-24{font-size: 24px !important;}
.font-26{font-size: 26px !important;}
.font-28{font-size: 28px !important;}
.font-30{font-size: 30px !important;}
.font-32{font-size: 32px !important;}
.font-34{font-size: 34px !important;}
.font-36{font-size: 36px !important;}
.font-38{font-size: 38px !important;}
.font-40{font-size: 40px !important;}
.font-42{font-size: 42px !important;}

.bg-theme{background-color: var(--theme-color); color:#fff;}
.space-90{padding-top:calc(var(--section-space) - 30px);}
.space-20{padding-top:calc(var(--section-space) - 20px);}
.border-top-2px {
  border-top: 2px solid var(--black-color2)  !important;;
}
html {
  scroll-behavior: smooth;
}
.col-5ths {
  flex: 0 0 20%;
  max-width: 20%;
}
.mobile-gal-size{max-height:200px;}
/* 작은 화면(모바일)에서는 2개씩 */
@media (max-width: 576px) {
  .col-5ths {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .room-summary{font-size:14px !important; font-weight: normal; margin-left:-4px;}
  .mobile-gal-size{max-height:150px;}
}

/* 중간 화면(태블릿)에서는 3개씩 */
@media (min-width: 577px) and (max-width: 768px) {
  .col-5ths {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .mobile-gal-size{max-height:200px;}
}
.half-highlight-yellow-2 {
  background:linear-gradient(180deg, transparent 60%, yellow 60%);
  font-size:1.2em;
}
/* 상단 검색없을때 */
.dummy-top{position: relative;margin-top: -55px;}

.currency{letter-spacing: -2px;}
.underline{text-decoration: underline !important;}
/* booking area  start --------------------*/
.mypage-cate {
  position: relative;
  background-color: var(--white-color);
  border: 2px solid var(--theme-color);
  box-shadow: 0px 20px 20px rgba(204, 204, 204, 0.25);
  border-radius: 0px;
  z-index: 3;
  margin-top: -55px;
  /* Large devices */
}
.mypage-cate a{font-size:var(--font-size);}
@media (max-width: 1199px) {
  .mypage-cate {
    /* padding: 20px 20px; */
  }
  .mypage-cate a{font-size:var(--font-size);}
}
.mypage-cate.link{
  font-size:2.6m;
}
.mypage-cate div.active{background-color:var(--gray-color);}
.mypage-cate div.active a{ color:var(--black-color2) !important;}
.list-style-none{list-style:none !important;}
.step-wrapper {
  display: flex;
  flex-wrap: nowrap; /* 줄바꿈 비허용 */
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-size: 24px;
}

.step-box {
  flex: 1 1 150px;
  min-width: 180px;
  max-width: 250px;
  padding: 1.6rem 1rem;
  border: 2px solid var(--theme-color);
  border-radius: 1rem;
  text-align: center;
  position: relative;
  min-height: 120px;
}

.step-box:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2.2rem;
  width: 2.2rem;
  height: 2px;
  background-color: #8AB03E;
  transform: translateY(-50%);
}



.btn-tag {
  display: inline-block;
  border: none;
  line-height: 1;
  padding: 9.5px 14px;
  margin-right: 2px;
  margin-bottom: 10px;
  text-transform: capitalize;
  color: var(--title-color);
  font-size: 16px;
  font-family: var(--body-font);
  font-weight: 400;
  background-color: var(--gray-color);
  border-radius: 4px;
}

.btn-tag:hover {
  background-color: var(--theme-color);
  color: var(--white-color) !important;
}

.popup-login-register {
  max-width: 1024px;
}
.popup-login-res {
  max-width: 1200px;
}
/* promotion */
.scroll-wrapper {
overflow-x: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.scroll-card {
  flex: 0 0 33%; /* 한 카드 = 25% (col-3 유사) */
  min-width: 300px;
  max-width: 400px;
  scroll-snap-align: start;
  padding: 0 10px;
  box-sizing: border-box;
}

.scroll-card-inner {
  border: 0px solid #ddd;
  border-radius: 0px;
  overflow: hidden;
  height: 100%;
}

.scroll-card-inner img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.scroll-buttons {
  text-align: center;
  margin-top: 1rem;
}

.scroll-buttons button {
  margin: 0 5px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border: none;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.col_one_third label{margin-top:30px;}
/* width */
.w-5{width:5% !important;}
.w-10{width:10% !important;}
.w-15{width:15% !important;}
.w-20{width:20% !important;}
.w-25{width:25% !important;}
.w-30{width:30% !important;}
.w-35{width:35% !important;}
.w-40{width:40% !important;}
.w-45{width:45% !important;}
.w-50{width:50% !important;}

input,textarea,select{padding:15px !important;}
@media (min-width: 577px) {
  #hotel-popup-main, #thotel-popup-main{
    min-width: 600px;
  }
}
#hotel-popup-main .mhotel-list, #thotel-popup-main .mhotel-list{}
#hotel-popup-main .mhotel-list .hotelnm,#thotel-popup-main .mhotel-list .hotelnm{border: 0px solid #ddd;cursor:pointer;}
#hotel-popup-main .mhotel-list .hotelnm:hover,#thotel-popup-main .mhotel-list .hotelnm:hover{background-color: #eee;}

.mh-230{max-height:230px;}
/* brandSlider1 내부의 swiper-wrapper에만 적용 */
#brandSlider1 .swiper-wrapper {
  justify-content: center;
}
/* 기본 상태 (모바일): .pc-only는 숨기고, .mobile-only는 보이게 설정 */
.pc-only {
  display: none !important; /* !important를 사용하여 다른 스타일에 덮어쓰이지 않도록 함 */
}
.mobile-only {
  display: block !important; /* span 등 인라인 요소에 사용 시 'inline' 또는 'inline-block'으로 변경 */
}

.th-menu-toggle {
  width: 40px;
  height: 40px;
  margin:5px;
  padding: 0;
  font-size: 28px;
  border: none;
  border-radius: 8px;
  background-color: var(--theme-color);
  color: var(--white-color);
  display: inline-block;
}

.th-menu-toggle:hover {
  background-color: var(--title-color);
}

.prod-text{max-height:500px; -webkit-overflow-scrolling:touch;}

/* =================================
   Nice-Select Mobile Arrow Fix
====================================*/
@media (max-width: 767px) {
  .nice-select .current {
    /* 화살표가 들어갈 공간(약 40px)을 확보합니다. */
    padding-right: 40px !important; 
    
    /* 텍스트가 길어질 경우 잘림 처리를 위한 추가 스타일 */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  h4.prod-tit{font-size:16px; font-weight: 400;}
  .prod-text{max-height:200px; -webkit-overflow-scrolling:touch;}
}
/* =================================
   Compact Nice-Select Style
====================================*/
/* 사용법: <select> 태그에 'nice-select-compact' 클래스를 추가하세요. */
/* 예시: <select class="nice-select border nice-select-compact"> */

/* 1. select 박스의 전체 높이와 폰트 크기 조절 */
.nice-select.nice-select-compact {
  height: 40px; /* 원하는 높이로 조절 (기존 56px) */
  line-height: 38px; /* 높이 - 테두리(2px) */
  font-size: 14px; /* 폰트 크기 조절 (기존 16px) */
}

/* 2. 화살표 아이콘 위치 중앙 정렬 */
.nice-select.nice-select-compact:after {
  top: 50%;
  margin-top: -4px; /* 화살표 높이(8px)의 절반 */
  right: 15px;
}

/* 3. 드롭다운 목록(옵션)의 높이와 여백 조절 */
.nice-select.nice-select-compact .option {
  line-height: 36px;
  min-height: 36px;
  padding-left: 15px; /* 좌측 여백 조절 */
}
/* custom */
.rounded-10 {
  border-radius: 1rem;
}
.resort-del{position: absolute; right:10px; top:0px;}
.hotel-tag{
  /* position: absolute; left:10px; top:0px; */
  background-color: #7FB3D5;
  color:#fff;
  font-size:12px;
  padding:3px 10px;
}

/* 커스텀 체크박스 라벨 */
input[type="checkbox"] {
  display: none;
}
.custom-checkbox {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  font-size: 16px;
  line-height: 1.4;
}

.custom-checkbox::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px; /* ✅ 중앙보다 약간 아래로 내림 */
  width: 20px;
  height: 20px;
  border: 2px solid var(--theme-color) !important;
  background-color: #fff;
  border-radius: 0px;
  box-sizing: border-box;
}

/* 체크된 상태 */
input[type="checkbox"]:checked + .custom-checkbox::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 14px;
  background-color: var(--theme-color);
  color: #fff;
  line-height: 14px;
  text-align: center;
  border-color: var(--theme-color);
}
.text-999{color:#999 !important;}

.package-card .box-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: start; /* 상단 정렬을 위해 변경 */
  -webkit-align-items: flex-start; /* 상단 정렬을 위해 변경 */
  -ms-flex-align: start; /* 상단 정렬을 위해 변경 */
  align-items: flex-start; /* 핵심 변경 */
  /* font-size: 20px; */
  margin-bottom: 24px;
}

.accordion-card.style2{border-radius: 5px;}
.accordion-card.style2 .accordion-body {
  border-radius: 0;
  border: none;
  padding: 0px 20px 20px;
}

.text-black{color:var(--black-color2) !important;}
.privacy{font-size:14px;}


.breadcumb-title {text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);}
/* 3. 제목(h1)의 색상을 검은색으로 변경합니다. */

/* =================================
   Flatpickr Font Size Fix
====================================*/
/* flatpickr 내부 월/년 선택 폰트 크기를 주변과 맞게 조정 */
.flatpickr-calendar select,
.flatpickr-calendar .numInputWrapper input {
    font-size: 13px !important; /* 다른 글자와 어울리는 크기로 조절 (예: 13px) */
}
.flatpickr-calendar {
  /* 다른 라이브러리(nice-select 등)의 z-index 값보다 높게 설정합니다. */
  z-index: 9999 !important;
}

/* 달력 한달만 보이게 */
.daterangepicker .drp-calendar.right {
  display: none !important;
}

/* Default style for mobile (hidden) */
#deepsearch {
  display: none;
}
#deepsearchbtn{display: ;}

/* Style for PC screens (768px and wider) */
@media (min-width: 768px) {
  #deepsearch {
    display: block; /* Or flex, grid, etc., as needed */
  }
  #deepsearchbtn{display: none;}
}

.roomcalc {
  /* 모양 및 크기 */
  width: 25px;
  height: 25px;
  border-radius: 50%; /* 원형으로 만들기 */
  
  /* 디자인 */
  border: 1px solid #ced4da;
  background-color: #f8f9fa;
  color: #333; /* 아이콘(+,-) 색상 */
  font-size: 16px; /* 아이콘 크기 */
  
  /* 기타 */
  cursor: pointer;
  transition: background-color 0.2s ease; /* 부드러운 색상 변경 효과 */
  
  /* 아이콘 중앙 정렬을 위한 코드 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 마우스를 올렸을 때 */
.roomcalc:hover {
  background-color: #e9ecef;
}

/* 클릭했을 때 */
.roomcalc:active {
  background-color: #dee2e6;
  border-color: #adb5bd;
}
.bg-light-green{background-color:#9EC359}
.bg-light-green:hover{background-color:#9EC359}

/* 모바일에서 form-select의 화살표 위치를 padding 안쪽으로 조정 */
@media (max-width: 767px) {
  select.form-select {
    background-position: right 0.3rem center !important; /* 12px 위치로 변경 */
  }
}

.item-option-title{font-size:16px; font-weight: 600; text-decoration: underline;}

.mbtn{
    background-color: var(--theme-color) !important;
    padding: 5px 10px;
    color: #fff;
    border-radius: 15px;
    border: 1px solid var(--theme-color) !important;
}


.space-prod-detail{height:30px;}


.person-tip{position:relative;display:inline-flex;align-items:center;gap:2px;cursor:pointer}
.person-tip img{vertical-align:middle}
.person-tip::after{
  content:attr(data-tip);
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(100% + 8px);
  background:#111;color:#fff;padding:6px 8px;border-radius:6px;
  font-size:12px;line-height:1.3;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.15);opacity:0;pointer-events:none;z-index:99;
  transition:opacity .15s;
}
.person-tip::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:100%;border:6px solid transparent;border-top-color:#111;
  opacity:0;transition:opacity .15s;
}
.person-tip:hover::after,.person-tip:hover::before{opacity:1}