@charset "utf-8";
/* *******************************************************
 * filename : history.css
 * description : 연혁 관련 CSS
 * date : 2020-03-06
******************************************************** */

/*  ****************** 회사소개 :: BEST 연혁 01 ********************** */
/* History :: Layout */
.company-history {position:relative; max-width:1200px; margin:0px auto; padding-bottom:3px}
.company-history-wrapper {position:relative; padding-bottom:50px; *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%; background-color:#ccc; content:""; margin-left:-1px;}
.company-history-list-wrap{position:relative;}
.company-history-list-wrap:before{position:absolute; top:0px; left:50%; width:8px; height:8px; background-color:#221f1f; border-radius:50%; content:""; transform:translateX(-50%)}
.company-history-wrapper:first-child .company-history-list-wrap:before{background-color:#a3a3a3;}
.company-history-info-box {width:50%; position:relative; min-height:410px; }

/* History :: 정보 */
.company-history-info{position:absolute; top:50%; margin-top:50px; box-sizing:border-box;}
.company-history-info .history-item{position:relative;  line-height: 1.6; letter-spacing: -0.5px; font-weight:300; color:#444; margin-bottom:10px; word-break:keep-all}
.company-history-info .history-month{position:absolute; top:0px; width:85px; color:#222; font-weight:700; }
.company-history-info .history-txt{position:relative; display:inline-block;}
.company-history-year {position:absolute; top:50%; text-align:center; transform:translateY(-50%); font-size:36px; letter-spacing: 0px; color:#333; color:attr(data-color); font-weight: 700; }
.company-history-year .dot{position:absolute; top:50%; width:14px; height:14px; background-color:#fff; border: 6px solid #433d65; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content:""; transform:translateY(-50%)}
/* History :: 이미지 */
.company-history-img-box{width:50%; margin-top:62px;}
.company-history-img-box .company-history-img-inner{position:relative; display:inline-block;}
.company-history-img-box .company-history-img-inner span{display:block;}
.company-history-img-box .company-history-img-inner .bg{
	position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#000; 
	-webkit-transition: all .65s ease-in-out;
    transition: all .65s ease-in-out;
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}
.company-history-img-box .company-history-img-inner img{display:block; position:relative; z-index:1; max-width:100%; }
/* History :: 사이드 년도 */
.company-history-side-year{position:absolute; width:50px}
.company-history-side-year span{display:inline-block; font-weight:900; color:#f6f6f6; font-size:150px; transform-origin:left center;}
@media all and (min-width:801px){
	/* History :: 왼쪽 */
	.history-left .company-history-info-box{float:left;}
	.history-left .company-history-info-box::before,
	.history-left .company-history-info-box::after {left:100%; transform:translatex(-50%)}
	.history-left .company-history-year {right:0; padding-right:40px;}
	.history-left .company-history-year .dot{right:0; transform:translate(50%,-50%)}
	.history-left .company-history-info {text-align:right; right:0px;padding-right: 40px;}
	.history-left .company-history-info .history-item{padding-right: 85px; padding-left:150px;}
	.history-left .company-history-info .history-month{right:0;}
	.history-left .company-history-img-box{float:right;}
	.history-left .company-history-img-box .company-history-img-inner{margin-left:160px}
	.history-left.aos-animate .company-history-img-box .company-history-img-inner .bg{transform:translate(30px, 30px); }
	.history-left .company-history-side-year{left:0; bottom:0;}
	.history-left .company-history-side-year span{transform:rotate(-90deg); }
	/* History :: 오른쪽 */
	.history-right .company-history-info-box{float:right; }
	.history-right .company-history-info-box::before,
	.history-right .company-history-info-box::after {right:100%; transform:translatex(50%)}
	.history-right .company-history-info {padding-left: 40px;}
	.history-right .company-history-info .history-item{padding-left: 85px; padding-right:150px;}
	.history-right .company-history-info .history-month{left:0;}
	.history-right .company-history-year {left:0%; padding-left:40px;}
	.history-right .company-history-year .dot{left:0; transform:translate(-50%,-50%)}
	.history-right .company-history-img-box{float:left; text-align:right;}
	.history-right .company-history-img-box .company-history-img-inner{margin-right:160px}
	.history-right.aos-animate .company-history-img-box .company-history-img-inner .bg{transform:translate(-30px, 30px); }
	.history-right .company-history-side-year{right:0px; top:0px; }
	.history-right .company-history-side-year span{transform:rotate(90deg); }
}
@media all and (max-width:1220px){
	.company-history-side-year{display:none;}
}
@media all and (max-width:800px){
	/* History :: Layout */
	.company-history-wrapper:before{left:10px;}
	.company-history-list-wrap:before{left:10px; display:none; }
	.company-history-info-box{min-height:auto; width:auto; padding-left:35px; padding-top:30px;}
	.company-history-info-box::before{top:-3px; left:0; width:15px; height:15px; border-width:3px;}
	.company-history-info-box::after{top:4px;left:7px; width:5px; height:5px; border-width:1px; }
	/* History :: 정보 */
	.company-history-info{position:static; margin-top:0;}
	.company-history-info .history-item{font-size:13px; padding-left:65px;}
	.company-history-info .history-month{left:0;}
	.company-history-info .history-txt:before{display:none;}
	.company-history-year{top:0px;font-size:18px; padding-left:30px; left:3px; transform:translateY(0)}
	.company-history-year::before{width:20px; left:0; }
	.company-history-year .dot{left:0; width:10px; height:10px; border-width:2px;}
	/* History :: 이미지 */
	.company-history-img-box{width:auto; margin-top:20px}
	.company-history-img-box .company-history-img-inner{margin-left:35px; margin-right:15px;}
	.aos-animate .company-history-img-box .company-history-img-inner .bg{transform:translate(10px,10px)}
}

/*  ****************** 회사소개 :: BEST 연혁 02 ********************** */
.history-list-box-style02 .history-year-box{position:relative; padding-left:360px}
.history-list-box-style02 .history-year-box h4{position:absolute; left:0; top:0;  color:#ab8759; font-size:44px; font-weight:600; letter-spacing:-1.5px; }
.history-list-box-style02 .history-year-box h4:after{position:absolute; top:50%; left:185px; content:""; width:69px; height:3px; background-color:#ab8759; }
.history-list-box-style02 .history-year-box .history-year-item {position:relative; padding-bottom:25px}
.history-list-box-style02 .history-year-box .history-year-item:last-child{padding-bottom:0}
.history-list-box-style02 .history-year-box .history-year-item:before{position:absolute; top:15px; left:120px; width:1px; bottom:-23px; background-color:#ddd; content:"";}
.history-list-box-style02 .history-year-box:last-child .history-year-item:last-child:before{display:none;}
.history-list-box-style02 .history-year-box .history-year-item .history-year{position:absolute; top:0; left:0px; width:120px;}
.history-list-box-style02 .history-year-box .history-year-item .history-year:after{position:absolute; display:block; content:""; top:50%; right:-4px; width:7px; height:7px; margin-top:-3px; background-color:#ab8759; -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}
.history-list-box-style02 .history-year-box .history-year-item .history-year strong{color:#1e1e1e; font-weight:400; font-size:26px;}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con{padding-left:165px; }
.history-list-box-style02 .history-year-box .history-year-item:last-child .history-info-con{  padding-bottom:100px;}
.history-list-box-style02 .history-year-box:last-child .history-year-item:last-child .history-info-con{  padding-bottom:0px;}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p{position:relative; margin-bottom:10px; color:#222; font-size:17px; font-weight:400; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all; opacity:0.8}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p:first-child{margin-top:7px}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p .history-month{position:absolute; top:0px; left:0px;color:#333; font-weight:600; }
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p b{color:#a6804f; font-weight:400;}
 
@media all and ( max-width:1024px ){
    /* -------- 회사소개 :: BEST 연혁 02 -------- */
    .history-list-box-style02 .history-year-box{ padding-left:200px}
}
@media all and ( max-width:800px ){
    /* -------- 회사소개 :: BEST 연혁  02-------- */
    .history-list-box-style02 .history-year-box{padding-left:0}
    .history-list-box-style02 .history-year-box h4{position:relative; left:auto; top:auto; margin-bottom:25px; font-size:26px;}
	.history-list-box-style02 .history-year-box h4 br{display:none;}
    .history-list-box-style02 .history-year-box h4:after{display:none; top:100%; left:0; margin-top:5px;}
    .history-list-box-style02 .history-year-box .history-year-item:first-child:before{bottom:-16px;}
	.history-list-box-style02 .history-year-box .history-year-item:last-child:before{bottom:0px;}
    .history-list-box-style02 .history-year-box .history-year-item .history-info-con p{font-size:14px}

	.history-list-box-style02 .history-year-box .history-year-item{padding-bottom:15px;}
}
@media all and ( max-width:480px ){
    /* -------- 회사소개 :: BEST 연혁  02 -------- */
    .history-list-box-style02 .history-year-box{margin-bottom:50px}
    .history-list-box-style02 .history-year-box h4{font-size:20px;}
    .history-list-box-style02 .history-year-box h4:after{width:45px; height:2px}
    .history-list-box-style02 .history-year-box .history-year-item .history-year{width:60px;}
    .history-list-box-style02 .history-year-box .history-year-item .history-year strong{font-size:17px}
    .history-list-box-style02 .history-year-box .history-year-item:before{left:60px}
    .history-list-box-style02 .history-year-box .history-year-item .history-info-con{padding-left:90px; }
    .history-list-box-style02 .history-year-box .history-year-item:last-child .history-info-con{padding-bottom:0}
    .history-list-box-style02 .history-year-box .history-year-item .history-info-con p{font-size:13px}
}


/*  ****************** 회사소개 :: BEST 연혁 03 ********************** */
.history-list-wrapper-style03 .history-list-con{position:relative; margin-top:55px;}
.history-list-wrapper-style03 .history-list-con:fisrt-child{margin-top:0}
/* 연혁 :: 내용 */
.history-list-wrapper-style03 .history-list-inner{float:left; width:50%; word-break:keep-all;}
.history-list-wrapper-style03 .history-year-item{overflow:hidden; margin-top:50px;}
.history-list-wrapper-style03 .history-year-item:first-child{margin-top:0px;}
.history-list-wrapper-style03 .history-year-item .history-years{float:left; width:145px; color:#000; font-size:30px; font-weight:500;}
.history-list-wrapper-style03 .history-year-item .history-detail-con{float:left; width:calc(100% - 145px); padding-top:10px; font-size:16px; letter-spacing:-0.5px; line-height:1.3; color:#272727;}
.history-list-wrapper-style03 .history-year-item .history-detail-item {overflow:hidden; margin-top:20px;}
.history-list-wrapper-style03 .history-year-item .history-detail-item:first-child{margin-top:0}
.history-list-wrapper-style03 .history-year-item .history-detail-item dt{float:left; width:70px; font-weight:700;}
.history-list-wrapper-style03 .history-year-item .history-detail-item dd{float:left; width:calc(100% - 70px); }
.history-list-wrapper-style03 .history-year-item .history-detail-item .history-txt{position:relative; padding-left:38px; font-weight:300; margin-top:15px; }
.history-list-wrapper-style03 .history-year-item .history-detail-item .history-txt:first-child{margin-top:0}
.history-list-wrapper-style03 .history-year-item .history-detail-item .history-txt:before{position:absolute; top:0px; left:0px; content:"-";}
/* 연혁 :: 이미지 */
.history-img-inner{position:absolute; top:0px; right:0px; height:100%; width:50%;}
.history-img-inner .img-wrapper{
	position:absolute; top:50%; left:0; right:0; text-align:right;
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.history-img-inner .img-box{display:inline-block; position:relative;  }
.history-img-inner .img-box img{max-width:100%;}

@media all and ( min-width: 1361px ){
	/* right */
	.history-list-wrapper-style03 .right-con .history-list-inner{float:right; }
	.history-list-wrapper-style03 .right-con .history-img-inner{right:auto; left:0;}
	.history-list-wrapper-style03 .right-con .history-img-inner .img-wrapper{text-align:left;}
}
@media all and ( max-width: 1360px ){
	/* 연혁 :: 이미지 */
	.history-list-wrapper-style03 .history-list-inner{width:60%}
	.history-list-wrapper-style03 .history-img-inner{width:35%; margin-left:5%;}
}
@media all and ( max-width: 1024px ){
	/* 연혁 :: 내용 */
	.history-list-wrapper-style03 .history-list-inner{float:none; width:auto; margin:0;}
	/* 연혁 :: 이미지 */
	.history-list-wrapper-style03 .history-img-inner{position:static; width:auto; text-align:left; margin-top:30px; margin-left:145px}
	.history-list-wrapper-style03 .history-img-inner .img-wrapper{
		position:static; 
		text-align:left;
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@media all and ( max-width: 800px ){
	/* 연혁 :: 내용 */
	.history-list-wrapper-style03 .history-year-item .history-years{float:none; width:auto; font-size:20px;}
	.history-list-wrapper-style03 .history-year-item .history-detail-con{float:none; width:auto; padding-top:15px; font-size:13px; line-height:1.5}
	.history-list-wrapper-style03 .history-year-item .history-detail-item dt{width:50px; }
	.history-list-wrapper-style03 .history-year-item .history-detail-item dd{width:calc(100% - 50px); }
	.history-list-wrapper-style03 .history-year-item .history-detail-item .history-txt{padding-left:20px; margin-top:5px;}
	/* 연혁 :: 이미지 */
	.history-list-wrapper-style03 .history-img-inner{margin-left:0;}
	.history-list-wrapper-style03 .history-img-inner .img-wrapper{text-align:center;}
}