@charset "utf-8";

.more a{ position: relative; padding: 0 40px;  display: inline-block; line-height: 40px; font-size: 14px; text-align: center; border-color: #fff; color:var(--default); transition: .3s;  border-radius: 60px; text-transform: uppercase; transition: .3s;}
.more a span{position: relative;}
.more a span i{position: absolute; top: 50%; left: -25px; margin-top:-1px; width: 6px; height: 6px; border-top: 1px solid var(--default); border-right: 1px solid var(--default); transform: rotate(45deg) translateY(-50%); transition: .3s;}
.more a:hover{background-color: var(--default); border-color: var(--default); color: #fff;}
.more a:hover i{ left: -20px; border-color: #fff;}

.more-reverse a{background-color: var(--default); color: #fff; border: 1px solid var(--default);}
.more-reverse a span i{border-color: #fff;}
.more-reverse a:hover{background-color: #fff; color: var(--default);border-color: #fff;}
.more-reverse a:hover i{border-color: var(--default);}


.more-lager a{padding: 0 80px;}
.more-border a{border: 1px solid #333; color: #333;}
.more-border a span i{border-color: #333;}
.more-border a:hover{background: none; color: var(--default);}
.more-border a:hover i{ left: -15px; border-color: var(--default);}

.more-white a{border-color: #fff; color: #fff; }
.more-white a span i{border-color: #fff;}
.more-white a:hover{border-color: #fff; color: #fff; }
.more-white a:hover span i{border-color: #fff;}

@media (max-width:768px) {
	.more-lager a{padding: 0 50px;}
}
 
/* banner */
.index-banner{ margin: 0 auto; overflow: hidden;}
.index-banner .swiper-slide img{width: 100%;}

@media (max-width: 768px) {
	.index-banner{margin: 0 -15px;}
}


/* product */
.index-product-swiper{ position: relative; margin-top: 30px; padding-bottom: 30px; width: 100%; overflow: hidden;}
.index-product-swiper .swiper{width: 100%; height: 720px; padding-bottom: 10px; overflow: hidden;}
.index-product-swiper .swiper .swiper-slide{ height: calc((100% - 30px) / 2);}

.index-product-swiper .swiper-pagination-bullet {width: 30px; height: 4px; border-radius: 2px;}
.index-product-swiper .swiper-pagination-bullet-active{background-color: var(--default);}

.index-product-item{position:relative; display: block; border: 1px solid #ccc;background-color: #fff; transition: .3s;}
.index-product-pic{ align-items: center; justify-content: center; height: 230px; padding: 15px; }
.index-product-pic img{max-width: 100%; max-height: 100%;}

.index-product-logo{position:absolute; top:15px; left:15px; width:20%;}
.index-product-logo svg{width:100%; fill:#106AB2;}

.index-product-content{ padding: 10px 20px 10px;}
.index-product-title h3{border-top: 1px solid #ccc; padding-top: 10px; line-height: 30px; height: 40px; font-size: 18px; overflow: hidden;}
.index-product-parm { position: relative; margin-top: 10px; padding-left: 55px; height:25px;overflow: hidden;}
.index-product-parm::before{position: absolute; top: 0; left: 0; content: "OE No.:";} 
/*  */
.index-product-item:hover{background-color: var(--default);}
.index-product-item:hover .index-product-title h3,
.index-product-item:hover .index-product-parm::before,
.index-product-item:hover .index-product-parm p {color: #fff;}

.index-product-item:hover .index-product-logo svg{fill:#fff;}
/*  */
.index-about-bg{ margin-top: 100px; padding: 50px 100px; background-color: var(--default);}

.index-about-left{width: 40%;}
.index-about-head .swiper-slide img{width: 100%;}

.index-about-bottom {margin-top: 15px;}
.index-about-bottom .swiper-slide img{width: 100%; opacity: 0.5; cursor: pointer;}
.index-about-bottom .swiper-slide-thumb-active img{opacity: 1;}

.index-about{align-items: center; background-color: #FAFCFC;}
 
.index-about-content{ flex: 1; padding-left: 50px; }
.index-about-title{padding-bottom: 40px; color: #fff;}
.index-about-title div{ margin-top: 20px;}
.index-about-title div p{color:#fff;}
@media (max-width: 1400px) {
	.index-about-bg{ padding: 50px 80px;}
}

@media (max-width: 1200px) {
	.index-about-bg{ margin-top: 50px; padding: 50px;}
}

@media (max-width: 960px) {
	.index-about-bg{ padding: 30px;}
	.index-product-swiper .swiper-pagination-bullet {width: 20px;}

}

@media (max-width: 768px) {
	.index-about-left{width: 100%;}
	.index-about-content{ margin-top: 30px; width: 100%; padding-left: 0; }
	
		.index-product-swiper .swiper-pagination-bullet {width: 10px;}
}

@media (max-width:640px) {
	.index-about-bg{ padding: 20px;}
.index-about-title{padding-bottom: 20px; color: #fff;}

}


/*  */
.index-parenter-lists{position:relative; margin-top: 30px; overflow:hidden; }
.index-parenter-lists ul li{width: 10%;}
.index-parenter-lists ul li .pic{ padding:0 18%; text-align:center; }
.index-parenter-lists ul li .pic img{width: 100%;}

@media (max-width:768px) {
	.index-parenter-lists ul li{width: 16.66%;}
}

@media (max-width: 640px) {
	 .index-parenter-lists ul li{width: 25%;} 
}



/*  */
.index-support{ margin-top: 50px; padding: 50px 0; background-color: var(--default);}
.index-support ul{justify-content: center;}
.index-support ul li{ width: 33.33%; padding: 0 15px; text-align: center;}
.index-support ul li>i{font-size: 64px; color: #fff;}
.index-support ul li h3{font-size: 18px;color: #fff;}

@media (max-width: 768px) {
	.index-support{ margin-top: 30px; padding: 30px 0;}
}

@media (max-width: 640px) {
	.index-support ul li{ width: 50%;}
	.index-support ul li h3{font-size: 16px;}
	.index-support ul li>i{font-size: 32px;}

}