*{box-sizing:border-box;margin:0;padding:0}:root{--axis-x:50px;--line-width:2px;--node-size:18px;--bg-color:#f5f5f5}body{background:#fff;font-family:system-ui,-apple-system,sans-serif;color:#333}.module-2{padding:20px 16px;max-width:480px;margin:0 auto}.cont-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:20px}.timeline-container{position:relative;-webkit-font-smoothing:antialiased}.timeline-container:before{content:"";position:absolute;top:0;bottom:0;left:var(--axis-x);width:var(--line-width);background-color:#000;margin-left:calc(var(--line-width)/-2);z-index:1}.timeline-item{position:relative;margin-bottom:40px;padding-left:calc(var(--axis-x) + 28px);cursor:pointer}.node{position:absolute;left:var(--axis-x);top:1px;width:var(--node-size);height:var(--node-size);background-color:var(--bg-color);border:1px solid #000;border-radius:50%;z-index:2;margin-left:calc(var(--node-size)/-2);transition:all .3s ease}.content-box{padding:20px;border-radius:20px;background:transparent;transition:all .4s cubic-bezier(.2,1,.3,1);width:85%;background-size:cover;background-position:50%}.content-box h2{margin:0 0 10px 0;font-size:20px;line-height:1.4;color:#333}.content-box .desc{margin:0;font-size:14px;color:#666;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;transition:all .35s ease;-webkit-line-clamp:2}.timeline-item.active .content-box .desc{-webkit-line-clamp:unset}.timeline-item.active .content-box{box-shadow:0 8px 20px rgba(0,0,0,.18);color:#fff}.timeline-item.active .content-box .desc,.timeline-item.active .content-box h2{color:#fff!important}.timeline-item.active .node{background-image:url(../images/dz.png);background-size:100% 100%;border:none;transform:scale(1.5)}@media (max-width:480px){:root{--axis-x:38px;--node-size:16px}.timeline-item{padding-left:calc(var(--axis-x) + 24px)}.content-box{width:88%}.content-box h2{font-size:18px}.content-box .desc{font-size:13.5px}}