[CSS3] step구성

유동적인 step 디자인

• STEP 1
• STEP 2
• STEP 3
• STEP 4
• STEP 5

• STEP 1
• STEP 2
• STEP 3

	

		

			
STEP 1
			
STEP 2
			
STEP 3
		
	

.select_choice.inset{background-color:#ccc; box-shadow:inset 0 0.1em 0.3em rgba(0,0,0,0.3)}
.step_bar{position:relative;}
.step_bar ul{ display: -webkit-box; -webkit-box-align: center; -webkit-box-pack:justify;}
.step_bar:before {width:100%; height:1px; position: absolute; top: 11px; display:block; content: ""; background: #fff; }
.step_bar ul li {position: relative; padding-top:24px; z-index:100; font-size:0.64em; color:#666; text-align:center;}
.step_bar ul li:after{width:8px; height:8px; display: block; content: ""; clear: both; border:1px solid #fff; border-radius: 500px; background-color:#fff; position: absolute;left: 50%;right: 50%;top:52%;margin-left: -4px; margin-top: -10px;}
.step_bar ul li.on {font-weight:bold; color:#222;}
.step_bar ul li.on:after {border:3px solid #9f8c7b; top:48%;}