/* banner */
.index-wrap {
  display: block;
  margin: 0 auto;
  position: relative;
}
/* content */
.content {
  background: #FAFAFA;
}
.content .card-box {
  margin: 0 auto;
  /* padding: 0 15% */
}
.content .card {
  /* margin-bottom: 30px; */
  /* background: #FAFAFA; */
  position: relative;
}
.card .card-img { 
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.img-left .text {
  display: inline-block;
  position: absolute;
  right: 0;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: 68px;
  top: 58%;
  margin-top: -8.3%;
}
.img-left .card-img {
  padding-top: 136px;
}
.card-img.card-phone {
  padding-top: 92px;
  width: 40%
}
.img-left .card-img.card-phone {
  padding-left: 197px;
}
.card .text {
  display: inline-block;
  vertical-align: middle
}
.img1 {
  width: 46%
}
.img2{
  width: 45%;
  margin: 136px 0 0 230px;
}
.img4 {
  width: 28% !important
}
.card .img-left { 
  margin: 136px 130px 0 0;
  display: inline-block;
  vertical-align: middle
}
/* .img-left.card-phone {
  padding-left: 197px;
} */
.img-left.card-phone, .img-right .card-phone {
  padding-top: 90px !important;
  margin-top: 0
}
.img-right .card-phone {
  padding-top: 90px !important;
  margin-top: 0
}
.card .card-img4 {
  margin: 0 15% 0 17%;
}
.card .card2-img {
  margin: 136px 0 0 130px;
}
.img-right {
  text-align: right
}
.img-right .text{
  text-align: left;
  padding: 0
}
.text .text1 {
  color: #0073FF;
  font-size: 24px;
  margin-bottom: 22px;
  letter-spacing: 2px;
  font-weight: 400
}
.text .text1 .icon {
  width: 15px;
  height: 15px;
  background: #0073FF;
  display: inline-block;
}
.text .text2 {
  color: #333;
  font-size: 42px;
  margin: 0 0 25px 24px;
  font-weight: 400;
  letter-spacing: 2px;
}
.text .text3 {
  color: #333;
  font-size: 20px;
  margin-left: 24px;
  letter-spacing: 2px;
}
.tab-nav {
  /* padding: 118px 15% 125px 15%; */
  padding: 118px 0 125px 0;
}
.tab-nav  li {
  width: 24%;
  display: inline-block;
  vertical-align: top;
}
.tab-nav li .nav {
  position: relative;
}
.tab-nav li .nav:after {
  display: block;
  content: '';
  height: 30px ;
  position: absolute;
  top: 14.5px;
  right: 0;
  width: 1px;
  background: #D4D4D4;
}
.tab-nav li:last-child .nav:after {
  height: 0;
}
.tab-nav .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.tab-nav .title {
  padding-top: 40px;
  font-size: 24px;
  color: #333
}
.tab-nav .icon img {
  width: 100%;
  display: block
}
.tab-nav li .title {
  text-align: center
}
.footer {
  background: #fff
}

@media screen and (max-width: 768px) {
  .index-wrap .content .card-box {
    width: 100%;
  }
  .text .text1 .icon {
    width: .12rem;
    height: .12rem;
  }
  .card .img-left {
    margin: 0;
  }
  .card .text {
    display: block;
  }
  .card .card-img {
    display: block;
    width: 60%;
    padding-left: 0;
    margin: 0 auto;
    position: relative;
  }
  .card-img.img1 {
    width: 77%
  }
  .card-img.img2 {
    width: 77%;
    margin-left: 30px;
  }
  .img4 {
    width: 60% !important
  }
  .img-left .text {
    padding: 20px;
    position: static;
    width: 100%;
    height: auto;
    margin: 0
  }
  .img-right .text {
    padding: 20px;
  }
  .img-left .card-img {
    padding: 0
  }
  
  .img-left.card-phone, .img-right .card-phone {
    padding-top: 0 !important;
  }
  .img-left .card-img.card-phone {
    padding: 0
  }
  /* .card-img.card-phone {
    width: 50%;
  } */
  .text .text1 {
    font-size: 0.16rem;
    margin-bottom: .04rem;
  }
  .text .text2 {
    font-size: .2rem;
    margin-bottom: .04rem;
  }
  .text .text3 {
    font-size: .12rem
  }
  /* tab-nav */
  .tab-nav {
    padding: 20px 10px;
  }
  .tab-nav  li {
    width: 24%;
    display: inline-block;
  }
  .tab-nav .icon {
    width: 25px;
    height: 25px;
    margin: 0 auto;
  }
  .tab-nav .title {
    padding-top: .2rem;
    font-size: .12rem;
    color: #333
  }
  .tab-nav li .nav:after {
    display: block;
    content: '';
    height: 12px ;
    position: absolute;
    top: 8px;
    right: 0;
    width: 1px;
    background: #D4D4D4;
  }
  /* .tab-nav li .nav {
    position: relative;
  }
  .tab-nav li .nav:after {
    display: block;
    content: '';
    height: 80px ;
    position: absolute;
    top: 14.5px;
    right: 0;
    width: 1px;
    background: #D4D4D4;
  }
  .tab-nav li:last-child .nav:after {
    height: 0;
  }
  .tab-nav .icon {
    width: 109px;
    height: 109px;
    margin: 0 auto;
  }
  .tab-nav .title {
    padding-top: 40px;
    font-size: 24px;
    color: #333
  }
  .tab-nav .icon img {
    width: 100%;
    display: block
  }
  .tab-nav li .title {
    text-align: center
  }  */
}
@media only screen and (min-width: 769px) and (max-width: 1300px){
  /* .content .card {
    position: relative;
  } */
  .text .text1 {
    font-size: 20px
  }
  .text .text1 .icon {
    width: 13px;
    height: 13px;
  }
  .text .text2 {
    font-size: 40px;
  }
  .text .text3 {
    font-size: 18px;
  }
}
@media screen and (min-width: 1920px) {
}