@charset "utf-8";
/*-----------------------------------首页内容----------------------------------------------------*/
/*-------
banner
-------*/
#index-banner{ position:relative;}
#index-banner a{
	display:block;
	width:100%;
	background-color:#666;
}
#index-banner .swiper-slide>a img{
		width:100%;
		height:auto;
		min-height:100%;
		transition:0.6s linear 1s;
		transform:scale(1.2,1.2);
		}		
#index-banner .swiper-slide-active a img, #index-banner .swiper-slide-duplicate-active a img{
		transition:1s linear;
		transform:scale(1,1);
}		
#index-banner .swiper-button-next,#index-banner .swiper-button-prev{
	font-size:24px;
	color:#fff;
}
#index-banner .banner-img{ width:100%; overflow:hidden;}
#index-banner .swiper-button-next:after,#index-banner .swiper-button-prev:after{
	font-size:24px;
	color:#fff;
}
.banner1{ position:absolute; right:6%; top:10%;}
.banner2{ position:absolute; left:26%; top:30%;}
/*-------
application
-------*/
#index-app{ position:relative; background-color:#f7f7f7; padding-top:8rem; padding-bottom:8rem; }
.indexappbg{ position:absolute; left:0; top:0; width:100%; height:90%; background-color:#f7f7f7; background:url(../images/index/app/appbg.webp) no-repeat; background-size:100% auto;}
#index-app .sy-container{ position:relative; z-index:3; padding-top:5rem;}
#index-app a{ text-decoration:none;}
.indexappcont{ position:relative; z-index:5; max-width:100%; padding-top:2rem;}
#index-app h2,#index-app p{ color:#c7000d;}
#index-app p{ text-align:center; color:#666;}
#indexswiper-app{ position:relative; padding-top:10rem; justify-content: center;}
.index-appitem img{ border-radius:5px; overflow:hidden; box-shadow: 0 0 6px rgba(25,25,25,0.6);}
.appitem-txt{ padding-top:1.4rem;text-align:center; color:#333;}
#index-app .commore{ display:block; width:22rem; margin:0 auto; margin-top:6rem;}	
#indexswiper-app .swiper-button-next,#indexswiper-app  .swiper-button-prev{
	top:60%;
	font-size:24px;
	color:#fff;
}
#indexswiper-app .swiper-button-next:after,#indexswiper-app .swiper-button-prev:after{
	top:60%;
	font-size:24px;
	color:#fff;
}
/*-------
products
-------*/
#index-products{ padding-top:8rem; padding-bottom:10rem;}
#index-products h1{
	position:relative;
	padding-top:1.4rem;
	font-size:10rem;
	color:rgba(238,238,239,0.6);
	font-family:"Arial Black", Gadget, sans-serif;
	letter-spacing:2rem;
	text-align:center;
	text-transform:uppercase;
	white-space:nowrap;
}
#index-products h2{ position:relative; z-index:5; margin-top:-1.2rem;}
#index-products p{ padding-top:2rem;  text-align:center; letter-spacing:5px;}
.index-pro-list ul{display: -webkit-flex; display: flex;  justify-content:center; align-items: center; margin-top:8rem;}
.index-pro-list ul li{ padding:0.3em 2rem; margin:0 1.2rem;border-radius:5px; border:#333 solid 1px; flex:0 0 auto;text-align:center; display:block;}
.index-pro-list ul li a{ text-decoration:none; color:#333; } 
.index-pro-list ul li:hover{ border:none; background-color:var(--web-theme-color);}
.index-pro-list ul li a:hover{ color:#fff;}

/*swiper*/
#indexpro-cont{position:relative; margin-top:8rem; padding:0 6rem;}
.indexprobg{ 
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:100%;
	z-index:1;
	display:none;
}
#indexpro-cont .swiper-button-next,#indexpro-cont .swiper-button-prev{
	width:50px;
	height:50px;
	padding:1.6rem;
	border-radius:50px;
	border:var(--web-theme-color) solid 3px;
	font-size:2.4rem;
	font-weight:bold;
	color:var(--web-theme-color);
}

#indexpro-cont  .swiper-slide a{
	display:block;
	color:#333;
	text-decoration:none;
}
#indexpro-cont  .swiper-slide a .tabs-txt{ text-align:center;} 
.text {
  color: white;
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#indexpro-cont h3{ line-height:1.4em;}
#indexpro-cont h4{ color:#fff; padding-top:2rem;}
#indexpro-cont ul li{ line-height:1.5em;}
#indexpro-cont .indexprobg .wrap-flex{
 position: absolute;
  left: 0;
  bottom: 0;
  width:100%;
  background-color:#232323;
     opacity: 1;
  color:#fff;
	display: -webkit-flex; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:8px 2rem;
}

.dcnn{
				display: block;
				width:16rem;
				padding:0.4em 0;
				text-decoration: none;
				color: #fff;
				font-weight: bolder;
				text-align:center;
				box-sizing: border-box;
				-ms-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				transition: all 0.3s linear;
				position: relative;
				overflow: hidden;
			
}
.dcnn i{
	left:0;
	position:relative;
	transition: .2s ease-in-out;
	animation: hand-anim1 1s linear infinite;
}
@keyframes hand-anim1 {
				0% {
					left: -60px;
				}
				50%,
				100% {
					left: 0;
				}
			}

			.dcnn:hover {
				background: #d80c18;
				color: #fff;
				border-radius: 5px;
				box-shadow: 0 0 5px #d80c18, 0 0 25px #ef8641, 0 0 50px #ef8641, 0 0 100px #d80c18;
				background-position: 20px center;
			}
			
			.dcnn span {
				position: absolute;
				display: block
			}
			
			.dcnn span:nth-child(1) {
				top: 0;
				left: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(90deg, transparent, #fff);
				animation: btn-anim1 1s linear infinite;
			}
			
			@keyframes btn-anim1 {
				0% {
					left: -100%;
				}
				50%,
				100% {
					left: 100%;
				}
			}
			
			.dcnn span:nth-child(2) {
				top: -100%;
				right: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(180deg, transparent, #fff);
				animation: btn-anim2 1s linear infinite;
				animation-delay: .25s
			}
			
			@keyframes btn-anim2 {
				0% {
					top: -100%;
				}
				50%,
				100% {
					top: 100%;
				}
			}
			
			.dcnn span:nth-child(3) {
				bottom: 0;
				right: -100%;
				width: 100%;
				height: 2px;
				animation: btn-anim3 1s linear infinite;
				animation-delay: .5s
			}
			
			@keyframes btn-anim3 {
				0% {
					right: -100%;
				}
				50%,
				100% {
					right: 100%;
				}
			}
			
			.dcnn span:nth-child(4) {
				bottom: -100%;
				left: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(360deg, transparent, #fff);
				animation: btn-anim4 1s linear infinite;
				animation-delay: .75s
			}
			
			@keyframes btn-anim4 {
				0% {
					bottom: -100%;
				}
				50%,
				100% {
					bottom: 100%;
				}
			}
#indexpro-cont .swiper-slide-active .indexprobg{background-color:var(--web-theme-color);display:block; opacity: .8;}
#indexpro-cont .swiper-slide-active .tabs-txt{ display:none;}
#indexpro-cont .swiper-slide:hover .indexprobg{ background-color:var(--web-theme-color); display:block; opacity: .8;}
#indexpro-cont .swiper-slide:hover .tabs-txt{ display:none;}


/*moblie*/
#index-mobileproducts{ display:none;}
#indexmobilepro-cont{ margin-top:3rem; padding-bottom:6rem;}
.indexsmallprobg{position:relative;width:100%; background-color:var(--web-theme-color);}
#indexmobilepro-cont  .swiper-slide a{display:block;color:#333;text-decoration:none;}
.mobliepro-txt{ padding:1.6rem;}
.mobliepro-txt h3{color:#fff;}
.mobliepro-txt h4{ color:rgba(255,255,255,.6); padding-top:2rem;}
.mobliepro-txt ul li{ line-height:1.8em; color:rgba(255,255,255,.6);}
#indexmobilepro-cont .indexsmallprobg .wrap-flex{
  background-color:#232323;
     opacity: 1;
  color:#fff;
	display: -webkit-flex; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:8px 2rem;
}
#indexmobilepro-cont  .swiper-slide-active .indexsmallprobg{
  background-color:var(--web-theme-color);
  display:block; 
   opacity: .8;

}
#indexmobilepro-cont  .swiper-slide:hover .indexsmallprobg{
	  background-color:var(--web-theme-color); 
	  display:block; 
   opacity: .8;
	
}
#indexmobilepro-cont  .swiper-pagination .swiper-pagination-bullet  {
	        width: 10px;
        height: 8px;
        display: inline-block;
        border-radius:22%;
	  background-color:#333;
}
#indexmobilepro-cont  .swiper-pagination .swiper-pagination-bullet-active{
	   width: 10px;
        height: 8px;
        display: inline-block;
        border-radius: 22%;
	background-color:var(--web-theme-color);
	}
