@charset "utf-8";
/* CSS Document */



.slideBox{ position:relative; width:100%;  height:auto; margin: .52rem 0 0 0; overflow:hidden;}
.slideBox .hd{ position:absolute; width:100%; height:14px; line-height:14px; bottom:.13rem; right:0; z-index:1; text-align:center;}
.slideBox .hd li{ display:inline-block; width:8px; height:8px; border-radius:50%; background-color: #fff; text-indent:9999px; overflow:hidden; margin:0 4px; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; opacity: 0.7;}
.slideBox .hd li.on{ opacity: 1;}
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative; }
.slideBox .bd li img{ width:100%;  height: 44.2vw; max-height: 283px; }
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0);  }

.main{ width: 94%; padding: 0 3%; overflow: hidden;}
.service-box{ width: 100%; background-color: #fff; border-top:  1px solid #f5f5f8;border-bottom:  1px solid #f5f5f8 ; margin-top: .1rem; overflow: hidden;}
.tit{ width: 100%; padding: .15rem 0 .1rem 0; position: relative;}
.tit h3{ font-size: .16rem; color: #4e4e4e ;text-indent: .05rem}

.icon-box{ width: 100%; padding: .05rem 0 .1rem 0; overflow: hidden;}
.icon-box ul{ width: 100%}
.icon-box ul li{ width: 20% ;float: left;text-align: center ; height: .85rem;}
.icon-box ul li .icon{ width: .4rem; height: .4rem;line-height: .4rem; border-radius:50%; background-color: #f56798; ;text-align: center; margin: 0 auto; color: #fff ; font-size: .22rem}
.icon-box ul li h3{ width: 100%; line-height: .16rem; font-size: .12rem ;color: #4e4e4e; padding: .04rem 0 0 0}
.icon-box ul li:nth-child(8) .icon{font-size: .26rem}
.icon-box ul li:nth-child(3) .icon{font-size: .26rem}
.icon-box ul li:nth-child(7) .icon{font-size: .26rem}


.xw-bj{width: 100%; background-color: #fff; border-top:  1px solid #f5f5f8;border-bottom:  1px solid #f5f5f8 ; margin-top: .1rem; overflow: hidden;}

.tit2{text-indent: .05rem}
/* .tit a{ font-size: .16rem; color: #4e4e4e }
.tit a.on{color: #f56798} */

.tit i{ font-size: .16rem; color: #4e4e4e ;font-style: normal}
.tit i.on{color: #f56798}
.tit a{ font-size: .12rem;
    color: #4e4e4e; position: absolute; right: 0; top: .18rem}

.tit span{ font-size: .16rem; color: #4e4e4e ; padding: 0 .06rem }
.tw-box{ width: calc(100% - .1rem); padding: .1rem .05rem 0 .05rem; overflow: hidden;}
.img-box{ width: 100% ; position: relative;}
.img-box img{ width: 100%; height: 55vw; max-height: 352px;}
.img-box h3{ width: calc(100% - 6%) ; padding: 0 3% ; height: .36rem; line-height: .36rem; font-size: .12rem; color: #fff; background: rgba(0, 0, 0, 0.3) ; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: absolute; left: 0; bottom: 0}

.nw{ width: 100%; padding: 0 0 .06rem 0;}
.nw ul{ width: 100%;}
.nw ul li{ width: 100%; border-bottom: 1px solid #d2d2d2;}
.nw ul li a{ width: 100% ;display: block; padding: .1rem 0;}
.nw ul li a h3{ width: 100% ; height: .18rem; line-height: .18rem; font-size: .14rem; color: #4e4e4e;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: .06rem}
.nw ul li a h4{width: 100% ; line-height: .14rem; font-size: .1rem; color: #979797}
.nw ul li:last-child{border: none}

.vid-bj{width: 100%; background-color: #fff; border-top:  1px solid #f5f5f8;border-bottom:  1px solid #f5f5f8 ; margin-top: .1rem; overflow: hidden;}
.vid-box{ width: calc(100% - .1rem);
    padding: .05rem .05rem .15rem .05rem; overflow: hidden;}
.vid{ width: calc(50% - .05rem) ;float: left;}
.vid:nth-child(2){float: right}
.vid .sp{ width: 100% ; position: relative;}
.vid .sp img{ width: 100%; height: .88rem; margin-bottom: .05rem}
.vid .sp .zhe{ width: 100% ;height: .88rem;text-align: center; display: flex; align-items: center; justify-content: center;  background: rgba(0, 0, 0, 0.3) ; position: absolute; left: 0; top: 0;}
.vid h3{ width: 100%;height: .18rem; line-height: .18rem; font-size: .12rem; color: #4e4e4e;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.vid .sp .zhe i{ width: .29rem; height: .29rem; background: url(../images/vid.png) no-repeat; display: inline-block; background-size: cover}



.zj-bj{width: 100%; background-color: #fff; border-top:  1px solid #f5f5f8;border-bottom:  1px solid #f5f5f8 ; margin-top: .1rem; margin-bottom: .65rem; overflow: hidden;}

.swiper-container { width: calc(100% - .1rem);
    padding: .05rem .05rem 0 .05rem; overflow: hidden;}
.swiper-slide {background: #fff;display: flex;align-items: top; overflow: hidden;}
.swiper-slide a{ width: 100%;display: block}
.swiper-slide .pic{ width: 100%; height: .837rem; display: block;}
.swiper-slide h4{width: 100%;; height: .2rem;line-height: .2rem; font-size: .14rem; color: #f56798 ;white-space: nowrap;text-overflow: ellipsis; margin-top: .05rem; overflow: hidden; }
.swiper-slide h5{width: 100%;; height: .12rem;line-height: .12rem; font-size: .1rem; color: #4e4e4e ;white-space: nowrap;text-overflow: ellipsis;  overflow: hidden; }
.swiper-pagination{ position: inherit; padding: .34rem 0 0 0}
.swiper-pagination span{ display:inline-block; width:5px; height:5px;background-color: #f99ebd; border-radius:50%; opacity: 0.64;}
.swiper-pagination .swiper-pagination-bullet-active{opacity: 1;}






@media screen and (width: 360px) {
    .vid .sp img{ width: 100%; height: 1rem;}
    .vid .sp .zhe{height: 1rem;}
    .swiper-slide .pic{ height: .95rem;}
}

.icon-box ul li .icon{ display: flex; align-items: center; justify-content: center;}
.icon-box ul li .icon img{ width: .18rem; height: .18rem;}