.timeline-container {
    box-sizing: border-box;
    position: relative;
    margin-right: 2em;
    margin-left: 2em;   
    /* height: fit-content; */
    margin-top: 100px;
    margin-bottom: 400px;
}

.timeline-container .school {
    /* align center */
    margin-left: auto;
    margin-right: auto;

    font-size: 1.2rem;
    position: relative;
    padding: 1rem 1.5rem;
    background: #00ADB5;
    color: #fff;
    border: 3px solid #fff;
    /* text-shadow: 3px 3px 0px #24BFA3, 0px 0px 100px #24BFA3; */
    width: fit-content;
    /* 蓋住線 */
    z-index: 1;
    /* 寬一點 */
    letter-spacing: 2px;
}

.timeline-container .school::after {
    display: none;
}

.timeline-container h2 {
    font-size: 1rem;
    font-weight: bold;
    width: fit-content;
    position: relative;
    color: #24BFA3;
    z-index: 1;
}


/* 線 */
.timeline-container::after {
    content: "";
    position: absolute;
    left: -2em;
    right: 0;
    top: -3em;
    bottom: 3em;
    border-radius: 5em;
    width: 12px;
    background: #00ADB5;

    margin-top: 100px;
    /* margin-bottom: -400px; */

    /* align center */
    left: 50%;
}

/* 內容框框 */
.timeline-container .timeline-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 4em;

    max-width: 45%;
    position: unset;

}

.timeline-container .timeline-content.left {
    align-items: flex-end;
}

.timeline-container .timeline-content.right {
    margin-left: auto;
}



/* 日期框框 */
.timeline-container .timeline-content span {
    position: relative;
    padding: 0.5em 1em;
    z-index: 3;
    background: #dddddd22;
    color: #ddd;
    border: 3px solid #ddd;
    font-weight: bold;
}

/* 線圈圈 */
.timeline-container .timeline-content span::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    background: #00ADB5;
    z-index: 2;
    border-radius: 20px;
    left: calc(50% - 3px);
}

.timeline-container .timeline-content span {
    position: unset;
    margin-top: -1.3em;
}


.timeline-container .timeline-content article {
    width: 25vw;
    margin-top: 1.5em;
    background-color: #dddddd22;
    color: #ddd;
    margin-bottom: 2em;
    position: relative;
    border: 3px solid;
    transform-style: preserve-3d;

    padding: 1.5em 2em;
    position: absolute;

}

.timeline-container .timeline-content article p {
    text-align: justify;
    font-size: 0.8rem;
}

.timeline-container .timeline-content article img {
    width: 100%;
    height: auto;
}