@charset "UTF-8";
.subsection {display: flex; gap: 10%;}
.sticky{position: -webkit-sticky; position: sticky; top: 250px;}
.content {margin: 0 auto; padding:0px 5% 50px 5%; font-size: 18px;}
.content .content_title {font-size: 2.2rem; margin-bottom: 50px; font-weight: 700; text-align: center;}
.sub_content {padding:0px 0%;}


/* 인사말 */
.greeting-section {
/*   margin: 60px auto; */
 /*  padding: 40px 0; */
  display: flex;
  justify-content: center;
}

.greeting-content {
  display: flex;
  align-items: flex-start;                             
  justify-content: center;
  gap: 100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .greeting-content {
    flex-direction: column;
    gap: 20px; /* 모바일에서는 간격 줄이기 */
  }
}

/* 왼쪽 이미지 */
.greeting-image {
  flex-shrink: 0;
  width: 40%;
}

.greeting-image img {
  width: 100%;
  height: auto;
  max-height: 750px;
  object-fit: cover;
  border-radius: 10px;
  max-width: 100%;
}

/* 반응형 (태블릿) */
@media (max-width: 1024px) {
  .greeting-image img {
    max-height: 350px;
  }
}

/* 모바일에서 자동 축소 */
@media (max-width: 768px) {
  .greeting-image img {
    width: 100%;
    height: auto;
    max-height: 300px;
    aspect-ratio: 5 / 7;
  }
}

/* 아주 작은 화면 */
@media (max-width: 480px) {
  .greeting-image img {
    max-height: 250px;
  }
}

/* 오른쪽 텍스트 */
.greeting-text {
  flex: 1;
  color: #000;
}

.greeting-title {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 30px;
  line-height: 1.4;
}

.greeting-title .highlight {
  color: #004aad;
}

.greeting-description {
  font-size: 18px;
  line-height: 34px;
  position: relative;
}

.greeting-description p {
  margin-bottom: 24px;
}

.greeting-description img {
  position: absolute;
  bottom: -90px;
  right: 0;
  width: 320px;
  height: auto;
  opacity: 0.85;
}

/* -------------------------
   🔹 반응형 (태블릿)
--------------------------*/
@media (max-width: 1024px) {
  .greeting-content {
    gap: 40px;
  }

  .greeting-title {
    font-size: 28px;
  }

  .greeting-description {
    font-size: 17px;
    line-height: 30px;
  }

  .greeting-description img {
    width: 250px;
    bottom: -70px;
  }
}

