@charset "utf-8";

.course_main{
    margin-top: 100px;
    cursor: default;
}
.course_box{
    background-color: rgba(233,233,233,.4);
}
.course_box>h3{
    padding-top:4rem;
}
.course_box>p{
    padding-bottom:4rem;
}
.course_c{
    position: relative;
    padding-top:100px;
    padding-bottom:5rem;
}
/*中间线*/
.course_c:before{
    position: absolute;
    display: block;
    margin:auto;
    top:0;
    right:0;
    left:0;
    width: 1px;
    height: 100%;
    background: #01948E;
}
/*内容层*/
.course_c_li{
    width:50%;
    float: right;
    position: relative;
    z-index:1;
}
.course_c_li .course_c_li_c p:first-child{
    font-size:23px;
    color: #01948E;
    padding:30px 0;
}
/*小圈*/
.course_c_li:first-child:before{
    content: "";
    display: block;
    width:15px;
    height:15px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #01948E;
    border:1px solid #01948E;
    position: absolute;
    top: -50px;
    left:-7px;
}
/*左侧年份*/
.course_c_li:nth-child(2n){
    margin-top:180px;
}
/*右侧年份*/
.course_c_li:nth-child(odd){
    margin-top:-50px;
}
.course_c_li_c>div{
    padding:0 30px;
}
/*年份下划线*/
.course_c_li>.course_c_li_c>div>p:first-child:after{
    display: block;
    position: relative;
    content: "";
    width:2rem;
    height:1px;
    top:10px;
    border:1px solid #666;
}
.course_c_li:nth-child(odd)>.course_c_li_c>div>p:first-child:after{
    left:3px;
}
.course_c_li:nth-child(2n)>.course_c_li_c>div>p:first-child:after{
    right:-73%;
}
.course_c_li:nth-child(2n)>.course_c_li_c>div>p{
    float: right;
}
@media screen and (max-width: 768px) {
    .course_main{
        margin-top:60px;
    }
    .course_c{
        padding-top:0;
    }
    .course_c:before{
        left:15px;
        margin:0;
    }
    .course_c_li{
        width:100%;
        float: none;
    }
    .course_c_li:first-child:before{
        top:0;
    }
    .course_c_li:nth-child(odd){
        margin-top:0;
    }
    .course_c_li:nth-child(2n){
        margin-top:0;
    }
    .course_c_li:nth-child(2n)>.course_c_li_c>div>p:first-child:after{
        right:0;
    }
    .course_c_li:nth-child(2n)>.course_c_li_c>div>p{
        float: none;
    }
    .course_c_li>.course_c_li_c>div>p:last-of-type,.course_c_li>.course_c_li_c>div>p:nth-of-type(3){
        font-size:12px;
    }
}