@charset "UTF-8";

#special-sectionOverview {
	font-size: 16px;
  line-height: 20px;
	font-family: 'Open Sans', sans-serif;
}
#special-sectionOverview .navigation {
	width: 100%;
	min-width: 1280px;
	/*height: 150px;*/
	height: 115px;
	list-style-type: none;
	margin:0;
	padding:0;
	background-color: black;
}
#special-sectionOverview .navigation li {
	float: left;
	width: 12.4%;
	height: 115px;
/*	text-indent: -9999px;*/
	overflow:hidden;
	text-align: center;
	color: white;
	font-size: 1em;
	font-weight: 100;

}

#special-sectionOverview .navigation li:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
#special-sectionOverview .navigation li p{
display: inline-block;
font-size:16px;
vertical-align: middle;/* 保证文字垂直居中 */
line-height: 1.5
}


/*#special-sectionOverview .navigation a:hover li {
	opacity: 0.8;
}*/
#special-sectionOverview .navigation .navi_01 {
	border-right: 1px solid white;
	background: url('../img/bg_navi_01.jpg') top center no-repeat;
	background-size: 100%;

}
#special-sectionOverview .navigation .navi_02 {
	border-right: 1px solid white;
	background: url('../img/bg_navi_02.jpg') top center no-repeat;
	background-size: 100%;
}
#special-sectionOverview .navigation .navi_03 {
	border-right: 1px solid white;
	background: url('../img/bg_navi_03.jpg') top center no-repeat;
	background-size: 100%;
}
#special-sectionOverview .navigation .navi_04 {
	border-right: 1px solid white;
	background: url('../img/bg_navi_04.jpg') top center no-repeat;
	background-size: 100%;
}
#special-sectionOverview .navigation .navi_05 {
	border-right: 1px solid white;
	background: url('../img/bg_navi_05.jpg') top center no-repeat;
	background-size: 100%;
}
#special-sectionOverview .navigation .navi_06 {
	border-right: 1px solid white;
	background: url('../img/bg_navi_06.jpg') top center no-repeat;
	background-size: 100%;
}
#special-sectionOverview .navigation .navi_07 {
	border-right: 1px solid white;
	background: url('../img/bg_navi_07.jpg') top center no-repeat;
	background-size: 100%;
}

#special-sectionOverview .navigation .navi_08 {
/*	width: 14.8%;*/
	background: url('../img/bg_navi_08.jpg') top center no-repeat;
	background-size: 100%;
}



/*#debug {
	width: 110px;
	height: 30px;
	position: fixed;
	top: 0;
	right: 0;
	text-align: center;
	line-height: 30px;
	color: white;
	background-color: teal;
	z-index: 12999;
}*/
/*#debug2 {
	width: 180px;
	height: 30px;
	position: fixed;
	top: 40px;
	right: 0;
	text-align: center;
	line-height: 30px;
	color: white;
	background-color: teal;
	z-index: 12999;
}*/
#special-sectionOverview h1,
#special-sectionOverview h2,
#special-sectionOverview h3,
#special-sectionOverview h4,
#special-sectionOverview h5,
#special-sectionOverview h6,
#special-sectionOverview p {
	margin:0;
	padding: 0;
}
#test-Width-100-precent {
	width: 100%;
	background-color: #fff;
}
#test-Width-100-precent > div {
	width: 100%;
	min-width: 1280px;
	margin: 0;
	padding: 0;
	position: relative;
}
#special-sectionOverview .center {text-align: center;}
#special-sectionOverview .p1_bg, 
#special-sectionOverview .p2_bg,
#special-sectionOverview .p3_bg, 
#special-sectionOverview .p4_bg,
#special-sectionOverview .p5_bg, 
#special-sectionOverview .p6_bg,
#special-sectionOverview .p7_bg, 
#special-sectionOverview .p8_bg,
#special-sectionOverview .p9_bg, 
#special-sectionOverview .p10_bg,
#special-sectionOverview .p11_bg, 
#special-sectionOverview .p12_bg,
#special-sectionOverview .p13_bg,
#special-sectionOverview .p14_bg,
#special-sectionOverview .p15_bg,
#special-sectionOverview .p16_bg {
	width: 100%;
	display: block;
}
#special-sectionOverview .p1,
#special-sectionOverview .p2,
#special-sectionOverview .p3,
#special-sectionOverview .p4,
#special-sectionOverview .p5,
#special-sectionOverview .p6,
#special-sectionOverview .p7,
#special-sectionOverview .p8,
#special-sectionOverview .p9,
#special-sectionOverview .p10 {
	overflow: hidden;
	position: relative;
	background-color: #fff;
	z-index: 100;
}

