/* 기본적으로 모든 desc는 숨김 */
.desc-01,
.desc-02,
.desc-03,
.desc-04,
.desc-05 {
  display: none;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  /* 부드러운 페이드 효과 */
}

/* 활성화된 요소만 노출 */
.desc-01.active,
.desc-02.active,
.desc-03.active,
.desc-04.active,
.desc-05.active {
  display: block;
  opacity: 1;
}




/* [메인 섹션 전체 설정] */
.season-eni-01 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1vh - 150px);
  /* 헤더 제외 한 페이지 꽉 채움 */
  padding: 10px;
  background: radial-gradient(circle at center, #000 0%, #000 100%);
  position: relative;
  overflow: hidden;
  text-align: center;


}

/* 배경에 은은한 빛 효과 추가 */
.season-eni-01::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: #1f01ff;
  filter: blur(150px);
  opacity: 0.3;
  left: 10%;
  z-index: 1;
}

.season-text-01 {
  position: relative;
  z-index: 2;
  /* 텍스트를 배경 위로 */
  width: 100%;
}

/* 메인 타이틀 (가장 크게 강조) */
.main-title-01 {
  font-size: 8.5rem;
  /* PC에서 압도적인 크기 */
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1rem;
  font-family: 'Arial Black', sans-serif;
  background: linear-gradient(180deg, #ffffff 30%, #01c0fa 150%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

/* 설명 문구 (크게 가독성 확보) */
.desc-01,
.desc-02,
.desc-03,
.desc-04,
.desc-05
{
  font-size: 2.2rem;
  line-height: 1.6;
  color: #f98e02;
  max-width: 1000px;
  margin: 0 auto 1rem;
  word-break: keep-all;
  font-weight: 400;
}

/* 버튼 랩퍼 */
.btn-wrap-01 {
  display: flex;
  gap: 30px;
  justify-content: center;
}

/* 버튼 스타일 (헤더 버튼과 통일감) */
.btn-01 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 90px;
  font-size: 1.8rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
}

.btn-fill-01 {
  background: #0d01fa;
  color: #fff;
}

.btn-outline-01 {
  background: #01fa40;
  color: #000;
  border: 2px solid #555;
}

.btn-01:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------
   [반응형] 1024px 이하 (모바일/태블릿 꽉 차게)
------------------------------------------------------- */
/* [기존 PC 스타일 아래에 이 반응형 코드를 덮어씌우세요] */

@media screen and (max-width: 1024px) {
  .season-eni-01 {
    /* 모바일 화면 높이에 맞춤 */
    height: 90vh;
    min-height: -webkit-fill-available;
    /* iOS 브라우저 대응 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 세로 중앙 정렬 */
    padding: 0 5%;
    /* 좌우 여백 유동적 조절 */
  }


  /* 메인 타이틀 - 화면 너비에 꽉 차게 */
  .main-title-01 {
    font-size: 11vw;
    line-height: 1.1;
    margin-bottom: 4vh;
    color: #fff;

  }

  /* 설명 문구 */
  .desc-01,
    .desc-02,
        .desc-03,
                .desc-04,
                                .desc-05 {
    font-size: 4.5vw;
    /* 모바일에서 읽기 편한 큰 사이즈 */
    line-height: 1.5;
    margin: 0 auto 5vh;
    width: 100%;
    max-width: none;
    /* 제한 해제 */
  }

  /* 버튼 그룹 */
  .btn-wrap-01 {
    flex-direction: column;
    gap: 2vh;
    /* 세로 간격 유동적 조절 */
    width: 100%;
    align-items: center;
  }

  /* 버튼 스타일 */
  .btn-01 {
    width: 90%;
    /* 화면의 90% 차지 */
    height: 12vw;
    /* 높이도 너비에 비례하게 */
    min-height: 60px;
    /* 너무 낮아지는 것만 방지 */
    font-size: 5vw;
    /* 글자도 크게 */
    border-radius: 15px;
    margin: 0;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  }

  .btn-fill-01,
  .btn-outline-01 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* 기본 바디 스타일 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #000;

}
body::-webkit-scrollbar {
  scrollbar-width: none;
}

@media (max-width: 1024px) {
  body {
    overflow: auto; /* 스크롤 가능 */
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
  }
}

/* 헤더 */
/* [기본 헤더 레이아웃] */
.head-line {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

/* 3분할 영역 공통 */
.homepage-logo,
.navgeiter,
.log-line {
  flex: 1;
  display: flex;
  align-items: center;
}

/* 1. 로고 영역 */
.homepage-logo {
  justify-content: center;
  cursor: pointer;
}

.logo-one {
  height: 12rem;
  width: 52rem;
  border-radius: 5px;
  margin-right: 15px;
}

.logo-two {
  height: 20rem;
  width: 52rem;
  border-radius: 5px;
  margin-right: 15px;
}

.logo-text {
  font-size: 3.2rem;
  font-weight: 400;
  font-family: "Goblin One", serif;
  color: #2ecc02;
  white-space: nowrap;
  /* 텍스트 줄바꿈 방지 */
}

/* 2. 검색창 영역 */
.navgeiter {
  display: inline-block;
  vertical-align: middle;
  justify-items: center;
}

.system-status-container {
  display: flex;
  gap: 10px;
  /* 박스 사이의 미세한 간격 */
  align-items: center;
}

/* 개별 네모 박스 스타일 */
.date-box {
  background-color: #ffffff;
  /* 흰색 바탕 */
  color: #000000;
  /* 검정색 글자 */
  border: 2px solid #000000;
  /* 더 두꺼운 테두리로 단단한 느낌 */
  padding: 2px 8px;
  font-family: 'Arial', sans-serif;
  /* 두꺼운 느낌의 폰트 */
  font-weight: 900;
  /* 아주 두껍게 */
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
  min-width: 30px;
  /* 일정한 크기 유지 */
}

/* 요일 박스만 색상 반전 (강조) */
.day-name {
  background-color: #000000;
  /* 검정 바탕 */
  color: #ffffff;
  /* 흰색 글자 */
}

/* PC/모바일 대응: 줄어들었을 때 글자 크기 조절 */
@media screen and (max-width: 768px) {
  .date-box {
    font-size: 12px;
    padding: 1px 5px;
    min-width: 25px;
  }
}


/* ----------------------------------------------------
   [반응형] 1024px 이하 (모바일/태블릿 꽉 차게)
------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .head-line {
    flex-direction: column;
    /* 세로로 쌓기 */
    padding: ;
    gap: 30px;
    margin-top: 15vw;

  }

  .homepage-logo,
  .navgeiter,
  .log-line {
    width: 100%;
    justify-content: center;
    flex: none;

      
  }
    .navgeiter {
display: flex;
  /* 1. 정렬 기능을 활성화합니다. */
  justify-content: center;
  /* 2. 가로(좌우) 중앙 정렬을 시킵니다. */
  align-items: center;
  /* 3. 세로(상하) 중앙 정렬을 시킵니다. */
  width: 100%;
    }

  /* 모바일 로고 크게 */
  .logo-one,
  .logo-two
   {
    height: 30vw;
    /* 화면 너비 비례 */    
  }

  .logo-text {
    font-size: 8vw;
    /* 시원하게 크게 */
  }


    /* 모바일 버튼 꽉 차게 */
    .log-line {
      margin-top: 0px;
    }
  
    .logout {
      width: 100%;
      height: 18vw;
      min-height: 80px;
      font-size: 6vw;
      /* 모바일에서 매우 크게 강조 */
      border-radius: 15px;
    }
    }


.right-navbar {
    position: fixed;
    top: 0;
    right: -250px; /* 숨겨둠 */
    width: 250px;
    height: 100%;
    background: #333;
    color: white;
    transition: right 0.3s ease;
    padding-top: 60px;
    z-index: 9999;
}

.right-navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.right-navbar ul li {
    padding: 15px;
    text-align: left;
    margin-left: 2rem;
}

.right-navbar ul li a {
    color: white;
    text-decoration: none;
    display: block;
}

/* hover zone */
.nav-hover-zone {
    position: fixed;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    z-index: 9999;
    background: transparent; /* 눈에는 안 보이지만 hover 가능 */
}

@media screen and (max-width: 1024px) {
    .right-navbar {
        width: 50%;      /* 화면 절반 */
        right: -50%;     /* 숨김 */
        display: block;  /* display none 제거 */
        position: fixed;
        top: 0;
        height: 100%;
        background-color: #111;
        z-index: 1000;
        transition: right 0.3s ease;
        padding-top: 60px;
    }

    .right-navbar.open {
        right: 0;
    }
        .right-navbar ul li a {
        font-size: 2.5rem;   /* 기존보다 크게 */
        padding: 15px 20px;  /* 터치 영역 확보 */
    }
}

/* 모바일에서만 보이게 */
.hamburger {
  display: none; /* PC 기본 숨김 */
  font-size: 3rem;
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 50px;
  z-index: 1100;
  color: #333;
  font-weight: 900;

}

@media (max-width: 1024px) {
  .hamburger {
    display: block;
    color: #ffffff;
  }

  .right-navbar {
    position: fixed;
    top: 0;
    right: -50%; /* 기본은 숨김 */
    width: 50%;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    z-index: 1000;

  }

  .right-navbar.active {
    right: 0; /* 버튼 누르면 나타남 */
  }

  .right-navbar ul {
    list-style: none;
    padding: 20px;
    margin: 0;
  }

  .right-navbar ul li {
    margin: 15px 0;
  }

  .right-navbar ul li a {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
    font-weight: 700;
  }
}


/* hptitletext 스타일 (CSS 예시가 없어서 임의 추가, 필요시 수정) */
.hptitletext {
  text-align: center;
  margin-bottom: 50px;
  cursor: pointer;
}

.hptitletext h1 {
  font-size: 3rem;
  color: #fff;
}


/* freesite 전체를 한 줄로 배치 */

.reprologue-one {
  margin-bottom: 350px;
  margin-top: 30px;
}

