我是这里的新手，我想寻求帮助来生成此组织结构图，如下图所示，使用HTML和CSS。我已经尝试了几天，但仍然无法制作下图所示的组织结构图。

这是我的编码。这是我第一次尝试使用编码制作组织结构图。我仍然找不到解决方法。

Untitled Document

.jobtitlemain {

position:relative;

width:200px;

height:100px;

line-height:40px;

border:2px solid #000;

margin-bottom:50px;

text-align:center;

margin-left:auto;

margin-right:auto;

}

.jobtitle {

position:absolute;

width:100px;

height:40px;

line-height:40px;

border:2px solid #000;

margin-bottom:50px;

text-align:center;

}

.toplevel {

position:relative;

width:550px;

height:150px;

border:2px solid #000;

border-bottom:none;

margin-left:auto;

margin-right:auto;

}

.toplevel2 {

position:relative;

width:150px;

height:0px;

border:2px solid #000;

border-bottom:none;

margin-left:70px;

margin-right:auto;

margin-top:-70px;

}

.toplevel3 {

position:relative;

width:150px;

height:0px;

border:2px solid #000;

border-bottom:none;

margin-left:70px;

margin-right:auto;

margin-top:70px;

}

.toplevel4 {

position:relative;

width:150px;

height:0px;

border:2px solid #000;

border-bottom:none;

margin-left:-70px;

margin-right:auto;

margin-top:-70px;

}

.toplevel5 {

position:relative;

width:150px;

height:0px;

border:2px solid #000;

border-bottom:none;

margin-left:70px;

margin-right:auto;

margin-top:-70px;

}

.secondlevel {

position:absolute;

top:114px;

margin-left:-150px;

}

.secondlevelright {

position:relative;

top:94px;

margin-left:150px;

}

.connector {

bottom:-52px;

height:50px;

border-left:2px solid #000;

}

.connectorlong {

bottom:-72px;

height:70px;

border-left:2px solid #000;

}

.centre {position:absolute;left:100px;}

.centre1 {position:absolute;left:100px;}

.centre2 {position:absolute;right:10px;}

.left {position:absolute;left:50px;top:20px;}

.right {position:absolute;left:250px;top:20px;}

.right2 {position:absolute;left:100px;top:20px;}

.offset {margin-top:90px;margin-left:50px;}