:root {
    --primary-color: #0084ff;
    --text-darker: #444d58;
    --text-dark: #6b7386;
    --text-default: #8590a6;
    --text-light: #a1a7b7;
    --text-lighter: #caccd5;
    --panel-border-color: #e9ecef;
    --divider: #f4f4f4;
    --primary-color-hover: #60a3f5
}

[data-theme='dark'] {
    --text-darker: #b3b3b3;
    --text-dark: #676767;
    --text-default: #676767;
    --text-light: #555555;
    --text-lighter: #4c5054;
    --divider: #313131;
    --button-hover-bg: rgba(76, 80, 84, .5);
    --card-border-color: #43454a;
    --panel-border-color: rgba(255, 255, 255, .05);
    --button-active-bg: #313131
}

html {
    font-size: 16px
}

body {
    background-color: #f6f6f6
}

header {
    background: #fff;
    height: 64px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--panel-border-color);
    box-sizing: border-box;
    padding: 0 20px
}

header .inner {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center
}

header .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0
}

header .logo a {
    display: flex;
    align-items: center
}

header .logo .split {
    width: 1px;
    height: 20px;
    border-left: 1px solid #ddd;
    margin: 0 20px
}

header .logo h3 {
    font-size: 16px;
    color: #6B7386
}

header .logo h3 a {
    color: #6B7386
}

header .logo h3 a:hover {
    color: var(--primary-color);
    text-decoration: underline
}

header .search {
    margin-left: 40px;
    display: flex;
    align-items: center;
    width: 300px
}

header .search form {
    width: 100%
}

header .search .el-input {
    width: 100%
}

header .action {
    display: flex;
    align-items: center;
    margin-left: auto
}

header .action .el-button {
    margin-left: 15px;
    font-weight: normal
}

header .action .el-button .el-icon-plus,header .action .el-button .el-icon-back {
    padding-right: 5px
}

header .action .el-dropdown {
    margin-left: 20px
}

header .avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    background: #F5F5F5
}

header .avatar.guest {
    margin-left: 20px
}

header .avatar img {
    border-radius: 999px;
    max-width: 100%;
    max-height: 100%
}

header .meta {
    font-size: 12px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: var(--text-darker)
}

header .meta span {
    background: #171717;
    display: block;
    padding: 3px 8px;
    margin: 0 8px;
    border-radius: 4px;
    color: #f8f8f8
}

header .meta span.dot {
    color: var(--text-lighter);
    padding: 0 2px
}

header .meta .nav-dian {
    font-size: 12px
}

.head-menu {
    margin-left: 85px;
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none
}

.head-menu [class*='ri-'] {
    font-size: 16px
}

.head-menu .inner {
    width: 550px;
    display: flex;
    white-space: nowrap
}

.head-menu a {
    display: flex;
    align-items: center;
    color: var(--text-darker)
}

.head-menu a:not(:last-child) {
    margin-right: 30px
}

.head-menu a:hover {
    color: var(--primary-color)
}

.head-menu h3 {
    font-size: 15px;
    padding-left: 4px
}

.header-menu {
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    margin-left: 40px;
    height: 100%
}

.header-menu a {
    display: flex;
    font-size: 15px;
    line-height: 63px;
    height: 100%;
    border-bottom: 3px solid transparent;
    box-sizing: border-box
}

.header-menu a:not(:last-child) {
    margin-right: 30px
}

.header-menu a:hover,.header-menu a.active {
    color: var(--primary-color)
}

.header-menu a.active {
    border-color: var(--primary-color)
}

.header-menu h3 {
    padding-left: 4px
}

.sidebar-menu {
    flex-shrink: 0;
    width: 140px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 20px 0 0 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    top: 64px;
    z-index: 10;
    background: #fff;
    border-right: 1px solid var(--panel-border-color)
}

.sidebar-menu .menu-items {
    margin-right: 10px;
    border-bottom: 1px dashed var(--divider);
    margin-bottom: 5px
}

.sidebar-menu .menu-items:last-child {
    border-bottom: none;
    padding-bottom: 20px
}

.sidebar-menu .menu-item-scroll {
    box-sizing: border-box;
    height: calc(100% - 80px)
}

.sidebar-menu .menu-item {
    height: 32px;
    display: flex;
    margin-bottom: 5px
}

.sidebar-menu .menu-item.menu-like {
    border-bottom: 1px solid rgba(241,241,241,0.7);
    padding-bottom: 5px
}

