@charset "utf-8";

/* 관련부서 > 체육부 */
.tree-table {width: 100%; text-align: justify;padding: 0 0 40px 0;}
.tree-table:after {width: 100%; display: inline-block; content: '';}
.tree-table .tree-top {position:relative; width: 200px; margin:0 auto;background:#005bac;border-radius: 5px; text-align: center; color: #fff; font-size: 18px; padding: 10px 0}
.tree-table .tree-top:after {content: '';width: 1px;height:38px;background: #ccc;position: absolute;top:44px;left: 50%;}
.bottom-line {width: 78%; margin:0 auto; height: 1px; background: #ccc; margin-top:37px}
.tree-table .branch {position: relative; width: 22%; display: inline-block; text-align: center; vertical-align: top; margin-top:40px;}
.tree-table .branch:after {content: ''; width: 1px; height: 40px; background: #ccc; position: absolute; top:-40px; left: 50%}
.tree-table .branch p {border-radius: 5px; padding: 10px 0; margin-bottom: 10px;border:1px solid #ccc}
.tree-table .branch p > a {display: block;width:100%;height:100%}
.tree-table p.top {background:#3c404c;border:0;color:#fff}

.tree-table .tree-bottom{width: 100%;text-align: justify;margin: 35px 0 0 0;}
.tree-table .tree-bottom:after{width:100%;display:inline-block;content:'';}
.tree-table .branch-top{position: relative;width: 22%;margin: 0 auto;background: #10569e;border-radius: 5px;text-align: center;color: #fff;font-size: 18px;padding: 10px 0;display: inline-block;margin: auto 97px;}
.tree-table .branch-top.first:after{content: "";display: block;width: 78%;background-color: #cdcdcd;position: absolute;height: 1px;top: 50%;right: -78%;}
.tree-table .branch-top.second:after{content: "";display: block;width: 78%;background-color: #cdcdcd;position: absolute;height: 1px;top: 50%;left: -78%;}


@media screen and (max-width:768px) {
  /* 관련부서 > 체육부 */
  .tree-box > p {width:auto}
  .tree-list li {box-sizing: border-box}
  .tree-list li:after {width: 2px;height: 20px;background: #ccc;position: absolute;top:36px;left: 50%}
  .tree-table .tree-top {width: 80%; float: right; margin:0;}
  .tree-table .tree-top:after {width: 15%; height: 1px; top:43%; left:-15%}
  .tree-table .branch {width:80%; display: inherit; float: right}
  .tree-table .branch:after {left:-15%;height: 343%;top: -65px;}
  .tree-table .last:after {height:0%;}
  .bottom-line {background: #fff}
  .tree-table p.top {position: relative;}
  .tree-table p.top:after {position: absolute; content: ''; height: 1px; width: 15%; background: #ccc;top: 50%;left: -15%;}
  .bottom-line{display:none;}

  .tree-table .tree-bottom{width: 80%;display: inherit;float: right;}
  .tree-table .branch-top{font-size:16px;width: 100%;margin: 0 auto;}
  .tree-table .branch-top.second{margin:15px 0 0 0;}
  .tree-table .branch-top.first:after{width:15%;left: -15%;}
  .tree-table .branch-top.second:after{width:15%;left: -15%;}
}