#page-3 {
  color: white;
  /* background: url(../images/bg-4.png) no-repeat center center; */
  background: url(https://file.cy-zq.cn/%E4%BA%BA%E7%89%A9/%E6%9C%AA%E7%9F%A5/%E5%B0%B9%E8%89%BA%E4%BD%B3_1752410778651.jpg);

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