@charset "utf-8"; 

/* 연구소 소개  *******************/
.title-wrap p{display:block; padding-top:1em; line-height: 1.5; font-size: 1.06em;}

@media screen and (max-width:768px) { 
    .title-wrap p{
        padding-top:0;
    }
}

/* 연구소 소개 :: common */
.laboratory-bg{position: relative;} 

@media screen and (max-width:768px) { 
    .laboratory-bg:before {font-size: 5.50em;}
}

@media screen and (max-width:640px) { 
    .laboratory-bg:before {font-size: 3.13em;}
}

/* 연구소 소개 :: list */
.list-1st { margin: 10px 0; padding: 0}
.list-1st > li {position: relative; margin: 3px 0; padding-left: 20px; line-height:1.6; font-size: 18px;}
.list-1st > li:before {content: ''; background: #bbb; width: 5px; height: 5px; position: absolute; top: 10px; left: 0; display: inline-block; border-radius: 5px;}

.list-2st {margin: 15px 0; padding: 0}
.list-2st > li {position: relative; margin: 10px 0; padding-left: 20px; line-height: 1.6}
.list-2st > li:before{position: absolute; top: 9px; left: 0; width: 3px; height: 3px; transform: rotate(45deg); border-top: 1px solid #29317A; border-right: 1px solid #29317A; background: transparent; content: ''; display: inline-block}

.list-3st {margin:0; padding: 0}
.list-3st > li {position: relative; margin: 4px 0; padding-left: 15px; line-height: 1.2}
.list-3st > li:before{content: ''; background: #bbb; width: 5px; height: 1px; position: absolute; top: 12px; left: 0; display: inline-block; border-radius: 5px;}


/* 연구소 소개 :: tableType */

/* 테이블 스타일 초기화 */
table {table-layout:auto; width: 100%; } 
table th {word-wrap: break-word;} 
table td {word-wrap: break-word;} 

/* 테이블 스타일 */
table.txt-left td,
table td.table-tl{text-align:left !important;}
table td.table-tc{text-align:center !important;}
.td-link table td > a{color:#f99930 !important; font-weight: 500}
.table-wrap{width:100%; position:relative; margin: 40px 0 0 0;}
.tableType1{border-top:1px solid #093e7a; width:100%}
.tableType1 table{width:100%}
.tableType1 td,
.tableType1 th{word-wrap:break-word; word-break:break-all; word-break:keep-all; vertical-align: middle; border:1px;}
.tableType1 table thead{background:#f5f5f5;}
.tableType1 table thead th{padding:1.25em 1em; border-bottom:1px solid #093e7a; border-left:1px solid #093e7a; text-align:center; font-weight: 500}
.tableType1 table thead th:first-child{border-left:0;}
.tableType1 table tbody th{border-left:1px solid #093e7a; border-bottom:1px solid #093e7a; padding:1.25em 1em; word-break:keep-all; background:#f5f5f5;}
.tableType1 table tbody td{border-left:1px solid #093e7a; border-bottom:1px solid #093e7a; text-align:center; padding:1.25em 1em; word-break:keep-all}
.tableType1 table tbody td:first-child{border-left:0;}
.tableType1 table tbody th:first-child{border-left:0;}

/* 24-03-28 이다혜 표 head 색상 수정 */
.tableType2 table thead tr th{color: #191919; font-weight: 600;background: #d1e7ff;}
/*.tableType2 table thead tr th.bgBlue {background-color: #02277a; }*/
/*.tableType2 table thead tr th.gbYellow {background-color: #f7c702;}*/
/*.tableType2 table thead tr th.bgRed {background-color: #da0816;}*/
/*.tableType2 table thead tr th.bgBlack {background-color: #000;}*/
/*
.tableType2 table thead tr th.bgBlue {background-color: #95b4eb; }
.tableType2 table thead tr th.gbYellow {background-color: #3f76c1;}
.tableType2 table thead tr th.bgRed {background-color: #2b4681;}
.tableType2 table thead tr th.bgBlack {background-color: #02277a;}
*/

@media screen and (max-width:1024px){
	/* common */
	.table-responsive {position: relative; display: block; width: 100%; overflow-x: auto;}
}


/* 연구소 소개 :: 기술연구소 */
.laboratory-org {position: relative; margin-top:6em;}
.laboratory-org .deps1 {position: relative; display: flex; justify-content: center; z-index: 2;  padding-top:3em; padding-bottom:4em; overflow:hidden;}
.laboratory-org .deps1 .line {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50%); width: 1px; height: 100%; background-color: #bbb}
/* 24-03-11 이다혜 수정 : 기술연구소 하단 텍스트 추가로 인하여 flex 정의 수정함*/
.laboratory-org .deps1 .badge{position: relative; display: inline-flex; justify-content: center; align-items: center; z-index: 2 ; width: 10em; height: 10em; border-radius: 100%; color: #fff; line-height: 1; font-weight: 700; background-color: #093e7a; box-shadow: 0 0 30px rgba(9,62,122,0.4); flex-direction: column;}
.laboratory-org .deps1 .badge span {font-size: 1.38em; font-family: 'GmarketSansBold';}
.laboratory-org .deps1 .badge span.stxt {font-size: 1em; font-family: 'GmarketSansMedium'; display: block; margin: 1rem 0 0 0}

.laboratory-org .deps2-line {display: flex; justify-content: space-between; }
.laboratory-org .deps2-line .line {position: relative; height: 1px; background-color: #bbb; width: calc((100% - ((100% - 171.5px)/4))); margin-left: calc(((100% - 171.5px) / 4) / 2);}

.laboratory-org .deps2 {display: flex; padding-top: 5em}
.laboratory-org .deps2 .item-box {display: flex; align-items: flex-start; width: 100%;}
.laboratory-org .deps2 .item-box .cont + .cont {margin-left: 55px;}

.laboratory-org .deps2 .cont {position: relative; flex: 1;}
.laboratory-org .deps2 .cont .top {display:flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px; height: 3.75em; background-color: #2f2f2f; text-align: center}
.laboratory-org .deps2 .cont .top strong {font-size: 1.13em; color:#fff; font-weight:400;}
.laboratory-org .deps2 .cont .bot {padding: 1.4em;}
.laboratory-org .deps2 .cont .line {position: absolute; left: 50%; top: 0; transform: translate(-50%,-100%) ;height: 5em; width: 1px; background-color: #bbb;}

@media screen and (max-width:1024px) { 
    .laboratory-org .deps2-line .line { width: calc((100% - ((100% - 65px)/4))); margin-left: calc(((100% - 65px) / 4) / 2);}
    .laboratory-org .deps2 .item-box .cont + .cont {margin-left: 20px;}
    .laboratory-org .deps2 .cont .top strong {font-size: 1.06em;}
    .laboratory-org .deps2 .cont .bot {padding: 0.5em 0;}
}

@media screen and (max-width:768px) { 
    .laboratory-warp.mt_70{margin-top:40px !important;}
    .laboratory-org {position: relative; margin-top:3em;}
    .laboratory-org:before {font-size: 4.50em;}
    .laboratory-org .deps1 {padding-top:3em; padding-bottom:1em;}
    .laboratory-org .deps1 .badge{width: 100%; height: 6em; border-radius: 150px; box-shadow: 0 0 0;} 
    .laboratory-org .deps2 {padding-top: 0}
    .laboratory-org .deps2 .item-box {flex-wrap: wrap; width: 100%;}
    .laboratory-org .deps2 .cont {flex: 1 1 40%; border:1px solid #2f2f2f}
    .laboratory-org .deps2 .item-box .cont{margin:10px 10px;}
    .laboratory-org .deps2 .item-box .cont + .cont {margin-left: 10px;}
    .laboratory-org .deps2 .cont .bot {padding: 0.5em 1.4em;}
    .laboratory-org .line {display:none}
}

@media screen and (max-width:640px) { 
    .laboratory-org:before {font-size: 3.50em; transform: translate(-50%, 0%);}
    .laboratory-org .deps2 .cont {flex: 1 100%;}
    .laboratory-org .deps2 .item-box .cont{margin:10px 5px;}
    .laboratory-org .deps2 .item-box .cont + .cont {margin-left: 5px;}
}


/* 키프레임 정의 */
@keyframes grow {
    from { height: 0; }
    to { height: 100%;}
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* 연구소 소개 :: 연구인력 */
.laboratory_con_02{position: relative; width:100%; height:486px; margin-top:6.25em; background: url(../images/subimg/laboratory_bg02.jpg) no-repeat 50% 100%; background-size: cover;}
.laboratory_con_02 .flex-item{display: flex; justify-content: space-between; align-items: center; width:100%; height:486px;}
.graph_wrap {width: 770px; margin: 0; }
.graph {position: relative; height: 220px; width:100%}
.graph:before{position: absolute; z-index: 1; top: 0; left: 50%; transform: translate(-50%, -30%) ; height:184px; width:444px; content: ""; background: url(../images/subimg/laboratory_bg03.png) no-repeat 50% 100%; z-index:99; animation: fadein 3s ease-in-out forwards; }
.graph .y-axis {position: absolute;width: 100%; height: 100%;z-index: 1;}
.graph .y-axis > li {position: relative;width:100%;height: calc(100% / 3); border-top: 1px solid #d8d8d8;text-align: left; box-sizing:border-box;}
.graph .y-axis > li span {position: absolute;top: -7px;left: -20px;font-size: 12px;line-height: 1;}
.graph .x-axis {display: flex; justify-content: space-around; position: absolute; bottom:-50px;left: 20px;width: calc(100% - 20px);text-align: center;z-index: 2;}
.graph .x-axis > li {font-family: 'GmarketSansMedium'; color:#000; font-size:1.13em;}
.graph .bar {position: relative; display: flex;justify-content: space-around;align-items: flex-end;position: absolute;bottom: 0;left: 20px;width: calc(100% - 20px);height: 100%;text-align: center;z-index: 3; animation: grow 1s ease-in-out forwards;}
.graph .bar > li {position: relative; flex-grow:1; margin: 0 10px;}
.graph .bar > li span {display: inline-block;width: 100%;height: 100%; max-width: 100px;background: #bbb;}
.graph .bar > li:last-child span{background: #d71e25;}
.graph .bar > li p{position: absolute; top:-40px; left:50%; transform: translate(-50%,0%) ; color:#d71e25; font-size:1.88em; font-family:'GmarketSansBold';}

@media screen and (max-width:1024px) { 
    .laboratory_con_02{height:400px; padding-top:50px; padding-bottom:50px;}
    .laboratory_con_02 .title-wrap{text-align: center; display:block; width:100%;}
    .laboratory_con_02 .title-wrap p{padding:0;}
    .laboratory_con_02 .title-wrap p br{display:none}
    .laboratory_con_02 .flex-item{flex-direction: column; justify-content: flex-start; align-items: flex-start; width:100%; height:100%;}
    .graph_wrap {width: 100%; margin-top:4.13em}
}

@media screen and (max-width:768px) { 
    .graph {position: relative; height: 180px; width:100%}
    .graph:before{ height:124px; width:300px; background-size: 100%; }
    .graph .x-axis > li {font-size:1em;}
    .graph .bar > li span {max-width: 50px;}
    .graph .bar > li p{top:-30px; font-size:1.25em;}
}

@media screen and (max-width:500px) { 
    .graph {position: relative; height: 180px; width:100%}
    .graph:before{ height:83px; width:200px; background-size: 100%; }
    .graph .x-axis > li {font-size:1em;}
    .graph .bar > li span {max-width: 50px;}
}


/* 연구소 소개 :: 개발 및 양산프로세스 */
.process-title{position: relative;color:#db4e52; font-family: 'GmarketSansMedium'; font-size:1.56em; text-align:center; height:6.25em; display:flex; justify-content: center; align-items: center;}
.process-title:before{position: absolute; bottom:-40px; left: 0; width: 100%; height: 100%; content: ''; background: url(../images/subimg/laboratory_bg04.png) no-repeat 50% 50%; z-index:-1}
.process-title.style1{font-size:1.25em; color:#000; }

.pc-graph{position: relative; display:flex; align-items: flex-start; justify-content: space-between; width:100%; overflow:hidden; margin-bottom:8.25em; z-index:99}
.pc-graph .top {width:calc(100% / 3); }
.pc-graph .top div {width:calc(100% + 25px); height: 4.75em; display: flex; align-items: center; justify-content: center; position: relative; color:#fff; text-align:center;}
.pc-graph .top:first-child div{color:#000}
.pc-graph .top .g1::before {background: #ececec;}
.pc-graph .top .g2::before {background: #363636;}
.pc-graph .top .g3::before {background: #d71e25;}
.pc-graph .top .path {position: relative;}
.pc-graph .top .path::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.pc-graph .top .path1::before {clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 0 50%, 0% 0%);}
.pc-graph .top .path2::before {clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);}
.pc-graph .top .path3::before {clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%);}

.pc-graph .txt-item-list{position: relative; display:flex; justify-content: center; margin-top:1.5em; padding:1.5em 0; width:100%; border-right:1px dashed #ccc;}
.pc-graph .top:nth-child(3) .txt-item-list{border-right:0 none;}
.pc-graph .txt-item-list li{text-align:center; width:50%; padding:0 1em;}
.pc-graph .txt-item-list li strong{display:flex; justify-content: center; align-items: center; margin:0 auto; width:2.5em; height:2.5em; margin-bottom:1em; border-radius: 100%; background-color:#ececec}
.pc-graph .txt-item-list li p{color:#000; letter-spacing: -0.05em;}
.pc-graph .top:nth-child(2) .txt-item-list li strong{background-color:#d71e25; color:#fff}
.pc-graph .top:nth-child(3) .txt-item-list li strong{background-color:#363636; color:#fff}

@media screen and (max-width:1024px) { 
    .pc-graph .txt-item-list{flex-direction: column; margin-top:1.5em; padding:1.5em 0; width:100%;}
    .pc-graph .txt-item-list li{text-align:left; width:100%; display:flex; justify-content: flex-start; align-items:center; padding:0.5em 1em;}
    .pc-graph .txt-item-list li strong{display:flex; justify-content: center; align-items: center; margin:0; width:2em; height:2em; margin-bottom:0; margin-right:1em;}
    .pc-graph .txt-item-list li p br{display:none;}
}

@media screen and (max-width:768px) { 
    .pc-graph{align-items: flex-start; justify-content: flex-start; flex-direction: column;margin-bottom:3.25em;}
    .pc-graph .top {width:100%}
    .pc-graph .top div {width:100%;}
    
    .pc-graph .top .path1::before {clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 0 50%, 0% 0%);}
    .pc-graph .top .path2::before {clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 0 50%, 0% 0%);}
    .pc-graph .top .path3::before {clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);}
    
    .pc-graph .txt-item-list{flex-direction: column; margin-top:0; padding:1.5em 0; width:100%; border-right:0 none;}
}


/* 연구소 소개 :: R&D */
.laboratory-rnd{position: relative; display:flex; align-items: flex-start; justify-content: space-between; width:100%; padding-top:100px}
.laboratory-rnd:after{content: ''; position: absolute; top:8.25em; left: 50%; width: 1px; height: calc(100% - 5.25em); background-color:#ddd;}

.battery-box{position: relative; width:34.25em; height:33.13em; background: url(../images/subimg/laboratory_bg05.png) no-repeat 50% 50%;}
.battery-center {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%) ;  z-index: 2 ; width: 12.50em; height: 12.50em; border-radius: 100%;  background-color: #093e7a; box-shadow: 0 0 30px rgba(9, 62, 122,0.4); }
.battery-center span{display: inline-flex; justify-content: center; align-items: center; width:100%; height:100%; font-family: 'GmarketSansMedium'; color: #fff; line-height: 1; text-align:center; font-size:1.88em}

.battery-txt li {position: absolute; left: 0; top: 0; }
.battery-txt li p{display:flex; flex-direction: column; justify-content: center; align-items: center; width:11.25em; height:11.25em; border-radius: 100%; border:2px solid #093e7a; background-color:#fff; text-align:center; letter-spacing:-0.05em}
.battery-txt li:nth-child(even) { left: auto; right: 0; }
.battery-txt li:nth-child(n+3) { top: auto; bottom: 0;}
.battery-txt li strong { margin-bottom: 8em; }

.tech-txt{position: relative; width:34.25em;}
.tech-txt li {position: relative; display:flex; align-items: center; box-sizing:border-box; margin-bottom:1.38em; width: 100%; height: 6.25em; border-radius: 50px; padding:0.50em; background-color: #fff; box-shadow: 0 0 15px rgba(2, 39, 122,0.15); color:#fff;}

/* 24-03-20 이다혜 수정 넘버 배경색상 > 흰색 */
.tech-txt li span.num-bg{display:flex; flex-shrink: 0; align-items: center; justify-content: center; width:86px; height:86px; background-color:#fff; color:#000; border-radius: 100%; font-size:1.88em; font-family: 'GmarketSansMedium'; margin-right:0.5em;}
.tech-txt li:nth-child(even) span.num-bg{background-color:#fff;} 

.tech-txt li:nth-child(1) {background-color: #02277a;}
.tech-txt li:nth-child(2) {background-color: #2b4681;}
.tech-txt li:nth-child(3) {background-color: #3f76c1;}
.tech-txt li:nth-child(4) {background-color: #95b4eb;}
.tech-txt li:nth-child(5) {background-color: #3171c8;}

@media screen and (max-width:1200px) { 
    .battery-box{width:28.13em; height:27.13em; background-size:96%}
    .battery-center { width: 10em; height: 10em;}
    .battery-center span{font-size:1.56em}
    .tech-txt{position: relative; width:28.13em;}
}

@media screen and (max-width:1024px) { 
    .laboratory-rnd{position: relative; display:flex; flex-direction: column; align-items: center; justify-content: center; width:100%; padding-top:2.25em}
    .laboratory-rnd:after{display:none}
    .rnd-item{width:100%; padding-bottom:3.25em}
    .battery-box{margin:0 auto;}
    .tech-txt{position: relative; width:100%;}
}

@media screen and (max-width:500px) { 
    .battery-box{position: relative; width:100%;}
    .battery-txt li p{width:10em; height:10em; }
}
    
.laboratory-tech {position: relative; display:flex; align-items: flex-start; justify-content: space-between; z-index:99; padding-top:100px;}
.laboratory-tech .box {width: calc((100% - 4rem) / 3); margin-right: 4rem;}
.laboratory-tech .box:last-child {margin-right: 0;}
.laboratory-tech .box .box-tit{position: relative;  margin-bottom: 1rem; text-align: center; display:flex; align-items: center; justify-content: center;}
.laboratory-tech .box .box-tit h5{line-height:1.4; font-size:1.25em; font-weight: 700; color:#000;}
.laboratory-tech .box .box-tit .tit-num{font-size:1.25em; width:2.5em; height:2.5em; border-radius:2.5em; text-align: center; color:#fff; background-color:#093e7a; display:flex; align-items: center; justify-content: center; margin-right:0.5em;}
.laboratory-tech .box-img {box-sizing:border-box; background:#fff; padding:2.19em; min-height:42.63em; border:1px solid #ddd;}  
.laboratory-tech .box-img ul.list-1st{border-top:1px solid #ddd; padding-top:1.50em; margin-top:0.94em}
.laboratory-tech .box-img strong,
.laboratory-tech .box-img ul.list-3st li{font-size:0.88em; letter-spacing: -0.05em}
    
.laboratory-tech .box-img .tech-tit{background-color: #3c3c3c; display:flex; align-items: center; justify-content: center; width:100%; min-height:2.5em; color:#fff; margin-bottom:0.94em}
.laboratory-tech .box-img .tech-box{padding:0 1.5em;}


@media screen and (max-width:1200px) { 
    .laboratory-tech .box {width: calc((100% - 2rem) / 3); margin-right: 2rem;}
}

@media screen and (max-width:1024px) { 
    .laboratory-tech {flex-direction: column; justify-content: flex-start; padding-top:5em}
    .laboratory-tech .box {width:100%; margin-right: 0;}
    .laboratory-tech .box-img {box-sizing:border-box; background:#fff; padding:2.19em; min-height:auto; margin-bottom:3em;}  
    .laboratory-tech .box-img p.mb_60{margin-bottom:0 !important;}
}

/* 제품 소개 */
.product-info{position: relative; margin-top:100px;}
.product-info h5 {font-size: 24px; font-family: 'GmarketSansBold'; color: #444; margin: 0 0;}
.product-item {position: relative; display:flex; align-items: flex-start; justify-content: space-between; z-index:99; padding-top:1em}
.product-item .box {width: calc((100% - 4rem) / 2); margin-right: 4rem;}
.product-item .box:last-child {margin-right: 0;}
.product-item .box .box-img {box-sizing:border-box; background:#fff; padding:2.19em; min-height:10em; border:1px solid #ddd; display:flex; align-items: center; justify-content: center;}  
.product-item .box .box-tit{position: relative;  margin-bottom: 1rem; height:3.75em; text-align: center; display:flex; align-items: center; justify-content: center; background-color:#093e7a; color:#fff; font-size: 20px;}
.product-item .box .box-tit.bg02{background-color:#363636;}

.product-item2{position: relative; margin-top:20px; display:flex; align-items: center; justify-content: space-between;  background: #fff; width:100%; border:1px solid #ddd; border-radius: 20px; padding:3em; box-sizing:border-box;}
.product-item2 ul > li{font-size:1.13em}


@media screen and (max-width:1280px) {
    .product-item2 .img {width: 48%;}
}

@media screen and (max-width:1024px) {
    .product-item2{flex-direction: column; justify-content: center;}
    .product-item2 .img {width: 50%;}
    .product-item2 ul {margin: 40px 0 0 0;}
    .product-item2 ul > li{font-size:19px}
}

@media screen and (max-width:768px) {
    .product-item {justify-content: center; flex-direction: column;}
    .product-item2 .img {width: auto;}
    .product-item .box {width:100%; margin-right: 0;}
    .product-item2 ul {margin-top:40px}

}