.page-img{
    width: 70%;
    margin: auto;
}
.w-100{
	width: 900px;
}
.page-text{
    width: 70%;
    margin: auto;
    line-height: 30px;

}
.page-text-title{
    color: #292929;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.page-text-txt{
    font-size: 18px;
    color: #707070;
    margin-bottom: 20px;
	line-height: 35px;
}
@media screen and (min-width: 768px) and (max-width: 1199px){
    .page-img{
        width: 95%;
    }
}
@media screen and (max-width: 767px){
    .page-img,.page-text{
        width: 95%;
    }
    .page-text-title{
        text-align: center;
    }
}

/* 發展歷程 */
.cntl {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.cntl-center {
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
.cntl-bar {
	position: absolute;
	width: 10px;
	top: 0;
	bottom: 0;
	background-color: #ccc;
	box-shadow: inset 0px 0px 7px -2px #000;
}
.cntl-bar-fill {
	background-color: #009ABB;
	position: absolute;
	left:0;
	right:0;
	top:0;
	height:0;

}
.cntl-state {
	position: relative;
	width:100%;
	min-height: 200px;
	margin-bottom: 50px;
}
.cntl-state::after {
	display:block;
	content: ' ';
	clear:both;
}
.cntl-icon {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	box-shadow: 0px 0px 19px -9px #000;
	position: absolute;
	top: 0;
	text-align: center;
	line-height: 80px;
	font-size: 24px;
	color: #fff;
	border: 3px solid;
}
:root{
	--year17:#b84e4b;
	--year18:#97b459;
	--year19:#7a609a;
	--year20:#4ba4bc;
	--year21:#ffa459;
	--year22:#5eafa6;
	--year23:#915ba3;
	--year24:#4384CC;
}
.cntl-state.year17 .cntl-icon{
	background-color: var(--year17);
	border-color: #6e2e2c;
}
.cntl-state.year18 .cntl-icon{
	background-color: var(--year18);
	border-color: #5e7036;
}
.cntl-state.year19 .cntl-icon{
	background-color: var(--year19);
	border-color: #453657;
}
.cntl-state.year20 .cntl-icon{
	background-color: var(--year20);
	border-color: #26535f;
}
.cntl-state.year21 .cntl-icon{
    background-color: var(--year21);
    border-color: #cb8b1f;
}
.cntl-state.year22 .cntl-icon{
    background-color: var(--year22);
    border-color: #4a8780;
}
.cntl-state.year23 .cntl-icon{
    background-color: var(--year23);
    border-color: #70457e;
}
.cntl-state.year24 .cntl-icon{
    background-color: var(--year24);
    border-color: #326196;
}

.cntl-content {
	width: 40%;
	padding: 2%;
	background-color: rgba(238, 238, 238, 0.25);
	border-radius: 8px;
	float:left;
	opacity:0;
	position:relative;
	margin-left:-40%;
	border-bottom: 3px solid;
}


.cntl-state.year17 .cntl-content{border-bottom-color: var(--year17);}
.cntl-state.year18 .cntl-content{border-bottom-color: var(--year18);}
.cntl-state.year19 .cntl-content{border-bottom-color: var(--year19);}
.cntl-state.year20 .cntl-content{border-bottom-color: var(--year20);}
.cntl-state.year21 .cntl-content{border-bottom-color: var(--year21);}
.cntl-state.year22 .cntl-content{border-bottom-color: var(--year22);}
.cntl-state.year23 .cntl-content{border-bottom-color: var(--year23);}
.cntl-state.year24 .cntl-content{border-bottom-color: var(--year24);}

.cntl-state.year17 .title {
	display: flex;
	align-items: center;
	font-size: 24px;
}
.cntl-state.year17 .title{color: var(--year17);}
.cntl-state.year18 .title{color: var(--year18);}
.cntl-state.year19 .title{color: var(--year19);}
.cntl-state.year20 .title{color: var(--year20);}
.cntl-state.year21 .title{color: var(--year21);}
.cntl-state.year22 .title{color: var(--year22);}
.cntl-state.year23 .title{color: var(--year23);}
.cntl-state.year24 .title{color: var(--year24);}

.cntl-state .title span{
    display: inline-block;
    width: 8px;
    height: 20px;
    margin-right: 5px;
}
.cntl-state.year17 .title span{background-color: var(--year17);}
.cntl-state.year18 .title span{background-color: var(--year18);}
.cntl-state.year19 .title span{background-color: var(--year19);}
.cntl-state.year20 .title span{background-color: var(--year20);}
.cntl-state.year21 .title span{background-color: var(--year21);}
.cntl-state.year22 .title span{background-color: var(--year22);}
.cntl-state.year23 .title span{background-color: var(--year23);}
.cntl-state.year24 .title span{background-color: var(--year24);}

.cont-block{
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    color: white;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
    box-shadow: 3px 3px 3px #ccc;
	text-shadow: 1px 1px 2px #000;
	letter-spacing: 3px;
}
.cntl-state.year17 .cont-block{background-color: var(--year17);}
.cntl-state.year18 .cont-block{background-color: var(--year18);}
.cntl-state.year19 .cont-block{background-color: var(--year19);}
.cntl-state.year20 .cont-block{background-color: var(--year20);}
.cntl-state.year21 .cont-block{background-color: var(--year21);}
.cntl-state.year22 .cont-block{background-color: var(--year22);}
.cntl-state.year23 .cont-block{background-color: var(--year23);}
.cntl-state.year24 .cont-block{background-color: var(--year24);}


.cntl-state:nth-child(2n+2) .cntl-content {
	float:right;
	margin-right:-40%;
}

.cntl-image {
	opacity:0;
	width: 40%;
	padding: 2%;
}

.cntl-state:nth-child(2n+1) .cntl-image {
	float:right;
}

.cntl-image img {
	width:100%;
}

.cntl-content h4 {
	font-size:24px;
	font-weight: bold;
	margin-bottom: 10px;
}

/*animations*/
.cntl-bar-fill,.cntl-content,.cntl-image {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	transition: all 500ms ease;
}
.cntl-state:nth-child(2n+2).cntl-animate .cntl-content {
	margin-right:0%;
}
.cntl-animate .cntl-content {
	opacity:1;
	margin-left:0%;
}
.cntl-animate .cntl-image {
	opacity:1;
}
@media (max-width: 768px) {
    .Process-block{
        width: 95%;
        margin: auto;
    }
	.cntl-bar {
		left:auto;
		right: 37px;
	}

	.cntl-content {
		width:80%;
		float:none;
	}
	.cntl-state:nth-child(2n+2) .cntl-content {
		margin-right:0%;
		float:none;
	}

	.cntl-image {
		width:80%;
	}

	.cntl-state:nth-child(2n+1) .cntl-image {
		float:none;
	}

	.animate .cntl-content {
		margin-left: 2%;
	}

	.cntl-icon {
		left: auto;
		right: 0;
	}

}