body{

	border: 0px;
	overflow: hidden;
}
#title_div
{
	position: absolute;
	left:0px;
	top:0px;
	width: 980px;
	height: 645px;
	z-index:10;
	
}

#center_box{
	background-repeat:no-repeat;
	width: 980px;
	height: 645px;
	margin-left:auto;
	margin-right:auto;
	position: relative;
}

#des_container {
}

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

#box_img {
	opacity: 0;
}

#word{
	position:absolute;
	text-align:left;
	top:80px;
	left:23px;
	font-size:23px;
	font-family:Arial, Helvetica, sans-serif;
	width:235px;
	height:60px;
}
#title_vo
{
	position: absolute;
	
	margin-left: auto;
	margin-right: auto;
	left:283px;
	top: 30px;
}
#hint_sen{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 18%;
	top: 105px;
	
}
#text0{
	position:absolute;
	top:10px;
	left:10px;
	width:80px;height:20px;
	z-index:2;
}
#d0s{
	position: absolute;
	top: 155px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s0{
	position: absolute;
	top: 155px;
	left: 80px;
	width: 170px;
	height: 35px;
	z-index: 1;
}
#s1{
	position: absolute;
	top: 195px;
	left: 80px;
	width: 170px;
	height: 35px;
	
}
#d1s{
	position: absolute;
	top: 195px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s2{
	position: absolute;
	top: 235px;
	left: 80px;
	width: 170px;
	height: 35px;
}
#d2s{
	position: absolute;
	top: 235px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s3{
	position: absolute;
	top: 275px;
	left: 80px;
	width: 170px;
	height: 35px;
}
#d3s{
	position: absolute;
	top: 275px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s4{
	position: absolute;
	top: 315px;
	left: 80px;
	width: 170px;
	height: 35px;
}
#d4s{
	position: absolute;
	top: 315px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s5{
	position: absolute;
	top: 355px;
	left: 80px;
	width: 170px;
	height: 35px;
}
#d5s{
	position: absolute;
	top: 355px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s6{
	position: absolute;
	top: 395px;
	left: 80px;
	width: 170px;
	height: 35px;
}
#d6s{
	position: absolute;
	top: 395px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s7{
	position: absolute;
	top: 435px;
	left: 80px;
	width: 170px;
	height: 35px;
}
#d7s{
	position: absolute;
	top: 435px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#s8{
	position: absolute;
	top: 475px;
	left: 80px;
	width: 170px;
	height: 35px;
}
#d8s{
	position: absolute;
	top: 475px;
	left: 40px;
	width: 35px;
	height: 35px;
	z-index: 1;
}
#check_ans img{
	position:absolute;
	top:569px;
	left:30px;
}
#d0{
	position:absolute;
	top:129px;
	left:334px;
	width:110px;height:50px;
	z-index:3;
	
}
#d1{
	position:absolute;
	top:149px;
	left:726px;
	width:110px;height:50px;
	z-index:3;
	
}
#d2{
	position:absolute;
	top:246px;
	left:322px;
	z-index:3;
	width:110px;height:50px;
	
}
#d3{
	position:absolute;
	top:416px;
	left:376px;
	width:110px;height:50px;
	z-index:3;
}
#d4{
	position:absolute;
	top:331px;
	left:797px;
	width:110px;height:50px;
	z-index:3;
	
}
#d5{
	position:absolute;
	top:502px;
	left:375px;
	width:110px;height:50px;
	z-index:3;
}
#d6{
	position:absolute;
	top:544px;
	left:723px;
	width:110px;height:50px;
	z-index:3;
}
#d7{
	position:absolute;
	top:409px;
	left:797px;
	width:110px;height:50px;
	z-index:3;
}
#d8{
	position:absolute;
	top:230px;
	left:797px;
	z-index:3;
	width:110px;height:50px;
	
}
/*-----------遮罩层-----------------*/
#test0{
	position:absolute;
	top: 242px;
	left: 270px;
	z-index:3;
}
#test1{
	position:absolute;
	top: 511px;
	left: 501px;
	z-index:3;
}
#test2{
	position:absolute;
	top: 200px;
	left: 483px;
	z-index:3;
}
#test3{
	position:absolute;
	top: 115px;
	left: 624px;
	z-index:3;
}
#test4{
	position:absolute;
	top: 107px;
	left: 768px;
	z-index:3;
	
}
#test5{
	position:absolute;
	top: 163px;
	left: 828px;
	z-index:3;
}
#test6{
	position:absolute;
	top: 334px;
	left: 790px;
	z-index:3;
}
#test7{
	position:absolute;
	top: 454px;
	left: 750px;
	z-index:3;
}
#test8{
	position:absolute;
	top: 224px;
	left: 791px;
	z-index:3;	
}

