.div,
.section {
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: var(--font-pretendard);
}
.div {
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
  align-items: flex-start;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  font-size: var(--font-size-20);
  color: var(--Primary-Main-Color);
}
.section {
  align-self: stretch;
  background-color: transparent;
  align-items: flex-end;
  padding: 0 0 clamp(80px, 10vw, 160px); /* 반응형 패딩 */
  box-sizing: border-box;
  gap: clamp(100px, 15vw, 253px); /* 반응형 간격 */
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-32);
  color: var(--color-white);
  position: relative;
  min-height: 100vh;
  height: 100vh;
}

/* 반응형 section height 조정 */
@media (max-width: 1024px) {
  .section {
    min-height: 90vh;
    height: 90vh;
    gap: clamp(80px, 12vw, 200px);
  }
}

@media (max-width: 768px) {
  .section {
    min-height: 85vh;
    height: 85vh;
    gap: clamp(60px, 10vw, 150px);
  }
}

@media (max-width: 480px) {
  .section {
    min-height: 80vh;
    height: 80vh;
    gap: clamp(40px, 8vw, 100px);
  }
}


/* section 어두운 오버레이 */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* 더 어두운 오버레이 */
  z-index: 1;
  pointer-events: none;
}

/* 텍스트 페이드인 애니메이션 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ck-twi001t3313352-1-icon {
  width: 100%;
  height: 100%; /* section의 height에 맞춤 */
  position: absolute;
  margin: 0 !important;
  top: 0; /* 상단부터 시작 */
  right: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover; /* 비율 유지하며 채우기 */
  object-position: center; /* 이미지 중앙 정렬 */
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .ck-twi001t3313352-1-icon {
    height: 100%; /* section의 height에 맞춤 */
    object-position: center top; /* 태블릿에서는 상단 중앙 */
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .ck-twi001t3313352-1-icon {
    height: 100%; /* section의 height에 맞춤 */
    object-position: center top; /* 모바일에서는 상단 중앙 */
  }
}
.p {
  margin: 0;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .p {
    font-size: 14px;
    line-height: 140%;
  }
  
  .div-h1 .p {
    font-size: 62px !important; /* 기업의 미래 성장을 이끄는과 동일한 크기 강제 적용 */
    line-height: 1.6 !important; /* 기업의 미래 성장을 이끄는과 동일한 라인 높이 강제 적용 */
    font-weight: 600 !important; /* 기업의 미래 성장을 이끄는과 동일한 폰트 웨이트 강제 적용 */
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .p {
    font-size: 13px;
    line-height: 130%;
  }
  
  .div-h1 .p {
    font-size: 62px !important; /* 기업의 미래 성장을 이끄는과 동일한 크기 강제 적용 */
    line-height: 1.6 !important; /* 기업의 미래 성장을 이끄는과 동일한 라인 높이 강제 적용 */
    font-weight: 600 !important; /* 기업의 미래 성장을 이끄는과 동일한 폰트 웨이트 강제 적용 */
  }
  
  /* Card Stack 내부 텍스트 반응형 */
  .stack-card .p {
    font-size: clamp(12px, 3vw, 18px); /* 카드 내부 텍스트 반응형 */
    line-height: 1.4;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .p {
    font-size: 12px;
    line-height: 125%;
  }
  
  .div-h1 .p {
    font-size: 62px !important; /* 기업의 미래 성장을 이끄는과 동일한 크기 강제 적용 */
    line-height: 1.6 !important; /* 기업의 미래 성장을 이끄는과 동일한 라인 높이 강제 적용 */
    font-weight: 600 !important; /* 기업의 미래 성장을 이끄는과 동일한 폰트 웨이트 강제 적용 */
  }
  
  /* Card Stack 내부 텍스트 반응형 */
  .stack-card .p {
    font-size: clamp(10px, 2.5vw, 16px); /* 카드 내부 텍스트 반응형 */
    line-height: 1.3;
    text-align: center;
  }
}

.div-h1 .p {
  margin: 0 0 clamp(8px, 1.5vw, 16px) 0;
  overflow: visible; /* 텍스트가 잘리지 않도록 */
  text-overflow: unset;
  white-space: normal; /* 여러 줄 허용 */
  max-width: 100%;
  display: block; /* 각 문장을 별도 블록으로 */
  font-size: 62px !important; /* 기업의 미래 성장을 이끄는과 동일한 크기 강제 적용 */
  line-height: 1.6 !important; /* 기업의 미래 성장을 이끄는과 동일한 라인 높이 강제 적용 */
  font-weight: 600 !important; /* 기업의 미래 성장을 이끄는과 동일한 폰트 웨이트 강제 적용 */
}

/* Picker 컨테이너 */
.picker-container {
  flex: 4;
  order: 2;
  min-width: 0;
  max-width: 40%;
  height: clamp(400px, 50vh, 600px);
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: transparent;
  border: none;
  margin-left: -10%;
  mask: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 15%,
    rgba(0, 0, 0, 0.3) 35%,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.3) 75%,
    rgba(0, 0, 0, 0.1) 100%
  );
  -webkit-mask: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 15%,
    rgba(0, 0, 0, 0.3) 35%,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.3) 75%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

/* 기술 스택 리스트 */
.tech-stack-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.tech-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(100px, 12vh, 150px);
  font-size: clamp(32px, 5vw, 80px);
  font-weight: 700;
  color: #333;
  transition: all 0.3s ease;
  cursor: pointer;
  margin: 8px 0;
}

/* 태블릿 반응형 - 기술 스택 크기 조정 */
@media (max-width: 1024px) {
  .tech-item {
    height: clamp(80px, 10vh, 120px);
    font-size: clamp(28px, 4vw, 60px);
    margin: 6px 0;
  }
}

/* 모바일 반응형 - 기술 스택 크기 조정 */
@media (max-width: 768px) {
  .tech-item {
    height: clamp(70px, 10vh, 120px);
    font-size: clamp(32px, 5vw, 70px); /* 폰트 사이즈 증가 */
    margin: 6px 0; /* 마진도 약간 증가 */
  }
}

/* 소형 모바일 반응형 - 기술 스택 크기 조정 */
@media (max-width: 480px) {
  .tech-item {
    height: clamp(60px, 8vh, 100px);
    font-size: clamp(28px, 4.5vw, 60px); /* 폰트 사이즈 증가 */
    margin: 5px 0; /* 마진도 약간 증가 */
  }
}

.tech-item:hover {
  color: #333;
  transform: none;
  background: transparent;
}

/* 기술 스택 무한 롤링 애니메이션 (로고배너 방식 참고) */
@keyframes techStackRolling {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* 중앙 하이라이트 영역 */
.picker-highlight {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: clamp(100px, 12vh, 150px);
  background: transparent;
  border: none;
  pointer-events: none;
  z-index: 2;
}

/* 하이라이트 펄스 효과 */
@keyframes highlightPulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(17, 116, 255, 0.4);
    border-color: var(--Primary-Main-Color);
  }
  50% { 
    box-shadow: 0 0 0 10px rgba(17, 116, 255, 0);
    border-color: #3e8fff;
  }
}

/* 상하 페이드 효과 */
/* 페이드 효과는 컨테이너 마스킹으로 처리 */

/* 가이드 텍스트 */
.picker-guide {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 10;
  pointer-events: none;
}

.picker-guide p {
  margin: 0;
}

/* 무한 롤링 애니메이션 */
@keyframes continuousRoll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1560px); }
}

/* 일시정지 기능 */
.picker-container:hover .tech-stack-list {
  animation-play-state: paused;
}

.header {
  align-self: stretch;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--padding-80);
  box-sizing: border-box;
  gap: var(--gap-20);
  top: 0;
  z-index: 99;
  position: sticky;
}
.logo-white-1-icon {
  width: 186px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.menu {
  margin: 0;
  display: flex !important; /* 강제로 표시 */
  align-items: center;
  padding: var(--padding-20) 0;
  gap: 58.4px;
  text-align: left;
  font-size: var(--font-size-20);
  color: var(--color-white);
  font-family: var(--font-pretendard);
  visibility: visible !important; /* 강제로 보이게 */
  opacity: 1 !important; /* 강제로 불투명하게 */
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .menu {
    gap: 40px;
    font-size: 18px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .header .menu,
  .menu,
  nav.menu {
    display: flex !important; /* 강제로 표시 */
    gap: 6px; /* 간격 더 줄임 (12px → 6px) */
    font-size: 9px; /* 폰트 크기 더 줄임 (11px → 9px) */
    padding: 4px 0; /* 패딩 더 줄임 (8px → 4px) */
    flex-wrap: nowrap; /* 줄바꿈 금지 - 한 라인 유지 */
    justify-content: center; /* 중앙 정렬 */
    visibility: visible !important; /* 강제로 보이게 */
    opacity: 1 !important; /* 강제로 불투명하게 */
    position: relative !important; /* 위치 강제 설정 */
    z-index: 999 !important; /* 최상위 레이어 */
  }
  
  /* 메뉴 항목들도 강제 표시 */
  .header .menu .about-us,
  .menu .about-us,
  nav.menu .about-us {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    font-size: 9px !important; /* 폰트 크기 강제 적용 */
    white-space: nowrap; /* 텍스트 줄바꿈 금지 */
    padding: 2px 4px; /* 메뉴 항목 내부 패딩 추가 */
  }
}

@media (max-width: 480px) {
  .header .menu,
  .menu,
  nav.menu {
    display: flex !important; /* 강제로 표시 */
    gap: 4px; /* 간격 더 줄임 (8px → 4px) */
    font-size: 7px; /* 폰트 크기 더 줄임 (9px → 7px) */
    padding: 3px 0; /* 패딩 더 줄임 (6px → 3px) */
    flex-wrap: nowrap; /* 줄바꿈 금지 - 한 라인 유지 */
    justify-content: center; /* 중앙 정렬 */
    visibility: visible !important; /* 강제로 보이게 */
    opacity: 1 !important; /* 강제로 불투명하게 */
    position: relative !important; /* 위치 강제 설정 */
    z-index: 999 !important; /* 최상위 레이어 */
  }
  
  /* 메뉴 항목들도 강제 표시 */
  .header .menu .about-us,
  .menu .about-us,
  nav.menu .about-us {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    font-size: 7px !important; /* 폰트 크기 강제 적용 */
    white-space: nowrap; /* 텍스트 줄바꿈 금지 */
    padding: 1px 3px; /* 메뉴 항목 내부 패딩 더 줄임 */
  }
}
.about-us {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  color: #4A90E2; /* 파란계열 색상 */
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  display: inline-block !important; /* 강제로 표시 */
  visibility: visible !important; /* 강제로 보이게 */
  opacity: 1 !important; /* 강제로 불투명하게 */
  z-index: 1000 !important; /* 최상위 레이어 */
}

/* 모든 화면 크기에서 메뉴 강제 표시 */
.header nav.menu,
.header .menu,
nav.menu,
.menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 999 !important;
}

.header nav.menu .about-us,
.header .menu .about-us,
nav.menu .about-us,
.menu .about-us {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* 모바일에서 메뉴 강제 표시 - 최고 우선순위 */
@media screen and (max-width: 768px) {
  .header nav.menu,
  .header .menu,
  nav.menu,
  .menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 20px !important; /* 높이 더 줄임 (30px → 20px) */
    gap: 6px !important; /* 간격 강제 적용 (12px → 6px) */
    font-size: 9px !important; /* 폰트 크기 강제 적용 (11px → 9px) */
    flex-wrap: nowrap !important; /* 줄바꿈 금지 */
    padding: 4px 0 !important; /* 패딩 강제 적용 */
  }
  
  .header nav.menu .about-us,
  .header .menu .about-us,
  nav.menu .about-us,
  .menu .about-us {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10000 !important;
    width: auto !important;
    height: auto !important;
    min-width: 35px !important; /* 최소 너비 더 줄임 (50px → 35px) */
    min-height: 12px !important; /* 최소 높이 더 줄임 (15px → 12px) */
    font-size: 9px !important; /* 폰트 크기 강제 적용 (11px → 9px) */
    white-space: nowrap !important; /* 텍스트 줄바꿈 금지 */
    padding: 2px 4px !important; /* 패딩 강제 적용 */
  }
}

.about-us:hover {
  color: #ffffff;
  transform: translateY(-2px);
}
.frame-parent,
.inner {
  display: flex;
  max-width: 100%;
}
.inner {
  width: 100%; /* 전체 너비 사용 */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 clamp(20px, 5vw, var(--padding-80)); /* 반응형 패딩 */
  box-sizing: border-box;
  font-size: var(--font-size-11);
  font-family: var(--font-red-hat-display);
}
.frame-parent {
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-20);
}
.visualtext-wrapper {
  height: auto; /* 높이 자동 조정 */
  min-height: 398px; /* 최소 높이 보장 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  width: 100%; /* 전체 너비 사용 */
  text-align: left;
  font-size: clamp(2.5rem, 5vw, 4rem); /* 반응형 폰트 크기 */
  color: var(--color-white);
  font-family: var(--font-pretendard);
  position: relative;
  z-index: 2; /* 오버레이 위에 표시 */
  padding: 20px; /* 패딩 추가로 여백 확보 */
  box-sizing: border-box; /* 박스 모델 통일 */
}
.innovative-solutions-for-diver-wrapper,
.visualtext {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.visualtext {
  width: 100%; /* 전체 너비 사용 */
  max-width: 1089px; /* 최대 너비 제한 */
  height: auto; /* 높이 자동 조정 */
  min-height: 306px; /* 최소 높이 보장 */
  flex-direction: column;
  padding: 0 0 clamp(32px, 4vw, 64px); /* 반응형 패딩 */
  gap: clamp(25px, 3vw, 50px); /* 반응형 텍스트 간격 */
  box-sizing: border-box; /* 박스 모델 통일 */
}
.innovative-solutions-for-diver-wrapper {
  width: 100%; /* 전체 너비 사용 */
  max-width: 637px; /* 최대 너비 제한 */
  height: auto; /* 높이 자동 조정 */
  overflow: visible; /* 텍스트가 잘리지 않도록 */
  flex-shrink: 0;
  padding: 0; /* 패딩 제거로 완전히 붙게 */
  font-size: clamp(1.2rem, 2.5vw, 2rem); /* 반응형 폰트 크기 */
  opacity: 0; /* 애니메이션을 위해 초기 숨김 */
  transform: translateY(30px); /* 아래에서 위로 올라오는 효과 */
  animation: fadeInUp 1s ease-out 0.5s forwards; /* 0.5초 후 시작 */
  box-sizing: border-box; /* 박스 모델 통일 */
}
.div-innovative-solutions-for {
  margin: 0;
  width: 100%; /* 전체 너비 사용 */
  max-width: 637px; /* 최대 너비 제한 */
  position: relative;
  font-size: inherit;
  line-height: clamp(0.7, 1.2vw, 0.8); /* 반응형 라인 간격 */
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  color: #4A90E2; /* 파란색 추가 */
  flex-shrink: 0;
  opacity: 0; /* 애니메이션을 위해 초기 숨김 */
  transform: translateY(30px); /* 아래에서 위로 올라오는 효과 */
  animation: fadeInUp 1s ease-out 0.5s forwards; /* 0.5초 후 시작 */
  box-sizing: border-box; /* 박스 모델 통일 */
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .visualtext-wrapper {
    font-size: clamp(2rem, 4vw, 3.5rem);
    padding: 15px;
  }
  
  .visualtext {
    gap: clamp(20px, 2.5vw, 40px);
    padding: 0 0 clamp(24px, 3vw, 48px);
  }
  
  .innovative-solutions-for-diver-wrapper {
    font-size: clamp(1rem, 2vw, 1.8rem);
  }
  
  .div-innovative-solutions-for {
    width: 100%;
  font-size: inherit;
    line-height: clamp(0.8, 1.1vw, 0.9);
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .visualtext-wrapper {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    padding: 10px;
    min-height: 300px;
  }
  
  .visualtext {
    gap: clamp(15px, 2vw, 30px);
    padding: 0 0 clamp(16px, 2.5vw, 32px);
    min-height: 200px;
  }
  
  .innovative-solutions-for-diver-wrapper {
    font-size: clamp(0.9rem, 1.8vw, 1.5rem);
  }
  
  .div-innovative-solutions-for {
    width: 100%;
    font-size: inherit;
    line-height: clamp(0.9, 1.2vw, 1.2);
  }
}

/* 초소형 모바일 반응형 */
@media (max-width: 480px) {
  .visualtext-wrapper {
    font-size: clamp(1.2rem, 3vw, 2rem);
    padding: 8px;
    min-height: 250px;
  }
  
  .visualtext {
    gap: clamp(12px, 1.8vw, 25px);
    padding: 0 0 clamp(12px, 2vw, 24px);
    min-height: 150px;
  }
  
  .innovative-solutions-for-diver-wrapper {
    font-size: clamp(0.8rem, 1.6vw, 1.3rem);
  }
  
  .div-innovative-solutions-for {
    width: 100%;
    font-size: inherit;
    line-height: clamp(1.0, 1.3vw, 1.3);
  }
}
.h2 {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 0.8; /* 라인 간격 줄임 */
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0; /* 애니메이션을 위해 초기 숨김 */
  transform: translateY(30px); /* 아래에서 위로 올라오는 효과 */
  animation: fadeInUp 1s ease-out 1s forwards; /* 1초 후 시작 */
}

.wrapper {
  width: 961px;
  height: auto; /* 높이 자동 조정 */
  flex-shrink: 0;
  overflow: visible; /* 텍스트가 잘리지 않도록 */
  display: flex;
  align-items: flex-start;
  padding: 0; /* 패딩 제거로 완전히 붙게 */
  box-sizing: border-box;
  opacity: 0; /* 애니메이션을 위해 초기 숨김 */
  transform: translateY(30px); /* 아래에서 위로 올라오는 효과 */
  animation: fadeInUp 1s ease-out 1s forwards; /* 1초 후 시작 */
}
.total-it-wrapper {
  width: 1089px;
  height: auto; /* 높이 자동 조정 */
  overflow: visible; /* 텍스트가 잘리지 않도록 */
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding: 0; /* 패딩 제거로 완전히 붙게 */
  box-sizing: border-box;
  opacity: 0; /* 애니메이션을 위해 초기 숨김 */
  transform: translateY(30px); /* 아래에서 위로 올라오는 효과 */
  animation: fadeInUp 1s ease-out 1.5s forwards; /* 1.5초 후 시작 */
}
.div-total-it {
  margin: 0;
  width: 1089px;
  position: relative;
  font-size: inherit;
  line-height: 0.8; /* 라인 간격 줄임 */
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0; /* 애니메이션을 위해 초기 숨김 */
  transform: translateY(30px); /* 아래에서 위로 올라오는 효과 */
  animation: fadeInUp 1s ease-out 1.5s forwards; /* 1.5초 후 시작 */
}
.section1,
.title-container {
  align-self: stretch;
  display: flex;
  max-width: 100%;
}
.section1 {
  overflow: visible;
  flex-direction: column;
  align-items: center;
  padding: 100px 40px; /* 기본 좌우 패딩 증가 */
  box-sizing: border-box;
  gap: 80px; /* 기본 간격 증가 */
  position: relative;
  z-index: 5;
  min-height: 100vh;
  width: 100%; /* full width */
  margin: 0 auto;
}
.title-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 좌측 정렬로 변경 */
  gap: 20px;
  width: 100%; /* full width */
  text-align: left; /* 좌측 정렬로 변경 */
  position: relative;
  z-index: 10;
  margin-left: 100px; /* 오른쪽으로 이동 */
}
.title,
.title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}
.title-wrapper {
  padding: 0 0 34px;
  box-sizing: border-box;
  min-width: 634px;
  max-width: 100%;
  text-align: left;
  font-size: 25px;
  color: var(--Primary-Main-Color);
  font-family: var(--font-pretendard);
}
.title {
  align-self: stretch;
  flex: 1;
  gap: var(--gap-30);
}
.bizwiz-system,
.div-about-us {
  margin: 0;
  position: relative;
  font-family: inherit;
}
.div-about-us {
  font-size: 24px; /* 제목 크기 명시 */
  font-weight: 700;
  color: #4A90E2; /* 파란계열 색상 */
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 텍스트 그림자 추가 */
  letter-spacing: 2px; /* 글자 간격 추가 */
}
.bizwiz-system {
  flex: 1;
  font-size: 62px; /* 과거 히스토리 크기 */
  line-height: 1.6; /* 과거 히스토리 라인 높이 */
  color: var(--Text-Text1);
}
.div-p {
  margin: 0;
  font-weight: 600;
  font-size: 62px; /* 원래 크기로 복원 */
  line-height: 1.6; /* 원래 라인 높이로 복원 */
}

