.vr-container { width: 100%; height: 100%; position: relative; }



.line-content-container { position: absolute; bottom: 0; left:0; pointer-events: none; }
.line-content-container img { }

.line-content-container .overEvents-container { pointer-events: auto; position: relative; z-index: 500; }
.line-content-container .overEvents-container:hover {background-position-y: -47px;} 

.line-content-container .animate-line-container { 
	background: #fff; width: 2px; height: 0; margin: auto; position: relative; transition: all 1.6s ease;
 }
.line-content-container .animate-line-container .animate-line-point { 
	background: #fff; width: 8px; height: 8px; margin-left: -3px; position: absolute; bottom: 0; left: 0; border-radius: 5px; 
}




.overEvents-container {
	width: 100%;
	height: 100%;
}
.overEvents-container:hover .overEvents { display: block; }
.overEvents-container .overEvents {
	position: absolute;
	background-color: #fff;	
	border-radius:23.5px;
	width:100%;
	height:100%;
	left:0;
	top:0;
	animation: btnBG 1s infinite;
	display: none;
}
@keyframes btnBG{
  from{}
  to{
	  transform:scale(1.3,1.5);
	  opacity: 0;
	  background-color: #FFF;
  }
}

  
#areaMap { position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 6000; background: #fff; overflow: hidden; }
#areaMap #areaMapConatiner { width: 100%; height: 100%; }



#areaMap .text { 
	color: #fff;
	font-size: 32px; position: absolute; width: 100%; text-align: center;
	padding: 20px 0;
	transition: all 0.8s ease;
	bottom: 0;
	opacity: 0;
	z-index: 10
}
#areaMap .text.loaded { bottom: 50px; opacity: 1; }
#areaMap .text span { display: inline-block; background: #76b0c6; padding: 5px 15px; }

.aftercursor-container { 
	position: absolute; left:0; top:0; width: 100%; height: 100%; background:url(../img/cursor.png) no-repeat 49.8% 25px;  
	pointer-events: none;
	animation: movingCursor 1s 5;
	animation-delay: 1s;
	opacity:0;
	transform: scale(0.8);
}
@keyframes movingCursor{
	0%{
		opacity:0;
	}
	50%{
		opacity: 1;
		transform: scale(1);
	}
	100%{
		opacity: 0;
	}
}

@media (max-width: 560px)
{
	#areaMap .text { 
		font-size: 20px; 
	}
}



#spk { width: 34px; height: 34px; position: absolute; left: 10px; bottom: 10px; z-index: 4002; cursor: pointer; background: #76b0c6;  overflow:hidden; color: #fff; transition: all 0.4s ease; display: none; }
#spk .spk-group { position: absolute; left: 0; top: 0; width: 100%; }
#spk:hover { background-position: 0 -34px; }

#spk i { display: flex; width: 100%; align-items: center; justify-content: center; text-align: center; height: 34px; font-size: 1.4em; }


#spk.muted { background-position: 0 -34px; background: #312f2a; color: #ca2327; }
#spk.muted .spk-group { top: -100%;}

.ch { 

 }

.ch > div { color:#ffffff; display: flex;align-items:center;justify-content:center;height:100%;text-align:center;
	background: rgba(46,33,34,0.6);
	width: 100%;
	height: 100%;
	border-radius: 64px;
	transition: all 0.4s ease;
	border: 3px solid transparent;
	pointer-events: none;
}

.ch > div > div { line-height: 1.4;}

.ch.on > div,
.ch:hover > div { background: rgba(130,30,30, 1);  }