.historyContentBox .TTTxt{
  width: 100%;
  padding: 10px 30px;
  border-left: 4px solid #e7e7e7;
  padding-left: 40px;
  margin: 40px 0 0px 0;
}
.historyContentBox .TTTxt p{

font-size: 20px;
  color: #000;
  margin-bottom: 10px;
  font-weight: 600;}

.historyMainArea > .wrap {
width: 1200px;
padding-left: 20px;
padding-right: 20px;
}

@media (max-width: 1240px) {
.historyMainArea > .wrap {
  width: 100%;
}
}

.historyContentBox {
padding-bottom: 40px;
background-color: #fff;
}
.historyContentBox .ListTT{
  
font-size: 25px;
  
margin-bottom: 10px;
  
font-weight: 600;
  
color: #829ab2;
}
.historyContentBox .yearLine{
  color: #e3e3e3;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-end;
}

@media (max-width: 1240px) {
.historyContentBox {
  padding-left: 0px;
}
}

.historyList {
position: relative;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 45px;
margin-top: 30px;
}

@media (max-width: 767px) {
.historyList {
  padding-top: 0px;
  margin-top: 40px;
}
}

.historyList::before {
content: '';
position: absolute;
top: 0;
left: 100px;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, #dddddd 0, #dddddd 100%) 0 0 no-repeat;
}

