/*history.css*/          
.time_list {padding: 30px 0;  display: -webkit-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.tl_line {position: relative; width: 160px; height: 160px; padding: 20px; border: 1px solid #ddd; border-radius: 50%;text-align: center;}
.tl_line:before {content: ''; position: absolute; top: 50%; left: 100%; width: 100px; height: 1px; background: #ddd;}
.tl_ood .tl_line:after{content: ''; position: absolute; top: 50%; right: -100px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #999;}
.tl_even .tl_line:after{content: ''; position: absolute; top: 50%; right: -100px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #55daf2;}
.time_list .year_cricle{padding: 20px;width: 100%; height: 100%; border-radius: 50%; display: table;}
.time_list .year_txt {width: 100%; height: 100%; background: #fff;border-radius: 50%; font-size: 20px; font-weight: 700; display: table-cell; vertical-align: middle;}   
.tl_ood  .year_cricle{background:#999;}
.tl_even  .year_cricle{background:#55daf2;}
.tl_ood  .year_txt{color:#999;}
.tl_even  .year_txt{color:#55daf2;}
.time_list{display: table;}
.time_list .tl_year{display: table-cell; width: 340px; vertical-align: middle;}
.time_list .tl_txt {display: table-cell; width: 500px; text-align: left; vertical-align: middle;} 
.tl_txt li{margin-bottom: 5px;}
.tl_txt li:after{content: ''; display: block; clear: both;}
.tl_month {float: left;width: 15%; display: inline-block;padding:0 10px; font-weight: 700; font-size: 18px;}
.tl_info {float: left; width: 85%; display: inline-block; font-size: 18px;}
.history_area {text-align: center;}
.timeline_box {display: inline-block; margin-bottom: 70px;}
@media screen and (max-width:768px){
    .time_list{display: block;}
    .tl_line{display: inline-block; width: 120px; height: 120px; padding: 15px;}
    .timeline_box{width: 400px;}
    .time_list .year_cricle {padding: 15px;}
    .time_list .year_txt {font-size: 18px;}
    .tl_line:before {top: 100%;left: 50%;width: 1px;height: 30px;}
    .time_list .tl_year{display: block; padding-bottom: 50px; width: 100%;}
    .time_list .tl_txt {display: block; width: 100%;} 
    .tl_even .tl_line:after {top: auto; right: 50%; bottom: -30px; margin-right: -4px; margin-top: 0;}
    .tl_ood .tl_line:after {top: auto;right: 50%;bottom: -30px;margin-right: -4px;margin-top: 0;}
}
@media screen and (max-width:600px){
   .timeline_box{width: 100%;}
   .time_list .tl_txt {width: 100%;}
}
@media screen and (max-width:480px){
   .tl_month {width: 20%; font-size: 16px;}
   .tl_info {width: 80%; font-size: 16px;}
}