/* Responsive presentation for the existing Peking University sinology pages. */
:is(body:has(> .buju > .head), body:has(> .frmsubmit)) {
  --paper: #f5f1e8;
  --sheet: #fffdf7;
  --ink: #302821;
  --muted: #685b4d;
  --seal: #874832;
  --seal-dark: #6e3326;
  --wood: #382b23;
  --rule: #dfd4c1;
  --wash: #f0e8d8;
  --gutter: clamp(13px, 2.6vw, 30px);
  --sans: "Source Sans 3", "Microsoft YaHei", "PingFang SC", sans-serif;
  --serif: "Noto Serif CJK SC", "Songti SC", SimSun, serif;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.65 var(--sans);
}

.buju, .buju *, .frmsubmit, .frmsubmit *, .fixed-bottom, .fixed-bottom * {
  box-sizing: border-box;
}

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

.buju > .head, .buju > .head > .sf {
  float: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

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

.buju > .menu {
  width: 100%;
  height: auto;
  margin: 0;
  border-bottom: 3px solid var(--seal);
  background: var(--wood);
}

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

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

.buju > .menu td {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ffffff24;
  text-align: center;
}

.buju > .menu td:not(:has(a)):empty {
  display: none;
}

.buju > .menu a {
  display: grid;
  min-height: 50px;
  place-items: center;
  padding: 8px 3px;
  color: #fffaf1;
  font: 600 15px/1.35 var(--sans);
  text-decoration: none;
  transition: background-color .16s ease;
}

.buju > .menu a:is(:hover, :focus-visible) {
  background: var(--seal-dark);
}

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

:is(.menu, .fixed-bottom) a:focus-visible {
  outline-color: #f5d6aa;
  outline-offset: -3px;
}

.buju > .body, .buju > .body > .content, .buju > .body > .content > .content {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.buju > .body {
  margin-top: var(--gutter);
}

.buju .mokuai1 {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--gutter);
  width: 100%;
  height: auto;
  margin: 0;
}

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

.buju .indexalink, .buju .msjieshao1 > div:first-child, .buju .msjieshao2 > div:first-child,
.buju .w:has(> .contentbox) > div[style]:has(+ .contentbox) {
  min-height: 46px;
  height: auto !important;
  margin: 0;
  border-top: 2px solid var(--seal);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  background: var(--wash) !important;
}

.buju .indexalink > :is(div, span), .buju .msjieshao1 > div:first-child > span,
.buju .msjieshao2 > div:first-child > span,
.buju .w:has(> .contentbox) > div[style]:has(+ .contentbox) > div {
  float: none !important;
  display: block;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 16px;
}

.buju .indexalink span, .buju .indexalink a,
.buju .msjieshao1 > div:first-child span, .buju .msjieshao2 > div:first-child span,
.buju .w:has(> .contentbox) > div[style]:has(+ .contentbox) :is(span, a) {
  margin: 0 !important;
  color: var(--seal-dark) !important;
  font: 700 18px/1.5 var(--serif) !important;
}

.buju .indexalink img, .buju .msjieshao1 > div:first-child img,
.buju .msjieshao2 > div:first-child img,
.buju .w:has(> .contentbox) > div[style]:has(+ .contentbox) img {
  display: none;
}

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

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

.buju .mokuai1 > .rightmk > .indexalink > div {
  grid-row: 1;
  min-height: 46px;
  border-top: 2px solid var(--seal);
  border-bottom: 1px solid var(--rule);
  background: var(--wash);
}

.buju .mokuai1 > .rightmk > .indexalink > div + div,
.buju .mokuai1 > .rightmk > .mk_content + .mk_content {
  border-left: 1px solid var(--rule);
}

.buju .mokuai1 > .rightmk > .mk_content {
  grid-row: 2;
  display: block;
}

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

.buju .mokuai1:last-child > .rightmk > :is(.indexalink > .hide, .mk_content.hide) {
  display: none;
}

.buju .mk_content {
  float: none;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0 16px 10px;
  background: var(--sheet);
}

.buju .mk_content li {
  height: auto !important;
  min-height: 38px;
  margin: 0;
  border-bottom: 1px solid var(--rule) !important;
  line-height: 1.55 !important;
}

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

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

.buju :is(.mk_content, .articlelist, .contentbox) a:is(:hover, :focus-visible) {
  color: var(--seal-dark);
  text-decoration: underline;
  text-underline-offset: .22em;
}

.buju .mokuai1:first-child > .msjieshao .mk_content {
  padding: 0;
}

.buju .msjieshao #UrlSlidePic1 {
  display: block;
}

