.main-timeline{
     position: relative;
}
 .main-timeline:before{
     content: "";
     width: 5px;
     height: 100%;
     border-radius: 20px;
     margin: 0 auto;
     background: #242922;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
}
 .main-timeline .timeline{
     display: inline-block;
     margin-bottom: 50px;
     position: relative;
}
 .main-timeline .timeline:before{
     content: "";
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 4px solid #fff;
     background: #e5310e;
     position: absolute;
     top: 20%;
     left: 50%;
     z-index: 1;
     transform: translate(-50%, -50%);
}
 .main-timeline .timeline-icon{
     display: inline-block;
     width: 130px;
     height: 130px;
     border-radius: 50%;
     border: 3px solid #e5310e;
     padding: 13px;
     text-align: center;
     position: absolute;
     top: 20%;
     left: 30%;
     transform: translateY(-50%);
}
 .main-timeline .timeline-icon i{
     display: block;
     border-radius: 50%;
     background: #ec496e;
     font-size: 64px;
     color: #fff;
     line-height: 100px;
     z-index: 1;
     position: relative;
}
 .main-timeline .timeline-icon:before{
     content: "";
     width: 100px;
     height: 4px;
     background: #e5310e;
     position: absolute;
     top: 50%;
     right: -100px;
     transform: translateY(-50%);
}
/* .main-timeline .timeline-icon:after{
     */
    /* width: 70px;
     */
    /* height: 50px;
     */
    /* background: #fff;
     */
    /* top: 89px;
     */
    /* right: -30px;
     */
    /* 
}
 */
 .main-timeline .timeline-content{
     width: 50%;
     padding: 0 50px 0;
     margin: 52px 0 0 0;
     float: right;
     position: relative;
}
 .main-timeline .timeline-content:before{
     content: "";
     width: 70%;
     height: 100%;
     border: 3px solid #e5310e;
     border-top: none;
     border-right: none;
     position: absolute;
     bottom: -10px;
     left: 35px;
}
 .main-timeline .timeline-content:after{
     content: "";
     width: 37px;
     height: 3px;
     background: #e5310e;
     position: absolute;
     top: 10px;
     left: 0;
}
 .main-timeline .title{
     font-size: 20px;
     font-weight: 600;
     color: #ec496e;
     text-transform: uppercase;
     margin: 0 0 5px 0;
}
 .main-timeline .description{
     display: inline-block;
     font-size: 16px;
     color: #404040;
     line-height: 20px;
     letter-spacing: 1px;
     margin: 0;
}
 .main-timeline .timeline:nth-child(even) .timeline-icon{
     left: auto;
     right: 30%;
}
 .main-timeline .timeline:nth-child(even) .timeline-icon:before{
     right: auto;
     left: -100px;
}
 .main-timeline .timeline:nth-child(even) .timeline-icon:after{
     right: auto;
     left: -30px;
}
 .main-timeline .timeline:nth-child(even) .timeline-content{
     float: left;
}
 .main-timeline .timeline:nth-child(even) .timeline-content:before{
     left: auto;
     right: 35px;
     transform: rotateY(180deg);
}
 .main-timeline .timeline:nth-child(even) .timeline-content:after{
     left: auto;
     right: 0;
}
 .main-timeline .timeline:nth-child(2n):before, .main-timeline .timeline:nth-child(2n) .timeline-icon:before, .main-timeline .timeline:nth-child(2n) .timeline-icon i, .main-timeline .timeline:nth-child(2n) .timeline-content:after{
     background: #e5310e;
}
 .main-timeline .timeline:nth-child(2n) .timeline-icon{
     border-color: #e5310e;
}
 .main-timeline .timeline:nth-child(2n) .title{
     color: #f9850f;
}
 .main-timeline .timeline:nth-child(2n) .timeline-content:before{
     border-left-color: #e5310e;
     border-bottom-color: #e5310e;
}
 .main-timeline .timeline:nth-child(3n):before, .main-timeline .timeline:nth-child(3n) .timeline-icon:before, .main-timeline .timeline:nth-child(3n) .timeline-icon i, .main-timeline .timeline:nth-child(3n) .timeline-content:after{
     background: #e5310e;
}
 .main-timeline .timeline:nth-child(3n) .timeline-icon{
     border-color: #e5310e;
}
 .main-timeline .timeline:nth-child(3n) .title{
     color: #8fb800;
}
 .main-timeline .timeline:nth-child(3n) .timeline-content:before{
     border-left-color: #e5310e;
     border-bottom-color: #e5310e;
}
 .main-timeline .timeline:nth-child(4n):before, .main-timeline .timeline:nth-child(4n) .timeline-icon:before, .main-timeline .timeline:nth-child(4n) .timeline-icon i, .main-timeline .timeline:nth-child(4n) .timeline-content:after{
     background: #e5310e;
}
 .main-timeline .timeline:nth-child(4n) .timeline-icon{
     border-color: #e5310e;
}
 .main-timeline .timeline:nth-child(4n) .title{
     color: #2fcea5;
}
 .main-timeline .timeline:nth-child(4n) .timeline-content:before{
     border-left-color: #e5310e;
     border-bottom-color: #e5310e;
}
 @media only screen and (max-width: 1200px){
     .main-timeline .timeline-icon:before{
         width: 50px;
         right: -50px;
    }
     .main-timeline .timeline:nth-child(even) .timeline-icon:before{
         right: auto;
         left: -50px;
    }
     .main-timeline .timeline-content{
         margin-top: 75px;
    }
}
 @media only screen and (max-width: 990px){
     .main-timeline .timeline{
         margin: 0 0 10px 0;
    }
     .main-timeline .timeline-icon{
         left: 25%;
    }
     .main-timeline .timeline:nth-child(even) .timeline-icon{
         right: 25%;
    }
     .main-timeline .timeline-content{
         margin-top: 115px;
    }
}
 @media only screen and (max-width: 767px){
     .main-timeline{
         padding-top: 50px;
    }
     .main-timeline:before{
         left: 80px;
         right: 0;
         margin: 0;
    }
     .main-timeline .timeline{
         margin-bottom: 70px;
    }
     .main-timeline .timeline:before{
         top: 0;
         left: 83px;
         right: 0;
         margin: 0;
    }
     .main-timeline .timeline-icon{
         width: 60px;
         height: 60px;
         line-height: 40px;
         padding: 5px;
         top: 0;
         left: 0;
    }
     .main-timeline .timeline:nth-child(even) .timeline-icon{
         left: 0;
         right: auto;
    }
     .main-timeline .timeline-icon:before, .main-timeline .timeline:nth-child(even) .timeline-icon:before{
         width: 25px;
         left: auto;
         right: -25px;
    }
     .main-timeline .timeline-icon:after, .main-timeline .timeline:nth-child(even) .timeline-icon:after{
         width: 25px;
         height: 30px;
         top: 44px;
         left: auto;
         right: -5px;
    }
     .main-timeline .timeline-icon i{
         font-size: 30px;
         line-height: 45px;
    }
     .main-timeline .timeline-content, .main-timeline .timeline:nth-child(even) .timeline-content{
         width: 100%;
         margin-top: -15px;
         padding-left: 130px;
         padding-right: 5px;
    }
     .main-timeline .timeline:nth-child(even) .timeline-content{
         float: right;
    }
     .main-timeline .timeline-content:before, .main-timeline .timeline:nth-child(even) .timeline-content:before{
         width: 50%;
         left: 120px;
    }
     .main-timeline .timeline:nth-child(even) .timeline-content:before{
         right: auto;
         transform: rotateY(0deg);
    }
     .main-timeline .timeline-content:after, .main-timeline .timeline:nth-child(even) .timeline-content:after{
         left: 85px;
    }
}
 @media only screen and (max-width: 479px){
     .main-timeline .timeline-content, .main-timeline .timeline:nth-child(2n) .timeline-content{
         padding-left: 110px;
    }
     .main-timeline .timeline-content:before, .main-timeline .timeline:nth-child(2n) .timeline-content:before{
         left: 102px;
    }
     .main-timeline .timeline-content:after, .main-timeline .timeline:nth-child(2n) .timeline-content:after{
         left: 80px;
        width:25px;
    }
}
 .case-logo:before, .case-logo .timeline-icon{
     top:20% !important;
}
 .case-web:before, .case-web .timeline-icon{
     top:16% !important;
}
 .case-print:before, .case-print .timeline-icon{
     top:16% !important;
}
 .case-dm:before, .case-dm .timeline-icon{
     top:16% !important;
}
 .case-video:before, .case-video .timeline-icon{
     top:17% !important;
}
 .case-app:before, .case-app .timeline-icon{
     top:16% !important;
}
 @media (max-width:1200px){
     .case-print:before, .case-print .timeline-icon{
         top:17% !important;
    }
     .case-dm:before, .case-dm .timeline-icon{
         top:17% !important;
    }
     .case-video:before, .case-video .timeline-icon{
         top:19% !important;
    }
     .case-app:before, .case-app .timeline-icon{
         top:17% !important;
    }
}
 @media (max-width:991px){
     .case-logo:before, .case-logo .timeline-icon{
         top:20% !important;
    }
     .case-web:before, .case-web .timeline-icon{
         top:16% !important;
    }
     .case-print:before, .case-print .timeline-icon{
         top:15% !important;
    }
     .case-dm:before, .case-dm .timeline-icon{
         top:15.5% !important;
    }
     .case-video:before, .case-video .timeline-icon{
         top:17.5% !important;
    }
     .case-app:before, .case-app .timeline-icon{
         top:16% !important;
    }
}
 @media (max-width:768px){
     .case-logo:before, .case-logo .timeline-icon{
         top:4% !important;
    }
     .case-web:before, .case-web .timeline-icon{
         top:3% !important;
    }
     .case-print:before, .case-print .timeline-icon{
         top:3% !important;
    }
     .case-dm:before, .case-dm .timeline-icon{
         top:3% !important;
    }
     .case-video:before, .case-video .timeline-icon{
         top:3% !important;
    }
     .case-app:before, .case-app .timeline-icon{
         top:3% !important;
    }
}
 @media (max-width:479px){
     .case-logo:before, .case-logo .timeline-icon{
         top:2.5% !important;
    }
     .case-web:before, .case-web .timeline-icon{
         top:1.5% !important;
    }
     .case-print:before, .case-print .timeline-icon{
         top:2% !important;
    }
     .case-dm:before, .case-dm .timeline-icon{
         top:2% !important;
    }
     .case-video:before, .case-video .timeline-icon{
         top:2% !important;
    }
     .case-app:before, .case-app .timeline-icon{
         top:2% !important;
    }
}