@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

/*
purple #B1658B;
red #CA2420;
blue #326295;
orange #F89829;
*/

/* The actual timeline (the vertical ruler) */
.timeline {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.timeline *{
	box-sizing: border-box;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
	content: '';
	position: absolute;
	width: 4px;
	background-color: #4d87ba;
	top: 0;
	bottom: 0;
	left: calc(50% - 2px);
	margin-left: -1px;
}

/* inner-container around content */
.inner-container {
	padding: 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
	color: #FFF;
	letter-spacing: 0;
	font-size: 16px;
}

/* The circles on the timeline */
.inner-container::after {
	content: '';
	position: absolute;
	width: 50px;
	height: 50px;
	right: -25px;
	background-color: #4d87ba;
	background-image: url('../images/timeline_check.png');
	background-size: 60%;
	background-position: center;
	background-repeat: no-repeat;
	border: 0px solid #FF9F55;
	top: 45px;
	border-radius: 50%;
	z-index: 1;
}

.inner-container.small::after {
	background-color: #eee;
	background-image: url('../images/timeline_check_two.png');
	background-size: 60%;
	background-position: center;
	background-repeat: no-repeat;
	border: 0px solid #FF9F55;
}

.inner-container.big {
	font-weight: bold;
}

.inner-container.big.spec {
	font-size: 14px;
}

.inner-container.small {
	font-size: 14px;
	color: #666666;
}

.inner-container a{
	color: #FFF;
	text-decoration: none;
}

.inner-container.small a{
	color: #666666;
	text-decoration: none;
}

/* Place the container to the left */
.inner-container.left {
	left: 0;
	text-align: right;
}

/* Place the container to the right */
.inner-container.right {
	left: 50%;
	text-align: left;
}

/* Add arrows to the left container (pointing right) */
.inner-container.left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 60px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid #4d87ba;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #4d87ba;
}

.inner-container.left.small::before {
	border: medium solid #eee;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #eee;
}

/* Add arrows to the right container (pointing left) */
.inner-container.right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 60px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid #4d87ba;
	border-width: 10px 10px 10px 0;
	border-color: transparent #4d87ba transparent transparent;
}

.inner-container.right.small::before {
	border: medium solid #eee;
	border-width: 10px 10px 10px 0;
	border-color: transparent #eee transparent transparent;
}


/* Fix the circle for containers on the right side */
.inner-container.right::after {
	left: -25px;
}

/* The actual content */
.inner-container .content {
	padding: 20px 30px;
	background-color: #4d87ba;
	position: relative;
	border-radius: 6px;
}

.inner-container.small .content {
	background-color: #eee;
}

/*小於等於1800*/
@media (max-width: 1800px) {
}

/*小於等於1440*/
@media (max-width: 1440px) {
	

}
@media (max-width: 992px) {
}

/*小於等於768*/
@media (max-width: 768px) {
	.timeline::after {
		left: 15px;
	}

	.inner-container {
		width: 100%;
		padding: 40px 20px 20px 50px;
	}

	.inner-container .content{
		padding: 15px;
	}

	.inner-container::before {
		left: 60px;
		border: medium solid #4d87ba;
		border-width: 10px 10px 10px 0;
		border-color: transparent #4d87ba transparent transparent;
	}

	.inner-container.left, .inner-container.right{
		text-align: left;
	}
	
	.inner-container.left::after, .inner-container.right::after {
		left: 0px;
		content: '';
		position: absolute;
		width: 30px;
		height: 30px;
		right: auto;
	}

	.inner-container.right::before, .inner-container.left::before{
		top: 50px;
		left: 40px;

		border-width: 10px 10px 10px 0;
		border-color: transparent #4d87ba transparent transparent;
	}

	.inner-container.right {
		left: 0%;
	}
}

@media (max-width: 480px) {
	
}

/*小於等於414*/
@media (max-width: 414px) {
}

/*小於等於350*/
@media (max-width: 350px) {
}