.hs-area {
	position: relative
}

.hs-wrap, .tt-wrap {
	position: absolute;
	display: none
}

.tt-wrap {
	border: 10px solid transparent;
	z-index: 1000
}

.tt-wrap.left {
	top: -2px;
	right: 100%
}

.tt-wrap.right {
	top: -2px;
	left: 100%
}

.tt-wrap.top {
	bottom: 100%;
	left: -2px
}

.tt-wrap.bottom {
	top: 100%;
	left: -2px
}

.sniper-spot {
	background-color: #0090d4;
	width: 18px;
	height: 18px;
	border-radius: 25px;
	z-index: 10;
	opacity: .9;
	border: 2px solid #FFF;
	box-shadow: 0 0 3px #000;
	cursor: pointer
}

.sniper-spot:before, .sniper-spot:after {
}

.sniper-spot:before {
	top: 3px;
	left: 11px;
	width: 2px;
	height: 19px
}

.sniper-spot:after {
	top: 11px;
	left: 3px;
	width: 19px;
	height: 2px
}

.sniper-spot.active:before, .sniper-spot.active:after {
	width: 0;
	height: 0
}

.sniper-spot.active {
	border: 3px solid #F00;
	background-color: transparent;
	opacity: 1;
	box-shadow: 0 0 10px #000
}

.tip-tooltip {
	display: block;
	border-radius: 3px;
	width: 350px;
	height: auto;
	overflow: hidden;
	background-color: #FFF;
	box-shadow: 0 0 10px #666;
	z-index: 999999;
}

.tip-tooltip  h3 {
	font-size: 30px;
	text-transform: uppercase;
	line-height: 0;
	white-space: nowrap;
	padding: 20px 20px 0 20px
}

.tip-tooltip h4 {
	font-size: 16px;
	color: #333;
	line-height: 0;
	font-weight: lighter;
	white-space: nowrap;
	padding: 0 20px 40px 20px
}

/* ภาษาไทย */
.tip-tooltip  img {
	width: 100%;
	height: auto
}

.tip-tooltip:before {
	content: "";
	position: absolute;
	border: 8px solid;
	width: 0;
	height: 0;
	z-index: 999
}

.tip-tooltip.right:before {
	top: 10px;
	right: 100%;
	border-color: transparent #000 transparent transparent
}

.tip-tooltip.left:before {
	top: 10px;
	left: 100%;
	border-color: transparent transparent transparent #FFF
}

.tip-tooltip.top:before {
	top: 100%;
	left: 12px;
	border-color: #FFF transparent transparent
}

.tip-tooltip.bottom:before {
	bottom: 100%;
	left: 12px;
	border-color: transparent transparent #FFF
}

.tip-tooltip.white {
	background-color: #FFF;
	color: #000
}

.tip-tooltip.white.right:before {
	border-color: transparent #fff transparent transparent
}

.tip-tooltip.white.left:before {
	border-color: transparent transparent transparent #fff
}

.tip-tooltip.white.top:before {
	border-color: #fff transparent transparent
}

.tip-tooltip.white.bottom:before {
	border-color: transparent transparent #fff
}

.bubble-tooltip {
	display: block;
	position: relative;
	background-color: #fff;
	color: #000;
	border-radius: 10px;
	box-shadow: 0 0 10px #fff;
	padding: 10px 5px 8px;
	opacity: .8;
	z-index: 999;
	min-height: 20px;
	min-width: 30px
}

.bubble-tooltip:before {
	content: "";
	position: absolute;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 20px;
	bottom: -10px;
	left: 9px;
	height: 16px;
	width: 20px
}

.bubble-tooltip:after {
	content: "";
	position: absolute;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 20px;
	bottom: -17px;
	left: 18px;
	height: 9px;
	width: 11px
}

.aim-tooltip {
	display: none;
	position: absolute;
	background-color: #000;
	color: #fff;
	padding: 6px
}

.aim-tooltip .tt-content {
	display: none
}

.aim-tooltip.top {
	border-radius: 10px 10px 0 0
}

.aim-tooltip.right {
	border-radius: 0 10px 10px 0
}

.aim-tooltip.bottom {
	border-radius: 0 0 10px 10px
}

.aim-tooltip.left {
	border-radius: 10px 0 0 10px
}

.hs-aim-rect, .hs-aim-pillar {
	display: none;
	position: absolute;
	background-color: #000;
	opacity: .75;
	z-index: 1000
}

.hs-aim-pillar {
	opacity: .2;
	z-index: 1001;
	background-color: #fff
}

.hs-flatten {
	border-radius: 0 !important
}