/* ---------------p1--------------- */
#special-sectionOverview .p1 {
	color: #3d3d3d;
}
/*	#special-sectionOverview .p0 {
		width:1%;
		position: absolute;
		top: 0px;
		left: 0;
	}*/
	#product_content_area #special-sectionOverview .p1 h2 {
		font-size: 2.5em;
		color: #3d3d3d;
		font-weight: 400;
		line-height: 1.2;
		z-index: 2;
		position: absolute;
		top: 150px;
		left: 33%;
		font-family: 'Open Sans';

	}
/* ---------------p2--------------- */
#special-sectionOverview .p2 {
	color: #3d3d3d;
}
	
	.p2_box {
		width: 1000px;
		height: 600px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -300px;
		margin-left: -500px;
		color: #454545;
	}

	.p2_txt {
		width: 450px;
		height: 600px;
		position: absolute;
		top: 0px;
		left: 0;
		text-align: left;
	}
	.pc_3d {
		width: 500px;
		height: 600px;
		position: absolute;
		top: 80px;
		right: 0;
		text-align: center;
	}
	

	#product_content_area #special-sectionOverview .p2 h2 {
		font-size: 2.5em;
		font-weight: 200;
		z-index: 2;
		margin-bottom: 80px;
		color: #454545;
		position: relative;
	}
	#product_content_area #special-sectionOverview .p2 h3 {
		font-size: 1.5em;
		font-weight: 500;
		color: #454545;
		margin-bottom: 20px;
		z-index: 2;
		position: relative;
	}
	#product_content_area #special-sectionOverview .p2 p {
		font-size: 1.2em;
		line-height: 1.8;
		font-weight: 100;
		margin-bottom: 20px;
		color: #454545;
		position: relative;
		/*text-align: left;*/
	}
	#special-sectionOverview .p2_01 {
		width: 22%;
		position: absolute;
		top: 88%;
		left: 85%;
	}
.pc_3d h3 {
	text-align: center;
	width: 100%;
	/*background-color: red;*/
}
/* 360 */
.jquery-script-center {
  text-align: center;
}
.rotatebox {
  width: 530px;
  margin: 0 auto;
  position: relative;
}

.rotatebox .images{
  width: 530px;
  height: 451px;
  position: relative;
}
.rotatebox .images img{
  width: 530px;
  height: 451px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.images {
  width: 50px;
  height: 50px;
}

/* ---------------p3--------------- */	
#special-sectionOverview .p3 {
	background-color: white;
	height: 770px;
	color: #343434;
}
	#special-sectionOverview .p3 h2 {
		font-size: 2.5em;
		font-weight: 400;
		width: 50%;
		text-align: center;
		z-index: 2;
		position: absolute;
		top: 95px;
		left: 25%;
		/*margin-left: -120px;*/
	}
	#special-sectionOverview .p3 .t1 {
		font-size: 1.2em;
		text-align: center;
		width: 1000px;
		line-height: 1.6;
		font-weight: 100;
		position: absolute;
		top: 180px;
		left: 50%;
		margin-left: -500px;
	}
	#special-sectionOverview .p3 .notice {bottom:15%;left:220px;color: #363637;font-size: 0.6em;}
	.p3_txt {
		width: 740px;
		height: 280px;
		position: absolute;
		top: 140px;
		left: 55%;
		margin-left: -280px;
		text-align: center;
		/*background-color: #eee;*/
	}

	#special-sectionOverview .p3_01 {
		width: 43%;
		position: absolute;
		top: 50%;
		left: 52%;
		z-index: 2;
	}
.p3_pic {
	width: 1010px;
	height: 400px;
	position: absolute;
	top: 300px;
	left: 50%;
	margin-left: -505px;
	background: url("../img/p3_01.jpg") 0px center no-repeat;
}

.p3_pic .txt_1 {
	width: 200px;
	position: absolute;
	top: 30px;
	left: 160px;
	text-align: center;
} 
.p3_pic .txt_2 {
	width: 200px;
	position: absolute;
	top: 30px;
	left: 670px;
	text-align: center;
} 	
.p3_pic .txt_3 {
	width: 430px;
	position: absolute;
	bottom: 0px;
	left: 40px;
	text-align: left;
} 
.p3_pic .txt_4 {
	width: 430px;
	position: absolute;
	bottom: 0px;
	right: 40px;
	text-align: left;
}


