.time_line {

    margin: 0 auto;

    /* 居中对齐 */

    overflow-x: auto;

    /* 允许横向滚动 */

    cursor: grab;

    /* 鼠标样式为抓取 */



    scrollbar-width: none;

    /* 隐藏标准滚动条（仅适用于较新的浏览器）*/

    -ms-overflow-style: none;

    /* 隐藏IE/Edge的滚动条 */

}





.time_line::-webkit-scrollbar {

    display: none;

    /* 隐藏WebKit浏览器中的滚动条 */

}











.time_line .swiper-wrapper {

    display: inline-flex;

    /* 使用 inline-flex 使内容横向排列 */

    width: max-content;

    /* 确保内容宽度适应子元素 */

}







.time_line img {

    max-width: 80%;

    /* 确保图片不会超出容器宽度 */

    height: auto;

}



.time_line::after {

    height: 1px;

    width: 100%;

;

    display: block;

    background: #ddd;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.time_line .swiper-slide {

    float: left;

    width:500px;

    position: relative;

    margin-top: 350px;

    padding-bottom: 0;

    padding-left: 0;

    z-index: 2;

    margin-right: 0;

    height: 350px

}

@media (max-width: 768px) {

    .time_line .swiper-slide{

        width: 100vw;

        margin-top: 0!important;

    }

    .time_line ul li dl dd{

        text-align: left;

    }

    .time_line ul li .description {

        display:block!important;



        opacity: 1!important;

    }



    .time_line .swiper-wrapper{

        display: grid;

        margin-top: 15px;

    }

    .time_line .swiper-slide:nth-child(2n) {

        border-bottom: none;

        height: 400px!important;

    }



    .time_line .swiper-slide:nth-child(2n) .layui-timeline-title{

        bottom:unset!important;

        position: relative!important;

    }

    .layui-timeline-item:first-child:before{

        display: none;

    }

    .layui-timeline-content{

        padding-left:0!important;

    }

    .time_line ul li dl dt{

        margin: 20px;

        padding: 0!important;

    }



    .swiper-slide:nth-child(2n) ul li:after{

        top:0!important;

    }

}



.time_line .swiper-slide:nth-child(2n) {

    border-bottom: 1px solid #ddd;

    height: 0

}



.time_line .swiper-slide:nth-child(2n) .layui-timeline-title {



    bottom: 0 ;

    position: absolute;



}



.time_line .swiper-slide:nth-child(2n+1) {

    border-top: 1px solid #ddd

}



.time_line .swiper-slide:nth-child(2n) .layui-timeline {

    position: absolute;

    left: 0;

    bottom: 10px;

    width: 100%;

    text-align: center;

    transition:  all .2s ease-in-out;

}







.time_line .swiper-slide .layui-timeline {

    position: relative

}



.time_line .swiper-slide .layui-timeline .layui-timeline-item:before {

    left: 6px

}



.time_line ul li dl dt {

    font-size: 2em;

    font-weight: 600;

    color: #005295;

    position: relative;

    margin-bottom: 0;

    padding-top: 10px;

    display: inline-flex;

}







.time_line ul li:after {

    content: '';

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 100%;

    background: #005295;

    position: absolute;

    left: -2px;

    top: -9px;

    border: 4px solid #ccdcea;

    animation: pulse 1.5s infinite ease-in-out;

}



@keyframes pulse {



    0%,

    100% {

        transform: scale(1);

        opacity: 1;

    }



    50% {

        transform: scale(1.5);

        opacity: 0.5;

    }

}



.swiper-slide:nth-child(2n) ul li:after {

    top: 100%;

    margin-top: 2px;

}





.swiper-slide:nth-child(2n) ul:after {

    top: 0;

}







.time_line ul li dl dd {

    color: #606060;

    font-size: 1em;

    line-height: 1.8;

    position: relative;

    overflow: hidden;

    text-align: left;

}



.time_line ul li dl dd img {

    max-width: 100%;

    max-height: 230px;

    margin-top: 5px

}



.time_line .swiper-button-prev:after {

    display: none;

}



.time_line .swiper-button-next:after {

    display: none;

}





.layui-timeline-title{

    text-align: left;

}

.time_line .swiper-slide .layui-timeline {

    position: relative;

}



.layui-timeline {

    padding-left: 5px;

}

.time_line ul li {

    transition: height 0.3s ease-in-out;

    text-align: center;



}

.layui-timeline-item {

    position: relative;

    padding-bottom: 25px;

}



.layui-timeline-content {

    padding-left: 25px;

}

.layui-text {

    line-height: 22px;

    font-size: 14px;

    color: #666;

}



/* 鼠标悬停时显示 description 元素 */



.time_line ul li:after {

    content: '';

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    animation: pulse 1.5s infinite ease-in-out;

    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;

}



.time_line ul li .description {

    display: none;

    font-size:1em;

    opacity: 0;

    text-align: left;

    /*justify-content: center;*/



}



.time_line ul li:hover .description  {

    display: flex;

    opacity: 1;

    animation: fadeIn 0.5s ease-in-out;

}









@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}