.history-area {
  height: 590px;
  background-image: url("../img/about/time-axis-bg.png");
  -moz-background-size: 100% 100%;
  background-size: 100% 100%; }
.history-area .developmenthistory-area {
  height: 590px;
  background-color: rgba(62, 193, 213, 0.8); }

#lineCont {
  width: 100%;
  height: 20%; }

#line {
  height: 24px;
  width: 100%;
  background: rgba(255, 255, 255, 0.4);
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  position: relative; }

@media (max-width: 1025px) {
  .history-area {
    height: 590px; }
  .history-area .developmenthistory-area {
    height: 590px; }

  #line {
    height: 17px;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    position: relative; } }
@media (max-width: 640px) {
  .history-area {
    height: 834px; }
  .history-area .developmenthistory-area {
    height: 834px; }

  #line {
    height: 680px;
    width: 10px;
    background: rgba(255, 255, 255, 0.4);
    margin: auto;
    top: 151%;
    transform: translateY(-48%);
    position: relative; } }
#span {
  display: none;
  width: 70%;
  margin: auto;
  margin-top: 25%;
  text-align: center;
  color: white; }

.circle {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 6px;
  position: absolute;
  top: 6px;
  border: 1px solid white;
  cursor: pointer; }
.circle:before {
  content: '';
  width: 6px;
  height: 6px;
  background: #3ec1d5;
  position: absolute;
  border-radius: 100%;
  top: 2px;
  left: 2px;
  display: none; }
.circle .popupSpan {
  height: 41px;
  width: 1px !important;
  border-right: 4px dashed #ffffff;
  padding: 10px;
  white-space: nowrap;
  color: white;
  position: absolute;
  top: 15px;
  left: -17px;
  display: none;
  transition: all 0.1s ease-out; }
.circle .detailSpan {
  top: 60px;
  width: 187px;
  height: 93px;
  left: -84px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  display: none;
  border-radius: 6px;
  padding: 20px; }
.circle .detailSpan span {
  font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff; }
.circle.hover:before, .circle.active:before {
  display: block; }
.circle.hover .popupSpan, .circle.active .popupSpan {
  display: block; }
.circle.hover .detailSpan, .circle.active .detailSpan {
  display: block; }
.circle.active .popupSpan {
  top: 15px; }

@media (max-width: 1025px) {
  .circle {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 6px;
    position: absolute;
    top: 3px;
    border: 1px solid white;
    cursor: pointer; }
  .circle:before {
    content: '';
    width: 6px;
    height: 6px;
    background: #3ec1d5;
    position: absolute;
    border-radius: 100%;
    top: 2px;
    left: 2px;
    display: none; }
  .circle .popupSpan {
    height: 41px;
    width: 1px !important;
    border-right: 4px dashed #ffffff;
    padding: 10px;
    white-space: nowrap;
    color: white;
    position: absolute;
    top: 15px;
    left: -17px;
    display: none;
    transition: all 0.1s ease-out; }
  .circle .detailSpan {
    top: 60px;
    width: 187px;
    height: 93px;
    left: -84px;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    display: none;
    border-radius: 6px;
    padding: 20px; }
  .circle .detailSpan span {
    font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff; }
  .circle.hover:before, .circle.active:before {
    display: block; }
  .circle.hover .popupSpan, .circle.active .popupSpan {
    display: block; }
  .circle.hover .detailSpan, .circle.active .detailSpan {
    display: block; }
  .circle.active .popupSpan {
    top: 15px; } }
