:root {
  --main: #4065AF;
  --line: #e5e5e5;
}

/* 상단 타이틀 */
.history-head{
  text-align:center;
  margin-bottom:60px;
}
.history-head h2{
  font-family:var(--scFont);
  font-size:40px;
  font-weight:700;
  margin:0 0 24px;
}
.history-head p{
  font-family:var(--scFont);
  font-size:20px;
  font-weight:500;
  color:#333;
  margin:0;
}

/* ===== 타임라인 공통 ===== */
#milestone{
  padding:60px 16px 80px;
}
#milestone .inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
}

/* 중앙 세로 라인 */
#milestone .inner::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:100%;
  background:var(--line);
  transform:translateX(-50%);
}

/* 각 블록 */
#milestone .block{
  position:relative;
  box-sizing:border-box;
  width:50%;
  padding:40px 0;
}

/* odd : 오른쪽 내용 */
#milestone .block:nth-child(odd){
  margin-left:50%;
  text-align:left;
  padding-left:60px; /* 중앙선과 거리 */
}

/* even : 왼쪽 내용 */
#milestone .block:nth-child(even){
  margin-right:50%;
  text-align:right;
  padding-right:60px; /* 중앙선과 거리 */
}

/* 기본: 홀수행(오른쪽 블록) 점 */
#milestone .block::before{
  content:"";
  position:absolute;
  top:34px;                 /* 제목 높이 맞추는 값 */
  left:0px;                /* 블록의 왼쪽 경계 = 중앙선 근처 */
  transform:translate(-50%, -50%);
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--main);
  z-index:2;
}

/* 짝수행(왼쪽 블록) 점 위치 보정 */
#milestone .block:nth-child(even)::before{
  left:auto;                /* left 사용 안 함 */
  right:0px;               /* 블록의 오른쪽 경계 = 중앙선 근처 */
  transform:translate(50%, -50%); /* 오른쪽 기준이므로 +50% 로 반대 방향 */
}

/* 제목 (창립기 / 도약기 …) */
#milestone .title{
  font-size:32px;
  font-weight:700;
  color:var(--main);
  margin:0 0 15px;
}
#milestone .title span{
  font-size:18px;
  font-weight:500;
  margin-left:10px;
  color:#333;
}

/* 이미지 */
#milestone .imgWrap{
  margin: 15px 0;
}

#milestone .imgWrap img{
  display: block;          /* 블록으로 만들고 */
  width: 100%;
  margin: 0 auto;        
  border-radius: 6px;
}

/* 설명 리스트 */
#milestone .desc{
  list-style:none;
  margin:0;
  padding:0;
}

#milestone .desc li{
  list-style:none;
}
/* odd : 글 왼쪽에 검은 점 */
#milestone .block:nth-child(odd) .desc list-style{
 /* padding-left:14px;*/
}
/*
#milestone .block:nth-child(odd) .desc li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.8em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#000;
}
*/
/* even : 글 오른쪽에 검은 점 */
/*
#milestone .block:nth-child(even) .desc li{
  padding-right:14px;
}
#milestone .block:nth-child(even) .desc li::before{
  content:"";
  position:absolute;
  right:0;
  top:0.8em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#000;
}
*/



/* ===== 반응형 (모바일) ===== */
@media (max-width: 768px){
  #milestone{
    padding:40px 16px 60px;
  }

  /* 중앙선은 왼쪽으로 이동 */
  #milestone .inner::before{
    left:20px;
    transform:translateX(0);
  }

  /* 블록은 한 줄 레이아웃 */
  #milestone .block{
    width:100%;
    margin:0;
    padding:28px 0 28px 40px;
    text-align:left;
  }
  #milestone .block:nth-child(odd),
  #milestone .block:nth-child(even){
    margin:0;
    padding-right:0;
    padding-left:40px;
  }

  /* 파란 점도 왼쪽 라인 기준 */
  #milestone .block::before{
    left:20px;
    transform:translate(-50%, -50%);
  }

  /* 제목/부제 크기 조정 */
  #milestone .title{
    font-size:24px;
  }
  #milestone .title span{
    display:block;
    margin-left:0;
    margin-top:4px;
    font-size:14px;
  }

  #milestone .imgWrap img{
    max-width:100%;
  }

  /* 리스트 점은 모두 왼쪽에 */
  #milestone .desc li{
    font-size:14px;
    padding-left:14px;
    padding-right:0;
  }
  #milestone .block:nth-child(even) .desc li::before{
    left:0;
    right:auto;
  }
}







/* 날짜 + 문장 공통 스타일 */
#milestone .desc li{
  display:flex;
  align-items:flex-start;
  gap:8px;               /* strong 과 텍스트 간격 */
  font-size:18px;
  margin-bottom:10px;
}

#milestone .desc li strong{
  font-weight:700;
  flex-shrink:0;         /* 숫자가 줄바꿈되지 않도록 */
}

/* 홀수열(오른쪽 블록) → strong 이 왼쪽(기본 방향) */
#milestone .block:nth-child(odd) .desc li{
  flex-direction:row;
  text-align:left;
}

/* 짝수열(왼쪽 블록) → strong 을 오른쪽으로 */
#milestone .block:nth-child(even) .desc li{
  flex-direction:row-reverse;  /* 요소 순서 반전 */
  text-align:right;
}
#milestone .block:nth-child(even) .desc li span{
  text-align:right;
}












@media (max-width:768px){
  /* 블록 배치 모두 동일(왼쪽) */
  #milestone .block{
    width:100%;
    margin:0;
    padding:30px 0 30px 40px;  /* 전체 왼쪽 여백만 */
    text-align:left;
  }
  #milestone .block:nth-child(even){
    margin:0;
    padding-right:0;
  }

  /* 날짜 위치도 모두 왼쪽(기본 방향) */
  #milestone .block .desc li{
    flex-direction:row;
    text-align:left;
  }
  #milestone .block .desc li span{
    text-align:left;
  }
  
 /* block aos-init aos-animate*/
 
  #milestone .block .desc li span{
    text-align:left;
  }
  
	/* 짝수열(왼쪽 블록) → strong 을 오른쪽으로 */
	#milestone .block:nth-child(even) .desc li{
	  flex-direction:row;  /* 요소 순서 반전 */
	  text-align:left;
	}
	#milestone .block:nth-child(even) .desc li span{
	  text-align:left;
	}

	#milestone .block:nth-child(even){
	  text-align:left;
	 
	}
	
	#milestone .block:nth-child(even)::before{
	  left:6px;                /* left 사용 안 함 */
	  right:auto;               /* 블록의 오른쪽 경계 = 중앙선 근처 */
	  transform:translate(50%, -50%); /* 오른쪽 기준이므로 +50% 로 반대 방향 */
	}
}


@media (max-width: 768px){

	.history-head{
		padding-bottom:10px;
	}
	.history-head h2{
        font-size:24px;
	}
    .history-head p{
        font-size:16px;
    }
	
}