@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; align-items: flex-start; padding-bottom: 9rem; /* justify-content:space-between; */ }
/* .history-style01 .history-year-item:last-child{padding-bottom:0} */
.history-style01 .history-year-item .info-box-wrap {width: calc(100% - 34rem); margin-left: 8.5rem;}
.history-style01 .history-year-item .history-info-box{display: flex; align-items: flex-start; width:100%; margin-bottom: 8rem;}
.history-style01 .history-year-item .history-info-box:last-child {margin-bottom: 0;}
.history-style01 .history-year-item .history-info-box .history-month-box {width: 100%;}
.history-style01 .history-year-item .history-back-line{position:absolute; top:1.5rem; height:100%; width:1px; left:0; 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; width: 18rem; padding-left: 7.5rem; font-size:3.6rem; font-weight: 700; letter-spacing: -0.02em; color:#000; transition: all 0.3s !important;}
/* .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%; left: -0.5rem; width:0.5rem; height:0.5rem; background-color:#fff; border-radius:50%; transform:translate(0%, -50%); border:0.3rem solid #000; box-shadow: 0.5rem 0.5rem 1rem 0 rgba(0, 0, 0, 0.2); z-index:1; transition: left 0.3s, width 0.3s, height 0.3s, border-color 0.3s !important;}
.history-style01 .history-year-item .history-year-tit.active {font-size: 4.6rem; color: var(--main-color);}
.history-style01 .history-year-item .history-year-tit.active .dot {left: -1.2rem; width:1.5rem; height:1.5rem; border:0.5rem solid var(--main-color);}
.history-style01 .history-year-item .history-year-tit .dot::before {position: absolute; content: ""; top: 50%; left: 50%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%); background-color: rgba(245, 73, 86, 0.1); border-radius: 50%; opacity: 0; transition: opacity 0.3s;}
.history-style01 .history-year-item .history-year-tit.active .dot::before {opacity: 1;}
/* History 01 :: Month */
.history-style01 .history-month-box .history-month-item{position:relative; display:flex; line-height:1.4; margin-bottom:2.7rem}
.history-style01 .history-month-box .history-month-item:last-child {margin-bottom: 0;}
/* .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:10rem; margin-right: 1rem; display:block; font-size:1.6rem; font-weight: 700; letter-spacing:-0.02em; color:#000;}
.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% - 11rem); }
.history-style01 .history-month-box .history-month-item .history-detail-txt{color:#666; font-size:1.6rem; font-weight: 500; letter-spacing:-0.02em; 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 {display: block; padding-bottom: 6rem;}
	.history-style01 .history-year-item .info-box-wrap {width: 100%; margin-left: 0; margin-top: 3rem;}
	.history-style01 .history-year-item .history-info-box {margin-bottom: 4rem;}
	.history-style01 .history-year-item .history-back-line{left:2.2rem}
	.history-style01 .history-year-item .history-year-tit{padding-left: 6rem; font-size: 3rem;}
	.history-style01 .history-year-item .history-year-tit:after{display:none;} 
	.history-style01 .history-year-item .history-year-tit .dot{left:1.7rem;}
	.history-style01 .history-year-item .history-year-tit .dot::before {width: 3.5rem; height: 3.5rem;}
	.history-style01 .history-year-item .history-year-tit.active {font-size: 4rem;}
	.history-style01 .history-year-item .history-year-tit.active .dot {width: 1rem; height: 1rem; left: 1.3rem;}
	/* History 01 :: Month */
	.history-style01 .history-month-box .history-month-item{padding-left: 6rem; margin-bottom: 1.5rem;}
	.history-style01 .history-month-box .history-month-item .history-month {width: 8.5rem;}
	.history-style01 .history-month-box .history-month-item .history-month + .history-detail-txt-con {width: calc(100% - 9.5rem);}
	.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; 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{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: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)}
}