/* 单品研发 */

.single-box{
    padding: 120px 0;
}
.single-btit{
    visibility: hidden;
}
.single-btit h3{
    font-size: 32px;
    font-weight: 600;
}
.single-btit h4{
    font-size: 28px;
    font-weight: 600;
    color: #9c0101;
}




.module-art{
    background-color: #f5f5f5;
    padding: 30px;
    border-radius: 10px;
    margin-top: 50px;
    visibility: hidden;
}


.artb-le{
    width: 22%;
    text-align: center;
    padding: 20px 0;
    background-color: #ffffff;
}
.artb-le img{
    max-width:100%;
    height: 445px;
}

.artb-ri{
    width: 78% !important;
    /* display: flex;
    flex-wrap: wrap; */
}
.artb-ri > div{
    display: flex;
}
.artb-ri p{
    margin:10px 0 10px 20px;

}
.artb-ri p img{
    width: auto;
    height: 232px;
}



.art-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.art-box > div{
    border-radius: 20px;
}
.artb-imga{
    width: 45%;
    text-align: center;
    padding: 20px 0;
    background-color: #ffffff;
}
.artb-imga img{
    max-width:100%;
    height: auto;
}

.artb-imgb{
    width: 20%;
    text-align: center;
    padding: 20px 0;
    background-color: #ffffff;
}
.artb-imgb img{
    max-width:100%;
    height: auto;
}

.artb-imgc{
    width: 30%;
    display: flex;
    flex-direction: column;
   align-items: center;
}
.artb-imgc img{
    width: 100%;
    height: auto;
}

.art-btm{
    margin-top: 20px;
}

.art-btm p{
    font-size: 15px;
    line-height: 48px;
}
.pcolor{
    color: #616161;
}


@keyframes arrowleft {
    0%{
        background-position: center;
    }
    50%{
        background-position: left;
    }
    100%{
        background-position: center;
    }
}
@keyframes arrowright {
    0%{
        background-position: center;
    }
    50%{
        background-position: right;
    }
    100%{
        background-position: center;
    }
}

/* 系统研发 */
.system-box{
    background-color: #ededed;
    padding: 120px 0;
}

