@font-face {
  font-family: akr;
  src: url(../fonts/akrobat-regular.ttf);
}

.w1570 {
  max-width: 1570px;
  margin: 0 auto;
}

.banner {
  width: 100vw;
  overflow: hidden;
}

.banner .w1280 {
  overflow: hidden;
  margin: 0 auto !important;
}

.banner .w1280 .head-text {
  width: auto;

}

body {
  overflow-x: hidden;
}

.serviceDetailsBanner .w1280 .head-text {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
}

.serviceDetailsBanner .w1280 .head-text p {
  font-size: 60px;
  max-width: 600px;
  width: 100%;
  text-align: left;
}

.serviceDetailsBanner .w1280 .head-text .serviceBannerTips {
  display: block;
  max-width: 585px;
  font-size: 24px;
  line-height: 35px;
  margin-top: 30px;
}

@media (max-width: 1600px) {
  .w1570 {
    width: 92%;
    max-width: 100%;
  }
}

.serviceMob .serviceBlock1 {
  margin-top: -120px;
  width: calc(1800/1920*100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.serviceMob .serviceBlock1 .list {
  width: 25%;
  z-index: 4;
  position: relative;
  background: #313133;
}

.serviceMob .serviceBlock1 .on{
    background: #0c50da;
}

.serviceMob .serviceBlock1 .list .number {
  font-family: akr;
  font-size: 24px;
  line-height: 1.3;
  position: absolute;
  top: 24px;
  left: 24px;
  color: #fff;
}

.serviceMob .serviceBlock1 .list .content {
  width: calc(280/450*100%);
  margin: 0 auto;
  padding-top: 154px;
  padding-bottom: 130px;
}

.serviceMob .serviceBlock1 .list .content .img {
  height: 80px;
  position: relative;
}

.serviceMob .serviceBlock1 .list .content .img img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.serviceMob .serviceBlock1 .list .content .img span {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.serviceMob .serviceBlock1 .list .content .title {
  color: #fff;
  font-size: 24px;
  line-height: 1.45;
  margin-top: 82px;
  padding: 0 !important;
}

.serviceMob .serviceBlock1 .list .content .tips {
  color: #fff;
  font-size: 16px;
  line-height: 2;
  margin-top: 20px;
}



.serviceMob .serviceBlock2 {
  padding: 136px 0;
  position: relative;
}

.serviceMob .serviceBlock2 .mobContent {
  display: none;
}

.serviceMob .serviceBlock2 .w1570 {
  max-width: 1570px;
  margin: 0 auto;
  position: relative;
}

.serviceMob .serviceBlock2 .w1570 .listLeft {
  width: calc(1014/1570*100%);
  background: #f9f9f9;
  height: 695px;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .content {
  width: calc(575/1014*100%);
  padding: 127px 0 0;
  margin-left: calc(100/1014*100%);
}

.serviceMob .serviceBlock2 .w1570 .listLeft .content .mySwiper {
  overflow: hidden;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .content .type {
  font-size: 16px;
  line-height: 2;
  color: #212529;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .content .title {
  margin-top: 12px;
  padding: 0 0;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .content .title a{
    font-size: 50px;
  line-height: 1.3;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .content .tips {
  font-size: 16px;
  line-height: 2;
  color: #212529;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin-top: 37px;
  text-align: justify;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .menu {
  position: relative;
  width: calc(575/1014*100%);
  margin-left: calc(100/1014*100%);
  margin-top: 117px;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .menu .hrefLink {
  display: block;
  width: 200px;
  line-height: 58px;
  border: 1px solid #0c50da;
  color: #0c50da;
  text-align: center;
  font-size: 18px;
  border-radius: 20px 0 0 0;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .menu .btn {
  position: absolute;
  right: 0;
  width: 64px;
  height: 24px;
  padding: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 0;
  border-radius: 0;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .menu .btn div {
  width: 32px;
  height: 24px;
  top: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  margin-top: 0;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .menu .btn div::after {
  content: '';
}

.serviceMob .serviceBlock2 .w1570 .listLeft .menu .btn div:first-child {
  background: url(../images/serviceMobBlock2Img3.png) no-repeat center left;
  left: 0;
}

.serviceMob .serviceBlock2 .w1570 .listLeft .menu .btn div:last-child {
  background: url(../images/serviceMobBlock2Img4.png) no-repeat center right;
  right: 0;
}

.serviceMob .serviceBlock2 .w1570 .listRight {
  width: calc(783/1570*100%);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}

.serviceMob .serviceBlock2 .w1570 .listRight .img {
  width: 100%;
}

.serviceMob .serviceBlock2 .w1570 .listRight .img img {
  max-width: 100%;
}

.serviceMob .serviceBlock2 .w1570 .listRight .mySwiper2 {
  overflow: hidden;
}

.serviceMob .serviceBlock2 .rightBottom {
  position: absolute;
  right: 0;
  bottom: 0;
}

.serviceMob .serviceBlock3 {
  background: url(../images/serviceMobBlock3Img.jpg) no-repeat center/cover;
  padding-top: 110px;
  padding-bottom: 132px;
}

.serviceMob .serviceBlock3 .title {
  font-size: 50px;
  text-align: center;
  line-height: 1.36;
  color: #fff;
  padding: 0 0;
}

.serviceMob .serviceBlock3 .w1570 {
  background: rgba(0, 0, 0, 0.4);
  margin-top: 102px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.serviceMob .serviceBlock3 .w1570 .list {
  width: 25%;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.serviceMob .serviceBlock3 .w1570 .list .content {
  margin: 0 calc(48/392*100%);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow: hidden;
  -webkit-transition: all .3s;
  transition: all .3s;
  height: 64px;
}

.serviceMob .serviceBlock3 .w1570 .list .content span {
  display: block;
  width: 26px;
  height: 2px;
  color: #fff;
  background: #fff;
}

.serviceMob .serviceBlock3 .w1570 .list .content .tit {
  font-size: 30px;
  color: #fff;
  margin-top: 17px;
}

.serviceMob .serviceBlock3 .w1570 .list .content .tips {
  padding-top: 90px;
  font-size: 18px;
  color: #fff;
  line-height: 34px;
}

.serviceMob .serviceBlock3 .w1570 .list:last-child {
  border-right: 0;
}

.serviceMob .serviceBlock3 .w1570 .list .img {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.serviceMob .serviceBlock3 .w1570 .list .img img {
  max-width: 100%;
}

.serviceMob .serviceBlock4 {
  padding-top: 150px;
  padding-bottom: 80px;
}

.serviceMob .serviceBlock4 .w1570 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.serviceMob .serviceBlock4 .w1570 .listLeft{
    width: calc(440/1570*100%);
    text-align: center;
}
.serviceMob .serviceBlock4 .w1570 .listLeft p {
  text-align: right;
  font-size: 32px;
  color: #0c50da;
  margin-top: 28px;
  margin-bottom: 0;
}

.serviceMob .serviceBlock4 .w1570 .listRight {
  width: calc(875/1570*100%);
  padding-top: 38px;
}

.serviceMob .serviceBlock4 .w1570 .listRight span {
  display: block;
  font-size: 44px;
  color: #000;
  line-height: 54px;
  font-weight: 100;
}

.serviceMob .serviceBlock4 .w1570 .listRight p {
  font-size: 44px;
  margin-bottom: 42px;
  margin-top: -7px;
}

.serviceMob .serviceBlock4 .w1570 .listRight div {
  font-size: 16px;
  line-height: 32px;
}

.serviceMob .serviceBlock5 {
  background: #f9f9f9;
}

.serviceMob .serviceBlock5 .w1570 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.serviceMob .serviceBlock5 .w1570 .listLeft {
  font-size: 36px;
  line-height: 200px;
}

.serviceMob .serviceBlock5 .w1570 .listRight {
  width: calc(1120/1570*100%);
}

.serviceMob .serviceBlock5 .w1570 .listRight ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.serviceMob .serviceBlock5 .w1570 .listRight ul li {
  padding-top: 15px;
  width: 25%;
  text-align: center;
  color: #000;
  border-right: 1px solid #eaeaea;
}

.serviceMob .serviceBlock5 .w1570 .listRight ul li span {
  font-family: akr;
  font-size: 50px;
}

.serviceMob .serviceBlock5 .w1570 .listRight ul li span em {
  font-family: akr;
  font-size: 40px;
  position: absolute;
  line-height: 1.3;
  margin-left: 5px;
}

.serviceMob .serviceBlock5 .w1570 .listRight ul li div {
  font-size: 18px;
  margin-top: 30px;
  padding: 0 !important;
}

.serviceMob .serviceBlock5 .w1570 .listRight ul li:last-child {
  border-right: 0;
}

.serviceMob .serviceBlock5 .w1570 .listRight ul li:last-child .title span em {
  font-size: 24px;
  margin-top: 14px;
}

@media (max-width: 1280px) {
  .serviceMob .serviceBlock1 {
    width: 100%;
  }
  .serviceMob .serviceBlock1 .list .content {
    width: calc(35/45*100%);
  }
  .serviceMob .serviceBlock3 .w1570 .list .content .tit {
    font-size: 24px;
  }
  .serviceMob .serviceBlock4 .w1570 .listRight {
    width: calc(980/1570*100%);
  }
}

@media (max-width: 996px) {
  .serviceMob .serviceBlock1 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 0;
  }
  .serviceMob .serviceBlock1 .list {
    width: 50%;
  }
  .serviceMob .serviceBlock1 .list .content {
    padding: 100px 0;
    padding-bottom: 50px;
  }
  .serviceMob .serviceBlock1 .list .content .title {
    margin-top: 50px;
    font-size: 5vw;
  }
  .serviceMob .serviceBlock1 .list .content .tips {
    font-size: 3.6vw;
    line-height: 1.8;
  }
  .serviceMob .serviceBlock2 {
    padding: 80px 0;
    padding-bottom: 30px;
  }
  .serviceMob .serviceBlock2 .w1570 {
    display: none;
  }
  .serviceMob .serviceBlock2 .rightBottom {
    display: none;
  }
  .serviceMob .serviceBlock2 .mobContent {
    display: block;
    width: 92%;
    margin: 0 4%;
    padding-bottom: 100px;
    position: relative;
  }
  .serviceMob .serviceBlock2 .mobContent .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .serviceMob .serviceBlock2 .mobContent .type {
    margin-top: 20px;
    font-size: 4vw;
    color: #212529;
    line-height: 1.3;
  }
  .serviceMob .serviceBlock2 .mobContent .title {
    font-size: 5.5vw;
    line-height: 1.8;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0;
  }
  .serviceMob .serviceBlock2 .mobContent .tips {
    font-size: 3.6vw;
    line-height: 1.5;
    text-align: justify;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .serviceMob .serviceBlock2 .mobContent .mySwiper3 {
    overflow: hidden;
  }
  .serviceMob .serviceBlock2 .mobContent .caseBtn {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 150px;
    height: 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .serviceMob .serviceBlock2 .mobContent .caseBtn div {
    top: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    width: 54px;
    height: 54px;
    margin-top: 0;
    position: relative;
    border: 1px solid #999;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    outline: none;
  }
  .serviceMob .serviceBlock2 .mobContent .caseBtn div::after {
    content: '';
    cursor: pointer;
  }
  .serviceMob .serviceBlock2 .mobContent .caseBtn div:first-child {
    background: url(../images/serviceMobBlock2Img3.png) no-repeat center;
    left: 0;
  }
  .serviceMob .serviceBlock2 .mobContent .caseBtn div:last-child {
    background: url(../images/serviceMobBlock2Img4.png) no-repeat center;
    right: 0;
  }
  .serviceMob .serviceBlock2 .mobContent .caseBtn div.swiper-button-disabled {
    opacity: .5;
  }
  .serviceMob .serviceBlock3 {
    padding: 80px 0;
  }
  .serviceMob .serviceBlock3 .title {
    font-size: 5.8vw;
  }
  .serviceMob .serviceBlock3 .w1570 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 92%;
    margin-top: 60px;
  }
  .serviceMob .serviceBlock3 .w1570 .list {
    width: 50%;
  }
  .serviceMob .serviceBlock3 .w1570 .list .img {
    opacity: 0 !important;
  }
  .serviceMob .serviceBlock3 .w1570 .list .content {
    height: auto !important;
  }
  .serviceMob .serviceBlock3 .w1570 .list .content .tit {
    font-size: 4.5vw;
    font-weight: bold;
  }
  .serviceMob .serviceBlock3 .w1570 .list .content .tips {
    font-size: 3.6vw;
    line-height: 1.7;
  }
  .serviceMob .serviceBlock3 .w1570 .list:nth-child(2) {
    border-right: 0;
  }
  .serviceMob .serviceBlock3 .w1570 .list:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .serviceMob .serviceBlock3 .w1570 .list:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .serviceMob .serviceBlock4 {
    padding-top: 80px;
  }
  .serviceMob .serviceBlock4 .w1570 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .serviceMob .serviceBlock4 .w1570 .listLeft, .serviceMob .serviceBlock4 .w1570 .listRight {
    width: 100%;
  }
  .serviceMob .serviceBlock4 .w1570 .listLeft {
    text-align: center;
  }
  .serviceMob .serviceBlock4 .w1570 .listLeft img {
    width: 36%;
  }
  .serviceMob .serviceBlock4 .w1570 .listLeft p {
    width: 50%;
    margin: 0 auto;
    margin-top: -36px;
  }
  .serviceMob .serviceBlock4 .w1570 .listRight span {
    font-size: 6vw;
  }
  .serviceMob .serviceBlock4 .w1570 .listRight p {
    font-size: 6vw;
    margin-bottom: 30px;
  }
  .serviceMob .serviceBlock4 .w1570 .listRight div {
    font-size: 4vw;
    line-height: 1.8;
    text-align: justify;
  }
  .serviceMob .serviceBlock5 .w1570 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-top: 50px;
    padding-bottom: 40px;
  }
  .serviceMob .serviceBlock5 .w1570 .listLeft {
    width: 100%;
    line-height: 1.8;
    text-align: center;
    padding: 30px 0;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .serviceMob .serviceBlock1 .list .content .img {
    height: 52px;
  }
  .serviceMob .serviceBlock1 .list .content .img img {
    height: 52px;
    width: auto;
  }
  .serviceMob .serviceBlock3 .w1570 {
    width: 92%;
  }
  .serviceMob .serviceBlock3 .w1570 .list .content {
    margin: 0 20px;
  }
  .serviceMob .serviceBlock3 .w1570 .list .content .tit {
    font-size: 4vw;
  }
  .serviceMob .serviceBlock3 .w1570 .list .content .tips {
    padding-top: 20px;
    line-height: 1.5;
  }
  .serviceMob .serviceBlock4 .w1570 .listLeft img {
    margin-left: -50px;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight ul li {
    width: 50%;
    padding-bottom: 30px;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight ul li .title {
    margin-top: 0;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight ul li div {
    margin-top: 0;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight ul li:nth-child(2) {
    border-right: 0;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight ul li:nth-child(3) {
    border-top: 1px solid #eaeaea;
  }
  .serviceMob .serviceBlock5 .w1570 .listRight ul li:nth-child(4) {
    border-top: 1px solid #eaeaea;
  }
  .serviceMob .serviceBlock1 .list .content .tips{
      display: none;
  }
}


.serviceDetailsBanner .w1280 .head-text .serviceBannerTips {
  display: block;
  width: 100%;
}

.serviceMob .serviceDesignBlock2 {
  background: url(../images/serviceDesignBlock2Img.jpg) no-repeat center/cover;
  position: relative;
}
.serviceMob .serviceDesignBlock2 .posi{
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(1159/1920*100%);
}
.serviceMob .serviceDesignBlock2 .posi img{
    width: 100%;
}
.serviceMob .serviceDesignBlock2 .w1570 {
  padding: 365px 0 225px;
}

.serviceMob .serviceDesignBlock2 .w1570 .img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.serviceMob .serviceDesignBlock2 .w1570 .img span {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #000;
}

.serviceMob .serviceDesignBlock2 .w1570 .img span:first-child {
  background: #000;
}

.serviceMob .serviceDesignBlock2 .w1570 .img span:last-child {
  margin-left: -15px;
}

.serviceMob .serviceDesignBlock2 .w1570 .title {
  max-width: 760px;
  font-size: 50px;
  line-height: 68px;
  font-weight: bold;
  margin-top: 38px;
  margin-bottom: 130px;
}

.serviceMob .serviceDesignBlock2 .w1570 .mw800 {
  max-width: 800px;
}

.serviceMob .serviceDesignBlock4 {
  padding-top: 110px;
}

.serviceMob .serviceDesignBlock4 .title {
  text-align: center;
}

.serviceMob .serviceDesignBlock4 .title p {
  margin: 0;
  font-size: 50px;
  line-height: 68px;
}

.serviceMob .serviceDesignBlock4 .title .tips {
  font-size: 16px;
  line-height: 32px;
  margin-top: 18px;
}

.serviceMob .serviceDesignBlock4 .w1570 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.serviceMob .serviceDesignBlock4 .w1570 .list {
  width: calc(764/1570*100%);
  padding-bottom: 16px;
  margin-top: 40px;
  margin-left: calc(40/1570*100%);
}

.serviceMob .serviceDesignBlock4 .w1570 .list:nth-child(2n+1) {
  margin-left: 0;
}

.serviceMob .serviceDesignBlock4 .w1570 .list .img img {
  max-width: 100%;
}

.serviceMob .serviceDesignBlock4 .w1570 .list .title {
  display: block;
  text-align: left;
  font-size: 26px;
  line-height: 1.5;
  margin-top: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
  background: url(../images/serviceWebBlock4Img.png) no-repeat right center;
}
.serviceMob .strategy_piece5 .content .cont .tips i{
    top:-60%;
}
.serviceMob .strategy_piece5 .serviceMob .serviceDesignBlock4 .w1570 .list .type {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 2px;
}

@media (max-width: 1280px) {
  .serviceMob .serviceDesignBlock2 .w1570 {
    padding-top: 225px;
  }
}

@media (max-width: 996px) {
.serviceDetailsBanner .w1280{
    width: 92%;
}
  .serviceDetailsBanner .w1280 .head-text {
    width: 100%;
  }
  .serviceDetailsBanner .w1280 .head-text p {
    font-size: 6vw;
    max-width: 100%;
  }
  .serviceDetailsBanner .w1280 .head-text .serviceBannerTips {
    font-size: 2.4vw;
    max-width: 100%;
  }
  .serviceMob .serviceDesignBlock2 .w1570 {
    padding: 150px 0;
  }
  .serviceMob .serviceDesignBlock2 .w1570 .title {
    line-height: 7.2vw;
    font-size: 5.2vw;
  }
  .serviceMob .serviceDesignBlock4 {
    padding: 80px 0;
    padding-bottom: 30px;
  }
  .serviceMob .serviceDesignBlock4 .title p {
    font-size: 5.8vw;
    line-height: 1.36;
  }
  .serviceMob .serviceDesignBlock4 .title .tips {
    font-size: 3.2vw;
    line-height: 1.7;
  }
  .serviceMob .serviceDesignBlock4 .w1570 .list .title {
    margin-top: 20px;
    font-size: 3.4vw;
  }
  .serviceMob .serviceDesignBlock4 .w1570 .list .type {
    font-size: 2.8vw;
  }
}

@media (max-width: 640px) {
  .serviceDetailsBanner .w1280 .head-text p {
    font-size: 7vw;
    max-width: 100%;
  }
  .serviceDetailsBanner .w1280 .head-text .serviceBannerTips {
    font-size: 4vw;
    line-height: 1.7;
    max-width: 100%;
    display: block;
    width: 100%;
  }
  .serviceMob .serviceDesignBlock2 .w1570 {
    padding: 100px 0;
  }
  .serviceMob .serviceDesignBlock2 .w1570 .title {
    margin-bottom: 50px;
  }
  .serviceMob .serviceDesignBlock2 .w1570 .tips img {
    max-width: 40%;
  }
  .serviceMob .serviceDesignBlock4 .w1570 {
    margin-top: 20px;
  }
  .serviceMob .serviceDesignBlock4 .w1570 .list {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }
  .serviceMob .serviceDesignBlock4 .w1570 .list .title {
    margin-top: 20px;
    font-size: 4.5vw;
  }
  .serviceMob .serviceDesignBlock4 .w1570 .list .type {
    font-size: 3.5vw;
  }
}

@media (max-width: 414px) {
  .serviceMob .serviceDesignBlock2 .w1570 {
    padding: 40px 0 130px;
  }
  .serviceMob .serviceDesignBlock2 .w1570 .img span {
    width: 30px;
    height: 30px;
  }
  .serviceMob .serviceDesignBlock2 .w1570 .title {
    margin-top: 20px;
    margin-bottom: 30px;
  }
}

.serviceMob .serviceWebBlock3 {
  background: #313133;
  padding-top: 110px;
}

.serviceMob .serviceWebBlock3 .title p {
  text-align: center;
  font-size: 50px;
  line-height: 68px;
  color: #fff;
  margin: 0;
}

.serviceMob .serviceWebBlock3 .title span {
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
  color: #fff;
  margin-top: 18px;
}

.serviceMob .serviceWebBlock3 .w1570 {
  margin-top: 64px;
  padding-bottom: 118px;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .left {
  width: calc(785/1570*100%);
  background: #fff;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right {
  width: calc(785/1570*100%);
  background: #fff;
  padding-left: calc(55/785*100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .title {
  font-size: 44px;
  font-weight: bold;
  margin-top: 8px;
  padding: 0 !important;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .tips {
  margin-top: 24px;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .tips span {
  display: block;
  padding-left: 45px;
  position: relative;
  margin-top: 14px;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .tips span::after {
  width: 22px;
  height: 1px;
  background: #000;
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .posi {
  position: absolute;
  right: calc(30/785*100%);
  bottom: 60px;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .posi .tit {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fff;
  text-align: center;
  font-size: 28px;
  color: rgba(0, 0, 0, 0.2);
  width: 100%;
  line-height: 46px;
  font-weight: bold;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  margin-top: 67px;
  margin-bottom: 0;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd::after {
  content: '';
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: 0;
  top: 45px;
  z-index: 0;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li {
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin-left: calc(210/1570*100%);
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li .number {
  font-size: 16px;
  color: #fff;
  font-family: akr;
  text-align: center;
  line-height: 1.5;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li span {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin-top: 18px;
  margin-bottom: 22px;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li .tit {
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
  color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li.on .number, .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li.on .tit {
  color: #0c50da;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li.on span {
  background: #0c50da;
}

.serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li:first-child {
  margin-left: 0;
}

.serviceMob .serviceWebBlock4 .title {
  padding-top: 110px;
}

.serviceMob .serviceWebBlock4 .title p {
  text-align: center;
  font-size: 50px;
  line-height: 68px;
  color: #000;
  margin: 0;
}
.serviceMob .serviceWebBlock4 .title span,
.strategy_piece5 .title span  {
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
  color: #000;
  margin-top: 18px;
}

.serviceMob .serviceWebBlock4 .strategy_piece5 {
  background: none;
  padding-top: 62px;
}

.serviceMob .serviceWebBlock4 .strategy_piece5 .content {
  margin: 0;
  background: #f9f9f9;
}

.serviceMob .serviceWebBlock4 .strategy_piece5 .content .cont {
  margin: 0 68px;
  padding: 0;
}

.serviceMob .serviceWebBlock4 .strategy_piece5 .content .cont .list {
  padding: 0;
  width: calc(347.5/1434*100%);
  max-width: 695px;
  margin-left: calc(40/1434*100%);
}

.serviceMob .serviceWebBlock4 .strategy_piece5 .content .cont .list:nth-child(2n+1) {
  margin-left: 0;
}

.serviceMob .serviceWebBlock4 .strategy_piece5 .btn {
  display: block;
  margin: 0 auto;
  width: 180px;
  height: 50px;
  text-align: center;
  font-size: 16px;
  padding: 0;
  line-height: 50px;
  color: #fff;
  background: #0c50da;
  border-radius: 25px 5px 5px 5px;
  font-weight: bold;
  margin-top: 118px;
}

@media (max-width: 996px) {
  .serviceMob .serviceWebBlock3, .serviceMob .serviceWebBlock4 {
    padding-top: 80px;
  }
  .serviceMob .serviceWebBlock3 .title, .serviceMob .serviceWebBlock4 .title {
    padding-top: 0;
  }
  .serviceMob .serviceWebBlock3 .title p, .serviceMob .serviceWebBlock4 .title p {
    font-size: 5.8vw;
    line-height: 1.36;
  }
  .serviceMob .serviceWebBlock3 .title span, .serviceMob .serviceWebBlock4 .title span,.strategy_piece5 .title span {
    font-size: 3.2vw;
    line-height: 1.7;
  }
  .strategy_piece5{
      padding-top: 100px;
  }
  .serviceMob .serviceWebBlock3 .w1570 {
    padding-bottom: 50px;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .left, .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right {
    width: 100%;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .left {
    text-align: center;
    padding: 0;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .left img {
    max-width: 100%;
    width: 100%;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right {
    padding: 50px 60px;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .title {
    font-size: 5.867vw;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .tips span {
    font-size: 4vw;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .posi {
    width: calc(240/916*100%);
    right: 5%;
    bottom: 5%;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .posi .tit {
    font-size: 4vw;
    line-height: 5vw;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .posi img {
    max-width: 100%;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd {
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-top: 30px;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd::after {
    display: none;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li {
    margin-left: 0;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li .number {
    font-size: 3vw;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li span {
    display: none;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .hd li .tit {
    font-size: 3.5vw;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 .content .cont .list {
    width: 100%;
    padding: 0 !important;
    max-width: 100%;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 .content .cont .list .img {
    text-align: center;
    height: auto;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 .content .cont .list .img a {
    display: block;
    height: 100%;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 .content .cont .list:nth-child(2n+2) {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .serviceMob .serviceWebBlock3 .w1570 {
    margin-top: 40px;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .left {
    padding: 0;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right {
    padding: 5%;
    padding-bottom: 30px;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .mh {
    height: 20px;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .mh img {
    height: 100%;
    width: auto;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .tips {
    margin-top: 0;
  }
  .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .tips span {
    margin-top: 6px;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 .content .tab {
    padding: 30px;
    padding-top: 10px;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 .content .cont {
    margin: 0 30px;
  }
  .serviceMob .serviceWebBlock4 .w1570 .strategy_piece5 .btn {
    margin-top: 40px;
  }
}
/**/
.serviceMob .serviceWebBlock4{
    padding-bottom: 60px;
}
.serviceMob .serviceWebBlock4 .serviceCase {
    margin-top: 66px;
    display: flex;
}
.serviceMob .serviceWebBlock4 .serviceCase .list{
    width: calc(100% / 3);
}
.serviceMob .serviceWebBlock4 .serviceCase .list .img img{
    width: 100%;
}
.serviceMob .serviceWebBlock4 .serviceCase .list .title{
    padding-top: 34px;
    font-size: 24px;
    line-height: 1.5;
}
.serviceMob .serviceWebBlock4 .serviceCase .list .type{
    font-size: 16px;
    margin-top: 6px;
}
.serviceMob .serviceWebBlock4 .btn{
    display: block;
    margin: 0 auto;
    width: 180px;
    height: 50px;
    text-align: center;
    font-size: 16px;
    padding: 0;
    line-height: 50px;
    color: #fff;
    background: #0c50da;
    border-radius: 25px 5px 5px 5px;
    font-weight: bold;
    margin-top: 106px;
}
@media (max-width: 996px){
    .serviceMob .serviceWebBlock4 .serviceCase .list{
        width: 100%;
        margin-bottom: 40px;
    }
    .serviceMob .serviceWebBlock4 .serviceCase .list .title{
        font-size: 5vw;
    }
    .serviceMob .serviceWebBlock4 .serviceCase .list .type{
        font-size: 4vw;
    }
    .serviceMob .serviceWebBlock4 .btn{
        margin-top: 40px;
    }
}
.serviceMob .serviceBlock2 .mobContent a{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.serviceWebBlock6{
    height: 60px;
    width: 100%;
}
.serviceWebBlock3 .title{
    padding: 0 !important;
}
@media (max-width: 750px){
    .serviceMob .serviceBlock1 .list .number{
        top: 20px;
    }
    .serviceMob .serviceBlock1 .list .content{
        padding: 70px 0 50px;
    }
    .serviceMob .serviceBlock1 .list .content .title{
        font-size: 4vw;
        margin-top: 30px;
    }
    .serviceMob .serviceBlock1 .list .content .img{
        height: 40px;
    }
    .serviceMob .serviceDesignBlock2 .w1570 .title{
        font-size: 4vw;
        padding: 0;
    }
    .serviceMob .serviceDesignBlock2 .w1570{
        padding-bottom: 80px;
    }
    .serviceMob .serviceWebBlock3, .serviceMob .serviceWebBlock4,.strategy_piece5{
        padding-top: 40px;
    }
    .serviceMob .serviceWebBlock3 .title p, .serviceMob .serviceWebBlock4 .title p{
        font-size: 6vw;
    }
    .serviceMob .serviceWebBlock3 .title span, .serviceMob .serviceWebBlock4 .title span{
        font-size: 3vw;
    }
    .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .title{
        font-size: 4vw;
    }
    .serviceMob .serviceWebBlock3 .w1570 .slideTxtBox .bd .cont .right .tips span{
        font-size: 3.5vw;
    }
    .strategy_piece5 .title span{
        font-size: 3.5vw;
    }
    .caseBlock .w1600 .content .list .img{
        height: auto;
    }
    .serviceMob .serviceBlock1 .list .content .img img{
        height: 100%;
        width: auto;
        top: 0;
        position: relative;
        transform: translate(0);
    }
    .serviceMob .serviceBlock1 .list .content .img span{
        height: 40px;
    }
    .serviceMob .serviceBlock2 .mobContent .type{
        font-size: 3.5vw;
    }
    .serviceMob .serviceBlock2 .mobContent .title{
        font-size: 6vw;
    }
    .serviceMob .serviceBlock2 .mobContent .tips{
        font-size: 3.5vw;
    }
    .serviceMob .serviceBlock2 .mobContent{
        padding-bottom: 80px;
    }
    .serviceMob .serviceBlock3 .title{
        font-size: 6vw;
    }
    .serviceMob .serviceBlock3 .w1570 .list .content .tips{
        font-size: 3.5vw;
    }
    .serviceMob .serviceBlock4 .w1570 .listRight span{
        font-size: 5vw;
    }
    .serviceMob .serviceBlock4 .w1570 .listRight div{
        font-size: 3.5vw;
    }
    .serviceMob .serviceBlock5 .w1570 .listLeft{
        padding: 0;
        font-size: 6vw;
    }
}
/*# sourceMappingURL=serviceDetails.css.map */