#timeLine {
  width: 100%;
  margin: 15px auto;
  /*border:  solid 1px #434343;*/
  background: url(img/map-bg.png) no-repeat center center;
  overflow: hidden; }

#yearList {
  width: 300%;
  list-style: none;
  position: relative;
  /*left: 457px;*/
  margin-left: 40%; }
  #yearList li {
    width: 7%;
    float: left;
    cursor: pointer;
    text-align: center;
    padding: 12px 0px;
    font-weight: bold;
    font-family: unset;
    text-align: center; }
    #yearList li em {
      font-size: 16px;
      display: block; }
    #yearList li span {
      display: inline-block;
      font-weight: 100;
      background: #f0f0f0;
      border-radius: 30px;
      padding: 2px 10px;
      font-size: 10px;
      -webkit-transform: scale(0.8); }
    #yearList li.year-active {
      color: #cf000e; }
      #yearList li.year-active i {
        background: #fff;
        color: red; }
      #yearList li.year-active span {
        background: #cf000e;
        color: #fff; }

#yearList:after, .container-li:after {
  content: "";
  display: table;
  clear: both; }

.year-dot {
  width: 14px;
  height: 14px;
  margin: 10px auto;
  display: block;
  position: relative;
  z-index: 3;
  background: #fff;
  border-radius: 50%; }

.dotted-line {
  border-bottom: solid 2px #aeaeae;
  position: relative;
  top: -30px;
  z-index: 2; }

#cList {
  width: 100%;
  position: relative; }
  #cList .switchover {
    width: 225px;
    margin: 0 auto; }
    #cList .switchover i {
      padding: 0 10px; }

#btnLeft, #btnRight {
  width: 110px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: #ccc;
  z-index: 2; }
  #btnLeft:hover, #btnRight:hover {
    background: #cf000e; }

#btnLeft {
  left: 0; }

#btnRight {
  right: 0; }

#cUl {
  width: 68%;
  list-style: none;
  height: 220px;
  position: relative;
  left: 0px; }
  #cUl li {
    width: 72%;
    position: absolute;
    left: 0; }
    #cUl li img {
      width: 100%; }

.li-tit {
  display: inline-block;
  color: #fff;
  background-color: #002f21;
  padding: 10px 20px;
  margin: 30px auto 10px; }

.container-li {
  width: 350px;
  margin: 10px auto;
  padding: 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: #fff;
  box-shadow: 0 0 8px rgba(12, 3, 6, 0.5);
  font-size: 12px; }
  .container-li img {
    height: 112px; }
  .container-li p {
    margin-top: 15px; }

.c-li-left {
  width: 40%;
  float: left; }

.c-li-right {
  width: 60%;
  float: right; }

@media (max-width: 376px) {
  #cUl {
    margin-top: 20px;
    width: 68%;
    list-style: none;
    height: 235px;
    position: relative;
    left: 0px; }
    #cUl li {
      width: 67%;
      position: absolute;
      left: 0; }
      #cUl li img {
        width: 100%; }
  .container-li {
    width: 310px;
    margin: 10px auto;
    padding: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 8px rgba(12, 3, 6, 0.5);
    font-size: 12px; }
    .container-li p {
      margin-top: 15px; } }

@media (min-width: 768px) {
  #timeLine {
    width: 100%;
    margin: 100px auto;
    /*border:  solid 1px #434343;*/
    background: url(img/map-bg.png) no-repeat center center;
    overflow: hidden; }
  #yearList {
    width: 300%;
    list-style: none;
    position: relative;
    /*left: 457px;*/
    margin-left: 40%; }
  #yearList:after, .container-li:after {
    content: "";
    display: table;
    clear: both; }
  #yearList li {
    width: 7%;
    float: left;
    cursor: pointer;
    text-align: center;
    padding: 10px 40px;
    font-weight: bold;
    font-family: unset;
    text-align: center; }
    #yearList li em {
      font-size: 60px;
      display: block; }
    #yearList li span {
      width: 68%;
      display: inline-block;
      font-weight: 100;
      background: #f0f0f0;
      border-radius: 30px;
      padding: 5px 10px;
      font-size: 16px;
      -webkit-transform: scale(1); }
    #yearList li.year-active {
      color: #cf000e; }
      #yearList li.year-active i {
        color: red; }
      #yearList li.year-active span {
        background: #cf000e;
        color: #fff; }
  .year-dot {
    width: 14px;
    height: 14px;
    margin: 10px auto;
    display: block;
    position: relative;
    z-index: 3;
    background: #fff;
    border-radius: 50%; }
  .dotted-line {
    border-bottom: solid 2px #aeaeae;
    position: relative;
    top: -28px;
    z-index: 2; }
  #cList {
    width: 100%;
    position: relative; }
    #cList .switchover {
      width: 300px;
      margin: 0 auto; }
      #cList .switchover i {
        padding: 0 10px; }
  #btnLeft, #btnRight {
    width: 140px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: #ccc;
    z-index: 2; }
    #btnLeft:hover, #btnRight:hover {
      background: #cf000e; }
  #btnLeft {
    left: 0; }
  #btnRight {
    right: 0; }
  #cUl {
    margin-top: 20px;
    width: 600px;
    list-style: none;
    height: 280px;
    margin: 0 auto;
    position: relative;
    left: 0px; }
    #cUl li {
      width: 600px;
      position: absolute;
      left: 0; }
      #cUl li img {
        width: 100%; }
  .li-tit {
    display: inline-block;
    color: #fff;
    background-color: #002f21;
    padding: 10px 20px;
    margin: 30px auto 10px; }
  .container-li {
    width: 600px;
    margin: 10px auto;
    padding: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 8px rgba(12, 3, 6, 0.5); }
    .container-li img {
      height: 180px; }
  .c-li-left {
    width: 40%;
    float: left; }
  .c-li-right {
    width: 60%;
    float: right; } }