@charset "UTF-8";
/* CSS Document */



.Timeline {
	/*background: #fdf9ea;*/
	border-top:1px solid #CCC;
	}

.MainLine {
	display: block;
	position: relative;
	width: 100%;
	height: 6px;
	background: #CCC;
	margin: 150px auto;
}

.MainLine .YelowZone {
	position: absolute;
	display: block;
	left:50%;
	top:0;
	background: #eec216;
	width: 71.4%;
	height: 6px;
	margin-left: -35.7%;
}

.MainLine::before {
	content: '';
	position: absolute;
	display: block;
	width: 18px;
	height: 18px;
	border-top:4px solid #CCC;
	border-left:4px solid #CCC;
	transform: rotate(-45deg);
	top:-6px;
	left:0;
}

.MainLine::after {
	content: '';
	position: absolute;
	display: block;
	width: 18px;
	height: 18px;
	border-top:4px solid #CCC;
	border-right:4px solid #CCC;
	transform: rotate(45deg);
	top:-6px;
	right:0;
}

.MainLine .SmallPoint {
	position: absolute;
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #eec216;
	top:-11px;
	margin-left: -14px;
}

.MainLine .NowPoint {
	position: absolute;
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #b31218;
	top:-11px;
	margin-left: -14px;
	z-index: 1;
}

.MainLine .BigPoint {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #FFF;
	border: 3px solid #eec216;
	top:-22px;
	margin-left: -25px;
}

.MainLine .BigPointFull {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #eec216;
	border: 3px solid #eec216;
	top:-22px;
	margin-left: -25px;
}

.MainLine .BigPointFull::after {
	content: '';
	position: absolute;
	display: block;
	width: 30px;
	height: 15px;
	border-bottom: 5px solid #FFF;
	border-left: 5px solid #FFF;
	transform: rotate(-45deg);
	left:7px;
	top:10px;
}

.MainLine .Description {
	position: absolute;
	display: block;
	width: 110px;
	height: auto;
	font-weight:400;
	font-size: 1.05em;
	bottom:80px;
	left:-50%;
	margin-left: -11px;
}

.MainLine .Description::after {
	content: '';
	position: absolute;
	display: block;
	width: 2px;
	height: 20px;
	background: #CCC;
	left:50%;
	margin-left: -1px;
	bottom:-25px;
}

.MainLine .DescriptionBottom {
	position: absolute;
	display: block;
	width: 14.3%;
	height: auto;
	font-weight:400;
	font-size: 1.05em;
	top:60px;
	left:42.9%;
}

.MainLine .DescriptionBottom::before {
	content: '';
	position: absolute;
	display: block;
	width: 2px;
	height: 20px;
	background: #CCC;
	left:0;
	top:-25px;
}

.MainLine .DescriptionBottom::after {
	content: '';
	position: absolute;
	display: block;
	width: 2px;
	height: 20px;
	background: #CCC;
	right:0;
	top:-25px;
}

.MainLineMobile {
	display: none;
}



@media (max-width: 1380px)
{

}


@media (max-width: 768px)
{
	
.MainLine {
	display: none;
}

.MainLineMobile {
	display: block;
	position: relative;
	width: 6px;
	height: 500px;
	margin: 40px auto;
	background: #CCC;
}

.MainLineMobile .YelowZone {
	position: absolute;
	display: block;
	top:100px;
	left:0;
	background: #eec216;
	height: 71.4%;
	width: 6px;
}

.MainLineMobile::before {
	content: '';
	position: absolute;
	display: block;
	width: 18px;
	height: 18px;
	border-top:4px solid #CCC;
	border-left:4px solid #CCC;
	transform: rotate(45deg);
	left:-6px;
	top:0px;
}

.MainLineMobile::after {
	content: '';
	position: absolute;
	display: block;
	width: 18px;
	height: 18px;
	border-top:4px solid #CCC;
	border-right:4px solid #CCC;
	transform: rotate(135deg);
	left:-6px;
	top:480px;
	}
	
	
.MainLineMobile .SmallPoint {
	position: absolute;
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #eec216;
	left:-11px;
	margin-top: -14px;
}

.MainLineMobile .NowPoint {
	position: absolute;
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #b31218;
	left:-11px;
	margin-top: -14px;
	z-index: 1;
}

.MainLineMobile .BigPoint {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #FFF;
	border: 3px solid #eec216;
	left:-22px;
	margin-top: -25px;
}

.MainLineMobile .BigPointFull {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #eec216;
	border: 3px solid #eec216;
	left:-22px;
	margin-top: -25px;
}

.MainLineMobile .BigPointFull::after {
	content: '';
	position: absolute;
	display: block;
	width: 30px;
	height: 15px;
	border-bottom: 5px solid #FFF;
	border-left: 5px solid #FFF;
	transform: rotate(-45deg);
	left:7px;
	top:10px;
}

.MainLineMobile .Description {
	position: absolute;
	display: block;
	width: 110px;
	height: auto;
	font-weight:400;
	font-size: 1.05em;
	left:80px;
	top:-5px;
	text-align: left;
}

.MainLineMobile .Description::after {
	content: '';
	position: absolute;
	display: block;
	width: 16px;
	height: 2px;
	background: #CCC;
	left:-25px;
	margin-top: -1px;
	top:50%;
}

.MainLineMobile .DescriptionBottom {
	position: absolute;
	display: table;
	width: 110px;
	height: 100px;
	font-weight:400;
	font-size: 1.05em;
	top:300px;
	right:60px;
	text-align: right;
}

.MainLineMobile .DescriptionBottom .Center {
	position: static;
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}


.MainLineMobile .DescriptionBottom::before {
	content: '';
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	background: #CCC;
	right:-25px;
	top:0;
}

.MainLineMobile .DescriptionBottom::after {
	content: '';
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	background: #CCC;
	right:-25px;
	bottom:0;
}



}