@charset "utf-8";
#about-history .sub-cont-value {
	max-width: var(--max-width2);
    width: 100%;
	padding-top: var(--padding-40-160);
}

#about-history .history-wrapper {
    width: 100%;
    max-width: var(--max-width2);
    margin: 0 auto;
    position: relative;
}

/* 상단 타이틀 스타일 (좌측 정렬) */
#about-history .history-header {
    display: inline-block;
    margin-bottom: var(--padding-40-80);
    text-align: left;
}
/*#about-history .history-header-sub {
    display: flex;
    justify-content: space-between;
}*/
#about-history .history-header .subtitle {
    display: flex;
    width: 100%;
    max-width: var(--max-width2);
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 600;
    margin: 0 auto var(--padding-15-30);
}
#about-history .history-header :is(h1,h2) {
	font-size: var(--font-size-22-48);
    font-weight: 700;
    line-height: 1.4;
    color: var(--sub-color-1);
    margin-bottom: var(--padding-20-40);
}

/* 우측 연도 선택 드롭다운 (셀렉트박스 고정) */
#about-history .year-selector-wrap {
    display: inline-block;
    position: sticky;
    top: 220px;
    margin-top: 115px;
    float: right;
    z-index: 1;
}

#about-history .year-selector-wrap select {
    padding: var(--padding-8-15) var(--padding-15-30);
    font-size: var(--font-size-18-24);
    font-weight: bold;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 30px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    outline: none;
    transition: all 0.3s ease;
}

#about-history .year-selector-wrap select:hover {
	border-color: #b08d57;
}
#about-history .year-selector-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: var(--padding-25-50);
}

/* IE(인터넷 익스플로러) 기본 화살표 제거 */
#about-history .year-selector-wrap select::-ms-expand {
    display: none;
}
/* 3. SVG 아이콘 위치 및 크기 수정 */
#about-history .year-selector-wrap::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;  /* 16px에서 더 키움 */
    height: 18px; /* 16px에서 더 키움 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* 메인 콘텐츠 영역 (중앙 타임라인 구조) */
#about-history .history-container {
    display: flex;
    position: relative;
    gap: var(--padding-40-80);
    flex-direction: column;
}

    /* 배경이 되는 연한 세로 선 (컨테이너 기준 정중앙) */
    .history-container::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background-color: #e0d0b8;
      transform: translateX(-50%);
    }

    /* 스크롤에 따라 진하게 채워지는 위쪽 세로 선 */
    .timeline-progress-line {
      position: absolute;
      left: 50%;
      top: 0;
      width: 2px;
      background-color: #b08d57;
      transform: translateX(-50%);
      height: 0px;
      z-index: 1;
    }

    /* 스크롤을 따라 선 끝에 완벽히 고정되는 도트 (정중앙 정렬) */
.floating-dot {
    position: absolute;
    left: 50%;
    top: 0px;
    width: 10px;
    height: 10px;
    background-color: var(--main-color);
    /* border: 3px solid #fff; */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 8px rgba(178,123,82, 0.5), 0 8px 8px rgba(0,0,0,0.2);
    z-index: 20;
}

/* 각 연혁 섹션 스타일 */
#about-history .history-section {
	position: relative;
	width: 100%;
	margin-bottom: 0px;
	scroll-margin-top: 220px;
}

/* 내부 콘텐츠 그리드 (좌: 연도+이미지, 우: 내용) - 중앙선 기준 좌우 여백 균형 분할 */
#about-history .history-content-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--padding-30-60);
    flex-wrap: wrap;
}

/* 좌측 영역 (연도 타이틀 + 이미지) -> 중앙선 기준 왼쪽 공간 사용 */
#about-history .history-left-area {
    width: calc(50% - var(--padding-50-100));
    text-align: left;
}

#about-history .year-title {
    font-size: var(--font-size-22-48);
    font-weight: 700;
    margin-bottom: var(--padding-20-40);
}

#about-history .history-img {
    width: 100%;
    border-radius: var(--padding-20-40);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: var(--padding-10-20);
}

#about-history .history-img img {
	width: 100%;
	height: auto;
	display: block;
}

#about-history .img-desc {
    font-size: var(--font-size-16-20);
    font-weight: 600;
    color: var(--sub-color-1);
}

/* 우측 텍스트 리스트 영역 -> 중앙선 기준 오른쪽 공간 사용 */
#about-history .history-right-area {
    width: calc(50% - var(--padding-50-100));
    padding-top: var(--padding-40-80);
}

#about-history .history-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

#about-history .history-list li {
    position: relative;
    font-size: var(--font-size-16-20);
    color: var(--sub-color-2);
    padding: var(--padding-6-12) 0;
    border-bottom: 1px solid #f2f2f2;
    line-height: 1.5; 
	word-break: keep-all;

}

		
/* 반응형 스타일 (br 1780 이하) */
@media only screen and (max-width : 1780px) {
	.sub-cont-value {
		padding-right: 95px;
	}
}

/* 모바일 반응형 처리 */
@media (max-width: 900px) {
	#about-history .year-selector-wrap,
	#about-history .timeline-progress-line,
	#about-history .floating-dot,
	#about-history .history-container::before {
		display: none; /* 모바일에서는 타임라인 선 및 도트 숨김 */
	}
	#about-history .history-left-area,
	#about-history .history-right-area {
		width: 100%;
		padding-top: 0;
	}
	#about-history .history-list li {
		font-size: 15px;
		padding-left: 13px;
	}
	/* 왼쪽에 작은 세로 바 포인트 생성 */
	#about-history .history-list li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 16px;
		transform: translateY(-50%);
		width: 4px;
		height: 12px;
		background-color: var(--main-color);
		border-radius: 2px;
	}
	#about-history .history-header :is(h1,h2) {
		margin-bottom: 0;
	}
}
		
		
/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {

}

/* 반응형 레이아웃 */
@media (max-width: 1024px) {

}

/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {

}


/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {
	#about-history .sub-cont-value {
		padding-right: 0px;
	}
}


/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {

}


/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {

}