* {
  box-sizing: border-box;
}

/* @font-face {
    font-family: 'HarmonyOS_Sans_SC_Regular';
    src: url(./HarmonyOS_Sans_SC_Regular.ttf);
}

@font-face {
    font-family: 'HarmonyOS_Sans_SC_Medium';
    src: url(./HarmonyOS_Sans_SC_Medium.ttf);
}

@font-face {
    font-family: 'HarmonyOS_Sans_SC_Bold';
    src: url(./HarmonyOS_Sans_SC_Bold.ttf);
} */

html {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-family: "HarmonyOS_Sans_SC_Regular";
  background: transparent;
}

main {
  --background-color: #fff;
  --color: #000;
}

@media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) {
  main {
    --background-color: #fff;
    --color: #000;
    --list-decoration: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAACxJREFUKFNjZCASMBKpjoE2Co3xWH8WJgeyuoGBgaEeh2K402jjRqJCiGirAaz0AgtWTL3oAAAAAElFTkSuQmCC) !important;
  }
}

@media (prefers-color-scheme: dark) {
  main {
    --background-color: #262626;
    --color: #fff;
    --list-decoration: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAEJJREFUKFNjZCASMBKpjoFGCv///2+MwwlsjIyMx0FyYKv/////H4fCRkZGxga4Qlwe+v//PxcjI+M3ggqRDaC+rwGI+A0L1kLhTgAAAABJRU5ErkJggg==) !important;
  }
}

body {
  width: 100%;
  max-width: 680px;
  overflow: hidden;
  margin: 0 auto;
}

@media screen and (max-width: 800px) {
  body {
    margin: 0;
  }
}

main {
  background-color: var(--background-color);
  color: var(--color);
  padding: 33px 55px;
  border-radius: 12px;
}

@media screen and (max-width: 800px) {
  main {
    padding: 33px 52px;
  }
}

html {
  /* 标题字体大小 */
  --h1-font-size: 20px;
  --h2-font-size: 16px;
  --h3-font-size: 14px;
  --h4-font-size: 14px;
  /* 正文字体大小 */
  --paragraph-font-size: 14px;
}

/* 一级目录 */
.topictitle1 {
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-weight: 500;
  font-size: var(--h1-font-size);
  margin-top: 0;
  margin-bottom: 1.4em;
}

/* 二级目录 */
.sectiontitle {
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-weight: 500;
  font-size: var(--h2-font-size);
  margin-bottom: 17px;
}

/* 三级目录/小标题 */
.b.ph.h3 {
  display: inline-block;
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-weight: 500;
  margin-top: 0.66em;
  margin-bottom: 0.66em;
  font-size: var(--h3-font-size);
}

.b.ph.h4 {
  display: inline-block;
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-weight: 500;
  margin-top: 0.66em;
  margin-bottom: 0.66em;
  font-size: var(--h4-font-size);
}

.b {
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-weight: 500;
}

/* 正文 */
p,
.p {
  font-size: var(--paragraph-font-size);
  line-height: 1.8;
  margin-block-start: 0;
  margin-block-end: 0;
  text-align: justify;
}

/* 一类icon规格 */
.image.icon1 {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border-radius: 0;
}

/* 二类icon规格 */
.image.icon2 {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  border-radius: 0;
}

/* 链接样式 */
.xref {
  color: #317af7 !important;
  opacity: 100%;
}

.video {
  /* height: 400px; */
  text-align: center;
  padding: 20px 10px;
  margin: 30px 0;
}

video {
  width: 100%;
  border-radius: 10px;
  object-fit: contain;
  background: black;
}

.video .xref {
  display: none;
}

/* 图片样式 */
img {
  max-width: 100%;
  margin: 10px 0;
  border-radius: 10px;
  overflow: hidden;
}

img.allspan {
  width: 100%;
}

img.span {
  width: 50%;
}

p img {
  margin: 0;
}

figure {
  margin: 0;
}