.src_cell
{
	float:left;
	height: 50px;
	width: 170px;
	padding:2px;
	
}
#reset_div{
	position:absolute;
	left:170px;
	top:567px;
}
#testall
{
	position: absolute;
	z-index: 101;
	left: 0px;
	top: 0px;
	background-color: #000;
	opacity: 0;
}
.item img{cursor:pointer;}
#cor_sound,#wro_sound{
	display:none;
}

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

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

img {
	border: 0;
}

.canvasHolder {
	width:980px;
	height:645px;
	position:relative;
	overflow: hidden;
}

/* debug */

#title_div,
#startBtn {
	display: ;
}

/* end debug */

#d0 {
	top: 37.6%;
	left: 28.1%;
	width: 12%;
	height: 7%;
}

#d1 {

	top: 79.3%;
	left: 51.8%;
	width: 12%;
	height: 7%;
}

#d2 {
	top: 31.1%;
	left: 49.5%;
	width: 12%;
	height: 7%;
}

#d3 {

	top: 18%;
	left: 64.1%;
	width: 12%;
	height: 7 % ;
}

#d4 {

	top: 17.3%;
	left: 78.6%;
	width: 12%;
	height: 7 % ;
}

#d5 {
	top: 26%;
	left:84.8%;
	width: 12%;
	height: 7 % ;
}

#d6 {
	top: 52%;
	left: 81%;
	width: 12%;
	height: 7 % ;
}

#d7 {
	top: 71%;
	left: 76.7%;
	width: 12%;
	height: 7.2%;
}

#d8 {
	top: 35.9%;
	left: 81.6%;
	width: 12%;
	height: 7%;
}

#d0 img,
#d1 img,
#d2 img,
#d3 img,
#d4 img,
#d5 img,
#d6 img,
#d7 img,
#d8 img {
	width: 100%;
}

#testCanvas {
	
}

@media screen and (max-width: 980px) {
	#startBtn {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	
	.canvasHolder {
		width:100%;
		height:100%;
	}

	
	#startBtn_img {
		width: 21%;
		position: absolute;
		top: 40%;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	
	#center_box {
		left: 0;
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	#box_wrap {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#title_div {
		width: 100%;
		height: 100%;
	}
	
	#title_div img {
		width: 100%;
	}
	
	#box_img {
		width: 100%;
	}
	
	#title_vo {
		margin: 0;
		top: 4%;
		left: 32%;
		width: 4%;
	}
	
	#title_vo img,
	#hint_sen img,
	#d0s img,
	#d1s img,
	#d2s img,
	#d3s img,
	#d4s img,
	#d5s img,
	#d6s img,
	#d7s img,
	#d8s img {
		width: 100%;
	}
	
	#word {
		width: 21%;
		font-size: 18px;
		top: 11%;
		left: 2%;
	}
	
	#hint_sen {
		margin: 0;
		top: 14%;
		left: 21%;
		width: 4%;
	}
	
	#des_container {
	}
	
	#d0s,
	#d1s,
	#d2s,
	#d3s,
	#d4s,
	#d5s,
	#d6s,
	#d7s,
	#d8s {
		width: 4%;
		left: 1%;
	}
	
	
	#check_ans {
		position: absolute;
		top: 87%;
		width: 17%;
	}
	
	#check_ans img {
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
	}
	
	#reset_div {
		position: absolute;
		top: 87%;
		left: 20%;
		width: 5%;
	}
	
	#reset_div img {
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
	}
	
	#s0,
	#s1,
	#s2,
	#s3,
	#s4,
	#s5,
	#s6,
	#s7,
	#s8 {
		left: 5%;
		width: 19%;
		height:1%;
		background: rgb(253, 248, 182);
	}
	
	#s0 img,
	#s1 img,
	#s2 img,
	#s3 img,
	#s4 img,
	#s5 img,
	#s6 img,
	#s7 img,
	#s8 img {
		width: 100%;
	}
	
	#src_container {
		width: 100%;
	}
	
	#d6 {
		top: 83%;
	}
}



/* end new */