/* css step 流程步骤
-----------------------------------------------------------------------------*/
.c-step-box { width: 100%; height: 10rem; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border: 1px solid #ddd; }
.c-step-bar { text-align: center; overflow: hidden; counter-reset: step; }
.c-step-bar li { color: #909090; text-transform: uppercase; font-size: .6rem; float: left; position: relative; padding-top: 1.25rem; }
.step-n2 li { width: 50%; }
.step-n3 li { width: 33.33%; }
.step-n4 li { width: 25%; }
.step-n5 li { width: 20%; }
.step-n6 li { width: 16.66%; }
.c-step-bar li:before { content: counter(step); counter-increment: step; position: absolute; top: 0; left: 50%; width: 1rem; line-height: 1rem; display: inline-block; font-size: .6rem; color: #909090; background: #dcdcdc; border-radius: 50%; margin-left: -.5rem; z-index: 2; }
.c-step-bar li:after { content: ""; width: 100%; height: .1rem; background: #dcdcdc; position: absolute; left: -50%; top: .45rem; z-index: 1; }
.text-up li { padding-bottom: 1.25rem; }
.text-up li:before { top: auto; bottom: 0; }
.text-up li:after { top: auto; bottom: .45rem; }
.c-step-bar li:first-child:after { content: none; }
.c-step-bar li.active { color: #37a1ff }
.c-step-bar li.active:before, .c-step-bar li.active:after { background: #37a1ff; color: #fff; }
.step-bar-icon li { padding-top: 2.25rem; }
.step-bar-icon li:before { content: none; }
.step-bar-icon li:after { height: .15rem; top: .95rem; }
.step-bar-icon li .step-icon { position: absolute; display: box !important; display: -webkit-box !important; ; -webkit-box-orient: vertical; -webkit-box-pack: center; top: 0; left: 50%; width: 2rem; height: 2rem; color: #909090; background: #dcdcdc; display: inline-block; margin-left: -20px; z-index: 2; border-radius: 50%; }
.step-bar-icon li .step-icon i { font-size: 1.2rem; }
.c-step-bar li.active .step-icon { background: #37a1ff; color: #fff; }
.c-step-bar-w { display: table; width: 100%; padding: 0; margin: 0; position: relative }
.c-step-bar-w li { display: table-cell; text-align: center; width: 1%; }
.c-step-bar-w li .step { position: relative; display: inline-block; width: 2rem; height: 2rem; border: 4px solid #ced1d6; color: #546474; border-radius: 50%; background-color: #FFF; z-index: 2; line-height: 40px; text-align: center; vertical-align: middle; }
.c-step-bar-w li:before { display: block; content: ""; width: 100%; height: .05rem; font-size: 0; overflow: hidden; border-top: 4px solid #ced1d6; position: relative; top: 1.35rem; z-index: 1 }
.txt-up li { position: relative; padding-top: 1.5rem; }
.txt-up li .title { width: 100%; text-align: center; position: absolute; top: 0; left: 0; }
.c-step-bar-w li:last-child:before { max-width: 50%; width: 50% }
.c-step-bar-w li:first-child:before { max-width: 51%; left: 50% }
.c-step-bar-w li.active:before, .c-step-bar-w li.complete:before, .c-step-bar-w li.active .step, .c-step-bar-w li.complete .step { border-color: #37a1ff }
.c-step-bar-w li.complete .step:before { display: block; content: ""; position: absolute; top: .55rem; left: .55rem; width: .8rem; height: .45rem; border-left: 4px solid #87ba21; border-bottom: 4px solid #87ba21; text-align: center; z-index: 3; color: #87ba21; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.c-step-bar-w li .title { display: block; margin-top: .2rem; max-width: 100%; color: #949ea7; z-index: 100; text-align: center; table-layout: fixed; word-wrap: break-word; }
.c-step-bar-w li.complete .title, .c-step-bar-w li.active .title { color: #2b3d53; }
.c-step-bar-w li .iconfont { color: #37a1ff; font-size: 1.4rem !important; }
.c-step-bar-w li .iconfont { color: #ced1d6; font-size: 1.4rem !important; }
.c-step-bar-w li.active .iconfont, .c-step-bar-w li.complete .iconfont, .c-step-bar-w li.active .step .iconfont, .c-step-bar-w li.complete .step .iconfont { color: #37a1ff; }
/* css step
-----------------------------------------------------------------------------*/
.c-step-box { width: 100%; height: 10rem; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border: 1px solid #ddd; }
.c-step-bar { text-align: center; overflow: hidden; counter-reset: step; }
.c-step-bar li { color: #909090; text-transform: uppercase; font-size: .6rem; float: left; position: relative; padding-top: 1.25rem; }
.step-n2 li { width: 50%; }
.step-n3 li { width: 33.33%; }
.step-n4 li { width: 25%; }
.step-n5 li { width: 20%; }
.step-n6 li { width: 16.66%; }
.c-step-bar li:before { content: counter(step); counter-increment: step; position: absolute; top: 0; left: 50%; width: 1rem; line-height: 1rem; display: inline-block; font-size: .6rem; color: #909090; background: #dcdcdc; border-radius: 50%; margin-left: -.5rem; z-index: 2; }
.c-step-bar li:after { content: ""; width: 100%; height: .1rem; background: #dcdcdc; position: absolute; left: -50%; top: .45rem; z-index: 1; }
.text-up li { padding-bottom: 1.25rem; }
.text-up li:before { top: auto; bottom: 0; }
.text-up li:after { top: auto; bottom: .45rem; }
.c-step-bar li:first-child:after { content: none; }
.c-step-bar li.active { color: #37a1ff }
.c-step-bar li.active:before, .c-step-bar li.active:after { background: #37a1ff; color: #fff; }
.step-bar-icon li { padding-top: 2.25rem; }
.step-bar-icon li:before { content: none; }
.step-bar-icon li:after { height: .15rem; top: .95rem; }
.step-bar-icon li .step-icon { position: absolute; display: box !important; display: -webkit-box !important; ; -webkit-box-orient: vertical; -webkit-box-pack: center; top: 0; left: 50%; width: 2rem; height: 2rem; color: #909090; background: #dcdcdc; display: inline-block; margin-left: -20px; z-index: 2; border-radius: 50%; }
.step-bar-icon li .step-icon i { font-size: 1.2rem; }
.c-step-bar li.active .step-icon { background: #37a1ff; color: #fff; }
.c-step-bar-w { display: table; width: 100%; padding: 0; margin: 0; position: relative }
.c-step-bar-w li { display: table-cell; text-align: center; width: 1%; }
.c-step-bar-w li .step { position: relative; display: inline-block; width: 2rem; height: 2rem; border: 4px solid #ced1d6; color: #546474; border-radius: 50%; background-color: #FFF; z-index: 2; line-height: 40px; text-align: center; vertical-align: middle; }
.c-step-bar-w li:before { display: block; content: ""; width: 100%; height: .05rem; font-size: 0; overflow: hidden; border-top: 4px solid #ced1d6; position: relative; top: 1.35rem; z-index: 1 }
.txt-up li { position: relative; padding-top: 1.5rem; }
.txt-up li .title { width: 100%; text-align: center; position: absolute; top: 0; left: 0; }
.c-step-bar-w li:last-child:before { max-width: 50%; width: 50% }
.c-step-bar-w li:first-child:before { max-width: 51%; left: 50% }
.c-step-bar-w li.active:before, .c-step-bar-w li.complete:before, .c-step-bar-w li.active .step, .c-step-bar-w li.complete .step { border-color: #37a1ff }
.c-step-bar-w li.complete .step:before { display: block; content: ""; position: absolute; top: .55rem; left: .55rem; width: .8rem; height: .45rem; border-left: 4px solid #87ba21; border-bottom: 4px solid #87ba21; text-align: center; z-index: 3; color: #87ba21; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.c-step-bar-w li .title { display: block; margin-top: .2rem; max-width: 100%; color: #949ea7; z-index: 100; text-align: center; table-layout: fixed; word-wrap: break-word; }
.c-step-bar-w li.complete .title, .c-step-bar-w li.active .title { color: #2b3d53; }
.c-step-bar-w li .iconfont { color: #37a1ff; font-size: 1.4rem !important; }
.c-step-bar-w li .iconfont { color: #ced1d6; font-size: 1.4rem !important; }
.c-step-bar-w li.active .iconfont, .c-step-bar-w li.complete .iconfont, .c-step-bar-w li.active .step .iconfont, .c-step-bar-w li.complete .step .iconfont { color: #37a1ff; }