.freesite {
  display: flex;
  flex-wrap: wrap;
  gap: 300px;
  /* 각 사이트 간격 */
  padding: 10px 0;
  justify-content: center;
  /* 가로 중앙 정렬 */
  align-items: center;
  /* 세로 중앙 정렬 */

}

/* 각 사이트 그룹 */
.freesite-one {
  display: flex;
  flex-direction: column;
  width: auto;
  align-items: center;
  /* 수평 중앙 정렬 */
  justify-items: center;
  position: relative;
  /* 절대 위치 COPY 버튼 기준 */

}

/* 버튼 스타일 */

.html5up,
.freehtml5,
.colorlib,
.templatemo {
  padding: 10px;
  border-radius: 50px 50px;
  cursor: pointer;
  font-size: 1.5rem;
  text-align: center;
  width: 200px;
  height: 80px;
  z-index: 9;
  border: 8px solid #00f2ff;
  background-color: #000;
  color: #fff;
}

.html5up-copy,
.freehtml5-copy,
.colorlib-copy,
.templatemo-copy {
  position: absolute;
  /* 제목 버튼 위로 겹치기 */
  top: 35px;
  /* 위로 겹치는 정도 */
  left: 50%;
  /* 부모 가로 중심 */
  transform: translateX(-50%);
  /* 정확히 중앙 정렬 */
  width: 400px;
  height: 400px;
  border-radius: 50px 50px;
  /* 아래 두 모서리만 둥글게 */
  border: 5px solid rgb(9, 251, 1);
  color: #fff;
  padding: 45px;
  font-size: 1.7rem;
  text-align: left;
  box-sizing: border-box;
  z-index: 8;
  background-color: #000;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 5.0);
}


/* COPY 버튼 호버 효과 */
.html5up-copy:hover,
.freehtml5-copy:hover,
.colorlib-copy:hover,
.templatemo-copy:hover {
  transform: translateX(-50%) translateY(-10px);
  /* 위로 10px 살짝 띄우기 */
  box-shadow: 0 10px 20px #fff;
  /* 그림자 추가 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 부드럽게 */
}



/* 1024px 이하 반응형 */
@media (max-width: 1024px) {
  .reprologue-one {
    margin-bottom: -150px;
  }

  .freesite {
    flex-wrap: wrap;
    /* 줄바꿈 허용 */
    justify-content: center;
    /* 가운데 정렬 */
    gap: 50px;
    /* 요소 간격 */

  }

  .freesite-one {
    flex: 0 1 95%;
    /* 한 줄에 하나 */
    align-items: center;
  }

  /* 버튼 크기 */
  .html5up,
  .freehtml5,
  .colorlib,
  .templatemo {
    width: 100%;
    height: auto;
    /* auto로 변경 */
    font-size: 2.5rem;
    border-width: 6px;
  }

  /* COPY 박스 */
  .html5up-copy,
  .freehtml5-copy,
  .colorlib-copy,
  .templatemo-copy {
    position: static;
    /* absolute → static */
    transform: none;
    /* 중앙 정렬 해제 */
    width: 100%;
    height: auto;
    /* auto로 변경 */
    font-size: 2rem;
    margin-top: 10px;
    /* 버튼 아래 여백 */
    padding: 20px;
  }

  .html5up-copy:hover,
  .freehtml5-copy:hover,
  .colorlib-copy:hover,
  .templatemo-copy:hover {
    transform: none;
    box-shadow: none;
  }

}

/* 인사 메시지 */
.welcome-message {
  margin: 0px auto;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #000;
  padding: 10PX;

}

.welcome-message h2 {
  font-size: 2rem;
  margin-bottom: -3px;
}
/* 비디오 섹션 */
.homepagevideo {
  display: flex;
  flex-wrap: wrap;           /* 줄바꿈 허용 */
  justify-content: center;   /* 한 줄 중앙 정렬 */
  gap: 5px;                  /* 비디오 사이 간격 */
  width: 100%;
  margin: 0 auto;
  background-color: #000;

}

.video-container {
  position: relative;
  flex: 0 0 600px;           /* 고정 폭 */
  max-width: 600px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;

}



.video-container video {
  width: 80%;   /* 컨테이너 안에서 꽉 차도록 */
  height: auto;
  display: block;
}

.video-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(251, 218, 3);
  font-size: 1.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  text-align: center;
  white-space: pre-line;
  opacity: 1;
  font-weight: bold;
  animation: none;
  width: 100%;
  box-sizing: border-box;
  max-width: 450px; /* PC에서만 비디오 폭에 맞춤 */
  padding: 10px;    /* 글자가 영상 테두리에 붙지 않게 */
}


@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* 1024px 이하 (태블릿 + 모바일) */
@media screen and (max-width: 1024px) {
  .homepagevideo {
    flex-direction: column; /* 세로 정렬 */
    align-items: center;
    gap: 10px; /* 카드 간격 */
    padding: 10px;
  }

  .video-container {
    flex: 1 1 100% !important;  /* 한 줄에 1개 */
    max-width: 100% !important; 
    width: 100% !important;
    margin: 0;
    
  }

  .video-container video {
    width: 100% !important; /* 영상 폭 100% */
    height: auto;
    display: block;
  }

  .video-text {
    max-width: 100% !important; /* 글자 영역 폭 100% */
    font-size: 2rem;
    padding: 8px;
    box-sizing: border-box;
  }

  .welcome-message h2 {
    font-size: 2.5rem;
    text-align: center;
  }
}



/*                    */
.homepagecontent {
    background-color: #000;   /* 전체 배경 검정색 */
    width: 100%;
    height: auto;        /* 화면 전체 높이 확보 */
    color: #fff;              /* 텍스트 기본 흰색 */
    padding: 2vw;             /* 화면 크기에 따른 좌우 여백 */
    box-sizing: border-box;

}

/* 제목 텍스트 */
.hptitletext {
    text-align: center;
    margin-top: 15vh;
    padding: 0 3vw;
}

.hptitletext h1 {
    font-size: 3.5rem;
    font-weight: bold;
    letter-spacing: 0.5rem;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    line-height: 1.2;
    text-shadow: 2px 2px 5px #555; /* 초기 그림자 */
    margin-top: -5vh;
    position: relative;
    animation: glow 3s infinite ease-in-out; /* 3초마다 밝아졌다 희미해짐 */
   
}

@keyframes glow {
    0%, 30% {
        text-shadow: 2px 2px 5px #555; /* 초기 상태 */
    }
    50% {
        text-shadow: 
            0 0 10px #fff,
            0 0 20px rgb(0, 255, 0),
            0 0 30px rgb(0, 255, 0); /* 가장 밝아진 상태 */
    }
    70%, 100% {
        text-shadow: 2px 2px 5px #555; /* 다시 초기 상태 */
    }
}

/* 반응형: 화면이 좁아질 때 글씨 크기와 간격 조정 */
@media (max-width: 1024px) {
    .hptitletext h1 {
        font-size: 3rem;
        margin-top: 10px;
    }
}

/* --- 회사 조직도 스타일 (Dark Theme & Lines) --- */
.org-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 20px auto;
  font-family: 'Malgun Gothic', sans-serif;
  color: #fff;
  /* 기본 텍스트 화이트 */
  line-height: 1.2;
  background-color: #000;
  /* 검은 바탕 */
  padding: 40px 20px;
  font-size: 1.2rem;
}

/* 계층 공통 설정 (선 배치를 위해 relative 설정) */
.org-container .level-1,
.org-container .level-2,
.org-container .level-3,
.org-container .level-4 {
  position: relative;
  display: flex;
  justify-content: center;
}

.org-container .level-1 {
  margin-bottom: 40px;
}

.org-container .level-2 {
  margin-bottom: 40px;
}

.org-container .level-3 {
  gap: 100px;
  margin-bottom: 20px;
}

.org-container .level-4 {
  gap: 25px;
  align-items: flex-start;
}


/* 1. 수직 중앙선 (상위 노드들 사이) */
.org-container .level-1::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 4px;
  height: 40px;
  background-color: #888;
}

.org-container .level-2::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 50%;
  width: 4px;
  height: 40px;
  background-color: #888;
  padding-top: 20px;
}




/* 2. 수평 연결선 (부서들을 가로로 잇는 선) */
.org-container .level-4 {
  position: relative;
  padding-top: 20px;
  /* 수평선이 들어갈 공간 확보 */
  margin-top: 20px;

}


.org-container .level-3::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 10%;
  /* 왼쪽 끝 위치 (조절 가능) */
  right: 10%;
  /* 오른쪽 끝 위치 (조절 가능) */
  height: 4px;
  background-color: #888;

}

.org-container .level-3::after {
  position: relative;
  padding-top: 25px;
  /* 수평선이 들어갈 공간 확보 */
  margin-top: 20px;
}




/* 수평선 본체 */
.org-container .level-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16%;
  /* 왼쪽 끝 위치 (조절 가능) */
  right: 15.9%;
  /* 오른쪽 끝 위치 (조절 가능) */
  height: 4px;
  background-color: #888;
}

/* 3. 수평선에서 각 부서(column)로 내려가는 짧은 수직선들 */
.org-container .column {
  position: relative;
  padding-top: 20px;
  /* 수평선에서 노드까지의 간격 */
}

.org-container .column::before {
  content: '';
  position: absolute;
  top: -20px;
  /* level-4의 padding-top만큼 위로 */
  left: 50%;
  width: 4px;
  height: 40px;
  background-color: #888;
}

/* 4. level-3(부서명)에서 수평선까지 내려오는 중심선 */
.org-container .level-3::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 4px;
  height: 40px;
  background-color: #888;
}

/* 기본 노드 디자인 */
.org-container .node {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: bold;
  min-width: 360px;
  min-height: 45px;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
  /* 다크모드용 은은한 그림자 */
  box-sizing: border-box;
  font-size: 14px;
  z-index: 1;
}

