@charset "utf-8";

/* 첫 번째 섹션 스타일 */
#atc01 {
  padding: 0 !important;
  height: 100vh !important;
  /* Black base + global overlay (left image separated to its own layer) */
  background-color: #000000 !important;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.55) 100%) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  color: #fff !important;
}

/* Left vertical panel (separate layer) */
.atc01_left_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  /* 위에 올라와 있어야 클릭 레이어 아래에서 보임 */
}

.atc01_left,
.atc01_left_clone {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

.atc01_left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../../images/s_1.jpg');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0;
  filter: blur(10px);
}

/* 클릭 가능한 투명 레이어 (우상, 우하) */
.atc01_click_top,
.atc01_click_bottom {
  position: absolute;
  right: 0;
  width: 40%;
  height: 50%;
  z-index: 3;
  /* 히어로 아래, 배경 위 */
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.atc01_click_top {
  top: 0;
}

.atc01_click_bottom {
  bottom: 0;
}

/* 우측 실제 패널(의사요소 대체) */
.atc01_rtop,
.atc01_rbottom {
  position: absolute;
  right: 0;
  width: 40%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity .35s ease, width .6s ease, height .6s ease, top .6s ease, bottom .6s ease;
  will-change: opacity, background-image, width, height, top, bottom;
  pointer-events: none;
  /* 이벤트는 항상 클릭 오버레이가 받도록 */
}

/* === 비디오 삽입용 스타일 (우상) === */
.atc01_rtop {
  z-index: 1;
  top: 0;
  height: 50%;
  overflow: hidden;
  position: absolute;
}

.atc01_rtop .rtop_video {
  position: absolute;
  left: 0;
  top: -2px;
  width: 100%;
  height: calc(100% + 11px);
  object-fit: cover;
  object-position: center bottom;
  display: block;
  pointer-events: none;
  background-color: transparent;
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (max-width: 890px) {
  #atc01 .atc01_rtop .rtop_video {
    object-fit: cover !important;
    object-position: center 42% !important;
    transform: translateZ(0) scale(1.06) !important;
  }
}

@media (max-width: 420px) {
  #atc01 .atc01_rtop .rtop_video {
    object-position: center 38% !important;
    transform: translateZ(0) scale(1.09) !important;
  }
}

.atc01_rtop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
}

.atc01_rbottom {
  z-index: 0;
  bottom: 0;
  height: 50%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)), url('../../../images/s_3.jpg');
  transform: translateY(-0.5px);
}

/* 마지막 호버에 따른 기본 우선순위 스위칭 */
#atc01.last-rtop .atc01_rtop {
  z-index: 1;
}

#atc01.last-rtop .atc01_rbottom {
  z-index: 0;
}

#atc01.last-rbottom .atc01_rbottom {
  z-index: 1;
}

#atc01.last-rbottom .atc01_rtop {
  z-index: 0;
}

/* 우측 패널 페이드 전환용 클래스 */
.rt_fade_out {
  opacity: 0 !important;
}

/* 기존 의사요소 비활성화(중복 표시 방지) */
#atc01::before,
#atc01::after {
  content: none !important;
}

/* 좌측 이미지 스와프 전환(슬라이드) */
.swap-enter {
  transform: translateX(100%);
  opacity: 0;
}

.swap-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.swap-exit {
  transform: translateX(0);
  opacity: 1;
}

.swap-exit-active {
  transform: translateX(-20%);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.atc01_inner {
  height: 100%;
  padding: 0 6vw !important;
  max-width: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

/* Hero content block (new) */
.atc01_hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* right aligned like sample */
  padding: 0 6vw;
}

#atc01 .hero_content {
  text-align: right;
  max-width: 560px;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
}

#atc01 .hero_title {
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 800;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 0.95;
  color: #fff;
  margin: 0 0px 14px 20px;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
}

#atc01 .hero_sub {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.8;
  margin: 6px 0px 28px 0;
}

#atc01 .hero_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 52px;
  padding: 0 28px;
  border-radius: 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  transition: background .2s, border-color .2s, transform .15s;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
}