/* section2의 텍스트 색상 */
.section2 .div-p {
  color: #fff;
}

.section2 .div-bizwiz-system {
  color: var(--Primary-Main-Color);
}

/* section2의 텍스트 위치 조정 */
.section2 .title2 {
  left: 50px; /* 첫 번째 카드 중간 정도 위치의 왼쪽으로 이동 */
  top: 100px; /* 텍스트를 더 상단으로 올림 */
}

/* section2의 Expertise 왼쪽 정렬 및 색상 */
.section2 .about-us {
  text-align: left !important;
  margin-left: 0;
  color: #4A90E2; /* 파란계열 색상 */
  display: block;
  width: 100%;
}
.div-bizwiz-system {
  margin: 0;
  color: var(--Primary-Main-Color);
}
.card,
.card-container {
  display: flex;
  max-width: 100%;
}
.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* full width */
  max-width: 100%; /* card와 동일한 최대 너비 */
  gap: 40px;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.card {
  display: flex; /* flexbox로 변경 */
  flex-direction: row; /* 한 라인 배치 */
  gap: 20px; /* 카드 간 간격 추가 */
  width: 100%;
  max-width: 100%; /* card-container와 동일한 최대 너비 */
  align-items: center;
  justify-content: center; /* 중앙 정렬로 변경 */
  z-index: 2;
}
.si-sm,
.si-sm-wrapper {
  width: 100%; /* 카드와 동일한 너비 */
  height: 100%; /* 카드와 동일한 높이 */
  display: flex;
  box-sizing: border-box;
  flex-shrink: 0; /* 크기 고정 */
}
.si-sm {
  height: 500px !important; /* 강제로 높이 고정 */
  border-radius: var(--br-30);
  overflow: hidden;
  flex-shrink: 0;
  align-items: flex-start;
  padding: 350px 0 0 !important; /* 강제로 패딩 고정 */
  background-image: url(./public/SI-SM@3x.png);
  background-size: cover !important; /* 강제로 cover 적용 */
  background-repeat: no-repeat;
  background-position: top !important; /* 강제로 top 위치 고정 */
  text-align: left;
  font-size: 25px;
  color: var(--color-white);
  font-family: var(--font-pretendard);
  position: relative;
  cursor: pointer;
  width: 100%; /* 너비도 명시적으로 설정 */
  box-sizing: border-box; /* 박스 모델 통일 */
}
.si-sm-wrapper {
  width: 100% !important; /* 강제로 카드와 동일한 너비 */
  height: 150px !important; /* 강제로 콘텐츠 영역에 맞게 높이 조정 */
  backdrop-filter: blur(10px);
  background-color: var(--color-gray-600);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-40) !important; /* 강제로 padding 고정 */
  position: absolute !important; /* 강제로 absolute 위치 */
  bottom: 0 !important; /* 강제로 하단 고정 */
  left: 0 !important; /* 강제로 좌측 고정 */
  right: 0 !important; /* 강제로 우측 고정 */
  opacity: 1 !important; /* 강제로 초기에는 하단에 일부만 보이게 */
  transform: translateY(0) !important; /* 강제로 위치 고정 */
  transition: height 600ms ease, opacity 400ms ease;
  z-index: 2 !important; /* 강제로 z-index 고정 */
  box-sizing: border-box; /* 박스 모델 통일 */
}

.si-sm-wrapper::after {
  content: '시스템 통합 및 유지보수 전문 기업으로 고객의 비즈니스 성장을 지원합니다';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.9rem, 1.8vw, 1.2rem); /* 과거 히스토리 텍스트 크기 */
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  padding: 0 15px; /* 패딩 줄이기 */
  opacity: 0;
  transition: opacity 400ms ease;
}

/* IT 카드용 추가 텍스트 */
/* IT 카드용 wrapper */
.it-wrapper {
  width: 100% !important; /* 강제로 카드와 동일한 너비 */
  height: 150px !important; /* 강제로 콘텐츠 영역에 맞게 높이 조정 */
  backdrop-filter: blur(10px);
  background-color: var(--color-gray-600);
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 중앙 정렬 */
  padding: var(--padding-40) !important; /* 강제로 다른 카드와 동일한 padding */
  position: absolute !important; /* 강제로 absolute 위치 */
  bottom: 0 !important; /* 강제로 하단 고정 */
  left: 0 !important; /* 강제로 좌측 고정 */
  right: 0 !important; /* 강제로 우측 고정 */
  opacity: 1 !important; /* 강제로 초기에는 하단에 일부만 보이게 */
  transform: translateY(0) !important; /* 강제로 위치 고정 */
  transition: height 600ms ease, opacity 400ms ease;
  z-index: 2 !important; /* 강제로 z-index 고정 */
  box-sizing: border-box; /* 박스 모델 통일 */
}

.it-wrapper::after {
  content: 'IT 전략 수립과 기술 컨설팅으로 기업의 디지털 혁신을 이끕니다';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  padding: 0 15px;
  opacity: 0;
  transition: opacity 400ms ease;
}
.div-si-sm {
  margin: 0;
  position: relative;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); /* 과거 히스토리 텍스트 크기 */
  font-weight: 600;
  font-family: inherit;
  transition: opacity 400ms ease;
  line-height: 1.3;
  text-align: center; /* 중앙 정렬 */
  width: 100%; /* 전체 너비 사용 */
}
.e-commerce,
.e-commerce-wrapper {
  width: 100%; /* 카드와 동일한 너비 */
  height: 100%; /* 카드와 동일한 높이 */
  display: flex;
  box-sizing: border-box;
  flex-shrink: 0; /* 크기 고정 */
}
.e-commerce {
  height: 500px !important; /* 강제로 높이 고정 */
  border-radius: var(--br-30);
  overflow: hidden;
  flex-shrink: 0;
  align-items: flex-start;
  padding: 350px 0 0 !important; /* 강제로 패딩 고정 */
  background-image: url(./public/E-Commerce@3x.png);
  background-size: cover !important; /* 강제로 cover 적용 */
  background-repeat: no-repeat;
  background-position: top !important; /* 강제로 top 위치 고정 */
  text-align: left;
  font-size: 25px;
  color: var(--color-white);
  font-family: var(--font-pretendard);
  position: relative;
  cursor: pointer;
  width: 100%; /* 너비도 명시적으로 설정 */
  box-sizing: border-box; /* 박스 모델 통일 */
}
.e-commerce-wrapper {
  width: 100% !important; /* 강제로 카드와 동일한 너비 */
  height: 150px !important; /* 강제로 콘텐츠 영역에 맞게 높이 조정 */
  backdrop-filter: blur(10px);
  background-color: var(--color-gray-600);
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 중앙 정렬로 변경 */
  padding: var(--padding-40) !important; /* 강제로 IT 카드와 동일한 padding */
  position: absolute !important; /* 강제로 absolute 위치 */
  bottom: 0 !important; /* 강제로 하단 고정 */
  left: 0 !important; /* 강제로 좌측 고정 */
  right: 0 !important; /* 강제로 우측 고정 */
  opacity: 1 !important; /* 강제로 초기에는 하단에 일부만 보이게 */
  transform: translateY(0) !important; /* 강제로 위치 고정 */
  transition: height 600ms ease, opacity 400ms ease;
  z-index: 2 !important; /* 강제로 z-index 고정 */
  box-sizing: border-box; /* 박스 모델 통일 */
}

.e-commerce-wrapper::after {
  content: '온라인 쇼핑몰과 전자상거래 플랫폼 구축으로 디지털 비즈니스 성장을 지원합니다';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.9rem, 1.8vw, 1.2rem); /* 과거 히스토리 텍스트 크기 */
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  padding: 0 15px; /* 패딩 줄이기 */
  opacity: 0;
  transition: opacity 400ms ease;
}
.div-section,
.it {
  font-family: var(--font-pretendard);
}
.it {
  height: 500px !important; /* 강제로 높이 고정 */
  border-radius: var(--br-30);
  overflow: hidden;
  flex-shrink: 0;
  align-items: flex-start;
  padding: 350px 0 0 !important; /* 강제로 패딩 고정 */
  background-image: url(./public/IT@3x.png);
  background-size: cover !important; /* 강제로 cover 적용 */
  background-repeat: no-repeat;
  background-position: top !important; /* 강제로 top 위치 고정 */
  text-align: left;
  font-size: 25px;
  color: var(--color-white);
  font-family: var(--font-pretendard);
  position: relative;
  cursor: pointer;
  width: 100%; /* 너비도 명시적으로 설정 */
  box-sizing: border-box; /* 박스 모델 통일 */
}
.div-section {
  display: flex;
  flex-wrap: nowrap; /* 1라인 강제 */
  justify-content: center; /* 중앙 정렬로 변경 */
  align-items: center;
  gap: 40px; /* 간격 증가로 4개 카드 간 적절한 공간 확보 */
  width: 100%; /* full width */
  z-index: 1;
  text-align: center;
  font-size: var(--font-size-80);
  color: var(--Primary-Main-Color);
  padding: 20px 0;
  max-width: 100%; /* 최대 너비 제한 */
}
.container,
.div-section,
.frame-group {
  display: flex;
  align-items: center;
}
.frame-group {
  display: flex;
  flex: 0 0 auto; /* 고정 크기로 변경 */
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 간격 축소 */
  width: 200px; /* 고정 너비로 2라인 텍스트 지원 */
  text-align: center;
  justify-content: center; /* 중앙정렬 */
}
.container {
  align-self: stretch;
  justify-content: center;
}
.div7 {
  position: relative;
}

/* 숫자 카운터 애니메이션 */
.counter {
  animation: countUp 2s ease-out;
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.it-container,
.span {
  font-size: var(--font-size-20);
  font-weight: 500;
  color: var(--Text-Text1);
}
.it-container {
  align-self: stretch;
  position: relative;
  line-height: 160%;
  color: var(--Text-Text2);
}
.child {
  height: 141px;
  width: 1px;
  border-right: 1px solid var(--Style-Solid);
  box-sizing: border-box;
  opacity: 0.5;
}
.child,
.div8 {
  position: relative;
}
.div-span {
  font-weight: 500;
  color: var(--Text-Text1);
  font-size: var(--font-size-18);
}
.span2 {
  font-size: var(--font-size-30);
}
.div9 {
  position: relative;
  font-size: var(--font-size-20);
  line-height: 160%;
  font-weight: 500;
  color: var(--Text-Text2);
}
.div-frame-parent,
.more-btn {
  align-items: center;
  justify-content: center;
}
.div-frame-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
  min-width: 0; /* div-section 안에 맞춤 */
}
.more-btn {
  border-radius: 50px;
  background-color: var(--color-aliceblue-200);
  height: 74px;
  display: none;
  padding: 25px var(--padding-60);
  box-sizing: border-box;
  gap: var(--gap-10);
}
.contact-us {
  position: relative;
  line-height: 22px;
  text-transform: capitalize;
}
.icon {
  width: 24px;
  position: relative;
  max-height: 100%;
}
.section2 {
  width: 100%;
  min-height: 100vh;     /* 최소 화면 높이만큼 */
  height: 200vh;         /* 카드들이 더 넓게 펼쳐질 수 있도록 높이 증가 */
  background-color: var(--color-white);
  overflow: visible;     /* 텍스트가 영역 밖으로 나가도 보이도록 수정 */
  flex-shrink: 0;
  position: relative;
  z-index: 7;
  transition: background-color 1s ease;
}

/* 모바일에서 section2 height 줄이기 */
@media (max-width: 768px) {
  .section2 {
    height: 120vh; /* 200vh → 120vh로 줄임 */
    min-height: 80vh; /* 최소 높이도 줄임 */
  }
}

@media (max-width: 480px) {
  .section2 {
    height: 100vh; /* 120vh → 100vh로 더 줄임 */
    min-height: 70vh; /* 최소 높이도 더 줄임 */
  }
}

.section2.dark-theme {
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}

/* body 배경색 설정 */
body {
  background-color: transparent; /* 투명으로 변경 */
  margin: 0;
  padding: 0;
}

body.dark-theme {
  background-color: transparent; /* 다크 테마에서도 투명 */
}

.section2.dark-theme .div-title {
  color: #4A90E2;
}

