body{background:#F3F3F3;}

  .banner { position: relative; }
  .banner .swiper-container { width: 100%; height: auto !important; }
  .banner .swiper-container .swiper-slide { height: auto !important; }
  .banner .swiper-container .swiper-slide img { display: block; width: 100%; object-fit: none; }
  .banner .swiper-container .swiper-pagination { position: absolute; bottom: 67px;width:100%;left:0;text-align: center;}
  .banner .swiper-container .swiper-pagination span { width: 15px; height: 15px; border-radius: 50%; background: #fff; opacity: 1; margin:0 5px}
  .banner .swiper-container .swiper-pagination span.swiper-pagination-bullet-active { opacity: 1; background:#9C3030;}
 
  .mbanner { display: none; }
  .box1 { padding-top: 90px; width: 100%; max-width: 1920px;margin: 0 auto;}
  .box1 .w12{position: relative;}
  .box1 .fl {width: 757px;position: relative;z-index:2;}
  .box1 .fr{position: absolute;width:45.92%;right:0;top:7px;}
  .about_pics .swiper-slide img{width:757px;height:476px;object-fit: cover;border-radius: 10px;}
  .about_pics .num{width:91px;height:40px;border-radius: 40px;background:#fff;line-height:40px;text-align: center;font-size:15px;color:#999;margin-top:19px;}
  .about_pics .num .now{color:#9C3030;font-weight:bold;}
  .about_pics .btnbox{position: absolute;bottom:0;right:164px;}
  .about_pics .btnbox a{display: inline-block;width:40px;height:40px;background:#fff;line-height:40px;text-align: center;font-size:20px;color:#333;border-radius:5px;margin-left:20px;transition: all .4s;-webkit-transition: all .4s;}
  .about_pics .btnbox a:hover{background:#9C3030;color:#fff;}
  .box1 .fr .bd{background:#fff;margin-left:-20%;}
  .box1 .fr .about_info{padding: 46px 4.6% 0 24%;height:413px;}
  .box1 .fr .about_info .about_txt{height:262px;overflow: hidden;text-overflow: ellipsis;}
  .box1 .fr .about_info p{font-size:16px;line-height:36px;color:#333;text-indent: 2em;}
  .box1 .fr .about_info p:first-child{margin-bottom:10px;}
  .box1 .fr .about_info .more{font-size:15px;color:#999;text-align: center;display: block;width:78px;line-height:38px;margin:40px auto 0;border-bottom: 1px solid #ddd;transition: all .4s;-webkit-transition: all .4s;}
  .box1 .fr .about_info .more i{display: inline-block;vertical-align: middle;}
  .box1 .fr .about_info .more:hover{color:#9C3030;border-color: #9C3030;}
  .title {text-align: center;margin-bottom: 32px;}
  .title h2{font-size:28px;color:#333;line-height:36px;display: inline-block;position: relative;}
  .title h2 a{color:#333;}
  .title h2 i{color:#ddd;font-size:20px}
  .title h2 .str{color:#9C3030;}
  .title h2 em{font-family: Arial;text-transform: uppercase;color:rgba(156,48,48,.2);font-size:20px;}
  .title h2:before{content:'';position: absolute;top:0;left:-94px;background:url(../images/tit_01.png) no-repeat;width:59px;height:23px;background-size:100%;}
  .title h2:after{content:'';position: absolute;bottom:-8px;right:-120px;background:url(../images/tit_02.png) no-repeat;width:126px;height:28px;background-size:100%;}
  .box2 { padding-top: 90px; width: 100%; max-width: 1920px; margin: 0 auto;}
  .box2 .w12{position: relative;}
  .box2 .swiper-container { height: auto !important; } 
  .box2 .swiper-container .swiper-slide { width: 434px; background: #fff;border-radius: 8px;overflow: hidden;} 
  .box2 .swiper-container .swiper-slide .pic { width: 100%; height: 293px; overflow: hidden; } 
  .box2 .swiper-container .swiper-slide .pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all .4s;-webkit-transition: all .4s;} 
  .box2 .swiper-container .swiper-slide .info { padding: 25px 5.7%; height: 195px; position: relative;}
  .box2 .swiper-container .swiper-slide .info h4{font-size:18px;font-weight:bold;color:#333;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;transition: all .4s;-webkit-transition: all .4s;font-weight:normal;}
  .box2 .swiper-container .swiper-slide .info p {line-height: 27px; font-size: 15px;color: #666;text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;height:54px;margin:32px 0;} 
  .box2 .swiper-container .swiper-slide .info span{color:#999;font-size:17px;font-family: 'Bahnschrift';}
  .box2 .swiper-container .swiper-slide .info .iconfont {position:absolute;width: 22px; line-height: 22px; font-size: 16px; color: #9C3030; text-align: center; border-radius: 50%; border:1px solid #9C3030;right:5.7%;bottom:54px;transition: all .4s;opacity: 0;} 
  .box2 .swiper-container .swiper-slide:hover .pic img{transform: scale(1.1);-webkit-transform: scale(1.1);}
  .box2 .swiper-container .swiper-slide:hover .info h4{color:#9C3030;}
  .box2 .swiper-container .swiper-slide:hover .info .iconfont{opacity: 1;}
  .box2 .title{margin-bottom:40px;}
  .box2 .title h2 em{display: block;font-size:25px;}
  .box2 .title h2:before{top:22px;left:-80px;}
  .box2 .title h2:after{bottom:4px;}
  .box2 .w12 a.prev,.box2 .w12 a.next{width:38px;height:38px;border:1px solid #999;border-radius: 50%;font-size:24px;color:#999;position: absolute;top:50%;margin-top:-20px;transition: all .4s;-webkit-transition: all .4s;line-height:38px;text-align: center;}
  .box2 .w12 a.prev{left:-70px;}
  .box2 .w12 a.next{right:-70px;}
  .box2 .w12 a.prev:hover,.box2 .w12 a.next:hover{color:#9C3030;border-color: #9C3030;}
  .box2 .more{width:169px;height:48px;display: block;border-radius: 25px;line-height:48px;margin:40px auto 0;font-size:14px;color:#fff;background:#9C3030;text-align: center;transition: all .4s;-webkit-transition: all .4s;border:1px solid #9C3030;}
  .box2 .more i{margin-left:5px;vertical-align: middle;}
  .box2 .more:hover{background:#fff;color:#9C3030;border-color: #9C3030;}
  .box3 { padding-top: 70px;width: 100%; max-width: 1920px; margin: 0 auto;} 
  .box3 .title{margin-bottom:40px;}
  .box3 .title h2 em{display: block;font-size:25px;}
  .box3 .title h2:before{top:22px;left:-80px;}
  .box3 .title h2:after{bottom:4px;}
  .styleList{overflow:hidden; clear:both;margin-bottom:70px;}
  .styleList ul{ overflow:hidden; zoom:1; }
  .styleList ul li{ width:330px; float:left; margin:0 13px;  display:inline; }
  .styleList ul li img{ width:330px;height:230px;border-radius: 8px;object-fit: cover;display: block;}
  .styleList ul li a p{font-size:16px;margin-top:15px;color:#333;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
@media screen and (max-width: 1600px){
  .box2 .swiper-container{margin:0 60px;}
  .box2 .w12 a.prev{left:0;}
  .box2 .w12 a.next{right:0;}
  .banner .swiper-container .swiper-slide img{object-fit: fill;}
}
@media screen and (max-width: 1420px) {
  .w12{width:98%;margin:0 auto;}
  
}
@media screen and (max-width: 1350px){
  .box1 .fl{width:55%;}
  .about_pics .swiper-slide img{width:100%;}
  .banner .swiper-container .swiper-pagination{bottom:36px;}
  .box1,.box2{padding-top:50px;}
  .box3{padding-top:40px;}
  .styleList{margin-bottom:40px;}
}

@media screen and (max-width: 1200px){ 
  .styleList ul li{width:260px!important;}
  .styleList ul li img{width:260px;height:180px;}
  .box1 .fr .about_info .more{margin-top:20px;}
  .title h2:after{right:-115px;}
}
@media screen and (max-width: 1024px){
  .box1 .fl{width:757px;margin:0 auto;position: absolute;bottom:0;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);}
  .box1 .fr{position: static;width:100%;}
  .box1 .fr .bd{margin-left:0;}
  .box1 .fr .about_info {padding: 36px 4.6%;height: auto;}
  .box1 .fr .about_info .about_txt{height:auto;}
  .box1 .w12{padding-bottom:560px;}
  .about_pics .btnbox{right:0;}
  
}
@media screen and (max-width: 768px){
  .box1 .fl{width:100%;}
  .about_pics .swiper-slide img{width:100%;height:auto;}
  .banner{display: none;}
  .mbanner{display: block;}
  .mbanner .swiper-slide img{display: block;width:100%;}
  .mbanner .swiper-pagination-bullet{background:#fff;}
  .mbanner .swiper-pagination-bullet-active{background:#9C3030;}
  .box1, .box2{padding-top:.5rem;}
  .title{margin-bottom:.36rem;}
  .title h2{font-size:.42rem;line-height:.48rem;}
  .title h2 em{font-size:.32rem;}
  .title h2:before{width:.59rem;height:.23rem;left:-.84rem;background-size: 100%;}
  .title h2:after{width:1.26rem;height:.28rem;background-size: 100%;bottom: -.08rem;right: -1.2rem;}
  .box1 .fr .about_info{padding:.36rem 4.6%;}
  .box1 .fr .about_info p{font-size:.28rem;line-height:.46rem;}
  .box1 .fr .about_info p:first-child{margin-bottom:.1rem;}
  .box1 .w12{padding-bottom:5.7rem;}
  .box1 .fr .about_info .more{font-size:.26rem;line-height:.46rem;margin-top:.2rem;width:1.38rem;}
  .box1 .fr .about_info .more i{font-size:.26rem;}
  .about_pics .num{margin-top:.2rem;}
  .about_pics .btnbox a{margin-left:.2rem;}
  .about_pics .num{width:1rem;height:.48rem;line-height:.48rem;}
  .box2 .title{margin-bottom:.3rem;}
  .box2 .swiper-container .swiper-slide .pic{height:auto;}
  .about_pics .btnbox a{width:.48rem;height:.48rem;line-height:.48rem;font-size:.26rem;}
  .box2 .swiper-container{margin:0 .6rem;}
  .box2 .w12 a.prev, .box2 .w12 a.next{width:.38rem;height:.38rem;line-height:.38rem;font-size:.24rem;}
  .box2 .swiper-container .swiper-slide .info{padding:.2rem 5.7%;height:auto;}
  .box2 .swiper-container .swiper-slide .info h4{font-size:.3rem;}
  .box2 .swiper-container .swiper-slide .info p{font-size:.26rem;line-height:.36rem;height:.72rem;margin:.3rem 0;}
  .box2 .swiper-container .swiper-slide .info span{font-size:.28rem;}
  .box2 .more {
    width: 2.6rem;
    height: .74rem;
    display: block;
    border-radius: .39rem;
    line-height: .74rem;
    margin: .4rem auto 0;
    font-size: .26rem;
}
.box3{padding-top:.4rem;}
.styleList ul li {width:2.6rem!important;margin:0 .1rem;}
.styleList ul li img{width:2.6rem;height:1.8rem;border-radius:.08rem;}
.styleList ul li a p{font-size:.28rem;margin-top:.15rem;}
.styleList{margin-bottom: .4rem;}
.box2 .title h2:before,.box3 .title h2:before {
  top: .22rem;
  left: -.8rem;
}
.box2 .title h2:after,.box3 .title h2:after {
  bottom: .04rem;
}
.box3 .title{margin-bottom:.3rem;}
}