/*!*巨幕*!*/
@import url("jumbotron.css");
/*主体内容*/
.main-timeline{
    margin:5% 0;
    overflow: hidden;
    position: relative;
}
.main-timeline:before{
    content: "";
    width: 4px;
    height: 100%;
    background: #D8D8D8;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.main-timeline .timeline:before{
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #D8D8D8;
    position: absolute;
    left:50%;
    transform: translate(-50%,50%);
}
.main-timeline .timeline:after{
    content: "";
    width: 20px;
    height: 4px;
    margin-top:5px;
    margin-left:16px;
    background: #D8D8D8;
    position: absolute;
    left:50%;
    transform: translate(-50%,50%);
}
.main-timeline .timeline:nth-child(2n):after{
    content: "";
    margin-left:-16px;
}
.timeline{display: flex;justify-content:center;align-items:center;}
.timeline a,.timeline div{width:40%;padding:2%;margin:5%;}
.inner-content{border:1px solid #D8D8D8;}
.timeline:nth-child(odd) a span{float:right;}
.timeline:nth-child(odd) a span:before{clear:both;}
.timeline:nth-child(2n) .inner-content{order:0;}
.timeline:nth-child(2n) .timeline-content{order:1;}
.inner-content .title{font-size:1.4rem;margin:3% 0;font-weight:bold;}
/*响应式*/
@media screen and (min-width: 1200px){
    .main-timeline .timeline:after,.timeline a,.timeline .inner-content h3,.timeline .inner-content p{
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;}
    /*主体内容*/
    .main-timeline .timeline:after{
        margin-left:16px;
        width:70px;
    }
    .timeline a{margin-top:6%;font-size: 3.6rem;}
    .timeline .inner-content h3{font-size:2.4rem;}
    .timeline .inner-content p{font-size:1.8rem;}
}
@media screen and (min-width: 550px)and (max-width: 1199px){
    .timeline a,.timeline .inner-content h3,.timeline .inner-content p{
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;}
    .timeline a{margin-top:7%;font-size: 2.4rem;}
    .timeline .inner-content h3{font-size:1.8rem;}
    .timeline .inner-content p{font-size:1.4rem;}
}
@media only screen and (max-width: 550px) {
    .main-timeline:before,.main-timeline .timeline:before, .main-timeline .timeline:after,.timeline a,.timeline div,.main-timeline .timeline:nth-child(2n):after{
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;}
    /*主体内容*/
    .main-timeline:before{
        left: 31%;
        transform: translateX(-31%);
    }
    .main-timeline .timeline:before{
        left:30%;
        transform: translate(-20%,50%);
    }
    .main-timeline .timeline:after{
        left:30%;
        transform: translate(-30%,50%);
    }
    .timeline a{width:30%;margin-top:9%;}
    .timeline div{width:64%;margin-left:6%;}
    .main-timeline .timeline:nth-child(2n):after{
        content: "";
        margin-left:16px;
    }
    .timeline:nth-child(2n) .timeline-content{order:0;}
    .timeline:nth-child(odd) a span{float:none;}
}