/** 마일스톤 ------------------------------- **/
/** 네비게이션 **/
#milestone .milestone-nav { margin-bottom:7.2222rem; } 
#milestone .milestone-nav ul { display: flex; gap:3px; } 
#milestone .milestone-nav ul li { width:12.5rem; } 
#milestone .milestone-nav ul li a { position: relative; display: flex; align-items: center; justify-content: center; gap:5px; width:100%; height:48px; font-size:1rem; font-weight: var(--regular);  color:#fff; background-color: rgba(255, 255, 255, 0.15); border-radius: 24px; color:#0D0D0D; transition: background-color 0.5s;} 
#milestone .milestone-nav ul li a:not(.active):hover {background-color: rgba(255, 255, 255, 0.5)}
#milestone .milestone-nav ul li a span { font-family: var(--montserrat); font-weight: var(--medium); } 
#milestone .milestone-nav ul li a.active {background-color: #2A543D;}
#milestone .milestone-nav ul li a.active,
#milestone .milestone-nav ul li a.active span { font-weight: var(--bold); color:#fff; } 


@media screen and (max-width:640px){
  #milestone .milestone-nav { margin-bottom:4rem; } 
  #milestone .milestone-nav ul { display: flex; width:100% } 
  #milestone .milestone-nav ul li { flex:1; } 
  #milestone .milestone-nav ul li a {flex-direction: column; gap:0.4rem;  font-size:1rem;} 

}
  

/** 슬라이더 **/
#milestone .milestone_wrap { position: relative; width:100%; } 
#milestone .milestone_wrap .milestone_title {position: absolute; top:-60px; left:0; width:100%; font-size:3.889rem; font-family: var(--montserrat); font-weight: var(--extraBold); color:#2A543D; text-transform: uppercase; text-align: center; line-height: 1.1; text-align: center; opacity:0.3;}
#milestone .milestone_slider { position: relative; width: 100%; height:530px;} 

#milestone .milestone_slider::after { content: ''; position: absolute; bottom:225px; display: block; width:100%; height:1px; border-top:1px dotted #808080; } 
/* background:url('/assets/images/sub/milestone/line_milestone.png') repeat top center; */

#milestone .milestone_slider .swiper-slide { display: flex; flex-direction: column; justify-content:flex-start; cursor: pointer; } 
#milestone .milestone_slider .swiper-slide:not(.swiper-slide-active):hover .year span.dot::after { opacity: 0.15; width:50px; height:50px; } 

.eng #milestone .milestone_wrap.tech { padding-top:200px; } 


@media screen and (max-width:1560px){
  #milestone .milestone_wrap {margin:0 auto;  width:calc(100% - 45px);} 
}

@media screen and (max-width:1024px){ 
  #milestone .milestone_wrap .milestone_title {position: absolute; top:0px; left:0; font-size:1.5rem; text-align: center;}
}

@media screen and (max-width:640px){
  #milestone .milestone_wrap .milestone_title {top:45px; font-size:1.8rem; }
  #milestone .milestone_slider .swiper-slide.m_hide {display: none; } 
}



/** 슬라이더 > 히스토리 **/
#milestone .milestone_slider .swiper-slide .history { flex:0 0 260px; padding:0.8333rem 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; opacity: 0.2; transition: all 0.7s } 
#milestone .milestone_slider .swiper-slide.swiper-slide-active .history { opacity: 1; } 
#milestone .milestone_slider .swiper-slide .history.has-img { justify-content: space-between; } 

#milestone .milestone_slider .swiper-slide .history p.tit { line-height:1.3333rem; text-align: center; letter-spacing: -0.5px; font-weight: var(--bold); } 
#milestone .milestone_slider .swiper-slide .history p.tit.sm { font-size:0.8889rem; line-height: 1.5556rem; } 
#milestone .milestone_slider .swiper-slide .history .img img { width:100%; object-fit: cover; } 

/** 슬라이더 > 년도 **/
#milestone .milestone_slider .swiper-slide .year { position: relative; flex:0 0 170px; text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; gap:1.1111rem; transition: all 0.7s; } 
#milestone .milestone_slider .swiper-slide .year p { font-family: var(--montserrat); font-size: 30px; font-weight: var(--semiBold); transition: all 0.7s; } 
#milestone .milestone_slider .swiper-slide .year span.dot { position: relative; width:88px; height:88px; } 
#milestone .milestone_slider .swiper-slide .year span.dot::before, 
#milestone .milestone_slider .swiper-slide .year span.dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; border-radius: 50%; } 
#milestone .milestone_slider .swiper-slide .year span.dot::before { width:0.8889rem; height:16px; background-color: #007E3A } 
#milestone .milestone_slider .swiper-slide .year span.dot::after { background-color: #707070; opacity: 0; width:0; height:0; transition: all 0.7s; } 
 
#milestone .milestone_slider .swiper-slide.swiper-slide-active .year p { transform: scale(1.5); font-weight: var(--bold); } 
#milestone .milestone_slider .swiper-slide.swiper-slide-active .year span.dot::after { opacity: 0.15; width:88px; height:88px; } 


