/* tapread tapread zongheng felastUpdate: 2021-12-06 10:26:43 */
.cbtn,.mbtn,a {
  display: block
}

a,body,html {
  color: #363d4d
}

.btn,label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}

h1,h2,h3,h4,h5,h6 {
  font-size: inherit
}

body,html,table,td,th,tr {
  font-size: 14px
}

body,html {
  margin: 0;
  padding: 0;
  font-family: NunitoSans-Regular,"SF Pro Text","SF Pro Icons",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color: #242933;
  line-height: 20px
}

.toast-content .toast-info,input,textarea {
  font-family: NunitoSans-Regular
}

input,textarea {
  outline: 0;
  border: none;
  -moz-appearance: none;
  -ms-progress-appearance: none;
  -webkit-appearance: none
}

blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,textarea,ul {
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  font-weight: 400
}

a {
  text-decoration: none
}

img {
  vertical-align: middle;
  border: 0;
  max-width: 100%;
  height: auto
}

.btn,.cbtn,.mbtn {
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer
}

li {
  list-style-type: none
}

address,cite,code,i,th,var {
  font-weight: 400;
  font-style: normal
}

ol,ul {
  list-style: none
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
  color: #b8bfcc!important
}

input:-moz-placeholder,textarea:-moz-placeholder {
  color: #b8bfcc!important
}

input::-moz-placeholder,textarea::-moz-placeholder {
  color: #b8bfcc!important
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
  color: #b8bfcc!important
}

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
  -webkit-appearance: none
}

input[type=number] {
  -moz-appearance: textfield
}

::-ms-clear,::-ms-reveal {
  display: none
}

label {
  cursor: pointer;
  user-select: none
}

::selection {
  color: #ffce2e;
  background: #12121a
}

::-moz-selection {
  color: #ffce2e;
  background: #12121a
}

::-webkit-selection {
  color: #ffce2e;
  background: #12121a
}

@font-face {
  font-family: NunitoSans-Regular;
  src: url('../assets/font/NunitoSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: NunitoSans-Bold;
  src: url('../assets/font/NunitoSans-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

.star:before {
  content: "\e69b"
}

.star-half:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "\e69c";
  z-index: 2
}

.star-half:after {
  position: absolute;
  left: 0;
  top: 0;
  content: '\e69b';
  color: rgba(184,191,204,.15);
  z-index: 1
}

.pressed .icon-ic_like:before {
  content: '\e6bb'
}

.btn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ffce2e;
  font-size: 16px;
  border-radius: 20px;
  color: #ffce2e;
  user-select: none
}

.cbtn,.mbtn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 2px;
  color: #363d4d;
  font-family: NunitoSans-Bold;
  -webkit-transition: background-color .2s ease-in-out,border-color .2s ease-in-out;
  transition: background-color .2s ease-in-out,border-color .2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 14px
}

.cbtn {
  line-height: 38px;
  border: 1px solid #b8bfcc
}

.cbtn:active {
  background-color: #dadee6;
  border-color: #dadee6
}

.cbtn:hover {
  background-color: #f2f3f5;
  border-color: #f2f3f5
}

.cbtn.disabled,.mbtn.disabled,.mbtn.disabled:active,.mbtn.disabled:hover {
  background-color: #f2f3f5;
  border-color: #f2f3f5;
  color: #b8bfcc;
  cursor: not-allowed
}

.mbtn-default {
  background-color: #ffce2e
}

.mbtn-default:active {
  background-color: #d9a600
}

.mbtn-default:hover {
  background-color: #ffda61
}

.mbtn-danger {
  background-color: #ff6363;
  color: #fff
}

.mbtn-danger:active {
  background-color: #d95555
}

.mbtn-danger:hover {
  background-color: #ff9696
}

.mbtn-nor {
  background-color: transparent;
  color: #7a8599
}

.mbtn-nor:hover {
  background-color: #f2f3f5
}

.btnloading {
  display: none;
  margin: 8px auto;
  width: 16px;
  border: 4px solid #363d4d;
  height: 16px;
  border-radius: 50%;
  position: relative;
  -webkit-animation: rotate 1s infinite linear;
  animation: rotate 1s infinite linear
}

