.tree-str .border{
    border-right: var(--site-color) dashed 2px;
}
.tree-str .dot::before{
    content: " ";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--site-color);
    left: -32px;
    top: calc(50% - 8px);
}
.tree-str .left .dot::before{
    left: auto;
    right: -46px;
}
.tree-str .dot::after{
    content: " ";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--site-lite-color);
    left: -40px;
    top: calc(50% - 16px);
    animation: blink 1s infinite;
}
.tree-str .left .dot::after{
    left: auto;
    right: -54px;
}
.tree-str .left .dot{
    text-align: right;
    
}
 .tree-str .grid-sec .d2{
    padding-left: 20px;
}
.tree-str .d1, .tree-str .d3{
    background-color: azure;
    padding: 30px;
    transform: translateX(-30px);
    box-shadow: 2px 3px 12px #aaa;
}
.tree-str .d2{
    background-color: #fff0ff;
    padding: 30px;
    box-shadow: 2px 3px 12px #aaa;
}
.tree-str .d3{
    background-color: #f5fff0;
}
@media screen and (max-width: 768px){
    .tree-str .border{
        border: none;
    }
    .tree-str .dot::before, .tree-str .dot::after{
        display: none;
    }
}