/* 색상 정의 (검은 바탕에서 잘 보이도록 채도 유지) */
.org-container .head-node {
  background: linear-gradient(to bottom, #ffffff, #cfd9e6);
  border: 1px solid #fff;
  color: #111;
}

.org-container .support-node {
  background-color: #00a84d;
  color: #fff;
}

.org-container .support-node-anther {
  background-color: #9cdb43;
  color: #000;
  /* 연두색엔 검은 글씨가 더 잘 보입니다 */
}

.org-container .level-3 .node:last-child {
  background-color: #5a94d6;
  color: #fff;
}

.org-container .blue-title {
  background-color: #4a6a8a;
  /* 다크모드에 맞춰 톤다운 */
  color: #fff;
  margin-bottom: 12px;
}

.org-container .item {
  background-color: #222;
  /* 검은 바탕에 어울리는 어두운 회색 */
  color: #ccc;
  font-weight: normal;
  border: 1px solid #444;
  margin-bottom: 6px;
}

/* --- 1024px 이하 전체 축소 스타일 --- */
@media screen and (max-width: 1024px) {
  .org-container {
    transform: scale(0.80);
    transform-origin: top center;
    font-size: 2.0rem;
  }

  /* 노드(상자) 내부 기본 글자 크기 확대 */
  .org-container .node {
    font-size: 28px !important;
    /* 기존 14px -> 20px로 확대 */
    padding: 12px 10px;
    /* 글자가 커진 만큼 상하 여백 살짝 조정 */
  }

  /* 하단 세부 항목(item) 글자 크기 확대 */
  .org-container .item {
    font-size: 28px !important;
    /* 세부 항목도 가독성 있게 조정 */
  }

  /* 제목(blue-title) 부분 강조 */
  .org-container .blue-title {
    font-size: 28px !important;
  }
}


/* BUSINESS 섹션 공통 스타일 */


/* 카드 레이아웃 (정부기관 & 기업 파트너십) */
.business-cards {
  display: flex;
  flex-direction: column;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto 60px;
}

.business-card-one,
.business-card-two {
  border-radius: 20px;
  padding: 40px;
  transition: transform 0.3s ease;
  margin-top: -15px;
}

.business-card-one h2,
.business-card-two h2 {
  font-size: 2.5rem;
  color: #fff;
  padding-left: 15px;
  text-align: center;

}

.business-card-one p,
.business-card-two p {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 30px;
  color: #999;
}

/* 로고 그리드 시스템 (컬러 유지 버전) */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  /* 간격을 살짝 좁혀서 밀도감 있게 */
  padding: 30px;
  border-radius: 15px;
  backdrop-filter: blur(5px);
}

.logo-row img {
  /* 무채색 효과 삭제 */
  filter: none;

  /* 로고가 잘 보이도록 흰색 배경과 세련된 테두리 추가 */
  background-color: #fff;
  padding: 10px;
  border-radius: 12px;
  object-fit: contain;

  /* 입체감을 위한 미세한 그림자 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 이미지 크기 최적화 */
  width: 12vh;
  height: auto;
}

/* 호버 시 역동적인 효과 */
.logo-row img:hover {
  transform: translateY(-10px) scale(1.05);
  /* 위로 슥 올라가는 효과 */
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
  /* 밝은 광택 효과 */
  border-color: #00f2ff;
  /* 진네트웍스 포인트 컬러 테두리 강조 */
}


/* -------------------------------------------------- */
/* 1024px 반응형 (태블릿 및 작은 노트북) */
/* -------------------------------------------------- */
@media (max-width: 1024px) {

  .business-cards {
    gap: 30px;
  }

  .business-card-one,
  .business-card-two {
    padding: 25px;
  }

  /* 로고 크기 조정 */
  .logo-row img {
    width: 10vh !important;
    /* 모바일/태블릿에서 약간 작게 */
  }

  .logo-row {
    gap: 15px;
    padding: 20px;
  }
}
/* 네비게이션 전체 */

/* 기본: PC에서는 긴 글자 보이기 */
.long { display: inline; }
.short { display: none; }

/* 모바일 (1024px 이하일 때는 짧은 글자 표시) */
@media (max-width: 1024px) {
  .long { display: none; }
  .short { display: inline; }
}

.esg-navi {
  position: sticky;     /* 스크롤에 따라 달라지는 고정 */
  top: 90px;               /* 화면 맨 위에 닿으면 붙음 */
  z-index: 10;        /* 다른 요소 위에 표시 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  gap: 70px;
  color: #fff;
  background-color: transparent;
  
}

/* 네비 버튼 반짝임 기본 */
.esg-navi > div {
    flex: 1;
    max-width: 120px;
    text-align: center;    
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease; 
    color: #fff;
    background: transparent;
    position: relative;      /* 반짝임용 */
    overflow: hidden;        /* 반짝임이 버튼 밖으로 나가지 않도록 */
}

/* 반짝임 요소 */
.esg-navi > div::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(201, 198, 249, 0.3);
    transform: rotate(45deg) translate(-100%, -100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
}

/* 호버 또는 active 시 반짝임 */
.esg-navi > div:hover::after,
.esg-navi > div.active::after {
    transform: rotate(45deg) translate(0, 0);
    opacity: 1;
}

/* 호버 및 active 스타일 */
.esg-navi > div:hover,
.esg-navi > div.active {
    background-color: #0f029b;
    transform: translateY(-5px);
    box-shadow: 0 8px #007bff;

}

/* 글자 스타일 */
.esg-navi h2 {
  font-size: 1.5rem;
  margin: 0;
  color: #fff;
  white-space: nowrap;     /* 줄바꿈 방지 */
}
.esg-navi > div.active h2 {
  color: #55fb02;   /* 원하는 색상으로 변경 */
}
/* 반응형 - 모바일 */
@media (max-width: 1024px) {
  .esg-navi {
    gap: 5px;
    padding: 8px 0;
  }

  .esg-navi > div {
    max-width: none;       /* 버튼 크기 제한 해제 */
    flex: 1;               /* 화면에 맞춰 자동으로 줄어듦 */
    padding: 8px 5px;
  }

  .esg-navi h2 {
    font-size: 2.2rem;    /* 글자 크기 축소 */
  }
  .esg-navi > div.active h2 {
  color: #55fb02;   /* 원하는 색상으로 변경 */
}
}



/* 콘텐츠 영역 기본 */
.content-item {
  display: none;          /* 기본 숨김 */
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}

.content-item.active {
  display: block;         /* 활성화된 콘텐츠만 보이기 */
}

/* 이미지 컨테이너 */
.image-container {
  position: relative;
  width: 100%;
  display: inline-block;
  margin-bottom: 20px;

}

/* 이미지 */
.image-container img.logo-one {
  width: 100%;
  height: 60vh;
  border-radius: 12px;
  display: block;
}

/* 이미지 위 오버레이 텍스트 */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background-color: rgba(0,0,0,0.3);
  text-align: center;
  padding: 10px 20px;
  border-radius: 8px;
  max-width: 90%; /* 모바일에서도 글자가 넘치지 않게 */
  height: auto;
}

.overlay-text h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.overlay-text a {
    font-size: 1.2rem;
  text-align: center;
}
.overlay-text p {
  font-size: 1.2rem;
  text-align: left;
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: rgba(0,0,0,0.3);
    text-align: center;
    padding: 10px;           /* 내부 여백 최소화 */
    border-radius: 8px;
    width: 90%;              /* 좌우 5% 여백 */
    max-width: 90%;          /* 좌우 5% 여백 */
    box-sizing: border-box;
    height: auto;
  }

  .overlay-text h1 {
    font-size: 2rem;
    margin-bottom: 30px;
    width: 100%;             /* 글자가 container 안에서 꽉 차게 */
  }

  .overlay-text p {
    font-size: 1.8rem;
    text-align: left;
    width: 100%;             /* 글자 폭 꽉 차게 */
    margin: 30px;
    padding: 0;
  }
}


/* 이미지 아래 본문 텍스트 */
.content-item > h1 {
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

.content-item > p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 900px;   /* 글자 폭 제한 */
  margin: 0 auto 20px auto; /* 가운데 정렬 */
}
@media (max-width: 1024px) {
  .content-item > h1 {
    font-size: 1.5rem;
  }

  .content-item > p {
    font-size: 1rem;
    padding: 0 10px;
  }

}

.historytext {
  font-size: 1.2rem;
  margin-top: 90px;
}
/* ================= */
/* 기본 카드 레이아웃 */
/* ================= */
.prologueone, .prologuetwo {
  display: flex;
  justify-content: center;
  gap: 18%;
  margin: 20px 0;
  flex-wrap: wrap; /* 화면 좁으면 아래로 내려가도록 */
}

.hpstoryone, .hpstorytwo,
.hpstorythree, .hpstoryfour, .hpstoryfive {
  position: relative;
  width: 450px;
  height: 400px;
  border-radius: 12px;
  overflow: hidden; /* 텍스트가 이미지 밖으로 안나가도록 */
}

.storylogo-one, .storylogo-two {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}


/* ================= */
/* 오버레이 텍스트  */
/* ================= */
.hpstoryoverlaytext {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgb(18, 18, 18);
  background-color: rgba(7, 7, 7, 0.1);
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  padding: 2rem; /* px 대신 rem 사용 */
  box-sizing: border-box;
  overflow: hidden;
}

.hpstoryoverlaytext h2 {
  margin: 0 0 2rem 0;
  font-size: 1.8rem; /* 기본 글자 크기 */
  width: 100%;
  text-align: center;
  font-weight: 700;

}

.hpstoryoverlaytext p {
  text-align: left;
  margin: 0.3rem 0 0.3rem 1rem;
  font-size: 1.2rem; /* 기본 글자 크기 */
  line-height: 1.4;
  font-weight: 700;

}

/* ================= */
/* 반응형            */
/* ================= */

/* 태블릿 이하 (최대 1024px) */
@media (max-width: 1024px) {
  .prologueone, .prologuetwo {
    flex-direction: column; /* 세로 정렬 */
    gap: 2rem;              /* 카드 간 간격 */
    align-items: center;     /* 가운데 정렬 */
  }

  .hpstoryone, .hpstorytwo,
  .hpstorythree, .hpstoryfour, .hpstoryfive {
    width: 90%;   /* 화면 폭 90% */
    height: auto; /* 높이는 이미지 비율에 맞춰 자동 */
  }

  .hpstoryoverlaytext {
    padding: 1.5rem;
  }

  .hpstoryoverlaytext h2 {
    font-size: 3rem;
    margin-top: 5px;
  }

  .hpstoryoverlaytext p {
    font-size: 2rem;
    margin-left: 1rem;
    font-weight: 700;
  }
}

