﻿/*banner*/
.index-banner{ position: relative; width: 100%; /*height: 100vh;*/overflow: hidden;}  
.index-banner .swiper-slide {/*height: 100vh;*/ color: #fff; } 
.index-banner .swiper-slide {position: relative;}
.index-banner .swiper-slide img{width: 100%;}
.index-banner .swiper-slide a{ display: block; width: 100%; height: 100%; }
.index-banner .swiper-pagination-bullet {  width: 22px; height: 22px; opacity: 1; background:url(../images/banner_pag.png) no-repeat center center; } 
.index-banner .swiper-pagination-bullet-active {background:url(../images/banner_pag_acitve.png) no-repeat center center; height: 22px; } 
/* menu */
.index-menu{ width: 100%; height: 2rem; padding: 0.4rem 0;}
.index-menu ul{ display: flex; justify-content: space-around;}
.index-menu ul li{ text-align: center;}
.index-menu ul li .pic{width: 1.36rem; height: 1.36rem; margin-bottom: 0.2rem; border-radius: 1.36rem;}
.index-menu ul li .txt{ font-size: 0.22rem; color: #333; font-weight: bold;}
.index-menu ul li .prokan .pic{background: #f0f0f0 url(../images/menu_prokan.png) no-repeat center center; background-size: 1.36rem auto;}
.index-menu ul li .prokan:hover .pic{background: #f08300 url(../images/menu_prokan_active.png) no-repeat center center; background-size: 1.36rem auto;}
.index-menu ul li .products .pic{background: #f0f0f0 url(../images/menu_products.png) no-repeat center center; background-size: 1.36rem auto;}
.index-menu ul li .products:hover .pic{background: #f08300 url(../images/menu_products_active.png) no-repeat center center; background-size: 1.36rem auto;}
.index-menu ul li .quality .pic{background: #f0f0f0 url(../images/menu_quality.png) no-repeat center center; background-size: 1.36rem auto;}
.index-menu ul li .quality:hover .pic{background: #f08300 url(../images/menu_quality_active.png) no-repeat center center; background-size: 1.36rem auto;}
.index-menu ul li .services .pic{background: #f0f0f0 url(../images/menu_services.png) no-repeat center center; background-size: 1.36rem auto;}
.index-menu ul li .services:hover .pic{background: #f08300 url(../images/menu_services_active.png) no-repeat center center; background-size: 1.36rem auto;}
/* .product */
.index-content{ width: 100%; padding: 0.5rem 0; }
.index-content .index-tt{ max-width: 100%; text-align: center;}
.index-content .index-tt h3{ line-height: 35px; color: #7d7d7d; font-size: 12px; text-transform: uppercase;}
.index-content .index-tt h4{ color: #333333; font-size: 0.36rem; text-transform: uppercase;}
.index-content .index-tt h4 span{ color: #f08300;}
.index-more{ width: 100%; text-align: center;}
.index-more .more{ display: inline-block; width: 1.5rem; height: 0.5rem; border: 1px solid #f08300; line-height: 0.5rem; color: #f08300; font-size: 0.2rem; }
.index-more .more:hover{ background: #f08300;color: #fff; }
.index-pros{background: #f6f7f9;}
.index-pros .index-tt{ margin-bottom: 0.65rem;}
.index-pros .index-tt img{ max-width: 2.92rem;}
.index-pros .box{ width: 100%; margin-bottom: 0.3rem;}
.index-pros .swiper-pros{ position: relative; width: 100%; padding-bottom: 0.65rem;}
.index-pros .swiper-pros .swiper-slide a{ display: block; padding:0.05rem; background: #fff;}
.index-pros .swiper-pros .swiper-slide .pic{ width: 100%; height: 3.55rem; overflow: hidden; text-align: center;}
.index-pros .swiper-pros .swiper-slide .pic img{ width: 100%;transition: all 0.6s;}
.index-pros .swiper-pros .swiper-slide .txt{ width: 100%; padding: 0.2rem 0; text-align: center;}
.index-pros .swiper-pros .swiper-slide .txt h3{ width: 100%; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 30px; font-size: 0.24rem; color: #333;}
.index-pros .swiper-pros .swiper-slide .txt p{width: 100%; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;line-height: 30px; font-size: 0.12rem; color: #666;}
.index-pros .swiper-pros .swiper-slide a:hover{ background: #f08300;}
.index-pros .swiper-pros .swiper-slide a:hover .pic img{transform: scale(1.1);}
.index-pros .swiper-pros .swiper-slide a:hover h3{ color: #fff;}
.index-pros .swiper-pros .swiper-slide a:hover p{ color: #fff;}
.index-pros .swiper-pros .swiper-pagination { height: 15px; background: url(../images/pros-line-bg.png) repeat-x left center; bottom: 0px!important;} 
.index-pros .swiper-pros .swiper-pagination-bullet {  width: 15px; height: 15px; background: #dadada;opacity: 1!important; margin: 0 1.6rem!important;} 
.index-pros .swiper-pros .swiper-pagination-bullet-active {background: #f08300; opacity: 1!important;} 
/* about */
.index-about{ background: url(../images/index_about_bg.png) no-repeat center center;}
.index-about .index-tt{ margin-bottom: 0.3rem;}
.index-about .index-tt img{ max-width: 6.44rem;}
.index-about .index-tt h3{ color: #fff;}
.index-about .index-tt h4{ color: #fff; }
.index-about .box .txt{margin-bottom: 0.25rem; padding: 0.2rem 1.6rem; background: url(../images/index_about_txt_bg.png) no-repeat center center; background-size: 100% auto; line-height:24px; font-size: 14px; color: #e2e2e2; text-align: center;}
.index-about .box ul{ width: 100%; display: flex; justify-content: center; margin-bottom: 0.4rem;}
.index-about .box ul li{ width: 2rem; text-align: center;}
.index-about .box ul li .num{ color: #f08300; font-weight: bold; font-size: 0.36rem;}
.index-about .box ul li p{ line-height: 0.26rem; color:#cacaca; font-size: 0.14rem;}
/* news */
.index-news .index-tt{ width: 100%; margin-bottom: 0.65rem;}
.index-news ul{ display: flex; justify-content: space-between; width: 100%; margin-bottom: 0.45rem;}
.index-news ul li{ width: 4.9rem; background: #f7f7f7;}
.index-news ul li .pic{ width: 4.9rem; height: 3rem; overflow: hidden;}
.index-news ul li .pic img{ width: 100%;transition: all 0.6s;}
.index-news ul li .pic a:hover img{transform: scale(1.1);}
.index-news ul li .txt{ padding:0.1rem 0.2rem 0.2rem 0.2rem;}
.index-news ul li .txt h3{ width: 100%; height: 30px; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.index-news ul li .txt h3 a{ line-height: 30px; color: #333; font-size: 18px;}
.index-news ul li .txt h3 a:hover{color: #f08300;}
.index-news ul li .txt .intro{line-height: 20px; color: #999; font-size: 14px;}
.index-news ul li .txt .time{ width: 100%; margin-top: 0.15rem; display: flex; justify-content: space-between;line-height: 30px; color: #999; font-size: 14px;}
.index-news ul li .txt .time .more{ padding-right: 20px; background: url(../images/icon_arrow_r.png) no-repeat right center;}
.index-news ul li .txt .time .more:hover{ background: url(../images/icon_arrow_r_active.png) no-repeat right center;}



@media screen and ( max-width:1024px ){
	.wal, .wal2, .wal3, .w850, .w300{width:100%;}
	.PC-Box,.nav{ display:none;}
	.head .navIco,.head .searchIco{ display:block;}
	.head{ height:1.0rem; position: relative; background: #fff;}
	.head .wal2{ height: 1.0rem; }
	.head:after{ display: none; }
	.head .logo{ left: 0.3rem; top:0.36rem;}
	.head .logo img{ width: 2.18rem; }
	.footer-bottom{ padding:0.4rem 0;}
	.footer-bottom .wal2{ width: auto; padding: 0 0.3rem; display: block; }
	.footer-bottom .tel{ margin-bottom: 0.1rem;}
	.footer-bottom .contact .fllow{text-align: left; margin-bottom: 0.15rem; }
	.footer-bottom .contact .copyright{ text-align: left;}
	.footer{ height: auto; padding:0.27rem 0;}
	.footer .ft_l{ float: none;display: flex; justify-content: space-between; padding:0 0.3rem;}
	.footer .ft_l .item{ float: none; width: auto;}
	.footer .ft_l .item dt{ padding: 0; margin: 0;}
	.footer .ft_l .item dt:after{position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 0;}
	.footer .item dd ,.footer .ft_r{ display:none;}
	
	.index-content .index-tt img{ max-width: 30px;}

	.index-banner .swiper-pagination-bullet {  width: 18px; height: 18px; opacity: 1; background:url(../images/banner_pag.png) no-repeat center center; background-size: 18px 18px; } 
	.index-banner .swiper-pagination-bullet-active {background:url(../images/banner_pag_acitve.png) no-repeat center center; height: 18px;background-size: 18px 18px; } 	

	.index-pros .swiper-pros .swiper-slide .pic{ width: 100%; height: 100%; overflow: hidden; text-align: center;}
	.index-pros .swiper-pros .swiper-slide .pic img{ width: 100%;transition: all 0.6s;}

	.index-news .box{padding: 0 0.3rem;}
	.index-news ul{ display: block; }
	.index-news ul li{ width: 100%; margin-bottom: 0.3rem;}
	.index-news ul li .pic{ width: 100%; height: auto;}
    .index-about .box .txt{margin-bottom: 0.25rem; padding: 0.2rem 0.6rem; line-height: 24px; background: url(../images/index_about_txt_bg.png) no-repeat center center; background-size: 90% auto; }
    .index-news ul li .txt h3{ width: 100%; height: 30px;}
    .index-news ul li .txt h3 a{ line-height: 30px; color: #333; font-size: 16px;}
    .index-news ul li .txt .intro{line-height: 20px; font-size: 12px;}
}
 




