#main-nav-head {
  background: unset;
}
.ranking-content {
  width: calc(100% - 260px);
  position: absolute;
  top: 0;
  display: flex;
}
.ranking-content .ranking-left {
  width: calc(100% - 320px);
  padding: 0 40px 0 40px;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ranking-content .ranking-left::-webkit-scrollbar {
  height: 0;
  width: 8px;
  color: transparent;
}
.ranking-content .ranking-left::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll);
  border-radius: 4px;
}
.ranking-content .ranking-left .head-box {
  width: 100%;
  margin-bottom: 10px;
  background-size: 101% 107%;
  background-position: -12px -11px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.ranking-content .ranking-left .head-box .head-left {
  padding: 20px;
}
.ranking-content .ranking-left .head-box .ranking-banner {
  margin-right: 90px;
  mix-blend-mode: multiply;
}
.ranking-content .ranking-left .head-box .ranking-border {
  width: 102%;
  height: 108%;
  position: absolute;
  top: -13px;
  left: -12px;
  z-index: -1;
}
.ranking-content .ranking-left .head-box .user-info {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.ranking-content .ranking-left .head-box .user-info > div {
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.ranking-content .ranking-left .head-box .user-info > div > span {
  color: var(--color--basic);
}
.ranking-content .ranking-left .head-box .user-info .ranking-user-name {
  font-weight: 700;
  color: var(--color--text2);
  margin: 0 10px;
}
.ranking-content .ranking-left .head-box .user-info .notice-rank {
  position: relative;
}
.ranking-content .ranking-left .head-box .user-info .notice-rank:hover .notice-hover {
  display: block;
}
.ranking-content .ranking-left .head-box .user-info .notice-rank .notice-hover {
  position: absolute;
  width: 300px;
  height: 30px;
  top: 12px;
  display: none;
}
.ranking-content .ranking-left .head-box .user-info .notice-rank .notice-box {
  border-radius: 8px;
  padding: 10px;
  background: var(--corlor--bg-deepblue);
  box-shadow: 0px 8px 16px 0px rgba(0, 17, 43, 0.08);
  position: absolute;
  left: 21px;
  top: 14px;
}
.ranking-content .ranking-left .head-box .user-info .notice-rank .notice-box > p {
  width: 276px;
  position: relative;
  z-index: 2;
  color: #FFF;
  font-size: 12px;
  line-height: 20px;
}
.ranking-content .ranking-left .head-box .user-info .notice-rank .notice-sanjiao {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 1;
}
.ranking-content .ranking-left .head-box .user-info .badges-box {
  border-radius: 20px;
  background: var(--color--level10);
}
.ranking-content .ranking-left .break-info-box {
  width: 530px;
  background: var(--grey-opacity02);
  border-radius: 10px;
  padding: 10px;
}
.ranking-content .ranking-left .break-info-box .text-16-24 {
  color: var(--color--basic);
  margin-bottom: 10px;
}
.ranking-content .ranking-left .break-info-box .level-table {
  width: 100%;
  display: flex;
}
.ranking-content .ranking-left .break-info-box .level-table li {
  padding: 10px;
  flex: 1;
  flex-shrink: 0;
  margin-right: 10px;
}
.ranking-content .ranking-left .break-info-box .level-table li .text-16-24 {
  color: var(--color--basic);
}
.ranking-content .ranking-left .break-info-box .level-table li .text-24-32 {
  color: var(--color--stress1);
  font-weight: 700;
}
.ranking-content .ranking-left .break-info-box .level-table li:last-child {
  margin-right: 0;
}
.ranking-content .ranking-left .ranking-table {
  padding: 20px;
}
.ranking-content .ranking-left .ranking-table .text-20-28 {
  padding: 10px 0 ;
  color: var(--color--stress1);
  margin-bottom: 10px;
  font-weight: 700;
}
.ranking-content .ranking-left .ranking-table .layui-table-cell {
  height: unset;
  line-height: unset;
}
.ranking-content .ranking-left .ranking-table .layui-table-view .layui-table th {
  padding: 10px 0;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav .middle-line {
  flex: 1;
  height: 1px ;
  background: var(--color--deep2--bg1);
  background-blend-mode: multiply;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav .ranking-tab-nav-title {
  background: var(--color--deep2--bg1);
  background-blend-mode: multiply;
  border-radius: 8px;
  padding: 4px;
  margin-right: 10px;
  display: flex;
  margin-bottom: 0;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav .ranking-tab-nav-title .ranking-tab-this {
  color: var(--color--text2);
  box-shadow: 0px 1px 2px #CCD6DE;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav .ranking-tab-nav-title .ranking-tab-this:after {
  height: 1px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav .ranking-tab-nav-title .ranking-tab-this:before {
  background: linear-gradient(-45deg, transparent 10px, #D9D9DB 0);
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li {
  padding: 13px 20px;
  font-size: var(--font--16);
  line-height: var(--font--24);
  color: var(--color--basic);
  cursor: pointer;
  margin-right: 6px;
  border-radius: 8px 8px 28px 8px;
  position: relative;
  letter-spacing: 0;
  transition: var(--tran300);
  z-index: 1;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li:after {
  content: "";
  display: block;
  width: calc(100% - 40px);
  height: 0;
  background-color: var(--color--text2);
  position: absolute;
  left: 20px;
  bottom: 13px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0px 8px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(-45deg, transparent 10px, transparent 0);
  z-index: -1;
  transition: var(--tran300);
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li:last-child {
  margin-right: 0;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li:hover:before {
  background: linear-gradient(-45deg, transparent 10px, #D9D9DB 0);
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li:hover {
  box-shadow: 0px 1px 2px #CCD6DE;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li:hover::after {
  height: 1px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-nav li:active {
  background: linear-gradient(-45deg, transparent 10px, var(--color--deep2--bg2--same) 0);
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content {
  width: 100%;
  padding: 10px 0;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item {
  display: none;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .select-box {
  display: flex;
  margin-bottom: 10px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .select-form.layui-form {
  width: 120px;
  margin-bottom: 10px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .layui-container {
  padding: 0;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .layui-form-select .layui-input {
  width: 120px;
  padding: 12px 39px 12px 20px;
  border: 1px solid var(--color--deep2--bg2);
  background: rgba(160, 168, 174, 0.05);
  background-blend-mode: multiply;
  border-radius: 8px;
  font-size: var(--font--16);
  line-height: var(--font--24);
  color: var(--color--text1);
  height: unset;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .layui-form-select dl {
  top: 56px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .layui-form-selectup dl {
  top: auto;
  bottom: 56px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .layui-input:hover {
  border: 1px solid #11C5DB !important;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .layui-input:focus {
  border: 1px solid #11C5DB !important;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-item .layui-form-select dl dd.layui-this {
  background-color: var(--color--deep2--bg2) !important;
  background-blend-mode: multiply !important;
  color: var(--color--text2) !important;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .ranking-tab-show {
  display: block;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-table-box {
  border: none !important;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-form.layui-border-box.layui-table-view {
  border: none;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background: rgba(160, 168, 174, 0.2);
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-laypage .layui-laypage-curr em {
  font-size: 15px;
  color: var(--color--text2);
  line-height: 26px;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-table-cell .layui-form-checkbox[lay-skin=primary] {
  display: none;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-laypage input:focus {
  border-color: var(--zhuangshi--cyan) !important;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-laypage button,
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-laypage input,
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-laypage select:focus {
  border-color: var(--zhuangshi--cyan) !important;
  border: none;
  background: rgba(160, 168, 174, 0.2);
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-table-page {
  margin-top: 30px;
  border: none;
}
.ranking-content .ranking-left .ranking-table .ranking-tab-content .layui-laypage a:hover {
  color: var(--zhuangshi--cyan);
}
.ranking-content .ranking-left .table-user-head {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}
.ranking-content .ranking-left .table-user-name {
  color: var(--color--basic);
}
.ranking-content .ranking-left .layui-table-cell:hover .table-user-info,
.ranking-content .ranking-left td:hover .table-user-info {
  display: block;
}
.ranking-content .ranking-left .table-user-info {
  width: 300px;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  background: url("/woniulab/img/decorate/white-wubianxing.png") -13px 0;
  background-size: 110% 107%;
  display: none;
  z-index: 2;
}
.ranking-content .ranking-left .table-user-info .user-info-name {
  padding: 10px;
  margin-bottom: 10px;
}
.ranking-content .ranking-left .table-user-info .user-info-name > img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 10px;
}
.ranking-content .ranking-left .table-user-info .user-info-name .text-20-28 {
  font-weight: 700;
  color: var(--color--stress1);
}
.ranking-content .ranking-left .table-user-info .rank-info {
  width: 100%;
  display: flex;
  border-top: 1px solid var(--color--deep2--bg2);
  padding: 10px;
}
.ranking-content .ranking-left .table-user-info .info-one {
  padding: 10px;
  flex: 1;
}
.ranking-content .ranking-left .table-user-info .info-one .text-16-24 {
  color: var(--color--text2);
  margin-bottom: 6px;
}
.ranking-content .ranking-left .table-user-info .info-one .level {
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ranking-content .ranking-left .table-user-info .info-one .level .text-16-24 {
  color: var(--color--basic);
  margin-bottom: 0;
}
.ranking-content .ranking-left .table-user-info .info-one .level:last-child {
  margin-bottom: 0;
}
.ranking-content .ranking-left .layui-table td .layui-table-cell {
  font-size: 16px !important;
  line-height: 24px !important;
  padding: 20px !important;
  height: unset !important;
  position: static;
}
.ranking-content .ranking-left .layui-table th .layui-table-cell {
  padding: 20px !important;
  height: unset !important;
}
.ranking-content .ranking-left .layui-container {
  width: 100%;
}
.ranking-content .ranking-left .layui-table-main {
  height: 100% !important;
}
.ranking-content .ranking-right {
  width: 320px;
  border-left: 1px solid var(--color--deep2--bg2);
  border-right: 1px solid var(--color--deep2--bg2);
  height: 100vh;
  overflow-y: auto;
  padding: 20px 0px 20px 0;
}
.ranking-content .ranking-right::-webkit-scrollbar {
  height: 0;
  width: 8px;
  color: transparent;
}
.ranking-content .ranking-right::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll);
  border-radius: 4px;
}
.ranking-content .ranking-right .learn-length {
  padding: 20px;
  margin-bottom: 10px;
}
.ranking-content .ranking-right .learn-length .learn-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ranking-content .ranking-right .learn-length .learn-head .text-16-24 {
  color: var(--color--basic);
}
.ranking-content .ranking-right .learn-length .learn-head .cyan {
  color: var(--zhuangshi--cyan);
  margin-left: 10px;
  font-weight: 700;
}
.ranking-content .ranking-right .learn-length .echarts-learn-length {
  width: 100%;
  height: 96px;
}
.ranking-content .ranking-right .learn-history {
  border-top: 1px solid var(--color--deep2--bg2);
  padding: 10px;
}
.ranking-content .ranking-right .learn-history .text-20-28 {
  font-weight: 700;
  color: var(--color--stress1);
  margin-bottom: 10px;
  padding: 0;
}
.ranking-content .ranking-right .layui-table td .layui-table-cell {
  font-size: 16px !important;
  line-height: 24px !important;
  padding: 21px 10px !important;
  height: unset !important;
}
.ranking-content .ranking-right .layui-table td .layui-table-cell .lab-name {
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: block;
}
.ranking-content .ranking-right .layui-table th .layui-table-cell {
  padding: 8px 10px 8px 10px !important;
  height: unset !important;
}
.ranking-content td[data-field=username] {
  overflow: visible;
}
.ranking-content th[data-field=classify] {
  text-align: right !important;
}
.ranking-content .badges-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 10px;
}
.layui-table {
  width: 100% !important;
}
.layui-table td,
.layui-table th,
.layui-table-header,
.layui-table-view {
  border: none !important;
}
.layui-table th,
td {
  padding: 0 !important;
}
.layui-table-view {
  margin: 0 !important;
}
.td-relative * {
  position: relative;
}
#main-nav-head .layui-layout-admin .layui-header {
  width: 260px !important;
}
#main-nav-head .layui-search,
#main-nav-head .release-box {
  display: none;
}
.layui-table-body.layui-table-main {
  min-height: calc(100vh - 518px) !important;
}
.layui-table-body.layui-table-main::-webkit-scrollbar {
  height: 0;
  width: 0px;
  color: transparent;
}
@media screen and (max-width: 980px) {
  .ranking-content .ranking-left {
    height: unset;
  }
  .ranking-content .ranking-left .layui-table td .layui-table-cell,
  .ranking-content .ranking-left .table-user-name,
  .ranking-content .ranking-left .layui-table th .layui-table-cell span {
    font-size: 12px !important;
  }
}