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

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	width: 100%;
	height:	100%;
	overflow:hidden;
}

#box{
	width:980px;
	height:645px;
	margin:auto;
	position: relative;
}

#big_box{
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}

.des_cell{
	width: 211px;
	height: 161px;
}
#questionBox{
	width:602px;
	height:478px;
	position:absolute;
	top:112px;
	left:17px;
	z-index:0;
}

#dimBox{
	width:980px;
	height:645px;
	position:absolute;
	z-index:11;
}
#dimBox_1{
	width: 355px;
	height: 240px;
	position: absolute;
	z-index: 99;
	top: 100px;
	left: 620px;
}

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

#zhishiju {
	width: 920px;
	position: absolute;
	top: 78px;
	left: 25px;
	z-index: 10;
}

.des_cell_a{
}
.des_cell_b{
}
.des_cell_c{
	
}
.des_cell_d{
}
.des_cell_test{
}

.pic_cell{
	width:50px;
	height:50px;
}

#box #pic_container #p0{
	position:absolute;
	left: 363px;
	top: 231px;
	
}
#box #pic_container #p1{
	position:absolute;
	left: 715px;
	top: 238px;
	
}
#box #pic_container #p2{
	position:absolute;
	left: 363px;
	top: 522px;
	
}
#box #pic_container #p3{
	position:absolute;
	left: 715px;
	top: 513px;
	
}
#box #pic_container #p4{
	position:absolute;
	left: 543px;
	top: 360px;
	
}
#box #pic_container #p5{
	position:absolute;
	left: 698px;
	top: 357px;
	
}
#box #pic_container #p6{
	position:absolute;
	left: 332px;
	top: 540px;
	
}
#box #pic_container #p7{
	position:absolute;
	left: 190px;
	top: 647px;
	
}
#box #pic_container #p8{
	position:absolute;
	left: 335px;
	top: 649px;
	
}
#box #pic_container #p9{
	position:absolute;
	left: 558px;
	top: 651px;
	
}
#box #pic_container #p10{
	position:absolute;
	left: 708px;
	top: 546px;
	
}
#box #pic_container #p11{
	position:absolute;
	left: 707px;
	top: 657px;
	
}


#s0{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:10;
}
#s1{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}
#s2{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}
#s3{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}
#s4{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}
#s5{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}
#s6{
	position:absolute;
	top: 119px;;
	left: 645px;
	z-index:4;
}
#s7{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}
#s8{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}
#s9{
	position:absolute;
	top: 119px;
	left: 645px;
	z-index:4;
}


#des_container #d0{
	position: absolute;
	/*left: 121px;*/
	left: 211px;
	top: 168px;
	z-index: 1;
}
#des_container #d1{
	position: absolute;
	left: 211px;
	top: 168px;
	z-index: 1;
}
#des_container #d2{
	position:absolute;
	left: 211px;
	top: 168px;
	z-index:1;
}
#des_container #d3{
	position:absolute;
	left: 211px;
	top: 168px;
	z-index:1;
}
#des_container #d4{
	position:absolute;
	left: 107px;
	top: 377px;
	z-index:1;
}
#des_container #d5{
	position:absolute;
	left: 195px;
	top: 377px;
	z-index:1;
}
#des_container #d6{
	position:absolute;
	left: 107px;
	top: 377px;
	z-index:1;
}
#des_container #d7{
	position:absolute;
	left: 195px;
	top: 377px;
	z-index:1;
}
#des_container #d8{
	position:absolute;
	left: 107px;
	top: 377px;
	z-index:1;
}
#des_container #d9{
	position:absolute;
	left: 195px;
	top: 377px;
	z-index:1;
}
#des_container #d10{
	position:absolute;
	left: 164px;
	top: 440px;
}

#speechBox{
	position:absolute;
	/*top: 390px;
	left: 27px;*/
	top: 418px;
	left: 163px;
	z-index: 1;
	padding-left: 0;
	width: 60px;
	padding: 0;
	height: 89px;
	display: table;
	
	background-repeat: no-repeat;
	background-size: 100%;
}

#speech_wr {
	overflow: hidden;
	width: 97%;
	
	
	position: relative;
	left: 2%;
}

.sb_0{
	padding:15px 0 0 48px;
	width:360px;
	height:78px;
}
.sb_1{
	padding:15px 0 0 47px;
	width:378px;
	height:78px;
	
}
.sb_2{
	padding:15px 0 0 47px;
	width:388px;
	height:78px;
}
.sb_3{
	padding:15px 0 0 47px;
	width:367px;
	height:77px;
}
.sb_4{
	padding:15px 0 0 20px;
	width:428px;
	height:78px;
}

