html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    --accent-color: #1a1a1a;
}

*,*:before,*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    outline: 0
}

body {
    background-color: #f8f8f8;
    color: #555;
    font-family: 'Microsoft YaHei',SimSun,'LiHei Pro Medium',STSong,Verdana,Tahoma,Arial;
    font-size: 14px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 公告条 40px + 导航 60px */
    padding-top: 100px;
}

a {
    color: #34495e;
    text-decoration: none;
    -webkit-transition: background,border,color 0.3s ease;
    -moz-transition: background,border,color 0.3s ease;
    -o-transition: background,border,color 0.3s ease;
    transition: background,border,color 0.3s ease;
}

a:hover {
    color: #f00;
}

h1,h2,h3,h4,h5,h6 {
    color: #555;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 15px;
}

p {
    margin: 0 0 15px;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
    font-size: 13px;
    margin: 0 0 15px;
    word-break: normal;
}

th,td {
    border: 1px solid #f4f4f4;
    padding: 8px 12px;
}

ul,ol,li {
    list-style: none;
}

iframe,embed {
    border: 0;
    display: block;
    overflow: hidden;
    width: 100%;
}

figure {
    margin: 0;
}

article,aside,footer,header,nav,section {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

figcaption,figure,main {
    display: block;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace,monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

b,strong {
    font-weight: inherit;
}

b,strong {
    font-weight: bolder;
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em;
}

dfn {
    font-style: italic;
}

mark {
    background-color: #a900b9;
    color: #000;
}

small {
    font-size: 80%;
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

audio,video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

img {
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

button,input,optgroup,select,textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,input {
    overflow: visible;
}

button,select {
    text-transform: none;
}

button,html [type="button"],[type="reset"],[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    display: inline-block;
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details,menu {
    display: block;
}

summary {
    display: list-item;
}

canvas {
    display: inline-block;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f9f9f9;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.2);
    background-color: #eee;
    border-radius: 2px;
}

@font-face {
    font-family: "zzTuKu-Icon";
    src: url('iconfont.eot?t=1607444182517');
    /* IE9 */
    src: url('iconfont.eot?t=1607444182517#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('iconfont.woff?t=1607444182517') format('woff'), url('iconfont.ttf?t=1607444182517') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1607444182517#zzTuKu-Icon') format('svg');
    /* iOS 4.1- */
}

.iz {
    font-family: "zzTuKu-Icon" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.i-z-logout:before {
    content: "\e62b";
}

.i-z-close:before {
    content: "\e608";
}

.i-z-up:before {
    content: "\e65b";
}

.i-z-see:before {
    content: "\e642";
}

.i-z-qrcode:before {
    content: "\e607";
}

.i-z-money:before {
    content: "\e60e";
}

.i-z-mima:before {
    content: "\e618";
}

.i-z-vip-user:before {
    content: "\e605";
}

.i-z-vip:before {
    content: "\e60d";
}

.i-z-about:before {
    content: "\e75c";
}

.i-z-demo:before {
    content: "\e692";
}

.i-z-user:before {
    content: "\e6c4";
}

.i-z-pay:before {
    content: "\e606";
}

.i-z-order:before {
    content: "\e604";
}

.i-z-collect:before {
    content: "\e68e";
}

.i-z-set:before {
    content: "\e602";
}

.i-z-logs:before {
    content: "\e662";
}

.i-z-sign:before {
    content: "\e630";
}

.i-z-down-log:before {
    content: "\e603";
}

.i-z-contact:before {
    content: "\e658";
}

.i-z-copy:before {
    content: "\e63f";
}

.i-z-score:before {
    content: "\e600";
}

.i-z-login:before {
    content: "\e63b";
}

.i-z-download:before {
    content: "\e65f";
}

.i-z-like:before {
    content: "\e659";
}

.i-z-look:before {
    content: "\e6d1";
}

.i-z-time:before {
    content: "\e627";
}

.i-z-down:before {
    content: "\e6bf";
}

.i-z-more:before {
    content: "\e60c";
}

.i-z-home:before {
    content: "\e601";
}

.container {
    margin: 0 auto;
    width: 1380px;
}

/* 顶部固定区：公告条 + 导航 */
.yun-header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

/* ===== 顶部公告横条 ===== */
.yun-topbar {
    width: 100%;
    background: linear-gradient(90deg, #f45c9a 0%, #d94fb7 40%, #7a5bd6 75%, #4b6bd6 100%);
    color: #fff;
    font-size: 14px;
    line-height: 40px;
}

.yun-topbar-inner {
    width: 1380px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

.yun-topbar-left {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.yun-topbar-right {
    flex: 0 0 auto;
    margin-left: 30px;
}

.yun-topbar-right a {
    color: #fff;
    text-decoration: none;
    margin-left: 24px;
    transition: opacity .2s;
}

.yun-topbar-right a:first-child {
    margin-left: 0;
}

.yun-topbar-right a:hover {
    opacity: .8;
}

@media screen and (max-width: 800px) {
    body {
        padding-top: 120px;
    }
    .yun-topbar {
        font-size: 12px;
        line-height: 34px;
    }
    .yun-topbar-inner {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 10px;
    }
    .yun-topbar-left {
        width: 100%;
        white-space: normal;
        line-height: 1.4;
        padding: 4px 0;
    }
    .yun-topbar-right {
        margin-left: 0;
        padding-bottom: 4px;
    }
    .yun-topbar-right a {
        margin-left: 0;
        margin-right: 16px;
    }
}

/* 顶部导航：白底 + 紫色点缀（logo 紫色可见） */
.header {
    height: 60px;
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    width: 100%;
    top: auto;
}

.header .logo {
    float: left;
    height: 60px;
    display: flex;
    align-items: center;
}

.header .logo img {
    max-height: 42px;
    display: block;
}

.header .container {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.header .menu {
    margin-left: 60px;
}

.header .menu ul:after {
    content: '';
    display: block;
    clear: both;
}

.header .menu ul li {
    float: left;
    line-height: 60px;
    height: 100%;
}

.header .menu ul li a {
    padding: 0 15px;
    display: block;
    height: 60px;
    color: #333;
    transition: color .2s;
}

.header .menu ul li.action a {
    font-weight: bold;
    color: #a900b9;
}

.header .menu ul li a:hover {
    background-color: rgba(169,0,185,.06);
    color: #a900b9;
}

.header .menu ul li i {
    font-size: 26px;
    position: relative;
    top: -1px;
    color: #a900b9;
}

.header .search-icon {
    position: absolute;
    right: 80px;
    font-weight: bold;
    color: #666;
}

.header .search-icon i {
    height: 60px;
    width: 60px;
    display: block;
    font-size: 18px;
    line-height: 60px;
    cursor: pointer;
    transition: color .2s;
}

.header .search-icon i:hover {
    color: #a900b9;
}

/* 搜索弹层（背景虚化遮罩 + 分类搜索 + 热门标签） */
.search-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.search-layer .search-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20,0,25,.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.search-layer .search-panel {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    width: 640px;
    max-width: 92%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    padding: 40px 45px 30px;
    box-sizing: border-box;
}

.search-layer .search-close {
    position: absolute;
    right: 15px;
    top: 12px;
}

.search-layer .search-close i {
    height: 32px;
    width: 32px;
    display: block;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    color: #999;
    border-radius: 50%;
    transition: all .2s;
}

.search-layer .search-close i:hover {
    color: #fff;
    background: #a900b9;
}

.search-layer .form-search {
    display: flex;
    align-items: center;
    border: 2px solid #a900b9;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.search-layer .form-search .search-cate {
    width: 130px;
    height: 48px;
    border: 0;
    border-right: 1px solid #f0e6f2;
    outline: 0;
    font-size: 14px;
    color: #555;
    padding: 0 10px;
    background: #faf0fc;
    cursor: pointer;
}

.search-layer .form-search input {
    flex: 1;
    height: 48px;
    border: 0;
    outline: 0;
    font-size: 16px;
    padding: 0 15px;
    color: #333;
    min-width: 0;
    box-sizing: border-box;
}

.search-layer .form-search .search-btn {
    width: 70px;
    height: 48px;
    border: 0;
    background: #a900b9;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s;
}

.search-layer .form-search .search-btn:hover {
    background: #7a0d8a;
}

.search-layer .search-hot-tags {
    margin-top: 18px;
    font-size: 13px;
    line-height: 28px;
}

.search-layer .search-hot-tags .hot-label {
    color: #999;
    margin-right: 8px;
}

.search-layer .search-hot-tags a {
    display: inline-block;
    margin: 0 8px 6px 0;
    padding: 0 12px;
    height: 28px;
    line-height: 26px;
    border: 1px solid #f0e6f2;
    border-radius: 50px;
    color: #666;
    background: #fafafc;
    transition: all .2s;
}

.search-layer .search-hot-tags a:hover {
    color: #a900b9;
    border-color: #a900b9;
    background: #faf0fc;
}

@media (max-width: 768px) {
    .search-layer .search-panel {
        top:15%;
        padding: 30px 20px 20px;
    }

    .search-layer .form-search .search-cate {
        width: 90px;
        font-size: 12px;
    }
}

.header .account {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 60px;
    margin-left: auto;
}

.header .account:hover .account-info,.search-account:hover .account-info {
    display: block;
}

.header .account>a>span,.search-account>a>span {
    background: url(../images/avatar.png) no-repeat;
    background-size: 100%;
    width: 36px;
    height: 36px;
    display: block;
    margin: 12px 0;
    border-radius: 50%;
}

/* 未登录：登录/注册入口 */
.header .account .account-login {
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 8px;
    color: #333;
    font-size: 14px;
    transition: color .2s;
}

.header .account .account-login:hover {
    color: #a900b9;
}

.header .account .account-reg {
    display: block;
    height: 28px;
    line-height: 26px;
    padding: 0 16px;
    border: 1px solid #a900b9;
    border-radius: 50px;
    color: #a900b9;
    font-size: 14px;
    transition: all .2s;
}

.header .account .account-reg:hover {
    background: #a900b9;
    color: #fff;
}

.search-account {
    display: flex;
    flex: 0 0 36px;
    justify-content: flex-end;
    position: relative;
    height: 60px;
    width: 60px;
}

.account-info {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    box-sizing: border-box;
    padding: 15px;
    background: #fff;
    width: 300px;
    height: auto;
    min-height: 170px;
    z-index: 100;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

.account-info:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 6px solid #fff;
    position: absolute;
    top: -6px;
    right: 11px;
}

.account-info .account-avatar {
    height: 70px;
    border-bottom: 1px solid #f1f1f1;
}

.account-info .account-avatar span {
    position: relative;
    width: 56px;
    height: 56px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    float: left;
    margin-right: 15px;
}

.account-info .account-avatar span img {
    width: 100%;
    height: 100%;
}

.account-info .account-avatar h4 {
    font-size: 16px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-info .account-avatar p {
    font-size: 13px;
    color: #7a0d8a;
}

.account-info .account-avatar p i {
    font-size: 13px;
}

.account-info .account-nav {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 10px 0 0;
    box-sizing: border-box;
    clear: both;
}

.account-info .account-nav a {
    float: none;
    flex: 0 0 25%;
    width: 25%;
    max-width: 25%;
    box-sizing: border-box;
    border-right: 1px solid #f9f9f9;
    font-size: 12px;
    color: #666;
    padding: 4px 2px;
    line-height: 1.3;
}

.account-info .account-nav a:nth-child(4n),
.account-info .account-nav a:last-child {
    border-right: 0;
}

.account-info .account-nav a:hover {
    color: #a900b9;
}

.account-info .account-nav i {
    font-size: 22px;
    display: block;
    height: 36px;
    line-height: 36px;
}

.slide-bear {
    height: 260px;
    background: #fbfbfb url(../images/bg-container.png) repeat-x;
    width: 100%;
    position: relative;
    font-size: 32px;
    padding-bottom: 36px;
    box-sizing: content-box
}

.slide-bear .slide-search {
    position: absolute;
    top: 85px;
    width: 650px;
    left: 50%;
    margin-left: -329px;
    border: 4px solid rgba(255,255,255,.2);
    border-radius: 3px;
    z-index: 60;
    font-size: 16px;
    box-sizing: content-box
}

.slide-bear .slide-search input,.slide-bear .slide-search button {
    height: 40px;
    line-height: 40px;
    border: 0;
    float: left;
    outline: 0
}

.slide-bear .slide-search input {
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    padding-left: 36px;
    width: 540px;
}

.slide-bear .slide-search>form>i {
    font-size: 17px;
    position: absolute;
    left: 0;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #bbb;
    display: block;
    z-index: 9;
}

.slide-bear .slide-search button {
    border-radius: 0 2px 2px 0;
    width: 110px;
    text-align: center;
    background: #7a0d8a;
    color: #fff;
    cursor: pointer;
}

.slide-bear .slide-search button:hover {
    background: #8a0f9b;
}

.slide-bear .slide-tab {
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 4;
    background: #fafbfb;
}

.slide-bear .slide-tab li {
    display: inline-block;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 4px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    margin: 0 6px;
}

.slide-bear .slide-tab li.action {
    color: #a900b9;
    font-weight: 500;
    border-color: #a900b9;
}

.main-section {
    display: flex;
    flex-wrap: wrap;
    margin: 15px -10px 0;
}

.main-section[hidden] {
    display: none;
}

.article-card {
    flex: 0 0 20%;
    width: 20%;
    padding: 0 10px;
    margin-bottom: 15px;
}

.standard {
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 7px;
}

.standard:hover {
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
}

.standard .standard-media {
    height: 165px;
    position: relative;
}

.ppt .standard .standard-media {
    height: 300px;
    position: relative;
}

.standard .standard-media a {
    width: 100%;
    display: block;
    height: 100%;
}

.standard .standard-media a:before {
    content: "\e642";
    font-family: zzTuKu-Icon;
    position: absolute;
    z-index: 1;
    width: 170px;
    height: 100%;
    background: rgba(0,0,0,.2);
    top: 50%;
    left: 50%;
    height: 170px;
    border-radius: 50%;
    text-align: center;
    line-height: 170px;
    font-size: 22px;
    color: #fff;
    opacity: 0;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.standard .standard-media:hover a:before {
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    opacity: 1;
    line-height: 52px;
}

.standard .standard-media img {
    height: 100%;
    border-radius: 1px;
    min-width: 100%;
}

.standard .standard-media small,
.article-media small.flag-rec,
.search-media small.flag-rec {
    position: absolute;
    top: 0;
    right: 0;
    height: 14px;
    padding: 0 3px 0 5px;
    text-align: center;
    line-height: 14px;
    background: #a900b9;
    border-radius: 0 3px 0 7px;
    display: block;
    z-index: 10;
    width: auto;
}

.standard .standard-media small:after,
.article-media small.flag-rec:after,
.search-media small.flag-rec:after {
    content: '\8350';
    display: block;
    font-size: 12px;
    color: #fff;
}

.article-media,
.search-media {
    position: relative;
}

.content-title {
    position: relative;
}

.content-title cite.flag-test {
    position: absolute;
    height: 54px;
    width: 54px;
    background: url(../images/64.png) no-repeat center;
    background-size: 100%;
    display: block;
    top: 0;
    right: 0;
    z-index: 2;
    font-style: normal;
}

.standard .standard-wrapper {
    margin-top: 5px;
}

.standard .standard-meta,.article-wrapper .article-item .article-info .article-meta {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}

.standard .standard-meta a,.article-wrapper .article-item .article-info .article-meta a {
    padding-left: 15px;
    margin-right: 5px;
    position: relative;
}

.standard .standard-meta a:after,.article-wrapper .article-item .article-info .article-meta a:after {
    content: '';
    height: 6px;
    width: 6px;
    border-radius: 5px;
    background: #a900b9;
    display: block;
    position: absolute;
    left: 0;
    top: 6px;
}

.standard .standard-meta a:nth-child(2):after,.article-wrapper .article-item .article-info .article-meta a:nth-child(2):after {
    background: #4caf50;
}

.standard .standard-wrapper h2.standard-title {
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    height: 32px;
    line-height: 32px;
    margin-bottom: 2px;
}

.standard .standard-wrapper .standard-excerpt {
    font-size: 12px;
    line-height: 22px;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 8px;
    color: #999;
}

.standard .standard-wrapper .standard-footer {
    padding: 11px 0 7px;
    border-top: 1px solid #f1f1f1;
    margin-top: 6px;
}

.standard .standard-wrapper .standard-footer,.standard .standard-wrapper .standard-footer i {
    font-size: 12px;
    color: #bbb;
}

.standard .standard-wrapper .standard-footer span {
    float: right;
}

.standard .standard-wrapper .standard-footer time {
    margin-left: 3px;
}

.zds-section {
    background: #ccc;
    border-radius: 2px;
    overflow: hidden;
}

.zds-section a {
    display: block;
    margin-bottom: 1px;
}

.source-section,.ppt-section {
    margin-top: 15px;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
}

.section-title {
    height: 50px;
    line-height: 20px;
    padding: 15px 0 15px 44px;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    position: relative;
}

.section-title:after {
    height: 28px;
    width: 28px;
    background: url(../images/title.png) no-repeat center;
    background-size: 100%;
    margin-right: 8px;
    display: block;
    -webkit-animation: toy 3s .1s infinite;
    animation: toy 3s .1s infinite;
    content: '';
    position: absolute;
    left: 8px;
    top: 11px;
}

.article-section .section-title,.like-section .section-title {
    padding-left: 34px;
    margin-bottom: 15px;
}

.like-section .section-title {
    margin-bottom: 5px;
}

.article-esc .section-title:after {
    background-image: url(../images/course.png);
    left: -2px;
}

.article-soft .section-title:after {
    background-image: url(../images/soft.png);
    left: -2px;
}

.like-section .section-title:after {
    background-image: url(../images/like.png);
    left: -2px;
}

.main-single .section-title:after {
    background-image: url(../images/about.png);
    left: 12px;
}

.sucai-section .section-title:after {
    background-image: url(../images/sucai.png);
    left: 0px;
}

.ppt-section .section-title:after {
    background-image: url(../images/ppt.png);
    left: 0px;
}

.section-title span {
    float: right;
    font-size: 12px;
    font-weight: normal;
}

.section-title span a {
    padding: 0 8px;
    border-right: 1px solid #ccc;
    height: 14px;
    line-height: 14px;
}

.section-title span a:last-child,.ppt-article .source-standard:last-child {
    border: 0;
}

.section-title span i {
    position: relative;
    top: 1px;
}

.source-article {
    display: flex;
    flex-wrap: wrap;
}

.source-article .source-standard {
    flex: 0 0 16.66666%;
    width: 16.66666%;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    height: 154px;
    overflow: hidden;
}

.source-article .source-standard .source-media,.source-article .source-standard .source-media img {
    height: 100%;
    width: 100%
}

.source-article .source-standard:nth-child(6n) {
    border-right: 0;
}

.source-article .source-standard .source-title {
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    height: 40px;
    line-height: 40px;
    background: rgba(255,255,255,.6);
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 14px;
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

.source-article .source-standard:hover .source-title {
    -ms-transform: translate(0,-100%);
    -o-transform: translate(0,-100%);
    -moz-transform: translate(0,-100%);
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
}

.source-article .source-standard .source-title h2 {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    font-size: 15px;
    line-height: 40px;
}

.source-article .source-standard .source-title h2 a {
    color: #333;
}

.tags-section {
    background: #fff;
    margin-top: 15px;
    height: 200px!important;
    border-radius: 3px;
    position: relative;
    margin-bottom: 2px;
}

.tags-section a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 13px;
    position: absolute;
    text-align: center;
    word-wrap: break-word;
    overflow: hidden;
    border: 1px solid #fff;
    height: 1px;
    width: 1px;
    box-sizing: content-box
}

.tags-section a:hover {
    opacity: .7
}

.ppt-section .section-title {
}

.ppt-article {
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
}

.ppt-article .source-standard {
    width: 16.666%;
    flex: 0 0 16.666%;
    border-right: 1px solid #f1f1f1;
    padding: 12px 10px 8px;
    box-sizing: border-box;
}

/* PPT 竖版长图封面（约 9:16） */
.ppt-article .source-standard .source-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
    overflow: hidden;
    background: #f3f4f6;
    border-radius: 2px;
}

.ppt-article .source-standard .source-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.ppt-article .source-standard .source-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppt-article .source-standard .source-title h2 {
    font-size: 15px;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppt-article .source-standard:hover {
    box-shadow: inset 0 0 10px rgba(0,0,0,.08)
}

/* 标签云未初始化时不要占一整块空白 */
.tags-section:empty,
.tags-section.is-empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.article-section,.like-section {
    padding: 5px 0 10px;
    background: #fff;
    margin-top: 25px;
}

.article-section .container {
    display: flex;
}

.article-section .article-esc {
    width: 70%;
}

.article-section .article-esc .section-title {
    padding-right: 20px;
}

.article-section .article-soft {
    width: 30%;
}

.article-esc .article-wrapper,.like-section .article-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.article-esc .article-wrapper .article-item,.like-section .article-wrapper .article-item {
    flex: 0 0 50%;
    width: 50%;
    padding-right: 20px;
    margin-bottom: 35px;
}

.like-section .article-wrapper .article-item {
    margin-bottom: 20px;
}

.article-wrapper .article-item {
    display: flex;
}

.article-wrapper .article-item .article-media {
    flex-shrink: 0;
    width: 30%;
    height: 92px;
    border-radius: 2px;
    overflow: hidden;
    margin-right: 3%;
}

.like-section .article-wrapper .article-item .article-media {
    width: 136px;
}

.article-wrapper .article-item .article-media img {
    width: 100%;
    height: 100%;
    -moz-transition: transform .3s ease-out;
    -ms-transition: transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
}

.article-wrapper .article-item .article-media img:hover {
    -moz-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.article-wrapper .article-item .article-info {
    width: 64%;
}

.like-section .article-wrapper .article-item .article-info {
    width: 75%;
}

.article-wrapper .article-item .article-info .article-title h2 {
    font-size: 16px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}

.article-wrapper .article-item .article-info .article-look {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.article-wrapper .article-item .article-info .article-meta span,.article-wrapper .article-item .article-info .article-look span {
    color: #777;
    margin-left: 20px;
}

.article-wrapper .article-item .article-info .article-meta span i,.article-wrapper .article-item .article-info .article-look i {
    font-size: 12px;
    margin-right: 5px;
}

.article-wrapper .article-item .article-info .article-excerpt {
    font-size: 12px;
    line-height: 1.5;
    color: #999;
    margin-top: 3px;
}

.article-soft .article-wrapper .article-item {
    margin-bottom: 22px;
}

.article-soft .article-wrapper .article-item .article-media {
    width: 25%;
    height: 70px;
}

.article-soft .article-wrapper .article-info {
    width: 70%
}

.footer {
    width: 100%;
    background: #393d49;
    box-sizing: border-box;
    padding: 5px 0;
    color: #c2c2c2;
    font-size: 12px;
    font-family: 'Century Gothic','Microsoft JHengHei','Georgia';
}

.footer a {
    color: #c2c2c2;
    margin: 0 1px;
    border-bottom: 1px dotted transparent;
}

.footer a:hover {
    color: #7a0d8a;
    border-color: #7a0d8a;
}

.footer .footer-nav,.footer .copyright {
    flex-wrap: wrap;
    display: flex;
    margin: 15px 0;
}

.footer .footer-nav span,.footer .copyright span {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}

.footer .footer-nav nav a {
    margin-right: 15px;
}

.footer hr {
    margin: 10px 0;
    border: 0;
    border-bottom: 1px solid #484a4e;
}

.footer .link-section {
    font-size: 13px;
    padding-top: 20px;
}

.footer .link-section a {
    display: inline-block;
    margin: 0 15px 10px 0;
    line-height: 1.5;
}

.rollbar {
    position: fixed;
    bottom: 180px;
    left: 50%;
    margin-left: 710px;
    width: 48px;
    height: 48px;
    border-radius: 40px;
    background: rgba(0,0,0,.1);
    display: none;
    color: #fff;
    cursor: pointer;
}

.rollbar i {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 30px;
    display: block;
}

.rollbar:hover {
    background: rgba(0,0,0,.3);
}

.breadcrumbs {
    height: 50px;
    line-height: 50px;
    color: #999;
    font-size: 16px;
    padding-bottom: 50px;
    background: url(../images/banner.png) no-repeat center;
    background-size: cover;
    box-sizing: content-box;
    width: 100%;
}

.breadcrumbs.show-body {
    height: auto;
    min-height: 0;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    background: #f7f7f9;
    font-size: 13px;
    color: #888;
    border-bottom: none;
    box-sizing: border-box;
}
.breadcrumbs.show-body .breadcrumb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 40px;
    padding: 8px 0;
    box-sizing: border-box;
}
.breadcrumbs.show-body i {
    margin-right: 8px;
    color: #a900b9;
    opacity: .75;
}
.breadcrumbs.show-body a {
    margin: 0 2px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    color: #555;
}
.breadcrumbs.show-body a:hover {
    color: #a900b9;
    background: rgba(169,0,185,.06);
}
.breadcrumbs.show-body em {
    margin: 0 2px;
    font-style: normal;
    color: #c8c8d0;
    font-size: 12px;
}
/* 内页主体紧贴面包屑 */
.container.show-page {
    padding-top: 12px;
}
.container.show-page .zds-section:empty {
    display: none;
}
.container.show-page .course-section {
    margin-top: 0;
}

.breadcrumbs.single {
    height: 160px;
    background: url(../images/user-banner.png) no-repeat center bottom;
    background-size: cover;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
    margin-top: 0;
}

/* 头图内不再展示用户信息模块 */
.breadcrumbs.single .user-avatar,
.breadcrumbs.single .user-info {
    display: none !important;
}

.breadcrumbs.vip {
    background: url(../images/vip-banner.png) no-repeat center bottom;
    background-size: cover;
}

.breadcrumbs a {
    margin: 0 6px;
    font-size: 12px;
    color: #999;
}

.breadcrumbs a:hover {
    color: #a900b9;
}

.breadcrumbs i {
    position: relative;
    top: 1px;
}

.filter-content,.tags-content {
    margin-top: -50px;
    background: #fff;
    border-radius: 3px;
    padding: 10px 25px;
    margin-bottom: 15px;
}

.filter-content ul li {
    padding: 8px 0;
}

.filter-content ul li a,.tags-content a {
    padding: 0 8px;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin-right: 5px;
}

.filter-content ul li a.action,.filter-content ul li a:hover {
    color: #fff;
    background: #666;
    border-radius: 2px;
}

.filter-content ul li a:hover,.tags-content a:hover {
    background: #f1f1f1;
    color: #333;
}

.tags-content h2 {
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 15px;
}

.tags-content a {
    margin: 0 15px 10px 0;
}

.numeric-pagination {
    text-align: center;
    margin-bottom: 20px;
}

.numeric-pagination>span,.numeric-pagination a,.numeric-pagination ul.pagination li a,.numeric-pagination ul.pagination li span {
    padding: 0 20px;
    height: 46px;
    border-radius: 2px;
    display: inline-block;
    margin: 0 5px;
    background: #fff;
    line-height: 46px;
    vertical-align: middle;
    text-decoration: none;
    color: #666;
}

.numeric-pagination>span,.numeric-pagination ul.pagination li.disabled {
    cursor: not-allowed;
    color: #999;
}

.user-box .numeric-pagination ul li span,.user-box .numeric-pagination ul.pagination li a {
    margin: 0;
    background: #f1f1f1;
    height: 34px;
    line-height: 34px;
    border-radius: 30px;
    width: 34px;
    padding: 0;
    text-align: center;
}

.numeric-pagination .current,.numeric-pagination a:hover,.numeric-pagination ul.pagination li.active span,.numeric-pagination ul.pagination li a:hover {
    color: #fff;
    background: #a900b9;
}

.user-box .numeric-pagination {
    text-align: left;
}

.numeric-pagination ul.pagination li {
    display: inline-block;
    margin: 0 3px;
}

.user-box .numeric-pagination ul li:first-child {
    margin-left: 0;
}

.course-section {
    display: flex;
    position: relative;
    margin-top: 15px;
}

.main-course {
    width: 73%;
}

.main-course .article-wrapper,.show-section {
    padding: 20px;
    border-radius: 3px;
    background: #fff;
    margin-bottom: 15px;
}

.main-course .article-wrapper .article-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #f1f1f1;
}

.main-course .article-wrapper .article-item .article-media {
    height: 100px;
    width: 148px;
    margin-right: 15px;
}

.main-course .article-wrapper .article-item .article-info {
    width: 88%;
}

.main-course .article-wrapper .article-item .article-info .article-meta,.main-course .article-wrapper .article-item .article-info .article-meta i {
    font-size: 12px;
    color: #999;
}

.main-course .article-wrapper .article-item .article-info .article-excerpt {
    line-height: 2;
}

.main-course .numeric-pagination {
    text-align: left;
    margin-bottom: 0;
}

.main-course .numeric-pagination *:first-child {
    margin-left: 0;
}

.course-aside {
    width: 25%;
    margin-left: 2%;
    position: relative;
}

/* 侧栏热门资源模块滚动跟随：sticky 始终留在文档流中，
   不像原 JS 浮动切换 position 那样改变页面总高度而引发滚动位置被钳制跳顶 */
.course-aside #sidebar {
    position: sticky;
    top: 75px;
    z-index: 1;
}

.course-aside>div {
    background: #fff;
    border-radius: 3px;
    background: #fff;
    margin-bottom: 15px;
    width: 100%;
}

.course-aside .course-search {
    padding-bottom: 25px;
}

.course-aside .course-search .section-title,.comment .section-title,.main-single .section-title {
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}

.course-aside .course-search>form {
    border: 2px solid #a900b9;
    height: 44px;
    box-sizing: border-box;
    border-radius: 40px;
    position: relative;
    margin: 0 20px;
}

.course-aside .course-search input {
    border: 0;
    height: 40px;
    padding-left: 15px;
    box-sizing: border-box;
    background: none;
    width: 100%;
    padding-right: 89px;
}

.course-aside .course-search button {
    border-radius: 0 40px 40px 0;
    width: 90px;
    color: #fff;
    background: #a900b9;
    border: 0;
    height: 40px;
    float: right;
    position: absolute;
    right: -1px;
    top: 0;
    font-size: 16px;
}

.course-aside .course-search button:hover {
    background: #8a0f9b;
}

.course-aside .tags-section {
    height: 500px!important;
    margin-top: 0;
}

.course-aside .article-wrapper {
    margin: 5px 10px;
    padding-bottom: 1px;
}

.course-aside .article-wrapper .article-item {
    margin-bottom: 20px;
}

.course-aside .article-wrapper .article-item .article-media {
    height: 75px;
    width: 112px;
}

.course-aside .article-wrapper .article-item .article-info {
    width: 62%
}

.course-aside .article-wrapper .article-item .article-info .article-excerpt {
    margin-top: 8px;
}

.show-header .show-title {
    font-size: 26px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-top: 0;
}

.show-item {
    background: #f9f9f9;
    padding: 15px 20px;
    border-radius: 2px;
    font-size: 12px;
    color: #999;
    margin: 15px 0 30px;
}

.show-item span {
    margin-right: 25px;
}

.show-item span.show-test {
    padding: 1px 10px;
    border-radius: 2px;
    background: #1e87f0;
    color: #fff;
}

.show-item span.anchor {
    float: right;
    margin-right: 0;
}

.show-item span.anchor a {
    padding: 2px 12px;
    border-radius: 50px;
    color: #1e87f0;
    border: 1px solid #1e87f0;
}

.show-item span.anchor a:hover {
    background: #1e87f0;
    color: #fff;
}

.show-item span time {
    margin-left: 5px;
}

.show-item i {
    font-size: 12px;
}

/* 内容页标题头部（仿制参考站：紫底白字） */
.content-title {
    background: #a900b9 url(../images/search-bg.png) repeat-x center top;
    background-size: cover;
    padding: 25px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.content-title h1 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 20px;
    color: #fff;
    /* 单行显示，超出省略；完整标题仍在 HTML 文本中供 SEO/复制 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding-right: 64px; /* 给右上角「亲测」角标留空 */
}

.content-title p {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.content-title p span {
    margin-right: 25px;
}

.content-title p span.show-test {
    padding: 1px 10px;
    border-radius: 2px;
    background: #fff;
    color: #a900b9;
}

.content-title p span.anchor {
    margin-left: auto;
    margin-right: 0;
}

.content-title p span.anchor a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #fff !important;
    background: linear-gradient(135deg, #c218d4 0%, #a900b9 55%, #7a0d8a 100%);
    border: none;
    box-shadow: 0 4px 14px rgba(169, 0, 185, .35);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.content-title p span.anchor a:hover {
    color: #fff !important;
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(169, 0, 185, .42);
}

.content-title p span.anchor a:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(169, 0, 185, .3);
}

.content-title p i {
    font-size: 12px;
}

/* 内容页底部：本文章标签 */
.show-tags-bottom {
    padding: 0 25px;
    margin: 15px 0;
    font-size: 13px;
    line-height: 28px;
}

.show-tags-bottom .tags-label {
    color: #999;
    margin-right: 6px;
}

.show-tags-bottom .tags-label i {
    font-size: 14px;
}

.show-tags-bottom a {
    display: inline-block;
    margin: 0 8px 6px 0;
    padding: 0 12px;
    height: 26px;
    line-height: 24px;
    border: 1px solid #f0e6f2;
    border-radius: 50px;
    color: #666;
    background: #fafafc;
    transition: all .2s;
}

.show-tags-bottom a:hover {
    color: #a900b9;
    border-color: #a900b9;
    background: #faf0fc;
}

/* 侧栏广告位 */
.course-ads {
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.course-ads .side-ad-item {
    padding: 10px 12px 0;
    overflow: hidden;
    text-align: center;
}

.course-ads .side-ad-item:last-child {
    padding-bottom: 10px;
}

.course-ads a {
    display: block;
}

.course-ads img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* 列表页双栏布局下资源卡片自适应 */
.main-course .main-section .article-card {
    flex: 0 0 33.3333%;
    width: 33.3333%;
}

/* 分类页无侧栏：一行 5 列 */
.main.list-grid .main-section .article-card {
    flex: 0 0 20%;
    width: 20%;
}

@media (max-width: 992px) {
    .main.list-grid .main-section .article-card {
        flex: 0 0 33.3333%;
        width: 33.3333%;
    }
}

@media (max-width: 640px) {
    .main.list-grid .main-section .article-card {
        flex: 0 0 50%;
        width: 50%;
    }
}

.show-content {
    line-height: 2;
    padding: 0 25px;
    font-size: 15px;
    color: #555;
}

.show-content p {
    margin: 0;
}

blockquote.show-info a {
    color: #1e87f0;
}

.show-content a:hover,blockquote.show-info a:hover {
    text-decoration: underline;
    color: #7a0d8a;
}

.show-content h3 {
    font-size: 16px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    position: relative;
    margin: 10px 0;
}

.show-content h3:before {
    content: '';
    display: block;
    background: #a900b9;
    width: 7px;
    height: 20px;
    position: absolute;
    left: -20px;
    top: 10px;
    border-radius: 0 3px 3px 0;
}

.show-content img {
    max-width: 100%;
    margin: 20px 0;
    text-align: center;
    display: inline-block;
}

/* 下载条（仿制参考站 content-down：卡片底部紫色通栏） */
.show-section {
    padding: 0;
    overflow: hidden;
}

.show-article {
    position: relative;
    padding-bottom: 25px;
}

.show-article.has-down {
    padding-bottom: 95px;
}

.show-options {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: #a900b9;
    margin: 0;
    text-align: center;
    overflow: visible;
    box-sizing: border-box;
}

/* 下载栏悬停提示框：贴合紫色模块尺寸 */
.show-options .tooltipster-base {
    max-width: 220px;
}

.tooltipster-sidetip .tooltipster-box {
    background: #7a0d8a;
    border: none;
    border-radius: 4px;
}

.tooltipster-sidetip .tooltipster-content {
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 12px;
    color: #fff;
    max-width: 200px;
    box-sizing: border-box;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border,
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
    border-top-color: #7a0d8a;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border,
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: #7a0d8a;
}

.show-options ul {
    display: flex;
    justify-content: flex-end;
    font-size: 0;
    padding: 0;
    margin: 0;
}

.show-options ul li {
    display: block;
    flex: 0 0 auto;
    font-size: 16px;
    height: 70px;
    line-height: 70px;
    overflow: visible;
    position: relative;
    text-align: center;
    min-width: 150px;
    width: auto;
    max-width: none;
    padding: 0 15px;
    box-sizing: border-box;
    color: #fff;
}

.show-options ul li:after {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.2);
    position: absolute;
    right: 0;
    top: 17px;
    content: '';
    display: block;
}

.show-options ul li a {
    color: #fff!important;
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
}

.show-options ul li a:hover {
    background: rgba(255,255,255,.05);
    text-decoration: none;
}

.show-options ul li i {
    font-size: 18px;
    position: relative;
    top: 2px;
}

.show-options ul li.down {
    background: #0f6fff;
}

.show-options ul li.down:after,.show-options ul li.code:after {
    display: none;
}

.show-options ul li.collect {
    min-width: 150px;
}

.show-options ul li.report {
    min-width: 110px;
    margin-right: auto;
}

.show-options ul li.nodown {
    min-width: 0;
}

.show-article blockquote {
    border: 0;
    border-left: 5px solid #ff4f78;
    background: #fff9fb;
    border-radius: 4px;
    font-size: 14px;
    padding: 15px;
    line-height: 2;
    color: #777;
    font-style: normal;
    margin: 20px 25px;
}

blockquote.show-info {
    font-size: 12px;
    font-style: normal;
    line-height: 2;
    color: #777;
    border: 1px dashed #e8cff0;
    border-radius: 5px;
    padding: 15px 20px;
    background: #fff;
}

blockquote.show-info p {
    margin-bottom: 0;
}

blockquote.show-info .show-source {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e8cff0;
    overflow-wrap: anywhere;
    word-break: break-all;
}
blockquote.show-info .show-source-url,
blockquote.show-info .show-source a {
    overflow-wrap: anywhere;
    word-break: break-all;
}

blockquote.show-info hr {
    border: 0;
    margin: 10px 0;
    border-top: 1px solid #faf0fc;
}

.prettyprint {
    background: #3c3c3c;
    font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    padding: 0 0 0 50px;
    margin: 15px 0;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    box-sizing: border-box;
    width: 100%;
    word-wrap: break-word;
}

.pln {
    color: #ccc
}

ol.linenums {
    margin-top: 0;
    margin-bottom: 0;
    color: #999;
    padding: 15px 10px 15px 0;
    background: #2d2d2d;
    border-radius: 0 5px 5px 0;
}

li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
    padding-left: 1em;
    background-color: #2d2d2d;
    list-style-type: decimal
}

@media screen {
    .str {
        color: #9c9
    }

    .kwd {
        color: #c9c
    }

    .com {
        color: #999
    }

    .typ {
        color: #69c
    }

    .lit {
        color: #f99157
    }

    .pun {
        color: #ccc
    }

    .opn {
        color: #ccc
    }

    .clo {
        color: #ccc
    }

    .tag {
        color: #f2777a
    }

    .atn {
        color: #f99157
    }

    .atv {
        color: #6cc
    }

    .dec {
        color: #f99157
    }

    .var {
        color: #f2777a
    }

    .fun {
        color: #69c
    }
}

/* 上一篇/下一篇（仿制参考站 content-prev：紫色模糊底卡片） */
.content-prev {
    margin: 15px 0;
    background: #fff;
    border-radius: 3px;
    height: 100px;
    display: flex;
}

.content-prev .cs-prev,.content-prev .cs-next {
    width: 50%;
    position: relative;
    overflow: hidden;
    height: 100px;
}

.content-prev .cs-prev {
    border-radius: 3px 0 0 3px;
}

.content-prev .cs-next {
    border-radius: 0 3px 3px 0;
}

.content-prev cite {
    background: url(../images/search-bg.png) repeat-x;
    background-size: 80%;
    filter: blur(12px);
    width: 130%;
    display: block;
    position: absolute;
    top: -25px;
    left: -25px;
    height: 130px;
}

.content-prev a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 15px 20px;
    box-sizing: border-box;
}

.content-prev a:hover {
    background: rgba(255,255,255,.08);
}

.content-prev p {
    margin: 0 0 5px;
    color: rgba(255,255,255,.8);
    font-size: 13px;
}

.content-prev .cs-next a,
.content-prev .cs-next p,
.content-prev .cs-next h2 {
    text-align: right;
}

.content-prev h2 {
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comment {
    padding: 0 0 20px;
    margin: 15px 0 0;
    background: #fff;
    border-radius: 3px;
}

.comment .section-title {
    font-size: 16px;
}

.comment-form {
    width: 100%;
    height: auto;
    padding: 15px 0;
    border-bottom: 1px solid #f9f9f9;
}

.comment-form:after,#comment-show:after,#comment-show ul:after {
    clear: both;
    display: block;
    content: '';
}

.comment-form .head-face {
    width: 10%;
    height: 120px;
    float: left;
    text-align: center;
}

.comment-form .head-face img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: inline-block;
}

.comment-form .head-face p {
    font-size: 12px;
    margin-top: 10px;
}

.comment-form .comment-content {
    width: 90%;
    height: 120px;
    float: right;
    padding-right: 15px;
    box-sizing: border-box;
}

.comment-form .comment-content textarea {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.comment-form .comment-content textarea:focus {
    border-color: #5cadff;
    box-shadow: 0 0 0 2px rgba(51,153,255,.2);
}

.cont-box {
    width: 100%;
    height: 80px;
    float: left;
}

.cont-box .comment-text,.cont-box>p {
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    border-radius: 2px;
    color: #999;
    font-size: 12px;
    resize: none;
    border: none;
    outline: none;
    float: left;
    box-sizing: border-box;
    border: 1px solid #eee;
    line-height: 1.8;
}

.cont-box>p {
    line-height: 70px;
    text-align: center;
    background: #fafafa;
}

.tools-box {
    width: 100%;
    height: 30px;
    margin-top: 5px;
    float: left;
}

.tools-box p {
    width: 85%;
    height: 30px;
    float: left;
    line-height: 30px;
    font-size: 12px;
    color: #ff152b;
}

.tools-box .submit-btn {
    width: 15%;
    height: 30px;
    float: right;
    margin-top: 1px;
}

.tools-box .submit-btn button {
    width: 100%;
    height: 100%;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 0;
    background: #ff152b;
    color: #fff;
}

.tools-box .submit-btn button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

#comment-show {
    margin: 20px 15px 0;
}

#comment-show ul {
    padding-left: 0;
    font-size: 14px;
}

#comment-show li {
    width: 100%;
    padding: 10px 5px 0;
    float: left;
    box-sizing: border-box;
    border-bottom: 1px dashed #f1f1f1;
    margin-bottom: 5px;
    list-style: none;
}

#comment-show .head-face {
    width: 9%;
    float: left;
    text-align: center;
}

#comment-show .head-face img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
    display: inline-block;
}

#comment-show .reply-cont {
    width: 91%;
    float: right;
    box-sizing: border-box;
    padding-right: 15px;
}

#comment-show .reply-cont .username {
    color: #99cc66;
    margin-bottom: 5px;
}

#comment-show .reply-cont .username span {
    color: #bbb;
    font-size: 12px;
}

#comment-show .reply-cont .comment-body {
    color: #999;
    line-height: 1.8;
}