.buju .msjieshao #ImgSlidePic1 {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 29 / 25;
  object-fit: contain;
  background: var(--wash);
}

.buju .msjieshao #UrlSlidePic1 + br {
  display: none;
}

.buju .msjieshao #TitleSlidePic1 a {
  display: block;
  padding: 10px 16px;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.5;
}

.buju .midgg {
  float: none;
  width: 100%;
  height: auto;
  margin: var(--gutter) 0;
}

.buju .midgg img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.buju > .w:has(> .w > .lanmucontent) {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--gutter);
  width: 100% !important;
  margin: var(--gutter) 0 0 !important;
  overflow: visible !important;
}

.buju > .w:has(> .w > .lanmucontent) > :is(.hide, .w) {
  float: none !important;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  margin: 0;
}

.buju > .hide:has(+ .w > .contentbox) {
  float: left !important;
  width: 25% !important;
  min-width: 0;
  height: auto !important;
  margin-top: var(--gutter);
}

.buju > .w:has(> .contentbox) {
  float: right !important;
  width: calc(75% - var(--gutter)) !important;
  min-width: 0;
  margin-top: var(--gutter);
}

.buju > .w:has(> .links) {
  clear: both;
  float: none !important;
  display: flow-root;
  width: 100% !important;
}

.buju :is(.msjieshao1, .msjieshao2) {
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  color: var(--ink);
  background: var(--sheet);
}

.buju :is(.msjieshao1, .msjieshao2) table {
  width: 100% !important;
  border-collapse: collapse;
}

.buju .msjieshao1 table a {
  display: inline-block;
  max-width: 100%;
  padding: 5px 6px;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.buju :is(.msjieshao1, .msjieshao2) :is(img, a) {
  max-width: 100%;
}

.buju :is(.w:has(> .lanmucontent), .body > .content) > div:first-child:not([class]) {
  display: flex;
  align-items: center;
  min-height: 42px;
  height: auto !important;
  padding: 7px 16px;
  color: var(--muted);
  background: var(--wash) !important;
}

.buju :is(.w:has(> .lanmucontent), .body > .content) > div:first-child:not([class]) :is(div, span) {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  color: var(--seal-dark) !important;
  background: none !important;
  font: 600 14px/1.5 var(--sans) !important;
}

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

.buju :is(.lanmucontent, .contentbox) {
  float: none;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0 0 18px;
  padding: 0 clamp(12px, 2vw, 24px) 14px;
  border: 0;
  background: var(--sheet);
}

.buju :is(.lanmucontent, .contentbox) > ul {
  width: auto;
  margin: 0;
  padding: 0;
}

.buju .articlelist > ul {
  width: 100%;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.buju .articlelist li, .buju .contentbox li {
  float: none;
  width: auto;
  min-width: 0;
  height: auto !important;
  margin: 0;
  color: var(--muted);
  font: 15px/1.65 var(--sans) !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.buju :is(.articlelist, .contentbox) li a {
  color: var(--ink);
  font: 650 16px/1.5 var(--sans) !important;
}

.buju .articlelist li:first-child {
  margin-bottom: 4px;
}

.buju .contentbox li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule) !important;
}

.buju .contentbox li > span {
  display: block;
  margin: 3px 0 0 !important;
  color: var(--muted) !important;
  font-size: 13px;
}

.buju #fenye {
  float: none;
  width: auto;
  height: auto;
  padding: 12px 0 0;
  color: var(--muted);
  font: 14px/2 var(--sans);
  text-align: left !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.buju #fenye :is(a, select) {
  display: inline-block;
  max-width: 100%;
  min-height: 34px;
  padding: 2px 7px;
  color: var(--seal-dark);
}