/*-------
supplier
-------*/

#index-supplier{ position:relative; padding:6rem 0; background-color:#313035;}
.index-supplier-icon{ position:absolute; left:0; top:0; width:100%;  display: -webkit-flex;  display: flex; justify-content: center; align-items: center;}
#index-supplier h2{ padding-top:2rem; color:#aeaeae; }
#index-supplier .grid{grid-template-columns:repeat(7,10%);  justify-content:center; align-items: center;grid-column-gap:20px;margin-top:4rem;}

/*-------
about
-------*/

#index-about{ padding-top:10rem;} 
#index-about h1{font-size:12rem; color:rgba(238,238,239,0.6); text-align:center; letter-spacing:0.3em; text-transform:uppercase;}
#index-about .grid{grid-template-columns:repeat(2,1fr);  grid-column-gap:20px; margin-top:12rem;}
.index-about-cont img{display:block; background-color:#263448; box-shadow: 3rem 2rem 0 rgba(38,52,72,1);}
.index-about-cont .wrap-flex{align-items: center;}
.index-about-title{ border: var(--web-theme-color) solid 6px; padding:4rem 1.6rem; font-size:6rem; font-weight:bold;}
.index-about-txt{ margin-left:2rem;  font-size:2.8rem; line-height:1.6em;}
.index-about-cont h2{ padding:4rem 0; text-align:left; }
.index-about-cont h2 span{color:var(--web-theme-color);}
.index-about-cont p{ text-indent:1.6rem;}

/*-------
FAQ
-------*/

#index-FAQ{ position:relative; background-color:#313131; background-size:cover;}
#index-FAQ  .grid{grid-template-columns:repeat(2,auto);   justify-content:center; }
.index-faq-title{ position:absolute; left:-12%; top:50%; text-transform:uppercase; font-size:8rem; color:rgba(255,255,255,.3);transform: rotate(90deg);}
.index-faq-cont:first-child{ padding-top:8rem; padding-left:16rem;}
.index-faq-cont h2{ text-align:left;color:var(--web-theme-color); padding:4rem 0;}
.index-faq-cont ul li{ color:#fff; line-height:1.8em;}
.index-faq-cont ul li:last-child{width:min(100%,700px);}
.index-faq-cont:last-child{  padding:4rem; overflow:hidden; background-color:var(--web-theme-color);}

/*-------
news
-------*/

#index-news h2{
	text-align:center;
	padding:15px 0;
}	
#index-news .grid{grid-template-columns:repeat(2,auto);  grid-column-gap:4rem; margin-top:6rem;}
.news-cont{
	position:relative;
	overflow:hidden;
}
.news-first{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:20px 0;
	background-color:rgba(216,12,24,1);
}
.news-cont a{
		color:#fff;
}
.news-cont a img{ width:100%; overflow:hidden;}
.news-first a:hover{
	color:#E62129;}
	.news-cont a:hover img{
		-webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
	}
.news-cont a:hover img{
	-webkit-transform: scale3d(1.1, 1.1, 1);
     transform: scale3d(1.1, 1.1, 1);
}	
.news-cont .wrap-flex{
	justify-content: space-between;
	align-items: center;
	padding: 0 30px;
}
.first-title{
	font-size:1.6rem;
	font-weight:bold;
	color:#fff;}
.newsmore{
	position:relative;
	left:0;
	color:#fff;
	transition: all .5s ease-in-out;
	}
.news-cont a:hover .newsmore{
	left:10px;}	
.news-title{
		 margin-top:1.6em;
		 	font-size:2rem;
	text-align:left ;
	font-weight:bold;
	color:#333;
		 }
.news-title a{
	display:block;
	font-size:1.2em;
	text-align:left ;
	font-weight:bold;
	color:#333;
}	
#index-news em{
	display:inline-block;
	color:#A1A1A1;
	padding:1.2rem 0;
}	
#index-news p a{
	padding-top:1rem;
display:block;
color:#8B8B8C;
	text-decoration:none;
	word-wrap:break-word;
word-break:break-all;}
#index-news p a span{
	color:var(--web-theme-color);
}
#index-news p a:hover span{
	color:#E62129;
	}