#atc01 .hero_btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  transform: translateY(-1px);
}

/* 우상 호버 시 나타날 텍스트 스타일 (우측 영역에 배치) */
.rtop_hover_text {
  position: absolute;
  right: 0;
  top: 0;
  width: 60%; /* 최종 레이아웃과 동일하게 고정 */
  height: 100%; /* 최종 레이아웃과 동일하게 고정 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 170px 10px 10px 10px;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px); /* 아래에서 시작 */
  transition: opacity 1.3s ease-out, transform 1.3s ease-out !important; /* 속도 느리게 */
  pointer-events: none;
}

#atc01 .rtop_title_hover {
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 48px);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 24px 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out !important; /* 속도 느리게 */
}

#atc01 .rtop_sub_hover {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out !important; /* 사용자 설정 유지 */
  transition-delay: 0.3s !important; /* 서브타이틀 명확한 지연 */
}

/* 우하 호버 텍스트(우측 중앙) */
.rbottom_hover_text {
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 세로 중앙 */
  align-items: flex-end;    /* 가로 우측 정렬 */
  text-align: right;        /* 텍스트도 우측 정렬 */
  padding: 0 6vw;           /* 우측 여백 확보 */
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px); /* 아래에서 시작 */
  transition: opacity 1.3s ease-out, transform 1.3s ease-out !important; /* 컨테이너 속도 */
  pointer-events: none;
}

#atc01 .rbottom_title_hover {
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 48px);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 16px 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out !important;
}

#atc01 .rbottom_sub_hover {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.7;
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 2.0s ease-out, transform 2.0s ease-out !important;
  transition-delay: .3s !important; /* 타이틀보다 조금 늦게 */
}

/* Hide legacy UI pieces visually */
.business-card-list {
  display: none !important;
}

.atc01_top_row {
  display: none !important;
}

.business-category-btn {
  display: none !important;
}

.business-category-btn:first-child::after {
  content: none !important;
}

@media (max-width: 767px) {
  .atc01_hero {
    justify-content: center;
    padding: 0 5vw;
  }

  #atc01 .hero_content {
    text-align: center;
  }
}

