.tree-table p{width:20%;min-width:max-content;padding:15px 0;border-radius:0;box-sizing:border-box;}
.tree-table .tree-top p{}
.tree-table .tree-top p:first-of-type{margin:0 auto 5px;font-weight:700;background:#3b2772;color:#fff;}
.tree-table .tree-top p:last-of-type{color:#fff;background:#002746 ;}

.tree-middle{transform:translateY(-115px);position:relative;z-index:1;}
.tree-middle .part{display:inline-block;width:calc(18% - 10px);margin:0 16px 0 0;vertical-align:top;position:relative;z-index:1;}
.tree-middle .part p{width:100%;}
.tree-middle .part p:first-of-type{margin:0 0 5px;font-weight:700;background:#8273ae;color:#fff;position:relative;}
.tree-middle .part p:last-of-type{background:#fff;border:1px solid #ccc;}
.tree-middle .tree-middle-branch{display:inlaine-block;width:18%;float:right;position:relative;z-index:1;}
.tree-middle .tree-middle-branch p{width:100%;}
.tree-middle .tree-middle-branch p:first-of-type{margin:0 0 5px;font-weight:700;background:#8273ae;color:#fff;position:relative;;}
.tree-middle .tree-middle-branch p:last-of-type{padding:10px 0;background:#fff;border:1px solid #ccc;}
.tree-middle .tree-middle-branch p span{display:block;padding:4px 0;}
.tree-middle .tree-middle-branch p span:first-of-type:before{content:"간사";display:inline-block;margin:0 5px 0 -35px;}

.tree-table .tree-bottom{margin:0 auto 30px;}
.tree-bottom .part{display:inline-block;vertical-align:top;}
.tree-bottom .part.first{width:36%;}
.tree-bottom .part.last{width:18%;transform:translateX(350%);position:relative;z-index:1;}
.tree-bottom .part p{width:100%;}
.tree-bottom .part p:first-of-type{margin:0 0 5px;font-weight:700;background:#0065b3;color:#fff;position:relative;}
.tree-bottom .part div{text-align:center;}
.tree-bottom .part div span{display:block;padding:8px 0;background:#e7e0f0;}
.tree-bottom .part div ul{padding:20px 0;margin:0 0 5px;background:#fff;border:1px solid #ccc;border-top:none;}
.tree-bottom .part div ul li{display:inline-block;width:30%;line-height:30px;}

.tree-table .branch .part{width:calc(25% - 33px);margin:0 15px;}
.tree-table .branch .part.last{margin:0;}
.tree-table .branch .part p{}
.tree-table .branch .part > p:first-of-type{margin:0 0 5px;font-weight:700;background:#f2f2f2;border:1px solid #333;color:#333;}
.tree-table .branch .part > div{}
.tree-table .branch .part > div ul{padding:10px 0;background:#fff;border:1px solid #ccc;}
.tree-table .branch .part > div ul li{line-height:30px;}
.tree-table .branch .part > div ul li span{display:inline-block;margin:0 5px 0 0;font-size:14px;}
.tree-table .branch .part > div p{min-width:auto;padding:15px;background:#f9f9f9;border:1px solid #ccc;border-top:none;word-break:keep-all;}
.tree-table .branch .part .part-child{}
.tree-table .branch .part .part-child .part{width:100%;margin:10px 0 0;}

.tree-table .tree-top:after{height:112px;}
.tree-table .tree-middle:after{content:"";position:absolute;top:28px;left:10%;width:80%;height:1px;background:#aaa;}
.tree-middle .part p:first-of-type:after,.tree-bottom .part p:first-of-type:after,.tree-middle .tree-middle-branch p:first-of-type:after{content:"";position:absolute;left:100%;top:50%;transform:translate(-6px,-50%);width:6px;height:6px;border:3px solid #fff;border-radius:50%;background:#002746;z-index:1;}
.tree-bottom .part.last p:first-of-type:after,.tree-middle .tree-middle-branch p:first-of-type:after{left:0;}
.tree-table .tree-bottom:after{top:25px;right:auto;left:50%;z-index:0;}
.tree-table .branch .part:before{content:"";position:absolute;top:-23px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:#fff;border:1px solid #aaa;z-index:1;box-shadow:0 0 5px rgba(0,0,0,.2);}
.tree-table .branch .bottom-line:after{width:calc(80% + -35px);}
.tree-table .branch .part-child .part:after{display:none;}
.tree-table .branch .part-child .part:before{display:none;}


@media screen and (max-width:1024px){
	.tree-bottom .part div ul li{font-size:14px;}
}

@media screen and (max-width:768px){
	
	.tree-table p{padding:10px 0;}
	
	.tree-table .tree-top{margin:0 auto 20px;}
	.tree-middle{transform:none;text-align:right;}
	.tree-table .tree-bottom{margin:15px auto;text-align:right;}
	.tree-table .branch{text-align:right;position:relative;}
	.tree-table .tree-top p{width:100%;}
	.tree-table .tree-top p:first-of-type{margin:0;}
	
	.tree-middle .part{width:90%;margin:0 0 15px 0;}
	.tree-middle .part p:first-of-type{margin:0;}
	.tree-middle .tree-middle-branch{width:90%;float:none;}
	.tree-middle .tree-middle-branch p:first-of-type{margin:0;}
	.tree-bottom .part{width:90% !important;}
	.tree-bottom .part.last{transform:none;margin:15px 0 0 0;}
	.tree-bottom .part p:first-of-type{margin:0;}
	.tree-bottom .part div ul{margin:0;padding:10px 0;}
	.tree-table .branch .part{width:80%;margin:0 0 15px 0;}
	.tree-table .branch .part > p:first-of-type{margin:0;}
	.tree-table .branch .part > div ul{text-align:center;}
	.tree-table .branch .part > div p{padding:10px;}
	
	.tree-table .branch .bottom-line{display:none;}
	
	.tree-table .tree-top:after{left:2%;height:53px;}
	.tree-middle .part p:first-of-type:after, .tree-bottom .part p:first-of-type:after, .tree-middle .tree-middle-branch p:first-of-type:after{left:0;}
	.tree-middle .part p:first-of-type:before, .tree-bottom .part p:first-of-type:before, .tree-middle .tree-middle-branch p:first-of-type:before{content:"";position:absolute;right:calc(100% + 5px);top:50%;width:8%;height:1px;background:#aaa;}
	.tree-table .tree-bottom:after{display:none;}
	.tree-table .branch:after{content:"";position:absolute;top:-33px;left:40px;width:1px;height:359px;background:#aaa;}
	.tree-table .branch .part:before{top:16px;left:0;}
	.tree-table .branch .part:after{left:auto;right:100%;bottom:auto;top:22px;width:calc(25% - 40px);height:1px;}
}

@media screen and (max-width:640px){
	.tree-table p{font-size:14px;}
	
	.tree-table .branch .part > div ul{font-size:14px;}
	.tree-middle .tree-middle-branch p span:first-of-type:before{margin:0 5px 0 -30px;}
	.tree-table .branch:after{height:344px;}
}

@media screen and (max-width:480px){
	
	.tree-bottom .part div ul li{width:48%;}
	.tree-middle .part p:first-of-type:before, .tree-bottom .part p:first-of-type:before, .tree-middle .tree-middle-branch p:first-of-type:before{right:calc(100% + 4px);}
	
	.tree-table .branch:after{left:5%;top: -32px;}
	.tree-table .branch .part:after{width:calc(20% - 5px);}
}