#comment-show .reply-cont .comment-footer {
    font-size: 12px;
    color: #c0c0c0;
    margin-top: 10px;
    padding-bottom: 15px;
}

#comment-show .reply-cont .comment-footer span.reply {
    color: #4589dc;
    margin-left: 20px;
    cursor: pointer;
}

#comment-show .reply-list {
    padding: 8px 10px 0;
    border: 1px solid #e8cff0;
    background: #faf0fc;
    margin-bottom: 15px;
    border-radius: 5px;
    position: relative;
}

#comment-show .reply-list:before,#comment-show .reply-list .reply-content:before {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #e8cff0;
    position: absolute;
    top: -10px;
    left: 4.5%;
    content: "";
    display: block;
}

#comment-show .reply-list:after {
    content: '';
    display: block;
    clear: both;
}

#comment-show .reply-list .reply-content:before {
    border-bottom-color: #faf0fc;
    top: -9px;
}

#comment-show .reply-list .head-face img {
    width: 30px;
    height: 30px;
    display: inline-block;
}

#comment-show .reply-list .reply-cont .comment-footer {
    padding-bottom: 8px;
}

#comment-show .reply-content-list {
    border-bottom: 1px dashed #efefef;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

#comment-show .reply-content-list:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
}

.msg {
    min-height: 360px;
    padding: 60px 0 100px 0;
    margin: 20px 0;
    position: relative;
    text-align: center;
    background: #fff;
}

