/* 네비게이션 바 스타일 */
.navbar {
    background-color: #333;
    padding: 15px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
  }
  
  .navbar-nav {
    list-style-type: none;
    display: flex;
    justify-content: center;
  }
  
  .nav-item {
    position: relative;
    margin: 0 15px;
  }
  
  .nav-link {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
    font-size: 15px;
  }
  
  .nav-link:hover {
    background-color: #575757;
    border-radius: 5px;
  }
  
  /* 메인 섹션 이미지와 텍스트 나란히 배치 */
  .main-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin-top: 50px !important;
  }
  
  .main-section img {
    width: 30%;
    margin-right: 20px;
  }
  
  .main-section .text-container {
    width: 50%;
    padding-left: 100px;
    white-space: pre-wrap; /* 띄어쓰기를 유지 */
  }
  
  div.main-section div.text-container p {
    font-size: 80px;
    line-height: 3;
  }
  
  .left-image {
    width: 50%;
    margin-right: 20px;
  }
  
  .right-text {
    width: 50%;
    padding-left: 100px;
    white-space: pre-wrap; /* 띄어쓰기를 유지 */
  }
  
  .main-section::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* 공통 스타일 */
  .services {
      margin-bottom: 30px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: none; /* 테두리 제거 */
      box-shadow: none; /* 박스 그림자 제거 */
      background-color: transparent; /* 배경색 제거 */
  }
  
  /* 하위 및 상위 서비스 이미지와 텍스트 배치 */
  .left-image {
      width: 40%;
      margin-right: 20px;
  }
  
  .right-text {
      width: 55%;
  }
  
  /* 상위 서비스 섹션 스타일 */
  .upper-management, .upper-engineering {
      display: block; /* Flex 사용 대신 블록 레이아웃 사용 */
      padding: 20px;
      margin-bottom: 30px;
      border: none; /* 테두리 제거 */
      background-color: transparent; /* 배경색 제거 */
      box-shadow: none; /* 박스 그림자 제거 */
      scroll-margin-top: 80px; /* 이 부분은 스크롤 조정에 사용되므로 유지 */
  }
  
  
  /* 이미지와 텍스트를 수평으로 배치 */
  .upper-management .content-container, .upper-engineering .content-container {
      display: flex;
      align-items: center;    /* 이미지와 텍스트를 수직 가운데 정렬 */
      gap: 20px;              /* 이미지와 텍스트 사이 간격 */
      margin-top: 20px;       /* 제목과 이미지/텍스트 간의 간격 */
  }
  
  /* 이미지 스타일 */
  .upper-management img, .upper-engineering img {
      width: 30%;             /* 이미지 크기 설정 */
      height: auto;           /* 이미지 비율 유지 */
  }
  
  /* 텍스트 정렬 */
  .upper-management .right-text, .upper-engineering .right-text {
      flex: 1;                /* 텍스트가 남은 공간을 차지하도록 설정 */
      text-align: left;       /* 텍스트 왼쪽 정렬 */
      margin-bottom: 50px;
      width: 50%;
      padding-left: 100px;
      white-space: pre-wrap; /* 띄어쓰기를 유지 */
  }
  
  #management-services, #engineering-services {
      display: flex;
      flex-direction: column; /* 하위 서비스가 상위 서비스 아래에 배치되도록 */
      margin-bottom: 30px;
  }
  
  /* 하위 서비스 섹션 스타일 */
  .service-section {
      flex: 1 1 30%;
      margin: 10px;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      cursor: pointer;
      text-align: center;
      transition: transform 0.3s ease;
  }
  
  .service-section img {
      width: 30%;
      height: auto;
      margin-bottom: 10px;
  }
  
  .service-section h3 {
      font-size: 16px;
      margin-bottom: 10px;
  }
  
  .service-section p {
      font-size: 14px;
      line-height: 1.4;
      max-height: 60px;  /* 텍스트가 처음에 길지 않게 */
      overflow: hidden;
      transition: max-height 0.3s ease;
  }
  
  .service-section.expanded {
      flex: 1 1 100%; /* 클릭하면 전체 넓이로 확장 */
      padding: 30px;
      transform: scale(1.05); /* 약간 확대 효과 */
  }
  
  .service-section.expanded p {
      max-height: none;  /* 텍스트 전체를 표시 */
  }
  
  
  .subsection-box {
      flex: 1 1 30%;
      margin: 10px;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      text-align: center;
      background-color: #f9f9f9;
      transition: transform 0.3s ease;
      font-size: 22px;
  }
  
  
  
  .subsection-box img {
      width: 100%;
      height: auto;
      margin-bottom: 15px;
  }
  
  
  .subsection-box h3 {
      font-size: 22px;
      margin-bottom: 10px;
  }
  
  .subsection-box p {
      font-size: 22px;
      max-height: 40px;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }
  
  
  .subsection-box:hover {
      transform: scale(1.05);
  }
  
  .subsection-box.expanded {
      height: auto;
      padding: 30px;
      transform: scale(1.05);
  }
  
  .subsection-box.expanded img {
      width: 100%;
  }
  
  .subsection-box.expanded p {
      max-height: none;
  }
  /* 팝업 오버레이 스타일 */
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
        z-index: 999;
        display: none; /* 처음에는 보이지 않음 */
    }
  
    /* 팝업 창 스타일 */
    .popup {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2000px;
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        z-index: 1000;
        flex-direction: column;   /* 세로 방향 정렬 */
        display: flex;            /* Flexbox 활성화 */
        align-items: center;      /* 가로축 중앙 정렬 */
    }
  
  
  
    .popup img {
        max-width: 30%;
        height: auto;
    }
  
    .popup p {
        margin-top: 10px;
        font-size: 22px;
        white-space: pre-wrap;
        line-height: 1.5;
    }
  
    .popup-close {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 22px;
    }
  
  /* 모바일 반응형 스타일 */
  @media (max-width: 768px) {
      .upper-management, .upper-engineering {
          flex-direction: column;
          align-items: flex-start;
      }
  
      .upper-management img, .upper-engineering img {
          width: 100%;
          margin-bottom: 20px;
      }
  
  
      .service-section img {
          width: 100%;
          margin-bottom: 20px;
      }
  
      .service-section h2, .service-section p {
          width: 100%;
      }
  
      .subsection-container {
          flex-direction: column;
      }
  
      .subsection-box {
          width: 100%;
      }
  
      .popup {
          width: 90%;
          max-width: 100%;
      }
  }
  
  
  
  * 각 단어에 적용될 애니메이션 */
  .animated-word {
    display: inline-block;
    opacity: 0;
    font-weight: normal;
    transform: scale(1);
    transition: font-weight 10s ease, transform 10s ease;
    animation: fadeInOut 5s infinite; /* 무한 반복 애니메이션 */
  }
  
  /* 애니메이션 정의 */
  @keyframes fadeInOut {
    0% {
      opacity: 0;
      transform: scale(1);
      font-weight: normal;
    }
    50% {
      opacity: 1;
      transform: scale(1.2); /* 약간 확대 */
      font-weight: bold;
    }
    100% {
      opacity: 0;
      transform: scale(1);
      font-weight: normal;
    }
  }
  
  /* 애니메이션의 딜레이 효과 적용 */
  .animated-word {
    animation-delay: 10s; /* 각 단어마다 다른 딜레이 적용 */
  }