#index-news p a:hover{
	color:#E62129;
}
.news-cont  .newsmore{
	display:block;
	margin-top:1rem;
	padding-bottom:2rem;
}
.news-cont a:hover{
		color:#E62129;
}	

/*mobile phone*/
@media (max-width:1600px){
#indexpro-cont .swiper-button-next,#indexpro-cont .swiper-button-prev{
	width:50px;
	height:50px;
	padding:1rem 1.6rem;
	border-radius:100%;
}

}
@media (max-width:1023px){	
#index-banner .banner1{ position:absolute; left:58%;top:18%;}
#index-banner .banner1 img{ width:80%;}
#index-banner .banner2{ position:absolute; left:18%;top:22%;width:100%;}
#index-banner .banner2 img{ width:70%;}

/*application*/
#index-app{ padding-top:0rem; padding-bottom:8rem; }
#indexswiper-app{ padding:0 4rem; padding-top:8rem;}
#indexswiper-app .swiper-button-next,#indexswiper-app  .swiper-button-prev{
	top:70%;
	font-size:24px;
	color:#fff;
}
#indexswiper-app .swiper-button-next:after,#indexswiper-app .swiper-button-prev:after{
	top:70%;
	font-size:24px;
	color:#fff;
}

/*products*/
#index-products h1{ display:none;}
.dcnn{
				display: block;
				width:22rem;
}				
/*swiper*/
#index-products{ display:none;}
#index-mobileproducts{ display:block;}
#index-mobileproducts p{ text-align:center;}
.index-pro-list ul{ margin-top:3rem;}
#indexmobilepro-cont{ padding-top:2rem;}
#index-mobileproducts .index-pro-list ul{ display:grid; grid-template-columns:repeat(2,auto); grid-row-gap:2rem;} 
#indexmobilepro-cont .mobliepro-txt h3{ font-size:2.2rem;}
#indexmobilepro-cont .mobliepro-txt h4{ font-size:1.8rem;}
/*supplier*/
#index-supplier .grid{grid-template-columns:repeat(4,1fr);  justify-content:center; align-items: center;grid-column-gap:20px;grid-row-gap:20px; }

/*about*/
#index-about{ padding-top:6rem;} 
#index-about h1{ display:none;}
#index-about .grid{grid-template-columns:1fr;  grid-column-gap:0; grid-row-gap:10rem; margin-top:0;}
/*FAQ*/
#index-FAQ  .grid{grid-template-columns:auto;   justify-content:center;grid-row-gap:4rem; }
.index-faq-title{ display:none;}
.index-faq-cont:first-child{ padding:4rem 0; padding-left:2rem;}
/*news*/
#index-news .grid{grid-template-columns:auto;  grid-column-gap:0; grid-row-gap:4rem; margin-top:4rem;}
.first-title{ font-size:1.2em;}
.news-title{ font-size:1.2em;}

}