#mapDiv{
    width: 100%;
    height: 100vh;
    background-color: #fff;
}
.map {
  position: relative;  /* 作为子元素的相对定位元素 */
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#labels {
  position: absolute;  /* 把Label定位在容器内 */
  left: 0;             /* 默认定位在左上角 */
  top: 0;
  color: white;
}
#labels>div {
  position: absolute;  /* 让我们的容器决定尺寸 */
  left: 0;             /* 默认定位在左上角 */
  top: 0;
  cursor: pointer;     /* 当悬浮时，变为一个小手 */
  font-size:12px;
  user-select: none;   /* 不允许文字被选中 */
  white-space: nowrap;
  text-shadow:         
    -1px -1px 0 #000,
    0   -1px 0 #000,
    1px -1px 0 #000,
    1px  0   0 #000,
    1px  1px 0 #000,
    0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}
#labels>div:hover {
  color: red;
}
canvas:focus {
  outline:none;
}
canvas { width:100vw; height:calc(100vh - 200rem);z-index: 10; }

#canvas_webgl{
	/* background: url(resources/images/daikanyama.jpg) no-repeat center center; */
	/* background:#6d0909;
	background-size: cover; */
	/* transition: height 1s; */
}
/* 生成截屏的画布对象 */
#canvas {
	width: 100vw;
	z-index: -1;
	position: absolute;
	left:0rem;
}
.area-view{
	position: absolute;
	top:68rem;
	left:30rem;
	width:100%;
	font-size: 32rem;
	font-family: "Verdana";
	font-weight: 400;
}
.tran{
	transition-timing-function: linear;
	transition: height 1s;
}
.voice-mask{
	position: fixed;
	left:0rem;
	top:0rem;
	width: 100vw;
	height:100vh;
	z-index: 11;
	background: rgba(0, 0, 0, 0.5);
}
// .btn{
// 	position:absolute;
// 	width:300rem;
// 	height:132rem;
// 	bottom:60rem;
// 	right:30rem;
// 	border-radius: 10rem;
// 	opacity:1;
// 	z-index:10000;
// 	color:red;
// 	display: flex;
// 	flex-direction:row;
// 	align-items:center;
// 	justify-content:center;
// 	background-color: rgba(155, 155, 155, 0.6);
// }

// .changeSizebtn {
// 	position:absolute;
// 	width:300rem;
// 	height:132rem;
// 	bottom:60rem;
// 	left:30rem;
// 	border-radius: 10rem;
// 	opacity:1;
// 	z-index:10000;
// 	color:red;
// 	display: flex;
// 	flex-direction:row;
// 	align-items:center;
// 	justify-content:center;
// 	background-color: rgba(155, 155, 155, 0.6);
// }
.canvas-view{
	position:relative;
}
.lable-view{
	position:absolute;
	width:100vw;
}
.word-view{
	position: absolute; 
	left: 0;            
	top: 0;
	user-select: none;  
	z-index: 12;
	text-align: center;
	border-radius: 5rem;
}
.word{
	font-family: "Verdana";
	font-weight: 400;
	height: 40rem;
	line-height: 40rem;
	padding:0rem 10rem;
	border-radius: 20rem;
	background: #fff;
	font-size:26rem;
	color: #1d1d1d;
}
.number-view{
	width: 30rem;
	height: 30rem;
	line-height: 30rem;
	background: #fff;
	color: #121212;
	font-weight: 700;
	font-size: 28rem;
	font-family: "DIN Alternate Bold";
	border-radius: 30rem;
}
.number-more{
	width: 40rem;
	height: 40rem;
	line-height: 40rem;
	border-radius: 30rem;
}
.active{
	background: #faad5c;
	color: #fff;
}
.submit-btn{
	position: absolute;
	top:120rem;
	right:20rem;
	width: 140rem;
	height: 64rem;
	border-radius: 32rem;
	backdrop-filter: blur(40rem);
	background-color: rgba(255, 156, 56, 1);
	font-family: "Verdana Bold";
	font-weight: 700;
	font-size: 28rem;
	color: #fff;
	text-align:center;
	line-height:64rem;
	z-index: 11;
}
.submit-btn1{
	left:20rem;
}
.voice-view{
	width: 614rem;
	height: 312rem;
	border-radius: 40rem;
	background: #fff;
	box-shadow: 0 -6rem 12rem #0000001f;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	text-align:center;
}
.voice-tips{
	font-size: 28rem;
	color: rgba(36, 36, 36, 0.51);
	margin-top:12rem;
}
.voice-gif{
	width: 100%;
	margin-top:56rem;
}