/**
 * service 样式
 * 
 * @version $Id: service.css 311 2023-07-05 02:52:28Z fuy $
 * @creator liqt @ 2013-06-24 11:27:58 by caster0.0.3
 */
@media all {
    .service {
        overflow: hidden
    }

    .service .service-mainer {
        padding: 0 .3rem
    }

    .service .service-mainer .features-content {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding: .2rem 0
    }

    .service .service-mainer .features-content .features-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 50%
    }

    .service .service-mainer .features-content .features-item:first-child,
    .service .service-mainer .features-content .features-item:nth-child(2) {
        margin-bottom: .6rem
    }

    .service .service-mainer .features-content .features-item>img {
        width: 1.3rem;
        height: 1.3rem;
        margin-bottom: .3rem
    }

    .service .service-mainer .features-content .features-item>span {
        font-size: .32rem;
        font-weight: 700;
        color: #333
    }

    .service .service-mainer .steps-card {
        padding: .6rem .34rem .6rem .22rem
    }

    .service .service-mainer .steps-content {
        position: relative
    }

    .service .service-mainer .steps-content:before {
        content: "";
        position: absolute;
        left: .4rem;
        top: .77rem;
        border-left: .02rem dotted #253a7e;
        height: calc(100% - 1.54rem)
    }

    .service .service-mainer .steps-content .steps-item {
        position: relative;
        width: 6.34rem;
        height: 1.54rem
    }

    .service .service-mainer .steps-content .steps-item:not(:last-of-type) {
        margin-bottom: .2rem
    }

    .service .service-mainer .steps-content .steps-item>img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .service .service-mainer .steps-content .steps-item .text {
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        margin-left: 1.22rem
    }

    .service .service-mainer .steps-content .steps-item .text>span {
        font-size: .3rem;
        font-weight: 700;
        color: #253a7e;
        margin-bottom: .16rem
    }

    .service .service-mainer .steps-content .steps-item .text>div {
        font-size: .24rem;
        color: #666
    }

    .service .service-mainer .cases-card {
        padding: .6rem .3rem .4rem
    }

    .service .service-mainer .cases-content .cases-item {
        padding: 0 .24rem;
        margin-bottom: .56rem
    }

    .service .service-mainer .cases-content .cases-item .cases-title {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 1.3rem;
        border-radius: .2rem .2rem 0 0
    }

    .service .service-mainer .cases-content .cases-item .cases-title>img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .service .service-mainer .cases-content .cases-item .cases-title>span {
        position: relative;
        font-size: .32rem;
        font-weight: bolder;
        color: #fff
    }

    .service .service-mainer .cases-content .cases-item .cases-body {
        padding: .5rem .3rem;
        border-radius: 0 0 .2rem .2rem;
        box-shadow: 0 0 .2rem 0 #f2f2f2;
        background: #fff
    }

    .service .service-mainer .cases-content .cases-item .cases-body .cases-sub-title {
        position: relative;
        display: flex;
        align-items: center;
        height: 1.1rem;
        border-radius: .55rem;
        margin-bottom: .6rem;
        background: #fffbf7
    }

    .service .service-mainer .cases-content .cases-item .cases-body .cases-sub-title .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .service .service-mainer .cases-content .cases-item .cases-body .cases-sub-title .avatar {
        position: relative;
        width: .9rem;
        height: .9rem;
        margin-right: .2rem
    }

    .service .service-mainer .cases-content .cases-item .cases-body .cases-sub-title>span {
        position: relative;
        font-size: .3rem;
        font-weight: 700;
        color: #253a7e
    }

    .service .service-mainer .cases-content .cases-item .cases-body .advantages .advantages-item:not(:last-of-type) {
        margin-bottom: .4rem
    }

    .service .service-mainer .cases-content .cases-item .cases-body .advantages .advantages-item>div:first-child {
        font-size: .3rem;
        font-weight: 700;
        color: #333;
        margin-bottom: .12rem
    }

    .service .service-mainer .cases-content .cases-item .cases-body .advantages .advantages-item>div:first-child b {
        font-size: .36rem;
        font-weight: 700;
        color: #253a7e
    }

    .service .service-mainer .cases-content .cases-item .cases-body .advantages .advantages-item>div:nth-child(2) {
        font-size: .24rem;
        color: #8e8e8e
    }

    .service .service-mainer .reviews-content .reviews-item:not(:last-of-type) {
        margin-bottom: .3rem
    }

    .service .service-mainer .reviews-content .reviews-item .user-profile {
        display: flex;
        align-items: center;
        margin-bottom: .3rem
    }

    .service .service-mainer .reviews-content .reviews-item .user-profile>img {
        width: .8rem;
        height: .8rem;
        margin-right: .2rem
    }

    .service .service-mainer .reviews-content .reviews-item .user-profile>span {
        font-size: .26rem;
        color: #333
    }

    .service .service-mainer .reviews-content .reviews-item .review {
        position: relative;
        line-height: .36rem;
        font-size: .24rem;
        color: #666;
        padding: .3rem;
        border-radius: .2rem;
        background: #f6f6f6
    }

    .service .service-mainer .reviews-content .reviews-item .review:before {
        content: "";
        position: absolute;
        top: -.24rem;
        left: .28rem;
        border: .12rem solid transparent;
        border-bottom-color: #f6f6f6
    }

    .service .service-card {
        position: relative;
        padding: .6rem .3rem;
        border-radius: .2rem;
        background: #fff;
        margin-bottom: .3rem
    }

    .service .service-card .header-watermark {
        position: absolute;
        right: 0;
        top: 0;
        width: 2.26rem;
        height: 1.1rem
    }

    .service .service-card .content-watermark {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 5.02rem;
        height: 3.66rem
    }

    .service .service-card .card-header {
        position: relative;
        text-align: center;
        margin-bottom: .6rem
    }

    .service .service-card .card-header .title {
        font-size: .36rem;
        font-weight: 700;
        color: #333
    }

    .service .product-btn {
        display: flex;
        align-items: center;
        width: 2rem;
        height: .6rem;
        border-radius: .3rem;
        margin: 0 auto .3rem;
        background: #fff
    }
    .service .product-btn>span {
        font-size: .28rem;
        color: #333;
        margin-left: .3rem;
        margin-right: .1rem
    }
    .service .product-btn>img {
        width: .28rem;
        height: .28rem
    }

    .service .van-swipe .van-swipe__indicators {
        bottom: 0
    }

    .service .van-swipe .van-swipe__indicator {
        width: 8px;
        height: 8px;
        background-color: #e6e6e6
    }

    .service .van-swipe .van-swipe__indicator:not(:last-child) {
        margin-right: 8px
    }

    .service .van-swipe .van-swipe__indicator--active {
        background-color: #253a7e
    }
}