.lopwon_timeline {
	margin: 1em auto;
	width: 100%;
	overflow: hidden;
}

.lopwon_timeline ul,
.lopwon_timeline li {
	list-style: none;
}

.lopwon_timeline ul {
	padding: 0;
}

li.lopwon_timeline-title {
	position: relative;
	padding: 1em;
	font-size: 1.4em;
	color: #323232;
	line-height: 1;
}

li.lopwon_timeline-title:before {
	position: absolute;
	top: 1em;
	left: calc((1em - 0.2em) / 2);
	content: '';
	width: 0.2em;
	height: 1em;
	background-color: #ff8800;
}

li.lopwon_timeline-year {
	position: relative;
	padding: 1em 1em 1em 2em;
	font-size: 1.4em;
	color: #02cbab;
	line-height: 1;
	border-radius: 0.2em;
	cursor: pointer;
}

li.lopwon_timeline-year:hover {
	color: #323232;
}

li.lopwon_timeline-year:before {
	position: absolute;
	top: 1.25em;
	left: 0.5em;
	content: '';
	width: 0.3em;
	height: 0.3em;
	border: 0.1em solid #02cbab;
	border-radius: 50%;
}

li.lopwon_timeline-year:hover:before {
	background-color: #02cbab;
}

li.lopwon_timeline-info {
	display: none;
	position: relative;
	margin: 0.5em auto 2em 3em;
	padding: 0;
	color: #323232;
	word-wrap: break-word;
	word-break: normal;
	background-color: #f8f8f8;
	border-radius: 0.2em 2em 2em 2em;
}

li.lopwon_timeline-info:hover {
	background-color: #f2f2f2;
}

li.lopwon_timeline-info:before {
	position: absolute;
	top: 0;
	left: -2em;
	content: '';
	width: 0.1em;
	height: 100%;
	background-color: #02cbab;
}

li.lopwon_timeline-info p {
	margin: 0;
	padding: 2em;
	font-size: 1em;
	line-height: 1.4;
	font-weight: normal;
}

li.lopwon_timeline-info img {
	margin: 0.5em 0;
	width: 100%;
	border-radius: 1em;
}

.lopwon-overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - 6em);
	height: 100%;
	padding: 0 3em;
	font-size: 1.2em;
	color: white;
	line-height: 2;
	font-weight: normal;
	word-wrap: break-word;
	word-break: normal;
	background-color: rgb(0 0 0 / 75%);
}

@media screen and (max-width: 480px) {
	
	li.lopwon_timeline-info p {
		padding: 1em;
	}
	
}