@charset "utf-8";
body{
	background-color: #e2e2e2;
}
.top{ height: 83px; line-height: 83px; border-bottom: 2px solid #ffffff; background: #ffffff; }
.main{ padding: 0 100px; }
.top-nav{ float: right; }
.top-nav a{ display: inline-block; margin-left: 45px; }
.top-nav a.active{ border-bottom: 2px solid #38b1e1;  }
.top-nav a:hover,.top-nav a.active{ color: #38b1e1;}
.mbheader{ display:none;}
.mbheader_top{ position:fixed; left:0px; top:0px; width:100%; height:60px; line-height:60px; background-color:#ffffff; color: #666;-moz-box-shadow:0 0 4px #002a51;-webkit-box-shadow:0 0 4px #002a51;box-shadow:0 0 4px #002a51;z-index:100;}
.mbheader_top_logo{ display: inline-block; height:30px; margin-left:8px; margin-top:5px;}
.mbheader_top div{ float:right; margin-right:8px; display:block; padding-top:23px; cursor:pointer;}
.mbheader_top div span{ display:block; border-top:2px solid #666; height:6px; width:20px;transition: all 0.6s;-moz-transition: all 0.6s;-webkit-transition: all 0.6s;-o-transition: all 0.6s;}
.mbheader_top div.open .s1{transform: rotate(40deg) translate(0px,8px);-ms-transform: rotate(40deg) translate(0px,8px);-webkit-transform: rotate(40deg) translate(0px,8px);-o-transform: rotate(40deg)  translate(0px,8px);-moz-transform: rotate(40deg)  translate(0px,8px);}
.mbheader_top div.open .s3{transform: rotate(-40deg)  translate(1px,-7px);-ms-transform: rotate(-40deg) translate(1px,-7px);-webkit-transform: rotate(-40deg) translate(1px,-7px);-o-transform: rotate(-40deg) translate(1px,-7px);-moz-transform: rotate(-40deg) translate(1px,-7px);}
.mbheader_top div.open .s2{transform: translate(20px,0px);-ms-transform: translate(20px,0px);-webkit-transform: translate(20px,0px);-o-transform: translate(20px,0px);-moz-transform: translate(20px,0px);filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
.mbheader .menu_box{ position:fixed; top:60px; left:0px; width:100%; background-color:#333; text-align:center; text-shadow: 0 .0625rem 0 rgba(142,77,3,.6); font-size:16px; line-height:40px;
filter:alpha(opacity=0);-moz-opacity:0;opacity:0;transform: translate(0px,-300px);-ms-transform: translate(0px,-300px);-webkit-transform: translate(0px,-300px);-o-transform: translate(0px,-300px);-moz-transform: translate(0px,-300px);transition: all 0.6s;-moz-transition: all 0.6s;-webkit-transition: all 0.6s;-o-transition: all 0.6s; z-index:90;}
.mbheader .menu_box a{ display:block; border-bottom:1px solid #000; border-top:1px solid #555;color:#FFF;}
.mbheader .menu_box.open{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;transform: translate(0px,0px);-ms-transform: translate(0px,0px);-webkit-transform: translate(0px,0px);-o-transform: translate(0px,0px);-moz-transform: translate(0px,0px);}
.contact{ width: 900px; max-width: 100%; padding: 40px 80px; margin-bottom: 40px; background-color: #ffffff; border-radius: 10px; font-size: 16px;}
.contact p,.contact div{margin-bottom: 10px;}
.contact div{  width: 45%; float: left;}
.contact .div-co{width: 10%; float: left;}
.contact input[type='text'],.contact textarea{ display: block; width: 100%; background-color: #f2f2f2; border:0; height: 40px; line-height: 40px; border-radius: 5px; }
.contact textarea{ height: 100px; line-height: 1.5;}
.contact-a{ display: block; width: 135px; line-height: 40px; color: #ffffff; background-color: #38b1e1; margin: 40px auto 0 auto; text-align: center; border-radius: 10px; font-size: 24px;}
.contact h1{font-size: 22px; margin-bottom: 20px;}
.contact h3{font-size: 22px; font-weight: bold; text-align: center; color: #303030; margin-bottom: 20px;}
.contact h4{ font-size: 18px; line-height: 2;}
.contact h2{ padding: 20px; font-size: 16px; color: #303030; background-color: #f2f2f2;border-radius: 10px;margin-bottom: 20px;}
.title{ font-size: 2.3rem; color: #ffffff; position: relative;}
.title::after{ content: ' ';  width: 84px; height: 4px; background:#ffffff; display: block; position: absolute; top: -20px; left: 0; }
#banner{ width: 100%;}
#banner .swiper-slide{ position: relative;}
#banner .swiper-slide img{ display: block; width: 100%;}
#banner.swiper-container{ padding: 0;}
.banner-text1,.banner-text2{ position: absolute; left: 130px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center;  color: #ffffff;}
.banner-text2{ left: auto; right: 130px; text-align: right;}
.banner-text1 h1,.banner-text2 h1{ font-size: 88px;}
.banner-text1 h2,.banner-text2 h2{ font-size: 34px;}
.banner-text1 a,.banner-text2 a{ display: inline-block; width: 200px; height: 66px; line-height: 66px; font-size: 20px; color: #474747; background-color: #00dcec; text-align: center; border-radius: 10px; margin-top: 40px;}
.banner-text1 h1,.banner-text1 a,.banner-text1 h2,.banner-text2 h1,.banner-text2 a,.banner-text2 h2{display:block;transition: all 1.2s;-moz-transition: all 1.2s;-webkit-transition: all 1.2s;-o-transition: all 1.2s; opacity:0;transform: translate(0,-60px);-ms-transform:translate(0,-60px);-webkit-transform:translate(0,-60px);-o-transform: translate(0,-60px);-moz-transform: translate(0,-60px);}
.banner-text1 h2,.banner-text2 h2{transition: all 1.2s ease 0.4s;-moz-transition: all 1.2s ease 0.4s;-webkit-transition: all 1.2s ease 0.4s;-o-transition: all 1.2s ease 0.4s;}
.banner-text1 a,.banner-text2 a{transition: all 1.2s ease 0.9s;-moz-transition: all 1.2s ease 0.9s;-webkit-transition: all 1.2s ease 0.9s;-o-transition: all 1.2s ease 0.9s;}
.banner-text3{
	position: absolute;
	left: 0;
	right: 0;
	top: 80px;
	text-align: center;
	color: #ffffff;

}
.banner-text3 h1{
	font-size: 50px;
	margin-top: -25px;

}
.banner-text3 a{
	display: inline-block;
	padding: 0;
	line-height: 66px;
	padding: 0 30px;
	color: #ffffff;
	background-color: #fd933d;
	 margin-top: 10px;
	 border-radius: 10px;
}
.banner-text3  .aa2{
	position: relative;
	left: 100px;
	top: 50px;
}
.swiper-slide-active .banner-text1 h1,.swiper-slide-active .banner-text1 a,.swiper-slide-active .banner-text1 h2,.swiper-slide-active .banner-text2 h1,.swiper-slide-active .banner-text3 h1,.swiper-slide-active .banner-text3 a,.swiper-slide-active .banner-text2 a,.swiper-slide-active .banner-text2 h2{opacity:1;transform: translate(0,0);-ms-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform: translate(0,0);-moz-transform: translate(0,0);}
.swiper-slide { display:block;transition: all 0.4s;-moz-transition: all 0.4s;-webkit-transition: all 0.4s;	-o-transition: all 0.4s;}
.swiper-container{ padding-top: 15px; }
.content5-aside{ padding:15px 0; position: relative;  }
#content5-pre{ position: absolute; left: 0; top: 6px; font-size: 1.5rem; color: #555; cursor: pointer; display:block;z-index: 100;}
#content5-next{ position: absolute; left: 40px; top: 6px; font-size: 1.5rem; color: #555; cursor: pointer; display: block; z-index: 100;}
#swiper2{ display: none; }
.swiper-pagination{ position: static;  }
.swiper-pagination span{ background:transparent; width: 8px; height: 8px;  }
.swiper-pagination .swiper-pagination-bullet-active{ width: 20px;    -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; }
.content5-img{ display: block; width: 100%; }
.content5-p1{ padding:8px 16px; border-bottom:1px solid #eeeeee; height: 100px;}
.content5-p1 h1{ font-weight: normal; color: #b32a31; margin-bottom: 5px; }
.content5-p1 p{height: 3rem; overflow: hidden; }
.content5-p2{ padding:0 16px; line-height: 50px;  }
.content5-p2 span{ float: right; }
.content5-a{display: block; width: 170px; height: 50px; line-height: 50px; text-align: center; color: #ffffff; border:1px solid #ffffff; float: right; position: relative; z-index: 10;}
.content5-a:hover{ color: #eb6f31;  background:#ffffff; }
.foot{  background-color: #ffffff; }
.foot-box1{ padding: 40px; text-align: center; background-color: #f4f4f4;}
.foot-box1 div{ float: left; width: 33.33%; text-align: center; color: #737374; font-size: 18px;}
.foot-box1 div img{ margin-bottom: 10px;}
.foot-box1 img{ max-width: 90%; margin-top: 20px;}
.foot-box2{  padding: 40px; width: 1300px; max-width: 90%; margin: 0 auto;}
.foot-box2 div{ width: 28%; float: left; }
.foot-box2 div h1{margin-bottom: 15px; font-size: 18px; color: #474747;}
.foot-box2 div a,.foot-box2 div span{ display: block; margin-bottom: 10px; font-size: 15px; color: #474747;}
.foot-box2 div span img{ width: 18px; margin-right: 10px; vertical-align: middle;}
.art-banner{ display: block; width: 100%;min-height: 100px; margin-bottom: 20px; }
.foot-box3{ padding:0 40px; width: 1300px; max-width: 90%; margin: 0 auto;}
.foot-box3 img{ height: 55px; max-width: 100%; margin-right: 20px;}
.foot-box4{ text-align: center; padding: 30px; font-size: 15px; color: #474747;}
.foot-box4 img{ height: 20px;}
.art-main{ width:70%;max-width: 1000px; margin: 0px auto; position: relative;}
.art-title{ text-align: center; font-size: 1.6rem; padding: 20px 0; }
.art-menu{ position: absolute;width: 185px; left: -230px; top: 83px; }
.art-menu a{ display: inline-block; width: 100%; padding: 0 4px; line-height: 37px; text-align: center; margin-bottom: 15px;  border:1px solid #549487; color: #549487;  }
.art-menu a:hover,.art-menu a.active{ background: #549487;color: #ffffff; }
.detail-text img{ max-width: 100%;}
.detail-text .img-video{
	position: relative;
}
.detail-text .img-video button{ display: block; width: 180px; height: 60px; line-height: 60px; position: absolute; left: 50%; margin-left: -90px; bottom: 20%; background-color: #38b1e1; color: #ffffff; text-align: center; border: 0; border-radius: 10px;}
.product{ width: 1400px; max-width: 100%; margin: 35px auto;}
.product-left{ width: 45%; float: left;}
#mb-sw{ display: none;  margin-bottom: 20px;}
#mb-sw .swiper-container{ position: relative;}
#mb-sw .swiper-pagination{ position: absolute; bottom: 0px;}
#mb-sw .swiper-pagination-bullet{ background-color: #3299c2;}
.product-left img{ max-width: 100%;}
.product-swiper-box{ position: relative;}
.prd-help-title{ font-size: 36px;    font-weight: 500; margin-bottom:40px; text-align: center; color: #474747;}
.prd-help{ width: 1070px; max-width: 90%; color: #5e5e5e; text-align: justify;}
.prd-help .swiper-slide{  min-width: 100%;}
.prd-help .swiper-next,.prd-help .swiper-prev{
	position: static; display: inline-block;
}
.prd-help .swiper-pagination{
	display: inline-block; width: auto;
}
.prd-help .swiper-next img,.prd-help .swiper-prev img{
	width: 35px; height: 30px; 
}
.prd-help h1{ font-size: 18px; margin-bottom: 10px; margin-top: 20px;}
.prd-help h2{ font-size: 16px; font-weight: 200;}
.help-ss{text-align: center; margin: 40px 0;}
.swiper-next{ position: absolute;right: 0; top: 15px;}
.swiper-prev{ position: absolute;left: 0; top: 15px;}
#bigImg{transition: all 0.6;}
.buy-btn{ display: block; width: 284px; height: 44px; line-height: 44px; background-image: url(../images/buybtn.png); background-size: 100% 100%; padding-left: 100px; color: #ffffff; font-size: 16px;}
.product-right{ width: 50%; float: right; padding: 0 10px;text-align: justify; line-height:1.5;}
.product-right h1{ font-size: 20px; padding-bottom: 10px;}
.product-right h2{ font-size: 16px; line-height: 1.1; margin-bottom: 20px;}
.product-right h3{ font-size: 20px; color: #6f6f6f;margin-bottom: 20px;}
.product-right p{ font-size: 14px; line-height: 1.3; }
.product-swiper-box{padding: 0 70px;}
.product-left .product-swiper-box img{ width: auto; max-width: none; height: 80px;}
.page{ text-align: right; line-height: 30px; }
.page a,.page span{ display: inline-block; padding: 0 10px; margin: 0 2px;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;}
.page a{ background: #fff; border:1px solid #aaa; }
.page span{ background: #ccc; border:1px solid #aaa; }
.banner-box { background-size: 100% 100%;  }
.banner-box .art-main{ min-height: 240px; padding-top: 70px;}
.banner-box h1{ font-size: 2rem; }
.pop{ display: none; width: 400px; height: 200px; padding: 70px 50px 0px 50px; position: fixed; left: 50%; top: 50%; margin-top: -150px; margin-left:-200px; background:#ffffff;  
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;-moz-box-shadow:0 0 6px #d7d6d6;-webkit-box-shadow:0 0 6px #d7d6d6;box-shadow:0 0 6px #d7d6d6; }
.pop span{ position: absolute; right: 10px; top: 10px; width: 29px; height: 29px; background-image:url(../images/close.png); background-size: 100% 100%; cursor: pointer;  }
.service-banner img{ display: block; width: 100%;}
.service-box{ width: 29%; display: inline; float: left; margin: 35px 2%; height: 299px; max-height: 100%;
	background-color: #1e1e24;
	background-image: linear-gradient(to right, #1e1e24 , #767678); border-radius: 10px;
color: #ffffff; position: relative; cursor: pointer;}
.service-box h1{ font-size: 24px;}
.service-box h2{ font-size: 35px; margin-top: 10px;}
.service-box img{ display: block; width: 100%; height: 100%;}
.service-box div{ position: absolute; left: 0; top: 0;padding: 85px 0 0 25px; }
.service h3{ text-align: center; font-size: 36px; padding: 50px;}
.index-title{ height: 80px; line-height: 80px; font-size: 20px; text-align: center;}
.index-title span{ display: inline-block; height: 1px; width:228px; position: relative; border-bottom: 1px solid #c6c6c6; margin: 0 10px; top: -7px;}
.index-show{ overflow: hidden; position: relative;}
.index-show-left{ width: 60%; overflow: hidden;}
.index-show-left img{ width: 100%; display: block;transition: all 0.6s;
	-moz-transition: all 0.6s; /* Firefox 4 */
	-webkit-transition: all 0.6s; /* Safari 和 Chrome */
	-o-transition: all 0.6s;transform-origin:50% 50%;-ms-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;}
.index-show-left img:hover{transform:scale(1.3,1.3);
	-ms-transform:scale(1.3,1.3); 	/* IE 9 */
	-moz-transform:scale(1.3,1.3); 	/* Firefox */
	-webkit-transform:scale(1.3,1.3)}
.index-show-right{ position: absolute; left: 64%; top: 0; bottom: 0; display:flex;flex-direction: column; justify-content: center; }
.index-show-right h1{ font-size: 38px; text-align: center;}
.index-show-right p{ font-size: 16px; margin: 50px 0;}
.index-show-right a{ display: block; padding: 0px 15px; margin: 0 auto; height: 40px; line-height: 40px; text-align: center; background-color: #d2eff7; border: 1px solid #55bde5; border-radius: 8px;}
.video{ display: none; position: fixed; left:0; top:0; right: 0; bottom: 0; padding: 50px; background-color: #000000;}
.video-close{ position: absolute; right: -20px; top: -40px; color: #ffffff; cursor: pointer;}
.video-box{ width: 100%; height: 100%; position: relative;}
.video video{ width: 100%; height: 100%;}
.img-video{ position: relative;}
.img-video img{ display: block; cursor: pointer;}
.img-video video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; display: none;}
.ser-down{ text-align: center; }
.ser-down a{ display: inline-block; text-align: center;margin: 90px;}
.ser-down a img{ margin-bottom: 20px;}
.ser-down a:hover{ color: #38b1e1;}
@media screen and (max-width:1100px){
	body{ font-size: 16px; }
	.main{ padding: 0 20px; }
	.content4-box-div{ padding: 50px 20px; }
	.content1{ height: 700px; }
	.content3-box{ height: 400px; }
	.art-main{ width: 65%; }
	.prd-menu{ width: 160px; margin-left: -180px; }
	.prd-attribute-img{ width: 58%; }
	.prd-attribute-div{ margin-left: 60% }
	.prd-attribute-div h3{ margin:5px 0 10px 0 ; }
	.prd-attribute-div p{ padding: 2px 0; }
	.index-title span{ width: 40px;}
}
@media screen and (max-width:900px){
	..banner-text3{
		top: 10px;
	}
	.banner-text1 h1,.banner-text2 h1,.banner-text3 h1{ font-size: 6vw;}
    .banner-text1 h2,.banner-text2 h2{ font-size: 12px;}
	.banner-text3 .aa2{ left: 0; top: 0;}
	.banner-text1 a, .banner-text2 a,.banner-text3 a{ font-size: 12px; line-height: 6vw; height: 6vw; width: auto; margin-top: 4vw; display: inline-block;}
	.banner-text2{ right: 10%;align-items: flex-end}
	.banner-text1, .banner-text2{ left: 10%;}
	.index-show-right h1{ font-size: 14px;}
	.index-show-left{ width: 50%; overflow: hidden;}
	.index-show-right{ left: 54%;}
	.index-show-right a{  height: 30px; line-height: 30px;}
	.index-show-right p{ font-size: 12px; margin: 10px 0;}
	.index-show-left img{ width: 200%;}
	.service h3{font-size: 5vw;padding: 5vw;}
	.service-box h1{ font-size: 16px;}
	.service-box h2{ font-size: 14px;}
	.service-box{width: 46%;height: 30vw;}
	.service-box div{padding: 8vw 0 5vw 5vw;}
	.video-close {
		position: fixed;
		right: 10px;
		top: 70px;
	}
	.prd-help-title{font-size: 18px; margin-bottom: 0;} 
	.prd-help h1{ font-size: 14px; margin-top: 10px;}
	.prd-help h2{ font-size: 12px;}
	.help-ss{ margin: 10px 0;}
	.product-left{ display: none;}
	.product{ margin-top: 0;}
	#mb-sw{ display: block;}
	#mb-sw img{ width: 100%;}
	body{ font-size: 12px; }
	.top-nav a{ margin-left: 30px; }
	
	.title{ font-size: 1.5rem; }
	.content2-p{ width: 500px; }
	.content3-box span{ font-size: 1rem; bottom: 30px; right: 10px;}
	.content3-box span i{ line-height: 12px; width: 16px; border-width: 1px; margin-left: 5px; }
	.main{ padding: 0 10px; }
	.content4-box-div{ padding: 50px 10px; }
	.content1-logo{ width: 50% }
	.content1{ height: 550px; }
	.content3-box{ height: 250px; }
	.content5{ padding-top: 50px; }
	.contact{ padding: 10px; margin-bottom: 20px; font-size: 13px;}
	.foot-box1 div{ font-size: 14px;}
	.foot-box1{ padding: 30px 10px;}
	.foot-box1 img{ height: 30px;}
	.foot-box2{ padding: 30px 10px;}
	.foot-box2 div a, .foot-box2 div span{ font-size: 12px;}
	.foot-box2 div{ width: auto; margin-right: 20px;}
	.foot-box3{ padding: 0;}
	.foot-box3 img{ width: 40%;  height: auto;}
	.foot-box4{ padding: 30px 10px; font-size: 12px;}
	.product-left,.product-right{ float: none; width: 100%;}
	.product-left .product-swiper-box img{ height: 30px;}
	.product-right h1{ font-size: 16px;}
	.product-right h2{ font-size: 14px;}
	.product-right h3{ font-size: 16px; }
	.product-right p{ font-size: 12px; line-height: 15px;}
	.buy-btn{ width: 200px; height: 31px; line-height: 31px; font-size: 14px; margin: 0 auto; padding-left: 65px;}
}
@media screen and (max-width:700px){
	.top{ display: none; }
	.mbheader{ display:block;}
	.content1-logo{ width: 200px; }
	.content1{ height: 300px; background-size: 100% 100%; padding-top: 70px; }
	.title{ font-size: 1rem; }
	.title::after{ width: 2rem; top: -5px; height: 2px; }
	.content2-p{ width: 65%; }
	.content3-box{ width: 100%; height: 200px; background-size: 100% auto; background-repeat: no-repeat;   }
	.content3-box .span-cover{ bottom: 12px; }
	.content3-box span{ font-size: 1.5rem; bottom: 20px; right: 20px;}
	.content3-box span i{ line-height: 22px; width: 25px; border-width: 1px; margin-left: 15px; margin-top:-3px;}
	.content4-box-div{ width: 100%; }
	.content4-box-div p,.content4-a{ margin-top: 20px; }
	.content5{ padding-top: 25px; }
	.content4-a,.content5-a{ width:100px; height: 30px; line-height: 30px; }
	.content5-a{ margin-top: -10px; }
	.content5 .title{ margin-bottom: 10px; }
	.foot-left{ margin-right: 50%; }
	.foot-right{ width: 48%;}
	.prd-box{ width: 100%; margin:10px 0;  }
	.prd-attribute-img{ width: 100%; margin-bottom: 10px; }
	.prd-attribute-div{ margin-left: 0 }
	.prd-attribute-div p{display: none;}
	.prd-warp{ margin-left: 80px; }
	.prd-menu{ margin-left: -80px; }
	.rece-box{ width:100%; margin:10px 0;  }
	.prd-menu{ display: none; }
	.prd-menu-mini-toggle{ display: block; }
	.prd-menu-mini{ display: block; }
	.prd-menu-mini .prd-menu{ display: block; }
	.prd-warp{ margin-left: 0; }
	.prd-menu-mini.open{transform: translate(0px,0px);-ms-transform: translate(0px,0px);-webkit-transform: translate(0px,0px);-o-transform: translate(0px,0px);-moz-transform: translate(0px,0px);}
	.prd-menu-mini-toggle.open{ left:170px;  }

}
@media screen and (max-width:600px){
	.content1{ background-size: auto 100%; background-position: center top;   }
	#swiper1{ display: none; }
	#swiper2{ display: block; }
	.content2{ padding: 40px 0;  }
	.foot-left{ margin-right:0;  }
	.foot-right{ float: none; width: 100%; }
	.foot-a{ width: 100%; margin-bottom: 30px; }
	.art-main{ width: 90%; }
	.art-menu{ position: static; width: 100%; left: 0; top: 10px; }
	.art-menu a{ width: 80px; margin-right: 5px; margin-bottom: 5px; }
	.foot2{ text-align: center;  height:auto;line-height: 50px; padding-bottom: 10px; }
	.foot2 .fr,.foot2 .fl{ float: none;display: block; width: 100% }
	.aboutus-box-item{ width: 100%; }
	.aboutus-img{ width: 100%; float: none; margin-bottom: 30px; }
	.aboutus-box-item-md{ margin:0 0 10px 0;  }
	.contact-right,.contact-left{ float: none; width: 100%; }
	.contact-a{ margin-bottom: 30px; width: 100%; }
	.contact-address:after,.contact-mail::after,.contact-tel::after,.p-address:after,.p-mail::after,.p-tel::after{
		transform: scale(0.7);-ms-transform: scale(0.7);-webkit-transform: scale(0.7);-o-transform: scale(0.7);-moz-transform: scale(0.7);
}