.space-tree-zone{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgb(245,245,243);
    cursor: move;
    overflow: hidden;
}
.space-tree-zone.no-data:after{
    content: "暂无数据";
    position: absolute;
    line-height: 39;
    top: 0;
    color: #888;
    width: 100%;
    text-align: center;
}
.node-zone {
    cursor: pointer;
}

.org-structure.top-dir{
    width: 160px;
    height: 230px;
}
.org-department.top-dir{
    width: 210px;
    height: 164px;
}
.org-department.left-dir{
    width: 288px;
    height: 116px;
}
.node-zone{
    transition:all 0.5s;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}


.node-zone .main-zone {
    position: relative;
    border-radius: 3px;
    top: 0;
    background-color: #fff;
    transition:all 0.3s;
    overflow: hidden;
}

.org-structure.top-dir .potrait-zone {
    padding: 9px 0;
}
.org-department.top-dir .potrait-zone {
    padding: 10px 17px 11px 26px;
    float: left;
}
.org-department.top-dir .info-zone:before {
    content: "\200B";
    display: inline-block;
    height: 80px;
    font-size: 0px;
    width: 0px;
    background: #fff;
    overflow: hidden;
    vertical-align: middle;
}

.org-department .potrait-legend-zone {
    overflow: hidden;  
    margin: 13px 0;
}
.top-dir .potrait-zone img{
    width: 108px;
}
.top-dir .info-zone {
    display: block;
    transition:all 0.5s;
    padding: 7px 7px;
    position: relative;
}
.org-department.top-dir .info-zone {
    padding: 0;
}
.top-dir .info-zone.blue{
    background-color:rgb(69,142,204)
}
.top-dir .info-zone.grey{
    background-color:rgb(79,90,103);
}

.top-dir .link-zone {
    height:9px;
    width:29px;
    margin:auto;
    position:relative;
}
.org-department.top-dir .link-zone {
     height: 10px;
}
.top-dir .link-zone.blue{
    background-color:rgb(66,136,196);
}
.top-dir .link-zone.grey{
    background-color:rgb(141,142,144);
}


.top-dir .link-zone:before{
    content:"\200B";
    position:absolute;
    width:0;
    height:0;
    border:4px solid transparent;
    border-top-color:#fff;
    top:3px;
    left:10px;
}


.top-dir .info-item {
    margin:auto;
    text-align:center;
}

/* solve emp text and container */
.info-item:after {
    content: "\200B";
}
.org-department.top-dir .info-item {
    text-align:left;
    line-height: 24px;
    color:#646464;
}
.node-zone .info-potrait{
    height: 103px;
    width: 103px;
    border-radius: 55px;
    /*background-color: #f1f1f1;*/
    overflow: hidden;
    line-height: 103px;
    text-align: center;
    color: #fff;
}
.node-zone .info-potrait.hide{
    background-color: transparent;
}
.org-department.top-dir .info-potrait{
    height: 53px;
    width: 53px;
    border-radius: 30px;
    line-height: 53px;
    text-align: center;
    color: #fff;
}
 
.org-department.top-dir .child-emp-label {
    position: absolute;
    color: #fff;
    right: 10px;
    bottom: 2px;
}
.org-department.top-dir .child-emp-label:before {
    content: "\200B";
    width: 20px;
    display: inline-block;
    background: url(../../../images/components/space-tree/icons_canvas.png) 0px -32px no-repeat;
}
.top-dir .info-name{
    line-height: 16px;
    font-family: "宋体";
    font-size: 16px;
    font-weight: bold;
    color: rgb(50,50,50);
}
.org-department.top-dir .info-name{
    font-family: "宋体";
    font-size: 12px;
    color: #323232;
}

