/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.mb-1{color : #dc3545}
.mb-t{color : #dc3545;font-weight : 700;margin-right : 10px}
.pd5{padding : 5px !important}
.pd-12{padding : 12px 0 !important}
.subt1{font-size : 20px !important}
.checkbox {position :relative ; top : 2px; margin-right : 5px;}
.highlight1 {
    padding: 2px 5px;
    background-color: #dc3545;
    color: #fff !important;
	border-radius: 2px;}
.mtb100 { margin : 100px 0}
.btn-w {background-color : #fff ; color : #333;}
.fs11 {font-size :11px}
.fs12 {font-size :12px}
.fs13 {font-size :13px}
.fs14 {font-size :14px}
.fs15 {font-size :15px}
.fs50 {font-size :50px}
.fc-w{color : #fff !important}
.fc-b{color : #000 !important}
.fw7 {font-weight:700}  
.fs-calc{calc(var(--cnvs-heading-block-font-size-h2) / 1.75);}
#vanta-background {
            width: 100%;
            height: 100vh;
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
        }
.more-link2 {
  display: inline-block;
  text-align : right;
  color : #fff;
  font-family: var(--cnvs-secondary-font);
  font-size : 40px !important;
}
.more-link2:hover {
color : var(--cnvs-themecolor);
}		
 /* 페이지 레이아웃 */
.content-box {
    background-color:#edecec;border-radius:20px;padding:20px 0px;margin-bottom : 30px; 
 }
.content-box .list{
    display: grid;grid-gap: 20px;grid-template-rows:auto auto;grid-template-columns:repeat(2, 1fr) !important;list-style-type:none;width:100%;
}
.list li{align-items:flex-start;flex-direction:row;background:transparent;font-size:20px;}
  
.mw-80 {max-width : 80% !important }
/* 모바일 */
@media (max-width: 767px) {
    .content-box .list {grid-template-columns:none !important;} 
    .list li {
        flex-direction: column; } 
	.subt1{font-size :12px !important;max-width:90% !important}
	}
/* 연혁 */
.time_container { margin:40px 0; position:relative; }

.timeline-container { display:flex; align-items:flex-start; position:relative; }

.timeline-nav-wrapper {
  flex:0 0 230px;
  position:relative;
}

.timeline-nav {
  width:230px;
  position:absolute;
  top:0;
}

.timeline-nav ul { list-style:none; margin:0; padding:0; border-left:2px solid #ccc; }

.timeline-nav li {
  position: relative;
  margin-bottom:1rem;
  cursor:pointer;
  padding-left: 20px; /* 숫자가 세로 라인과 겹치지 않도록 */
}

.timeline-nav li.active { font-weight:bold; color: var(--orange); }
.timeline-nav li.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:16px; height:16px; background-color: var(--orange);
  border-radius:50%; border:2px solid #fff; box-shadow:0 0 5px rgba(0,0,0,0.2);
}

.timeline-content { flex-grow:1; margin-left:40px; /* nav와 컨텐츠 간격 40px */ }

.milestone-section { padding:3rem 0; border-left:2px solid #eee; }
.milestone-section h2 { font-size:1.5rem; margin-top:0; color:#555; padding-left:20px; position:relative; }
.milestone-section h2::before {
  content:''; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; background-color:#888; border-radius:50%;
}
.milestone-section p { padding-left:20px; line-height:1.6; }

@media (max-width:768px){
  .timeline-container {
    flex-direction: column;
		display : inline;
  }

  .timeline-nav {
    position: absolute;     /* JS 가 fixed/absolute 전환 제어 */
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;           /* nav 영역 높이 */
    background: #fff;
    z-index: 100;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  .timeline-nav ul {
    display: flex;
    
    margin: 0;
    padding: 0 1rem;
    list-style: none;
    border-left: none;
    overflow-x: auto;              /* 가로 스크롤 */
    -webkit-overflow-scrolling:touch;
  }
  .timeline-nav li {
	padding-left : 15px !important;
  }
  .timeline-nav li::before {
    display: none;
  }

  .timeline-content {
    margin-left: 0;
    padding-top: 60px;     /* nav 높이만큼 내려주기 */
  }
}
/* 연혁 */
/* 툴팁 */
.image-container {
    position: relative; /* 오버레이 위치 지정을 위한 기준점 */
    width: 400px; /* 이미지 너비에 맞춰 설정 */
    height: 300px; /* 이미지 높이에 맞춰 설정 */
    margin: 20px;
    display: inline-block; /* 이미지를 가로로 나열하기 위함 */
    overflow: hidden; /* 오버레이가 컨테이너 밖으로 나가지 않도록 */
}

.image-container img {
    display: block; /* 이미지 하단 여백 제거 */
    width: 100%; /* 컨테이너 너비에 맞춤 */
    height: 100%; /* 컨테이너 높이에 맞춤 */
    object-fit: cover; /* 이미지가 잘리지 않고 채워지도록 */
    transition: transform 0.3s ease; /* 호버 시 이미지 확대 효과 */
}

.image-overlay {
    position: absolute; /* 이미지 컨테이너를 기준으로 위치 */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0; /* 초기에는 투명하게 숨김 */
    transition: .5s ease; /* 부드러운 전환 효과 */
    background-color: rgba(0, 0, 0, 0.6); /* 반투명 검은색 배경 */
    display: flex; /* 텍스트를 중앙에 배치하기 위함 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

.image-container:hover .image-overlay {
    opacity: 1; /* 마우스 오버 시 오버레이 나타남 */
}

.image-container:hover img {
    transform: scale(1.05); /* 마우스 오버 시 이미지 약간 확대 */
}

.overlay-text {
    color: white; /* 텍스트 색상 */
    font-size: 20px; /* 텍스트 크기 */
    padding: 10px;
    text-align: center;
}
/* 툴팁 끝 */
/* 조직도 전용 스타일 */

/* 조직도 전용 스타일 */