.stepOutsideBox{justify-content:space-around;margin-bottom:2rem}.stepOutsideBox .stepBox{width:calc(100%/var(--stepBarDivWidth));z-index:1}.stepOutsideBox .stepBox__upPart{position:relative}.stepOutsideBox .stepBox__upPart .span{width:90px;height:25px;font-size:1.3rem;font-weight:400;color:#000;border:2px solid #000;border-radius:50px;background-color:var(--spanDefaultColor);transition:all .3s;margin:0 auto;z-index:3;padding:.8rem 0}.stepOutsideBox .stepBox__upPart .span.active{background-color:var(--spanActiveColor);border-color:var(--spanActiveColor);color:#fff}.stepOutsideBox .stepBox__upPart:after{content:"";position:absolute;width:70%;height:3px;top:13px;left:65%;background-color:#000;transition:all .3s;z-index:-1}.stepOutsideBox .stepBox__upPart.active:after{background-color:var(--spanActiveColor);transition:all .3s}.stepOutsideBox .stepBox:last-child .stepBox__upPart:after{content:none}.stepOutsideBox .stepBox__downPart .span{color:#b9b9b9;transition:all .3s}.stepOutsideBox .stepBox__downPart .span.active{color:var(--spanActiveColor)}