/* 客服页背景图 */
.pc-service-background {
    width: 100%;
    background: url(../images/service/service-banner.jpg) no-repeat top center;
    height: 305px;
    background-size: cover;
}

.pc-service-content {
    width: 935px;
    height: 319px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.pc-service-content a {
    width: 230px;
    height: 240px;
    display: block
}

.pc-service-content a .pc-service-box {
    width: 230px;
    height: 240px;
    background: #fff;
    border: 1px solid #f2f3f3;
    transition: all .5s;
    transform-style: preserve-3d
}

.pc-service-content a .pc-service-box div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly
}

.pc-service-content a .pc-service-box div img {
    width: 110px
}

.pc-service-content a .pc-service-box div .pc-service-detail {
    display: flex;
    flex-direction: column;
    align-items: center
}

.pc-service-content a .pc-service-box div .pc-service-detail span {
    text-align: center
}

.pc-service-content a .pc-service-box div .pc-service-detail .pc-service-detail-title {
    font-size: 20px
}

.pc-service-content a .pc-service-box div .pc-service-detail .pc-service-detail-info {
    font-size: 14px
}

.pc-service-content a .pc-service-box div:nth-of-type(2) {
    display: none
}

.pc-service-content a:nth-of-type(1) span {
    color: #62dd8d
}

.pc-service-content a:nth-of-type(2) span {
    color: #50ceff
}

.pc-service-content a:nth-of-type(3) span {
    color: #fe9c00
}

.pc-service-content a:nth-of-type(4) span {
    color: #694e9f
}

.pc-service-content a:hover .pc-service-box {
    transform: rotateY(180deg)
}

.pc-service-content a:hover .pc-service-box div {
    transform: rotateY(180deg)
}

.pc-service-content a:hover .pc-service-box div:nth-of-type(1) {
    display: none
}

.pc-service-content a:hover .pc-service-box div:nth-of-type(2) {
    display: flex
}