@charset "utf-8";
.year-list-arrow{padding-top:1em}
.yearList h2{letter-spacing:3px;color: #6f4a24;font-family:'Lobster',cursive;}
.yearList{margin:20px auto 0;min-height:1300px;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 .title{font-size: 22px;font-weight: 700;color: #694828;margin: 0 0 10px;text-align: center;}
.yearList li p{margin: 0;color: #926c47;}
.yearList li>.float ul {padding-left: 25px;margin-top: 15px;}
.yearList li>.float ul>li{list-style: disc;text-align: left;margin-top:10px;color: #a27a52;}
.yearList li strong{color:rgba(255 255 255 / 0.8);display:inline-block;background:#ab8966;padding: 6px;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: 22px;height: 22px;text-align:center;border-radius:50%;border: 3px solid #fff;box-shadow: 0 2px 5px #b5a08b;}
.yearList li .yearPoint{text-align:center;background:#cab197;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: #cab197;*/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:url(../../images/about/historyBg.png);
    border: 1px solid #a07c5c;
    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 .floatTxt{background: rgba(255 255 255 / 80%);padding: 1rem;}
.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 #a07c5c transparent transparent;}
.yearList li .arrowLeft{width:0;height:0;border-style:solid;border-width:10px 0 10px 10px;border-color: transparent transparent transparent #a07c5c;}
.yearList li .float.left{right:0}
.yearList li .float.right{left:0}
.yearList .float span{display:block;font-weight:700;margin-left: 1em;}
.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: #98744f!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 #98744f;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: #98744f;}
.yearList li:hover .arrowLeft{border-color:transparent transparent transparent #98744f}
.yearList li:hover .arrowRight{border-color: transparent #98744f 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 .float span {text-align: left;}
.yearList li .float{position:inherit;width: 100%;max-width: 100%;}
.yearList li .yearPoint{text-align:left;background:#cab197;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{display: none;}
.yearList .Left_pic,.yearList .Right_pic{float:none;margin:0 0 20px 15px;width:100%}
.yearList li .arrowLeft,.yearList li .arrowRight{display:none}
}