.btnloading::after,.btnloading::before {
  content: "";
  display: block;
  position: absolute;
  left: -4px;
  top: -4px
}

.btnloading::after {
  width: 24px;
  height: 24px;
  z-index: 2;
  background-color: transparent
}

.btnloading::before {
  width: 12px;
  height: 12px;
  z-index: 3;
  background-color: #ffce2e
}

.mbtn.load,.mbtn.load:active,.mbtn.load:hover {
  background-color: #ffce2e;
  cursor: not-allowed
}

.mbtn.load span {
  display: none
}

.mbtn.load .btnloading {
  display: block
}

@-webkit-keyframes rotate {
  0% {
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0)
  }

  100% {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg)
  }
}

@keyframes rotate {
  0% {
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0)
  }

  100% {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg)
  }
}

.t-header {
  position: fixed;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 40px;
  left: 0;
  right: 0;
  top: 0;
  height: 84px;
  min-width: 1000px;
  background-color: #12121a;
  z-index: 200
}

@media only screen and (max-width: 1280px) {
  .t-header .t-header-container .t-header-rig .topbar-btn,.t-header .t-header-container .t-header-rig.line .topbar-subscribe,.t-header .t-header-container .t-header-rig.unline .topbar-subscribe-wrapper {
      display:none
  }

  .t-header {
      padding: 0 24px
  }

  .t-header .t-header-container .t-header-rig .topbar-icon {
      -webkit-transition: all .3s;
      transition: all .3s;
      width: 36px
  }

  .t-header .t-header-container .t-header-rig.line .topbar-subscribe-icon {
      width: 36px
  }
}

.t-header-container {
  margin: 0 auto
}

.t-header-container .t-header-lf {
  float: left
}

.t-header-container .t-header-lf .topbar-logo {
  float: left;
  width: 136px;
  height: 48px;
  margin-top: 18px;
  background: url(../images/tapread_logo@2x.png) no-repeat;
  background-size: 100% 100%
}

.t-header-container .t-header-lf .topbar-nav-item {
  float: left;
  position: relative;
  width: 80px;
  margin-top: 8px;
  text-align: center
}

.t-header-container .t-header-lf .topbar-nav-item.home,.t-header-container .t-header-lf .topbar-nav-item.novel {
  margin-left: 24px
}

.t-header-container .t-header-lf .topbar-nav-item>a {
  display: block;
  height: 76px;
  line-height: 76px;
  color: #b8bfcc;
  -webkit-transition: color .3s;
  transition: color .3s;
  font-family: NunitoSans-Bold
}

.t-header-container .t-header-lf .topbar-nav-item>a:hover {
  color: #fff
}

.t-header-container .t-header-lf .topbar-nav-item>a>i {
  position: absolute;
  top: 27px;
  right: -27px;
  display: inline-block;
  width: 31px;
  height: 20px;
  background: url(data:image/png;base64,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) center center no-repeat;
  background-size: 100% 100%
}

.t-header-container .t-header-rig {
  float: right;
  margin-top: 24px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .25s;
  transition: opacity .25s
}

.t-header-container .t-header-rig.line,.t-header-container .t-header-rig.unline {
  visibility: visible;
  opacity: 1
}

.t-header-container .t-header-rig.line .topbar-online,.t-header-container .t-header-rig.line .topbar-subscribe-wrapper {
  display: block
}

.t-header-container .t-header-rig.unline .topbar-login {
  display: block
}

.t-header-container .t-header-rig .topbar-search {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  display: block;
  width: 200px;
  height: 36px;
  line-height: 36px;
  margin-right: 24px;
  padding-left: 32px;
  color: #7a8599;
  background-color: rgba(184,191,204,.2);
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s
}

.t-header-container .t-header-rig .topbar-search .iconfont {
  position: absolute;
  left: 8px;
  top: 0;
  font-size: 16px
}

.t-header-container .t-header-rig .topbar-search:hover {
  background-color: rgba(184,191,204,.4);
  color: #b8bfcc
}