.buju > .body > .content > .content {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
  background: var(--sheet);
}

.buju .arttitle {
  float: none;
  width: auto;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  text-align: center;
}

.buju .arttitle :is(h1, h2, h3) {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--wood);
  font: 700 clamp(22px, 3vw, 34px)/1.42 var(--serif) !important;
  overflow-wrap: anywhere;
}

.buju .info {
  float: none;
  width: auto;
  height: auto;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  text-align: center;
}

.buju .articlemain {
  float: none;
  width: 100%;
  height: auto;
  min-width: 0;
  padding: 0 !important;
  color: var(--ink);
  font: 16px/1.8 var(--sans) !important;
  text-indent: 0 !important;
  overflow-wrap: anywhere;
}

.buju .articlemain :is(.content, #MyContent, table, img, video, iframe) {
  min-width: 0;
  max-width: 100% !important;
}

.buju .articlemain :is(img, video) {
  height: auto !important;
}

.buju .articlemain :is(pre, code) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.buju .next_pro {
  float: none;
  width: 100%;
  height: auto;
  margin: 18px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
}

.buju .next_pro li {
  float: none;
  width: auto;
  height: auto;
  padding: 3px 0;
  color: var(--muted);
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}

.buju #site-registration, .buju .line_baoming {
  max-width: 100%;
  margin: 22px auto 0;
  border-color: var(--rule);
}

.buju #site-registration :is(.sr-heading, button) {
  background: var(--seal-dark);
}

.buju .line_baoming table {
  width: 100% !important;
  max-width: 100%;
}

.buju .line_baoming > div:first-child {
  min-height: 42px;
  height: auto !important;
  padding: 8px 10px;
  color: var(--seal-dark) !important;
  background: var(--wash) !important;
  line-height: 1.5 !important;
}

.buju .line_baoming td {
  padding: 5px 8px;
}

.buju .line_baoming input:not([type=hidden]) {
  max-width: 100%;
  min-height: 38px;
}

.buju .line_baoming input[type=submit] {
  width: auto;
  padding: 8px 20px;
  border: 0;
  color: #fff;
  background: var(--seal-dark);
}

.buju :is(.links, .footer) {
  float: none;
  width: 100%;
  height: auto;
  margin: 12px 0 0;
  padding: 0;
  color: var(--muted);
}

.buju .links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  align-items: baseline;
}

.buju .links li {
  float: none;
  height: auto;
  margin: 0;
  padding: 0;
}

.buju .links table {
  max-width: 100%;
  border-collapse: collapse;
}

.buju .links td {
  width: auto;
  padding: 4px;
  overflow-wrap: anywhere;
}

.buju .footer {
  padding: 15px 0 24px;
  border: 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  line-height: 1.65;
}

body:has(> .frmsubmit) {
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
  min-height: 100svh;
  padding: var(--gutter) var(--gutter) 78px;
  overflow: visible;
  text-align: center;
}

body:has(> .frmsubmit) > :is(.logo, .frmsubmit, .about) {
  box-sizing: border-box;
  float: none;
  width: min(100%, 570px);
  height: auto;
  margin-inline: auto;
}

body > .logo:has(+ .frmsubmit) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
}

body > .frmsubmit {
  padding: clamp(14px, 4vw, 30px) !important;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--seal);
  color: var(--ink);
  background: var(--sheet) !important;
  text-align: left;
}

.frmsubmit > h2 {
  color: var(--seal-dark);
  background: var(--wash);
  font: 700 24px/1.5 var(--serif);
}

.frmsubmit #frmOrder {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.frmsubmit #frmOrder > div {
  display: grid;
  gap: 4px;
  width: 100%;
  height: auto;
  margin: 0 0 13px;
  padding: 0;
}

.frmsubmit #frmOrder > div > span {
  float: none;
  width: auto;
  height: auto;
  color: var(--ink);
  font: 600 15px/1.4 var(--sans);
}