@media (max-width: 1024px) {

  /* 섹션1: 모바일에서는 우측 상/하 이미지를 세로로 노출 */
  #atc01 {
    height: 100dvh !important;
    min-height: 100dvh !important;
    background: none !important; /* 단일 좌측 배경 제거 */
  }

  /* 좌측 패널은 모바일에서 사용 안 함 */
  #atc01 .atc01_left_wrap,
  #atc01 .atc01_left,
  #atc01 .atc01_left_clone {
    display: none !important;
  }

  /* 우측 상/하 이미지를 세로 스택으로 노출 + 클릭 가능 */
  #atc01 .atc01_rtop,
  #atc01 .atc01_rbottom {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 50dvh !important; /* 상/하 반반 영역 */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* 모바일에서 탭 이벤트 허용 */
    cursor: pointer;
    z-index: 0 !important;
    transition: height .4s ease;
    overflow: hidden; /* 확장/축소 시 깔끔하게 */
  }

  /* 비디오는 컨테이너에 맞춰 유지 */
  #atc01 .atc01_rtop .rtop_video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* 클릭 레이어는 모바일에서 사용하지 않음 (패널 자체를 탭) */
  #atc01 .atc01_click_top,
  #atc01 .atc01_click_bottom {
    display: none !important;
  }

  /* ===== Hero(처음 중앙 텍스트) 표시 - 모바일용 축소 스타일 ===== */
  #atc01 .atc01_hero {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important; /* 섹션 전체 중앙 오버레이 */
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6vw !important;
    z-index: 3 !important;
    pointer-events: none !important; /* 텍스트는 인터랙션 차단 */
  }

  #atc01 .hero_content {
    display: block !important;
    text-align: center !important;
    max-width: 82vw !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #atc01 .hero_title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.05 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #atc01 .hero_sub {
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1.6 !important;
    margin: 6px 0 0 0 !important;
  }

  /* 초기 상태에서는 호버 텍스트 숨김 */
  #atc01 .rtop_hover_text,
  #atc01 .rbottom_hover_text {
    position: absolute !important;
    inset: 0 !important; /* 전체 덮는 레이어 */
    width: 100% !important;
    height: 100% !important;
    display: none !important; /* 확장 시 노출 */
    padding: 16vh 6vw 12vh !important; /* 모바일 여백 */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 3 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    pointer-events: none !important;
  }

  /* 확장 상태: 상단 전체 확장 */
  #atc01.mobile-expand-top .atc01_rtop {
    height: 100dvh !important;
  }
  #atc01.mobile-expand-top .atc01_rbottom {
    height: 0 !important;
  }
  #atc01.mobile-expand-top .atc01_hero {
    display: none !important; /* 확장 시 히어로 숨김 */
  }
  #atc01.mobile-expand-top .rtop_hover_text {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 확장 상태: 하단 전체 확장 */
  #atc01.mobile-expand-bottom .atc01_rtop {
    height: 0 !important;
  }
  #atc01.mobile-expand-bottom .atc01_rbottom {
    height: 100dvh !important;
  }
  #atc01.mobile-expand-bottom .atc01_hero {
    display: none !important;
  }
  #atc01.mobile-expand-bottom .rbottom_hover_text {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 모바일용 호버 텍스트 폰트 크기 조정 */
  #atc01 .rtop_title_hover,
  #atc01 .rbottom_title_hover {
    font-size: clamp(20px, 6vw, 32px) !important;
    line-height: 1.15 !important;
    margin: 0 0 10px 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #atc01 .rtop_sub_hover,
  #atc01 .rbottom_sub_hover {
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1.6 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 레거시 배경 의사요소/오버레이 제거 보강 */
  #atc01::before,
  #atc01::after {
    content: none !important;
  }
}

/* ===== Section 1 SOFT reveal (no directional slide) ===== */
@keyframes atc01_soft_reveal {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes atc01_soft_fade_up {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 섹션1 진입 시: 더 느리고 자연스럽게 */
body[data-section="1"] #atc01 .atc01_left {
  animation: atc01_soft_reveal 1.5s 0s cubic-bezier(.25, .8, .25, 1) forwards;
}

body[data-section="1"] #atc01 .atc01_rtop {
  animation: atc01_soft_reveal 1.4s 0.22s cubic-bezier(.25, .8, .25, 1) forwards;
}

body[data-section="1"] #atc01 .atc01_rbottom {
  animation: atc01_soft_reveal 1.4s 0.42s cubic-bezier(.25, .8, .25, 1) forwards;
}

/* 텍스트/버튼은 마지막에 더 여유롭게 페이드 업 */
body[data-section="1"] #atc01 .hero_content {
  animation: atc01_soft_fade_up 1.1s 0.8s cubic-bezier(.25, .8, .25, 1) forwards;
}

body[data-section="1"] #atc01 .hero_title {
  animation: atc01_soft_fade_up 1.1s 0.92s cubic-bezier(.25, .8, .25, 1) forwards;
}

body[data-section="1"] #atc01 .hero_btn {
  animation: atc01_soft_fade_up 1.1s 1.05s cubic-bezier(.25, .8, .25, 1) forwards;
}

/* 모션 최소화 환경 대응 */
@media (prefers-reduced-motion: reduce) {

  #atc01 .atc01_left,
  #atc01 .atc01_rtop,
  #atc01 .atc01_rbottom,
  #atc01 .hero_content,
  #atc01 .hero_title,
  #atc01 .hero_btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== Hover 레이아웃 전환: 우상/우하 호버 시 재배치 ===== */
/* 공통 전환 */
.atc01_left_wrap,
.atc01_left,
.atc01_left_clone {
  transition: width .6s ease, height .6s ease, top .6s ease, bottom .6s ease, opacity .35s ease;
}

/* 기본(기존) 레이아웃: 좌 60% 1장, 우 40% 상/하 50% */
.atc01_left_wrap {
  width: 60%;
}

.atc01_left {
  top: 0;
  height: 100%;
  opacity: 1;
}

.atc01_left_clone {
  display: none;
  opacity: 1;
}

/* 우상 호버 시: 우상 확장, S1→좌상 축소, S3→좌하 이동 */
#atc01.hover-rtop .atc01_left_wrap {
  width: 40%;
}

