@charset "utf-8";
.year-list-arrow{padding-top:1em}
.yearList h2{letter-spacing:3px;font-family:'Lobster',cursive}
.yearList{margin:20px auto 0;min-height:2500px;font-size:16px;padding:0}
.yearList li{list-style:none;text-align:center;position:relative;margin-bottom:2px}
.yearList li.year{display:none}
.yearList li strong{color:#fff;display:inline-block;padding:2px;margin-bottom:10px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;top:0;width:40px;height:40px;line-height:40px;text-align:center;border-radius:50%;box-shadow:0 0 0 4px white,inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.2)}
.yearList li:nth-child(1) strong,.yearList li:nth-child(5n+1) strong{background:#479f4d}
.yearList li:nth-child(2) strong,.yearList li:nth-child(5n+2) strong{background:#2a6fc5}
.yearList li:nth-child(3) strong,.yearList li:nth-child(5n+3) strong{background:#cd3d13}
.yearList li:nth-child(4) strong,.yearList li:nth-child(5n+4) strong{background:#5e5c5d}
.yearList li:nth-child(5) strong,.yearList li:nth-child(5n+5) strong{background:#6a34b0}
.yearList .fas{font-size:1.4rem}
.yearList li .yearPoint{text-align:center;background:#b6b6b6;width:8px;height:8px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;margin:5px auto 10px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;text-indent:-9999px}
.yearList li .vline{width:1px;background:#b6b6b6;min-height:40px;margin:5px auto}
.yearList li .vline_2{min-height:100px}
.yearList li .vline_3{min-height:25px}
.yearList li .vline.long{height:230px}
.yearList li .vline.mid{height:60px}
.yearList li .vline.mid2{height:100px}
.yearList li .vline.mid3{height:140px}
.yearList li .float{position:absolute;background-color: #ffffff;
    border: 2px solid #ffd485;top:0;padding:20px;width:40%;max-width:460px;text-align:left;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-transition:top .2s ease-in-out,background-color .2s ease-in-out;-webkit-transition:top .2s ease-in-out,background-color .2s ease-in-out;-o-transition:top .2s ease-in-out,background-color .2s ease-in-out;transition:top .2s ease-in-out,background-color .2s ease-in-out}
.yearList li .arrowRight{width:10px;height:56px;position:absolute;top:10px;left:-10px;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.yearList li .arrowLeft{width:10px;height:56px;position:absolute;top:20px;right:-10px;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.yearList li .arrowRight{width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #ffd485 transparent transparent}
.yearList li .arrowLeft{width:0;height:0;border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ffd485}
.yearList li .float.left{right:0}
.yearList li .float.right{left:0}
.yearList li .float ul{margin-bottom:-6px;padding:0}
.yearList li .float ul li{margin:0;min-height:20px;text-align:left;line-height:1.5em;word-wrap:break-word;word-break:normal}
.yearList li .float ul li+li{margin-top:10px;padding-top:10px;border-top:1px solid #fff}
.yearList .float span{display:block;font-weight:700;margin-left: 1em;}
.yearList .float span:before{content:'\f138';color:#ad7c19;margin:0 8px 0 -25px;float:left;font-family:Font Awesome\ 5 Free;font-weight:900}
.yearList .Right_pic{float:right;margin:0 0 20px 30px;width:40%}
.yearList .Left_pic{float:left;margin:0 0 20px 20px;width:40%}
.yearList .pic{  padding-top: 10px;  text-align: center;}
.yearList li:hover strong{font-size:18px;background:#ce3f46!important;
    -webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.yearList li:hover .float{border: 2px solid #65ab65;top:20px;-moz-transition:top .2s ease-in-out,background-color .2s ease-in-out;-webkit-transition:top .2s ease-in-out,background-color .2s ease-in-out;-o-transition:top .2s ease-in-out,background-color .2s ease-in-out;transition:top .2s ease-in-out,background-color .2s ease-in-out}
.yearList li:hover .float span:before {  color: #318038;}
.yearList li:hover .arrowLeft{border-color:transparent transparent transparent #65ab65}
.yearList li:hover .arrowRight{border-color:transparent #65ab65 transparent transparent}
.yearList li:hover .arrowRight,.yearList li:hover .arrowLeft{top:20px;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.yearList li .float img{max-width: 100%;margin:0 auto;display:block;border:3px solid #fff}

@media screen and (max-width:767px) {
.yearList li { margin-bottom: 1em;}
.yearList li .float ul li{text-align:center}
.yearList .float span {text-align: left;}
.yearList li .float{position:inherit;width:90%;margin-left:5%}
.yearList li .yearPoint{text-align:left;background:#b6b6b6;width:8px;height:8px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;margin:5px auto 10px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;text-indent:-9999px}
.yearList li .vline{width:1px;background:#b6b6b6;min-height:10px;margin:auto}
.yearList .Left_pic,.yearList .Right_pic{float:none;margin:0 0 20px 15px;width:100%}
.yearList li .arrowLeft,.yearList li .arrowRight{display:none}
}