/*
 * 桑格云课堂 直播
 */
/*banner 文字*/
.index-banner {height:3rem;width: 100%;position: relative;background:url(https://sanger-sc-prod.oss-cn-shanghai.aliyuncs.com/static/img/edu/banner/zbkc.jpg) no-repeat;background-size: cover;display: flex;align-items: flex-end;margin-top: 72px;}
.index-banner .search input {border-radius:4px;background:#fff;border:none;box-sizing:border-box;padding:0 130px 0 10px;width:600px;outline: none;}
.index-banner .search button {width:116px;height:40px;line-height: 40px;font-size:16px;color:#fff;border-radius:4px;border:none;background:#2362eb;position: absolute;top:91px;right:4px;cursor: pointer;transition:.3s ease;}
.banner-box {margin-left: 13.54%;color: #fff;display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 72px);
    opacity: 0;
  animation: fadeIn 3s forwards;  -webkit-animation: fadeIn 3s forwards;
}
.banner-box > div {padding-bottom: 10px;}
.banner-box .p1 {display: flex;align-items: center;}
.banner-box .p1 .title {font-size: 40px;font-weight: 700;margin-bottom: 5px}
.banner-box .p2 {font-size: 16px;margin-bottom: 24px;letter-spacing: 1px;}
.banner-box .p1 span:last-child {margin-left: 10px;}

/* tab */
.layui-tab-content .tab-pane {display: none;}
.layui-tab-content .tab-pane.current {display: block;}

/*主标题*/
.ke-title {margin-bottom:15px;height:30px;line-height:30px;}
.ke-title h3 {font-size:24px;font-weight: normal;float:left;}

/*锚点子导航*/ 
.detail-top-nav-box {display: flex;justify-content: center;align-items: center;}
.detail-top-nav-wrap .wrap {margin:0 auto;}
.detail-top-nav {display: flex;font-size: 16px;justify-content: center;padding: 39px 0 59px 0;}
.detail-top-nav li {height:38px;line-height:38px;padding:0 48px;cursor:pointer;background: #fff;color: #2E2F33;border-radius: 19px;box-shadow: 0px 3px 6px 1px rgba(153,154,170,0.16);}
.detail-top-nav li + li {margin-left: 25px;}
.detail-top-nav li.current {background: #09B07F; color: #fff;}
.detail-top-nav li:not(.current):hover {color: #09B07F;}


/*课程卡片*/
.card-list {display:block;width:23.85%;height:283px;background: #fff;border-radius:14px;overflow:hidden;position: relative;transition:all .2s ease;box-shadow:0px 3px 6px 1px rgba(153,154,170,0.16);margin-bottom: 25px;margin-right: 20px;}
.big-card .card-list {height: 326px;}
.card-list:nth-child(4n) {margin-right: 0;}
.card-list .img {height:187px;overflow:hidden;margin-bottom: 15px;position: relative;}
@media screen and (min-width:1200px) {
    .card-list{width: 23.5%;}
}
@media screen and (min-width:1920px) {
    .card-list{width: 23.85%;}
}
@media screen and (min-width:2000px) {
    .card-list{width: 24.2%;height: 326px;}
    .card-list .img {height:230px;} 
}
@media screen and (min-width:2100px) {
    .card-list{width: 24%;height: 326px;}
    .card-list .img {height:230px;} 
}
.card-list .img .bg {width:100%;height:100%;}
.card-list h3 {font-size:16px;font-weight:normal;max-height:46px;padding:0 15px;margin-bottom: 8px;color:#17233D;overflow:hidden;text-overflow:ellipsis;line-height:1.5;}
.card-list .dec {color:#999AAA;height:40px;padding:0 18px;overflow:hidden;}
.card-list .bot {padding:0 15px;color:#333;position: absolute;bottom:18px;left:0;width:100%;align-items: center;}
.card-list .bot button {border:1px solid #09B07F;color:#fff;border-radius:3px;background-color:#09B07F;padding:0 10px;cursor: pointer;height:25px;line-height:25px;transition:all .2s;}
.card-list .bot button img {width: 10px;}
.card-list .bot .tag {background-color:#3d9ff9;color:#fff;font-size:16px;padding:0 10px;height:30px;line-height:30px;position: absolute;right:0;z-index:2;border-radius:0;}
.card-list .bot .tag:before {content:"";position: absolute;width:0;height:0;border-width:15px;border-color:#3d9ff9 #3d9ff9 #3d9ff9 transparent;border-style: solid;left:-15px;z-index:-1;}
.card-list:hover {box-shadow:rgba(146, 157, 154, 0.24) 0px 4px 14px 0px;color: inherit;transform: translateY(-10px);}
.card-list[enrolment="true"] .bot button {border-color:#ddd;color:#8a8a8a;background: #e8e8e8;}

/*已报名弹层*/
.popup-enrolment {padding-top:40px;}
.popup-enrolment .close {position: absolute;right:10px;top:10px;font-size:20px;font-weight:bold;color:#999;cursor:pointer;}
.popup-enrolment p {font-size:16px;text-align: center;line-height:1.5;}
.popup-enrolment .success {font-size:65px;color:#0dd6a7;}

/*渠道选择弹层*/
.layer_notice .select-wrap label {white-space: nowrap;display: inline-block;margin:0 8px 20px;}
.layer_notice .select-wrap label span {display: inline-block;height:32px;line-height: 32px;border:1px solid #cfd2d4;background: #fff;border-radius: 100px;padding:0 20px;cursor: pointer;}
.layer_notice .select-wrap label input {display: none!important;}
.layer_notice .select-wrap label input:checked + span {background: #09B07F;color:#fff;border-color:#09B07F;}

/*即将开始直播*/
.card-list-begin {display:block;width:312px;height:295px;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05);margin-bottom: 28px;position: relative;transition:all 0.2s ease-in-out 0s;}
.card-list-begin:not(:nth-child(4n)) {margin-right: 50px;}
.card-list-begin .img {height:175px;overflow:hidden;margin-bottom: 10px;position: relative;}
.card-list-begin .img .bg {width:100%;height:100%;}
.card-list-begin .img .tag {position: absolute;display:inline-block;font-size:14px;background:rgba(0,0,0,.3);color:#fff;top:10px;right:10px;padding:0 5px;height:20px;line-height:20px;z-index:2;border-radius: 3px;}
.card-list-begin h3 {font-size:16px;font-weight:normal;padding:0 15px;margin-bottom: 18px;color:#515151;overflow:hidden;text-overflow:ellipsis;line-height:1.5;height:24px;white-space: nowrap;}
.card-list-begin .number {padding:0 15px;color:#666;margin-bottom: 20px;}
.card-list-begin .time {color:#999;overflow:hidden;background:#eee;border-radius:50px;padding:5px 10px;display: inline-block;margin:0 15px;}
.card-list-begin:hover {box-shadow:rgba(146, 157, 154, 0.24) 0px 4px 14px 0px;color: inherit;transform: translateY(-10px);}

/* @media screen and (max-width: 1500px) {
    .card-list {width:285px;}
    .card-list .img {height: 160px;}
    .card-list:not(:nth-child(4n)) {margin-right: 20px;}
    .card-list-begin {width:285px;}
    .card-list-begin .img {height: 160px;}
    .card-list-begin:not(:nth-child(4n)) {margin-right: 20px;}
} */