@charset "utf-8";
/* *******************************************************
 * filename : history.css
 * description : 연혁 관련 CSS
 * date : 2019-09-27
******************************************************** */

/*  ****************** 회사소개 :: BEST 연혁 01 ********************** */
.company-history {position:relative;padding:60px 0 100px;}
.company-history:before{position:absolute; top:0px; left:50%; width:1px; height:100%; background:#ddd; content:"";}
.company-history-wrapper {overflow:hidden;}
.company-history-list-wrap {position:relative; width:50%; margin-top:40px;}
.company-history-info p {position:relative; font-size:16px; line-height: 1.6; letter-spacing: -0.5px; font-weight:400; color:#555; margin-bottom:20px; word-break:keep-all}
.company-history-info p:after{content:""; position:absolute; top:10px; width:3px; height:3px; background-color:#aaa}
.company-history-year {position:absolute; top:-10px; text-align:center; font-size:30px; line-height: 46px; letter-spacing: -0.5px; color:#333; font-weight: 600; }
.company-history-year::after{ position:absolute; top:50%; width:11px; height:11px; margin-top:-7px; background-color:#fff; border: 2px solid #f68920; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content:""; }
.history-left .company-history-list-wrap{float:left;}
.history-left .company-history-list-wrap .company-history-info {text-align:right; padding-right: 110px;}
.history-left .company-history-list-wrap .company-history-info p {padding-right: 15px; }
.history-left .company-history-list-wrap .company-history-info p::after { right:0; }
.history-left .company-history-list-wrap .company-history-year {right: 19px;}
.history-left .company-history-list-wrap .company-history-year::after {right:0; margin-right:-26px;}
.history-right .company-history-list-wrap{float:right;}
.history-right .company-history-list-wrap .company-history-info {padding-left: 110px;}
.history-right .company-history-list-wrap .company-history-info p {padding-left: 15px;}
.history-right .company-history-list-wrap .company-history-info p::after {left:0;}
.history-right .company-history-list-wrap .company-history-year {left: 19px;}
.history-right .company-history-list-wrap .company-history-year::after {left:0; margin-left:-26px;}

/* 날짜가 들어간 연혁 */
.company-history-info .month-history-txt:after{display:none; }
.company-history-info .history-month{position:absolute; top:0px; color:#222; font-weight:500; }
.history-left .company-history-list-wrap .company-history-info .month-history-txt{padding-right:30px;}
.history-left .company-history-list-wrap .company-history-info .month-history-txt .history-month{right:0px;}
.history-right .company-history-list-wrap .company-history-info .month-history-txt{padding-left:30px;}
.history-right .company-history-list-wrap .company-history-info .month-history-txt .history-month{left:0px;}

@media all and (max-width:800px){
	.history-left .company-history-list-wrap .company-history-info {padding-right: 85px;}
	.history-right .company-history-list-wrap .company-history-info {padding-left: 85px;}
	.company-history-year {font-size:21px; line-height: 30px; top:-4px;}
	.company-history-info p {font-size:13px; margin-bottom: 10px;}
	.company-history-info p:after {top: 9px;}
}
@media all and (max-width:480px){
	.company-history{padding-top:25px; padding-bottom: 50px;}
	.company-history:before{left:10px}
	.company-history-list-wrap{width:auto;}
	.company-history-info p {font-size:13px;}
	.company-history-info p:after{top:9px;}
	.company-history-year{font-size:18px}
	.company-history-year::after{width:6px; height:6px; border-width:1px; margin-top:-4px; }
	.history-right .company-history-list-wrap .company-history-info p {padding-left: 10px;}
	.history-left .company-history-list-wrap,
	.history-right .company-history-list-wrap{float:none; padding-left:80px; padding-right:0;}
	.history-left .company-history-list-wrap .company-history-year::after{left: 0; margin-left: -19px;}
	.history-left .company-history-list-wrap .company-history-info,
	.history-right .company-history-list-wrap .company-history-info{text-align:left; padding-left:10px; padding-right:0}
	.history-left .company-history-list-wrap .company-history-info p{padding-right:0; padding-left:10px;}
	.history-left .company-history-list-wrap .company-history-info p::after { right:auto; left:0; margin-right:10px}
	.history-left .company-history-list-wrap .company-history-year,
	.history-right .company-history-list-wrap .company-history-year{left:0; right:auto; margin-right:0; margin-left:25px}
	.history-right .company-history-list-wrap .company-history-year:after{left:auto; right:100%; margin-left:0; margin-right:10px}
}

/*  ****************** 회사소개 :: BEST 연혁 02 ********************** */
.history-list-box .history-year-box{overflow:hidden; position:relative; padding-left:250px}
.history-list-box .history-year-box h4{position:absolute; left:0; top:0;  color:#222; font-size:30px; font-weight:600; letter-spacing:-1.5px; }
.history-list-box .history-year-box h4:after{position:absolute; top:15px; left:110px; content:""; width:56px; height:3px; background-color:#ffa200; }
.history-list-box .history-year-box .history-year-item {overflow:hidden; position:relative; padding-bottom:30px}
.history-list-box .history-year-box .history-year-item:last-child{padding-bottom:0}
.history-list-box .history-year-box .history-year-item:before{position:absolute; top:0px; left:120px; width:1px; height:100%; background-color:#ddd; content:"";}
.history-list-box .history-year-box:first-child .history-year-item:first-child:before{top:15px;}
.history-list-box .history-year-box .history-year-item .history-year{position:absolute; top:5px; left:0px; width:120px;}
.history-list-box .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:#ffa200; -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}
.history-list-box .history-year-box .history-year-item .history-year strong{color:#1e1e1e; font-weight:600; font-size:23px;font-style:italic}
.history-list-box .history-year-box .history-year-item .history-info-con{padding-left:140px; }
.history-list-box .history-year-box .history-year-item:last-child .history-info-con{  padding-bottom:50px;}
.history-list-box .history-year-box:last-child .history-year-item:last-child .history-info-con{  padding-bottom:0px;}
.history-list-box .history-year-box .history-year-item .history-info-con p{position:relative; margin-bottom:10px; padding-left:30px; color:#5b5b5b; font-size:15px; font-weight:300; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all}
.history-list-box .history-year-box .history-year-item .history-info-con p:first-child{margin-top:7px}
.history-list-box .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 .history-year-box .history-year-item .history-info-con p span{}
 
@media all and ( max-width:1024px ){
    /* -------- 회사소개 :: BEST 연혁 02 -------- */
    .history-list-box .history-year-box{ padding-left:200px}
}
@media all and ( max-width:800px ){
    /* -------- 회사소개 :: BEST 연혁  02-------- */
    .history-list-box .history-year-box{padding-left:0}
    .history-list-box .history-year-box h4{position:relative; left:auto; top:auto; margin-bottom:25px; font-size:26px;}
    .history-list-box .history-year-box h4:after{top:100%; left:0; margin-top:5px;}
    .history-list-box .history-year-box .history-year-item:first-child:before{top:15px;}
    .history-list-box .history-year-box .history-year-item .history-info-con p{font-size:14px}
}
@media all and ( max-width:480px ){
    /* -------- 회사소개 :: BEST 연혁  02 -------- */
    .history-list-box .history-year-box{margin-bottom:50px}
    .history-list-box .history-year-box h4{font-size:20px;}
    .history-list-box .history-year-box h4:after{width:45px; height:2px}
    .history-list-box .history-year-box .history-year-item .history-year{width:60px;}
    .history-list-box .history-year-box .history-year-item .history-year strong{font-size:17px}
    .history-list-box .history-year-box .history-year-item:before{left:60px}
    .history-list-box .history-year-box .history-year-item .history-info-con{padding-left:90px; }
    .history-list-box .history-year-box .history-year-item:last-child .history-info-con{padding-bottom:0}
    .history-list-box .history-year-box .history-year-item .history-info-con p{font-size:13px}
}


/* -------- 연혁02 -------- */
.company-history-con{border:1px solid #cfcfcf;}
.company-history-con ul li{padding:26px 4% 34px; border-top:1px solid #f2f2f2;}
.company-history-con ul li:first-child{border-top:0;}
.company-history-con ul li dl{position:relative; padding-left:138px; letter-spacing:-0.35px;}
.company-history-con ul li dl dt{position:absolute; top:0px; left:0px; color:#0069cb ;font-size:36px; font-weight:600; }
.company-history-con ul li dl dd p{position:relative; margin-top:26px; padding-left:85px; min-height:38px; }
.company-history-con ul li dl dd p:first-child{margin-top:0;}
.company-history-con ul li dl dd p .history-year{position:absolute; top:2px; left:0px; width:38px; height:38px; color:#fff; background-color:#666; text-align:center; line-height:38px; font-size:18px; font-weight:300; -webkit-border-radius:38px;-moz-border-radius:38px;-o-border-radius:38px;border-radius:38px;}
.company-history-con ul li dl dd p .history-text{display:block; color:#666; font-size:18px; letter-spacing:-0.35px; font-weight:300; line-height:38px; margin-top:10px;}
.company-history-con ul li dl dd p .history-text:first-child{margin-top:0;}
 
@media all and (max-width:768px){
    /* -------- 연혁 -------- */
    .company-history-con{border:0;}
    .company-history-con ul li{padding:18px 2%;}
    .company-history-con ul li dl{padding-left:0;}
    .company-history-con ul li dl dt{position:static; padding-bottom:15px; font-size:26px;}
    .company-history-con ul li dl dd p{padding-left:35px; margin-top:10px; min-height:24px;}
    .company-history-con ul li dl dd p .history-year{width:24px; height:24px; line-height:24px; -webkit-border-radius:24px;-moz-border-radius:24px;-o-border-radius:24px;border-radius:24px; font-size:13px;}
    .company-history-con ul li dl dd p .history-text{line-height:24px; font-size:14px; }
}

/* -------- 연혁03 -------- */
.history-info > ul {position:relative; background: url("http://design.giantsoft.co.kr/images/content/history_repeat.png") repeat-y 89px; padding:50px 0; margin-top: 45px; margin-bottom: 30px;}
.history-info > ul:before, .history-info > ul:after{display:inline-block; content:""; position:absolute; top:0px; left:89px; width:4px; height:4px; border:4px solid #eb7416; -webkit-border-radius:12px;-moz-border-radius:12px;-o-border-radius:12px;border-radius:12px;}
.history-info > ul:after{top:auto; bottom:0px;}
.history-info dl {display:table;  width:100%;}
.history-info dt {display:table-cell; vertical-align: top; padding-right:70px; width:205px;}
.history-info dt p {width:186px; height:185px; background:url("http://design.giantsoft.co.kr/images/content/history_year.png") no-repeat; text-align:center; line-height: 185px; font-size:31px; letter-spacing: -0.35px; color:#333333; font-style: italic; margin-top: 75px;}
.history-info dd {display:table-cell;  padding:75px 0; padding-left: 50px;border-top: 1px solid #E0E0E0; height:190px;}
.history-info > ul > li:first-child dd {border-top: 0;}
.history-info dd li {font-size:16px; line-height: 36px; letter-spacing: -0.35px; color:#999999; font-weight: 300;}
.history-info dd li span {color:#333333; font-weight: 400 ; display:inline-block; margin-right:10px}


/* 연혁04-------- 기업연혁 -------- */
.history-list-container{width:100%; background:url(http://design.giantsoft.co.kr/images/content/history_repeat.gif) repeat-y center top; padding-bottom:110px;}
.history-list-container > li{width:100%; overflow:hidden;}
.history-list-container > li > div{width:50%;}
.left-history{float:left;}
.left-history dl{width:100%; overflow:hidden;}
.left-history dt, .left-history dd{display:inline-block; vertical-align:top; float:right;}
.left-history dt > span{display:inline-block; width:86px; height:41px; font-size:24px; line-height:41px; color:#fff; font-weight:500; text-align:center; background-color:#4c4c4c;}
.left-history dt:after{display:inline-block; vertical-align:top; content:""; width:44px; height:1px; background-color:#ccc; margin-top:20px;}
.left-history dd{margin-right:20px;}
.left-history dd > p{font-size:17px; line-height:36px; color:#333; font-weight:300; letter-spacing:-0.25px; text-align:right; position:relative; padding-right:13px;}
.left-history dd > p:after{display:inline-block; vertical-align:middle; content:"·"; color:#333; position:absolute; top:0; right:0;}
.right-history{float:right;}
.right-history dl{width:100%; overflow:hidden;}
.right-history dt, .right-history dd{display:inline-block; vertical-align:top; float:left;}
.right-history dt > span{display:inline-block; width:86px; height:41px; font-size:24px; line-height:41px; color:#fff; font-weight:500; text-align:center; background-color:#4c4c4c;}
.right-history dt:before{display:inline-block; vertical-align:top; content:""; width:44px; height:1px; background-color:#ccc; margin-top:20px;}
.right-history dd{margin-left:20px;}
.right-history dd > p{font-size:17px; line-height:36px; color:#333; font-weight:300; letter-spacing:-0.25px; position:relative; padding-left:13px;}
.right-history dd > p:before{display:inline-block; vertical-align:middle; content:"·"; color:#333; position:absolute; top:0; left:0;}
.right-history.point dt > span{background-color:#4cb2a7;}


/* -------- 연혁05 -------- */
.history-content {padding-bottom: 100px;}
.history-content h3 {font-size:38px; line-height: 76px; letter-spacing: -0.25px; color:#26a8e9; font-weight: 600;}
.history-list dl{position:relative; margin-left:42px; padding-left:82px; border-left: 1px solid #E9E9E9; }
.history-list dl::before {position:absolute; top:3px; left:-7px;display:inline-block; content:""; width:6px; height:6px; border:3px solid #26a8e9; -webkit-border-radius:12px;-moz-border-radius:12px;-o-border-radius:12px;border-radius:12px;}
.history-list dl dt{font-size:16px; font-weight: 500; color:#51b9ed;}
.history-list dl dd {padding-top: 10px; padding-bottom: 50px; font-size:16px; line-height: 24px; color:#505050}
.history-list dl.last dd {border-left: 0;}