#listCourseStyle1{padding:0 calc((100% - 1200px)/2) 20px}
#listCourseStyle1 .title{text-align:center}
#listCourseStyle1 .title h3{text-transform:uppercase;font-size:24px;padding:0 40px;height:50px;display:inline-block;color:#fff;position:relative;clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);background:#000}
#listCourseStyle1 .title h3 span{display:flex;align-items:center;height:100%}
#listCourseStyle1 .content{margin-top:20px;border:1px solid #000;position:relative}
#listCourseStyle1 .content ul{display:flex;list-style:none;max-width:100%;background:#fff;position:absolute;top:0;left:0;right:0}
#listCourseStyle1 .content.sticky ul{position:fixed;width:1200px;z-index:1;box-shadow: -1px 2px 6px -1px #000;border:1px solid #000;border-bottom:0;left:unset;right:unset}
#listCourseStyle1 .content li{flex-basis:0;flex-grow:1}
#listCourseStyle1 .content li a.active,#listCourseStyle1 .content li a:hover{background:#000;color:#fff;font-weight:bold}
#listCourseStyle1 .content li a{display:block;text-decoration:none;padding:10px 0;position:relative;text-align:center;text-transform:uppercase;color:#000;line-height:20px}
#listCourseStyle1 .content li a.active:after,#listCourseStyle1 .content li a:hover:after{display:block}
#listCourseStyle1 .content li a:after{content:'';position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:5px solid #000;bottom:-5px;left:50%;margin-left:-10px;display:none}
#listCourseStyle1 .content>div{padding:5px 20px 0}
#listCourseStyle1 .content>div.tab{padding-top:40px}
#listCourseStyle1 .content>div.tab>div:not(:first-child){display:none}
#listCourseStyle1 .content>div>div>div{position:relative;border-bottom:1px dashed #000;padding:10px 0}
#listCourseStyle1 .content>div.tab>div>div:last-child,#listCourseStyle1 .content>div>div:last-child>div:last-child{border:0}
#listCourseStyle1 .content>div>div>div h3{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;padding-left:25px;;margin-bottom:10px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM2REQ1RkUzMjAxOTExRUJBMERFRjk1RDAxMjRFRUZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM2REQ1RkU0MjAxOTExRUJBMERFRjk1RDAxMjRFRUZGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzZERDVGRTEyMDE5MTFFQkEwREVGOTVEMDEyNEVFRkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzZERDVGRTIyMDE5MTFFQkEwREVGOTVEMDEyNEVFRkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5Baw1tAAAApElEQVR42pySMQ6AIAxFGRycPJDcxjPpxOCmi+dxYSZ6BRMSbM3HVALRaPIilf8CVFQIQUXoaYmJ2IiAN9ftI4dwRfQIluD5SkrmRYgY5JX+KEQ4f+2ZC0+sheCKeR7PLO0oLFETYyKM+G5RO5UElkSMwiIyh1wpFbuMcK80Z87AwSYj3Gcqdc8Xu/frP4kbMbwIw+NGiLunsWeHLjnUWuZOAQYAKGSz5kZpkDIAAAAASUVORK5CYII=) left 2px no-repeat;font-size:16px}
#listCourseStyle1 .content>div>div>div h3 a{color:#000;text-decoration:none}
#listCourseStyle1 .content>div>div>div h3 a:hover{text-decoration:underline}
#listCourseStyle1 .content>div>div>div>div{padding-left:25px;display:flex;align-items:center}
#listCourseStyle1 .content>div>div>div .courseInfo p:first-child{padding-left:0}
#listCourseStyle1 .content>div>div>div .courseInfo p{padding:0 15px;font-size:16px;position:relative;margin-bottom:10px;line-height:20px}
#listCourseStyle1 .content>div>div>div .courseInfo p:not(:first-child)::after{content:'';display:block;width:1px;position:absolute;left:0;top:0;height:20px;background:#000}
#listCourseStyle1 .content>div>div>div .coursePrice p{margin-right:40px}
#listCourseStyle1 .content>div>div>div .coursePrice p span.originPrice{text-decoration:line-through}
#listCourseStyle1 .content>div>div>div .coursePrice p span:not(.originPrice){font-weight:bold}
#listCourseStyle1 .content>div>div>div .coursePrice a{display:block;text-transform:uppercase;text-decoration:none;padding:5px 10px;border-radius:10px;border:1px solid #000;color:#000}
@media all and (max-width:1023px){
    #listCourseStyle1{padding:0 10px 10px}
    #listCourseStyle1 .title h3{font-size:14px}
    #listCourseStyle1 .content ul{flex-wrap:wrap}
    #listCourseStyle1 .content.sticky ul{width:calc(100% - 20px)}
    #listCourseStyle1 .content li{min-width:20%}
    #listCourseStyle1 .content>div.tab{padding-top:80px}
}
@media all and (max-width:768px){
    #listCourseStyle1 .content>div>div>div h3,#listCourseStyle1 .content>div>div>div .courseInfo p,#listCourseStyle1 .content>div>div>div .coursePrice{font-size:14px}
    #listCourseStyle1 .content>div>div>div h3{-webkit-line-clamp:3}
    #listCourseStyle1 .content>div>div>div .courseInfo{flex-wrap:wrap}
    #listCourseStyle1 .content>div>div>div .courseInfo p{width:50%}
    #listCourseStyle1 .content>div>div>div .courseInfo p:nth-child(odd){padding-left:0}
    #listCourseStyle1 .content>div>div>div .courseInfo p:nth-child(odd)::after{display:none}
}