@media (max-width: 767px) {
.historyList::before {
  left: 66px;
}
}
.historyContentBox ul li.show{
  display: flex;
  margin: 0 0 40px 0;
  align-items: flex-start;
}
.historyContentBox ul li .tit{color: #898f97;text-align: center;position: relative;display: flex;align-items: center;justify-content: space-between;width: 80px;}
.historyContentBox ul li .tit h3 i{color: #d5d5d5;text-align: center;font-size: 34px;margin: 10px;}

.yearLine {
position: relative;
display: flex;
text-align: center;
font-size: 25px;
align-items: baseline;
font-weight: 600;
color: #535353;
}
.yearLine span {
  color: #e3e3e3;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 1px;
  display: inline-block;
  text-align: center;
}
@media (max-width: 767px) {
.yearLine {
  font-size: 17px;
}
.historyContentBox ul li .tit{
  width: 50px;
}
.yearLine span{font-size: 30px;}
}

.historyContentBox ul li .tit::before, .historyContentBox ul li .tit::after {
content: '';
background-color: #cccccc;
}

.yearLine::before {
position: absolute;
top: 50%;
left: 136px;
width: 9px;
height: 9px;
margin-top: -4.5px;
display: none;
}

@media (max-width: 767px) {
.yearLine::before {
  left: 21.5px;
}
}

.historyContentBox ul li .tit::after {
/* width: calc(100% - 160px); */
height: 1px;
}

@media (max-width: 767px) {
.yearLine::after {
  display: none;
}
}

.monthRound {
position: absolute;
top: 15px;
left: -37px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 0px;
height: 0px;
font-size: 15px;
font-family: Arial, Helvetica, "Noto Sans TC", sans-serif;
font-weight: bold;
color: #494949;
background-color: #ffffff;
border-radius: 5%;
border: 1px solid #dddddd;
box-shadow: 0 0 0 4px #dddddd, 0 0 0 9px #fff;
}

@media (max-width: 767px) {
.monthRound {
  left: -18px;
  box-shadow: 0 0 0 3px #dddddd, 0 0 0 9px #fff;
}
}



.monthRound::after {
content: '.';
display: none;
}

.historyItemList {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 60px;
width: calc(100% - 80px);
}

@media (max-width: 767px) {
.historyItemList {
  /* margin-top: 20px; */
  /* padding-left: 62px; */
  /* padding-bottom: 30px; */
  padding-left: 40px;
  width: calc(100% - 40px);
}
}

.historyItemList li {
position: relative;
}
.historyItemList li{
    color: #333;
    position: relative;
    display: flex;
}

.historyItemList li + li {
margin-top: 10px;
}
.historyItemList li .Img{
  width: 270px;
  display: none;
}
.historyItemList li .textEditor.clearfix {
  overflow: hidden;
  color: #535353;
  position: relative;
  font-weight: 600;
  width: 90%;
  margin-left: 2%;
}
.historyItemList li .textEditor.clearfix p{
  padding: 10px 14px;
  border: 2px solid #dfdfdf;
  line-height: 160%;
  display: inline-block;
  background-color: #f5f5f5;
  font-size: 15px;
}
.historyItemList li .textEditor.clearfix .leftBox {
  overflow: hidden;
  float: left;
  width: 57%;
}
.historyItemList li .textEditor.clearfix .leftBox h2{
  font-size: 22px;
  padding-bottom: 10px;
  color: #000;
}
.historyItemList li .textEditor.clearfix .leftBox article{
  color: #4b4b4b;
  font-weight: 500;
  font-size: 15px;
}
.historyItemList li .textEditor.clearfix .rightBox  {
  overflow: hidden;
  float: right;
  width: 40%;
}
@media (max-width: 767px) {
.historyItemList li .textEditor.clearfix .leftBox,.historyItemList li .textEditor.clearfix .rightBox {
  overflow: hidden;
  float: none;
  width: 100%;
}  .historyItemList li + li {
  margin-top: 12px;
}
}

.historyItemList .textEditor {
font-size: 18px;
}

@media (max-width: 767px) {
.historyItemList .textEditor {
  padding-top: 0px;
  font-size: 14px;
}
}

.historyQuickLinkBox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
    -ms-flex-pack: center;
        justify-content: center;
margin-bottom: 75px;
}

@media (max-width: 1180px) {
.historyQuickLinkBox {
  display: none;
}
}

.historyLinkItem {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
    -ms-flex-align: center;
        align-items: center;
padding: 5px 20px;
border-radius: 30px;
border: 1px solid #1884c4;
}

.historyLinkItem::before {
content: 'ÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã¢â‚¬Â ÃƒÂ¢Ã¢â€šÂ¬Ã¢â€žÂ¢ÃƒÆ’Ã†â€™ÃƒÂ¢Ã¢â€šÂ¬Ã…Â¡ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â¥ÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬Ãƒâ€¦Ã‚Â¡ÃƒÆ’Ã†â€™ÃƒÂ¢Ã¢â€šÂ¬Ã…Â¡ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â¹ÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬Ãƒâ€¦Ã‚Â¡ÃƒÆ’Ã†â€™ÃƒÂ¢Ã¢â€šÂ¬Ã…Â¡ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â´ÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã¢â‚¬Â ÃƒÂ¢Ã¢â€šÂ¬Ã¢â€žÂ¢ÃƒÆ’Ã†â€™ÃƒÂ¢Ã¢â€šÂ¬Ã…Â¡ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â¥ÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬Ãƒâ€¦Ã‚Â¡ÃƒÆ’Ã†â€™ÃƒÂ¢Ã¢â€šÂ¬Ã…Â¡ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚ÂºÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬Ãƒâ€¦Ã‚Â¡ÃƒÆ’Ã†â€™ÃƒÂ¢Ã¢â€šÂ¬Ã…Â¡ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â¦';
margin-right: 20px;
font-size: 16px;
color: #373737;
}

.historyLinkItem a {
position: relative;
z-index: 1;
padding: 10px 20px;
border-radius: 30px;
font-family: Arial, Helvetica, "Noto Sans TC", sans-serif;
color: #777;
overflow: hidden;
}

.historyLinkItem a + a {
margin-left: 10px;
}

.historyLinkItem a::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(to right, #2d77bc 0, #29bc9f 100%) 0 0 no-repeat;
opacity: 0;
}

@media (max-width: 960px) {
.historyItemList li .Img{
  width: auto;
}
.historyItemList li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.historyItemList li .textEditor.clearfix{
  margin-left: 2%;
  width: 100%;
}
}