.section2.dark-theme .h1 {
  color: #ffffff;
}
.pt7-1-icon {
  width: 2207px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  display: none;
  flex-shrink: 0;
}
/* 오버레이 레이어 - 텍스트 영역 (기본 스타일) */
.title-parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.div-title,
.title-inner {
  display: flex;
  justify-content: center;
}
.div-title {
  flex-direction: column;
  gap: var(--gap-20);
  z-index: 3;
  font-size: 25px;
  color: var(--Primary-Main-Color);
  font-family: var(--font-pretendard);
  max-width: none;
}
.title-inner {
  align-items: flex-start;
  width: 100%;
}
.h1 {
  margin: 0;
  position: relative;
  font-size: 62px;
  line-height: 160%;
  color: var(--Text-Text1);
  font-family: inherit;
}
.ellipse-wrapper,
.frame-child {
  box-sizing: border-box;
  height: 812px;
}
/* 배경 레이어 - 둥근 원 */
.ellipse-wrapper {
  position: absolute;
  top: 65%;
  left: -20%;
  transform: translateY(-50%);
  width: 800px;
  height: 800px;
  z-index: 1;
  pointer-events: none;
}
.frame-child {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  border: 200px solid rgba(135, 206, 235, 0.4);
  background: transparent;
  transform: rotate(0deg);
  flex-shrink: 0;
}
.frame-section {
  width: 700px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
.frame-section {
  height: 380px;
  border-radius: var(--br-30);
  background: linear-gradient(-61.5deg, var(--Primary-Main-Color), #3e8fff);
  overflow: visible; /* 아이콘이 잘리지 않도록 visible로 변경 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-30) var(--padding-30) var(--padding-60) 50px;
  gap: var(--gap-30);
  text-align: left;
  font-size: var(--font-size-30);
  color: var(--color-white);
  font-family: var(--font-pretendard);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.solution-details,
.solution-details-parent {
  height: 190px;
  display: flex;
  align-items: flex-start;
  z-index: 2;
}
.solution-details-parent {
  width: 620px;
  gap: 107px;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .solution-details-parent {
    width: 500px;
    height: 160px;
    gap: 80px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .solution-details-parent {
    width: 100%;
    height: clamp(100px, 15vh, 140px); /* 반응형 높이 */
    gap: clamp(30px, 5vw, 60px); /* 반응형 간격 */
    flex-direction: column;
    align-items: center;
  }
  
  .solution-details {
    width: 100%;
    padding: clamp(50px, 8vh, 100px) 0 0; /* 반응형 패딩 */
  }
  
  .data-insights {
    font-size: clamp(14px, 3.5vw, 20px); /* 반응형 폰트 크기 */
  }
  
  .div13 {
    width: 100% !important; /* 부모 영역에 맞게 full width 설정 */
    font-size: clamp(16px, 4vw, 22px); /* 2px 더 증가 */
    line-height: 1.4;
    text-align: left; /* 좌측 정렬로 변경 */
  }
}

@media (max-width: 480px) {
  .solution-details-parent {
    height: clamp(80px, 12vh, 120px); /* 반응형 높이 */
    gap: clamp(20px, 4vw, 40px); /* 반응형 간격 */
  }
  
  .solution-details {
    width: 100%;
    padding: clamp(30px, 6vh, 80px) 0 0; /* 반응형 패딩 */
  }
  
  .data-insights {
    font-size: clamp(12px, 3vw, 18px); /* 반응형 폰트 크기 */
  }
  
  .div13 {
    width: 100% !important; /* 부모 영역에 맞게 full width 설정 */
    font-size: clamp(14px, 3.5vw, 20px); /* 2px 더 증가 */
    line-height: 1.3;
    text-align: left; /* 좌측 정렬로 변경 */
  }
}
.solution-details {
  width: 343px;
  flex-direction: column;
  padding: 142px 0 0;
  box-sizing: border-box;
  text-align: left; /* PC에서도 왼쪽 정렬로 설정 */
}
.ai {
  margin: 0;
  width: 343px;
  position: relative;
  font-size: inherit;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .ai {
    width: 280px;
    font-size: 18px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .ai {
    width: 100%;
    font-size: clamp(22px, 5.5vw, 32px); /* 2px 더 증가 */
    line-height: 1.4;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}

@media (max-width: 480px) {
  .ai {
    font-size: clamp(20px, 5vw, 27px); /* 2px 더 증가 */
    line-height: 1.3;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}
.shape1-1-icon {
  width: clamp(50px, 8vw, 170px); /* 반응형 크기로 변경 */
  height: clamp(45px, 7vh, 150px); /* 높이도 반응형으로 설정 */
  position: relative;
  object-fit: contain; /* 잘리지 않도록 contain으로 변경 */
  z-index: 1;
}

/* 모바일 반응형 - 기존 스타일 제거 (새로운 레이아웃에서 처리) */

/* 소형 모바일 - 기존 스타일 제거 (새로운 레이아웃에서 처리) */
.data-insights {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 왼쪽 정렬로 변경 */
  z-index: 1;
  font-size: var(--font-size-22);
}
.div13 {
  position: relative;
  width: 100%; /* 부모 영역에 맞게 full width 설정 */
  line-height: 160%;
  font-weight: 500;
  text-align: left; /* PC에서도 왼쪽 정렬로 설정 */
}
.frame-parent3 {
  width: 700px;
  height: 380px;
  border-radius: var(--br-30);
  background: linear-gradient(-61.5deg, #3a3a3a, #494949);
  overflow: visible; /* 아이콘이 잘리지 않도록 visible로 변경 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-30) 0 var(--padding-60) 50px;
  box-sizing: border-box;
  gap: var(--gap-30);
  text-align: left;
  font-size: var(--font-size-30);
  color: var(--color-white);
  font-family: var(--font-pretendard);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.shape4-1-parent {
  width: 620px;
  height: 190px;
  position: relative;
  z-index: 2;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .shape4-1-parent {
    width: 500px;
    height: 160px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .shape4-1-parent {
    width: 100%;
    height: clamp(100px, 15vh, 140px); /* solution-details-parent와 동일한 높이 */
  }
}

@media (max-width: 480px) {
  .shape4-1-parent {
    height: clamp(80px, 12vh, 120px); /* solution-details-parent와 동일한 높이 */
  }
}
.shape4-1-icon {
  position: absolute;
  top: 0;
  right: 0; /* 오른쪽 영역에 맞게 설정 */
  left: auto; /* left 값 제거 */
  width: clamp(50px, 8vw, 160px); /* 반응형 크기로 변경 */
  height: clamp(45px, 7vh, 153px); /* 높이도 반응형으로 설정 */
  object-fit: contain; /* 잘리지 않도록 contain으로 변경 */
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .shape4-1-icon {
    right: 0; /* 오른쪽 영역에 맞게 설정 */
    left: auto; /* left 값 제거 */
    width: clamp(60px, 9vw, 140px); /* 반응형 크기로 변경 */
    height: clamp(55px, 8vh, 130px); /* 반응형 높이로 변경 */
  }
}

/* 모바일 반응형 - 기존 스타일 제거 (새로운 레이아웃에서 처리) */

/* 소형 모바일 - 기존 스타일 제거 (새로운 레이아웃에서 처리) */
.aws {
  margin: 0;
  position: absolute;
  top: 142px;
  left: 0;
  font-size: inherit;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .aws {
    font-size: 18px;
    top: 120px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .aws {
    font-size: clamp(22px, 5.5vw, 32px); /* 2px 더 증가 */
    line-height: 1.4;
    top: 100px;
    text-align: left; /* 좌측 정렬로 변경 */
    width: 100%;
  }
}

@media (max-width: 480px) {
  .aws {
    font-size: clamp(20px, 5vw, 27px); /* 2px 더 증가 */
    line-height: 1.3;
    top: 80px;
    text-align: left; /* 좌측 정렬로 변경 */
    width: 100%;
  }
}
.aws-wrapper {
  width: 650px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 좌측 정렬로 변경 */
  z-index: 1;
  font-size: var(--font-size-22);
}
.aws-container {
  flex: 1;
  position: relative;
  line-height: 160%;
  font-weight: 500;
}
.frame-parent4 {
  width: 700px;
  height: 380px;
  border-radius: var(--br-30);
  background: linear-gradient(107.15deg, #3e8fff, var(--Primary-Main-Color));
  overflow: visible; /* 아이콘이 잘리지 않도록 visible로 변경 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-30) var(--padding-30) var(--padding-60) 50px;
  box-sizing: border-box;
  gap: var(--gap-30);
  text-align: left;
  font-size: var(--font-size-30);
  color: var(--color-white);
  font-family: var(--font-pretendard);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.frame-parent5,
.wrapper3 {
  height: 190px;
  display: flex;
  align-items: flex-start;
  z-index: 2;
}
.frame-parent5 {
  width: 620px;
  gap: 193px;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .frame-parent5 {
    width: 500px;
    gap: 150px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .frame-parent5 {
    width: 100%;
    height: clamp(100px, 15vh, 140px); /* 반응형 높이 */
    gap: clamp(50px, 8vw, 100px); /* 반응형 간격 */
    flex-direction: column;
    align-items: center;
  }
  
  .wrapper3 {
    width: 100%;
    padding: clamp(50px, 8vh, 100px) 0 0; /* 반응형 패딩 */
  }
  
  .aws-wrapper {
    width: 100%;
    font-size: clamp(18px, 4.5vw, 26px); /* 2px 더 증가 */
  }
  
  .aws-container {
    line-height: 1.4;
    text-align: left; /* 좌측 정렬로 변경 */
  }
  
  /* 세 번째 카드 컨테이너 */
  .frame-parent7 {
    width: 100%;
    height: clamp(100px, 15vh, 140px); /* 반응형 높이 */
    gap: clamp(50px, 8vw, 100px); /* 반응형 간격 */
    flex-direction: column;
    align-items: center;
  }
  
  .wrapper5 {
    width: 100%;
    padding: clamp(50px, 8vh, 100px) 0 0; /* 반응형 패딩 */
  }
}

@media (max-width: 480px) {
  .frame-parent5 {
    height: clamp(80px, 12vh, 120px); /* 반응형 높이 */
    gap: clamp(30px, 6vw, 80px); /* 반응형 간격 */
  }
  
  .wrapper3 {
    width: 100%;
    padding: clamp(30px, 6vh, 80px) 0 0; /* 반응형 패딩 */
  }
  
  .aws-wrapper {
    font-size: clamp(16px, 4vw, 22px); /* 2px 더 증가 */
  }
  
  .aws-container {
    line-height: 1.3;
    text-align: left; /* 좌측 정렬로 변경 */
  }
  
  /* 세 번째 카드 컨테이너 */
  .frame-parent7 {
    height: clamp(80px, 12vh, 120px); /* 반응형 높이 */
    gap: clamp(30px, 6vw, 80px); /* 반응형 간격 */
  }
  
  .wrapper5 {
    width: 100%;
    padding: clamp(30px, 6vh, 80px) 0 0; /* 반응형 패딩 */
  }
}
.wrapper3 {
  width: 306px;
  flex-direction: column;
  padding: 142px 0 0;
  box-sizing: border-box;
}
.div-h2 {
  margin: 0;
  width: 306px;
  position: relative;
  font-size: inherit;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .div-h2 {
    width: 100%;
    font-size: clamp(22px, 5.5vw, 32px); /* 2px 더 증가 */
    line-height: 1.4;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}

@media (max-width: 480px) {
  .div-h2 {
    font-size: clamp(20px, 5vw, 27px); /* 2px 더 증가 */
    line-height: 1.3;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}
.shape3-1-icon {
  width: clamp(50px, 8vw, 121px); /* 반응형 크기로 변경 */
  height: clamp(45px, 7vh, 110px); /* 높이도 반응형으로 설정 */
  position: relative;
  object-fit: contain; /* 잘리지 않도록 contain으로 변경 */
  z-index: 1;
}

/* 모바일 반응형 - 기존 스타일 제거 (새로운 레이아웃에서 처리) */

/* 소형 모바일 - 기존 스타일 제거 (새로운 레이아웃에서 처리) */
.wrapper4 {
  width: 600px;
  display: flex;
  align-items: center;
  z-index: 1;
  font-size: var(--font-size-22);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .wrapper4 {
    width: 100%;
    font-size: clamp(14px, 3.5vw, 20px); /* 반응형 폰트 크기 */
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .wrapper4 {
    font-size: clamp(12px, 3vw, 18px); /* 반응형 폰트 크기 */
  }
}
.frame-parent6 {
  width: 700px;
  height: 380px;
  border-radius: var(--br-30);
  background: linear-gradient(-61.5deg, #3a3a3a, #494949);
  overflow: visible; /* 아이콘이 잘리지 않도록 visible로 변경 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-30) var(--padding-30) var(--padding-60) 50px;
  box-sizing: border-box;
  gap: var(--gap-30);
  text-align: left;
  font-size: var(--font-size-30);
  color: var(--color-white);
  font-family: var(--font-pretendard);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.frame-parent7,
.wrapper5 {
  height: 190px;
  display: flex;
  align-items: flex-start;
  z-index: 2;
}
.frame-parent7 {
  width: 620px;
  gap: 18px;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .frame-parent7 {
    width: 500px;
    gap: 15px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .frame-parent7 {
    width: 100%;
    gap: 12px;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .frame-parent7 {
    gap: 10px;
  }
}
.wrapper5 {
  width: 432px;
  flex-direction: column;
  padding: 142px 0 0;
  box-sizing: border-box;
}
.h22 {
  margin: 0;
  width: 432px;
  position: relative;
  font-size: inherit;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .h22 {
    width: 100%;
    font-size: clamp(22px, 5.5vw, 32px); /* 2px 더 증가 */
    line-height: 1.4;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}

@media (max-width: 480px) {
  .h22 {
    font-size: clamp(20px, 5vw, 27px); /* 2px 더 증가 */
    line-height: 1.3;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}
.div15,
.div15 {
  width: 600px;
  line-height: 160%;
  font-weight: 500;
  display: inline-block;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .div15 {
    width: 100%;
    font-size: clamp(16px, 4vw, 22px); /* 2px 더 증가 */
    line-height: 1.4;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}

@media (max-width: 480px) {
  .div15 {
    font-size: clamp(14px, 3.5vw, 20px); /* 2px 더 증가 */
    line-height: 1.3;
    text-align: left; /* 왼쪽 정렬로 변경 */
  }
}
.section3 {
  align-self: stretch;
  height: 950px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 5vw, 100px);
  box-sizing: border-box;
  gap: clamp(20px, 5vw, 50px);
  max-width: 100%;
  text-align: left;
  font-size: 89.7px;
  color: var(--Primary-Main-Color);
  font-family: var(--font-pretendard);
  background: 
    linear-gradient(90deg, #e6f3ff 0%, #f0f8ff 20%, #ffffff 40%, transparent 70%, transparent 100%),
    linear-gradient(180deg, #e6f3ff 0%, #f0f8ff 30%, #ffffff 60%, #ffffff 100%);
  position: relative;
}

/* 태블릿 반응형 - 텍스트 영역 숨기고 우측만 남기기 */
@media (max-width: 1024px) {
  .section3 {
    height: 600px; /* 높이 줄이기 */
    justify-content: flex-end; /* 우측 정렬 */
    padding: 0 clamp(20px, 5vw, 50px);
  }
  
  .text-content {
    display: none !important; /* 텍스트 영역 숨기기 */
  }
  
  .section3 .div-h1 {
    display: none !important; /* 텍스트 직접 숨기기 */
  }
  
  .picker-container {
    flex: 1; /* 전체 영역 사용 */
    max-width: 100%; /* 최대 너비 제한 해제 */
    margin-left: 0; /* 마진 제거 */
    height: 500px; /* 높이 조정 */
  }
}

/* 모바일 반응형 - 더 작은 높이로 조정 */
@media (max-width: 768px) {
  .section3 {
    height: 500px; /* 더 작은 높이 */
    justify-content: center; /* 중앙 정렬 */
    padding: 0 20px;
  }
  
  .text-content {
    display: none !important; /* 텍스트 영역 숨기기 */
  }
  
  .section3 .div-h1 {
    display: none !important; /* 텍스트 직접 숨기기 */
  }
  
  .picker-container {
    flex: 1; /* 전체 영역 사용 */
    max-width: 100%; /* 최대 너비 제한 해제 */
    margin-left: 0; /* 마진 제거 */
    height: 400px; /* 높이 조정 */
  }
}

/* 소형 모바일 반응형 - 최소 높이로 조정 */
@media (max-width: 480px) {
  .section3 {
    height: 400px; /* 최소 높이 */
    justify-content: center; /* 중앙 정렬 */
    padding: 0 15px;
  }
  
  .text-content {
    display: none !important; /* 텍스트 영역 숨기기 */
  }
  
  .section3 .div-h1 {
    display: none !important; /* 텍스트 직접 숨기기 */
  }
  
  .picker-container {
    flex: 1; /* 전체 영역 사용 */
    max-width: 100%; /* 최대 너비 제한 해제 */
    margin-left: 0; /* 마진 제거 */
    height: 350px; /* 높이 조정 */
  }
}
.bg1 {
  height: 1255px;
  width: 1255px;
  border-radius: 50%;
  background: radial-gradient(
    50% 50%at 50% 50%,
    rgba(0, 89, 255, 0.15),
    rgba(255, 255, 255, 0.1)
  );
  display: none;
  max-width: 100%;
  z-index: 0;
}
.animation,
.bg1,
.div-h1 {
  position: relative;
  flex-shrink: 0;
}
/* 텍스트 영역 */
.text-content {
  flex: 6;
  order: 1;
  min-width: 0;
  max-width: 60%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-h1 {
  font-size: 62px; /* 기업의 미래 성장을 이끄는과 동일한 크기 */
  line-height: 1.6; /* 기업의 미래 성장을 이끄는과 동일한 라인 높이 */
  font-weight: 600; /* 기업의 미래 성장을 이끄는과 동일한 폰트 웨이트 */
  color: var(--Primary-Main-Color);
  margin: 0;
  text-align: center;
  word-break: keep-all;
  width: 100%;
}
.animation {
  height: 1038px;
  width: 379px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  z-index: 2;
  animation: techStackSlide 15s ease-in-out infinite;
}

/* .animation은 숨기고 .develop-parent를 활성화 */
.animation {
  display: none;
}

.develop {
  display: none;
}



.picker-guide {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10;
  pointer-events: none;
}

.picker-guide p {
  margin: 0;
  font-size: 12px;
  color: white;
}

.c3,
.net,
.rust {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 48px;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: block;
  width: 100%;
  height: 77px;
  flex-shrink: 0;
}
/* .c3, .net 개별 스타일 제거 - 공통 스타일 사용 */
/* .c3 개별 스타일 제거 - 공통 스타일 사용 */
.c4,
.figma,
.nextjs {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 48px;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: block;
  width: 100%;
  height: 77px;
  flex-shrink: 0;
}
/* .figma, .nextjs 개별 스타일 제거 - 공통 스타일 사용 */
/* .figma 개별 스타일 제거 - 공통 스타일 사용 */
.aws2,
.aws3,
.react {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 48px;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: block;
  width: 100%;
  height: 77px;
  flex-shrink: 0;
}
/* .aws3, .react 개별 스타일 제거 - 공통 스타일 사용 */
/* .aws3 개별 스타일 제거 - 공통 스타일 사용 */
.div-react,
.spring {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 48px;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: block;
  width: 100%;
  height: 77px;
  flex-shrink: 0;
}
/* .spring 개별 스타일 제거 - 공통 스타일 사용 */
.python,
.typescript {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 48px;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: block;
  width: 100%;
  height: 77px;
  flex-shrink: 0;
}
/* .typescript 개별 스타일 제거 - 공통 스타일 사용 */
.java,
.javascript {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 48px;
  line-height: 160%;
  font-weight: 700;
  font-family: inherit;
  display: block;
  width: 100%;
  height: 77px;
  flex-shrink: 0;
}
/* .java 개별 스타일 제거 - 공통 스타일 사용 */
.develop {
  height: 1007px;
  width: 465px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  z-index: 3;
  animation: techStackSlide 20s linear infinite;
}
.c5,
.c6,
.div-net,
.div-rust {
  position: absolute;
  top: 0;
  left: 0;
}
.c5,
.c6,
.div-net {
  top: 140px;
}
.c5,
.c6 {
  top: 280px;
}
.c6 {
  top: 420px;
}
.aws4,
.div-figma,
.div-nextjs {
  position: absolute;
  top: 560px;
  left: 0;
}
.aws4,
.div-figma {
  top: 700px;
}
.aws4 {
  top: 840px;
}
.aws5,
.div-spring,
.react2 {
  position: absolute;
  top: 980px;
  left: 0;
}
.aws5,
.div-spring {
  top: 1120px;
}
.div-spring {
  top: 1260px;
}
.div-python,
.div-typescript {
  position: absolute;
  top: 1400px;
  left: 0;
}
.div-typescript {
  top: 1540px;
}
.div-java,
.div-javascript {
  position: absolute;
  top: 1680px;
  left: 0;
}
.div-java {
  top: 1820px;
}
.develop-parent,
.div-develop {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}
.develop-parent {
  margin-top: -684px;
  max-width: calc(100% - 974px);
  color: var(--Text-Text1);
}
.div-develop {
  height: 1820px;
  width: 465px;
  overflow: visible;
  flex-direction: column;
}

.business,
.overlay {
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.overlay {
  height: 950px;
  width: 465px;
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-white),
    var(--color-white) 20%,
    var(--color-gray-500) 45.95%,
    rgba(255, 255, 255, 0.98) 75%,
    var(--color-white)
  );
  max-width: 100%;
}
.business {
  width: 1920px;
  background-color: var(--Primary-Main-Color);
  align-items: center;
  padding: 35px 0;
  box-sizing: border-box;
  z-index: 5;
  font-size: 38px;
  color: var(--color-white);
  display: none; /* 원래 숨김 처리 */
}

@keyframes slideLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.frame-parent8 {
  width: 2340px;
  position: relative;
  height: 76px;
  flex-shrink: 0;
}
.si-system-integration-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.si-system-integration {
  position: relative;
  line-height: 200%;
}
.frame-item {
  position: absolute;
  top: 23px;
  left: 439px;
  width: 30px;
  height: 30px;
}
.it-consulting-wrapper {
  position: absolute;
  top: 0;
  left: 499px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-inner {
  position: absolute;
  top: 23px;
  left: 768px;
  width: 30px;
  height: 30px;
}
.web-app-service-wrapper {
  position: absolute;
  top: 0;
  left: 828px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.star-icon {
  position: absolute;
  top: 23px;
  left: 1215px;
  width: 30px;
  height: 30px;
}
.ai-solution-wrapper {
  position: absolute;
  top: 0;
  left: 1275px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div-frame-child {
  position: absolute;
  top: 23px;
  left: 1499px;
  width: 30px;
  height: 30px;
}
.block-chain-wrapper {
  position: absolute;
  top: 0;
  left: 1559px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-child2 {
  position: absolute;
  top: 23px;
  left: 1809px;
  width: 30px;
  height: 30px;
}
.nft-non-fungible-token-wrapper {
  position: absolute;
  top: 0;
  left: 1869px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div-section2 {
  align-self: stretch;
  height: 1960px;
  position: relative;
  background-color: var(--color-gray-100);
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-22);
  color: var(--color-white);
}
.section2-child {
  position: absolute;
  top: calc(50% - 90px);
  right: 1434px;
  border-radius: 50%;
  border: 0 solid var(--color-gray-500);
  box-sizing: border-box;
  width: 812px;
  height: 812px;
  opacity: 0.3;
}
.div-pt7-1-icon {
  position: absolute;
  top: -323px;
  left: calc(50% - 1104px);
  width: 2207px;
  height: 1131px;
  object-fit: cover;
  display: none;
}
.frame-parent10 {
  position: absolute;
  top: 0;
  left: 981px;
  width: 700px;
  height: 1800px;
  max-width: 100%;
}
.shape1-1-parent {
  position: absolute;
  top: 160px;
  left: 0;
  border-radius: var(--br-30);
  background: linear-gradient(-61.5deg, var(--Primary-Main-Color), #3e8fff);
  width: 100%;
  height: 380px;
  overflow: hidden;
}
.div-shape1-1-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 200px;
  height: 189px;
  object-fit: cover;
}
.wrapper7 {
  position: absolute;
  bottom: 60px;
  left: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div-ai,
.div16 {
  line-height: 160%;
}
.div16 {
  position: relative;
  font-weight: 500;
}
.div-ai {
  position: absolute;
  top: 172px;
  left: 50px;
  font-size: var(--font-size-30);
}
.shape2-1-parent {
  position: absolute;
  top: 580px;
  left: 0;
  border-radius: var(--br-30);
  background: linear-gradient(-61.5deg, #3a3a3a, #494949);
  width: 100%;
  height: 380px;
  overflow: hidden;
  max-width: 100%;
}
.shape2-1-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 200px;
  height: 198px;
  object-fit: cover;
}
.aws-frame {
  position: absolute;
  bottom: 60px;
  left: 50px;
  width: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.div-aws-container {
  flex: 1;
  position: relative;
  line-height: 160%;
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
}
.shape3-1-parent {
  position: absolute;
  top: 1000px;
  left: 0;
  border-radius: var(--br-30);
  background: linear-gradient(107.15deg, #3e8fff, var(--Primary-Main-Color));
  width: 100%;
  height: 380px;
  overflow: hidden;
  max-width: 100%;
}
.div-shape3-1-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 135px;
  height: 200px;
  object-fit: cover;
}
.wrapper8 {
  position: absolute;
  bottom: 60px;
  left: 50px;
  width: 600px;
  display: flex;
  align-items: center;
  max-width: 100%;
}
.shape4-1-group {
  position: absolute;
  top: 1420px;
  left: 0;
  border-radius: var(--br-30);
  background: linear-gradient(-61.5deg, #3a3a3a, #494949);
  width: 100%;
  height: 380px;
  overflow: hidden;
}
.shape4-1-icon2 {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 200px;
  height: 191px;
  object-fit: cover;
}
.wrapper9 {
  position: absolute;
  bottom: 60px;
  left: 50px;
  display: flex;
  align-items: center;
}
.expertise-wrapper,
.title2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.title2 {
  position: absolute;
  top: 0;
  left: 240px;
  flex-direction: column;
  align-items: flex-start;
  padding: 300px 0 160px;
  gap: var(--gap-20);
  max-width: 100%;
  font-size: 25px;
  color: var(--Primary-Main-Color);
}
.expertise-wrapper {
  width: 135px;
  align-items: center;
  padding: 0 var(--padding-20) 0 0;
}
.div-expertise,
.div19 {
  position: relative;
}
.div19 {
  font-size: 62px;
  line-height: 160%;
  display: inline-block;
  max-width: 100%;
  color: var(--color-white);
}
.section4-wrapper {
  align-self: stretch;
  padding: 0 0 160px;
}
.partners-inner,
.section4,
.section4-wrapper {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.section4 {
  flex: 1;
  background-color: var(--color-aliceblue-100);
  overflow: hidden;
  flex-direction: column;
  padding: 160px 0;
  gap: 120px;
}
.partners-inner {
  width: 1274px;
  justify-content: center;
  padding: 0 var(--padding-20);
  text-align: left;
  font-size: 25px;
  color: var(--Primary-Main-Color);
  font-family: var(--font-pretendard);
}
.project-wrapper,
.title3 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.title3 {
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--gap-30);
  max-width: 100%;
}
.project-wrapper {
  justify-content: center;
  padding: 0 var(--padding-20);
}
.project {
  width: 1440px;
  display: flex;
  align-items: center;
  gap: var(--gap-20);
}
.parent {
  height: 550px;
  width: 273px;
  position: relative;
  border-radius: var(--br-30);
  overflow: hidden;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white);
  font-family: var(--font-pretendard);
}
.div-icon,
.frame-wrapper {
  position: absolute;
  left: 0;
  height: 550px;
}
.div-icon {
  top: calc(50% - 275px);
  width: 550px;
  object-fit: cover;
}
.frame-wrapper {
  top: 0;
  width: 273px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ea-parent {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  z-index: 2;
  color: white;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s ease;
}
.div-ea,
.ea {
  position: relative;
  left: 0;
}
.ea {
  top: 0;
  line-height: 1.5;
  display: block;
  width: 100%;
  font-size: 1rem;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  margin-top: 10px;
}

.parent:hover .ea-parent,
.div-parent:hover .ea-parent,
.parent2:hover .ea-parent {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.3s;
}
.div-ea {
  margin: 0;
  top: 0;
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: bold;
  font-family: inherit;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 10px;
}

/* === 포트폴리오 버튼 호버 스타일 === */
.tab, .div-tab {
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab:hover, .div-tab:hover {
  transform: translateY(-2px);
}

/* === Expandable Card Gallery === */
.gallery-container {
  width: 100%;
  max-width: 1440px;
  height: 550px;
  display: flex;
  gap: 10px;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin: 0 auto;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .gallery-container {
    height: 400px;
    gap: 8px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .gallery-container {
    height: 300px;
    gap: 5px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .gallery-container {
    height: auto;
    flex-direction: column;
    gap: 10px;
  }
}

.gallery-card {
  flex: 1;
  position: relative;
  cursor: pointer;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  border-radius: 15px;
  background: transparent;
  min-width: 0;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: none;
  transform: scale(1);
}

/* 한화시스템과 삼성물산은 중앙 crop */
.gallery-card[data-card="2"] .card-image img,
.gallery-card[data-card="3"] .card-image img {
  object-position: center center;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.8s ease;
  z-index: 1;
}

.card-content {
  position: absolute;
  bottom: 5px;
  left: 20px;
  z-index: 2;
  color: white;
  transform: translateY(0);
  opacity: 1;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: left;
  height: 2.5em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


.card-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.card-description {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  transform: translateY(20px);
  transition: all 0.6s ease;
  margin-top: 10px;
}

/* 호버 효과 */
.gallery-card:hover {
  flex: 1.8;
}

.gallery-card .card-image img {
  filter: grayscale(100%);
}

.gallery-card:not(.no-hover):hover > .card-image img {
  filter: none;
  transform: scale(1);
  object-position: center center;
  filter: brightness(1.2) contrast(1) saturate(1.4);
}
.gallery-card:hover > .card-content {
  transform: translateY(-30px);
  height: 4.5em;
}
.gallery-card:not(.no-hover):hover > .card-content > .card-description {
  opacity: 0.9;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.3s;
}



.div-parent {
  height: 550px;
  width: 271px;
  position: relative;
  border-radius: var(--br-30);
  overflow: hidden;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white);
  font-family: var(--font-pretendard);
}
.icon2 {
  position: absolute;
  top: 0;
  left: -273px;
  width: 978px;
  height: 550px;
  object-fit: cover;
}
.parent2 {
  height: 550px;
  width: 273px;
  position: relative;
  border-radius: var(--br-30);
  overflow: hidden;
  flex-shrink: 0;
  background-image: url(./public/Frame-284@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white);
  font-family: var(--font-pretendard);
}
.icon3,
.icon4 {
  position: absolute;
  top: 0;
  object-fit: cover;
}
.icon3 {
  left: -323px;
  width: 960px;
  height: 678px;
  display: none;
}
.icon4 {
  left: 0;
  width: 500px;
  height: 550px;
}
.banner-container {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  position: relative;
  max-width: 100%;
}
.div-bg1 {
  display: none;
}
.banner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  gap: 22px;
  max-width: 100%;
  z-index: 1;
  flex-shrink: 0;
}
.banner1,
.logo-pair {
  height: 135px;
  flex-shrink: 0;
}
.banner1 {
  width: 1920px;
  overflow: hidden;
  z-index: 0;
}

.banner-track {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-20);
  animation: slideLeftInfinite 25s linear infinite;
  width: fit-content;
}

@keyframes slideLeftInfinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.logo-pair {
  width: 270px;
  position: relative;
  z-index: 10;
}
.brand-logos {
  position: absolute;
  top: 0;
  left: 0;
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-10);
  box-sizing: border-box;
}
.ea-2-icon {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.div-logo-pair,
.logo-pair2,
.logo-pair3,
.logo-pair4,
.logo-pair5,
.logo-pair6,
.logo-pair7,
.logo-pair8,
.logo-pair9 {
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-10);
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 1;
}
.logo-pair2,
.logo-pair3,
.logo-pair4,
.logo-pair5,
.logo-pair6,
.logo-pair7,
.logo-pair8,
.logo-pair9 {
  z-index: 2;
}
.logo-pair3,
.logo-pair4,
.logo-pair5,
.logo-pair6,
.logo-pair7,
.logo-pair8,
.logo-pair9 {
  z-index: 3;
}
.logo-pair4,
.logo-pair5,
.logo-pair6,
.logo-pair7,
.logo-pair8,
.logo-pair9 {
  z-index: 4;
}
.logo-pair5,
.logo-pair6,
.logo-pair7,
.logo-pair8,
.logo-pair9 {
  z-index: 5;
}
.logo-pair6,
.logo-pair7,
.logo-pair8,
.logo-pair9 {
  z-index: 6;
}
.logo-pair7,
.logo-pair8,
.logo-pair9 {
  z-index: 7;
}
.logo-pair8,
.logo-pair9 {
  z-index: 8;
}
.logo-pair9 {
  z-index: 9;
}
.logo-pair10 {
  height: 135px;
  width: 270px;
  position: relative;
  flex-shrink: 0;
  z-index: 20;
}
.logo-pair11,
.logo-pair12 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.logo-pair11 {
  width: 270px;
  flex-direction: column;
  padding: var(--padding-10);
  box-sizing: border-box;
  z-index: 11;
}
.logo-pair12 {
  z-index: 12;
}
.logo-pair12,
.logo-pair13,
.logo-pair14 {
  width: 270px;
  flex-direction: column;
  padding: var(--padding-10);
  box-sizing: border-box;
}
.logo-pair13 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  z-index: 13;
}
.logo-pair14 {
  z-index: 14;
}
.logo-pair14,
.logo-pair15,
.logo-pair16 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.logo-pair15 {
  width: 270px;
  flex-direction: column;
  padding: var(--padding-10);
  box-sizing: border-box;
  z-index: 15;
}
.logo-pair16 {
  z-index: 16;
}
.logo-pair16,
.logo-pair17,
.logo-pair18 {
  width: 270px;
  flex-direction: column;
  padding: var(--padding-10);
  box-sizing: border-box;
}
.logo-pair17 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  z-index: 17;
}
.logo-pair18 {
  z-index: 18;
}
.banner2,
.logo-pair18,
.logo-pair19,
.parent5 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.logo-pair19 {
  width: 270px;
  flex-direction: column;
  padding: var(--padding-10);
  box-sizing: border-box;
  z-index: 19;
}
.banner2,
.parent5 {
  height: 115px;
}
.banner2 {
  width: 1920px;
  overflow: hidden;
  z-index: 1;
}

.banner2 .banner-track {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-20);
  animation: slideRightInfinite 25s linear infinite;
  width: fit-content;
}

@keyframes slideRightInfinite {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.parent5 {
  margin-left: -3440px;
  width: 2680px;
  gap: var(--gap-20);
}
.spc-1-icon {
  width: 250px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.frame-parent11 {
  height: 115px;
  width: 2680px;
  display: flex;
  align-items: flex-start;
  padding: 0 260px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.wrapper10 {
  margin-left: -270px;
}
.spc-1-wrapper,
.wrapper10 {
  margin-top: -10px;
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-10);
  box-sizing: border-box;
  flex-shrink: 0;
}
.banner-child,
.banner-item {
  width: 560px;
  height: 289px;
  position: absolute;
  margin: 0 !important;
  background: linear-gradient(
    270deg,
    rgba(240, 248, 255, 0),
    var(--color-aliceblue-100) 78.85%
  );
  z-index: 2;
}
.banner-child {
  bottom: -9px;
  left: 0;
}
.banner-item {
  right: -560px;
  bottom: -298px;
  transform: rotate(180deg);
  transform-origin: 0 0;
}
.project-container-wrapper {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-20) 160px;
  box-sizing: border-box;
  max-width: 100%;
}
.project-container {
  width: 1440px;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
}
.project-container,
.project-header,
.title4 {
  display: flex;
  max-width: 100%;
}
.project-header {
  align-self: stretch;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-20);
  z-index: 2;
  text-align: left;
  font-size: 25px;
  color: var(--Primary-Main-Color);
  font-family: var(--font-pretendard);
}
.title4 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--gap-30);
  min-width: 619px;
}
.h13 {
  margin: 0;
  position: relative;
  font-size: 62px;
  line-height: 160%;
  color: var(--Text-Text1);
  font-family: inherit;
}
.tab,
.tab-menu {
  border-radius: 50px;
  display: flex;
  align-items: center;
}
.tab-menu {
  background-color: var(--color-aliceblue-200);
  padding: var(--padding-15) var(--padding-20);
  gap: var(--gap-20);
  font-size: var(--font-size-20);
  color: var(--Primary-Lighter);
}
.tab-menu input[type="radio"] {
  display: none;
}
.tab-menu .tab {
  width: 130px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10) 0;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
}
.tab-menu input[type="radio"] {
  display: none;
}
.tab-menu input[type="radio"]:checked + label {
  cursor: pointer;
  border: 0;
  padding: var(--padding-10) 0;
  background-color: var(--Primary-Main-Color);
  width: 130px;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  font-size: var(--font-size-20);
  font-family: var(--font-pretendard);
  color: var(--color-white);
  text-align: left;
}

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}

.list > section.hidden {
  display: none;
}

.list > section {
  flex-basis: 440px;
  flex-grow: 0;
}

.rectangle-parent {
  height: 550px;
  flex: 1;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: var(--br-30);
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding: var(--padding-24) var(--padding-24) var(--padding-30);
  box-sizing: border-box;
  gap: var(--gap-15);
  min-width: 330px;
  width: 440px;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--Primary-Main-Color);
  font-family: var(--font-pretendard);
  transition: width 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.rectangle-parent:hover {
  transform: translateY(-5px);
  box-shadow: 15px 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.rectangle-img {
  position: relative;
  width: 100%;
}

.rectangle-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -10%);
}

.rectangle-parent > div:first-child {
  flex: 0.7;
}
.rectangle-parent > div:last-child {
  flex: 0.3;
  width: 100%;
}
.rectangle-desc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-wrapper {
  width: 100%;
  display: inline-block;
  display: flex;
  box-sizing: border-box;
}
.web-wrapper b {
  border-radius: 50px;
  background-color: var(--color-aliceblue-200);
  padding: 0 var(--padding-15);
  box-sizing: border-box;
}

.web-wrapper-double {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}

.web-wrapper-double b {
  background-color: var(--color-aliceblue-200);
  padding: 0 var(--padding-15);
  border-radius: 50px;
  box-sizing: border-box;
}



.div-hd {
  margin: 0;
  position: relative;
  font-size: var(--font-size-20);
  line-height: 160%;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-black);
}

.image-masks-icon,
.image-masks-parent {
  border-radius: var(--br-30);
  max-width: 100%;
}

.footer,
.m {
  position: relative;
}
.m {
  margin: 0;
  font-size: inherit;
  line-height: 160%;
  font-weight: 600;
  font-family: inherit;
}
.footer {
  align-self: stretch;
  border-radius: var(--br-80) var(--br-80) 0 0;
  background-color: var(--color-gray-300);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 160px 239px 120px 238px;
  box-sizing: border-box;
  gap: 120px;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-20);
  color: var(--color-white);
  font-family: var(--font-pretendard);
}
.footer-design-one,
.footer-design-two {
  position: absolute;
  margin: 0 !important;
  border-radius: 50%;
}
.footer-design-one {
  width: 667px;
  height: 667px;
  right: -236px;
  bottom: -306px;
  background: radial-gradient(
    50% 50%at 50% 50%,
    rgba(0, 187, 255, 0.3),
    rgba(0, 187, 255, 0)
  );
}
.footer-design-two {
  width: 810px;
  height: 810px;
  bottom: -335px;
  left: -231px;
  background: radial-gradient(
    50% 50%at 50% 50%,
    rgba(0, 51, 255, 0.2),
    rgba(0, 51, 255, 0)
  );
}
.bg12,
.bg2 {
  width: 1063px;
  height: 1063px;
  position: relative;
  border-radius: 50%;
  display: none;
  max-width: 100%;
}
.bg2 {
  background: radial-gradient(
    50% 50%at 50% 50%,
    rgba(59, 203, 255, 0.2),
    var(--color-gray-500)
  );
  z-index: 2;
}
.bg12 {
  background: radial-gradient(
    50% 50%at 50% 50%,
    rgba(0, 89, 255, 0.15),
    var(--color-gray-500)
  );
  z-index: 3;
}
.pt7-1-icon2 {
  width: 2207px;
  position: absolute;
  margin: 0 !important;
  top: -592px;
  left: -144px;
  max-height: 100%;
  object-fit: cover;
}
/* .contact-parent {
  width: 200px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-30);
  z-index: 5;
} */
/* .div-contact {
  align-self: stretch;
  position: relative;
  font-weight: 600;
}
.tel-070-5057-3222-fax-container {
  align-self: stretch;
  position: relative;
  line-height: 180%;
} */
/* .location-parent {
  align-items: flex-start;
  justify-content: center;
}
.location-parent {
  width: 225px;
  display: none;
  flex-direction: column;
  gap: var(--gap-30);
  z-index: 6;
} */
.footer-content {
  align-self: stretch;
  display: flex;
  gap: 124px;
  max-width: 100%;
}
.contact-wrapper {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-60);
  min-width: 441px;
  text-align: left;
  font-size: var(--font-size-20);
  color: var(--color-white);
  font-family: var(--font-pretendard);
}
.contact-container,
.contact-info,
.contact-wrapper {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.contact-container {
  width: 569px;
  padding: 0 var(--padding-2);
  box-sizing: border-box;
  font-size: 25px;
  color: var(--Primary-Main-Color);
}
.contact-info {
  align-self: stretch;
  flex: 1;
  flex-direction: column;
  gap: 28px;
}
.h14 {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: 55px;
  line-height: 1.2; /* 라인 간격 조정 */
  color: var(--color-white);
  font-family: inherit;
  font-weight: 700; /* 글씨 굵게 */
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 텍스트 그림자 추가 */
}
.span7 {
  font-family: var(--font-pretendard);
}
.span8 {
  font-weight: 600;
}
.div-location,
.location-wrapper {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.location-wrapper {
  padding: 0 0 var(--padding-10);
  box-sizing: border-box;
}
.div-location {
  align-self: stretch;
  flex: 1;
  backdrop-filter: blur(4px);
  border-radius: var(--br-20);
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-20);
}
.adress {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: 18px; /* 라벨 크기 명시 */
  font-weight: 700;
  font-family: inherit;
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 텍스트 그림자 추가 */
  margin-bottom: 8px; /* 하단 여백 추가 */
}
.office-numbers {
  align-self: stretch;
  padding: 0 0 0 var(--padding-2);
  box-sizing: border-box;
  max-width: 100%;
}
.contact-details,
.office-numbers,
.tel {
  display: flex;
  align-items: flex-start;
}
.contact-details {
  flex: 1;
  gap: var(--gap-60);
  max-width: 100%;
}
.tel {
  backdrop-filter: blur(4px);
  border-radius: var(--br-20);
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-20);
}
.info-adress {
  align-self: stretch;
}
.info-adress,
.infobizwizsystemcokr {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: 20px; /* 정보 텍스트 크기 명시 */
  line-height: 1.4; /* 라인 간격 조정 */
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 텍스트 그림자 추가 */
  font-weight: 400;
  font-family: inherit;
}
.section5 {
  border-radius: var(--br-30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 174px 236px 171px 237px;
  box-sizing: border-box;
  position: relative;
  min-width: 640px;
  max-width: 100%;
  z-index: 1;
}
.image-26-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 0;
}
.map-point {
  align-self: stretch;
  height: 205px;
  position: relative;
  z-index: 1;
}
.dot-icon,
.wrapper-dot {
  position: absolute;
  left: -14%;
}
.wrapper-dot {
  top: 38px;
  width: 167px;
  height: 167px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dot-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 49px;
  transform: scale(1.347);
}
.logo-icon {
  position: absolute;
  height: 53.66%;
  width: 59.88%;
  top: -5%;
  right: 19.76%;
  bottom: 46.34%;
  left: -5%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
}
.contact-group {
  width: 285px;
  backdrop-filter: blur(4px);
  border-radius: var(--br-20);
  background-color: var(--color-gray-400);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-30) var(--padding-20) var(--padding-30) 35px;
  box-sizing: border-box;
  gap: var(--gap-20);
  z-index: 8;
}
.contact2 {
  align-self: stretch;
  position: relative;
}
.div-tel-070-5057-3222-fax-container {
  align-self: stretch;
  position: relative;
  line-height: 160%;
}
.legal-container {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 1px 0 var(--padding-2);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-15);
  color: var(--color-lightgray);
  font-family: var(--font-pretendard);
}
.adress-legal-parent {
  height: 223px;
  flex: 1;
  position: relative;
  border-top: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  max-width: 100%;
  z-index: 1;
}
.adress-legal {
  position: absolute;
  top: 155px;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-15);
  max-width: 100%;
}
.kgit {
  position: relative;
  line-height: 160%;
  display: inline-block;
  max-width: 100%;
}
.address-company {
  height: 19px;
  width: 1px;
  position: relative;
  border-right: 1px solid var(--color-white);
  box-sizing: border-box;
  opacity: 0.1;
}
.email-infobizwizsystemcokr {
  position: relative;
  line-height: 160%;
}
.copyright-bizwiz-all-rights-wrapper {
  position: absolute;
  top: 199px;
  left: calc(50% - 720px);
  display: flex;
  align-items: center;
  color: var(--Primary-Lighter);
}
.branding-action,
.empty-space {
  position: absolute;
  top: 60px;
  left: 1252px;
  width: 188px;
  display: flex;
  align-items: center;
}
.branding-action {
  left: 0;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
}
.btn-footer {
  cursor: pointer;
  border: 0;
  padding: 25px var(--padding-30);
  background-color: var(--color-gray-200);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: var(--gap-10);
  transition: all 0.3s ease;
}

.btn-footer:hover {
  background-color: var(--Primary-Main-Color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(17, 116, 255, 0.3);
}
.div-b {
  position: relative;
  font-size: var(--font-size-16);
  letter-spacing: -0.01em;
  font-family: var(--font-pretendard);
  color: var(--color-white);
  text-align: left;
}
@media screen and (max-width: 1825px) {
  .frame-parent {
    flex-wrap: wrap;
  }
  .section1 {
    height: auto;
  }
  .title-container {
    flex-wrap: wrap;
  }
  .title-wrapper {
    flex: 1;
  }
  .card,
  .footer-content,
  .frame-parent12 {
    flex-wrap: wrap;
  }
  .section5 {
    flex: 1;
  }
}
@media screen and (max-width: 1350px) {
  .section {
    gap: 126px;
  }
  .inner,
  .section1 {
    box-sizing: border-box;
  }
  .inner {
    padding-left: var(--padding-40);
    padding-right: var(--padding-40);
  }
  .section1 {
    gap: 43px;
    padding-left: 120px;
    padding-top: 227px;
    padding-bottom: 68px;
  }
  .title-container {
    gap: 235px;
  }
  .card-container {
    gap: 80px;
  }
  .card {
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(330px, 572px));
  }
  .child,
  .section3 {
    box-sizing: border-box;
  }
  .child {
    width: 100%;
    height: 1px;
    border-top: 1px solid var(--Style-Solid);
  }
  .section3 {
    gap: 84px;
    padding: 159px 119px 159px 121px;
  }
  .section4,
  .section4-wrapper {
    padding-bottom: 104px;
    box-sizing: border-box;
  }
  .section4 {
    gap: var(--gap-60);
    padding-top: 104px;
  }

  .title4 {
    flex: 1;
  }
  .frame-parent12,
  .frame-parent13,
  .frame-parent15 {
    justify-content: center;
    grid-template-columns: repeat(2, minmax(330px, 572px));
  }
  .frame-parent15 {
    flex-wrap: wrap;
  }
  .frame-parent21 {
    gap: var(--gap-30);
    flex-wrap: wrap;
  }
  .footer {
    gap: var(--gap-60);
    padding: 104px 119px 78px;
    box-sizing: border-box;
  }
  .footer-content {
    gap: 62px;
  }
  .contact-wrapper,
  .section5 {
    min-width: 100%;
  }
  .adress-legal-parent {
    height: auto;
    min-height: 223px;
  }
  .adress-legal {
    flex-wrap: wrap;
  }
  .address-company {
    width: 100%;
    height: 1px;
  }
}
@media screen and (max-width: 925px) {
  .section {
    gap: 63px;
    padding-bottom: 104px;
    box-sizing: border-box;
  }
  .innovative-solutions-for {
    font-size: 26px;
    line-height: 26px;
  }
  .total-it-container {
    font-size: 52px;
    line-height: 94px;
  }
  .header {
    padding-left: var(--padding-40);
    padding-right: var(--padding-40);
    box-sizing: border-box;
  }
  .header .menu,
  .menu {
    display: flex !important; /* none에서 flex로 변경 */
    gap: 20px; /* 모바일에서 간격 줄임 */
    font-size: 14px; /* 모바일에서 폰트 크기 줄임 */
    flex-wrap: wrap; /* 줄바꿈 허용 */
    justify-content: center; /* 중앙 정렬 */
    visibility: visible !important; /* 강제로 보이게 */
    opacity: 1 !important; /* 강제로 불투명하게 */
  }
  .section1 {
    gap: 21px;
    padding-left: var(--padding-60);
    padding-top: 148px;
    padding-bottom: 44px;
    box-sizing: border-box;
  }
  .title-container {
    gap: 118px;
  }
  .title-wrapper {
    min-width: 100%;
  }
  .bizwiz-system {
    font-size: 50px;
    line-height: 79px;
  }
  .card-container {
    gap: var(--gap-40);
  }
  .card {
    gap: var(--gap-30);
    grid-template-columns: minmax(330px, 1fr);
  }
  .div-section {
    gap: 25px;
  }
  .section3 {
    gap: 42px;
    padding: 103px 59px 103px var(--padding-60);
    box-sizing: border-box;
  }
  .div-h1 {
    font-size: 62px; /* 기업의 미래 성장을 이끄는과 동일한 크기 */
    line-height: 1.6; /* 기업의 미래 성장을 이끄는과 동일한 라인 높이 */
  }
  .aws2,
  .aws3,
  .aws4,
  .aws5,
  .c3,
  .c4,
  .c5,
  .c6,
  .div-figma,
  .div-java,
  .div-javascript,
  .div-net,
  .div-nextjs,
  .div-python,
  .div-react,
  .div-rust,
  .div-spring,
  .div-typescript,
  .figma,
  .java,
  .javascript,
  .net,
  .nextjs,
  .python,
  .react,
  .react2,
  .rust,
  .spring,
  .typescript {
    font-size: 45px;
  }
  .div-ai {
    font-size: var(--font-size-24);
    line-height: 38px;
  }
  .div19 {
    font-size: 50px;
    line-height: 79px;
  }
  .section4,
  .section4-wrapper {
    padding-bottom: 68px;
    box-sizing: border-box;
  }
  .section4 {
    gap: var(--gap-30);
    padding-top: 68px;
  }
  .project-container {
    gap: 50px;
  }
  .frame-parent12,
  .list {
    gap: var(--gap-30);
  }
  .frame-parent12 {
    grid-template-columns: minmax(330px, 1fr);
  }
  .image-masks-parent {
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-26);
    box-sizing: border-box;
  }
  .frame-parent13 {
    gap: var(--gap-30);
    grid-template-columns: minmax(330px, 1fr);
  }
  .rectangle-parent {
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-26);
    box-sizing: border-box;
  }
  .frame-parent15 {
    gap: var(--gap-30);
    grid-template-columns: minmax(330px, 1fr);
  }
  .rectangle-parent22,
  .rectangle-parent4,
  .rectangle-parent6 {
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-26);
    box-sizing: border-box;
  }
  .footer {
    gap: var(--gap-30);
    padding: 68px 59px 51px;
    box-sizing: border-box;
  }
  .footer-content {
    gap: 31px;
  }
  /* .contact-wrapper {
    gap: var(--gap-30);
  } */
  .h14 {
    font-size: 44px;
    line-height: 62px;
  }
  .contact-details {
    gap: var(--gap-30);
    flex-wrap: wrap;
  }
  .section5 {
    padding: 113px 118px 111px;
    box-sizing: border-box;
  }
  .branding-action {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 450px) {
  .section {
    padding-bottom: 68px;
    box-sizing: border-box;
  }
  .innovative-solutions-for {
    font-size: 19px;
    line-height: 19px;
  }
  .total-it-container {
    font-size: 39px;
    line-height: 70px;
  }
  .title-container {
    gap: 59px;
  }
  .div-about-us {
    font-size: var(--font-size-20);
  }
  .bizwiz-system {
    font-size: 37px;
    line-height: 60px;
  }
  .card-container {
    gap: var(--gap-20);
  }
  .div7,
  .div9,
  .it-container {
    font-size: var(--font-size-16);
  }
  .div9,
  .it-container {
    line-height: 26px;
  }
  .div-h1 {
    font-size: 62px; /* 기업의 미래 성장을 이끄는과 동일한 크기 */
    line-height: 1.6; /* 기업의 미래 성장을 이끄는과 동일한 라인 높이 */
  }
  .aws2,
  .aws3,
  .aws4,
  .aws5,
  .c3,
  .c4,
  .c5,
  .c6,
  .div-figma,
  .div-java,
  .div-javascript,
  .div-net,
  .div-nextjs,
  .div-python,
  .div-react,
  .div-rust,
  .div-spring,
  .div-typescript,
  .figma,
  .java,
  .javascript,
  .net,
  .nextjs,
  .python,
  .react,
  .react2,
  .rust,
  .spring,
  .typescript {
    font-size: 27px;
  }
  .div-ai,
  .div-aws-container,
  .div16 {
    font-size: var(--font-size-18);
    line-height: 28px;
  }
  .div-ai,
  .div-aws-container {
    line-height: 29px;
  }
  .div-aws-container {
    line-height: 28px;
  }
  .div-expertise {
    font-size: var(--font-size-20);
  }
  .div19 {
    font-size: 37px;
    line-height: 60px;
  }
  .section4,
  .section4-wrapper {
    padding-bottom: 44px;
    box-sizing: border-box;
  }
  .section4 {
    padding-top: 44px;
  }
  .project-container {
    gap: 25px;
  }
  .div-hd,
  .ea-container,
  .h318,
  .m,
  .spread-js {
    font-size: var(--font-size-16);
    line-height: 26px;
  }
  .div-contact {
    font-size: var(--font-size-16);
  }
  .tel-070-5057-3222-fax-container {
    font-size: var(--font-size-16);
    line-height: 29px;
  }
  .footer-content {
    gap: var(--gap-15);
  }
  .h14 {
    font-size: 33px;
    line-height: 46px;
  }
  .adress {
    font-size: var(--font-size-16);
  }
  .info-adress,
  .infobizwizsystemcokr {
    font-size: var(--font-size-18);
    line-height: 28px;
  }
  .section5 {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .contact2 {
    font-size: var(--font-size-16);
  }
  .div-tel-070-5057-3222-fax-container {
    font-size: var(--font-size-16);
    line-height: 26px;
  }
}

/* === Expandable Card Gallery 반응형 === */
@media (max-width: 768px) {
  .gallery-container {
    height: 400px;
    flex-direction: column;
    gap: 5px;
  }
  
  .gallery-card {
    flex: 1;
    height: auto;
  }
  
  .gallery-container:hover .gallery-card {
    flex: 1;
  }
  
  .gallery-card:hover {
    flex: 1 !important;
    transform: none;
  }
  
  .card-label {
    transform: translateX(-50%) rotate(0deg);
    bottom: 50%;
    transform: translateX(-50%) translateY(50%);
  }
  
  .gallery-card:hover .card-label {
    transform: translateX(-50%) translateY(70%);
  }
  
  .card-description {
    font-size: 0.9rem;
  }
  
  .card-title {
    font-size: 1.4rem;
  }
}



/* === Scroll Reveal Animations (added by ChatGPT) === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms ease;
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger support */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/* div-h1 reveal 영역을 section3의 50%로 제한 */
.section3 .div-h1.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms ease;
}

.section3 .div-h1.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}


/* ===== [PATCH] SECTION2: 텍스트 중앙배치 + 좌측정렬 ===== */

/* 텍스트 레이어 자체를 화면 세로 가운데에 두고, 좌측 정렬 */
.section2 .title-parent {
  position: absolute;   /* sticky → absolute로 변경 */
  top: 200px;          /* section2 상단에서 200px 아래 (120px → 200px) */
  left: 150px;         /* 왼쪽에서 150px (100px → 150px, 카드에 더 가깝게) */
  width: 35%;          /* 카드 영역과 균형 맞춤 (40% → 35%) */
  height: auto;        /* 자동 높이 */
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 상단 정렬 */
  align-items: flex-start;
  /* padding 제거하고 top, left로 직접 위치 지정 */
  transition: none !important; /* transition 완전 제거 */
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .section2 .title-parent {
    top: 150px;
    left: 100px;
    width: 40%;
  }
}



/* 내부 텍스트는 좌측 정렬 고정 */
.section2 .div-title {
  align-items: flex-start !important;  /* 기존 center 무시 */
  text-align: left;
  width: 100%;
}

/* 제목과 본문 컬러/대비는 기존 스킴 유지 */
.section2 .div-title .h1 {
  color: var(--Text-Text1);
}

/* ===== [PATCH] SECTION2: 카드 스택 & 애니메이션 ===== */

.frame-parent2 {
  position: absolute; /* relative에서 absolute로 변경 */
  top: 0; /* section2 상단부터 시작 */
  right: 50px; /* 오른쪽에서 50px */
  width: 45%; /* 텍스트 영역과 균형 맞춤 */
  height: 100%; /* section2의 전체 높이와 같게 */
  padding: 200px 0; /* 상하 패딩 200px */
  overflow: visible; /* 카드가 보이도록 visible로 변경 */
  z-index: 3;
  display: block;
  box-sizing: border-box;
  /* 디버깅용 배경색 제거 */
}


/* 카드 공통: 겹치기 느낌을 위해 살짝 음영/전환 최적화 */
.section2 .frame-parent2 > section.stack-card {
  position: absolute !important; /* 특이도 높여서 relative 덮어쓰기 */
  will-change: transform, opacity, box-shadow, z-index;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transform-origin: center;
  transition: none !important; /* transition 완전 제거 - 즉시 반응 */
  cursor: pointer;
  border-radius: var(--br-30);
  /* 기본 상태: 카드가 보이도록 설정 */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  /* PC에서는 중앙정렬 제거 - 모바일에서만 적용 */
}


/* 공통 스택 카드 */
.stack-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 360px;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform-origin: center top;
  will-change: transform;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out, box-shadow 0.2s ease-out;
}


/* 접근성: 모션 최소화 선호 시 전환 축소 */
@media (prefers-reduced-motion: reduce) {
  .section2 .frame-parent2 > section {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Hover interaction for cards */
.card > .si-sm,
.card > .e-commerce,
.card > .it {
  transition: transform 400ms ease, box-shadow 400ms ease;
}

/* IT 컨설팅 카드 기본 상태 - 다른 카드들과 동일한 구조 */
.card > .it .it-wrapper {
  width: 100% !important; /* 강제로 카드와 동일한 너비 */
  height: 150px !important; /* 강제로 콘텐츠 영역에 맞게 높이 조정 */
  backdrop-filter: blur(10px);
  background-color: var(--color-gray-600);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-40) !important; /* 강제로 padding 고정 */
  position: absolute !important; /* 강제로 absolute 위치 */
  bottom: 0 !important; /* 강제로 하단 고정 */
  left: 0 !important; /* 강제로 좌측 고정 */
  right: 0 !important; /* 강제로 우측 고정 */
  transform: translateY(0) !important; /* 강제로 위치 고정 */
  transition: height 600ms ease, opacity 400ms ease;
  box-sizing: border-box; /* 박스 모델 통일 */
}
.card > .si-sm:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.card > .si-sm:hover .si-sm-wrapper {
  height: 100% !important; /* 강제로 카드 전체를 덮도록 확장 */
  opacity: 1 !important; /* 강제로 호버 시 보이게 */
  position: absolute !important; /* 강제로 absolute 위치 유지 */
  bottom: 0 !important; /* 강제로 하단 고정 유지 */
  left: 0 !important; /* 강제로 좌측 고정 유지 */
  right: 0 !important; /* 강제로 우측 고정 유지 */
  z-index: 2 !important; /* 강제로 z-index 유지 */
}

.card > .si-sm:hover .si-sm-wrapper * {
  opacity: 0;
}

/* IT 컨설팅 카드 호버 효과 - 다른 카드들과 동일 */
.card > .it:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

/* IT 컨설팅 카드 호버 wrapper - 다른 카드들과 동일 */
.card > .it:hover .it-wrapper {
  height: 100% !important; /* 강제로 카드 전체를 덮도록 확장 */
  opacity: 1 !important; /* 강제로 호버 시 보이게 */
  position: absolute !important; /* 강제로 absolute 위치 유지 */
  bottom: 0 !important; /* 강제로 하단 고정 유지 */
  left: 0 !important; /* 강제로 좌측 고정 유지 */
  right: 0 !important; /* 강제로 우측 고정 유지 */
  z-index: 2 !important; /* 강제로 z-index 유지 */
}

/* IT 컨설팅 카드 호버 텍스트 숨김 - 다른 카드들과 동일 */
.card > .it:hover .it-wrapper * {
  opacity: 0;
}

/* IT 컨설팅 카드 호버 텍스트 - 다른 카드들과 동일한 방식 */
.card > .it .it-wrapper::after {
  content: '기업의 디지털 전환과 IT 전략 수립을 위한 전문 컨설팅 서비스를 제공합니다';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  padding: 0 15px;
  color: var(--color-white);
  opacity: 0; /* 기본적으로 숨김 (다른 카드들과 동일) */
  transition: opacity 400ms ease;
  z-index: 3;
  width: 100%;
  box-sizing: border-box;
}

/* IT 컨설팅 카드 호버 텍스트 표시 - 다른 카드들과 동일 */
.card > .it:hover .it-wrapper::after {
  opacity: 1;
}

.card > .si-sm:hover .si-sm-wrapper::after {
  opacity: 1;
}

.card > .e-commerce:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.card > .e-commerce:hover .e-commerce-wrapper {
  height: 100% !important; /* 강제로 카드 전체를 덮도록 확장 */
  opacity: 1 !important; /* 강제로 호버 시 보이게 */
  position: absolute !important; /* 강제로 absolute 위치 유지 */
  bottom: 0 !important; /* 강제로 하단 고정 유지 */
  left: 0 !important; /* 강제로 좌측 고정 유지 */
  right: 0 !important; /* 강제로 우측 고정 유지 */
  z-index: 2 !important; /* 강제로 z-index 유지 */
}

.card > .e-commerce:hover .e-commerce-wrapper * {
  opacity: 0;
}

.card > .e-commerce:hover .e-commerce-wrapper::after {
  opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
  .reveal.in-view { opacity: 1; transform: none; }
  .card > .si-sm:hover,
  .card > .e-commerce:hover,
  .card > .it:hover { transform: none; box-shadow: none; }
}

/* 터치 디바이스에서도 호버 효과 작동 (클릭으로 활성화) */
@media (hover: none) {
  .card > .si-sm:hover,
  .card > .e-commerce:hover,
  .card > .it:hover {
    transform: translateY(-5px) scale(1.02); /* 모바일에서 약간의 효과 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }
  
  .card > .si-sm:hover .si-sm-wrapper,
  .card > .e-commerce:hover .e-commerce-wrapper,
  .card > .it:hover .it-wrapper {
    height: 100% !important; /* 카드 전체를 덮도록 확장 */
    opacity: 1 !important; /* 터치 디바이스에서도 오버레이 표시 */
    position: absolute !important; /* 강제로 absolute 위치 유지 */
    bottom: 0 !important; /* 강제로 하단 고정 유지 */
    left: 0 !important; /* 강제로 좌측 고정 유지 */
    right: 0 !important; /* 강제로 우측 고정 유지 */
    z-index: 2 !important; /* 강제로 z-index 유지 */
  }
  
  .card > .si-sm:hover .si-sm-wrapper *,
  .card > .e-commerce:hover .e-commerce-wrapper *,
  .card > .it:hover .it-wrapper * {
    opacity: 0; /* 기존 텍스트 숨김 */
  }
  
  .card > .si-sm:hover .si-sm-wrapper::after,
  .card > .e-commerce:hover .e-commerce-wrapper::after,
  .card > .it:hover .it-wrapper::after {
    opacity: 1; /* 호버 텍스트 표시 */
  }
}

/* 모바일에서도 호버 효과 활성화 */
@media (max-width: 768px) {
  .si-sm-wrapper,
  .e-commerce-wrapper,
  .card > .it .it-wrapper {
    opacity: 1 !important; /* 강제로 모바일에서도 초기 상태 표시 */
    height: 150px !important; /* 강제로 초기 높이 유지 */
    position: absolute !important; /* 강제로 absolute 위치 */
    bottom: 0 !important; /* 강제로 하단 고정 */
    left: 0 !important; /* 강제로 좌측 고정 */
    right: 0 !important; /* 강제로 우측 고정 */
    z-index: 2 !important; /* 강제로 z-index 고정 */
  }
  
  
}

/* === Section1 완전 반응형 시스템 === */

/* PC (1200px 이상) */
@media (min-width: 1201px) {
  .section1 {
    padding: 120px 80px; /* PC에서 좌우 패딩 증가 */
    gap: 150px; /* PC에서 과거 히스토리 수준의 넓은 간격 */
  }
  
  .title-container {
    gap: 40px; /* PC에서 더 큰 간격 */
    align-items: flex-start; /* 좌측 정렬 유지 */
    text-align: left; /* 좌측 정렬 유지 */
    margin-left: 150px; /* PC에서 더 오른쪽으로 이동 */
  }
  
  .bizwiz-system {
    font-size: 62px; /* 과거 히스토리 크기 */
    line-height: 1.6; /* 과거 히스토리 라인 높이 */
  }
  
  .div-p {
    font-size: 62px; /* 원래 크기 유지 */
    line-height: 1.6; /* 원래 라인 높이 유지 */
  }
  
  .div-about-us {
    font-size: 24px; /* 과거 히스토리 크기 */
  }
  
  .card-container {
    gap: 80px; /* PC에서 더 큰 간격 */
    max-width: 1400px; /* PC에서 card-container width 더 넓히기 */
    width: 100%;
    margin: 0 auto; /* 중앙 정렬 */
  }
  
  .card {
    display: flex; /* flexbox로 변경 */
    flex-direction: row; /* 한 라인 배치 */
    gap: 30px; /* PC에서 카드 간 간격 */
    width: 100%;
    max-width: 1400px; /* card-container와 동일한 최대 너비 */
    justify-content: center; /* 중앙 정렬 */
    margin: 0 auto; /* 중앙 정렬 */
  }
  
  /* PC에서 카드 크기 과거 히스토리에 맞게 조정 */
  .si-sm, .e-commerce, .it {
    width: 440px; /* 과거 히스토리 크기 */
    height: 500px; /* 과거 히스토리 크기 */
    padding: 350px 0 0; /* 콘텐츠 영역 확대 */
  }
  
  .div-section {
    gap: 60px; /* PC에서 4개 카드 간 적절한 간격 */
    flex-wrap: nowrap; /* 1라인 강제 */
    justify-content: center; /* 중앙 정렬 */
  }
  
  .frame-group {
    flex: 0 0 auto; /* 고정 크기로 변경 */
    gap: 15px; /* 간격 축소 */
    width: 250px; /* PC에서 고정 너비로 2라인 텍스트 지원 */
    justify-content: center; /* 중앙정렬 */
  }
  
  .div7, .div8 {
    font-size: clamp(3rem, 4vw, 4.6rem); /* PC에서 숫자 크기 1px 증가 */
  }
  
  .p {
    font-size: clamp(1rem, 1.8vw, 1.1rem); /* PC에서 문구 크기 2px 감소 */
  }
  
  .it-container,
  .div9 {
    font-size: clamp(1rem, 1.8vw, 1.1rem) !important; /* .p와 동일한 크기로 강제 통일 */
    line-height: 1.6;
  }
  
  .span {
    font-size: clamp(1.2rem, 2vw, 1.3rem); /* PC에서 "년" 크기도 2px 감소 */
  }
  
  .div-frame-parent {
    min-width: 0; /* div-section 안에 맞춤 */
    gap: 20px;
  }
}

/* 태블릿 (768px - 1200px) */
@media (max-width: 1200px) and (min-width: 769px) {
  .section1 {
    padding: 80px 50px; /* 태블릿에서도 좌우 패딩 증가 */
    gap: 60px;
  }
  
  .title-container {
    gap: 25px;
    align-items: flex-start; /* 좌측 정렬 유지 */
    text-align: left; /* 좌측 정렬 유지 */
    margin-left: 80px; /* 태블릿에서 적절한 오른쪽 이동 */
  }
  
  .bizwiz-system {
    font-size: clamp(2.5rem, 4vw, 3rem);
    line-height: 1.3;
  }
  
  .div-p {
    font-size: 62px; /* 원래 크기 유지 */
    line-height: 1.6; /* 원래 라인 높이 유지 */
  }
  
  .card-container {
    gap: 50px;
    max-width: 100%; /* card와 동일한 최대 너비 */
  }
  
  .card {
    display: flex; /* flexbox로 변경 */
    flex-direction: row; /* 한 라인 배치 */
    gap: 20px; /* 태블릿에서 카드 간 간격 */
    width: 100%;
    max-width: 100%; /* card-container와 동일한 최대 너비 */
    justify-content: center; /* 중앙 정렬 */
    flex-wrap: nowrap; /* 1라인 강제 */
  }
  
  /* 태블릿에서 카드 크기 조정 */
  .si-sm, .e-commerce, .it {
    width: 280px; /* 태블릿에서 약간 작게 */
    height: 350px; /* 태블릿에서 약간 작게 */
    padding: 200px 0 0; /* 태블릿에 맞는 패딩 조정 */
  }
  
  /* 태블릿에서 wrapper 크기 조정 */
  .si-sm-wrapper, .e-commerce-wrapper, .it-wrapper {
    width: 100% !important; /* 강제로 카드와 동일한 너비 */
    height: 150px !important; /* 강제로 태블릿에 맞는 높이 */
    position: absolute !important; /* 강제로 absolute 위치 */
    bottom: 0 !important; /* 강제로 하단 고정 */
    left: 0 !important; /* 강제로 좌측 고정 */
    right: 0 !important; /* 강제로 우측 고정 */
    z-index: 2 !important; /* 강제로 z-index 고정 */
  }
  
  .div-section {
    gap: 25px; /* 태블릿에서 간격 조정 */
    flex-wrap: wrap; /* 2열 레이아웃 허용 */
    justify-content: center; /* 중앙 정렬 */
    align-items: flex-start; /* 상단 정렬 */
  }
  
  .frame-group {
    flex: 0 0 calc(50% - 12.5px); /* 2열 레이아웃을 위한 너비 계산 */
    gap: 12px; /* 간격 축소 */
    width: auto; /* 너비 자동 조정 */
    justify-content: center; /* 중앙정렬 */
    margin-bottom: 20px; /* 세로 간격 추가 */
  }
  
  .div7, .div8 {
    font-size: clamp(2rem, 3vw, 2.8rem); /* 태블릿에서 더 작은 숫자 크기 */
  }
  
  .p {
    font-size: clamp(0.8rem, 1.2vw, 1rem); /* 태블릿에서 더 작은 텍스트 크기 */
  }
  
  .it-container,
  .div9 {
    font-size: clamp(0.8rem, 1.2vw, 1rem) !important; /* .p와 동일한 크기로 강제 통일 */
    line-height: 1.6;
  }
  
  .div-frame-parent {
    min-width: 0; /* div-section 안에 맞춤 */
    gap: 15px;
  }
}

/* 모바일 (480px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
  .section1 {
    padding: 60px 30px; /* 모바일에서도 좌우 패딩 증가 */
    gap: 40px;
  }
  
  .title-container {
    gap: 20px;
    align-items: flex-start; /* 좌측 정렬 유지 */
    text-align: left; /* 좌측 정렬 유지 */
    margin-left: 50px; /* 모바일에서 적절한 오른쪽 이동 */
  }
  
  .bizwiz-system {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    line-height: 1.4;
  }
  
  .div-p {
    font-size: 52px; /* 원래 크기 유지 */
    line-height: 1.4; /* 원래 라인 높이 유지 */
  }
  
  .card-container {
    gap: 40px;
    max-width: 100%; /* card와 동일한 최대 너비 */
  }
  
  .card {
    display: flex; /* flexbox로 변경 */
    flex-direction: column; /* 세로 배치 */
    gap: 20px; /* 모바일에서 카드 간 간격 조정 */
    width: 100%;
    max-width: 100%; /* card-container와 동일한 최대 너비 */
    align-items: center; /* 중앙 정렬 */
  }
  
  /* 모바일에서 카드 크기 조정 */
  .si-sm, .e-commerce, .it {
    width: 90%; /* 모바일에서 화면 너비의 90% */
    max-width: 320px; /* 최대 크기 제한 */
    height: 300px; /* 모바일에서 더 작게 */
    padding: 150px 0 0; /* 모바일에 맞는 패딩 조정 */
  }
  
  /* 모바일에서 wrapper 크기 조정 */
  .si-sm-wrapper, .e-commerce-wrapper, .it-wrapper {
    width: 100% !important; /* 강제로 카드와 동일한 너비 */
    height: 150px !important; /* 강제로 모바일에 맞는 높이 */
    position: absolute !important; /* 강제로 absolute 위치 */
    bottom: 0 !important; /* 강제로 하단 고정 */
    left: 0 !important; /* 강제로 좌측 고정 */
    right: 0 !important; /* 강제로 우측 고정 */
    z-index: 2 !important; /* 강제로 z-index 고정 */
  }
  
  .div-section {
    gap: 30px; /* 세로 간격 증가 */
    flex-wrap: wrap; /* 2열 레이아웃 허용 */
    justify-content: center; /* 중앙 정렬 */
    align-items: flex-start; /* 상단 정렬 */
  }
  
  .frame-group {
    flex: 0 0 calc(50% - 15px); /* 2열 레이아웃을 위한 너비 계산 */
    gap: 10px; /* 간격 축소 */
    width: auto; /* 너비 자동 조정 */
    justify-content: center; /* 중앙정렬 */
    margin-bottom: 20px; /* 세로 간격 추가 */
  }
  
  .div7, .div8 {
    font-size: clamp(1.5rem, 2.2vw, 2rem); /* 모바일에서 더 작은 숫자 크기 */
  }
  
  .p {
    font-size: clamp(0.7rem, 1vw, 0.8rem); /* 모바일에서 더 작은 텍스트 크기 */
  }
  
  .it-container,
  .div9 {
    font-size: clamp(0.7rem, 1vw, 0.8rem) !important; /* .p와 동일한 크기로 강제 통일 */
    line-height: 1.6;
  }
  
  .div-frame-parent {
    min-width: 0; /* div-section 안에 맞춤 */
    gap: 12px;
  }
}

