html {
  background: #67bbed url(../images/background_x.jpg?v=9.98) repeat-x top;
}

body {
  background: url(../images/background.jpg?v=9.98) no-repeat left top;
}

.manage-nav a em, .side-community a em, .side-nav a em {
  position: absolute;
  width: 8px;
  height: 8px;
  font-size: 0;
  overflow: hidden;
  border: 2px solid white;
  border-radius: 50%;
  background: #f45400;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.simulation-scroll-bar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  width: 7px;
  border: 2px solid transparent;
  border-radius: 6;
}
.simulation-scroll-bar s {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  min-height: 50px;
  border-radius: 4px;
  background: #496c90;
  background: rgba(0, 0, 0, 0.3);
}
.simulation-scroll-bar.hover {
  width: 11px;
  border-radius: 8px;
  background: #8eb2d9;
  background: rgba(255, 255, 255, 0.2);
}
.simulation-scroll-bar.hover s {
  width: 11px;
  border-radius: 6px;
}

.animate-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.animate-layer s {
  position: absolute;
  font-size: 0;
  color: transparent;
}

.panel-side {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
}

.side-nav {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
}
.side-nav a {
  display: block;
  position: relative;
  height: 60px;
  padding-left: 20px;
  line-height: 60px;
  font-size: 24px;
  color: white;
}
.side-nav a s {
  float: left;
  width: 30px;
  height: 30px;
  margin: 15px 12px 0 0;
  background-image: url(../images/icon_panel_nav.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_panel_nav.png?v=9.98) 1x, url(../images/icon_panel_nav@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}
.side-nav a:hover {
  text-decoration: none;
  background: #3993ce;
}
.side-nav a.current {
  background: #3186c2;
  cursor: default;
}
.side-nav a.current s {
  background-position-y: -30px;
}
.side-nav a em {
  top: 12px;
  left: 38px;
}

.snv-cloud {
  background-position: 0 0;
}

.snv-community {
  background-position: -30px 0;
}

.snv-home {
  background-position: -60px 0;
}

.side-community {
  position: absolute;
  top: 255px;
  right: 0;
  bottom: 40px;
  left: 0;
  overflow: hidden;
  *border-top: 1px solid #76a3d4;
}
.side-community:before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: #76a3d4;
}
.side-community ul {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px 0 10px;
  overflow: hidden;
  *top: 0;
}
.side-community ul.osx-overflow {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.side-community ul.osx-overflow::-webkit-scrollbar {
  position: relative;
  width: 3px;
}
.side-community ul.osx-overflow::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-radius: 1px 2px 2px 1px;
  background: rgba(0, 0, 0, 0.4);
  background-clip: content-box;
}
.side-community li {
  *vertical-align: middle;
}
.side-community a {
  display: block;
  position: relative;
  height: 50px;
  padding: 0 10px 0 64px;
  line-height: 50px;
  word-break: break-all;
  overflow: hidden;
  font-size: 16px;
  color: white;
  *zoom: 1;
}
.side-community a:hover {
  text-decoration: none;
  background: #3993ce;
}
.side-community a.current {
  background: #3186c2;
  cursor: default;
}
.side-community a.hinting {
  padding-right: 80px;
}
.side-community a.hinting .hint-txt {
  display: block;
}
.side-community a img {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 28px;
  height: 28px;
  border: 1px solid white;
  border-radius: 50%;
}
.side-community a em {
  top: 7px;
  left: 41px;
}
.side-community a .hint-txt {
  display: none;
  position: absolute;
  top: 15px;
  right: 10px;
  overflow: hidden;
  padding: 0 10px;
  border-radius: 20px;
  background: #f45400;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
}

