@charset "UTF-8";
/* =============================================
   컨테이너
   ============================================= */
#star_travel_container {
  max-width: 1920px;
  margin: auto;
}

img {
  margin: auto;
}

/* =============================================
   공통: 탭 네비게이션 이미지 + 투명 버튼 오버레이
   ============================================= */
.nav-img-wrapper {
  width: 100%;
}
.nav-img-wrapper > img {
  display: none;
}
.nav-img-wrapper > img.active {
  display: block;
}

/* ── 1영역 탭 네비게이션 (버튼 3개) ── */
#st_nav_1 {
  position: relative;
}
#st_nav_1 > #st_nav_1_btn_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 100%;
  display: flex;
}
@media (max-width: 767px) {
  #st_nav_1 > #st_nav_1_btn_wrapper {
    width: 100%;
  }
}
#st_nav_1 > #st_nav_1_btn_wrapper > .st-nav-btn {
  flex: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  padding: 0;
}

/* ── 2영역 탭 네비게이션 (버튼 2개) ── */
#st_nav_2 {
  position: relative;
}
#st_nav_2 > #st_nav_2_btn_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
#st_nav_2 > #st_nav_2_btn_wrapper > .st-nav-btn2 {
  flex: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  padding: 0;
}

/* =============================================
   1-1 영역: 탭 콘텐츠 전환 (버튼 3개)
   - > .st-tab-contents > .st-tab 으로 한정:
     #st_section_2 내 .st-tab2 클래스와 충돌 방지
   ============================================= */
#st_sticky_wrapper > .st-tab-contents > .st-tab {
  display: none;
}
#st_sticky_wrapper.active_st-tab1 > .st-tab-contents > .st-tab1 {
  display: block;
}
#st_sticky_wrapper.active_st-tab2 > .st-tab-contents > .st-tab2 {
  display: block;
}
#st_sticky_wrapper.active_st-tab3 > .st-tab-contents > .st-tab3 {
  display: block;
}

/* =============================================
   2영역: 2-1 탭 콘텐츠 전환 (버튼 2개)
   ============================================= */
#st_section_2 .st-tab2 {
  display: none;
}
#st_section_2.active_st-tab2-1 .st-tab2-1 {
  display: block;
}
#st_section_2.active_st-tab2-2 .st-tab2-2 {
  display: block;
}

/* =============================================
   sticky 컨테이너: #st_section_1_1 ~ st-section2-apply-btn
   - overflow 금지 (sticky 동작 요건)
   - apply-btn은 wrapper의 직접 자식 → wrapper 전체가 sticky 범위
   ============================================= */
#st_sticky_wrapper {
  overflow: visible;
}

/* =============================================
   apply-btn: 기본 숨김 / 활성 탭에 따라 노출
   - #st_sticky_wrapper.active_st-tab2-X 로 탭 전환 연동
   ============================================= */
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn,
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn {
  display: block;
  position: sticky;
  bottom: 0;
  z-index: 100;
}
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn > .apply-btn-inner,
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn > .apply-btn-inner {
  position: relative;
}
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn > .apply-btn-inner > img,
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn > .apply-btn-inner > img {
  display: block;
}
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay,
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn,
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn {
  position: absolute;
  display: block;
  cursor: pointer;
}
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn:nth-child(1),
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn:nth-child(1) {
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
}
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn:nth-child(2),
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn:nth-child(2) {
  top: 0;
  left: 50%;
  width: 50%;
  height: 50%;
}
#st_sticky_wrapper.active_st-tab2-1 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn:nth-child(3),
#st_sticky_wrapper.active_st-tab2-2 .st-section2-apply-btn > .apply-btn-inner > .st-apply-btn-overlay > .st-apply-btn:nth-child(3) {
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
}

/* =============================================
   공통: apply-btn-wrapper 링크 위치
   ============================================= */
.apply-btn-wrapper {
  position: relative;
}
.apply-btn-wrapper > img.is-pc + .link {
  width: 48%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 55%;
  cursor: pointer;
}
.apply-btn-wrapper > img.is-mo + .link {
  width: 90%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 60%;
  cursor: pointer;
}

/* =============================================
   Benefit 아코디언 토글
   ============================================= */
