/*bar*/
.bar{ position: relative; height: 80px;}
ul li{list-style: none;}
.step-bar{
    position: absolute;
    top: 10px;
    width: 100%;
    height: 15px;
    border:1px solid #ddd;
    border-top: 2px solid #c2c2c2;
    background: #eee;
    border-radius: 30px;
}
.step li{
    position: absolute;
    left: 20%;
    text-align: center;
    transform: translateX(-50%);
}
.step li:nth-of-type(2n){
    left: 40%;
}
.step li:nth-of-type(3n){
    left: 60%;
}
.step li:nth-of-type(4n){
    left: 80%;
}
.step li span {
    background: #3498db;
    border-radius: 100%;
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-weight: 800;
    padding: 3px;
}
.step li span:after{
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: rgba(52, 152, 219, .3);
    width: 41px;
    height: 41px;
    border-radius: 100%;
}
.step li p{
    margin-top: 10px;
    font-weight: 600;
}
.step-bar div{
    position: absolute;
    top:-2px;
    background:rgba(52, 152, 219, .7);
    height:15px;
    border-radius: 30px 30px 30px 30px;
}
.step-bar .step_1{
    animation:mystep1 5s;
    width: 20%;
    -moz-animation:mystep1 1s; /* Firefox */
    -webkit-animation:mystep1 1s; /* Safari and Chrome */
    -o-animation:mystep1 1s; /* Opera */
}
.step-bar .step_2{
    animation:mystep2 1s;
    width: 40%;
    border-radius: 30px 30px 30px 30px;
    -moz-animation:mystep2 1s; /* Firefox */
    -webkit-animation:mystep2 1s; /* Safari and Chrome */
    -o-animation:mystep2 1s; /* Opera */
}
.step-bar .step_3{
    animation:mystep3 1s;
    width: 60%;
    border-radius: 30px 30px 30px 30px;
    -moz-animation:mystep3 1s; /* Firefox */
    -webkit-animation:mystep3 1s; /* Safari and Chrome */
    -o-animation:mystep3 1s; /* Opera */
}
.step-bar .step_4{
    animation:mystep4 1s;
    width: 100%;
    border-radius: 30px 30px 30px 30px;
    -moz-animation:mystep4 1s; /* Firefox */
    -webkit-animation:mystep4 1s; /* Safari and Chrome */
    -o-animation:mystep4 1s; /* Opera */
}

@keyframes mystep1
{
from {width: 0}
to {width: 20%;}
}
@keyframes mystep2
{
from {width: 0%}
to {width: 40%;}
}
@keyframes mystep3
{
from {width: 0%}
to {width: 60%;}
}
@keyframes mystep4
{
from {width: 0%}
to {width: 100%;}
}