@import url('content-layer.css');

.caption-hotspot-parent {  }

.caption-text-hotspot { 
	width: 320px; background: rgba(0,0,0,0.7); color: #ccc; position: absolute; padding: 5px;  pointer-events: none; opacity: 0;
	transition: all 0.4s ease;
	font-size: 1em;
	cursor: default;
 }

.caption-text-hotspot-container {   }
.caption-text-hotspot-container .caption-text-hotspot-title { color: #fff; font-size: 1em; }
.caption-text-hotspot-container .caption-text-hotspot-title div:nth-child(1) { color: #fff; text-decoration: underline; font-weight: bold; font-size: 1.2em; }
.caption-text-hotspot-container .caption-text-hotspot-option {  font-size: .8em; }
.caption-text-hotspot-container .caption-text-hotspot-desc { font-size: 0.8em; max-height: 140px; overflow: hidden; overflow-y: auto;}

.caption-text-hotspot-container .caption-text-hotspot-title,
.caption-text-hotspot-container .caption-text-hotspot-option,
.caption-text-hotspot-container .caption-text-hotspot-desc { padding: 0 10px; }


/*
.caption-hotspot-parent:hover .caption-text-hotspot { opacity: 1; pointer-events: auto; }*/

.caption-hotspot-parent.on .caption-text-hotspot { opacity: 1; pointer-events: auto; }


.caption-text-hotspot-arrow { 
	position: absolute; 
	width: 0; 
	height: 0;  }
.caption-text-hotspot-arrow.top {
	left: 50%;
	margin-left: -12px;
	top: -15px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	
	border-bottom: 15px solid rgba(0,0,0,0.7);
  }
  
.caption-text-hotspot-arrow.bottom {
	left: 50%;
	margin-left: -12px;
	bottom: -15px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	
	border-top: 15px solid rgba(0,0,0,0.7);
}


.caption-text-hotspot-arrow.lefttop {
	left: 0;
	margin-left: 0;
	top: -15px;
	border-left: 0px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.righttop {
	right: 0;
	margin-left: 0;
	top: -15px;
	border-left: 12px solid transparent;
	border-right: 0 solid transparent;
	border-bottom: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.right {
top:50%;
right:0;
margin-top: -12px;
margin-right: -15px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;

border-left: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.left {
left:0;
top:50%;
margin-left: -15px;
margin-top: -12px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent; 

border-right:15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.rightbottom {
	right: 0;
	margin-left: -12px;
	bottom: -15px;
	border-left: 12px solid transparent;
	border-right: 0 solid transparent;
	
	border-top: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.leftbottom {
	left: 0;
	margin-left: 0;
	bottom: -15px;
	border-left: 0 solid transparent;
	border-right: 12px solid transparent;
	
	border-top: 15px solid rgba(0,0,0,0.7);
}


.mobile-ver .caption-text-hotspot  { width: 240px; font-size: 0.7em; }



.hotspot-item-container { overflow: hidden; }
.hotspot-item-thumbnail { width: 100%; height: 100%; background: no-repeat 50%; background-size: cover; transition: all 0.4s ease;}
.hotspot-item-text { 
	color: #fff; 
	font-size: 1.6em;
	background: rgba(0,0,0,0.7); text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; opacity: 0; transition: all 0.4s ease; }

.hotspot-item-hover:hover .hotspot-item-thumbnail { background-size: auto 120%; }
.hotspot-item-hover:hover .hotspot-item-text { opacity: 1;  }


.test-content-container { 
	position: absolute; left: 0;top:0; background: rgba(0,0,0,0.7); width: 100%; height: 100%; z-index: 5999; 
	display: flex; align-items: center; justify-content: center; text-align: center;
	transition: all 0.4s ease;
	opacity: 0;
 }
.test-content-cont { position: relative; padding: 0; }
.test-content-img { border-radius: 10px; }
.test-content-close { 
	cursor: pointer; position: absolute; top: -100px; font-size: 48px; color: #fff; 
	left: 50%; margin-left: -32px; width: 64px;
}

.test-content-link { 
	width: 140px; height: 140px; left: 759px; top: 363px; background: rgba(0,0,0,0.1); cursor: pointer; display: block;
	position: absolute;
  }

.content-hs-parent { 
	max-width:1280px;
	max-height:680px;
	width:90%;
	height:90%;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%); }