body{
	font-family: Arial, Helvetica, sans-serif;
}
area{
	outline:none;
	-moz-outline:none;
	
}

.bigBox{
	width:980px;
	height:645px;
	position:relative;
	margin:auto;
}
.video_di{
	position: absolute;
	width:980px;
	height:645px;
	z-index: 8000;
	background-color: #fff;
	display: none;
}
#testCanvas,
.testVideo{
	position:absolute;
	z-index: 9100;
	display: none;
}
.headBox{
	width:980px;
	height:66px;
	
}
.head_question{
	position:absolute;
	left:23px;
	top:33px;
	
}
.head_question div{
	width:485px;
	height:29px;
}
.soundBtn{
	float:left;
	width:34px;
	height:35px;
	
	cursor:pointer;
}
.soundBtn_2{
	position: absolute;
	left: 120px;
	top: 30px;
	width: 34px;
	height: 35px;
	cursor: pointer;
}

.retryBtn{
	position: absolute;
	width: 46px;
	height: 46px;
	top: 82px;
    left: 916px;
	cursor: pointer;
}
.retryBtn_dim{
	position:absolute;
	width:46px;
	height:46px;
	top: 82px;
    left: 916px;
}


.bodyBox{
	width:980px;
	height:579px;
}

.bodyBox_left{
	width:199px;
	height:579px;
	float:left;
}
.left_font{
	margin-left:34px;
	font-size:23px;
	width:155px;
	height:377px;
	padding:10px 0 0 0px;
	line-height:28px;
	position:relative;
}
.left_pic{
	padding:5px 0 0 16px;
	width: 167px;
	height: 126px;
	cursor: pointer;
}
.left_pic img{
	cursor:pointer;
}


.bodyBox_right{
	width:781px;
	height:579px;
	float:left;
}
.right_life{
	width:791px;
	height:65px;
	
}
#life_0,#life_1,#life_2{
	padding:15px 0 0 25px;
}
.right_content{
	width:753px;
	height:480px;
	margin:0px 0 0 13px;
	
	
}


.daan_1{
	/* width: 6.4%; */
	position: absolute;
	top: 22%;
	left: 22.5%;
}
.daan_1 img{
	width:100%;
}

.daan_2{
	/* width: 6.4%; */
	position: absolute;
	top: 23.3%;
	left: 36.5%;
	z-index: 0;
}
.daan_2 img{
	width:100%;
}

.daan_3{
	/* width: 20%; */
	position: absolute;
	top: 21.5%;
	left: 78%;
	z-index: 0;
}
.daan_3 img{
	width:100%;
}

.daan_4{
	/* width: 5.1%; */
	position: absolute;
	top: 49.5%;
	left: 48%;
	z-index: 0;
}
.daan_4 img{
	width:100%;
}

.daan_5{
	/* width: 5.1%; */
	position: absolute;
	top: 52%;
	left: 62.5%;
	z-index: 0;
}
.daan_5 img{
	width:100%;
}

.dingwei{
	position:absolute;
	top:72px;
	left:0px;
	
}

#popup_bg{
	position:absolute;
	top:131px;
	left:211px;
	width:753px;
	height:480px;
	z-index:50;
}

#close_btn{
	position:absolute;
	top:10px;
	left:670px;
	width:46px;
	height:47px;
	cursor:pointer;
	background:url(../images/c_1.png);
}



#dimBox{
	background: #aaaaaa url(../images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: .3;
	position:absolute;
	width: 980px;
	height: 645px;
	z-index:10;
}

#dimBox_1{
	background-color:#FFFFFF;
	opacity:0;
	position:absolute;
	top: 0;
	left: 0;
	width: 980px;
	height: 645px;
	z-index:100;
}

#dimBox_2{
	background-color:#FFFFFF;
	opacity:0;
	position:absolute;
	top: 130px;
	left: 200px;
	width: 780px;
	height: 515px;
	z-index:49;
}
#tishiBox{
	padding: .2em;
	width:409px;
	height:219px;
	position:absolute;
	top:181px;
	left:295px;
	background-color:#fff;
	z-index:11;
}
#move_div{
	cursor:move;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	width:auto;
	height:48px;
	border: 1px solid #aaaaaa;
	background: #cccccc url(../images/jianbian.png) 50% 50% repeat-x;
	font-size:18px;
}
#move_div div{
	margin:10px 0 0 12px;
	font-weight: bold;
}
#tishiBox_content{
	height: 64px;
	padding: .5em 1em;
}
#tishiBox_btn{
	
	border-top: 1px solid #aaaaaa;
	text-align: left;
}
#tishiBox_btn_b{
	cursor:pointer;
	float:right;
	text-align:center;
	width:54px;
	margin:15px 20px 0 0;
	padding:10px;
	border: 1px solid #d3d3d3;
	background: #e6e6e6 url(../images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
	font-weight: normal;
	color: #555555;
}
#tishiBox_btn_b:hover{
	border: 1px solid #999999;
}
#tishiBox_btn_b:active{
	background: #fff;
}

