@charset "utf-8";

/*******************������ ���� ******************/
#orgchrt-wrap {position: relative;}

.org-top { padding-top: 300px;}
.org-top .president {width: 165px; height: 165px; border-radius: 50%; background: url('/images/org-bg.png') no-repeat center center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 25px; box-sizing: border-box; z-index: 2;}
.org-top .president span {position: relative; display: block; background: #fff; width: 100%; height: 100%; border-radius: 50%; font-size: 1.625rem; font-family: "NotoKR-Bold"; display: flex; justify-content: center; align-items: center; z-index: 1}
.org-top .secretary {border: 1px solid; display: flex; align-items: center; justify-content: center; width: 115px; height: 115px; border-radius: 50%; background: #ef3e61; color: #fff; position: absolute; top: 200px; left: 50%; transform: translateX(-50%); box-sizing: border-box; z-index: 2;}
.org-top .secretary span {font-size: 1.125rem; font-family: "NotoKR-Bold";}

/*�̻�ȸ - ���� �߰���*/
#orgchrt-wrap .directorate {position: absolute; top: 72px; right:0; display: flex; text-align: center;}
#orgchrt-wrap .directorate p {position: relative; margin-left: 20px;}
#orgchrt-wrap .directorate p span {position: relative; z-index: 2; background: #fff; display: block; width: 140px; font-family: "NotoKR-Bold"; color: #ef3e61; border: 2px solid #ef3e61; border-radius: 10px; padding: 10px 0; box-sizing: border-box; line-height: 1.3;}
#orgchrt-wrap .directorate p.top span {position: relative; background-color: #ef3e61; color: #fff;}
#orgchrt-wrap .directorate p.top:after {content: ''; display: block; width: 50px; height: 1px; background-color: #dbdbdb; position: absolute; top: 50%; left: 100%; transform: translateY(-50%);}

/*����Ʈ ����*/
#orgchrt-wrap .flex-between {display: flex; justify-content: space-between; margin-bottom: 100px;}
.orgDepth1 {display: flex; } /*��1*/
.orgDepth1 > li {text-align: center;margin-right: 20px;box-sizing: border-box;}
.orgDepth1.center {justify-content: space-between;}
.orgDepth1.center > li {/* width: calc(100% / 5); *//* margin-right: 30px; *//* width: 180px; */}
.orgDepth1 > li:last-child {margin-right: 0;}
.orgDepth1 > li .teamNm {position: relative; z-index: 2;  background: #fff; display: block; width: 140px; font-family: "NotoKR-Bold"; color: #ef3e61; border: 2px solid #ef3e61; border-radius: 10px; padding: 10px 0; box-sizing: border-box; line-height: 1.3; margin-bottom: 30px;}
.orgDepth1 > li.part2 .teamNm {margin: 0 auto 30px;}
.orgDepth1 > li.part2 > div {display: flex;}
.orgDepth1 > li.part2 > div .orgDepth2 {flex-shrink: 0; margin-right: 20px;}
.orgDepth1 > li.part2 > div .orgDepth2:last-child {margin-right: 0;}

.orgDepth2 {width: 140px; border: 1px solid #dbdbdb; border-radius: 10px; min-height: 160px; box-sizing: border-box; z-index: 1;} /*��2*/
.orgDepth2 .partNm {display: block; width: 100%; padding: 13px 0; line-height: 1.3; border-bottom: 1px solid #dbdbdb; background: #f6f6f6; font-family: "NotoKR-Medium";} 
.orgDepth2 > ul { padding: 15px 18px; text-align: left;}
.orgDepth2.noPd > ul {padding: 15px 10px;} 
.orgDepth2 > ul > li{position: relative; font-size: 15px; padding-left: 8px; margin: 2px 0;} 
.orgDepth2 > ul > li:before {content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; background: #333; position: absolute; top: 9px; left: 0;}

/*����*/
.org-jibu-list {margin-top: 100px;}
.org-jibu-list > ul {display: flex;}
.org-jibu-list > ul > li {width: 140px; margin-right: 20px;}
.org-jibu-list > ul > li:last-child {margin-right: 0;}
.org-jibu-list > ul > li > ul {}
.org-jibu-list > ul > li > ul > li {background: #f6f6f6; margin-bottom: 10px; padding: 10px 0; border: 1px solid #dbdbdb; border-radius: 10px; overflow: hidden; text-align: center; font-family: "NotoKR-Medium"; letter-spacing: -1px;}

/*�����۾�*/
#orgchrt-wrap .line1 {position: relative; } /*��ü ����*/
#orgchrt-wrap .line1:after {content: ''; display: block; width: calc(100% - 140px); height: 1px;  position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: #dbdbdb;}
.orgDepth1 > li, .line2{position: relative; z-index: 1;}
.orgDepth1 > li:after, .line2:after {content: ''; display: block; width: 1px; height: 125px;  position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: #dbdbdb; z-index: -1;}
.org-jibu-list .line2:after {height: 55px;}

#orgchrt-wrap .line3 {position: relative; z-index: 1;}
#orgchrt-wrap .line3:after {content: ''; display: block; width: calc(100% - 140px); border: 1px solid #dbdbdb; border-bottom: 0; height: 30px; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); background: #fff; z-index: -1;}

#orgchrt-wrap .line4 {} /*��ü ����*/
#orgchrt-wrap .line4:after {content: ''; display: block; width: 1px; height: 430px;  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #dbdbdb;}

/* medi */
.orgDepth1.medi {width: 49%}
.orgDepth1.medi > li.clearBox {flex-grow: 1; position: relative;}
.orgDepth1.medi > li.clearBox .teamNm {position: relative; margin: 0 auto 30px; left: 0;}

/* 결핵연구원 하위 부서 배치 */
.orgDepth1.medi > li.clearBox > .line5 {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-top: 60px;
}

.orgDepth1.medi > li.clearBox > .line5 > .orgDepth2 {
    flex: 1;
    max-width: 160px;
    position: relative;
}

/* 결핵연구원에서 아래로 내려오는 세로선 */
.orgDepth1.medi > li.clearBox .teamNm:after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 39px;
    background: #dbdbdb;
    z-index: 1;
}

/* 하위 3개 부서를 연결하는 가로선 (중간 위치로 조정) */
.orgDepth1.medi > li.clearBox > .line5:before {
    content: '';
    position: absolute;
    top: -30px;
    left: 15%;
    width: 69.66%;
    height: 1px;
    background: #dbdbdb;
    z-index: 0;
}

/* 각 하위 부서에서 위로 올라가는 세로선 */
.orgDepth1.medi > li.clearBox > .line5 > .orgDepth2:before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 30px;
    background: #dbdbdb;
    z-index: 10;
}

/* 사무총장에서 결핵연구원으로 연결되는 세로선 (ㄱ자 연결을 위해 결핵연구원 중앙으로) */
.orgDepth1.medi > li:after {
    left: 50% !important;
    transform: translateX(-50%);
    height: 125px !important;
}

/* 사무총장에서 감사실/결핵연구원으로 연결되는 가로선 (오른쪽 끝을 결핵연구원 중앙까지만) */
#orgchrt-wrap .line1.v2:after {
    width: calc(100% - 300px);
    left: 70px;
    transform: none;
}

@media (min-width: 768px) and (max-width: 1180px){ 
    .orgDepth1 {justify-content: space-between;}
    .orgDepth1 > li {margin-right: 8px;}
    .orgDepth1 > li .teamNm {font-size: 1rem; width: 110px;}
    .orgDepth1.big > li .teamNm {width: 130px;}
    .orgDepth1.big > li > div:not(.line5) {width: 130px;}
    .orgDepth1.center > li {width: calc(100% / 5)}
    .orgDepth1.center > li .teamNm {width: 100%}
    .orgDepth1.center > li > div {width:100%;}
    .orgDepth2 {width: 110px; font-size: 0.875rem;}
    .orgDepth2 > ul {padding: 10px;}
    .orgDepth2.noPd > ul {padding: 8px;}
    .orgDepth2 > ul > li {font-size: 0.875rem;}
    .org-jibu-list > ul {justify-content:space-between}
    .org-jibu-list > ul > li > ul > li {font-size: 1rem;}
    .org-jibu-list > ul > li {width: calc(100% / 6 - 10px); margin-right: 0; }

    
    #orgchrt-wrap .line1:after {width: calc(100% - 110px);}
    #orgchrt-wrap .line1.v2:after {width: calc(100% - 130px);}
    #orgchrt-wrap .line1.center:after {width: calc(100% - (100% / 6) + 7px);}
    #orgchrt-wrap .org-jibu-list .line1:after {width: calc(100% - (100% / 6) + 7px);}
    
    #orgchrt-wrap .directorate {flex-direction: column;}
    #orgchrt-wrap .directorate p.top {margin-bottom: 20px;}
    #orgchrt-wrap .directorate p.top:after {width: 1px; height: 50px; top: 30px; left: 50%; transform: translateY(0) translateX(-50%);}

    /* medi */
    .orgDepth1.medi > li.clearBox > .line5 {gap: 8px;}
    .orgDepth1.medi > li.clearBox .teamNm {width: calc(100% / 3); left: calc((100% / 3) / 2);}
    .orgDepth1.medi > li.clearBox > .line5 > .orgDepth2 {width: calc(100% / 3);}
    .orgDepth1.medi > li.clearBox > .line5 > .orgDepth2:last-child {min-height: 45px; height: 45px; margin-top: 45px;}

    .orgDepth1.medi > li:after {left: calc(100% / 3);}
    #orgchrt-wrap .line1.v2:after {width: calc(100% - (49% / 3 ) * 2 - 65px); left: 65px; transform: none;}
    .orgDepth1.medi > li.clearBox::before {width: calc(100% - (100% / 3) - (100% / 3)/2); left: calc(100% / 3);}
    .orgDepth1.medi > li.clearBox > .line5:before {width: 66.66% !important; left: 16.66% !important;}
}

@media all and (max-width: 767px){
    .org-top {padding-top: 0;}
    .org-top .president,
    .org-top .secretary {position: static; transform: none;}
    .org-top .president {width: 100%; height: auto; padding: 15px; border-radius: 10px; margin-bottom: 20px;}
    .org-top .president span {padding: 5px; box-sizing: border-box; border-radius: 0;}
    .org-top .secretary {width: 100%; height: auto; padding: 13px; margin-bottom: 20px; border-radius: 10px;}
    
    #orgchrt-wrap .flex-between {display: block;}
    .orgDepth1 {display: block;}
    .orgDepth1 > li {margin-bottom: 20px; margin-right: 0;}
    .orgDepth1 > li .teamNm {width: 100% !important; padding: 13px 0; margin-bottom: 10px;}
    .orgDepth2 {width: 100% !important;}
    .orgDepth1 > li.part2 .teamNm {margin-bottom: 10px;}
    .orgDepth1 > li.part2 > div {display: block;}
    .orgDepth1 > li.part2 > div .orgDepth2 {margin-right: 0; margin-bottom: 10px;}
    
    .orgDepth1 > li:after, .line2:after {display: none;}
    #orgchrt-wrap .flex-between {margin-bottom: 20px;}
    
    #orgchrt-wrap .line3:after,
    #orgchrt-wrap .line1:after,
    #orgchrt-wrap .line4:after{display: none;}
    .orgDepth2 {min-height: auto;}
    
    .org-jibu-list {margin-top: 20px;}
    .org-jibu-list > ul {display: block;}
    .org-jibu-list > ul > li {width: 100%;}
    
    #orgchrt-wrap .directorate {position: static; display: block; margin-bottom: 30px;}
    #orgchrt-wrap .directorate p {margin-left: 0;}
    #orgchrt-wrap .directorate p.top {margin-bottom: 8px;}
    #orgchrt-wrap .directorate p.top:after {display: none;}
    #orgchrt-wrap .directorate p span {width: 100%;} 

    /* medi */
    .orgDepth1.medi {width: 100%;}
    .orgDepth1.medi > li.clearBox::before,
    #orgchrt-wrap .line1.v2:after,
    .orgDepth1.medi > li.clearBox > .line5:before {display: none;}
    .orgDepth1.medi > li.clearBox > .line5 {flex-direction: column; gap: 8px;}
    .orgDepth1.medi > li.clearBox .teamNm {left: 0;}
    .orgDepth1.medi > li.clearBox > .line5 > .orgDepth2:last-child {margin-top: 0;}

}


/* ����� ���μ�(�Ʒ��� �������� ��) ���� */
.orgDepth1 > li.no-line::after {
  height: 60px !important;
}

/* ����� ���μ�(�Ʒ��� �������� ��) ���� */
.orgDepth1 > li.no-line1::after {
  height: 115px !important;
}

/* ����� ���μ�(�Ʒ��� �������� ��) ���� */
.orgDepth1 > li.no-line2::after {
  height: 112px !important;
}


/* ȸ��� ���� �ڽ��� �� �ٿ� ���� */
.president-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* �׽�Ʈ �ڽ� */
.side-box {
left: -77%;
  width: 250px;
  height: 100px;
  line-height: 50px;
  text-align: center;
  background: #fff;
  border: 2px solid #ef3e61;
  border-radius: 10px;
  font-family: "NotoKR-Bold";
  color: #ef3e61;
  margin-right: 30px; /* ȸ��� ���� */
  position: relative;
}

/* �׽�Ʈ �� ȸ������ �� ���� */
.side-box::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -30px;
  width: 30px;
  height: 1px;
  background: #dbdbdb;
}
/*******************������ �� ******************/