.other .msgt {
    font-size: 12px;
    color: #999;
}

.other .icon {
    width: 100%;
    height: 170px;
    background: url(../images/message.gif) no-repeat center;
}

.other h3 {
    font-size: 16px;
    margin-bottom: 15px;
}

.other p {
    font-size: 12px;
    color: #999;
}

.marquee-box {
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0 0 5px 5px;
}

.marquee {
    width: 8000%;
    height: 60px
}

.wave-list-box {
    float: left
}

.wave-list-box ul {
    float: left;
    height: 60px;
    overflow: hidden;
    zoom:1;margin: 0;
    padding: 0;
}

.wave-list-box ul li {
    height: 60px;
    width: 100%;
    float: left;
    line-height: 30px;
    list-style: none
}

.wave-box {
    position: absolute;
    height: 60px;
    background: #fff;
    bottom: 0;
    width: 100%;
}

.search-body {
    padding-top: 70px;
    background: #fff;
}

.search-body .container {
    padding-left: 170px;
}

.search-header {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    width: 100%;
    top: 0;
    position: fixed;
    height: 70px;
    z-index: 99;
}

.search-header .container {
    display: flex;
    padding-left: 0;
}

.search-header .logo {
    margin-top: 5px;
}

.search-header .search-account>a>span {
    margin-top: 17px;
}

