.acc-step {
	padding: 20px;
}

.acc-step div {
	display: block;
	margin: 0 auto;
	width: 984px;
}

.acc-step div ul {
	padding-right: 12px;
}

.acc-step div ul:after {
	content: "";
	display: block;
	clear: both;
}

.acc-step div ul li {
	position: relative;
	float: left;
	padding: 18px 0 0 6px;
	box-sizing: border-box;
	width: 16.6%;
	height: 50px;
	color: #fff;
	font-size: 14px;
	text-align: center;
}

.acc-step div ul li:before {
	content: "STEP";
}

.acc-step div ul li:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 100%;
}

.acc-step div ul li.step1,
.acc-step div ul li.step3,
.acc-step div ul li.step5 {
	background: #C9CACA;
}

.acc-step div ul li.step1:after,
.acc-step div ul li.step3:after,
.acc-step div ul li.step5:after {
	background-image: url(/tools/designer/images/sprites/pc.png);
	background-position: -18px -34px;
	width: 14px;
	height: 50px;
}

.acc-step div ul li.step2,
.acc-step div ul li.step4,
.acc-step div ul li.step6 {
	background: #DCDDDD;
}

.acc-step div ul li.step2:after,
.acc-step div ul li.step4:after,
.acc-step div ul li.step6:after {
	background-image: url(/tools/designer/images/sprites/pc.png);
	background-position: -36px -34px;
	width: 14px;
	height: 50px;
}

.acc-step div ul li.active {
	background: #0069AF;
}

.acc-step div ul li.active:after {
	background-image: url(/tools/designer/images/sprites/pc.png);
	background-position: 0px -34px;
	width: 14px;
	height: 50px;
}

@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3020833333333333), only screen and (min-width: 768px) and (min-resolution: 125dpi), only screen and (min-width: 768px) and (min-resolution: 1.3dppx) {

.acc-step div ul li.step1:after,
.acc-step div ul li.step3:after,
.acc-step div ul li.step5:after {
	background-image: url(/tools/designer/images/sprites/pc@2x.png);
	background-position: -16px -32px;
	background-size: 112px 104px;
	width: 14px;
	height: 50px;
}

.acc-step div ul li.step2:after,
.acc-step div ul li.step4:after,
.acc-step div ul li.step6:after {
	background-image: url(/tools/designer/images/sprites/pc@2x.png);
	background-position: -32px -32px;
	background-size: 112px 104px;
	width: 14px;
	height: 50px;
}

.acc-step div ul li.active:after {
	background-image: url(/tools/designer/images/sprites/pc@2x.png);
	background-position: 0px -32px;
	background-size: 112px 104px;
	width: 14px;
	height: 50px;
}

}

@media screen and (max-width: 1023px) {

.acc-step div {
	margin: 0;
	width: auto;
}

}

@media screen and (max-width: 767px) {

.acc-step {
	padding: 10px;
}

.acc-step div ul {
	padding-right: 4px;
}

.acc-step div ul li {
	padding: 14px 0 0 2px;
	box-sizing: border-box;
	height: 40px;
}

.acc-step div ul li:before {
	content: "";
}

.acc-step div ul li.step1:after,
.acc-step div ul li.step3:after,
.acc-step div ul li.step5:after {
	background-image: url(/tools/designer/images/sprites/sp@2x.png);
	background-position: -7px -37px;
	background-size: 69px 77px;
	width: 5px;
	height: 40px;
}

.acc-step div ul li.step2:after,
.acc-step div ul li.step4:after,
.acc-step div ul li.step6:after {
	background-image: url(/tools/designer/images/sprites/sp@2x.png);
	background-position: -14px -37px;
	background-size: 69px 77px;
	width: 5px;
	height: 40px;
}

.acc-step div ul li.active:after {
	background-image: url(/tools/designer/images/sprites/sp@2x.png);
	background-position: 0px -37px;
	background-size: 69px 77px;
	width: 5px;
	height: 40px;
}

}