.top-nav a{color: #0C0C0C;}
.course-left{position: fixed; left: 2vw; top: 13vw; z-index:20;}
.course-left ul li a{padding:.5em;display: block;margin:.5em;}
.course-left ul li a.on,.course-left ul li a:hover{font-weight:bold; color:#eb5a24; transition:0.5s;}
.course-main{margin-left:8vw; margin-top:6vw; width:84vw; overflow: hidden; padding-bottom:3vw;}
.course-main .course-colspan{width:30%;margin-right:2.5%;float:left;}
.course-main .course-list{
    transition: all .5s cubic-bezier(.67,0,.285,1);
    opacity: 1;
    transform: translateY(0);
    display: block;
    width: calc(100%);
    position: relative;
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    transform: translateY(0);
    transform: translateY(40px);
    margin-bottom:2vw;
}
.course-main .course-list:hover {
    clip-path: polygon(5% 5%,95% 0,95% 95%,5% 100%);
}
.course-main .course-list img{width:100%; height:100%;
    transition: all .5s cubic-bezier(.67,0,.285,1);}
.course-main .course-list img:hover{transform: translateZ(0) scale(1.1);}
.course-main .course-list .course-info{position: absolute; left:8%; top:8%; z-index:9; height:100%;letter-spacing: 2px; line-height: 1.9em;}
.course-main .course-list .course-title{color:#FFF;font-weight: bold;}
.course-main .course-list .course-desc-title{color:#FFF;font-weight: bold; font-size:1.2em;}
.course-main .course-list .course-desc{width:90%;color:#fff;position:relative;height:88%; }
.course-main .course-list .hide{display:none;opacity:0;transition:1s;
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  }
.course-main .course-list .show{display:block;opacity:1;transition:1s;
    animation: fade-out;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  }
.course-main .course-list .course-desc .course-setting{position:absolute; left:0px; bottom:0px;}
.course-main .course-list .course-setting ul li{float:left; width:30%; margin-right:5%; text-align: center; line-height: 1em;padding-bottom:8px; border-radius:10px; margin-bottom: 8px; background: rgba(0,0,0,0.3); }
.course-main .course-list .course-setting ul li:nth-child(3n+0){
    margin-right:0px;
}
.course-main .course-list .course-setting ul li .course-setting-icon{margin-top:6%;}
.course-main .course-list .course-setting ul li .course-setting-icon img{width:40%;}
.course-main .course-list .course-setting ul li .course-setting-title{font-size:5%; margin-top:8%;}
.course-main .course-list .course-setting ul li .course-setting-title p img{width:12px;}
.now-comment a{position:fixed;display:block; right:3vw; bottom:50%;width:28px; font-size:16px;padding:5px 0px; border: 2px solid #000; border-radius:8px; text-align:center;}
.now-comment a:hover{border:2px solid #F97276; background-color : #F97276; color:#fff;}
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    100% {opacity: 1,display:block}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    100% {opacity: 1,display:block}  
}  
@keyframes fade-out {  
    0% {opacity: 1;}/*初始状态 透明度为0*/  
    100% {opacity: 0,display:none;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-out {/*针对webkit内核*/  
    0% {opacity: 1;}  
    100% {opacity: 0,display:none;}  
}