.step-proj {
    width: 317px;
    position: relative;
    /* overflow: scroll; */
}
.downBox{
    width: 25px;
    height: 8px;
    background-color: pink;
    position: absolute;
    bottom: -20px;
    background: url(../../static/editPro/bot.png);
    background-size: 100% 100%;

}
.step-proj .step {
    width: 309px;
    height: 56px;
    /* background-color: rgb(248, 213, 219); */
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    position: relative;
}

/* Top 状态:已完成 开始---------------------------------------------------------------*/
.step-proj .step .complete-one {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/one.png');
    background-size: 100% 100%;
}

/* 已完成状态序号 */
.step-proj .step .complete-num {
    width: 30px;
    height: 30px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 44px;
}

/* 已完成状态第一个序号 */
.step-proj .step .complete-one .complete-num {
    margin-left: 16px;

}

/* 已完成状态标题 */
.step-proj .step .complete-text {
    font-family: Microsoft YaHei UI;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
    margin-left: 47px;
}

/* 已完成状态第一个标题 */
.step-proj .step .complete-one .complete-text {
    margin-left: 61px;
}

.step-proj .step .complete-two {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/two.png');
    background-size: 100% 100%;
}

.step-proj .step .complete-three {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/three.png');
    background-size: 100% 100%;
}

.step-proj .step .complete-four {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/four.png');
    background-size: 100% 100%;
}
/* 已完成状态连接线 */
.step-proj .step .setLine {
    width: 49px;
    height: 22px;
    background-color: pink;
    position: absolute;
    right: -67px;
    top: 17px;
}
.step-proj .step .complete-oneLine{
    background:url('../../static/editPro/lineone.png');
    background-size: 100% 100%;
}
.step-proj .step .complete-twoLine{
    background:url('../../static/editPro/linetwo.png');
    background-size: 100% 100%;
}
.step-proj .step .complete-threeLine{
    background:url('../../static/editPro/linethree.png');
    background-size: 100% 100%;
}

/* Top 状态:已完成  结束----------------------------------------------------------- */



/* Top 状态:进行中  开始----------------------------------------------------------- */
.step-proj .step .processing-one {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/processingOne.png');
    background-size: 100% 100%;
}

.step-proj .step .processing-two {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/processingTwo.png');
    background-size: 100% 100%;
}

.step-proj .step .processing-three {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/processingThree.png');
    background-size: 100% 100%;
}

.step-proj .step .processing-four {
    width: 309px;
    height: 56px;
    /* background-color: pink; */
    display: flex;
    align-items: center;
    background: url('../../static/editPro/processingFour.png');
    background-size: 100% 100%;
}
.step-proj .step .processing-num {
    width: 21px;
    height: 21px;
    background: #FFFFFF;
    border-radius: 50%;
    margin-left: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Microsoft YaHei UI;
    font-weight: 500;
    font-size: 14px;
    color: #B5B5B5;
}

.step-proj .step .processing-text {
    font-family: Microsoft YaHei UI;
    font-weight: 700;
    font-size: 16px;
    color: #71757E;
    margin-left: 47px;
}

/* Top 状态:进行中   结束----------------------------------------------------------- */



/* Top 状态:未操作  开始 ------------------------------------------------------------ */
.step-proj .step .pending {
    width: 309px;
    height: 56px;
    display: flex;
    align-items: center;
    background: url('../../static/editPro/no.png');
    background-size: 100% 100%;
}

.step-proj .step .pending .pending-num {
    width: 21px;
    height: 21px;
    background: #FFFFFF;
    border-radius: 50%;
    margin-left: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Microsoft YaHei UI;
    font-weight: 300;
    font-size: 14px;
    color: #B5B5B5;
}

.step-proj .step .pending .pending-text {
    font-family: Microsoft YaHei UI;
    font-weight: 700;
    font-size: 16px;
    color: #71757E;
    margin-left: 47px;
}
.step-proj .step .no-line{
    background:url('../../static/editPro/lineno.png');
    background-size: 100% 100%;
}
/* Top 状态:未操作  结束 ------------------------------------------------------------ */




/* .step-proj .step:nth-child(1){
    background: url(../../static/editPro/one.png);
    background-size: 100% 100%;
}
.step-proj .step:nth-child(2){
    background: url(../../static/editPro/two.png);
    background-size: 100% 100%;
}

.step-proj .step:nth-child(3){

}
.step-proj .step:nth-child(4){

} */
/* .step-proj .step .no {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-proj .step .complete {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.step-proj .step .processing {
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-light);
}

.step-proj .step .pending {
    border: 1px solid var(--color-disabled);
    color: var(--color-disabled);
} */

.step-proj .step .desc {
    margin-left: 15px;
    width: 150px;
    border: none;
}

.step-proj .step .desc .title {
    margin-top: 8px;
    font-weight: bold;
}

.step-proj .step .pending .title {
    color: var(--color-text-disabled);
}

.step-proj .step .desc .detail {
    margin-top: 10px;
    font-size: 12px;
    width: 100%;
    height: 32px;
    line-height: 16px;
    color: var(--color-note);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.step-proj .step-line {
    position: absolute;
    top: 18px;
    left: 190px;
    width: 150px;
    border-top: 1px solid var(--color-disabled);
}

.step-proj .step-line-complete {
    border-color: var(--color-primary);
}

.step-proj .step-card {
    margin-top: 40px;
    padding: 10px 0;
    /* border: 1px solid var(--color-border); */
    overflow: auto;
}

.step-proj .step-card .step-card-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-proj .step-card .step-card-list .card-proj-edit,
.step-proj .step-card .step-card-list .card-proj-loading,
.step-proj .step-card .step-card-list .card-proj-result,
.step-proj .step-card .step-card-list .card-proj-download,
.step-proj .step-card .step-card-list .card-proj-jump {
    /* border-bottom: 1px solid var(--color-border); */
}

.step-proj .step-card .step-card-list .card-proj-edit:last-child,
.step-proj .step-card .step-card-list .card-proj-loading:last-child,
.step-proj .step-card .step-card-list .card-proj-result:last-child,
.step-proj .step-card .step-card-list .card-proj-download:last-child,
.step-proj .step-card .step-card-list .card-proj-jump:last-child {
    border-bottom: none;
}