@media (max-width: 640px) {
  .circle {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 5px;
    position: absolute;
    top: 0px;
    left: 0px !important;
    cursor: pointer; }
  .circle:before {
    content: '';
    width: 4px;
    height: 4px;
    background: #ffffff;
    position: absolute;
    border-radius: 100%;
    top: 2px;
    left: 2px;
    display: none; }
  .circle .popupSpan {
    height: 1px;
    width: 10px !important;
    border-top: 4px dashed #ffffff;
    border-right: 0px dashed #ffffff;
    padding: 10px;
    white-space: nowrap;
    color: white;
    position: absolute;
    top: 2px;
    left: -17px;
    display: block !important;
    transition: all 0.1s ease-out; }
  .circle .detailSpan {
    top: 60px;
    width: 187px;
    height: 93px;
    left: -84px;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    display: block !important;
    border-radius: 6px;
    padding: 5px; }
  .circle .detailSpan span {
    font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
    font-size: 14px;
    font-weight: 300;
    color: #ffffff; }
  .circle.hover:before, .circle.active:before {
    display: block; }
  .circle.hover .popupSpan, .circle.active .popupSpan {
    display: block; }
  .circle.hover .detailSpan, .circle.active .detailSpan {
    display: block; }
  .circle.active .popupSpan {
    top: 2px; } }
.circle-year {
  width: 54px;
  height: 54px;
  background: #ffffff;
  border-radius: 27px;
  position: absolute;
  top: -14px;
  border: 17px solid #9edbe6; }
.circle-year .popupSpan {
  font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
  font-size: 24px;
  font-weight: 600;
  width: auto;
  height: auto;
  padding: 10px;
  white-space: nowrap;
  display: inline-block;
  color: white;
  position: absolute;
  top: -72px;
  left: -28px;
  transition: all 0.1s ease-out; }
.circle-year .year-line {
  display: none;
  position: absolute;
  width: 2px;
  height: 36px;
  left: 9px;
  border-right: 4px dashed #ffffff;
  top: 39px; }
.circle-year .detailSpan {
  display: none;
  width: 250px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  border-radius: 6px;
  padding: 20px;
  top: 75px;
  left: -114px; }
.circle-year .detailSpan p {
  font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff; }
.circle-year.active {
  background: #3EC1D5; }
.circle-year.active .year-line {
  display: block; }
.circle-year.active .detailSpan {
  display: block; }

@media (max-width: 1025px) {
  .circle-year {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 20px;
    position: absolute;
    top: -10px;
    border: 10px solid #9edbe6; }
  .circle-year .popupSpan {
    font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
    font-size: 24px;
    font-weight: 600;
    width: auto;
    height: auto;
    padding: 10px;
    white-space: nowrap;
    display: inline-block;
    color: white;
    position: absolute;
    top: -72px;
    left: -28px;
    transition: all 0.1s ease-out; }
  .circle-year .year-line {
    display: none;
    position: absolute;
    width: 2px;
    height: 36px;
    left: 8px;
    border-right: 4px dashed #ffffff;
    top: 32px; }
  .circle-year .detailSpan {
    display: none;
    width: 250px;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    border-radius: 6px;
    padding: 20px;
    top: 69px;
    left: -114px; }
  .circle-year .detailSpan p {
    font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff; }
  .circle-year.active {
    background: #3EC1D5; }
  .circle-year.active .year-line {
    display: block; }
  .circle-year.active .detailSpan {
    display: block; } }
@media (max-width: 640px) {
  .circle-year {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 10px;
    position: absolute;
    top: -5px;
    border: 5px solid #9edbe6; }
  .circle-year .popupSpan {
    font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
    font-size: 16px;
    font-weight: 600;
    width: auto;
    height: auto;
    padding: 10px;
    white-space: nowrap;
    display: inline-block;
    color: white;
    position: absolute;
    top: -16px;
    left: -68px;
    transition: all 0.1s ease-out; }
  .circle-year .year-line {
    display: none; }
  .circle-year .detailSpan {
    display: none; }
  .circle-year.active {
    background: #ffffff; }
  .circle-year.active .year-line {
    display: none; }
  .circle-year.active .detailSpan {
    display: none; } }
#circle0 {
  left: 8.333333333333334%; }

#circle00 {
  left: 15.083333333333336%;
  display: none; }

#circle1 {
  left: 16.666666666666668%; }

#circle10 {
  left: 25.500000000000004%;
  display: none; }

#circle11 {
  left: 29.66666666666667%;
  display: none; }

#circle2 {
  left: 25%; }

#circle20 {
  left: 36.333333333333336%;
  display: none; }

#circle21 {
  left: 38.833333333333336%;
  display: none; }

#circle22 {
  left: 41.333333333333336%;
  display: none; }

#circle23 {
  left: 43.833333333333336%;
  display: none; }

#circle3 {
  left: 33.333333333333336%; }

#circle30 {
  left: 50.5%;
  display: none; }

#circle31 {
  left: 54.66666666666667%;
  display: none; }

#circle4 {
  left: 41.66666666666667%; }

#circle40 {
  left: 65.08333333333334%;
  display: none; }

#circle5 {
  left: 50%; }

#circle50 {
  left: 77.58333333333334%;
  display: none; }

