/************************************** history-page timeline *************************************************/
.background4{
    
}
.background1{
	background-image:url(../images/bg1.png);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	background-color:white;
}

.center{
	width:auto;
	margin:0 auto;
}

.center-fill{
	position:relative;
	padding-left:50px;
	padding-right:50px;
}

.sec1{
	padding-bottom:7%;
}

.back-menu{
	width:100%;
	background-color:transparent;
}

.desc{
	color:#1e4c69;
	margin-top:12%;
	padding-left:10%;
}


.desc_title h1{
	margin:0;
}

.desc h1{

	font-size:3.8vw;
}

.desc_content{
	margin-top:1.2%;
}

.desc p{

	font-size:1.25vw;
	padding-left:1%;
	margin:0;
}


.background2{
	background-color:white;
}

.sec2{
	/*padding:7% 13% 3%;*/
}

.banner1{
	padding:0;
}

.banner1 img{
	width:100%;
}

.slide{
	text-align:center;
	width:100%;
	height:520px;
}

.carousel-inner>.item{
	padding:25% 0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

.carousel-indicators{
	bottom:2.5%;
}

.carousel-indicators li{
	border:2px solid white;
	width:12px;
	height:12px;
	margin:0 0.5%;
}

.carousel-indicators li.active{
	margin:0 0.5%;
}

.content2{
	padding:0;
	margin-top:5%;
}

.desc1{
	padding-left:0;
}

.subdesc1{
	padding-left:0;
}

.subdesc1 h4{

	font-size:1.8vw;
	color:#00713c;
	line-height:1.5;
	margin-top:5%;
}

.icon1{
	padding-left:0;
}

.icon1 img{
	width:3vw;
}

.desc2{
	padding-right:0;
}

.desc2 p{
	
	color:#676767;
	font-size:1vw;
	text-align:justify;
	line-height:1.5;
	margin-bottom:5%;
}

.over p{

	color:#676767;
	font-size:1vw;
	text-align:justify;
	line-height:1.5;
}

.background3{
	background-image:url(../images/back3.jpg);
	background-size:100% auto;
	background-repeat:no-repeat;
	background-color:#1e4b68;
}

.sec3{
	padding:11.5% 7%;
}

.title3{
	margin-top:3%;
}

.title3 h2{
	color:white;
	font-size:2.3vw;
	text-align:center;

}

.background4{
	background-color:white;
}

.sec4{
	padding:5%;
}

.title4{

	color:#00713c;
}

.title4 h3{
	font-size:1.8vw;
}

.timecontent:before{
	position: absolute;
    top: 6%;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 2px;
	height:87%;
    content: '';
    background-color: #00713c;
	transition: opacity .15s ease-in-out;
}

.timecontent{
	margin:5% 0;
	padding:0;
}

.number{
	width:73px;
	height:73px;
	background-color:white;
	border:2px solid #00713c;
	border-radius:50%;
	line-height:73px;
	color:#00713c;
	position: absolute;
    left: 46.2%;
	top:35%;
    z-index: 100;
	
	font-size:1.7vw;
}

.timewrap{
	padding:0;
}

.timewrap .from-left.year1:before{
	border-color:transparent #00713c transparent transparent;
}

.year1{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding:0;
	width:45%;
	height:240px;
}

.year1:before{
	position: absolute;
    top: 43%;
	left:-7%;
    width: 0;
    height: 0;
    content: '';
    border:15px solid #00713c;
	opacity:0.9;
}

.overlay1{
	background-color:#00713c;
	opacity:0.9;
	width:46%;
	height:100%;
	z-index:200;
	padding:18% 5%;
	color:white;
}

.overlay1 h4{
	font-size:1.7vw;

	margin:2% 0;
}

.overlay1 p{
	font-size:1.2vw;

	margin:5% 0;
}

.timewrap .from-right.year2:before{
	border-color:transparent transparent transparent #00713c;
}

.year2{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding:0;
	width:45%;
	height:240px;
	margin-left:-3%;
}

.year2:before{
	position: absolute;
    top: 43%;
	left:100%;
    width: 0;
    height: 0;
    content: '';
    border:15px solid #00713c;
	opacity:0.9;
}


.overlay2{
	background-color:#00713c;
	opacity:0.9;
	width:46%;
	height:100%;
	z-index:200;
	padding:18% 5%;
	color:white;
}

.overlay2 h4{
	font-size:1.7vw;

	margin:2% 0;
}

.overlay2 p{
	font-size:1.2vw;

	margin:5% 0;
}

@media screen and (max-width:1920px){
.sec4{
	padding:5%;
}

.timecontent:before{
	position: absolute;
    top: 6%;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 2px;
	height:90%;
    content: '';
    background-color: #00713c;
	transition: opacity .15s ease-in-out;
}

.timecontent{
	margin:5% 0;
	padding:0;
}

.number{
	width:87px;
	height:87px;
	background-color:white;
	border:2px solid #00713c;
	border-radius:50%;
	line-height:87px;
	color:#00713c;
	position: absolute;
    left: 46.9%;
	top:35%;
    z-index: 100;

	font-size:1.7vw;
}

.timewrap{
	padding:0;
}

.timewrap .from-left.year1:before{
	border-color:transparent #00713c transparent transparent;
}

.year1{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding:0;
	width:45%;
	height:320px;
}

.year1:before{
	position: absolute;
    top: 43%;
	left:-6%;
    width: 0;
    height: 0;
    content: '';
    border:19px solid #00713c;
	opacity:0.9;
}

.overlay1{
	background-color:#00713c;
	opacity:0.9;
	width:46%;
	height:100%;
	z-index:200;
	padding:14% 5%;
	color:white;
}

.overlay1 h4{
	font-size:1.7vw;

	margin:2% 0;
}

.overlay1 p{
	font-size:1.2vw;

	margin:5% 0;
}

.timewrap .from-right.year2:before{
	border-color:transparent transparent transparent #00713c;
}

.year2{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding:0;
	width:45%;
	height:320px;
	margin-left:-3%;
}

.year2:before{
	position: absolute;
    top: 43%;
	left:100%;
    width: 0;
    height: 0;
    content: '';
    border:19px solid #00713c;
	opacity:0.9;
}


.overlay2{
	background-color:#00713c;
	opacity:0.9;
	width:46%;
	height:100%;
	z-index:200;
	padding:14% 5%;
	color:white;
}

.overlay2 h4{
	font-size:1.7vw;
	
	margin:2% 0;
}

.overlay2 p{
	font-size:1.2vw;

	margin:5% 0;
}

}
@media screen and (max-width:1680px){
.number{
	width:85px;
	height:85px;
	line-height:85px;
	left:46.6%;
}

.year1:before{
	left:-7.9%;
	border:18px solid #00713c;
}

.year2:before{
	border:18px solid #00713c;
}

.year1{
	height:300px;
}

.year2{
	height:300px;
}
}

@media screen and (max-width:1510px){
.number{
	width:82px;
	height:82px;
	line-height:82px;
	left:46.3%;
}

.year1:before{
	border:17px solid #00713c;
}

.year2:before{
	border:17px solid #00713c;
}

.year1{
	height:280px;
}

.year2{
	height:280px;
}
}

@media screen and (max-width:1440px){
.number{
	width:80px;
	height:80px;
	line-height:80px;
	left:46.2%;
}

.year1:before{
	border:16px solid #00713c;
}

.year2:before{
	border:16px solid #00713c;
}

.year1{
	height:260px;
}

.year2{
	height:260px;
}
}

@media screen and (max-width:1366px){

.background4{
	background-color:white;
}

.sec4{
	padding:5%;
}

.title4{
	
	color:#00713c;
}

.title4 h3{
	font-size:1.8vw;
}

.timecontent:before{
	position: absolute;
    top: 6%;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 2px;
	height:87%;
    content: '';
    background-color: #00713c;
	transition: opacity .15s ease-in-out;
}

.timecontent{
	margin:5% 0;
	padding:0;
}

.number{
	width:73px;
	height:73px;
	background-color:white;
	border:2px solid #00713c;
	border-radius:50%;
	line-height:73px;
	color:#00713c;
	position: absolute;
    left: 46.2%;
	top:35%;
    z-index: 100;
	
	font-size:1.7vw;
}

.timewrap{
	padding:0;
}

.timewrap .from-left.year1:before{
	border-color:transparent #00713c transparent transparent;
}

.year1{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding:0;
	width:45%;
	height:240px;
}

.year1:before{
	position: absolute;
    top: 43%;
	left:-7%;
    width: 0;
    height: 0;
    content: '';
    border:15px solid #00713c;
	opacity:0.9;
}

.overlay1{
	background-color:#00713c;
	opacity:0.9;
	width:46%;
	height:100%;
	z-index:200;
	padding:18% 5%;
	color:white;
}

.overlay1 h4{
	font-size:1.7vw;

	margin:2% 0;
}

.overlay1 p{
	font-size:1.2vw;

	margin:5% 0;
}

.timewrap .from-right.year2:before{
	border-color:transparent transparent transparent #00713c;
}

.year2{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding:0;
	width:45%;
	height:240px;
	margin-left:-3%;
}

.year2:before{
	position: absolute;
    top: 43%;
	left:100%;
    width: 0;
    height: 0;
    content: '';
    border:15px solid #00713c;
	opacity:0.9;
}


.overlay2{
	background-color:#00713c;
	opacity:0.9;
	width:46%;
	height:100%;
	z-index:200;
	padding:18% 5%;
	color:white;
}

.overlay2 h4{
	font-size:1.7vw;

	margin:2% 0;
}

.overlay2 p{
	font-size:1.2vw;
	
	margin:5% 0;
}

}


@media screen and (max-width:1350px){
.slide{
	height:100%;
}

.year1{
	height:100%;
}

.year2{
	height:100%;
}
}

@media screen and (max-width:1280px){
.number{
	left:46%;
}
}

@media screen and (max-width:1245px){
.year1:before{
	left:-7.8%;
}
}

@media screen and (max-width:1205px){
.number{
	left:45.8%;
}
}

@media screen and (max-width:1160px){
.number{
	width:70px;
	height:70px;
	line-height:70px;
}

.year1:before{
	left:-8.3%;
}
}

@media screen and (max-width:1080px){
.number{
	left:45.7%;
	width:68px;
	height:68px;
	line-height:68px;
}

.year1:before{
	left:-8.8%;
}
}

@media screen and (max-width:1024px){
.number{
	width:65px;
	height:65px;
	line-height:65px;
}

.year1:before{
	left:-9.3%;
}

.timecontent:before{
	height:88%;
}
}

@media screen and (max-width:945px){
.number{
	left:45.2%; 
}

.year1:before{
	left:-9.8%;
}
}

@media screen and (max-width:880px){
.number{
	width:63px;
	height:63px;
	line-height:63px;
	left:45%; 
}

.year1:before{
	left:-10.7%;
}
}

@media screen and (max-width:856px){
.number{
	width:62px;
	height:62px;
	line-height:62px; 
}

.year1:before{
	left:-10.8%;
}
}

@media screen and (max-width:767px){
.desc h1{
	font-size:19px;
}

.desc p{
	font-size:11px;
}

.carousel-indicators li{
	width:10px;
	height:10px;
	border:1px solid white;
}

.subdesc1 h4{
	font-size:14px;
}

.desc2{
	padding-left:0;
}

.desc2 p{
	font-size:12px;
	margin-bottom:3%;
}

.title3 h2{
	font-size:13px;
}

.sec4{
	padding:5% 3%;
}

.sec2{
	/*padding:7% 7% 3%;*/
}

.title4 h3{
	font-size:13px;
}

.icon1 img{
	width:10%;
}

.number{
	left:44.5%;
	width:60px;
	height:60px;
	line-height:60px;
	font-size:11px;
}

.year1:before{
	left:-12.7%;
}

.year1{
	right:-5%;
}

.year2{
	left:-5%;
}

.overlay1{
	padding:18% 2%;
}

.overlay1 h4{
	font-size:10px;
}

.overlay1 p{
	font-size:7px;
}

.overlay2{
	padding:18% 2%;
}

.overlay2 h4{
	font-size:10px;
}

.overlay2 p{
	font-size:7px;
}
}

@media screen and (max-width:680px){
.number{
	left:44.3%;
	width:55px;
	height:55px;
	line-height:55px;
}

.year1:before{
	left:-14.3%;
}
}

@media screen and (max-width:600px){
.number{
	left:44.3%;
	width:50px;
	height:50px;
	line-height:50px;
}

.year1:before{
	left:-16%;
}
}

@media screen and (max-width:546px){
.number{
	left:44%;
	width:48px;
	height:48px;
	line-height:48px;
}

.year1:before{
	left:-17.3%;
}
}

@media screen and (max-width:500px){
.number{
	left:43.5%;
	width:48px;
	height:48px;
	line-height:48px;
}

.year1:before{
    border:9px solid #00713c;
	left:-12.3%;
}

.year1{
	margin-top:1.5%;
}

.year2:before{
    border:9px solid #00713c;
}
}
}

