#about-us{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;margin-bottom:120px}
#about-us .left-tab{width:calc(55% - 20px);margin-right:20px}
#about-us .right-content-img{width:calc(45% - 20px);margin-left:20px}
#about-us .tabs{list-style:none;overflow:hidden;padding-left:0;margin:0;border-bottom:1px solid var(--primary-color)}
#about-us .tabs li{float:left;width:33.3%;cursor:pointer;padding:20px;border-bottom:2px solid transparent;text-align:center;font-size:var(--font-big)}
#about-us .tabs li.active{font-weight:bold;border-bottom:5px solid var(--primary-color);color:var(--primary-color)}

.tab-contents div.editor-content{display:none;padding-top:30px}
.tab-contents div.editor-content p{line-height:2 !important;font-size:var(--font-large) !important;letter-spacing:1.2px !important;}
.tab-contents div.editor-content::-webkit-scrollbar{width:8px}
.tab-contents div.editor-content::-webkit-scrollbar-thumb {
  background-color: #98abc9;
  border-radius: 4px;
}

.tab-contents div.editor-content::-webkit-scrollbar-track {
  background-color: #e2e8f0;
}

.tab-contents div.editor-content.active{display:block}
.tab-contents div.editor-content::first-letter {
  font-size: 30px;
  color: #333;
}

.right-content-img img {
  display: none;
  max-width: 100%;
}

.right-content-img img.active{display:block}

#about-manager-content{padding-top:10px}
#about-manager-content span#manager-name{font-size:30px}
#about-manager-content p{margin:0 0 !important}

#company-history{margin-bottom:250px}
.history-timeline{position:relative}
.history {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-bottom: 20px;
}

.node {
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.node .dot {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 4px 8px #A9A9A9;
  z-index: 1;
}

.history-content {
  padding-left: 20px;
  flex: 1;
}

.history h4 {
  font-size: 35px;
  color: #333;
  margin: 0;
  width: 100px;
  text-align: center;
}

.history-events {
  font-size: 24px;
  width: calc(100% - 120px);
}
.history-events > p{margin:0 !important}

.history:after{
  position: absolute;
  left: 117px;
  top: 0;
  height: 100%;
  content: "";
  display: block;
  width: 10px;
  flex-grow: 1;
  margin-top: 2px;
  z-index: 0;
}

.history.last-history{padding-bottom:50px}
/* 時間線底部補上一顆圓點 */
.history.last-history .node::before {
  content: "";
  position: absolute;
  top: 98%;
  left: 121px;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-color: #9C27B0;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


@media screen and (max-width: 991px) {
  .tab-contents div.editor-content{max-height:300px;overflow:auto}
  .history h4 {font-size: 28px}
  .history-events {font-size: 20px}
}

@media screen and (max-width: 900px) {
  .history:after,
  .history:not(.last-history)::after{left:116px !important}
}

@media screen and (max-width: 800px) {
  #about-us .right-content-img{width:100%;margin:0 0 20px;order:1}
  #about-us .left-tab{width:100%;margin-right:0;order:2}
  .tab-contents div.editor-content{max-height:400px}
}

@media screen and (max-width: 615px) {
  .history:after{display:none !important}
  .history h4{width:100%;border-bottom:2px solid #e1e1e1;text-align:left;padding-bottom:5px}
  .history .node{display:none}
  .history{display:block;margin:20px 0}
}

@media screen and (max-width: 500px) {
  #about-us .tabs li{padding:10px;font-size:var(--font-base)}
}