img{max-width: 100%}
*{margin: 0px; padding: 0px; font-weight: normal; box-sizing: border-box; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box}

.backlink-box{width: 1170px; margin: 0 auto}

.backlink-steps{margin: 30px 0; position: relative}
.backlink-steps h2{color: #2C3F45; font-size: 34px; font-weight: bold; text-align: center; padding-bottom: 18px; word-spacing: 5px}
.backlink-steps p{color: #5D7A83; font-size: 16px; text-align: center}
.backlink-steps article{width: 20%; margin: 35px 0 0 6%; float: right; position: relative}
.backlink-steps .step-four{margin-left: 0}
.backlink-steps article span{width: 130px; height: 130px; background-color: #fff; position: relative; display: block; margin: 0 auto; border:5px solid #DCE4E7; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%}
.backlink-steps article span i{display: block; margin: 0 auto; position: relative}
.backlink-steps .step-one span i{background-position: -1px -106px;width: 82px;height: 56px; top: 19px; color: #A52A2A}
.backlink-steps .step-two span i{background-position: -2px -166px;width: 108px;height: 90px; top: 20px; color: #A52A2A}
.backlink-steps .step-three span i{background-position: -1px -258px;width: 45px;height: 70px; top: 20px; color: #A52A2A}
.backlink-steps .step-four span i{background-position: -2px -332px;width: 92px;height: 84px; top: 20px; color: #5d7a83}
/* .backlink-steps:after{content: '.'; display: block; height: 0; line-height: 0; visibility: hidden; clear: both} */
.backlink-steps article h6{text-align: center; font-size: 17px; color: #48595E; line-height: 26px; padding-top: 15px}

.backlink-steps article span:before{position: absolute; text-align: center; font-family: "Yekan"; font-size: 20px;  width: 30px; height: 30px; line-height: 22px; z-index: 1000; background-color: #FD7070; color: #fff; border: 3px solid #EE4747; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%}
.backlink-steps .step-one span:before{content: '1'; left: -3px; bottom: 3px}
.backlink-steps .step-two span:before{content: '2';left: -14px; bottom: 67px}
.backlink-steps .step-three span:before{content: '3';right: -16px; bottom: 32px}
.backlink-steps .step-four span:before{bottom: 30px; content: "4"; right: -17px}

.backlink-steps article:after{position: absolute; content: ''; background: url('/images/bars.png') no-repeat 0 0 transparent; z-index: 100}
.backlink-steps .step-one:after{background-position: -10px -1px; width: 181px;height: 61px; left: -126px;  top: 57px}
.backlink-steps .step-two:after{background-position: -2px -65px; width: 193px;height: 70px; left: -120px; top: 31px}
.backlink-steps .step-three:after{background-position: -5px -140px; width: 192px;height: 59px;left: -138px;top: 32px}

.backlink-steps-res{ display: none; width: 100%; margin: 35px 0; text-align: center; padding-bottom: 50px}
.backlink-steps-res article{width: 50%; margin-top: 35px; position: relative; float: right;}
.backlink-steps-res h2{font-size: 24px}
.backlink-steps-res article span{width: 130px; height: 130px; background-color: #fff; position: relative; display: block; margin: 0 auto 15px; border:5px solid #DCE4E7; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%}
.backlink-steps-res article span i{display: block; margin: 0 auto; position: relative}
.backlink-steps-res .step-one-res span i{background-position: -1px -106px;width: 82px;height: 56px; top: 19px; color: #A52A2A}
.backlink-steps-res .step-two-res span i{background-position: -2px -166px;width: 92px;height: 90px; top: 20px; color: #A52A2A}
.backlink-steps-res .step-three-res span i{background-position: -1px -258px;width: 45px;height: 70px; top: 20px; color: #A52A2A}
.backlink-steps-res .step-four-res span i{background-position: -2px -332px;width: 92px;height: 84px; top: 20px; color: #5d7a83}
.backlink-steps-res article h6{font-size: 15px; line-height: 25px}

@media screen and (max-width : 1200px) {
	.backlink-box{width: 100%; padding: 0 25px}
	.backlink-steps .step-one:after,.backlink-steps .step-two:after,.backlink-steps .step-three:after,.backlink-steps .step-four:after{background: none}
	.backlink-steps .step-one span:before,.backlink-steps .step-two span:before,.backlink-steps .step-three span:before,.backlink-steps .step-four span:before{bottom: auto; left: -7px; right: unset}
}
@media screen and (max-width : 960px) {
	.backlink-steps{display: none}
	.backlink-steps-res{display: block}
}
@media screen and (max-width : 820px) {
	#nav-icon{display: block}
	.backlink-steps-res article{width: 100%; float: none}
}