@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: 39.2%;
	--history-year-width: 9rem;
}
@media all and ( max-width:800px ){
	:root{
		/* History 02 */	
		--history-year-group-width: auto;
	}
}
/*  ****************** 회사소개 :: BEST 연혁 01 ********************** */
/* History 01 :: Layout */
.history-style01{position:relative;margin-top:8.7rem;}
.history-style01 .history-year-item {position:relative;}
.history-style01 .history-year-item .history-year-inner{position:relative; display:flex; justify-content:space-between; padding-bottom:10rem;}
.history-style01 .history-year-item:last-child{padding-bottom:0}
.history-style01 .history-year-item .history-info-box{width:50%; box-sizing:border-box;}
.history-style01 .history-year-item .history-back-line{position:absolute; top:10px; height:100%; width:1px; left:50%; background-color:#ddd; }
.history-style01 .history-year-item:last-child .history-back-line{height:calc(100% - 15px);}
.history-style01 .history-year-item .history-back-line .line-inner{display:block; width:100%; height:0; background-color:var(--history-color);}
.history-style01 .history-year-item .history-year-tit{position:absolute; font-size:1.9rem; color:#000; left:50%; top:0.3rem;}

/* History 01 :: Month */
.history-style01 .history-month-box .history-month-item{position:relative; display:flex; line-height:1.4; margin-bottom:2rem}
.history-style01 .history-year-item:last-child .history-month-box .history-month-item:last-child{margin-bottom:0;}
.history-style01 .history-month-box .history-month-item:before{position:absolute; top:0.4rem; width:1.6rem; height:1.6rem; box-sizing:border-box; border:1px solid #e6e6e6; background-color:#fff; border-radius:50%; content:"";  }
.history-style01 .history-month-box .history-month-item .history-month{width:6rem; display:block; font-size:1.5rem; letter-spacing:-0.065em; color:#222; text-align:center;}
.history-style01 .history-month-box .history-month-item .history-detail-txt-con{width:100%;}
.history-style01 .history-month-box .history-month-item .history-month + .history-detail-txt-con{width:calc(100% - 5rem); }
.history-style01 .history-month-box .history-month-item .history-detail-txt{position: relative; color:#222; font-size:1.5rem; letter-spacing:-0.065em; margin-bottom:2rem; word-break:keep-all;}
.history-style01 .history-month-box .history-month-item .history-detail-txt:before{position: absolute; content:''; width:4px; height:4px; border-radius:50%; background:#5a5a5a; top:1rem;}
.history-style01 .history-month-box .history-month-item .history-detail-txt:last-of-type{margin-bottom:0} 
.history-style01 .history-month-box .history-month-item .history-detail-txt.only-txt{position:relative;}
.history-style01 .history-month-box .history-month-item .history-detail-txt.only-txt:before{position:absolute; top:0; content:"-"; }
/* History :: active */
/* .history-style01 .history-year-item .history-year-tit,
.history-style01 .history-year-item .history-year-tit:after,
.history-style01 .history-year-item .history-year-tit .dot,
.history-style01 .history-month-box .history-month-item,
.history-style01 .history-month-box .history-month-item:before,
.history-style01 .history-month-box .history-month-item .history-month{transition:all 0.5s ease-in-out; transition-property:color, background-color, border-color}
.history-style01 .history-year-item.active .history-year-tit{color:var(--history-color)}
.history-style01 .history-year-item.active .history-year-tit:after{background-color:var(--history-color)}
.history-style01 .history-year-item.active .history-year-tit .dot{background-color:var(--history-color)}
.history-style01 .history-year-item.active .history-month-box .history-month-item:before{border-color:var(--history-color)}
.history-style01 .history-year-item.active .history-month-item .history-month{color:var(--history-color)} */
/* History :: 이미지 */
.history-style01 .history-img-box{width:var(--history-year-group-width);}
.history-style01 .history-img-box span{display:inline-block; margin-bottom:0.7rem;}
.history-style01 .history-img-box span img{max-width:100%;}
@media all and (min-width:801px){
	/* 우측내용 */
	.history-style01 .history-year-item .history-year-inner.history-right{flex-direction:row-reverse; }
	.history-style01 .history-year-item .history-year-inner.history-right .history-info-box{/* padding-left:13rem; */}
	.history-style01 .history-year-inner.history-right .history-year-tit{margin-left:-3.4rem; transform:translateX(-100%);}
	.history-style01 .history-year-inner.history-right .history-month-box .history-month-item:before{left:0px; transform:translate(-50%, 0)}
	.history-style01 .history-year-inner.history-right .history-month-box .history-month-item .history-detail-txt:before{left:-6.1rem; transform:translateX(0.05rem);}
	.history-style01 .history-year-inner.history-right .history-img-box{text-align:right;}
	
	/* 좌측내용 */
	.history-style01 .history-left{text-align:right; }
	.history-style01 .history-year-item .history-left .history-info-box{/* padding-right:13rem; */}
	.history-style01 .history-left .history-year-tit{margin-right:-3rem; transform:translateX(100%);}
	.history-style01 .history-left .history-year-tit:not(.reverse):after{right:0;}
	.history-style01 .history-left .history-year-tit:not(.reverse) .dot{right:0; transform:translate(50%,-50%)}
	.history-style01 .history-left .history-month-box .history-month-item{flex-direction:row-reverse;}
	.history-style01 .history-left .history-month-box .history-month-item:before{right:0px; transform:translate(50%, 0)}
	.history-style01 .history-left .history-month-box .history-month-item .history-detail-txt:before{right:-6.1rem; transform:translateX(0.1rem);}
	.history-style01 .history-left .history-img-box{text-align:left;}
	
	/* 연도 타이틀이 내용 반대편에 있을때 (reverse) */
	.history-style01 .history-year-item .history-year-tit.reverse{position:absolute; top:-5px; }
	.history-style01 .history-right .history-year-tit.reverse{right:50%; padding-right:var(--history-padding);}
	.history-style01 .history-right .history-year-tit.reverse:after{right:0}
	.history-style01 .history-right .history-year-tit.reverse .dot{left:100%; transform:translate(-50%,-50%)}
	.history-style01 .history-left .history-year-tit.reverse{left:50%; padding-left:var(--history-padding);}
	.history-style01 .history-left .history-year-tit.reverse:after{left:0}
	.history-style01 .history-left .history-year-tit.reverse .dot{right:100%; transform:translate(50%,-50%)}
}
@media all and (max-width:800px){
	.history-style01{margin-top:4rem;}
	.history-style01 .history-year-item .history-year-inner{flex-direction: column-reverse;}
	/* History 01 :: Layout */
	.history-style01 .history-year-item .history-back-line{left:10px; top: 0;}
	.history-style01 .history-year-item:last-child .history-back-line {height: 100%;}
	.history-style01 .history-year-item .history-year-tit{padding-left:var(--history-padding)}
	.history-style01 .history-year-item .history-year-tit:after{display:none;} 
	.history-style01 .history-year-item .history-year-tit .dot{left:-3px;}
	/* History 01 :: Month */
	.history-style01 .history-year-item .history-info-box{width:100%; margin-top:5rem;}
	.history-style01 .history-year-item .history-year-tit{position: relative; left:auto; top:auto; margin-bottom:3rem;}
	.history-style01 .history-month-box .history-month-item{padding-left:var(--history-padding)}
	.history-style01 .history-month-box .history-month-item:before{left:2px;}
	.history-style01 .history-month-box .history-month-item .history-month{width:4rem; text-align:left;}
	.history-style01 .history-month-box .history-month-item .history-detail-txt:before{left:-8.2rem;}
	/* History :: 이미지 */
	.history-img-box{position:static; width:auto; margin:0 0 0 var(--history-padding); display: flex; justify-content:space-between; flex-wrap:wrap;}
	.history-style01 .history-img-box span{width:calc(50% - 0.35rem);}
}


/*  ****************** 회사소개 :: 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:#222; font-size:4.5rem; font-weight:600; letter-spacing:-0.075em;}
.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{}
.history-style02 .history-img-box span{display:inline-block; margin-bottom:0.7rem;}
.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)); margin-left:5rem;}
.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:8rem; }
.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:#000; font-weight:600; font-size:2.6rem;}
.history-style02 .history-year-item .history-year:after{position:absolute; right:0; top:0; width:13px; height:13px; box-sizing:border-box; border:3px solid var(--history-color); background-color:#fff; border-radius:50%; content:""; transform:translate(50%, 50%)}
/* 우측영역 :: Month */
.history-style02 .history-month-box{position:relative; width:calc(100% - var(--history-year-width))}
.history-style02 .history-month-box .history-month-item{position:relative; display:flex; padding-left:3rem; line-height:1.4; margin-bottom:1.2rem}
.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:5rem; display:block; font-size:1.8rem; letter-spacing:-0.02em; color:#333}
.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% - 5rem); }
.history-style02 .history-month-box .history-month-item .history-detail-txt{color:#666; font-size:1.8rem; letter-spacing:-0.065em; margin-bottom:1.2rem; word-break:keep-all;}
.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-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-year-group-tit-box + .history-year-list-box .history-year-item:last-of-type{padding-bottom:0}
}


/*  ****************** 회사소개 :: BEST 연혁 03 ********************** */
/* -------- 좌측(년대) -------- */
.history-style03 .history-year-group-box{position:relative; border-top:1px solid #333; padding:6rem 0;}
.history-style03 .history-year-group-box .history-year-group-tit{position:absolute; left:0; top:5rem; color:#222; font-size:6rem; font-weight:600; letter-spacing:-0.075em; }
/* -------- 우측영역(정보) -------- */
/* 우측영역 :: Year */
.history-style03 .history-year-group-tit + .history-year-list-box{margin-left:38rem;}
.history-style03 .history-year-item {position:relative; display:flex; justify-content:space-between; padding:3rem 0; border-top:1px solid #ddd; }
.history-style03 .history-year-item:first-child{border-top:0; padding-top:0}
.history-style03 .history-year-item:last-child{padding-bottom:0}
.history-style03 .history-year-item .history-year{position:relative; z-index:1; width:15rem; color:#000; font-weight:600; font-size:2.6rem;}
/* 우측영역 :: Month */
.history-style03 .history-month-box{position:relative; width:calc(100% - 15rem)}
.history-style03 .history-month-box .history-month-item{position:relative; display:flex; line-height:1.4; margin-bottom:1.2rem}
.history-style03 .history-month-box .history-month-item .history-month{width:5rem; display:block; font-size:1.6rem; letter-spacing:-0.02em; color:#333}
.history-style03 .history-month-box .history-month-item .history-detail-txt-con{width:100%;}
.history-style03 .history-month-box .history-month-item .history-month + .history-detail-txt-con{width:calc(100% - 5rem); }
.history-style03 .history-month-box .history-month-item .history-detail-txt{color:#666; font-size:1.6rem; letter-spacing:-0.065em; margin-bottom:1.2rem; word-break:keep-all; }
.history-style03 .history-month-box .history-month-item .history-detail-txt:last-of-type{margin-bottom:0} 
.history-style03 .history-month-box .history-month-item .history-detail-txt.only-txt{position:relative; padding-left:1em;}
.history-style03 .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-style03 .history-year-group-box .history-year-group-tit{position:static; font-size:4.5rem; margin-bottom:3rem}
	/* 우측영역 :: Year */
	.history-style03 .history-year-group-tit + .history-year-list-box{margin-left:0;}
	.history-style03 .history-year-item .history-year{width:10rem;}
	.history-style03 .history-month-box{width:calc(100% - 10rem)}
}