/* 화면스크롤방지 */
body.m-menu-open,
body.intro-open {
  overflow: hidden;
}

/* ================= 인트로 영상 */
.intro-video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--gray-600);
  opacity: 1;
  transition: opacity 2s;
  /* 헤더보다 위로 */
  z-index: 99999;
}

/* 인트로 영상 */
.intro-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 인트로 영상 닫기 버튼 */
.intro-video .intro-close-btn {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
}

/* 인트로 영상 닫기 버튼 선 */
.intro-video .intro-close-btn::before,
.intro-video .intro-close-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2px;
  background: #fff;
}

/* 인트로 영상 닫기 버튼 첫 번째 선 */
.intro-video .intro-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 인트로 영상 닫기 버튼 두 번째 선 */
.intro-video .intro-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 인트로 영상 숨김 */
.intro-video.is-hide {
  opacity: 0;
  visibility: hidden;
}

/* ================= 헤더 영역 */
#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  /* 헤더는 이빠이 */
  z-index: 9999;
}
#header.fixed {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* 헤더 inner 공통 */
#header .inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= top 영역 */
#header .top {
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  /* lang버튼을 더 위로 */
  z-index: 10;
}
#header .top .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}
/* 헤더로고 */
#header .top .logo {
  width: 150px;
}

/* ================= util 영역 */
#header .top .util-wrap {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  transform: translateY(-50%);
}
#header .top .util {
  display: flex;
  gap: 30px;
}
#header .top .util li {
  position: relative;
}
#header .top .util li + li::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-50%);
}
#header .top .util a {
  color: #fff;
}

/* ================= lang 언어 영역 */
#header .top .lang-wrap {
  position: relative;
  margin-left: 15px;
  padding-left: 15px;
}
#header .top .lang-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-50%);
}
#header .top .lang-btn {
  position: relative;
  padding-right: 32px;
  margin-right: 20px;
  border: none;
  background: none;
  color: #fff;
}
#header .top .lang-btn::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 25px;
  height: 20px;
  background: url(../images/arrow-right-s-line-white.svg) no-repeat center
    center/ 100%;
  transform: translateY(-50%) rotate(90deg);
}
/* 기본 상태에서는 ENG, CHN 숨김 */
#header .top .lang {
  display: none;
  position: absolute;
  right: 24px;
  top: 26px;
  width: 74px;
  background: var(--gray-600);
  border: 1px solid #fff;
  margin-top: 3px;
}
/* on 클래스가 붙었을 때만 보임 */
#header .top .lang-wrap.on .lang {
  display: block;
}
#header .top .lang > li > a {
  display: block;
  padding: 2px 0;
  color: #fff;
  text-align: center;
}
#header .top .lang > li > a:hover {
  background: rgba(255, 255, 255, 0.5);
}
#header .top .lang-wrap.on .lang-btn::after {
  transform: translateY(-50%) rotate(270deg);
}

/* ================= 모바일 메뉴 기본 숨김 */
#header .top .open-btn,
#header .m-wrap {
  display: none;
}

/* ================= gnb 영역 depth1 */
#header .gnb-wrap {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
/* gnb 목록 */
#header .gnb-wrap .gnb {
  display: flex;
}
/* gnb depth1 한 칸 */
#header .gnb-wrap .gnb > li {
  width: calc(100% / 6);
}
/* gnb depth1 링크 */
/* 높이 한번만 a */
#header .gnb-wrap .gnb > li > a {
  display: block;
  text-align: center;
  line-height: 67px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
/* gnb 1depth hover, 활성화 */
#header .gnb-wrap .gnb > li:hover > a,
#header .gnb-wrap .gnb > li.on > a {
  background: rgba(0, 0, 0, 0.83);
}

/* ================= gnb 영역  depth2 */
#header .gnb .depth2-wrap {
  display: none;
  position: absolute;
  left: 0;
  top: 68px;
  width: 100%;
  padding: 30px 0 40px;
  background: rgba(0, 0, 0, 0.6);
}
/* PC gnb 활성화 시 depth2 표시 */
#header .gnb > li.on .depth2-wrap {
  display: block;
}
/* PC depth2 inner */
#header .gnb .depth2-wrap .inner {
  display: flex;
}
/* PC depth2 왼쪽 제목 : 클릭불가 */
#header .gnb .depth2-tit {
  display: flex;
  justify-content: center;
  width: calc(100% / 6);
  flex-shrink: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
/* PC depth2 목록 */
#header .gnb .depth2 {
  position: relative;
  display: flex;
  flex-grow: 1;
  gap: 0 50px;
  margin: 0 30px;
  min-height: 150px;
}
/* 하이원 depth2 li 간격 */
#header .gnb .depth2.high1 {
  gap: 0 100px;
}
/* 객실/시설 depth2 li 간격 */
#header .gnb .depth2.parlor {
  gap: 0 100px;
}
/* 즐길거리 depth2 li 간격 */
#header .gnb .depth2.enjoy {
  gap: 0 130px;
}
/* 패키지/프로모션 depth2 li 간격 */
#header .gnb .depth2.package {
  gap: 0 80px;
}

/* PC depth2 왼쪽 세로선 */
#header .gnb .depth2::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
}
/* pc 고객센터 / 이용안내 공통 특수 배치 */
#header .gnb .depth2.change1,
#header .gnb .depth2.change2 {
  display: grid;
  /* 고객센터, 이용안내 depth2 열배치 (5칸/남는 공간내 동일비율)*/
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* clamp(최소, 기준(%), 최대) */
  gap: 80px clamp(10px, 1vw, 40px);
}
/* 고객센터,이용안내 depth2 너비자동(줄어듦 허용) */
#header .gnb .depth2.change1 > .depth2-item,
#header .gnb .depth2.change2 > .depth2-item {
  width: auto;
}
/* 고객센터 down 첫 번째 묶음 */
#header .gnb .depth2.change1 > .depth2-item.down:nth-child(4) {
  grid-column: 4;
  grid-row: 1;
}
#header .gnb .depth2.change1 > .depth2-item.down:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}
/* 고객센터 down 두 번째 묶음 */
#header .gnb .depth2.change1 > .depth2-item.down:nth-child(6) {
  grid-column: 5;
  grid-row: 1;
}
#header .gnb .depth2.change1 > .depth2-item.down:nth-child(7) {
  grid-column: 5;
  grid-row: 2;
}

/* 이용안내 down 첫 번째 묶음 */
#header .gnb .depth2.change2 > .depth2-item.down:nth-child(4) {
  grid-column: 4;
  grid-row: 1;
}
#header .gnb .depth2.change2 > .depth2-item.down:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}
#header .gnb .depth2.change2 > .depth2-item.down:nth-child(6) {
  grid-column: 4;
  grid-row: 3;
}
/* 이용안내 down 두 번째 묶음 */
#header .gnb .depth2.change2 > .depth2-item.down:nth-child(7) {
  grid-column: 5;
  grid-row: 1;
}
#header .gnb .depth2.change2 > .depth2-item.down:nth-child(8) {
  grid-column: 5;
  grid-row: 2;
}
#header .gnb .depth2.change2 > .depth2-item.down:nth-child(9) {
  grid-column: 5;
  grid-row: 3;
}

/* 고객센터, 이용안내 depth2 세로배치 : 줄 / 세로 칸*/
/* 고객센터 2칸 */
#header .gnb .depth2.change1 > .depth2-item:not(.down) {
  grid-row: 1 / span 2;
}
/* 이용안내 3칸 */
#header .gnb .depth2.change2 > .depth2-item:not(.down) {
  grid-row: 1 / span 3;
}
/* PC depth2 한 칸 */
#header .gnb .depth2-item {
  width: 150px;
  flex-shrink: 0;
}
/* PC depth2 제목 링크 */
#header .gnb .depth2-item > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #eee;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}
/* PC depth2 제목 화살표 */
#header .gnb .depth2-item > a::after {
  content: '';
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  background-color: #eee;
  -webkit-mask: url(../images/arrow-right-s-line-white.svg) no-repeat center
    center / 100%;
  mask: url(../images/arrow-right-s-line-white.svg) no-repeat center center /
    100%;
}
/* PC depth2 hover 시 화살표 색상 */
#header .gnb .depth2-item > a:hover::after {
  background-color: var(--point-color3);
}

/* ================= gnb 영역  depth3  */
#header .gnb .depth3 {
  margin-top: 20px;
}
#header .gnb .depth3 li + li {
  margin-top: 10px;
}
#header .gnb .depth3 a {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
/* PC depth2, depth3 hover 색상 */
#header .gnb .depth2-item > a:hover,
#header .gnb .depth3 a:hover {
  color: var(--point-color3);
}

