@keyframes rightb{0%{transform:translateX(-200px);opacity:0}
100%{transform:translateX(0);opacity:1}
}
@keyframes leftb{0%{transform:translateX(200px);opacity:0}
100%{transform:translateX(0);opacity:1}
}
.banner{height:450px;background:#110e20}
.banner_in{width:1200px;margin:0 auto}
.banner_l{width:680px;height:450px;float:left;animation:rightb 1s ease 1;animation-fill-mode:forwards}
.banner_l img{width:680px;height:450px}
.banner_r{width:480px;float:right;animation:leftb 1s ease 1;animation-fill-mode:forwards}
.banner_r h1{font-size:40px;color:#fff;line-height:100px;font-weight:400;margin-top:90px}
.banner_con{height:80px}
.banner_con p{color:#fff;font-size:20px;line-height:40px;opacity:.8}
.banner_tel{margin-top:30px}
.banner_tel a{width:170px;margin-right:20px;color:#fff;line-height:40px;text-align:center;border:1px solid #3d9eff;box-sizing:border-box;background:#3d9eff;display:inline-block;border-radius:3px}
.banner_tel a.sub{color:#000;border:1px solid #fff;background:#fff}
.banner_tel a:hover{background:#3298ff}
.banner_tel a.sub:hover{background:#f5f5f5;}

.index_title{text-align:center;font-weight:400;height:100px;line-height:100px;font-size:30px}
.index_title a{ width:30px; line-height:30px; height:30px; display:inline-block; padding-left:10px;}
.index_title a i{ font-size:26px;}
.index_title a:hover i{ font-size:28px; color:#3298ff;}
.index_info{ text-align:center; height:50px; line-height:50px;}

.prices{ background:#f6f7fc;}
.price{ width:960px; padding:0 0 30px; margin:0 auto; font-size:0px;}
.price button,.price input{ width:300px;padding:0 30px;height:40px;line-height:40px;border-radius:3px;box-sizing:border-box;border:1px solid #eaeaea;outline:0; font-size:16px; margin:0 10px}
.price .canshu{width:300px;margin:0 10px 10px;padding:0 20px;height:40px;line-height:40px;border-radius:3px;box-sizing:border-box;border:1px solid #ddd;outline:0;float:left;font-size:16px;}
.price button{background-color:#FFD401;border:1px solid #FFD401;color:#333;border-radius:3px;}

.price input:focus:invalid{border:1px solid #FFD401;}


.merit{overflow:hidden; margin:50px 0 0;}
.merit ul{width:1200px;margin:0 auto; padding:30px 0 20px;}
.merit ul li{width:299px;float:left;text-align:center;border-right:1px solid #eaeaea}
.merit ul li:last-child{width:300px;border:none}
.merit ul li i{display:block;font-size:60px;color:#3298ff;}
.merit ul li span{display:block;font-size:20px;line-height:40px}
.merit ul li p{font-size:14px;line-height:20px;color:#999}

.product{ width:1200px; margin:30px auto;}
.product li{width:285px;float:left;margin-left:20px;box-shadow:-1px 1px 15px #f2f2f2;transition: all 0.3s ease;}
.product li:first-child{margin-left:0;}
.product li h2{font-size:22px;}
.product li h2 a{color:#333;}
.product li h2 a:hover{color:#3298ff;}
.product li p{margin:18px auto;font-size:16px;color:#666;}
.product li .note{padding:20px;}
.product li dl{ margin-top:15px;}
.product li dd{color:#666;padding-left:10px;position: relative;line-height:28px;}
.product li dd:after{position: absolute;content:"";width:4px;height:4px;background:#3298ff;left:0px;top:13px;}
.product li:hover{box-shadow:-1px 1px 20px #ddd;}
.product li:hover h4{color:#3298ff;}
.product li .com-img{height:400px;}
.product li .com-img img{width:100%;height:100%;object-fit:cover;}



.solution{ width:1200px; margin:30px auto;}
.solution_list li{width:388px;float:left;margin-left:18px;box-shadow:-1px 1px 20px #f2f2f2;background:#fff;position:relative;}
.solution_list li:first-child{margin-left:0;}
.solution_list li .note{padding:15px 10px 20px;text-align:center;}
.solution_list li .note h4{font-size:20px;position:relative;margin-bottom:15px;padding-bottom:15px;}
.solution_list li .note h4:after{content:"";position:absolute;left:50%;bottom:0px;width:30px;margin-left:-15px;height:3px;background:#dcdcdc;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.solution_list li .note h4 a{color:#333;}
.solution_list li .note h4 a:hover{ color:#3298ff;}
.solution_list li img{ width:100%}
.solution_list li .note p{color:#999;height:25px;overflow: hidden;line-height:25px;}
.solution_list li:after{content:"";position:absolute;left:50%;bottom:0px;width:0px;height:4px;background:#3298ff;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.solution_list li:hover:after{width:100%;left:0px;}

.about{margin:50px auto 20px; padding-bottom:10px;background:#f6f7fc;}
.about-us{width:1200px;margin:0 auto;line-height:30px; overflow:hidden;}
.about-us img{float:left;width:365px;height:190px;margin:0 30px 0 0;box-shadow:2px 2px 15px #eaeaea;}
.about-us p{text-indent:2em;margin:0 0 5px;}
.record{ width:1200px; margin:20px auto 0;}
.record li{ width:300px; float:left; height:60px; text-align:center; line-height:60px;}
.record li em{ font-size:24px; font-weight:bold; font-style:normal;color:#3298ff; padding-right:5px;}

.case{margin:50px 0 20px; background:#f6f7fc; padding-bottom:20px;}
.case ul{ width:1200px; margin:0 auto;}
.case ul li{ width:285px; float:left; margin-left:20px; margin-bottom:20px; position: relative;}
.case ul li:first-child,.case ul li:nth-child(5){margin-left:0;}
.case ul li img{ width:285px; height:380px;}
.case ul li b{ position:absolute; left:0px; right:0; bottom:20px; height:40px; line-height:40px; color:#fff; font-size:18px; padding:0 15px;  overflow:hidden; background-color: rgba(0, 0, 0, 0.5); font-weight:normal;white-space:nowrap;text-overflow:ellipsis}

.case ul li a{ color:#fff;}
.case ul li a:hover{color:#FFD401}

.news{position:relative;width:1200px;height:535px;margin:20px auto ;text-align:center}
.tab-pane{display:inline-block}
.news input[type=radio]{position:absolute;clip:rect(0,0,0,0)}
.tab-item{display:block;height:40px;line-height:40px;cursor:pointer;padding:0 20px; margin:0 3px; background:#fafafa; border:1px solid #eaeaea;}
.tab-content{position:absolute;left:0;top:170px;bottom:0;right:0;background:#fff;text-align:left}
.tab-content ul li{width:580px;height:100px;margin:0 40px 20px 0;float:left}
.tab-content ul li:nth-child(2),.tab-content ul li:nth-child(4),.tab-content ul li:nth-child(6),.tab-content ul li:nth-child(8){margin:0 0 20px 0;}
.tab-content ul li img{width:150px;height:100px;float:left;margin-right:10px}
.tab-content ul li span{display:block;height:30px;line-height:30px;font-size:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tab-content ul li p{height:50px;line-height:25px;color:#999;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px; text-indent:2em;}
.tab-content ul li small{ color:#999; display:block; text-align:right;}
.news input[type=radio]:checked+.tab-item{background:#3d9eff;color:#fff;border:1px solid #3d9eff;}
.news input[type=radio]:checked+.tab-item+.tab-content{z-index:1}



.links{width:100%; height:auto;color:#999;}
.links-all{width:1200px;margin:0 auto;padding:10px 0; font-size:14px; }
.links-all a{line-height:25px;color:#999;text-decoration:none;margin-right:10px; display:inline-block;}




.dispose{position:relative;width:1200px;height:270px;margin:20px auto ;}
#container{ 
	margin:0 auto; 
	width:100%; 
}

.tab-container {
	position: relative; 
	width: 100%; 
	z-index:0;
}



.tab-container > div { 
	display: inline; 
}

.tab-container > div > a {  
	position: relative !important; 
	text-decoration: none; 
	color: #666; 
	display: inline-block;
	padding: 5px 10px; 


	margin:4px 4px 4px 0;
	background: #fafafa; 
	
	border: solid 1px #eaeaea;
border-radius:5px;
}

.tab-container > div:not(:target) > a {
}	

.tab-container > div:target > a { 
    background:#3298ff;border: solid 1px #3298ff;color: #fff; 
}	

.tab-container > div > div {
		background: #fff; 
border: solid 1px #eaeaea;
	z-index: -2;
	top: 88px;
	padding: 10px 14px;
	width: 1170px; 
	min-height:50px; 
	position:absolute; 
}	
.tab-container > div:not(:target) > div { 
	position: absolute; 
}

.tab-container > div:target > div { 
	position: absolute; 
	z-index: 3 !important;
}

div.tab-class{ padding:10px 20px;}
div.tab-class b{ display:block; height:40px; line-height:40px; color:#3298ff}
div.tab-class p{ display:inline-block; height:25px; line-height:25px; margin-right:10px; color:#666}
div.tab-class em{ font-style:normal; font-size:12px; color:#f60; padding-left:5px;}

@media only screen and (max-width:1199px){.banner{height:auto;overflow:hidden}
.banner_in{width:100%;margin:0}
.banner_l{width:100%;height:auto;float:none}
.banner_l img{width:100%;height:auto}
.banner_r{width:100%;float:none}
.banner_r h1{font-size:32px;line-height:70px;margin-top:0;text-align:center}
.banner_con{height:auto}
.banner_con p{font-size:16px;line-height:26px;text-align:center}
.banner_tel{margin:20px auto 30px;font-size:0;width:310px}
.banner_tel a{width:143px;margin:0 5px;line-height:38px;font-size:14px}
.index_title{height:50px;line-height:50px;font-size:22px}
.index_title a{ width:20px; line-height:20px; height:20px; padding-left:5px;}
.index_title a i{ font-size:20px;}
.merit{margin:20px 0}
.merit ul{width:100%;margin:0;padding: 0}
.merit ul li{width:50%;margin-right:-1px;border-bottom:1px solid #eaeaea;margin-bottom:-1px;padding:15px 0}
.merit ul li:nth-child(2){border-right:none}
.merit ul li:last-child{width:50%;border:none}
.merit ul li i{font-size:50px}
.merit ul li span{display:block;font-size:16px;line-height:30px}
.merit ul li p{font-size:12px;line-height:18px}

.product{ width:100%; margin:20px 0 10px;}
.product li{width:47%;margin-left:2%; margin-bottom:8px}
.product li:first-child{margin-left:2%;}
.product li h2{font-size:18px;}
.product li p{margin:15px auto;font-size:14px;}
.product li .note{padding:15px 2% 15px 5%;}
.product li dd{padding-left:5%;position: relative;line-height:22px; font-size:12px;}
.product li dd:after{position: absolute;content:"";width:4px;height:4px;background:#3298ff;left:0px;top:10px;}
.product li .com-img{height: auto;}
.product li .com-img img{width:100%;height:100%;object-fit:cover;}



.price{ width:100%; padding:0 0 15px; margin:0;}

.price .canshu{ width:94%;font-size:14px;margin:0 3% 10px; padding:0 12px}
.price button{ width:94%;font-size:14px;padding:0; margin:10px 3% 0;}
.price input{ width:94%;font-size:14px;margin:0 3%; padding:0 12px}




.solution{ width:100%; margin:20px 0;}
.solution_list li{width:90%;float: none;margin:10px 5%;}
.solution_list li:first-child{margin:10px 5%;}
.solution_list li .note{padding:10px;}
.solution_list li .note h4{font-size:18px;margin-bottom:10px;padding-bottom:10px;}
.solution_list li img{ width:100%; height: auto}
.solution_list li .note p{height:20px;line-height:20px; font-size:14px;}


.about{ width:100%; margin:20px 0;}
.about-us{ width:90%; margin:0 5%;}
.about-us img{width:100%;height: auto; float:none}
.about-us p{ font-size:12px; line-height:25px;}

.record{ width:90%; margin:0 5%; border-top:1px solid #eaeaea;}
.record li{ width:50%; font-size:12px; height:35px; line-height:35px; text-align:left;}
.record li em{ font-size:16px;}

.case{ width:100%; margin:20px 0; padding-bottom:0;}
.case ul{ width:96%; margin:0 2%;}
.case ul li{ width:46%; margin:0 2% 10px; position:static ;}
.case ul li:first-child,.case ul li:nth-child(5){ margin:0 2% 10px;}
.case ul li img{ width:100%; height: auto;}
.case ul li b{height:20px; line-height:20px; font-size:14px;display:block;  position:static ; margin-top:5px; color:#999; background-color: inherit; padding:0;}
.case ul li b a{ color:#333;}





.news{width:100%;height:636px;margin:10px auto;}
.tab-item{height:30px;line-height:30px; padding:0 10px; margin:0 2px;}
.tab-content{top:100px;}
.tab-content ul li{width:92%;height:80px;margin:0 4% 10px;float:none}
.tab-content ul li:nth-child(2),.tab-content ul li:nth-child(4),.tab-content ul li:nth-child(6),.tab-content ul li:nth-child(8){margin:0 4% 10px;}
.tab-content ul li img{width:120px;height:80px;}
.tab-content ul li span{height:25px;line-height:25px;font-size:16px;}
.tab-content ul li p{height:40px;line-height:20px;font-size:12px}






.dispose{width:100%;height:190px;margin:10px auto;}
#container{ 
	margin:0 3%; 
	width:94%; 
}


.tab-container > div > a {  
	padding: 2px 4px; 
	margin:2px 2px 2px 0;
	font-size:14px;
}




.tab-container > div > div {
	top: 60px;
	padding: 8px 3%;
	width: 93%; 
	min-height:50px; 
}	


div.tab-class{ padding:5px 10px;}

div.tab-class p{height:20px; line-height:20px; margin-right:8px; font-size:14px;}
div.tab-class em{ font-style:normal; font-size:12px; color:#f60; padding-left:5px;}










.links{width:100%; height:auto;color:#999;}
.links-all{width:94%;margin:0 3%;padding:5px 0; font-size:12px; }
.links-all a{line-height:20px;margin-right:6px;}

}



@media only screen and (max-width:769px){
.dispose{height:245px;}
.tab-container > div > div {top: 90px;min-height:70px;}	
}

@media only screen and (max-width:426px){
.dispose{height:300px;}
.tab-container > div > div {top: 120px;min-height:110px;}	
}
@media only screen and (max-width:376px){
.dispose{height:330px;}
.tab-container > div > div {top: 150px;min-height:110px;}	
}
@media only screen and (max-width:321px){
.dispose{height:401px;}
.tab-container > div > div {top: 180px;min-height:151px;}	
}