.our-story-section * { box-sizing: border-box; }
.our-story-section {width: 100%;padding: 20px 0;font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;overflow: hidden;}
.story-container {width: 100%;margin: 0 auto;position: relative;}


.story-header {position: relative;margin-bottom: 10px;padding-left: 0;}
.en-title {font-family: Arial, sans-serif;font-weight: 300;font-size: 60px;color: #272828;letter-spacing: 0.08em;margin: 0;line-height: 1;}
.zh-title {font-size: 24px;font-weight: 900;color: #585858;letter-spacing: 0.12em;margin: 10px 0 0 5px;}


.story-footer {margin-top: 0px;border-top: 1px solid #eee;padding-top: 20px;}
.story-footer p { font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 30px; }

.txt-red { color: #b5453f; font-weight: 800; }
.txt-dark { color: #111; font-weight: 900; }
.en-award {display: block;font-family: Arial, sans-serif;font-size: 14px;font-weight: 400;color: #b5453f;margin-top: 2px;text-align: center;list-style: none;}
.award-list {list-style: none;padding: 0;margin: 10px 0 0;}
.award-list li {position: relative;margin-bottom: 15px;padding-left: 0;font-weight: 900;color: #b5453f;font-size: 15px;text-align: center;}
.award-list.with-dot li::before {content: '';position: absolute;left: 0;top: 8px;width: 6px;height: 6px;background: #b5453f;border-radius: 50%;opacity: 0;}


.timeline {position: relative;padding: 20px 0;min-height: 800px;display: flex;justify-content: space-between;align-items: center;}
.timeline-line {position: absolute;left: 0;top: 50%;width: 95%;height: 6px;background: linear-gradient(90deg, #a63b35 0%, #b5453f 100%);z-index: 1;transform: translateY(-50%);border-radius: 4px;transform: translateY(-50%) rotate(-6deg);}


.timeline-item { position: relative; width: 14%; z-index: 2; padding: 0 10px; }
.timeline-item .dot { width: 20px; height: 20px; background: #fff; border: 6px solid #b5453f; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #fff; }
.timeline-item .year { font-family: Arial, sans-serif; font-size: 50px; font-weight: 900; color: #b5453f; line-height: 1; margin-bottom: 10px; text-align: center; }
.timeline-item .year span { font-size: 24px; }
.timeline-item .content {font-size: 15px;line-height: 1.5;text-align: left;min-height: 120px;position: absolute;width: 150%;left: -25%;text-align: center;max-height: 210px;}
.timeline-item .content strong { font-weight: 900; }


.timeline-item.top {margin-top: 0;display: flex;flex-direction: column-reverse;padding-bottom: 120px;bottom: 0;margin-bottom: 179px;}
.timeline-item.top .dot { top: auto; bottom: 0; transform: translate(-50%, 50%); }
.timeline-item.top .year { margin-top: 10px; margin-bottom: 0; }
.timeline-item.top .content {padding-bottom: 60px;}

.timeline-item.bottom {padding-top: 120px;margin-top: 185px;}
.timeline-item.bottom .dot { top: 0; bottom: auto; transform: translate(-50%, -50%); }

.timeline-item:nth-child(2){margin-top: 308px;}
.timeline-item:nth-child(3){margin-bottom: 93px;}
.timeline-item:nth-child(4){margin-top: 225px;}

.timeline-item:nth-child(6){margin-top: 137px;}
.timeline-item:nth-child(7){margin-bottom: 274px;}

.timeline-item.wide-item {width: 18%;}
.timeline-item .content.center-align { text-align: center; }


.timeline-item.now-item {width: 15%;margin-top: 70px;padding-top: 10px;}
.now-badge { background: #b82f2f; color: #fff; font-size: 36px; font-weight: 900; text-align: center; padding: 15px 0; width: 100%; border-radius: 4px; margin-bottom: 20px; font-family: Arial, sans-serif; position: relative; }
.now-badge::before { content: ''; position: absolute; top: -53px; left: 50%; transform: translateX(-50%); width: 2px; height: 50px; background: rgba(181,69,63,.6); }


.timeline-item::before { content: ''; position: absolute; left: 50%; width: 2px; background: rgba(181,69,63,.6); transform: translateX(-50%); }
.timeline-item.bottom::before { top: 20px; height: 90px; }
.timeline-item.top::before { bottom: 20px; height: 90px; }
.timeline-item.now-item::before { display: none; }



@media screen and (max-width: 1470px){
    .timeline-line{
    transform: translateY(-50%) rotate(-8deg);
}
}


@media screen and (max-width: 1280px) {
.en-title { font-size: 42px; }
.timeline-item .year { font-size: 40px; }
.story-footer p { font-size: 16px; }
    .timeline-item .content ul{overflow-y:scroll;height: 150px;}
}

@media screen and (max-width: 1240px) {
.timeline {flex-direction: column;padding: 50px 0;align-items: flex-start;min-height: auto;}
.timeline-line { width: 6px; height: 100%; left: 30px; top: 0; transform: none; bottom: 0; background: linear-gradient(180deg, #a63b35 0%, #b5453f 100%); }
.timeline-item {width: 100%;margin: 0 0 40px 0 !important;padding: 0 0 0 70px !important;display: flex;flex-direction: column;}
.timeline-item.now-item{width:100%;}
    .timeline-item{margin: 0 0 25px 0 !important;}
.timeline-item .dot {left: 32px;top: 35px;transform: translateX(-50%);border-width: 4px;}
.timeline-item.bottom .dot{top: 20px;}
.timeline-item::before { display: none; }
.timeline-item.wide-item{width:100%;}
.timeline-item .year { text-align: left; font-size: 36px; display: inline-block; margin-right: 15px; margin-bottom: 5px; vertical-align: middle; }
.timeline-item .content {padding: 0;text-align: left !important;width: 100%;position: relative;max-height: unset;overflow-y: hidden;left: 0;}
.timeline-item.top { flex-direction: column; }
.timeline-item.top .dot {top: 20px;bottom: auto;transform: translateX(-50%);}
.now-badge { display: inline-block; width: auto; padding: 5px 20px; font-size: 24px; vertical-align: middle; margin-bottom: 10px; }
.now-badge::before { display: none; }
.award-list li , .en-award{text-align:left;}
    .timeline-item .content ul{height: auto;overflow-y: auto;}
.timeline-item.top .content {padding-bottom: 0px;}
    .timeline-item .content ul{}
}