@import url('sub.css'); 

/**** S:: 회사소개 > 인사말 ****/
.greeting {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:60px;}
.greeting__thumb {width:calc((100% - 60px) / 2); border-radius:var(--borderR30); overflow:hidden;}
.greeting__thumb img {width:100%; height:auto; display:block;}
.greeting__copy {width:calc((100% - 60px) / 2); align-self:center;}
.greeting__headline {margin:0 0 25px; font-weight:700; color:var(--black);}
.greeting__headline span {letter-spacing:inherit; line-height:inherit;}
.greeting__body p {margin:0 0 18px; color:var(--basic); letter-spacing:inherit; line-height:inherit;}
.greeting__body p:last-child {margin:0;}
.greeting__sign {margin:40px 0 0; display:flex; justify-content:flex-end; align-items:center; gap:15px;}
.greeting__role {font-weight:600; color:var(--black);}
.greeting__line {width:1px; height:12px; background:rgba(0,0,0,0.3); display:inline-block;}
.greeting__name {font-family:var(--roundT); font-weight:700; color:var(--black);}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 연혁 ****/
.history {position:relative;}
.history_top {position:relative; width:100%; max-width:1720px; margin:0 auto; border-radius:var(--borderR30); height:500px; overflow:hidden;}
.history_top::before {position:absolute; left:0; top:0; width:100%; height:100%; background: rgba(8, 16, 33, 0.2); background: linear-gradient(0deg, rgba(8, 16, 33, 0.2) 0%, rgba(8, 16, 33, 0.6) 100%); content:""; z-index:-3;}
.history_top .bg {position:absolute; left:0; top:0; width:100%; height:100%; background:url('/company/img/history_top.jpg') top center no-repeat; content:""; z-index:-5;}
.history_txt_wrap {position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:0 5%; text-align:center;}
.history_txt_wrap .fs36 {color:var(--white); font-family:var(--eng); font-weight:700; letter-spacing:0;}
.history_txt_wrap .fs18 {color:var(--white); margin:15px 0 0 0;}

.history_list {position:relative; padding-top:100px;}
.history_item {position:relative; display:flex; justify-content:space-between; padding-bottom:150px;}
.history_item .history_img {position:relative; width:630px; padding-right:130px; box-sizing:border-box;} 
.history_item .history_img .history_img_wrap {position: sticky; top: 20px;}
	.history_img .fs20 {color:var(--main); margin-bottom:5px; font-weight:600;}
	.history_img h4 {color:var(--black);}
	.history_img .cate_txt {margin-top:20px;}
	.history_img .hisYear_img {margin-top:60px;}
	.history_img .hisYear_img img {max-width:500px; border-radius:var(--borderR15);}
.history_item .historyYear_txt {width:calc(100% - 630px); padding-left:130px; box-sizing:border-box;} 
	.historyYear_txt .his_year + .his_year {margin-top:60px;}
	.historyYear_txt .his_year h5 {color:var(--black); font-family:var(--eng); font-weight:700; letter-spacing:0;}
	.historyYear_txt .his_year ul {margin-top:20px;}
	.historyYear_txt .his_year ul li + li {margin-top:5px;}
	.historyYear_txt .his_year ul li {position:relative; display:flex; flex-wrap:wrap;}
	.historyYear_txt .his_year ul li strong {width:40px; font-family:var(--eng); color:var(--black); font-weight:700;}
	.historyYear_txt .his_year ul li p {width:calc(100% - 40px); letter-spacing:inherit; line-height:inherit;}

.history_list .progressbar {display: block; position: absolute; left:632px; top:0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--border) 86.01%, rgba(209,215,225, 0.00) 100%); z-index: 1;}
.history_list .progressbar .progress {display: block; width: 3px; height: 0; border-radius:3px; background:var(--main); position: absolute; left:0; top:0; transition:all .3s;}
.history_list .progressbar .progress em {position:absolute; left:0; bottom:0; display:block; width:80px; height:80px; background:url('/company/img/his_dott.svg') 50% 50% no-repeat; background-size:auto 100%; left:0; bottom:-56px; z-index:3; margin-left:-39px;}
.history_list .progressbar .progress::after {position:absolute; left:0; bottom:-30px; width:30px; height:30px; margin-left:-14px; background:var(--main); border-radius:var(--borderAll); font-family:var(--icon); content:"keyboard_arrow_down"; z-index:100; color:var(--white); font-size:20px; display:flex; align-items:center; justify-content:center;}
/**** E:: 회사소개 > 연혁 ****/


