@charset "utf-8";

/* 조직도 */
.org_chart {display: block; width: 100%;}
.org_chart .organization {width: 980px; max-width: 100%; margin: 0 auto; padding-right: 36px; position: relative; overflow: hidden;}
.org_chart .organization::before {display: block; content: ""; position: absolute; top: 0; left: calc(50% - 17.5px); width: 1px; height: 640px; background-color: #ddd; z-index: -1;}
.org_chart .organization::after {display: block; content: ""; position: absolute; top: 240px; right: 0; width: calc(50% + 17.5px); height: calc(100% - 616px); border: 1px solid #ddd; z-index: -1; border-left: none;}
.org_chart .organization a {display: flex; align-items: center; justify-content: center; width: 200px; max-width: 100%; min-height: 48px; padding: 4px 8px; border-radius: 6px; text-align: center; font-size: 17px; font-weight: 500; line-height: 1; transition: 0.4s ease-in-out;}

.org_chart .organization .org-list {position: relative;}
.org_chart .organization .org-list.v1 {margin-bottom: 96px;}

.org_chart .organization .org-item {display: flex; justify-content: center; position: relative;}
.org_chart .organization .org-item a {background-color: #fff; border: 2px solid #3796d7; color: #186497;}
.org_chart .organization .org-item.n1 {margin: 0 auto 24px;}
.org_chart .organization .org-item.n1 a {background-color: #354588; border-color: #354588; color: #fff;}
.org_chart .organization .org-item.n2 {position: absolute; left: calc(50% + 201px); margin-bottom: 24px; transform: translateX(-50%);}
.org_chart .organization .org-item.n2::before {content: ""; position: absolute; top: 50%; left: -100px; width: 100px; height: 1px; background-color: #ddd;}
.org_chart .organization .org-item.n3 {margin: 0 auto 24px;}
.org_chart .organization .org-item.n3 a {background-color: #2c68c6; border-color: #2c68c6; color: #fff;}
.org_chart .organization .org-item.n4 {position: absolute; left: calc(50% - 200px); margin-bottom: 24px; transform: translateX(-50%);}
.org_chart .organization .org-item.n4::before {content: ""; position: absolute; top: 50%; right: -100px; width: 100px; height: 1px; background-color: #ddd;}
.org_chart .organization .org-item.n5 {margin: 0 auto 24px;}
.org_chart .organization .org-item.n5::after {display: block; content: ""; position: absolute; bottom: -24px; left: 50%; width: 1px; height: 24px; background-color: #ddd; z-index: -1;}
.org_chart .organization .org-item.n5 a {width: 240px; background-color: #06544b; border-color: #06544b; color: #fff;}

.org_chart .organization .org-team {display: flex; gap: 40px; position: relative;}
.org_chart .organization .org-team::before {display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; width: calc(75% + 30px); height: 1px; margin: 0 auto; background-color: #ddd;}
.org_chart .organization .org-team.t1 {margin-bottom: 24px;}
.org_chart .organization .org-team.t2 {margin-bottom: 48px;}
.org_chart .organization .org-team.data {justify-content: center; width: 520px; max-width: 100%; margin: 0 auto;}
.org_chart .organization .org-team.data::before {width: calc(50% + 20px);}

.org_chart .organization .org-team > li {flex-basis: 100%; position: relative; padding-top: 24px;}
.org_chart .organization .org-team > li::before {display: block; content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 24px; background-color: #ddd;}
.org_chart .organization .org-team > li > a {width: 100%; background-color: #257c72; border: 2px solid #257c72; color: #fff;}

.org_chart .organization .org-team-item {margin-top: 8px;}
.org_chart .organization .org-team-item > li > a {width: 100%; height: 44px; background-color: #f6f6f6; border: 1px solid #eee; color: #2e2e2e;}
.org_chart .organization .org-team-item > li {margin-bottom: 2px;}
.org_chart .organization .org-team-item > li:last-child {margin-bottom: 0;}
.org_chart .organization .org-team-item > li > a {width: 100%; height: 44px; background-color: #f6f6f6; border-radius: 0; border: 1px solid #eee; color: #2e2e2e;}

.org_chart .organization .ti1 {position: relative;}
.org_chart .organization .ti1::after {display: block; content: ""; position: absolute; top: 48px; right: -144px; width: 144px; height: 1px; background-color: #ddd;}
.org_chart .organization .ti2 {margin-top: 48px;}

@media (max-width: 1024px) {

    .org_chart .organization::before {height: 288px;}
    .org_chart .organization::after {height: calc(100% - 674px);}

    .org_chart .organization .org-list.v2 {border: 1px solid #ddd; padding-top:40px; padding-bottom: 40px;}
    .org_chart .organization .org-list.v3 {margin-top: 40px;}

    .org_chart .organization .org-team {flex-wrap: wrap; justify-content: center}
    .org_chart .organization .org-team::before {display: none;}
    .org_chart .organization .org-team > li {flex-basis: 320px; padding-top: 0px;}
    .org_chart .organization .org-team > li::before {display: none;}
    .org_chart .organization .org-team.t1 {margin-bottom: 40px;}
    .org_chart .organization .org-team.t2 {margin-bottom: 0;}
    .org_chart .organization .org-team.data {width: 100%; border: 1px solid #ddd; padding-top: 40px; padding-bottom: 40px;}
    .org_chart .organization .org-team.data::before {display: none;}
    .org_chart .organization .org-team.data > li::before {display: none;}

    .org_chart .organization .ti1::after {top:24px; width: calc(50% + 40px); right: -200px;}
    .org_chart .organization .ti2::before {display: block !important; top: -24px !important;}

}

@media (max-width: 768px) { 

    .org_chart .organization {width: 100%; padding-left: 36px;}
    .org_chart .organization::before {height: 328px; left: 50%;}
    .org_chart .organization::after {width: 50%; height: calc(100% - 1008px); top: 304px;}
    .org_chart .organization a {width: 100%; height: 52px;}

    .org_chart .organization .org-list.v1 {margin-bottom: 24px;}
    .org_chart .organization .org-list.v1.mv {margin-bottom: 48px;}
    .org_chart .organization .org-list.v2 {padding: 24px;}

    .org_chart .organization .org-team > li {flex-basis: 100%;}
    .org_chart .organization .org-team > li::before {height: 40px;}
    .org_chart .organization .org-item.n2 {position: relative; left: 0; transform: none;}
    .org_chart .organization .org-item.n2::before {display: none;}
    .org_chart .organization .org-item.n4 {position: relative; left: 0; transform: none;}
    .org_chart .organization .org-item.n4::before {display: none;}
    .org_chart .organization .org-item.n5 a {width: 100%;}
    .org_chart .organization .org-team.data {padding: 24px;}

    .org_chart .organization .ti1::after {display: none;}
    .org_chart .organization .ti2 {margin-top: 0;}
    .org_chart .organization .ti2::before {top: -40px !important;}
    
    
}