* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", -apple-system, "SF UI Display", ".PingFang SC",
    "PingFang SC", "Neue Haas Grotesk Text Pro", "Arial Nova", "Segoe UI",
    "Microsoft JhengHei", "Helvetica Neue", "Source Han Sans SC",
    "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC",
    "Source Han Sans TC", "Noto Sans CJK TC", "Helvetica", "Hiragino Sans GB",
    sans-serif !important;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.doc {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 70px;
  display: flex;
}

/* 内容 */

.doc .content {
  flex-grow: 1;
  overflow: auto;
  padding: 40px 60px;
  width: calc(100% - 300px);
  margin-left: 300px;
}

/* 内容 - h1标签 */

.doc h1 {
  color: #2c3e50;
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1;
}

/* 内容 - h2标签 */

.doc h2 {
  color: #2c3e50;
  font-size: 22px;
  margin: 40px 0 16px 0;
  font-weight: bold;
  line-height: 1;
}

/* 内容 - h3-6标签 */

.doc h3,
.doc h4 {
  margin: 16px 0;
  font-weight: bold;
  line-height: 3;
}

.doc h5,
.doc h6 {
  line-height: 3;
}

.doc h3 {
  font-size: 1.17em;
}

/* 内容 - p标签 */

.doc .content p {
  color: #2c3e50;
  font-size: 14px;
  margin: 14px 0;
  line-height: 25px;
}

.doc .content strong {
  font-weight: bolder;
  color: maroon;
}

.doc .content p #pathSrc,
.doc .content p #circularSrc,
.doc .content p #areaSrc,
.doc .content p #areaSrcVideo {
  width: 800px;
  height: 600px;
}

/* 内容 - pre标签 */

.doc .content pre {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 20px 35px;
  font-weight: 400;
  background-color: #fafafa;
  font-size: 14px;
  font-family: Menlo, Monaco, consolas, monospace, "Courier New" !important;
}
.doc .language-typescript,
.doc .hljs-title,
.doc .hljs-function,
.doc .hljs-params,
.doc .hljs-keyword,
.doc .hljs-attr,
.doc .hljs-string,
.doc .hljs-number,
.doc .hljs-variable,
.doc .hljs-property,
.doc .hljs-tag,
.doc .hljs-name,
.doc .hljs-comment,
.doc .hljs-built_in,
.doc .hljs-literal,
.doc .hljs-subst {
  font-family: Menlo, Monaco, consolas, monospace, "Courier New" !important;
}

/* 内容 - li 标签 */
.doc li {
  font-size: 14px;
  /* line-height: 24px; */
}

/* 内容 - code 标签 */
.doc code {
  font-size: 14px;
}

/* 内容 - table 标签 */

.doc .content table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
  margin-top: -5px;
  color: #51596d;
  font-size: 14px;
}

.doc .content table th {
  background-color: #bbbbbb;
  border: 1px solid #808695;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.doc .content table td {
  padding: 10px 15px 10px 10px;
  vertical-align: middle;
  border: 1px solid #808695;
  box-sizing: border-box;
}

.doc .video-wrap {
  width: 100%;
  height: 250px;
  overflow: auto;
}

.doc .video-cont {
  height: 100%;
  margin-left: 0 !important;
}

.video-cont li {
  width: 250px;
  float: left;
  height: 100%;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
  list-style: none;
}

.video-cont li video {
  opacity: 0.5;
  width: 100%;
  height: 195px;
  object-fit: fill;
}

.video-cont li:first-child video {
  opacity: 1;
}

.video-cont li img {
  opacity: 0.5;
}
.video-cont li:first-child img {
  opacity: 1;
}

/* 路径视频宽度 */

.video-cont.path-width {
  width: 3120px;
}

/* 特效视频宽度 */

.video-cont.spot-width {
  width: 3900px;
}

/* 圆形区域视频宽度 */

.video-cont.circular-width {
  width: 3120px;
}

/* 区域视频宽度 */

.video-cont.area-width {
  width: 1570px;
}
.doc .hljs-string {
  color: #d14;
}
.doc .hljs-number {
  color: #008080;
}
.doc .hljs-comment {
  color: #998;
  font-style: italic;
}
.doc .hljs-variable {
  color: #0086b3;
}
.doc .hljs-keyword {
  color: #333;
  font-weight: bold;
}
.doc .hljs-attr {
  color: #515964;
}
.doc .hljs {
  color: #515964;
}
.doc h3 {
  font-size: 1.3rem;
}
.doc h4 {
  line-height: 1;
  font-size: 18px;
}
.doc h5,
.doc h6 {
  line-height: 3;
  font-size: 1.1rem;
}

.content #marked ul {
  list-style: disc;
  line-height: 26px;
  margin-left: 0px;
}

@media screen and (max-width: 1350px) {
  .content .zoom {
    width: 100%;
    height: 56.25%;
  }
}

