@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: 45rem;
	--history-year-width: 15rem;
}
@media all and ( max-width:800px ){
	:root{
		/* History 02 */	
		--history-year-group-width: auto;
	}
}
/*  ****************** 회사소개 :: BEST 연혁 01 ********************** */
/* History 01 :: Layout */
.history-style01{position:relative;}
.history-style01 .history-year-item {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%;}
.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 .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:relative; font-size:4rem; color:#000; margin-bottom:4rem;}
.history-style01 .history-year-item .history-year-tit:after{position:absolute; top:50%; width:calc(var(--history-padding) - 1rem); height:1px; background-color:#ddd; content:"";}
.history-style01 .history-year-item .history-year-tit .dot{position:absolute; top:50%; width:1rem; height:1rem; background-color:#666; border-radius:50%; transform:translate(0%, -50%); border:0.8rem solid #eee; z-index:1;}
/* History 01 :: Month */
.history-style01 .history-month-box .history-month-item{position:relative; display:flex; line-height:1.4; margin-bottom:1.2rem}
.history-style01 .history-month-box .history-month-item:before{position:absolute; top:0.8rem; width:9px; height:9px; box-sizing:border-box; border:2px solid #e1e1e1; background-color:#fff; border-radius:50%; content:"";  }
.history-style01 .history-month-box .history-month-item .history-month{width:5rem; display:block; font-size:1.8rem; letter-spacing:-0.02em; color:#333}
.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{color:#666; font-size:1.8rem; letter-spacing:-0.065em; margin-bottom:1.2rem; word-break:keep-all;}
.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:calc(50% - var(--history-padding)); margin-top:8rem}
.history-style01 .history-img-box span{display:inline-block;}
.history-style01 .history-img-box span img{max-width:100%;}
@media all and (min-width:801px){
	/* 우측내용 */
	.history-style01 .history-right{flex-direction:row-reverse; }
	.history-style01 .history-right .history-year-tit:not(.reverse){padding-left:var(--history-padding); }
	.history-style01 .history-right .history-year-tit:not(.reverse):after{left:0;}
	.history-style01 .history-right .history-year-tit:not(.reverse) .dot{left:0; transform:translate(-50%,-50%)}
	.history-style01 .history-right .history-month-box .history-month-item{padding-left:var(--history-padding)}
	.history-style01 .history-right .history-month-box .history-month-item:before{left:0px; transform:translate(-50%, 0)}
	.history-style01 .history-right .history-month-box .history-month-item .history-detail-txt.only-txt{padding-left:1em;}
	.history-style01 .history-right .history-month-box .history-month-item .history-detail-txt.only-txt:before{left:0;}
	.history-style01 .history-right .history-img-box{text-align:right;}
	
	/* 좌측내용 */
	.history-style01 .history-left{text-align:right; }
	.history-style01 .history-left .history-year-tit:not(.reverse){padding-right:var(--history-padding); }
	.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; padding-right:var(--history-padding)}
	.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.only-txt{padding-right:1em;}
	.history-style01 .history-left .history-month-box .history-month-item .history-detail-txt.only-txt:before{right:0;}
	.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 01 :: Layout */
	.history-style01 .history-year-item .history-back-line{left:10px}
	.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-month-box .history-month-item{padding-left:var(--history-padding)}
	.history-style01 .history-month-box .history-month-item:before{left:1px; transform:translateX(50%)}
	/* History :: 이미지 */
	.history-img-box{position:static; width:auto; margin:5rem 0 0 var(--history-padding)}
}


/*   ****************** 회사소개 :: BEST 연혁 02 ********************** */
/* -------- 좌측(년대) -------- */
.history-style02 .history-year-group-box{position:relative; }
.history-style02 .history-year-group-box .history-year-group-tit-box{width: 100%; display:flex; align-items:center;}
.history-style02 .history-year-group-box .history-year-group-tit{position:relative; color:#222; font-size:8rem; font-weight:700; letter-spacing:-0.04em; line-height:1.175em;}
.history-style02 .history-year-group-box .history-year-group-tit:after {}

/* -------- 우측영역(정보) -------- */
/* 우측영역 :: Year */
.history-style02 .history-year-list-box{width:100%; position:relative;}
.history-style02 .history-year-list-box:before{position:absolute; top:2.5rem; bottom:1.5rem; left:2.2rem; width:2px; height:100%; background-color:rgba(0,0,0,0.07); content:"";} /* line */
.history-style02 .history-year-item {position:relative; display:flex; padding-bottom:6.5rem; padding-left: 9.7rem;}
.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: absolute; top: 1rem; left: 9.7rem; text-align:left;}
.history-style02 .history-year-item .history-year strong {display:block; text-align:left; color:#000; font-weight:700; font-size:3.5rem; line-height:1.2; letter-spacing:-0.025em;  transition:all 0.5s ease;}
/* 우측영역 :: Month */
.history-style02 .history-month-box{width: 100%; padding: 1rem 0 0 25rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.history-style02 .history-month-box .history-month-item{position:relative; display:flex; padding-left:0; line-height:1.4; margin-bottom: 2rem;}
.history-style02 .history-month-box .history-month-item:last-of-type {margin-bottom: 0;}
.history-style02 .history-month-box .history-month-item .history-month {display: block; width: 5rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.7;  color: #000;}
.history-style02 .history-month-box .history-month-item .history-detail-txt-con{width:calc(100% - 5rem); padding-left: 1.8rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.history-style02 .history-month-box .history-month-item .history-detail-txt{font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; color: #666666; line-height: 1.7;  word-break:keep-all; }
.history-style02 .history-month-box .history-month-item .history-detail-txt:last-of-type{margin-bottom:0} 

/* 추가 css 수정 */
.history-style02 .history-year-item .dots {margin: 0; position: absolute; top:2.5rem; left: 1.7rem; width: 1.1rem; height: 1.1rem; border: 0.3rem solid #000; background: #fff; box-sizing: border-box; border-radius: 50%; transition: all 0.3s; z-index:0;}
.history-style02 .history-year-item .dots .inner-dots {position: absolute; width: 4.5rem; height: 4.5rem; background: rgba(0, 122, 194, 0.1); border-radius: 100%; top: 50%; left: 50%; transform:translate(-50%,-50%) scale(0); z-index: -1; transition: all 0.3s;}

.history-style02 .history-year-item .dots .inner-dots:before { display: block; content: ""; width: 2.5rem; height: 2.5rem; background: #fff; position: absolute;  left: 50%; top: 50%; border-radius: 100%;transform: translate(-50%,-50%) scale(0);  border: 0.5rem solid #007AC2; transition:all 0.4s; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

/* active */
.history-style02 .history-year-item.active .history-year {}
.history-style02 .history-year-item.active .history-year strong {position: relative;  font-size:6rem; color: #007AC2; line-height:0.7 ;}
.history-style02 .history-year-item.active .dots .inner-dots {transform: translate(-50%,-50%) scale(1); /* animation:ani 0.5s forwards ease; *//* animation-delay:0.03s; */}
.history-style02 .history-year-item.active .dots .inner-dots:before {  transform: translate(-50%,-50%) scale(1); /* animation:ani 0.5s forwards ease; */ /* animation-delay:0.02s; */}
/* .history-style02 .history-year-item.active .history-month-box .history-month-item .history-detail-txt {font-size: 2rem; } */


@media all and (max-width:1280px){
	.history-style02 .history-year-item {flex-wrap: wrap; padding-left: 7rem; }
}
@media all and ( max-width:800px ){
	.history-style02 .history-year-item {padding-bottom: 3.5rem; padding-left: 6rem;}
	.history-style02 .history-year-item .history-year {left: 5.7rem;    top: 1.6rem;}
	.history-style02 .history-year-item .history-year strong {font-size: 2.5rem;}
	.history-style02 .history-year-item.active .history-year strong {font-size: 4.5rem;}
	.history-style02 .history-month-box {padding: 8rem 0 0 0;}
	.history-style02 .history-month-box .history-month-item .history-month {font-size: 1.7rem;}
	.history-style02 .history-month-box .history-month-item .history-detail-txt{font-size: 1.4rem;}
	
	.history-style02 .history-year-item .dots .inner-dots {width: 3.5rem; height: 3.5rem;}
	.history-style02 .history-year-item .dots .inner-dots:before {width: 1.8rem; height: 1.8rem;}
	
}
@media all and (max-width:480px){

}