@charset "utf-8";

/* MAIN_SWCF_5 - 4개 카드 영역 */
.MAIN_SWCF_5 {
  overflow: hidden;
  position: relative;
  background-color: transparent; z-index: 2
}

.MAIN_SWCF_5 .contentContainer {
  position: relative;
  z-index: 1;
  width: 100%;
}

.MAIN_SWCF_5 .list-group {
  overflow: hidden;
  position: relative;
  border-radius: 3.2rem;
  width: 100%;
  background: transparent;
}

.MAIN_SWCF_5 .list-group .bg-wrap {
  position: absolute;
  inset: 0;
}

.MAIN_SWCF_5 .list-group .bg-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(var(--black-rgb), 0.4);
  pointer-events: none;
}

.MAIN_SWCF_5 .list-group .bg-wrap [class*="bg-img"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.MAIN_SWCF_5 .list-group .bg-wrap [class*="bg-img"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.MAIN_SWCF_5 .list-group:has(.item1:hover) .bg-wrap .bg-img1 {
  opacity: 1;
}

.MAIN_SWCF_5 .list-group:has(.item2:hover) .bg-wrap .bg-img2 {
  opacity: 1;
}

.MAIN_SWCF_5 .list-group:has(.item3:hover) .bg-wrap .bg-img3 {
  opacity: 1;
}

.MAIN_SWCF_5 .list-group:has(.item4:hover) .bg-wrap .bg-img4 {
  opacity: 1;
}

.MAIN_SWCF_5 .list-group .list-area {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 10;
}

.MAIN_SWCF_5 .list-area .list-item {
  flex: 1;
  position: relative;
  height: auto;
}

.MAIN_SWCF_5 .list-area .list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--white);
  z-index: 10;
}

.MAIN_SWCF_5 .list-item .cardset {
  display: block;
  position: relative;
  z-index: 1; 
}

.MAIN_SWCF_5 .list-item .cardset-img {
  display: block;
  position: relative;
  height: 46rem;
  transition: opacity 0.5s ease-in-out;
  z-index: 1; 
}

.MAIN_SWCF_5 .list-item .cardset-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;  
}

.MAIN_SWCF_5 .list-group:has(.list-item:hover) .cardset-img {
  opacity: 0;
}

.MAIN_SWCF_5 .list-item .cardset-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(var(--black-rgb), 0.4);
  pointer-events: none;
}

.MAIN_SWCF_5 .list-item .cardset-body {
  position: absolute;
  inset: auto 0 0;
  padding: 4rem;
  z-index: 10;
}

.MAIN_SWCF_5 .list-item .cardset-tit,
.MAIN_SWCF_5 .list-item .cardset-desc {
  color: var(--white);
}

.MAIN_SWCF_5 .list-item .cardset-tit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  font-weight: var(--fw-bold);
}

.MAIN_SWCF_5 .list-item .cardset-desc {
  margin: 0.8rem 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
}

@media (max-width: 992px) {
  .MAIN_SWCF_5 .list-group {
    overflow: visible;
    border-radius: 0;
  }

  .MAIN_SWCF_5 .list-group .bg-wrap {
    display: none;
  }

  .MAIN_SWCF_5 .list-group .list-area {
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
  }

  .MAIN_SWCF_5 .list-area .list-item {
    flex: none;
    overflow: hidden;
    width: 100%;
    border-radius: 2.4rem;
  }

  .MAIN_SWCF_5 .list-item .cardset-img {
    height: 28rem;
  }

  .MAIN_SWCF_5 .list-group:has(.list-item:hover) .cardset-img {
    opacity: 1;
  }

  .MAIN_SWCF_5 .list-item .cardset-body {
    padding: 2.4rem;
  }
}

/* 관리자 인라인 편집 */
.MAIN_SWCF_5 .wg_edit_txt,
.MAIN_SWCF_5 .wg_edit_link {
    position: relative;
    z-index: 10;
    cursor: pointer;
    display: block;
}

.MAIN_SWCF_5 .wg_edit_img {
    cursor: pointer;
}

/* cardset-img는 기존 스타일 유지 */
.MAIN_SWCF_5 .cardset-img.wg_edit_img {
    position: relative;
    z-index: 1;
}

/* hover 효과 무시 */
.MAIN_SWCF_5 .wg_edit_txt,
.MAIN_SWCF_5 .wg_edit_txt:hover {
    background-color: transparent !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.MAIN_SWCF_5 .wg_edit_img,
.MAIN_SWCF_5 .wg_edit_img:hover {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.MAIN_SWCF_5 .wg_edit_link,
.MAIN_SWCF_5 .wg_edit_link:hover {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}