/* 左侧导航栏 */
.side {
  width: 300px;
  border-right: 1px solid #00000019;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  position: fixed;
  height: calc(100% - 70px);
  overflow: hidden;
}
.doc-title {
  height: 140px;
  padding-top: 23px;
  padding-right: 30px;
  padding-bottom: 27px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  font-weight: bold;
}
.doc-title .name {
  text-align: center;
  text-decoration: none;
  padding-top: 10px;
  color: #000000;
  font-size: 24px;
}
.doc-title .version {
  text-align: center;
  color: #0096ec;
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
  filter: contrast(90%);
}
.nav {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0;
  user-select: none;
  overflow: hidden;
  height: 100%;
}
.list {
  height: calc(100% - 15px);
  width: 100%;
  margin-bottom: 15px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.list-item-unactive {
  display: block;
  height: 45px;
  line-height: 45px;
  border: #e6e6e6 solid;
  border-width: 1px 0;
  padding-left: 23px;
  font-size: 24px;
  color: #354048;
  font-weight: 700;
  text-align: left;
  font-family: "微软雅黑";
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  background-color: white;
}
.list-item-active {
  display: block;
  height: 45px;
  line-height: 45px;
  border: #e6e6e6 solid;
  border-width: 1px 0;
  border-left: 4px #0c93e0 solid;
  padding-left: 19px;
  font-size: 24px;
  color: #0c93e0;
  font-weight: 700;
  text-align: left;
  font-family: "微软雅黑";
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
}
.list-item-unactive:hover {
  border-left: 4px #0c93e0 solid;
  color: #0c93e0;
  padding-left: 19px;
}
.list-item-unactive::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid #cfcfcf;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.list-item-active::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-bottom: 7px solid #0096ec;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.two-wrap {
  display: none;
  padding: 0;
  margin-left: 0;
  width: 100%;
  height: calc(100% - 45px);
  overflow: auto;
  padding-left: 30px;
}

.two-wrap::-webkit-scrollbar {
  width: 12px;
  background-color: #fcfcfc;
}

.two-wrap::-webkit-scrollbar-thumb {
  background-color: #d6d9e0;
  border: 3px solid transparent;
  border-radius: 6px;
  background-clip: content-box;
  cursor: pointer;
}

.doc .nav > ul > li > ul > li {
  margin: 8px 0;
  font-size: 14px;
  font-weight: bold;
  /* height: 30px;
        line-height: 30px; */
  cursor: pointer;
  filter: contrast(90%);
  font-family: "微软雅黑";
}

.doc .nav ul.two-wrap .two-menu p {
  font-size: 15px;
  font-weight: bold;
  margin: 5px 0;
}

.doc .nav ul.three-wrap li.three-menu span {
  display: block;
  position: relative;
  margin: 5px 0;
  font-size: 14px;
  font-weight: normal;
}

.doc .nav ul.four-wrap {
  padding-left: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #00000019;
  height: auto !important;
}

.doc .nav ul.four-wrap li {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: normal;
}

/* 导航 - 二级单项，三级单项 - 选中 */

.doc .item-active {
  color: #0096ec;
}

/* 导航 - 二级单项，三级单项 - 未选中 */

.doc .item-unactive {
  color: #2c3e50;
}

/* 导航 - 二级单项，三级单项 - 未选中鼠标悬浮 */

.doc .item-unactive:hover {
  color: #3798f0;
}

/* 导航 - 二级列表 */

.doc .nav > ul > li > ul > li[tree] {
  border-top: 1px solid #00000019;
  padding: 18px 0 10px 10px;
  height: auto;
  line-height: 1;
  cursor: auto;
}

/* 导航 - 二级列表 - 名称 */

.doc .nav > ul > li > ul > li[tree] > span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
  position: relative;
}

/* 导航 - 二级列表 - 名称 - 未选中 */

.doc .tree-unactive {
  color: #364149;
}

/* 导航 - 二级列表 - 名称 - 未选中 - 按钮 */

.doc .tree-unactive::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid #cfcfcf;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.doc .tree-unactive ~ ul.four-wrap {
  display: none;
}

/* 导航 - 二级列表 - 名称 - 选中 */

.doc .tree-active {
  color: #ababab;
}

/* 导航 - 二级单项，三级单项 - 选中 - 三级列表 */

.doc .tree-active ~ ul {
  height: auto !important;
}

/* 导航 - 二级列表 - 名称 - 选中 - 按钮 */

.doc .tree-active::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-bottom: 7px solid #0096ec;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* 导航 - 三级列表 */

.doc .nav > ul > li > ul > li[tree] > ul {
  height: 0px;
  overflow: hidden;
  margin-left: 15px;
}

/* 导航 - 三级列表 - 单项 */

.doc .nav > ul > li > ul > li[tree] > ul li {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

/* 导航 - 三级列表 - 单项 - 组 */

.doc .nav > ul > li > ul > li[tree] > ul ul {
  margin-top: 10px;
}

/* 路径视频宽度 */

.doc .nav > ul > li > ul > li {
  margin: 12px 0;
}
.doc .nav ul.three-wrap li.three-menu span {
  margin: 12px 0;
}