/* -------------------------
   🔹 반응형 (모바일)
--------------------------*/
@media (max-width: 768px) {
  .greeting-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .greeting-image {
    width: 100%;
    max-width: 400px;
    order: 1;
  }

  .greeting-text {
    order: 2;
  }

  .greeting-title {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .greeting-description {
    font-size: 16px;
    line-height: 28px;
  }

  .greeting-description p {
    margin-bottom: 16px;
  }

  .greeting-description img {
    position: static;
    display: block;
    width: 180px;
    height: auto;
    margin: 25px auto 0;
  }
}

/* -------------------------
   🔹 반응형 (아주 작은 화면)
--------------------------*/
@media (max-width: 480px) {
  .greeting-title {
    font-size: 20px;
  }

  .greeting-description {
    font-size: 14px;
    line-height: 24px;
  }

  .greeting-description img {
    width: 140px;
  }
}

/* ===================== 연혁 ===================== */
.history-section {
  position: relative;
  padding: 60px 0 0px 60px;
}

/* 연혁 컨테이너 - 2열 레이아웃 */
.history-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* 왼쪽 연혁 내용 영역 */
.history-content {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* 타임라인 절대배치 기준 컨테이너 */
.timeline-column { position: relative; }

/* 전체 타임라인 수직선 */
.timeline-line {
  position: absolute;
  left: 80px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #C0C0C0;
}

/* timeline 준비 완료 시 표시 */
body.timeline-ready .timeline-line { opacity: 1; }


/* 연혁 아이템 - 각 연도별 블록 */
.history-item {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 80px;
  margin-left: 40px;
  margin-right: 40px;
  position: relative;
}

/* 왼쪽 연혁 내용 */
.history-item .left {
  flex: 1;
  min-width: 0;
  margin-left: 30px;
}

/* 오른쪽 이미지 영역 */
.history-item .right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-item .right img {
  width: 100%;
  max-width: 500px;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.history-item .right img:hover {
  transform: scale(1.02);
}

/* 오른쪽 이미지 영역 */
.history-image-area {
  flex: 0 0 300px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.history-year-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.history-year-image:hover {
  transform: scale(1.02);
}

/* --- 연도 제목 영역 --- */
.history-year-block {
  position: relative;
  margin-bottom: 40px;
}

.year-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.year-header h2 {
  font-size: 38px;
  font-weight: 800;
  color: #000;
}

.year-circle {
  width: 25px;
  height: 25px;
  border: 2px solid #BDB89A;
  background-color: #FFFFFF;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  left: -1px;
}

/* --- 연혁 리스트 --- */
.history-list {
  margin-top: 40px;
  list-style: none;
}

.history-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}

/* 왼쪽 점 + 가로 점선 */
.dot-wrap {
  position: relative;
  width: 115px; /* 점선+원 포함 */
  flex-shrink: 0;
}

/* 큰 원 */
.outer-dot {
  position: absolute;
  top: 6px;
  left: 1px;
  width: 19px;
  height: 19px;
  background-color: rgba(189, 184, 154, 0.5);
  border-radius: 50%;
  z-index: 2;
}

/* 작은 원 */
.inner-dot {
  position: absolute;
  top: 12px;
  left: 7px;
  width: 7px;
  height: 7px;
  background-color: #746757;
  border-radius: 50%;
  z-index: 3;
}

/* 가로 점선 */
.h-dashed {
  position: absolute;
  top: 15px;
  left: 19px;
  width: 80px;
  height: 1px;
  /* margin-left: 10px; */
  border-top: 1px dashed #C0C0C0;
  max-width: calc(100% - 30px);
}

/* 텍스트 영역 */
.text-box {
  flex: 1;
}

.text-box .date {
  font-weight: 800;
  font-size: 20px;
  margin-top: 3px;
}

.text-box .desc {
  color: #333;
  line-height: 1.6;
}

/* 반응형 */
@media (max-width: 1024px) {
  .history-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .timeline-line {
    left: 50px;
  }
  
  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-left: 20px;
  }
  
  .history-item .left {
    margin-left: 20px;
  }
  
  .history-item .right {
    flex: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .history-image-area {
    flex: none;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  
  .history-year-image {
    height: 150px;
  }
}

@media (max-width: 912px) {
  .timeline-line {
    left: 50px;
  }
}

@media (max-width: 820px) {
  .timeline-line {
    left: 50px;
  }
}

@media (max-width: 768px) {
  .timeline-line {
    left: 50px;
  }
}

@media (max-width: 750px) {
  .history-section {
    padding: 40px 0 80px 30px;
  }

  .history-container {
    gap: 20px;
  }
  
  .timeline-line {
    left: 35px;
  }
  
  .history-item {
    gap: 20px;
    margin-bottom: 60px;
    margin-left: 10px;
  }
  
  .history-item .left {
    margin-left: 15px;
  }
  
  .history-item .right {
    max-width: 100%;
  }
  
  .history-item .right img {
    height: 150px;
  }
  
  .year-circle {
    left: -1px;
  }
  
  .outer-dot {
    left: 1px;
  }
  
  .inner-dot {
    left: 7px;
  }

  .year-header h2 {
    font-size: 28px;
  }

  .dot-wrap {
    width: 60px;
  }

  .h-dashed {
    width: 40px;
    max-width: calc(100% - 20px);
  }

  .text-box .date {
    font-size: 16px;
  }

  .text-box .desc {
    font-size: 12px;
  }
  
  .history-year-image {
    height: 120px;
  }
}

/* 더 작은 화면을 위한 추가 반응형 */
@media (max-width: 480px) {
  .history-section {
    padding: 30px 0 60px 20px;
  }
  
  .timeline-line {
    left: 20px;
  }
  
  .history-item {
    gap: 15px;
    margin-bottom: 40px;
    margin-left: 0;
  }
  
  .history-item .left {
    margin-left: 10px;
  }
  
  .history-item .right img {
    height: 120px;
    z-index: 1;
  }
  
  .year-circle {
    left: -1px;
  }
  
  .outer-dot {
    left: 1px;
  }
  
  .inner-dot {
    left: 7px;
  }

  .dot-wrap {
    width: 50px;
  }

  .h-dashed {
    width: 30px;
    max-width: calc(100% - 15px);
  }

  .text-box .date {
    font-size: 14px;
  }

  .text-box .desc {
    font-size: 13px;
  }
}

/* =============================
   비전 / 슬로건 / 미션
============================= */
.vision-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  margin-bottom: 20px;
  margin-top: 80px;
}

/* VISION */
.vision-box,
.slogan-box {
  text-align: center;
  width: 100%;
  max-width: 900px;
  height: 120px;
  position: relative;
}

.vision-label::after,
.slogan-label::after {
  content: "";
  position: absolute;
  top: -40px; /* 도형 위치 (텍스트 위쪽) */
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 60px;
  background: linear-gradient(to top, #ffffff 0%, #efefef 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 삼각형 모양 */
  z-index: -1; /* 텍스트 뒤로 */
}

.vision-label,
.slogan-label {
  font-size: 13px;
  font-weight: 700;
  color: #3011DB;
  text-transform: uppercase;
}

.vision-title,
.slogan-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 6px;
}

.vision-text,
.slogan-text {
  background: #fff;
  border-radius: 60px;
  padding: 20px 60px;
  font-size: 22px;
  font-weight: 600;
  color: #111;
  margin-top: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* MISSION */
.mission-box {
  width: 100%;
  text-align: center;
  background-color: #F9F9F9;
  width: 1200px;
  margin-bottom: 30px;
  border-radius: 20px;
  padding: 40px;
  box-sizing: border-box;
}

.mission-label {
  font-size: 13px;
  font-weight: 700;
  color: #3011DB;
}

.mission-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 40px;
}

.mission-list {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.mission-item {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  flex: 1;
  min-width: 280px;
  max-width: 360px;
  padding: 30px 25px;
  text-align: left;
}

.mission-item .num {
  background: #3011DB;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  margin: 0 auto 15px auto;
  display: block;
}

.mission-item h3 {
/*   font-size: 20px; */
  font-weight: 500;
  margin-bottom: 20px;
  color: #111;
  text-align: center;
}

.mission-item ul {
  padding-left: 20px;
  margin-left: 20px;
}

.mission-item li {
  list-style: disc;
  font-size: 15px;
  color: #555;
  margin-bottom: 6px;
}

/* =============================
   반응형
============================= */
@media (max-width: 1024px) {
  .mission-box {
    width: 100%;
    max-width: 100%;
    padding: 30px;
    background-color: transparent;
  }
  
  .mission-list {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
    justify-content: center;
  }
  
  .mission-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  
  .mission-item .num {
    margin: 0 0 15px 0;
  }
  
  .mission-item h3 {
    text-align: left;
  }
  
  .mission-item ul {
    margin-left: 0;
  }
  
  .mission-item .num {
    font-size: 17px;
    width: 38px;
    height: 38px;
    line-height: 38px;
  }
  
  .mission-item h3 {
    font-size: 19px;
  }
  
/*   .mission-item li {
    font-size: 14px;
  } */
}

@media (max-width: 912px) {
  .mission-box {
    width: 100%;
    max-width: 100%;
    padding: 25px;
    background-color: transparent;
  }
  
  .mission-list {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
    justify-content: center;
  }
  
  .mission-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  
  .mission-item ul {
    margin-left: 0;
  }
  
  .mission-item .num {
    font-size: 16px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 0 0 15px 0;
  }
  
  .mission-item h3 {
    font-size: 18px;
    text-align: left;
  }
  
  .mission-item li {
    font-size: 13px;
  }
}

@media (max-width: 856px) {
  .mission-box {
    width: 100%;
    max-width: 100%;
    padding: 25px;
    background-color: transparent;
  }
  
  .mission-list {
    flex-direction: column;
    align-items: center;
  }
  
  .mission-item {
    width: 100%;
    max-width: 100%;
  }
  
  .mission-item ul {
    margin-left: 0;
  }
  
  .mission-item .num {
    font-size: 16px;
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
  
  .mission-item h3 {
    font-size: 18px;
  }
  
  .mission-item li {
    font-size: 13px;
  }
}

@media (max-width: 853px) {
  .mission-box {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    background-color: transparent;
  }
  
  .mission-list {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
    justify-content: center;
  }
  
  .mission-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  
  .mission-item .num {
    margin: 0 0 15px 0;
  }
  
  .mission-item h3 {
    text-align: left;
  }
  
  .mission-item ul {
    margin-left: 0;
  }
  
  .mission-item .num {
    font-size: 15px;
    width: 34px;
    height: 34px;
    line-height: 34px;
  }
  
  .mission-item h3 {
    font-size: 17px;
  }
  
  .mission-item li {
    font-size: 12px;
  }
}

@media (max-width: 820px) {
  .mission-box {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    background-color: transparent;
  }
  
  .mission-list {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
    justify-content: center;
  }
  
  .mission-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  
  .mission-item .num {
    margin: 0 0 15px 0;
  }
  
  .mission-item h3 {
    text-align: left;
  }
  
  .mission-item ul {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .vision-text,
  .slogan-text {
    padding: 16px 20px;
    font-size: 18px;
  }

  .mission-box {
    width: 100%;
    height: auto;
    padding: 20px;
    background-color: transparent;
  }

  .mission-list {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
    justify-content: center;
  }

  .mission-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  
  .mission-item .num {
    margin: 0 0 15px 0;
  }
  
  .mission-item h3 {
    text-align: left;
  }
  
  .mission-item ul {
    margin-left: 0;
  }
  
  .mission-item .num {
    font-size: 14px;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  
  .mission-item h3 {
    font-size: 16px;
  }
  
  .mission-item li {
    font-size: 11px;
  }
}

@media (max-width: 767px) {
  .mission-list {
    flex-direction: column;
    align-items: center;
  }
  
  .mission-item {
    width: 100%;
    max-width: 100%;
  }
  
  .mission-item .num {
    font-size: 13px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  
  .mission-item h3 {
    font-size: 20px;
  }
  
  .mission-item li {
    font-size: 14px;
  }
}

/* =============================
   CI 페이지
============================= */
.ci-container {
  margin: 0 auto;
  padding: 40px 20px;
}

#content .ci-container .color-title {
  all: unset;
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #333;
}

#content .ci-container .color-info h4 {
  all: unset;
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #333;
  margin-bottom: 10px;
}

.ci-section {
  margin-bottom: 100px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  width: 18px;
  height: 18px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.sub-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
}

.sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  height: 40px;
  min-height: 40px;
}

.sub-icon {
  width: 16px;
  height: 16px;
}

.sub-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #666;
  margin: 0;
  line-height: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 2분할 레이아웃 */
.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  width: 100%;
  grid-template-rows: 1fr;
}

/* 왼쪽 컬럼 */
.left-column {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 0;
}

/* 오른쪽 컬럼 */
.right-column {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  display: flex;
  justify-content: flex-start;
  align-items: center;       /* 가로 가운데 */
  padding: 20px;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  flex: 1;
  text-align: center;        /* 텍스트도 중앙 정렬 필요 시 */
  margin-top: 0;
}

/* 반응형 2분할 레이아웃 */
@media (max-width: 1024px) {
  .two-column {
    gap: 30px;
/*     grid-template-columns: 1fr 1fr; */
  }
  
  .left-column {
    padding: 15px;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .right-column {
    padding: 15px;
    max-width: 100%;
    overflow: visible;
    flex: 1;
  }
  
  .right-column .description h3 {
    font-size: 17px;
    max-width: 100%;
  }
  
  .right-column .description p {
    font-size: 15px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .two-column {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .two-column > *:nth-child(n+2) .sub-header {
    margin-bottom: 10px;
  }
  
  .left-column {
    padding: 10px;
     justify-content: flex-start;
    align-items: flex-start;
  }
  
  .right-column {
    padding: 10px;
    max-width: 100%;
    overflow: visible;
  }
  
  .left-column .logo-image {
    max-width: 90%;
    max-height: 90%;
  }
  
  .right-column .description h3 {
    font-size: 16px;
    max-width: 100%;
  }
  
  .right-column .description p {
    font-size: 14px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .left-column {
    padding: 5px;
  }
  
  .right-column {
    padding: 5px;
    max-width: 100%;
    overflow: visible;
  }
  
  .left-column .logo-image {
    max-width: 85%;
    max-height: 85%;
  }
  
  .right-column .description h3 {
    font-size: 15px;
    max-width: 100%;
  }
  
  .right-column .description p {
    font-size: 13px;
    max-width: 100%;
  }
}

/* 1분할 레이아웃 */
.one-column {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

/* 심볼마크 섹션의 텍스트 줄바꿈 방지 */
.ci-section:first-of-type .description p {
  white-space: nowrap;
}

/* 반응형 텍스트 줄바꿈 */
@media (max-width: 768px) {
  .ci-section:first-of-type .description p {
    white-space: normal;
  }
  
  .one-column {
    margin-left: 0;
  }
}

/* 4분할 레이아웃 */
.four-column {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 0px 30px 0px 30px;
}

/* 반응형 4분할 레이아웃 */
@media (max-width: 1200px) {
  .four-column {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 0px 20px 0px 20px;
  }
}

@media (max-width: 768px) {
  .four-column {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 0px 15px 0px 15px;
  }
}

@media (max-width: 600px) {
  .four-column {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 0px 15px 0px 15px;
  }
}

@media (max-width: 320px) {
  .four-column {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 0px 15px 0px 15px;
  }
}

/* 이미지 컨테이너 */
.image-container {
  width: 100%;
  max-width: 600px;
  height: 350px;
  border: 1px solid #EDEDED;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-color: #fff;
  box-sizing: border-box;
}

/* 반응형 이미지 컨테이너 */
@media (max-width: 1024px) {
  .image-container,
  .left-column .image-container,
  .right-column .image-container {
    width: 100%;
    max-width: 100%;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
  }
}

@media (max-width: 768px) {
  /* image-container들을 가로 배열로 유지하면서 크기 줄이기 */
  .left-column .image-container,
  .right-column .image-container {
    width: calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-width: 150px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px;
    margin: 5px;
    align-items: flex-start;
    border: none !important;
    flex: 0 0 auto;
    display: inline-flex;
  }
  
  /* 일반 image-container */
  .image-container {
    width: fit-content;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px;
    margin: 0 auto;
    align-items: flex-start;
    border: none;
  }
  
  /* left-column과 right-column의 image-container들이 가로로 배열되도록 */
  .left-column,
  .right-column {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  /* sub-header, description 등은 전체 너비 차지 */
  .left-column > .sub-header,
  .left-column > .description,
  .right-column > .sub-header,
  .right-column > .description,
  .left-column > .color-descriptions,
  .right-column > .color-descriptions {
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  .image-container,
  .left-column .image-container,
  .right-column .image-container {
    width: fit-content;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px;
    margin: 0 auto;
    align-items: flex-start;
    border: none;
  }
}

/* 로고 이미지 */
.logo-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* left-column 안의 로고 이미지 */
.left-column .logo-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* left-column과 right-column 안의 image-container 통일 */
.left-column .image-container,
.right-column .image-container {
  width: 100%;
  max-width: 100%;
  height: 350px;
  min-height: 350px;
  max-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #EDEDED;
  background-color: #fff;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* left-column 안의 color-descriptions 왼쪽 정렬 */
.left-column .color-descriptions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: flex-start;
  align-items: flex-start;
}

/* image-container 안의 이미지 */
.left-column .image-container .logo-image,
.right-column .image-container .logo-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* right-column 안의 description */
.right-column .description {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.right-column .description h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  line-height: 1.4;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.right-column .description p {
  font-size: 18px;
  line-height: 1.8;
  color: #555;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: justify;
}

.right-column .description p:last-child {
  margin-bottom: 0;
}

/* right-column 안의 모든 텍스트 요소 */
.right-column * {
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.description p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* 반응형 텍스트 */
@media (max-width: 1024px) {
  .description p {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .description p {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .description p {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* 전용색상 섹션 */
.color-descriptions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20px;
}

.color-group {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 5px;
}

.color-circles {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.color-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.color-circle.green1 { background-color: #86B246; }
.color-circle.green2 { background-color: #56904C; }
.color-circle.blue1 { background-color: #3A6492; }
.color-circle.blue2 { background-color: #5684B1; }
.color-circle.pink1 { background-color: #A53C88; }
.color-circle.pink2 { background-color: #C285AE; }
.color-circle.brown1 { background-color: #746757; }
.color-circle.brown2 { background-color: #BDB89A; }

.color-text {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.color-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.color-desc {
  font-size: 15px;
  font-weight: 300;
  color: #666;
}

/* 다운로드 버튼 */
.download-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}

.download-btn {
  width: 200px;
  height: 60px;
  border: 1px solid #D3D3D3;
  border-radius: 50px;
  background-color: transparent;
/*   font-size: 14px; */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
}

.download-btn:hover {
  background-color: #F5F5F5;
  border-color: #B0B0B0;
}

/* 색상 카드 */
.color-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
}

.color-swatch {
  width: 60px;
  height: 60px;
  border-radius: 50px;
  margin: 0 0 15px;
}

.color-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px 20px;
}

.color-info p {
  font-size: 14px;
  color: #000000;
  margin: 0 0 5px 0;
}

/* 색상 스와치 */
.phch-lightgreen { background-color: #86B246; }
.phch-green { background-color: #56904C; }
.phch-blue { background-color: #3A6492; }
.phch-lightblue { background-color: #5684B1; }
.phch-pink { background-color: #A53C88; }
.phch-lightpink { background-color: #C285AE; }
.phch-coffee { background-color: #746757; }
.phch-lightcoffee { background-color: #BDB89A; }
.phch-lightgray { background-color: #BEC5C2; }
.phch-darkgray { background-color: #6B6B6C; }
.phch-silver { background-color: #CBCED2; }
.phch-gold { background-color: #B3A56C; }

/* 반응형 */
@media (max-width: 1024px) {
  .four-column {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ci-container {
    padding: 20px 15px;
  }
  
  .ci-section {
    margin-bottom: 60px;
  }
  
  .section-header h2 {
    font-size: 24px;
  }
  
  .two-column {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .two-column > *:nth-child(n+2) .sub-header {
    margin-bottom: 10px;
  }
  
  .four-column {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .image-container {
    width: fit-content;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px;
    margin: 0 auto;
    align-items: flex-start;
    border: none;
  }
  
  .color-descriptions {
    gap: 20px;
  }
  
  .color-item {
    gap: 12px;
  }
  
  .color-circle {
    width: 18px;
    height: 18px;
  }
  
  .color-item p {
    font-size: 13px;
  }
  
  .download-btn {
    width: 160px;
    height: 50px;
    font-size: 13px;
  }
  
  .download-buttons {
    gap: 8px;
    margin-top: 15px;
  }
}

@media (max-width: 600px) {
  .four-column {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 0px 15px 0px 15px;
  }
}

@media (max-width: 320px) {
  .four-column {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 0px 15px 0px 15px;
  }
}

@media (max-width: 480px) {
  .ci-container {
    padding: 15px 10px;
  }
  
  .section-header {
    margin-bottom: 30px;
  }
  
  .section-header h2 {
    font-size: 20px;
  }
  
  .sub-header {
    height: 35px;
    min-height: 35px;
  }
  
  .sub-header h3 {
    font-size: 16px;
  }
  
  .color-card {
    padding: 15px;
  }
  
  .download-btn {
    width: 140px;
    height: 45px;
    font-size: 12px;
  }
  
  .download-buttons {
    gap: 6px;
    margin-top: 12px;
  }
  
  .color-swatch {
    width: 60px;
    height: 60px;
  }
  
  .color-info h4 {
    font-size: 14px;
  }
  
  .color-info p {
    font-size: 11px;
  }
}


/*조직도*/
.group_w_val {overflow-y: auto;}
.group_container {
  max-width: 1200px;
  padding: 80px 0 100px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
}
.venture {display: flex; flex-direction: row-reverse; background: none; padding: 0px 0px 10px 0px;}
.venture .level-4-title { width: 200px; font-size: 13px;}
.venture .level-4-title h2.rectangle {background-color: #ffffff; color: #2c568a; /* border-radius: 30px; */ border: 1px solid #2c568a;}
.venture .level-4-title h2.rectangle:after {    content: "\f061";  font-family: "Font Awesome 6 Free";  font-weight: 900; padding-left: 10px;}

/* 공통 박스 스타일 */
.org-box {
  display: inline-block;
  width: 250px;
  height: 50px;
  margin: 5px;
  border-radius: 0;
  font-weight: 300;
  font-size: 18px;
  text-align: center;
  border: 1px solid;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 클릭할 수 없는 박스들 */
.level-2 .org-box,
.level-3 .org-box,
.level-4 .org-border:last,
.org-facility:nth-child(2), /* 문화예술팩토리 */
.org-facility:nth-child(3), /* 중앙아트홀 */
.org-facility:nth-child(4), /* 공연예술연습공간 */
.org-facility:nth-child(5), /* 귀비고 */
.org-facility:nth-child(6), /* 수협냉동창고 */
.org-facility:nth-child(7)  /* 구룡포생활문화센터 */ {
  cursor: default;
}

/* 색상 구분 */
.org-chairman { 
  background: #3A6492; 
  color: #fff; 
  font-size: 18px;
  font-weight: 700;
  position: relative;
  z-index: 10;
  cursor: default;
}

.org-director { 
  background: #5684B1; 
  color: #fff; 
  border-color: #5684B1; 
  font-size: 18px;
  font-weight: 700;
  position: relative;
  z-index: 9;
  cursor: default;
}

.org-border { 
  background: #fff; 
  border: 0.5px solid #C4C4C4; 
  color: #000; 
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
}

.org-border:hover {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

.org-department { 
  background: #C4C4C4; 
  color: #fff; 
  border-color: #C4C4C4; 
  font-size: 16px;
  font-weight: 500;
}

.org-team { 
  background: #CBCED2; 
  color: #333; 
  border-color: #CBCED2; 
  font-size: 16px;
  font-weight: 400;
}

/* 경영기획팀, 시민문화팀, 축제운영팀, P-콘텐츠산업팀 200x50 */
.org-group:nth-child(1) .org-team,
.org-group:nth-child(2) .org-team {
  height: 50px;
}

/* 공간디자인팀, 시설운영팀 250x50 */
.org-group:nth-child(3) .org-team {
  width: 250px;
  height: 50px;
}

.org-facility { 
  background: #fff; 
  color: #746757; 
  border-color: #746757; 
  font-size: 15px;
  font-weight: 400;
  width: 180px;
  height: 50px;
}

/* 각 레벨별 정렬 */
.org-level {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  margin: 30px 0;
  min-height: 60px;
}

/* 1단계: 이사장 */
.level-1 {
  margin: 0 0 40px 0;
  position: relative;
  z-index: 1;
}

.level-1::after {
  content: "";
  position: absolute;
  width: 0.5px;
  height: var(--line-height, 410px);
  background: #C4C4C4;
  z-index: 0;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* 2단계: 이사회/감사 (가로 배치) */
.level-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
  margin: 20px 0;
  position: relative;
  z-index: 1;
}

.level-2::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 0.5px;
  background: #C4C4C4;
  z-index: 0;
}

.level-2 .org-box:last-child::before {
  content: "";
  position: absolute;
  left: var(--board-left, 50%);
  top: 50%;
  width: var(--board-width, 500px);
  height: 0.5px;
  background: #C4C4C4;
  z-index: -1;
}

/* 3단계: 대표이사/사무국장 (세로 배치) */
.level-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  position: relative;
  z-index: 1;
}

/* 4단계: TF팀 (가로 배치) */
.level-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
  margin: 20px 0;
  position: relative;
  z-index: 1;
}

.level-4::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 0.5px;
  height: 20px;
  background: #C4C4C4;
  z-index: -1;
}

.level-4::after {
  content: "";
  position: absolute;
  left: var(--tf-left, 50%);
  top: 50%;
  transform: translateY(-50%);
  width: var(--tf-width, 500px);
  height: 0.5px;
  background: #C4C4C4;
  z-index: -1;
}

/* 6단계: 4개 분야를 잇는 가로선 */
.level-6::before {
  content: "";
  position: absolute;
  left: var(--fields-left, 50%);
  top: -25px;
  width: var(--fields-width, 800px);
  height: 0.5px;
  background: #C4C4C4;
  z-index: -1;
}

/* 6단계: 세부 팀 */
.level-6 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  margin: 4rem 0;
  flex-wrap: wrap;
}

/* 각 분야별 컨테이너 - 분야, 선, 팀을 하나로 묶음 */
.org-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 12rem;
  position: relative;
}

/* 분야 박스 */
.org-group .org-department {
  position: relative;
  z-index: 10;
  background-color: #6B6B6C;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.org-group .org-department:hover {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

/* 분야 박스에서 위로 올라가는 세로선 */
.org-group .org-department::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 0.5px;
  height: 30px;
  background: #C4C4C4;
  z-index: -10;
}

/* 팀 박스들 */
.org-group .org-box {
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: all 0.3s ease;
}

.org-group .org-box:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* 콘텐츠 분야 팀들을 가로로 배치 */
.org-group:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 연결선 */
.org-line-vertical {
  width: 1px;
  height: 40px;
  background: #C4C4C4;
  margin: 0 20px;
}

/* 시설 라인 왼쪽 세로선 */
.org-line {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding-left: 20px;
}

.org-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -30px;
  bottom: 30px;
  width: 0.5px;
  background: #C4C4C4;
  z-index: -1;
}
.org-line .org-box{
  width: 180px;
}
.org-line .org-box::before{
  content: "";
  position: absolute;
  left: -25px;
  top: 23px;
  bottom: 30px;
  height: 0.5px;
  width: 24px;
  background: #C4C4C4;
  z-index: -1;
}  
/* 반응형 */
@media (max-width: 768px) {
  .group_container {
    padding: 40px 20px;
  }
  
  .org-box {
    padding: 10px 15px;
    font-size: 16px;
    margin: 3px;
  }
  
  .org-chairman {
    font-size: 18px;
    padding: 15px 30px;
  }
  
  .level-2, .level-3, .level-4 {
    gap: 50px;
  }
  
  
  .level-6 {
    gap: 20px;
  }
  
  .org-group {
    min-width: 150px;
  }
}

@media (max-width: 480px) {
  .level-2, .level-3, .level-4 {
    flex-direction: column;
    gap: 20px;
  }
    
  .level-6 {
    flex-direction: column;
    gap: 20px;
  }
}


.level-1-1-wrapper:nth-child(3) {top: 15px;}
.level-1-1-wrapper:nth-child(4) {top: 30px;}
.level-1-1-wrapper:nth-child(5) {top: 30px;z-index: 1;}

.level-1-1-wrapper::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 33%;
  width: 33%;
  height: 1px;
  background:#bcbcbc;
}
.level-1-1-wrapper:nth-child(3)::before, .level-1-1-wrapper:nth-child(4)::before {display:none;}
.level-1-1-wrapper:nth-child(5)::before {width: 17%;}

.level-1-1-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: calc(100% + 20px);
  height: 1px;
  background: #bcbcbc;
}
.level-1-1 {
  	width: 100%;
    margin: 0 0px 0px 0px;
    background: #4babdd;
    border: 1px solid #4babdd;
    font-size: 18px;
    border-radius: 50px;
    top: 0px;
    color: #fff;
}
.level-1-1-wrapper li p {
  background: #eeeeee;
  padding: 10px;
  border: 1px solid #cccccc;
  top: 17px;
  position: relative;
  font-size: 14px;
}
.level-1-1-wrapper li p::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  width: 2px;
  height: 8px;
  background: #b2b2b2;
}
.level-1-1-wrapper:nth-child(2) .level-1-1 {background: #4babdd; border: 1px solid #4babdd; border-radius: 50px;color: #4babdd;background: #ffffff;}
.level-1-1-wrapper:nth-child(3) .level-1-1, .level-1-1-wrapper:nth-child(4) .level-1-1 {background: #4babdd; border: 1px solid #4babdd; border-radius: 50px;transition: 0.4s;}


.level-2-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding-top: 76px;
}

.level-2-wrapper::before {
  content: "";
  position: absolute;
  top: 57px;
  left: 6.8%;
  width: 86.35%;
  height: 1px;
  background: #bcbcbc;
}

.level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: calc(100% + 20px);
  height: 2px;
  background: #b2b2b2;
}

.level-2-wrapper li {
  position: relative;
  top: 0px;
  letter-spacing: -1.5px;
  text-align: center;
}

.level-2-wrapper li ol li {margin-top: -1px;}

.level-2::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  width: 20px;
  height: 2px;
  background: #b2b2b2;
}

.level-3-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 10px;
  margin: 0 auto;
}

.level-3-wrapper::before {
  content: "";
    position: absolute;
    top: 8px;
    left: calc(25% - 6px);
    width: calc(50% + 12px);
    height: 2px;
    background: #b2b2b2;
    display: none;
}

.level-3-wrapper > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  width: 1px;
  height: 18px;
  background: #bcbcbc;
}

/* .level-3:before {content: ""; position: absolute;top:-33px;left: 44%;width: 25px; height: 25px; background-size: 25px;} */

.level-4-wrapper {
  position: relative;
  width: 100%;
  margin-left: auto;
  top: 36px;
}

.level-4-wrapper::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  width: 4px;
  height: calc(100% + 0px);
  background:#00a9a1;
  z-index: 0;
  display:none;
}

.level-4-wrapper li + li {
  margin-top: -1px; 
}

.level-4 a {color: #0e67a9;}
.level-4 span {color: #2c568a;}
.level-4::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  width: 20px;
  height: 2px;
  background: #b2b2b2;
  display: none;
}
.bg_1 {background: #ffffff !important; color: #0e67a9 !important; border: 1px solid #0e67a9 !important;}
.bg_2 {background:#00a981 !important; color: #ffffff !important; border: 1px solid #00a981 !important;}

.group_title {margin: 10px auto;  width: max-content; margin-top: 40px;}
.group_title h3 { background: linear-gradient(to left, #074377 30%, #0080cc); border-radius: 50px; color: #ffffff;padding: 15px 40px; font-size: 20px;}
.group_title h3:after {content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 20px; }
.tel_ic i, .tel_ic svg, .mail_ic i, .mail_ic svg  {font-size: 30px; color: #00a981; cursor: pointer;}
.tel_ic1 i, .tel_ic1 svg {font-size: 24px; color:#077763;vertical-align: middle; cursor: pointer;}
.pop_tel {border:1px solid #e7e7e7;padding:1.5rem 1.2rem;margin:1rem 0;position:relative; display: flex; flex-direction: column; gap: 0.75rem;}
.pop_tel .telbox  {background: #f8f8f8; padding: 20px;}
.pop_tel .telbox span {padding-right:10px; }

.group_search_box { background: #f9f9f9; position: relative; margin-bottom: 15px; padding: 13px 10px;    text-align: center;}
.group_search_box .s_btn { display:inline-block; vertical-align: middle; height:40px; width:40px; padding:0; background:transparent url(/resources/view/phcf/images/search_icon.png) no-repeat center center; background-size: 20px 20px; border:none; border-radius:0; cursor:pointer; font-size: 0; text-indent: -9999px; overflow: hidden; position: relative;}
.group_search_box .s_btn::before { content: "🔍"; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}


    .organization ul li{display: flex; justify-content: center; align-items: center; padding: 20px 5px; text-align: center;}
	.organization ul li:nth-child(1){width: 10%; }
	.organization ul li:nth-child(2){width: 10%; border-left: 1px solid #ccc;}
	.organization ul li:nth-child(3){width: 70%; border-left: 1px solid #ccc; text-align: center;}
	.organization ul li:nth-child(4){width: 10%; border-left: 1px solid #ccc;}
	.organization ul.organization_body li:nth-child(3){justify-content: flex-start; text-align: left; padding: 25px; line-height: 25px;}
	.level-1-1-wrapper:nth-child(5)::before {width: 33%;}
	.organization_haed{display: flex; justify-content: space-between; font-weight: 600; background: #f7f7f7; border-bottom: 1px solid #ccc; border-top: 2px solid #323232;}
	.organization_body{display: flex; justify-content: space-between; font-size: 14px;border-bottom: 1px solid #ccc;}
	li.level-3-top-title{position: absolute; border: 1px solid #0e67a9; background: #fff; text-align: center;}  
	li.level-3-top-title a{display: block; padding: 10px; color: #0e67a9; font-weight: 600;}   
	li.level-3-top-title:nth-child(1){width: 13.6%; margin-top: -1px;} 
	li.level-3-top-title:nth-child(3){width: 42.4%; margin-left: 14.4%; margin-top: -1px;} 
	li.level-3-top-title:nth-child(7){width: 28%; margin-left: 57.5%; margin-top: -1px;} 
	.level-2-wrapper > li > ol > li {margin-top: 62px;}
	.level-3-wrapper > li.no-team::before{height: 80px; }
	.sub_page h4{margin-top: -2px;}

    /* 반응형 */
@media screen and (max-width: 820px) {
  .level-1-1-wrapper {grid-column-gap: 10px;}
}

@media screen and (max-width: 768px) {
.group_w_val {overflow: hidden;}
.group_container {padding: 0 20px 20px 20px; min-width: 300px;}
.level-1::before { height: 148vh; top: 99%;}
  .level-1-1,
  .level-2,
  .level-3 {
    width: 100%;
    letter-spacing: -1px;
  }
  .level-1-1, .level-1-1 { font-size: 15px !important;}
  .level-1-1 {margin:5px 0px;top: 0px;}
  .level-1_txt {display: block;}
  .level-2, .level-3, .level-4 { font-size: 13px !important; height: auto; }
  .level-3:before {display: none;}
  .level-3-wrapper {width: 100%;grid-template-columns: repeat(1, 1fr);}
  
  .level-2-wrapper > li::before, .level-4-wrapper::before {
    display: none;
  }
  /* .level-2-wrapper::after {display: none !important;} */
  .level-1-1-wrapper,
  .level-2-wrapper
  {
    display: block;
  }
  .level-2-wrapper::after,
  .level-2::after,
  .level-3-wrapper::before {
    display: none;
}
  .level-1-1-wrapper,
  .level-2-wrapper { width: 100%; margin-left: 0%;padding-top: 0px;top: 0px !important;  }
  .level-1-1-wrapper li p {top: -8px;}

  .level-2-wrapper::before {
    left: -20px;
    width: 2px;
    height: calc(100% + 40px);
    display: none;
  }

  .level-2::before {top: -278%;height: 245px; z-index: -99;}  
  .level-1-1-wrapper li p::before {top: 72px; height: 95px;z-index: -99; left: 50.4%;}
  .level-3-wrapper > li::before { height: 41px;top: 41px; display: none;}
  .level-2-wrapper li {top: 0px;}
  .level-4 {top: 7px;}  
  .level-4-wrapper::before {top: -84px;height: calc(100% + 30px);z-index: -99;}
  .level-4-wrapper {top: -5px;margin-bottom: 10px;}
  
  .group_search_box .s_btn {width: 40px !important; height: 40px !important; padding: 0 !important; background:transparent url(/resources/view/phcf/images/search_icon.png) no-repeat center center !important; background-size: 20px 20px !important; border:none !important; border-radius:0 !important; font-size: 0 !important; text-indent: -9999px !important; overflow: hidden !important; position: relative !important;}
  .group_search_box .s_btn::before { content: "🔍" !important; font-size: 20px !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; display: block !important;}
  .group_search_box input[type=text] {width: calc(100% - 50px) !important;}  
  .organization_haed li:nth-child(4) {display:none;}
  .organization_body { flex-wrap: wrap; background: #fcfcfc;}
  .organization_body li:nth-child(1), .organization_body li:nth-child(2), .organization_body li:nth-child(3) {width: auto !important; border-left: 0px !important; border-right: 0px !important; padding: 10px 5px; }
  .organization_body li:nth-child(4) {width: 100% !important; padding: 10px 5px;  background: #ffffff;}
  .organization ul li { font-size: 14px; padding: 10px 5px !important; border-left: 0px solid #ccc !important; border-right: 0px solid #ccc !important;}  
  
  li.level-3-top-title:nth-child(1),
  li.level-3-top-title:nth-child(3),
  li.level-3-top-title:nth-child(7){position: unset; width: 100%; margin-left:0; margin-top: 10px;} 
  .level-2-wrapper li ol li {margin-top: 0px;}
  .bg_1{border-top: 0px !important;}
}


@media screen and (max-width: 400px){
	.organization ul li{font-size: 12px}
	}

  /* 오시는길 페이지 */
  .location-container {
    margin: 0 auto;
    padding: 20px;
  }

	.location-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 30px;
		justify-content: center;
		list-style: none;
		padding: 0;
	}

	.location-tab {
		padding: 12px 20px;
		cursor: pointer;
		border-radius: 30px;
		font-size: 18px;
		transition: all 0.3s ease;
		min-width: 120px;
		text-align: center;
		background: #f5f5f5;
	}

	.location-tab:hover {
		background: #d0d0d0;
		border-color: #666;
	}

	.location-tab.active {
		background: linear-gradient(to right, #5684B1, #3A6492);
		color: #fff;
		border-color: #3A6492;
		font-weight: 500;
	}

  .content-area {
    background: #fff;
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
  }

  .location-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
  }

  .location-info img {
    width: 20px;
    height: 20px;
  }

  .location-info span {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

	/* 지도 영역 반응형 처리 */
	.map-container {
		width: 100%;
		height: 400px;
		position: relative;
		overflow: hidden;
		margin-bottom: 0;
	}

	/* 다음 지도 컨트롤러 숨기기 */
	.root_daum_roughmap .wrap_controllers {
		display: none !important;
	}

	/* 다음 지도 크기 설정 */
	#map,
	.root_daum_roughmap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		border-radius: 8px;
	}

	.contact-info {
		position: relative;
		z-index: 10;
		background-color: #fff;
		padding: 10px 20px;
		border-top: 0.5px solid #ddd;
	}

  .contact-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
  }

  .contact-item:last-child {
    margin-bottom: 0;
  }

  .contact-icon {
    width: 18px;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .contact-text {
    color: #666;
    line-height: 1.5;
  }

	/* 화면 크기에 따라 비율 변경 */
	@media (max-width: 1200px) {
		.map-container {
			height: auto;
			aspect-ratio: 16 / 10;
		}
	}

	/* 반응형 디자인 */
	@media (max-width: 768px) {
		.map-container {
			height: auto;
			aspect-ratio: 16 / 12;
		}
		.location-container {
			padding: 10px;
			width: 100%;
			box-sizing: border-box;
		}

		.location-tabs {
			gap: 5px;
			margin-bottom: 20px;
		}

		.location-tab {
			padding: 10px 15px;
			font-size: 12px;
			min-width: 100px;
		}

    .location-header {
      padding: 15px;
    }

    .location-title {
      font-size: 18px;
    }

    .contact-info {
      padding: 15px;
      background: #fff;
    }

    .contact-item {
      margin-bottom: 10px;
      padding: 8px 0;
    }

    .contact-text {
      font-size: 13px;
    }

    .content-area {
      margin: 0;
    }
  }

	@media (max-width: 480px) {
		.map-container {
			height: auto;
			aspect-ratio: 16 / 14;
		}

		.location-container {
			padding: 5px;
			width: 100%;
			box-sizing: border-box;
		}

		.location-tabs {
			flex-direction: column;
			align-items: center;
		}

		.location-tab {
			width: 100%;
			max-width: 300px;
		}

    .contact-info {
      padding: 10px;
      background: #fff;
    }

    .contact-item {
      margin-bottom: 8px;
      padding: 6px 0;
    }

    .contact-text {
      font-size: 12px;
    }

    .content-area {
      margin: 0;
    }
  }