html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style: none;
}
button,
input,
select {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
img,
video {
  height: auto;
  max-width: 100%;
}
iframe {
  border: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

:root {
  /* --primary-100: #1f3a5f;
  --primary-200: #4d648d;
  --primary-300: #acc2ef;
  --accent-100: #3d5a80;
  --accent-200: #cee8ff;
  --text-100: #ffffff;
  --text-200: #e0e0e0;
  --text-300: #b6b6b6;
  --bg-100: #0f1c2e;
  --bg-200: #1f2b3e;
  --bg-300: #374357;
  --bg-400: #1f3a5f;
  color: var(--text-200); */
  --primary-100: #1f3a5f;
  --primary-200: #4d648d;
  --primary-300: #acc2ef;
  --accent-100: #3d5a80;
  --accent-200: #cee8ff;
  --text-100: #ffffff;
  --text-200: #e0e0e0;
  --text-300: #b6b6b6;
  --bg-100: #000000;
  --bg-200: #111111;
  --bg-300: #2e2e2e;
  --bg-400: #272727;
  --header-bg-100: rgb(29, 29, 29);
  --header-bg-200: rgb(68, 68, 68);
  color: var(--text-200);
}
a:link {
  color: var(--text-100);
  text-decoration: none;
}
a:visited {
  color: var(--text-100);
}
a:hover {
  color: var(--text-100);
}
a:focus {
  color: var(--text-100);
}
a:active {
  color: var(--text-100);
}
body {
  background-color: var(--bg-100);
  max-width: 768px;
  margin: 0 auto;
}
.content {
  padding: 0 5px;
}
.fl-l {
  float: left;
}
.fl-r {
  float: right;
}

.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.header {
  margin-bottom: 5px;
  background: linear-gradient(to bottom, var(--header-bg-100), var(--header-bg-200));
  padding: 3px;
}
.header-left {
  font-size: 16px;
}
.header-left a {
  margin-left: 10px;
}
.nav {
  margin-bottom: 5px;
  border-radius: 5px;
  overflow: hidden;
  /* background-color: var(--bg-200);
  padding: 0.75rem; */
}
.one_category {
  position: relative;
  background-color: var(--bg-200);
  padding: 6px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  align-items: center;
  align-content: space-between;
}
.category_name {
  width: 12%;
  font-size: 15px;
  color: var(--text-100);
}

.category_name:after {
  position: absolute;
  width: 1px;
  height: 15px;
  margin: 3px 0 0 12px;
  content: "";
  background-color: var(--accent-200);
}
.nav_s {
  display: inline-block;
  width: 88%;
  margin-left: 25px;
  font-size: 15px;
}
.nav_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  line-height: 35px;
}
.nav_flex .event_nav {  
  flex: 0 0 calc(25% - 10px);  /* 每个元素占总宽度的 25%，减去间距 */  
  box-sizing: border-box;        /* 边框和内边距包含在宽度计算内 */  
  text-align: center;            /* 文本居中 */   
}  
.nav_flex a {
  width: 25%;
  /* margin-bottom: 10px; */
}
.videolist {
  margin: 10px 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.videolist .one {
  width: 49%;
  margin-bottom: 12px;
}
.coverImg {
  width: 100%;
  /* aspect-ratio: 16/9; */
  padding-top: 56.25%;
}

.list_img_container {
  width: 100%;
  padding-top: 56.25%; /* 9/16 */
  position: relative;
}

.list_img_container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.videolist .duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 12px;
  background-color: rgb(31 41 55 / 0.75);
  border-radius: 6px;
  padding: 4px 8px 4px 8px;
}
.videolist .title {
  font-size: 13px;
  color: var(--text-300);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
  margin-top: 8px;
  margin-bottom: 8px;
}
.play_actions_ct {
  display: flex;
  align-items: center;
  justify-content: center;
  /* text-align: center; */
  /* background-color: var(--bg-300);
  border-radius: 5px; */
}
.play_actions {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  padding: 10px;
}
.detail {
  padding-bottom: 16px;
  padding-left: 12px;
  padding-right: 12px;
  /* border-color: rgb(248 113 113 / 1); */
  border-color: var(--primary-200);
  border-style: solid;
  border-width: 0 0 2px 0;
  display: inline-block;
  margin-bottom: -1px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px; /* 增加左边距，避免贴边 */
}
.tag {
  background-color: var(--primary-100);
  color: var(--text-100);
  border-radius: 5px;
  padding: 5px;
  font-size: 14px;
  margin: 0 5px 5px 0;
}

.toast {
  position: fixed;
  bottom: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  color: #000;
  padding: 0px 10px;
  border-radius: 5px;
  font-size: 15px;
  z-index: 9999999999999;
  align-items: center;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  height: 40px;
  line-height: 40px;
  display: none;
}
.msg_content {
  display: inline-block;
  padding: 0px 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
}

.toast .content {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hidden {
  display: none;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999999999999;
  display: none;
}
.modal .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  padding: 0 20px 0 20px;
}
@media (min-width: 640px) {
  .modal .content {
    max-width: 384px;
  }
}
.modal a {
  color: rgb(235, 203, 139);
}
.modal-form {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.form-group {
  text-align: left;
  padding: 8px 12px;
  border-width: 1px;
  border-color: rgb(209, 213, 219);
  border-style: solid;
}
.mt-1 {
  margin-top: -1px;
}
.form-err {
  color: rgb(185 28 28);
  background-color: rgb(254, 242, 242);
  font-size: 13px;
  margin-bottom: 25px;
  border-radius: 6px;
  padding: 16px;
  display: none;
}
.form-err li {
  list-style-type: disc;
}
.form-err ul {
  padding-left: 20px;
}
.form-group label {
  display: block;
  font-size: 12px;
  color: rgb(156, 163, 175);
}
.form-group input {
  display: block;
  width: 100%;
  color: rgb(17, 24, 39);
  line-height: 20px;
  border-width: 0px;
  outline: none;
  background-color: transparent;
  font-size: 16px;
  padding: 0;
}
.modal-form-bottom {
  margin-top: 24px;
}
.modal-form-bottom button {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 0.375rem;
  border-width: 0px;
  border-color: transparent;
  /* background-color: rgb(254, 98, 142); */
  /* background: linear-gradient(100deg, #560a9b, #9e158f); */
  /* background: linear-gradient(100deg, #560a9b, #9e158f); */
  background-color: rgb(254, 87, 142);
  font-weight: bold;
  margin: 0;
  color: #fff;
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  z-index: 999999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.spinner_GuJz {
  transform-origin: center;
  animation: spinner_STY6 1.5s linear infinite;
}
@keyframes spinner_STY6 {
  100% {
    transform: rotate(360deg);
  }
}

.svg-text {
  display: flex;
  align-items: center;
}

.breakcump {
  display: flex;
  align-items: center;
  justify-content: start;
  list-style-type: none;
  font-size: 15px;
}
.breakcump a {
  color: #999;
}
.breakcump .current {
  color: #fff;
}
.breadcrumb-separator {
  margin-inline: 8px;
  color: rgba(255, 255, 255, 0.45);
}
.child-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.child-text {
  background-color: #2f2f2f;
  color: #dfdfdf;
  border-radius: 5px;
  padding: 3px;
  font-size: 14px;
  margin: 0 10px 5px 0;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.flex-j-c-center {
  justify-content: center;
}
.flex-j-c-start {
  justify-content: start;
}
.flex-j-c-between {
  justify-content: space-between;
}
.flex-j-c-evenly {
  justify-content: space-evenly;
}
.flex-a-i-end {
  align-items: flex-end;
}
.flex-d-column {
  flex-direction: column;
}

@media (min-width: 550px) {
  .footer {
    margin-bottom: 100px;
  }
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.pagination input {
  font-size: 16px;
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
  border-color: rgb(76, 86, 106);
  background-color: rgb(67, 76, 94);
  padding: 6px 16px;
  width: 112px;
  color: rgb(216, 222, 233);
}
.pagination input:focus {
  outline: solid 2px rgb(129, 161, 193);
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* 按钮之间的间距 */
  margin-bottom: 15px;
  flex-wrap: wrap; /* 允许内容换行 */
}

.pagination a {
  font-size: 14px;
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
  background-color: rgb(67, 76, 94);
  color: #fff; /* 文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  transition: background-color 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */
  cursor: pointer; /* 鼠标指针样式 */
  border: 1px solid transparent; /* 边框 */
  margin: 4px; /* 添加外边距，避免换行时按钮紧贴 */
}

.pagination a:hover {
  background-color: rgb(85, 95, 115); /* 鼠标悬停时的背景色 */
  transform: translateY(-2px); /* 悬停时轻微上移 */
}

.pagination strong {
  font-size: 14px;
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
  background-color: #007bff; /* 当前页的背景色 */
  color: #fff; /* 当前页的文字颜色 */
  border: 1px solid transparent;
  margin: 4px; /* 添加外边距，避免换行时按钮紧贴 */
}

.pagination a:active {
  transform: translateY(0); /* 点击时恢复原位 */
}

.footer {
  margin-top: 30px;
  padding: 20px 0;
  /* border-top: rgb(55, 65, 81) solid 1px; */
}

.ucenter .user_avatar {
  max-width: 100px;
  max-height: 100px;
}

.circle {
  border-radius: 100%;
  overflow: hidden;
}
.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uc-ac-num {
  font-size: 24px;
}
.uc-ac-title {
  color: #979797;
}
.ft-size-14 {
  font-size: 14px;
}
.ft-size-16 {
  font-size: 16px;
}
.ft-size-24 {
  font-size: 24px;
}
.uc-content {
  position: relative;
  margin: 20px 5px 0px 5px;
  min-height: 200px;
  padding: 10px 10px;
  background-color: #2f2f2f;
  border-radius: 10px;
  overflow: hidden;
}
.abs-center {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.border-gray-300 {
  border-color: rgb(209, 213, 219);
}

.bg-gray-50 {
  background-color: rgb(249, 250, 251);
}
.placeholder-gray-400::placeholder {
  color: rgb(156, 163, 175);
}
.border-1 {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.rounded-l-md {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.rounded-r-md {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.rounded-t-md {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.rounded-b-md {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.fixed {
  position: fixed;
}
.shared-card {
  height: 30vh;
  background-color: #fff;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 99999;
}
.favorites {
  text-align: center;
}
.favorites .imgmain {
  border-radius: 10px;
  width: 100%;
}
.favorites .close {
  display: inline-block;
  width: 10%;
  /* filter: brightness(0) invert(1); */
}

.changelist {
}
.logo2 img {
  height:46px;
}
.modal.ads {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal.ads .main {
  position: relative;
  max-width: auto;
  max-height: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.modal.ads a {
  display: block;
  text-align: center;
  padding: 20px;
}

.modal.ads img {
  max-width: 100%;
  max-height: 35vh;
  border-radius: 18px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.modal.ads .close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(153, 0, 255, 0.9) !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  z-index: 1001 !important;
}

/* 悬停状态优化 */
.modal.ads .close:hover {
  background: #18017e !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25) !important;
  transform: scale(1.1) !important;
}

/* 关闭图标样式 */
.modal.ads .close img {
  width: 60% !important;
  height: 60% !important;
  filter: invert(0%) !important; /* 保持黑色图标 */
  opacity: 0.8;
  transition: opacity 0.2s;
}

.modal.ads .close:hover img {
  opacity: 1;
}

/* 确保按钮始终在最上层 */
.modal.ads .main {
  position: relative;
  z-index: 1000;
}
.top_ad {
  background-color:#fff;
  box-shadow:0 0 10px rgba(0,0,0,.3);
  height:58px;
  padding:9px 0 9px 9px;
  width:100%
}
.top_ad>img {
  height:100%;
  -o-object-fit:cover;
  object-fit:cover;
  width:100%
}
.top_ad .logo {
  justify-content:flex-start
}
.top_ad .logo img {
  border-radius:6px;
  height:40px;
  width:40px
}
.top_ad .info {
  color:#db2639;
  height:100%;
  line-height:1.6;
  margin:0 10px;
  overflow:hidden;
  padding:2px 0
}
.top_ad .info,
.top_ad .info b {
  font-size:12px
}
.top_ad .download {
  background-color:#ff4d03;
  border-radius:14px;
  color:#fff;
  display:inline-block;
  font-size:12px;
  padding:7px 10px
}
.top_ad .close {
  font-size:28px;
  height:100%;
  line-height:38px;
  padding:0 12px;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  color:var(--bg-100);
}
.top_ad .close img {
  width:20px
}
.mui-bar {
  position: fixed;
  z-index: 99999999999999;
  right: 0;
  left: 0;
  height: 45px;
  padding-right: 10px;
  padding-left: 10px;
  border-bottom: 0;
  background-color: #f7f7f7;
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);
  box-shadow: 0 0 1px rgba(0,0,0,.85);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-size:14px;
}

  .mui-bar .mui-title {
      right: 40px;
      left: 40px;
      display: inline-block;
      overflow: hidden;
      width: auto;
      margin: 0;
      text-overflow: ellipsis;
  }

  .mui-bar .mui-backdrop {
      background: 0 0;
  }

.mui-bar-header-secondary {
  top: 44px;
}

.mui-bar-footer {
  bottom: 0;
}

.mui-bar-footer-secondary {
  bottom: 44px;
}

.mui-bar-footer-secondary-tab {
  bottom: 50px;
}

.mui-bar-footer, .mui-bar-footer-secondary, .mui-bar-footer-secondary-tab {
  border-top: 0;
}

.mui-bar-transparent {
  top: 0;
  background-color: rgba(247,247,247,0);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.mui-bar-nav {
  top: 0;
  -webkit-box-shadow: 0 1px 6px #ccc;
  box-shadow: 0 1px 6px #ccc;
}

  .mui-bar-nav ~ .mui-content .mui-anchor {
      display: block;
      visibility: hidden;
      height: 45px;
      margin-top: -45px;
  }

  .mui-bar-nav.mui-bar .mui-icon {
      margin-right: -10px;
      margin-left: -10px;
      padding-right: 10px;
      padding-left: 10px;
  }

.mui-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 44px;
  position: absolute;
  display: block;
  width: 100%;
  margin: 0 -10px;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  color: #000;
}

  .mui-title a {
      color: inherit;
  }

.mui-bar-tab {
  bottom: 0;
  display: table;
  width: 100%;
  height: 55px;
  padding: 0;
  table-layout: fixed;
  border-top: 0;
  border-bottom: 0;
  -webkit-touch-callout: none;
  background-color: #373737;
}

  .mui-bar-tab .mui-tab-item {
      display: table-cell;
      overflow: hidden;
      width: 1%;
      height: 40px;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #929292;
  }

      .mui-bar-tab .mui-tab-item.mui-active {
          color: #007aff;
      }

      .mui-bar-tab .mui-tab-item .mui-icon {
          top: 0px;
          width: 30px;
          height: 30px;
          padding-top: 0;
          padding-bottom: 0;
      }

          .mui-bar-tab .mui-tab-item .mui-icon ~ .mui-tab-label {
              font-size: 13px;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height:13.5px;
              color: #fff;
          }

          .mui-bar-tab .mui-tab-item .mui-icon:active {
              background: 0 0;
          }

.mui-focusin > .mui-bar-header-secondary, .mui-focusin > .mui-bar-nav {
  position: absolute;
}

.mui-focusin > .mui-bar ~ .mui-content {
  padding-bottom: 0;
}

.mui-bar .mui-btn {
  font-weight: 400;
  position: relative;
  z-index: 20;
  top: 7px;
  margin-top: 0;
  padding: 6px 12px 7px;
}

  .mui-bar .mui-btn.mui-pull-right {
      margin-left: 10px;
  }

  .mui-bar .mui-btn.mui-pull-left {
      margin-right: 10px;
  }

.mui-bar .mui-btn-link {
  font-size: 16px;
  line-height: 44px;
  top: 0;
  padding: 0;
  color: #007aff;
  border: 0;
}

  .mui-bar .mui-btn-link.mui-active, .mui-bar .mui-btn-link:active {
      color: #0062cc;
  }

.mui-bar .mui-btn-block {
  font-size: 16px;
  top: 6px;
  margin-bottom: 0;
  padding: 5px 0;
}

.mui-bar .mui-btn-nav.mui-pull-left {
  margin-left: -5px;
}

  .mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav {
      margin-right: -3px;
  }

.mui-bar .mui-btn-nav.mui-pull-right {
  margin-right: -5px;
}

  .mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav {
      margin-left: -3px;
  }

.mui-bar .mui-btn-nav:active {
  opacity: .3;
}

.mui-bar .mui-icon {
  font-size: 22px;
  position: relative;
  z-index: 20;
  padding-top: 10px;
  padding-bottom: 10px;
}

  .mui-bar .mui-icon:active {
      opacity: .3;
  }

.mui-bar .mui-btn .mui-icon {
  top: 1px;
  margin: 0;
  padding: 0;
}

.mui-bar .mui-title .mui-icon {
  margin: 0;
  padding: 0;
}

  .mui-bar .mui-title .mui-icon.mui-icon-caret {
      top: 4px;
      margin-left: -5px;
  }

.mui-bar input[type=search] {
  height: 29px;
  margin: 6px 0;
}

.mui-bar .mui-input-row .mui-btn {
  padding: 12px 10px;
}

.mui-bar .mui-search:before {
  margin-top: -10px;
}

.mui-bar .mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-bar .mui-input-row .mui-input-speech ~ .mui-icon-speech {
  top: 0;
  right: 12px;
}

.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-speech ~ .mui-icon-speech {
  top: 0;
  right: 0;
}

.mui-bar .mui-segmented-control {
  top: 7px;
  width: auto;
  margin: 0 auto;
}

.mui-bar.mui-bar-header-secondary .mui-segmented-control {
  top: 0;
}

.mui-badge {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 3px 6px;
  color: #333;
  border-radius: 100px;
  background-color: rgba(0,0,0,.15);
}

  .mui-badge.mui-badge-inverted {
      padding: 0 5px 0 0;
      color: #929292;
      background-color: transparent;
  }

.mui-badge-blue, .mui-badge-primary {
  color: #fff;
  background-color: #007aff;
}

  .mui-badge-blue.mui-badge-inverted, .mui-badge-primary.mui-badge-inverted {
      color: #007aff;
      background-color: transparent;
  }

.mui-badge-green, .mui-badge-success {
  color: #fff;
  background-color: #4cd964;
}

  .mui-badge-green.mui-badge-inverted, .mui-badge-success.mui-badge-inverted {
      color: #4cd964;
      background-color: transparent;
  }

.mui-badge-warning, .mui-badge-yellow {
  color: #fff;
  background-color: #f0ad4e;
}

  .mui-badge-warning.mui-badge-inverted, .mui-badge-yellow.mui-badge-inverted {
      color: #f0ad4e;
      background-color: transparent;
  }

.mui-badge-danger, .mui-badge-red {
  color: #fff;
  background-color: #dd524d;
}

  .mui-badge-danger.mui-badge-inverted, .mui-badge-red.mui-badge-inverted {
      color: #dd524d;
      background-color: transparent;
  }

.mui-badge-purple, .mui-badge-royal {
  color: #fff;
  background-color: #8a6de9;
}

  .mui-badge-purple.mui-badge-inverted, .mui-badge-royal.mui-badge-inverted {
      color: #8a6de9;
      background-color: transparent;
  }

.mui-icon .mui-badge {
  font-size: 10px;
  line-height: 1.4;
  position: absolute;
  top: -2px;
  left: 100%;
  margin-left: -10px;
  padding: 1px 5px;
  color: #fff;
  background: red;
}

@font-face {
  font-family: Muiicons;
  font-weight: 400;
  font-style: normal;
  src: url(/douyin/fonts/mui.ttf) format('truetype');
}

.mui-icon {
  font-family: Muiicons;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

  .mui-icon.mui-active {
      color: #007aff;
  }

  .mui-icon.mui-right:before {
      float: right;
      padding-left: .2em;
  }

.mui-icon-contact:before {
  content: '\e100';
}

.mui-icon-person:before {
  content: '\e101';
}

.mui-icon-personadd:before {
  content: '\e102';
}

.mui-icon-contact-filled:before {
  content: '\e130';
}

.mui-icon-person-filled:before {
  content: '\e131';
}

.mui-icon-personadd-filled:before {
  content: '\e132';
}

.mui-icon-phone:before {
  content: '\e200';
}

.mui-icon-email:before {
  content: '\e201';
}

.mui-icon-chatbubble:before {
  content: '\e202';
}

.mui-icon-chatboxes:before {
  content: '\e203';
}

.mui-icon-phone-filled:before {
  content: '\e230';
}

.mui-icon-email-filled:before {
  content: '\e231';
}

.mui-icon-chatbubble-filled:before {
  content: '\e232';
}

.mui-icon-chatboxes-filled:before {
  content: '\e233';
}

.mui-icon-weibo:before {
  content: '\e260';
}

.mui-icon-weixin:before {
  content: '\e261';
}

.mui-icon-pengyouquan:before {
  content: '\e262';
}

.mui-icon-chat:before {
  content: '\e263';
}

.mui-icon-qq:before {
  content: '\e264';
}

.mui-icon-videocam:before {
  content: '\e300';
}

.mui-icon-camera:before {
  content: '\e301';
}

.mui-icon-mic:before {
  content: '\e302';
}

.mui-icon-location:before {
  content: '\e303';
}

.mui-icon-mic-filled:before, .mui-icon-speech:before {
  content: '\e332';
}

.mui-icon-location-filled:before {
  content: '\e333';
}

.mui-icon-micoff:before {
  content: '\e360';
}

.mui-icon-image:before {
  content: '\e363';
}

.mui-icon-map:before {
  content: '\e364';
}

.mui-icon-compose:before {
  content: '\e400';
}

.mui-icon-trash:before {
  content: '\e401';
}

.mui-icon-upload:before {
  content: '\e402';
}

.mui-icon-download:before {
  content: '\e403';
}

.mui-icon-close:before {
  content: '\e404';
}

.mui-icon-redo:before {
  content: '\e405';
}

.mui-icon-undo:before {
  content: '\e406';
}

.mui-icon-refresh:before {
  content: '\e407';
}

.mui-icon-star:before {
  content: '\e408';
}

.mui-icon-plus:before {
  content: '\e409';
}

.mui-icon-minus:before {
  content: '\e410';
}

.mui-icon-checkbox:before, .mui-icon-circle:before {
  content: '\e411';
}

.mui-icon-clear:before, .mui-icon-close-filled:before {
  content: '\e434';
}

.mui-icon-refresh-filled:before {
  content: '\e437';
}

.mui-icon-star-filled:before {
  content: '\e438';
}

.mui-icon-plus-filled:before {
  content: '\e439';
}

.mui-icon-minus-filled:before {
  content: '\e440';
}

.mui-icon-circle-filled:before {
  content: '\e441';
}

.mui-icon-checkbox-filled:before {
  content: '\e442';
}

.mui-icon-closeempty:before {
  content: '\e460';
}

.mui-icon-refreshempty:before {
  content: '\e461';
}

.mui-icon-reload:before {
  content: '\e462';
}

.mui-icon-starhalf:before {
  content: '\e463';
}

.mui-icon-spinner:before {
  content: '\e464';
}

.mui-icon-spinner-cycle:before {
  content: '\e465';
}

.mui-icon-search:before {
  content: '\e466';
}

.mui-icon-plusempty:before {
  content: '\e468';
}

.mui-icon-forward:before {
  content: '\e470';
}

.mui-icon-back:before, .mui-icon-left-nav:before {
  content: '\e471';
}

.mui-icon-checkmarkempty:before {
  content: '\e472';
}

.mui-icon-home:before {
  content: '\e500';
}

.mui-icon-navigate:before {
  content: '\e501';
}

.mui-icon-gear:before {
  content: '\e502';
}

.mui-icon-paperplane:before {
  content: '\e503';
}

.mui-icon-info:before {
  content: '\e504';
}

.mui-icon-help:before {
  content: '\e505';
}

.mui-icon-locked:before {
  content: '\e506';
}

.mui-icon-more:before {
  content: '\e507';
}

.mui-icon-flag:before {
  content: '\e508';
}

.mui-icon-home-filled:before {
  content: '\e530';
}

.mui-icon-gear-filled:before {
  content: '\e532';
}

.mui-icon-info-filled:before {
  content: '\e534';
}

.mui-icon-help-filled:before {
  content: '\e535';
}

.mui-icon-more-filled:before {
  content: '\e537';
}

.mui-icon-settings:before {
  content: '\e560';
}

.mui-icon-list:before {
  content: '\e562';
}

.mui-icon-bars:before {
  content: '\e563';
}

.mui-icon-loop:before {
  content: '\e565';
}

.mui-icon-paperclip:before {
  content: '\e567';
}

.mui-icon-eye:before {
  content: '\e568';
}

.mui-icon-arrowup:before {
  content: '\e580';
}

.mui-icon-arrowdown:before {
  content: '\e581';
}

.mui-icon-arrowleft:before {
  content: '\e582';
}

.mui-icon-arrowright:before {
  content: '\e583';
}

.mui-icon-arrowthinup:before {
  content: '\e584';
}

.mui-icon-arrowthindown:before {
  content: '\e585';
}

.mui-icon-arrowthinleft:before {
  content: '\e586';
}

.mui-icon-arrowthinright:before {
  content: '\e587';
}

.mui-icon-pulldown:before {
  content: '\e588';
}
#nav {
      display:none;
  }
@media screen and (max-width:480px) {
  #nav {
      display:block;
  }
  html{
  padding-bottom: 84px;
}
}