﻿.main {
    width: 100%;
    background-color: #fff;
}

.banner {
    width: 100%;
    position: relative;
    padding-top: 41%;
    background: url('/NewMobileWeb/static/image/product/vms/banner.png') no-repeat center center;
    background-size: 100% auto;
}

.casevmsbanner-inner {
    position: absolute;
    top: 30%;
    text-align: left;
    color: #fff;
    padding: 0 5%;
}

    .casevmsbanner-inner h4 {
        font-size: 23px;
        font-weight: inherit;
        letter-spacing: 4px;
    }

    .casevmsbanner-inner p {
        font-size: 12px;
        letter-spacing: 1px;
    }

.partner-inner {
    margin: 0 auto;
    text-align: center;
}

.partner-inner-img img {
    width: 70%;
    margin: 6%;
}

.list {
    width: 100%;
    background: url('/NewMobileWeb/static/image/product/vms/xz.png') no-repeat center center;
    background-size: 100% 100%;
}

.list-inner {
    /*text-align: center;
    width: 80%;
    margin: 0 auto;
    padding: 11% 0 5%;
    line-height: 100%;*/
}

    .list-inner img {
        width: 100%;
    }

    .list-inner .item {
        width: 30%;
        display: inline-block;
        margin: 1% 8%;
        border: 1px solid #026afd;
        border-radius: 2px;
    }

        .list-inner .item img {
            margin-right: 5%;
            width: 22px;
        }

        .list-inner .item span {
            letter-spacing: 3px;
            font-size: 12px;
            color: #016aff;
            display: inline-block;
        }

.advantage {
    text-align: center;
}

    .advantage .t1 {
        letter-spacing: 2px;
        padding: 2%;
        font-weight: bold;
    }

    .advantage .advantage-inner {
    }

        .advantage .advantage-inner .item {
            color: #fff;
        }

            .advantage .advantage-inner .item img {
                width: 100%;
            }

            .advantage .advantage-inner .item h3 {
                letter-spacing: 2px;
                padding-bottom: 2%;
                position: absolute;
                top: 62%;
                width: 100%;
                font-weight: bold;
            }

            .advantage .advantage-inner .item p {
                padding: 0 5%;
                position: absolute;
                top: 72%;
                text-align: left;
            }

.swiper-container {
    position: relative;
}

.swiper-pagination {
    bottom: 5% !important;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    border-radius: 0px !important;
    transform: rotate(45deg);
    background-color: #fff;
    margin: 0 4% !important;
}

/* 相关案例*/
.relatedcases {
    width: 100%;
    background: #eef2fe;
}

.relatedcases-inner {
    width: 100%;
    margin: 0px auto;
    padding: 3% 0;
}

    .relatedcases-inner .title {
        padding: 4% 0px;
        text-align: center;
        letter-spacing: 2px;
        font-weight: bold;
    }

.pr5 {
    padding-right: 5%;
}

.relatedcaseslist {
    width: 90%;
    margin: 0px auto;
    text-align: center;
}

    .relatedcaseslist .item {
        width: 32%;
        display: inline-block;
        text-align: center;
        margin-bottom: 6%;
    }

        .relatedcaseslist .item img {
            width: 90%;
        }

        .relatedcaseslist .item .t1 {
            color: #0041b9;
            margin: 4px 2px;
            letter-spacing: 2px;
            font-size: 1rem;
        }
/*产品案例轮播*/
.caserotation-inner {
    background: url(/NewMobileWeb/static/image/product/3pl/dl.png) no-repeat center #215fcb;
    background-size: 100% 100%;
    padding: 6% 0px;
}

.caserotationlist {
    width: 90%;
    margin: 0px auto;
    outline: none;
}

    .caserotationlist .item {
        width: 100%;
        text-align: center;
        -webkit-transition: all 0.6s;
        -moz-transition: all 0.6s;
        -o-transition: all 0.6s;
        cursor: pointer;
    }

        .caserotationlist .item p {
            color: #fffeff;
            margin-top: 10px;
        }

        .caserotationlist .item:hover {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -o-transform: scale(1.1);
        }

    .caserotationlist.p-prev, .caserotationlist .p-next {
        outline: none;
    }

        .caserotationlist .p-prev:after, .caserotationlist .p-next:after {
            font-size: 24px;
            color: #c0bfbd;
            outline: none;
        }


    .caserotationlist .item img {
        width: 24%;
        height: 24%;
    }

@media only screen and (max-width:410px) {
    .list-inner .item {
        width: 35%;
        display: inline-block;
        margin: 1% 5%;
        border: 1px solid #026afd;
        border-radius: 1px;
    }

    .casevmsbanner-inner {
        position: absolute;
        top: 30%;
        text-align: left;
        color: #fff;
        padding: 0 2% 0 5%;
    }

        .casevmsbanner-inner h4 {
            font-size: 18px;
            font-weight: inherit;
            letter-spacing: 2px;
        }

        .casevmsbanner-inner h3 {
            font-size: 14px;
            font-weight: inherit;
            letter-spacing: 1px;
        }

        .casevmsbanner-inner p {
            font-size: 12px;
            letter-spacing: 1px;
        }
}
@media only screen and (max-width:400px) {
    .caserotationlist .item img {
        width: 16%;
        height: 16%;
    }
}
@media only screen and (max-width:361px) {


    .advantage .advantage-inner .item h3 {
        letter-spacing: 4px;
        padding-bottom: 2%;
        position: absolute;
        top: 58%;
        width: 100%;
        font-weight: inherit;
    }

    .advantage .advantage-inner .item p {
        font-size: 12px;
        letter-spacing: 1px;
        padding: 0 5%;
        position: absolute;
        top: 68%;
        font-weight: inherit;
    }

    .swiper-pagination {
        bottom: 3% !important;
    }
}

@media only screen and (max-width:385px) {
    .relatedcaseslist .item .t1 {
        color: #0041b9;
        margin: 4px 2px;
        letter-spacing: 2px;
        font-size: 1rem;
    }
}