/* =========================================== 메인 비주얼 */
.main-visual {
  height: 100vh;
  position: relative;
  min-height: 980px;
}

/* 메인 비주얼 영상 */
.main-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================== 날씨 */

/* 메인 비주얼 날씨 */
.main-visual .visual-weather {
  position: absolute;
  left: 70px;
  bottom: 70px;
  display: flex;
  align-items: center;
  gap: 0 12px;
  color: #fff;
  z-index: 10;
}

/* 메인 비주얼 날씨 아이콘 */
.main-visual .weather-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* 메인 비주얼 날씨 아이콘 공통 */
.main-visual .weather-icon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

/* 맑음 */
.main-visual .weather-icon.weather-sunny::before {
  background-image: url(../images/weather-sunny-w.svg);
}
/* 비 */
.main-visual .weather-icon.weather-rain::before {
  background-image: url(../images/weather-rain-w.svg);
}
/* 눈 */
.main-visual .weather-icon.weather-snow::before {
  background-image: url(../images/weather-snow-w.svg);
}
/* 흐림 */
.main-visual .weather-icon.weather-cloud::before {
  background-image: url(../images/weather-cloud-w.svg);
}

/* 메인 비주얼 날씨 지역 */
.main-visual .weather-place {
  display: block;
  font-weight: 500;
  font-size: 18px;
  margin-left: -20px;
}

/* 메인 비주얼 날씨 온도 */
.main-visual .weather-temp {
  display: block;
  margin-top: 2px;
  font-size: 35px;
  line-height: 1;
  font-weight: 500;
}

/* 메인 비주얼 날씨 날짜 */
.main-visual .weather-date {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  margin-left: -52px;
}

/* ====================== 메인 비주얼 예약 검색 영역 */
.main-visual .visual-reserve {
  position: absolute;
  left: 50%;
  top: 55%;
  max-width: 1440px;
  width: 100%;
  padding: 0 20px;
  transform: translate(-50%);
  z-index: 10;
}

/* 예약 검색 박스 - PC */
.main-visual .reserve-list {
  display: flex;
  align-items: center;
  min-height: 122px;
  padding: 0 4%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 60px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

/* 예약 검색 한 칸 */
.main-visual .reserve-item {
  position: relative;
  padding: 0 20px;
}

/* PC 호텔/콘도 */
.main-visual .reserve-item.hotel {
  order: 1;
  min-width: 260px;
  flex-grow: 145;
  flex-shrink: 1;
}

/* PC 체크인/체크아웃 */
.main-visual .reserve-item.date {
  order: 2;
  min-width: 340px;
  flex-grow: 155;
  flex-shrink: 1;
}

/* PC 인원 묶음 */
.main-visual .count-list {
  order: 3;
  position: relative;
  display: flex;
  align-items: center;
  width: 270px;
  flex-shrink: 0;
}

/* PC 객실 */
.main-visual .count-list .reserve-item.room {
  order: 1;
}

/* PC 성인 */
.main-visual .count-list .reserve-item.adult {
  order: 2;
}

/* PC 어린이 */
.main-visual .count-list .reserve-item.child {
  order: 3;
}

/* PC 인원 한 칸 */
.main-visual .count-list .reserve-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% / 3);
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0 18px;
}

/* 예약 검색 작은 제목 */
.main-visual .reserve-item .reserve-tit {
  display: block;
  color: #bebebe;
  font-weight: 700;
}

/* 예약 검색 버튼 */
.main-visual .reserve-btn {
  position: relative;
  width: 100%;
  padding-right: 28px;
  border: none;
  background: none;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: left;
  /* 줄어들지않게 */
  white-space: nowrap;
}

/* 예약 검색 버튼 값 */
.main-visual .reserve-btn .value {
  display: block;
  overflow: hidden;
  /* 한줄 말줄임 / white-space: nowrap 필요 */
  text-overflow: ellipsis;
}

/* 호텔/콘도 버튼 화살표 */
.main-visual .reserve-btn.hotel-btn::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 28px;
  height: 28px;
  background: url(../images/arrow-right-s-line-white.svg) no-repeat center
    center / 100%;
  transform: translateY(-50%) rotate(90deg);
}

/* 호텔/콘도 열림 상태 - 화살표 회전 */
.main-visual .reserve-item.on .reserve-btn.hotel-btn::after {
  transform: translateY(-50%) rotate(270deg);
}

/* 체크인/체크아웃 버튼 달력 */
.main-visual .reserve-btn.date-btn::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url(../images/calendar-line-w.svg) no-repeat center center / 100%;
  transform: translateY(-50%);
}

/* 호텔 선택 목록 */
.main-visual .option-list {
  display: none;
  position: absolute;
  left: 20px;
  top: 70px;
  width: calc(100% - 56px);
  max-height: 255px;
  overflow-y: auto;
  padding: 17px 0;
  background: #000;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 10;
}
/* 호텔 선택 목록 스크롤바 숨김 */
.main-visual .option-list::-webkit-scrollbar {
  display: none;
}

/* 호텔 선택 목록 열림 */
.main-visual .reserve-item.hotel.on .option-list {
  display: block;
}

/* 호텔 선택 목록 버튼 */
.main-visual .option-list button {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: none;
  background: none;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

/* 호텔 선택 목록 hover */
.main-visual .option-list button:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* 날짜 선택창 */
.main-visual .calendar {
  display: none;
  position: absolute;
  left: 20px;
  top: 70px;
  width: calc(100% - 56px);
  padding: 20px;
  background: #000;
  /* 인원보다 위로 */
  z-index: 10;
}

/* 날짜 선택창 열림 */
.main-visual .reserve-item.date.on .calendar {
  display: block;
}

/* 달력 상단 */
.main-visual .calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* 달력 월 제목 */
.main-visual .calendar-title {
  color: #fff;
  font-size: 25px;
  font-weight: 700;
}

/* 달력 이전/다음 화살표 버튼 초기화+영역지정 */
.main-visual .calendar-prev,
.main-visual .calendar-next {
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
}

/* 달력 이전/다음 화살표 버튼 */
.main-visual .calendar-prev::before,
.main-visual .calendar-next::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 25px;
  background: url(../images/arrow-right-s-line-white.svg) no-repeat center
    center / 100%;
}

/* 달력 이전 화살표 버튼 */
.main-visual .calendar-prev::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* 달력 다음 화살표 버튼 */
.main-visual .calendar-next::before {
  transform: translate(-50%, -50%);
}

/* 달력 요일 */
.main-visual .calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 8px;
}

.main-visual .calendar-week li {
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  text-align: center;
}

/* 달력 날짜 */
.main-visual .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

/* 날짜 빈칸 */
.main-visual .calendar-blank {
  height: 34px;
}

/* 날짜 버튼 */
.main-visual .calendar-day {
  height: 34px;
  border: none;
  border-radius: 17px;
  background: transparent;
  color: #fff;
  font-size: 18px;
}

/* 날짜 hover */
.main-visual .calendar-day:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* 선택 시작/끝 */
.main-visual .calendar-day.is-start,
.main-visual .calendar-day.is-end {
  background: #fff;
  color: #000;
  font-weight: 700;
}

/* 선택 범위 */
.main-visual .calendar-day.is-range {
  background: rgba(255, 255, 255, 0.24);
}

/* 선택 날짜 표시 */
.main-visual .calendar-check {
  display: flex;
  justify-content: center;
  gap: 0 8px;
  padding-top: 30px;
  padding-bottom: 20px;
  color: #fff;
}

