.historyContentBox .TTTxt { width: 100%; padding: 10px 30px; border-left: 4px solid #e7e7e7; padding-left: 40px; margin: 40px 0 0 0 }
.historyContentBox .TTTxt p { font-size: 1.25rem; color: #000; margin-bottom: 10px; font-weight: 600; line-height: 1.4 }
.historyMainArea > .wrap { width: 1200px; padding-left: 20px; padding-right: 20px }
.historyContentBox { padding-bottom: 40px }
.historyContentBox > h2 { font-size: 1.5625rem; margin-bottom: 0; font-weight: 600; line-height: 1.3 }
.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: 0; padding-bottom: 0; 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: 0; color: var(--primary); line-height: 1.3 }
.historyItemList li .textEditor.clearfix p { padding: 10px 0; margin: 0; line-height: 1.6; 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; line-height: 1.3 }
.historyItemList li .textEditor.clearfix .leftBox article { color: #4b4b4b; font-weight: 500; font-size: 0.9375rem; line-height: 1.6 }
.historyItemList li .textEditor.clearfix .rightBox { overflow: hidden; float: right; width: 40% }
.historyItemList .textEditor { font-size: 1.125rem }
.historyQuickLinkBox { display: flex; justify-content: center; margin-bottom: 75px }
.historyLinkItem { display: flex; 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: #444; overflow: hidden; text-decoration: underline; text-underline-offset: 3px }
.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 }
.historyLinkItem a:focus-visible { outline: 3px solid #1b6fff; outline-offset: 3px }
.historyLinkItem a:hover { text-decoration-thickness: 2px }

@media (max-width:1240px) {
  .historyMainArea > .wrap { width: 100% }
}
@media (max-width:1280px) {
  .historyContentBox { padding-left: 0 }
  .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: 0; 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 }
}