@charset "utf-8";


#courseInfo {position: relative;}
#courseInfo .inner {}
#courseInfo .title {margin-bottom: 60px; text-align: center;}
#courseInfo .title h3 {font-size: 40px; line-height: 1.1; color:#333333; font-family:'S-CoreDream-6Bold';}
#courseInfo .list {position: relative; margin: 0 -20px;}
#courseInfo .courseInfo-slider li {padding: 0 17.5px;}
#courseInfo .courseInfo-slider li a {position: relative; width: 100%; display: block; border-radius: 16px; overflow: hidden;}
#courseInfo .thumb {width: 100%;}
#courseInfo .thumb img {width: 100%;}
#courseInfo .desc {background: #ffffff; padding: 30px;}
#courseInfo .desc .cate {}
#courseInfo .desc .cate span {display: inline-flex; justify-content: center; align-items: center; height: 24px; line-height: 24px; font-size: 12px; color: #ffffff; font-family:'Noto Regular'; padding: 0 10px; border-radius: 15px; overflow: hidden; margin-right: 4px;}
#courseInfo .desc .cate span:last-child {margin-right: 0;}
#courseInfo .desc .cate .open {background: #0E8772;}
#courseInfo .desc .cate .closed {background: #EA5550;}
#courseInfo .desc .info {margin-top: 10px;}
#courseInfo .desc .info .subject {position: relative; display: inline-block;}
#courseInfo .desc .info .subject::after {content: ''; position: absolute; left: 0; bottom: 3px; width: 0; height: 30%; background: rgb(255, 194, 12, 0.35); transition: width 0.3s;}
#courseInfo .desc .info .subject strong {position: relative; font-size: 24px; color: #333333; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-family: "Noto Bold"; z-index: 1; word-break: break-all;}
#courseInfo .desc .info .details {margin-top: 10px;}
#courseInfo .desc .info .details p {font-size: 18px; color: #333333; line-height: 1.5; font-family:'Noto Medium'; padding-left: 30px; margin-bottom: 8px; }
#courseInfo .desc .info .details p:last-child {margin-bottom: 0;}
#courseInfo .desc .info .details .user {background: #fff url('/sites/devculture/images/main/courseInfo/ic-user.png') left center no-repeat;}
#courseInfo .desc .info .details .user span{display: inline-block;position: relative;}
#courseInfo .desc .info .details .user span:before{content:"/";display:inline-block;margin: 0 8px 0 4px;}
#courseInfo .desc .info .details .time {background: #fff url('/sites/devculture/images/main/courseInfo/ic-time.png') left 5px no-repeat;}
#courseInfo .desc .amount {font-size: 20px; line-height: 1.5; color:#333333; font-family:'S-CoreDream-6Bold'; margin-top: 20px;}
#courseInfo .desc .amount strong{display: inline-block;font-size: 10px;padding: 4px 7px;border: 1px solid #333;border-radius: 20px;line-height: .9;position: relative;top: -4px;margin-right: 10px;}
#courseInfo .list .controls{position: absolute;top: 48%;/*  */left: 0;right: 0;}
#courseInfo .controls .prevnext button {width: 50px;height: 50px;border-radius: 50%;text-indent: -9999px;z-index: 1;transition: .3s;position: absolute;}
#courseInfo .controls .prevnext button:hover {box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#courseInfo .controls .prevnext .prev {left: -5px; background: #000000 url('/sites/devculture/images/main/courseInfo/slide-arrow-prev.png') center no-repeat;}
#courseInfo .controls .prevnext .next {right: -5px; background: #000000 url('/sites/devculture/images/main/courseInfo/slide-arrow-next.png') center no-repeat;}

@media (max-width:1600px) {
    #courseInfo .list {margin: 0;}
}

@media (max-width:1260px) {
	#courseInfo .desc .info .details p{font-size: 16px;}

}


@media (max-width:768px) {
    #courseInfo .title {margin-bottom: 30px;}
	#courseInfo .title h3 {font-size: 34px;} 
    #courseInfo .list {margin: 0; padding: 0 25px;}
    #courseInfo .courseInfo-slider li {padding: 0 10px;}
    #courseInfo .desc {padding: 30px 30px;}
    #courseInfo .desc .info {margin-top: 8px;}
    #courseInfo .desc .info .subject strong {font-size: 18px;}
    #courseInfo .desc .info .details {margin-top: 8px;}
    #courseInfo .desc .info .details p {font-size: 14px;}
    #courseInfo .desc .amount {font-size: 18px;margin-top: 8px;}

    #courseInfo .controls .prevnext .prev {left: 0;}
    #courseInfo .controls .prevnext .next {right: 0;}

	#courseInfo .desc .info .details p{font-size: 18px;}
	
}


/*HOVER*/
@media only screen and (min-width:1024px){
    #courseInfo .courseInfo-slider li a:hover .subject::after {width: 100%;}
}