@charset "utf-8";
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.main-timeline { width:770px; margin:200px auto; font-family: 'Roboto', sans-serif; position:relative; }
.main-timeline:after { content: ''; display: block; clear: both; }
.main-timeline:before { content: ''; height: 100%; width: 44px; transform: translateX(-50%); position: absolute; left: 50%; background:url(/static/home/img/fazhan-bg.png) repeat-y; }
.main-timeline .timeline { width: 390px; min-height:320px; float: right; position: relative; }
.main-timeline .timeline-content { padding: 15px 15px 15px 40px; display: block; position: relative; }
.main-timeline .timeline-content:hover { text-decoration: none; }
.main-timeline .timeline-year { height: 100%; width: 100%; position: absolute; right: -26px; top: -120px; }
.main-timeline .timeline-year h3 { text-align: center; width:280px; color: #222; font-size: 30px; font-weight: 900; line-height:100%; margin:0; padding:0; text-transform: uppercase; letter-spacing: 1px; margin-top:20px; margin-left:140px; }
.main-timeline .timeline-year p { text-align: center; width:280px; color: #222; font-size: 15px; letter-spacing: 1px; margin: 0 0 5px; margin-left:140px; }

.main-timeline .timeline:nth-child(even) { float: left; }
.main-timeline .timeline:nth-child(even) .timeline-year { left:-26px; }
.main-timeline .timeline:nth-child(even) .timeline-year:after { transform: translateX(-50%) translateY(-50%) rotate(200deg); }
.main-timeline .timeline:nth-child(even) h3 { letter-spacing: 1px; margin-top:20px; margin-left:0; }
.main-timeline .timeline:nth-child(even) p { margin:5px 0 0 ; margin-left:0; }

@media screen and (max-width:767px) {
.main-timeline:before { display:none; }
.main-timeline { width:auto; margin-top:0; }
.main-timeline .timeline { width:280px; min-height:400px; float:none; overflow:hidden; margin:0 auto;  }
.main-timeline .timeline img { width:390px; max-width:none; margin-left:-110px;  }
.main-timeline .timeline-year { position: absolute; right: 0px; top: 0px; }
.main-timeline .timeline-year h3 { margin:0; padding:0; margin-top:20px; }
.main-timeline .timeline-year p { margin: 0 0 5px; }
.main-timeline .timeline:nth-child(even) { float: none; }
.main-timeline .timeline:nth-child(even) .timeline-year { left:0; }
.main-timeline .timeline:nth-child(even) .timeline-year img { margin-left:0px;  }
}
@media screen and (max-width:567px) {
.main-timeline .title { font-size: 18px; }
}