.left_btn{
	width:66px;
	height:75px;
	position:absolute;
	left:625px;
	top:339px;
	cursor:pointer;
}
.left_btn_dim{
	width:66px;
	height:75px;
	position:absolute;
	left:625px;
	top:339px;
}

#xianshi_wenzi{
	width: 235px;
	height: 43px;
	text-align: center;
	position: absolute;
	left: 681px;
	top: 355px;
	line-height: 43px;
}

.right_btn{
	width:66px;
	height:75px;
	position:absolute;
	left:905px;
	top:339px;
	cursor:pointer;
}
.right_btn_dim{
	width:66px;
	height:75px;
	position:absolute;
	left:905px;
	top:339px;
}


.left_btn_q{
	width:104px;
	height:50px;
	position:absolute;
	left:650px;
	top:450px;
	cursor:pointer;
}
.left_btn_q_dim{
	width:104px;
	height:50px;
	position:absolute;
	left:650px;
	top:450px;
}

.right_btn_q{
	width:104px;
	height:50px;
	position:absolute;
	left:770px;
	top:450px;
	cursor:pointer;
}
.right_btn_q_dim{
	width:104px;
	height:50px;
	position:absolute;
	left:770px;
	top:450px;
}


.btn_1{
	width:51px;
	height:51px;
	position:absolute;
	left:890px;
	top:450px;
	cursor:pointer;
}
.btn_1_dim{
	width:51px;
	height:51px;
	position:absolute;
	left:890px;
	top:450px;
}

.play_btn{
	width:34px;
	height:34px;
}

#play_biaoti{
	width:34px;
	height:34px;
	position:absolute;
	top:28px;
	left:208px;
	cursor:pointer;
}

#play_question{
	margin-top:-3px;
	float: left;
	cursor:pointer;
}

#play_tishi{
	float: left;
	cursor: pointer;
}

#speechBox_text {
	float: left;
	width: 72%;
	margin-left: 1%;
}

#speechBox span {
	position: absolute;
	top: 28px;
	left: 53px;
	width: 74%;
}

#test{
	width:1px;
	height:1px;
	position:absolute;
	left:38px;
	top:88px;
}
#cle{
	position:absolute;
	left:210px;
	top:660px;
}

#wenzi_container div{
	width:200px;
	height:40px;/*height:35px;*/
	margin-top:5px;
	z-index:1;
	font-size: 20px;
}
.need_wenzi_0{
	position:absolute;
	/*top:234px;
	left:46px;*/
	top:421px;
	left:230px;
}
.need_wenzi_1{
	position:absolute;
	top:421px;
	left:230px;
}
.need_wenzi_2{
	position:absolute;
	top:421px;
	left:230px;
}
.need_wenzi_3{
	position:absolute;
	top:421px;
	left:230px;
}
.need_wenzi_4{
	position:absolute;
	top:426px;
	left:409px;
}

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

/* debug */

#title_div,
#startBtn,
#dimBox,
#dimBox_1 {
	display: ;
}

/* end debug*/

img {
	border: 0;
}

#zhishiju span {
	float: left;		
}

#zhishiju {
	
}

#play_two{
	position:absolute;
	left: 33.7%;
	top: 61%;
	cursor:pointer;
}

#show_name_0{
	width: 130px;
	height: 40px;
	position: absolute;
	/*top: 359px;
	left: 148px;*/
	top: 387px;
	left: 295px;
	font-size:22px;
}

#show_name_1{
	width: 130px;
	height: 40px;
	position: absolute;
	top: 387px;
	left: 295px;
	font-size:22px;
}

#show_name_2{
	width: 130px;
	height: 40px;
	position: absolute;
	top: 387px;
	left: 295px;
	font-size:22px;
}

#show_name_3{
	width: 130px;
	height: 40px;
	position: absolute;
	top: 387px;
	left: 295px;
	font-size:22px;
}

.src_cell{
	cursor: pointer;
}

