.web-icon { display: block; margin: 10px auto 20px; width: 106px; height: 106px; background: url(/assets/images/web-icon.png) no-repeat left top; }
.web-icon2 { background-position: -106px top; }
.web-icon3 { background-position: -212px top; }
.web-icon4 { background-position: -318px top; }

.process1 { position: relative; background: url(/assets/images/process1-bg.png) repeat-y center top; background-attachment: fixed; }
.process1 .web-img { margin-top: -60px; }
.process1 .txt { padding: 4em 0 0; font-size: 1.3em }

.process2 { overflow: hidden; position: relative; }
.process2 .txt { padding: 5em 0 0; font-size: 1.3em }

.process3 { position: relative; background: url(/assets/images/process3-bg.jpg) repeat-y center top; background-attachment: fixed; padding: 20px 0; }
.process3 .web-img { margin-top: -60px; }
.process3 .txt { padding: 5em 0 0; font-size: 1.3em }

.step1,
.step2 { height: 43px; width: 144px; line-height: 43px; vertical-align: middle; text-align: center; color: #fff; display: inline-block; margin-right: 1em }
.step1 { background: url(/assets/images/step1.png) no-repeat; }
.step2 { background: url(/assets/images/step2.png) no-repeat; }

.advancedscroller { margin: 60px 0; }
.advancedscroller .thumbsClip > * { border: none; }
.thumbsClip > li > div { background-color: #e5e5e5; border-radius: 5px; padding: 10px; }
.thumbsClip > li p { padding: 10px 0 5px; }
.thumbsClip > li a { position: relative; display: block; overflow: hidden; }
.thumbsClip > li a:before { content: 'Live preview'; position: absolute; width: 80%; text-align: center; color: #fff; background: url(/assets/images/g.png); top: 150%; margin-top: -20px; left: 50%; margin-left: -40%; z-index: 199; font-size: 2em; padding: 10px 0; opacity: 0; }
.thumbsClip > li a:hover:before { opacity: 1; transition: .5s; top: 50%; }

@media screen and (max-width:799px) {
    .web-icon-box > div { margin-bottom: 30px; }
    
    .process1 .txt { padding: 6em 2em; }
    .process2 .web-img2 { display: none; }
    .process2 .txt { padding: 6em 2em; }
    .process3 .web-img { margin-top: 0; }
    .process3 .txt { padding: 0 2em 6em; }
    .step1 { width: 100px; height: 30px; line-height: 30px; background-size: cover; }
    .step2 { width: 100px; height: 30px; line-height: 30px; background-size: cover; }
}

@media screen and (max-width:480px) {
    .process1 .txt { padding: 20px; font-size: 1em; }
    .process2 .txt { padding: 20px; font-size: 1em; }
    .process3 .txt { padding: 20px; font-size: 1em; }
}