.container { max-width:980px;width:100%; margin:0 auto;}

.content{width: 100%; max-width: 1000px; margin: 0 auto;}

.sec-title{     margin: 30px 0 0 0; padding: 5px 10px; background-color: #99999938;text-align: left;color: #666;}

.content-wrap{display: block; text-align: center; margin: 0 auto; width: 300px; height: 100%;}


/* ================ The Timeline ================ */

.timeline { position: relative; width: 660px;margin: 0 auto;margin-top: 20px;padding: 1em 0;list-style-type: none;}
.timeline:before { position: absolute;left: 50%;top: 0; content: ' '; display: block; width: 4px; height: 93%; margin-left: -1px; background: #a7a9ac; z-index: 99;}
.timeline li {padding: 2em 0;}
.timeline li:after {content: "";display: block; height: 0; clear: both;visibility: hidden;}



.direction-l ,.direction-r{  position: relative; width: 300px;}
.direction-l { float: left; text-align: right;}
.direction-r { float: right;}
.flag-wrapper { position: relative; display: inline-block; text-align: center;}
.flag {  position: relative; display: inline; background: rgb(248,248,248); padding: 6px 5px; border-radius: 5px; font-weight: 300; text-align: left; color: #80b940;}
.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.direction-l .flag:before,.direction-r .flag:before { position: absolute; top: 50%; right: -73px; content: ' '; display: block;width: 35px;height: 60px; margin-top: -10px;background: #fff; border-radius: 0 50px 50px 0;border: 4px solid #80b940; z-index: 10;}
.direction-r .flag:before { left: -70px;border-radius: 50px 0 0 50px; border: 4px solid #80b940;}
.direction-l .flag:after,.direction-r .flag:after{content: "";  position: absolute; top: 50%; height: 0;width: 0;  margin-top: -8px; border: solid transparent; border-width: 8px;pointer-events: none;}



.direction-l .flag:after {left: 100%;border-left-color: rgb(248,248,248);}
.direction-r .flag:after { right: 100%; border-right-color: rgb(248,248,248);}

.desc {  margin: 1em 0.75em 0 0; font-size: 14px; line-height: 1.5em; color: #666;}
.desc:before{  position: absolute; right: -40px; content: ' '; display: block; width: 20px; height: 20px; margin-top: -10px;background: #a7a9ac;
 border-radius: 50px; z-index: 100;}
	
.direction-r .desc:before{left:-40px;}
.direction-r .desc { margin: 1em 0 0 0.75em;}


.flag-wrapper em{color:#fb8b3c;	font-weight:400;}


/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

.timeline {width: 100%;padding: 4em 0 1em 0;}

.timeline li {padding: 2em 0;}

.timeline:before { z-index: 3;}

.direction-l,.direction-r {float: none;width: 100%;text-align: center;}

.flag-wrapper {text-align: center;}

.flag {	background: rgb(255,255,255);z-index: 15;}

.direction-l .flag:before,.direction-r .flag:before { position: absolute; top: -30px;left: 50%;content: ' ';display: block;width: 12px;	height: 12px;	margin-left: -9px;	background: #fff;	border-radius: 10px;border: 4px solid #80b940;z-index: 10;}

.direction-l .flag:after,.direction-r .flag:after {	content: "";position: absolute;	left: 50%;	top: -8px;	height: 0;	width: 0;margin-left: -7px;border: solid transparent;	border-bottom-color: rgb(255,255,255);	border-width: 8px;pointer-events: none;}

.time-wrapper {	display: block;position: relative;margin: 4px 0 0 0;z-index: 14;}

.direction-l .time-wrapper, .direction-r .time-wrapper {float: none;}



.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: rgb(245,245,245);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	box-shadow: 0 0 1px rgba(0,0,0,0.20);
    z-index: 15;
}

.desc:first-of-type { display: none;}

.direction-l .desc, .direction-r .desc {position: relative;margin: 1em 1em 0 1em;padding: 1em;z-index: 15;}


.desc:before{ display:none;	}

	

}

@media screen and (min-width: 400px and max-width: 660px) {

.direction-l .desc,.direction-r .desc {margin: 1em 4em 0 4em;}

}

/*----------------------------- 注意事項文字 -----------------------------------  */

/* ul { width:80%; margin:0 auto; color:#a3a3a3; list-style:decimal; padding-left:30px;}
 ul li{ margin-bottom:10px; font-size:15px; color:#333333; line-height:1.5;}
*/







@media screen and (max-width: 640px) {	
	
	
	
}