* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.org-chart {
  height: 670px;
}

body {
  font-family: "Microsoft Yahei", sans-serif;
  padding: 20px;
}

.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.level {
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
  position: relative;
}
.level::before {
  content: '';
  width: 0;
  height: 50px;
  border-left: 1px solid #E7E7EC;
  position: absolute;
  top: 100%;
  left: 50%;
}
.level.level-line::after {
  content: '';
  width: 863px;
  height: 0;
  border-top: 1px solid #E7E7EC;
  position: absolute;
  top: 180px;
  left: -342px;
}
.level.level-4 {
  margin-bottom: 200px;
}
.level.level-4::before {
  height: 288px;
}

.level-left {
  position: absolute;
  right: 100%;
}
.level-left::before {
  content: '';
  width: 20px;
  height: 0;
  border-top: 1px solid #E7E7EC;
  position: absolute;
  top: 22px;
  left: 100%;
  transform: translateX(-10px);
}

.level-right {
  position: absolute;
  left: 100%;
}

.level-right::before {
  content: '';
  width: 20px;
  height: 0;
  border-top: 1px solid #E7E7EC;
  position: absolute;
  top: 22px;
  right: 100%;
  transform: translateX(10px);
}

.level-bottom {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  display: flex;
}

.level-bottom::before {
  content: '';
  width: 610px;
  height: 0;
  border-top: 1px solid #E7E7EC;
  position: absolute;
  left: 103px;
  top: -63px;
}

.level-b-c {
  position: absolute;
  left: 100%;
}
.level-b-c::before {
  content: '';
  width: 95px;
  height: 0;
  border-top: 1px solid #E7E7EC;
  position: absolute;
  top: 22px;
  right: 100%;
  transform: translateX(10px);
}
.level-b-c.level-b-c-1 {      
  top: 50px;
}
.level-b-c.level-b-c-2 {      
  top: 100px;
}

.level-leaf {
  display: flex;
  position: relative;
}

.diff {
  top: 100%;
  left: 600px;
}
.diff::before {
  border-top: 1px dashed #E7E7EC;
  width: 556px;
  top: -22px;
  right: 64px
}

.vertical {
  display: flex;
  align-items: flex-start;
}

.vertical .node-vertical {
  writing-mode: vertical-lr;
}

.node {
  border: 1px solid #E7E7EC;
  padding: 10px;
  margin: 0 10px;
  text-align: center;
  min-width: 150px;
  position: relative;
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 0 0 #E7E7EC;
  /*  */
}

.node-vertical  {
  border: 1px solid #E7E7EC;
  padding: 10px;
  margin: 0 10px;
  text-align: center;
  position: relative;
  border-radius: 5px;
}
.node-vertical::before {
  content: '';
  width: 0;
  height: 33px;
  border-left: 1px dashed #E7E7EC;
  position: absolute;
  top: -33px;
  right: 50%;
  /* transform: translateX(10px); */
}

.node-leaf {
  border: 1px solid #E7E7EC;
  padding: 10px;
  margin: 0 10px;
  text-align: center;
  min-width: 150px;
  position: relative;
  white-space: nowrap;
  text-align: center;
}
.node-leaf.no-b {
  border: none;
  padding: 0;
}
.node-leaf::before {
  content: '';
  height: 63px;
  width: 0;
  border-left: 1px solid #E7E7EC;
  position: absolute;
  top: -63px;
  left: 50%;
}

.node.dashed {
  border-style: dashed;
}

.bg-blue {
  background: #007AFF;
  color: #fff;
  box-shadow: 0 0 #E7E7EC;
  border: none;
}

.bg-gray {
  box-shadow: 0 0 5px #E7E7EC;
  border: none;
  background: #F7F8FA;
}

.bg-orange {
  background: #FDEACC;
  box-shadow: 0 0 5px #FDEACC;
  border: none;
}

.bg-green {
  background: #129F8C;
  box-shadow: 0 0 5px #CCEAE7;
  color: #fff;
  cursor: pointer;
}

.bg-lightBlueGreen {
  background: #DAEFEA;
  box-shadow: 0 0 5px #CCEAE7;
}

.text-small {
  font-size: 10px;
}

.ml20 {
  margin-left: 20px;
}