.search-header .search-form {
    border: 2px solid #a900b9;
    height: 40px;
    line-height: 40px;
    margin: 15px 0 15px 20px;
    border-radius: 8px;
    width: 620px;
    position: relative;
}

.search-header .search-form form {
    display: flex;
}

.search-header .search-form input {
    border: 0;
    height: 36px;
    background: none;
    padding-left: 10px;
    width: 516px;
}

.search-header .search-form button {
    width: 100px;
    background: #a900b9;
    color: #222;
    border: 0;
    display: inline-block;
    height: 36px;
    font-size: 16px;
}

.search-header .search-form span {
    position: absolute;
    right: 100px;
    width: 90px;
    line-height: 22px;
    top: 7px;
    display: block;
    padding-left: 10px;
    border-left: 1px solid #eee;
    height: 22px;
    cursor: pointer;
}

.search-header .search-form span:after,.search-header .search-form span:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #999;
    position: absolute;
    right: 8px;
    top: 10px;
}

.search-header .search-form span:after {
    border-top: 4px solid #fff;
    top: 9px;
}

.search-header .search-form ul {
    display: none;
    position: absolute;
    top: 36px;
    right: 99px;
    z-index: 3;
    background: #fff;
    text-align: center;
    border: 1px solid #a900b9;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1)
}

.search-header .search-form ul li {
    height: 36px;
    border-top: 1px solid #eee;
    width: 89px;
    line-height: 36px;
    cursor: pointer;
}

.search-header .search-form ul li:hover {
    background: #f1f1f1;
}

.search {
    display: flex;
}

.search .numeric-pagination ul {
    text-align: left;
}

.search .numeric-pagination ul li {
    margin: 0 2px;
}

.search .numeric-pagination ul li:first-child {
    margin-left: 0;
}

.search .numeric-pagination ul li a,.search .numeric-pagination ul li span {
    padding: 11px 14px;
    height: auto;
    line-height: 1;
    background: #f1f1f1;
    margin: 0;
}

.search-main {
    width: 60%;
}

.search-section {
    margin: 20px 0 40px;
}

.search-item {
    margin-bottom: 18px;
}

.search-item .search-title h2 {
    font-size: 18px;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    margin-bottom: 0;
}

.search-item .search-title h2 a {
    text-decoration: underline;
}

.search-item .search-info {
    display: flex;
}

.search-info .search-media {
    width: 140px;
    height: 90px;
    position: relative;
}

.search-info .search-media img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.search-info .search-meta {
    width: 100%;
    padding-left: 15px;
}

.search-info .search-meta .search-cate a {
    padding-left: 15px;
    margin-right: 5px;
    position: relative;
    font-size: 12px;
}

.search-info .search-meta .search-cate a:after {
    content: '';
    height: 6px;
    width: 6px;
    border-radius: 5px;
    background: #a900b9;
    display: block;
    position: absolute;
    left: 0;
    top: 6px;
}

.search-info .search-meta .search-cate a:nth-child(2):after {
    background: #4caf50;
}

.search-info .search-meta .search-desc {
    font-size: 12px;
    line-height: 22px;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 5px;
    color: #666;
}

.search-item .search-title h2 span,.search-info .search-meta .search-desc span {
    color: #f00;
}

.search-info .search-meta .search-footer,.search-info .search-meta .search-footer i {
    font-size: 12px;
    margin-top: 8px;
}

.search-info .search-meta .search-footer i {
    margin-top: 0;
    margin-right: 5px;
}

.search-hot {
    width: 33%;
    position: relative;
    margin-left: 7%;
}

.search .empty {
    margin-top: 50px;
    border-radius: 5px;
    border: 1px dashed #ffd1ca;
    padding: 15px 20px 15px 0;
    background: #faf0fc;
    color: #ff2323;
}

.search .empty i {
    width: 20px;
    height: 20px;
    float: left;
    background: url(../images/empty.png) no-repeat left center;
    background-size: 20px;
    position: relative;
    top: -2px;
    margin: 0 10px;
}

.single-section,.vip-section {
    margin-top: -50px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    border-radius: 5px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    display: flex;
}

.single-section .single-nav {
    border-right: 1px solid #f0e6f2;
    position: relative;
    width: 200px;
    padding-top: 15px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 6px 0 0 6px;
    flex-shrink: 0;
}

.single-section .single-nav>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.single-section .single-nav>ul li {
    height: 50px;
    line-height: 50px;
    position: relative;
}

.single-section .single-nav>ul li a {
    width: 100%;
    height: 100%;
    display: block;
    padding-left: 50px;
    box-sizing: border-box;
    color: #555;
    transition: color .2s,background .2s;
}

.single-section .single-nav>ul li a:hover {
    color: #a900b9;
    background: #faf0fc;
}

.single-section .single-nav>ul li.on a {
    color: #a900b9;
    font-weight: 600;
    background: #faf0fc;
}

.single-section .single-nav>ul li.on:after {
    content: '';
    display: block;
    background: #a900b9;
    width: 4px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 13px;
    border-radius: 0 2px 2px 0;
}

.single-section .single-nav>ul li i {
    font-size: 15px;
    margin-right: 5px;
    color: #a900b9;
}

.single-section .single-nav>ul li.logout {
    border-top: 1px solid #f0e6f2;
    border-bottom: 1px solid transparent;
    line-height: 48px;
    margin-top: 40px;
}

.single-section .single-nav>ul li.logout:hover {
    background: #faf0fc;
}

.user-avatar {
    float: left;
    margin: 18px 16px 0 0;
}

.user-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid #fff;
}

.user-info {
    padding: 22px 0;
    line-height: 26px;
}

.user-info h4 {
    font-size: 18px;
    color: #fff;
}

.user-info h4 i {
    background: url(../images/vip.png) no-repeat;
    width: 18px;
    height: 15px;
    margin-left: 20px;
    display: inline-block;
    background-size: 17px auto;
    position: relative;
    top: 1px;
    border: 0;
}

.user-info h4 i.v1 {
    background-position: 0 -32px;
}

.user-info h4 i.v2 {
    background-position: 0 -16px;
}

.user-info h4 i.v3 {
    background-position: 0 0;
}

.user-info h4 span {
    margin-left: 15px;
    position: relative;
    top: -1px;
    padding: 0 6px;
    border-radius: 2px;
    background: #f90;
    color: #fff;
    font-size: 12px;
}

.user-info p {
    margin-top: 5px;
    font-size: 13px;
}

.user-info p i {
    font-size: 13px;
    position: relative;
    top: 0;
}

.user-info p span {
    margin-right: 20px;
}

.main-single {
    flex: 1;
    padding-bottom: 30px;
    min-height: 500px;
}

.main-single .show-box,.main-single .user-box {
    margin-top: 20px;
    padding: 0 25px 30px;
    min-height: 520px;
    box-sizing: border-box;
}

.main-single .user-box h4 {
    font-size: 18px;
    margin-top: 20px;
    font-weight: 500;
}

.main-single .user-box h4 time {
    font-size: 12px;
    margin-left: 30px;
    color: #999;
}

.main-single .user-box h4 i {
    font-size: 22px;
    position: relative;
    top: 2px;
    color: #4fd16d;
}

.main-single .user-box h4 time i {
    font-size: 12px;
    margin-right: 3px;
    position: relative;
    top: 0;
}

.main-single .user-box .notice {
    background: #faf0fc;
    border-radius: 5px;
    border: 1px dashed #ffafaf;
    padding: 10px 25px;
    line-height: 2;
    color: #ff6c6c;
    margin-top: 30px;
}

.main-single .user-box .single-zds {
    margin-top: 16px;
}

.main-single .user-box .single-zds img {
    width: 100%;
    border-radius: 3px;
}

.main-single .user-box table {
    width: 100%;
    line-height: 2;
}

.main-single .user-box thead {
    text-align: left;
    background: #fafafa;
}

.main-single .user-box tbody tr:hover {
    background: #fcfcfc;
}

.main-single .user-box tbody td .btn {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    color: #fff;
    background: #f64949;
    cursor: pointer;
}

.main-single .user-box tbody td .btn:hover {
    background: #ff8181;
    color: #fff;
}

.main-single .user-box .sign-date,.main-single .user-box .sign-info,.main-single .user-box .set-form,.main-single .user-box .login-content {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.main-single .user-box .sign-info {
    padding-left: 40px;
}

.main-single .user-box .sign-date * {
    text-align: center;
}

.sign-date table td,.sign-date table th {
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0;
}

.main-single .user-box .sign-date table tr:hover {
    background: none;
}

.sign-date table td.old {
    color: #ddd;
    background: #fdfdfd;
}

.sign-date table td.current {
    color: #a900b9;
    background: #faf0fc;
    font-size: 15px;
}

.sign-date table td.signin {
    font-weight: bold;
    color: #eb0000;
    background: #faf0fc;
    cursor: pointer;
}

.sign-info h3 {
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 12px;
}

.sign-info h3:after {
    content: '';
    display: block;
    background: #a900b9;
    width: 4px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 1px;
    border-radius: 2px;
}

.sign-info p {
    line-height: 2;
    color: #777;
    margin-bottom: 10px;
    font-size: 13px;
}

.set-form ul {
    margin-top: 40px;
}

.set-form ul li {
    height: 60px;
    box-sizing: border-box;
    padding: 10px 0 10px 30px;
}

.set-form ul li>label {
    width: 80px;
    text-align: right;
}

.set-form ul li>label,.set-form ul li>input {
    display: inline-block;
    margin-right: 5px;
    line-height: 36px;
}

.set-form ul li>input {
    margin-left: 10px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0 10px;
    min-width: 260px;
}

.set-form ul li>input:focus {
    border-color: #5cadff;
    box-shadow: 0 0 0 2px rgba(51,153,255,.2);
}

.set-form ul li>button {
    margin-left: 95px;
    border: 0;
    background: #34c455;
    color: #fff;
    height: 36px;
    padding: 0 40px;
    border-radius: 2px;
}

.set-form ul li>button:hover {
    background: #4cb865;
}

.set-form ul li>button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.main-single .user-box .set-form {
    border-right: 1px solid #f1f1f1;
    width: 43%;
    margin-right: 7%;
    min-height: 400px;
}

.main-single .user-box .login-content {
    text-align: center;
    padding-right: 60px;
}

.pay-methods {
    margin: 16px 0 8px;
    font-size: 14px;
    color: #555;
}

.pay-methods label {
    margin-right: 22px;
    cursor: pointer;
}

.vip-pay-methods {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 18px 0 14px;
    flex-wrap: wrap;
}

.vip-pay-methods label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    color: #555;
    font-size: 14px;
    margin: 0;
    user-select: none;
}

.vip-pay-methods label.on {
    border-color: #7a0d8a;
    color: #7a0d8a;
    background: #faf0fc;
    box-shadow: 0 0 0 1px #7a0d8a inset;
}

.vip-pay-methods label img {
    width: 22px;
    height: 22px;
}

