.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:38px;height:38px;font-size:1.3rem;font-weight:400;color:#ccc;border:2px solid #ccc;border-radius:50%;background-color:var(--spanDefaultColor);transition:all .3s;margin:0 auto;z-index:3}.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:16px;left:65%;background-color:#ccc;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)}