#timeLine{

    width: 1000px;

    margin: 100px auto;

    /*border:  solid 1px #434343;*/

    /*background: rgba(500,500,500,0.9);*/

    overflow: hidden;

}

#yearList{

    width: 100%;

    list-style: none;

    position: relative;

    /*left: 457px;*/

    margin-left: 183px;

}

#yearList:after,.container-li:after{

    content: "";

    display: table;

    clear: both;

}

#yearList li{

    float: left;

    cursor: pointer;

    text-align: center;

    font-size: 21px;

    padding: 10px 20px;

}

.year-dot{

    width: 10px; height: 10px; border-radius: 5px;

    background-color: #002f21;

    margin: 10px auto;

    display: block;

}

.dotted-line{

    border-bottom: dashed 2px  #7b7d7b;

    position: relative;

    top: -26px;

    z-index: -1;

}

#cList{

    width: 100%;

    position: relative;

}

#btnLeft{

    width: 17px; height: 29px;

    display: inline-block;

    position: absolute;

    left: 0;

    top: 180px;
    background: url(../images/i811.png)  no-repeat center bottom;


}

#btnRight{


    width: 17px; height: 29px;
    display: inline-block;

    position: absolute;

    right: 0;

    top: 180px;
    background: url(../images/i812.png)  no-repeat center bottom;


}



#cUl{

    width: 850px;

    list-style: none;

    height: 400px;

    margin: 0 auto;

    position: relative;

    left: 0px;

}

#cUl li{

    width: 850px;

  position: absolute;  left: 0;

}

.li-tit{

    display:inline-block;

    color: #fff;

    background-color: #002f21;

    padding: 10px 20px;

    margin: 30px auto 10px;

}

.container-li{

    width: 100%;

    padding: 20px 50px;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    border: solid 1px #434343;

}

.c-li-left{

    width: 40%;

    float: left;

}

.c-li-right{

    width: 60%;

    float: right;

}

.year-active{

    color: red;

}

.year-active i{

    background-color: red;

}