@import url(iconfont.css);

:root{--color:#f3303b;--fontcolor:#000000;--summarycolor:#666666;--fontblod3:300;--fontblod4:400;--fontblod5:500;--fontblod6:600;--fontblod7:700;--fontfamily:"Roboto","Lato","Open Sans","Poppins","Oswald","Noto Sans","Montserrat",sans-serif}

::-webkit-scrollbar-track{box-shadow:inset 0 0 5px rgba(0,0,0,.1);border-radius:10px;background:rgba(122,122,122,.1)}
::-webkit-scrollbar-thumb{box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:#d7d7d7}
::-webkit-scrollbar{width:8px;height:8px}
*,html,body,h1,h2,h3,h4,h5,h6,table,th,td,ol,ul,li,dl,dt,dd,div,p{padding:0px;margin:0px;box-sizing:border-box}

@media (max-width:1024px){
.l-wrap{padding:0px 15px}

}

.index>main>section{position:relative}
.home-title{font-size:var(--hometitle);font-weight:var(--fontblod5);color:var(--fontcolor);text-align:center;text-transform:capitalize}
.home-more{min-width:180px;height:56px;background:var(--color);font-weight:var(--fontblod5);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;color:#FFF;position:relative;overflow:hidden}
.home-more em{margin-left:10px}
.home-more:hover::after{width:300px;height:300px}
.home-more::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .2s linear;width:0px;height:0px;border-radius:50%;background:rgba(0,0,0,.05)}
.home-about,.home-adv,.home-case,.home-hotproduct,.home-mainproduct,.home-news{
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 1%;
	padding-left: 0px;
}


.home-adv::before{content:"";position:absolute;left:0px;top:0px;width:100%;height:450px;background:var(--homebg);z-index:-1}
.home-adv .des{text-align:center;color:var(--color)}
.home-adv .home-title{color:#FFF}
.home-adv .homeadv-list{margin-top:5%;display:flex;justify-content:space-between;flex-wrap:wrap}
.home-adv .homeadv-list li{
	width:18%;
	background:#FFF;
	text-align:center;
	border-radius:4px;
	box-shadow:0 3px 29px 0 rgba(191,191,191,.35);
	position:relative;
	overflow:hidden;
	z-index:1;
	cursor:pointer;
	padding-top: 30px;
	padding-right: 15px;
	padding-bottom: 30px;
	padding-left: 15px;
}
.home-adv .homeadv-list li::after{z-index:-1;content:"";position:absolute;left:0px;top:0px;width:100%;height:100%;background:var(--color);opacity:0.6;transition:all .2s linear;transform:scale(0)}
.home-adv .homeadv-list li:hover{color:#FFF}
.home-adv .homeadv-list li:hover::after{transform:scale(1)}
.home-adv .homeadv-list li:hover .top{display:none}
.home-adv .homeadv-list li:hover .opacity{opacity:1;visibility:inherit}
.home-adv .homeadv-list li.hover{color:#FFF}
.home-adv .homeadv-list li.hover::after{transform:scale(1)}
.home-adv .homeadv-list li.hover .top{display:none}
.home-adv .homeadv-list li.hover .opacity{opacity:1;visibility:inherit}
.home-adv .homeadv-list li .top em{
	color:var(--color);
	font-size:60px;
transition:all .2s linear}
.home-adv .homeadv-list li .top .img{height:50px;display:flex;align-items:center;justify-content:center}
.home-adv .homeadv-list li .top .title{font-size:20px;font-weight:var(--fontblod5);padding:10px 0px 20px}
.home-adv .homeadv-list li .top .num{font-size:14px;color:#666666; line-height:22px;}
.home-adv .homeadv-list li .opacity{position:absolute;left:0px;width:100%;top:50%;transform:translateY(-50%);padding:0px 20px;opacity:0;visibility:hidden}
.home-adv .homeadv-list li .opacity .title{font-size:18px;font-weight:var(--fontblod5)}
.home-adv .homeadv-list li .opacity .text{padding:10px 0px 30px}
.home-adv .homeadv-list li .opacity .more{display:inline-block;font-weight:var(--fontblod5)}

.home-hotproduct{background:#F4F4F4}
.home-hotproduct #hotproswiper{margin-top:3%;padding-bottom:10px}
.home-hotproduct .hotpro-list .swiper-slide{width:23%;background:#FFF;border-radius:5px;overflow:hidden;border:1px solid #e5e8ed}
.home-hotproduct .hotpro-list .swiper-slide:hover .img img{transform:scale(1.02)}
.home-hotproduct .hotpro-list .swiper-slide:hover .title{color:var(--color)}
.home-hotproduct .hotpro-list .swiper-slide .img{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	background-color: #FFFFFF;
}

.home-hotproduct .hotpro-list .swiper-slide .line2{
	font-size:14px;
	line-height:30px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.home-hotproduct .hotpro-list .swiper-slide .img img{
	width:100%;
	height:100%;
	object-fit:cover;
	background-color: #FFFFFF;
}
.home-hotproduct .hotpro-list .swiper-slide .title{border-top:1px solid #e5e8ed;font-size:18px;font-weight:var(--fontblod5);color:var(--fontcolor);text-align:center;display:flex;align-items:center;justify-content:center;height:100px;padding:0px 15px}
.home-hotproduct .hotpro-button{display:flex;align-items:center;justify-content:center;margin-top:50px}
.home-hotproduct .hotpro-button .hotpro-button-next,
.home-hotproduct .hotpro-button .hotpro-button-prev{margin:0px 10px;width:49px;height:49px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--color);border:2px solid var(--color);color:#FFF}
.home-hotproduct .hotpro-button .hotpro-button-next.swiper-button-disabled,
.home-hotproduct .hotpro-button .hotpro-button-prev.swiper-button-disabled{background:rgba(255,255,255,0);border:2px solid rgba(93,106,128,.3);color:#000}
.home-hotproduct .hotpro-button .hotpro-button-next em,
.home-hotproduct .hotpro-button .hotpro-button-prev em{font-size:18px}


@media (max-width:1280px){
.home-about .l-wrap .about-info .p{margin:30px 0px}
.home-hotproduct .hotpro-list .swiper-slide .title{height:70px;line-height:1.4}}
@media (max-width:1024px){
.home-more{min-width:150px;height:46px}
.home-adv::before{height:400px}
.home-adv .homeadv-list li{padding:20px 10px}
}
@media (max-width:768px){
.home-about,.home-adv,.home-case,.home-hotproduct,.home-mainproduct,.home-news{padding:30px 0px}

.home-adv::before{height:80%}
.home-adv .homeadv-list li{width:48%;margin-bottom:20px}
.home-hotproduct .hotpro-button .hotpro-button-next,.home-hotproduct .hotpro-button .hotpro-button-prev{width:40px;height:40px}}
@media (max-width:500px){

.home-adv .homeadv-list li{width:100%;height:230px}
.home-adv .homeadv-list li .top .title{padding:0px}
.home-hotproduct .hotpro-list .swiper-slide .title{font-weight:400;font-size:16px}

.home-hotproduct .hotpro-button{margin-top:20px}
.home-adv .homeadv-list li .top em{font-size:50px}
}