:root {
  --canvas: #f6f3f1;
  --paper: #fffdfa;
  --wash: #f4ebe8;
  --ink: #2d2525;
  --muted: #645856;
  --line: #e5d9d5;
  --wine: #6d1828;
  --wine-dark: #431522;
  --gutter: clamp(12px, 2.1vw, 28px);
  --site: 1160px;
  --sans: "Instrument Sans", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

html {
  background: var(--canvas);
}

body {
  color: var(--ink);
  background: var(--canvas);
  font: 16px/1.6 var(--sans);
}

body > .hide:has(> img[src="/Template/wx.jpg"]) {
  display: none !important;
}

.buju,
.buju *,
body:has(> .frmsubmit),
body:has(> .frmsubmit) * {
  box-sizing: border-box;
}

body > .buju {
  width: min(var(--site), calc(100% - var(--gutter) * 2));
  margin: var(--gutter) auto 0;
  padding: 0;
  overflow: visible;
}

.buju a,
.buju a:visited {
  color: inherit;
}

.buju a:focus-visible,
.frmsubmit :is(a, input):focus-visible,
.fixed-bottom a:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}

.buju > .head,
.buju > .head > div,
.buju > .head a {
  display: block;
  float: none;
  width: 100%;
  height: auto;
  margin: 0;
}

.buju > .head img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.buju > .menu {
  width: 100%;
  height: auto;
  margin: 0;
  background: var(--wine-dark);
}

.buju > .menu :is(table, tbody) {
  display: block;
  width: 100%;
  height: auto !important;
  margin: 0;
}

.buju > .menu tr {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.buju > .menu td {
  display: block;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-inline-end: 1px solid #fff2;
}

.buju > .menu a {
  display: grid;
  height: 100%;
  min-height: 48px;
  padding: 8px 4px;
  place-items: center;
  color: #fff;
  font: 650 15px/1.25 var(--sans);
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color .16s ease;
}

.buju > .menu td:last-child a,
.buju > .menu a:is(:hover, :focus-visible) {
  background: var(--wine);
}

.buju > .menu a:focus-visible,
.fixed-bottom a:focus-visible {
  outline-color: #fff;
  outline-offset: -3px;
}

.buju > .body {
  width: 100%;
  min-width: 0;
  height: auto;
  margin: var(--gutter) 0 0;
  padding: 0;
  line-height: inherit;
}

.buju > .body > .mokuai1 {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.5fr);
  gap: var(--gutter);
  width: 100%;
  height: auto;
  margin: 0 0 var(--gutter);
}

.buju .mokuai1 > :is(.msjieshao, .rightmk) {
  float: none;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  background: var(--paper);
}

.buju .mokuai1 > .rightmk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.buju .mokuai1 > .rightmk > .indexalink {
  display: contents;
}

.buju .mokuai1 > .rightmk > .indexalink > div {
  grid-row: 1;
}

.buju .mokuai1 > .rightmk > :not(.indexalink) {
  grid-row: 2;
  display: block;
  float: none !important;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  margin: 0;
}

.buju .mokuai1 > .rightmk > :is(.indexalink > div + div, :not(.indexalink) + :not(.indexalink)) {
  border-inline-start: 1px solid var(--line);
}

.buju :is(.mokuai1 > .msjieshao > .indexalink, .mokuai1 > .rightmk > .indexalink > div,
  .right_mode > div:first-child, .msjieshao1 > div:first-child) {
  min-height: 48px;
  height: auto !important;
  padding: 10px 16px;
  border-top: 2px solid var(--wine);
  border-bottom: 1px solid var(--line);
  color: var(--wine-dark);
  background: var(--wash) !important;
}

.buju :is(.indexalink, .right_mode > div:first-child, .msjieshao1 > div:first-child) > :is(div, span) {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
}

.buju .mokuai1 > .rightmk > .indexalink > div {
  background: var(--wash) !important;
}

.buju :is(.indexalink, .right_mode > div:first-child, .msjieshao1 > div:first-child) :is(span, a) {
  margin: 0 !important;
  color: var(--wine-dark) !important;
  font: 700 18px/1.45 var(--sans) !important;
}

.buju :is(.indexalink, .right_mode > div:first-child, .msjieshao1 > div:first-child) img[src$="/1_06.gif"],
.buju .indexalink img[src$="images/1_06.gif"] {
  display: none;
}

.buju .mk_content {
  float: none;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0 16px 8px;
}

.buju .mk_content li,
.buju .licontent {
  height: auto !important;
  margin: 0;
  border-bottom: 1px solid var(--line) !important;
  line-height: 1.5 !important;
}

