.deoca-history {
	max-width:100%;
	margin:40px auto;
	padding:0 20px;
}


/* timeline */
.deoca-history-years{
	position:relative;
	display:flex;
	justify-content:space-between;
	margin:35px auto 35px;
	max-width:1050px;
}


/* line */
.deoca-history-years:after{
	content:"";
	position:absolute;
	top:12px;
	left:5%;
	right:5%;
	height:2px;
	background:#dfe8e2;
}


/* item */
.deoca-history-year{
	position:relative;
	z-index:2;
	background:white!important;
	border:0!important;
	font-size:16px;
	font-weight:700;
	color:#1c342a;
	padding:0!important;
	margin:0;
}


/* dot */
.deoca-history-year:before{
	content:"";
	display:block;

	width:14px;
	height:14px;

	margin:0 auto 12px;

	border-radius:50%;

	background:white;

	border:3px solid #009447;

}


/* active */
.deoca-history-year.active:before{

	width:22px;
	height:22px;

	margin-top:-4px;
	margin-bottom:8px;

	background:#009447;

	border-color:#009447;

	box-shadow:
	0 0 0 7px rgba(0,148,71,.12);

}


/* content */

.deoca-history-content{
	max-width:100%;
	margin:0 auto;
}


.deoca-history-item{

	display:none;

	padding:25px 30px;

	background:#fff;

	border-radius:12px;

	box-shadow:
	0 8px 25px rgba(0,0,0,.06);

	font-size:16px;

	line-height:1.7;

}

.deoca-history-year.active {
	color: var(--ttl-green);
}


.deoca-history-item.active{

	display:block;

	animation:historyShow .35s ease;

}


@keyframes historyShow{

	from{
		opacity:0;
		transform:translateY(10px);
	}

	to{
		opacity:1;
		transform:none;
	}

}