.system-btit{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.system-btit h3{
    font-size: 32px;
    font-weight: 600;
}
.system-btit h4{
    font-size: 28px;
    font-weight: 600;
    color: #9c0101;
}

.system-bcnt{
    padding-top: 170px;
    position: relative;
}
.system-bcnt .swiper-slide{
    padding: 0 70px;
}

.system-bcnt .swiper-button-prev:hover{
    animation-name: arrowleft;
    animation-duration: .5s;
    animation-timing-function:linear;
    animation-iteration-count:1;
}
.system-bcnt .swiper-button-next:hover{
    animation-name: arrowright;
    animation-duration: .5s;
    animation-timing-function:linear;
    animation-iteration-count:1;
}


.bcnt-swipe-li{
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 0 20px 10px #d9d9d9;
}
.bcnt-swipe-lle{
    width: 45%;
    max-height: 470px;
}
.bcnt-swipe-lle img{
    width:100%;
    height: auto;
}

.bcnt-swipe-lri{
    width: 55%;
    padding: 40px 20px;
}

.swipe-lrtit h3{
    color: #9c0101;
    font-size: 22px;
    font-weight: 600;
}
.swipe-lrtit h4{
    font-size: 22px;
    font-weight: 600;
    margin-top: 10px;
}
.swipe-lrp{
    height: 290px;
    margin-top: 10px;
    overflow-y: auto;
}
.swipe-lrp p{
    font-size: 15px;
    line-height: 48px;
}

.system-bctit{
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    font-weight: 600;
    color: #9c0101;
    border-bottom: 5px solid #9c0101;
    padding-bottom: 5px;
    transition: all .3s;
}
.system-bcnt .swiper-button-next, .system-bcnt .swiper-button-prev{
    width: 40px;
    height: 40px;
    background-size: 20px 20px;
    top: 11%;
    background-color: #ffffff;
    border-radius: 50%;
}
.system-bcnt .swiper-button-prev, .system-bcnt .swiper-container-rtl .swiper-button-next{
    left: 36%;
    background-image: url("../images/icon03.png")
}
.system-bcnt .swiper-button-next, .system-bcnt .swiper-container-rtl .swiper-button-prev{
    right: 36%;
    background-image: url("../images/icon04.png")
}




/* 系统功能 */
.function-box{
    padding: 120px 0;
}

.function-bul{
    padding-top: 90px;
    display: flex;
    flex-wrap: wrap;
}
.function-bul li{
    width: 30%;
    margin: 20px;
    background-color: #ededed;
    padding: 20px 20px 15px;
    border-radius: 10px;
    transition: all .5s;
}
.function-bul li:hover{
    box-shadow: 0 0 10px 5px #cccccc;
    transform: scale(1.03);
}

.functbul-txt{
    font-size: 15px;
    text-align: center;
    color: #9c0101;
}
.functbul-img{
    padding: 30px 0 20px;
    display: flex;
    justify-content: center;
}
.functbul-img img{
    width: 110px;
    height: 110px;
}
.functbul-btm{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.functbul-btm p{
    font-size: 15px;
    color: #9c0101;
}
.functbul-btm a img{
    width: 40px;
    height: 20px;
}

.shwimga{
    display: block;
}
.shwimgb{
    display: none;
}
.function-bul li:hover{
    background-color: #9c0101;
}
.function-bul li:hover .functbul-txt{
    color: #ffffff;
}
.function-bul li:hover .functbul-btm p{
    color: #ffffff;
}

.function-bul li:hover .shwimga{
    display: none;
}
.function-bul li:hover .shwimgb{
    display: block;
}

@media only screen and (max-width: 1420px) {
    .single-box {
        padding: 90px 0;
    }

    .single-btit h3 {
        font-size: 30px;
    }
    .single-btit h4 {
        font-size: 30px;
    }
    .module-art {
        padding: 25px;
        margin-top: 30px;
    }



    .artb-le{
        width: 22%;
        text-align: center;
        padding: 15px 0;
        background-color: #ffffff;
    }
    .artb-le img{
        max-width:100%;
        height: 325px;
    }
    
    .artb-ri{
        width: 78% !important;
    }
    .artb-ri p {
        margin: 7px 0 7px 15px;
    }
    .artb-ri p img{
        width: auto;
        height: 171px;
    }



    .artb-imga {
        padding: 15px 0;
    }
    .artb-imga img {
        width: 24%;
    }
    .artb-imgb {
        padding: 15px 0;
    }
    .artb-imgb img{
        width: 55%;
    }

    .art-btm {
        margin-top: 15px;
    }
    .art-btm p {
        font-size: 14px;
        line-height: 38px;
    }





    .system-box {
        padding: 90px 0;
    }
    .system-btit h3 {
        font-size: 30px;
    }
    .system-btit h4 {
        font-size: 30px;
    }
    .system-bcnt {
        padding-top: 110px;
    }

    .system-bcnt .swiper-button-next, .system-bcnt .swiper-container-rtl .swiper-button-prev {
        right: 33%;
    }
    .system-bcnt .swiper-button-prev, .system-bcnt .swiper-container-rtl .swiper-button-next {
        left: 33%;
    }

    .system-bctit{
        top: 5%;
        font-size: 28px;
    }

    .bcnt-swipe-lri {
        padding: 20px 10px;
    }
    .swipe-lrtit h3 {
        font-size: 18px;
    }
    .swipe-lrtit h4 {
        font-size: 18px;
        margin-top: 8px;
    }
    .swipe-lrp{
        height: 220px;
    }
    .swipe-lrp p {
        font-size: 14px;
        line-height: 38px;
    }
    .system-bcnt .swiper-slide {
        padding: 0 60px;
    }


    .function-box {
        padding: 90px 0;
    }
    .function-bul {
        padding-top: 67px;
    }
    .function-bul li {
        width: 31%;
        margin: 12px;
        padding: 15px 15px 10px;
    }

    .functbul-txt {
        font-size: 14px;
    }
    .functbul-img {
        padding: 25px 0 15px;
    }
    .functbul-img img {
        width: 100px;
        height: 100px;
    }
    .functbul-btm p {
        font-size: 14px;
    }



}

@media only screen and (max-width: 769px) {

    .single-box {
        padding: .9rem .1rem ;
    }
    .single-btit{
        visibility: visible;
    }
    .single-btit h3 {
        font-size: 22px;
    }
    .single-btit h4 {
        font-size: 22px;
    }
    .module-art {
        padding: .25rem;
        margin-top: .3rem;
        visibility: visible;
    }

    .art-box{
        flex-wrap: wrap;
    }
    .art-box > div{
        width: 100% !important;
    }
    .artb-ri p {
        margin: .1rem .1rem;
    }
    .artb-ri p img {
        width: auto;
        height: 74px;
    }

    .artb-imgb img {
        width: 25%;
    }
    .artb-imgb{
        margin: .2rem 0 .1rem;
    }

    .art-btm {
        margin-top: .15rem;
    }
    .art-btm p {
        font-size: 14px;
        line-height: 30px;
    }

    .artb-le img {
        height:240px;
    }

    .system-box {
        padding: .9rem 0;
        overflow: hidden;
    }
    .system-bcnt .swiper-slide {
        padding: 0 .1rem;
    }
    .system-btit h3 {
        font-size: 22px;
    }
    .system-btit h4 {
        font-size: 22px;
    }

    .system-bcnt {
        padding-top: 80px;
    }

    .system-bctit {
        top: 3%;
        font-size: 20px;
        border-bottom: 3px solid #9c0101;
    }
    .system-bcnt .swiper-button-next, .system-bcnt .swiper-button-prev{
        top: 6%;
    }
    .system-bcnt .swiper-button-next, .system-bcnt .swiper-container-rtl .swiper-button-prev {
        right: 25%;
    }
    .system-bcnt .swiper-button-prev, .system-bcnt .swiper-container-rtl .swiper-button-next {
        left: 25%;
    }

    .bcnt-swipe-li{
        display: flex;
        flex-direction: column;
    }
    .bcnt-swipe-lle {
        width: 100%;
    }
    .bcnt-swipe-lri {
        width: 100%;
        padding: .3rem .1rem;
    }
    .swipe-lrp{
        height: 217px;
    }

    .swipe-lrtit h3 {
        font-size: 16px;
    }
    .swipe-lrtit h4 {
        font-size: 16px;
        margin-top: .1rem;
    }

    .swipe-lrp p {
        font-size: 14px;
        line-height: 30px;
    }



    .function-box {
        padding: .9rem 0;
    }
    .function-bul {
        padding-top: .6rem;
    }
    .function-bul li {
        width: 97%;
        margin: .1rem;
        padding: .15rem .15rem .1rem;
    }



    .functbul-txt {
        font-size: 14px;
    }
    .functbul-img img {
        width: 80px;
        height: 80px;
    }

    .functbul-btm p {
        font-size: 14px;
    }
    .functbul-btm a img {
        width: 30px;
        height: auto;
    }

}