@charset "utf-8";
/* CSS Document */

@import url("reset.css");


.topic_wrapper{
	width:900px;
	height: 605px;
	margin:0px auto 30px auto;
	position:relative;
	}
	
.topic_wrapper2{
	width:900px;
	height: 605px;
	margin:0px auto 30px auto;
	position:relative;
	}	

.image_1{
	position: absolute;
	top: 280px;
	left: 21px;
}		
.image_2{
	position: absolute;
	top: 295px;
	left: 792px;
}		
.image_3{
	position: absolute;
	top: 329px;
	left: 51px;

}
.image_4{
	position: absolute;
	top: 384px;
	left: 13px;
}
.image_5{
	position: absolute;
	top: 395px;
	left: 764px;
}
.image_6{
	position: absolute;
	top: 445px;
	left: 42px;
}		
.image_7{
	position: absolute;
	top: 445px;
	left: 792px;
}			
.image_8{
	position: absolute;
	top: 344px;
	left: 776px;
}


/*=[mane_a]=*/
.topic_a_menu{
	z-index: 10;
	width: 888px;
	top: 15px;
	clear:both;
	height:30px;
	display:block;
}
.topic_a_menu ul{}
.topic_a_menu li{
	display:block;
	float:left;

	}
.topic_a_menu li a{}
.topic_a_menu li a:hover{color:#308585;}

/*=[mane_b]=*/	
.topic_b_menu{

	z-index: 10;

	top: 15px;
	left: 53px;
}
.topic_b_menu ul{}
.topic_b_menu li{
	display:block;
	float:left;

	}
.topic_b_menu li a{}
.topic_b_menu li a:hover{}	

/*=[mane_c]=*/	
.topic_c_menu{

	z-index: 10;
	top: 15px;
	left: 250px;
}
.topic_c_menu ul{}
.topic_c_menu li{
	display:block;
	float:left;

	}
.topic_c_menu li a{}
.topic_c_menu li a:hover{}	

/*=[mane_d]=*/	
.topic_d_menu{

	z-index: 10;

	top: 15px;
	left: 213px;
}
.topic_d_menu ul{}
.topic_d_menu li{
	display:block;
	float:left;
	width:111px;
	}
.topic_d_menu li a{}
.topic_d_menu li a:hover{}		
	
	
.prepare{
	float:left;
	/*background: rgba(59, 57, 71, 0.3);*/
	color:#ccc;
	text-align:center;
	line-height:30px;
	font-size:17px;
	padding:0px 20px;
	margin-right:10px;
	border-radius: 3px;
	cursor:pointer;}	
	
.indeed{
	display:block;
	float:left;
	/*background-image:url(../img/btn_bg2.jpg);*/
	
	text-align:center;
	line-height:30px;
	font-size:17px;
	padding:0px 20px;
	margin-right:10px;
	border-radius: 3px;
	cursor:pointer;}

	 


/*=[a]=*/
.topic_a_wrapper{
	position: absolute;
	width: 900px;
	z-index: 5;
	top: 0px;

	}
.topic_a_1{
	width: 900px;
	height: 605px;
	z-index: 5;
	}
	
.demovideo{
	width:900px;
	height: 605px;
	background-image:url(../img/laptop-a-01.png);
	background-repeat:no-repeat;
	background-position:center bottom;}

.videoimg{
	position: absolute;
	top: 235px;
	left: 195px;
	width: 506px;
	height: 313px;
	z-index:99}
		
#video1{
	position: absolute;
	top: 235px;
	left: 195px;
	width: 506px;
	height: 313px;
	z-index:95;
	
	/*display:none*/
	}
	
		

.demo_thumbnail{
	position: absolute;
	width: 364px;
	height: 80px;
	margin: 0 auto;
	/*background-image: url(../img/lineaha.png);
	background-repeat: no-repeat;
	background-position: center 0px;*/
	left: 323px;
	top: 608px;
	}

.demo_thumbnail img{
	width:60px;
	height:60px;
	margin-left:8px;
	margin-right:8px;
	margin-top:20px;
	float:left;
	}	
	

#a_1{
	position: absolute;
	height: 30px;
	color: #666;
	font-size: 13px;
	font-weight: bold;
	left: 293px;
	top: 680px;
	}
#a_2{
	position: absolute;
	height: 30px;
	color: #666;
	font-size: 13px;
	font-weight: bold;
	left: 565px;
	top: 680px;
	}
#a_3{
	position: absolute;
	height: 30px;
	color: #666;
	font-size: 13px;
	font-weight: bold;
	left: 483px;
	top: 680px;
	}
