@charset "utf-8";
/* *******************************************************
 * filename : history.css
 * description : 연혁 관련 CSS
 * date : 2022-09-23
******************************************************** */

:root{
	--history-color: #ffa200;
	/* History 01 */	
	--history-padding: 5rem; 
	/* History 02 */	
	--history-year-group-width: 60.5rem;
	--history-year-width: 21.5rem;
}

@media all and (max-width:1280px){
	:root{
		--history-year-group-width: 35.5rem;
	}
}

@media all and ( max-width:800px ){
	:root{
		/* History 02 */	
		--history-year-group-width: auto;
		--history-year-width: 18rem;
	}
}

@media all and ( max-width:480px ){
	:root{		
		--history-year-width: 10rem;
	}
}



/*  ****************** 회사소개 :: BEST 연혁 02 ********************** */
/* -------- 좌측(년대) -------- */
.history-style02 .history-year-group-box{position:relative; display:flex; justify-content:space-between; }
.history-style02 .history-year-group-box .history-year-group-tit-box{width:var(--history-year-group-width); }
.history-style02 .history-year-group-box .history-year-group-tit{position:relative; color:#fff; font-size:6.5rem; font-weight:700; letter-spacing:-0.02em; font-family:var(--font-family2);}
/* .history-style02 .history-year-group-box .history-year-group-tit:after{position:absolute; left:20rem; top:50%; width:10rem; height:3px; background-color:#e1e1e1; content:"";} */
/* History :: 이미지 */
.history-style02 .history-img-box{margin-top:3rem; padding-right:5rem}
.history-style02 .history-img-box span{display:inline-block;}
.history-style02 .history-img-box span img{max-width:100%;}
/* -------- 우측영역(정보) -------- */
/* 우측영역 :: Year */
.history-style02 .history-year-list-box{width:100%; position:relative; padding-bottom:10rem; }
.history-style02 .history-year-group-tit-box + .history-year-list-box{width:calc(100% - var(--history-year-group-width)); padding-top:1rem}
/* .history-style02 .history-year-list-box:before{position:absolute; top:15px; left:var(--history-year-width); width:1px; bottom:-23px; background-color:#e1e1e1; content:"";} */ /* line */
.history-style02 .history-year-item {position:relative; display:flex; justify-content:space-between; padding-bottom:10.3rem; font-family:var(--font-family2);}
.history-style02 .history-year-group-box:last-of-type .history-year-list-box:last-of-type{padding-bottom:0;}
.history-style02 .history-year-group-box:last-of-type .history-year-list-box:last-of-type:before{bottom:0;}
.history-style02 .history-year-group-box:last-of-type .history-year-item:last-of-type{padding-bottom:0}
.history-style02 .history-year-item .history-year{position:relative; z-index:1; width:var(--history-year-width); color:#fff; font-weight:600; font-size:4rem; align-self:flex-start;}
.history-style02 .history-year-item .history-year:after{position:absolute; right:0; top:50%; transform:translateY(calc(-50% + 0.5px)); width:9rem; height:1px; box-sizing:border-box; content:""; background: rgba(255,255,255,0.2);}
.history-style02 .history-year-item.recent .history-year {color: var(--main-color);}
.history-style02 .history-year-item.recent .history-year:after {background: var(--main-color);}
.history-style02 .history-year-item.recent .history-month-box .history-month-item .history-month {color: var(--main-color);}

/* 우측영역 :: Month */
.history-style02 .history-month-box{position:relative; width:calc(100% - var(--history-year-width)); margin-top: 0.8rem; }
.history-style02 .history-month-box .history-month-item{position:relative; display:flex; padding-left:2.3rem; line-height:1.4; margin-bottom:1.2rem}
.history-style02 .history-month-box .history-month-item:last-of-type {margin-bottom: 0;}
/* .history-style02 .history-month-box .history-month-item:before{position:absolute; left:0; top:0.8rem; width:9px; height:9px; box-sizing:border-box; border:2px solid #e1e1e1; background-color:#fff; border-radius:50%; content:""; transform:translate(-50%, 0)} */
.history-style02 .history-month-box .history-month-item .history-month{width:8rem; display:block; font-size:1.8rem; letter-spacing:-0.02em; color:#fff; font-weight: 500; text-align: center;}
.history-style02 .history-month-box .history-month-item .history-detail-txt-con{width:100%;}
.history-style02 .history-month-box .history-month-item .history-month + .history-detail-txt-con{width:calc(100% - 8rem); }
.history-style02 .history-month-box .history-month-item .history-detail-txt{color:rgba(255,255,255,0.6); font-size:1.8rem; letter-spacing:-0.05em; /* margin-bottom:1.2rem; */ line-height:1.55em; word-break:keep-all; font-weight: 400;}
.history-style02 .history-month-box .history-month-item .history-detail-txt:last-of-type{margin-bottom:0} 
.history-style02 .history-month-box .history-month-item .history-detail-txt.only-txt{position:relative; padding-left:1em;}
.history-style02 .history-month-box .history-month-item .history-detail-txt.only-txt:before{position:absolute; left:0; top:0; content:"-"; }

@media all and ( max-width:800px ){
    /* 좌측(년대) */
	.history-style02 .history-year-group-box{display:block; margin-top:8rem}
	.history-style02 .history-year-group-box:first-of-type{margin-top:0}
	.history-style02 .history-year-item .history-year {font-size:2.8rem;}
	.history-style02 .history-year-group-box .history-year-group-tit {font-size:4.5rem;}
	.history-style02 .history-year-group-box .history-year-group-tit-box{margin-bottom:5rem}
	.history-style02 .history-year-group-box .history-year-group-tit:after{display:none;}
	.history-style02 .history-img-box{margin-left:0; padding-right:0;}
	/* 우측영역 :: Year */
	.history-style02 .history-month-box {margin-top: 0.4rem;}
	.history-style02 .history-month-box .history-month-item .history-month {font-size:1.5rem;}
	.history-style02 .history-month-box .history-month-item .history-detail-txt {font-size:1.5rem;}
	.history-style02 .history-year-group-tit-box + .history-year-list-box .history-year-item:last-of-type{padding-bottom:0}
}

@media all and (max-width:480px){
	.history-style02 .history-year-item {padding-bottom:4rem;}
	.history-style02 .history-year-item .history-year:after {width: 2rem;}
	.history-style02 .history-month-box .history-month-item .history-month {width: 3.5rem;}
	.history-style02 .history-month-box .history-month-item .history-month + .history-detail-txt-con {width: calc(100% - 3.5rem);}	
}