/*white-space：它的属性用来设置如何处理元素内的空白。
默认值为，nornmal，空白会被浏览器给忽略。
pre，空白会被浏览器保留，同<pre>标签的作用类似。
nowrap，文本不会换行，在同一行上继续显示，直到遇到换行符。
pre-wrap，保留空白，但是 正常地进行换行。*/

/*overflow-x，用来设置，如果元素中内容的左右边缘，溢出元素的内容区域的话怎么办？
auto：如果溢出框，则应该提供滚动机制。
hidden：    裁剪内容 - 不提供滚动机制。
scroll：裁剪内容 - 提供滚动机制。*/
.timeline {
    white-space: nowrap;
    overflow-x: hidden;
}
.timeline ol {
    font-size: 0;
    /*padding: 300px 0;*/
    padding: 330px 0;
    width: 100vw;
    transition: all 1s;
}
.timeline ol li {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 1px;
    list-style-type: none;
    background-color: #707070;
}
.timeline ol li:last-child {
    width: 280px;
}
.timeline ol li:not(:first-child) {
    margin-left: 20px;
}
.timeline ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #707070;
}
.timeline ol li>div {
    position: absolute;
    left: calc(107%);
    /*width: 330px;*/
    width: 400px;
    /*padding: 15px;*/
    font-size: 1rem;
    white-space: normal;
    color: #333;
    /*background-color: #fff;*/
}
.timeline ol li>div span{
    line-height: 24px;
    font-weight: bold;
    letter-spacing: 0px;
    color: #22878C;
}
.timeline ol li>div .image-box{
    background:#fff;
    padding:1rem;
    border-radius: 20px;
}
/*.timeline ol li>div::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
}*/
.timeline ol li:nth-child(odd)>div {
    top: -16px;
    transform: translateY(-100%);
}

.timeline ol li:nth-child(odd)>div .image-box{
    margin-bottom: 1rem;
}
/*.timeline ol li:nth-child(odd)>div::before {
    top: 100%;
    border-width: 8px 8px 0 0 ;
    border-color: #fff transparent transparent transparent;
}*/
.timeline ol li:nth-child(even)>div {
    top: 16px;
}
.timeline ol li:nth-child(even)>div .image-box{
    margin-top: 1rem;
}
/*.timeline ol li:nth-child(even)>div::before {
    top: -8px;
    border-width: 0 8px 8px 0;
    border-color: transparent transparent #fff transparent;
}*/
.timeline div.arrows {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.timeline div.arrows button {
    border: none;
    background-color: #F45B69;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}
.timeline div.arrows button.arrow-pre {
    margin-right: 20px;
}
.timeline div.arrows button.disabled {
    opacity: 0.5;
}
@media screen and (max-width: 768px) {
    .timeline ol {
        width: auto;
        padding: 0;
        transform: none !important;
    }
    .timeline ol li {
        width: auto;
        height: auto;
        display: block;
        background-color: transparent;
    }
    .timeline ol li:first-child {
        margin-top: 20px;
    }
    .timeline ol li:not(:first-child) {
        margin-left: auto;
    }
    .timeline ol li>div {
        width: 94%;
        height: auto !important;
        margin: 0 auto 25px;
        position: static;
    }
    .timeline ol li:nth-child(odd)>div {
        transform: none;
    }
    .timeline ol li:nth-child(odd)>div::before,
    .timeline ol li:nth-child(even)>div::before,
    .timeline ol li:not(:last-child)::after {
        display: none;
    }
    .timeline div.arrows {
        display: none;
    }
}