#circle6 {
  left: 58.333333333333336%; }

#circle60 {
  left: 88%;
  display: none; }

#circle61 {
  left: 92.16666666666666%;
  display: none; }

#circle7 {
  left: 66.66666666666667%; }

#circle70 {
  left: 92.16666666666666%;
  display: none; }

#circle8 {
  left: 75%; }
#circle80 {
  left: 92.16666666666666%;
  display: none; }
#circle81 {
  left: 92.16666666666666%;
  display: none; }
#circle9 {
  left: 83.33333333333334%; }
#circle90 {
  left: 92.16666666666666%;
  display: none; }

@media (max-width: 1025px) {
  #circle0 {
    left: 8.333333333333334%; }

  #circle00 {
    left: 16.083333333333336%;
    display: none; }

  #circle1 {
    left: 16.666666666666668%; }

  #circle10 {
    left: 27%;
    display: none; }

  #circle11 {
    left: 30%;
    display: none; }

  #circle2 {
    left: 25%; }

  #circle20 {
    left: 38%;
    display: none; }

  #circle21 {
    left: 40%;
    display: none; }

  #circle22 {
    left: 42%;
    display: none; }

  #circle23 {
    left: 44%;
    display: none; }

  #circle3 {
    left: 33.333333333333336%; }

  #circle30 {
    left: 52%;
    display: none; }

  #circle31 {
    left: 55%;
    display: none; }

  #circle4 {
    left: 41.66666666666667%; }

  #circle40 {
    left: 65.5%;
    display: none; }

  #circle5 {
    left: 50%; }

  #circle50 {
    left: 78.5%;
    display: none; }

  #circle6 {
    left: 58.333333333333336%; }

  #circle60 {
    left: 90%;
    display: none; }

  #circle61 {
    left: 94%;
    display: none; }
  #circle7 {
    left: 66.66666666666667%; }
  #circle70 {
    left: 94%;
    display: none; }
  #circle8 {
    left: 75%; }
  #circle80 {
    left: 94%;
    display: none; }
  #circle81 {
    left: 94%;
    display: none; }
  #circle9 {
    left: 83.33333333333334%; }
  #circle90 {
    left: 94%;
    display: none; }
}
@media (max-width: 640px) {
  #circle0 {
    top: 0%;
    left: -5px; }

  #circle00 {
    top: 5%;
    left: -3px;
    display: block; }
  #circle00 .popupSpan {
    left: 10px !important; }
  #circle00 .detailSpan {
    top: -19px !important;
    width: 110px !important;
    height: 49px !important;
    left: 30px !important; }

  #circle1 {
    top: 10%;
    left: -5px; }

  #circle10 {
    top: 16%;
    left: -3px;
    display: block; }
  #circle10 .popupSpan {
    left: -22px !important; }
  #circle10 .detailSpan {
    top: -12px !important;
    width: 122px !important;
    height: 32px !important;
    left: -145px !important; }

  #circle11 {
    top: 14%;
    left: -3px;
    display: block; }
  #circle11 .popupSpan {
    left: 10px !important; }
  #circle11 .detailSpan {
    top: -12px !important;
    width: 110px !important;
    height: 32px !important;
    left: 30px !important; }

  #circle2 {
    top: 20%;
    left: -5px; }

  #circle20 {
    top: 22%;
    left: -3px;
    display: block; }
  #circle20 .popupSpan {
    left: -22px !important; }
  #circle20 .detailSpan {
    top: -12px !important;
    width: 122px !important;
    height: 32px !important;
    left: -145px !important; }

  #circle21 {
    top: 24%;
    left: -3px;
    display: block; }
  #circle21 .popupSpan {
    left: 10px !important; }
  #circle21 .detailSpan {
    top: -39px !important;
    width: 150px !important;
    height: 52px !important;
    left: 30px !important; }

  #circle22 {
    top: 27%;
    left: -3px;
    display: block; }
  #circle22 .popupSpan {
    left: -22px !important; }
  #circle22 .detailSpan {
    top: -12px !important;
    width: 151px !important;
    height: 51px !important;
    left: -174px !important; }

  #circle23 {
    top: 28%;
    left: -3px;
    display: block; }
  #circle23 .popupSpan {
    left: 10px !important; }
  #circle23 .detailSpan {
    top: -12px !important;
    width: 150px !important;
    height: 50px !important;
    left: 30px !important; }

  #circle3 {
    top: 30%;
    left: -5px; }

  #circle30 {
    top: 35%;
    left: -3px;
    display: block; }
  #circle30 .popupSpan {
    left: -22px !important; }
  #circle30 .detailSpan {
    top: -12px !important;
    width: 151px !important;
    height: 52px !important;
    left: -174px !important; }

  #circle31 {
    top: 37%;
    left: -3px;
    display: block; }
  #circle31 .popupSpan {
    left: 10px !important; }
  #circle31 .detailSpan {
    top: -12px !important;
    width: 151px !important;
    height: 52px !important;
    left: 30px !important; }

  #circle4 {
    top: 40%;
    left: -5px; }

  #circle40 {
    top: 45%;
    left: -3px;
    display: block; }
  #circle40 .popupSpan {
    left: -22px !important; }
  #circle40 .detailSpan {
    top: -26px !important;
    width: 151px !important;
    height: 52px !important;
    left: -174px !important; }

  #circle5 {
    top: 50%;
    left: -5px; }

  #circle50 {
    top: 55%;
    left: -3px;
    display: block; }
  #circle50 .popupSpan {
    left: 10px !important; }
  #circle50 .detailSpan {
    top: -23px !important;
    width: 151px !important;
    height: 53px !important;
    left: 30px !important; }

  #circle6 {
    top: 60%;
    left: -5px; }

  #circle60 {
    top: 64%;
    left: -3px;
    display: block; }
  #circle60 .popupSpan {
    left: -22px !important; }
  #circle60 .detailSpan {
    top: -23px !important;
    width: 151px !important;
    height: 53px !important;
    left: -174px !important; }

  #circle61 {
    top: 68%;
    left: -3px;
    display: block; }
  #circle61 .popupSpan {
    left: 10px !important; }
  #circle61 .detailSpan {
    top: -23px !important;
    width: 151px !important;
    height: 53px !important;
    left: 30px !important; }
  #circle7 {
    top: 70%;
    left: -5px; }
  #circle70{
    top: 76%;
    left: -3px;
    display: block;
  }
  #circle70 .popupSpan {
    left: 10px !important; }
  #circle70 .detailSpan {
    top: -23px !important;
    width: 151px !important;
    height: 53px !important;
    left: 30px !important; }
  #circle8 {
    top: 80%;
    left: -5px; }
  #circle80 {
    top: 84%;
    left: -3px;
    display: block; }
  #circle80 .popupSpan {
    left: -22px !important; }
  #circle80 .detailSpan {
    top: -12px !important;
    width: 160px !important;
    height: 58px !important;
    left: -183px !important; }

  #circle81 {
    top: 88%;
    left: -3px;
    display: block; }
  #circle81 .popupSpan {
    left: 10px !important; }
  #circle81 .detailSpan {
    top: -12px !important;
    width: 110px !important;
    height: 50px !important;
    left: 30px !important; }
  #circle9 {
    top: 90%;
    left: -5px; }
  #circle90{
    top: 95%;
    left: -3px;
    display: block;
  }
  #circle90 .popupSpan {
    left: -22px !important; }
  #circle90 .detailSpan {
    top: -23px !important;
    width: 151px !important;
    height: 53px !important;
    left: -174px !important; }
}
#mainCont {
  display: none;
  height: 80%;
  width: 100%;
  position: relative;
  color: white;
  font-size: 62px;
  text-align: center;
  transition: all 0.2s ease-out; }
#mainCont span {
  font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
  font-size: 18px;
  font-weight: 600;
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 30%;
  transition: all 0.2s ease-out; }
#mainCont span.right {
  left: 200%; }
#mainCont span.center {
  left: 0% !important; }
#mainCont span.left {
  left: -100%; }

@media (max-width: 640px) {
  #mainCont {
    display: none;
    height: 80%;
    width: 100%;
    position: relative;
    color: white;
    font-size: 62px;
    text-align: center;
    transition: all 0.2s ease-out; }
  #mainCont span {
    font-family: PingFangSC,'Microsoft YaHei',微软雅黑,'Microsoft JhengHei',华文细黑,STHeiti,MingLiu;
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 30%;
    transition: all 0.2s ease-out; }
  #mainCont span.right {
    left: 200%; }
  #mainCont span.center {
    left: 0% !important; }
  #mainCont span.left {
    left: -200%; } }

/*# sourceMappingURL=timeAxis.css.map */