﻿.banner{height:calc(650 / 1920 * 100vw);width:100%;position: relative;overflow: hidden}
.banner .swiper-pagination{bottom:30px!important}
.banner .swiper-pagination span{width:13px;height:13px;margin: 0 7px!important;opacity:1;background: #fff}
.banner .swiper-pagination span.swiper-pagination-bullet-active{background: #ab1a29}

.head{padding: 50px 0 30px;line-height: 40px;color: #333333;font-size:24px;font-weight:bold;text-align: center;}
.iPro{margin-top: 10px;position: relative;padding-bottom: 60px}
.iPro .swiper-container{position: relative;overflow: hidden}
.iPro .swiper-slide{position: relative;cursor: pointer;}
.iPro .swiper-slide .Img{height:204px;}
.iPro .swiper-slide p{height:57px;line-height:57px;text-align: center;background: #f2f2f2;font-size:16px;color: #474747}
.iPro .swiper-slide .mb{width:100%;height:100%;position: absolute;top:0;left:0;background: url(../images/1_1.png) center center no-repeat;transform: scale(0);transition: all .5s ease-in-out}
.iPro .swiper-slide:hover .mb{transform: scale(1)}
.iPro .swiperBtn{/* top: 50%; */}
.iPro .swiperBtn div{width: 18px;height:33px;position: absolute;top: 230px;opacity: 1;left:-38px;margin-top: 0;}
.iPro .swiperBtn div:after{content:"";position: absolute;width:20px;height:20px;border:2px solid #bcbcbc;border-right:0;border-bottom:0;transform:rotate(-45deg)}
.iPro .swiperBtn div.swiper-button-next{right:-38px;left:auto;}
.iPro .swiperBtn div.swiper-button-next:after{transform:rotate(135deg);border-color: #09a249}

.iAbout{background: #f5f5f5;padding-bottom: 60px}
.iAbout .content{display: flex;justify-content: space-between}
.iAbout .content>div{width:590px;height:380px}
.iAbout .content .left{background: #ab1a29;color: #fff;padding: 35px 35px 20px 20px;box-sizing:border-box;position: relative}
.iAbout .content .left .title{font-size:18px;margin-bottom: 18px;font-weight:bold}
.iAbout .content .left .summary{color: #fefefe;font-size: 14px;line-height:30px;height: 240px;overflow: hidden}
.iAbout .content .left .more{width: 113px;height:30px;line-height:30px;border-radius: 30px;font-size: 16px;text-align: center;border: 1px solid #fff;bottom: 20px;left: calc(50% - 56px);position: absolute;color: #fff;transition: all .35s ease-in-out}
.iAbout .content .left .more:hover{color: #ab1a29;background: #fff;}
.iAbout .content .right img{width:100%;height:100%}

@media screen and (max-width: 880px){
    .banner .swiper-pagination{bottom:10px!important}
    .banner .swiper-pagination span{width:7px;height:7px}

    .head{padding: 20px 0 15px;font-size:16px}
    .iPro{padding-bottom:80px}
    .iPro .swiper-slide .Img{height: 31vw;}
    .iPro .swiper-slide p{line-height:40px;height:40px;font-size:14px}
    .iPro .swiperBtn{position:absolute;width: 72px;height: 38px;bottom: 30px;/* background: red; */left: calc(50% - 36px);}
    .iPro .swiperBtn div{top:0;left:0}
    .iPro .swiperBtn div.swiper-button-next{right:0}
    .iPro .swiperBtn div:after{width:16px;height:16px}

    .iAbout .content{display:block;width: 100vw;}
    .iAbout .content>div{width:100%;height: auto;}
    .iAbout .content .left{padding-bottom:70px}
    .iAbout .content .left .title{font-size:16px}
    .iAbout .content .left .summary{font-size:12px;line-height:24px;height: 120px;}
    .iAbout .content .left .more{font-size:14px}
}