#title_div{
	width:980px;
	height:645px;
	position:absolute;	
	z-index:20;
}

#temp_vo{
	position: absolute;
	top: 27.5%;
	left: 28%;
	z-index: 55;
}
	
#temp_vo img{
	width:100%;
}

#temp_vo_2{
	position: absolute;
	top: 39%;
	left: 56%;
	z-index: 55;
}
	
#temp_vo_2 img{
	width:100%;
}



.dengPaoBox{
	width:46px;
	height:46px;
	position:absolute;
	left:21px;
	top:595px;
	cursor:pointer;
}

#startBtn{
	width:200px;
	height:77px;
	position:absolute;
	z-index:1000;
	top:370px;
	left:393px;
	cursor:pointer;
}

.yinchang_1{
	width: 38px;
	height: 27px;
	position: absolute;
	top: 397px;
	left: 430px;
	z-index: 2;
	
	cursor:pointer;
}
.yinchang_2{
	width: 27px;
	height: 25px;
	position: absolute;
	top: 394px;
	left: 465px;
	z-index: 2;
	
	cursor:pointer;
}

.yinchang_3{
	width: 27px;
	height: 25px;
	position: absolute;
	top: 410px;
	left: 835px;
	z-index: 2;
	
	cursor:pointer;
}

.yinchang_4{
	width: 27px;
	height: 25px;
	position: absolute;
	top: 406px;
	left: 857px;
	z-index: 2;
	
	cursor:pointer;
}
.yinchang_5{
	width: 27px;
	height: 25px;
	position: absolute;
	top: 400px;
	left: 884px;
	z-index: 2;
	cursor:pointer;
}
.yinchang_6{
	width: 27px;
	height: 25px;
	position: absolute;
	top: 414px;
	left: 814px;
	z-index: 2;
	cursor:pointer;
}

#area_1{
	position:absolute;
	top: 406px;
	left: 356px;
	display:none;
}
#area_2{
	position:absolute;
	top: 388px;
	left: 429px;
	display:none;
}
#area_3{
	position:absolute;
	top: 410px;
	left: 658px;
	display:none;
}
#area_4{
	position:absolute;
	top: 373px;
	left: 755px;
	display:none;
}

.requ_0{
	width: 15%;
	height: 26%;
	position: absolute;
	top: 21.8%;
	left: 21.8%;
	cursor: pointer;
	z-index: 1;
}

.requ_1{
	width: 18.5%;
	height: 26%;
	position: absolute;
	top: 21.5%;
	left: 37%;
	cursor: pointer;
	z-index: 1;
}

.requ_2{
	width: 16%;
	height: 22%;
	position: absolute;
	top: 22%;
	left: 79.2%;
	cursor: pointer;
	z-index: 1;
}

.requ_3{
	width: 13%;
	height: 31%;
	position: absolute;
	top: 52%;
	left: 48.5%;
	cursor: pointer;
	z-index: 1;
}


