.matter {
    /*display: flex;*/
    /*justify-content: center;*/
}

.stream-container {
    max-width: 800px;
    padding: 0 30px;
    position: relative;
    margin: 60px auto;
}

.stream-container::before {
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #E4B96B;
    width: 2px;
    z-index: -9;
}

.stream-container .stream {
    display: flex;
    overflow: hidden;
    margin-top: 80px;
}

.stream .space {
    padding: 0 50px;
}

.stream.reverse {
    flex-direction: row-reverse;
}

.stream .stream-image, .stream .stream-text {
    overflow: hidden;
    flex: 1;
}
.stream .stream-image {
    overflow: hidden;
    text-align: right;
    padding: 0 1% 0 0;
}

.stream.reverse .stream-image{
    text-align: left;
    padding: 0 0 0 1%;
}

.stream.node {
    justify-content: center;
}

.stream.node .year{
    width: 123px;
    height: 123px;
    background-color: #E3B464;
    border-radius: 50%;
    font-size: 25px;
    color: #FBEBC6;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------手机端-------------------------- */
@media all and (max-width: 1000px) {

}
@media all and (max-width: 640px) {
    @keyframes slideInLeft {
        0% {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            visibility: visible;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .stream .stream-image {
        display: none;
    }
    .stream.reverse {
        flex-direction: row;
    }
    .stream-container::before {
        left: calc(123px / 2 + 30px);
        transform: translateX(0%);
    }
    .stream.node {
        justify-content: left;
    }
    .stream .stream-text {
        width: 70%;
    }
}