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

:root{
	--history-color: #33bfef;
	--history-padding: 8rem; 
	--history-year-group-width: 45rem;
	--history-year-width: 40px;
}
@media all and ( max-width:800px ){
	:root{

		--history-year-group-width: auto;
	}
}




/*  ****************** 회사소개 :: BEST 연혁 01 ********************** */
p.rnd01_topblue{margin-bottom:80px; width:100%; text-align:center; font-size:20px; font-weight:600; color:#00ADEC; }


/* History 01 :: Layout */
.history_wrap{width:100%; margin-bottom:0px;}
.history-style01{position:relative;}
.history-style01 .history-year-item {padding-top:6px; position:relative; display:flex; justify-content:space-between; overflow: hidden;padding-bottom:20px;  margin-bottom:60px; background:#fff;}
.history-style01 .history-year-item:last-child{padding-bottom:0; margin-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:first-child .history-back-line {height:150%; top:20px;} /* 추가 221006 YJ */
.history-style01 .history-year-item .history-back-line .line-inner{display:block; width:100%; height:0; background-color:var(--history-color); transition:0.5s;}
.history-style01 .history-year-item .history-year-tit{position:relative; font-size:16px; letter-spacing:-0.025em; color:#333; margin-bottom:3rem; font-weight: 700;}
.history-style01 .history-year-item .history-year-tit:after{display:none; 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:12px; width:1rem; height:1rem; background-color:#0032A5; border-radius:50%; transform:translate(0%, -50%);  /*border:0.5rem solid #2E71E5;*/ z-index:1;}
.history-style01 .history-year-item .history-year-tit .dotbg01{background:#008CC9;}
.history-style01 .history-year-item .history-year-tit .dotbg02{background:#2E71E5;}
.history-style01 .history-year-item .history-year-tit .dotbg03{background:#0032A5;}





.his_flex{display:flex;}
.his_flex_l{
  display: flex;
  justify-content: flex-end;
}
.history-style01 .history-year-item .history-year-circle{width:193px; height:191px; margin:0 auto; margin-top:60px;  background:url(../../dmedi/img/history_circle.png) no-repeat center center; position:relative; font-size:25px; letter-spacing:-0.025em; color:#333; margin-bottom:3rem; font-weight: 700;}
.history-style01 .history-year-item .history-year-circle:after{display:none; position:absolute; top:50%; width:calc(var(--history-padding) - 1rem); height:1px; background-color:#ddd; content:"";}
.history-style01 .history-year-item .history-year-circle dt{font-size:16px; color:#000; display:block;}
.history-style01 .history-year-item .history-year-circle dd{font-size:16px; display:block;}
.history-style01 .history-year-item .history-year-circle dl{width:193px; margin:0 auto; text-align:center; padding-top:70px; }


/* History 01 :: Month */
.history-style01 .history-month-box .history-month-item{position:relative; display:flex; line-height:1.4; margin-bottom:20px;}
.history-style01 .history-month-box .history-month-item:before{display:none; position:absolute; top:0.8rem; width:9px; height:9px; box-sizing:border-box; /* border:2px solid #e1e1e1;*/background-color:#0032A5; border-radius:50%; content:"";  }
.history-style01 .history-month-box .history-month-item .history-month{width:5rem; display:block; font-size:16px; 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:#111; font-size:16px; line-height:1.8; letter-spacing:-0.065em; margin-bottom:20px; 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-style01 .history-month-box .history-month-item .history-detail-txt span{min-width:80px;    display: inline-block; font-size:16px; font-weight:600;}
.history-style01 .history-month-box .history-month-item .history-detail-txt em{font-weight:400; font-size:16px;}



/* 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-year-item .history-year-circle,
.history-style01 .history-year-item .history-year-circle:after,
.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-circle{color:#2E71E5;}
.history-style01 .history-year-item.active .history-year-circle:after{background-color:var(--history-color)}

/* .history-style01 .history-year-item.active .history-back-line .line-inner {height:100%;} */
.history-style01 .history-year-item.on .history-back-line .line-inner {height:100%;}
.history-style01 .history-year-item.active .history-year-tit .dot{background-color:#008CC9; /*border: 2px solid #008CC9;*/}
.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{padding:0;}
	.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-year-circle:not(.reverse){ }
	.history-style01 .history-right .history-year-circle:not(.reverse):after{left:0;}
	.history-style01 .history-right .history-year-circle:not(.reverse) .dot{left:0; transform:translate(-50%,-50%)}

	.history-style01 .history-right .year_img img{width:100%; max-width:476px; margin-left:40px;}
	.history-style01 .history-left .year_img img{width:100%; max-width:476px;margin-right:40px; }

	.history-style01 .history-right .history-month-box .history-month-item{padding-left:80px;}
	.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:0.5em;}
	.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:80px;}
	.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:0.5em;}
	.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%)}

} /* end */



@media all and (max-width:1200px){

.history-style01 .history-right .history-month-box .history-month-item {  padding-left: 40px;}
.history-style01 .history-left .history-month-box .history-month-item {  flex-direction: row-reverse;  padding-right:40px;}
.history-style01 .history-month-box .history-month-item .history-detail-txt {  font-size: 15px;}
.history-style01 .history-month-box .history-month-item {  margin-bottom: 8px;}


.history-style01 .history-year-item .history-year-circle dt{font-size:15px; display:block;}
.history-style01 .history-year-item .history-year-circle dd{font-size:24px; display:block;}



	.history-style01 .history-right .year_img img{width:98%; max-width:420px; margin-left:20px;}
	.history-style01 .history-left .year_img img{width:98%; max-width:420px;margin-right:20px; }

.history-style01 .history-month-box .history-month-item .history-detail-txt span {
    min-width: 60px;
    display: inline-block;
    font-size: 15px;

}

} /* end */







@media all and (max-width:991px){
	/* History 01 :: Layout */
	.history-style01 .history-year-item {display:grid; padding-bottom:0;  width: 100%;  margin: 0 auto; justify-content: center;}

  p.rnd01_topblue{margin-bottom:60px; width:100%; text-align:center; font-size:18px; }


	.history-style01 .history-year-item .history-info-box {width: 100%;order:2;}
	/* .history-style01 .history-year-item .history-back-line{left:10px} */
	.history-style01 .history-year-item .history-back-line{left:15px; display:none;}
	.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:0;} */
	.history-style01 .history-year-item .history-year-tit .dot{display:none;left:10px;}
	/* History 01 :: Month */
	.history-style01 .history-month-box .history-month-item{padding-left:20px;}
	.history-style01 .history-month-box .history-month-item:before{left:1px; transform:translateX(50%)}
	.history-style01 .history-month-box .history-month-item .history-detail-txt.only-txt {padding-left: 1rem;}
	.history-style01 .history-month-box .history-month-item .history-detail-txt.only-txt:before {left:0;}	
	/* History :: 이미지 */
	.history-img-box{position:static; width:auto; margin:5rem 0 0 var(--history-padding)}

.history-style01 .history-year-item .history-year-tit .dot { position: absolute;  top: 12px;  width: 12px;  height: 12px;  background-color: #0032A5;  border-radius: 50%;  transform: translate(0%, -50%);
    /* border: 0.5rem solid #2E71E5; */
    z-index: 1;}
.history-style01 .history-right .history-month-box .history-month-item { padding-left:20px;}
.history-style01 .history-year-item {  margin-bottom: 40px;}

.history-style01 .history-month-box .history-month-item .history-detail-txt {display:flex;   font-size: 15px; text-align:left;justify-content: flex-start;}

.history-style01 .history-year-item.active .history-year-circle {  order: 1 !important; padding:0px 60px 20px 60px; margin:0 auto; }
.history-style01 .history-year-item .history-year-circle { padding: 20px 60px; margin:0;}
.history-style01 .history-month-box .history-month-item .history-detail-txt span { min-width:50px;  display: inline-block; order:1;}
.history-style01 .history-month-box .history-month-item .history-detail-txt em { order:2; font-size:15px;}

.history-style01 .history-year-item .history-year-circle {  background-size: 180px;}

.history-style01 .history-left .history-month-box .history-month-item { padding-right:20px;}
.history-style01 .history-year-item .history-year-circle dl {  padding-top:80px; }

.history-style01 .history-year-item .history-year-tit {  margin-bottom: 20px;}
.history-style01 .history-right .year_img {text-align:center;}
.history-style01  .year_img {text-align:center;}
.history-style01 .history-right .year_img img {
    width: 98%;
    max-width: 420px;
   margin:0 auto;
}
.history-style01 .history-left .year_img img {
    width: 98%;
    max-width: 420px;
    margin:0 auto;
}

} /* end */


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



/* ******************  회사소개 :: 연혁 ********************** */
.company-page.history-container {padding-bottom:0;}
.history-top {background: url(/images/content/history_bg.jpg)no-repeat; padding:16rem 0 18.2rem; margin-bottom:11.3rem; position:relative; z-index:2;}
.history-top .txt-box {padding-left: 13rem;}
.history-top .tit {display:inline-block; font-size:5rem; line-height:1.1; letter-spacing:-0.025em; color:#fff; font-weight: 600; margin-bottom: 2.7rem;}
.history-top .sub-tit {font-size:2rem; line-height:1.3; letter-spacing:-0.075em; color:#fff; font-weight: 300;}
.history-container .cm-fixed-tab-container-JS {margin-top: 8.5rem;}
.history-container .sub-tab-wrapper-style {z-index:2; position:absolute; width:100%; height:7.3rem; bottom:0; right:0; margin-bottom:0;}
.history-container .sub-tab-list-style ul {justify-content:flex-end; padding-right: 3.5rem; border-top:1px solid rgba(255,255,255,0.1);}
.history-container .sub-tab-list-style ul li {position: relative; width: 7.5rem; background-color:initial; border:none; }
.history-container .sub-tab-list-style ul li:before {opacity:0; content:""; position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:3px; background: var(--main-color); transition:0.3s;}
.history-container .sub-tab-list-style ul li a {height:7.3rem;}
.history-container .sub-tab-list-style ul li a em {color:#fff;}
/* .history-container .sub-tab-list-style ul li.selected:before {display:block; width: 3.6rem;}  */
.history-container .sub-tab-list-style ul li:hover:before {width:3.6rem; opacity:1;}



@media all and (max-width:800px){

  p.rnd01_topblue{margin-bottom:40px; width:100%; font-size:16px; }


	.history-top {background: url(/images/content/history_bg.jpg)no-repeat 50%; padding:8rem 0 9rem; background-size: cover; margin-bottom:5rem;}
	.history-top .txt-box {padding-left: 2rem;}
	.history-top .tit {line-height:1.1;}
	.history-container .sub-tab-wrapper-style {height:initial;}
	.history-container .sub-tab-list-style ul li a {height:initial;}
	.history-container .sub-tab-list-style ul li a em {color:#333;}
	.history-container .sub-drop-menu-style ul li.selected a em {color:var(--history-color);}
	.history-container .sub-tab-list-style ul {padding-right:0;}
	.history-container .sub-tab-list-style ul li {border-top:1px solid #eee; width:100%;}
	.history-container .sub-tab-list-style ul li:before {display:none;}
	.history-container .sub-tab-list-style ul li.selected:before {display:none;}
}