.t-header-container .t-header-rig .topbar-wrapper {
  float: left;
  margin-right: 24px
}

.t-header-container .t-header-rig .topbar-getapp {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 32px;
  line-height: 30px;
  margin-top: 2px;
  padding: 0 24px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid #ffce2e;
  color: #ffce2e;
  -webkit-transition: background-color .3s,color .3s;
  transition: background-color .3s,color .3s;
  font-family: NunitoSans-Bold
}

.t-header-container .t-header-rig .topbar-getapp:hover {
  background-color: #ffce2e;
  color: #000
}

.t-header-container .t-header-rig .topbar-icon {
  float: left;
  width: 0;
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #7a8599;
  font-size: 24px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer
}

.t-header-container .t-header-rig .topbar-icon:hover {
  background-color: #33343d
}

.t-header-container .t-header-rig .topbar-publish {
  float: left;
  position: relative;
  line-height: 36px;
  -webkit-transition: color .3s;
  transition: color .3s;
  color: #b8bfcc;
  font-family: NunitoSans-Bold;
  cursor: pointer
}

.t-header-container .t-header-rig .topbar-publish:hover {
  color: #fff
}

.t-header-container .t-header-rig .topbar-subscribe-wrapper {
  display: none
}

.t-header-container .t-header-rig .topbar-subscribe {
  float: left;
  position: relative;
  line-height: 36px;
  -webkit-transition: color .3s;
  transition: color .3s;
  color: #b8bfcc;
  font-family: NunitoSans-Bold
}

.t-header-container .t-header-rig .topbar-subscribe:hover {
  color: #fff
}

.t-header-container .t-header-rig .topbar-subscribe .subnum {
  display: none;
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  top: -4px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background-color: #ff6363;
  color: #fff;
  text-align: center;
  font-size: 12px
}

.t-header-container .t-header-rig .topbar-login {
  display: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: url(../images/dark_avast@2x.png) no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  border: 1px solid #363d4d;
  -webkit-transition: border-color .25s;
  transition: border-color .25s
}

.novel-cate-drop .cate-drop-item,.topbar-online .person-box .person-info {
  -webkit-transition: -webkit-transform .3s;
  -webkit-transform: translateY(-16px)
}

.t-header-container .t-header-rig .topbar-login:hover {
  border-color: #7a8599
}

.t-header-container .t-header-rig .topbar-online {
  display: none
}

.novel-cate-drop {
  position: absolute;
  visibility: hidden;
  width: 240px;
  padding: 8px 0 16px;
  background-color: #12121a;
  font-size: 16px;
  border-top: 1px solid #363d4d
}

.novel-cate-drop .cate-drop-item {
  display: block;
  padding-left: 24px;
  line-height: 48px;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  transform: translateY(-16px)
}

.topbar-nav-item.novel:hover .novel-cate-drop,.topbar-online.fadeInSign .signin-tip,.topbar-online:hover .person-box {
  visibility: visible
}

.novel-cate-drop .cate-drop-item .iconfont {
  display: inline-block;
  margin-right: 16px;
  font-size: 24px;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s,-webkit-transform .2s
}

.novel-cate-drop .cate-drop-item:hover {
  background-color: #ffce2e;
  color: #000
}

.novel-cate-drop .cate-drop-item:hover .iconfont {
  -webkit-transform: scale(1.333);
  transform: scale(1.333);
  color: #000
}