.vip-pay-methods input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vip-section {
    display: block;
    padding-bottom: 40px;
    background: linear-gradient(135deg,#faf0fc,#fff);
}

.vip-section .vip-swing,.vip-section .vip-form {
    width: 100%;
    float: none;
}

.vip-form {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.breadcrumbs.vip {
    text-align: center;
    background: url(../images/vip-banner.png) no-repeat center bottom !important;
    background-size: cover !important;
}

.breadcrumbs.vip h3 {
    font-size: 38px;
    color: #ffc323;
    padding-top: 30px;
    font-weight: bold;
    margin-bottom: 15px;
}

.breadcrumbs.vip p {
    color: #f1f1f1;
    font-weight: 100;
    font-size: 14px;
    margin: 0;
}

.vip-swing {
    background: linear-gradient(135deg,#a900b9,#7a0d8a);
    height: 50px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    padding: 30px 0;
    box-sizing: content-box;
}

.vip-swing ul li {
    width: 20%;
    text-align: center;
    font-size: 16px;
    color: #fff;
    list-style: none;
    float: left;
    line-height: 50px;
    border-left: 1px solid rgba(255,255,255,.15);
    box-sizing: border-box;
}

.vip-swing ul li:first-child {
    border: 0;
}

.vip-swing ul li span {
    font-size: 32px;
    vertical-align: top;
    margin: 0 8px;
}

.vip-swing ul li cite {
    position: relative;
    top: -10px;
    font-size: 18px;
    font-style: normal;
}

.pay-content {
    box-sizing: border-box;
    padding: 50px 40px;
}

.pay-content .box-title,.pay-content .box-list {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 0 3%;
}

.pay-content .box-title:nth-child(2) {
    border: 0;
    padding-left: 6%;
}

.pay-content .box-title>h3 {
    font-size: 18px;
    font-weight: normal;
    height: 34px;
    line-height: 34px;
    margin: 0;
}

.pay-content .box-title>h3 i {
    font-size: 28px;
    color: #ff5757;
    margin: 0 10px;
    position: relative;
    top: -1px;
    vertical-align: middle;
}

.pay-content .box-title>p {
    font-size: 12px;
    color: #999;
    margin: 10px 0 0;
}

.pay-content .box-title>p span {
    color: #ff5757;
    margin-left: 5px;
}

.pay-content .box-list {
    width: 100%;
    padding-left: 3%;
    border: 0;
}

.pay-content .box-list>ul {
    margin-top: 40px;
}

.pay-content .box-list>ul:after,.pay-content:after {
    clear: both;
    content: '';
    display: block;
}

.pay-content .box-list>ul li,.pay-content .box-list>ul cite {
    width: 22%;
    box-sizing: border-box;
    float: left;
    padding-right: 35px;
    display: block;
}

.pay-content .box-list>ul cite {
    width: 12%;
    height: 172px;
    padding: 0;
    margin-top: -90px;
    position: relative;
}

.pay-content .box-list>ul cite:after {
    height: 100%;
    content: '';
    display: block;
    background: #f1f1f1;
    width: 1px;
    position: absolute;
    left: 46%;
    top: 0;
}

.pay-content .box-list>ul li>div {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 20px 0;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #ff5757;
    font-size: 16px;
    cursor: pointer;
    box-sizing: content-box;
    position: relative;
}

.pay-content .box-list>ul li.on>div {
    background: url(../images/on.png) no-repeat right bottom #fffcfc;
    border-color: #ff5757;
}

.pay-content .box-list>ul li>div em {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    color: #fff;
    background: #ff5757;
    border-radius: 3px 0 6px 0;
    font-style: normal;
}

.pay-content .box-list>ul li span {
    font-style: normal;
    font-size: 24px;
    color: #ff5757;
    font-weight: 100;
    margin-right: 5px;
    font-family: 'Century Gothic','Microsoft JHengHei','Georgia';
}

.pay-content .box-list>ul li i {
    font-size: 17px;
    color: #ff5757;
    margin-right: 5px;
}

.pay-info {
    width: 50%;
    height: 52px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ff9f9f;
    border-radius: 5px;
    margin: 20px auto;
}

.pay-info .info-input {
    width: 50%;
    float: left;
    height: 34px;
    padding-left: 90px;
    position: relative;
    box-sizing: border-box;
}

.pay-info .info-input label {
    width: 90px;
    text-align: center;
    position: absolute;
    left: 0;
    line-height: 34px;
}

.pay-info .info-input input {
    border: 0;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    padding-left: 15px;
    background: #f8f8f8;
    border-radius: 2px;
    width: 100%;
    box-sizing: border-box;
}

.pay-info .info-input input:focus,.pay-btn:focus {
    outline: 0
}

.pay-info .info-input input[disabled] {
    background: #fff1f1;
    color: #ff5757;
}

.pay-btn {
    height: 60px;
    width: 240px;
    background: url(../images/alipay.png) no-repeat 40px center #ff5757;
    margin: 60px auto 10px;
    border: 0;
    display: block;
    border-radius: 5px;
    box-sizing: border-box;
    padding-left: 110px;
    font-size: 18px;
    color: #fff;
    background-size: auto 30px;
    cursor: pointer;
    line-height: 60px;
    text-align: center;
}

.pay-btn:hover {
    background-color: #fa4343;
    box-shadow: 0 8px 15px rgba(255,87,87,.3);
    color: #fff;
}

.pay-btn.pay-login {
    background-image: none;
    background-position: 0;
    padding: 0;
    display: block
}

.pay-desc {
    line-height: 2;
    color: #aaa;
    text-align: center;
    margin-top: 50px;
    border-top: 1px solid #f1f1f1;
    margin: 40px auto 0;
    width: 90%;
    padding-top: 20px;
    font-size: 13px;
}

.pay-desc p {
    margin: 0;
}

.demo-h {
    width: 100%;
    background-color: #a900b9;
    position: absolute;
    z-index: 999;
    border-bottom: 3px solid #000;
    height: 60px;
}

.demo-h .logo {
    position: absolute;
    left: 20px;
}

.demo-h .logo img {
    max-height: 100%;
}

.demo-h .demo-nav {
    text-align: center;
    height: 57px;
}

.demo-h .demo-nav span {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 50px;
    height: 57px;
    line-height: 57px;
    background-image: url(../images/rulersIcos.png);
    background-repeat: no-repeat;
    border: 0;
}

.demo-h .demo-nav span.pc {
    background-position: center 17px;
}

.demo-h .demo-nav span.pad {
    background-position: center -20px;
}

.demo-h .demo-nav span.x_pad {
    background-position: center -59px;
}

.demo-h .demo-nav span.mob {
    background-position: center -104px;
}

.demo-h .demo-nav span.x_mob {
    background-position: center -150px;
}

.demo-h .demo-nav .pc.on {
    background-position: center -196px;
}

.demo-h .demo-nav .pad.on {
    background-position: center -233px;
}

.demo-h .demo-nav .x_pad.on {
    background-position: center -272px;
}

.demo-h .demo-nav .mob.on {
    background-position: center -317px;
}

.demo-h .demo-nav .x_mob.on {
    background-position: center -363px;
}

.demo-h .demo-nav span:hover {
    background-color: #ffcb44;
}

.demo-h .demo-nav span.on {
    background-color: #000;
}

.demo-h .demo-nav a {
    display: inline-block;
    vertical-align: middle;
    color: #000;
    width: 50px;
    font-size: 20px;
    height: 30px;
    line-height: 30px;
}

.demo-box {
    position: absolute;
    top: 60px;
    bottom: 0;
    width: 100%;
}

.demo-box .con {
    width: 100%;
    height: 100%;
    background: url(../images/iframeBg.gif) repeat;
}

.demo-box .con .iframe {
    margin: 0 auto;
    height: inherit;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    overflow: hidden;
}

.demo-box .con .iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #fff;
}

.demo-qrcode i {
    position: relative;
    font-size: 23px;
}

.demo-qrcode:hover i:after {
    content: "";
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    left: 2px;
    bottom: -16px;
    z-index: 4;
}

.demo-down {
    position: absolute;
    right: 20px;
    top: 13px;
    color: #000;
    line-height: 30px;
    font-size: 16px;
}

.demo-down a {
    color: #000;
    line-height: 30px;
    font-size: 16px;
}

.demo-down input[type="text"] {
    width: 200px;
    border: 1px solid #dedede;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.demo-down input[type="button"] {
    margin: 0;
    border: 0;
    height: 32px;
    line-height: 32px;
    background-color: #0084e9;
    color: #fff;
    cursor: pointer;
    padding: 0 15px 0 8px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.demo-qrcode {
    position: relative;
}

.demo-qrcode canvas,.demo-qrcode svg {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 40px;
    width: 0px;
    height: 0px;
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    visibility: hidden;
    -webkit-transition: all .2s;
    transition: all .2s;
    border: 10px solid #fff;
}

.demo-qrcode:hover canvas,.demo-qrcode:hover svg {
    visibility: visible;
    max-width: 100px;
    width: 100px;
    height: 100px;
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.modal-shade {
    width: 100%;
    height: 100%;
    background: rgba(52,73,94,.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10050;
}

.modal-shade>cite {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 109;
}

.modal-shade .modal-box {
    width: 660px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -330px;
    background-color: #fff;
    background-image: url(../images/login-modal.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 260px 100%;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(0,0,0,.1);
    padding-left: 260px;
    box-sizing: border-box;
    z-index: 111;
}

.downModal .modal-box {
    background: #fff;
    height: 260px;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
}

.modal-shade .modal-box .login-content {
    padding: 30px;
    text-align: center;
}

.modal-shade .modal-box i.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    transition: transform 0.4s ease-in-out;
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
    font-size: 20px;
}

.modal-shade .modal-box i.close:hover {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.modal-shade .modal-box .login-content h3,.user-box .login-content h3,.login .login-content h3 {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    margin-bottom: 20px;
}

.modal-shade .modal-box hr,.user-box .login-content hr,.login .login-content hr {
    position: relative;
    height: 20px;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 0;
}

.modal-shade .modal-box hr:before,.modal-shade .modal-box hr:after,.user-box .login-content hr:after,.user-box .login-content hr:before,.login .login-content hr:after,.login .login-content hr:before {
    content: "";
    position: absolute;
    top: 50%;
    max-width: calc(50% - (50px / 2));
    border-bottom: 1px solid #e5e5e5;
}

.modal-shade .modal-box hr:after,.user-box .login-content hr:after,.login .login-content hr:after {
    width: 100%;
    left: calc(50% + (50px / 2));
}

.modal-shade .modal-box hr:before,.user-box .login-content hr:before,.login .login-content hr:before {
    width: 100%;
    right: calc(50% + (50px / 2));
}

.modal-shade .modal-box .login-content .login-icon a,.user-box .login-content .login-icon a,.login .login-content .login-icon a {
    width: 96px;
    height: 96px;
    display: inline-block;
    margin: 60px 37px 0;
}

.modal-shade .modal-box .login-content .login-icon i,.user-box .login-content .login-icon i,.login .login-content .login-icon i {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 60px;
    border: 1px solid #f1f1f1;
    background: url(../images/login.png) no-repeat 0 0;
    -webkit-transition: background,border,color 0.3s ease;
    -moz-transition: background,border,color 0.3s ease;
    -o-transition: background,border,color 0.3s ease;
    transition: background,border,color 0.3s ease;
}

.modal-shade .modal-box .login-content .login-icon i.weibo,.user-box .login-content .login-icon i.weibo,.login .login-content .login-icon i.weibo {
    background-position: 0 -72px;
}

.modal-shade .modal-box .login-content .login-icon a:hover i,.user-box .login-content .login-icon a:hover i,.login .login-content .login-icon a:hover i {
    border-color: #ffd8c1;
}

.login .login-content {
    width: 40%;
    margin: 0 auto 50px;
}

.downModal .down-msg {
    font-size: 16px;
    line-height: 1.8;
    padding: 5px 0 12px;
    color: #444;
}

.downModal .down-msg p {
    margin: 0 0 10px;
}

.downModal .down-msg p:last-child {
    margin-bottom: 0;
    color: #666;
    font-size: 15px;
}

.downModal .down-msg span {
    color: #7a0d8a;
}

.downModal .down-btn {
    margin-top: 24px;
    text-align: center;
}

.downModal .down-btn button,.downModal .down-btn a {
    height: 44px;
    line-height: 42px;
    text-align: center;
    width: 140px;
    margin: 0 10px;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
    display: inline-block;
    font-size: 15px;
}

.downModal .down-btn button {
    background: #f5f5f5;
    color: #999;
    cursor: pointer;
}

.downModal .down-btn a {
    background: #4fd16d;
    color: #fff;
    border-color: #35ba53;
}

.downModal .down-btn a.vip {
    background: #fd4c61;
    border-color: #e52239;
}

.downModal .down-btn a:hover {
    box-shadow: 0 12px 20px rgba(79,209,109,.3);
}

.downModal .down-btn a.vip:hover {
    box-shadow: 0 12px 20px rgba(255,59,82,.3);
}

.downModal .down-btn-pair {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.downModal .down-btn-pair a {
    margin: 0;
    width: 150px;
}

.downModal .down-btn-pair a.btn-primary {
    background: #a900b9;
    border-color: #8e0099;
    color: #fff;
}

.downModal .down-btn-pair a.btn-primary:hover {
    box-shadow: 0 12px 20px rgba(169,0,185,.28);
}

.downModal .down-btn-pair a.btn-secondary {
    background: #fff;
    border-color: #a900b9;
    color: #a900b9;
}

.downModal .down-btn-pair a.btn-secondary:hover {
    background: #faf0fc;
    box-shadow: none;
}

.content-title p span.show-contributor {
    margin-right: 25px;
    color: rgba(255,255,255,.92);
    font-size: 12px;
}

.content-title p span.show-contributor a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.content-title p span.show-contributor a:hover {
    opacity: .9;
}

.downModal .down-msg .down-cost {
    font-size: 18px;
    font-weight: 700;
    color: #a900b9;
    margin-bottom: 12px;
}

.downModal .down-msg .down-cost span {
    color: #a900b9;
}

/* 首页最新投稿横条 */
.latest-shared-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
}

.latest-shared-label {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: #a900b9;
    white-space: nowrap;
}

.latest-shared-scroll {
    flex: 1;
    display: flex;
    gap: 0;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.latest-shared-scroll::-webkit-scrollbar {
    display: none;
}

.latest-shared-item {
    flex-shrink: 0;
    display: inline-block;
    max-width: 280px;
    margin-right: 22px;
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.latest-shared-item em {
    font-style: normal;
    color: #a900b9;
}

.latest-shared-item strong {
    font-weight: 600;
    color: #333;
}

.latest-shared-item:hover strong {
    color: #a900b9;
}

/* 用户公开主页（对齐 zztuku space-header，浅蓝灰配色） */
.space-header {
    height: 240px;
    width: 100%;
    background:
        linear-gradient(180deg, rgba(90,140,190,.35) 0%, rgba(70,110,160,.55) 100%),
        url(../images/bg-space.png) no-repeat center bottom;
    background-size: cover, cover;
    position: relative;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

.space-header h1 {
    position: relative;
    z-index: 10;
    text-align: center;
    font-size: 16px;
    height: 46px;
    line-height: 46px;
    margin: 0;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.space-avatar {
    width: 140px;
    height: 140px;
    margin: 8px auto 0;
    border: 5px solid rgba(255,255,255,.95);
    border-radius: 50%;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.space-avatar img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 波浪贴齐头部底边 */
.banner-background-01 {
    height: 72px;
    background: url(../images/wave_01.png) repeat-x left bottom;
    background-size: auto 72px;
    position: absolute;
    left: -236px;
    right: auto;
    bottom: 0;
    width: 400%;
    z-index: 9;
    animation: wave1 25s linear .4s infinite normal;
    pointer-events: none;
}

.banner-background-02 {
    height: 86px;
    background: url(../images/wave_02.png) repeat-x left bottom;
    background-size: auto 86px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 400%;
    z-index: 8;
    animation: wave2 60s linear .4s infinite normal;
    pointer-events: none;
}

@-webkit-keyframes wave1 { from { left: -236px; } to { left: -1233px; } }
@keyframes wave1 { from { left: -236px; } to { left: -1233px; } }
@-webkit-keyframes wave2 { from { left: 0; } to { left: -1009px; } }
@keyframes wave2 { from { left: 0; } to { left: -1009px; } }

.user-home-page {
    padding: 0 0 48px;
}

.user-home-page.space-container {
    margin-top: -24px;
    position: relative;
    z-index: 11;
}

.user-home-profile.space-meta {
    display: block;
    text-align: center;
    padding: 8px 16px 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 8px;
}

.user-home-meta p {
    margin: 6px 0;
    font-size: 14px;
    color: #666;
}

.user-home-meta strong {
    color: #a900b9;
}

.space-vip {
    min-height: 22px;
}

.vip-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.vip-badge.vip-forever {
    background: #f3e5f5;
    color: #7a0d8a;
    border: 1px solid #ce93d8;
}

.vip-badge.vip-year {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.user-home-edit a {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 16px;
    border: 1px solid #a900b9;
    border-radius: 4px;
    color: #a900b9;
    font-size: 13px;
}

.user-home-edit a:hover {
    background: #faf0fc;
}

.user-home-list-title.space-title {
    text-align: left;
    display: block;
    border-bottom: 1px solid #f5f5f5;
    margin: 0 0 20px;
    padding: 0 0 12px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.user-home-list-title {
    margin: 0 0 16px;
    font-size: 18px;
    color: #333;
}

.user-home-empty {
    padding: 48px 24px;
    text-align: center;
    color: #999;
    background: #fff;
    border: 1px dashed #e5e5e5;
    border-radius: 8px;
}

.user-home-empty-text {
    margin: 0 0 16px;
    font-size: 15px;
    color: #888;
}

.user-home-empty-more a {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 4px;
    background: #a900b9;
    color: #fff;
    font-size: 13px;
}

.user-home-empty-more a:hover {
    background: #7a0d8a;
    color: #fff;
}

.user-home-pager {
    margin-top: 24px;
}

.user-home-peers {
    margin-top: 40px;
    padding: 8px 0 8px;
}

.user-home-peers .section-title {
    margin-bottom: 16px;
}

.user-home-peer-box {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px 12px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.user-home-peer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #555;
    text-align: center;
    min-width: 0;
}

.user-home-peer-item:hover {
    color: #a900b9;
}

.user-home-peer-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
    border: 2px solid #f0f0f0;
    transition: border-color .2s;
}

.user-home-peer-item:hover .user-home-peer-avatar {
    border-color: #e0b4ea;
}

.user-home-peer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-home-peer-name {
    font-size: 12px;
    line-height: 1.35;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .user-home-peer-box {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .user-home-peer-box {
        grid-template-columns: repeat(3, 1fr);
        padding: 14px;
        gap: 12px 8px;
    }
}

.user-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.user-home-card {
    display: block;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.user-home-card:hover {
    border-color: #e0b4ea;
    box-shadow: 0 6px 18px rgba(122,13,138,.08);
}

.user-home-thumb {
    height: 130px;
    background: #f5f5f5;
    overflow: hidden;
}

.user-home-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-home-card-body {
    padding: 12px 14px 14px;
}

.user-home-card-body h3 {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.45;
    color: #333;
    height: 2.9em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.user-home-card-body time {
    font-size: 12px;
    color: #999;
}

@media (max-width: 640px) {
    .space-header {
        height: 200px;
        padding-bottom: 36px;
    }

    .space-avatar {
        width: 100px;
        height: 100px;
        margin-top: 8px;
        border-width: 3px;
    }

    .user-home-profile {
        flex-direction: column;
        text-align: center;
    }

    .latest-shared-bar {
        padding: 8px 10px;
        gap: 8px;
    }

    .latest-shared-item {
        max-width: 200px;
        margin-right: 16px;
        font-size: 12px;
    }
}

.slide-wrap,.stage {
    width: 100%;
    height: 100%;
}

.stage {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.stage .space {
    width: 3840px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: url(../images/bg-space.png) repeat-x;
}

.stage .mountains {
    width: 100%;
    height: 17.78125em;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 0.2s linear 0s;
    -moz-transition: opacity 0.2s linear 0s;
    transition: opacity 0.2s linear 0s;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    transform-origin: center top;
}

.stage .mountain {
    width: 224em;
    position: absolute;
    left: 0;
    bottom: 0;
}

.stage .mountain-1 {
    height: 10.5em;
    z-index: 3;
    background: url(../images/bg-mountain-1.png) repeat-x;
    background-size: auto 50%;
    background-position: 0 bottom;
}

.stage .mountain-2 {
    height: 12em;
    z-index: 2;
    background: url(../images/bg-mountain-2.png) repeat-x;
    background-size: auto 50%;
    background-position: 0 bottom;
}

.stage .mountain-3 {
    height: 17.78125em;
    z-index: 1;
    background: url(../images/bg-mountain-3.png) repeat-x;
    background-size: auto 50%;
    background-position: 0 bottom;
}

.stage .bear-wrapper {
    width: 6.25em;
    height: 3.125em;
    position: absolute;
    margin-left: -3.125em;
    left: 50%;
    bottom: 40px;
    z-index: 999;
}

.bear-words {
    display: none;
    width: 6.25em;
    height: 2.8125em;
    position: absolute;
    bottom: 5.3125em;
    left: 50%;
    margin-left: -2.1875em;
    z-index: 5;
}

.bear-words span {
    display: block;
    width: 9.375em;
    height: 1.875em;
    line-height: 1.875em;
    margin-left: 0.9375em;
    font-size: 0.4375em;
    color: #fff;
}

.bear-words .bear-words-background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 0;
}

.stage .bear {
    width: 3.12em;
    height: 1.625em;
    position: absolute;
    margin-left: -1.5625em;
    left: -4%;
    bottom: 25px;
    z-index: 999;
    background: url(../images/bear.png) 0 0 no-repeat;
    background-size: 25em 100%;
    opacity: 0;
}

.scenes-ready .stage .space {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation: moving 450s linear 0.8s infinite normal none;
    -moz-animation: moving 450s linear 0.8s infinite normal none;
    animation: moving 450s linear 0.8s infinite normal none;
}

.scenes-ready .stage .mountains {
    opacity: 1;
    -webkit-animation: mountains-in 0.8s ease-out 0s 1 normal forwards;
    -moz-animation: mountains-in 0.8s ease-out 0s 1 normal forwards;
    animation: mountains-in 0.8s ease-out 0s 1 normal forwards;
}

.scenes-ready .stage .mountain-1 {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation: moving 100s linear 0.8s infinite normal none;
    -moz-animation: moving 100s linear 0.8s infinite normal none;
    animation: moving 100s linear 0.8s infinite normal none;
}

.scenes-ready .stage .mountain-2 {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation: moving 160s linear 0.8s infinite normal none;
    -moz-animation: moving 160s linear 0.8s infinite normal none;
    animation: moving 160s linear 0.8s infinite normal none;
}

.scenes-ready .stage .mountain-3 {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation: moving 360s linear 0.8s infinite normal none;
    -moz-animation: moving 360s linear 0.8s infinite normal none;
    animation: moving 360s linear 0.8s infinite normal none;
}

.scenes-ready .stage .bear {
    opacity: 1;
    -webkit-transition: opacity 0.4s linear 0.6s;
    -moz-transition: opacity 0.4s linear 0.6s;
    transition: opacity 0.4s linear 0.6s;
}

.preserve3d .scenes-ready .stage .bear {
    -webkit-animation: bear-run-in 3.6s step-end 0.6s 1 normal forwards,bear-run 0.8s steps(8) 4.2s infinite normal forwards;
    -moz-animation: bear-run-in 3.6s step-end 0.6s 1 normal forwards,bear-run 0.8s steps(8) 4.2s infinite normal forwards;
    animation: bear-run-in 3.6s step-end 0.6s 1 normal forwards,bear-run 0.8s steps(8) 4.2s infinite normal forwards;
}

.no-preserve3d .scenes-ready .stage .bear,.no-csstransforms3d .scenes-ready .stage .bear {
    left: 50%;
    -webkit-animation: bear-run 0.8s steps(8) 0.6s infinite normal forwards;
    -moz-animation: bear-run 0.8s steps(8) 0.6s infinite normal forwards;
    animation: bear-run 0.8s steps(8) 0.6s infinite normal forwards;
}

.preserve3d .scenes-ready .stage .bear.reset,.no-preserve3d .scenes-ready .stage .bear.reset,.no-csstransforms3d .scenes-ready .stage .bear.reset {
    left: 50%;
    opacity: 1;
    -webkit-animation: none 0s linear 0s infinite normal none;
    -moz-animation: none 0s linear 0s infinite normal none;
    animation: none 0s linear 0s infinite normal none;
}

.preserve3d .scenes-ready .stage .bear.running,.no-preserve3d .scenes-ready .stage .bear.running,.no-csstransforms3d .scenes-ready .stage .bear.running {
    left: 50%;
    -webkit-animation: bear-run 0.8s steps(8) 0s infinite normal none;
    -moz-animation: bear-run 0.8s steps(8) 0s infinite normal none;
    animation: bear-run 0.8s steps(8) 0s infinite normal none;
}

@-webkit-keyframes toy {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    to {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
}

@keyframes toy {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(.9)
    }

    to {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
}

@-webkit-keyframes mountains-in {
    0% {
        -webkit-transform: scale(1.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes mountains-in {
    0% {
        -moz-transform: scale(1.5);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@keyframes mountains-in {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes moving {
    0% {
        -webkit-transform: translate3d(0,0,0);
    }

    100% {
        -webkit-transform: translate3d(-50%,0,0);
    }
}

@-moz-keyframes moving {
    0% {
        -moz-transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-50%,0,0);
    }
}

@-webkit-keyframes bear-run {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -25em 0;
    }
}

@-moz-keyframes bear-run {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -25em 0;
    }
}

@keyframes bear-run {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -25em 0;
    }
}

@-webkit-keyframes bear-run-in {
    0% {
        background-position: 0em 0;
        left: -4%;
    }

    2.77777778% {
        background-position: -6.25em 0;
        left: -0.5%;
    }

    4.16666667% {
        background-position: -9.375em 0;
        left: 1.25%;
    }

    5.55555556% {
        background-position: -12.5em 0;
        left: 3%;
    }

    6.94444444% {
        background-position: -15.625em 0;
        left: 4.75%;
    }

    8.33333333% {
        background-position: -18.75em 0;
        left: 6.5%;
    }

    9.72222222% {
        background-position: -21.875em 0;
        left: 8.25%;
    }

    11.11111111% {
        background-position: -25em 0;
        left: 10%;
    }

    11.11111111% {
        background-position: 0em 0;
        left: 10%;
    }

    12.77777778% {
        background-position: -3.125em 0;
        left: 11.5%;
    }

    14.44444444% {
        background-position: -6.25em 0;
        left: 13%;
    }

    16.11111111% {
        background-position: -9.375em 0;
        left: 14.5%;
    }

    17.77777778% {
        background-position: -12.5em 0;
        left: 16%;
    }

    19.44444444% {
        background-position: -15.625em 0;
        left: 17.5%;
    }

    21.11111111% {
        background-position: -18.75em 0;
        left: 19%;
    }

    22.77777778% {
        background-position: -21.875em 0;
        left: 20.5%;
    }

    24.44444444% {
        background-position: -25em 0;
        left: 22%;
    }

    24.44444444% {
        background-position: 0em 0;
        left: 22%;
    }

    26.38888889% {
        background-position: -3.125em 0;
        left: 23.25%;
    }

    28.33333333% {
        background-position: -6.25em 0;
        left: 24.5%;
    }

    30.27777778% {
        background-position: -9.375em 0;
        left: 25.75%;
    }

    32.22222222% {
        background-position: -12.5em 0;
        left: 27%;
    }

    34.16666667% {
        background-position: -15.625em 0;
        left: 28.25%;
    }

    36.11111111% {
        background-position: -18.75em 0;
        left: 29.5%;
    }

    38.05555556% {
        background-position: -21.875em 0;
        left: 30.75%;
    }

    40% {
        background-position: -25em 0;
        left: 32%;
    }

    40% {
        background-position: 0em 0;
        left: 32%;
    }

    42.22222222% {
        background-position: -3.125em 0;
        left: 33%;
    }

    44.44444444% {
        background-position: -6.25em 0;
        left: 34%;
    }

    46.66666667% {
        background-position: -9.375em 0;
        left: 35%;
    }

    48.88888889% {
        background-position: -12.5em 0;
        left: 36%;
    }

    51.11111111% {
        background-position: -15.625em 0;
        left: 37%;
    }

    53.33333333% {
        background-position: -18.75em 0;
        left: 38%;
    }

    55.55555556% {
        background-position: -21.875em 0;
        left: 39%;
    }

    57.77777778% {
        background-position: -25em 0;
        left: 40%;
    }

    57.77777778% {
        background-position: 0em 0;
        left: 40%;
    }

    60.27777778% {
        background-position: -3.125em 0;
        left: 40.75%;
    }

    62.77777778% {
        background-position: -6.25em 0;
        left: 41.5%;
    }

    65.27777778% {
        background-position: -9.375em 0;
        left: 42.25%;
    }

    67.77777778% {
        background-position: -12.5em 0;
        left: 43%;
    }

    70.27777778% {
        background-position: -15.625em 0;
        left: 43.75%;
    }

    72.77777778% {
        background-position: -18.75em 0;
        left: 44.5%;
    }

    75.27777778% {
        background-position: -21.875em 0;
        left: 45.25%;
    }

    77.77777778% {
        background-position: -25em 0;
        left: 46%;
    }

    77.77777778% {
        background-position: 0em 0;
        left: 46%;
    }

    80.55555556% {
        background-position: -3.125em 0;
        left: 46.5%;
    }

    83.33333333% {
        background-position: -6.25em 0;
        left: 47%;
    }

    86.11111111% {
        background-position: -9.375em 0;
        left: 47.5%;
    }

    88.88888889% {
        background-position: -12.5em 0;
        left: 48%;
    }

    91.66666667% {
        background-position: -15.625em 0;
        left: 48.5%;
    }

    94.44444444% {
        background-position: -18.75em 0;
        left: 49%;
    }

    97.22222222% {
        background-position: -21.875em 0;
        left: 49.5%;
    }

    100% {
        background-position: -25em 0;
        left: 50%;
    }
}

@-moz-keyframes bear-run-in {
    0% {
        background-position: 0em 0;
        left: -4%;
    }

    1.38888889% {
        background-position: -3.125em 0;
        left: -2.25%;
    }

    2.77777778% {
        background-position: -6.25em 0;
        left: -0.5%;
    }

    4.16666667% {
        background-position: -9.375em 0;
        left: 1.25%;
    }

    5.55555556% {
        background-position: -12.5em 0;
        left: 3%;
    }

    6.94444444% {
        background-position: -15.625em 0;
        left: 4.75%;
    }

    8.33333333% {
        background-position: -18.75em 0;
        left: 6.5%;
    }

    9.72222222% {
        background-position: -21.875em 0;
        left: 8.25%;
    }

    11.11111111% {
        background-position: -25em 0;
        left: 10%;
    }

    11.11111111% {
        background-position: 0em 0;
        left: 10%;
    }

    12.77777778% {
        background-position: -3.125em 0;
        left: 11.5%;
    }

    14.44444444% {
        background-position: -6.25em 0;
        left: 13%;
    }

    16.11111111% {
        background-position: -9.375em 0;
        left: 14.5%;
    }

    17.77777778% {
        background-position: -12.5em 0;
        left: 16%;
    }

    19.44444444% {
        background-position: -15.625em 0;
        left: 17.5%;
    }

    21.11111111% {
        background-position: -18.75em 0;
        left: 19%;
    }

    22.77777778% {
        background-position: -21.875em 0;
        left: 20.5%;
    }

    24.44444444% {
        background-position: -25em 0;
        left: 22%;
    }

    24.44444444% {
        background-position: 0em 0;
        left: 22%;
    }

    26.38888889% {
        background-position: -3.125em 0;
        left: 23.25%;
    }

    28.33333333% {
        background-position: -6.25em 0;
        left: 24.5%;
    }

    30.27777778% {
        background-position: -9.375em 0;
        left: 25.75%;
    }

    32.22222222% {
        background-position: -12.5em 0;
        left: 27%;
    }

    34.16666667% {
        background-position: -15.625em 0;
        left: 28.25%;
    }

    36.11111111% {
        background-position: -18.75em 0;
        left: 29.5%;
    }

    38.05555556% {
        background-position: -21.875em 0;
        left: 30.75%;
    }

    40% {
        background-position: -25em 0;
        left: 32%;
    }

    40% {
        background-position: 0em 0;
        left: 32%;
    }

    42.22222222% {
        background-position: -3.125em 0;
        left: 33%;
    }

    44.44444444% {
        background-position: -6.25em 0;
        left: 34%;
    }

    46.66666667% {
        background-position: -9.375em 0;
        left: 35%;
    }

    48.88888889% {
        background-position: -12.5em 0;
        left: 36%;
    }

    51.11111111% {
        background-position: -15.625em 0;
        left: 37%;
    }

    53.33333333% {
        background-position: -18.75em 0;
        left: 38%;
    }

    55.55555556% {
        background-position: -21.875em 0;
        left: 39%;
    }

    57.77777778% {
        background-position: -25em 0;
        left: 40%;
    }

    57.77777778% {
        background-position: 0em 0;
        left: 40%;
    }

    60.27777778% {
        background-position: -3.125em 0;
        left: 40.75%;
    }

    62.77777778% {
        background-position: -6.25em 0;
        left: 41.5%;
    }

    65.27777778% {
        background-position: -9.375em 0;
        left: 42.25%;
    }

    67.77777778% {
        background-position: -12.5em 0;
        left: 43%;
    }

    70.27777778% {
        background-position: -15.625em 0;
        left: 43.75%;
    }

    72.77777778% {
        background-position: -18.75em 0;
        left: 44.5%;
    }

    75.27777778% {
        background-position: -21.875em 0;
        left: 45.25%;
    }

    77.77777778% {
        background-position: -25em 0;
        left: 46%;
    }

    77.77777778% {
        background-position: 0em 0;
        left: 46%;
    }

    80.55555556% {
        background-position: -3.125em 0;
        left: 46.5%;
    }

    83.33333333% {
        background-position: -6.25em 0;
        left: 47%;
    }

    86.11111111% {
        background-position: -9.375em 0;
        left: 47.5%;
    }

    88.88888889% {
        background-position: -12.5em 0;
        left: 48%;
    }

    91.66666667% {
        background-position: -15.625em 0;
        left: 48.5%;
    }

    94.44444444% {
        background-position: -18.75em 0;
        left: 49%;
    }

    97.22222222% {
        background-position: -21.875em 0;
        left: 49.5%;
    }

    100% {
        background-position: -25em 0;
        left: 50%;
    }
}

@keyframes bear-run-in {
    0% {
        background-position: 0em 0;
        left: -4%;
    }

    1.38888889% {
        background-position: -3.125em 0;
        left: -2.25%;
    }

    2.77777778% {
        background-position: -6.25em 0;
        left: -0.5%;
    }

    4.16666667% {
        background-position: -9.375em 0;
        left: 1.25%;
    }

    5.55555556% {
        background-position: -12.5em 0;
        left: 3%;
    }

    6.94444444% {
        background-position: -15.625em 0;
        left: 4.75%;
    }

    8.33333333% {
        background-position: -18.75em 0;
        left: 6.5%;
    }

    9.72222222% {
        background-position: -21.875em 0;
        left: 8.25%;
    }

    11.11111111% {
        background-position: -25em 0;
        left: 10%;
    }

    11.11111111% {
        background-position: 0em 0;
        left: 10%;
    }

    12.77777778% {
        background-position: -3.125em 0;
        left: 11.5%;
    }

    14.44444444% {
        background-position: -6.25em 0;
        left: 13%;
    }

    16.11111111% {
        background-position: -9.375em 0;
        left: 14.5%;
    }

    17.77777778% {
        background-position: -12.5em 0;
        left: 16%;
    }

    19.44444444% {
        background-position: -15.625em 0;
        left: 17.5%;
    }

    21.11111111% {
        background-position: -18.75em 0;
        left: 19%;
    }

    22.77777778% {
        background-position: -21.875em 0;
        left: 20.5%;
    }

    24.44444444% {
        background-position: -25em 0;
        left: 22%;
    }

    24.44444444% {
        background-position: 0em 0;
        left: 22%;
    }

    26.38888889% {
        background-position: -3.125em 0;
        left: 23.25%;
    }

    28.33333333% {
        background-position: -6.25em 0;
        left: 24.5%;
    }

    30.27777778% {
        background-position: -9.375em 0;
        left: 25.75%;
    }

    32.22222222% {
        background-position: -12.5em 0;
        left: 27%;
    }

    34.16666667% {
        background-position: -15.625em 0;
        left: 28.25%;
    }

    36.11111111% {
        background-position: -18.75em 0;
        left: 29.5%;
    }

    38.05555556% {
        background-position: -21.875em 0;
        left: 30.75%;
    }

    40% {
        background-position: -25em 0;
        left: 32%;
    }

    40% {
        background-position: 0em 0;
        left: 32%;
    }

    42.22222222% {
        background-position: -3.125em 0;
        left: 33%;
    }

    44.44444444% {
        background-position: -6.25em 0;
        left: 34%;
    }

    46.66666667% {
        background-position: -9.375em 0;
        left: 35%;
    }

    48.88888889% {
        background-position: -12.5em 0;
        left: 36%;
    }

    51.11111111% {
        background-position: -15.625em 0;
        left: 37%;
    }

    53.33333333% {
        background-position: -18.75em 0;
        left: 38%;
    }

    55.55555556% {
        background-position: -21.875em 0;
        left: 39%;
    }

    57.77777778% {
        background-position: -25em 0;
        left: 40%;
    }

    57.77777778% {
        background-position: 0em 0;
        left: 40%;
    }

    60.27777778% {
        background-position: -3.125em 0;
        left: 40.75%;
    }

    62.77777778% {
        background-position: -6.25em 0;
        left: 41.5%;
    }

    65.27777778% {
        background-position: -9.375em 0;
        left: 42.25%;
    }

    67.77777778% {
        background-position: -12.5em 0;
        left: 43%;
    }

    70.27777778% {
        background-position: -15.625em 0;
        left: 43.75%;
    }

    72.77777778% {
        background-position: -18.75em 0;
        left: 44.5%;
    }

    75.27777778% {
        background-position: -21.875em 0;
        left: 45.25%;
    }

    77.77777778% {
        background-position: -25em 0;
        left: 46%;
    }

    77.77777778% {
        background-position: 0em 0;
        left: 46%;
    }

    80.55555556% {
        background-position: -3.125em 0;
        left: 46.5%;
    }

    83.33333333% {
        background-position: -6.25em 0;
        left: 47%;
    }

    86.11111111% {
        background-position: -9.375em 0;
        left: 47.5%;
    }

    88.88888889% {
        background-position: -12.5em 0;
        left: 48%;
    }

    91.66666667% {
        background-position: -15.625em 0;
        left: 48.5%;
    }

    94.44444444% {
        background-position: -18.75em 0;
        left: 49%;
    }

    97.22222222% {
        background-position: -21.875em 0;
        left: 49.5%;
    }

    100% {
        background-position: -25em 0;
        left: 50%;
    }
}

@media (max-width: 1450px) {
    .container {
        width:1180px;
    }

    .article-card .standard .standard-media {
        height: 138px;
    }

    .ppt .standard .standard-media {
        height: 230px;
    }

    .source-article .source-standard {
        height: 132px;
    }

    .article-wrapper .article-item .article-media {
        height: 80px;
    }

    .article-wrapper .article-item .article-info .article-excerpt {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .article-soft .article-wrapper .article-item {
        margin-bottom: 22px;
    }

    .article-soft .article-wrapper .article-item .article-media {
        width: 25%;
        height: 60px;
    }

    .article-soft .article-wrapper .article-item .article-look {
        display: none;
    }

    .like-section .article-wrapper .article-item .article-media {
        width: 120px;
    }

    .main-course .article-wrapper .article-item .article-info .article-excerpt {
        overflow: auto;
        white-space: normal;
    }

    .course-aside .article-wrapper .article-item .article-media {
        height: 54px;
        width: 80px;
        margin-right: 15px;
    }

    .main-course .main-section .article-card {
        flex: 0 0 50%;
        width: 50%;
    }

    .rollbar {
        margin-left: 610px;
    }

    .numeric-pagination>span, .numeric-pagination a, .numeric-pagination ul.pagination li a, .numeric-pagination ul.pagination li span {
        padding: 0 15px;
        height: 44px;
        line-height: 44px;
    }
}

/* ===== 内容页仿制（参考站风格）补充 ===== */
/* 属性行 */
.show-props {
    padding: 0 25px 15px;
    color: #999;
    font-size: 13px;
}

.show-props span {
    margin-right: 20px;
}

/* 侧栏模块标题（title.png 图标，品牌紫） */
.side-title {
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #f3f3f3;
    padding: 0 10px 0 4px;
    margin: 0;
}

.side-title span {
    display: inline-block;
    height: 44px;
    font-size: 16px;
    padding: 0 12px 0 36px;
    position: relative;
    font-weight: normal;
}

.side-title span:before {
    width: 22px;
    height: 22px;
    top: 50%;
    left: 6px;
    margin-top: -11px;
    background: url(../images/title.png) no-repeat center;
    background-size: contain;
    content: "";
    display: block;
    position: absolute;
    border-radius: 0;
    -webkit-animation: toy 3s .1s infinite;
    animation: toy 3s .1s infinite;
}

.side-title a {
    float: right;
    font-size: 12px;
    color: #999;
    font-weight: normal;
}

.side-title a:hover {
    color: #a900b9;
}

/* 侧栏上传引导（对齐 zztuku aside-box） */
.course-aside > div.aside-box {
    height: 182px;
    padding: 16px 41px;
    margin-bottom: 20px;
    background: url(../images/upload-bg.png) no-repeat #fff;
    background-size: contain;
    text-align: center;
    box-sizing: border-box;
}

.course-aside > div.aside-box .title {
    font-size: 20px;
    font-weight: 500;
    color: #3a4156;
}

.course-aside > div.aside-box .sub-title {
    font-size: 16px;
    color: #848da3;
    margin: 10px 0 15px;
}

.course-aside > div.aside-box .upload-button {
    height: 42px;
    line-height: 42px;
    display: inline-block;
    width: 100%;
    font-size: 16px;
    color: #fff;
    background-size: 300% 100%;
    border-radius: 50px;
    transition: background .4s ease-in-out;
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 1px 10px 0 rgba(45, 54, 65, 0.25);
}

.course-aside > div.aside-box .upload-button:hover {
    background-position: 100% 0;
    color: #fff;
}

.course-aside > div.aside-box > p {
    margin: 20px 0 0;
    font-size: 13px;
    color: #848da3;
}

.course-aside > div.aside-box > p a {
    color: #a900b9;
}

/* 侧栏热门标签：随机色底 + 优先撑满整行 */
.side-tags {
    padding: 8px 12px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.side-tags a {
    flex: 1 1 auto;
    min-width: 3.2em;
    height: auto;
    padding: 5px 12px;
    border-radius: 3px;
    display: inline-block;
    line-height: 1.4;
    margin: 0;
    font-size: 12px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff !important;
    transition: filter .15s, transform .15s;
}

.side-tags a:nth-child(10n+1) { background: #e91e63; }
.side-tags a:nth-child(10n+2) { background: #9c27b0; }
.side-tags a:nth-child(10n+3) { background: #673ab7; }
.side-tags a:nth-child(10n+4) { background: #3f51b5; }
.side-tags a:nth-child(10n+5) { background: #2196f3; }
.side-tags a:nth-child(10n+6) { background: #009688; }
.side-tags a:nth-child(10n+7) { background: #4caf50; }
.side-tags a:nth-child(10n+8) { background: #ff9800; }
.side-tags a:nth-child(10n+9) { background: #ff5722; }
.side-tags a:nth-child(10n+10) { background: #a900b9; }

.side-tags a:hover {
    filter: brightness(1.08);
    color: #fff !important;
    transform: translateY(-1px);
}

.show-options li.score {
    color: #fff;
    font-weight: 600;
}

.theme-ad {
    margin-bottom: 10px;
    overflow: hidden;
    text-align: center;
}

.theme-ad img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 侧栏推荐列表（图+文，无图标） */
.side-relate {
    padding: 10px 15px;
}

.side-relate .relate-item {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px dotted #eee;
    padding-bottom: 10px;
}

.side-relate .relate-item:last-child {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.side-relate .relate-item>a {
    flex-shrink: 0;
}

.side-relate .relate-item img {
    width: 98px;
    height: 60px;
    border-radius: 2px;
    display: block;
}

.side-relate .relate-text {
    margin-left: 12px;
    overflow: hidden;
}

.side-relate .relate-text h2 {
    font-size: 13px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    font-weight: normal;
}

.side-relate .relate-text h2 a {
    color: #333;
}

.side-relate .relate-text h2 a:hover {
    color: #a900b9;
}

.side-relate .relate-text p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #999;
}

.side-relate .relate-text p span {
    margin-right: 15px;
}

/* 禁止下拉刷新导致分类页滚动时整页刷新回顶部 */
html,body {
    overscroll-behavior-y: contain;
}

@media (max-width: 768px) {
    .content-title {
        padding:18px 15px;
    }

    .content-title h1 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .content-title p span {
        margin-right: 12px;
    }

    .content-title p span.anchor {
        width: 100%;
        margin: 10px 0 0;
        flex: 0 0 100%;
    }

    .content-title p span.anchor a {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        padding: 10px 16px;
        font-size: 16px;
        border-radius: 8px;
    }

    .show-content {
        padding: 0 15px;
    }

    .show-props,.show-tags-bottom {
        padding-left: 15px;
        padding-right: 15px;
    }

    .show-article blockquote {
        margin: 15px;
    }

    .show-options {
        height: auto;
        line-height: 1.4;
    }

    .show-options ul {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }

    .show-options ul li {
        width: 50%!important;
        float: none!important;
        height: 56px;
        line-height: 56px;
        padding: 0;
    }

    .show-options ul li:after {
        display: none;
    }

    .show-article.has-down {
        padding-bottom: 138px;
    }

    .content-prev {
        height: auto;
        display: block;
    }

    .content-prev .cs-prev,.content-prev .cs-next {
        width: 100%;
        height: 100px;
        border-radius: 0;
    }

}

/* 未登录下载引导 / 举报弹窗 */
.guestDownModal .modal-box,
.reportModal .modal-box {
    background: #fff;
    min-height: 220px;
    height: auto;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
}

.down-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.guestDownModal .down-btn a.btn-primary,
.reportModal .down-btn button.btn-primary,
.reportModal .down-btn a.btn-primary {
    display: inline-block;
    min-width: 160px;
    padding: 10px 24px;
    background: #a900b9;
    color: #fff !important;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
}

.guestDownModal .down-btn a.btn-primary:hover,
.reportModal .down-btn button.btn-primary:hover {
    background: #8d0899;
}

.report-reasons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.report-reasons label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.reportModal textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 14px;
}

/* 选择积分方式 */
.choose-score-page {
    padding: 40px 0 60px;
    max-width: 860px;
}

.choose-score-title {
    font-size: 28px;
    margin: 0 0 12px;
    color: #333;
}

.choose-score-desc {
    color: #666;
    margin: 0 0 28px;
    line-height: 1.7;
}

.choose-score-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.choose-score-card {
    display: block;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.choose-score-card:hover {
    border-color: #a900b9;
    box-shadow: 0 6px 20px rgba(169,0,185,.08);
}

.choose-score-card h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #a900b9;
}

.choose-score-card p {
    margin: 0 0 18px;
    color: #666;
    line-height: 1.7;
    font-size: 14px;
}

.choose-score-card span {
    color: #a900b9;
    font-size: 14px;
}

/* 投稿成功页 */
.publish-success-page {
    padding: 50px 0 70px;
}

.publish-success-box {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 28px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.publish-success-box h1 {
    margin: 0 0 16px;
    font-size: 26px;
    color: #333;
}

.publish-success-lead {
    margin: 0 0 28px;
    color: #666;
    line-height: 1.8;
    font-size: 15px;
}

.publish-success-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.publish-success-actions .btn-copy-site,
.publish-success-actions .btn-go-home {
    display: inline-block;
    min-width: 140px;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border: 0;
}

.publish-success-actions .btn-copy-site {
    background: #a900b9;
    color: #fff;
}

.publish-success-actions .btn-go-home {
    background: #f5f5f5;
    color: #555;
}

@media screen and (max-width: 800px) {
    .choose-score-options {
        grid-template-columns: 1fr;
    }
    .show-options ul li.report {
        min-width: 80px;
    }
}

/* audio list */
.main.audio .standard-media.audio-media{height:220px;background:#1a1a1a;}
.main.audio .audio-media a{position:relative;display:flex;align-items:center;justify-content:center;height:100%;overflow:hidden;background:radial-gradient(circle at center,#333 0%,#111 70%);}
.main.audio .audio-media img.vinyl-thumb{width:72%;height:72%;object-fit:contain;border-radius:50%;box-shadow:0 4px 18px rgba(0,0,0,.35);}
.main.audio .audio-play-icon{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(0,0,0,.45);z-index:2;pointer-events:none;}
.main.audio .audio-play-icon:after{content:"";position:absolute;left:22px;top:18px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;}

/* vinyl player (tukuppt-like) */
.vinyl-player{display:flex;align-items:center;gap:36px;margin:0 0 28px;padding:28px 32px;background:linear-gradient(135deg,#1f1f23 0%,#2c2c34 50%,#1a1a1e 100%);border-radius:12px;color:#fff;position:relative;overflow:hidden;}
.vinyl-player audio{display:none;}
.vinyl-stage{position:relative;width:220px;height:220px;flex:0 0 220px;}
.vinyl-disc{position:absolute;left:0;top:0;width:200px;height:200px;cursor:pointer;z-index:1;}
.vinyl-plate{width:100%;height:100%;display:block;border-radius:50%;box-shadow:0 8px 28px rgba(0,0,0,.45);transition:transform .2s linear;}
.vinyl-player.is-playing .vinyl-plate{animation:vinyl-spin 3.2s linear infinite;}
@keyframes vinyl-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.vinyl-play-btn{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:0;border-radius:50%;background:rgba(255,255,255,.92);cursor:pointer;z-index:3;box-shadow:0 2px 10px rgba(0,0,0,.25);}
.vinyl-play-btn:before{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #222;}
.vinyl-player.is-playing .vinyl-play-btn:before{left:18px;top:16px;width:6px;height:22px;border:0;background:#222;box-shadow:12px 0 0 #222;}
.vinyl-arm{position:absolute;right:-6px;top:8px;width:90px;height:14px;background:linear-gradient(90deg,#d0d0d0,#9a9a9a);border-radius:8px;transform-origin:85% 50%;transform:rotate(-28deg);z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .45s ease;}
.vinyl-arm:after{content:"";position:absolute;left:-8px;top:-6px;width:22px;height:26px;background:#bbb;border-radius:4px;box-shadow:inset 0 0 0 2px #999;}
.vinyl-player.is-playing .vinyl-arm{transform:rotate(8deg);}
.vinyl-meta{flex:1;min-width:0;}
.vinyl-title{margin:0 0 18px;font-size:20px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.vinyl-progress{height:6px;background:rgba(255,255,255,.18);border-radius:3px;cursor:pointer;overflow:hidden;}
.vinyl-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb347,#ff6b6b);border-radius:3px;}
.vinyl-time{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums;}
@media (max-width:800px){
  .vinyl-player{flex-direction:column;align-items:center;padding:20px 16px;gap:18px;}
  .vinyl-stage{width:180px;height:180px;flex:none;}
  .vinyl-disc{width:160px;height:160px;}
  .vinyl-title{font-size:16px;text-align:center;}
  .vinyl-meta{width:100%;}
}

/* ===== 会员排行榜 ===== */
/* 头图独立：2560x200，按宽度等比，不塞面包屑 */
.ranking-hero {
    width: 100%;
    height: clamp(72px, 7.8125vw, 200px);
    background: #2c3140 url(../images/ranking-banner.png) no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.ranking-section {
    margin-top: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    border-radius: 5px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    padding-bottom: 20px;
}
.ranking-pager {
    padding: 16px 0 8px;
    text-align: center;
}
.ranking-title {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #f1f1f1;
    margin: 0 0 0;
    line-height: 50px;
    font-size: 20px;
    font-weight: 500;
}
.ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 20px 20px 10px;
}
.ranking-tabs .ranking-tab {
    display: inline-block;
    min-width: 96px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    padding: 0 16px;
    border-radius: 20px;
    background: #f5f6f8;
    color: #555;
    font-size: 14px;
    transition: all .2s;
}
.ranking-tabs .ranking-tab:hover {
    background: #eee;
    color: #222;
}
.ranking-tabs .ranking-tab.on {
    background: linear-gradient(90deg, #ff9a44, #fc6076);
    color: #fff;
    box-shadow: 0 4px 12px rgba(252, 96, 118, .28);
}
.ranking-table-wrap {
    padding: 10px 30px 0;
}
.ranking-pane { display: none; }
.ranking-pane.on { display: block; }
.ranking-table {
    width: 100%;
    border-collapse: collapse;
    line-height: 1.5;
}
.ranking-table thead th {
    background: #fafafa;
    color: #888;
    font-weight: 500;
    font-size: 13px;
    height: 44px;
    border-bottom: 1px solid #f0f0f0;
}
.ranking-table tbody td {
    height: 58px;
    border-bottom: 1px dotted #f0f0f0;
    font-size: 14px;
    color: #444;
}
.ranking-table .col-rank { width: 90px; text-align: center; }
.ranking-table .col-user { text-align: left; }
.ranking-table .col-cnt { width: 120px; text-align: center; font-weight: 600; color: #fc6076; }
.ranking-table .rank-num {
    display: inline-block;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    background: #f1f1f1;
    color: #888;
    font-size: 13px;
    text-align: center;
}
.ranking-table .rank-num.top {
    background: linear-gradient(135deg, #ffb347, #ff6b6b);
    color: #fff;
}
.ranking-table .col-user a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #333;
}
.ranking-table .col-user a:hover { color: #a900b9; }
.ranking-table .col-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #eee;
}
.ranking-table .empty {
    text-align: center;
    color: #999;
    padding: 40px 0;
}
@media (max-width: 640px) {
    .ranking-hero { height: 72px; }
    .ranking-table-wrap { padding: 10px 12px 0; }
    .ranking-tabs .ranking-tab { min-width: 72px; padding: 0 10px; font-size: 13px; }
    .ranking-table .col-cnt { width: 72px; }
    .ranking-table .col-rank { width: 56px; }
}

/* ========== 首页 t39 风格区块（搜索/Tab/投稿以外） ========== */
.yh-home-row {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    align-items: stretch;
}
.yh-home-main {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
}
.yh-home-side {
    width: 300px;
    flex: 0 0 300px;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
}
.yh-theme-box {
    display: flex;
    border-top: 1px solid #f1f1f1;
}
.yh-box-img {
    width: 46%;
    flex: 0 0 46%;
}
.yh-box-img ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.yh-box-img li {
    width: 50%;
    box-sizing: border-box;
    padding: 10px 10px 0;
    border: 1px dotted #eee;
    border-right: 0;
    border-top: 0;
    height: 175px;
    overflow: hidden;
}
.yh-box-img li a {
    display: block;
    color: #333;
}
.yh-box-img li img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 3px;
}
.yh-box-img li h2 {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
.yh-box-text {
    flex: 1;
    min-width: 0;
    padding: 8px 12px 12px;
}
.yh-box-text ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.yh-box-text li {
    line-height: 32px;
    border-bottom: 1px dotted #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yh-box-text li a {
    color: #333;
    font-size: 14px;
}
.yh-box-text li a:hover {
    color: #a900b9;
}
.yh-tui {
    padding: 0 12px 10px;
}
.yh-tui dl {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}
.yh-tui dl:last-child {
    border-bottom: 0;
}
.yh-tui dt {
    width: 100px;
    flex: 0 0 100px;
    margin: 0;
    overflow: hidden;
    border-radius: 3px;
}
.yh-tui dt img {
    display: block;
    width: 100%;
    height: 62px;
    object-fit: cover;
}
.yh-tui dd {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.yh-tui dd h2 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
.yh-tui dd h2 a {
    color: #333;
}
.yh-tui dd p {
    margin: 0;
    font-size: 12px;
    color: #999;
}
.yh-course-wrap {
    margin-top: 15px;
    background: #fff;
    padding: 0 0 15px;
}
.yh-course-wrap .container.yh-home-row {
    margin-top: 0;
}
.yh-course-wrap .yh-home-main,
.yh-course-wrap .yh-home-side {
    background: transparent;
}
.yh-artlist .yh-art-item {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid #f1f1f1;
}
.yh-artlist .yh-art-item:last-child {
    border-bottom: 0;
}
.yh-artlist .yh-art-item dt {
    width: 155px;
    flex: 0 0 155px;
    margin: 0;
    overflow: hidden;
    border-radius: 3px;
}
.yh-artlist .yh-art-item dt img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.yh-artlist .yh-art-item dd {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.yh-artlist .yh-art-item dd h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yh-artlist .yh-art-item dd h2 a {
    color: #333;
}
.yh-art-meta {
    margin: 0 0 8px;
    font-size: 12px;
    color: #999;
}
.yh-art-meta span {
    margin-left: 12px;
}
.yh-art-info {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
@media (max-width: 1100px) {
    .yh-home-side { width: 260px; flex-basis: 260px; }
}
@media (max-width: 900px) {
    .yh-home-row { flex-direction: column; }
    .yh-home-side { width: 100%; flex-basis: auto; }
    .yh-theme-box { flex-direction: column; }
    .yh-box-img { width: 100%; flex-basis: auto; }
    .ppt-article .source-standard { width: 33.333%; flex: 0 0 33.333%; }
}
@media (max-width: 640px) {
    .yh-box-img li { width: 50%; height: 150px; }
    .ppt-article { flex-wrap: wrap; }
    .ppt-article .source-standard { width: 50%; flex: 0 0 50%; }
    .yh-artlist .yh-art-item { flex-direction: column; }
    .yh-artlist .yh-art-item dt { width: 100%; flex-basis: auto; }
    .yh-artlist .yh-art-item dt img { height: 160px; }
}