.elementor .box-a{height:150px;padding-inline-start:200px;}
/* 1. 하단 박스(box-b) 텍스트 지연 등장 세팅 */
.box-b {
  position: absolute;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  /* 배경이 먼저 떨어지고 0.2초 뒤에 텍스트가 나타나도록 딜레이 설정 */
  transition: opacity 0.3s ease-in-out 0.3s; 
  overflow: hidden;
}

/* 2. 하단 박스(box-b) 배경 레이어 슬라이드 다운 세팅 (가상 요소 활용) */
.box-b::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007fa6; /* THE FIRST 48 브랜드의 파란색 배경 코드 */
  z-index: -1;
  opacity: 0.5;
  transform: translateY(-100%); /* 위로 숨겨둠 */
  transition: all 0.6s ease-in-out;
}

/* 3. 호버 시 액션 1: box-b 텍스트 및 전체 컨테이너 활성화 */
.box-a:hover + .box-b,
.box-b:hover {
  visibility: visible;
  opacity: 1;
}

/* 4. 호버 시 액션 2: box-b 배경 레이어가 위에서 아래로 떨어짐 */
.box-a:hover + .box-b::before,
.box-b:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* 5. 상단 메뉴(box-a) 부드러운 전환 효과 준비 */
.box-a {
  transition: background-color 0.6s ease-in-out;
}

/* 6. 상단 메뉴(box-a) 배경색 파란색으로 변경 및 유지 */
.box-a:hover,
body:has(.box-b:hover) .box-a {
  background-color: #1f355e !important;
}

/* 7. 상단 메뉴(box-a) 텍스트 흰색으로 변경 및 유지 */
.box-a:hover a,
.box-a:hover span,
.box-a:hover h2,
body:has(.box-b:hover) .box-a a,
body:has(.box-b:hover) .box-a span,
body:has(.box-b:hover) .box-a h2 {
  color: #ffffff !important;
  transition: color 0.6s ease-in-out;
}

/* 8. 상단 메뉴(box-a) 로고 흰색 반전 및 유지 */
.box-a:hover img,
body:has(.box-b:hover) .box-a img {
  filter: brightness(0) invert(1);
  transition: filter 0.6s ease-in-out;\n}