#a_4{
	position: absolute;
	height: 30px;
	color: #666;
	font-size: 13px;
	font-weight: bold;
	left: 417px;
	top: 680px;
	}	


/*=[b]=*/
.topic_b_wrapper{
	position: absolute;
	width: 900px;
	z-index: 5;
	top: 0px;
	}
.topic_b_1{
	width: 900px;
	height: 605px;
	background-image: url(../img/topic_b_1.png);
	background-position: center bottom;
	background-repeat: no-repeat;

	}


/*=[c]=*/
.topic_c_wrapper{
	position: absolute;
	width: 900px;
	z-index: 5;
	top: 0px;
	}
.topic_c_1{
	width: 900px;
	height: 605px;
	background-image: url(../img/topic_c_1.png);
	background-position: center bottom;
	background-repeat: no-repeat;

	}
	

	
/*=[d]=*/
.topic_d_wrapper{
	position: absolute;
	width: 900px;
	z-index: 5;
	top: 0px;
	}
.topic_d_1{
	width: 900px;
	height: 605px;
	background-image: url(../img/topic_d_1.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;

	}
.topic_text{
	z-index: 4;
	position: absolute;
	margin: 25px 20px 20px 20px;
	width: 862px;
		/*text-shadow:0px 2px 2px rgba(0,0,0,0.4),
             	0px 1px 1px rgba(0,0,0,0.1),
             	0px 3px 8px rgba(0,0,0,0.1);*/
}
.topic_text h4{ font-size:26px; font-weight:200; font-family:  "Segoe UI", Arial, Helvetica, sans-serif; color:#000; text-align:center;}
.topic_text p{ color:#333; font-size:16px;  padding:0px 20px 0px 20px; text-align:center; }


.topic_new{
	background:url(../img/toptic-new.png); position:absolute; width:183px; height:109px;}
	
/*=[test]=*/
.fff{
	position:absolute;
	width:200px;
	height:200px;
	background-color:#960;
	
	left:150px;
	top:150px;
	}	
.ggg{
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: #354;
	left: 200px;
	top: 197px;
	}	
	
	


.topic_bg_a{
	background-image: url(../img/position_bg_a.jpg);
	height:680px;
	z-index: 99;
	background-repeat: no-repeat;
	background-position: center top;
}
.topic_bg_b{
	background-image: url(../img/position_bg_b.jpg);
	z-index: 99;
	background-repeat: no-repeat;
	background-position: center top;
}
.topic_bg_c{
	background-image: url(../img/position_bg_a.jpg);
	z-index: 99;
	background-repeat: no-repeat;
	background-position: center top;
}

.topic_bg_d{
	background-image: url(../img/position_bg_d.jpg);
	z-index: 99;
	background-repeat: no-repeat;
	background-position: ccenter top;
}


.video_nav{
	position: absolute;
	padding: 30px 20px 0px 20px;
	left: 253px;
	top: 545px;
	display: block;
	background-image: url(../img/video_nav_bg.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	z-index:150;
}
.nav_text{ text-align:center; font-size:25px; margin-top:15px; color:#ff6633}

.nav_item_a{ width:96px; height:55px; background:url(../img/nav_item_a_off.png); cursor: pointer;  }
.nav_item_a:hover{ background:url(../img/nav_item_a_hover.png);}

.nav_item_b{ width:95px; height:55px; background:url(../img/nav_item_b_off.png); cursor: pointer; }
.nav_item_b:hover{ background:url(../img/nav_item_b_hover.png);}

.nav_item_c{ width:95px; height:55px; background:url(../img/nav_item_c_off.png); cursor: pointer; }
.nav_item_c:hover{ background:url(../img/nav_item_c_hover.png);}

.nav_item_d{ width:96px; height:55px; background:url(../img/nav_item_d_off.png);  cursor: pointer;}
.nav_item_d:hover{ background:url(../img/nav_item_d_hover.png);}

.nav_item_a_on{ width:96px; height:55px; background:url(../img/nav_item_a.png); }
.nav_item_b_on{ width:95px; height:55px; background:url(../img/nav_item_b.png); }
.nav_item_c_on{ width:95px; height:55px; background:url(../img/nav_item_c.png); }
.nav_item_d_on{ width:96px; height:55px; background:url(../img/nav_item_d.png);}

#icon_a{ width:96px; height:55px; float: left;}
#icon_b{ width:95px; height:55px; float: left;}
#icon_c{ width:95px; height:55px; float: left;}
#icon_d{ width:96px; height:55px; float: left;}