.profile_frame{
    width: 100%;
    height: 9.3rem;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 -9rem;
}
.frame-list{
    /*width:12rem;*/
    margin: 1rem auto;
}
.frame-list .name{
    margin: 1rem 0 0.8rem;
}
.frame-list .name .title{
    font-size:0.28rem;
    font-weight: bold;
    color: #333;
}
.frame-list .name .text{
font-size: 0.26rem;
    color: #333;
}
.tree{
    box-sizing: border-box;
    padding-right: 1.3rem;
}
.tree ul {
    padding-top: 20px; position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}
.tree li a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
/*.tree li a:hover, .tree li a:hover ul li a {*/
    /*background: #c8e4f8; color: #000; border: 1px solid #94a0b4;*/
/*}*/
/*Connector styles on hover*/
/*.tree li a:hover ul li::after,*/
/*.tree li a:hover ul li::before,*/
/*.tree li a:hover ul::before,*/
/*.tree li a:hover ul ul::before{*/
    /*border-color:  #94a0b4;*/
/*}*/
.tree .three-li>a{
    width: 0.4rem;
    height: 1.3rem;
    border-radius: 5px ;
    background-color: #333;
    color: #fff;
    padding: 0.12rem 0.1rem;
    box-sizing: border-box;
}
.tree .one-li>a{
    width: 2.92rem;
    height: 0.92rem;
    background-color: #d90909;
padding-top: 0.2rem;
    box-sizing: border-box;
    margin-left: 1rem;
}
.tree .one-li>a div , .tree .two-li>a div{
    font-size: 0.12rem;
    color: #fff;
}
.tree .one-li>a div:first-child ,.tree .two-li>a div:first-child{
    font-size: 0.16rem;
}
.tree .one-li>ul::before{
    content: '';
    position: absolute; top: 0; left: 53.75%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}
.tree .two-li>a{
    width: 1.38rem;
    height: 0.8rem;
    background-color: #d90909;
    padding-top: 0.2rem;
    box-sizing: border-box;
}
.tree .two-li>.none{
    width: 0.6rem;
    margin-left: 46px;
    background-color:transparent;
    border: none;
    border-radius: 0;
    border-left: 1px solid #ccc;
}
.tree .none::after {
    right: auto;
    left: 50%;
    margin-left: -7px;
    width: 1.5rem;
    border-left: 1px solid #ccc;
}
.tree .none ul::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 46.5%;
    border-left: 1px solid #ccc;
    width: 0;
    height: 26px;
}
.only-two li:first-child{
    margin-left: 20px;
}
.jiagou{

}
.jiagou img{
    width: 100%;
}