*{
    margin: 0;
    padding: 0;

}
body {
    width: 100%;
    height: 100%;
}
html{
    width: 100%;
    height: 100%;
}
h1{
    background-color: rgb(233,224,157);
}
.biggest_box{
    display: flex;
    /*justify-content: center;*/
    /*align-items: center;*/
    /*margin: auto;*/
    width: 100%;
    height:100%;
    /*background-color: black;*/
}
.base_box{
    display: flex;
    /*width: 100%;*/
    /*height: 100%;*/
    /*justify-content: center;*/
    /*align-content: center;*/
    /*align-items: center;*/
    margin: auto;
    /*align-self: safe center;*/
}
.next_order{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: auto;
}
.next_line{
    display: flex;
    align-items: center;
    position: relative;
    /*修改*/
    border-left: 1px solid  rgb(233,224,157);
}
.next_order .next_line:first-child,
.next_order .next_line:last-child{
    border-left: 0 ;

}
.other_title{
    font-size: 16px;
    margin: 8px 30px;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.other_title,
.first_title{
    border: 1px solid;
    color:rgb(0,0,0);
    background-color:  rgb(233,224,157);
    /*padding: 10px 25px;*/
    border-radius: 10px;
    /*text-align: center;*/
    line-height: 180%;
    padding-left: 8px;
    padding-right: 8px;
    /*white-space: nowrap;*/
    /*word-wrap: break-word;*/
}
.first_title{
       font-size: 20px;
    margin: auto;
    margin-right: 51px;
    max-width: 120px;
    position: relative;
    /*display: flex;*/
    /*height: 100%;*/
    /*background-color: #9370DB;*/
    /*设置左边边距，内容放大不会贴边缘*/
    /*margin-left: 10px;*/
}
.h_title{
    margin: auto;
}
/*画线*/
.next_line::before{
    display: block;
    content: "";
    height: 50%;
    width: 51px;
    position: absolute;
    top: 50%;
    /*修改*/
    border-top: 1px solid  rgb(233,224,157);
    /*border-left: 1px solid;*/
    margin-left: -1px;
}
/*如果存在多个下一级 控制第一个连线拐弯*/
.next_line:first-child::before{
    /*修改*/
    border-left: 1px solid  rgb(233,224,157);
    margin-left: 0;
    width: 49px;
    border-radius: 10px 0 0 0;
}
/*最后一个修改属性，向上*/
.next_line:last-child::before{
    top: 0;
    /*修改*/
    border-left: 1px solid  rgb(233,224,157);
    border-top: 0;
    /*修改*/
    border-bottom: 1px solid  rgb(233,224,157);
    margin-left: 0;
    width: 49px;
    border-radius: 0 0 0 10px;
}
/*只有一个孩子的时候单独设置*/
.next_line:only-child::before{
    border-left: 0;
    border-radius: 0;
}
/*向后的连接线*/
.next_order::after{
    display: block;
    content: "";
    height: 50%;
    width: 51px;
    position: absolute;
    top: 50%;
    /*left: 148px;*/
    margin-left: -50px;
    /*修改*/
    border-top: 1px solid  rgb(233,224,157);
}
/*设置后面没内容的不显示连线*/
.next_order:empty::after{
    border: 0;
}
/*设置一级标题后的盒子连接线不显示用标题框所跟的显示*/
.base_box>.next_order::after{
    border: 0;
}
.base_box>.next_order>.next_line>.other_title, .first_title{
    white-space: nowrap;
}
.first_title::after{
    display: block;
    content: "";
    height: 50%;
    width: 52px;
    position: absolute;
    top: 50%;
    /*margin-left: 154px;*/
    left: 100%;
    border-top: 1px solid  rgb(233,224,157);
}