.requ_4{
	width: 14%;
    height: 29%;
    position: absolute;
    top: 54%;
    left: 62%;
    cursor: pointer;
}
.requ_5{
	width: 24.5%;
	height: 26%;
	position: absolute;
	top: 21.5%;
	left: 55%;
	cursor: pointer;
}
.requ_6{
	width: 12.5%;
	height: 28%;
	position: absolute;
	top: 55%;
	left: 22.4%;
	cursor: pointer;
}
.requ_7{
	width: 13.5%;
	height: 31%;
	position: absolute;
	top: 52%;
	left: 35%;
	cursor: pointer;
}
.requ_8{
	width: 17%;
	height: 32.5%;
	position: absolute;
	top: 44%;
	left: 80.8%;
	cursor: pointer;
}
.requ_9{
	width: 6.5%;
	height: 16%;
	position: absolute;
	top: 42%;
	left: 54%;
	cursor: pointer;
}
.requ_10{
	width: 11%;
	height: 5%;
	position: absolute;
	top: 51%;
	left: 41%;
	cursor: pointer;
}
.requ_11{
	width: 5%;
	height: 8%;
	position: absolute;
	top: 59%;
	left: 33.8%;
	cursor: pointer;
}
.requ_12{
	width: 4%;
	height: 5%;
	position: absolute;
	top: 67%;
	left: 43.3%;
	cursor: pointer;
}
.requ_13{
	width: 4%;
	height: 7%;
	position: absolute;
	top: 66%;
	left: 67%;
	cursor: pointer;
}
.requ_14{
	width: 6.5%;
	height: 16%;
	position: absolute;
	top: 58%;
	left: 76%;
	cursor: pointer;
}
.requ_15{
	width: 3%;
	height: 6.5%;
	position: absolute;
	top: 84%;
	left: 74%;
	cursor: pointer;
}
.requ_16{
	width: 10.5%;
	height: 5%;
	position: absolute;
	top: 85%;
	left: 59.5%;
	cursor: pointer;
}
.requ_17{
	width: 11%;
	height: 11%;
	position: absolute;
	top: 82%;
	left: 46.5%;
	cursor: pointer;
}
.requ_18{
	width: 6.5%;
	height: 17%;
	position: absolute;
	top: 75%;
	left: 37.8%;
	cursor: pointer;
}







/* new */

/* debug */
#startBtn,
#title_div,
#dimBox_1{
	display: ;
}

body,
html {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
}

img {
	border: 0;
}

#bigBox-img {
	width: 100%;
}

#title_div-img,
#startBtn-img {
	width: 100%;
}

#box-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 980px) {
	.bigBox {
		width: 100%;
		height: 100%;
	}
	
	#title_div {
		width: 100%;
		height: 100%;
	}
	
	#startBtn {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	
	#startBtn-img {
		width: 21%;
		position: absolute;
		top: 24%;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	
	.headBox {
		width: 100%;
		height: 11%;
		position: absolute;
	}
	
	#head_question-img {
		width: 50%;	
	}
	
	#head_question-wrap {
		width: 100%;
	}
	
	.head_question {
		width: 92%;
		left: 2%;
		top: 44%;
	}
	
	#headBox-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.soundBtn_2 {
		left: 49%;
		top: 36%;
	}
	
	#soundBtn_2-img  {
		width: 82%;
	}
	
	.bodyBox {
		width: 100%;
		height: 89%;
		overflow: hidden;
		position: absolute;
		top: 11%;
	}
	
	.bodyBox_left {
		width: 20%;
		position: relative;
		height: 89%;
		z-index: 1;
	}
	
	.bodyBox_right {
		width: 80%;
		position: relative;
		height: 100%;
	}
	
	.dingwei {
		top: 0;
		cursor: pointer;
		z-index: 3;
	}
	
	.left_font {
		margin-left: 0;
		padding: 0;
		margin: 0;
		position: absolute;
		top: 0;
		left: 21%;
		width: auto;
		height: auto;
	}
	
	#left_pic-wrap {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		height: 30%;
		margin: 0 auto;
	}
	
	.left_pic {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 93%;
		padding: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 92%;
	}
	
	.left_pic img {
		width: 100%;
	}
	
	.dengPaoBox {
		left: 0;
		top: 0;
		bottom: 1%;
		width: 5%;
		height: auto;
		top: auto;
	}
	
	#dengPaoBox-img {
		width: 100%;
	}
	
	.right_life {
		overflow: hidden;
		height: auto;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 11%;
	}
	
	.right_content {
		width: 100%;
		margin: 0;
		height: auto;
		position: absolute;
		left: 0;
		top: 11%;
		text-align: center;
	}
	
	.right_life img {
		float: left;
		padding: 0;
		margin-top: 2%; 
		margin-left: 4%;
		
		width: 6%;
	}
	
	.retryBtn,
	.retryBtn_dim {
		right: 1.5%;
		float: right;
		position: absolute;
		left: auto;
		top: 20%;
		width: 6%;
	}
	
	.retryBtn img,
	.retryBtn_dim img {
		width: 100%;
	}
	
	#content_pd img {
		width: 97%;
		margin: 0 auto;
	}
	
	#tishiBox {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	#popup_bg {
		left: 21%;
		top: 20%;
		width: 78%;
		height:	auto;
	}
	
	#popup_bg img {
		width: 100%;
	}
	
	.dingwei img {
		width: 82%;
	}
	
	#dimBox,
	#dimBox_1 {
		width: 100%;
		height: 100%;
	}
	
	#dimBox_2 {
		width: 77%;
		height: 75%;
		top: 20%;
		left: 21%;
	}
}