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

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

/* =============================================
   navigation: 탭 버튼 4개 + sticky
   ============================================= */
#wl_nav {
  position: relative;
  top: -7px;
  z-index: 100;
}
#wl_nav.is-sticky {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
}
@media (max-width: 767px) {
  #wl_nav.is-sticky {
    top: -3px;
  }
}
#wl_nav > #wl_nav_btn_wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  display: flex;
}
@media (max-width: 767px) {
  #wl_nav > #wl_nav_btn_wrapper {
    left: 0;
    transform: none;
    width: 100%;
  }
}
#wl_nav > #wl_nav_btn_wrapper > .wl-nav-btn {
  flex: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  padding: 0;
}

/* sticky 일 때 placeholder로 높이 유지 */
#wl_nav_placeholder {
  display: none;
}

/* =============================================
   context1: 탭 콘텐츠 전환
   ============================================= */
#wl_context1 > .wl-ctx1 {
  display: none;
}

#wrcard_list_container.active_wl-tab1 #wl_context1 > .wl-tab1 {
  display: block;
}
#wrcard_list_container.active_wl-tab2 #wl_context1 > .wl-tab2 {
  display: block;
}
#wrcard_list_container.active_wl-tab3 #wl_context1 > .wl-tab3 {
  display: block;
}
#wrcard_list_container.active_wl-tab4 #wl_context1 > .wl-tab4 {
  display: block;
}

/* =============================================
   context2: 탭 콘텐츠 전환
   ============================================= */
#wl_context2 > .wl-ctx2 {
  display: none;
}

#wrcard_list_container.active_wl-tab1 #wl_context2 > .wl-tab1 {
  display: block;
}
#wrcard_list_container.active_wl-tab2 #wl_context2 > .wl-tab2 {
  display: block;
}
#wrcard_list_container.active_wl-tab3 #wl_context2 > .wl-tab3 {
  display: block;
}
#wrcard_list_container.active_wl-tab4 #wl_context2 > .wl-tab4 {
  display: block;
}

/* =============================================
   context2: 배경/패딩
   ============================================= */
.wl_context2 {
  background: white;
  padding: 8% 10%;
}
@media (max-width: 767px) {
  .wl_context2 {
    padding: unset;
  }
}

/* =============================================
   context2: 이미지 그리드 (행당 최대 3개, flex 중앙정렬)
   ============================================= */
.wl-grid {
  /* ---------- PC ---------- */
}
.wl-grid.is-pc {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: flex-end;
}
.wl-grid.is-pc:nth-child(n+2) {
  margin-top: 10%;
}
@media (max-width: 767px) {
  .wl-grid.is-pc {
    display: none;
  }
}
.wl-grid {
  /* ---------- MO ---------- */
}
.wl-grid.is-mo {
  display: none;
}
@media (max-width: 767px) {
  .wl-grid.is-mo {
    display: flex;
    flex-direction: column;
  }
}

/* =============================================
   그리드 아이템 + 하단 링크 오버레이
   ============================================= */
.wl-grid-item {
  position: relative;
  display: block;
}
.is-pc .wl-grid-item {
  width: 33.3333333333%;
  /* 하단 투명 링크 오버레이 (이미지 위) */
}
.is-pc .wl-grid-item .wl-grid-link-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9%; /* 하단 ~18% 영역 차지 */
  display: flex;
}
.is-pc .wl-grid-item .wl-grid-link-overlay .wl-grid-link {
  flex: 1;
  display: block;
  text-indent: -9999px; /* 텍스트 숨김 */
  overflow: hidden;
}
.is-mo .wl-grid-item {
  width: 100%;
  /* 하단 투명 링크 오버레이 (이미지 위) */
}
.is-mo .wl-grid-item .wl-grid-link-overlay {
  position: absolute;
  bottom: 0;
  top: 96%;
  left: 50%;
  width: 67%;
  height: 8%;
  display: flex;
  transform: translate(-50%, -50%);
}
.is-mo .wl-grid-item .wl-grid-link-overlay .wl-grid-link {
  flex: 1;
  display: block;
  text-indent: -9999px; /* 텍스트 숨김 */
  overflow: hidden;
}
.wl-grid-item > img {
  width: 100%;
  display: block;
}

/* =============================================
   프로모션 유의사항 토글
   ============================================= */
.promotion-caution-wrapper.is-pc > .promotion-caution-title-wrapper > .arrow-icon {
  left: 34.5%;
  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;
}