/* Waterbear DETAIL / PLAY dedicated patch V18 */

/* ========== DETAIL page ========== */
body.wb-detail-page-v18,
body.wb-view-page.wb-detail-page-v18{
  background:#f4f7fb!important;
  color:#0f172a!important;
}
body.wb-detail-page-v18 .top-yey-pc-gl{display:none!important;}
body.wb-detail-page-v18 .mianbaoxiao{
  max-width:1200px!important;
  width:calc(100% - 48px)!important;
  margin:26px auto 12px!important;
  padding:0!important;
  background:transparent!important;
  height:auto!important;
}
body.wb-detail-page-v18 .mianbao-min{
  color:#7b8797!important;
  font-size:13px!important;
  line-height:24px!important;
}
body.wb-detail-page-v18 .mianbao-min a{color:#7b8797!important;}
body.wb-detail-page-v18 .mianbao-min a:hover{color:#16b364!important;}
body.wb-detail-page-v18 .course-head{
  background:transparent!important;
  margin:0!important;
  padding:0!important;
  width:100%!important;
  min-height:0!important;
  border:0!important;
  box-shadow:none!important;
}
body.wb-detail-page-v18 .course-cover.container{
  box-sizing:border-box!important;
  max-width:1200px!important;
  width:calc(100% - 48px)!important;
  min-height:0!important;
  margin:0 auto 24px!important;
  padding:24px!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:24px!important;
  box-shadow:0 18px 48px rgba(15,23,42,.08)!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:30px!important;
  position:relative!important;
  overflow:hidden!important;
  clear:both!important;
}
body.wb-detail-page-v18 .course-cover.container:before{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:240px;
  height:240px;
  background:radial-gradient(circle,rgba(22,179,100,.14),rgba(22,179,100,0) 68%);
  pointer-events:none;
}
body.wb-detail-page-v18 .course-cover.container>.course-thum{
  order:0!important;
  box-sizing:border-box!important;
  flex:0 0 46%!important;
  width:46%!important;
  max-width:520px!important;
  min-width:360px!important;
  height:auto!important;
  float:none!important;
  clear:none!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  overflow:hidden!important;
  border-radius:20px!important;
  background:#eef2f7!important;
  box-shadow:0 14px 32px rgba(15,23,42,.12)!important;
  z-index:1!important;
}
body.wb-detail-page-v18 .course-cover.container>.course-thum img,
body.wb-detail-page-v18 .course-img-bg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:286px!important;
  max-height:330px!important;
  object-fit:cover!important;
  border-radius:20px!important;
  float:none!important;
  margin:0!important;
  position:static!important;
}
body.wb-detail-page-v18 .course-cover.container>.course-info{
  order:1!important;
  flex:1 1 0!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  float:none!important;
  clear:none!important;
  margin:0!important;
  padding:8px 10px 8px 0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  z-index:1!important;
}
body.wb-detail-page-v18 .course-info h1{
  margin:0 0 18px!important;
  padding:0!important;
  color:#0f172a!important;
  font-size:26px!important;
  line-height:1.48!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  text-align:left!important;
  max-width:100%!important;
}
body.wb-detail-page-v18 .course-zj-djl{
  margin:0 0 18px!important;
  padding:0!important;
  color:#64748b!important;
  font-size:14px!important;
  line-height:1.6!important;
}
body.wb-detail-page-v18 .course-zj-djl span{
  display:inline-flex!important;
  align-items:center!important;
  margin:0 12px 6px 0!important;
  padding:0!important;
  color:#64748b!important;
}
body.wb-detail-page-v18 .spk-bq{
  height:26px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:#eef8f2!important;
  color:#12965b!important;
  font-weight:700!important;
}
body.wb-detail-page-v18 .price,
body.wb-detail-page-v18 .price-mf{
  list-style:none!important;
  display:block!important;
  margin:0 0 18px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#16b364!important;
  font-size:30px!important;
  line-height:1.2!important;
  font-weight:850!important;
  text-align:left!important;
}
body.wb-detail-page-v18 .curr-price{
  color:#16b364!important;
  font-size:30px!important;
  font-weight:850!important;
}
body.wb-detail-page-v18 .yey-list-jineuxuexi{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
body.wb-detail-page-v18 .list-kc-goumai,
body.wb-detail-page-v18 .vipxian,
body.wb-detail-page-v18 .huiyuan-mf{
  min-width:180px!important;
  height:48px!important;
  line-height:48px!important;
  padding:0 24px!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#ff7a18,#ff4d1d)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:800!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:0 12px 28px rgba(255,105,24,.28)!important;
}
body.wb-detail-page-v18 .list-kc-goumai:hover,
body.wb-detail-page-v18 .vipxian:hover,
body.wb-detail-page-v18 .huiyuan-mf:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(255,105,24,.34)!important;}
body.wb-detail-page-v18 .yey-kc-yxq{display:none!important;}
body.wb-detail-page-v18 .course-cover-2{
  box-sizing:border-box!important;
  max-width:1200px!important;
  width:calc(100% - 48px)!important;
  margin:0 auto 46px!important;
  padding:0!important;
  display:block!important;
  background:transparent!important;
  min-height:0!important;
  clear:both!important;
}
body.wb-detail-page-v18 .course-cover-fl{
  width:100%!important;
  max-width:none!important;
  float:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}
body.wb-detail-page-v18 .course-cover-fr{display:none!important;}
body.wb-detail-page-v18 .aui-nav-content-box{
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:22px!important;
  box-shadow:0 18px 48px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
  min-height:260px!important;
}
body.wb-detail-page-v18 .aui-nav-list-box{
  height:auto!important;
  background:#fff!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
}
body.wb-detail-page-v18 .aui-nav-list-box ul{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
body.wb-detail-page-v18 .aui-nav-list-box li{
  float:none!important;
  position:relative!important;
  min-width:150px!important;
  height:60px!important;
  line-height:60px!important;
  margin:0!important;
  padding:0 26px!important;
  border-right:1px solid rgba(15,23,42,.06)!important;
  color:#344054!important;
  font-size:16px!important;
  font-weight:800!important;
  text-align:center!important;
  cursor:pointer!important;
  background:#fff!important;
}
body.wb-detail-page-v18 .aui-nav-list-box li.aui-current{
  color:#ff5a1f!important;
  background:linear-gradient(180deg,#fff,#fff7f3)!important;
}
body.wb-detail-page-v18 .aui-nav-list-box li.aui-current:after{
  content:""!important;
  position:absolute!important;
  left:24px!important;
  right:24px!important;
  bottom:0!important;
  height:3px!important;
  border-radius:999px!important;
  background:#ff5a1f!important;
}
body.wb-detail-page-v18 .aui-nav-list-tab{padding:0!important;margin:0!important;}
body.wb-detail-page-v18 .aui-nav-list-item{
  box-sizing:border-box!important;
  padding:26px 28px 36px!important;
  min-height:180px!important;
  background:#fff!important;
}
body.wb-detail-page-v18 .yey-kc-jianjie{
  color:#334155!important;
  font-size:16px!important;
  line-height:1.9!important;
  word-break:break-word!important;
}
body.wb-detail-page-v18 .yey-kc-jianjie h1,
body.wb-detail-page-v18 .yey-kc-jianjie h2,
body.wb-detail-page-v18 .yey-kc-jianjie h3{
  color:#0f172a!important;
  font-weight:850!important;
  margin:0 0 12px!important;
}
body.wb-detail-page-v18 .task-task-list{
  margin:0 0 14px!important;
  padding:0!important;
}
body.wb-detail-page-v18 .task-task-item{
  display:block!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:18px!important;
  box-shadow:0 10px 26px rgba(15,23,42,.04)!important;
  overflow:hidden!important;
  text-decoration:none!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}
body.wb-detail-page-v18 .task-task-item:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(22,179,100,.28)!important;
  box-shadow:0 16px 34px rgba(15,23,42,.08)!important;
}
body.wb-detail-page-v18 .task-tt{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-height:64px!important;
  padding:18px 20px!important;
  overflow:visible!important;
}
body.wb-detail-page-v18 .task-tt-text,
body.wb-detail-page-v18 .task-tt-text-fr{
  float:none!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  color:#344054!important;
  font-size:14px!important;
  line-height:1.5!important;
}
body.wb-detail-page-v18 .task-tt-text{gap:10px!important;font-weight:800!important;}
body.wb-detail-page-v18 .task-tt-text-fr{justify-content:flex-end!important;gap:16px!important;color:#64748b!important;white-space:nowrap!important;}
body.wb-detail-page-v18 .yey-ks{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:64px!important;
  height:30px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  background:#eafaf2!important;
  color:#12a163!important;
  font-size:13px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
body.wb-detail-page-v18 .ke-fufei,
body.wb-detail-page-v18 .keshikan{
  font-style:normal!important;
  color:#ff3b1f!important;
  font-weight:850!important;
}
body.wb-detail-page-v18 .ke-shijian{
  color:#64748b!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums!important;
}

/* ========== PLAY page ========== */
body.wb-play-page-v18{
  background:#0f1115!important;
  color:#e5e7eb!important;
}
body.wb-play-page-v18 .top-menu-wrap{
  background:#fff!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 4px 18px rgba(15,23,42,.06)!important;
}
body.wb-play-page-v18 .top-lesson-list{
  color:#344054!important;
  font-weight:600!important;
}
body.wb-play-page-v18 .top-lesson-list .link{color:#0f172a!important;}
body.wb-play-page-v18 .player-box{background:#07090d!important;}
body.wb-play-page-v18 .yixiaowan-player video{
  width:100%!important;
  height:100%!important;
  background:#000!important;
}
body.wb-play-page-v18 .course-tool{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:8px 12px!important;
  box-sizing:border-box!important;
  background:#05070a!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
body.wb-play-page-v18 .course-tool .click_tishi{
  flex:1!important;
  color:#9ca3af!important;
  line-height:24px!important;
  padding-left:0!important;
  font-size:13px!important;
}
body.wb-play-page-v18 .wb-video-download-btn,
body.wb-play-page-v18 .click_pop{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:34px!important;
  line-height:34px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#16b364,#12a163)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  border:0!important;
  box-shadow:0 10px 22px rgba(18,161,99,.22)!important;
}
body.wb-play-page-v18 .action-bar-wrap{
  background:#1f232a!important;
  border-left:1px solid rgba(255,255,255,.08)!important;
}
body.wb-play-page-v18 .content-list li{
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
body.wb-play-page-v18 .content-list li a{
  color:#d1d5db!important;
  text-decoration:none!important;
}
body.wb-play-page-v18 .content-list li.on,
body.wb-play-page-v18 .content-list li:hover{
  background:rgba(22,179,100,.12)!important;
}
body.wb-play-page-v18 .content-list .name{
  color:#f9fafb!important;
  font-weight:800!important;
  line-height:1.45!important;
}
body.wb-play-page-v18 .content-list .info{
  color:#9ca3af!important;
  font-size:13px!important;
}
body.wb-play-page-v18 .content-list .info span:last-child{font-variant-numeric:tabular-nums!important;}

@media(max-width:980px){
  body.wb-detail-page-v18 .course-cover.container{
    width:calc(100% - 24px)!important;
    flex-direction:column!important;
    gap:20px!important;
    padding:18px!important;
  }
  body.wb-detail-page-v18 .course-cover.container>.course-thum,
  body.wb-detail-page-v18 .course-cover.container>.course-info{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    flex:0 0 auto!important;
  }
  body.wb-detail-page-v18 .course-cover.container>.course-thum img,
  body.wb-detail-page-v18 .course-img-bg{height:auto!important;min-height:0!important;max-height:none!important;}
  body.wb-detail-page-v18 .course-info h1{font-size:22px!important;}
  body.wb-detail-page-v18 .course-cover-2,
  body.wb-detail-page-v18 .mianbaoxiao{width:calc(100% - 24px)!important;}
  body.wb-detail-page-v18 .task-tt{align-items:flex-start!important;flex-direction:column!important;}
  body.wb-detail-page-v18 .task-tt-text-fr{width:100%!important;justify-content:space-between!important;}
  body.wb-play-page-v18 .course-tool{align-items:flex-start!important;flex-direction:column!important;}
}