#page-3 {
	background: url(../images/bg-4.png) no-repeat center center;
	color: #fff;
}
#page-3 .timeline {
	position: relative;
	background: url(../images/p3-timeline-line.png) no-repeat center 50px;
	text-align: center;
	margin-top: 140px;
}
#page-3 .timeline li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	width: 140px;
	margin: 0 -30px;
	color: #444;
	background: url(../images/p3-timeline-point.png) no-repeat center 43px;
	-webkit-transition: color .3s linear;
	   -moz-transition: color .3s linear;
	    -ms-transition: color .3s linear;
	     -o-transition: color .3s linear;
	        transition: color .3s linear;
	cursor: pointer;
}
#page-3 .timeline li:hover{
	color: #BBB;
}
#page-3 .timeline li.current {
	color: #fff;
}
#page-3 .timeline li .time {
	height: 20px;
}
#page-3 .timeline li .circle {
	display: block;
	height: 33px;
	width: 33px;
	margin: 14px auto;
	background: url(../images/p3-timeline-point-active.png) no-repeat center center;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
	    -ms-transition: all .3s linear;
	     -o-transition: all .3s linear;
	        transition: all .3s linear;
}
#page-3 .timeline li .version {
	height: 40px;
}
#page-3 .timeline li .time,
#page-3 .timeline li .description {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-webkit-transition: opacity .2s linear;
	   -moz-transition: opacity .2s linear;
	    -ms-transition: opacity .2s linear;
	     -o-transition: opacity .2s linear;
	        transition: opacity .2s linear;
	*visibility: hidden;
}
#page-3 .timeline li.current .time,
#page-3 .timeline li.current .description {
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	*visibility: visible;
}
#page-3 .timeline li.current .circle {
	background-size: 100% 100%;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-animation: circleZoom .3s linear forwards;
	   -moz-animation: circleZoom .3s linear forwards;
	    -ms-animation: circleZoom .3s linear forwards;
	     -o-animation: circleZoom .3s linear forwards;
	        animation: circleZoom .3s linear forwards;
}
#page-3 .timeline .dot {
	position: absolute;
	top: 49px;
	left: 0;
	font-size: 0;
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 2px;
	-webkit-animation: kirakira .8s linear infinite alternate;
	   -moz-animation: kirakira .8s linear infinite alternate;
	    -ms-animation: kirakira .8s linear infinite alternate;
	     -o-animation: kirakira .8s linear infinite alternate;
	        animation: kirakira .8s linear infinite alternate;
}
@-webkit-keyframes kirakira {
	0%   { opacity: .3 }
	100% { opacity: 1 }
}
@-moz-keyframes kirakira {
	0%   { opacity: .3 }
	100% { opacity: 1 }
}
@-ms-keyframes kirakira {
	0%   { opacity: .3 }
	100% { opacity: 1 }
}
@-o-keyframes kirakira {
	0%   { opacity: .3 }
	100% { opacity: 1 }
}
@keyframes kirakira {
	0%   { opacity: .3 }
	100% { opacity: 1 }
}
#page-3 .introduction {
	margin: 90px 0 0;
	border: 1px solid #313131;
	border-radius: 10px;
	padding: 20px 40px;
	font-size: 14px;
	line-height: 1.8;
	color: #999;
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;
}
#page-3 .introduction:hover {
	border-color: #888;
	color: #eee;
}