@media screen and (max-width:440px){
.carousel-indicators{
	bottom:-5%;
}

.number{
	left:44%;
	width:38px;
	height:38px;
	line-height:38px;
}

.year1:before{
    border:8px solid #00713c;
}

.year2:before{
    border:8px solid #00713c;
}
}

@media screen and (max-width:414px){
.number{
	left:44.5%;
	width:37px;
	height:37px;
	line-height:37px;
}

.year1:before{
	left:-18px;
}

.year1{
	right:-6.5%;
}
}

@media screen and (max-width:375px){
.carousel-indicators{
	bottom:-6%;
}

.number{
	left:44.5%;
	width:35px;
	height:35px;
	line-height:35px;
}

.year1:before{
	left:-18px;
}

.year1{
	right:-6%;
	margin-top:2.5%;
}

.year2{
	margin-top:2.5%;
}
}

@media screen and (max-width:320px){
.carousel-indicators{
	bottom:-8%;
}

.carousel-indicators li{
	width:8px;
	height:8px;
	border:2px solid white;
}

.carousel-indicators li.active{
	width:8px;
	height:8px;
}

.number{
	left:44%;
	width:31px;
	height:31px;
	line-height:31px;
}

.year1:before{
	left:-18px;
}

.year1{
	right:-7.2%;
	margin-top:2.5%;
}

.year2{
	margin-top:2.5%;
	left:-6%;
}
}
.overlay1 p,
.overlay2 p{
    color: #fff;
}
.timewrap{
    overflow: hidden;
}
.col-xs-12.overlay1,
.col-sm-12.overlay1,
.col-xs-12.overlay2,
.col-sm-12.overlay2{
    width: inherit;
    border-radius: 6px;
}
.year1,
.year2{
    padding: 0 !important;
    border-radius: 6px;

}
.number {
    background: #fff;
}