[data-theme='dark'] .sidebar-menu .menu-item.menu-like {
    border-bottom-color: rgba(0,0,0,0.3)
}

.sidebar-menu a {
    width: 100%;
    font-size: 14px;
    border-radius: 2px;
    position: relative;
    font-weight: normal;
    display: flex;
    align-items: center;
    padding-left: 15px
}

.sidebar-menu a .label {
    margin-left: 8px;
    flex: 1;
    overflow: hidden
}

.sidebar-menu a .iconfont {
    font-size: 18px
}

.sidebar-menu a:hover {
    background: var(--button-hover-bg)
}

.sidebar-menu a.active {
    color: var(--primary-color);
    background: rgba(0,132,255,0.08);
    font-weight: bold
}

.sidebar-menu a.active .iconfont {
    font-weight: normal
}

.discover {
    /* margin:64px 0 0 140px; */
    overflow: hidden
}

@media screen and (max-width: 1200px) {
    .head-menu {
        margin-left:30px
    }

    .head-menu a:not(:last-child) {
        margin-right: 30px
    }
}

@media screen and (max-width: 1100px) {
    .head-menu {
        margin-left:20px
    }

    .head-menu a:not(:last-child) {
        margin-right: 20px
    }
}

@media screen and (max-width: 1020px) {
    header .action {
        display:none
    }
}

@media screen and (max-width: 760px) {
    html {
        font-size:14px
    }

    header .logo .split {
        margin: 0 10px
    }

    header .logo h3 {
        font-size: 12px
    }

    header .search {
        margin-left: 20px;
        width: 96%
    }

    header .login-btn {
        display: none
    }

    header .action {
        display: none
    }

    .head-menu {
        margin-left: 20px
    }

    .head-menu .inner {
        width: 480px
    }

    .head-menu a {
        margin-right: 15px
    }

    .discover {
        margin-left: 0;
        box-sizing: border-box;
        padding: 0 10px 0 70px
    }

    .sidebar-menu {
        width: 60px;
        padding: 10px 0 0
    }

    .sidebar-menu .menu-items {
        padding-right: 0;
        margin-right: 0
    }

    .sidebar-menu .menu-item {
        height: auto;
        padding: 0 5px
    }

    .sidebar-menu .menu-item-scroll {
        scrollbar-width: none
    }

    .sidebar-menu a {
        flex-direction: column;
        padding: 6px 0;
        border-radius: 5px
    }

    .sidebar-menu a .label {
        margin-top: 5px;
        font-size: 12px;
        margin-left: 0
    }
}

.item-sidebar {
    width: 300px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-left: 16px
}

.item-sidebar-box {
    background: #fff;
    padding: 15px 15px 0;
    border-radius: 6px;
    border: 1px solid var(--panel-border-color);
    margin-bottom: 15px
}

.item-sidebar-title {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--panel-border-color);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.item-sidebar-title .today-txt {
    font-size: 12px;
    color: var(--text-lighter);
    font-weight: normal;
    padding-left: 10px
}

.item-sidebar-title .more-link {
    font-size: 12px;
    color: var(--text-light);
    font-weight: normal
}

.item-sidebar-title .more-link:hover {
    color: var(--primary-color)
}

.item-sidebar-new li {
    margin-left: -15px;
    margin-right: -15px
}

.item-sidebar-new li:not(:last-child) {
    border-bottom: 1px dashed var(--divider)
}

.item-sidebar-new a {
    display: flex;
    align-items: center;
    padding: 12px 15px
}

.item-sidebar-new .icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    flex-shrink: 0;
    background-color: var(--divider);
    display: flex;
    align-items: center;
    justify-content: center
}

.item-sidebar-new .icon img {
    background: #fff;
    max-width: 32px;
    max-height: 32px;
    border-radius: 999px
}

.item-sidebar-new .info {
    width: 0;
    flex: 1;
    margin-left: 10px
}

.item-sidebar-new .info h3,.item-sidebar-new .info p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.item-sidebar-new .info h3 {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-darker)
}

.item-sidebar-new .info p {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-light)
}

.item-sidebar-new .info p span {
    padding-right: 10px
}

.item-sidebar-new .info p .nav-xianshi2 {
    font-size: 12px;
    padding-right: 3px
}

.item-sidebar-new a:hover {
    background: rgba(221,221,221,0.2)
}

.item-sidebar-new a:hover .info h3 {
    color: var(--primary-color)
}

[v-cloak] {
    display: none !important
}

/*# sourceMappingURL=discover.css.map */