.top-dir .info-position {
    line-height: 32px;
    font-family: "宋体";
    color: rgb(100,100,100);
}
.org-structure.top-dir .info-item.email:before{
    background: url(../../../images/components/space-tree/icons_canvas.png) 0px -15px no-repeat;
    content: "\200B";
    display: inline-block;
    width: 20px;
}
.org-department.top-dir .info-item.email{
    background: none;
}
.org-structure.top-dir .info-item.department:before{
    background: url(../../../images/components/space-tree/icons_canvas.png) 0px 0px no-repeat;
    content: "\200B";
    display: inline-block;
    width: 20px;
}
.top-dir .info-zone .info-item {
    height:19px;
    line-height:19px;
    text-align:left;
    /*text-indent:18px;*/
    color:white;
    font-size:12px;
    font-family: "宋体";
    padding-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    /*margin-left: 9px;*/
}
.org-department.top-dir .info-zone .info-item {
    background: none;
    line-height: 22px;
    font-size: 16px;
    vertical-align: middle;
    display: inline-block;
    width: 160px;
    margin-left: -3px;
    text-align: center;
    padding: 0 24px;
    overflow: hidden;
    height: auto;
    font-family: '微软雅黑';
    max-height: 44px;
    white-space: normal;
}

.top-dir .node-potrait{
    cursor: pointer;
    background: #f1f1f1 center no-repeat;
    background-size: 111%;
    height: 100%;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.org-structure .node-potrait{
    font-size: 18px;
    font-family: '微软雅黑';
}
.org-department .node-potrait{
    font-size: 12px;
    font-family: '宋体';
}

.org-structure .node-potrait:hover{
    background-size: 150%;
    font-size: 22px;
}
.org-department .node-potrait:hover{
    background-size: 150%;
    font-size: 16px;
}
.expand_btn_radius:hover {
    background-color: rgba(0,0,0,0.8);
}
 .expand_btn_radius {
    height: 19px;
}

/*info-zone level*/
.zoom-info-zone {

}
.zoom-info-zone .info-zone{
    display: none;
}


/*hover style*/
.node:hover .node-shadow{
    box-shadow:0px 0px 10px 0px #666;
}
.node:hover  .top-dir .link-zone.grey{
    /*background-color:rgb(79,90,103);*/
    background-color:rgb(61,68,79);
}
.node:hover  .top-dir .info-zone.grey{
    background-color:rgb(63,71,82);   
}

/*selected style*/
.node.selected .node-shadow{
    box-shadow:0px 0px 10px 0px #666;
}
.node.selected .top-dir .link-zone.grey{
    background-color:rgb(61,68,79);
}
.node.selected .top-dir .info-zone.grey{
    background-color:rgb(63,71,82);   
}

/* tip style v1*/
.node .tip-zone {
    opacity: 0;
    display: none;
    position: absolute;  
    background: #fff; 
    width: 0px;  
    min-height: 300px;  
    box-shadow: 0px 0px 10px 1px #666;  
    border-radius: 10px;  
    transition:all 0.3s;
    z-index: 1;
}
    
.node .tip-zone:before {
    content: "\200B";
    position: absolute;
    width: 0;
    border: 20px solid transparent;
    border-right-color: #fff;
    left: -32px;
    top: 80px;
    height: 0;
    z-index: -1;
}

.node .tip-zone .tip-dl{
    text-indent: 10px;
    padding: 10px 0;
}
.node .tip-zone .tip-dl dt {
    float: left;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    white-space: nowrap;
}
.node .tip-zone .tip-dl dt:after{
    content:" : ";
}

.node .tip-zone .tip-dl dd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.node .tip-zone .pic-wrap {
    width: 160px;
    height: 160px;
    margin: auto;
    background-color: #eee;
    background-position: center;
    margin-top: 10px;
    border-radius: 100px;
}


/*zoom style*/
/*create by fuyue 2015/7/8  */
.zoom-zone {
    width: 210px;
    height: 16px;
    display: inline-block;
    position: relative;
    background: #fff;
    vertical-align: middle;
}

.zoom-zone .zoom-item {
    position: absolute;
    height: 16px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
}

.zoom-zone .zoom-down {
   width: 12px;
   background: url(../../../images/components/space-tree/icons_canvas.png) -81px -1px no-repeat;
}

.zoom-zone .zoom-up {
    width: 16px;
    right: 0px;
    background: url(../../../images/components/space-tree/icons_canvas.png) -55px -3px no-repeat;
}

.zoom-zone .zoom-line {
    left: 21px;
    right: 25px;
    background: transparent;
}

.zoom-zone .zoom-flag {
    width: 7px;
    height: 16px;
    position: absolute;
    background: url(../../../images/components/space-tree/icons_canvas.png) -37px -3px no-repeat;
    top: 0px;
    left: 90%;
}

.zoom-zone .zoom-line:before {
    content: "\200B";
    display: block;
    position: absolute;
    height: 16px;
    left: 0px;
    background: url(../../../images/components/space-tree/icons_canvas.png) -23px -26px no-repeat;
    top: 0;
    right: 0px;
}









/*******************************left*********************************/
.node-zone.org-structure.left-dir {
    width:288px;
    height:116px;
}
.node-zone.org-structure.top-dir {
    width: 160px;
    height: 230px;
}


.left-dir .node-item-zone {
    float: left;
}

.org-structure.left-dir .info-zone.grey {
    width: 146px;
}

.left-dir .main-zone {
    float: left;
    width: 279px;
}
.left-dir .main-zone:after{
    content:"\200B";
    height:100%;
    width:4px;
    position:absolute;
    top:0;
    right:0;
    background-color: rgb(79,90,103);
}
.org-department.left-dir .main-zone {
    overflow: hidden;
    display: block;
    width: 278px;
    float: left;
}

.org-structure .potrait-zone {
    padding: 6px 7px 7px 11px;
}
.org-department.left-dir .potrait-zone {
    padding: 11px 25px 7px 25px;
    float: left;
}
.org-department.left-dir .info-zone:before {
    content: "\200B";
    display: inline-block;
    height: 116px;
    font-size: 0px;
    width: 0px;
    background: #fff;
    overflow: hidden;
    vertical-align: middle;
}

.left-dir.org-department .potrait-legend-zone {
    overflow: hidden;  
    margin: 0px 0;
    width: 102px;
    float: left;
}
.left-dir .potrait-zone img{
    width: 108px;
}
.org-structure.left-dir .info-zone {
    display: block;
    transition:all 0.5s;
    padding: 5px 0px;
    position: relative;
    width: 152px;
}
.org-department.left-dir .info-zone {
    padding: 0;
    width: 174px;      
    float: left;
}
.left-dir .info-zone.blue{
    background-color:rgb(69,142,204)
}
.org-department .info-zone.grey{
    background-color:rgb(79,90,103);
    position: relative;
}
.org-department .info-zone.grey .info-item{
    color: #fff;
}

.org-structure.left-dir .link-zone {
    float: left;
    width: 9px;
    height: 29px;
    top: 42px;
    margin:auto;
    position:relative;
}
.org-department.left-dir .link-zone {
    height: 29px;
     margin-top: 43px;
    float: left;
    width: 10px;
    position:relative;
}
.left-dir .link-zone.blue{
    background-color:rgb(66,136,196);
}
.left-dir .link-zone.grey{
    background-color:rgb(141,142,144);
}


.org-structure.left-dir .link-zone:before{
    content: "\200B";
    position: absolute;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: #fff;
    top: 9px;
    left: 3px;
}
.org-department.left-dir .link-zone:before{
    content:"\200B";
    position:absolute;
    width:0;
    height:0;
    border:4px solid transparent;
    border-left-color: #fff;
    top: 10px;
    left: 3px;
}
.org-structure.left-dir .link-zone:after{
    position:absolute;
    width:0;
    height:0;
    border:4px solid transparent;
    border-top-color:#fff;
    top:3px;
    left:10px;
}


.org-structure.left-dir .info-item {
    /*margin:auto;*/
    text-align: left;
    max-width: 146px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.org-department.left-dir .info-item {
    margin:auto;
    text-align:center;
}
/* solve emp text and container */
.info-item:after {
    content: "\200B";
}
.org-department.left-dir .info-item {
    text-align: center;
    line-height: 20px;
    color:#646464;
}

.org-department.left-dir .info-potrait{
    height: 52px;
    width: 52px;
    border-radius: 30px;
    line-height: 53px;
    text-align: center;
    color: #fff;
}

.org-department.left-dir .child-emp-label {
    position: absolute;
    color: #fff;
    right: 10px;
    bottom: 2px;
}
.org-department.left-dir .child-emp-label:before {
    content: "\200B";
    width: 20px;
    display: inline-block;
    background: url(../../../images/components/space-tree/icons_canvas.png) 0px -32px no-repeat;
}
.left-dir .info-name{
    line-height: 45px;
    font-family: "宋体";
    font-size: 16px;
    font-weight: bold;
    color: rgb(50,50,50);
}
.org-department.left-dir .info-name{
    font-family: "宋体";
    font-size: 12px;
    color: #323232;

}

.left-dir .info-position {
    font-family: "宋体";
    color: rgb(50,50,50);
}
.org-department.left-dir .info-position {
    line-height: 20px;
    font-family: "宋体";
    color: rgb(100,100,100);
}
.org-structure.left-dir .info-item.email:before{
    background: url(../../../images/components/space-tree/icons_canvas.png) -125px 0px no-repeat;
    content: "\200B";
    display: inline-block;
    width: 20px;
}
.org-department.left-dir .info-item.email{
    background: none;
}
.org-structure.left-dir .info-item.department:before{
    background: url(../../../images/components/space-tree/icons_canvas.png) -103px 0px no-repeat;
    content: "\200B";
    display: inline-block;
    width: 20px;
}
.left-dir .info-zone .info-item {
    line-height: 21px;
    text-align:left;
    /*text-indent:18px;*/
    color: rgb(109,109,109);
    font-size:12px;
    font-family: "宋体";
    padding-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    /*margin-left: 9px;*/
}
.org-department.left-dir .info-zone .info-item {
    background: none;
    line-height: 22px;
    font-size: 16px;
    vertical-align: middle;
    display: inline-block;
    width: 138px;
    margin-left: 0px;
    text-align: center;
    padding: 0px 16px;
    overflow: hidden;
    height: auto;
    font-family: '微软雅黑';
    max-height: 44px;
    white-space: normal;
}

.node-zone .node-potrait{
    text-align: center;
}
.left-dir .node-potrait{
    cursor: pointer;
    background: #f1f1f1 center no-repeat;
    background-size: 111%;
    height: 100%;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.org-structure.node-potrait{
    font-size: 18px;
    font-family: '微软雅黑';
}
.org-department.node-potrait{
    font-size: 12px;
    font-family: '宋体';
}


/*hover style*/

.node:hover  .left-dir .link-zone.grey{
    background-color:rgb(61,68,79);
}
.node:hover  .org-department.left-dir .info-zone.grey{
    background-color:rgb(63,71,82);   
}

/*selected style*/

.node.selected .left-dir .link-zone.grey{
    /*background-color:rgb(79,90,103);*/
    background-color:rgb(61,68,79);
}
/*.node.selected .org-department.left-dir .info-zone.grey{
background-color:rgb(61,68,79);   
}*/
.node.selected .org-department.left-dir .info-zone.grey{
    background-color:rgb(63,71,82);   
    width: 174px;
    float: left;
}
/*small selected style*/
.selected.zoom-small .expand_btn_radius {
    background-color: rgba(0,0,0,0.7);
}

  


/* 模拟css模糊 */
.node .node-shadow {
    transition:all 0.5s;
    box-shadow:0px 0px 5px 0px #ccc;
    width: 144px;
    height: 198.9px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
}