@font-face{
    font-family:FZCSJW;
    src:url("../font/FZCSJW.TTF");

}
.steps{
    width: 235px;
    height: 680px;
    box-sizing: border-box;
    border: 1px solid #cccccc;
    border-radius: 10px;
    position: absolute;
    background: rgba(255,255,255,0.7);
    padding: 25px 0 0 30px;
    top: 30px;
    left: 150px;
}

.step_head{
    width: 100%;
    height: 44px;
    margin-bottom: 20px;
}
.step_head p{
    margin-left: 10px;
    height:44px;
    display: inline-block;
    vertical-align:top;
    line-height: 44px;
    font-size:27px;
    color: #cc3333;
    font-family: "FZCSJW";
}
.steps li{
    list-style: none;
    position: relative;
    font-family: "Microsoft YaHei UI";
    font-size: 18px;
    color: #666666;
}
.steps li .text-main{
    width: 40px;
    height: 40px;
    line-height: 35px;
    display: inline-block;
    text-align: center;
    border: 2px solid #cccccc;
    border-radius: 50%;
    color: #666666;
    margin-right: 10px;
}
.steps .text-line{
    content: "";
    width: 2px;
    height: 90px;
    display: block;
    background: #ccc;
    position: relative;
    left: 20px;


}
.steps li .proceed{
    font-size: 22px;
    color: #cc3333;
}

.fillOut{
    color: #999999;
}
.steps li .proceed:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: url("../img/ban.png") no-repeat 100% 100%;
    transform: rotateZ(0deg);
    animation: spanRote 2s linear infinite;
    background-position: right top;
}
@keyframes spanRote {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}