.layout {
  max-width: 1280px;
  margin: 20px auto;
  position: relative;
}

main {
  background-color: white;
  width: calc(100% - 400px);
  padding: 25px 25px 125px;
  margin-bottom: 90px;
  float: left;
  position: relative;
  border-radius: 3px;
}

main>h1,
main>h2 {
  text-align: center;
  margin-top: 0px;
}

main>.client {
  position: absolute;
  right: 8px;
  top: 26px;
}


.zzcourses main,
.zzplugins main,
.zzvendors main {
  padding: 25px 0px;
}

.zzplugins main .search {
  width: 200px;
  font-size: 14px;
  position: absolute;
  right: 19px;
  top: 25px;
}

aside {
  display: inline-block;
  width: 330px;
  margin-left: 20px;
}

.box {
  position: relative;
  background-color: #ffffff8f;
  padding: 22px 21px 20px;
  margin-bottom: 16px;
  border-radius: 3px;
}

.box a {
  color: rgb(87, 107, 149);
}

.box>p,
.box>pre {
  line-height: 1.6;
}

.box label span {
  width: 200px;
  display: inline-block;
  margin-bottom: 19px;
}

.box.me .bd p {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.box.me .bd div {
  font-size: 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
}

.box.me .bd {
  margin: 18px 0px;
  display: flex;
  justify-content: space-around;
}


.box textarea {
  width: 100%;
  height: 120px;
}

.box>h3 {
  margin: 0px 0px 9px;
}

.box.video .input {
  position: relative;
  margin: 9px 0px;
}

.box.video input {
  width: calc(100% - 9px);
  margin: 3px 0px;
}

.box.video .zadd {
  position: absolute;
  right: 5px;
  top: 14px;
}

.box.video .zdel {
  position: absolute;
  right: -18px;
  top: 6px;
}

.zlogo {
  color: rgb(89, 89, 89);
  width: 140px;
}

.zlogo img {
  height: 35px;
}


header {
  position: fixed;
  top: 0px;
  overflow: hidden;
  height: 54px;
  z-index: 9;
  width: 100%;
  white-space: nowrap;
  transition: all 0.2s ease 0s;
}

header+.zintsobsvr {
  padding-top: 60px;
}

header .zlogo span {
  float: right;
}

header .zscpt {
  transition: all 0.2s ease 0s;
}

header .horiz {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  max-width: 1280px;
  margin: auto;
  transition: all 0.2s ease 0s;
}

header .avatar {
  float: left;
  position: relative;
}

header .avatar img {
  border-radius: 2px;
  width: 32px;
}


header .zbtn {
  margin-left: 12px;
}

header .search {
  min-width: 75px;
  position: relative;
  font-size: 14px;
  margin: 5px 10px;
}

header .search input {
  width: 75px;
  padding-left: 26px;
}

header .search input:focus,
header .search input.focus {
  width: 225px;
}

header .pop {
  position: fixed;
  background: white;
  z-index: 99;
  min-width: 450px;
      max-width: 660px;
  min-height: 120px;
  margin-top: 6px;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 20px;
}

header .pop>.zsegment {
  margin: 1px 40px 3px 1px;
}

header .zcells {
  max-height: 500px;
  width: 490px;
  overflow: hidden auto;
}

header .zcells::before,
header .zcells::after {
  content: none;
}

.scrolled header {
  background-color: black;
  box-shadow: rgba(36, 35, 53, 0.2) 0px 2px 100px 0px;
  height: 40px;
}

.scrolled header .horiz {
  padding: 3px 10px;
}

.scrolled header .zlogo span,
.scrolled header nav.horiz li a {
  color: white;
}

.doc header {
  border-bottom: 1px solid rgb(232, 232, 232);
}

.search .zdel {
  position: absolute;
  top: 6px;
  left: 5px;
  color: silver;
}

.search .pop .zdel {
  top: 4px;
  right: 4px;
  left: unset;
  cursor: pointer;
}

.search .pop .zcell {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.leftnav {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100vh;
  overflow: auto;
  border-right: 1px solid rgb(232, 232, 232);
  transition: left 0.3s ease 0s;
}

.leftnav ol {
  list-style: none;
  margin: 0px;
  padding: 9px 0px;
  box-sizing: border-box;
  transition: background 0.3s ease 0s, width 0.2s ease 0s;
}

.leftnav ol::before,
.leftnav ol::after {
  display: table;
  content: "";
}

.leftnav ol::after {
  clear: both;
}

.leftnav div {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 2.5;
  position: relative;
  display: block;
  padding: 0px 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.leftnav div:hover i::before,
.leftnav div:hover i::after {
  background: linear-gradient(to right, rgb(24, 144, 255), rgb(24, 144, 255));
}

.leftnav div:hover,
.leftnav a:hover {
  color: rgb(24, 144, 255);
}

.leftnav .active div {
  color: rgb(24, 144, 255);
}

.leftnav svg {
  margin-right: 10px;
}

.leftnav i {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 10px;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.leftnav i::before,
.leftnav i::after {
  position: absolute;
  width: 6px;
  height: 1.5px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)) rgb(255, 255, 255);
  border-radius: 2px;
  transform: rotate(-45deg) translateX(2px);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  content: "";
}

.leftnav i::after {
  transform: rotate(45deg) translateX(-2px);
}

.leftnav .open>div>i::before {
  transform: rotate(45deg) translateX(2px);
}

.leftnav .open>div>i::after {
  transform: rotate(-45deg) translateX(-2px);
}

.leftnav a {
  line-height: 2.2;
  position: relative;
  display: block;
  padding: 0px 20px;
  white-space: nowrap;
  cursor: pointer;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.leftnav a.active {
  color: rgb(24, 144, 255);
  background-color: rgb(230, 247, 255);
}

.leftnav a::after {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border-right: 2px solid rgb(24, 144, 255);
  transform: scaleY(0.0001);
  opacity: 0;
  transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  content: "";
}

.leftnav a.active::after {
  opacity: 1;
  transform: scaleY(1);
}

.leftnav .L1 div,
.leftnav .L1 a {
  padding-left: 48px;
}

.leftnav .L2 div,
.leftnav .L2 a {
  padding-left: 76px;
}


nav.horiz ul {
  list-style: none;
  padding: 0px;
  margin: 0;
  display: inline-block;
}

nav.horiz li {
  display: inline-block;
}

nav.horiz li a {
  height: 35px;
  display: flex;
  position: relative;
  align-items: center;
  padding: 0px 20px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  color: rgb(43, 52, 65);
}

nav.horiz ul a.active::after,
nav.horiz ul a:hover::after {
  transform: scale(1);
  background-color: rgb(0, 160, 233);
}

nav.horiz ul a::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: "";
  position: absolute;
  height: 0.12em;
  right: 19px;
  bottom: 0px;
  left: 19px;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out 0s, -webkit-transform 0.2s ease-in-out 0s;
}

form .row>.input {
  display: inline-block;
  width: calc(100% - 60px);
}

form .row .zinput {
  width: 100%;
}

form .row>label {
  width: 50px;
  display: inline-block;
  margin-top: 3px;
  vertical-align: top;
}

form .row {
  margin-bottom: 24px;
  max-width: 880px;
}

.zzdoc .aside,
.zzme .aside {
  position: fixed;
  top: 53px;
  left: calc((100% - 1280px) / 2);
  height: calc(100vh - 60px);
}

.zzdoc .aside::-webkit-scrollbar {
  width: 0px;
}

.zzdoc .body,
.zzme .body {
  position: relative;
  margin-left: 220px;
  margin-right: 236px;
  transition: margin 0.3s ease 0s;
}

.zp113>div {
  height: 300px;
}

.zrtblock .zintsobsvr {
  top: -70px;
  position: relative;
}

.top2 .zintsobsvr {
  position: absolute;
  top: 90vh;
}

.top2 span {
  position: fixed;
  bottom: 40px;
  right: 20px;
  padding: 9px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.04);
  display: none;
  cursor: pointer;
}

.top2 span:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.zzhome .flex {
  display: flex;
}

.zzhome .flex>div {
  flex: 0 0 auto;
  width: 550px;
  margin: auto;
}

.zzhome .flex img {
  margin: 60px 0px;
}

.zzhome .features {
  margin-bottom: 32px;
}

.zzhome .features .column {
  float: left;
  width: calc(33% - 40px);
  min-width: 300px;
  height: 130px;
  overflow: hidden;
  padding: 0px 20px;
}

.zzhome .features h4 {
  font-size: 16px;
  margin: 8px 0;
}

.zzhome .features p {
  line-height: 22px;
  color: #5f5f5f;
}

.zzdoc .body {
  min-height: calc(100vh - 100px);
}

.zzdoc .zarticle {
  padding-bottom: 100px;
}

.zzdoc .affix {
  position: fixed;
  top: 80px;
  width: 215px;
  right: calc((100% - 1280px) / 2);
}

.zzdoc .demovideo {
  margin-bottom: 22px;
}

.zzdoc .demovideo {
  margin: 0 0 22px -9px;
}

.zzdoc .demovideo a>span {
  position: absolute;
  right: 0px;
  padding-left: 6px;
}

.zzcourse main section {
  margin-bottom: 50px;
}

.zzcourse .box .zbtns {
  margin: 1em 0px 0px;
}

.zzcourse .demovideo h3 {
  display: inline-block;
  margin: 0px;
}

.zzplugin main>p {
  font-size: 18px;
}

.zzplugin .zarticle {
  padding-bottom: 100px;
}

.zzplugin .zp113 {
  clear: both;
}

.zzplugin .detail div:first-child {
  font-weight: bold;
}

.zzplugin .detail label {
  width: 99px;
  display: inline-block;
  line-height: 1.8;
}

.zzplugin .detail label::after {
  content: " :";
}

.zzplugin .detail .btns {
  margin: 1em 0px 0px;
  display: flex;
}

.zzplugin .detail .git {
  width: 27px;
  margin: 4px 0 0 12px;
}

.zzplugin .box .zp104 {
  position: relative;
  top: unset;
  right: unset;
}

.zzplugin .box .risk ul {
  margin: 0px;
  color: rgb(255, 99, 99);
  line-height: 1.8;
}

.zzplugin .box .chart {
  padding: 0px;
  height: 300px;
}

.zzplugin .box.me .zbtn {
  margin-top: 15px;
}

.zzplugins .box .zdel {
  float: right;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 50%;
  cursor: pointer;
  padding: 3px;
}

.zzplugins .box .zdel:hover {
  background: lightgray;
}

.zzplugins .zmodal h3 {
  text-align: center;
}

.zzplugins .zmodal h3:first-child {
  margin-top: 0px;
}

.zzplugins .zmodal img {
  display: block;
}

.zzpost .opr .more:hover ul {
  display: block;
}

.zzpost .opr .more {
  margin: 0px 9px;
}

.zzpost .opr .active {
  color: rgb(9, 187, 7) !important;
}

.zzpost .opr .more li {
  color: rgb(89, 89, 89);
}

.zzpost .opr .more li:hover {
  color: rgb(24, 144, 255);
}

.zzvendors a.block {
  width: calc(50% - 13px);
}

.zzvendor main {
  padding: 0px;
}

.zzvendor main .bg {
  min-height: 100px;
  background: rgb(226, 226, 226);
  margin-bottom: 50px;
  position: relative;
}

.zzvendor main .bg img:first-child {
  max-height: 300px;
}

.zzvendor main a {
  position: absolute;
  bottom: -30px;
  left: 140px;
}

.zzvendor main .avatar {
  position: absolute;
  bottom: -40px;
  left: 50px;
  width: 75px;
  height: 75px;
  background: white;
  border: 3px solid lightgray;
  border-radius: 5px;
}

.zzvendor .box a {
  display: block;
  padding: 3px 0px;
}

.zzvendor .box a:hover {
  color: blue;
}

.zzme .vericode.zinput {
  width: 325px;
}

.zzme .vendor .bg {
  min-height: 100px;
  background: rgb(226, 226, 226);
  margin-bottom: 50px;
  position: relative;
}

.zzme .vendor .bg2 {
  position: absolute;
  right: 9px;
  top: 9px;
  width: 70px;
  height: 70px;
  border: 3px solid white;
  border-radius: 5px;
}

.zzme .wechat {
  margin: 30px auto;
  text-align: center;
}

.zzme .wechat img {
  margin: 0px auto;
}

.zzme .vendor .avatar {
  position: absolute;
  bottom: -35px;
  left: 20px;
  width: 75px;
  height: 75px;
  border: 3px solid rgb(234, 234, 234);
  border-radius: 5px;
  background: white;
}

.svg.share {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><g fill='rgb(120, 120, 120)'><path d='M768 704c-38.5 0-73 17-96.5 44L381.2 602.8c1.9-8.6 2.8-17.6 2.8-26.8 0-23.7-6.5-45.9-17.8-65L575 302.2c19.1 11.3 41.3 17.8 65 17.8 70.6 0 128-57.4 128-128S710.6 64 640 64s-128 57.4-128 128c0 23.7 6.5 45.9 17.8 65L321 465.8c-19.1-11.3-41.3-17.8-65-17.8-70.6 0-128 57.4-128 128s57.4 128 128 128c38.5 0 73-17 96.5-44l290.3 145.2c-1.9 8.6-2.8 17.6-2.8 26.8 0 70.6 57.4 128 128 128s128-57.4 128-128-57.4-128-128-128zM640 128c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM256 640c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z m512 256c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z'/></g></svg>");
}

.svg.more {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><g fill='rgb(50, 50, 50)'><path d='M533.333333 384a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m0 213.333333a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m0 213.333334a64 64 0 1 1 0-128 64 64 0 0 1 0 128z'/></g></svg>");
}

.svg.edit {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><g fill='rgb(160, 160, 160)'><path d='M210.14 649.073l183.941 191.654L845.76 370.399 661.823 178.743 210.14 649.073M63.224 958.866L352.4 888.692 166.144 694.617 63.224 958.866m832.263-830.484c-52.8-55.023-99.91-92.062-152.711-37.044l-35.008 40.192 186.396 194.868 38.342-37.36c52.802-55.014 15.786-105.648-37.02-160.654l0.001-0.002m0 0z'/></g></svg>");
}

.svg.delete {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><g fill='rgb(110, 110, 110)'><path d='M967.111 227.556H739.556V56.889H284.444v170.667H56.89v56.888h113.778v682.667h682.666V284.444h113.778v-56.888zM341.333 113.778h341.334v113.778H341.333V113.778z m455.111 796.444H227.556V284.444h568.888v625.778z'/><path d='M398.222 341.333h56.89v512h-56.89z m170.667 0h56.889v512h-56.89z'/></g></svg>");
}

.svg.chart {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><g fill='rgb(150, 150, 150)'><path d='M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-600-80h56c4.4 0 8-3.6 8-8V560c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v144c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V384c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v320c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V462c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v242c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V304c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v400c0 4.4 3.6 8 8 8z'/></g></svg>");
}

.svg.recomment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><g fill='rgb(150, 150, 150)'><path d='M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z'/></g></svg>");
}

@media (max-width: 1280px) {

  .zzdoc .layout .aside,
  .zzme .layout .aside {
    left: 0px;
  }

  .zzdoc .layout .affix {
    right: 0px;
  }
}

@media (max-width: 1100px) {
  .zzdoc .layout .affix {
    right: -220px;
  }

  .zzdoc .layout .body,
  .zzme .layout .body {
    margin-right: 25px;
  }
}

@media (max-width: 960px) {

  .layout,
  main {
    width: 100%;
  }

  aside,
  header .zfright {
    display: none !important;
  }

  .zzdoc .layout .aside {
    left: -220px;
  }

  .zzdoc .layout .body {
    margin-left: 25px;
  }
}

@media (min-width: 960px) {
  .topped .top2 .zarrow {
    display: inline-flex;
  }
}