.course-project-panel-course[data-v-d1c115ee] {
  padding:24px 0;
  border-radius:10px;
}

.course-project-panel-course ul[data-v-d1c115ee] {
  display:flex;
  justify-content:space-around;
}

.course-project-panel-course ul li[data-v-d1c115ee] {
  width:100%;
  cursor:pointer;
  border-right: 1px dashed var(--main-border-color);
  position:relative;
}

.course-project-panel-course ul li .top[data-v-d1c115ee] {
  text-align:center;
  opacity:1;
  transition-duration:1.5s;
}

.course-project-panel-course ul li .top .title[data-v-d1c115ee] {
  font-size:22px;
  font-weight:700;
  padding:24px 0 20px;
}

.course-project-panel-course ul li .top .describe[data-v-d1c115ee] {
  font-size:14px; /*color:#484848;*/
}

.course-project-panel-course ul li .top .line[data-v-d1c115ee] {
  width:24px;
  height:4px;
  background-color:#31a86c;
  margin:10px auto 40px;
  border-radius:50px;
}

.course-project-panel-course ul li .top .ivu-btn[data-v-d1c115ee] {
  font-size:13px;
  width:134px;
  height:40px;
  color:#fff;
}

.course-project-panel-course ul li .top .vip[data-v-d1c115ee] {
  color:#31a86c;
}

.course-project-panel-course ul li .top .vip-line[data-v-d1c115ee] {
  background-color:#31a86c;
}

.course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee] {
  background-color:#9bd5b8;
  border:0 solid #0054f0 !important;
}

.course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee]:hover {
  border:none;
  background-color:#31a86c;
}

.course-project-panel-course ul li .top .routine[data-v-d1c115ee] {
  color:#ff902e;
}

.course-project-panel-course ul li .top .routine-line[data-v-d1c115ee] {
  background-color:#ff902e;
}

.course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee] {
  background-color:#fac6a1;
  border:0 solid #0054f0 !important;
}

.course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee]:hover {
  border:none;
  background-color:#ff902e;
}

.course-project-panel-course ul li .top .ten[data-v-d1c115ee] {
  color:#31a89b;
}

.course-project-panel-course ul li .top .ten-line[data-v-d1c115ee] {
  background-color:#31a89b;
}

.course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee] {
  background-color:#7fc7c0;
  border:0 solid #0054f0 !important;
}

.course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee]:hover {
  border:none;
  background-color:#31a89b;
}

.course-project-panel-course ul li .top .double[data-v-d1c115ee] {
  color:#ffc343;
}

.course-project-panel-course ul li .top .double-line[data-v-d1c115ee] {
  background-color:#ffc343;
}

.course-project-panel-course ul li .top .double-btn[data-v-d1c115ee] {
  background-color:#fbd78b;
  border:0 solid #0054f0 !important;
}

.course-project-panel-course ul li .top .double-btn[data-v-d1c115ee]:hover {
  border:none;
  background-color:#ffc343;
}

.course-project-panel-course ul li .top .nike[data-v-d1c115ee] {
  color:#439bff;
}

.course-project-panel-course ul li .top .nike-line[data-v-d1c115ee] {
  background-color:#439bff;
}

.course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee] {
  background-color:#8abffc;
  border:0 solid #0054f0 !important;
}

.course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee]:hover {
  border:none;
  background-color:#439bff;
}

.course-project-panel-course ul li .vip-bottom[data-v-d1c115ee] {
background:url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Scd1vz1QbInG3kAFN_!!2210123621994.png) 0 0 no-repeat;
background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* min-height: 100vh; */
    margin: 0;
}

.course-project-panel-course ul li .routine-bottom[data-v-d1c115ee] {
background:url(https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01ny1YUo1QbInIBgqcd_!!2210123621994.png) 0 0 no-repeat;
background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* min-height: 100vh; */
    margin: 0;
}

.course-project-panel-course ul li .ten-bottom[data-v-d1c115ee] {
background:url(https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01YOasqO1QbInG3m6mG_!!2210123621994.png) 0 0 no-repeat;
background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* min-height: 100vh; */
    margin: 0;
}

.course-project-panel-course ul li .double-bottom[data-v-d1c115ee] {
background:url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01sQy60I1QbInHmwkxu_!!2210123621994.png) 0 0 no-repeat;
background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* min-height: 100vh; */
    margin: 0;
}

.course-project-panel-course ul li .nike-bottom[data-v-d1c115ee] {
background:url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN011D4kwJ1QbInIBhBOe_!!2210123621994.png) 0 0 no-repeat;
background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* min-height: 100vh; */
    margin: 0;
}

.course-project-panel-course ul li .bottom[data-v-d1c115ee] {
    /*width:256px;
    height:268px;*/
    width: 100%;
    height: 100%;
    color:#1b1b1b;
    border-radius:10px;
    padding:26px 16px 0;
    position:absolute;
    left:0;
    top:-28px;
    opacity:0;
    transform:scale(1);
    transition-duration:.5s;
    animation: box-move 1s infinite alternate-reverse;
    margin: 2em auto 0 auto;
}

.course-project-panel-course ul li .bottom .title[data-v-d1c115ee] {
    font-size:23px;
    padding-bottom:24px;
}

.course-project-panel-course ul li .bottom .describe[data-v-d1c115ee] {
    font-size:14px;
}

.course-project-panel-course ul li .bottom .line[data-v-d1c115ee] {
    width:24px;
    height:4px;
    background-color:#fff;
    margin:15px 0 30px;
    border-radius:50px;
}

.course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee] {
    width:80%;
    border:none;
    background-color:transparent;
    /* 改为透明 */

    font-size:13px;
    height:40px;
    color:#0c301e;
    text-shadow:0 3px 20px #3c6751;
    text-align:center;
    }

.course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee]:hover {
    background-color:transparent;
    /* 改为透明 */;
}

.course-project-panel-course ul li[data-v-d1c115ee]:last-child {
    border-right:none;
}

.course-project-panel-course ul li:hover .top[data-v-d1c115ee] {
    opacity:0;
    transition-duration:.5s;
}

.course-project-panel-course ul li:hover .bottom[data-v-d1c115ee] {
    transform:scale(1.1);
    opacity:1;
    transition-duration:1s;
    animation: box-move-anim 300ms 1 forwards;
}
@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

@keyframes box-move-anim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@media (min-width: 481px) and (max-width: 1200px) {
    .course-project-panel-course ul  {
        flex-wrap: wrap;
        gap: 16px;
    }
    .course-project-panel-course ul li{
        flex: 0 0 calc(50% - 8px);
        box-sizing: border-box;
    }
}
/* Modern equivalent syntax */
@media (max-width: 676px) {
    .course-project-panel-course ul  {
        flex-wrap: wrap;
        gap: 16px;
    }
    .course-project-panel-course ul li{
        flex: 0 0 calc(100% - 8px);
        box-sizing: border-box;
    }
}
@media (max-width: 1200px) {
    .course-project-panel-course ul li .bottom{
        width: 100% !important;
        height: 200px !important;
        display: block;
        text-align: center;
        top: -5px !important;
    }
    .course-project-panel-course ul li .vip-bottom,
    .course-project-panel-course ul li .nike-bottom,
    .course-project-panel-course ul li .routine-bottom,
    .course-project-panel-course ul li .ten-bottom,
    .course-project-panel-course ul li .double-bottom{
        float: right;
        background-position: right 0px center  !important;
    }

}
/*background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN011D4kwJ1QbInIBhBOe_!!2210123621994.png) 0 0 no-repeat;*/