/**** S:: 회사소개 > 기술연구소 ****/
.rndLab {padding:0 0 20px;}
.rndLab__intro {margin:0 auto 60px; text-align:center; color:var(--basic);}
.rndLab__row {margin:0 0 80px;}
.rndLab__row:last-child {margin:0;}
.rndLab__row--half {display:flex; gap:30px;}
.rndLab__row--half .rndLab__col {width:calc((100% - 30px) / 2);}
.rndLab__tit {display:flex; align-items:center; gap:10px; margin:0 0 20px;}
.rndLab__tit {gap:8px; margin: 0 0 15px;}
.rndLab__num {display:inline-flex; align-items:center; justify-content:center; width:50px; height:30px; border-radius:var(--borderAll); background:var(--main); color:var(--white); font-family:'Plus Jakarta Sans', var(--eng); font-size:0.778rem; font-weight:700; line-height:1.71; letter-spacing:0;}
.rndLab__subject {margin:0; font-weight:700; color:var(--black); line-height:1.33;}
.rndLab__grid--2 {display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.rndLab__grid--1 {display:block;}
.rndLab__card {padding:50px 30px; background:var(--white); text-align:center;} /* border:1px solid var(--border);  */
.rndLab__card img {display:block; max-width:100%; height:auto; margin:0 auto;}
/**** E:: 회사소개 > 기술연구소 ****/


/**** S:: 회사소개 > ESG ****/
.esg_cont h4 {text-align:center; color:var(--black); margin-bottom:50px;}
.esg_cont h4 .pointColor {letter-spacing:inherit;}
.esg_chart {display:grid; grid-template-columns:repeat(3,1fr); gap:0 50px;}
.esg_chart dl dt {position:relative;}
.esg_chart dl dt .bg {width:100%; height:100%; aspect-ratio:1/1; border-radius:100%; overflow:hidden;}
.esg_chart dl dt .bg img {width:100%; height:100%; display:block; object-fit:cover; max-width:100%;}
.esg_chart dl dt .icons {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:Center; flex-direction:column;}
.esg_chart dl dt .icons p {margin-bottom:15px;}
.esg_chart dl dt h5 {color:var(--white); font-family:var(--eng); letter-spacing:0; font-weight:600;} 
.esg_chart dl dt h5 em {font-style:normal; font-family:var(--eng); font-weight:700;}
.esg_chart dl dd {text-align:Center; padding-top:30px;}
/**** E:: 회사소개 > ESG ****/


/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){
    
/**** S:: 회사소개 > 인사말 ****/
.greeting__headline br, .greeting__body p br {display:none;}
/**** E:: 회사소개 > 인사말 ****/

/**** S:: 회사소개 > 연혁 ****/
.history_top {height:450px;}

.history_list {padding-top:80px;}
.history_item {padding-bottom:80px;}
.history_item .history_img {width:50%; padding-right:90px;} 
	.history_img .hisYear_img img {max-width:100%;}
	.history_img .cate_txt {margin-top:20px;}
	.history_img .hisYear_img {margin-top:50px;}
.history_item .historyYear_txt {width:50%; padding-left:90px;} 
	.historyYear_txt .his_year + .his_year {margin-top:50px;}
	.historyYear_txt .his_year ul {margin-top:20px;}
.history_list .progressbar {left:50%;}
/**** E:: 회사소개 > 연혁 ****/

/**** S:: 회사소개 > ESG ****/
.esg_chart {gap:0 30px;}
.esg_chart dl dt .icons p {margin-bottom:10px;}
.esg_chart dl dt .icons img {max-height:110px;}
/**** E:: 회사소개 > ESG ****/


}