/* 모바일 (최대 480px) */
@media (max-width: 480px) {
  .prologueone, .prologuetwo {
    flex-direction: column; /* 세로 정렬 유지 */
    gap: 1.5rem;           /* 모바일 간격 조정 */
    align-items: center;
  }

  .hpstoryone, .hpstorytwo,
  .hpstorythree, .hpstoryfour, .hpstoryfive {
    width: 95%;   /* 거의 화면 꽉 차게 */
    height: auto; /* 이미지 비율에 맞춰 자동 */
  }

  .hpstoryoverlaytext {
    padding: 1.4rem;
  }

  .hpstoryoverlaytext h2 {
    font-size: 3rem;
  }

  .hpstoryoverlaytext p {
    font-size: 2rem;
    margin-left: 1rem;
    font-weight: 700;
  }
}

.epilogueone-text {
    margin-top: 80px;
    margin-bottom: 20px;
}

.epilogueone-text h1 {
    font-size: 2.5rem;
    margin-top: 30px;
}

/* 반응형: 태블릿 이하 */
@media (max-width: 1024px) {
    .epilogueone-text {
        margin-top: 40px;
        margin-bottom: 15px;
    }
    .epilogueone-text h1 {
        font-size: 2.5rem;
    }
}


/* ✅ 비디오 전체 컨테이너 */
.objective {
    display: flex;
    flex-wrap: wrap;           /* 줄 바꿈 허용 */
    justify-content: center;   /* 가로 중앙 정렬 */
    gap: 50px;                 /* 비디오 간 간격 */
    width: 100%;
    padding: 20px 0;

}

/* ✅ 개별 비디오 박스 */
.ojone, .ojtwo, .ojthree {
    position: relative;
    width: 30%;                /* PC: 한 줄에 3개 */
    max-width: 500px;          /* PC: 최대 폭 제한 */
    height: 600px;
    overflow: hidden;
    border-radius: 10px;       /* 모서리 둥글게 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ✅ 비디오 스타일 */
.objectivevideo {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 비율 유지하며 꽉 채우기 */
}

/* ✅ 스크롤 업 텍스트 */
.ojonetext {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    padding: 12px;
    box-sizing: border-box;
    animation: scrollUp 15s linear infinite;
    text-align: center;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8); /* 글자 가독성 강화 */
    z-index: 2; /* 오버레이 위에 표시 */

}

/* ✅ 오버레이 (비디오 어둡게) */
.ojone::after,
.ojtwo::after,
.ojthree::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* 가독성 위해 비디오 살짝 어둡게 */
    z-index: 1;
}

.objective P {
  font-size: 1.2rem;
}

.ojtwo p {
  color: #03e8f9;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.ojtwo h2 {
  color: #f70602;
  text-shadow: 2px 2px 6px rgb(0, 0, 0);
    /* 글자 가독성 강화 */
}

/* ✅ 텍스트 스크롤 애니메이션 */
@keyframes scrollUp {
    0% { bottom: -100%; }
    100% { bottom: 100%; }
}

/* ✅ 반응형: 태블릿/모바일 (1024px 이하) */
@media (max-width: 1024px) {
    .ojone, .ojtwo, .ojthree {
        width: 100%;           /* 화면 가득 */
        max-width: 100%;       /* 최대 폭 제한 제거 */
        height: 650px;         /* 높이 조정 */
        margin: 0;             /* 좌우 마진 제거 */
    }

    .objective {
        gap: 20px;             /* 모바일 간격 최소화 */
        padding: 0;            /* 좌우 패딩 제거 */
    }

    .objective P {
       font-size: 2rem;
}

    .objective h2 {
      font-size: 2.5rem;
    }
}



/* ---------- Episode: Key Points - Responsive Grid ---------- */
.episodeone {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* 내부 absolute 배치 가능 */
    padding: 40px 0;
}

.episodeonetext h1 {
    text-align: center;
    font-size: 2.5rem;
    color: #fab001;
    margin-top: 10px;
}

/* 상단 카드 */
.kpone, .kptwo, .kpthree, .kpfour {
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    box-sizing: border-box;
}

/* 상단 한 줄 카드 */
.kpone {
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    text-align: left;
    margin-top: 80px;
    margin-bottom: 20px;
}

.kptwo {
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    text-align: right;
    margin-top: 80px;
    margin-bottom: 20px;
}

/* 중앙 이미지 */
.epikpimg {
    display: block;
    position: relative;
    margin: 250px auto 200px auto; /* 상단 카드 아래 간격 */
    width: 540px;
    max-width: 100%;
    height: auto;

}

/* 하단 한 줄 카드 */
.kpthree {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48%;
    text-align: left;
    margin-top: 100px;
}

.kpfour {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48%;
    text-align: right;
    margin-top: 100px;
}

/* 카드 텍스트 */
.kponetext h2 {
    font-size: 2rem;

    color: #fff;
}

.kponetext p {
    font-size: 1rem;
    line-height: 1.5;

}

/* 반응형: 모바일에서는 카드 세로 배치 */
@media (max-width: 1024px) {

  .kpone,
  .kptwo,
  .kpthree,
  .kpfour {
    position: static;
    /* absolute 해제 */
    width: 100%;
    /* 한 줄 전체 차지 */
    text-align: center;
    /* 가운데 정렬 */
    margin: 20px 0;
    /* 위아래 간격 */
  }

  .epikpimg {
    max-width: 90%;
    margin: 40px auto;
    /* 가운데 배치 */
  }

  .kponetext h2 {
    font-size: 2.2rem;
  }

  .kponetext p {
    font-size: 1.9rem;
  }
}


.content-two-prologue-text h1 {
    text-align: center;
    font-size: 2.5rem;
    color: #fab001;
}

.content-two-prologue-cards {
  display: flex;
  flex-direction: column; /* 위 아래 줄 구분 */
  gap: 1rem;
  align-items: center;
}

/* 윗줄 3개, 아랫줄 4개 */
.ctp-card-one,
.ctp-card-two {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap; /* 화면 줄어들면 자동 줄바꿈 */
  gap: 360px;
}
.ctp-card-two {
    margin-bottom: 50px;
}
.ctp-card-one > div,
.ctp-card-two > div {
  flex: 0 0 auto;
  width: 350px;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #180083;
  border-radius: 8px;

}

.content-two-prologue-card-text {
  position: relative;
  text-align: center;
  padding: 0 10px;
  color: #fff;
}

.content-two-prologue-card-text p {
  text-align: left;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
}
/* 1024px 이하 모바일 */
@media (max-width: 1024px) {
  .ctp-card-one,
  .ctp-card-two {
    flex-direction: column; /* 한 줄씩 세로로 */
    gap: 1rem;
    align-items: center;
  }

  .ctp-card-one > div,
  .ctp-card-two > div {
    width: 90%;  /* 화면 폭에 맞춤 */
  }
.content-two-prologue-card-text p {
  font-size: 1.5rem;
}
.content-two-prologue-card-text h3 {
  font-size: 1.8rem;
}

}


/* 컨테이너 */

.pricing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 중앙 정렬 */
  gap: 20px;
  
}

.epiloguetwo-text h1 {
  font-size: 2.5rem;

}
/* 개별 박스 */
.pricingone, .pricingtwo, .pricingthree, .pricingfour {
  position: relative;
  flex: 0 1 400px; /* 가로 450px */
  overflow: hidden;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  
}

/* 이미지 */
.pricingimg {
  width: 100%;       /* 부모 가로 꽉 채움 */
  height: 450px;      /* 세로 비율 자동 */
  display: block;
  object-fit: cover;
}

/* 오버레이 텍스트 */
.pricingtext {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.pricingtext h2 {
  margin-bottom: 10px;
  text-align: center;
}

.pricingtext p {
  margin: 5px 0;
  text-align: left;
}

/* 반응형 */
@media (max-width: 1024px) {
  .pricingone, .pricingtwo, .pricingthree, .pricingfour {
    flex: 1 1 100%;
    max-width: 100%;

  }
.pricingtext h2 {
  margin-bottom: 10px;
  text-align: center;
  font-size: 2.5;
}

.pricingtext p {
  margin: 5px 0;
  text-align: left;
  font-size: 2rem;
}

.pricingimg {
  height: 100%;
}


}


/* 공통 스타일 */
.episodetwo {
  background-color: #000;
  padding: 40px 20px;
  margin-top: 50px;
}

.episodetwotext {
  text-align: center;
  margin-bottom: 30px;
}

.episodetwotext h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
}

/* epihmo 컨테이너: flex 적용 */
.epihmo {
  display: flex;
  flex-wrap: wrap; /* 화면이 작아지면 다음 줄로 */
  gap: 45px;       /* 카드 간격 */
  justify-content: center;
  height: auto;
  margin-bottom: -50px;

}

/* 각 hmo 박스 */
.hmoone, .hmotwo, .hmothree, .hmofour {
  width: 450px;
  background-color: #000;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* 살짝 그림자 */
  overflow: hidden;
  height: auto;

}

.hmoonetext h2 {
  margin-top: 15px;
  font-size: 1.5rem;
}

.hmoonetext p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0;
  text-align: left; /* ← 왼쪽 정렬 추가 */
}

/* 이미지 + 비디오 공통 */
.hmoimg {
  width: 100%;
  height: 400px;
  object-fit: cover;
  margin-bottom: 15px;
  display: block;
  border-radius: 15px !important;
}


