.slideBox{ 
  width:100%;
  overflow:hidden; 
  position:relative; 
  margin:0 auto;
  background: #000;
  padding-top: 105px;
}
.slideBox .bd{ 
  position:relative; 
  height:100%;
}
.slideBox .bd li{ 
  vertical-align:middle; 
}
.slideBox .bd img{ 
  width:100%; 
  height: auto;
  display:block;  
  animation: changeScale 1 2.5s;
}
.slideBox .hd{ 

  overflow:hidden; 
  position:absolute; 
 width:100%; 
 text-align: center;
  bottom:21px; 
  z-index:1; 
}
.slideBox .hd ul{ 
  overflow:hidden; 
  zoom:1; 
  color:#fff; 
   width:100%; 
 text-align: center;
}
.slideBox .hd ul li{ 
  display: inline-block;
  margin-right:10px;  
  width:44px; 
  height:4px; 
  background:#fff; 
  cursor:pointer; 
}
.slideBox .hd ul li.on{ 
  height: 8px;
}
.in-pro{ width: 100%; background: #f1f1f1; padding: 40px 0 60px 0; }
.in-ti{ width: 100%; text-align: center; color: #323232; font-size: 36px; font-weight: bold; padding-bottom: 30px;}
.in-ti span{ color: #999999; font-family: "Arial"; display: block; font-weight: normal; font-size: 14px;}
.pro-xuan{ width: 100%; text-align: center; }
.pro-xuan li{ display: inline-block; cursor: pointer; width: 15%; text-align: center; line-height: 49px; border: 1px solid #a6a6a6; font-size: 16px; border-radius: 4px; margin-right: 1%; }
.pro-xuan li.hover{color:#fff; background: #d92429; border: 1px solid #d92429;}
.Contentbox{clear:both; padding:0px 0 0 0;}

  /* 本例子css */
    .in-pro01{ width:100%; overflow:hidden; position:relative; }
    .in-pro01 .bd{ position:relative; z-index:0;  }
    .in-pro01 .bd li{ zoom:1; vertical-align:middle; }

    /* 下面是前/後按钮代碼，如果不需要删除即可 */
    .in-pro01 .prev{ position:absolute; left:1%; top:50%; margin-top:-25px; display:block; width:53px; height:53px; background:url(../image/prev.png) ; }
    .in-pro01 .next{ position:absolute; right:1%; top:50%; margin-top:-25px; display:block; width:53px; height:53px; background:url(../image/next.png) ; }
    .in-pro01 .prev:hover{ background:url(../image/prev01.png) ; }
    .in-pro01 .next:hover{ background:url(../image/next01.png) ; }
    .in-pro01 .prevStop{ display:none;  }
    .in-pro01 .nextStop{ display:none;  }
.in-pp01{ width: 46%; }
.pp01-ti{ font-weight: bold; padding-bottom: 55px; }
.pp01-ti h1{ color: #d92429; font-size: 30px; }
.pp01-ti p{ color: #262626; font-size: 36px; padding:10px 0; }
.pp01-ti span{ font-size: 18px; font-weight: normal; color: #d92429; }
.in-pp01 dl dt{ border-bottom: 1px solid #c6c6c6; font-size: 18px; padding-bottom: 15px; margin-bottom: 15px; }
.in-pp01 dl dd p{ width: 80%; font-size: 16px; padding:15px 0; }
.in-pp01 dl dd a{ display: inline-block; background: #d92429; color: #fff; padding: 10px 37px; font-size: 16px; border-radius: 50px; }
.in-pp02{ width: 47%; }
.in-pp02 img{ max-width: 100%; }
.in-ab{ padding-top: 50px; }
.in-ab-xi{ background: url(../image/bg.jpg) repeat; position: relative; top:-50px; z-index: 1; padding-top: 35px;}
.in-ab-icon{ width: 100%; text-align: center; padding-bottom: 44px; }
.in-ab-icon li{ display: inline-block; font-size: 18px; text-align: center; padding: 0 2%;}
.in-ab-icon li a{ display: block; }
.in-ab-icon li p{ width: 102px; height: 102px; padding-bottom: 20px; transition-duration: .5s; }
.in-ab-icon li:nth-child(1) p{ background: url(../image/icon01-1.png) no-repeat center center; }
.in-ab-icon li:nth-child(1):hover p{ background: url(../image/icon01-1.png) no-repeat center center; }
.in-ab-icon li:nth-child(2) p{ background: url(../image/icon02.png) no-repeat center center; }
.in-ab-icon li:nth-child(3) p{ background: url(../image/icon03.png) no-repeat center center; }
.in-ab-icon li:nth-child(4) p{ background: url(../image/icon04.png) no-repeat center center; }
.in-ab-icon li:nth-child(2):hover p{ background: url(../image/icon02-1.png) no-repeat center center; }
.in-ab-icon li:nth-child(3):hover p{ background: url(../image/icon03-1.png) no-repeat center center; }
.in-ab-icon li:nth-child(4):hover p{ background: url(../image/icon04-1.png) no-repeat center center; }
.ab-nr-lr{ width: 54%; overflow: hidden; background: #000; }
.ab-nr-lr img{ width: 100%; display: block; transition-duration: .5s; }
.ab-nr-lr:hover img{ opacity: .5; transform: scale(1.1,1.1); }
.ab-nr-ri{ width: 45.5%; }
.ab-nr-ri img{width: 100%; display: block; transition-duration: .5s;}
.ab-nr-ri ul li{ float: left; width: 49.5%; margin-right: 1%; overflow: hidden; background: #000; }
.ab-nr-ri ul li:hover img{ opacity: .5; transform: scale(1.1,1.1); }
.h-img{ margin-bottom:1%; position: relative; }
.h-img dl { color: #fff; position: absolute; top:50%; transform: translateY(-50%); width: 80%; left: 5%; }
.h-img dl dt{ font-size: 16px; padding-top:15px; }
.h-img dl dd p{ font-size: 14px; line-height: 2; padding: 20px 0; }
.h-img dl dd a{ color: #fff; border: 1px solid #fff; display: inline-block; padding:5px 40px; border-radius: 50px; transition-duration: .5s; }
.h-img dl dd a:hover{ background: #d92429; }
.in-new{ padding: 40px 0; }

.new-more{ display: inline-block; text-align: center; background: #d7121b; color: #fff; padding:10px 50px; border-radius: 50px; margin-top: 50px;}
.new-more:hover{ background: #232323; color: #fff; }


@media (min-width: 1441px) {
 .in-new01 h1{ font-size:16px; min-height:24px;}
 .pro-xuan li{ width: 12%; font-size: 18px;}  
 .in-pp01 dl dt{font-size: 30px;} 
 .in-pro01 .prev{ left:5%;}
.in-pro01 .next{right:5%;} 
.in-ab-icon li{padding: 0 1%;}
.h-img dl { width: 70%; left: 5%; }
.h-img dl dt{ font-size: 24px; }
.h-img dl dd p{ font-size: 18px; padding: 30px 0; }
.in-new-list dl dd p span{ float: right; }
}


/*在992和1199像素之間的屏幕裏,這裏的樣式才生效*/
@media (min-width: 992px) and (max-width: 1199px) {
.in-pro01 .prev{ left:3%;}
.in-pro01 .next{right:3%;} 
}




/*在768和991像素之間的屏幕裏,這裏的樣式才生效*/
@media (min-width: 768px) and (max-width: 991px){


}

/*在480和767像素之間的屏幕裏,這裏的樣式才生效*/
@media (min-width: 480px) and (max-width: 767px) {
 .slideBox{ padding-top: 50px;}
}
/*在小於480像素的屏幕,這裏的樣式才生效*/
@media (max-width: 479px) {
  .slideBox{ padding-top: 50px;}
  .slideBox .hd ul li{ width:24px; height:2px; }
.slideBox .hd ul li.on{ height: 4px;}
.pro-xuan li{ width: 22%; font-size: 14px; line-height: 1.5;}
.in-ti{ font-size: 24px; padding-bottom:10px; }
.in-pp01{ width: 100%; }
.Contentbox{ padding: 0; }
.pp01-ti h1{ font-size: 24px; }
.pp01-ti p{ font-size: 20px; }
.pp01-ti{ padding-bottom: 20px; }
.in-pp01 dl dt{ font-size: 14px; }
.in-pp02{ width: 100%; padding-top: 20px; padding-bottom: 30px; }
.in-pro01 .prev{ right:16%; top:auto; bottom: 0; width:33px; height:33px; background:url(../image/prev.jpg) ;  left: auto; background-size: contain; }
  .in-pro01 .next{  right:3%; top:auto; bottom: 0; width:33px; height:33px; background:url(../image/next.jpg) ; background-size: contain; }
.in-pro01 .prev:hover{ background-size: contain; }
.in-pro01 .next:hover{ background-size: contain; }
.in-ab-icon li{ width: 20%; font-size: 14px; }
.in-ab-icon li p{ width: 60px; height: 60px; }
.in-ab-icon li:nth-child(1) p{ background-size: contain;}
.in-ab-icon li:nth-child(2) p{ background-size: contain;}
.in-ab-icon li:nth-child(3) p{ background-size: contain;}
.in-ab-icon li:nth-child(4) p{ background-size: contain;}
.ab-nr-lr{ width: 100%; }
.ab-nr-ri{ width: 100%; margin-top: 3px; }
.h-img dl{ width: 90%; }
.h-img dl dd p{ padding:5px 0; line-height: 1.3; }
.h-img dl dd a{ padding:5px 15px; }
.in-new{ padding:0 0 20px 0; }
.in-new-list dl{ width: 100%; margin:0 0 10px; }
}