.manage-nav {
  position: absolute;
  top: 160px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.manage-nav::-webkit-scrollbar {
  position: relative;
  width: 3px;
}
.manage-nav::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-radius: 1px 2px 2px 1px;
  background: rgba(0, 0, 0, 0.4);
  background-clip: content-box;
}
.manage-nav ul {
  margin-bottom: 20px;
}
.manage-nav a {
  display: block;
  position: relative;
  height: 48px;
  padding-left: 20px;
  line-height: 48px;
  font-size: 22px;
  color: white;
  color: rgba(255, 255, 255, 0.9);
}
.manage-nav a s {
  float: left;
  width: 24px;
  height: 24px;
  margin: 12px 20px 0 0;
  background-image: url(../images/icon_manage_nav.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_manage_nav.png?v=9.98) 1x, url(../images/icon_manage_nav@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}
.manage-nav a:hover {
  text-decoration: none;
  background: #3993ce;
}
.manage-nav a.current {
  background: #3186c2;
  cursor: default;
  color: white;
}
.manage-nav a.current s {
  background-position-y: -24px;
}
.manage-nav a em {
  top: 6px;
  left: 38px;
}

.snv-global {
  background-position: 0px 0;
}

.snv-recommend {
  background-position: -24px 0;
}

.snv-discuss {
  background-position: -48px 0;
}

.snv-report {
  background-position: -72px 0;
}

.snv-member {
  background-position: -96px 0;
}

.snv-style {
  background-position: -120px 0;
}

.snv-advs {
  background-position: -144px 0;
}

.snv-resume {
  background-position: -168px 0;
}

.snv-index {
  background-position: -192px 0;
}

.snv-ban {
  background-position: -216px 0;
}

html:root .side-nav a:hover, html:root .side-community a:hover, html:root .manage-nav a:hover {
  background: rgba(0, 0, 0, 0.05);
}
html:root .side-nav a.current, html:root .side-community a.current, html:root .manage-nav a.current {
  background: rgba(0, 0, 0, 0.1);
}
html:root .side-community:before {
  background: rgba(255, 255, 255, 0.1);
}

.side-office-entrance {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 34px;
}
.side-office-entrance a {
  display: block;
  height: 20px;
  padding: 15px 0;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  color: #fff;
  border-radius: 5px;
  background: #4290d3;
  background: rgba(255, 255, 255, 0.1);
}
.side-office-entrance a:hover {
  background: rgba(255, 255, 255, 0.2);
}
.side-office-entrance a s, .side-office-entrance a span {
  display: inline-block;
  vertical-align: top;
}
.side-office-entrance a s {
  width: 32px;
  height: 20px;
  margin-right: 10px;
  background-image: url(../images/icon_office_entrance.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_office_entrance.png?v=9.98) 1x, url(../images/icon_office_entrance@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}

.side-link {
  position: absolute;
  bottom: 10px;
  left: 20px;
}
.side-link a {
  float: left;
  margin-right: 20px;
  height: 20px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}
.side-link a s {
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-image: url(../images/icon_panel_link.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_panel_link.png?v=9.98) 1x, url(../images/icon_panel_link@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}
.side-link a span {
  float: left;
}
.side-link a:hover {
  opacity: 0.9;
}

.sln-help {
  background-position: 0 0;
}

.sln-feedback {
  background-position: -20px 0;
}

.sln-service {
  background-position: -40px 0;
}

.side-top {
  position: absolute;
  top: 10px;
  left: 10px;
}
.side-top a {
  float: left;
  color: #fff;
  font-size: 18px;
  line-height: 30px;
}
.side-top a span {
  float: left;
}
.side-top .icon-leftward {
  float: left;
  width: 20px;
  height: 20px;
  overflow: hidden;
  margin: 5px;
  background-image: url(../images/icon_leftward.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_leftward.png?v=9.98) 1x, url(../images/icon_leftward@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}

.side-screen-switch {
  position: absolute;
  top: 10px;
  left: 0;
  height: 50px;
}
.side-screen-switch .btn-fold {
  float: left;
  width: 24px;
  height: 50px;
  background-image: url(../images/icon_screen_fold.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_screen_fold.png?v=9.98) 1x, url(../images/icon_screen_fold@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}
.side-screen-switch .btn-fold:hover {
  background-position: 0 -50px;
}
.side-screen-switch .btn-unfold {
  display: none;
  float: left;
  width: 68px;
  height: 40px;
  background-image: url(../images/icon_screen_unfold.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_screen_unfold.png?v=9.98) 1x, url(../images/icon_screen_unfold@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}
.side-screen-switch .btn-unfold:hover {
  background-position: 0 -40px;
}
.side-screen-switch s {
  display: none;
}

.main-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 250px;
  min-width: 774px;
  min-height: 500px;
  padding: 10px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  *zoom: 1;
}

.content-container {
  position: relative;
  z-index: 1;
  width: 1000px;
  min-height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
}

.frame-container {
  position: relative;
  z-index: 1;
  min-height: 100%;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: white;
  *position: absolute;
  *top: 10px;
  *right: 10px;
  *bottom: 10px;
  *left: 0;
  *min-height: 0;
  *overflow: visible;
}
.frame-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  *background: white;
}
.frame-container.page-container {
  top: 0;
  width: 1000px;
  margin-right: 0;
}
.frame-container.page-container iframe {
  display: block;
  position: static;
}

.article-reader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  overflow: hidden;
  background-image: url(about:blank);
  background-color: rgba(0, 0, 0, 0.8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#CC000000", endColorstr="#CC000000");
}
html:root .article-reader {
  -webkit-filter: none;
  filter: none;
}
.article-reader iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@supports (-webkit-backdrop-filter: blur()) {
  .article-reader {
    background: rgba(115, 115, 115, 0.6);
    -webkit-backdrop-filter: blur(20px);
  }
}
.fh-popup-qrcode {
  position: fixed;
  top: 38.2%;
  left: 50%;
  z-index: 10001;
  width: 500px;
  height: 462px;
  margin-top: -176px;
  margin-left: -250px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.fh-popup-qrcode .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  line-height: 20;
  overflow: hidden;
  background-image: url(../images/icon_close_32.png?v=9.98);
  background-image: -webkit-image-set(url(../images/icon_close_32.png?v=9.98) 1x, url(../images/icon_close_32@2x.png?v=9.98) 2x);
  background-repeat: no-repeat;
}
.fh-popup-qrcode .close:hover {
  background-position: 0 -32px;
}
.fh-popup-qrcode span, .fh-popup-qrcode em {
  position: absolute;
  right: 10px;
  left: 10px;
  text-align: center;
  word-break: break-all;
}
.fh-popup-qrcode span {
  top: 62px;
  line-height: 30px;
  font-size: 16px;
}
.fh-popup-qrcode em {
  top: 394px;
  line-height: 20px;
  font-size: 14px;
  color: #999;
}
.fh-popup-qrcode .fhpqr-container {
  position: absolute;
  top: 110px;
  left: 50%;
  width: 272px;
  height: 272px;
  margin-left: -137px;
  border: 1px solid #e2e5e9;
  background: white url(../images/qrcode_client_272.png?v=9.98) no-repeat center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.fh-popup-qrcode .fhpqr-code {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fh-popup-qrcode .fhpqr-face {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 74px;
  height: 74px;
  margin: -40px;
  border: 3px solid white;
  border-radius: 3px;
}

.dialog-bottom .button {
  border-radius: 5px;
  background: #2777F8;
  color: #fff;
}
.dialog-bottom .button:hover {
  background: #2782cc;
  color: #fff;
  text-decoration: none;
}
.dialog-bottom .button:active {
  background: #2b91e3;
}

@media (max-width: 1280px), (max-height: 720px) {
  .panel-side {
    width: 210px;
  }

  .side-nav a s {
    margin-right: 10px;
  }

  .side-community a {
    padding-left: 60px;
  }

  .manage-nav a s {
    margin-right: 16px;
  }

  .side-office-entrance a {
    font-size: 14px;
  }

  .side-link a {
    margin-right: 12px;
  }
  .side-link a s {
    margin-right: 3px;
  }

  .color-setting {
    width: 190px !important;
  }
  .color-setting .tabs a {
    width: 90px !important;
  }
  .color-setting .operate-bottom .button {
    width: 44px !important;
  }
  .color-setting .operate-bottom .btn-light {
    width: 42px !important;
  }

  .main-container {
    left: 210px;
  }
}
.layout-fullscreen body {
  background: #f1f1f1;
}
.layout-fullscreen .side-nav,
.layout-fullscreen .side-community,
.layout-fullscreen .manage-nav,
.layout-fullscreen .side-office-entrance,
.layout-fullscreen .side-link {
  display: none;
}
.layout-fullscreen .side-screen-switch {
  z-index: 2;
}
.layout-fullscreen .side-screen-switch .btn-fold {
  display: none;
}
.layout-fullscreen .side-screen-switch .btn-unfold {
  display: block;
}
.layout-fullscreen .main-container {
  left: 0;
  min-width: 0;
  min-height: 0;
}
.layout-fullscreen .content-container {
  margin: 0 auto;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}