section {
    padding: 100px 0;
}

.timeline {
    position: relative;
}

.chat-box{

}

.timeline-item {
    width: 100%;
    /* display: flex; */
    margin-bottom: 70px;
}

.timeline-item:nth-child(even) .timeline-content {
    float: right;
    /*padding: 40px 30px 10px 30px;*/
}

.timeline-item:nth-child(even) .timeline-content .date {
    right: auto;
    left: 0;
}


.timeline-item:nth-child(even) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 15px;
    right: -15px;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #D6D5B7;
}

.timeline-item::after {
    content: "";
    display: block;
    clear: both;
}

.timeline-content {
    position: relative;
    width: 45%;
    padding: 10px 30px;
    border-radius: 4px;
    /*background: #E6CEAC;*/
    background: #D6D5B7;
    margin: 0 100px;
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}

.timeline-content .timeline-date{
    font-size: 18px;
    color: #335c67;
    margin-bottom: 5px;
    font-family: "宋体",sans-serif,"Arial","Microsoft YaHei","黑体";
}

.timeline-content p{
    font-size:  16px;
    font-weight:  bold;
    font-family:  "宋体",sans-serif,"Arial","Microsoft YaHei","黑体";
    color: black;
}


/*.timeline-content::after {*/
.timeline-item:nth-child(odd) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 15px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #D6D5B7 transparent transparent;
}

.timeline-img {
    width: 55px;
    height: 55px;
    background-image: url("https://i.imgtg.com/2022/07/03/NSSRb.png");
    background-repeat: no-repeat;
    background-size: cover;

}

.timeline-item:nth-child(odd)  .timeline-img {
    position: absolute;
    left: 1rem;
}

.timeline-item:nth-child(even)  .timeline-img {
    position: absolute;
    right: 1rem;
}

@media screen and (max-width: 768px) {
    .timeline::before {
        left: 50px;
    }

    .timeline .timeline-img {
        left: 50px;
    }

    .timeline .timeline-content {
        max-width: 100%;
        width: auto;
        margin-left: 70px;
    }

    .timeline .timeline-item:nth-child(even) .timeline-content {
        float: none;
    }

    .timeline .timeline-item:nth-child(odd) .timeline-content::after {
        content: "";
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 15px;
        left: -15px;
        border-width: 10px 15px 10px 0;
        border-color: transparent #D6D5B7 transparent transparent;
    }
}