/* 날짜 선택 완료 버튼 */
.main-visual .select-btn {
  width: 100%;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 20px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* 인원 숫자 영역 */
.main-visual .count-box {
  display: flex;
  align-items: center;
  gap: 0 7px;
}

/* 인원 숫자 */
.main-visual .count-box .number {
  min-width: 14px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* 인원 화살표 묶음 */
.main-visual .count-arrow {
  display: flex;
  flex-direction: column;
  gap: 1px 0;
}

/* 인원 화살표 버튼 */
.main-visual .count-arrow button {
  position: relative;
  width: 16px;
  height: 12px;
  border: none;
  background: none;
}

/* 인원 화살표 아이콘 */
.main-visual .count-arrow button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url(../images/arrow-right-s-line-white.svg) no-repeat center
    center / 100%;
}

/* 증가 화살표 */
.main-visual .count-up::before {
  transform: translate(-50%, -50%) rotate(270deg);
}

/* 감소 화살표 */
.main-visual .count-down::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 검색 버튼 */
.main-visual .search-btn {
  order: 4;
  width: 115px;
  height: 40px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* ================= 하이원 리조트 카드 */
.main-card {
  padding: 150px 0;
}

/* 하이원 리조트 inner */
.main-card .inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 하이원 리조트 설명 */
.main-card .inner > span {
  color: var(--gray-600);
  font-size: 24px;
  font-weight: 500;
}

/* 하이원 리조트 제목 */
.main-card h2 {
  margin-bottom: 20px;
  color: var(--gray-600);
  font-size: 64px;
  font-weight: 700;
}

/* 하이원 리조트 카드 목록 */
.main-card .card-list {
  display: flex;
  width: 100%;
  gap: 0 30px;
}

/* 하이원 리조트 카드 공통 */
.main-card .card-list li {
  width: 150px;
  height: 500px;
  overflow: hidden;
  border-radius: 20px;
  background: url(../images/card/waterworld.jpg) no-repeat center center / cover;
  transition: all 0.3s;
}

/* 하이원 리조트 펼침 카드 */
.main-card .card-list li.on {
  width: 860px;
}

/* 하이원 리조트 SKI */
.main-card .card-list li:nth-child(2) {
  background-image: url(../images/card/ski.jpg);
}

/* 하이원 리조트 GOLF */
.main-card .card-list li:nth-child(3) {
  background-image: url(../images/card/golf.jpg);
}

/* 하이원 리조트 CASINO */
.main-card .card-list li:nth-child(4) {
  background-image: url(../images/card/casino.jpg);
}

/* 하이원 리조트 카드 링크 */
.main-card .card-list a {
  position: relative;
  display: block;
  height: 100%;
}

/* 하이원 리조트 카드 텍스트 영역 */
.main-card .txt-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

/* 하이원 리조트 카드 설명 */
.main-card .txt-wrap > span {
  display: none;
}

/* 하이원 리조트 카드 제목 */
.main-card .txt-wrap h3 {
  position: absolute;
  left: 50%;
  bottom: 0;
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center center;
  transition: all 0.3s;
}
/* 워터월드 제목위치*/
.main-card .txt-wrap.water h3 {
  bottom: 200px;
}
/* 스키 제목위치*/
.main-card .txt-wrap.ski h3 {
  bottom: 55px;
}
/* 골프 제목위치*/
.main-card .txt-wrap.golf h3 {
  bottom: 80px;
}
/* 카지노 제목위치*/
.main-card .txt-wrap.casino h3 {
  bottom: 110px;
}

/* 하이원 리조트 펼침 카드 텍스트 영역 */
.main-card .card-list li.on .txt-wrap {
  display: block;
  height: 180px;
  padding: 42px 27px 37px;
  background: rgba(255, 255, 255, 0.6);
}

/* 하이원 리조트 펼침 카드 설명 */
.main-card .card-list li.on .txt-wrap > span {
  display: block;
  color: var(--gray-600);
  font-size: 24px;
  font-weight: 500;
}

/* 하이원 리조트 펼침 카드 제목 */
.main-card .card-list li.on h3 {
  position: static;
  color: var(--gray-600);
  font-size: 40px;
  font-weight: 700;
  transform: none;
}
/* ================= 패키지&프로모션 */
.main-tab {
  height: 820px;
  padding: 74px 0 112px;
  background: var(--gray-400);
}

/* 패키지&프로모션 inner */
.main-tab .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 패키지&프로모션 상단 */
.main-tab .tab-wrap {
  order: 1;
  width: 50%;
  margin-bottom: 35px;
}

/* 패키지&프로모션 설명 */
.main-tab .tit-wrap > span {
  color: var(--gray-600);
  font-size: 24px;
  font-weight: 400;
}

/* 패키지&프로모션 제목 */
.main-tab h2 {
  color: var(--gray-600);
  font-size: 64px;
  font-weight: 700;
}

/* 패키지&프로모션 탭 메뉴 */
.main-tab .tab-menu {
  order: 3;
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 0 20px;
  margin-bottom: 60px;
}

/* 패키지&프로모션 탭 버튼 */
.main-tab .tab-menu button {
  width: 100px;
  height: 40px;
  border: 1px solid var(--point-color1);
  border-radius: 20px;
  background: #fff;
  color: var(--point-color1);
  font-size: 18px;
  font-weight: 700;
}

/* 패키지&프로모션 탭 버튼 활성화 */
.main-tab .tab-menu .active button {
  border-color: var(--point-color2);
  background: var(--point-color2);
  color: #fff;
}

/* 패키지&프로모션 탭 내용 */
.main-tab .tab-content {
  order: 4;
  width: 100%;
}

/* 패키지&프로모션 탭 패널 */
.main-tab .tab-panel {
  display: none;
}

/* 패키지&프로모션 탭 패널 활성화 */
.main-tab .tab-panel.active {
  display: block;
}

/* 패키지&프로모션 카드 목록 */
.main-tab .tab-panel ul {
  display: flex;
  gap: 0 30px;
}

/* 패키지&프로모션 카드 */
.main-tab .tab-panel li {
  width: 327px;
  height: 367px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}

/* 패키지&프로모션 카드 이미지 */
.main-tab .img-wrap {
  display: block;
  height: 217px;
  background: url(../images/tab/package1.jpg) no-repeat center center / cover;
}

/* 패키지&프로모션 카드 이미지 1 위치이동 */
.main-tab .package1 .img-wrap {
  background-position: 28% center;
}

/* 패키지&프로모션 카드 이미지 2 */
.main-tab .package2 .img-wrap {
  background-image: url(../images/tab/package2.jpg);
}

/* 패키지&프로모션 카드 이미지 3 */
.main-tab .package3 .img-wrap {
  background-image: url(../images/tab/package3.jpg);
}

/* 패키지&프로모션 카드 이미지 4 */
.main-tab .package4 .img-wrap {
  background-image: url(../images/tab/package4.jpg);
}

/* 패키지&프로모션 카드 이미지 5 */
.main-tab .package5 .img-wrap {
  background-image: url(../images/tab/package5.jpg);
}

/* 패키지&프로모션 카드 이미지 6 */
.main-tab .package6 .img-wrap {
  background-image: url(../images/tab/package6.jpg);
}

/* 패키지&프로모션 카드 이미지 7 */
.main-tab .package7 .img-wrap {
  background-image: url(../images/tab/package7.jpg);
}

/* 패키지&프로모션 카드 텍스트 */
.main-tab .txt-wrap {
  height: 150px;
  padding: 18px 20px;
  background: #fff;
}

/* 패키지&프로모션 카드 분류 */
.main-tab .txt-wrap a > span {
  color: var(--point-color2);
  font-size: 14px;
  font-weight: 500;
}

/* 패키지&프로모션 카드 제목 */
.main-tab .txt-wrap h3 {
  margin-top: 4px;
  color: var(--gray-600);
  font-size: 20px;
  font-weight: 700;
}

/* 패키지&프로모션 카드 설명 */
.main-tab .txt-wrap p {
  display: -webkit-box;
  margin-top: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  color: var(--gray-600);
  font-weight: 500;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 패키지&프로모션 카드 날짜 */
.main-tab .txt-wrap > span {
  color: #bebebe;
  font-size: 14px;
  font-weight: 400;
}

/* 패키지&프로모션 카드 날짜 진한 색 */
.main-tab .txt-wrap .date-dark {
  color: var(--gray-600);
}

/* 패키지&프로모션 더보기 영역 */
.main-tab .more-wrap {
  order: 2;
  width: 50%;
  margin-bottom: 35px;
  text-align: right;
}

/* 패키지&프로모션 더보기 */
.main-tab .more-wrap a {
  display: inline-block;
}

/* 패키지&프로모션 더보기 텍스트 */
.main-tab .more-wrap a span {
  color: var(--gray-600);
  font-size: 24px;
  font-weight: 700;
  vertical-align: middle;
}

/* 패키지&프로모션 더보기 화살표 */
.main-tab .more-wrap a::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  background: url(../images/arrow-right-s-line.svg) no-repeat center center /
    100%;
  vertical-align: middle;
}

/* ================= 공지사항, 하이원 갤러리 */
.main-link {
  padding: 100px 0;
}

/* 공지사항, 하이원 갤러리 inner */
.main-link .inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 공지사항, 하이원 갤러리 목록 */
.main-link .link-list {
  display: flex;
  gap: 0 59px;
}

/* 공지사항, 하이원 갤러리 카드 */
.main-link li {
  position: relative;
  width: 670px;
  height: 300px;
  padding: 40px;
  overflow: hidden;
  border: 1px solid #5e5e5e;
  border-radius: 20px;
  background: url(../images/link/notice-bg.jpg) no-repeat center center / cover;
}

/* 하이원 갤러리 카드 */
.main-link .gallery {
  background-image: url(../images/link/gallery-bg.jpg);
  background-position: center 100%;
}

/* 하이원 갤러리 어두운 배경 */
.main-link .gallery::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

/* 공지사항, 하이원 갤러리 설명 */
.main-link li > span {
  position: relative;
  color: #fff;
  font-weight: 400;
}

/* 공지사항, 하이원 갤러리 제목 */
.main-link h2 {
  position: relative;
  margin-top: 4px;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
}

/* 공지사항, 하이원 갤러리 더보기 */
.main-link a {
  position: absolute;
  left: 40px;
  bottom: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  border: 1px solid #5e5e5e;
  border-radius: 20px;
  background: #fff;
  color: #5e5e5e;
  font-size: 18px;
  font-weight: 700;
}

/* ================= 퀵메뉴 */
.main-quick {
  position: fixed;
  right: 5px;
  top: 60%;
  width: 60px;
  transform: translateY(-50%);
  /* 헤더 보다 위로 > 인트로 아래로 */
  z-index: 10000;
}

/* 퀵메뉴 바로예약 */
.main-quick .quick-reserve {
  position: relative;
  /* 흰배경보다 위로 */
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  height: 152px;
  padding-top: 31px;
  border-radius: 30px;
  background: #94765e;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

/* 퀵메뉴 바로예약 아이콘 */
.main-quick .quick-reserve::before {
  content: '';
  width: 28px;
  height: 28px;
  margin-bottom: 11px;
  background: url(../images/quick/calendar-line-w.svg) no-repeat center center /
    100%;
}

/* 퀵메뉴 하단 박스 */
.main-quick .quick-wrap {
  position: relative;
  width: 60px;
  height: 408px;
  margin-top: -30px;
  padding: 46px 0 0;
  border: 1px solid #94765e;
  border-top: none;
  border-radius: 0 0 30px 30px;
  background: #fff;
  overflow: visible;
  transition: all 0.3s;
}
/* 퀵메뉴 목록 */
.main-quick .quick-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px 0;
  overflow: visible;
}

/* 퀵메뉴 한 칸 */
.main-quick .quick-menu li {
  position: relative;
  width: 60px;
  height: 68px;
  overflow: visible;
}

/* 퀵메뉴 링크 */
.main-quick .quick-menu li > a {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 68px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #5f5f5f;
  text-align: center;
  transition: all 0.34s;
}

/* 퀵메뉴 아이콘 */
.main-quick .quick-icon {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  transition: all 0.34s;
}

/* 퀵메뉴 텍스트 */
.main-quick .quick-tit {
  display: block;
  font-size: 11px;
  white-space: nowrap;
  transition: all 0.34s;
}

/* 요금할인 아이콘 */
.main-quick .discount .quick-icon {
  background-image: url(../images/quick/money-dollar-circle-line.svg);
}

/* 교통수단 아이콘 */
.main-quick .traffic .quick-icon {
  background-image: url(../images/quick/bus-line.svg);
}

/* 멤버십 아이콘 */
.main-quick .membership .quick-icon {
  background-image: url(../images/quick/vip-crown-line.svg);
}

/* 정태영삼 아이콘 */
.main-quick .jeongtae .quick-icon {
  background-image: url(../images/quick/jeongtae.svg);
}

/* 퀵메뉴 hover 패널 */
.main-quick .quick-menu li:hover > a {
  top: 10px;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 136px;
  height: 45px;
  padding: 0 14px 0 22px;
  border-radius: 25px;
  background: #b7977e;
  color: #fff;
  margin-right: 5px;
}

/* 퀵메뉴 hover 아이콘 */
.main-quick .quick-menu li:hover .quick-icon {
  margin-bottom: 0;
}

/* 퀵메뉴 hover 텍스트 */
.main-quick .quick-menu li:hover .quick-tit {
  font-size: 18px;
  font-weight: 700;
}

/* 요금할인 hover 아이콘 */
.main-quick .quick-menu li:hover > .discount .quick-icon {
  background-image: url(../images/quick/money-dollar-circle-line-w.svg);
}

/* 교통수단 hover 아이콘 */
.main-quick .quick-menu li:hover > .traffic .quick-icon {
  background-image: url(../images/quick/bus-line-w.svg);
}

/* 멤버십 hover 아이콘 */
.main-quick .quick-menu li:hover > .membership .quick-icon {
  background-image: url(../images/quick/vip-crown-line-w.svg);
}

/* 정태영삼 hover 아이콘 */
.main-quick .quick-menu li:hover > .jeongtae .quick-icon {
  background-image: url(../images/quick/jeongtae-w.svg);
}

/* 퀵메뉴 접기 버튼 - 펼친상태 */
.main-quick .quick-arrow {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  transform: translateX(-50%);
}

/* 퀵메뉴 접기 버튼 - 접은상태 */
.main-quick.on .quick-arrow {
  bottom: 16px;
}

/* 퀵메뉴 접기 버튼 아이콘 */
.main-quick .quick-arrow::before {
  content: '';
  display: block;
  width: 19px;
  height: 19px;
  margin: 0 auto;
  background: url(../images/quick/quick-arrow-up.svg) no-repeat center center /
    100%;
}

/* 퀵메뉴 접힘 상태 */
.main-quick.on .quick-wrap {
  height: 93px;
  padding: 30px 0 0;
}

/* 퀵메뉴 접힘 상태 목록 숨김 */
.main-quick.on .quick-menu {
  display: none;
}

/* 퀵메뉴 접힘 상태 화살표 */
.main-quick.on .quick-arrow::before {
  background-image: url(../images/quick/quick-arrow-down.svg);
}

/* ================= footer 전체 */
#footer {
  background: var(--point-color4);
  color: var(--gray-600);
}
/* pc footer 공통 inner */
#footer .inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= footer SNS 영역 */
/* pc footer SNS 상단 영역 */
#footer .top {
  height: 58px;
  background: var(--point-color4);
}
#footer .top .inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
/* pc footer SNS 목록 */
#footer .sns {
  display: flex;
  align-items: center;
  gap: 0 40px;
}
/* pc footer SNS 링크, 이미지 */
#footer .sns a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
/* pc footer SNS 이미지 */
#footer .sns img {
  display: block;
  width: 20px;
  height: 20px;
}
/* pc footer SNS 카카오스토리 */
#footer .sns .kakao,
#footer .sns .kakao img {
  width: 18px;
  height: 18px;
}
/* pc footer SNS 인스타그램 */
#footer .sns .insta,
#footer .sns .insta img {
  width: 25px;
  height: 25px;
}