@media screen and (max-width: 980px){
	#box {
		width: 100%;
		height: 100%;
	}
	
	#box-img {
		width: 100%;
	}
	
	#title_div {
		width: 100%;
		height: 100%;
	}
	
	#title_div_img {
		width: 100%;
	}
	
	#startBtn {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	
	#startBtn_img {
		width: 21%;
		position: absolute;
		top: 28%;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	
	#questionBox {
		width: 62%;
		top: 17%;
		left: 2%;
		height: auto;
	}
	
	
	#questionBox_img {
		width: 100%;
	}
	
	#zhishiju {
		width: 97%;
		top: 11%;
		left: 3%;
		overflow: hidden;
		height: 34px
	}
	
	#zhishiju span {
		float: left;
		font-size:19px;		
	}
	
	#play_question {
		position: relative;
		float: left;
	}
	
	#play_biaoti {
		top: 4%;
		left: 23%;
		width: 3.5%;
	}
	
	#play_biaoti_img {
		width: 100%;
	}
	
	#play_question {
		top: 1%;
		left: 1%;
		z-index: 12;
		margin: 0;
	}
	
	#play_question_img {
		width: 82%;
	}
	
	#play_tishi_img {
		width: 82%;
	}
	
	#src_container {
		width: 100%;
		height: 100%;
	}
	
	#src_container .src_cell {
		width: 31.8%;
		height: 32%;
		top: 18.1%;
		left: 65.8%;
	}
	
	.item img {
		width: 100%;
		cursor:pointer;
	}
	
	#xianshi_wenzi {
		width: 23.9796%;
		height: 6.6667%;
		top: 53.5888%;
		left: 69.4898%;
		font-size: 18px;
	}
	
	#dimBox {
		width: 100%;
		height:	100%;
	}
	
	#left_btn {
		top: 52%;
		left: 64%;
		width: 7%;
		height: auto;
	}
	
	#left_btn_img {
		width: 100%;
	}
	
	#right_btn {
		top: 52%;
		left: 92%;
		width: 7%;
		height: auto;
	}
	
	#right_btn_img {
		width: 100%;
	}
	
	#left_btn_q {
		top: 66%;
		left: 66%;
		height: auto;
		width: 10%;
	}
	
	#left_btn_q_img {
		width: 100%;
	}
	
	#right_btn_q {
		top: 66%;
		left: 78%;
		height: auto;
		width: 10%;
	}
	
	#right_btn_q_img {
		width: 100%;
	}
	
	#btn_1 {
		top: 66%;
		left: 91%;
		width: 5%;
	}
	
	#btn_1 img {
		width: 100%;
	}
	
	.need_wenzi_3 {
		margin: 0;
		top: 36%;
		left: 5%;
	}
	
	.need_wenzi_2 {
		margin: 0;
		top: 66%;
		left: 5%;
	}
	
	.need_wenzi_1 {
		margin: 0;
		left: 43%;
		top: 34%;
	}
	
	.need_wenzi_0 {
		margin: 0;
		top: 36%;
		left: 5%;
	}
	
	.need_wenzi_4 {
		margin: 0;
		left: 42%;
		top: 66%;
		font-size: 18px;
	}
	
	#speechBox {
		top: 60%;
		left: 2.6%;
		position: absolute;
		padding: 0;
		width: 7%;
		height: 8%;
	}
	
	#speechBox-img {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#speechBox span {
		position: absolute;
		top: 14%;
		left: 14%;
		font-size: 18px;
	}
	
	#des_container #d4 {
		width: 9%;
		height: 13%;
		top: 58%;
		left: 11%;
	}
	
	#des_container #d5 {
		width: 9.2%;
		height: 13%;
		top: 58%;
		left: 20.3%;
	}
	
	#des_container #d6 {
		width: 9%;
		height: 13%;
		top: 58%;
		left: 11%;
	}
	
	#des_container #d7 {
		width: 9.2%;
		height: 13%;
		top: 58%;
		left: 20.3%;
	}
	
	#des_container #d0 {
		width: 13.3%;
		height: 17%;
		top: 25.5%;
		left: 12.4%;
	}
	
	#des_container #d1 {
		width: 13.3%;
		height: 17%;
		top: 25.5%;
		left: 42%;
	}
	
	#des_container #d2 {
		width: 9%;
		height: 13%;
		top: 58%;
		left: 11%;
	}
	
	#des_container #d3 {
		width: 9.2%;
		height: 13%;
		top: 58%;
		left: 20.3%;
	}
	
	#des_container #d8 {
		width: 9%;
		height: 13%;
		top: 58%;
		left: 11%;
	}
	
	#des_container #d9 {
		width: 9.2%;
		height: 13%;
		top: 58%;
		left: 20.3%;
	}
	
	#play_tishi {
		top: 8%;
		left: 2%;
		width: 65%;
	}
	
	#speechBox_text {
		font-size: 18px;
	}
	.des_cell{
		width:10%;
		
	}
	
	#play_two{
		left: 33.9%;
		top: 60%;
		width: 3.5%;
	}
	
	#show_name_0{
		width: 12%;
		height: 6%;
		top: 55%;
		left: 15%;
		font-size:24px;
	}
	
	#show_name_1{
		width: 12%;
		height: 6%;
		top: 55%;
		left: 45%;
		font-size:24px;
	}
}

/*@media screen and (min-width: 900px) and (max-width: 980px){
	#xianshi_wenzi {
		font-size:25px;
	}
}
@media screen and (max-width: 790px){
	#xianshi_wenzi {
		font-size:24px;
	}
}*/