﻿@charset "utf-8";
/* CSS Document */

/**/
div.xdtjTabMain{ display:none;}

/**/
div.xdtj01Div{ clear:both; height:900px; background:#fff;}
div.xdtj01DivMid{ margin:0 auto; height:850px; position:relative;}
div.xdtj01DivMid h1,div.xdtj01DivMid h2{position: absolute;transition-property: left, opacity;}

h1.xdtj01pic01{ top:240px; left:0; width:467px;height:290px; margin:0;/*background:url(../images/xindiantuji/banner01_1.png) no-repeat center center;*/}
@media screen and (max-width: 1030px){
	h1.xdtj01pic01>img{
		display: block;
		margin:0 auto;
		margin-top: 10px;
	}
}
.moveIn h1.xdtj01pic01{
animation:xdtj01pic01M 3s;
-moz-animation:xdtj01pic01M 3s; /* Firefox */
-webkit-animation:xdtj01pic01M 3s; /* Safari and Chrome */
-o-animation:xdtj01pic01M 3s; /* Opera */
}
@keyframes xdtj01pic01M{from {left:50px;}to {left:0;}}

h1.xdtj01pic02{ top:100px; right:0px; width:823px;height:740px; margin:0;/*background:url(../images/xindiantuji/banner01_2.png) no-repeat center center;*/}
h1.xdtj01pic02>img{
	float:right;
}
@media screen and (max-width: 1030px){
	h1.xdtj01pic02>img{
		float:none;
		height: 50%;
		display: block;
		margin:0 auto;
		margin-top: 200px;
	}
}
@media screen and (max-width: 482px){
	h1.xdtj01pic02>img{
		float:none;
		height: 50%;
		display: block;
		margin:0 auto;
		margin-top: 160px;
	}
}
.moveIn h1.xdtj01pic02{
animation:xdtj01pic02M 3s;
-moz-animation:xdtj01pic02M 3s; /* Firefox */
-webkit-animation:xdtj01pic02M 3s; /* Safari and Chrome */
-o-animation:xdtj01pic02M 3s; /* Opera */
}
@keyframes xdtj01pic02M{from {right:50px;}to {right:0;}}

@media (min-width:100px){h1.xdtj01pic02{ background-size:360px auto; background-position:center;width: 100%;}h1.xdtj01pic01{background-size:280px auto; background-position:center center; top:0; width:100%;}div.xdtj01Div,div.xdtj01DivMid{ height:640px;}}
@media (min-width:410px){h1.xdtj01pic02{ background-size:410px auto; background-position:center;width: 100%;}h1.xdtj01pic01{background-size:380px auto; background-position:center center; top:0; width:100%;}div.xdtj01Div,div.xdtj01DivMid{ height:640px;}}
@media (min-width:1030px){h1.xdtj01pic02{ background-size:510px auto; background-position:right center; height:600px;top:0px;}h1.xdtj01pic01{background-size:380px auto; background-position:left center;top: 100px;}div.xdtj01Div,div.xdtj01DivMid{ height:550px;}}
@media (min-width:1285px){h1.xdtj01pic01{ top:240px; left:0; width:700px;background-size:auto;}h1.xdtj01pic02{top:140px;width:823px;height:640px;background-size:auto;}div.xdtj01Div,div.xdtj01DivMid{height:850px;}}


/**/
div.xdtj02Div{ clear:both; height:850px; background:#eeeeee; overflow:hidden;}
div.xdtj02DivMid{ margin:0 auto; height:850px; position:relative;}
div.xdtj02DivMid h1,div.xdtj02DivMid h2{position: absolute;transition-property: left, opacity;}

h1.xdtj02pic01{ top:180px; left:-140px; width:865px;height:448px; margin:0;/*background:url(../images/xindiantuji/banner02_2.png) no-repeat center center;*/}

/*@media screen and (max-width: 1284px){
	h1.xdtj02pic01>img{
		float:left;
		width: 50%;
		margin-top: 105px;
	}
}
@media screen and (max-width: 1030px){
	h1.xdtj02pic01>img{
		float:none;
		width: 50%;
		display: block;
		margin:0 auto;
		margin-top: 105px;
	}
}
*/
.moveIn h1.xdtj02pic01{
animation:xdtj02pic01M 3s;
-moz-animation:xdtj02pic01M 3s; /* Firefox */
-webkit-animation:xdtj02pic01M 3s; /* Safari and Chrome */
-o-animation:xdtj02pic01M 3s; /* Opera */
}
@keyframes xdtj02pic01M{from {left:-100px;}to {left:-140px;}}

h1.xdtj02pic02{ top:280px; right:-30px; width:393px;height:288px; margin:0;/*background:url(../images/xindiantuji/banner02_1.png) no-repeat center center;*/}

/*@media screen and (max-width: 1030px){
	h1.xdtj02pic02>img{
			float:none;
			display: block;
			margin:0 auto;
		}
	}
}
@media screen and (max-width: 1284px){
	h1.xdtj02pic02>img{
			float:right;
		}
	}
}*/

.moveIn h1.xdtj02pic02{
animation:xdtj02pic02M 3s;
-moz-animation:xdtj02pic02M 3s; /* Firefox */
-webkit-animation:xdtj02pic02M 3s; /* Safari and Chrome */
-o-animation:xdtj02pic02M 3s; /* Opera */
}
@keyframes xdtj02pic02M{from {right:50px;}to {right:0;}}

@media (min-width:100px){h1.xdtj02pic01{ background-size:350px auto; background-position:center;width: 100%; left:0; top:250px;}h1.xdtj02pic02{background-size:280px auto; background-position:center center; top:50px; right:0px; width:100%;}div.xdtj02Div,div.xdtj02DivMid{ height:640px;}}
@media (min-width:410px){h1.xdtj02pic01{ background-size:410px auto; background-position:center;width: 100%; left:0; top:250px;}h1.xdtj02pic02{background-size:280px auto; background-position:center center; top:50px; right:0px; width:100%;}div.xdtj02Div,div.xdtj02DivMid{ height:640px;}}
@media (min-width:1030px){h1.xdtj02pic01{ background-size:500px auto; background-position:left center;width:100%; top:0px;}h1.xdtj02pic02{background-size:280px auto; background-position:right center;width:100%;top:90px;}div.xdtj02Div,div.xdtj02DivMid{ height:500px;}}
@media (min-width:1285px){h1.xdtj02pic01{  top:180px; left:-140px; width:865px;background-size:auto;}h1.xdtj02pic02{top:280px; right:-30px; width:393px;background-size:auto;}div.xdtj02Div,div.xdtj02DivMid{height:850px;}}









/*使用教程*/
.mainBox{width:1000px;margin:auto;}
.mainTable{width:100%;border-top:1px #e9e9e9 solid;margin-top:60px;}
.mainTable tr th{width:220px;line-height:100px;
border-bottom:1px #e9e9e9 solid;
border-right:1px #e9e9e9 solid;
vertical-align:top;color:#333;font-size:16px;font-weight:normal;font-family:"微软雅黑";letter-spacing:2px;text-align:center;}
.mainTable tr td{border-bottom:1px #e9e9e9 solid;padding:30px 0px 30px 30px;}
.stepBox{width:100%;float:left;margin-top:20px;overflow:hidden;}
.stepBox.first{margin-top:0px;}
.stepPic{display:block;float:left;margin-right:10px;}
.textDiv{color:#666;font-size:16px;font-weight:normal;font-family:"微软雅黑";letter-spacing:2px;}
.stepBox .textDiv{width:480px;}
.textDiv p{line-height:28px;
	/*text-indent:20px;*/
	/*background:url(../images/dotGray.png) 5px 12px no-repeat;*/}
.forbidImg{display:block;float:left;margin:0px 40px 20px 0px;}
/*技术规格*/
h1.texth1{ float:left; padding:20px 20px 20px 20px; line-height:18px;
font-family:'微软雅黑'; letter-spacing:5px; font-size:14px; color:#999; font-weight:normal;text-align:left;}
h1.texth1 b{ display:inline-flex; width:60px; font-weight:normal; color:#666;}
.guigeBox{position:relative;line-height:30px;padding-left:160px;overflow:hidden;
color:#666;font-size:14px;font-weight:normal;font-family:"微软雅黑";letter-spacing:2px;}
.guigeTit{position:absolute;top:0px;left:0px;width:160px;color:#333;}
.batteryImg{display:block;margin:auto;}
.batteryText{line-height:30px;margin-top:20px;color:#333;font-size:14px;font-weight:normal;font-family:"微软雅黑";letter-spacing:4px;text-align:center;}
.productText{line-height:30px;margin-top:20px;color:#888;font-size:14px;font-weight:normal;font-family:"微软雅黑";letter-spacing:4px;text-align:center;}
.partsImg{display:block;margin:auto;}
.partsTit{display:block;line-height:30px;color:#888;font-size:14px;font-weight:normal;font-family:"微软雅黑";letter-spacing:2px;text-align:center;}

/**/
div.detailTitleA{ clear:both; margin:20px 0 10px; height:45px; border-bottom:1px solid #c2c0c0;}
div.detailTitleA h1{ float:left;height:45px; line-height:45px;background:#777777; padding:0 20px; margin:0;
font-family:'微软雅黑'; letter-spacing:1px; font-size:16px; color:#fff;font-weight:normal; text-align:center;}
div.detailTitleB{clear:both; margin:10px 0;}
div.detailTitleB p{ clear:both;line-height:16px;padding:10px;
font-family:'微软雅黑'; letter-spacing:1px; font-size:14px; color:#333;font-weight:normal; text-align:left;}
div.detailTitleB p i{ padding:10px; background:#efefef; border-radius:30px;color:#333; margin-right:10px;font-weight:bold;}
div.detailTableDiv{}
table.detailTable{ width:100%; border-collapse:collapse;}
table.detailTable th,table.detailTable td{vertical-align:top; text-align:center; padding:10px;}
table.detailTable th{line-height:16px;
font-family:'微软雅黑'; letter-spacing:1px; font-size:12px; color:#666;font-weight:normal; text-align:center;}


@media screen and (max-width: 1284px){
	h1.xdtj02pic01>img{
		float:left;
		width: 50%;
		margin-top: 105px;
	}
}
/*@media screen and (max-width: 1030px){
	h1.xdtj02pic01>img{
		float:none;
		width: 50%;
		display: block;
		margin:0 auto;
		margin-top: 105px;
	}
}*/


@media screen and (max-width: 1284px){
	h1.xdtj02pic02>img{
			float:right;
		}
	}
}