/* 반응형 - 1024px 이하: 모바일 세로 정렬 */
@media (max-width: 1024px) {
  .epihmo {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .hmoone, .hmotwo, .hmothree, .hmofour {
    width: 100%; /* 한 줄 꽉 차게 */
  }
.hmoonetext h2 {
  font-size: 2.5rem;
}

.hmoonetext p {
  font-size: 2rem;
}


}


/* 전체 카드 컨테이너 */
.pricingtext-event {
  margin-bottom: 5px;

}
.pricingtext-event h2{
  color: #fc0101;
}
.pricingline-event {
    display: flex;
    flex-wrap: wrap;       /* 화면 작으면 아래로 줄바꿈 */
    gap: 20px;             /* 카드 간 간격 */
    justify-content: center;
    margin-top: 20px;
    color: #fff;
    
}

/* 각 카드 스타일 */
.pricinglinecard-event {
    flex: 1 1 calc(20% - 20px); /* 5개 카드 가로 배치 */
    max-width: 320px;            /* 최대 폭 */
    background-color: #000;   /* 카드 배경 */
    border-radius: 12px;         /* 둥근 테두리 */
    padding: 15px;
    border: 2px solid #fff; /* 추가: 테두리, 색상과 두께 조정 가능 */
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* hover 효과 */
    margin-bottom: 30px;
}

/* 카드 hover 효과 */
.pricinglinecard-event:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

/* 카드 제목 */
.pricinglinecard-event h3 {
    font-size: 1.5rem; /* 제목 글자 크기 */
    margin-bottom: 10px;
    text-align: center;
    color: #fff;
}

/* 이모지 스타일 */
.emojievent {
    font-size: 2rem;        /* 이모지 크기 */
    vertical-align: middle; /* 텍스트 중앙 정렬 */
}

/* 카드 내용 */
.pricinglinecard-event p {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 6px;
}

/* 반응형: 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .pricinglinecard-event {
        flex: 1 1 calc(50% - 20px); /* 2열로 표시 */
        margin-bottom: 80px;
    }
}



/*===============================
   경영선언문 전체 컨테이너 start
================================= */
.content-three-prologue {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
  font-family: "Noto Sans KR", sans-serif;
  line-height: 1.6;
  color: #fff;
  text-align: center;
}

/* ===============================
   비디오
================================= */
.cthrp-one {
  position: relative;
  width: 100%;
  height: 650px; /* 비디오 높이 지정, 필요에 따라 조정 */
  overflow: hidden;
  border: 5px solid #fff; /* 흰색 테두리, 두께 5px */
  box-sizing: border-box;  /* 테두리 포함해서 크기 계산 */
  border-radius: 12px;

}

.cthrp-one video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* 화면 비율 유지 */
  border-radius: 12px;
}

/* ===============================
   본문 (영상 위 오버레이)
================================= */
.cthrp-two {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  padding: 20px;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
  height: auto;

}

.cthrp-twoh1 h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.cthrp-twoh2 h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.cthrp-twoh3 h3 {
  font-size: 1.7rem;
  font-weight: normal;
  margin-bottom: 15px;
  color: #fbcd02;
}

.cthrp-twoh4 h4 {
  font-size: 1.3rem;
  font-weight: normal;
}

/* ===============================
   서명 (오버레이)
================================= */
.cthrp-three {
  position: absolute;
  bottom: 10%;
  right: 5%;
  text-align: right;
}

.cthrp-signature h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}

.signature-line {
  font-family: 'Gamja Flower', cursive, sans-serif; /* 엽서체 */
  font-size: 2.2rem;
  color: #fbcd02;
  margin-top: 5px;
  letter-spacing: 1px;
  font-style: italic;         /* 약간 기울이기 */
  display: inline-block;      /* 회전 적용 가능하게 */
  transform: rotate(-1deg);   /* 왼쪽으로 살짝 기울임 */
}

/* ===============================
   반응형
================================= */
@media (max-width: 1024px) {
  .cthrp-two {
    top: 12%;
    width: 90%;
    padding: 10px;
    height: auto;


  }
  .cthrp-three {
    margin-bottom: -30px;
    height: auto;

  }
    .cthrp-signature {
      margin-top: 50xp;

    }

  .cthrp-twoh1 h1 { font-size: 2.2rem; }
  .cthrp-twoh2 h2 { font-size: 2rem; }
  .cthrp-twoh3 h3 { font-size: 1.8rem; }
  .cthrp-twoh4 h4 { font-size: 1.2rem; }

  .cthrp-signature h2 { font-size: 1.8rem;
  margin-bottom: -10px; }
  .signature-line { font-size: 1.8rem; }

}


/*===============================
   경영선언문 전체 컨테이너 end
================================= */

/* 전체 컨테이너 */
.epiloguethree {
    width: 100%;
    padding-top: 30px;
    box-sizing: border-box;
    text-align: center; /* 전체 중앙 정렬 */
}

/* 제목 */
.epiloguetwo-text h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

/* 카드 그룹: 한 줄에 4개, 가로 정렬, 중앙 정렬 */
.eifa-one-line,
.eifa-two-line {
    display: flex;
    justify-content: center; /* 카드들을 중앙으로 */
    align-items: center;
    gap: 20px; /* 카드 간 간격 */
    flex-wrap: wrap; /* 화면이 좁으면 다음 줄로 */
    margin-bottom: 30px;
}

/* 각 카드: 비디오 + 텍스트 가로 배치 */
.eifa-one, .eifa-two, .eifa-three, .eifa-four {
    display: flex;           /* 가로 배치 */
    justify-content: center; /* 카드 내부 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 */
    width: 800px;
    border-radius: 15px;
}

.eifa-one {
    background: linear-gradient(to right, #0e02fc,#000); /* 좌→우로 회색→검정 */
    
}
.eifa-two {
    background: linear-gradient(to right, #000, #01f701); /* 좌→우로 회색→검정 */
    
}
.eifa-three {
    background: linear-gradient(to right, #000, #f74701); /* 좌→우로 회색→검정 */
    
}
.eifa-four {
    background: linear-gradient(to right, #00eaff, #000); /* 좌→우로 회색→검정 */
    
}

/* 비디오 */
.eifa-one-video {
    width: 350px;             
    height: 350px;
    object-fit: cover;
    display: block;
}

/* 텍스트 */
.eifatext {
    width: 550px;
    height: 350px;
}

.eifatext h2 {
    font-size: 1.5rem;
    text-align: center;
}

.eifatext p {
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    padding-left: 15px;
    margin-bottom: 10px;
}

.eifa-two p {
  text-align: right;
  padding-right: 15px;

}

.eifa-three p {
  text-align: left;
  }
.eifa-four p {
  text-align: right;
  }
/* 반응형: 1024px 이하 */
@media (max-width: 1024px) {
    .eifa-one, .eifa-two, .eifa-three, .eifa-four {
        flex-direction: column; /* 세로로 쌓임 */
        width: 45%;             /* 한 줄 2개 */
        height: auto;
    }

    .eifa-one-video, .eifatext {
        width: 100%;
        height: auto;
    }

    .eifatext {
        text-align: center;
    }

        .eifa-one-line h2 {
          font-size: 2rem;
        }
                .eifa-one-line p {
                  font-size: 1.8rem;
                }
                .eifa-two-line h2 {
                  font-size: 2rem;
                }
        
                .eifa-two-line p {
                  font-size: 1.8rem;
                }

}



/* esg라인 공통 버전*/
/* --------------------------
   EPISODE 제목 블록
--------------------------- */
.episodethreetextone {
  text-align: center;      
  margin: 10px auto 10px;  
  max-width: 900px;
          
}

.episodethreetextone h1 {
  position: relative;
  display: inline-block;  /* 텍스트 중심 */
  font-size: 2.5rem;
  font-weight: bold;
  padding-bottom: 8px;
  margin-bottom: 15px;
  text-align: center;
  

}

/* 밑줄 생성 */
.episodethreetextone h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;            /* 글자 폭에 딱 맞춤 */
  height: 3px;            /* 두께 */
  background-color: #fff; /* 색상 */
}


/* --------------------------
   EPISODE 설명 블록
--------------------------- */
.episodethreetexttwo {
  text-align: center;      
  margin: 0 auto 50px;     
  max-width: 910px;        
}

.episodethreetexttwo h3 {
  font-size: 1.2rem;
  line-height: 1.6;      
  color: #fff;           
  margin: 0 auto;
  max-width: 910px;
  margin-bottom: -20px;      
}

/* --------------------------
   모바일 반응형 (1024px 이하)
--------------------------- */
@media (max-width: 1024px) {
  .episodethreetextone h1 {
    font-size: 2.5rem;

  }
  .episodethreetextone h1::after {
    height: 2.5px;  /* 필요시 두께 조정 */
  }

  .episodethreetexttwo h3 {
    font-size: 1.8rem;          /* 본문 축소 */
    line-height: 1.4;         
    max-width: 95%;           /* 화면에 맞게 너비 조절 */
  }

  .episodethreetextone,
  .episodethreetexttwo {
    margin-left: 10px;
    margin-right: 10px;       /* 좌우 여백 최소화 */
  }
}
/*esg라인 공통 버전 end*/

/*esg라인 body line start*/

.envirmgmtactive {
    margin-bottom: -30px;
}
.envirmgmtone, .envirmgmttwo {
    display: flex;
    flex-wrap: wrap;        /* 화면 좁아지면 자동 줄바꿈 */
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
    gap: 30px;              /* 카드 간 간격 */
    padding: 20px 0;
}

/* 카드 단위 */
.envirmgmtone-card {
    flex: 1 1 calc(33.333% - 20px); /* 한 줄 3개 */
    display: flex;
    flex-direction: column;          /* 내부 세로 정렬 유지 */
    box-sizing: border-box;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #000;         /* 회색 실선, 두께 2px */
    background-color: #016701;    

}

/* h3 제목 중앙 + 밑줄 */
.envirmgmtone-card h3 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    position: relative;
    display: inline-block;
}
.envirmgmtone-card h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background-color: #fff;
}

/* 이모지 중앙 */
.envirmgmtone-card .emoji {
    text-align: center;
    font-size: var(--emoji-size, 4rem); /* CSS 변수로 크기 조절 */
    margin: 10px 0;
    display: inline-block;
}

/* h4 본문 좌측 정렬 */
.envirmgmtone-card h4 {
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    margin: 10px 0 0 0;
    color: #fff;
    font-weight: 400;
}

/* 반응형: 1024px 이하 한 줄 2개 */
@media (max-width: 1024px) {
    .envirmgmtactive h2 {
        font-size: 2.2rem;
    }
    .envirmgmtone-card {
        flex: 1 1 calc(50% - 20px);
    }

    .emoji {
        font-size: var(--emoji-size-mobile, 3rem);
    }

    .envirmgmtone-card h3 {
        font-size: 1.8rem;
    }

    .envirmgmtone-card h4 {
        font-size: 1.5rem;
    }
}

.envirmgmttwo {
    display: flex;
    flex-wrap: wrap;           /* 화면 좁아지면 줄바꿈 */
    justify-content: space-between; 
    max-width: 1600px;
    margin: 0 auto;
    gap: 20px;                 /* 카드 간 간격 */
}

.envirmgmttwo-card {
    flex: 1 1 calc(25% - 20px); /* 한 줄에 4개, 필요시 3개로 변경 가능 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 2px solid #ccc;    /* 카드 테두리 */
    border-radius: 10px;
}

.envirmgmttextthree h3 {
    text-align: center;         /* 제목 중앙 정렬 */
    margin-bottom: 10px;
}

.envirmgmttextfour h4 {
    text-align: left;
    color: #fff;
}

/* 이미지 */
.envirmgmt-img {
    text-align: center;
    margin-bottom: 10px;
}
.envirmgmtimg {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* 모바일 반응형 (1024px 이하) */
@media (max-width: 1024px) {
    .envirmgmttwo-card {
        flex: 1 1 calc(50% - 20px); /* 한 줄 2개 */
    }
        .envirmgmttextthree h3 {
            font-size: 1.8rem;
        }
                .envirmgmttextfour h4 {
                    font-size: 1.5rem;
                }
}

.org-chart {
    width: 90%;
    max-width: 1500px;
    margin: 0px auto 50px;
    text-align: center;
    font-family: "Noto Sans KR", Arial, sans-serif;
    position: relative; /* 부모 기준 위치 */   
    
}

.org-chart h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;    
}

/* ----------------- 단계별 조직체계 ----------------- */
.org-step {
    position: relative;    
    margin: 0px auto 50px;   
}


.org-step .circle {
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background-color: #d0d2ee;
    display: inline-block;
    font-size: 2rem; /* 숫자 변경 금지 */
    text-align: center;
    vertical-align: middle;
    margin-bottom: 10px;

}

.org-step p {
    font-size: 1rem;
    margin: 0 auto;
}

/* 단계별 세로 연결선 */
.org-step:not(:last-child)::after {
    content: '';
    display: block;
    width: 6px;
    height: 40px;
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: -50px;
}

/* ----------------- 서브 조직 ----------------- */
.sub-org {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    position: relative; /* 기준 위치 명확 */
}

/* 상위에서 서브 조직으로 연결되는 가로선 */
.sub-org::before {
    content: '';
    position: absolute;
    top: -40px; 
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 */
    width: 100%;
    height: 2px;
    background-color: #fff;
}

/* ----------------- 서브 조직 카드 ----------------- */
.sub-org-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    border: 2px solid #fff;
    border-radius: 12px;
    background-color: #000;
    min-width: 180px;      
    max-width: 180px;      
    min-height: 180px;     
    max-height: 250px;     
    box-sizing: border-box;
    text-align: center;
    
}

