.container {
  padding-top: 110px;
}
.category {
  list-style: none;
  height: 30px;
  padding: 0;
}
.category li {
  float: left;
  padding: 4px 10px;
  margin-right: 20px;
  border-radius: 2px;
  color: #242424;
  cursor: pointer;
}
.category li.active {
  background: #242424;
  color: #fff;
}
.service-item {
  width: 100%;
  height: 220px;
  margin: 10px 0;
  position: relative;
}
.service-item .icon {
  width: 20%;
  height: 220px;
  float: left;
  margin-left: 30px;
}
.service-item .title {
  float: left;
  font-size: 30px;
  color: #fff;
  margin-top: 80px;
  margin-left: 20px;
  width: 20%;
}
.title i {
  font-style: normal;
  font-size: 14px;
}
.service-item .sub-title {
  float: left;
  color: #fff;
  margin-left: 50px;
  margin-top: 74px;
}
.sub-title p {
  line-height: 24px;
}
.service-item.ui {
  background: url("../images/service/ui-bg.jpg") no-repeat center center;
  background-size: cover;
}
.service-item.ui .icon {
  background: url("../images/service/ui.png") no-repeat center center;
  background-size: 100px 100px;
}
.service-item.ui .sub-title {
  margin-top: 62px;
}
.service-item.app {
  background: url("../images/service/app-bg.jpg") no-repeat center center;
  background-size: cover;
}
.service-item.app .icon {
  background: url("../images/service/app.png") no-repeat center center;
  background-size: 100px 100px;
}
.service-item.wechat {
  background: url("../images/service/wechat-bg.jpg") no-repeat center center;
  background-size: cover;
}
.service-item.wechat .icon {
  background: url("../images/service/wechat.png") no-repeat center center;
  background-size: 100px 100px;
}
.service-item.brand {
  background: url("../images/service/brand-bg.jpg") no-repeat center center;
  background-size: cover;
}
.service-item.brand .title {
  margin-top: 95px;
}
.service-item.brand .icon {
  background: url("../images/service/brand.png") no-repeat center center;
  background-size: 100px 100px;
}