#timeLine{
    width: 100%;
    margin: 0px auto;
    /*border:  solid 1px #434343;*/
    /*background: rgba(500,500,500,0.9);*/
    overflow: hidden;
	position: relative;
}
#timeLine #yearList{
    width: 90%;
    list-style: none;
	display: block;
	text-align: right;
	margin:auto;
	position: absolute;
	right:150px;
	z-index: 900;
	height:50px;
}
#yearList:after,.container-li:after{
    content: "";
    display: table;
    clear: both;
}

.year-dot{
    width: 10px; height: 10px; border-radius: 5px;
    background-color: #002f21;
    margin: 15px 5px;
    display: inline-block;
}
.year-dot:hover{ background-color: #ff0000;}
.dotted-line{
/*    border-bottom: dashed 2px  #7b7d7b;*/
    position: relative;
    top: -26px;
    z-index: -1;
}
#cList{
    width: 100%;
    position: relative;
	z-index: 10;
	padding-top:50px;
/*	padding-bottom:50px;*/
}
#btnLeft{
    width: 40px; height: 40px;
	border-radius: 40px;
    display: inline-block;
    position: absolute;
    right: 85px;
    top: 0px;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 38px;
    background: rgba(15,75,168,1);
	z-index: 10000;
	cursor: pointer;
}
#btnRight{
    width: 40px; height: 40px;
	border-radius: 40px;
    display: inline-block;
    position: absolute;
    right: 25px;
    top: 0px;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 38px;
     background: rgba(15,75,168,1);
	z-index: 10000;
	cursor: pointer;
}
#btnLeft:hover,#btnRight:hover{
    background: rgba(15,75,168,0.8);
}
#cUl{
    width: 100%;
    list-style: none;

    margin: 0 auto;
    position: relative;
    left: 0px;
}
#cUl li{
    width:100%;
    position: absolute;  
	left: 0;
	/*height:100%;*/

	top:0;

}

.container-li{
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
 /*   -webkit-box-sizing: border-box;*/
	position: relative;
	display: table;
	
}
.container-li .advancing_area{
	position: relative;
	padding:50px 10% 50px 80px;
	background-color: #f8f8f8;
	z-index: 10;
	left:0px;
	top:0px;


}
.container-li .img{
	z-index: 100;
	text-align: right;

}
.container-li .img img{
	max-width:100%;
	margin:auto;
/*	box-shadow: 0 0 20px #666666;*/
	
}

@media (min-width: 1280px){	
	#cUl{
		height: 550px;
	}
	.container-li .advancing_area{
		min-height:520px;
	}
	.container-li .img{
	right:0px;
	top:10%;
	width:40%;
	height:400px;
	}
.container-li .advancing_area{
	width:65%;}
.container-li .img{
	position: absolute;
		padding-right:20px;
	overflow: hidden;
	}
}
@media (min-width: 769px) and (max-width: 1279px){
	#cUl{
		height: 580px;
	}
		.container-li .advancing_area{
		min-height:520px;
	}
		.container-li .img{
	right:0px;
	top:10%;
	width:40%;
	height:400px;
	}
.container-li .advancing_area{
	width:65%;}
.container-li .img{
	position: absolute;
		padding-right:20px;
	overflow: hidden;
	}
}
@media (max-width: 768px){	
		#cUl{
		
	}
		.container-li .advancing_area{
		min-height:520px;
	}
		.container-li .img{
	top:0;
	width:100%;
	height:400px;
	}
.container-li .advancing_area{
	width:100%;}
.container-li .img{
	position: relative;
	}
}



.year-active{
    color: #003399;
	background-color: #003399;
}
.year-active i{
    background-color: red;
}