.benefit.is-pc > .benefit-title {
  position: relative;
  cursor: pointer;
}
.benefit.is-pc > .benefit-title > .benefit-toggle-btn {
  position: absolute;
  right: 26%;
  top: 56%;
  width: 3%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  rotate: 180deg;
  transition: rotate 0.2s ease;
  transform-origin: center;
}
.benefit.is-pc > .benefit-title > .benefit-toggle-btn > img {
  display: block;
  width: 87%;
}
.benefit.is-mo > .benefit-title {
  position: relative;
  cursor: pointer;
}
.benefit.is-mo > .benefit-title > .benefit-toggle-btn {
  position: absolute;
  right: 12%;
  top: 55%;
  width: 5%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  rotate: 180deg;
  transition: rotate 0.2s ease;
  transform-origin: center;
}
.benefit.is-mo > .benefit-title > .benefit-toggle-btn > img {
  display: block;
  width: 87%;
}
.benefit > .benefit-content {
  overflow: hidden;
  transition: height 0.2s ease;
}
.benefit.opened > .benefit-title > .benefit-toggle-btn {
  rotate: 0deg;
}

/* =============================================
   Service-contents 아코디언 토글
   ============================================= */
.service-contents.is-pc > .service-title {
  position: relative;
  cursor: pointer;
}
.service-contents.is-pc > .service-title > .service-toggle-btn {
  position: absolute;
  right: 26%;
  top: 43%;
  width: 3%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  rotate: 180deg;
  transition: rotate 0.2s ease;
  transform-origin: center;
}
.service-contents.is-pc > .service-title > .service-toggle-btn > img {
  display: block;
  width: 87%;
}
.service-contents.is-mo > .service-title {
  position: relative;
  cursor: pointer;
}
.service-contents.is-mo > .service-title > .service-toggle-btn {
  position: absolute;
  right: 10%;
  top: 45%;
  width: 5%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  rotate: 180deg;
  transition: rotate 0.2s ease;
  transform-origin: center;
}
.service-contents.is-mo > .service-title > .service-toggle-btn > img {
  display: block;
  width: 87%;
}
.service-contents > .service-content {
  overflow: hidden;
  transition: height 0.2s ease;
}
.service-contents.opened > .service-title > .service-toggle-btn {
  rotate: 0deg;
}

/* =============================================
   프로모션 유의사항 토글
   ============================================= */
.promotion-caution-wrapper.is-pc > .promotion-caution-title-wrapper > .arrow-icon {
  width: 2%;
  top: 54%;
}
.promotion-caution-wrapper > .promotion-caution-title-wrapper {
  cursor: pointer;
  position: relative;
}
.promotion-caution-wrapper > .promotion-caution-title-wrapper > .arrow-icon {
  position: absolute;
  left: 38%;
  width: 3.8%;
  top: 40%;
  rotate: 180deg;
  transition: rotate 0.2s ease;
}
.promotion-caution-wrapper > .promotion-caution-title-wrapper.opened > .arrow-icon {
  rotate: 0deg;
}
.promotion-caution-wrapper > .promotion-caution-contents-wrapper {
  overflow: hidden;
  transition: height 0.2s ease;
}

/* =============================================
   하단 고정 detail-button
   ============================================= */
.detail-button {
  z-index: 100;
  position: sticky;
  bottom: 0;
  height: 0;
  transform-origin: bottom;
}
.detail-button > img {
  position: absolute;
  bottom: 0;
  left: 0;
}
.detail-button > a {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-bottom: 14.815%;
}
.detail-button.is-pc > a {
  padding-bottom: 8.073%;
}

/* =============================================
   호텔 스와이퍼 페이지네이션 불릿
   ============================================= */
.event-contents-text-hotel > .event-contents-swiper-footer {
  position: relative;
}
.event-contents-text-hotel > .event-contents-swiper-footer > .swiper-pagination {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 0;
}
.event-contents-text-hotel > .event-contents-swiper-footer > .swiper-pagination > .swiper-pagination-bullet {
  background: #030b52;
  opacity: 0.4;
  padding-bottom: 2.2%;
  width: 2.2%;
  margin: 0 1.25%;
}
.event-contents-text-hotel > .event-contents-swiper-footer > .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.event-contents-wrapper.is-pc .event-contents-text-hotel > .event-contents-swiper-footer > .swiper-pagination > .swiper-pagination-bullet {
  padding-bottom: 0.9%;
  width: 0.9%;
  margin: 0 0.6%;
}