.ha_mainBg{
	width: 100%;
	float: left;
	background: url(../images/ov_ha_bg.png) center 480px no-repeat;
	min-width: 1200px;
	padding: 0;
}
.ha_main{
	width: 1200px;
	margin: 0 auto;
}
.ha_content{
	width: 1150px;
	height: 650px;
	overflow-y: scroll;
	float: left;
	padding: 0 0 0 50px
}
/*timeline*/
.timeline-both-side{
  float: left; 
  width: 96%; 
  margin: 20px 2% 50px; 
  position: relative; 
  box-sizing: border-box;
}
.timeline-both-side:before{
  background-color: #7ecef4; 
  bottom: 0; 
  content: " "; 
  left: 50%; 
  position: absolute; 
  top: 0; 
  width: 1px;
}
.timeline-both-side:after{
  border-radius: 50%; 
  bottom: -22px; 
  content: ""; 
  height: 18px; 
  left: 50%; 
  margin-left: -11px; 
  position: absolute; 
  width: 18px; 
  border: 2px solid #7ecef4;
}
.timeline-both-side li {
  position: relative; 
  float: left; 
  width: 100%;
}
.timeline-both-side li .date{
	width: 84px;
	height: 31px;
	position: absolute;
	left: -40px;
	background: url(../images/ov_ha_liDate.png) no-repeat;
	color: #fff;
	font-size: 24px;
	text-align: center;
	padding: 25px 0;
	z-index: 999;
}
.timeline-both-side li:hover .date{
	background: url(../images/ov_ha_liDate_h.png) no-repeat;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-0-transition: 0.5s;
	transition: 0.5s;
}
.timeline-both-side li p{
	padding: 0 0 0 45px;
}
.timeline-both-side li span{
	background: url(../images/ov_pd_list.gif) left 10px no-repeat;
	padding: 0 0 0 15px;
	float: left;
}
.timeline-both-side li .border-line{
  background-color: #7ecef4; 
  font-size: 1.4em; 
  height: 1px; 
  left: 50%; 
  margin-left: -8%; 
  position: absolute; 
  text-align: center; 
  top: 50%; 
  width: 8%; 
  z-index: 100;
}
.timeline-both-side li:hover .border-line, .timeline-both-side li:hover .border-line:before{
	background-color: #ef9c00;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-0-transition: 0.5s;
	transition: 0.5s;
}
.timeline-both-side li:hover .timeline-description{
	border: 1px solid #ef9c00;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-0-transition: 0.5s;
	transition: 0.5s;
}
.timeline-both-side li.opposite-side .border-line{
  left: auto; 
  right: 50%; 
  margin-left: 0; 
  margin-right: -8%;
}
.timeline-both-side li .border-line:before {
  background-color: #7ecef4; 
  content: ""; 
  height: 7px; 
  position: absolute; 
  right: -4px; 
  top: -3px; 
  width: 7px;
}
.timeline-both-side li.opposite-side .border-line:before{
  left: -4px; 
  right: auto;
}
.timeline-both-side li .timeline-description{
  border-radius: 2px; 
  min-height: 80px;
  background: rgba(255,255,255,0.7); 
  border: 1px solid #7ecef4; 
  float: left; 
  padding: 10px; 
  position: relative; 
  width: 40%;
}
.timeline-both-side li.opposite-side .timeline-description{
  float: right;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.ha_mainBg{
  min-width: 1000px;
}  
.ha_main{
  width: 970px;
  padding: 0 15px;
}
.ha_content{
  width: 100%;
  padding: 0;
}
.timeline-both-side li .date{
  left: -20px;
}
.timeline-both-side li p{
  padding: 0 0 0 60px;
}
}

@media screen and (min-width: 320px) and (max-width: 768px) {
.ha_mainBg{
  min-width: 320px;
}  
.ha_main{
  width: 90%;
  padding: 0 5%;
}
.ha_content{
  width: 100%;
  padding: 0;
}
.timeline-both-side li .border-line{
  display: none;
}
.timeline-both-side li .timeline-description{
  width: 90%;
}
.timeline-both-side li.opposite-side .timeline-description{
  float: left;
}
.timeline-both-side li .date{
  left: 5px;
}
.timeline-both-side li p{
  padding: 0 0 0 90px;
}
}