/* ---------------p4--------------- */	
#special-sectionOverview .p4 {
	color: white;
	z-index: 100;
}
#special-sectionOverview .p4 h2 {
	font-size: 2.5em;
	font-weight: 200;
	color: white;
	width: 50%;
	text-align: left;
	z-index: 2;
	position: absolute;
	top: 165px;
	left: 15%;
}
#special-sectionOverview .p4 p {
	font-size: 1.2em;
	font-weight: 200;
	color: white;
	line-height: 1.8;
	width: 36%;
	text-align: left;
	z-index: 2;
	position: absolute;
	top: 235px;
	left: 15%;
}
/* ---------------p5--------------- */	
#special-sectionOverview .p5 {
	/*height: 660px;*/
	z-index: 110;
}
#special-sectionOverview .p5 h2 {
	font-size: 2.5em;
	font-weight: 200;
	color: white;
	width: 50%;
	text-align: center;
	z-index: 2;
	position: absolute;
	top: 60px;
	left: 25%;
}
#special-sectionOverview .p5 p {
	font-size: 1.2em;
	font-weight: 200;
	color: white;
	line-height: 1.8;
	width: 1000px;
	text-align: center;
	z-index: 2;
	position: absolute;
	top: 130px;
	left: 50%;
	margin-left: -500px;
}
/* ---------------p6--------------- */
#special-sectionOverview .p6 {z-index: 103;}
#special-sectionOverview .p6 h2 {
	font-size: 2.5em;
	font-weight: 200;
	color: white;
	width: 90%;
	text-align: center;
	z-index: 2;
	position: absolute;
	bottom: 700px;
	left: 5%;
}
#special-sectionOverview .p6 .pp {
	font-size: 1.3em;
	font-weight: 200;
	color: white;
	line-height: 1.8;
	width: 1000px;
	text-align: center;
	z-index: 2;
	position: absolute;
	bottom: 600px;
	left: 50%;
	margin-left: -500px;
}
.mode_content {
	width: 1020px;
	height: 375px;
	position: absolute;
	bottom: 100px;
	left: 50%;
	margin-left: -510px;
}
.mode_content div {
	width: 170px;
	height: 325px;
	background-color: white;
	float: left;
	text-align: center;
	padding: 25px;
}
.mode_content div h2 {
	font-size: 1em;
	margin-bottom: 50px;
}
#special-sectionOverview .p6 .mode_content div p {
	font-size: 0.9em;
	margin-top: 30px;
	color: gray;
}
#special-sectionOverview .p6 .mode_content div h4 {
	margin-top: 20px;
}
.music_mode,
.movie_mode,
.gaming_mode {margin-right: 45px;}
.music_mode {
	background: url("../img/bg_music.jpg") center bottom no-repeat;
	background-size: 100%;
}
.movie_mode {
	background: url("../img/bg_movie.jpg") center bottom no-repeat;
	background-size: 100%;
}
.gaming_mode {
	background: url("../img/bg_game.jpg") center bottom no-repeat;
	background-size: 100%;
}
.user_mode {
	background: url("../img/bg_user.jpg") center bottom no-repeat;
	background-size: 100%;
}



/* ---------------p7--------------- */
#special-sectionOverview .p7 {color: white;z-index: 103;}
	
.p7_txt {
	width: 35%;
	height: 900px;
	position: absolute;
	top: 50px;
	left: 50%;
	margin-left: -25px;
}
#product_content_area #special-sectionOverview .p7 h2 {
	font-size: 2.5em;
	font-weight: 200;
	z-index: 2;
	margin-bottom: 30px;
	color: #454545;
	position: relative;
	padding-left: 120px;
	background: url("../img/p7_01.png") left top no-repeat;
}
#product_content_area #special-sectionOverview .p7 h3 {
	font-size: 1.3em;
	font-weight: 500;
	color: #3298ba;
	margin-bottom: 20px;
	z-index: 2;
	position: relative;
}
#product_content_area #special-sectionOverview .p7 p {
	font-size: 1.2em;
	line-height: 1.5;
	font-weight: 100;
	margin-bottom: 20px;
	color: #454545;
	position: relative;
	padding-right: 50px;
	/*text-align: left;*/
}
.p7_txt a {
	color: #454545;
	display: block;
	margin-top: 10px;
	outline: none;
}
.p7_txt img {width: 90%;}
.p7_txt a:hover {
	text-decoration: underline;
}
.link_eye_care {
	width: 137px;
	height: 32px;
	position: absolute;
	top: 0px;
	right: 10%;
	background: url('../img/icon_eye_care.png') top center no-repeat;
	background-size: 100%;
}
a:hover .link_eye_care {
	background-position: 0 -31px;
}