/* 카드와 가로선 연결을 위한 세로선 */
.sub-org-item::before {
    content: '';
    position: absolute;
    top: -40px; 
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background-color: #fff;
}

.sub-org-item .circle {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 1.5rem; /* 숫자 변경 금지 */
    
}

/* ----------------- 반응형 ----------------- */
/* 태블릿 이하 */
@media (max-width: 1024px) {
    .org-chart {
        transform: scale(0.9);
        transform-origin: top center;

        
    }
.sub-org-item {
    margin-bottom: -50px;

}
        .sub-org::before {
          width: 120%;
          /* 모바일 화면에 맞게 줄임 */
          left: 50%;
          transform: translateX(-50%);
        }
    .org-chart h3 {
        font-size: 2.2rem;
    }
        .org-chart p{
            font-size: 1.5rem;
        }

}



/* ---------- 전체 래퍼 ---------- */
.safetyline {
  width: 100%;
  box-sizing: border-box;
}

.safetyline-one,
.safetyline-two {
  display: flex;
  flex-wrap: wrap;           /* 화면 좁아지면 줄바꿈 */
  gap: 50px;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px;
  box-sizing: border-box;
}

/* ---------- 카드 ---------- */
.safetyline-one > div,
.safetyline-two > div {
  flex: 1 1 calc(33.333% - 50px); /* 기본 3개 */
  box-sizing: border-box;
   border: 2px solid #fff;
  border-radius: 12px;   
  display: flex;
  flex-direction: column;
  min-width: 240px;
  min-height: 500px; /* 카드 최소 높이 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.safetyline-one > div {
  background: linear-gradient(to bottom, #000 0%, #a4f600 100%);
}
.safetyline-two > div {
  background: linear-gradient(to bottom, #fa6501 0%, #000 100%);
}

.safetyline-one > div:hover,
.safetyline-two > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.09);
}

/* ---------- 텍스트 ---------- */
.safetylinetext {
  padding: 6px 2px;
}

.safetylinetext h2 {
  font-size: 1.4rem;
  margin: 0 0 6px 0;
  text-align: left;
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: #fff;
}
.safetyline-a h2 {
  margin-top: 20px;
}
.safetyline-b h2 {
  margin-top: 20px;
}
.safetyline-c h2 {
  margin-top: 20px;
}
.safetyline-d h2 {
  margin-top: 60px;
}
.safetyline-e h2 {
  margin-top: 60px;
}
.safetyline-f h2 {
  margin-top: 60px;
}
.safetylinevideo-one {
  margin-top: 60px;
}

.safetylinetext h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: #fff;
}

.safetylinetext p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #fff;

}

/* ---------- 비디오 ---------- */
.safetyline-video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .safetyline-one > div,
  .safetyline-two > div {
    flex: 1 1 calc(50% - 24px); /* 2개 */
    min-width: 250px;
  }

  .safetylinetext h2 { font-size: 2rem; }
  .safetylinetext p { font-size: 1.5rem; }
}




/* 전체 컨테이너 */
.safetyline-three,
.safetyline-four {
    display: flex;
    justify-content: center; /* 카드들을 중앙으로 */
    align-items: center;
    gap: 20px; /* 카드 간 간격 */
    flex-wrap: wrap; /* 화면이 좁으면 다음 줄로 */
    margin-bottom: 30px;
    width: 100%;
    padding-top: 30px;
    box-sizing: border-box;
    text-align: center;
}

/* 각 카드: 비디오 + 텍스트 가로 배치 */
.safetyline-three-a, 
.safetyline-three-b, 
.safetyline-three-c, 
.safetyline-three-d {
    display: flex;           /* 가로 배치 */
    justify-content: center; /* 카드 내부 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 */
    width: 800px;
    border-radius: 15px;
}