/* 소형 모바일 (480px 이하) */
@media (max-width: 480px) {
  .section1 {
    padding: 30px 15px; /* 초소형에서도 좌우 패딩 약간 증가 */
    gap: 25px; /* 초소형에서 더 작은 간격 */
  }
  
  .title-container {
    gap: 12px; /* 초소형에서 더 작은 간격 */
    align-items: flex-start; /* 좌측 정렬 유지 */
    text-align: left; /* 좌측 정렬 유지 */
    margin-left: 30px; /* 소형 모바일에서 적절한 오른쪽 이동 */
  }
  
  
  
  .card-container {
    gap: 30px;
    max-width: 100%; /* card와 동일한 최대 너비 */
  }
  
  .card {
    display: flex; /* flexbox로 변경 */
    flex-direction: column; /* 세로 배치 */
    gap: 15px; /* 소형 모바일에서 카드 간 간격 조정 */
    width: 100%;
    max-width: 100%; /* card-container와 동일한 최대 너비 */
    align-items: center; /* 중앙 정렬 */
  }
  
  /* 초소형 모바일에서 카드 크기 조정 */
  .si-sm, .e-commerce, .it {
    width: 95%; /* 초소형에서 화면 너비의 95% */
    max-width: 280px; /* 최대 크기 제한 */
    height: 250px; /* 초소형에서 더 작게 */
    padding: 100px 0 0; /* 초소형에 맞는 패딩 조정 */
  }
  
  /* 초소형 모바일에서 wrapper 크기 조정 */
  .si-sm-wrapper, .e-commerce-wrapper, .it-wrapper {
    width: 100% !important; /* 강제로 카드와 동일한 너비 */
    height: 150px !important; /* 강제로 초소형에 맞는 높이 */
    position: absolute !important; /* 강제로 absolute 위치 */
    bottom: 0 !important; /* 강제로 하단 고정 */
    left: 0 !important; /* 강제로 좌측 고정 */
    right: 0 !important; /* 강제로 우측 고정 */
    z-index: 2 !important; /* 강제로 z-index 고정 */
  }
  
  .div-section {
    gap: 20px; /* 초소형에서 세로 간격 */
    flex-wrap: wrap; /* 2열 레이아웃 허용 */
    justify-content: center; /* 중앙 정렬 */
    align-items: flex-start; /* 상단 정렬 */
  }
  
  .frame-group {
    flex: 0 0 calc(50% - 10px); /* 2열 레이아웃을 위한 너비 계산 */
    gap: 6px; /* 초소형에서 더 작은 간격 */
    width: auto; /* 너비 자동 조정 */
    justify-content: center; /* 중앙정렬 */
    margin-bottom: 15px; /* 세로 간격 추가 */
  }
  
  .div7, .div8 {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem); /* 소형 모바일에서 더 작은 숫자 크기 */
  }
  
  .p {
    font-size: clamp(0.5rem, 0.8vw, 0.6rem); /* 소형 모바일에서 더 작은 텍스트 크기 */
  }
  
  .it-container,
  .div9 {
    font-size: clamp(0.5rem, 0.8vw, 0.6rem) !important; /* .p와 동일한 크기로 강제 통일 */
    line-height: 1.5; /* 라인 높이도 조정 */
  }
  
  .div-frame-parent {
    min-width: 0; /* div-section 안에 맞춤 */
    gap: 10px;
  }
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .stack-card {
    width: 600px;
    height: 320px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .stack-card {
    width: clamp(300px, 90vw, 500px); /* 완전 반응형: 최소 300px, 최대 500px, 기본 90vw */
    height: clamp(180px, 20vh, 240px); /* 높이 줄임 (200px → 180px) */
    left: 0; /* 좌측 정렬 */
    right: 0; /* 우측 정렬 */
    margin: 0 auto; /* 중앙 정렬 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* 카드 내부 패딩 조정 및 아이콘 잘림 방지 */
  .stack-card {
    padding: clamp(15px, 3vw, 30px) clamp(15px, 3vw, 30px) clamp(30px, 6vw, 60px) clamp(25px, 5vw, 50px);
    overflow: visible !important; /* 아이콘이 잘리지 않도록 */
  }
  
  /* 아이콘을 오른쪽 상단에 배치 (왼쪽과 아래로 더 이동) */
  .shape1-1-icon,
  .shape4-1-icon,
  .shape3-1-icon {
    position: absolute !important;
    top: clamp(25px, 4vw, 40px) !important; /* 아래로 더 이동 */
    right: clamp(25px, 4vw, 40px) !important; /* 왼쪽으로 더 이동 */
    left: auto !important;
    width: clamp(50px, 10vw, 80px) !important; /* 크기 유지 */
    height: clamp(45px, 9vh, 70px) !important; /* 크기 유지 */
    margin: 0 !important;
    z-index: 10 !important;
  }
  
  /* 텍스트를 중앙 아래에 배치 (높이 제한) */
  .solution-details-parent,
  .shape4-1-parent,
  .frame-parent5,
  .frame-parent7 {
    width: 100% !important;
    height: clamp(100px, 15vh, 140px) !important; /* solution-details-parent와 동일한 높이로 강제 설정 */
    max-height: 60% !important; /* 부모 영역의 60%로 제한 */
    flex-direction: column !important;
    align-items: flex-start !important; /* 좌측 정렬 */
    justify-content: flex-end !important;
    gap: clamp(8px, 1.5vw, 15px) !important;
    padding: 0 !important;
    margin-top: auto !important;
    overflow: visible !important; /* 아이콘이 잘리지 않도록 visible로 변경 */
  }
  
  /* 1,3,4번째 카드 제목을 각자의 부모 영역 안에서 왼쪽 하단에 위치 */
  .ai {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(16px, 4vw, 24px) !important;
    line-height: 1.4 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  .div-h2 {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(16px, 4vw, 24px) !important;
    line-height: 1.4 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  .h22 {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(16px, 4vw, 24px) !important;
    line-height: 1.4 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  /* 2번째 카드 제목을 부모 영역 안에서 왼쪽 하단에 위치 */
  .shape4-1-parent .aws {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(16px, 4vw, 24px) !important;
    line-height: 1.4 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  /* 텍스트 컨테이너들 (좌측 정렬) */
  .solution-details,
  .wrapper3,
  .wrapper5 {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important; /* 좌측 정렬 */
  }
  
  /* 텍스트 영역들 (좌측 정렬) */
  .data-insights,
  .aws-wrapper,
  .wrapper4 {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important; /* 좌측 정렬 */
  }
  
  /* 텍스트 내용들 (좌측 정렬) */
  .div13,
  .aws-container,
  .div15 {
    text-align: left !important; /* 좌측 정렬 */
    line-height: 1.3 !important;
  }
}

@media (max-width: 480px) {
  .stack-card {
    width: clamp(280px, 95vw, 400px); /* 완전 반응형: 최소 280px, 최대 400px, 기본 95vw */
    height: clamp(160px, 18vh, 220px); /* 높이 더 줄임 (180px → 160px) */
    left: 0; /* 좌측 정렬 */
    right: 0; /* 우측 정렬 */
    margin: 0 auto; /* 중앙 정렬 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* 카드 내부 패딩 조정 및 아이콘 잘림 방지 (소형 모바일) */
  .stack-card {
    padding: clamp(10px, 2.5vw, 25px) clamp(10px, 2.5vw, 25px) clamp(20px, 5vw, 50px) clamp(15px, 4vw, 40px);
    overflow: visible !important; /* 아이콘이 잘리지 않도록 */
  }
  
  /* 아이콘을 오른쪽 상단에 배치 (소형 모바일 - 왼쪽과 아래로 더 이동) */
  .shape1-1-icon,
  .shape4-1-icon,
  .shape3-1-icon {
    position: absolute !important;
    top: clamp(15px, 3vw, 25px) !important; /* 아래로 더 이동 */
    right: clamp(15px, 3vw, 25px) !important; /* 왼쪽으로 더 이동 */
    left: auto !important;
    width: clamp(40px, 8vw, 65px) !important; /* 크기 유지 */
    height: clamp(35px, 7vh, 55px) !important; /* 크기 유지 */
    margin: 0 !important;
    z-index: 10 !important;
  }
  
  /* 텍스트를 중앙 아래에 배치 (소형 모바일 - 높이 제한) */
  .solution-details-parent,
  .shape4-1-parent,
  .frame-parent5,
  .frame-parent7 {
    width: 100% !important;
    height: clamp(80px, 12vh, 120px) !important; /* solution-details-parent와 동일한 높이로 강제 설정 */
    max-height: 65% !important; /* 부모 영역의 65%로 제한 */
    flex-direction: column !important;
    align-items: flex-start !important; /* 좌측 정렬 */
    justify-content: flex-end !important;
    gap: clamp(6px, 1.2vw, 12px) !important;
    padding: 0 !important;
    margin-top: auto !important;
    overflow: visible !important; /* 아이콘이 잘리지 않도록 visible로 변경 */
  }
  
  /* 1,3,4번째 카드 제목을 각자의 부모 영역 안에서 왼쪽 하단에 위치 (소형 모바일) */
  .ai {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(14px, 3.5vw, 20px) !important;
    line-height: 1.3 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  .div-h2 {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(14px, 3.5vw, 20px) !important;
    line-height: 1.3 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  .h22 {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(14px, 3.5vw, 20px) !important;
    line-height: 1.3 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  /* 2번째 카드 제목을 부모 영역 안에서 왼쪽 하단에 위치 (소형 모바일) */
  .shape4-1-parent .aws {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(14px, 3.5vw, 20px) !important;
    line-height: 1.3 !important;
    z-index: 5 !important;
    align-self: flex-end !important; /* 부모 컨테이너의 하단에 위치 */
  }
  
  /* 텍스트 컨테이너들 (소형 모바일 - 좌측 정렬) */
  .solution-details,
  .wrapper3,
  .wrapper5 {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important; /* 좌측 정렬 */
  }
  
  /* 텍스트 영역들 (소형 모바일 - 좌측 정렬) */
  .data-insights,
  .aws-wrapper,
  .wrapper4 {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important; /* 좌측 정렬 */
  }
  
  /* 텍스트 내용들 (소형 모바일 - 좌측 정렬) */
  .div13,
  .aws-container,
  .div15 {
    text-align: left !important; /* 좌측 정렬 */
    line-height: 1.2 !important;
  }
}


/* 화면 크기에 따른 title-parent 숨김 처리 */
@media (max-width: 1200px) {
  .section2 .title-parent {
    display: none; /* 작은 화면에서는 텍스트 숨김 */
  }
  .section2 .frame-parent2 {
    width: 80%; /* 카드 영역을 더 넓게 */
    right: 10%; /* 중앙 정렬 */
  }
}

@media (max-height: 800px) {
  .section2 .title-parent {
    display: none; /* 화면 높이가 작으면 텍스트 숨김 */
  }
  .section2 .frame-parent2 {
    width: 80%; /* 카드 영역을 더 넓게 */
    right: 10%; /* 중앙 정렬 */
  }
}


/* 모바일 반응형 */
@media (max-width: 768px) {
  .section2 .title-parent {
    top: 100px;
    left: 50px;
    width: 80%;
  }
  
  /* 모바일에서 카드스택 영역을 full width로 설정 */
  .section2 .frame-parent2,
  #cardStack {
    width: 100%; /* full width로 설정 (90% → 100%) */
    left: 0; /* 좌측 정렬 */
    right: 0; /* 우측 정렬 */
    transform: none; /* transform 제거 */
    padding: 40px 0; /* 패딩 줄임 (기존 200px → 40px) */
  }
}

@media (max-width: 480px) {
  .section2 .title-parent {
    top: 80px;
    left: 20px;
    width: 90%;
  }
  
  /* 소형 모바일에서 카드스택 영역을 full width로 설정 */
  .section2 .frame-parent2,
  #cardStack {
    width: 100%; /* full width로 설정 (95% → 100%) */
    left: 0; /* 좌측 정렬 */
    right: 0; /* 우측 정렬 */
    transform: none; /* transform 제거 */
    padding: 30px 0; /* 패딩 더 줄임 (기존 60px → 30px) */
  }
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .section2 .frame-parent2 {
    right: 30px;
    width: 50%;
    padding: 150px 0;
  }
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .section2 .frame-parent2 > section.stack-card {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .section2 .frame-parent2 > section.stack-card {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .section2 .frame-parent2 > section.stack-card {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-radius: 15px;
  }
}


/* 태블릿 반응형 */
@media (max-width: 1024px) {
  /* .section2 .title-parent {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 35%;
    height: auto;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    transition: none !important;
  }
  .ai {
    width: 280px;
    font-size: 30px;
  }
  .section2 .frame-parent2 > section.stack-card {
    width: 100%;
  } */
  .footer {
    gap: 40px;
  }
  .adress-legal {
    top: 100px;
    gap: 0px;
  }
  .branding-action {
    top: 20px;
  }
  .wrapper-dot{
    left: 5%;
  }
  .solution-details {
    padding: 0;
  }
  .title-parent .h1 .div-p {
    font-size: 22px;
  }
  .title-parent .h1 .div-bizwiz-system {
    font-size: 50px;
    line-height: 60px;
  }
  .contact-wrapper {
    gap: 40px
  }
  .contact-details .tel {
    gap: 4px;
  }
  .div-about-us {
    font-size: 20px;
  } 
  .contact-info .div-p {
    font-size: 42px;
  } 
  .contact-wrapper .div-location {
    gap: 0;
  }
  .copyright-bizwiz-all-rights-wrapper {
    left: 0;
    bottom: 0;
  }
  .h13 {
    font-size: 50px;
  }
  .tab-menu {
    padding: var(--padding-10) var(--padding-15);
  }
  .project-container {
    width: 100%;
    gap: 50px;
  }
  .project-container .project-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .p {
    font-size: 14px;
    line-height: 140%;
  }
  .list {
    gap: 24px;
    justify-content: space-between; 
  }
  .list > section {
    justify-content: space-between; 
    width: 420px;
    flex: 0 1 47%; 
  }
  .rectangle-parent {
    height: 520px;
    gap: 12px;
  }
  .rectangle-parent .div-hd {
    font-size: 18px;
  }
  .spread-js .p {
    font-size: 18px;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .section {
    min-height: 80vh;
    height: 80vh;
  }
  /* .visualtext-wrapper {
    margin-top: 100px;
  } */
  .visualtext.reveal.in-view {
    position: absolute;
    bottom: 0 !important;
  }
  .banner-child, .banner-item {
    width: 160px;
    height: 289px;
    position: absolute;
    margin: 0 !important;
    background: linear-gradient(270deg, rgba(240, 248, 255, 0), var(--color-aliceblue-100) 78.85%);
    z-index: 2;
  }
  .section1 .div-p {
    font-size: 38px;
  }
  /* .card {
    flex-direction: row;
  }
  .card > section{
    flex: 1 !important;
  } */
  .banner-item {
    right: 0px !important;
    bottom: 0;
    transform: none;
    transform-origin: 0 0;
    background: linear-gradient(90deg, rgba(240, 248, 255, 0), var(--color-aliceblue-100) 78.85%);
  }
  .bizwiz-system {
    font-size: 20px;
    line-height: 30px;
  }
  /* 호버 효과 */
  .gallery-container {
    min-height: 450px;
  }
  .gallery-container > .gallery-card {
    height: 120px;
  }
  .gallery-card:hover {
    flex: 1.8;
  }
  .gallery-card:not(.active) .card-image img {
    filter: grayscale(100%) !important;
  }
  .gallery-card:not(.active) .card-content {
    position: absolute !important;
    bottom: 5px !important;
    left: 20px !important;
    top: 35%;
    z-index: 2 !important;
    color: white !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    transition: all 0.8s 
cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    text-align: left !important;
    /* height: 2.5em !important; */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .gallery-card:hover > .card-image img {
    filter: grayscale(100%);
    transform: scale(1);
    object-position: center center;
    filter: brightness(1.2) contrast(1) saturate(1.4);
  }
  .gallery-card.active > .card-content {
    transform: translateY(-30px);
    height: 4.5em;
    padding-right: 10px;
  }
  .gallery-card.active > .card-content > .card-description {
    opacity: 0.9;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.3s;
    font-size: 12px;
  }
  .gallery-card.active {
    flex: 2.8 !important;
  }
  .gallery-card.active .card-image img {
    filter: none !important;
  }
  .gallery-card:not(.acitve) .card-content .card-description {
    display: none;
  }
  .gallery-card.active .card-content .card-description {
    display: block;
  }
  .p {
    font-size: 13px;
    line-height: 130%;
  }
  .list {
    justify-content: space-between; 
  }
  .list > section {
    justify-content: space-between; 
    flex: 0 1 350px; 
    /* min-width: 350px; */
    /* width: 300px; */
  }
  .rectangle-parent {
    height: 460px;
  }
  .rectangle-parent .div-hd {
    font-size: 15px;
    line-height: 120%;
  }
  .div-about-us {
    font-size: 18px;
  }
  .contact-info {
    gap: 14px;
  }
  .contact-info .div-p {
    font-size: 36px;
  }
  .contact-wrapper {
    gap: 14px;
  }
  .div-location .info-adress {
    font-size: 13px;
  }
  .adress {
    margin-bottom: 4px;
  }
  .contact-details .tel {
    gap: 4px;
  }
  .contact-details .tel .info-adress {
    font-size: 13px;
  }
  .contact-details .tel .infobizwizsystemcokr {
    font-size: 13px;
  }
  /* .section5 {
    display: none;
  } */
  .pt7-1-icon2 {
    object-fit: fill;
    top: -420px;
  }
  .copyright-bizwiz-all-rights-wrapper {
    top: 140px;
    bottom: 10px !important;
    font-size: 10px;
  }
  .adress-legal-parent {
    height: auto;
    min-height: 170px;
  }
  .branding-action {
    top: 10px;
  }
  .branding-action .logo-white-1-icon {
    width: 120px;
  }
  .btn-footer {
    padding: 4px 10px;
  }
  .btn-footer .div-b {
    font-size: 12px;
  }
  .adress-legal {
    top: 30%;
    gap: 0;
  }
  .adress-legal {
    font-size: 12px;
  }

  .map-point .logo-icon {
    height: 40%;
    width: 40%;
    object-fit: contain;
    top: 10%;
    left: 20%;
  }
  .dot-icon {
    width: 80%;
    height: 80%;
    left: 50%
  }
}

@media (max-width: 480px) {
  .section {
    gap: 140px;
    height: 70vh;
    min-height: 40vh;
  }
  .header {
    height: 60px;
    padding-left: 20px
  }
  .inner {
    padding-left: 20px;
  }
  .logo-white-1-icon {
    width: 88px;
    margin-top: 10px;
  }
  .title-container {
    margin: 0px;
  }
  .bizwiz-system .div-bizwiz-system {
    text-align: center;
  }
  /* .si-sm {
    height: 200px !important;
  }
  .e-commerce {
    height: 200px !important;
  }
  .it {
    height: 200px !important;
  } */
  .section2 .title-parent {
    width: 100%;
    left: 20px;
  }
  .gallery-container {
    height: auto;
    min-height: 460px;
    flex-direction: column;
    gap: 5px;
  }
  .title-parent .h1 .div-p {
    font-size: 16px;
  }
  .title-parent .h1 .div-bizwiz-system {
    font-size: 20px;
    line-height: 30px;
  }
  /* .frame-parent2 {
    left: 10%;
    top: 10%;
    width: 80%;
  }
  .stack-card {
    height: 220px;
  } */
  .div-frame-parent {
    min-width: 0; /* div-section 안에 맞춤 */
    gap: 10px;
  }
  .h13 {
    font-size: 32px;
  }
  .div-p {
    margin: 0;
    font-weight: 600;
    font-size: 32px; /* 원래 크기로 복원 */
    line-height: 1.2; /* 원래 라인 높이로 복원 */
  }
  .title4 {
    min-width: 0;
  }
  .tab-menu {
    width: 100%;
    padding: var(--padding-5) var(--padding-10);
  }
  .tab-menu input[type="radio"]:checked + label {
    width: 90px;
    font-size: 16px;
    padding: 10px 10px;
  }
  .tab:hover, .div-tab:hover {
    transform: translateY(0px);
  }
  .project-container {
    width: 100%;
    gap: 50px;
  }
  .tab-menu .tab {
    width: 90px;
    font-size: 16px;
  }
  .project-container .project-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .p {
    font-size: 13px;
    line-height: 130%;
  }
  .list {
    justify-content: space-between; 
  }
  .list > section {
    /* min-width: 260px; */
    width: 300px;
    flex: 0 1 100%; 
  }
  .rectangle-parent > div:first-child {
    flex: 1;
  }
  
  .rectangle-parent {
    height: 420px;
    gap: 14px;
  }
  .rectangle-parent .div-hd {
    font-size: 14px;
    line-height: 120%;
  }
  .rectangle-img {
    position: relative;
    width: 100%;
    height: 80%;
  }
  
  .rectangle-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -10%);
  }
  .div-about-us {
    font-size: 14px;
  }
  .contact-info {
    gap: 14px;
  }
  .contact-info .div-p {
    font-size: 22px;
  }
  .contact-wrapper {
    gap: 14px;
  }
  .div-location .info-adress {
    font-size: 13px;
  }
  .footer {
    gap: 20px;
    padding: 28px 20px 21px;
    border-radius: 40px 40px 0px 0px;
  }
  .location-wrapper {
    padding: 0;
  }
  .adress-legal-parent  {
    min-height: 180px;
  }
  .adress {
    margin-bottom: 0px;
    font-size: 14px;
  }
  .info-adress {
    line-height: 14px;
    font-size: 10px !important;
  }
  .contact-details .tel {
    gap: 0;
  }
  .contact-details .tel .info-adress {
    font-size: 13px;
  }
  .contact-details .tel .infobizwizsystemcokr {
    font-size: 13px;
  }
  /* .section5 {
    display: none;
  } */
  .pt7-1-icon2 {
    object-fit: fill;
    top: -420px;
  }
  /* .adress-legal-parent {
    height: 220px;
  } */
  .copyright-bizwiz-all-rights-wrapper {
    top: 140px;
  }
  .branding-action {
    top: 10px;
  }
  .branding-action .logo-white-1-icon {
    width: 120px;
  }
  .btn-footer {
    padding: 4px 10px;
  }
  .btn-footer .div-b {
    font-size: 12px;
  }
  .adress-legal {
    top: 60px;
    gap: 0;
  }
  .adress-legal {
    font-size: 12px;
  }
  /* .legal-container {
    display: none;
  } */
  .map-point .logo-icon {
    height: 40%;
    width: 40%;
    object-fit: contain;
    top: 10%;
    left: 10%;
  }
  .dot-icon {
    width: 80%;
    height: 80%;
  }
}