@charset "UTF-8";

.page-content { }
.org-chart-wrap {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:90%;
    max-width:1400px;
    font-size:1rem;
    margin:2rem auto;
}
.org-dual-box{
    display:flex;
    width:100%;
    justify-content:center;
    align-items:flex-start;
}

[class*="org-dual-item-"]{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: flex-start;        
}
[class*="org-dual-item-"] > .ceo{
    height:70px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;      
    position:relative;
}
[class*="org-dual-item-"] > .chief{
    height:70px;
}

.org-parts{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.org-dual-item-left{
    width:70%;
}
.org-dual-item-right{
    width:30%;
}
.org-steps{
    width:100%;
}
.org-parts > div{
    flex:1;
    text-align:center;
}

.chariman{
    font-size:2.2em; 
    --circle-size:250px;
    height:var(--circle-size);
}

.chariman > span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 100%;
    background: var(--main-color1);
    color: #fff;
    border: 20px solid rgba(255, 255, 255, .2);
    margin: 0 auto;
    transition-duration: 200ms;
}
[class*="org-dual-item-"]{
    --circle-size:180px;
}
[class*="org-dual-item-"] > .ceo > span{
    font-size:1.5em;    
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    background: var(--main-color3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    width:var(--circle-size);
    border-radius:12px;
    text-align:center;
}
[class*="org-dual-item-"] > .chief > span{
    font-size:1.5em;    
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    background: var(--main-color3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    width:var(--circle-size);
    border-radius:12px;    
}
.org-person-height {
    margin:40px 0;
}

.org-parts > div{
    height:60px;
    padding: 0 8px;        
    position:relative;
}
.org-parts > div:before{
    content:'';
    display:block;
    height:40px;
    width:1px;
    top:-40px;
    background-color:#ddd;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.org-parts > div > span{
    font-size:1.2em;    
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    background-color:#ffffff;
    min-width:80px;
    border: 1px solid var(--main-color3);
    color: var(--main-color3);
    border-radius:5px;    
}

.org-dual-item-right .org-parts > div:before{
    height:80px;
    top:-80px;
}
.org-dual-item-right .org-parts.xx-height > div:before{
    height:230px;
    top:-230px;
}

.org-person-height.chief > span{
    position:relative;
}

.org-person-height.chief > span:before{
    content:'';
    display:block;
    width:1px;
    height:80px;
    top:-80px;
    background-color:#ddd;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

.org-dual-item-left .ceo > span{
    position:relative;
}
.org-dual-item-left .ceo > span:before{
    content:'';
    display:block;
    width:1px;
    height:80px;
    top:-80px;
    background-color:#ddd;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

.org-dual-item-right .ceo > span{
    position:relative;
}
.org-dual-item-right .ceo > span:before{
    content:'';
    display:block;
    width:1px;
    height:40px;
    top:-40px;
    background-color:#ddd;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.org-part-last > div > span{
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 10px;
    font-size: 1.125em;
    border: 1px solid #ddd;
    background: #f8f8f8;
    transition-duration: 200ms;
}

.org-person-height.org-parts > div{
    position:relative;
}
.org-dual-item-left .org-person-height.org-parts > div:after{
    content:'';
    display:block;
    position:absolute;
    height:1px;
    width:100%;
    background-color:#ddd;
    top:-40px;
}

.org-dual-item-left .org-person-height.org-parts > div:first-child:after{
    width:calc(50% + 8px);
    right:-8px;
}
.org-dual-item-left .org-person-height.org-parts > div:last-child:after{
    width:50%;
    left:0;
}

.org-parts > div.org-item-center:before {
    height:80px;
    top:-80px;
}

.org-dual-item-left .org-person-height.ceo:before{
    content:'';
    display:block;
    width:50%;
    height:1px;
    position:absolute;
    background-color:#ddd;
    right:0;
    top:-40px;
}
.org-dual-item-right .org-person-height.ceo:before{
    content:'';
    display:block;
    width:50%;
    height:1px;
    position:absolute;
    background-color:#ddd;
    left:0;
    top:-40px;
}

@media (max-width:1024px){
    .org-chart-wrap {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        width:100%;
        font-size:0.85rem;
        margin:2rem auto;
    }
    .chariman{
        --circle-size:180px;
    }
    [class*="org-dual-item-"] {
        --circle-size: 140px;
    }
}