.buju .mk_content li:last-child {
  border-bottom: 0 !important;
}

.buju .mk_content li > a {
  display: block;
  min-height: 41px;
  padding: 8px 0;
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  overflow-wrap: anywhere;
}

.buju .mokuai1 > .rightmk > .w {
  padding: 10px;
}

.buju .mokuai1 > .rightmk > .w table {
  width: 100%;
  height: auto;
  table-layout: fixed;
  border-spacing: 6px;
}

.buju .mokuai1 .imgdiv {
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

.buju .mokuai1 .imgdiv img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--wash);
}

.buju .mokuai1 .w td {
  color: var(--muted);
  font: 14px/1.4 var(--sans);
}

.buju > .body:has(> .right_mode) {
  display: grid;
  grid-template-columns: minmax(200px, .85fr) minmax(0, 2.5fr);
  gap: var(--gutter);
}

.buju > .body:has(> .right_mode) > .hide,
.buju .right_mode,
.buju .msjieshao1 {
  float: none !important;
  width: auto !important;
  min-width: 0;
}

.buju .msjieshao1,
.buju .right_mode,
.buju .body > .content > .content {
  margin: 0 0 var(--gutter);
  background: var(--paper);
}

.buju .msjieshao1 .text_left {
  width: auto;
  height: auto;
  padding: 14px 16px;
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.buju .msjieshao1 .text_left p {
  margin: 0 0 8px;
}

.buju .lanmucontent,
.buju .right_mode > .pic_list {
  width: 100% !important;
  margin: 0;
  padding: 12px clamp(12px, 2.6vw, 26px) 20px;
}

.buju .lanmucontent li {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.buju .lanmucontent li h1 {
  height: auto;
  margin: 0;
  border: 0;
  font: 650 clamp(17px, 1.9vw, 21px)/1.45 var(--sans);
}

.buju .lanmucontent li h1 a {
  display: block;
}

.buju .lanmucontent li span {
  width: auto;
  height: auto;
  padding: 0;
  color: var(--muted);
  font: 15px/1.65 var(--sans);
}

.buju :is(.mk_content, .lanmucontent, .articlemain) a:is(:hover, :focus-visible) {
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.buju .pic_list > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.buju .pic_list li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.buju .pic_list li img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: contain;
  background: var(--wash);
}

.buju :is(#fenye, #page) {
  display: flow-root;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  overflow-wrap: anywhere;
}

.buju #fenye table {
  float: none;
  max-width: 100%;
}

.buju #fenye :is(a, select) {
  display: inline-block;
  float: none;
  width: auto;
  min-width: 28px;
  min-height: 32px;
  padding: 4px 6px;
  line-height: 1.4;
  text-align: center;
}

.buju #fenye a:is(.curr, :hover, :focus-visible) {
  color: #fff;
  background: var(--wine);
}

.buju #fenye .curr font {
  color: inherit;
}

.buju > .body > .content,
.buju > .body > .content > .content {
  float: none;
  width: 100%;
  min-width: 0;
  height: auto;
}

.buju > .body > .content > div:first-child:not([class]) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  height: auto !important;
  margin-bottom: 12px;
  padding: 8px 12px;
  color: var(--muted);
  background: var(--wash);
  font: 14px/1.55 var(--sans);
  overflow-wrap: anywhere;
}

.buju > .body > .content > div:first-child:not([class]) > div {
  float: none !important;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  background: none !important;
  line-height: inherit !important;
}

.buju > .body > .content > div:first-child:not([class]) > div > img {
  display: none;
}

.buju > .body > .content > div:first-child:not([class]) > div > span {
  margin: 0 !important;
  color: var(--wine-dark) !important;
  font: 700 14px/1.55 var(--sans) !important;
}

.buju .body > .content > .content {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(16px, 3.2vw, 44px);
}

.buju .arttitle,
.buju .arttitle :is(h1, h2, h3, .weekly-main-title, .course-sync-title) {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font: 720 clamp(23px, 3.1vw, 35px)/1.38 var(--sans);
  text-align: center;
  overflow-wrap: anywhere;
}

.buju .info,
.buju .weekly-date {
  height: auto;
  margin: 12px 0;
  color: var(--muted);
  font: 14px/1.55 var(--sans);
  text-align: center;
}

.buju .articlemain {
  padding: 12px 0;
  color: var(--ink);
  font: 16px/1.78 var(--sans);
  overflow-wrap: anywhere;
}

.buju .articlemain img {
  max-width: 100%;
  height: auto;
}