/** 슬라이더 > 기술 **/
#milestone .milestone_slider .swiper-slide .technology {display: flex; align-items: center; justify-content: center; flex:0 0 80px; opacity: 0.2; transition: all 0.7s; } 

#milestone .milestone_slider .swiper-slide.swiper-slide-active .technology { opacity: 1; } 
#milestone .milestone_slider .swiper-slide .technology ul { display: flex; flex-direction: column; align-items: center; } 
#milestone .milestone_slider .swiper-slide .technology ul li { position: relative; padding-left:0.5556rem; font-weight: var(--semiBold); line-height: 1.3333rem; font-family: var(--montserrat); font-size:20px; letter-spacing: -0.7px; text-align: center; } 
#milestone .milestone_slider .swiper-slide .technology ul li::before { content: '-'; display: inline-block; padding-right:3px;} 
#milestone .milestone_slider .swiper-slide .technology p { line-height:1.3333rem; text-align: center; letter-spacing: -0.5px; font-weight: var(--bold);}

/** 히스토리 레이아웃 변경 2024-04-02**/
#milestone .milestone_slider.mile_history {height:690px;}
#milestone .milestone_slider.mile_history::after { content: ''; position: absolute; bottom:auto; top:303px; display: block; width:100%; height:1px; border-top:1px dotted #808080; } 
#milestone .milestone_slider.mile_history .swiper-slide .technology {align-items: center; justify-content: flex-start; flex:0 0 260px; flex-direction: column; align-content: space-between;} 
#milestone .milestone_slider.mile_history .swiper-slide .technology p.img {margin-top:30px;}
#milestone .milestone-button-next.btn_history {bottom:auto; top:calc(303px - 35px); } 
#milestone .milestone-button-prev.btn_history {bottom:auto; top:calc(303px - 35px); } 



/** 슬라이더 > 버튼 **/
#milestone .milestone-button-prev,
#milestone .milestone-button-next { position: absolute; bottom:calc(225px - (70px / 2)); display: block; width:70px; height:70px; background-color: #fff; cursor: pointer; border-radius: 100%; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; z-index: 99; } 
#milestone .swiper-button-disabled { opacity: 0.4; } 
#milestone .milestone-button-prev { left:-70px; background-image: url('/assets/images/sub/slide_prev.svg'); } 
#milestone .milestone-button-next { right:-70px; background-image: url('/assets/images/sub/slide_next.svg'); } 

@media screen and (max-width:1560px){
  #milestone .milestone-button-prev { left:-35px;} 
  #milestone .milestone-button-next { right:-35px;} 
}

@media screen and (max-width:640px){
  #milestone .swiper-button-disabled { opacity: 0; } 
  #milestone .milestone-button-prev,
  #milestone .milestone-button-next { width:50px; height:50px; bottom:calc(225px - (50px / 2)); } 
  #milestone .milestone-button-prev { left:-20px;} 
  #milestone .milestone-button-next { right:-20px;} 

  #milestone .milestone-button-next.btn_history {top:calc(303px - 25px); } 
  #milestone .milestone-button-prev.btn_history {top:calc(303px - 25px); } 
}



/** 슬라이더 > 초석 처음 **/
#milestone .milestone_slider .swiper-slide.tech { padding-right:20px; } 
#milestone .milestone_slider .swiper-slide.tech .history { align-items: flex-start; justify-content: flex-start; gap:3.3333rem; } 
#milestone .milestone_slider .swiper-slide.tech .history p.tit { text-align: left; font-size:1.2222rem; font-weight: var(--bold); line-height: 1.5rem; } 
#milestone .milestone_slider .swiper-slide.tech .history .history_list { display: flex; justify-content: space-between; width:100%; } 
#milestone .milestone_slider .swiper-slide.tech .history .history_list li { width:4.1667rem; text-align: center; } 
#milestone .milestone_slider .swiper-slide.tech .history .history_list li p.history_year {position: relative; display: flex; align-items: center; justify-content: center; margin-bottom:0.5556rem; width:100%; height:4.1667rem; background-color: #8C8C8C; border-radius: 100%; font-family: var(--montserrat); font-weight: var(--semiBold); color:#fff } 
#milestone .milestone_slider .swiper-slide.tech .history .history_list li p.history_year::after {position: absolute; top:50%; right:-100%; content: ''; display: block; width:100%; border-top:1px solid #8C8C8C;} 
#milestone .milestone_slider .swiper-slide.tech .history .history_list li:last-child p.history_year::after {display: none;}
#milestone .milestone_slider .swiper-slide.tech .history .history_list li p.history_txt { font-size:0.8889rem; font-weight: var(--semiBold); } 
#milestone .milestone_slider .swiper-slide.tech .technology { border-right:1px solid #2A543D; justify-content: flex-start; background: url('/assets/images/sub/milestone/ico_milestone.png') no-repeat center right 20px;}
#milestone .milestone_slider .swiper-slide.tech .technology p {font-size:1.6667rem; font-weight: var(--bold); color:#2A543D;}