@charset "utf-8";
/* 연혁 — company/css/history.css */

.hist-tab {display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:60px;}
.hist-tab button {padding:14px 26px; border-radius:50px; background:#fff; border:1.5px solid var(--border1); font-size:var(--fs15); font-weight:600; color:#777; cursor:pointer; transition:all .3s;}
.hist-tab button:hover {color:var(--c_base1); border-color:var(--c_base1);}
.hist-tab button.on {background:var(--c_base1); color:#fff; border-color:var(--c_base1); box-shadow:0 8px 20px rgba(14,111,184,0.25);}

.hist-stage {position:relative;}
.hist-block {display:none; padding:50px 0;}
.hist-block.on {display:block; animation:histFade .6s ease;}
@keyframes histFade {from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);}}

.hist-year {font-size:var(--fs80); font-weight:900; line-height:1; color:var(--c_base1); letter-spacing:-0.04em; opacity:0.12; text-align:center;}
.hist-period {margin-top:-30px; font-size:var(--fs32); font-weight:800; color:#000; text-align:center; letter-spacing:-0.02em;}

.hist-list {margin-top:60px; max-width:900px; margin-left:auto; margin-right:auto; padding:40px 0; position:relative;}
.hist-list::before {content:''; position:absolute; left:84px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, transparent, var(--c_base1), transparent);}
.hist-list li {display:flex; gap:48px; padding:18px 0; align-items:flex-start; position:relative;}
.hist-list li::after {content:''; position:absolute; left:80px; top:29px; width:10px; height:10px; border-radius:50%; background:var(--c_base1); border:3px solid #fff; box-shadow:0 0 0 2px var(--c_base1); z-index:2;}
.hist-list .y {flex-shrink:0; width:60px; font-size:var(--fs20); font-weight:800; color:var(--c_base1);}
.hist-list .c {flex:1; padding-left:48px; font-size:var(--fs18); color:#555; line-height:1.7;}
.hist-list .c strong {color:#000; font-weight:700;}

@media screen and (max-width:1199px) {
	.hist-tab {gap:6px; margin-bottom:0;}
	.hist-year {}
	.hist-period {}
}
@media screen and (max-width:767px) {
	.hist-tab {gap:6px; margin-bottom:0;}
	.hist-tab button {padding:10px 16px;}
	.hist-year {opacity:0.15;}
	.hist-period {margin-top:-20px;}
	.hist-list::before {left:60px;}
	.hist-list li {gap:20px;}
	.hist-list li::after {left:55px; top:27px;}
	.hist-list .y {width:50px;}
	.hist-list .c {padding-left:20px;}
}