@media screen and (min-width: 541px) {
	body, html {
		font-size: 100%;
		padding: 0;
		margin: 0;
	}

	/* Reset */
	*,
	*:after,
	*:before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}

	.clearfix:after {
		clear: both;
	}

	.demo {
		padding: 2em 0;
	}

	.main-timeline {
		overflow: hidden;
		position: relative;
	}

	.main-timeline:before {
		content: "";
		width: .1875rem;
		height: 100%;
		background: #f86b07;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	.main-timeline:last-child:before {
		border-left: .1875rem dashed #f86b07;
		height: 100%;
		background: #FFFFFF;
		position: absolute;
		top: .3125rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.main-timeline .timeline, .main-timeline .timeline {
		width: 50%;
		padding-left: 2.1875rem;
		float: right;
		position: relative;
	}

	.main-timeline .timeline:before {
		content: "";
		width: 1.875rem;
		height: 1.875rem;
		border-radius: 50%;
		background: #D85D1B;
		border: .625rem solid #fff;
		position: absolute;
		top: 16%;
		left: -0.9375rem;
		transform: translateY(-50%);
		box-shadow: 0 0 0 .1875rem #dd672b;
	}


	.main-timeline .timeline-content {
		display: block;
		padding: 1.5625rem;
		border-radius: 6.25rem;
		background: #ee4423;
		position: relative;
	}

	.main-timeline .timeline-content:before,
	.main-timeline .timeline-content:after {
		content: "";
		display: block;
		width: 100%;
		clear: both;
	}

	.main-timeline .timeline-content:hover {
		text-decoration: none;
	}

	.main-timeline .inner-content {
		width: 100%;
		float: right;
		padding: 1.3125rem 1.625rem .9375rem .625rem;
		color: #ee4423;
	}

	.main-timeline .year {
		display: inline-block;
		font-size: 3.125rem;
		font-weight: 600;
		color: #fff;
		position: absolute;
		top: 50%;
		left: 7%;
		transform: translateY(-50%);
	}

	.main-timeline .histroy-title {
		font-weight: 500;
		text-transform: uppercase;
		margin: 0 0 .3125rem 0;
		color: #CF5317;
	}

	.main-timeline .description {
		font-size: 1rem;
		margin: 0 0 .3125rem 0;
		color: #5e5c5e;
	}

	.main-timeline1 .timeline .inner-content {
		float: none;
		text-align: right;
		margin: 0 0 0 -112%;
	}

	.xtplan {
		width: 3.75rem;
		height: 3.75rem;
		position: absolute;
		left: 50%;
		margin-left: -1.875rem;
		background-color: #fff;
		border: .1875rem solid #F86B07;
		border-radius: 50%;
		z-index: 2;
	}

	.xtplan > img {
		max-width: 100%;
		height: auto;
		border-radius: 50%;
	}
}
@media screen and (max-width: 540px){
	.content-box > .content-branch > .content-right {
		min-width: 100% !important;
	}
	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}

	.clearfix:after {
		clear: both;
	}

	.demo {
		padding: 2em 0;
	}

	.main-timeline {
		overflow: hidden;
		position: relative;
	}

	.main-timeline:before {
		content: "";
		width: .1875rem;
		height: 100%;
		background: #f86b07;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	.main-timeline:last-child:before {
		border-left: .1875rem dashed #f86b07;
		height: 100%;
		background: #FFFFFF;
		position: absolute;
		top: .3125rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.main-timeline .timeline, .main-timeline .timeline {
		width: 50%;
		padding-left: 2.1875rem;
		float: right;
		position: relative;
	}

	.main-timeline .timeline:before {
		content: "";
		width: 1.875rem;
		height: 1.875rem;
		border-radius: 50%;
		background: #D85D1B;
		border: .625rem solid #fff;
		position: absolute;
		top: 16%;
		left: -0.9375rem;
		transform: translateY(-50%);
		box-shadow: 0 0 0 .1875rem #dd672b;
	}


	.main-timeline .timeline-content {
		display: block;
		padding: 1.5625rem;
		border-radius: 6.25rem;
		background: #ee4423;
		position: relative;
	}

	.main-timeline .timeline-content:before,
	.main-timeline .timeline-content:after {
		content: "";
		display: block;
		width: 100%;
		clear: both;
	}

	.main-timeline .timeline-content:hover {
		text-decoration: none;
	}

	.main-timeline .inner-content {
		width: 100%;
		float: right;
		padding: 1.3125rem 1.625rem .9375rem .625rem;
		color: #ee4423;
		padding-right: 40px;
	}

	.main-timeline .year {
		display: inline-block;
		font-size: 3.125rem;
		font-weight: 600;
		color: #fff;
		position: absolute;
		top: 50%;
		left: 7%;
		transform: translateY(-50%);
	}

	.main-timeline .histroy-title {
		font-weight: 500;
		text-transform: uppercase;
		margin: 0 0 .3125rem 0;
		color: #CF5317;
	}

	.main-timeline .description {
		font-size: 1rem;
		margin: 0 0 .3125rem 0;
		color: #5e5c5e;
	}

	.main-timeline1 .timeline .inner-content {
		float: none;
		text-align: right;
		margin: 0 0 0 -112%;
		padding: 0;
		padding-right: 55px;
	}

	.xtplan {
		width: 3.75rem;
		height: 3.75rem;
		position: absolute;
		left: 50%;
		margin-left: -1.875rem;
		background-color: #fff;
		border: .1875rem solid #F86B07;
		border-radius: 50%;
		z-index: 2;
	}

	.xtplan > img {
		max-width: 100%;
		height: auto;
		border-radius: 50%;
	}
	.description > ul > li{
		margin-bottom: 10px;
	}
}