.org_table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin:0 auto;
}

.org_table td {
  position: relative;
  vertical-align: top;
  text-align: center;
  box-sizing: border-box;
}

.extend_handle {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 1;
  margin-left: -10px;
  background: #fff no-repeat center url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADqElEQVRYR72XXYscRRSG37eXyKygQU3QoBIVEWTBMFV9IbKKnxeaoPgtgl4oRBTiDzBeGv+AoBjQCy8kalSURC80RnQRYfvUsMIqKGg0iF/RsIrOkix95AzVa/fszHZvD9h3M3VOnadOnap6D9Hwm5ubO2t6evpmAPcDuEJVt5A8z9xV9XeSJwB8DeC1fr//4ezs7F9NpmadkYhcSXKPqj4A4Jw6+zh+kuQBVX3Oe//Vej7rAojIMwD2ADg7TnJKVT8g+RnJn0n+EjNwvqpeoKrXkLwFwBnR/k8ABvH0OIixACLyCYBro6MA2N/pdA7OzMz8sd6KFhcXz11eXr4HwG4APtp+6r2/bpTfSAAR+Q3AlujwmPd+f8PUV8xExCBejH+e8N5vHZ5nDYCIfAfgEjMkeZtz7v02wQufEMKtqvpe/H3Me39peb4KQAjhdVW91wy897UF2uv1BqDdbvdYHaSIaFzUG865+wr71SCx4PbGgR3e+y8aTGrZMtjKqkb5ichVABbi2L6iMAcAdtQAfB6rvfGeF6tqkq0Yp6gJOx1X2xEdAIQQnlfVx43Fe5/WrbwY3yhAhMgsaSRfcM49wSzLNpP8HsBmAI1XHycb7GvTDAxlYUlVtzOE8JCqvgLgNMkLnXN2BBt9bTIQQtiqqj8C2ETyYYrIQQB3A/jIe39To8jRqA1AzMIRADcCeNMAgp0kAHu998/+TwBPAdgHoGc18APJi0k+6px7uQ1Anuc3jPObmpr61Tn3ZXk8hPCIqr6kqsctA38DODNJkl3dbvdwYWiXTJ7nR4tbcSNgQ7ZrTlav19uZ5/khAP+MBVhYWLhoZWXl+ASBB64kP3bOVTJUAWi7BfPz89cnSXJ0VIA66OEtaFWEkwCIyH9FKCIHTGap6uE0TXfV0RfjkwBkWXaI5E6Tb1YDdwJ4C8CpTqezrU5wTAoQBctPUTXdxSg27So2vdf4Km6bgZJIOdnv97e3fowmAKg+Rm2f4zYApdVXn+MIYQp4IEiaSDERuRzANya90zR9sq54h6RZVZCU3vdVJdzkic2ybFuaplZQtV/xcAGoKORRorSsiBtJs/WiD0mxNcp4nCxfVcYbORnDIEOyfI0iHmz3OPqyQjapZo0JybfrBEsUHHa3rDYmJCtKuBxzo63ZadtDAEdGtWYATNBYN7UpBmnfmpUKs2hOH4y6sbbgACyRfHXi5rQcycRrkiS3q+odAC4b055/S/KdPM/fTdN0qQnpvwH9DVrB3GgKAAAAAElFTkSuQmCC');
  background-size:100% 100%;
  bottom:20px;
  border-radius: 50%;
}
.extend .extend_handle {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADUklEQVRYR82XzWucVRTGn2dCZCK0QW20pZRUF4IGLLnnXYikLtq6aFMqfougiwpKC/0HGpfGf0CwtJAuuihV0xZLWxe2XWgQF3NuUIiCC79K8aO1IQ3thITMkTvcGd6ZZD6SN5N6dzPv+Xjuvefe+ztEm2NiYmJDT0/PHgBvAHjSzDaRfCS4m9m/JG8B+BnAp8Vi8crQ0NBsO6HZykhVnyJ5xMzeBPBQK/v4fZrkGTP7WER+aubTVICqfgjgCICNMci8mX1F8luSf5H8O67AY2a22cyeI/kCgAei/R0AQcQHjUQ0FKCqXwPYGR0VwIl8Pj8+MDBwu9mMpqamHp6bm3sVwHsAJNp+IyLPL+e3rABVvQlgU3R4X0ROtLn0NWaqGkQcj3/eEpG++jhLBKjqrwC2B0OS+5xzX64mecXHe7/XzC7H37+JyOPpeDUCvPefmdlrwUBEWhboSoSpqsVJfe6ce73iW00SC24kftghIj+sJEErW1V9BsD30W60UphlAeGoAfguVvuq97wNEZWaCKfj2XBEywK895+Y2aGgRUSSVoGyfFfVQthhksecc4dZKBR6Sf4OoBdAx2ZfEZ06GTNm1k/v/dtmdgrAAsmtzrlwBDs2vPd9ZnYDQDfJd6iq4wBeAXBNRHZ3LHMqsKpeBbALwNkgwAMYBDAiIh+tk4CjAEYBTIYa+IPkNpLvOudOpgV4759eXFx8NIuorq6uf5xzP9bFPWhmY2Z2PazAXQAP5nK5/YODg5dSxRLu8VCxazESEQnvSXlMTk4Ol0qliwDuNRQQi2WM5IYsCsxsNq5utbhrBDTbgiyJm/l672u24P4WoaqeCZhlZpeSJNnfqVmn4xYKhYskhwO+hRp4CcA5APP5fH5LK+DIKjACy5+Rml5mhM1wFQfeW8+reLpYLPbf/8fof/EcRxGBgMtAshYoVl8rdWhWCySp269Kwp1CMgA1hLwclKaJODOa1aHYEjJuhOVVMs5yMuqwfAkRl7e70blOE3JAtdCYkDzfCljiGxLulmpjQrKGhNM5V9qaLYQ9BHB1udYMQACa0E11xySrb81ShVlpTt+K3NjOZThD8nTm5rTu/u7N5XIHzOxFAE80aM9/IflFqVS6kCTJTDtK/wPHtr5LtVCS4AAAAABJRU5ErkJggg==');
}

