@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 :: Layout */
.company-history {position:relative; padding-top:30rem;}
.company-history-wrapper {position:relative; padding-bottom:16.8rem; *zoom:1;}
.company-history-wrapper:after{clear:both; display:block; content:"";}
.company-history-wrapper:before{position:absolute; top:3px; height:100%; width:2px; left:50%; margin-left:-1px; background-color:rgba(0,0,0,0.1); content:"";}
.company-history-wrapper:last-child {padding-bottom:0}
.company-history-wrapper:last-child:before{display:none;}
.company-history-wrap {position: relative;}
.company-history-wrap::before {position: absolute; content: ""; width: 29.8rem; height: 38.7rem; left: 0; top: 37rem; background: center / cover no-repeat url("/images/content/history_symbol01.webp");}
.company-history-wrap::after {position: absolute; content: ""; width: 29.4rem; height: 43.7rem; right: 0; top: 96rem; background: center / cover no-repeat url("/images/content/history_symbol02.webp");}
.company-history-info-box {display: flex; position:relative; width:100%; }
.company-history-info-box .history-img {width: 37.143%;}
.company-history-info-box .history-img img {border-radius: 6rem 0 6rem 0; max-width: 100%;}
.company-history-info-box .company-history-info {width: calc(62.857% - 36rem);}
.company-history-info-box::before{ position:absolute; top:0; width:1rem; height:1rem;  background-color:#000; border:1.2rem solid #fff;  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content:"";  transition:background 0.4s;}
/* History :: 정보 */
.company-history-info .history-item{position:relative;  margin-bottom:3rem; word-break:keep-all}
.company-history-info .history-month{position:absolute; top:0px; font-size:1.8rem; line-height: 1.88;  letter-spacing: -0.05em; font-weight:700; color:#555;}
.company-history-info .history-txt{ position:relative; font-weight: 400;display:block; font-size:1.9rem;  line-height: 1.57; letter-spacing:-0.025em; color: #555; /*font-family:'Noto Sans KR';*/ }
.company-history-info .history-txt::before {position: absolute; content: ""; left: 0; top: 1.3915rem; width: 0.7rem; height: 0.2rem; background-color: rgba(21, 42, 82, 0.25);}
.company-history-info .history-month + .history-txt {margin-top:0}
.company-history-year {font-size: 8.5rem; letter-spacing: -0.025em; color:#222; font-weight: 500; transition: color 0.4s; padding-bottom: 3.5rem;}
/* On */
.company-history-wrapper.on .company-history-info-box::before {background-color: #1ba692;}
.company-history-wrapper.on .company-history-year {color: #1ba692;}

@media all and (min-width:801px){
	/* History :: 왼쪽 */
	.history-left .company-history-info-box {flex-direction: row-reverse;}
	.history-left .company-history-info-box::before,
	.history-left .company-history-info-box::after {left:50%; transform:translatex(-50%)}
	.history-left .company-history-info-box .history-img {text-align: right; padding-right: 6.5rem;}
	.history-left .company-history-info-box .history-img img {max-width: 100%;}
	.history-left .company-history-info {text-align:right; padding-right: 23rem;}
	.history-left .company-history-info .history-item{padding-right: 5.5rem; }
	.history-left .company-history-info .history-month{right:0;}
	.history-left .company-history-info .history-txt{padding-right:1.8rem; }
	.history-left .company-history-info .history-txt::before{right:0;}
	.history-left .company-history-year {left:100%; padding-left:7.5rem;}
	.history-left .company-history-year:before{left:0}
	.history-left .company-history-info .history-txt::before {right: 0; left: auto;}
	/* History :: 오른쪽 */
	.history-right .company-history-info-box::before,
	.history-right .company-history-info-box::after {left:50%; transform:translatex(-50%)}
	.history-right .company-history-info-box .history-img {padding-left: 6.5rem;}
	.history-right .company-history-info-box .history-img img {max-width: 100%;}
	.history-right .company-history-info {padding-left: 23rem;}
	.history-right .company-history-info .history-item{padding-left: 5.5rem;}
	.history-right .company-history-info .history-month{left:0;}
	.history-right .company-history-info .history-txt{padding-left:1.5rem; }
	.history-right .company-history-info .history-txt::before{left:0;}
	.history-right .company-history-list-wrap .company-history-year {right:100%; padding-right:7.5rem;}
	.history-right .company-history-list-wrap .company-history-year:before{right:0}
}
@media all and (max-width:1280px){
	.history-right .company-history-info {padding-left: 14rem;}
	.history-left .company-history-info {padding-right: 14rem;}

	.company-history-wrap::before {width: 25.5rem; height: 32.7rem;}
	.company-history-wrap::after {width: 25rem; height: 37.7rem;}
}

@media all and (max-width:800px){
	.company-page.history {padding-bottom: 8rem;}
	.company-history {padding-top:15rem;}
	/* History :: Layout */
	.company-history-wrapper {padding-bottom:3rem; padding-left: 0;}
	.company-history-wrap::before, .company-history-wrap::after {display: none;}
	/* .company-history-wrap > .area {padding: 0;} */
	/* .company-history-wrapper:before{left:1rem; top:calc(2.5rem - 12px);} */
	.company-history-wrapper:before{display: none;}
	.company-history-wrapper:after {display: none;}
	.company-history-info-box{display: block;}
	.company-history-info-box .history-img {width: 100%;}
	.company-history-info-box .company-history-info {width: 100%; padding: 0 !important;}
	/* .company-history-info-box::before{top:calc(2.5rem - 12px); left:-4rem; border-width:0.6rem} */
	.company-history-info-box::before{display: none;}

	.history-top-banner-con {padding-top: 30rem; width: calc(100% + var(--area-padding) * 2); margin-left: -5vw;}
	.history-top-banner-con::before {border-radius: 0;}
	.history-top-banner-con .banner-txt-box {max-width: 30rem; min-height: 26rem; margin-top: -19rem; padding: 3rem; border-radius: 0 4rem 0 0;}
	.history-top-banner-con .banner-txt-box h4 {padding-bottom: 1.5rem;}
	.history-top-banner-con .banner-txt-box p {font-size: 2rem;}
	
	.history-top-banner-con .banner-txt-box dl {padding-bottom: 1.5rem;}
	.history-top-banner-con .banner-txt-box h2 {font-size: 2rem;}
	
	/* History :: 정보 */
	.company-history-year {font-size: 4.2rem; padding-bottom: 2rem;}
	.company-history-info {margin-top:20px;}
	.company-history-info .history-item{font-size:13px; padding-left:4rem; margin-bottom: 1.5rem;}
	.company-history-info .history-month{left:0; top: -0.7rem; font-size: 2.2rem;}
	.company-history-info .history-txt:before{display:none;}
	.company-history-year{position:static; }
	.company-history-year::before{width:20px; left:0; }
}


/*  ****************** 회사소개 :: 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)}
}