.body-box{width:800px;margin:20px auto;background: #f5f5f5;}

.timer-shaft-box{width:100%;;box-sizing: border-box;position:relative;}
.timer-shaft{position:relative;width:100%;height:80px;overflow: hidden;}
.timer-left{position:absolute;top:33px;left:-15px;z-index:99;width:23px;height:37px;margin-top:-18.5px;cursor:pointer;line-height: 37px;color: #999}
.timer-right{position:absolute;top:33px;right:-33px;z-index:99;width:23px;height:37px;margin-top:-18.5px;cursor:pointer;line-height: 37px;color: #999}
.timer-scale{position:absolute;top:0;left:0;height:80px;padding-left: 20px;font-size: 0;white-space: nowrap;}
.timer-scale-cont{display:inline-block;height:100%;line-height:80px;width: 140px}
.time-circle{display:inline-block;vertical-align:middle;width:120px;height:60px;line-height:60px;text-align: center;font-size:24px;color:#fff;border-radius: 30px;background: #999;transition: all .3s;cursor:pointer;}
.timer-scale-cont.hov .time-circle{width:120px;height:60px;line-height: 60px;font-size:24px;background: #0B308D;}
.line-scale{display:inline-block;vertical-align:middle;width:150px;height:22px;margin:0 2px}

.timer-shaft-content{width:100%;overflow: hidden;font-size:0;box-sizing:border-box;white-space: nowrap;margin-left: 20px}
.shaft-detail-cont{display: none;width:100%;}
.timer-year{padding-left:20px;font-weight:bold;color:#333;font-size:0;}
.timer-year span{display: inline-block;vertical-align:middle;margin-left:18px;font-size:24px;}
.month-detail-box{position:relative;width:100%;min-height:140px;font-size:0;box-sizing: border-box;white-space: normal;padding-bottom: 20px}
.month-detail-box:before{content: '';position:absolute;top:0;left:51.5px;height:100%;border-right:2px dashed #ccc;}
.month-detail-box .month-title{
    position:absolute;font-size:16px;font-weight: bold;color:#333;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    left: 5px;
    overflow: hidden;
}
.month-detail-box .month-title div:first-child{
    height:70px;
    line-height: 70px;
    background: #FFD700;
    color: #0B308D;
    font-weight: 800;
    font-size: 50px;
}
.month-detail-box .month-title div:last-child{
    height: 30px;
    line-height: 30px;
    color: #fff;
    background: #0B308D;
    font-size: 16px;
}
.incident-record{
    display:inline-block;
    padding-left:125px;
    font-size:20px;
    width:100%;
    line-height: 30px;
    padding-top: 20px;
    padding-right: 10px;
    color: #111111;
}
.timer-all{
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #0B308D;
}
.timer-all:before{
content: '';position:absolute;top:65px;left:71.5px;height:40px;border-right:2px dashed #ccc;z-index: 0
}
.month-detail-box:last-child:before{content: '';position:absolute;top:0;left:51.5px;height:50px;border-right:2px dashed #ccc;}