/* ===== 회사소개 Overview 히어로 ===== */

.overview-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #070c10;
}

.overview-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  will-change: transform, filter, opacity;
  z-index: 0;
  opacity: 0; /* 기본은 안 보이게, GSAP에서 조절 */
}

/* 개별 배경 이미지 */
.overview-bg.bg-1 {
  background-image: url('../images/overview_bg.jpg');
}
.overview-bg.bg-2 {
  background-image: url('../images/overview2_bg.jpg');
}
.overview-bg.bg-3 {
  background-image: url('../images/overview3_bg.jpg');
}
.overview-bg.bg-4 {
  background-image: url('../images/overview4_bg.jpg');
}

.overview-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(0,0,0,0.3), rgba(0,0,0,0.55));
  z-index: 1;
}

.overview-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
    padding: 0 30px;
	
}

/* 상단 로고 */
.overview-logo img {
  height: 32px;
  opacity: 0.85;
}

/* Vision 2030 타이틀 */
.overview-vision-title1 {
  margin: 0;
  font-size: clamp(50px, 16vw, 140px);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height:1em;
    opacity:0;
}

.overview-vision-title2 {
  margin: 0;
  font-size: clamp(50px, 16vw, 120px);
  letter-spacing: -0.04em;
  font-weight: 700;
  line-height: 1em;
    opacity:0;
}

.overview-vision-title3 {
  margin: 10px 0 0 ;
  font-size: clamp(40px, 16vw, 50px);
  letter-spacing: -0.04em;
  font-weight: 700;
  line-height: 1em;
    opacity:0;
}


.overview-vision-title .font-H {
  font-weight: 700;
}
.overview-vision-title .font-M {
  font-weight: 400;
  margin-left: 6px;
}

/* 히어로 안 content_text 재정의 - 중앙 오버레이 */
.overview-hero .content_text.overview-lines {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  text-align: center;
}

/* 각 카피 문구 박스 */
.overview-hero .content_text .textbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 1300px;
  font-size: clamp(40px, 0vw, 44px);
  line-height: 1.7;
  color: #f4f7fb;
  opacity: 0;          /* GSAP에서 제어 */
}

/* 우측 하단 breadcrumb / 네비 등이 들어갈 경우 */
.overview-hero .breadcrumb {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 3;
}

/* 반응형 */
@media (max-width: 768px) {
  .overview-hero {
/*    height: 85vh;*/
    min-height: 520px;
  }
  .overview-inner {
    align-items: flex-start;
    gap: 7px;
  }
  .overview-logo img {
    height: 26px;
  }

  .overview-hero .content_text {
    font-size: 15px;
    max-width: 100%;
  }

.overview-vision-title3 {
    margin: 0px 0 0;
    font-size: clamp(24px, 8vw, 50px);
    letter-spacing: -0.04em;
    font-weight: 700;
    line-height: 1.4em;
}

.overview-hero .content_text .textbox {
	width:100%;
	padding:0 20px;
	font-size: clamp(26px, 0vw, 44px);
}

}


.companybox_cp {
width:36%;
padding-right:30px;
float:left;
}

.companybox_info {
width:64%;

float:right;
}

@media (max-width: 768px) {
.companybox_cp {
width:100%;

}

.companybox_info {
width:100%;
margin-top: 30px;
}
}

.companyif {
	width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
    table-layout: fixed;
	border-top:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
	padding:14px;
	margin:50px 0;
	overflow: auto;
}

dl.companyif dt {
float:left;
clear: left;
width:200px;
padding:10px;
}

dl.companyif dd {
float:left;
padding:10px;
width:calc(100% - 200px);
}

@media (max-width: 768px) {
dl.companyif dt {
clear: both;
width:100%;
}

dl.companyif dd {
clear: both;
width:100%;
padding-top:0px;
}
}

.table-dl {
  display: grid;
  /* 3칸 구조 */
  grid-template-columns: 150px 150px 1fr;
  /* 총 6줄 */
  grid-template-rows: repeat(6, auto);
	width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
    table-layout: fixed;
	border-top:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
	padding:14px;
	margin:50px 0;
	overflow: auto;
}

.table-dl dt,
.table-dl dd {
  border: 0px solid #ccc;
  padding: 10px 8px;
}

/* 1번째 덩어리: 1~3줄 병합 */
.table-dl dt:nth-of-type(1) {
  grid-row: 1 / span 4;  /* 1,2,3줄 차지 */
  display: flex;
	align-items: center;
    justify-content: flex-start
}

/* 2번째 덩어리: 4~6줄 병합 */
.table-dl dt:nth-of-type(2) {
  grid-row: 4 / span 3;  /* 4,5,6줄 차지 */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* dd들도 가운데 정렬 느낌 */
.table-dl dd {
  display: flex;
  align-items: flex-start;
}

.table-dl .tbo1 {
	border-top:1px solid #d1d1d1;
	margin-top: 10px;
    padding-top: 20px;
}

@media (max-width: 768px) {
	.table-dl {
	 display: block;
	}
	.table-dl dd {
	padding-top:0 !important;
	}
	.table-dl dd.tbo1 {
	border:0;
	margin-top:0 !important;
	}

.table-dl dt:nth-of-type(1) {
  grid-row: 1 / span 4;  /* 1,2,3줄 차지 */
  display: flex;
	align-items: flex-start;
    justify-content: flex-start
}

}


.about-table {
	width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    table-layout: fixed;
    background-color: #eaeaea;
	border-top:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
	margin:50px 0;
}

.about-table thead {
  background-color: #1567a1;
  color: #fff;
}

.about-table th,
.about-table td {
	padding: 14px 20px;
    border: 0px solid #bfbfbf;
	font-size:16px;
}
.about-table td.name {
width:200px;
}

.about-table tbody {
 background:#fff;
}

/* 공통: 테이블 감싸는 래퍼는 가로 스크롤 허용 */
.tablebox {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 모바일 관성 스크롤 */
}

/* 테이블은 기본적으로 레이아웃 깨지지 않게 */
.tablebox .about-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* 작은 화면에서는 테이블이 너무 눌려서 글자 줄바꿈/깨짐이 생기니까
   테이블 자체에 최소 가로폭을 줘서 래퍼가 가로 스크롤을 만들게 함 */
@media (max-width: 768px) {
    .tablebox .about-table {
        min-width: 768px; /* 원하는 최소 가로 폭, 필요 시 조정 가능 */
    }
	.about-table td.name {
	width:100px;
	}
}

.company_imgbox {
border-radius:0px;
overflow:hidden;
}


@media (max-width: 1024px) {
    .sub_overview {
        max-width: 1300px;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.sub_overview {
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 0 0;
    transition: all 0.5s ease-out;
}