/* 表格样式 */
.table {
  border: 1px solid #666;
  border-collapse: collapse;
  width: 100%;
}

th,
th .p {
  font-family: "HarmonyOS_Sans_SC_Bold" !important;
  font-weight: bold;
}

th,
td {
  border: 1px solid #666;
  height: 36px;
  text-align: center;
  vertical-align: middle;
}

th.align-center p,
td.align-center p {
  text-align: center !important;
}

th.align-left p,
td.align-left p {
  text-align: left !important;
}

th.align-right p,
td.align-right p {
  text-align: right !important;
}

/* 提示框 */
.note {
  margin: 20px 0;
  /* display: flex; */
}

.note > span {
  display: block;
  font-size: 20px;
  width: 91px;
  top: 3px;
  position: relative;
}

.note > p {
  vertical-align: middle;
  display: inline;
  line-height: initial;
  padding: 8px 16px;
}

.note ol,
.note ul {
  margin: 8px 0 !important;
  margin-top: 0 !important;
  font-size: var(--paragraph-font-size);
  padding-inline-start: 20px;
}

.note.indent-level1 {
  position: relative;
  width: calc(100% + 40px);
  left: -40px;
}

.note.indent-level2 {
  position: relative;
  width: calc(100% + 80px);
  left: -80px;
}

.task .note.indent-level1 {
  width: calc(100% + 30px);
  left: -30px;
}

.task .note.indent-level2 {
  width: calc(100% + 60px);
  left: -60px;
}

.note .note__title {
  visibility: hidden;
}

.note .note__title::before,
.note .note__title::after {
  visibility: visible;
}

.note .note__title::after {
  position: absolute;
  left: 22px;
  top: 3px;
}

.note.danger .note__title::before {
  background-image: url(../icon/cn/danger.svg);
  content: " ";
  background-size: 100%;
  background-repeat: no-repeat;
  height: 20px;
  width: 56px;
  position: absolute;
  top: -1px;
  left: 0;
}

.note.warning .note__title::before {
  background-image: url(../icon/cn/warning.svg);
  content: " ";
  background-size: 100%;
  background-repeat: no-repeat;
  height: 20px;
  width: 56px;
  position: absolute;
  top: -1px;
  left: 0;
}

.note.attention .note__title::before {
  content: "";
  background-image: url(../icon/note.png);
  background-size: 16px 16px;
  margin-left: 3px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  width: 16px;
}

.note.attention .note__title::after {
  content: "注意";
  font-size: 14px;
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-weight: 500;
}

.note.tip .note__title::before {
  content: "";
  background-image: url(../icon/tip.png);
  background-size: 16px 16px;
  margin-left: 3px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  width: 16px;
}

.note.tip .note__title::after {
  content: "提示";
  font-size: 14px;
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-weight: 500;
}

.note.danger .note__title:lang(tc)::before {
  content: "";
  background-image: url(../icon/tc/danger.svg);
}

.note.warning .note__title:lang(tc)::before {
  content: "";
  background-image: url(../icon/tc/warning.svg);
}

.note.danger .note__title:lang(ar)::before {
  content: "";
  background-image: url(../icon/ar/danger.svg);
  right: 0;
}

.note.warning .note__title:lang(ar)::before {
  content: "";
  background-image: url(../icon/ar/warning.svg);
  right: 0;
}
.note .note__title:lang(ar)::after {
  right: 22px;
}
.note.attention .note__title:lang(ar)::after {
  content: "ملاحظة";
}

.note.tip .note__title:lang(ar)::after {
  content: "تلميح";
}

.note.danger .note__title:lang(en)::before {
  content: "";
  background-image: url(../icon/en/danger.svg);
  height: 20px;
  width: 82px;
}

.note.warning .note__title:lang(en)::before {
  content: "";
  background-image: url(../icon/en/warning.svg);
  height: 20px;
  width: 84px;
}
.note.attention .note__title:lang(en)::after {
  content: "Attention";
}