/* ================= footer 로고 + 약관 링크 영역 */
#footer .middle {
  padding: 44px 0;
  background: #fff;
}
#footer .middle .inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
/* pc footer 로고 */
#footer .middle .logo {
  width: 160px;
  flex-shrink: 0;
}
#footer .middle .logo a {
  display: block;
}
#footer .middle .logo img {
  display: block;
  width: 100%;
}
/* pc footer 약관 메뉴 묶음 */
#footer .middle .menu-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
/* pc footer 약관 메뉴 1줄, 2줄 공통 */
#footer .middle .footer-menu1,
#footer .middle .footer-menu2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
/* pc footer 약관 메뉴 링크 */
#footer .middle .footer-menu1 a,
#footer .middle .footer-menu2 a {
  color: var(--gray-600);
  font-size: 15px;
}

/* ================= footer 회사 정보 영역 */
#footer .bottom {
  padding: 40px 0 50px;
  background: var(--point-color4);
}
#footer .bottom .info {
  display: flex;
  gap: 0 80px;
  margin-bottom: 34px;
}
/* pc footer 주소, 회사 정보 */
#footer .bottom .address,
#footer .bottom .company {
  max-width: 420px;
}
/* pc footer 주소, 회사 정보 텍스트 */
#footer .bottom .address p,
#footer .bottom .company p {
  color: var(--gray-600);
  font-size: 14px;
  line-height: 1.8;
}

/* ================= footer 인증마크 + 버튼 영역 */
#footer .bottom .icon-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
/* pc footer 인증마크 목록 */
#footer .bottom .icon-list {
  display: flex;
  align-items: center;
  gap: 0 45px;
}
#footer .bottom .icon-list li {
  display: flex;
  align-items: center;
}
#footer .bottom .icon-list img {
  display: block;
}
/* pc footer 인증마크 icon */
#footer .bottom .icon-list .icon {
  width: 90px;
}
#footer .bottom .icon-list .icon img {
  width: 90px;
}
/* pc footer 인증마크 cmark */
#footer .bottom .icon-list .cmark {
  width: 50px;
}
#footer .bottom .icon-list .cmark img {
  width: 50px;
}
/* pc footer 버튼 영역 */
#footer .bottom .btn-wrap {
  display: flex;
  align-items: center;
  gap: 0 15px;
}
/* pc footer 버튼 공통 */
#footer .bottom .footer-btn,
#footer .bottom .family-btn {
  width: 180px;
  height: 40px;
  border: 1px solid var(--gray-600);
  border-radius: 5px;
  background: transparent;
  color: var(--gray-600);
  text-align: center;
  white-space: nowrap;
}
/* pc footer 주요 사업장간 거리 버튼 */
#footer .bottom .footer-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* pc footer 패밀리 사이트 버튼 */
#footer .bottom .family-btn {
  position: relative;
  padding: 0 40px 0 20px;
}

