.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:1.25rem;color:#000;margin-bottom:10px;font-weight:600}
.historyMainArea > .wrap{width:1200px;padding-left:20px;padding-right:20px}
.historyContentBox{padding-bottom:40px}
.historyContentBox > h2{font-size:1.5625rem;margin-bottom:0px;font-weight:600}
.historyContentBox .yearLine{padding-right:40px;position:relative;display:flex;align-items:baseline;font-weight:600}
.yearLine span{color:#e3e3e3;font-size:1.0625rem;font-weight:400;line-height:1;letter-spacing:1px;display:none}
.yearLine time{font:inherit;line-height:1.1;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.historyList{position:relative;max-width:100%;margin-left:auto;margin-right:auto;padding-top:40px}
.historyList::before{content:'';position:absolute;top:0;left:70px;width:1px;height:100%;background:linear-gradient(to bottom,#e5e5e5 0,#e5e5e5 100%) 0 0 no-repeat}
.historyContentBox ul li.show{display:flex;margin:0 0 30px 0;align-items:center;position:relative;overflow:hidden;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
.historyContentBox ul li.show::after{content:"";position:absolute;top:-10px;left:70px;width:1px;height:calc(100% + 10px * 2);background-color:#e5e5e5}
.historyContentBox ul .show::before{content:"";position:absolute;top:0;left:1%;width:100vw;height:100%;background-color:#f5f5f5;-webkit-transform:translateX(0%);transform:translateX(0%);z-index:-1}
.historyContentBox ul li .tit{color:#898f97;text-align:center;position:relative;display:flex;align-items:center;justify-content:space-between;width:110px;z-index:10}
.historyContentBox ul li .tit::before{content:"";position:absolute;top:calc(50% - 7px);z-index:3;width:14px;height:14px;border-radius:50%;border:1px solid var(--primary);right:24px}
.historyContentBox ul li .tit::after{content:"";position:absolute;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background-color:var(--primary);-webkit-box-shadow:0 0 0 10px #f5f5f5;box-shadow:0 0 0 10px #f5f5f5;right:29px}
.historyItemList{padding-top:0px;padding-bottom:0px;padding-left:20px;padding-right:20px;width:calc(100% - 0px)}
.historyContentBox .historyItemList li{padding:40px 0;position:relative;color:#333}
.historyItemList li + li{margin-top:10px}
.historyItemList li .textEditor.clearfix{overflow:hidden;color:#535353;position:relative;font-weight:600;display:flex;flex-direction:column}
.historyItemList li .textEditor.clearfix h3{font-size:1.375rem;font-weight:600;padding:0px 0 0px;color:var(--primary)}
.historyItemList li .textEditor.clearfix p{padding:10px 0;margin:0;line-height:160%;display:inline-block;font-size:1rem;font-weight:400}
.historyItemList li .textEditor.clearfix .leftBox{overflow:hidden;float:left;width:57%}
.historyItemList li .textEditor.clearfix .leftBox h3{font-size:1.375rem;padding-bottom:10px;color:#000}
.historyItemList li .textEditor.clearfix .leftBox article{color:#4b4b4b;font-weight:500;font-size:0.9375rem;}
.historyItemList li .textEditor.clearfix .rightBox{overflow:hidden;float:right;width:40%}
.historyItemList .textEditor{font-size:1.125rem}
.historyQuickLinkBox{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-bottom:75px}
.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:1rem;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:1240px) {
  .historyMainArea > .wrap { width: 100%; }
}

@media (max-width:1280px) {
  .historyContentBox { padding-left: 0px; }
  .historyContentBox ul li .tit { width: 175px; }
}

@media (max-width:1180px) {
  .historyQuickLinkBox { display: none; }
}

@media (max-width:1024px) {
  .historyList::before,.historyContentBox ul li.show::after { left: 115px; }
}

@media (max-width:960px) {
  .historyList::before,.historyContentBox ul li.show::after { left: 114px; }
}

@media (max-width:768px) {
  .historyList::before,.historyContentBox ul li.show::after { left: 48px; }
  .historyContentBox ul li .tit::before { right: 17px; }
  .historyContentBox ul li .tit::after { right: 22px; }
  .historyContentBox ul li .tit { width: 80px; }
  .historyContentBox .historyItemList li { padding: 20px 0; }
  .historyContentBox ul .show::before { left: 0%; }
}

@media (max-width:767px) {
  .historyList { padding-top: 30px; margin-top: 20px }
  .yearLine { font-size: 1.0625rem }
  .monthRound { left: -18px; box-shadow: 0 0 0 3px #dddddd,0 0 0 9px #fff }
  .historyItemList { width: calc(100% - 30px); padding-left: 0 }
  .historyItemList li .textEditor.clearfix .leftBox,.historyItemList li .textEditor.clearfix .rightBox { float: none; width: 100% }
  .historyItemList li + li { margin-top: 12px }
  .historyItemList .textEditor { padding-top: 0px; font-size: 0.875rem }
  .historyItemList li .textEditor.clearfix p { font-size: 0.9375rem }
  .historyContentBox .yearLine { font-size: 1.4375rem }
}
@media (max-width:425px) {
  .historyContentBox ul li .tit { width: 60px }
  .historyContentBox ul li .tit::before { right: 21px }
  .historyContentBox ul li .tit::after { right: 26px }
  .historyItemList li .textEditor.clearfix h3 { font-size: 1.125rem }
  .historyItemList { width: calc(100% - 0px); padding-right: 10px }
  .historyList::before,.historyContentBox ul li.show::after { left: 24px }
}