/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/**** S:: 회사소개 > 인사말 ****/
.greeting {gap:40px;}
.greeting__thumb {width:calc((100% - 40px) / 2);}
.greeting__copy {width:calc((100% - 40px) / 2);}
.greeting__headline {margin:0 0 20px;}
.greeting__body p {margin:0 0 15px;}
.greeting__sign {margin:30px 0 0;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 연혁 ****/
.history_top {height:350px;}
.history_list {padding-top:60px;}
.history_item {padding-bottom:60px;}
.history_item .history_img {padding-right:50px;} 
	.history_img .cate_txt {margin-top:15px;}
	.history_img .hisYear_img {margin-top:40px;}
.history_item .historyYear_txt {padding-left:50px;} 
	.historyYear_txt .his_year + .his_year {margin-top:40px;}
	.historyYear_txt .his_year ul {margin-top:15px;}
	.historyYear_txt .his_year ul li + li {margin-top:3px;}
	.historyYear_txt .his_year ul li strong {width:30px;}
	.historyYear_txt .his_year ul li p {width:calc(100% - 30px);}

.history_list .progressbar .progress em {width:60px; height:60px; bottom:-44px; margin-left:-29px;}
.history_list .progressbar .progress::after {bottom:-25px; width:26px; height:26px; margin-left:-12px; font-size:18px;}
/**** E:: 회사소개 > 연혁 ****/


/**** S:: 회사소개 > 기술연구소 ****/
.rndLab__intro {margin:0 auto 45px;}
.rndLab__intro br {display:none;}
.rndLab__row {margin:0 0 60px;}
.rndLab__row--half {gap:20px;}
.rndLab__row--half .rndLab__col {width:calc((100% - 20px) / 2);}
.rndLab__subject {font-size:1.5rem;}
.rndLab__grid--2 {gap:20px;}
.rndLab__card {padding:30px 20px;}
/**** E:: 회사소개 > 기술연구소 ****/

/**** S:: 회사소개 > ESG ****/
.esg_cont h4 {margin-bottom:40px;}
.esg_chart {gap:0 20px;}
.esg_chart dl dt .icons img {max-height:80px;}
.esg_chart dl dd {padding-top:20px;}
/**** E:: 회사소개 > ESG ****/

}


/*******************************************************************************
    @media ~768px
*******************************************************************************/
@media all and (max-width:768px){

/**** S:: 회사소개 > 기술연구소 ****/
.rndLab__intro {margin:0 auto 35px;}
.rndLab__row {margin:0 0 45px;}
.rndLab__row--half {display:block;}
.rndLab__row--half .rndLab__col {width:100%;}
.rndLab__row--half .rndLab__col + .rndLab__col {margin:45px 0 0;}
.rndLab__tit {align-items: flex-start;}
.rndLab__num {width: 42px; height: 25px; margin-top:3px;}
.rndLab__grid--2 {gap:10px 0; display:flex; flex-direction:column;}
.rndLab__card {padding:20px;}

/**** E:: 회사소개 > 기술연구소 ****/


}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/**** S:: 회사소개 > 인사말 ****/    
.greeting {gap:30px;}
.greeting__thumb {width:100%;}
.greeting__copy {width:100%;}
.greeting__sign {gap: 0 10px;}

/**** E:: 회사소개 > 인사말 ****/

/**** S:: 회사소개 > 연혁 ****/
.history_top {height:250px;}
.history_txt_wrap .fs18 {margin:12px 0 0 0;}
.history_list {padding-top:50px;}
.history_item {flex-direction:column; width:100%; padding-bottom:50px;}
.history_item .history_img {width:100%; padding-right:0; padding-left:30px;}  
	.history_img .cate_txt {margin-top:10px;}
	.history_img .hisYear_img {margin-top:30px;}
.history_item .historyYear_txt {width:100%; padding-left:30px; padding-top:40px;} 
	.historyYear_txt .his_year + .his_year {margin-top:30px;}
	.historyYear_txt .his_year ul {margin-top:10px;}

.history_list .progressbar {left:0; width:2px;}
.history_list .progressbar .progress {width:2px; border-radius:2px;}
.history_list .progressbar .progress em {width:40px; height:40px; bottom:-20px; margin-left:-20px;}
.history_list .progressbar .progress::after {bottom:-11px; width:22px; height:22px; margin-left:-11px; font-size:16px;}
/**** E:: 회사소개 > 연혁 ****/

/**** S:: 회사소개 > ESG ****/
.esg_cont h4 {margin-bottom:30px;}
.esg_chart {grid-template-columns:repeat(1, 1fr); gap:30px 0;}
.esg_chart figure {width:100%; max-width:420px; margin-right:auto; margin-left:auto;}
.esg_chart dl dt .icons img {max-height:110px;}
/**** E:: 회사소개 > ESG ****/

}

/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){

/**** S:: 회사소개 > 연혁 ****/
.history_top {height:200px;}
/**** E:: 회사소개 > 연혁 ****/

}