:root {
    --my-item-width:22vw;
    --user-item-height:calc(var(--my-item-width)/2 + 0.24rem);
    --box-height:calc(100vw / 2);
}
.course-box .container {
    user-select:none;
    outline:none;
    /*cursor:move;*/
    /*position:relative;*/
    /*width:100vw;*/
    box-sizing:border-box;
    overflow:auto;
    /*height:100%;*/
    /*overflow:hidden;*/
    /*position:relative;*/;
}
.course-box .container::-webkit-scrollbar {
    width:0;
    height:0;
}
.container-box {
    position:relative;
}
.course-box .box {
    height:var(--box-height);
    position:relative;
    background-size:100% 100%;
}
.course-box .container-item-box {
    /*overflow:auto;*/
    display:flex;
    white-space:normal;
    /*width:100vw;*/
    height:100%;
    padding-left:14vw;
    box-sizing:border-box;
}
.course-box .time-item {
    width:22vw;
    flex-shrink:0;
    /*width:100%;*/
    /*height:100%;*/
    /*position:relative;*/    /*transition-property:transform;*/
    /*transition:transform 0.1s ease;*/
    /*display:inline-block;*/;
}
.course-box .bottom-box {
    padding-left:25vw;
    /*margin-bottom:0.84rem;*/;
}
.course-box .line {
    left:0;
    position:absolute;
    top:50%;
    width:100%;
    border-bottom:0.01rem solid #C3C3C3;
}
.course-box .content-box {
    box-sizing:border-box;
    padding-left:0.3rem;
    padding-top:0.3rem;
    height:var(--user-item-height);
    display:flex;
    position:relative;
    /* 父元素设置为相对定位*/;
}
.course-box .vertical-line-top {
    position:absolute;
    /* 子元素设置为绝对定位*/
    top:0;
    bottom:0;
    left:0.1rem;
    right:0;
    height:100%;
    width:0.04rem;
    background:linear-gradient(180deg,#D52729 0%,rgba(213,39,41,0) 100%);
}
.course-box .vertical-line-bottom {
    position:absolute;
    /* 子元素设置为绝对定位*/
    top:0;
    bottom:0;
    left:0.1rem;
    right:0;
    height:100%;
    width:0.04rem;
    width:0.04rem;
    background:linear-gradient(0deg,#D52729 0%,rgba(213,39,41,0) 100%);
}
.course-box .circle {
    border-radius:50%;
    width:0.22rem;
    height:0.22rem;
    background:#FFFFFF;
    border:3px solid #D52729;
}
.course-box .time-title {
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:bold;
    font-size:0.36rem;
    color:#D52729;
    margin-bottom:0.1rem;
}
.course-box .main-title {
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:bold;
    font-size:0.24rem;
    color:#D52729;
    margin-bottom:0.1rem;
}
.course-box .sub-title {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:400;
    font-size:0.16rem;
    color:#666666;
    margin-bottom:0.1rem;
}
.course-box-title {
    overflow:hidden;
    text-align:center;
}
.course-box-title .title {
    margin-top:1rem;
    font-weight:bold;
    font-size:0.4rem;
    color:#222222;
    margin-bottom:0.3rem;
}
.course-box-title .title-time {
    font-weight:500;
    font-size:0.24rem;
    color:#999999;
    margin-bottom:0.8rem;
}
.main-box {
    overflow:hidden;
}
.vertical-img-box {
    width:100%;
    height:100%;
}
.vertical-img-box img {
    user-drag:none;
    -webkit-user-drag:none;
    -moz-user-drag:none;
    width:100%;
    height:100%;
}
.vertical-info-box {
    width:100%;
    height:100%;
    /*height:2.85rem;*/;
}