.banner {height:495px;background:rgba(38,38,38,1);}
.banner-inner {width:1180px;margin:0 auto;}
.banner-detail {display:flex;}
.banner-detail .cover {width:540px;height:360px;border-radius:10px;margin-right:60px;}
.banner-detail .banner-detail-contnet {height:360px;min-width:500px;}
.banner-detail .banner-detail-contnet .title {color:#F6F6F6;margin-bottom:23px;font-size:28px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.banner-detail .banner-detail-contnet .des {color:#989898;font-size:14px;display:flex;align-items:center;margin-bottom:60px;}
.banner-detail .banner-detail-contnet .des span {width:1px;height:14px;background:rgba(230,230,230,1);display:block;margin:0 20px;}
.banner-detail .banner-detail-contnet .service {display:flex;margin-bottom:57px;}
.banner-detail .banner-detail-contnet .service .price {width:240px;height:115px;background:rgba(51,51,51,1);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:20px;}
.banner-detail .banner-detail-contnet .service .price strong {color:#FD4E4E;font-size:28px;margin-bottom:10px;}
.banner-detail .banner-detail-contnet .service .price p {color:#989898;font-size:14px;}
.banner-detail .banner-detail-contnet .service .total {width:240px;height:115px;background:rgba(51,51,51,1);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.banner-detail .banner-detail-contnet .service .total strong {color:#FD4E4E;font-size:28px;margin-bottom:10px;}
.banner-detail .banner-detail-contnet .service .total p {color:#989898;font-size:14px;}
.banner-detail .banner-detail-contnet .join {display:flex;}
.banner-detail .banner-detail-contnet .join .join-btn {width:160px;height:50px;background:rgba(253,78,78,1);border-radius:10px;text-align:center;line-height:50px;color:#fff;font-size:16px;margin-right:20px;cursor:pointer;}
.banner-detail .banner-detail-contnet .join .ask-btn {text-align:center;line-height:50px;color:#FD4E4E;font-size:16px;width:160px;height:50px;border-radius:10px;cursor:pointer;border:2px solid rgba(253,78,78,1);box-sizing:border-box;}
/* content */
.content {display:flex;justify-content:center;}
.content .content-l {width:840px;margin-right:40px;}
.content .content-l .menu {height:50px;background:rgba(246,246,246,1);border-radius:10px;display:flex;line-height:50px;padding:0 5px;box-sizing:border-box;align-items:center;}
.content .content-l .menu li {width:124px;height:40px;border-radius:6px;color:#4C4C4C;font-size:16px;text-align:center;line-height:40px;cursor:pointer;}
.content .content-l .menu li.cur {background:rgba(253,78,78,1);color:#fff;}
.content .content-l .menu-list {}
.content .content-l .menu-list li.menu-show {display:none;}
.content .content-l .menu-list li.cur {display:block;}
.content .content-r {width:300px;box-sizing:border-box;}
.content .content-r .teacher {background:rgba(246,246,246,1);padding:30px;box-sizing:border-box;border-radius:10px;margin-bottom:56px;}
.content .content-r .teacher .teacher-cover {width:240px;height:200px;background:rgba(255,255,255,1);display:block;border-radius:10px;margin-bottom:25px;}
.content .content-r .teacher .teacher-name {color:#1A1A1A;font-size:16px;font-weight:400;margin-bottom:30px;display:block;text-align:center;}
.content .content-r .teacher .teacher-des {color:#4C4C4C;font-size:14px;line-height:28px;padding-bottom:27px;border-bottom:1px solid #E6E6E6;margin-bottom:30px;}
.content .content-r .teacher .student {}
.content .content-r .teacher .student .student-info {display:flex;align-items:center;position:relative;margin-bottom:16px;}
.content .content-r .teacher .student .student-info .student-cover {width:40px;display:block;height:40px;background:rgba(216,216,216,1);border:1px solid rgba(151,151,151,1);border-radius:50%;margin-right:12px;}
.content .content-r .teacher .student .student-info span {color:#1A1A1A;font-size:14px;}
.content .content-r .teacher .student .student-info .student-ask {width:48px;height:28px;background:rgba(253,78,78,1);border-radius:8px;text-align:center;line-height:28px;color:#fff;font-size:14px;position:absolute;right:0;top:50%;margin-top:-14px;cursor:pointer;}
.content .content-r .teacher .student .student-des {color:#989898;font-size:14px;line-height:28px;}
.course-big-title {display:flex;justify-content:space-between;position:relative;padding-left:16px;margin-bottom:30px;}
.course-big-title::after {content:'';position:absolute;bottom:-15px;top:50%;left:0;height:20px;width:6px;background-color:#FD4E4E;margin-top:-10px;}
.course-big-title strong {color:#333333;font-size:20px;}
/* rank */
.content .content-r .rank {}
.content .content-r .rank ul {}
.content .content-r .rank li {padding-left:64px;position:relative;height:98px;padding-top:20px;box-sizing:border-box;line-height:20px;}
.content .content-r .rank li .rank-cover {width:30px;height:30px;border-radius:50%;display:block;position:absolute;left:22px;top:20px;}
.content .content-r .rank li .ID {color:#1A1A1A;font-size:14px;}
.content .content-r .rank li .time {color:#989898;font-size:12px;}
.content .content-r .rank li .study-student {color:#989898;font-size:12px;}
.content .content-r .rank li .badge {width:32px;height:52px;display:block;position:absolute;right:39px;top:20px;}
.content .content-r .rank li.cur {background:rgba(246,246,246,1);}

.content .menu-list .lession-box{padding:0 2px}
.content .menu-list .lession-box .less-item{margin:8px 0}
.content .menu-list .lession-box .one-nav-box{height:45px;background:#f2f2f2;position:relative}
.content .menu-list .lession-box .one-nav-box .title{position:absolute;left:28px;top:14px;font-size:14px;color:#606060}
.content .menu-list .lession-box .one-nav-box .state{font-size:12px;position:absolute;top:16px;right: 5px;color:#606060;cursor:pointer;display: block;width: 40px;}
.content .menu-list .lession-box .one-nav-box .state span{/* margin:0 6px; */}
.content .menu-list .lession-box .list-box{margin-top:10px;margin-bottom:10px;display:none}
.content .menu-list .lession-box .two-nav-box{position:relative;height:46px}
.content .menu-list .lession-box .two-nav-box .staten{font-size:12px;position:absolute;top:16px;right: 5px;color:#606060;cursor:pointer;display: block;width: 40px;}
.content .menu-list .lession-box .two-nav-box .index{color:#fff;background:#969696;width:17px;height:17px;line-height:17px;text-align:center;position:absolute;left:28px;top:14px;font-size:12px}
.content .menu-list .lession-box .two-nav-box .title{color:#606060;font-size:14px;position:absolute;left:54px;top:13px;font-weight:bold}
.content .menu-list .lession-box .less-item .list-box li{height:40px;position:relative;cursor:pointer}
.content .menu-list .lession-box .less-item .list-box li:hover{background:#FAFAFA}
.content .menu-list .lession-box .less-item .list-box li.active-item{background:#fafafa}
.content .menu-list .lession-box .less-item .list-box li p.title{color:#606060;font-size:12px;position:absolute;top:13px;left:58px}
.content .menu-list .lession-box .list-item .two-nav-box:hover{background:#FAFAFA}
.content .menu-list .lession-box .less-item .list-box li:hover p.title{color:#000}
.content .menu-list .lession-box .less-item .list-box li img.play-mark{position:absolute;top:12px;left:28px}
.content .menu-list .lession-box .less-item .list-box li span.listen-btn{color:#fff;background:#6ad798;font-size:12px;border-radius:10px;padding:2px 12px;margin-left:8px}
.content .menu-list .lession-box .less-item .list-box li p.time{font-size:12px;position:absolute;top:14px;left:640px}
.content .menu-list .lession-box .less-item .list-box li p.time img{margin-right:10px;vertical-align:text-top}
.content .menu-list .lession-box .less-item .list-box li p.view{font-size:12px;position:absolute;top:14px;left:754px}
.content .menu-list .lession-box .less-item .list-box li p.view img{width:18px;margin-right:10px;vertical-align:middle}
.video-new-span{background-color:red;border-radius:10px;color:#fff;width:24px;display:inline-block;text-align:center;height:14px;line-height:12px;vertical-align:middle;font-size:9px;font-weight:normal}