.topbar-nav-item.novel:hover .cate-drop-item {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: initial;
  opacity: 1
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(2) {
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(3) {
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(4) {
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(5) {
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(6) {
  -webkit-transition-delay: .1s;
  transition-delay: .1s
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(7) {
  -webkit-transition-delay: 120ms;
  transition-delay: 120ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(8) {
  -webkit-transition-delay: 140ms;
  transition-delay: 140ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(9) {
  -webkit-transition-delay: 160ms;
  transition-delay: 160ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(10) {
  -webkit-transition-delay: 180ms;
  transition-delay: 180ms
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(11) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s
}

.topbar-nav-item.novel:hover .cate-drop-item:nth-child(12) {
  -webkit-transition-delay: 220ms;
  transition-delay: 220ms
}

.topbar-online {
  float: left;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%
}

.topbar-online .avator {
  border: 1px solid #363d4d;
  border-radius: 50%;
  -webkit-transition: border-color .25s;
  transition: border-color .25s;
  width: 100%;
  height: 100%
}

.topbar-online .avator:hover {
  border-color: #7a8599
}

.topbar-online .signin-tip {
  visibility: hidden;
  position: absolute;
  height: 24px;
  top: 54px;
  right: -5px;
  padding: 8px 16px;
  background-color: #ffce2e;
  -webkit-box-shadow: 0 2px 8px 0 rgba(217,166,0,.3);
  box-shadow: 0 2px 8px 0 rgba(217,166,0,.3);
  border-radius: 4px;
  z-index: 3;
  cursor: pointer
}

.topbar-online .signin-tip .i-wrapper {
  white-space: nowrap
}

.topbar-online .signin-tip .iconfont {
  font-size: 24px;
  vertical-align: middle
}

.topbar-online .signin-tip .txt {
  margin-left: 8px;
  line-height: 20px;
  vertical-align: middle
}

.topbar-online .signin-tip .i-triangle {
  position: absolute;
  width: 100%;
  height: 7px;
  top: -14px;
  left: 0
}

.topbar-online .signin-tip .triangle-bar {
  position: absolute;
  right: 16px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffce2e
}

.topbar-online .person-box {
  visibility: hidden;
  position: absolute;
  right: 0;
  top: 57px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 320px;
  padding: 24px 0 16px;
  background-color: #12121a;
  -webkit-box-shadow: 0 2px 16px 0 rgba(54,61,77,.2),0 1px 0 0 #363d4d;
  box-shadow: 0 2px 16px 0 rgba(54,61,77,.2),0 1px 0 0 #363d4d;
  border-top: 1px solid #363d4d
}

.topbar-online .person-box .tirangle-box {
  position: absolute;
  width: 100%;
  height: 24px;
  top: -24px
}

.topbar-online .person-box .person-info {
  padding: 0 24px;
  transform: translateY(-16px);
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s
}

.topbar-online .person-box .person-info .person-avator {
  width: 60px;
  height: 60px;
  border-radius: 50%
}

.topbar-online .person-box .person-info .person-name {
  display: inline-block;
  max-width: 102px;
  margin-left: 16px;
  font-size: 20px;
  color: #b8bfcc;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.topbar-online .person-box .person-info .usermark {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  width: 86px;
  height: 20px;
  color: red
}

.topbar-online .person-box .person-info .usermark.author {
  background: url(//static.tapread.com/pc/images/user_mark_author.png) no-repeat;
  background-size: 100% 100%
}

.topbar-online .person-box .person-info .usermark.editor {
  background: url(//static.tapread.com/pc/images/user_mark_editor.png) no-repeat;
  background-size: 100% 100%
}

.topbar-online .person-box .person-info .usermark.translator {
  background: url(//static.tapread.com/pc/images/user_mark_translator.png) no-repeat;
  background-size: 100% 100%
}

.topbar-online .person-box .recharge-box {
  height: 28px;
  line-height: 28px;
  padding: 34px 24px 10px;
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s
}

.topbar-online .person-box .recharge-box .billing-entity {
  float: left;
  padding-right: 20px
}

.topbar-online .person-box .recharge-box .billing-entity:hover .exit-numerical {
  text-decoration: underline
}

.topbar-online .person-box .recharge-box .recharge-icon {
  float: left;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  background: url(data:image/png;base64,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) no-repeat;
  background-size: 100% 100%
}

.topbar-online .person-box .recharge-box .exit-numerical {
  float: left;
  margin-left: 8px;
  color: #fff;
  font-size: 16px
}

.topbar-online .person-box .recharge-box .recharge-btn {
  float: right;
  width: 110px;
  height: 28px;
  line-height: 28px;
  font-size: 12px
}

.topbar-online .person-box .signin-entity {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 60px;
  margin: 8px 24px;
  padding: 8px 16px;
  color: #fff;
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  background: -webkit-gradient(linear,right top,left top,from(#ff59ed),to(#784bfc));
  background: -webkit-linear-gradient(right,#ff59ed 0,#784bfc 100%);
  background: linear-gradient(270deg,#ff59ed 0,#784bfc 100%)
}

.topbar-online .person-box .signin-entity .txt_1 {
  line-height: 24px;
  font-size: 16px;
  font-family: NunitoSans-Bold
}

.topbar-online .person-box .signin-entity .txt_2 {
  line-height: 20px;
  font-size: 12px
}

.topbar-online .person-box .signin-entity:hover .signin-bg_2 {
  -webkit-transform: scale(1.2) rotate(-10deg);
  transform: scale(1.2) rotate(-10deg)
}

.topbar-online .person-box .signin-entity .signin-bg_1 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background: url(data:image/png;base64,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) right center no-repeat;
  background-size: auto 100%
}

.topbar-online .person-box .signin-entity .signin-bg_2 {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 10px;
  right: 0;
  background: url(../images/signIn/present@2x.png) no-repeat;
  background-size: 100% 100%;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg)
}

.topbar-online .person-box .profile {
  position: relative;
  display: block;
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
  color: #fff;
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  font-size: 16px
}

.topbar-online .person-box .logout,.topbar-online .person-box .notification {
  -webkit-transform: translateY(-16px);
  -webkit-transition: -webkit-transform .3s
}

.topbar-online .person-box .profile .profile-tip {
  position: absolute;
  top: 12px;
  right: 209px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff6363
}

.topbar-online .person-box .profile .profile-tip.hide {
  display: none
}

.topbar-online .person-box .profile:hover {
  background-color: #ffce2e;
  color: #000
}

.topbar-online .person-box .notification {
  display: block;
  height: 48px;
  padding: 0 24px;
  font-size: 0;
  color: #fff;
  transform: translateY(-16px);
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s
}

.topbar-online .person-box .notification .notification-txt {
  display: inline-block;
  margin-top: 14px;
  vertical-align: middle;
  font-size: 16px;
  text-align: center
}

.topbar-online .person-box .notification .notification-num {
  display: inline-block;
  margin: 14px 0 0 8px;
  padding: 0 6px;
  min-width: 12px;
  height: 20px;
  vertical-align: middle;
  font-size: 12px;
  text-align: center;
  background-color: #ff6363;
  border-radius: 10px;
  color: #fff
}

.topbar-online .person-box .notification .notification-num.hidden {
  display: none
}

.topbar-online .person-box .notification:hover {
  background-color: #ffce2e;
  color: #000
}

.topbar-online .person-box .logout {
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  transform: translateY(-16px);
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s
}

.t-footer-content,.t-index-tip {
  display: -webkit-box;
  display: -ms-flexbox;
  line-height: 20px
}

.topbar-online .person-box .logout:hover {
  background-color: #ffce2e;
  color: #000
}

.topbar-online:hover .person-box .person-info {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.topbar-online:hover .person-box .recharge-box {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms
}

.topbar-online:hover .person-box .signin-entity {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms
}

.topbar-online:hover .person-box .profile {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms
}

.topbar-online:hover .person-box .notification {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms
}

.topbar-online:hover .person-box .logout {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: .1s;
  transition-delay: .1s
}

.t-footer {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  background-color: #121212
}

.t-container,.t-footer-content {
  -webkit-box-sizing: border-box;
  max-width: 1200px
}

.t-footer-content {
  box-sizing: border-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  position: relative;
  margin: 0 auto;
  padding: 84px 0 64px;
  overflow: hidden
}

.dialog-container .dialog-footer .dialog-btn1,.dialog-container .dialog-footer .dialog-cancel,.t-footer-content .blk_1,.t-footer-content .blk_2,.t-footer-content .blk_3 {
  margin-right: 24px
}

.t-footer-content .blk_empty {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1
}

.t-footer-content .blk_1,.t-footer-content .blk_2,.t-footer-content .blk_3,.t-footer-content .blk_4 {
  width: 180px
}

.t-footer-content .blk_1 .footer-logo {
  display: block;
  width: 167px;
  height: 40px;
  background: url(../images/zonghenglogo@2x.png) no-repeat;
  background-size: 100% 100%
}

.t-footer-content .blk_1 .external-link-wrapper {
  overflow: hidden;
  margin-top: 156px
}

.t-footer-content .blk_1 .external-link-item {
  display: block;
  width: 32px;
  height: 32px;
  float: left;
  text-align: center;
  border-radius: 50%;
  color: #7a8599;
  cursor: pointer;
  -webkit-transition: all .2s;
  transition: all .2s
}

.t-footer-content .blk_1 .external-link-item:hover {
  background-color: #fff;
  color: #000
}

.t-footer-content .blk_1 .external-link-item .iconfont {
  line-height: 32px;
  font-size: 20px
}

.t-footer-content .blk_1 .footer-logo-txt {
  width: 120px;
  height: 20px;
  margin-top: 14px;
  font-size: 12px;
  color: #7a8599
}

.t-footer-content .blk-title {
  line-height: 24px;
  margin-bottom: 24px;
  font-size: 16px;
  color: #fff;
  font-family: NunitoSans-Bold
}

.t-footer-content .blk-item {
  display: block;
  margin-bottom: 12px;
  color: #7a8599;
  cursor: pointer
}

.t-footer-content .blk-item:hover {
  color: #fff;
  text-decoration: underline
}

.t-footer-content .zongheng-logo {
  display: block;
  width: 120px;
  height: 30px
}

.t-footer-content .zongheng-txt-logo {
  width: 120px;
  height: 18px;
  margin-top: 176px;
  background: url(data:image/png;base64,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) no-repeat;
  background-size: 100% 100%
}

@media only screen and (max-width: 1200px) {
  .t-footer-content {
      padding:64px 14px
  }
}

.activity-dialog .close-btn {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: #b8bfcc;
  -webkit-transition: color .25s,background-color .25s;
  transition: color .25s,background-color .25s
}

.dialog-dim,.toast {
  position: fixed;
  opacity: 0
}

.activity-dialog .close-btn:hover {
  color: #363d4d;
  background-color: #f2f3f5
}

.dialog-dim,.long-load-box {
  background-color: rgba(0,0,0,.8)
}

.activity-dialog .main {
  display: block;
  width: 100%;
  height: 340px;
  margin-top: 60px;
  cursor: pointer
}

.c-body {
  padding-top: 0
}

body {
  min-width: 980px;
  padding-top: 84px
}

html.hidden {
  overflow: hidden
}

.t-container {
  box-sizing: border-box;
  min-width: 980px;
  height: 100%;
  margin: 0 auto
}

.no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lf {
  float: left
}

.rig {
  float: right
}

.overfl {
  overflow: hidden
}

.clearfix {
  zoom:1}

.clearfix:after {
  clear: both;
  content: '';
  display: block
}

.dialog-dim {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  z-index: 998;
  -webkit-transition: opacity .15s,-webkit-transform .15s;
  transition: opacity .15s,-webkit-transform .15s;
  transition: opacity .15s,transform .15s;
  transition: opacity .15s,transform .15s,-webkit-transform .15s
}

.dialog-dim.dialog-dim-in {
  opacity: 1;
  visibility: visible
}

.toast-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  font-size: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.toast-content .toast-info {
  max-width: 420px;
  line-height: 24px;
  margin-left: 16px;
  font-size: 16px;
  vertical-align: top
}

.dialog-container,.toast {
  -webkit-box-sizing: border-box;
  margin-left: -260px
}

.toast-content .iconfont {
  width: 32px;
  font-size: 32px;
  color: #fff
}

.toast-success {
  background-color: #4ed5ac
}

.toast-danger {
  background-color: #ff6363
}

.toast {
  left: 50%;
  top: 112px;
  width: 520px;
  height: 88px;
  box-sizing: border-box;
  color: #fff;
  -webkit-box-shadow: 0 2px 16px 0 rgba(54,61,77,.2);
  box-shadow: 0 2px 16px 0 rgba(54,61,77,.2);
  z-index: 1001;
  border-radius: 2px;
  -webkit-transform: translateY(-80px);
  transform: translateY(-80px);
  -webkit-transition: opacity .2s,-webkit-transform .2s;
  transition: opacity .2s,-webkit-transform .2s;
  transition: transform .2s,opacity .2s;
  transition: transform .2s,opacity .2s,-webkit-transform .2s
}

.load-dim,.toast-dim {
  position: fixed;
  top: 0;
  left: 0
}

.toast.active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.toast-dim {
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 1000
}

.load-dim {
  width: 100%;
  height: 100%;
  z-index: 1002
}

.long-load-box {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  border-radius: 4px
}

.long-load-box .loader {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 28px auto;
  text-indent: -9999em;
  border-top: 4px solid rgba(255,255,255,.2);
  border-right: 4px solid rgba(255,255,255,.2);
  border-bottom: 4px solid rgba(255,255,255,.2);
  border-left: 4px solid #ffce2e;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: loaderAnimate 1.1s infinite linear;
  animation: loaderAnimate 1.1s infinite linear;
  border-radius: 50%
}

.t-index-tip {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 40px;
  background-color: rgba(18,18,26,.9);
  z-index: 999;
  color: #b8bfcc;
  font-size: 14px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s,-webkit-transform 1s
}

.t-index-tip.fadeOut {
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}

.t-index-tip .content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 16px 0
}

.t-index-tip .content .underline {
  display: inline;
  color: #fff;
  font-family: NunitoSans-Bold
}

.t-index-tip .content .underline:hover {
  text-decoration: underline
}

.t-index-tip .close {
  padding: 0 24px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  margin-left: 40px
}

.dialog-container {
  box-sizing: border-box;
  position: fixed;
  left: 50%;
  top: 15%;
  width: 520px;
  min-height: 272px;
  padding: 24px 24px 104px;
  background-color: #fff;
  z-index: 1001;
  border-radius: 4px;
  opacity: 0;
  -webkit-box-shadow: 0 2px 16px 0 rgba(54,61,77,.2);
  box-shadow: 0 2px 16px 0 rgba(54,61,77,.2);
  -webkit-transform: translate3d(0,0,0) scale(.9);
  transform: translate3d(0,0,0) scale(.9);
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: transform,opacity;
  transition-property: transform,opacity,-webkit-transform
}

.dialog-container.dialog-container-in {
  opacity: 1;
  -webkit-transition-duration: 150ms;
  transition-duration: 150ms;
  -webkit-transform: translate3d(0,0,0) scale(1);
  transform: translate3d(0,0,0) scale(1)
}

.dialog-container .dialog-close {
  float: right;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: #b8bfcc;
  -webkit-transition: color .25s,background-color .25s;
  transition: color .25s,background-color .25s
}

.dialog-container .dialog-close:hover {
  color: #363d4d;
  background-color: #f2f3f5
}

.dialog-container .dialog-footer {
  position: absolute;
  height: 40px;
  bottom: 24px;
  right: 40px;
  border-radius: 20px
}

.dialog-container .dialog-footer .dialog-cancel,.dialog-container .dialog-footer .dialog-confirm {
  float: right;
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px
}

.dialog-container .dialog-footer .dialog-btn1,.dialog-container .dialog-footer .dialog-btn2 {
  float: right;
  height: 40px;
  line-height: 40px;
  padding: 0 40px
}

.dialog-container .dialog-content {
  clear: right;
  margin-left: 16px
}

.dialog-container .dialog-content .iconfont {
  float: left;
  font-size: 40px;
  line-height: 40px;
  color: #ff6363
}

.dialog-container .dialog-content .dialog-info {
  float: left;
  width: 384px;
  font-size: 16px;
  line-height: 24px;
  margin-left: 16px;
  color: #000
}

.dialog-container .dialog-content .dialog-info .dialog-info-tip {
  line-height: 22px;
  margin-top: 16px;
  color: #7a8599
}

@-webkit-keyframes loaderAnimate {
  0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
  }

  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}

@keyframes loaderAnimate {
  0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
  }

  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}