@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; padding: 0}
.list-1st > li {position: relative; margin: 3px 0; padding-left: 12px; line-height:1.6; font-size: 16px;}
.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;}
}



/* 연구소 소개 :: 기술연구소 */
.inner.laboratory_con_wrap {max-width: 1900px;}
.laboratory-org-warp {overflow: auto;}
.laboratory-org {position: relative; margin-top:6em; display: flex; flex-direction: column;width: 100%; padding-top: 20px;}


.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; display: block;}
.laboratory-org .deps1 .line.responsFn {display: none;}
@media screen and (max-width:500px){
	.laboratory-org .deps1 {justify-content: flex-start;}
	.laboratory-org .deps1 .line {display:none;}
}
@media screen and (max-width:400px){
	.laboratory-org .deps1 {flex-direction: column;align-items: center; padding-bottom:2em;}
    

}
/* 24-03-11 이다혜 수정 : 기술연구소 하단 텍스트 추가로 인하여 flex 정의 수정함*/
.laboratory-org .deps1 .badge{position: relative; display: inline-flex; justify-content: center; align-items: center; z-index: 2 ; width: 10rem; height: 10rem; 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::before {display:block; content:'';width:100%; height:1px; background:#C99;} */

.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 .deps_line {position: relative; height: 1px; background-color: #bbb; width: 70.4%; left: 25%;}
.laboratory-org .deps2-line .deps_line.responsFn {width: 90.7%; left: 4.7%;}

@media screen and (max-width:1600px) {
    .laboratory-org .deps2-line .deps_line {width: 55%; margin: 0 auto; left: 0;}
    .laboratory-org .deps2-line .deps_line.responsFn {width: 90%; left: 0%;}
}
@media screen and (max-width:1440px) {
    .laboratory-org .deps2-line .deps_line.responsFn {display: none;}
}
@media screen and (max-width:900px) {
    .laboratory-org .deps2-line .deps_line {width: 54.1%}
}
@media screen and (max-width:600px) {
    .laboratory-org .deps2-line .deps_line {width: 57.1%}
}

/* 2뎁스 텍스트 박스  */
.laboratory-org .deps2 {padding: 60px 0 50px 0; position: relative; z-index: 2;}
.laboratory-org .deps2 .item-box {position: relative; display: flex; gap:40px; }
.laboratory-org .deps2 .item-box>.cont {position: relative; }
.laboratory-org .deps2 .item-box>.cont:nth-child(1) {width:50%;}
.laboratory-org .deps2 .item-box>.cont:nth-child(2) {width:34%;}

@media screen and (max-width:1600px) {
    .laboratory-org .deps2 .item-box {justify-content: space-between;}
    .laboratory-org .deps2 .item-box>.cont:nth-child(1) {width:45%;}
    .laboratory-org .deps2 .item-box>.cont:nth-child(2) {width:45%;}
}
@media screen and (max-width:900px) {
    .laboratory-org .deps2 .item-box>.cont:nth-child(1), 
    .laboratory-org .deps2 .item-box>.cont:nth-child(2) {width: calc((100% / 2) - 30px);}
}
@media screen and (max-width:768px) {
    .laboratory-org .deps2 {padding: 50px 0;}
}

.laboratory-org .deps2 .item-box>.cont .txt_box {position: relative;}
.laboratory-org .deps2 .item-box>.cont .txt_box::before {display: block;content: '';position: absolute;bottom: 100%;left: 50%; background: #bbb;}
.laboratory-org .deps2 .item-box>.cont .txt_box::before {width: 1px;height: 100%; }
.laboratory-org .deps2 .item-box .cont .top {display:flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px; height: 3.75em; background-color: #002550; text-align: center; border-radius: 8px;}
.laboratory-org .deps2 .item-box .cont .top strong {font-size: 18px; color:#fff; font-weight:6400;}



/*3뎁스 시작 :: */
.laboratory-org .deps3 {display: block;}
@media all and (max-width:400px){
    .laboratory-org .deps3 {display: none;}
    .laboratory-org .deps3.mobile_deps3 {display: block;}
}
.laboratory-org .deps3-line {display: flex;}
.laboratory-org .deps3-line .deps_line {position: relative; height: 1px; background-color: #bbb; }
.laboratory-org .deps3-line .deps_line:nth-child(1) {width: calc(50% - (100% / 8)); left: calc(((100% / 10) - 5%) - 7px);}
.laboratory-org .deps3-line .deps_line:nth-child(2) {width: 19%; left: calc(22% - -0.1%);}
@media all and (max-width: 1600px) {
    .laboratory-org .deps3-line .deps_line:nth-child(1) {width: calc(50% - (50% / 2)); left: 10%;}
    .laboratory-org .deps3-line .deps_line:nth-child(2) {width: calc(50% - (50% / 2)); left: 40%;}

}


.laboratory-org .item-box {display: flex; flex-wrap: wrap; align-items: flex-start;}
.laboratory-org .deps3-1  {display: flex;flex-wrap: wrap;justify-content: space-between; gap: 30px 10px;padding: 37px 0;flex:1;}
.laboratory-org .deps3-1 .cont {position: relative; width: calc((100% / 9.5) - 25px); box-sizing: border-box; background-color: #F8F8F8; }
.laboratory-org .deps3-1 .cont:last-child{margin-left: auto;}
.laboratory-org .deps3-1 .cont .top {display:flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px; height: 3.75em; background-color: #093e7a; text-align: center; border-radius: 8px;}
.laboratory-org .deps3-1 .cont .top strong {font-size: 16px; color:#fff; font-weight:400;}
.laboratory-org .deps3-1 .cont .txt_box {height: 100%;}
.laboratory-org .deps3-1 .cont .txt_box::before {display: block;content: '';position: absolute;bottom: 100%;left: 50%; background: #bbb;width: 1px;height: 38px; }
.laboratory-org .deps3-1 .cont .txt_box::after {display: block;content: '';position: absolute;top: -38px;left: 50%; transform: translate(-100%, 0px); background: #bbb;width: 30%;height: 1px; }



/* 더블유 스코프 그룹 */
.laboratory-org .deps3-1 .cont.group1 .txt_box::before {height: 88px;}
.laboratory-org .deps3-1 .cont.group1:nth-child(3) .txt_box::before {height: 88px;}
.laboratory-org .deps3-1 .cont.group1:nth-child(7) .txt_box::before {height: 88px;}


/* 더블유스코프코리아 */
.laboratory-org .deps3-line.responsFn {display: none;}
.laboratory-org .deps3-1.responsFn .cont .txt_box::after {display:none;}
.laboratory-org .deps3-1.responsFn .cont:last-child {margin: unset;}

.laboratory-org .deps3-1 .cont:first-child .txt_box::after ,
.laboratory-org .deps3-1 .cont:nth-child(6) .txt_box::after {display: none;}

.laboratory-org .deps3-1 .cont:last-child .txt_box::before{height: 210px;}
.laboratory-org .deps3-1 .cont:last-child .txt_box::after {display: none;}
.laboratory-org .deps3-1 .cont:last-child .txt_box.responsFn::before {height: 38px;}

.laboratory-org .deps3-1 .cont:nth-child(6) {margin-left: auto;}


@media all and (max-width: 1600px) {
    .laboratory-org .deps3-1 {justify-content: flex-start; padding:0 0 37px 0; gap: 37px 10px}
    .laboratory-org .deps3-line {display: none;}

    .laboratory-org .deps3-1 .cont {width: calc(100% / 5) ; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    .laboratory-org .deps3-1 .cont:nth-child(1) {order: 1;}
    .laboratory-org .deps3-1 .cont:nth-child(1) .txt_box::before {top: 20%; right: -30%; transform: translate(0, 0px); left: unset; width: 30%; height: 1px;}

    .laboratory-org .deps3-1 .cont:nth-child(2) {order: 2; margin-left: calc(45% / 10);}
    .laboratory-org .deps3-1 .cont:nth-child(2) .txt_box::before {display: none;}
    .laboratory-org .deps3-1 .cont:nth-child(2) .txt_box::after {display: none;}

    .laboratory-org .deps3-1 .cont:nth-child(3) {order: 5;}
    .laboratory-org .deps3-1 .cont:nth-child(3) .txt_box::after {top: 20%; right: -30%; transform: translate(0, 0px); left: unset;}
    
    .laboratory-org .deps3-1 .cont:nth-child(4) {order: 6; margin-left: calc(45% / 10);}
    .laboratory-org .deps3-1 .cont:nth-child(4) .txt_box::after {display: none;}

    .laboratory-org .deps3-1 .cont:nth-child(5) {order: 8; margin-left: calc((25%) - (25% / 2));}
    .laboratory-org .deps3-1 .cont:nth-child(5) .txt_box::after {display: none;}
    .laboratory-org .deps3-1 .cont:nth-child(5) .txt_box::before {height: 304%;}

    .laboratory-org .deps3-1 .cont:nth-child(6) {order: 3; margin-left: auto;}
    .laboratory-org .deps3-1 .cont:nth-child(6) .txt_box::before {top: 20%; right: -30%; transform: translate(0, 0px); left: unset; width: 30%; height: 1px;}

    .laboratory-org .deps3-1 .cont:nth-child(7) {order: 4; margin-left: calc(45% / 10);}
    .laboratory-org .deps3-1 .cont:nth-child(7) .txt_box::before,
    .laboratory-org .deps3-1 .cont:nth-child(7) .txt_box::after {display: none;}

    .laboratory-org .deps3-1 .cont:nth-child(8) {order: 7; margin-left: 9%;}
    .laboratory-org .deps3-1 .cont:nth-child(8) .txt_box::after {top: 21%; right: -15%; left: unset; transform: translate(0, -100%); height: 200%; width: 1px;}
    .laboratory-org .deps3-1 .cont:nth-child(8) .txt_box::before {top: 20%; right: -15%; transform: translate(0, 0px); left: unset; width: 15%; height: 1px;}

    .laboratory-org .deps3-1 .cont:nth-child(9) {order: 9; margin-left: calc(18% - (23% / 2))}

    .laboratory-org .deps3-1 .cont:last-child .txt_box::before {height: 570px;}

    /* 더블유스코프코리아 */
    .laboratory-org .deps3-1.responsFn {justify-content: space-between;padding: 37px 0;}
    .laboratory-org .deps3-1.responsFn .cont {margin-left: unset!important; width: calc(100% / 10);}
    .laboratory-org .deps3-1.responsFn .cont .txt_box::before{display: block;}
    .laboratory-org .deps3-1.responsFn .cont .txt_box::after {display: none;}
    .laboratory-org .deps3-1.responsFn .cont .txt_box::before {display: block; top: -39px;left: 50%; background: #bbb;width: 1px;height: 39px;}
    .laboratory-org .deps3-1.responsFn .cont:last-child .txt_box.responsFn::before {height: 39px;}
    
}




@media all and (max-width: 1440px) {
    /* 더블유스코프코리아 */
    .laboratory-org .deps3-1.responsFn {}
    .laboratory-org .deps3-1.responsFn .cont {width: calc(100% / 4); margin-left: unset; margin-right: unset!important; margin-top:unset!important;}
    .laboratory-org .deps3-1.responsFn .cont .txt_box::before {display: none;}

    .laboratory-org .deps3-1.responsFn .cont:nth-child(9) .txt_box::before {display: none;}
}


@media all and (max-width: 1018px) {
    .laboratory-org .deps3-1 .cont:last-child .txt_box::before {height: 366%;}
}
@media all and (max-width: 900px) {
    .laboratory-org .deps3-1 {}
    .laboratory-org .deps3-1 .cont {width: calc((100% / 2) - 40px); flex-grow: 1; flex-shrink: 0; flex-basis: auto;}
    .laboratory-org .deps3-1 .cont .txt_box::before,
    .laboratory-org .deps3-1 .cont .txt_box::after {display: none;}

    .laboratory-org .deps3-1 .cont:nth-child(1) {order: 1;margin-right: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(2) {order: 3;margin-left: 0;margin-right: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(3) {order: 5;margin-right: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(4) {order: 7;margin-left: 0;margin-right: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(5) {order: 8;margin-left: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(6) {order: 2;margin-left: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(7) {order: 4;margin-left: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(8) {order: 6;margin-left: 20px;}
    .laboratory-org .deps3-1 .cont:nth-child(9) {order: 9;margin-left: 0; margin-top: 40px;}

    .laboratory-org .deps3-1 .cont:nth-child(9) .txt_box::before {display: block;height: 651%;}
    
}

@media all and (max-width: 400px) {
    .laboratory-org .deps3-1.responsFn { padding: 0 0 37px 0; gap: 20px 0;}
    
}


@media all and (max-width: 500px) {
    .laboratory-org .deps3-1 .cont:nth-child(9) .txt_box::before {height: 720%;}
	.laboratory-org .deps3-1 .cont:nth-child(9) .txt_box::after {display:block; top:-720%}
}


/* 3뎁스 마지막 영역 */
.laboratory-org .deps3-1 .cont:last-child .deps3-1 {padding-top: 90px;}
.laboratory-org .deps3-1 .item-box>.cont:last-child {width: 16%;}
.laboratory-org .deps3-1 .item-box>.cont:last-child .cont{width: 100%;}
.laboratory-org .deps3-1 .item-box>.cont:last-child .cont .txt_box::before {height: 100%;}

@media screen and (max-width:920px) {
    .laboratory-org .deps3-1 .item-box>.cont:last-child {width: 50%;}
    .laboratory-org .deps3-1 .cont:last-child .deps3-1 {padding-top: 0;}
    .laboratory-org .deps3-1 .item-box>.cont:last-child .cont .txt_box::before {display: none;}
}

/* 연구소 소개 3뎁스 표기 */
.affiliate-company {position: absolute; top: 35%; right: 0;}
@media all and (max-width: 400px) {
    .affiliate-company {position: relative; padding-top:10px}
    .affiliate-company li {padding: 0 0 10px 0;}
}

.affiliate-company li {cursor: pointer; margin:4px 0}
.affiliate-company li:nth-child(2)::before {color:#093e7a;}
.affiliate-company li:nth-child(3)::before {color:#4472c4;}
.affiliate-company li:nth-child(4)::before {color:#8faadc;}
.affiliate-company li::before {display: inline-block; content: '■';}
.affiliate-company li a {padding-left: 10px;}
.affiliate-company span {color:#888; font-style: italic;}



.laboratory-org .deps3.mobile_deps3 {display: none;}
@media all and (max-width: 400px) {
    .laboratory-org .deps2 {display: none;}

    /* 모바일 제어 */
    .deps3.mobile_deps3 .laboratory-org .item-box {}
    .deps3.mobile_deps3 .deps3-1 .cont.list-group2 .top{ background-color: #002550!important;}
    .deps3.mobile_deps3 .deps3-1 .cont {width:100%; margin-left: 0; margin-right: 0;}

    .laboratory-org .deps3.mobile_deps3 {display: block;;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(1)  {order: 1;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(2)  {order: 7; margin-top: 50px;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(3)  {order: 2;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(4)  {order: 3;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(5)  {order: 4;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(6)  {order: 5;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(7)  {order: 6;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(8)  {order: 8;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(9)  {order: 9; margin-top:0;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(9) .txt_box::after,
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(9) .txt_box::before {display: none; }
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(10) {order: 10;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(11) {order: 11; margin-top: 50px;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(11) .top{ background-color: #002550;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1 .cont:nth-child(11) .responsFn .top {}

    /*스크립트용 여백 제거 */
    
    .laboratory-org .deps3.mobile_deps3 .deps3-1.responsFn .cont:nth-child(2)  {margin-top: 0;}
    .laboratory-org .deps3.mobile_deps3 .deps3-1.responsFn .cont:nth-child(11){margin-top: 0;}
}





/* 연구소 소개 css 제어 **********/
.group1 {display: block;}
.group2 {display: block;}
.group3 {display: block;}

/* 배경색,3뎁스 line 제어 제어 */
.laboratory-org .deps2 .cont .top.group2Bg,
.laboratory-org .deps3 .cont .top.group2Bg {background-color: #4472c4;}
.laboratory-org .deps3-line div.group2Line {width: 68%;}

.laboratory-org .deps2 .cont .top.group3Bg,
.laboratory-org .deps3 .cont .top.group3Bg {background-color: #8faadc;}
.laboratory-org .deps3-line div.group3Line {width:68%;}




/* 키프레임 정의 */
@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%; z-index:3;}
.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: 3;}
.graph .x-axis > li {font-family: 'GmarketSansMedium'; color:#000; font-size:1.13em;}
.graph .x-axis > li > span {display:block;}
.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: 2; 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) { 
	.laboratory_con_02 {height: 460px;}
    .graph {position: relative; height: 180px; width:100%}
    .graph:before{ height:83px; width:200px; background-size: 100%; }
    .graph .x-axis > li {font-size:14px;}
    .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}

}