/* ================= footer 패밀리 사이트 */
#footer .bottom .family-site {
  position: relative;
}
/* footer 패밀리 사이트 버튼 화살표 */
#footer .bottom .family-btn::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url(../images/arrow-right-s-line.svg) no-repeat center center /
    100%;
  transform: translateY(-50%) rotate(-90deg);
}
/* footer 패밀리 사이트 목록 */
#footer .bottom .family-list {
  display: none;
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  padding: 16px 0;
  border-radius: 5px 5px 0 0;
  background: var(--gray-600);
  overflow: hidden;
}
/* footer 패밀리 사이트 목록 열림 */
#footer .bottom .family-site.on .family-list {
  display: block;
}
/* footer 패밀리 사이트 링크 */
#footer .bottom .family-list a {
  display: block;
  padding: 8px 20px;
  color: #fff;
  font-size: 14px;
}
/* footer 패밀리 사이트 링크 hover */
#footer .bottom .family-list a:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* footer 패밀리 사이트 활성화 버튼 */
#footer .bottom .family-site.on .family-btn {
  border-color: var(--gray-600);
  border-top-color: #d9d9d9;
  border-radius: 0 0 5px 5px;
  background: var(--gray-600);
  color: #fff;
}
/* footer 패밀리 사이트 활성화 화살표 */
#footer .bottom .family-site.on .family-btn::after {
  background-image: url(../images/arrow-right-s-line-white.svg);
  transform: translateY(-50%) rotate(90deg);
}

/* ================= footer copyright */
#footer .bottom .copyright {
  margin-top: 30px;
  color: #8e8e8e;
  font-size: 14px;
}

/* ================= footer top 버튼 */
#footer .bottom .top-btn {
  display: none;
  position: fixed;
  right: 48px;
  bottom: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--point-color1);
  z-index: 100;
}
#footer .bottom .top-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url(../images/arrow-right-s-line-white.svg) no-repeat center
    center / 100%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* 테블릿 분기점 */