/* ---------------p8--------------- */
#special-sectionOverview .p8 {
	z-index: 104;
}
#product_content_area #special-sectionOverview .p8 h2 {
	font-size: 2.5em;
	font-weight: 200;
	width: 35%;
	z-index: 2;
	margin-bottom: 60px;
	color: #fff;
	line-height: 1.4;
	position: absolute;
	top: 50px;
	right: 14%;
}
#product_content_area #special-sectionOverview .p8 .pp {
	font-size: 1.2em;
	line-height: 2;
	font-weight: 100;
	width: 35%;
	margin-bottom: 20px;
	color: #fff;
	position: absolute;
	top: 230px;
	right: 14%;
}
#product_content_area #special-sectionOverview .p8 .notice {
	font-size: 1em;
	line-height: 2;
	font-weight: 100;
	width: 35%;
	color: gray;
	position: absolute;
	bottom: 130px;
	right: 14%;
}
#product_content_area #special-sectionOverview .p8 a {
	color: gray;
	outline: none;
}
#product_content_area #special-sectionOverview .p8 a:hover {
	text-decoration: underline;
}

/* ---------------p9--------------- */
#special-sectionOverview .p9 {
	background-color:#fff;
	overflow: hidden;
	z-index: 103;
}
#product_content_area #special-sectionOverview .p9 h2 {
	font-size: 2.5em;
	font-weight: 200;
	width: 90%;
	text-align: center;
	z-index: 2;
	color: #454545;
	line-height: 1.4;
	position: absolute;
	top: 5%;
	left: 5%;
}
.p9 .float_box {
	width: 1100px;
	height: 300px;
	/*background-color: tan;*/
	position: absolute;
	top: 14%;
	left: 50%;
	margin-left: -550px; 
}

.p9 .float_box .box_01,
.p9 .float_box .box_02 {
	width: 45%;
	height: 300px;
	float: left;
}
.p9 .float_box .box_01 {margin-right: 5%;}
.p9 .float_box .box_01 h3,
.p9 .float_box .box_02 h3 {
	font-size: 1.9em;
	font-weight: 400;
	width: 90%;
	text-align: center;
	color: #292929 !important;
	margin-bottom: 30px!important;
}
.p9 .float_box .box_01 p,
.p9 .float_box .box_02 p {
	font-size: 1.2em;
	font-weight: 200;
	text-align: center;
	line-height: 1.6;
	color: #292929 !important;
}


/* ---------------p10--------------- */
#special-sectionOverview .p10 {
	height: 1500px;
	background-color: white;
	z-index: 105;
}
#special-sectionOverview .p10 h2 {
	font-size: 1.5em;
	color: #292929;
	margin-bottom: 10px;
}
#special-sectionOverview .p10 p {
	font-size: 1em;
	color: #292929;
	margin-bottom: 10px;
	font-weight: 200;
}

.p10_box_01 {
	height: 370px;
	width: 1100px;
	margin: 60px auto;
	position: relative;
}
.p10_box_01 .txt {
	width: 550px;
	height: 370px;
	position: absolute;
	left: 0;
}
.p10_box_01 .txt img {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 45px;
}
.p10_box_01 .p10_01 {
	width: 500px;
	/*height: 370px;*/
	position: absolute;
	right: 0;
}

.p10_box_02 {
	height: 380px;
	width: 1100px;
	margin: 60px auto;
	position: relative;
}
.p10_box_02 .txt {
	width: 500px;
	height: 270px;
	position: absolute;
	right: 0;
	top: 60px;

}
.p10_box_02 .p10_02 {
	width: 550px;
	/*height: 370px;*/
	position: absolute;
	left: 0;
}
.p10_box_02 .txt a {
	display: block;
	font-size: 1.5em;
	color: #292929;
	margin-top: 50px;
	text-decoration: underline;
}

.p10_box_03 {
	height: 500px;
	width: 1100px;
	margin: 60px auto;
	position: relative;
}
.p10_box_03 .txt {
	width: 550px;
	height: 500px;
	position: absolute;
	left: 0;
	top: 50px;
}
.p10_box_03 .txt img {
	width: 50%;
	position: absolute;
	left: 0;
	bottom: 195px;
}
.p10_box_03 .p10_03 {
	width: 515px;
	position: absolute;
	right: 10px;
}

.p10_box_02 a {
	outline: 0;
}