@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: 9rem;
}
@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-page {padding-top: 14.8rem;}
.history-style02 {position: relative;}
.history-style02 .history-percent-bar {position: absolute; top: 0; left: 37%; width: 4px; height: 100%; background-color: #cecece;}
.history-style02 .history-percent-bar .percent-bar-child {position: absolute; content: ""; width: 100%; height: 0; background-color: #7ec247; transition: all 0.3s; box-shadow: 14px 12px 60px 0px rgba(126, 194, 71, 1);}
.history-style02 .percent-circle {display: inline-block; box-sizing: border-box; position: absolute; top: 0; left: calc(37% - 1rem); content: ""; width: 24px; height: 24px; background-color: #fff; border: 4px solid #cecece; border-radius: 50%; z-index: 5;}
.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{position: relative; width: 72rem;}
.history-style02 .history-year-group-box .history-box-tit {position: absolute; left: 0; top: -3.5rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.025em; color: #7ec247;}
.history-style02 .history-year-group-box .history-year-group-tit{transition: all 0.3s; position:relative; color:#333; font-size:10rem; font-weight:700; letter-spacing:-0.025em;}
.history-style02 .history-year-group-box.active .history-year-group-tit {color: #7ec247;}
/* 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:"";} */
.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: 15.6rem;; color:#333; font-style: italic; font-weight:500; font-size:4.2rem; letter-spacing: -0.025em;}
.history-style02 .history-year-item .history-year strong {font-weight: 500;}
/* .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: 0 0 1rem 3rem; line-height:1.4;}
/* .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; line-height: 1.8em; font-size:2rem; font-style: italic; font-weight: 500; letter-spacing:-0.025em; color: rgba(51, 51, 51, 0.4);}
.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:#5f5f5f; font-size:1.8rem; font-weight: 400; line-height: 2em; letter-spacing:-0.05em; 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-img-box{margin-left:0; padding-right:0;}
	.history-style02 .history-year-group-box .history-box-tit {position: static; display: inline-block; padding-bottom: 1.7rem;}
	/* 우측영역 :: Year */
	.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 {flex-direction: column;}
	.history-style02 .history-month-box {width: 100%;}
	.history-style02 .history-month-box .history-month-item {padding: 3rem 0 1rem 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)}
}