/* @group Hotspot */
#main{ float:right;}
.hotspot {
	position: absolute;
	top:0px;
	left:0px;
	z-index:800;
}

.hotspot2 {
	position: absolute;
	top:0px;
	left:248px;
	z-index:10;
}
.hotspot3 {
	position: absolute;
	top:0px;
	left:500px;
	z-index:20;
}
.hotspot4 {
	position: absolute;
	top:0px;
	left:750px;
	z-index:30;
}
.hotspot5 {
	position: absolute;
	top:0px;
	left:992px;
	z-index:40;
}
.hotspot .ico_head { color: #fff; display: block !important; font-size: 18px; left: 17%; position: absolute; text-align: center; text-transform: uppercase; top: 183px; z-index: -1; }
.hotspot2 .ico_head { color: #fff; display: block !important; font-size: 18px; left: 27%; position: absolute; text-align: center; text-transform: uppercase; top: 183px; z-index: -1; }
.hotspot3 .ico_head { color: #fff; display: block !important; font-size: 18px; left: 9%; position: absolute; text-align: center; text-transform: uppercase; top: 183px; z-index: -1; }
.hotspot4 .ico_head { color: #fff; display: block !important; font-size: 18px; left: 26%; position: absolute; text-align: center; text-transform: uppercase; top: 183px; z-index: -1; }
.hotspot5 .ico_head { color: #fff; display: block !important; font-size: 18px; left: 27%; position: absolute; text-align: center; text-transform: uppercase; top: 183px; z-index: -1; }
.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content {
  position: relative;
  overflow: hidden;
  width: 154px;
  height: 154px;
  text-align: center;
  padding:15px 0 0 0px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
  /* The hotspot point */

}
.hotspot .content .bubble-bg, .hotspot2 .content .bubble-bg, .hotspot3 .content .bubble-bg, .hotspot4 .content .bubble-bg, .hotspot5 .content .bubble-bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.hotspot .content h2, .hotspot2 .content h2, .hotspot3 .content h2, .hotspot4 .content h2, .hotspot5 .content h2 {
  font-size: 26px;
  padding-top:0px;
  text-transform: uppercase;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}
.content h2 img{ margin:37px 0 14px;}
.links {
  padding-left: 25px;
  padding-right: 25px;
  padding-top:12px;
  margin-left: auto;
  margin-right: auto;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  filter: alpha(opacity = 0);
  *display: none;
  -webkit-transform: translate(0px, 50px);
  -moz-transform: translate(0px, 50px);
  -ms-transform: translate(0px, 50px);
  transform: translate(0px, 50px);
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
  color:#fff;
  line-height:20px;
  font-size:13px;
}

.hotspot:hover .content, .hotspot.active .content, .hotspot2:hover .content, .hotspot2.active .content, .hotspot3:hover .content, .hotspot3.active .content, .hotspot4:hover .content, .hotspot4.active .content, .hotspot5:hover .content, .hotspot5.active .content {
  width: 290px;
  height: 282px;
  padding:8px 0 0 0;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
  margin:-50px 0 0px -60px;
}
.hotspot:hover .content .description,
.hotspot.active .content .description,
.hotspot:hover .content .links,
.hotspot.active .content .links

.hotspot2:hover .content .description,
.hotspot2.active .content .description,
.hotspot2:hover .content .links,
.hotspot2.active .content .links

.hotspot3:hover .content .description,
.hotspot3.active .content .description,
.hotspot3:hover .content .links,
.hotspot3.active .content .links

.hotspot4:hover .content .description,
.hotspot4.active .content .description,
.hotspot4:hover .content .links,
.hotspot4.active .content .links

.hotspot5:hover .content .description,
.hotspot5.active .content .description,
.hotspot5:hover .content .links,
.hotspot5.active .content .links
{
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  filter: alpha(opacity = 100);
  *display: block;
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  padding-top:27px;
  font-size:14px !important;
}
@media (min-width:320px) and (max-width:400px){
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.black_sec{ min-height:1700px;}
	.line{ display:none}
}
@media (min-width:320px) and (max-width:340px){
	.hotspot { left:4pc; position: absolute; top:0px;}
	.hotspot2 { left:4pc; position: absolute; top: 260px;}
	.hotspot3 { left:4pc; position: absolute; top: 520px;}
	.hotspot4 { left:4pc; position: absolute; top: 780px;}
	.hotspot5 { left:4pc; position: absolute; top: 1040px;}
}
@media (min-width:341px) and (max-width:360px){
	.hotspot { left:5pc; position: absolute; top:0px;}
	.hotspot2 { left:5pc; position: absolute; top: 260px;}
	.hotspot3 { left:5pc; position: absolute; top: 520px;}
	.hotspot4 { left:5pc; position: absolute; top: 780px;}
	.hotspot5 { left:5pc; position: absolute; top: 1040px;}
}
@media (min-width:361px) and (max-width:400px){
	.hotspot { left:6pc; position: absolute; top:0px;}
	.hotspot2 { left:6pc; position: absolute; top: 260px;}
	.hotspot3 { left:6pc; position: absolute; top: 520px;}
	.hotspot4 { left:6pc; position: absolute; top: 780px;}
	.hotspot5 { left:6pc; position: absolute; top: 1040px;}
}
@media (min-width:401px) and (max-width:440px){
	.hotspot { left:6.8pc; position: absolute; top:0px;}
	.hotspot2 { left:6.8pc; position: absolute; top: 260px;}
	.hotspot3 { left:6.8pc; position: absolute; top: 520px;}
	.hotspot4 { left:6.8pc; position: absolute; top: 780px;}
	.hotspot5 { left:6.8pc; position: absolute; top: 1040px;}
}
@media (min-width:441px) and (max-width:470px){
	.hotspot { left:8pc; position: absolute; top:0px;}
	.hotspot2 { left:8pc; position: absolute; top: 260px;}
	.hotspot3 { left:8pc; position: absolute; top: 520px;}
	.hotspot4 { left:8pc; position: absolute; top: 780px;}
	.hotspot5 { left:8pc; position: absolute; top: 1040px;}
}
@media (min-width:471px) and (max-width:500px){
	.hotspot { left:9pc; position: absolute; top:0px;}
	.hotspot2 { left:9pc; position: absolute; top: 260px;}
	.hotspot3 { left:9pc; position: absolute; top: 520px;}
	.hotspot4 { left:9pc; position: absolute; top: 780px;}
	.hotspot5 { left:9pc; position: absolute; top: 1040px;}
}
@media (min-width:401px) and (max-width:500px){
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }	
	.black_sec{ min-height:1620px;}
	.line{ display:none}
}
@media (min-width:501px) and (max-width:550px){
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:10pc; position: absolute; top:0px;}
	.hotspot2 { left:10pc; position: absolute; top: 260px;}
	.hotspot3 { left:10pc; position: absolute; top: 520px;}
	.hotspot4 { left:10pc; position: absolute; top: 780px;}
	.hotspot5 { left:10pc; position: absolute; top: 1040px;}
	.black_sec{ min-height:1600px;}
	.line{ display:none}
}
@media (min-width:551px) and (max-width:600px){
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:12pc; position: absolute; top:0px;}
	.hotspot2 { left:12pc; position: absolute; top: 260px;}
	.hotspot3 { left:12pc; position: absolute; top: 520px;}
	.hotspot4 { left:12pc; position: absolute; top: 780px;}
	.hotspot5 { left:12pc; position: absolute; top: 1040px;}
	.black_sec{ min-height:1600px;}
	.line{ display:none}
}

@media (min-width:601px) and (max-width:700px){
	.proc_ico { float: left; margin-top:90px; position: relative; z-index: 0; margin-left: 70px; }
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:0px; position: absolute; top:0px;}
	.hotspot2 { left:260px; position:absolute; top:0px;}
	.hotspot3 { left:0px; position:absolute; top:260px;}
	.hotspot4 { left:260px; position:absolute; top:260px;}
	.hotspot5 { left:0; position:absolute; top:540px;}
	.black_sec{ min-height:1120px;}
	.line{ display:none}
}
@media (min-width:701px) and (max-width:767px){
	.proc_ico { float: left; margin-top: 72px; position: relative; z-index: 0; margin-left: 70px; }
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:0px; position: absolute; top:0px;}
	.hotspot2 { left:260px; position:absolute; top:0px;}
	.hotspot3 { left:0px; position:absolute; top:260px;}
	.hotspot4 { left:260px; position:absolute; top:260px;}
	.hotspot5 { left:0; position:absolute; top:540px;}
	.black_sec{ min-height:1120px;}
	.line{ display:none;}
}
@media (min-width:768px) and (max-width:800px){
	.proc_ico { float: left; margin-top: 72px; position: relative; z-index: 0; margin-left: 70px; }
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:-8px; position: absolute; top:0px;}
	.hotspot2 { left:227px; position:absolute; top:0px;}
	.hotspot3 { left:460px; position:absolute; top:0px;}
	.hotspot4 { left:0px; position:absolute; top:260px;}
	.hotspot5 { left:260px; position:absolute; top:260px;}
	.black_sec{ min-height:810px;}
	.line{ display:none;}
}
@media (min-width:801px) and (max-width:900px){
	.proc_ico { float: left; margin-top: 72px; position: relative; z-index: 0; margin-left: 70px; }
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:-8px; position: absolute; top:0px;}
	.hotspot2 { left:227px; position:absolute; top:0px;}
	.hotspot3 { left:460px; position:absolute; top:0px;}
	.hotspot4 { left:0px; position:absolute; top:260px;}
	.hotspot5 { left:260px; position:absolute; top:260px;}
	.black_sec{ min-height:810px;}
	.line{ display:none;}
}
@media (min-width:901px) and (max-width:1000px){
	.proc_ico { float: left; margin-top: 72px; position: relative; z-index: 0; margin-left: 70px; }
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:-8px; position: absolute; top:0px;}
	.hotspot2 { left:227px; position:absolute; top:0px;}
	.hotspot3 { left:460px; position:absolute; top:0px;}
	.hotspot4 { left:0px; position:absolute; top:260px;}
	.hotspot5 { left:260px; position:absolute; top:260px;}
	.black_sec{ min-height:810px;}
	.line{ display:none;}
}
@media (min-width:1001px) and (max-width:1100px){
	.proc_ico { float: left; margin-top: 72px; position: relative; z-index: 0; margin-left: 70px; }
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:-8px; position: absolute; top:0px;}
	.hotspot2 { left:227px; position:absolute; top:0px;}
	.hotspot3 { left:460px; position:absolute; top:0px;}
	.hotspot4 { left:0px; position:absolute; top:260px;}
	.hotspot5 { left:260px; position:absolute; top:260px;}
	.black_sec{ min-height:810px;}
	.line{ display:none;}
}
@media (min-width:1101px) and (max-width:1200px){
	.proc_ico { float: left; margin-top: 72px; position: relative; z-index: 0; margin-left: 70px; }
	.hotspot .content, .hotspot2 .content, .hotspot3 .content, .hotspot4 .content, .hotspot5 .content { position: relative;  		     overflow: hidden; width:150px; height:150px;}
	.hotspot .ico_head { top: 170px; }
	.hotspot2 .ico_head { top: 170px; }
	.hotspot3 .ico_head { top: 170px; }
	.hotspot4 .ico_head { top: 170px; }
	.hotspot5 .ico_head { top: 170px; }
	.hotspot { left:-8px; position: absolute; top:0px;}
	.hotspot2 { left:227px; position:absolute; top:0px;}
	.hotspot3 { left:460px; position:absolute; top:0px;}
	.hotspot4 { left:700px; position:absolute; top:0px;}
	.hotspot5 { left:0px; position:absolute; top:260px;}
	.black_sec{ min-height:810px;}
	.line{ display:none;}
}