/* 좌측 영역 축소 */
#atc01.hover-rtop .atc01_left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  opacity: 1 !important;
  filter: none !important;
}

/* 기존 좌측(S1)을 좌상에 배치 */
#atc01.hover-rtop .atc01_left_clone {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 50% !important;
}

/* 우상(S2)를 우측 전체로 확장 */
#atc01.hover-rtop .atc01_rtop {
  right: 0;
  top: 0;
  width: 60%;
  height: 100%;
  opacity: 1;
  z-index: 2;
}

/* 우하(S3)를 좌하에 배치 */
#atc01.hover-rtop .atc01_rbottom {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* 우하 이미지 숨김 (좌하로 이동됨) */
#atc01.hover-rtop .atc01_click_bottom {
  pointer-events: none !important;
}

/* 우하 클릭 영역 비활성화 */
#atc01.hover-rtop .atc01_click_top {
  top: 0;
  right: 0;
  width: 60% !important;
  height: 100% !important;
}

#atc01.hover-rtop .atc01_click_bottom {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 우상 호버 시 텍스트 전환 애니메이션 */
#atc01.hover-rtop .hero_content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 우상 호버 시 우측 영역에 텍스트 표시 */
#atc01.hover-rtop .rtop_hover_text {
  width: 60%;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#atc01.hover-rtop .rtop_title_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s !important;
}

#atc01.hover-rtop .rtop_sub_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .7s !important; /* 서브타이틀 명확한 지연 */
}

/* 우하 호버 시: 우하 확장, 우상→좌하 이동, 기존 좌측→좌상 축소 */
#atc01.hover-rbottom .atc01_left_wrap {
  width: 40%;
}

/* 좌측 영역 축소 */
#atc01.hover-rbottom .atc01_left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  opacity: 1 !important;
  filter: none !important;
}

/* 기존 좌측을 좌상으로 축소 */
#atc01.hover-rbottom .atc01_left_clone {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 50% !important;
  background-image: url('../../../images/sec_1.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 좌하 영역에 우상 이미지 배치 */
#atc01.hover-rbottom .atc01_rbottom {
  right: 0;
  bottom: 0;
  width: 60%;
  height: 100%;
  opacity: 1;
  z-index: 2;
}

/* 우하를 우측 전체로 확장 */
#atc01.hover-rbottom .atc01_rtop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* 우상 이미지 숨김 (좌하로 이동됨) */
#atc01.hover-rbottom .atc01_click_top {
  pointer-events: none !important;
}

/* 우상 클릭 영역 비활성화 */
#atc01.hover-rbottom .atc01_click_bottom {
  bottom: 0;
  right: 0;
  width: 60% !important;
  height: 100% !important;
}

#atc01.hover-rbottom .atc01_click_top {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 우하 호버 시 우측 중앙 텍스트 표시 */
#atc01.hover-rbottom .rbottom_hover_text {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#atc01.hover-rbottom .rbottom_title_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s !important;
}

#atc01.hover-rbottom .rbottom_sub_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s !important;
}

/* 스크롤 등으로 hover 클래스가 제거된 기본 상태 복구 안전장치 */
#atc01:not(.hover-rtop):not(.hover-rbottom) .atc01_click_top,
#atc01:not(.hover-rtop):not(.hover-rbottom) .atc01_click_bottom {
  width: 40%;
  height: 50%;
  opacity: 1;
}