.safetyline-three-a {
    background: linear-gradient(to right, #fc02a4, #000);
}
.safetyline-three-b {
    background: linear-gradient(to right, #000, #01f7a5);
}
.safetyline-three-c {
    background: linear-gradient(to right, #000, #f7f701);
}
.safetyline-three-d {
    background: linear-gradient(to right, #a600ff, #000);
}

/* 비디오 */
.safetyline-three-video {
    width: 350px;             
    height: 350px;
    object-fit: cover;
    display: block;
}

/* 텍스트 */
.safetyline-three-text {
    width: 550px;
    height: 350px;
}

.safetyline-three-text h2 {
    font-size: 1.5rem;
    text-align: center;
}

.safetyline-three-text p {
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    padding-left: 15px;
    margin-bottom: 10px;
}

.safetyline-three-b p {
  text-align: right;
  padding-right: 15px;
}

.safetyline-three-c p {
  text-align: left;
}

.safetyline-three-d p {
  text-align: right;
}

/* 반응형: 1024px 이하 */
@media (max-width: 1024px) {
    .safetyline-three-a, 
    .safetyline-three-b, 
    .safetyline-three-c, 
    .safetyline-three-d {
        flex-direction: column; /* 세로로 쌓임 */
        width: 45%;             /* 한 줄 2개 */
        height: auto;
    }

    .safetyline-three-video, 
    .safetyline-three-text {
        width: 100%;
        height: auto;
    }

    .safetyline-three-text {
        text-align: center;
    }

        .safetyline-three-text h2 {
          font-size: 2rem;
        }
                .safetyline-three-text p {
                  font-size: 1.5rem;
                }
}


/* ---------- 윤리경영라인 ---------- */
.ethicslineone {   /* 첫 줄 3개 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  padding-left: 15%;
  padding-right: 15%;
  margin-top: 50px;
}

.ethicsline-two { /* 두 번째 줄 5개 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding-left: 15%;
  padding-right: 15%;
  margin-bottom: 50px;
}

/* ---------- 카드 공통 스타일 ---------- */
.ethicslineone-a,
.ethicslineone-b,
.ethicslineone-c,
.ethicslineone-d,
.ethicslineone-e,
.ethicslineone-text-core {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  height: 400px;
  background: #000;
}

/* ---------- 비디오 ---------- */
.ethicslineone-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}
/* 어두운 레이어 */
.ethicsvideo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* 어둡게 (0.3~0.6 조절 가능) */
  z-index: 1;
}
/* ---------- 오버레이 텍스트 ---------- */
.ethicslineone-text {
  position: absolute;
  bottom: 0;
  left: 15%;   /* 좌측 패딩 */
  right: 15%;  /* 우측 패딩 */
  color: #fff;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  animation: scrollUpLines 50s linear infinite;
  width: auto; /* 좌우 padding을 left/right로 처리 */
  z-index: 5;
}

@keyframes scrollUpLines {
  0%   { transform: translateY(100%); }   /* 카드 아래에서 시작 */
  100% { transform: translateY(-100%); }  /* 카드 위 밖으로 끝까지 올라감 */
}

.ethicslineone-text p {
  text-align: left;
}

/* ---------- HOME PAGE 중앙 텍스트 ---------- */
.ethicslineone-text-core h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #fff;
  text-align: center;
  animation: fadeInOut 6s infinite;
}

@keyframes fadeInOut {
  0%, 20%   { opacity: 1; }
  50%, 70%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .ethicslineone, 
  .ethicsline-two {
    grid-template-columns: 1fr; /* 한 줄에 하나씩 */
    width: 100%;
    padding-left: 0;   
    padding-right: 0;
    gap: 10px;
  }
  .ethicslineone-text-core{
    display: none;
  }
    .ethicslineone h2{
      font-size: 2rem;
    }
                .ethicslineone p {
                    font-size: 1.5;
                }
        .ethicsline-two h2 {
          font-size: 2rem;
        }
    
        .ethicsline-two p {
          font-size: 1.5;
        }

.ethicslineone-a h2,
.ethicslineone-b h2,
.ethicslineone-c h2,
.ethicslineone-d h2,
.ethicslineone-e h2 {
  font-size: 2.2rem;
}
.ethicslineone-a p,
.ethicslineone-b p,
.ethicslineone-c p,
.ethicslineone-d p,
.ethicslineone-e p {
  font-size: 1.5rem;
}


}



/* 윤리 실행 02 */
.epiethicsline {
  display: flex;
  flex-wrap: wrap; /* 화면 작아지면 다음 줄로 */
  justify-content: space-between;
  margin: 0 20%; /* 좌우 여백 */
  gap: 20px; /* 카드 간격 */
  box-sizing: border-box;
  margin-top: 50px;
}

/* 각 카드 */
.epiethicsline-one,
.epiethicsline-two,
.epiethicsline-three,
.epiethicsline-four {
  flex: 1 1 calc(25% - 15px); /* 4장 한 줄 */
  box-sizing: border-box;
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid #fff; /* ← 흰색 테두리 추가 */
}

/* 카드 내 텍스트 */
.epiethicsline-text {
  padding: 20px;
  flex: 1; /* 카드 높이 맞춤 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}

/* 카드 비디오 */
.epiethicsline-img{
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-bottom: 1px solid #333;
  border-radius: 12px;
}

/* 제목 */
.epiethicsline-text h2 {
  margin: 15px 0 10px;
  font-size: 1.5rem;
  text-align: center;
}

/* 본문 */
.epiethicsline-text p {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 5px 0;
}

/* 반응형 */
@media screen and (max-width: 1024px) {
  .epiethicsline-one,
  .epiethicsline-two,
  .epiethicsline-three,
  .epiethicsline-four {
    flex: 1 1 100%; /* 한 줄에 하나씩 */
    margin-bottom: 20px; /* 카드 간 세로 간격 */
  }

  .epiethicsline {
    margin: 50px 0 0 0; /* 좌우 여백 제거 */
    gap: 20px;          /* 카드 간격 유지 */
  }

    .epiethicsline-text h2 {
      font-size: 2rem;
    }
        .epiethicsline-text p {
          font-size: 1.5rem;
        }


}





.contentfive {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
  max-width: 1800px;
  margin: 0px auto;
  height: auto;
  background: linear-gradient(90deg, #000, #029e07, #021ff8, #000);
  padding: 30px;
  margin-top: 50px;

}
.humancard {
  width: 450px;
  height: 400px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  background-color: #000;
  padding: 10px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: #fff;
}
.humancard img {
  width: 420px;
  height: 250px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-bottom: 1px solid #000;
  border-radius: 8px;

}
.humancard h3 {
  margin: 10px 0 5px 0;
  font-size: 1.5rem;
  color: #fff;
}
.humancard p {
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: #fff;
}
.humancard:hover {
  transform: translateY(-5px);
}

/* 반응형 */
@media (max-width: 1024px) {
  .humancard {
    width: 100%;
    height: auto;
    
  }
  .humancard img {
    width: 100%;

  }
.humancard h3 {
  font-size: 2rem;
}
.humancard p {
  font-size: 1.5rem;

}

}

.humanlaw {
    background-color: #000; /* 배경색 */
    padding: 20px 40px;
    margin: 20px auto;
    max-width: 1000px; /* 최대 너비 */
    text-align: center;
    border-radius: 12px;
    margin-top: 50px;
    margin-bottom: -50px;
    
}

.humanlaw a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.humanlaw p {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
/* 반응형 설정 */
@media screen and (max-width: 1024px) {
    .humanlaw {
        padding: 15px 20px;
        height: auto;
    }

    .humanlaw a {
        font-size: 2rem;
    }

        .humanlaw p {
          font-size: 1.5rem;
        }
}


.humanlaw-copy {
    background-color: #000; /* 배경색 */
    padding: 20px 40px;
    margin: 20px auto;
    max-width: 1000px; /* 최대 너비 */
    text-align: center;
    border-radius: 10px;
    margin-top: -50px;
    margin-bottom: -50px;
}
.humanlaw-copy a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.humanlaw-copy p {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

/* 반응형 설정 */
@media screen and (max-width: 1024px) {
    .humanlaw-copy {
        padding: 15px 20px;
    }

    .humanlaw-copy a {
        font-size: 2rem;
    }
    .humanlaw-copy p {
    font-size: 1.5rem;
    }
}

/* 카드 컨테이너 */
.contentfive-end {
    display: flex;
    flex-wrap: wrap; /* 모바일에서 줄 바꿈 */
    gap: 20px; /* 카드 사이 간격 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 10px;
    margin-bottom: px;
    margin-top: -30px;
}

/* 카드 개별 스타일 */
.fivecard {
    background-color: #000; 
    border-radius: 12px;
    padding: 20px 15px;
    flex: 1 1 calc(30% - 20px); /* 한 줄에 3개 */
    text-align: center;
    min-width: 250px;
    border: 2px solid #ffffff; /* 하얀색 테두리, 두께 2px */
}

.fivecard .emoji-icon {
    font-size: 80px;
    margin-bottom: 15px;
}

.fivecard h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;

}

.fivecard p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* 모바일: 한 줄에 1개 */
@media screen and (max-width: 1024px) {
    .fivecard {
        flex: 1 1 100%;
        padding: 10px;
        height: auto;
          /* 화면 가로폭에 맞춤 */
    }

    .fivecard h3 {
        font-size: 2rem;
    }

    .fivecard p {
        font-size: 1.5rem;
    }

    .contentfive-end {
    margin-bottom: 50px;
}


}

/* 카드 버튼 기본 스타일 */
.fivecard button {
  margin-top: 12px;
  padding: 10px 16px;
  background-color: #0073e6;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 16px;
  font-weight: 700;
}

/* 버튼 호버 효과 */
.fivecard button:hover {
  background-color: #0009b5;
}

/* 반응형: 모바일에서 버튼 폰트 작게, 폭 100% */
@media (max-width: 1024px) {
  .fivecard button {
    width: 100%;
    font-size: 14px;
    padding: 8px 12px;
  }
}

/*esg라인 body line end*/


/* 갤러리 영역 */
.content-fore-prologue,
.content-fore-epilogue,
.content-fore-episode {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 30px;
}
.content-fore-epilogue {
  display: none;
}

/* 개별 카드 공통 */
.content-fore-text {
  border-radius: 12px;
  margin: 0 auto 20px auto; /* 중앙 정렬 + 아래 여백 */
  text-align: center;
}

/* 텍스트 */
.content-fore-text h1 {
  font-size: 2.5rem;
  margin: 0;

}


/* 반응형 - 작은 화면에서는 글자 크기만 줄임 */
@media (max-width: 1024px) {
  .content-fore-text h2 {
    font-size: 2.5rem;
  }
    .content-fore-epilogue {
      display: none;
    }
        .content-fore-prologue h2 {
          font-size: 2.5rem;
        }

}

/* 이미지 전체 영역 */
.content-fore-imgline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 1800px;
  margin: 20px auto;
}
.content-fore-imgs {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.25s ease;
}
.content-fore-imgs:hover {
  transform: scale(1.05);
}
@media (max-width: 1024px) {
  .content-fore-imgline {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 모달 배경 */
.content-fore-imgline-imgmodal {
  display: none; /* 처음 숨김 */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 40%;
  background-color: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%); /* 중앙 정렬 */
  z-index: 10;
  border-radius: 12px;
}


/* 모달 이미지 */
.content-fore-img-modal {
  width: 700px;       /* 고정 가로 */
  height: 550px;
  transform: scale(1); /* 클릭 시 300% 확대 */
  border-radius: 12px;
  transition: transform 0.3s ease;
  object-fit: cover;
}

/* 닫기 버튼 */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
.close:hover {
  color: #5744ff;
}

/* 반응형: 화면 1024px 이하에서 모달 이미지 축소 */
@media (max-width: 1024px) {
  .content-fore-img-modal {
    max-width: 95%;
    max-height: 95%;
    transform: scale(2); /* 모바일에서는 확대 정도 낮춤 */
  }
}

/* 전체 비디오 영역 */
.content-fore-videoline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 1800px;
  margin: 20px auto;
}

/* 개별 비디오 */
.content-fore-video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

/* 호버 효과 */
.content-fore-video:hover {
  transform: scale(1.05);
}

/* 반응형: 1024px 이하에서 한 줄에 3개씩 표시 */
@media (max-width: 1024px) {
  .content-fore-videoline {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* 전체 이모지 라인 */
.content-fore-emojiline {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* 최소 폭 120px, 최대 1fr */
    gap: 30px;
    max-width: 1200px;
    margin: 0px auto;
    justify-content: center;
    /* 한 줄 전체 중앙 */
    justify-items: center;
    /* 각 아이템 중앙 */
    align-items: center;
    /* 각 아이템 세로 중앙 */
    margin-top: 20px;
    margin-bottom: 20px;

}

/* 개별 이모지 */
.emoji-icon {
  font-size: 8rem;      /* 아이콘 크기 */
  text-align: center;     /* 중앙 정렬 */
  cursor: pointer;        /* 마우스 커서 */
  transition: transform 0.25s ease, color 0.25s ease;
  margin-top: -30px;
}

/* 호버 효과 */
.emoji-icon:hover {
  transform: scale(1.3);  /* 확대 */
  color: #5744ff;         /* 색상 변경 (원하면 바꿀 수 있음) */
}

/* 반응형: 1024px 이하에서 한 줄에 3개씩 */
@media (max-width: 1024px) {
  .content-fore-emojiline {
    grid-template-columns: repeat(3, 1fr);
  }
  .emoji-icon {
    font-size: 2rem; /* 모바일에서 약간 축소 */
  }
}

/* 컨테이너 */
.reprologue {
  padding: 20px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 버튼 기본 스타일 */
.reprologuebutton {
  position: relative;
  padding: 16px 28px;
  border-radius: 16px;
  background-color: #0009b5;
  border: 2px solid #fff;
  width: 100%;
  max-width: 1200px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 위에서 내려오는 빛 반사 */
.reprologuebutton::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 300%;
  height: 300%;
  background: linear-gradient(-120deg,
      rgba(255, 255, 255, 0.508) 50%,
      rgba(251, 249, 249, 0.75) 80%,
      rgba(255, 255, 255, 0.429) 50%);
  transform: rotate(-45deg);
  pointer-events: none;
  opacity: 0.5;
  animation: shine 6s linear infinite;
  
  /* 반복 애니메이션 */
}

/* 애니메이션 정의 */
@keyframes shine {
  0% {
    left: -150%;
  }

  100% {
    left: 150%;
  }
}

/* 버튼 텍스트 */
.reprologuebutton h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 400;
  color: #fff;
  text-align: center;
  pointer-events: none;
}

/* hover 시 살짝 떠오르기 */
.reprologuebutton:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px #fff;
}

/* 반응형 1024px 이하 */
@media (max-width: 1024px) {
  .reprologuebutton {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
  }

  .reprologuebutton h1 {
    font-size: 1.5rem;
  }
  .reprologue {
    display: none;
  }
}




/* 갤러리 영역 */

/* ---------- 회사정보 영역 ---------- */
.content-five-prologue {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.content-five-text h1 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
  font-weight: 700;
}

/* iframe 지도 */
.content-five-prologue iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 12px;
}

/* ---------- EPILOGUE: 대중교통 이용 안내 ---------- */
.content-five-epilogue {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
}

.content-five-text h1 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  font-weight: 700;
}

.bus-info {
  margin-top: 30px;
}

.bus-info h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.bus-desc {
  font-size: 1rem;
  margin-bottom: 20px;
}

/* 버스 카드 그리드 */
.bus-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 한 줄에 5개 */
  gap: 15px;
}

/* 개별 카드 */
.bus-card {
  background-color: #000;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}

.bus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.bus-card span {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  color: #fff;
}

/* ---------- EPISODE: 회사정보 ---------- */
.content-five-episode h1 {
  font-size: 2.5rem;
  text-align: center;
  margin: 20px 0 20px 0;
  color: #fff;
  font-weight: 700;
}

/* ---------- 반응형: 1024px 이하 ---------- */
@media (max-width: 1024px) {
  .bus-grid {
    grid-template-columns: repeat(3, 1fr); /* 모바일: 한 줄에 3개 */
  }

  .content-five-prologue iframe {
    height: 300px; /* 지도 높이 축소 */
  }

  .content-five-text h1,
  .content-fore-text h1,
  .content-five-episode h1 {
    font-size: 2.5rem;
  }

  .bus-info h2 {
    font-size: 2rem;
  }
    .bus-info p {
      font-size: 1.5rem;
    }
  .bus-card {
    font-size: 1.5rem;
    padding: 10px;
  }

  .bus-card span {
    font-size: 1.2rem;
  }
}


/* homepagefooter 마지막 라인 탑*/
/* =========================
   홈페이지 footer-top
========================= */
.homepagefooter-top {
  padding: 1px 20px;
  margin-bottom: 100px;
  margin-top: -85px;
}

.homepagefooter-top-text h1 {
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 300;
}

/* =========================
   카드 컨테이너
========================= */
.homepagefooter-top-box {
  display: flex;
  justify-content: center;
  gap: 120px;
  flex-wrap: wrap;
  /* 화면 작아지면 아래로 내려감 */
}

.homepagefooter-top-box-one,
.homepagefooter-top-box-two,
.homepagefooter-top-box-three {
  padding: 20px;
  border-radius: 16px;
  min-width: 220px;
  max-width: 400px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 15px #fff;
  transition: transform 0.3s;
}

.homepagefooter-top-box-one:hover,
.homepagefooter-top-box-two:hover,
.homepagefooter-top-box-three:hover {
  transform: translateY(-5px);
}

.homepagefooter-top-box h2 {
  margin-bottom: 15px;
  font-weight: 300;
}
.homepagefooter-top-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 버튼을 가운데 정렬 */
}
.homepagefooter-top-sub button:hover {
  transform: translateY(-5px);
}

/* =========================
   버튼 스타일 + 빛 애니메이션
========================= */
.homepagefooter-top-sub button {
  position: relative;
  margin: 8px 0;
  padding: 12px 80px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: linear-gradient(135deg,#00ff0d, #0901f8, #0901f8, #00ff0d);
  color: #fff;
  font-weight: 300;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  transition: 0.3s;
  font-size: 1.5rem;
}

.homepagefooter-top-sub button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 25%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.785), rgba(255, 255, 255, 0.3));
  transform: skewX(-25deg);
  animation: shine 5s linear infinite;
  display: none;
}

@keyframes shine {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

/* 버튼 호버 효과 (선택적) */
.homepagefooter-top-sub button:hover {
  background-color: #333;
}

/* =========================
   반응형 1024px 이하
========================= */
@media (max-width: 1024px) {
  .homepagefooter-top-box {
    flex-direction: column;
    align-items: center;
    width: 90%;
    padding: 0 5px;
    /* 좌우 여백 더 최소화 */
    margin: 0 auto;
    box-sizing: border-box;
    gap: 20px;
    /* 카드 사이 간격 줄임 */
  }

  .homepagefooter-top-box-one,
  .homepagefooter-top-box-two,
  .homepagefooter-top-box-three {
    width: 100%;
    min-width: 0;
    /* 최소 너비 제거 */
    max-width: 100%;
    /* 화면 꽉 채우기 */
    margin-bottom: 20px;
    font-size: 2.5rem;
  }

  .homepagefooter-top-sub button {
    width: 500px;
      /* 부모 폭에 맞춤 */
      max-width: 100%;
      /* 최대폭 제한 해제 */
      box-sizing: border-box;
      font-size: 2.5rem;
  }

  .homepagefooter-top-text-logo {
    display: none;
  }
    .homepagefooter-top-text h1{
      font-size: 2.5rem;
      margin-bottom: -50px;
    }
}

.homepagefooter-top-text-logo {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 3rem;
  overflow: hidden;
}

.homepagefooter-top-text-logo h1 span {
  opacity: 0;
  display: inline-block;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

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



/* homepagefooter 마지막 라인 푸터*/
.homepagefooter {
  display: flex;
  background-color: #000;
  flex-wrap: wrap;
  margin-top: -50px;
}
.homepagefooter-left {
  display: flex;
  margin: 0px auto;
  


}
.homepagefooter-right {
  display: flex;
  margin: 0px auto;

}

.hpfooter-imgbox img {
  width: 650px;
  height: 250px;
}
.hpfooterimg img {
  width: 185px;
  height: 185px;
  margin-left: 20px;
}


.hpfooterimg h1 {
  margin-left: -5px; 
  font-size: 2rem;
}

/* 이미지 박스를 오버레이 기준으로 설정 */
.hpfooter-imgbox {
  position: relative; /* 반드시 필요 */
  width: 650px;       /* 이미지와 동일 */
  height: 250px;      /* 이미지와 동일 */
  overflow: hidden;   /* 오버레이가 넘치지 않도록 */
}

/* 오버레이 박스 */
.hpfooteroverlay-text {
  position: absolute;
  top: 0;      /* 이미지 상단 */
  left: 0;     /* 이미지 왼쪽 */
  width: 100%; /* 이미지 가로 전체 */
  height: 100%;/* 이미지 세로 전체 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 세로 중앙 */
  align-items: center;     /* 가로 중앙 */
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 */
  color: #fff;
  box-sizing: border-box;
  border-radius: 0; /* 이미지와 동일 크기로 꽉 채움 */
}

/* 글자 크기 조정 */
.hpfooteroverlay-text h1 {
  font-size: 1.2rem;
  margin: 0 0 5px 0;
  text-align: center;
}

.hpfooteroverlay-text p {
  font-size: 1rem;
  margin: 0 ;
  align-self: flex-start; /* ← 부모 flex에 영향을 받아 왼쪽으로 */
  text-align: left;
  padding-left: 80px;  
}
.homepagefooter-right p {
  align-self: flex-end; /* flex 아이템 중 세로 축 기준 오른쪽으로 이동 */
  text-align: right;    /* 텍스트 자체 오른쪽 정렬 */
  margin: 0;
  margin-right: 60px;
}

.hpfooter-imgone {
  border-radius: 20px 0 0 20px;
}

.hpfooter-imgfour {
  border-radius: 0 20px 20px 0;
}


@media (max-width: 1024px) {
  .homepagefooter {
    flex-direction: column;
    align-items: center;
  }

        .homepagefooter h1{
          font-size: 2rem;
        }
        .homepagefooter p {
          font-size: 1.5rem;
        }

  .homepagefooter-left,
  .homepagefooter-right {
    flex-direction: column;   /* 세로로 쌓기 */
    width: 100%;
    align-items: center;
    height: auto;

  }

  .hpfooter-imgbox {
    width: 100%;
    max-width: 650px;
    margin-bottom: 15px;      /* 줄 간격 */
    height: auto;

  }

  .hpfooter-imgbox img {
    width: 100%;
    height: auto;

  }

  .hpfooterimg {
    display: none;
  }
}


.bus-card::first-line {
  font-size: 2rem;
  /* 이모지 크기 조절 */
}

@media (max-width: 1024px) {
  .shine {
    animation: none !important;
  }
}