.extend::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 15px;
  height: 40px;
  border-left: 2px solid #4e4d4d;
  transform: translate3d(-1px, 0, 0)
}

.childLevel::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: 15px;
  border-left: 2px solid #4e4d4d;
  transform: translate3d(-1px, 0, 0)
}

.childLevel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  border-top: 2px solid #4e4d4d;
}

.childLevel:first-child:before,
.childLevel:last-child:before {
  display: none;
}

.childLevel:first-child:after {
  left: 50%;
  height: 15px;
  border: 2px solid;
  border-color: #4e4d4d transparent transparent #4e4d4d;
  border-radius: 6px 0 0 0;
  transform: translate3d(1px, 0, 0)
}

.childLevel:last-child:after {
  right: 50%;
  height: 15px;
  border: 2px solid;
  border-color: #4e4d4d #4e4d4d transparent transparent;
  border-radius: 0 6px 0 0;
  transform: translate3d(-1px, 0, 0)
}

.childLevel:first-child.childLevel:last-child::after {
  left: auto;
  border-radius: 0;
  border-color: transparent #4e4d4d transparent transparent;
  transform: translate3d(1px, 0, 0)
}

.node {
  position: relative;
  display: inline-block;
  margin: 0 7px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  padding-bottom: 40px;
}

.node .person {
  position: relative;
  display: inline-block;
  z-index: 2;
  width: 10em;

  overflow: hidden;
  background: #fff;
  border: 1px solid #4e4d4d;
  box-sizing: border-box;
}

.node .person .avat {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 190px;
  margin: auto;
  overflow: hidden;
}

.node .person .avat img {
  width: 100%;
  height: 190px;
}

.node .person .name {
  height: 2em;
  line-height: 2em;
  overflow: hidden;
  width: 100%;
}
.node .person .sub_name{
  height: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  text-align: center;
}

.node.hasMate::after {
  content: "";
  position: absolute;
  left: 6em;
  right: 6em;
  bottom: 55px;
  border-top: 2px solid #4e4d4d;
  z-index: 12;
}
.node.hasMate .person{
  overflow:visible;
  margin: 0 1em 2em 1em;
  letter-spacing:0;
}
.node.hasMate .person::after{
  content: " ";
  position: absolute;
  left: 50%;
  top: 100%;
  height: 15px;
  border-left: 2px solid #4e4d4d;
  transform: translate3d(-3px, 0, 0);
  z-index: 12;
}
.node.hasMate .person:first-child::after {
  transform: translate3d(-2px, 0, 0);
}
.node.hasMate .person:last-child::after {
  transform: translate3d(-2px, 0, 0);
}
/* 横板 */
.landscape {  transform: translate(-100%, 0) rotate(-90deg);  transform-origin: 100% 0;}
.landscape .person{  transform: rotate(90deg);}
.landscape .extend .extend_handle {transform: rotate(90deg);}