#end-course  .cd-renewal-mark {
width: 100%;
height: 100%;
background: rgba(46,56,73,.8);
position: fixed;
top: 0;
left: 0;
z-index: 90000;
animation: bounceIn .3s;
-webkit-animation: bounceIn .3s
}

#end-course  .cd-renewal-mark .cd-renewal {
width: 93%;
height: 11rem;
background: #f3f7fa;
border-radius: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 91000
}

#end-course  .cd-renewal-mark .cd-renewal .cdr-close {
width: 20px;
height: 20px;
position: absolute;
top: 15px;
right: 15px;
cursor: pointer
}

#end-course  .cd-renewal-mark .cd-renewal p {
text-align: center;
font-size: 24px;
color: #333;
margin-top: 45px
}

#end-course  .cd-renewal-mark .cd-renewal .cdr-tip {
font-size: 16px;
color: #898989;
margin-top: 10px
}

#end-course  .cd-renewal-mark .cd-renewal .cdr-combo {
width: 100%;
margin: 0 auto;
text-align: center
}

#end-course  .cd-renewal-mark .cd-renewal .cdr-combo .cdrc-card {
width: 180px;
height: 150px;
display: inline-block;
border-radius: 5px;
background: #fff;
position: relative;
box-shadow: 0 0 30px rgba(85,182,218,.2);
margin: 30px 15px;
cursor: pointer;
vertical-align: middle
}

#end-course .cd-renewal-mark .cd-renewal .cdr-combo .cdrc-card .card-hover {
width: 180px;
height: 150px;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
background: #00a0ea;
}

#end-course  .cd-renewal-mark .cd-renewal .cdr-combo .cdrc-card .card-hover p {
font-size: 16px;
margin-top: 0;
line-height: 20px;
color: #fff
}

#end-course  .cd-renewal-mark .cd-renewal .cdr-combo .cdrc-card .card-hover p:first-child {
margin-top: 30px
}

#end-course .cd-renewal-mark .cd-renewal .cdr-combo .cdrc-card .card-hover .cdr-btn {
width: 130px;
height: 37px;
background: #d6f1fe;
border-radius: 5px;
text-align: center;
font-size: 15px;
color: #333;
line-height: 37px;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: auto
}
#end-course  .cd-renewal-mark .cd-renewal .cdr-combo .cdrc-card:hover .card-hover {
display: block
}