.buju .artmainr:empty,
.buju .artmainr:not(:has(a, img, :not(.clear))) {
  display: none;
}

.buju .next_pro,
.buju .next_pro li {
  width: auto;
  height: auto;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.buju #site-registration,
.buju .sr-grid,
.buju .sr-grid > * {
  max-width: 100%;
  min-width: 0;
}

.buju > .footer {
  display: flow-root;
  width: 100%;
  margin: var(--gutter) 0 0;
  padding: 18px clamp(12px, 3.2vw, 32px);
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 14px/1.65 var(--sans);
  text-align: center;
}

.buju > .footer > div:not(.fixed-bottom) {
  float: none !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

.buju > .footer p {
  margin: 5px 0;
}

body > #new-course-original-links-20261023 {
  width: min(var(--site), calc(100% - var(--gutter) * 2));
  margin-inline: auto !important;
  overflow-wrap: anywhere;
}

body:has(> .frmsubmit) {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--gutter) var(--gutter) calc(72px + env(safe-area-inset-bottom));
  overflow: visible;
  font: 16px/1.6 var(--sans);
}

body > .frmsubmit {
  width: min(100%, 560px);
  margin: clamp(12px, 5vh, 48px) auto 0;
  padding: clamp(16px, 4.5vw, 34px) !important;
  border-top: 3px solid var(--wine);
  background: var(--paper) !important;
}

body > .frmsubmit h2 {
  color: var(--wine-dark);
  font: 700 26px/1.35 var(--sans);
}

body > .frmsubmit #frmOrder > div {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) minmax(0, 3fr);
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
}

body > .frmsubmit #frmOrder span {
  width: auto;
}

body > .frmsubmit #frmOrder input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  font: inherit;
}

body > .frmsubmit #frmOrder input[type="submit"] {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 46px;
  margin: 0;
  color: #fff;
  background: var(--wine);
  font: 650 16px/1.4 var(--sans);
}

body > .about {
  color: var(--muted);
}

body:has(> .frmsubmit) > .fixed-bottom {
  width: min(100%, 560px);
  max-width: 100%;
  inset-inline: 0;
  margin: 0 auto;
}

@media (max-width: 680px) {
  body > .buju {
    margin-top: 10px;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }

  .buju > .menu tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .buju > .menu td.hide {
    display: none;
  }

  .buju > .menu td:nth-child(n + 5) {
    border-top: 1px solid #fff2;
  }

  .buju > .menu a {
    min-height: 45px;
    font-size: 14px;
  }

  .buju > .body > .mokuai1,
  .buju .mokuai1 > .rightmk {
    grid-template-columns: minmax(0, 1fr);
  }

  .buju .mokuai1 > .msjieshao .mk_content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }

  .buju .mokuai1 > .rightmk > .indexalink > div,
  .buju .mokuai1 > .rightmk > :not(.indexalink) {
    grid-row: auto;
    display: block;
    border-inline-start: 0;
  }

  .buju .mokuai1 > .rightmk > .indexalink > div:first-child { order: 0; }
  .buju .mokuai1 > .rightmk > :not(.indexalink, .hide) { order: 1; }
  .buju .mokuai1 > .rightmk > .indexalink > .hide { order: 2; }
  .buju .mokuai1 > .rightmk > .hide { order: 3; }

  .buju > .body:has(> .right_mode) {
    grid-template-columns: minmax(0, 1fr);
  }

  .buju > .body:has(> .right_mode) > .hide {
    display: none;
  }

  .buju .articlemain table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .buju .articlemain table :is(td, th) {
    overflow-wrap: anywhere;
  }

  body > #new-course-original-links-20261023 {
    margin-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 680px) {
  .buju .fixed-bottom,
  body:has(> .frmsubmit) > .fixed-bottom {
    display: block;
    position: fixed;
    width: auto;
    max-width: 100%;
    inset-inline: 0;
    bottom: 0;
    z-index: 100;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    color: #fff;
    background: var(--wine-dark);
  }

  .fixed-bottom ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
  }

  .fixed-bottom ul > li {
    display: block;
    width: auto;
    border-inline-end: 1px solid #fff2;
  }

  .fixed-bottom ul > li > a {
    display: grid;
    min-height: 54px;
    align-content: center;
    justify-items: center;
    gap: 2px;
    padding: 4px 1px;
    color: #fff;
    font: 600 12px/1.25 var(--sans);
    text-align: center;
  }

  .fixed-bottom ul > li img {
    display: block;
    width: 18px;
    height: 18px;
  }

  .fixed-bottom ul > li:last-child {
    background: var(--wine);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buju > .menu a { transition: none; }
}