.frmsubmit #frmOrder input[type=text] {
  float: none;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: #fff;
  font: 16px var(--sans);
}

.frmsubmit #frmOrder #btn-submit {
  float: none;
  width: 100%;
  min-height: 46px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: var(--seal-dark);
  font: 650 16px var(--sans);
}

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

.fixed-bottom {
  box-sizing: border-box;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: 100vw;
  height: auto;
  padding: 0 0 env(safe-area-inset-bottom);
  background: var(--wood);
}

.fixed-bottom > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 0;
}

.fixed-bottom > ul > li {
  display: block;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ffffff26;
}

.fixed-bottom > ul > li:last-child {
  border-right: 0;
  background: var(--seal-dark);
}

.fixed-bottom > ul > li > a {
  display: grid;
  min-height: 54px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 3px 0;
  color: #fff;
  line-height: 1.3;
  text-decoration: none;
}

.fixed-bottom img {
  width: 20px;
  height: 20px;
  margin: 0;
  object-fit: contain;
}

.fixed-bottom p {
  margin: 0;
  color: #fff;
  font-size: 12px;
}

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

body:has(> .frmsubmit) > .fixed-bottom a > img {
  display: none;
}

body:has(> .frmsubmit) > .fixed-bottom a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--shortcut-image) center / contain no-repeat;
}

body:has(> .frmsubmit) > .fixed-bottom > ul:has(> li > a[href="/bmzx_1176.html"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:has(> .frmsubmit) > .fixed-bottom > ul > li:has(> a[href="/bmzx_1176.html"]) {
  display: none;
}

body:has(> .frmsubmit) > .fixed-bottom > ul > li:has(+ li > a[href="/bmzx_1176.html"]) {
  border-right: 0;
}

body:has(> .frmsubmit) > .fixed-bottom li:nth-child(1) {
  --shortcut-image: url("https://www.chinalearning.cn/Template/EMBA/images/20201..png");
}

body:has(> .frmsubmit) > .fixed-bottom li:nth-child(2) {
  --shortcut-image: url("https://www.chinalearning.cn/Template/EMBA/images/20202.png");
}

body:has(> .frmsubmit) > .fixed-bottom li:nth-child(3) {
  --shortcut-image: url("https://www.chinalearning.cn/Template/EMBA/images/20203.png");
}

body:has(> .frmsubmit) > .fixed-bottom li:nth-child(4) {
  --shortcut-image: url("https://www.chinalearning.cn/Template/EMBA/images/20204.png");
}

@media (max-width: 900px) {
  .buju > .w:has(> .w > .lanmucontent) {
    grid-template-columns: minmax(0, 1fr);
  }

  .buju > .w:has(> .w > .lanmucontent) > .hide,
  .buju > .hide:has(+ .w > .contentbox) {
    display: none;
  }

  .buju > .w:has(> .contentbox) {
    float: none !important;
    width: 100% !important;
  }
}

@media (max-width: 680px) {
  body > .buju:has(> .head) {
    width: calc(100% - 2 * var(--gutter));
    margin-top: 10px;
  }

  body:has(.fixed-bottom) > .buju {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

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

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

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

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

  .buju .mokuai1 > .rightmk > .indexalink > div,
  .buju .mokuai1 > .rightmk > .mk_content {
    grid-row: auto;
  }

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

  .buju .mokuai1 > .rightmk > :is(.indexalink > div + div, .mk_content + .mk_content) {
    border-left: 0;
  }

  .buju .msjieshao #ImgSlidePic1 {
    max-height: 240px;
  }

  .buju .links table :is(tbody, tr) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
  }

  .buju .articlemain table {
    display: block;
    overflow-x: auto;
  }

  .buju .line_baoming {
    display: block;
  }

  .buju .line_baoming table {
    table-layout: fixed;
  }

  .buju .line_baoming td:first-child:not([colspan]) {
    width: 56px;
    padding-right: 4px;
    white-space: nowrap;
  }

  .buju .line_baoming input[type=text] {
    width: calc(100% - 14px) !important;
  }

  .fixed-bottom {
    display: block;
  }
}

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