/* 모바일에서 너무 과도한 전환 방지: 기본 레이아웃 유지 */
@media (max-width: 1024px) {

  #atc01.hover-rtop .atc01_left_wrap,
  #atc01.hover-rbottom .atc01_left_wrap {
    width: 60%;
  }

  #atc01.hover-rtop .atc01_left_clone,
  #atc01.hover-rbottom .atc01_left_clone {
    display: none;
  }

  #atc01.hover-rtop .atc01_rtop,
  #atc01.hover-rbottom .atc01_rbottom {
    width: 40%;
    height: 50%;
  }

  #atc01.hover-rtop .atc01_rbottom,
  #atc01.hover-rbottom .atc01_rtop {
    opacity: 1;
    pointer-events: auto;
  }

  #atc01.hover-rtop .atc01_click_bottom,
  #atc01.hover-rbottom .atc01_click_top {
    pointer-events: none !important;
  }
}

/* ===== CSS-only hover triggers for complete animation (텍스트 + 이미지) ===== */
/* 스크롤 후에도 항상 작동하도록 CSS만으로 처리 */

/* 우상 영역 호버 시 - 완전한 레이아웃 전환 */
#atc01 .atc01_click_top:hover ~ .atc01_left_wrap {
  width: 40% !important;
}

#atc01 .atc01_click_top:hover ~ .atc01_left_wrap .atc01_left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  opacity: 1 !important;
  filter: none !important;
}

#atc01 .atc01_click_top:hover ~ .atc01_left_wrap .atc01_left_clone {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 50% !important;
}

#atc01 .atc01_click_top:hover ~ .atc01_rtop {
  right: 0;
  top: 0;
  width: 60%;
  height: 100%;
  opacity: 1;
  z-index: 2;
}

#atc01 .atc01_click_top:hover ~ .atc01_rbottom {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* 우상 호버 시 클릭 영역 조정 */
#atc01 .atc01_click_top:hover {
  top: 0;
  right: 0;
  width: 60% !important;
  height: 100% !important;
}

#atc01 .atc01_click_top:hover ~ .atc01_click_bottom {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 우상 호버 시 텍스트 애니메이션 */
#atc01 .atc01_click_top:hover ~ .rtop_hover_text {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#atc01 .atc01_click_top:hover ~ .rtop_hover_text .rtop_title_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s !important;
}

#atc01 .atc01_click_top:hover ~ .rtop_hover_text .rtop_sub_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .7s !important; /* 서브타이틀 명확한 지연 */
}

/* 우상 호버 시 히어로 콘텐츠 숨김 */
#atc01 .atc01_click_top:hover ~ .atc01_hero .hero_content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 우하 영역 호버 시 - 완전한 레이아웃 전환 */
#atc01 .atc01_click_bottom:hover ~ .atc01_left_wrap {
  width: 40% !important;
}

#atc01 .atc01_click_bottom:hover ~ .atc01_left_wrap .atc01_left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  opacity: 1 !important;
  filter: none !important;
}

#atc01 .atc01_click_bottom:hover ~ .atc01_left_wrap .atc01_left_clone {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 50% !important;
  background-image: url('../../../images/sec_1.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#atc01 .atc01_click_bottom:hover ~ .atc01_rbottom {
  right: 0;
  bottom: 0;
  width: 60%;
  height: 100%;
  opacity: 1;
  z-index: 2;
}

#atc01 .atc01_click_bottom:hover ~ .atc01_rtop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* 우하 호버 시 클릭 영역 조정 */
#atc01 .atc01_click_bottom:hover {
  bottom: 0;
  right: 0;
  width: 60% !important;
  height: 100% !important;
}

#atc01 .atc01_click_bottom:hover ~ .atc01_click_top {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 우하 호버 시 우측 중앙 텍스트 표시 */
#atc01 .atc01_click_bottom:hover ~ .rbottom_hover_text {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#atc01 .atc01_click_bottom:hover ~ .rbottom_hover_text .rbottom_title_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s !important;
}

#atc01 .atc01_click_bottom:hover ~ .rbottom_hover_text .rbottom_sub_hover {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s !important;
}