.note.tip .note__title:lang(en)::after {
  content: "Tips";
}

.note.danger .note__title:lang(pt)::before {
  content: "";
  background-image: url(../icon/pt/danger.svg);
  height: 20px;
  width: 77px;
}

.note.warning .note__title:lang(pt)::before {
  content: "";
  background-image: url(../icon/pt/warning.svg);
  height: 20px;
  width: 62px;
}
.note.attention .note__title:lang(pt)::after {
  content: "Cuidado";
}

.note.tip .note__title:lang(pt)::after {
  content: "Dica";
}

.note.danger .note__title:lang(ru)::before {
  content: "";
  background-image: url(../icon/ru/danger.svg);
  height: 20px;
  width: 101px;
}

.note.warning .note__title:lang(ru)::before {
  content: "";
  background-image: url(../icon/ru/warning.svg);
  height: 20px;
  width: 147px;
}
.note.attention .note__title:lang(ru)::after {
  content: "Внимание";
}

.note.tip .note__title:lang(ru)::after {
  content: "Подсказки";
}
.note.danger .note__title:lang(es)::before {
  content: "";
  background-image: url(../icon/sp/danger.svg);
  height: 20px;
  width: 84px;
}

.note.warning .note__title:lang(es)::before {
  content: "";
  background-image: url(../icon/sp/warning.svg);
  height: 20px;
  width: 62px;
}
.note.attention .note__title:lang(es)::after {
  content: "Cuidado";
}

.note.tip .note__title:lang(es)::after {
  content: "Sugerencia";
}
.note.danger .note__title:lang(th)::before {
  content: "";
  background-image: url(../icon/th/danger.svg);
  height: 20px;
  width: 77px;
}

.note.warning .note__title:lang(th)::before {
  content: "";
  background-image: url(../icon/th/warning.svg);
  height: 20px;
  width: 74px;
}
.note.attention .note__title:lang(th)::after {
  content: "ข้อควรระวัง";
}

.note.tip .note__title:lang(th)::after {
  content: "ข้อบ่งชี้";
}

.note > .p {
  padding: 0 !important;
}

/* 多层用户指引样式 */
.menucascade {
  /* color: var(--primary-color) !important; */
}

.uicontrol img {
  vertical-align: top !important;
  line-height: 33px;
}

.taskbody {
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);

  font-family: "HarmonyOS_Sans_SC_Bold";
  font-weight: bold;
}

.taskbody img {
  margin: 0;
}

.steps {
  padding-inline-start: 30px;
}

ol.steps,
ul.steps {
  margin-block-start: 0 !important;
  margin-block-end: 0.5em !important;
}

figcaption {
  font-family: "HarmonyOS_Sans_SC_Bold";
  font-weight: bold;
  font-style: normal;
  font-size: var(--paragraph-font-size);
}

.fig--title-label,
.table--title-label {
  display: none;
}

caption {
  text-align: left !important;
}

table caption .title {
  font-family: "HarmonyOS_Sans_SC_Bold";
  font-weight: bold;
  font-style: normal;
  font-size: var(--paragraph-font-size);
}

.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

ul {
  padding-inline-start: 20px;
  margin-block: 10px;
}

ol {
  padding-inline-start: 20px;
  margin-block: 10px;
}

*:not(ul) ul ul ul {
  list-style-image: initial !important;
}

ul {
  list-style-type: disc !important;
}

ul ul {
  list-style-image: var(--list-decoration);
}

.note.tip .image.icon1,
.note.tip .image.icon2 {
  margin-left: 5px !important;
}

/* 一级标题后的内容容器内的第一个元素取消上边距 */
.body > *:first-child {
  margin-top: 0 !important;
}

.body > *:first-child > *:first-child {
  margin-top: 0 !important;
}

/* 二级标题后的内容容器内的第一个元素取消上边距 */
h2 + * > *:first-child {
  margin-top: 0 !important;
}

ol + .note,
ul + .note {
  margin-top: 10px;
}