@media (max-width: 1200px) {
  #header.fixed {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  }

  /* PC util, gnb 숨김 */
  #header .top .util-wrap,
  #header .gnb-wrap {
    display: none;
  }
  /* 모바일 햄버거 버튼 */
  #header .top .open-btn {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    transform: translateY(-50%);
  }
  /* 모바일 햄버거 버튼 선 */
  #header .top .open-btn i {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
  }
  /* 모바일 햄버거 버튼 선 간격 */
  #header .top .open-btn i + i {
    margin-top: 6px;
  }
  /* 모바일 메뉴판 */
  #header .m-wrap {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    color: var(--gray-600);
    transform: translateX(100%);
    transition: transform 0.3s;
    z-index: 9999;
  }
  /* T 모바일 메뉴 스크롤  */
  #header .m-wrap .scroll {
    height: calc(100% - 120px);
    overflow: auto;
  }

  /* 모바일 메뉴판 열림 */
  #header .m-wrap.on {
    transform: translateX(0);
  }
  /* 모바일 언어 + 로고 영역 */
  #header .m-wrap .m-lang {
    position: relative;
    height: 120px;
    background: #fff;
    flex-shrink: 0;
  }
  /* 모바일 로고 */
  #header .m-wrap .m-logo {
    position: absolute;
    left: 24px;
    top: 50%;
    width: 160px;
    transform: translateY(-50%);
  }
  /* 모바일 로고 이미지 */
  #header .m-wrap .m-logo img {
    display: block;
    width: 100%;
  }

  /* 모바일 언어 버튼 */
  #header .m-wrap .m-lang-btn {
    position: absolute;
    right: 100px;
    top: 50%;
    width: 80px;
    padding-right: 24px;
    border: none;
    background: none;
    color: var(--gray-600);
    transform: translateY(-50%);
  }
  /* 모바일 언어 버튼 화살표 */
  #header .m-wrap .m-lang-btn::after {
    content: '';
    position: absolute;
    right: 7px;
    top: 50%;
    width: 20px;
    height: 20px;
    background: url(../images/arrow-right-s-line.svg) no-repeat center center /
      100%;
    transform: translateY(-50%) rotate(90deg);
  }
  /* 모바일 언어 메뉴 활성화 화살표 */
  #header .m-wrap .m-lang.on .m-lang-btn::after {
    transform: translateY(-50%) rotate(270deg);
  }
  /* 모바일 언어 목록 */
  #header .m-wrap .m-lang-list {
    display: none;
    position: absolute;
    right: 100px;
    top: 72px;
    width: 80px;
    border: 1px solid var(--point-color5);
    background: #fff;
  }
  /* 모바일 언어 목록 열림 */
  #header .m-wrap .m-lang.on .m-lang-list {
    display: block;
  }
  /* 모바일 언어 목록 링크 */
  #header .m-wrap .m-lang-list a {
    display: block;
    padding: 6px 0;
    color: var(--gray-600);
    text-align: center;
  }
  /* 모바일 언어 목록 hover */
  #header .m-wrap .m-lang-list a:hover {
    background: var(--point-color4);
  }

  /* 모바일 닫기 버튼 */
  #header .m-wrap .close-btn {
    position: absolute;
    right: 30px;
    top: 40px;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    z-index: 10;
  }
  /* 모바일 닫기 버튼 선 */
  #header .m-wrap .close-btn::before,
  #header .m-wrap .close-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 3px;
    background: var(--gray-600);
  }
  /* 모바일 닫기 버튼 첫 번째 선 */
  #header .m-wrap .close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  /* 모바일 닫기 버튼 두 번째 선 */
  #header .m-wrap .close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* 모바일 로그인 영역 */
  #header .m-wrap .m-login {
    padding: 25px 40px;
    background: var(--gray-400);
  }
  /* 모바일 로그인 제목 */
  #header .m-wrap .m-login .login {
    display: block;
    color: var(--gray-600);
    line-height: 45px;
    font-size: 30px;
    font-weight: 700;
  }
  /* 모바일 로그인 설명 */
  #header .m-wrap .m-login p {
    color: #5d5d5d;
  }
  /* 모바일 회원가입 링크 */
  #header .m-wrap .m-login .join {
    display: inline-block;
    margin-top: 11px;
    color: var(--gray-600);
    font-size: 20px;
    border-bottom: 1px solid var(--gray-600);
  }

  /* 모바일 멤버십 영역 */
  #header .m-wrap .m-menu {
    background: var(--point-color2);
  }
  /* 모바일 멤버십 한 칸 */
  #header .m-wrap .m-menu li {
    border-bottom: 1px solid var(--point-color5);
  }
  /* 모바일 멤버십 링크 */
  #header .m-wrap .m-menu a {
    display: block;
    position: relative;
    padding: 17px 81px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
  }
  /* 모바일 멤버십 아이콘 */
  #header .m-wrap .m-menu a::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 50%;
    width: 25px;
    height: 23px;
    background: url(../images/vip-crown-line-w.svg) no-repeat center center /
      100%;
    transform: translateY(-50%);
  }
  /* 모바일 멤버십 화살표 */
  #header .m-wrap .m-menu a::after {
    content: '';
    position: absolute;
    right: 28px;
    top: 50%;
    width: 20px;
    height: 20px;
    background: url(../images/arrow-right-s-line-white.svg) no-repeat center
      center / 100%;
    transform: translateY(-50%);
  }

  /* T 모바일 메뉴 depth1,2,3 높이 */
  #header .m-wrap .m-gnb-wrap {
    height: calc(100% - 223px);
    position: relative;
  }
  /* T 모바일메뉴 하단색상 */
  #header .m-wrap .m-gnb-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 183px;
    height: 100%;
    background: var(--gray-400);
    z-index: -1;
  }
  /* 모바일 gnb 배경 */
  #header .m-wrap .m-gnb {
    position: relative;
  }

  /* 모바일 depth1 링크 */
  #header .m-wrap .m-gnb > li > a {
    display: flex;
    align-items: center;
    width: 183px;
    height: 60px;
    padding-left: 40px;
    border-bottom: 1px solid var(--point-color5);
    background: var(--gray-400);
    color: var(--gray-600);
    font-weight: 500;
  }
  /* 모바일 depth1 활성화 */
  #header .m-wrap .m-gnb > li.on > a {
    background: #fff;
    color: var(--gray-600);
    font-weight: 700;
  }
  /* 모바일 depth2 전체 영역 */
  #header .m-wrap .m-gnb .depth2-wrap {
    display: none;
    position: absolute;
    left: 183px;
    top: 0;
    width: calc(100% - 183px);
    height: 100%;
    /* 모바일 메뉴 안쪽 스크롤 */
    overflow: auto;
    padding: 0;
    background: #fff;
  }
  /* 모바일 depth1 활성화 시 depth2 표시 */
  #header .m-wrap .m-gnb > li.on .depth2-wrap {
    display: block;
  }

  /* 모바일 depth2 목록 - pc flex, grid 초기화*/
  #header .m-wrap .m-gnb .depth2 {
    display: block;
    overflow: auto;
  }
  /* 모바일 depth2 링크 */
  #header .m-wrap .m-gnb .depth2-item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 28px 0 24px;
    border-bottom: 1px solid var(--point-color5);
    color: var(--gray-600);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
  }
  /* 모바일 depth2 화살표 */
  #header .m-wrap .m-gnb .depth2-item > a::after {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url(../images/arrow-right-s-line.svg) no-repeat center center /
      100%;
  }
  /* 모바일 depth3가 있는 depth2 마지막 선 */
  #header .m-wrap .m-gnb .depth2-item[class*='depth3-'] {
    border-bottom: 1px solid var(--point-color5);
  }
  /* 모바일 즐길거리 > 지역여행 depth3 마지막 선 제거 */
  #header .m-wrap .m-gnb > li:nth-child(3) .depth2 .depth2-item.depth3-5 {
    border-bottom: none;
  }
  /* 모바일 depth3 1개 하단 여백 */
  #header .m-wrap .m-gnb .depth2-item.depth3-1 .depth3 {
    padding-bottom: 15px;
  }
  /* 모바일 depth3 2개 하단 여백 */
  #header .m-wrap .m-gnb .depth2-item.depth3-2 .depth3 {
    padding-bottom: 37px;
  }
  /* 모바일 depth3 3개 하단 여백 */
  #header .m-wrap .m-gnb .depth2-item.depth3-3 .depth3 {
    padding-bottom: 59px;
  }
  /* 모바일 depth3 5개 하단 여백 */
  #header .m-wrap .m-gnb .depth2-item.depth3-5 .depth3 {
    padding-bottom: 24px;
  }
  /* 모바일 depth3 6개 하단 여백 */
  #header .m-wrap .m-gnb .depth2-item.depth3-6 .depth3 {
    padding-bottom: 65px;
  }
  /* 모바일 depth3 목록 */
  #header .m-wrap .m-gnb .depth3 {
    margin-top: 20px;
    padding: 0 34px;
  }
  /* 모바일 depth3 한 칸 */
  #header .m-wrap .m-gnb .depth3 li {
    position: relative;
    padding-left: 12px;
  }
  /* 모바일 depth3 불릿 */
  #header .m-wrap .m-gnb .depth3 li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--point-color1);
  }
  /* 모바일 depth3 간격 */
  #header .m-wrap .m-gnb .depth3 li + li {
    margin-top: 14px;
  }
  /* T,M depth3 링크 */
  #header .m-wrap .m-gnb .depth3 a {
    font-weight: 500;
    color: var(--point-color1);
  }

  /* ====================================== 테블릿분기점 메인비주얼 */
  .main-visual {
    min-height: 975px;
  }
  /* T 메인비주얼 비디오 세로비율 50%-중앙, -좌 +우 */
  .main-visual video {
    object-position: 62% center;
  }

  /* T 메인 비주얼 날씨 */
  .main-visual .visual-weather {
    left: 34px;
    bottom: 70px;
  }

  /* T 예약 검색 영역 */
  .main-visual .visual-reserve {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* T 예약 검색 박스 */
  .main-visual .reserve-list {
    position: relative;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 166px;
    padding: 0 20px;
    border-radius: 30px;
  }

  /* T 1행 / 2행 경계선 전체 */
  .main-visual .reserve-list::after {
    content: '';
    position: absolute;
    left: 28px;
    right: 28px;
    top: 50%;
    height: 1px;
    background: #d9d9d9;
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* T 호텔 */
  .main-visual .reserve-item.hotel {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(50% - 70px);
    min-width: 0;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 18px 20px;
    border-right: none;
    border-bottom: none;
  }

  /* T 호텔 오른쪽 세로 구분선 */
  .main-visual .reserve-item.hotel::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 77px;
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* T 인원 묶음 */
  .main-visual .count-list {
    order: 2;
    display: flex;
    align-items: stretch;
    width: calc(50% + 70px);
    flex-grow: 0;
    flex-shrink: 0;
    border-bottom: none;
  }

  /* T 객실 */
  .main-visual .count-list .reserve-item.room {
    order: 1;
  }

  /* T 성인 */
  .main-visual .count-list .reserve-item.adult {
    order: 2;
  }

  /* T 어린이 */
  .main-visual .count-list .reserve-item.child {
    order: 3;
  }

  /* T 인원 한 칸 */
  .main-visual .count-list .reserve-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% / 3);
    min-width: 0;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 18px 14px;
    text-align: center;
  }

  /* T 날짜 */
  .main-visual .reserve-item.date {
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 300px);
    min-width: 0;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 18px 20px;
    border-right: none;
    border-bottom: none;
  }

  /* T 날짜 버튼 */
  .main-visual .reserve-item.date .date-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    padding-right: 40px;
  }

  /* T 날짜 버튼 값 */
  .main-visual .reserve-item.date .date-btn .value {
    min-width: 0;
  }

  /* T 날짜 버튼 달력 */
  .main-visual .reserve-item.date .date-btn::after {
    right: 0;
  }

  /* T 검색 버튼 */
  .main-visual .search-btn {
    order: 4;
    align-self: center;
    margin-left: auto;
  }

  /* T PC 구분선 초기화 */
  .main-visual .reserve-item.date::before,
  .main-visual .count-list::before {
    display: none;
  }

  /* T 인원 제목 */
  .main-visual .count-list .reserve-tit {
    width: 100%;
    margin-bottom: 6px;
    text-align: center;
  }

  /* T 인원 숫자 영역 */
  .main-visual .count-box {
    justify-content: center;
    width: 100%;
  }

  /* T 호텔 선택 목록 */
  .main-visual .option-list {
    left: 20px;
    top: 84px;
    width: calc(100% - 40px);
    padding: 0;
  }

  /* T 날짜 선택창 */
  .main-visual .calendar {
    left: 16px;
    top: 80px;
    width: 352px;
  }

  /* =====================테블릿분기점 card */
  /* T 하이원 리조트 카드 */
  .main-card {
    padding: 100px 0;
  }

  /* T 하이원 리조트 inner */
  .main-card .inner {
    text-align: center;
  }

  /* T 하이원 리조트 설명 */
  .main-card .inner > span {
    font-size: 20px;
  }

  /* T 하이원 리조트 제목 */
  .main-card h2 {
    margin-bottom: 40px;
    font-size: 48px;
  }

  /* T 하이원 리조트 카드 목록 */
  .main-card .card-list {
    flex-direction: column;
    align-items: center;
    gap: 20px 0;
    text-align: left;
  }

  /* T 하이원 리조트 카드 */
  .main-card .card-list li {
    width: 100%;
    height: 100px;
  }

  /* T 하이원 리조트 펼침 카드 */
  .main-card .card-list li.on {
    width: 100%;
    height: 424px;
  }

  /* T 하이원 리조트 접힘 카드 제목 */
  .main-card .card-list li .txt-wrap h3 {
    left: 40px;
    bottom: 22px;
    font-size: 40px;
    transform: none;
  }

  /* T 하이원 리조트 펼침 카드 텍스트 영역 */
  .main-card .card-list li.on .txt-wrap {
    height: 152px;
    padding: 26px 30px;
  }

  /* T 하이원 리조트 펼침 카드 제목 */
  .main-card .card-list li.on h3 {
    position: static;
    transform: none;
  }
  /* ====================================== 테블릿분기점 tab */
  /* T 패키지&프로모션 */
  .main-tab {
    height: auto;
    padding: 40px 0 69px;
  }

  /* T 패키지&프로모션 inner */
  .main-tab .inner {
    display: block;
  }

  /* T 패키지&프로모션 상단 */
  .main-tab .tab-wrap {
    width: 100%;
    margin-bottom: 50px;
    text-align: center;
  }

  /* T 패키지&프로모션 설명 */
  .main-tab .tit-wrap > span {
    font-size: 20px;
  }

  /* T 패키지&프로모션 제목 */
  .main-tab h2 {
    font-size: 48px;
  }

  /* T 패키지&프로모션 탭 메뉴 */
  .main-tab .tab-menu {
    margin-bottom: 50px;
  }

  /* T 패키지&프로모션 카드 목록 */
  .main-tab .tab-panel ul {
    justify-content: center;
  }

  /* T 패키지&프로모션 카드 숨김 */
  .main-tab .tab-panel li:nth-child(n + 3) {
    display: none;
  }

  /* T 패키지&프로모션 더보기 영역 */
  .main-tab .more-wrap {
    width: 100%;
    margin: 42px 0 0;
    text-align: center;
  }

  /* T 패키지&프로모션 더보기 */
  .main-tab .more-wrap a {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    background: var(--point-color1);
    line-height: 40px;
  }

  /* T 패키지&프로모션 더보기 텍스트 */
  .main-tab .more-wrap a span {
    color: #fff;
    font-size: 18px;
  }

  /* T 패키지&프로모션 더보기 화살표 */
  .main-tab .more-wrap a::after {
    background-image: url(../images/arrow-right-s-line-white.svg);
  }

  /* =============================테블릿분기점 link  */
  /* T 공지사항, 하이원 갤러리 */
  .main-link {
    padding: 70px 0;
  }

  /* T 공지사항, 하이원 갤러리 목록 */
  .main-link .link-list {
    flex-direction: column;
    align-items: center;
    gap: 30px 0;
  }

  /* T 공지사항, 하이원 갤러리 카드 */
  .main-link li {
    width: 100%;
  }

  /* ====================================== 테블릿분기점 퀵메뉴 */
  /* T 퀵메뉴 */
  .main-quick {
    right: 20px;
    top: auto;
    bottom: 30px;
    width: 60px;
    transform: translate(0);
  }

  /* T 퀵메뉴 목록 숨김 */
  .main-quick .quick-wrap {
    display: none;
  }
  /* T 퀵메뉴 상단 여백 */
  .main-quick .quick-reserve {
    padding-top: 31px;
  }

  /* =================테블릿분기점 footer */

  /* T footer middle 영역 */
  #footer .middle {
    padding: 36px 0;
  }
  #footer .middle .inner {
    gap: 40px;
  }

  /* T footer 약관 메뉴 묶음 */
  #footer .middle .menu-wrap {
    /* 늘어남방지 */
    min-width: 0;
    /* pc gap 초기화 */
    gap: 0;
  }
  /* T footer 약관 메뉴 1줄, 2줄 공통 */
  #footer .middle .footer-menu1,
  #footer .middle .footer-menu2 {
    gap: 8px 20px;
  }
  /* T footer 약관 메뉴 2줄 구분선 */
  #footer .middle .footer-menu2 {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #8e8e8e;
  }

  /* T footer bottom 영역 */
  #footer .bottom {
    padding: 34px 0 38px;
  }
  /* T footer 주소, 회사 정보 영역 */
  #footer .bottom .info {
    flex-wrap: wrap;
    gap: 20px 80px;
    margin-bottom: 60px;
  }
  /* T footer 주소, 회사 정보 */
  #footer .bottom .address,
  #footer .bottom .company {
    max-width: none;
  }

  /* T footer 인증마크 + 버튼 영역 */
  #footer .bottom .icon-wrap {
    gap: 30px;
  }
  /* T footer 인증마크 목록 */
  #footer .bottom .icon-list {
    flex-wrap: wrap;
    gap: 24px 45px;
  }
  /* T footer 버튼 영역 */
  #footer .bottom .btn-wrap {
    justify-content: flex-end;
    flex-shrink: 0;
  }

  /* T footer 패밀리 사이트 숨김 */
  #footer .bottom .family-site {
    display: none;
  }

  /* T footer top 버튼 숨김 */
  #footer .bottom .top-btn {
    display: none;
  }
}

