.complaint-title {
  font-size: 32px;
  margin: 50px auto;
  text-align: center;
}
.complaint-title>span,
.complaint-title>div {
  display: inline-block;
  /*max-width: 30em;*/
  vertical-align: middle;
}
.complaint-title.wing:before,
.complaint-title.wing:after {
  background: url(/uploads/image/scimages/bg_wing_left.png);
  content: "";
  display: inline-block;
  height: 2px;
  width: 180px;
  margin: auto 20px;
  vertical-align: middle;
}
.complaint-title.wing:after {
  background: url(/uploads/image/scimages/bg_wing_right.png);
}
.complaint{
    margin-bottom: 120px
}
.complaint>div{
    float:left;
    width:304px;
    position: relative;
    border-radius: 10px;
}
.complaint a{
    text-decoration:none
}
.complaint>div:not(:first-child){
  margin-left:54px;
}
.complaint>div:hover i{
    display:block;
}
.complaint i{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,.3);
    display:none;
}
.complaint div.com{
    width:300px;
    margin-left:0;
    color:#333;
    text-align:center;
}
.complaint .num{
    font-size:2.6rem;
}
.complaint .num span{
    font-size:7.2rem;
    color:#00845c;
}
.complaint div p{
    font-size:2.2rem;
}
.complaint div p:nth-child(2){
    letter-spacing: 2px;
}
.complaint .zxts{
    width: 310px;
    height: 260px;
    background: url(/uploads/image/scimages/icon_circle.png) no-repeat bottom right #6dc0ce;
    transition: all 200ms linear;
    padding: 10px 20px;
    overflow: hidden;
    box-shadow: 0px 8px 24px 0px rgba(0, 76, 51, 0.15);
    margin-left: 24px;
}
.complaint .zxts img,.complaint .tscx img,.complaint .sptj img{
    margin :0 calc((100% - 90px)/2);
    display: block;
    transition: all 200ms linear;
    width:90px;
    height:90px;
}
.complaint .zxts #titlebig,.complaint .tscx #titlebig,.complaint .sptj #titlebig{
    transition: all 200ms linear;
    /*padding: 0 calc((100% - 100px)/2);*/
    box-sizing: content-box;
    text-align: center;
}
.complaint .zxts:hover img,.complaint .tscx:hover img,.complaint .sptj:hover img{
    width:100px;
    height:100px;
}
.complaint .zxts:hover #titlebig,.complaint .tscx:hover #titlebig,.complaint .sptj:hover #titlebig{
    padding:0;
}
.complaint .tscx{
    width: 310px;
    height: 260px;
    background: url(/uploads/image/scimages/icon_circle.png) no-repeat bottom right #6dceaf;
    transition: all 200ms linear;
    padding: 10px 20px;
    overflow: hidden;
    box-shadow: 0px 8px 24px 0px rgba(0, 76, 51, 0.15);
}
.complaint .sptj{
    width: 310px;
    height: 260px;
    background: url(/uploads/image/scimages/icon_circle.png) no-repeat bottom right #6d9dce;
    transition: all 200ms linear;
    padding: 10px 20px;
    overflow: hidden;
    box-shadow: 0px 8px 24px 0px rgba(0, 76, 51, 0.15);
}

#titlebig{
    font-size: 22px;
    font-family: microsoft yahei;
    font-weight: bold;
    color: #ffffff;
}

#textsmall{
    font-size: 14px;
    font-family: microsoft yahei;
    font-weight: 400;
    color: #ffffff;
    height: 52px;
    line-height: 26px;
    padding: 0 50px;
    margin-top:10px;
    margin-bottom:10px;
    text-align: center;
}
.zxts .tabbtn{
    width: 81px;
    height: 33px;
    background: #ffffff;
    border-radius: 16px;
    margin: 0 calc((100% - 81px)/2);
    text-align: center;
    line-height: 33px;
    color: #c6975b;
    transition: all 200ms linear;
    cursor: pointer;
    position: relative;
}
.tscx .tabbtn{
     width: 81px;
     height: 33px;
     background: #ffffff;
     border-radius: 16px;
     margin: 0 calc((100% - 81px)/2);
     text-align: center;
     line-height: 33px;
     color: #547793;
     transition: all 200ms linear;
     cursor: pointer;
     position: relative;
}
.sptj .tabbtn{
     width: 81px;
     height: 33px;
     background: #ffffff;
     border-radius: 16px;
     margin: 0 calc((100% - 81px)/2);
     text-align: center;
     line-height: 33px;
     color: #976858;
     transition: all 200ms linear;
     cursor: pointer;
     position: relative;
}
.sptj .tabbtn:hover::after,.zxts .tabbtn:hover::after,.tscx .tabbtn:hover::after{
    opacity: .3;
}
.sptj .tabbtn::after,.zxts .tabbtn::after,.tscx .tabbtn::after{
    content: '';
    width: 81px;
    height: 33px;
    background: #333;
    border-radius: 16px;
    text-align: center;
    line-height: 33px;
    color: #976858;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all 100ms linear;
}
.complaint .zxts:hover .tabbtn,.complaint .tscx:hover .tabbtn,.complaint .sptj:hover .tabbtn{
    margin-top: 20px;
}