*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif;
  background:#f7f3ed;color:#302820;padding-bottom:76px;
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{width:min(1120px,calc(100% - 28px));margin:0 auto}

/* Banner */
.nd-banner{position:relative;background:#b31318;overflow:hidden}
.nd-banner>img{display:block;width:100%;height:auto}
.page-return{
  position:absolute;z-index:10;top:18px;
  left:max(16px,calc((100vw - 1120px)/2));
  color:#fff;font-size:15px;font-weight:700;
  text-shadow:0 2px 8px rgba(70,0,0,.55)
}

/* Intro */
.nd-main{padding:22px 0 46px}
.nd-intro{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  padding:22px 24px;margin-bottom:24px;background:#fff;
  border:1px solid #eadbc9;border-radius:16px
}
.nd-intro .eyebrow{font-size:12px;font-weight:900;color:#a71119;letter-spacing:.08em}
.nd-intro h1{margin:7px 0 8px;font-size:28px;line-height:1.3}
.nd-intro p{margin:0;color:#70645c;font-size:14px;line-height:1.75}
.nd-stats{display:flex;gap:10px}
.nd-stat{
  min-width:108px;padding:13px 12px;text-align:center;
  border-radius:12px;background:#fff4e5;color:#a71119
}
.nd-stat strong{display:block;font-size:25px;line-height:1.05}
.nd-stat span{display:block;margin-top:6px;color:#73665c;font-size:11px;font-weight:700}

/* Course grid */
.course-head{display:flex;align-items:end;justify-content:space-between;margin:0 0 14px}
.course-head h2{margin:0;font-size:22px}
.course-head p{margin:4px 0 0;color:#84776e;font-size:12px}
.discount-rule{
  padding:7px 11px;border-radius:999px;background:#b2181f;color:#fff;
  font-size:12px;font-weight:800;white-space:nowrap
}
.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.course-card{
  display:grid;grid-template-columns:188px 1fr;min-width:0;
  overflow:hidden;background:#fff;border:1px solid #e8dccf;border-radius:14px;
  box-shadow:0 5px 16px rgba(72,43,22,.045);transition:.18s ease
}
.course-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(72,43,22,.08)}
.course-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:#eee}
.course-cover img{width:100%;height:100%;display:block;object-fit:cover}
.new-tag,.price-tag{
  position:absolute;top:8px;padding:4px 7px;border-radius:6px;
  color:#fff;font-size:10px;font-weight:900;line-height:1.2
}
.new-tag{left:8px;background:#8e1117}
.price-tag{right:8px;background:#cf2027}
.course-body{display:flex;flex-direction:column;justify-content:space-between;padding:13px 14px}
.course-title{
  margin:0;color:#342a24;font-size:14px;line-height:1.52;font-weight:800;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
}
.course-bottom{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-top:12px}
.course-duration{color:#8a7c72;font-size:11px;white-space:nowrap}
.price-box{text-align:right;white-space:nowrap}
.old-price{display:block;color:#aaa;font-size:10px;text-decoration:line-through}
.nd-price{display:flex;align-items:baseline;justify-content:flex-end;gap:4px}
.nd-price small{color:#c31c23;font-size:9px;font-weight:900}
.nd-price strong{color:#b51119;font-size:19px;line-height:1}

/* QR */
.qr-section{margin-top:34px}
.qr-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 28px;background:#fff;border:1px solid #eadbc9;border-radius:16px
}
.qr-inner h2{margin:0 0 6px;font-size:21px}
.qr-inner p{margin:0;color:#776b62;font-size:13px}
.qr-inner img{width:116px;height:116px;object-fit:contain}

/* Bottom nav */
.bottomNav{
  position:fixed;z-index:1000;left:0;right:0;bottom:0;height:72px;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.985);border-top:1px solid #e8ddd0;
  box-shadow:0 -4px 18px rgba(54,38,25,.06)
}
.bottomNav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:#6c6660;font-size:12px;font-weight:600;background:transparent
}
.bottomNav .navIcon{display:block;width:23px;height:23px;color:inherit}
.bottomNav .navIcon svg{width:100%;height:100%;display:block;fill:#777}
.bottomNav a.active{background:#fff4e7;color:#b11119;font-weight:800}
.bottomNav a.active .navIcon svg{fill:#b11119}

@media(max-width:760px){
  body{padding-bottom:70px}
  .page-return{top:10px;left:13px;font-size:13px}
  .nd-main{padding-top:16px}
  .nd-intro{grid-template-columns:1fr;padding:17px;margin-bottom:18px}
  .nd-intro h1{font-size:21px}
  .nd-intro p{font-size:12px}
  .nd-stats{display:grid;grid-template-columns:repeat(2,1fr)}
  .nd-stat{min-width:0}
  .course-head{align-items:center}
  .course-head h2{font-size:18px}
  .discount-rule{font-size:10px;padding:6px 8px}
  .course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .course-card{display:block;border-radius:10px}
  .course-cover{width:100%;aspect-ratio:16/9}
  .course-body{padding:9px;min-height:125px}
  .course-title{font-size:12px;line-height:1.45;-webkit-line-clamp:3}
  .course-bottom{display:block;margin-top:8px}
  .course-duration{display:block;margin-bottom:7px;font-size:9px}
  .price-box{text-align:left}
  .nd-price{justify-content:flex-start}
  .nd-price strong{font-size:16px}
  .old-price{font-size:9px}
  .qr-inner{padding:18px}
  .qr-inner h2{font-size:18px}
  .qr-inner img{width:92px;height:92px}
  .bottomNav{height:66px}
  .bottomNav .navIcon{width:21px;height:21px}
  .bottomNav a{font-size:11px}
}