.serve1 {
  padding: 1.02rem 0 1.08rem;
}

.serve1 .main {
  display: flex;
}

.serve1L {
  width: 5.8rem;
  padding-top: .33rem;
  margin-right: 1.4rem;
  display: none;
}

.serve1Tit {
  font-weight: 400;
  font-size: 0.4rem;
  color: #262626;
  padding-bottom: .2rem;
  position: relative;
  margin-bottom: .4rem;
}

.serve1Tit::after {
  content: '';
  width: 0.58rem;
  height: .02rem;
  background: #00ADE8;
  position: absolute;
  left: 0;
  bottom: 0;
}

.serve1Txt {
  font-weight: 400;
  font-size: 0.18rem;
  color: #3D3D3D;
  line-height: 0.36rem;
}

.serve1R {
  width: 6.8rem;
  height: 4.2rem;
  position: relative;
  display: none;
}

.back1,
.back2 {
  width: .91rem;
  height: .91rem;
  position: absolute;
}

.back1 {
  top: -0.32rem;
  right: -.33rem;
}

.back2 {
  bottom: -0.32rem;
  left: -.33rem;
}

.serve2 {
  width: 100%;
  height: 8.3rem;
  background-image: url(../png/sever2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.serve2 .main {
  padding: .8rem 0 .77rem;
}

.serve2Tit {
  font-weight: 400;
  font-size: 0.4rem;
  color: #333333;
  text-align: center;
  position: relative;
  padding-bottom: .17rem;
  margin-bottom: .2rem;
}

.serve2Tit::after {
  content: '';
  width: 1.6rem;
  height: .01rem;
  background: #CFCFCF;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.serve2Tit::before {
  content: '';
  width: 0.36rem;
  height: 0.02rem;
  background: #00ADE8;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.serve2TitB {
  font-weight: 400;
  font-size: 0.18rem;
  color: #333333;
  text-align: center;
}

.serve2Box {
  display: flex;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.serve2Item {
  width: 6.8rem;
  height: 2.35rem;
  background: #FFFFFF;
  box-shadow: 0rem 0rem 0.13rem 0.01rem rgba(187, 187, 187, 0.15);
  margin-right: .4rem;
  margin-bottom: .4rem;
  padding: .5rem .91rem .5rem .6rem;
  box-sizing: border-box;
  display: flex;
  transform: translateY(100%);
  opacity: 0;
  transition: all .3s;
}

.serve2Item.active {
  transform: translateY(0%);
  opacity: 1;
}

.serve2Item:nth-child(2n) {
  margin-right: 0;
}

.serveIcon {
  width: 1rem;
  height: 1rem;
  margin-right: .45rem;
}

.serve2Text {
  width: 3.8rem;
}

.serve2Text .t1 {
  font-weight: bold;
  font-size: 0.24rem;
  color: #262626;
  margin-bottom: .2rem;
}

.serve2Text .t2 {
  font-weight: 400;
  font-size: 0.16rem;
  color: #3D3D3D;
  line-height: 0.3rem;
}

.serve3 {
  width: 100%;
  height: 6rem;
  background-image: url(../png/sever3.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.serve3::after {
  content: '';
  width: 14.92rem;
  height: 6rem;
  background: linear-gradient(90deg, #FBFBFB 0%, #FCFCFC 59%, #FBFBFB 72%, rgba(251, 251, 251, 0.03) 100%);
  top: 0;
  left: 0;
}

.serve3 .main {
  position: relative;
  z-index: 10;
  padding-top: 1.26rem;
}

.serve3Tit {
  font-weight: 400;
  font-size: 0.4rem;
  color: #333333;
  position: relative;
  padding-bottom: .4rem;
  margin-bottom: .5rem;
}

.serve3Tit::after {
  content: '';
  width: 0.6rem;
  height: 0.02rem;
  background: #00ADE8;
  position: absolute;
  left: 0;
  bottom: 0;
}

.serve3Tel,
.serve3mail {
  font-weight: 400;
  font-size: 0.2rem;
  color: #333333;
  line-height: 0.4rem;
  display: block;
}

.serve3BtnBox {
  display: flex;
  align-items: center;
  margin-top: .74rem;
}

.serve3Btn {
  width: 2.84rem;
  height: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.05rem;
  margin-right: 1rem;
  position: relative;
  font-weight: 400;
  font-size: 0.28rem;
}

.sever3btn1 {
  border: 0.02rem solid #00ADE8;
  color: #00ADE8;
}

.sever3btn2 {
  border: 0.02rem solid #E8E8E8;
  color: #333333;
}

.serve3Btn img {
  width: .5rem;
  height: .5rem;
  margin-right: .32rem;
}

.serve3Btn .code {
  width: 1.8rem;
  height: 1.8rem;
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all .3s;
}

.serve3Btn:hover .code {
  bottom: calc(100% + .2rem);
  opacity: 1;
}

.serve4 {
  width: 100%;
  height: 6.71rem;
  background-image: url(../png/sever4.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.serve4 .main {
  padding-top: .8rem;
}

.serve4Tit {
  font-weight: 400;
  font-size: 0.4rem;
  color: #333333;
  position: relative;
  padding-bottom: .17rem;
  margin-bottom: .5rem;
  text-align: center;
}

.serve4Tit::after {
  content: '';
  width: 1.6rem;
  height: .01rem;
  background: #CFCFCF;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.serve4Tit::before {
  content: '';
  width: 0.36rem;
  height: 0.02rem;
  background: #00ADE8;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.message {
  display: flex;
  flex-wrap: wrap;
  padding: 0!important;
}

.message input {
  width: 4.28rem;
  height: 0.48rem;
  background: #F9F9F9;
  border-radius: 0.03rem 0.03rem 0.03rem 0.03rem;
  border: 0.01rem solid #CBCBCB;
  box-sizing: border-box;
  margin-right: .58rem;
  margin-bottom: .28rem;
  padding: .14rem .16rem;
}

.message input:nth-child(4) {
  margin-right: 0;
}

.message textarea {
  width: 100%;
  height: 2rem;
  background: #F9F9F9;
  border-radius: 0.03rem 0.03rem 0.03rem 0.03rem;
  border: 0.01rem solid #CBCBCB;
  margin-bottom: .28rem;
  padding: .14rem .16rem;
  box-sizing: border-box;
}

.messageB {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messageB input {
  width: 2.5rem;
  height: 0.48rem;
  margin-right: .25rem;
  margin-bottom: 0;
}

.messageB img {
  width: 1rem;
  height: .48rem;
  margin-right: .25rem;
  cursor: pointer;
}

.messageB button {
  width: 10rem;
  height: 0.48rem;
  background: #00ADE8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 0.18rem;
  color: #FFFFFF;
}


@media only screen and (max-width: 768px) {
    
    .serve1 .main{ display:block;}
  .serve1L{ width:90%; margin:0 auto;}  
   .serve1Txt{ font-size:0.24rem; margin-bottom:.4rem;} 
    
  .serve1R {
  width: 90%;
  margin: 0 auto;
}  
  .serve2TitB{ font-size:0.24rem;}  
.serve2{ height:auto;}
.serve2Item{width: 90%;
  margin: 0 auto; margin-bottom: .3rem;
  padding: .3rem .5rem .5rem .3rem;
}
  .serve2Item:nth-child(2n) {
  margin-right: 0;
  margin-right: auto;
}
.serve2Text .t1{ font-size:0.28rem;}
.serve2Text .t2{ font-size:0.24rem;}
.serve2Text{ width:auto;}
.serve3{ padding-left:5%;}
.serve3Tel, .serve3mail{font-size:0.24rem;}
.serve4{padding: 0 5%; width:90%; height:auto; margin-bottom:.3rem;}





}