/* 모바일 분기점  */
@media (max-width: 767px) {
  /* ============================== 모바일분기점 인트로영상  */
  .intro-video video {
    object-position: 50% center;
  }
  /* M 인트로 영상 닫기 버튼 */
  .intro-video .intro-close-btn {
    right: 20px;
    top: 20px;
    width: 42px;
    height: 42px;
  }

  /* M 인트로 영상 닫기 버튼 선 */
  .intro-video .intro-close-btn::before,
  .intro-video .intro-close-btn::after {
    width: 22px;
  }

  /* =======================================모바일분기점 header */
  #header .top .inner {
    height: 90px;
    justify-content: flex-start;
  }
  /* M 모바일 메인 로고 */
  #header .top .logo {
    width: 120px;
  }
  /* M 모바일 햄버거버튼 */
  #header .top .open-btn {
    width: 22px;
  }
  /* M 모바일 메뉴 스크롤  */
  #header .m-wrap .scroll {
    height: calc(100% - 90px);
    overflow: auto;
  }
  /* M 모바일 헤더 */
  #header .m-wrap .m-lang {
    height: 90px;
  }
  /* M 모바일 언어메뉴 */
  #header .m-wrap .m-lang-list {
    top: 56px;
  }
  /* M 모바일 닫기버튼 */
  #header .m-wrap .close-btn {
    top: 24px;
  }
  /* M 모바일메뉴 로고 */
  #header .m-wrap .m-logo {
    width: 120px;
  }
  /* M 모바일 로그인 제목 */
  #header .m-wrap .m-login .login {
    line-height: 39px;
    font-size: 26px;
  }
  /* M 모바일 회원가입 링크 */
  #header .m-wrap .m-login .join {
    font-size: 18px;
  }
  /* M 모바일 로그인 설명 */
  #header .m-wrap .m-login p {
    min-height: 48px;
  }
  /* M 모바일 메뉴 depth1,2,3 높이 */
  #header .m-wrap .m-gnb-wrap {
    height: calc(100% - 238px);
  }
  /* M 모바일메뉴 하단색상 */
  #header .m-wrap .m-gnb-wrap::after {
    width: 160px;
  }
  /* M 모바일 depth1 */
  #header .m-wrap .m-gnb > li > a {
    width: 160px;
    font-size: 15px;
  }
  /* M 모바일 depth2,3*/
  #header .m-wrap .m-gnb .depth2-wrap {
    left: 160px;
    width: calc(100% - 160px);
  }

  /* ====================================== 모바일분기점 메인비주얼 */
  .main-visual {
    min-height: 606px;
  }

  /* M 날씨 영역 */
  .main-visual .visual-weather {
    left: 20px;
    bottom: 19px;
    gap: 0 10px;
  }

  /* M 메인 비주얼 날씨 아이콘 */
  .main-visual .weather-icon::before {
    font-size: 38px;
  }

  /* M 메인 비주얼 날씨 지역 */
  .main-visual .weather-place {
    font-size: 14px;
  }

  /* M 메인 비주얼 날씨 온도 */
  .main-visual .weather-temp {
    font-size: 25px;
  }

  /* M 메인 비주얼 날씨 날짜 */
  .main-visual .weather-date {
    font-size: 12px;
  }

  /* M 예약 검색 영역 */
  .main-visual .visual-reserve {
    top: 51%;
  }
  /* M 예약 검색 박스 */
  .main-visual .reserve-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 20px;
    border-radius: 24px;
  }

  /* M 태블릿 경계선 제거 */
  .main-visual .reserve-list::after {
    display: none;
  }

  /* M 호텔 */
  .main-visual .reserve-item.hotel {
    order: 1;
    width: 100%;
    min-width: 0;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }
  /* M 호텔 오른쪽 세로 구분선 제거 */
  .main-visual .reserve-item.hotel::after {
    display: none;
  }

  /* M 날짜 */
  .main-visual .reserve-item.date {
    order: 2;
    width: 100%;
    min-width: 0;
    padding: 10px 0 6px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }

  /* M 인원 묶음 */
  .main-visual .count-list {
    order: 3;
    display: flex;
    align-items: stretch;
    width: 100%;
    border-bottom: none;
  }

  /* M 객실 */
  .main-visual .count-list .reserve-item.room {
    order: 1;
  }

  /* M 성인 */
  .main-visual .count-list .reserve-item.adult {
    order: 2;
  }

  /* M 어린이 */
  .main-visual .count-list .reserve-item.child {
    order: 3;
  }

  /* M 인원 한 칸 */
  .main-visual .count-list .reserve-item {
    align-items: center;
    width: calc(100% / 3);
    min-width: 0;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 10px 0;
    text-align: center;
  }

  /* M 검색 버튼 */
  .main-visual .search-btn {
    order: 4;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto 0;
    font-size: 16px;
  }

  /* M 예약 한 칸 */
  .main-visual .reserve-item {
    padding: 10px 0;
  }

  /* M PC 구분선 초기화 */
  .main-visual .reserve-item.date::before,
  .main-visual .count-list::before {
    display: none;
  }

  /* M 인원 내부 세로선 off */
  .main-visual .count-list .reserve-item + .reserve-item {
    border-left: none;
  }

  /* M 인원 제목 */
  .main-visual .count-list .reserve-tit {
    width: 100%;
    margin-bottom: 6px;
    text-align: center;
  }

  /* M 인원 숫자 영역 */
  .main-visual .count-box {
    justify-content: center;
    width: 100%;
  }
  /* M 인원 숫자 */
  .main-visual .count-box .number {
    font-size: 20px;
  }

  /* M 호텔/콘도, 체크인/체크아웃 영역*/
  .main-visual .reserve-btn {
    font-size: 15px;
  }
  /* M 호텔/콘도, 체크인/체크아웃 버튼*/
  .main-visual .reserve-btn .value {
    padding: 6px 0;
  }

  /* M 호텔 선택 목록 */
  .main-visual .option-list {
    left: -1px;
    top: 53px;
    width: 100%;
    max-height: 215px;
  }
  /* M 호텔 선택 목록 버튼 */
  .main-visual .option-list button {
    font-size: 18px;
  }

  /* M 날짜 선택창 */
  .main-visual .calendar {
    left: 0;
    top: 65px;
    width: 100%;
    padding: 18px;
  }
  /* M 날짜 년,월 */
  .main-visual .calendar-title {
    font-size: 20px;
  }
  /* M 날짜 요일 */
  .main-visual .calendar-week li {
    font-size: 18px;
  }
  /* M 날짜 일 */
  .main-visual .calendar-day {
    font-size: 16px;
  }
  /* M 날짜 선택 일정 */
  .main-visual .calendar-check {
    padding-top: 20px;
  }
  /* M 날짜 선택 완료 버튼 */
  .main-visual .select-btn {
    font-size: 18px;
  }

  /* ========================모바일분기점 card  */
  /* M 하이원 리조트 카드 */
  .main-card {
    padding: 50px 0;
  }

  /* M 하이원 리조트 설명 */
  .main-card .inner > span {
    font-size: 16px;
  }

  /* M 하이원 리조트 제목 */
  .main-card h2 {
    font-size: 32px;
  }

  /* M 하이원 리조트 카드 목록 */
  .main-card .card-list {
    gap: 10px 0;
  }

  /* M 하이원 리조트 카드 */
  .main-card .card-list li {
    width: 100%;
    height: 100px;
  }

  /* M 하이원 리조트 펼침 카드 */
  .main-card .card-list li.on {
    width: 100%;
    height: 250px;
  }

  /* M 하이원 리조트 접힘 카드 제목 */
  .main-card .card-list li .txt-wrap h3 {
    font-size: 30px;
  }

  /* M 하이원 리조트 펼침 카드 텍스트 영역 */
  .main-card .card-list li.on .txt-wrap {
    height: 100px;
    padding: 12px 20px;
  }

  /* M 하이원 리조트 펼침 카드 설명 */
  .main-card .card-list li.on .txt-wrap > span {
    font-size: 16px;
  }

  /* M 하이원 리조트 펼침 카드 제목 */
  .main-card .card-list li.on h3 {
    font-size: 28px;
  }
  /* ======================================== 모바일분기점 tab  */
  /* M 패키지&프로모션 */
  .main-tab {
    padding: 44px 0 48px;
  }

  /* M 패키지&프로모션 상단 */
  .main-tab .tab-wrap {
    margin-bottom: 12px;
  }

  /* M 패키지&프로모션 설명 */
  .main-tab .tit-wrap > span {
    font-size: 16px;
  }

  /* M 패키지&프로모션 제목 */
  .main-tab h2 {
    font-size: 32px;
  }

  /* M 패키지&프로모션 탭 메뉴 */
  .main-tab .tab-menu {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    gap: 10px;
    margin: 0 auto 30px;
  }

  /* M 패키지&프로모션 탭 버튼 */
  .main-tab .tab-menu button {
    font-size: 16px;
  }

  /* M 패키지&프로모션 카드 목록 */
  .main-tab .tab-panel ul {
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
  }

  /* M 패키지&프로모션 카드 */
  .main-tab .tab-panel li {
    width: 100%;
    max-width: 320px;
    height: 333px;
  }

  /* M 패키지&프로모션 카드 이미지 */
  .main-tab .img-wrap {
    height: 213px;
  }

  /* M 패키지&프로모션 카드 텍스트 */
  .main-tab .txt-wrap {
    height: 120px;
    padding: 10px 15px;
  }

  /* M 패키지&프로모션 카드 분류 */
  .main-tab .txt-wrap a > span {
    font-size: 13px;
  }

  /* M 패키지&프로모션 카드 제목 */
  .main-tab .txt-wrap h3 {
    margin-top: 0;
    font-size: 16px;
  }

  /* M 패키지&프로모션 카드 설명 */
  .main-tab .txt-wrap p {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 14px;
  }

  /* M 패키지&프로모션 카드 날짜 */
  .main-tab .txt-wrap > span {
    font-size: 13px;
  }

  /* M 패키지&프로모션 더보기 영역 */
  .main-tab .more-wrap {
    margin-top: 30px;
  }
  /* ======================================모바일분기점 link */
  /* M 공지사항, 하이원 갤러리 */
  .main-link {
    padding: 50px 0;
  }

  /* M 공지사항, 하이원 갤러리 목록 */
  .main-link .link-list {
    gap: 21px 0;
  }

  /* M 공지사항, 하이원 갤러리 제목 */
  .main-link h2 {
    font-size: 32px;
  }

  /* M 공지사항, 하이원 갤러리 더보기 */
  .main-link a {
    width: 80px;
    height: 35px;
  }

  /* ============================== 모바일분기점 퀵메뉴 */
  /* M 퀵메뉴 */
  .main-quick {
    right: 16px;
    width: 60px;
  }

  /* M 퀵메뉴 바로예약 */
  .main-quick .quick-reserve {
    width: 54px;
    height: 96px;
    padding-top: 21px;
    border-radius: 30px;
    font-size: 12px;
    line-height: 1.3;
  }

  /* M 퀵메뉴 바로예약 아이콘 */
  .main-quick .quick-reserve::before {
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
  }

  /* ===================================== 모바일 footer  */
  /* M footer SNS 영역 */
  #footer .top {
    height: 64px;
  }
  #footer .top .inner {
    justify-content: center;
  }

  /* M footer 로고 + 약관 링크 영역 */
  #footer .middle {
    padding: 28px 0 26px;
  }
  #footer .middle .inner {
    display: block;
  }
  /* M footer 로고 */
  #footer .middle .logo {
    width: 100px;
  }

  /* M footer 약관 메뉴 묶음 */
  #footer .middle .menu-wrap {
    margin-top: 20px;
  }
  /* M footer 약관 메뉴 1줄, 2줄 공통 */
  #footer .middle .footer-menu1,
  #footer .middle .footer-menu2 {
    gap: 10px 18px;
  }
  /* M footer 약관 메뉴 2줄 구분선 */
  #footer .middle .footer-menu2 {
    margin-top: 12px;
    padding-top: 12px;
  }

  /* M footer 회사 정보 영역 */
  #footer .bottom {
    padding: 28px 0 30px;
  }
  #footer .bottom .info {
    display: block;
    margin-bottom: 34px;
  }

  #footer .bottom .company {
    margin-top: 20px;
  }
  /* M footer 주소, 회사 정보 텍스트 */
  #footer .bottom .address p,
  #footer .bottom .company p {
    font-size: 12px;
  }

  /* M footer 인증마크 + 버튼 영역 */
  #footer .bottom .icon-wrap {
    display: block;
  }
  /* M footer 인증마크 목록 */
  #footer .bottom .icon-list {
    gap: 18px 28px;
  }
  #footer .bottom .icon-list .icon {
    width: 80px;
  }
  #footer .bottom .icon-list .icon img {
    width: 80px;
  }
  #footer .bottom .icon-list .cmark {
    width: 46px;
  }
  #footer .bottom .icon-list .cmark img {
    width: 46px;
  }
  /* M footer 버튼 영역 */
  #footer .bottom .btn-wrap {
    margin-top: 28px;
  }

  /* M footer copyright */
  #footer .bottom .copyright {
    margin-top: 24px;
    font-size: 12px;
    line-height: 1.6;
  }
}