html {
  overflow-x:hidden
}
h1,
h2,
h3 {
  font-size:14px
}
::-webkit-input-placeholder {
  color:#999
}
pre {
  margin:11px 0
}
code {
  font-family:Courier New
}
pre>code {
  display:block;
  line-height:1.6;
  padding:16px;
  font-size:14px
}
pre textarea {
  display:none
}
.ws-content,
.ws-menu {
  min-height:calc(100vh - 210px)
}
.ws-menu {
  box-shadow:none;
  border-left:none
}
.ws-content {
  padding:32px
}
.ws-container {
  padding-top:60px;
  min-height:calc(100vh - 210px)
}
.ws-header {
  position:fixed;
  left:0;
  right:0;
  width:100%;
  height:60px;
  background-color:#2f363c;
  box-shadow:0 1px 3px rgb(0 0 0 / 5%)
}
.ws-header:after {
  position:absolute;
  left:0;
  right:0;
  width:100%;
  height:1px;
  background-color:#eee;
  content:''
}
.ws-logo {
  position:absolute;
  width:240px;
  height:60px;
  line-height:60px;
  text-align:center
}
.ws-logo img {
  width:81px
}
.ws-header-assist {
  position:absolute;
  left:240px;
  top:50%;
  height:32px;
  margin-top:-16px
}
.ws-header-assist>* {
  display:inline-block;
  vertical-align:middle
}
.ws-search {
  position:relative;
  width:150px
}
.ws-search .layui-input {
  height:32px;
  padding-left:32px;
  padding-right:10px;
  background-color:#fafafa;
  background-color:rgba(255,255,255,.05);
  border:none 0;
  box-shadow:none
}
.ws-search .layui-input::-webkit-focus {
  color:#ccc
}
.ws-search .layui-input::-webkit-input-placeholder {
  color:#ccc
}
.ws-search .layui-form-select .layui-edge {
  display:none;
  border-top-color:#999
}
.ws-search .layui-form-select dl {
  top:36px
}
.ws-search>.layui-icon {
  position:absolute;
  left:10px;
  top:9px;
  font-size:14px;
  color:#999
}
.ws-notice {
  position:relative;
  height:32px;
  width:160px;
  line-height:32px;
  margin-left:16px
}
.ws-notice a.nt:after {
  content:'AD';
  position:absolute;
  right:-7px;
  top:-3px;
  padding:0 5px;
  line-height:20px;
  border-radius:0 3px 0 3px;
  background-color:rgba(255,255,255,.7);
  transform:scale(.6);
  word-wrap:break-word
}
.ws-notice a {
  position:relative;
  display:inline-block
}
.ws-notice a img {
  max-width:100%;
  max-height:100%;
  border-radius:3px
}
.ws-notice a cite {
  display:inline-block;
  padding:0 15px 0 15px;
  border-radius:2px;
  transition:all .5s
}
.ws-notice a cite:hover {
  background-color:rgba(255,255,255,.25);
  color:rgba(255,255,255,.9)
}
.ws-notice .layui-carousel,
.ws-notice .layui-carousel>[carousel-item]>* {
  background:0 0
}
.ws-notice .layui-carousel>[carousel-item]:before {
  display:none
}
.ws-header-menu {
  position:absolute;
  right:16px;
  top:0
}
.ws-header-menu>*,
.ws-header-tool>div {
  display:inline-block;
  vertical-align:middle
}
.ws-header-menu .layui-nav {
  padding:0
}
.ws-header-menu .layui-nav .layui-nav-item {
  margin-left:16px
}
.ws-header-menu .layui-nav .layui-nav-item[mobile] {
  display:none
}
.ws-header-menu .layui-nav .layui-nav-item a {
  padding:0 16px
}
.ws-header-menu .layui-nav .layui-nav-item a span {
  font-size:12px
}
.ws-header-menu .layui-nav .layui-nav-more {
  right:-3px
}
.ws-header .layui-container {
  height:100%
}
.ws-header .layui-nav .layui-badge,
.ws-header .layui-nav .layui-badge-dot {
  right:0
}
.ws-header-more {
  display:none;
  line-height:60px;
  padding:0 16px;
  cursor:pointer
}
.layui-nav-tree.layui-bg-gray a,
.layui-nav.layui-bg-gray .layui-nav-item a {
  color:#373737\9
}
.ws-header-tool {
  margin-left:16px
}
.ws-header-tool>div {
  margin-left:16px
}
.ws-header-tool .layui-icon {
  font-size:21px
}
.ws-header-theme {
  position:relative;
  top:1px;
  min-width:44px
}
.ws-header-theme .layui-icon {
  font-size:16px
}
.ws-header-theme .layui-form-switch {
  top:-1px;
  margin:0;
  height:22px;
  line-height:20px;
  box-sizing:border-box
}
.ws-header-theme .layui-form-switch>div {
  margin-left:16px
}
.ws-header-theme .layui-form-onswitch>div {
  margin-left:0;
  margin-right:16px
}
.ws-header-theme .layui-form-switch>i {
  top:3px;
  width:14px;
  height:14px
}
.ws-header-theme .layui-form-onswitch>i {
  margin-left:-18px
}
.ws-footer {
  padding:30px 15px;
  line-height:30px;
  text-align:center;
  color:#777
}
.ws-footer a {
  padding:0 5px;
  color:#777
}
.ws-footer a:hover {
  color:#1e9fff;
  text-decoration:underline
}
.ws-footer-fixed {
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  box-shadow:0 -1px 3px rgb(0 0 0 / 5%)
}
.ws-footer-fixed:after {
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:1px;
  background-color:#eee;
  content:''
}
.ws-footer-fixed .ws-footer {
  height:60px;
  padding:15px 0;
  overflow:hidden;
  box-sizing:border-box;
  white-space:nowrap
}
.ws-footer-fixed .ws-footer>* {
  display:inline-block;
  vertical-align:middle;
  padding:0 15px
}
.ws-index-main {
  position:relative;
  text-align:center
}
.ws-index-main h1 {
  padding-top:58px;
  font-weight:500;
  font-size:68px;
  color:#16baaa
}
.ws-index-main h2 {
  padding:16px 0;
  line-height:52px;
  font-size:32px;
  font-weight:500;
  color:#16baaa
}
.ws-index-stared {
  padding:16px 0
}
.ws-index-attach {
  padding:16px 0;
  line-height:24px
}
.ws-index-attach span {
  padding:0 8px
}
.ws-index-attach span a {
  color:#888;
  transition:all .3s
}
.ws-index-attach span a:hover {
  color:#16b777
}
.ws-index-attach span em {
  color:#16b777;
  font-style:normal
}
.ws-index-idea {
  margin-top:40px;
  padding:0 16px
}
.ws-index-idea>div>div {
  padding:24px;
  line-height:24px;
  border:1px solid #eee
}
.ws-index-idea .layui-field-title {
  border:none
}
.ws-index-idea .layui-field-title legend {
  margin:0 24px 24px 0;
  padding:0 16px;
  text-align:center;
  font-size:16px;
  font-weight:500
}
.ws-index-idea>div p {
  color:#999
}
.ws-space-16 {
  border:none!important;
  margin:8px 0
}
.ws-move-elem {
  display:none;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  cursor:col-resize;
  opacity:0;
  z-index:2147483647
}
body .layui-layer-notice .layui-layer-content {
  padding:16px;
  line-height:24px
}
body .layui-layer-notice .layui-layer-title {
  font-weight:700
}
body .layui-layer-notice .layui-layer-btn .layui-layer-btn0 {
  background-color:#16baaa
}
[lay-tips] {
  cursor:pointer
}
.layui-icon-tips[lay-tips] {
  font-size:20px
}
.ws-menu {
  position:fixed;
  top:60px;
  bottom:0;
  width:240px;
  z-index:777;
  min-height:0;
  border-top:none;
  overflow:hidden;
  background-color:#fff
}
.ws-menu:hover {
  overflow-y:auto;
  overflow-x:hidden
}
.ws-menu .layui-menu-body-title .layui-font-gray {
  padding-left:6px
}
.ws-menu .layui-menu-body-title .layui-badge-dot {
  left:6px
}
.ws-menu .layui-menu {
  padding-bottom:16px
}
.ws-content {
  position:relative;
  margin:0 226px 0 240px;
  line-height:1.8;
  box-sizing:border-box
}
.ws-anchor {
  margin-bottom:16px
}
.ws-anchor.layui-code-preview {
  margin-bottom:0
}
.ws-anchor,
[lay-toc] {
  padding-top:76px!important;
  margin-top:-76px!important
}
.ws-anchor:not(h1),
[lay-toc]:not(h1) {
  padding-top:86px!important
}
a[lay-toc] {
  display:inline-block
}
.layui-table .ws-anchor {
  pointer-events:none
}
.layui-table .ws-anchor>* {
  pointer-events:auto
}
.ws-detail {
  padding-bottom:16px
}
.ws-text {
  color:#3a3a3a
}
.ws-text h1,
.ws-text h2 {
  font-weight:700
}
.ws-text h1 {
  margin-bottom:16px;
  padding-bottom:11px;
  color:#2f363c;
  border-bottom:1px solid #eee;
  font-size:24px;
  font-weight:700
}
.ws-text h2,
.ws-text h3,
.ws-text h4.ws-anchor {
  margin:16px 0
}
.ws-text h2 {
  font-size:21px
}
.ws-text h3 {
  font-size:18px
}
.ws-text h4 {
  font-size:16px
}
.ws-text h2 span {
  position:relative;
  top:-2px;
  left:3px;
  font-weight:400
}
.ws-text p {
  margin:16px 0
}
.ws-text .layui-elem-quote p {
  margin:0
}
.ws-text code:not(.layui-code,
.layui-code-wrap) {
  margin:0 3px;
  padding:3px 6px;
  background-color:#f7f7f9;
  border-radius:2px;
  transition:all .3s
}
.ws-text sup {
  position:relative;
  left:5px;
  margin-right:10px;
  padding:1px 3px;
  border-radius:3px;
  background-color:#ff5722;
  color:#fff;
  font-weight:700;
  font-size:12px
}
.ws-bold,
.ws-text .ws-bold {
  font-weight:700
}
.layui-code-preview+.ws-anchor,
.layui-code-preview+h2[lay-toc],
.layui-code-preview+h3[lay-toc],
.ws-text ul+[lay-toc]:not(h1) {
  padding-top:102px!important
}
.layui-code-preview+ul {
  margin-top:16px
}
.layui-code-preview ul.layui-rate,
.layui-code-preview ul.layui-tab-title,
.layui-code-preview ul.layui-transfer-data {
  padding-left:0
}
.layui-code-preview .laydate-time-list ol li {
  margin:0
}
.ws-text-tools {
  position:absolute;
  right:32px;
  top:42px
}
.ws-text-tools a {
  padding-left:8px;
  color:#777;
  text-decoration:underline;
  transition:all .3s
}
.ws-text-tools a:hover {
  color:#000
}
.ws-text-tools .layui-icon {
  font-size:18px
}
.ws-index-showcase {
  position:relative;
  width:100%;
  margin-top:16px
}
.ws-index-showcase>div {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  margin:0 8px;
  box-sizing:border-box;
  box-sizing:border-box
}
.ws-index-showcase>div>.ws-sponsor-link {
  display:block;
  transition:all .3s
}
.ws-index-showcase>div .ws-sponsor-link:hover {
  opacity:.8
}
.ws-index-showcase>div .ws-sponsor-link img {
  max-width:100%
}
.ws-index-showcase>div .ws-sponsor-link>* {
  position:relative;
  display:inline-block;
  vertical-align:middle
}
.ws-docs-showcase>div {
  position:relative;
  margin-top:5px
}
.ws-docs-showcase>div:first-child {
  margin-top:0
}
.ws-demo-editor {
  height:260px;
  padding:16px;
  border:none;
  border-radius:3px;
  background-color:#3f3f3f;
  color:#f8f8f2;
  font-family:Courier New
}
.ws-side {
  position:absolute;
  right:-210px;
  top:32px;
  bottom:0;
  width:210px
}
.ws-side-fixed {
  position:fixed;
  z-index:776;
  width:210px
}
.ws-dir {
  position:relative
}
.ws-dir:before {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid #eee;
  content:''
}
.ws-dir-ul {
  position:relative;
  max-height:calc(100vh - 210px);
  padding-left:1px;
  box-sizing:border-box;
  overflow:hidden;
  transition:all .3s
}
.ws-dir-ul:hover {
  overflow:auto
}
.ws-dir-ul li {
  position:relative;
  padding-left:16px;
  line-height:28px;
  color:rgba(0,0,0,.35)
}
.ws-dir-ul li[level="2"] {
  padding-left:32px
}
.ws-dir-ul li[level="3"] {
  padding-left:48px
}
.ws-dir-ul li a {
  display:block
}
.ws-dir-ul li a:hover,
.ws-dir-ul li.layui-this a {
  color:#5fb878
}
.ws-dir-ul li.layui-this:before {
  content:'';
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  border-left:1px solid #5fb878
}
.ws-dir-ul li .layui-badge-dot {
  top:-2px;
  left:3px
}
.ws-sponsor {
  position:relative;
  width:210px;
  padding-top:16px
}
.ws-sponsor .ws-sponsor-wrapper {
  width:216px
}
.ws-sponsor-wrapper>div {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:103.5px;
  height:50px;
  margin-top:5px;
  margin-right:3px;
  background-color:#f7f7f7;
  text-align:center;
  border-radius:3px;
  transition:all .3s;
  box-sizing:border-box
}
.ws-sponsor-wrapper>div>.ws-sponsor-link {
  display:block;
  line-height:50px;
  border-radius:3px
}
.ws-sponsor-wrapper>div>.ws-sponsor-link>img {
  max-width:100%;
  max-height:100%;
  border-radius:3px
}
.ws-sponsor:before {
  position:relative;
  display:block;
  padding-bottom:15px
}
.ws-sponsor-label {
  position:absolute;
  right:0;
  bottom:0;
  line-height:16px;
  border-radius:11px 0 3px;
  background-color:rgba(0,0,0,.16);
  color:#fff;
  pointer-events:none
}
.ws-sponsor-label cite {
  display:block;
  padding-left:3px;
  transform:scale(.7);
  font-size:12px;
  font-style:normal
}
.ws-sponsor-full {
  position:fixed;
  bottom:0;
  padding-bottom:3px;
  background-color:#fff
}
.ws-sponsor-show {
  position:absolute;
  left:50%;
  top:-8px;
  width:24px;
  height:24px;
  line-height:24px;
  margin-left:-12px;
  text-align:center;
  border-radius:50%;
  cursor:pointer;
  color:#000;
  transition:all .3s
}
.ws-sponsor-show:hover {
  background-color:#eee
}
.ws-docs-color {
  padding:0!important
}
.ws-docs-color>div {
  margin:0!important;
  list-style-type:none
}
.ws-docs-color>div div {
  padding:20px 10px;
  color:#fff;
  text-align:center;
  border-radius:3px;
  line-height:1.6;
  font-size:14px
}
.ws-docs-color>div p {
  margin:0
}
.ws-docs-necolor>div div {
  border-radius:0;
  color:#000
}
.ws-docs-bgcolor>div {
  padding:20px 10px
}
.ws-docs-icon {
  margin-bottom:16px;
  font-size:0
}
.ws-docs-icon>div {
  display:inline-block;
  vertical-align:middle;
  width:16.5%;
  height:105px;
  line-height:25px;
  padding:20px 0;
  margin-right:-1px;
  margin-bottom:-1px;
  border:1px solid #e2e2e2;
  font-size:14px;
  text-align:center;
  color:#777;
  cursor:pointer;
  transition:all .3s;
  -webkit-transition:all .3s
}
.ws-docs-icon>div .layui-icon {
  display:inline-block;
  font-size:36px
}
.ws-docs-icon>div .docs-icon-code,
.ws-docs-icon>div .docs-icon-name {
  color:#c2c2c2
}
.ws-docs-icon>div .docs-icon-fontclass {
  height:40px;
  line-height:20px;
  padding:0 5px;
  font-size:13px;
  color:#333
}
.ws-docs-icon>div:hover {
  background-color:#f2f2f2;
  color:#000
}
.ws-docs-anim>div {
  height:auto
}
.grid-demo {
  padding:10px;
  line-height:50px;
  text-align:center;
  background-color:#79c48c;
  color:#fff
}
.grid-demo-bg1 {
  background-color:#63ba79
}
.grid-demo-bg2 {
  background-color:#49a761
}
.grid-demo-bg3 {
  background-color:#38814a
}
.ws-error {
  padding:96px 0 32px;
  text-align:center
}
.ws-error>h1 {
  line-height:210px;
  font-size:160px;
  font-weight:300
}
.ws-error>p {
  font-size:24px
}
.layui-fixbar li[lay-type=dir] {
  display:none
}
.ws-bg-light {
  background-color:#fff!important
}
.ws-play * {
  box-sizing:border-box
}
.ws-play-code,
.ws-play-view {
  position:fixed;
  top:60px;
  bottom:60px;
  width:50%;
  height:auto!important
}
.ws-play-code {
  left:0
}
.ws-play-editor,
.ws-play-preview,
.ws-play-preview>iframe {
  position:absolute;
  top:40px;
  left:0;
  right:0;
  bottom:0;
  z-index:8
}
.ws-play-editor {
  right:8px
}
.ws-play-editor .ws-play-init textarea {
  display:none
}
.ws-play-init .layui-icon {
  position:absolute;
  left:50%;
  top:50%;
  margin:-16px 0 0 -16px;
  font-size:32px;
  color:#999
}
.ws-play-preview>iframe {
  top:0;
  right:0;
  width:100%;
  height:100%;
  border:none;
  color-scheme:light;
  background-color:#fff
}
.ws-play-header {
  position:relative;
  z-index:9;
  height:40px;
  line-height:40px;
  padding:0 16px;
  border-bottom:1px solid #eee
}
.ws-play-split {
  position:absolute;
  top:0;
  right:0;
  z-index:10;
  width:8px;
  height:100%;
  border:1px solid #eee;
  border-top-width:0;
  border-bottom-width:0;
  background-color:#fafafa
}
.ws-play-split:hover {
  cursor:col-resize
}
.ws-play-view {
  right:0
}
@media screen and (max-width:1399.98px) {
  .layui-container {
    width:auto!important
  }
}
@media screen and (max-width:991.98px) {
  .ws-container {
    width:100%!important;
    overflow:hidden
  }
  .ws-notice {
    display:none
  }
  .ws-search {
    width:32px
  }
  .ws-search .layui-input {
    padding:0
  }
  .ws-search>.layui-icon {
    display:none
  }
  .ws-search .layui-select-group {
    min-width:100px
  }
  .ws-header-menu .layui-nav .layui-nav-item {
    margin:0
  }
  .ws-menu {
    top:0;
    left:-240px;
    transition:all .3s;
    z-index:1003;
    overflow-y:auto;
    overflow-x:hidden
  }
  .ws-menu-bar {
    display:block!important;
    position:fixed;
    z-index:999;
    top:50%;
    left:0;
    width:52px;
    height:52px;
    line-height:52px;
    margin-top:-26px;
    border-radius:3px;
    text-align:center;
    color:#fff;
    cursor:pointer;
    box-shadow:1px 1px 16px rgba(0,0,0,.16)
  }
  .ws-menu-bar .layui-icon {
    font-size:21px
  }
  .ws-menu-show .ws-menu {
    display:block;
    left:0
  }
  .ws-shade-show .ws-shade {
    content:'';
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,.7);
    z-index:1001
  }
  .ws-content {
    margin:0;
    padding:16px
  }
  .ws-text-tools {
    display:none
  }
  .ws-text>div {
    overflow-x:auto
  }
  .ws-side {
    position:fixed;
    top:0;
    right:-240px;
    padding-top:32px;
    z-index:1000000;
    background-color:#fff;
    transition:all .3s
  }
  .ws-side-show .ws-side {
    right:0
  }
  .ws-side-show .ws-side:before {
    content:'目录';
    position:absolute;
    top:0;
    padding:0 16px;
    height:32px;
    line-height:32px;
    color:#ccc
  }
  .ws-dir-ul {
    overflow:auto
  }
  .layui-fixbar li[lay-type=dir] {
    display:block
  }
}
@media screen and (max-width:767.98px) {
  .ws-logo {
    left:50%;
    margin-left:-120px
  }
  .ws-header-menu .layui-nav,
  .ws-header-tool {
    position:fixed;
    top:61px;
    right:-100%;
    width:100%;
    text-align:center;
    transition:all .3s
  }
  .ws-header-menu .layui-nav {
    z-index:1003;
    height:60px;
    border-radius:0;
    box-shadow:0 1px 3px rgb(0 0 0 / 5%)
  }
  .ws-header-tool {
    top:121px;
    line-height:60px
  }
  .ws-header-more {
    display:block
  }
  .ws-header-theme .layui-form-switch {
    top:-4px
  }
  .ws-nav-show .layui-header {
    z-index:1003
  }
  .ws-nav-show .ws-header-menu .layui-nav,
  .ws-nav-show .ws-header-tool {
    display:block;
    right:0
  }
  .ws-index-main h1 {
    font-size:52px
  }
  .ws-index-main h2 {
    font-size:24px;
    line-height:38px
  }
  .ws-content {
    padding:16px 0
  }
  .ws-docs-icon>div {
    width:33%
  }
  .ws-play {
    position:fixed;
    top:60px;
    bottom:60px;
    left:0;
    width:100%
  }
  .ws-play-code,
  .ws-play-view {
    position:absolute;
    top:0;
    bottom:auto;
    width:100%!important;
    height:50%!important
  }
  .ws-play-view {
    top:auto;
    bottom:0
  }
  .ws-play-editor {
    right:8px
  }
  .ws-play-split {
    width:100%;
    height:8px;
    top:auto;
    bottom:0;
    border-top-width:1px;
    border-bottom-width:1px
  }
  .ws-play-split:hover {
    cursor:unset
  }
  .ws-footer {
    background:#fafafa
  }
  .ws-footer p {
    padding-bottom:16px
  }
  .ws-footer a {
    display:block
  }
  .ws-footer-fixed .ws-footer {
    overflow:auto
  }
  .ws-footer-fixed .ws-footer a {
    display:unset
  }
}