/**
 * PIX主题样式
 * ------------------------------------------------------
 */

 /**
 * 全局基础样式
 */
 html {
    background: transparent;
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    font-family: HarmonyOS_Regular,PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body,h1,h2,h3,h4,p,input,button,textarea{
    font-family: HarmonyOS_Regular,PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif;
}

.fileuploader, .fileuploader-popup , [class*=hint--]:hover:after {
    font-family: HarmonyOS_Regular,PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif;
}

.fileuploader-items .fileuploader-item .fileuploader-item-image canvas, .fileuploader-items .fileuploader-item .fileuploader-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
    text-decoration: none;
}

[class*=hint--]:after, [class*=hint--]:before {
    -webkit-transition: .15s ease;
    -moz-transition: .15s ease;
    transition: .15s ease;
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

pre {
    padding: 0;
}

a , a:visited , a:focus {
    color: auto;
    text-decoration: none;
    outline: none;
}

.hd-bg {
    background: #fff;
}

.box {
    background: #fff;
    border-radius: 10px;
}

.shadow-overlay {
    box-shadow: 0px 10px 15px rgb(205 209 252 / 29%);
}

.box-p {
    padding: 0 40px;
}

.wid-p {
    padding: 25px 30px;
    margin-bottom: 15px;
}

.b-line .wid-box {
    border-bottom: 1px solid #eeefff;
}

img.lazy.loaded {
    opacity: 1;
    transition: opacity 400ms;
}

img.lazy:not(.loaded) {
    opacity: 0;
}

.center-content {
    width: 100%;
    background-color: #ffffff;
}

.center-content.full-width {
    max-width: 100%!important;
    width: 100%;
}

.center-content.center-half {
    max-width: 800px;
    margin: 0 auto;
}

.nav-link-item {
    display: flex;
}

a.protect , input#push_comment.protect {
    cursor: not-allowed;
    opacity: .6;
}

.uk-modal {
    backdrop-filter: saturate(97%) blur(41px);
}

.modal-rounded {
    border-radius: 12px;
}

.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rounded {
    border-radius: 5px;
}

.uk-tooltip {
    padding: 4px 8px;
    background: #020202de;
    border-radius: 5px;
}

.main-warp {
    position: relative;
}

.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
    -webkit-box-shadow: 0 2px 6px rgb(167 162 192 / 33%);
    box-shadow: 0 2px 6px rgb(167 162 192 / 33%);
    border-radius: 10px;
}

.jconfirm.jconfirm-white .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg {
    background-color: #242330bd;
    backdrop-filter: saturate(97%) blur(41px);
    opacity: 1; 
}

.jconfirm .jconfirm-box .jconfirm-title-c.c-modal-title {
    font-size: 17px;
}

.jconfirm .jconfirm-box {
    padding: 20px;
}

.jconfirm .jconfirm-box .jconfirm-title-c.c-modal-title .jconfirm-title {
    display: flex;
}

.jconfirm {
    z-index: 1010;
}

.jconfirm .jconfirm-box .jconfirm-title-c.c-modal-title .jconfirm-title i {
    margin-right: 3px;
}

p.nodata , .nodata {
    display: flex;
    justify-content: center;
    color: #8382b8;
}

.nodata img {
    width: 30%;
}

@keyframes bounce-top {
    0% {
        opacity: 0.7;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.b-top {
    animation: bounce-top .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}



 /**
 * 滚动条
 */

::-webkit-scrollbar {
    width: 5px;
    height: 7px;
    background-color: #f5f5f5;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #c8c8c8;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #3555ff;
  }

  .nav-fold-box::-webkit-scrollbar {
    width: 7px;
    height: 5px;
  }

/**
 * 顶部工具
 */
.user-area {
    display: flex;
    height: 100%;
}

.tools-box {
    display: flex;
    align-items: center;
}

.tools-box .item {
    display: flex;
    height: 100%;
    align-items: center;
    margin-right: 20px;
}

.tools-box .item i {
    font-size: 18px;
    cursor: pointer;
    color: #2a2a2a;
}

.login-avatar {
    cursor: pointer;
}

.login-avatar img {
    width: 28px;
    border-radius: 50%;
}

.user-drop-pannel , .publish-drop-pannel , .msg-drop-pannel {
    display: none;
    z-index: 999;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgb(52 50 83 / 15%);
}

.publish-drop-pannel , .msg-drop-pannel  {
    background: #ffffffe8;
    backdrop-filter: blur(2px);
    border: 1px solid #f1efff;
    box-shadow: 0px 5px 13px rgb(155 149 246 / 10%);
    min-width: 160px;
    padding: 15px;
}

.cls-notify a {
    position: relative;
}

.msg-unread-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ff2d2d;
    border-radius: 50%;
    right: -2px;
    top: 1px;
}

.publish-drop-pannel ul li a , .msg-drop-pannel ul li a{
    font-size: 15px;
    color: #363636;
    display: flex;
    padding: 8px 12px;
    align-items: center;
}

.publish-drop-pannel ul li a:hover , .msg-drop-pannel ul li a:hover  {
    background: #ecedff;
    border-radius: 5px;
    color: #281fc5;
}

.tools-box .publish-drop-pannel ul li a i {
    margin-right: 5px;
    color: #696cb9;
}

.publish-drop-pannel ul li a:hover i {
    color: #281fc5;
}

a.login-btn {
    display: flex;
    align-items: center;
    color: #2a2a2a;
}

.login-modal-inner {
    border-radius: 8px;
    width: 400px;
    padding: 30px 40px;
}

.login-banner.type-top {
    padding: 10px 0;
}

.login-banner.type-top .inner {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.login-banner.type-top .login-logo img {
    width: 32px;
}

.login-banner.type-top .title {
    margin: 0;
    font-size: 13px;
    margin-top: 10px;
    color: #a1a2b4;
}

form#login p.log_title , form#register p.log_title {
    font-size: 16px;
    font-weight: 600;
}

form#login .log-form-item input , form#register .reg-form-item input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f1f1fe;
    border: none;
    font-size: 13px;
    outline: none;
    padding-left: 32px;
}

form#login .log-form-item input:focus , form#register .reg-form-item input:focus {
    box-shadow: 0px 0px 0px 3px rgb(37 64 255 / 31%);
    transition: all .2s;
}

form#login input.submit_button , form#register input.submit_button {
    background: linear-gradient(135deg, #3232ff 10%, #9694ff 100%);
    color: #fff;
    padding: 15px;
    cursor: pointer;
    margin-bottom: 15px;
}

form#login input.submit_button:focus , form#register input.submit_button:focus{
    box-shadow: none;
}

.login-tools {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.login-tools a {
    font-size: 14px;
    color: #8183c0;
}

a#fast-login {
    color: #2638ff;
}

form#login h3 , form#register h3 {
    margin: 0;
    font-size: 15px;
    text-align: center;
    margin-bottom: 30px;
}

a#pop_signup , #pop_login {
    color: #2638ff;
}

form#login label , form#register label {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 40px;
}

form#login .logonicon , form#register .logonicon {
    position: absolute;
    left: 10px;
    color: #7984ad;
}

.pwd-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    padding: 5px;
    margin: 0;
    cursor: pointer;
    color: #7984ad;
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.pwd-toggle-btn:hover {
    color: #393d58;
}

.pwd-toggle-btn:active,
.pwd-toggle-btn:focus {
    transform: translateY(-50%);
    outline: none;
    box-shadow: none;
}

.pwd-toggle-btn.visible {
    color: #4a90e2;
}

.pwd-toggle-btn.visible:hover {
    color: #357abd;
}

.sms-code-btn {
    font-size: 12px;
    display: flex;
    min-width: 100px;
    background-color: #393d58;
    justify-content: center;
    margin-left: 5px;
    color: #fff;
    align-items: center;
    height: inherit;
    border-radius: 8px;
    cursor: pointer;
}

.sms-code-btn:hover {
    opacity: .7;
    color: #fff;
}

form#phone-login , form#register{
    display: none;
}

a.captcha-push , a.nopass-push , a.register-push {
    position: relative;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 15px;
    line-height: 1;
    background: linear-gradient(0deg, #3039ff 0%, #719aff 100%);
    color: #fff;
    font-size: 13px;
    border-radius: 8px;
    margin-bottom: 15px;
    -webkit-box-shadow: 0 3px 4px 0 rgba(44,71,146,.32), inset 0 -2px 0 0 #3262e6;
    box-shadow: 0 3px 4px 0 rgba(44,71,146,.32), inset 0 -2px 0 0 #3262e6;
}

a.captcha-push:active , a.nopass-push:active , a.register-push:active {
    top: 1.5px;
}

form#login input.submit_button {
    display: none;
}

form#register label.pe_code_box , form#login label.pe_code_box , form#resetpwd-form label.pwd-send-code {
    display: none;
}
form#register label.pe_code_box.visible , form#login label.pe_code_box.visible , form#resetpwd-form label.pwd-send-code.visible {
    display: flex !important;
}

/* 随机验证码弹窗 */
.captcha-code-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    animation: captcha-fade-in .25s ease-out forwards;
}
@keyframes captcha-fade-in {
    from { opacity: 0; }
    to { opacity: 1; background: rgba(0,0,0,0.5); }
}
.uk-modal-dialog .captcha-code-overlay {
    position: absolute;
}
.captcha-code-popup {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transform: scale(0.85);
    opacity: 0;
    animation: captcha-scale-in .3s ease-out .1s forwards;
}
@keyframes captcha-scale-in {
    from { transform: scale(0.85) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.captcha-code-img-wrap {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    min-height: 60px;
}
.captcha-code-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background: #f5f7fa;
    border-radius: 6px;
}
.captcha-code-loading i {
    font-size: 24px;
    color: #0052cc;
    animation: captcha-spin 1s linear infinite;
}
@keyframes captcha-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.captcha-code-img {
    border-radius: 6px;
    width: 100%;
    height: auto;
}
.captcha-code-input-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.captcha-code-input {
    flex: 1;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
    caret-color: #333;
    color: #333;
    text-align: center;
    letter-spacing: 4px;
}
.captcha-code-input:focus {
    border-color: #0052cc;
}
.captcha-code-refresh {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    font-size: 18px;
    transition: all .2s;
}
.captcha-code-refresh:hover {
    border-color: #0052cc;
    color: #0052cc;
}
.captcha-code-actions {
    display: flex;
    gap: 8px;
}
.captcha-code-btn {
    flex: 1;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
}
.captcha-code-confirm {
    background: #1e38ff;
    color: #fff;
}
.captcha-code-confirm:hover {
    background: #4874ff;
    color: #fff;
}
.captcha-code-cancel {
    background: #f5f5f5;
    color: #666;
}
.captcha-code-cancel:hover {
    background: #e8e8e8;
}

.captcha-code-popup.success-state .captcha-success-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c6ffc4, #d3ffe9);
    border-radius: 6px;
    color: #009d3e;
    padding: 12px;
    border: 1px solid #77ffa0;
}
.captcha-code-popup.success-state .captcha-success-icon i {
    font-size: 28px;
    animation: captcha-check-in 0.4s ease-out;
    line-height: 28px;
}
.captcha-code-popup.success-state .captcha-success-icon span {
    margin-top: 4px;
    font-size: 13px;
    opacity: 0.9;
}
@keyframes captcha-check-in {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.login-form-tab {
    display: none;
}

.login-form-tab.active {
    display: block;
}

.reg_protocol {
    margin: 10px 0;
    padding: 12px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ebe7ff;
    border-radius: 8px;
    text-align: center;
    color: #3d375f;
    cursor: pointer;
}

.reg_protocol input {
    margin-right: 5px;
    border-radius: 3px;
    height: 14px;
    width: 14px;
    margin-top: 0;
}

.reg_protocol .uk-checkbox:checked {
    background-color: #4320ff;
    background-size: 80%;
}

.reg_protocol a {
    color: #2c31ff;
}

form#register .reg_protocol label {
    margin: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.open_oauth {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
}

.open_oauth a {
    color: #3754ff;
    display: flex;
    line-height: 1;
    padding: 8px;
    background: #f0efff;
    margin: 0 3px;
    border-radius: 5px;
    margin-bottom: 8px;
}

.open_oauth a img {
    width: 18px;
    height: 18px;
}

.open-oauth-title {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 13px;
    color: #8b8ab5;
    background: #ffffff;
}

.open-oauth-title:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: #e7e7ff;
    top: 50%;
    z-index: 0;
}

.open-oauth-title span {
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 0 10px;
}

/**
 * 安全验证
 */

.captcha-code-body {
    width: 300px;
    border-radius: 8px;
}

.captcha-code-body h2 {
    font-size: 18px;
    display: flex;
    justify-content: center;
}

.captcha-code-body h2 i {
    margin-right: 5px;
}

.captcha-code-body .captcha-box {
    text-align: center;
    height: 60px;
    width: 100%;
    border-radius: 5px;
}

.captcha-code-body .captcha-box img {
    border-radius: 5px;
    cursor: pointer;
}

.captcha-box .pix-page-loader {
    padding: 0;
    padding-top: 18px;
}

.captcha-code-body p {
    font-size: 14px;
    text-align: center;
    color: #8c8eb0;
}

.captcha-code-body .captcha-code-bottom {
    display: flex;
    column-gap: 5px;
}

.captcha-code-body .captcha-code-bottom a {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 5px;
}

.captcha-code-body .close-cpt-code {
    background: #eef;
    color: #9e95cf;
}

.captcha-code-body .check-cpt-code {
    background: #3a3bff;
    color: #fff;
}

.captcha-code-body input#captcha_code {
    width: 100%;
    font-size: 18px;
    padding: 10px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1f2780;
    border-radius: 5px;
    background: #f8faff;
}

/**
 * 用户中心
 */

.user-banner {
    height: 260px;
    width: 100%;
    position: relative;
}

.user-banner:after {
    content: "";
    background: linear-gradient(0deg, #1517388f 0%, #ffffff00 60%);
    position: absolute;
    width: 100%;
    height: 150px;
    left: 0;
    bottom: 0;
    z-index: 0;
    z-index: 0;
}

.user-banner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.user-banner-info {
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 60px;
    left: 0;
    z-index: 1;
}

.user-banner-info .left {
    display: flex;
    flex-direction: row;
    align-items: center;   
}

.user-avatar-show {
   display: flex;
}

a.edit-avatar {
    width: 84px;
    height: 84px;
    position: relative;
}

a.edit-avatar .ca_icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 28px;
    color: #fff;
    justify-content: center;
    align-items: center;
    background: #191533a8;
    border-radius: 10px;
    opacity: 0;
    transition: opacity .2s;
}

a.edit-avatar:hover i {
    opacity: 1;
    transition: opacity .2s;
}

.user-avatar-show img {
    width: 84px;
    height: 84px;
    border-radius: 10px;
}

.user-banner-info .user-info {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.user-banner-info .user-info .user-nickname {
    margin-bottom: 10px;
    line-height: 1;
}

.user-banner-info .user-info .user-nickname span {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
}

.user-banner-info .user-info .user-nickname img {
    width: 20px;
    height: 20px;
    margin-left: 6px;
    vertical-align: middle;
}

.user-banner-info .user-info img.banner-vip-icon {
    height: 24px;
}

.user-banner-info .user-info img.banner-lv-icon {
    height: 18px;
    object-fit: unset;
    width: auto;
}

.user-banner-info .user-info .user-desc {
    margin: 0;
    line-height: 1.5;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

.user-center .user-right {
    background: #fff;
}

.user-left-nav {
    padding: 30px;
}

.user-left-nav ul {
    display: flex;
    flex-direction: column;
}

.user-left-nav ul li {
    display: flex;
}

.user-left-nav ul li a {
    width: 100%;
    padding: 13px 25px;
    margin-bottom: 8px;
    border-radius: 10px;
    color: #171717;
    display: flex;
    align-items: center;
    font-size: 15px;
    position: relative;
}

.user-left-nav ul li a span.nav-title {
    font-size: 15px;
}

.user-left-nav ul li a:hover {
    background: #eceaff;
}

.user-left-nav ul li a i {
    margin-right: 6px;
    color: #322aff;
}

.user-left-nav ul li a.active {
    background: linear-gradient(135deg, #4f4dffdb 0%, #887eff4d 100%);
    color: #fff;
}

.user-left-nav ul li a.active i {
    color:#ffffff
}

/**
 * 资料修改
 */
.edit-page-header {
    padding: 20px 40px 0;
}

.back-to-center {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #5955ff;
    text-decoration: none;
}

.back-to-center:hover {
    color: #4a48e6;
}

.user-page-body {
    padding: 30px 40px;
}


.user-page-tab {
    display: flex;
    width: 100%;
    padding: 30px 40px;
    border-bottom: 1px solid #f4f2ff;
}

.user-page-tab ul {
    display: flex;
}

.user-page-tab li {
    display: flex;
}

.user-page-tab li a,
.user-page-tab .user-tab-item {
    line-height: 1;
    padding: 10px 15px;
    font-size: 13px;
    color: #484d90;
    background: #f5f5ff;
    border-radius: 6px;
    margin-right: 10px;
    text-decoration: none;
}

.user-page-tab li a.active,
.user-page-tab .user-tab-item.active {
    background: #5955ff;
    color: #ffffff;
}

.eidt-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #edecff;
    margin-bottom: 25px;
    padding-bottom: 25px;
}

.eidt-box:last-child {
    border-bottom: none;
}

.eidt-box .left {
    display: flex;
    flex-direction: column;
}

.eidt-box .edit-title {
    color: #302f4d;
    padding-bottom: 5px;
    font-size: 17px;
    display: flex;
}

.eidt-box .edit-title i {
    margin-right: 5px;
}

.eidt-box .edit-info {
    font-size: 15px;
    color: #9ea0bb;
}

a.edit_btn.user-info-edit {
    font-size: 14px;
    background: #d9dbf3;
    padding: 5px 25px;
    color: #62639f;
    border-radius: 20px;
}

a.edit_btn.user-info-edit:hover {
    background: #5955ff;
    color: #fff;
    transition: all .2s;
}

.uid_show {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.uid_show span {
    font-size: 15px;
    font-weight: 600;
}

.uid_show small {
    padding: 1px 12px;
    background: #f4cfa8;
    border-radius: 3px;
    color: #846647;
    margin-left: 15px;
}

.regdate_show {
    color: #8f92ab;
}

.regdate_show span {
    font-size: 14px;
}

.eidt-box.edit-top {
    background: linear-gradient(90deg, #efefff 20%, #fafaff 100%);
    padding: 20px;
    border-radius: 8px;
    border: none;
}

.yinsi-edit {
    padding: 20px;
    height: 500px;
    border-left: 1px solid #f1f0ff;
    padding-top: 0;
}

.yinsi-edit h4 {
    font-size: 16px;
    display: flex;
}

.yinsi-edit h4 i {
    margin-right: 5px;
    color: #6967b3;
}

.uk-modal-dialog.uk-modal-body.user-edit-modal , .uk-modal-dialog.uk-modal-body.user-safe-modal , .uk-modal-dialog.uk-modal-body.user-repass-modal {
    width: 380px;
}

input.user-edit-form {
    width: 100%;
    padding: 8px 15px;
    border-radius: 8px;
    outline: none;
    background: #f1f1fe;
    border-color: #dbdbff;
}

input.user-edit-form:focus {
    box-shadow: 0px 0px 0px 3px rgb(37 64 255 / 31%);
    transition: all .2s;
}

.user-edit-tool {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    column-gap: 7px;
}

.user-edit-tool button {
    font-size: 15px;
    border: none;
    display: flex;
    padding: 15px 25px;
    border-radius: 6px;
    background: #d3d1e2;
    color: #504d82;
    cursor: pointer;
    flex: 1 1 0;
    justify-content: center;
}

.user-edit-tool button.user-edit-sure {
    margin-left: 8px;
    background: #2844ff;
    color: #fff;
}

.edit-modal-title {
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.edit-modal-title i {
    line-height: 1;
    padding: 12px;
    background: #3a3cff;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.gender-box {
    display: flex;
    justify-content: space-evenly;
}

/**
 * 安全设置
 */

.safe-edit-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.safe-eidt-box , .oauth-bind-item {
    display: flex;
    width: calc((100% - 20px)/2);
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 15px;
    background: #f2f2fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.safe-eidt-box .left {
    display: flex;
    flex-direction: column;
}

.safe-eidt-box .edit-title {
    color: #302f4d;
    padding-bottom: 5px;
    font-size: 17px;
    display: flex;
}

.safe-eidt-box .edit-title i {
    margin-right: 5px;
}

.safe-eidt-box .edit-info {
    font-size: 15px;
    color: #9ea0bb;
}

a.edit_btn.user-safe-edit , a.edit_btn.user-pass-edit {
    font-size: 14px;
    background: #d9dbf3;
    padding: 5px 25px;
    color: #62639f;
    border-radius: 20px;
}

.safe-eidt-box .safe-pass {
    color: #d89857;
}

.safe-eidt-box .safe-email {
    color: #6857d8;
}

.safe-eidt-box .safe-phone {
    color: #5fbc9c;
}

input.user-safe-form {
    width: 100%;
    padding: 10px 15px;
    border-radius: 8px;
    outline: none;
    background: #f1f1fe;
    border-color: #dbdbff;
    padding-left: 36px;
    font-size: 14px;
}

input.user-safe-form:disabled {
    background-color: #f8f8f8;
    color: #999;
    border-color: #e5e5e5;
    cursor: not-allowed;
}

input.user-safe-form:focus {
    box-shadow: 0px 0px 0px 3px rgb(37 64 255 / 31%);
    transition: all .2s;
}

.safe-form-box label {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    height: 42px;
}

.safe-form-box label i {
    position: absolute;
    left: 10px;
    color: #7978a4;
}

.safe-form-box .tips {
    font-size: 14px;
    margin-bottom: 10px;
    color: #676884;
}

.safe-modal-title {
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.safe-modal-title i {
    line-height: 1;
    padding: 12px;
    background: #3a3cff;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.user-edit-tool .user-safe-sure {
    margin-left: 8px;
    background: #2844ff;
    color: #fff;
}

.oauth-bind-item .left {
    display: flex;
    align-items: center;
}

.oauth-bind-item .left img {
    min-width: 18px;
    height: 18px;
}

.oauth-bind-item .left .info {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.oauth-bind-item .left .info h4 {
    font-size: 15px;
    margin-bottom: 0;
    color: #2c2d5e;
}

.oauth-bind-item .left .info span {
    font-size: 13px;
    color: #7776ac;
}

.oauth-bind-item .left .lo {
    padding: 10px;
    display: flex;
    background: #e0e3f1;
    border-radius: 50%;
}

.oauth-bind-item a {
    font-size: 14px;
    background: #d9dbf3;
    padding: 5px 25px;
    color: #62639f;
    border-radius: 20px;
}

.oauth-bind-item a.unbind-btn {
    background: #5955ff;
    color: #fff;
}

.safe-edit-wrap {
    margin-bottom: 20px;
}

.safe-edit-wrap .safe-title {
    display: flex;
    font-size: 16px;
    font-weight: 600;
    color: #5e5d7d;
}

.safe-edit-wrap .safe-title i {
    font-weight: 400;
    margin-right: 8px;
}

button.btn.unbind-sure {
    background: #294bff;
    color: #fff;
}



/**
 * 头像上传
 */

.user-avatar-modal {
    width: 450px;
    border-radius: 8px;
} 

.user-avatar-modal .avatar-modal-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.avatar-upload-box {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.user-avatar-modal .tips {
    font-size: 13px;
    margin: 10px 0 15px;
    color: #747693;
}

.bind-avatar-box {
    display: flex;
    align-items: center;
}

.bind-avatar-box a {
    display: flex;
    width: 64px;
    height: 64px;
    margin-right: 8px;
    background: #f3f3ff;
    border-radius: 5px;
}

.bind-avatar-box a img {
    border-radius: 5px;
}

.bind-avatar-box a:hover , .bind-avatar-box a.active {
    box-shadow: 0px 0px 0px 2px rgb(91 116 255);
}

.avatar-select-box .title {
    font-size: 13px;
    padding: 10px 0;
}

.avatar-select-box {
    margin-top: 30px;
    border-top: 1px solid #eaeaff;
}

.avatar-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.avatar-btn a.change-avatar {
    font-size: 14px;
    padding: 12px 30px;
    background: #3631ff;
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 5px;
}

.avatar-btn {
    display: none;
}

.fileuploader-theme-avatar {
	position: relative;
	width: 150px;
	height: 150px;
	padding: 0;
	margin: 0;
	background: none;
}

.fileuploader-theme-avatar .fileuploader-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.fileuploader-theme-avatar .fileuploader-wrapper,
.fileuploader-theme-avatar .fileuploader-items .fileuploader-item .fileuploader-item-image {
	background: #f9f9fc;
}

.fileuploader-theme-avatar .fileuploader-items {
	height: 100%;
}
.fileuploader-theme-avatar .fileuploader-items .fileuploader-item {
	height: 100%;
	padding: 0;
	margin: 0;
}
.fileuploader-theme-avatar .fileuploader-items .fileuploader-item.is-image-waiting .fileuploader-item-image img {
	display: none;
}

.fileuploader-theme-avatar .fileuploader-droparea {
	position: absolute;
	display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(43, 56, 71, 0.6);
    border-radius: 50%;
    cursor: pointer;
	transition: all 0.3s ease;
	
	z-index: -1;
	opacity: 0;
	transform: scale(1.3);
}
.fileuploader-theme-avatar .fileuploader-droparea .fileuploader-icon-main {
	font-size: 32px;
    color: #fff;
}
.fileuploader-theme-avatar .fileuploader-dragging .fileuploader-droparea {
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}

.fileuploader-theme-avatar .progressbar3 {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fileuploader-theme-avatar .progressbar3 span {
	position: relative;
    display: inline-block;
	font-size: 16px;
    font-weight: 700;
    color: #1f344a;
	z-index: 1;
}
.fileuploader-theme-avatar .progressbar3 [data-action] {
	cursor: pointer;
}
.fileuploader-theme-avatar .progressbar3 svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.fileuploader-theme-avatar .progressbar3 svg circle {
	stroke: #5b7bfe;
    stroke-width: 4px;
    fill: transparent;
	transition: 0.3s stroke-dashoffset, 0.3s transform;
	transform: rotate(-90deg);
  	transform-origin: 50% 50%;
}
.fileuploader-theme-avatar .progressbar3.is-reset svg circle {
	transition: none;
}
.fileuploader-theme-avatar .progressbar3 svg .progress-dash {
	stroke: #dae2fd;
}
.fileuploader-theme-avatar .fileuploader-item.upload-complete .progressbar3 svg {
	transform: scale(0.5);
}
.fileuploader-theme-avatar .fileuploader-item.upload-complete .progressbar3 span {
	font-size: 16px;
	color: #fff;
}
.fileuploader-theme-avatar .fileuploader-item.upload-complete .progressbar3 svg .progress-dash {
	stroke-width: 0;
    transform: scale(1.3);
}
.fileuploader-theme-avatar .fileuploader-item.upload-successful .progressbar3 svg circle {
	stroke: #43D084;
	fill: #43D084;
}
.fileuploader-theme-avatar .fileuploader-item.upload-successful .progressbar3 svg .progress-dash {
    fill: rgba(67, 208, 132, 0.6);
}
.fileuploader-theme-avatar .fileuploader-item.upload-failed .progressbar3 svg circle {
	stroke: #FE7676;
	fill: #FE7676;
}
.fileuploader-theme-avatar .fileuploader-item.upload-failed .progressbar3 svg .progress-dash {
    fill: rgba(254, 118, 118, 0.6);
}

.fileuploader-theme-avatar .fileuploader-menu {
	position: absolute;
	bottom: 6%;
	right: 8%;
	z-index: 1;
}
.fileuploader-theme-avatar .fileuploader-menu-open {
	padding: 2px 4px;
	border-radius: 4px;
	background: #fff;
	color: #5b7bfe;
	font-size: 18px;
	line-height: 0;
	box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.fileuploader-theme-avatar .fileuploader-menu ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: -1px;
	box-shadow: 1px 6px 10px rgba(0, 0, 0, 0.1);
	border-radius: 0 0 4px 4px;
}
.fileuploader-theme-avatar .fileuploader-menu.is-shown .fileuploader-menu-open {
	transform: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.fileuploader-theme-avatar .fileuploader-menu.is-shown ul {
	display: block;
}
.fileuploader-theme-avatar .fileuploader-menu ul li {
	margin: 0;
	padding: 0;
}
.fileuploader-theme-avatar .fileuploader-menu ul li a {
	display: block;
	padding: 10px 12px;
	min-width: 120px;
	color: #1f344a;
	cursor: pointer;
	text-decoration: none;
}
.fileuploader-theme-avatar .fileuploader-menu ul li a i {
	margin-right: 6px;
}
.fileuploader-theme-avatar .fileuploader-menu ul li a:hover {
	background: rgba(0, 0, 0, 0.03)
}
.fileuploader-theme-avatar .fileuploader-menu ul li a:active {
	background: rgba(0, 0, 0, 0.05)
}

.fileuploader-theme-avatar:hover .fileuploader-menu {
	transform: translateY(0);
	opacity: 1;
}

.fileuploader-popup-preview.is-for-avatar .fileuploader-cropper .fileuploader-cropper-area .area-image,
.fileuploader-popup-preview.is-for-avatar .fileuploader-cropper .fileuploader-cropper-area .area-move:after {
	border-radius: 50%;
}

/**
 * 导航构建器
 */
 .test {
    width: 860px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
}

.main-nav-item {
    display: flex;
} 

.nav-bg-box {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
    margin: 0 auto;
}

.hb-top-nav ,  .hb-center-nav {
    display: flex;
}

.top-nav-row.main-nav-item , .center-nav-row.main-nav-item , .bottom-nav-row.main-nav-item {
    min-height: 100px;
    background: #fff;
    border-width: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.top-nav-row.main-nav-item {
    position: relative;
    z-index: 988;
}

.nav-left-warp , .nav-right-warp {
    display: flex;
    justify-content: space-between;
}

.nav-middle-warp {
    display: flex;
    justify-content: center;
}

.main-nav-item.fullwidth .nav-bg-box {
    width: 100%;
}

.main-nav-item.box {
    background-color: transparent !important;
}

.center-nav-row.main-nav-item .nav-bg-box {
    border-width: 0px;
}

.nav-item.nav-end , .nav-item.nav-start-right {
    flex: auto;
    display: flex;
    flex-direction: row-reverse;
}

.nav-item.nav-end-left , .nav-item.nav-start {
    flex: auto;
    display: flex;
    flex-direction: row;
}

.center-nav-row.main-nav-item.blur {
    backdrop-filter: blur(0.8rem);
    -webkit-backdrop-filter: blur(0.8rem);
}

.nav-item {
    display: flex;
}

.primary-nav , .sec-nav , .classic-nav {
    display: flex;
    z-index: 2;
}

.primary-nav > div , .sec-nav > div , .classic-nav > div {
    display: flex;
    min-height: 100%;
}

.primary-nav ul , .sec-nav ul , .classic-nav ul {
    display: flex;
}

.primary-nav ul li , .sec-nav ul li , .classic-nav ul li {
    position: relative;
}

.primary-nav li ul , .sec-nav li ul {
    position: absolute;
    display: flex;
    visibility: hidden;
    opacity: 0;
    top: 130%;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0px 12px 20px 0px rgb(66 63 122 / 17%);
    padding: 8px;
    min-width: 200px;
    left: 0;
    height: auto;
    pointer-events: none;
}

.primary-nav li:hover .sub-menu , .sec-nav li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
    transition: all .3s;
    pointer-events: all;
}

.primary-nav ul li a , .sec-nav ul li a , .classic-nav ul li a {
    display: flex;
    height: 100%;
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    transition: all .1s;
    white-space: nowrap;
}

#primary_menu > li > a , #sec_menu > li > a , #classic_menu > li > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#primary_menu > li a span , #sec_menu > li a span , #classic_menu > li a span { 
    position: relative;
}

.primary-nav.line ul li a .nav-link-item:before , .sec-nav.line ul li a .nav-link-item:before , .classic-nav.line ul li a .nav-link-item:before {
    content: "";
    width: 100%;
    height: 3px;
    display: block;
    position: absolute;
    top: 0%;
    background-image: linear-gradient(to right,#2c28ff,#5697ff);
    left: 0%;
    transition: transform 0.2s;
    border-radius: 3px;
    transform-origin: right center;
    transform: scaleX(0);
}

.primary-nav ul li a .nav-link-item:hover:before , .sec-nav ul li a .nav-link-item:hover:before , .classic-nav ul li a .nav-link-item:hover:before  {
    transition: transform 0.2s;
    transform-origin: left center;
    transform: scaleX(1);
}

.primary-nav.line li ul li a .nav-link-item:before , .primary-nav.boxt li ul li a:after , .sec-nav.line li ul li a .nav-link-item:before , .sec-nav.boxt li ul li a:after 
, .classic-nav.line li ul li a .nav-link-item:before , .classic-nav.boxt li ul li a:after {
    display: none;
}

.primary-nav ul li a i , .sec-nav ul li a i , .classic-nav ul li a i {
    margin-right: 3px;
}

#primary_menu > li a:hover , #sec_menu > li a:hover , #classic_menu > li a:hover {
    transition: all .1s;
}

.primary-nav.boxt ul li a:after , .sec-nav.boxt ul li a:after , .classic-nav.boxt ul li a:after {
    content: "";
    width: 100%;
    height: 50%;
    display: block;
    position: absolute;
    background-image: linear-gradient(to right,rgba(214,214,255,0.43),rgba(178,207,255,0.15));
    left: 0;
    transition: all .2s;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0;
}

.primary-nav.boxt ul li a:hover:after , .sec-nav.boxt ul li a:hover:after , .classic-nav.boxt ul li a:hover:after {
    opacity: 1;
    transition: all .2s;
}

.primary-nav.move li ul li a:hover .nav-link-item , .sec-nav.move li ul li a:hover .nav-link-item , .classic-nav.move li ul li a:hover .nav-link-item {
    transform: translateX(5px);
    transition: all .1s;
}

.primary-nav.disperse li ul li a:hover .nav-link-item , .sec-nav.disperse li ul li a:hover .nav-link-item , .classic-nav.disperse li ul li a:hover .nav-link-item {
    letter-spacing: 2px;
    transition: letter-spacing .3s;
}

.primary-nav.high li ul li , .primary-nav.main_high #primary_menu > li , .sec-nav.high li ul li , .sec-nav.main_high #sec_menu > li 
, .classic-nav.high li ul li , .classic-nav.main_high #classic_menu > li {
    transition: opacity .4s;
}

.primary-nav.up #primary_menu > li > a:hover , .sec-nav.up #sec_menu > li > a:hover , .classic-nav.up #classic_menu > li > a:hover {
    transform: translateY(-3px);
    transition: all .2s;
}

.primary-nav.up #primary_menu > li > a .nav-link-item , .sec-nav.up #sec_menu > li > a .nav-link-item , .classic-nav.up #classic_menu > li > a .nav-link-item {
    position: relative;
}

.primary-nav.bold #primary_menu > li > a .nav-link-item:after , .sec-nav.bold #sec_menu > li > a .nav-link-item:after , .classic-nav.bold #classic_menu > li > a .nav-link-item:after{
    content: attr(text-data);
    position: absolute;
    opacity: 1;
    font-weight: 600;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, 15%, 0);
    -webkit-transform: translate3d(0, 15%, 0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    pointer-events: none;
}

.primary-nav.bold #primary_menu > li > a:hover .nav-link-item:after , .sec-nav.bold #sec_menu > li > a:hover .nav-link-item:after
, .classic-nav.bold #classic_menu > li > a:hover .nav-link-item:after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: all;
}

.primary-nav.bold #primary_menu > li > a:hover .nav_title , .primary-nav.bold #primary_menu > li > a:hover i , .sec-nav.bold #sec_menu > li > a:hover .nav_title , .sec-nav.bold #sec_menu > li > a:hover i
, .classic-nav.bold #classic_menu > li > a:hover .nav_title , .classic-nav.bold #classic_menu > li > a:hover i{
    opacity: 0;
    transition: opacity 0.1s;
}

.primary-nav li ul li , .sec-nav li ul li {
    width: 100%;
}

.primary-nav li ul li a , .sec-nav li ul li a {
    display: flex;
    color: #474747;
    font-size: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
}

.primary-nav li .drop_icon , .sec-nav li .drop_icon{
    transition: all .1s;
}

.primary-nav li:hover .drop_icon , .sec-nav li:hover .drop_icon{
    transform: rotate(180deg);
    transition: all .1s;
}

.classic-nav li ul {
    display: none;
}

.hb-logo {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.hb-logo-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hb-logo-box a {
    height: 54px;
    line-height: 0;
    display: flex;
}

.hb-logo-box img {
    height: inherit;
}

.hb-logo.left {
    justify-content: flex-start;
}

.hb-logo.right  {
    flex-direction: row-reverse;
}

.hb-logo.top {
    flex-direction: column;
}

.hb-logo.left-aligin {
    justify-content: flex-start;
}

.hb-logo.right-aligin {
    justify-content: flex-end;
}

.hb-logo-title.right-aligin {
    align-items: flex-end;
}

.hb-logo-title.left-aligin {
    align-items: flex-start;
}

.hb-logo-title.center-aligin {
    align-items: center;
}

.hb-logo.top.left-aligin {
    align-items: flex-start;
}

.hb-logo.top.center-aligin {
    align-items: center;
}

.hb-logo.top.right-aligin {
    align-items: flex-end;
}

.hb-logo-title .des {
    margin-top: 3px;
}

.hb-logo.right .hb-logo-title {
    margin-right: 15px;
}

.hb-logo.left .hb-logo-title {
    margin-left: 15px;
}

.hb-logo.no-logo {
    justify-content: center;
}

.hb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

.hb-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    background-color: #092dff;
    border-radius: 5px;
    color: #ffffff;
}

.hb-btn a i {
    margin-right: 3px;
}

.hb-btn a:hover {
    background-color: #636bff;
    transition: all .2s;
}

.hb-html.hb-html-content {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.hb-html.hb-html-content > * {
    margin: 0;
}

.hb_dark.hb_dark_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
}

.hb_dark_inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
}

.hb_dark_inner .hb-sun-icon {
    line-height: 1;
    cursor: pointer;
}

.hb_dark_inner .hb-moon-icon {
    position: absolute;
    line-height: 1;
    bottom: -20px;
    cursor: pointer;
}

 /**
 * 经典模式外观
 */
.cls-content {
    background-color: #ffffff;
    display: inline-block;
    width: 100%;
}

body.classic .wid-box {
    background-color: transparent;
}

body.classic .box {
    background: transparent;
    box-shadow: none;
}

.home-classic {
    box-shadow: 0px 7px 20px 1px #d7ceff30;
}

 /**
 * 经典模式导航
 */

body.classic .site {
    margin-top: 60px;
}

.classic-header {
    width: 100%;
    margin: 0 auto;
    height: 72px;
}

.classic-header-bg {
    display: flex;
    height: inherit;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    z-index: 999;
}

.classic-header-bg .header-bg-inner {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.classic-header-bg.uk-sticky-fixed {
    border-radius: 0px !important;
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    background: rgb(255 255 255 / 80%);
    transition: 100ms;
    box-shadow: 0px 7px 20px 1px #d7ceff30;
}

.logo-area {
    height: inherit;
    display: flex;
    align-items: center;
}

.classic-logo h4 {
    margin: 0;
    font-size: 18px;
    color: #2d2e3c;
}

.classic-logo span.des {
    font-size: 12px;
    color: #828398;
}

.classic-logo a img {
    height: 42px;
}

.classic-header .center-area {
    height: 100%;
    flex: 1;
}

.classic-nav {
    display: flex;
    height: 100%;
}

.classic-nav ul {
    display: flex;
    height: 100%;
}

.classic-nav ul li {
    display: flex;
}

.classic-nav ul li a {
    display: flex;
    padding: 0 8px;
}

 /**
 * 经典模式banner
 */
 div#primary {
    display: inline-block;
    width: 100%;
}

.cls-banner {
    height: 200px;
    position: relative;
}

.cls-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cls-banner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(53 60 172 / 23%);
    top: 0;
    left: 0;
    display: block;
}

.cls-banner-info {
    position: absolute;
    right: 40px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cls-banner-info .info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 13px;
}

.cls-banner-info .info .name {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
}

.cls-banner-info .info .des {
    font-size: 13px;
    color: #dad5ff;
}

.cls-banner-info .ava {
    display: flex;
}

.cls-banner-info .ava img {
    width: 64px;
    border-radius: 10px;
}

 /**
 * 小工具样式
 */

.left-widget , .right-widget {
    max-width: 320px;
    width: 100%;
}

.pix-gg-banner {
    width: 100%;
}

.pix-gg-banner .pix-gg-image {
    width: 100%;
}

.pix-gg-banner .pix-gg-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.pix-icon-grid-box {
    display: grid !important;
    gap: 12px;
}

.pix-icon-col-3 { grid-template-columns: repeat(3, 1fr) !important; }
.pix-icon-col-4 { grid-template-columns: repeat(4, 1fr) !important; }

.pix-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 12px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.pix-icon-wrap {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
    border-radius: 8px;
}

.pix-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.pix-icon-wrap i {
    font-size: 18px;
}

.pix-icon-wrap:hover {
    opacity: 0.8;
    transition: opacity 0.2s;
}

.pix-icon-title {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.3;
}

/* 文章列表小工具 */
.pix-post-list-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pix-post-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pix-post-item .pix-post-thumb {
    width: 70px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.pix-post-item .pix-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pix-post-item .pix-post-info {
    flex: 1;
    min-width: 0;
}

.pix-post-item .pix-post-title {
    display: block;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pix-post-item .pix-post-title:hover {
    color: #2b6aff;
}

.pix-post-meta {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
    color: #999;
}

.pix-post-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pix-post-meta i {
    font-size: 12px;
}

/* 首个大图样式 */
.pix-post-featured {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.pix-post-featured .pix-post-thumb img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.pix-post-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 15px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.pix-post-overlay .pix-post-title {
    color: #fff;
    font-size: 15px;
    margin-bottom: 6px;
}

.pix-post-overlay .pix-post-meta {
    color: rgba(255,255,255,0.8);
}

/* 纯文本样式 */
.pix-post-text-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    width: 100%;
    overflow: hidden;
}

.pix-post-text-item:last-child {
    border-bottom: none;
}

.pix-post-text-item .pix-post-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
}

.pix-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.pix-top-label {
    font-size: 10px;
    padding: 2px 8px 2px 6px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.pix-top-label.top-1 {
    background: linear-gradient(90deg, #ff4343 0%, #ff9900 100%);
}

.pix-top-label.top-2 {
    background: linear-gradient(90deg, #84c1ff 0%, #738fff 100%);
}

.pix-post-text-item .pix-post-title:hover {
    color: #007bff;
}

/* 分类推荐小工具 */
.pix-cat-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pix-cat-tag-mode .pix-cat-box {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.pix-cat-banner-item {
    display: block;
    position: relative;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
}

.pix-cat-banner-item .pix-cat-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.pix-cat-banner-item:hover .pix-cat-banner img {
    transform: scale(1.05);
}

.pix-cat-banner-item .pix-cat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 15px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.pix-cat-banner-item .pix-cat-name {
    color: #fff;
    font-size: 16px;
    margin: 0 0 4px;
}

.pix-cat-banner-item .pix-cat-count {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
}

.pix-cat-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #e8efff;
    border-radius: 20px;
    text-decoration: none;
    color: #2272ff;
    transition: all 0.2s;
    font-size: 13px;
}

.pix-cat-tag-item:hover {
    background: #e9f2ff;
    color: #007bff;
}

.pix-cat-tag-item i {
    font-size: 14px;
    color: #007bff;
}

.pix-cat-tag-item .pix-cat-count {
    font-size: 12px;
    color: #2272ff;
}

.pix-cat-tag-item:hover i {
    color: #007bff;
}

.pix-cat-tag-item.tag-red {
    background: #ffece6;
    color: #ff5c4c;
}

.pix-cat-tag-item.tag-red:hover {
    background: #fff5f5;
    color: #ff7263;
}

.pix-cat-tag-item.tag-red i {
    color: #ff7263;
}

.pix-cat-tag-item.tag-red:hover i {
    color: #ff7263;
}

.pix-cat-tag-item.tag-red .pix-cat-count {
    font-size: 12px;
    color: #ff5c4c;
}

/* 列表样式覆盖 wid-item */
.pix-post-list-box.wid-item {
    display: flex;
    flex-direction: column;
}

/* 用户信息小工具 */
.pix-user-box {
    padding: 0;
}

.pix-user-logged {
    text-align: center;
    width: 100%;
}

.pix-user-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    text-align: left;
}

.pix-user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

.pix-user-meta {
    flex: 1;
}

.pix-user-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.pix-user-badges {
    display: flex;
    gap: 6px;
}

.pix-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 3px 8px;
    background: #fff7e1;
    color: #8B4513;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid #ffd0af;
}

.pix-vip-badge img {
    width: 14px;
    height: 14px;
}

.pix-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
}

.pix-level-badge img {
    height: 18px;
}

.pix-user-stats {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    border-radius: 12px;
}

.pix-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    background: #e8ebff;
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
}

a.pix-stat-item:hover {
    opacity: 0.85;
}

.pix-stat-item i {
    font-size: 16px;
    color: #767CA6;
    line-height: 1;
}

.pix-stat-num {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pix-stat-val {
    font-size: 14px;
    font-weight: 600;
    color: #767CA6;
}

.pix-stat-label {
    font-size: 11px;
    color: #767CA6;
}

.pix-user-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.pix-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

a.pix-action-home {
    background: transparent;
    color: #818cbd;
    border: 1px solid #818cbd;
}

.pix-action-home:hover {
    background: #e8efff;
}

a.pix-action-center {
    background: transparent;
    color: #818cbd;
    border: 1px solid #818cbd;
}

.pix-action-center:hover {
    background: #e8e1ff;
}

/* 评论小工具 */
.pix-comment-widget {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pix-comment-empty {
    text-align: center;
    color: #999;
    padding: 20px 0;
    font-size: 13px;
}

.pix-comment-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
}

.pix-comment-item:hover .pix-comment-content {
    color: #3862b7;
}

.pix-comment-item:last-child {
    border-bottom: none;
}

.pix-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 12px;
}

.pix-comment-body {
    flex: 1;
    min-width: 0;
}

.pix-comment-meta {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 4px;
}

.pix-comment-author {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pix-comment-time {
    font-size: 12px;
    color: #999;
}

.pix-comment-likes {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #999;
    margin-left: auto;
}

.pix-comment-likes i {
    font-size: 14px;
}

.pix-comment-content {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* 图片画廊小工具 */
.pix-gallery-widget {
    padding: 0;
}

.pix-gallery-empty {
    text-align: center;
    color: #999;
    padding: 20px 0;
    font-size: 13px;
}

.pix-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.pix-gallery-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
}

.pix-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.pix-gallery-item:hover img {
    transform: scale(1.05);
}

/* 签到小工具 */
.pix-sign-widget {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pix-sign-widget.wid-item {
    display: flex;
    flex-direction: column;
}

.pix-sign-placeholder {
    right: -8px;
    bottom: -9px;
    position: absolute;
    z-index: 0;
}

.pix-sign-placeholder img {
    height: 52px;
    opacity: 0.5;
    filter: blur(0.8px);
}

.pix-sign-header {
    background: linear-gradient(45deg, #fff6dbab, #ffd1c399);
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #ffddc3;
}

.pix-sign-btn-box {
    flex-shrink: 1;
    width: 100%;
    z-index: 1;
}

a.pix-sign-btn , .pix-sign-btn-box .user-has-sign-btn {
    color: #dd4d00;
    border-radius: 20px;
    font-size: 15px;
    text-decoration: none;
    transition: opacity 0.2s;
    display: flex;
    gap: 2px;
    width: 100%;
    padding: 12px 16px;
    justify-content: center;
}

.pix-sign-btn-box .user-has-sign-btn {
    background: transparent;
    color: #c98f71;
}

.pix-sign-btn-disabled {
    color: #c98f71;
    border-radius: 20px;
    font-size: 15px;
    text-decoration: none;
    transition: opacity 0.2s;
    display: flex;
    gap: 2px;
    width: 100%;
    padding: 12px 16px;
    justify-content: center;
}

.pix-sign-tabs {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pix-sign-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    position: relative;
}

.pix-sign-tab.active {
    color: #f06f2b;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid #eda06a;
}

.pix-sign-rank-list {
    padding: 8px 0;
}

.pix-sign-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 15px 0;
}

.pix-sign-rank-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    gap: 8px;
}

.pix-sign-rank-num {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    border-radius: 3px;
}

.pix-sign-rank-num.rank-1 {
    background: linear-gradient(135deg, #ff6b6b, #ffa500);
    color: #fff;
}

.pix-sign-rank-num.rank-2 {
    background: linear-gradient(135deg, #f0a500, #ffcc00);
    color: #fff;
}

.pix-sign-rank-num.rank-3 {
    background: linear-gradient(135deg, #4a90e2, #7bb3ff);
    color: #fff;
}

.pix-sign-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.pix-sign-name {
    flex: 1;
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pix-sign-time {
    font-size: 11px;
    color: #999;
}

.pix-sign-streak {
    font-size: 12px;
    color: #a65524;
    font-weight: 500;
}

.pix-sign-footer {
    text-align: center;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 5px;
}

a.pix-sign-more {
    font-size: 12px;
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.pix-sign-more:hover {
    color: #3862b7;
}

.pix-user-logged-out {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pix-login-tip {
    font-size: 14px;
    color: #677ac0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.pix-login-tip i {
    font-size: 16px;
    margin-right: 6px;
    color: #3d8cff;
}

.pix-user-logged-out .open-oauth-title {
    display: none;
}

.pix-user-logged-out .open-login-box {
    margin-top: 16px;
}

.pix-btn-login {
    display: grid;
    padding: 4px;
    background: transparent;
    color: #465cbd;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    width: 100%;
    border: 1px solid #d8ddf3;
    grid-auto-flow: column;
    align-items: center;
}

.pix-btn-login .login {
    display: flex;
    padding: 6px;
    justify-content: center;
    background: linear-gradient(91deg, #5a83ff, #aacdff);
    border-radius: 20px;
    color: #fff;
}

.pix-btn-login .register {
    display: flex;
    padding: 6px;
    justify-content: center;
    color: #33458f;
}

.pix-btn-login:hover {
    opacity: 0.9;
    color: #465cbd;
}

.pix-social-login {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.pix-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.pix-social-btn.qq {
    background: #12b7f5;
}

.pix-social-btn.wechat {
    background: #07c160;
}

.pix-social-btn.weibo {
    background: #ff6b6b;
}

/* 菜单小工具 */
.pix-menu-widget {
    padding: 0;
}

.pix-menu-group {
    margin-bottom: 16px;
    width: 100%;   
}

.pix-menu-group:last-child {
    margin-bottom: 0;
}

.pix-menu-group-title {
    font-size: 12px;
    color: #999;
    padding: 0 0 8px;
    font-weight: 500;
    margin-bottom: 4px;
}

.pix-menu-list {
    padding: 0;
}

.pix-menu-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pix-menu-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.pix-menu-list > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px;
    color: #333;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    border-radius: 8px;
}

.pix-menu-list > ul > li:last-child > a {
    border-bottom: none;
}

.pix-menu-list > ul > li > a i {
    margin-right: 6px;
}

.pix-menu-list li a:hover {
    color: #4b5fb4;
    background: #dde8ff;
}

.pix-menu-list li a:hover span.nav-link-item {
    transform: translateX(14px);
    transition: transform 0.2s;
}

.pix-menu-list li a span.nav-link-item {
    transition: transform 0.2s;
}

.pix-menu-list li.menu-item-has-children > a::after {
    content: '\ea6e';
    font-family: 'remixicon';
    font-size: 12px;
    color: #ccc;
    transition: transform 0.2s;
}

.pix-menu-list li.menu-item-has-children.open > a::after {
    transform: rotate(180deg);
}

.pix-menu-list .sub-menu {
    display: none;
    padding-left: 16px;
    background: #fafafa;
    border-radius: 6px;
    margin: 4px 0;
}

.pix-menu-list li.menu-item-has-children.open > .sub-menu {
    display: block;
}

.pix-menu-list .sub-menu li a {
    display: block;
    padding: 8px 12px;
    color: #666;
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.pix-menu-list .sub-menu li:last-child a {
    border-bottom: none;
}

.pix-menu-list .sub-menu li a:hover {
    color: #465cbd;
    background: #f0f0f0;
}

.pix-social-btn:hover {
    opacity: 0.8;
    color: #fff;
}

 /**
 * 文章样式
 */

.post-feature a {
    width: 100%;
    height: 220px;
    display: block;
}

.post-feature a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.post-title {
    margin-bottom: 10px;
}

.post-title .entry-title {
    margin: 0;
    display: flex;
}

.post-title a {
    font-size: 18px;
    color: #292654;
}

.post-content p {
    color: #606268;
}

.time-meta {
    font-size: 13px;
    color: #9498cd;
    margin-bottom: 8px;
}

.post-f-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.left.post-social-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.post-data-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.post-data-meta .item {
    display: flex;
    margin-right: 15px;
    font-size: 13px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    color: #8087b0;
}

.post-data-meta .item i {
    margin-right: 3px;
}

.post-item {
    border-bottom: 1px solid #f0f1ff;
    padding: 40px 0;
    margin: 0;
}

.pf-cat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    padding: 5px 8px;
    line-height: 1;
    background: #2a53ff;
    color: #fff;
    border-radius: 5px;
}

.posts_cat_nav {
    padding: 25px 40px;
    border-bottom: 1px solid #f4f4ff;
}

.posts_cat_nav ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}

.posts_cat_nav ul li {
    display: flex;
}

.posts_cat_nav ul li a {
    font-size: 13px;
    padding: 5px 10px;
    background: #efefff;
    margin-right: 8px;
    border-radius: 5px;
    color: #6d6aa9;
}

.posts_cat_nav ul li a.active {
    background-color: #1f39ff;
    color: #fff;
}

.pagenav-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin: 40px;
    height: 40px;
}

.page-input-box {
    display: flex;
    align-items: center;
}

.loadmore {
    font-size: 13px;
    padding: 8px 15px;
    background-color: #2250ff;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.loadmore-btn , .no-more {
    font-size: 13px;
    background-color: #3a4bff;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-more {
    background-color: #afadc9;
}

.pager-info {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}

.number-pager {
    flex: 1;
    background-color: #edeeff;
    height: inherit;
    border-radius: 8px;
    padding: 0 20px;
}

.load-more-box {
    height: inherit;
    width: 100px;
    margin-left: 10px;
}

.paged-number {
    font-size: 13px;
    color: #5c66a1;
}

.pager-info .go-top {
    margin-right: -6px;
    display: flex;
}

.pager-info .go-top a {
    display: flex;
    align-items: center;
    line-height: 1;
    color: #48449f;
    padding: 6px;
}

.pager-info .go-top a:hover {
    background-color: #c2cafc;
    border-radius: 5px;
    transition: all .2s;
}

.pager-info .pager-loader.uk-icon.uk-spinner {
    color: #8d8fea;
}

.pagination-box {
    align-items: stretch;
    margin: 40px;
    height: 40px;
}

.pagination-box .page-numbers {
    display: flex;
    font-size: 13px;
    justify-content: center;
}

.pagination-box .page-numbers li a , .pagination-box span.page-numbers.current {
    padding: 4px 12px;
    display: flex;
    background: #f4f7ff;
    border: 1px solid #e0e0ff;
    border-radius: 7px;
    height: 32px;
    min-width: 32px;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    color: #33386b;
}

.pagination-box .page-numbers li a:hover {
    background: #d0d8f2;
}

.pagination-box span.page-numbers.current {
    background: #364dff;
    color: #fff;
}

.pagination-box .page-numbers li a.prev.page-numbers , .pagination-box .page-numbers li a.next.page-numbers {
    padding: 5px 20px;
}

.pagination-box span.page-numbers.dots {
    margin: 0 10px;
    display: flex
;
    height: 100%;
    align-items: center;
}

.single-banner {
    height: 200px;
}

.single-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.single-wrap {
    padding: 25px 40px;
}

.single-title h2.entry-title {
    font-size: 18px;
    margin-bottom: 12px;
}

.single-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.single-top-meta .left {
    display: flex;
    align-items: center;
}

.single-top-meta .left .item {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-right: 15px;
    color: #7b78a1;
}

.single-top-meta .left .item i {
    margin-right: 3px;
}

.single-title {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ebf0fc;
}

.psf-cat {
    display: flex;
    font-size: 13px;
    line-height: 1;
    padding: 5px 8px;
    background-color: #d5dfff;
    border-radius: 3px;
    color: #676bac;
}

.single_footer_box {
    position: relative;
}

.single-footer.sticky .single_footer_box {
    position: fixed;
    bottom: 20px;
}

.post-footer-inner {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background: #f6f7ff;
    border-radius: 7px;
    border: 1px solid #ededff;
}

.single-footer.sticky .post-footer-inner {
    background: rgb(246 247 255 / 80%);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    box-shadow: 0 0 8px 0px #d2d4e094;
    transition: all .2s;
}

.post-footer-inner .left {
    display: flex;
}

.post-footer-inner .right {
    display: flex;
    column-gap: 20px;
}

.post-footer-inner .item {
    display: flex;
    align-items: center;
}

.post-footer-inner .item a {
    display: flex;
    align-items: center;
    color: #7d80a6;
}

.post-footer-inner .item span {
    font-size: 13px;
}

.post-footer-inner .item a i {
    margin-right: 3px;
    font-size: 18px;
}

.post-footer-inner .poster-btn {
    padding: 2px 15px;
    background: #eae7ff;
    border-radius: 5px;
    border: 1px solid #e1e1ff;
}

.post-footer-inner .item .poster-btn i {
    color: #4a49ff;
}

.post-footer-inner .item .like-btn[action="liked"] {
    color: #ff3c2e;
}

.post-footer-inner .item .collect-btn[action="coled"] {
    color: #5c6eff;
}

.post-footer-inner .item .like-btn[action="liked"] i , .post-footer-inner .item .collect-btn[action="coled"] i {
    animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.prev-next {
    margin: 20px 0;
}

.prev-next-inner {
    display: flex;
    column-gap: 10px;
}

.prev-next a {
    flex: 1;
    background: #f6f7ff;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 7px;
    border: 1px solid #ededff;
    color: #f6f7ff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.prev-next .title {
    z-index: 1;
}

.prev-next a.next-link {
    display: flex;
    align-items: flex-end;
}

.next-icon , .prev-icon {
    display: flex;
    margin-bottom: 5px;
    color: #b0afd6;
    z-index: 1;
}

.pn-thum {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    transform: scale(1.2);
}

.pn-thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.6) blur(5px);
    transition: filter .3s;
}

@keyframes icon-expand-animation {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    15% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6)
    }

    32% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }

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

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

.poster-modal {
    width: 380px;
    padding: 15px;
    border-radius: 5px;
}

.poster-canvas {
    border-radius: 5px;
    background: #f6f5ff;
}

.poster-canvas .poster-img {
    width: 100%;
    height: 400px;
    position: relative;
}

.poster-canvas .poster-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.poster-time {
    position: absolute;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f4f4a3;
    padding: 5px 8px;
    border-radius: 3px;
}

.poster-time span {
    font-size: 12px;
}

.poster-time b {
    font-size: 30px;
}

.poster-trim {
    padding: 15px 10px;
    font-size: 13px;
    color: #424242;
}

.poster-trim h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #27224e;
}

.poster-bottom {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px;
    border-top: 1px solid #efeeff;
    padding-bottom: 35px;
}

.poster-bottom .logo img {
    height: 52px;
}

.poster-bottom .qrcode img {
    height: 64px;
}

.share-tool {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #f6f4ff;
    border-radius: 50px;
    padding: 10px 20px;
    width: 200px;
    bottom: -23px;
    border: 1px solid #e2e0ff;
    display: flex;
    justify-content: space-around;
}

.share-tool a {
    color: #443c8a;
}

 /**
 * 收藏页面
 */

.collect-nav , .follow-nav {
    display: flex;
    width: 100%;
    padding: 30px 40px;
    justify-content: center;
    padding-top: 0;
}

.collect-nav a , .follow-nav a {
    padding: 4px 20px;
    font-size: 14px;
    color: #484d90;
    border-radius: 20px;
    margin-right: 10px;
    border: 1px solid #dfe1ff;
}

.collect-nav a.active , .follow-nav a.active{
    border: 1px solid #ddd;
    background: #e5e7ff;
    color: #343b9f;
}


 /**
 * 网格文章列表
 */

.collect-content {
    padding: 30px 40px;
}

.post-item.post-grid {
    padding: 0;
    border: none;
}

.post-item.post-grid .post-feature a {
    height: 160px;
}

.post-item.post-grid .entry-content {
    margin-top: 15px;
}

.post-item.post-grid .pf-cat {
    background: #f2f2ff;
    color: #5154d2;
}

.post-item.post-grid .post-title a {
    font-size: 16px;
}

 /**
 * 全局分页
 */
.ppo-pagenav {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    border-top: 1px solid #f0efff;
}

.ppo-pagenav a.page-numbers , .ppo-pagenav span.page-numbers.current {
    padding: 7px 12px;
    background: #d9dbe8;
    font-size: 15px;
    line-height: 1;
    border-radius: 5px;
    margin: 0 5px;
    color: #2e3778;
}

.ppo-pagenav span.page-numbers.current {
    background: #3f40ff;
    color: #ffffff;
}



 /**
 * 轮播图
 */
 .swiper {
    width: 100%;
    height: 700px;
  }

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 12px;
    color: #fff;
}

.swiper-slide a , .swiper-slide .no-url {
    display: block;
    height: 100%;
    width: 100%;
}

.swiper-slide a img , .swiper-slide .no-url img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-next {
    right: 30px;
    transform: translateX(75px);
}

.swiper-button-prev {
    left: 30px;
    transform: translateX(-75px);
}

.swiper-pagination.custom {
    opacity: 0;
}

.swiper-pagenav {
    width: 44px;
    background: #fff3;
    border-radius: 50%;
    opacity: 1;
    transition: all .3s;
}

.swiper-pagination.custom .swiper-pagination-bullet {
    background: #ffffff;
    border-radius: 20px;
}

.swiper-pagination.custom .swiper-pagination-bullet-active {
    background: #2d11ff;
    width: 18px;
    opacity: 1;
}



button.pix-btn {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    background: transparent;
    margin-right: 15px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}

button.pix-btn:hover {
    transition: all .2s;
}

button.pix-btn.moveup:hover {
    transform: translateY(-8px);
    transition: all .4s;
}

button.pix-btn.moveup {
    transition: all .4s;
}

button.pix-btn.slideh {   
    overflow: hidden;
    z-index: 1;
}

button.pix-btn.slideh:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #1c1c1c;
    transition: all 0.2s;
    z-index: -1;
}

button.pix-btn.slideh:hover:before {
    height: 100%;
    top: auto;
    bottom: 0;
    transition: all 0.2s;
}

button.pix-btn.slidew {   
    overflow: hidden;
    z-index: 1;
}

button.pix-btn.slidew:before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    background: #1c1c1c;
    transition: all 0.2s;
    z-index: -1;  
}

button.pix-btn.slidew:hover:before {
    width: 100%;
    left: 0;
    transition: all 0.2s;
}

button.pix-btn.slidet span:before {
    content: attr(text-data);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(120%);
    opacity: 0;
    transition: all .2s;
}

button.pix-btn.slidet span {
    position: relative;
}

button.pix-btn.slidet span > div {
    transition: all 0.2s;
    transform: translateY(0);
}

button.pix-btn.slidet:hover span:before {
    transform: translateY(0);
    opacity: 1;
    
}

button.pix-btn.slidet:hover span > div {
    transform: translateY(-120%);
    opacity: 0;
}

button.pix-btn.slidet:hover {
    transition: all .1s;
}

button.pix-btn.spread:hover {
    box-shadow: 0px 0px 0px 10px rgb(255 255 255 / 12%);
    transform: translateX(10px);
}

button.pix-btn.shadow:hover {
    box-shadow: none;
    transition: all .45s;
}

button.pix-btn i {
    margin-left: 5px;
}


 /**
 * 主体
 */

.b-nav-box .site {
    margin-top: 40px;
} 

.custom-box .home-box {
    margin-top: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.pix-content {
    width: 100%;
    margin: 0 auto;
}

.site-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-icp a {
    color: #4c4e74f2;
}

.footer-widget-area {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.custom-box .home-blog-content.box {
    border-radius: 0px;
}

/**
 * 评论
 */

h2.comments-title {
    font-size: 16px;
    color: #343163;
    display: flex;
    align-items: center;
    padding: 15px 0;
} 

h2.comments-title i {
    margin-right: 8px;
    line-height: 1;
    font-size: 18px;
}

h2.comments-title span a {
    color: #474176;
    font-weight: 600;
} 

.content_comments {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.edit_comment_info {
    margin-right: 8px;
}

.comarea {
    width: 100%;
    display: flex;
}

a.edit-profile {
    display: flex;
}

img.v-avatar.avatar.avatar-50 {
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #e6e8ff;
}

.comarea textarea#comment {
    height: 50px;
    resize: none;
    background: #f6f7ff;
    padding: 8px 10px;
    border-color: #d9d3ff;
    outline: none;
    line-height: 32px;
    font-size: 15px;
    border-radius: 5px;
}

textarea#comment:focus {
    border-color: #092dff;
}

textarea#comment {
    caret-color: #092dff; /* 设置光标颜色为红色 */
}

.com_push {
    display: flex;
    justify-content: flex-end;
}

input#push_comment , a.cancel-comment-textarea {
    background: #3a42ff;
    border-radius: 7px;
    color: #fff;
    padding: 10px 15px;
    font-size: 15px;
    border: none;
    cursor: pointer;
}

a.cancel-comment-textarea {
    margin-right: 5px;
    background: #9a9bb9;
    line-height: 1;
}

.com-footer {
    display: none;
    margin-bottom: 1rem;
}

.commentshow {
    margin-top: 40px;
}

.comment-list .profile a {
    width: 40px;
    height: 40px;
    display: flex;
}

.comment-list .profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.comment-list .comment_body {
    display: flex; 
    margin-bottom: 1.5rem;
}

.comment-list .com_right {
    width: 100%;
    margin-left: 10px;
}

.comment-list .com_right .commeta {
    display: flex;
    justify-content: space-between;
}

.comment-list .com_right .commeta .left {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.comment-list .com_right .footer-meta time {
    font-size: 12px;
    color: #9ca0ca;
    line-height: 1;
}

.comment-list .com_right .footer-meta time span {
    background: #3a42ff;
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
    transform: scale(.9);
    display: inline-block;
    margin-left: 3px;
}

.comment-list .com_right .footer-meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #9ca0ca;
    margin-top: 7px;
    justify-content: space-between;
}

.comment-list .com_right .footer-meta .left , .comment-list .com_right .footer-meta .right  {
    display: flex;
}

.comment-list .com_right .footer-meta .com-location {
    font-size: 12px;
    display: flex;
    margin-left: 5px;
    line-height: 1;
}

.comment-list .com_right .footer-meta .like-count {
    margin-right: 3px;
}

.comment-reply-link {
    color: #9ca0ca;
    display: flex;
    column-gap: 3px;
}

.comment-reply-link:hover {
    color: #3a42ff;
}

.comment-list .com_right .commeta .left .author {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    margin-right: 5px;
}

.comment-list .com_right .commeta .left .author a {
    color: #535582;
}

.comment-list .com_right .commeta .right {
    display: flex;
    align-items: center;
}

.comment-list .com_right .commeta .right a.comment-reply-link {
    display: flex;
    line-height: 1;
    color: #9da0b7;
}

.comment-list .com_right .body p {
    margin: 0;
}

.comment-list li {
    margin-bottom: 1rem;
    border-bottom: 1px solid #eeeffe;
}

.comment-list li:last-child {
    border: none;
}

.comments-area {
    padding-bottom: 40px;
}

.cancel-comment-reply {
    display: flex;
}

a#cancel-comment-reply-link {
    margin-right: 5px;
    background: #9a9bb9;
    line-height: 1;
    border-radius: 5px;
    color: #fff;
    padding: 10px 20px;
    font-size: 15px;
}

.comment-respond {
    margin-top: 1rem;
}

.respond-reply img.v-avatar.avatar.avatar-50 {
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
}

.respond-reply a.edit-profile {
    width: 32px;
}

.respond-reply .comarea textarea#comment {
    height: 42px;
    line-height: 24px;
}

.respond-reply.comment-respond {
    padding-left: 50px;
}

.comment-list li ul {
    margin-left: 50px;
}

.comment-list li ul li {
    padding: 0;
}

.comment-list li ul li .profile a , .comment-list li ul li .profile img {
    width: 32px;
    height: 32px;
}

.comment-list li ul li .respond-reply.comment-respond {
    padding-left: 0;
}

.comment-list li ul li {
    border: none;
}

.comment-list li ul li .children {
    margin: 0;
}

a.parents_at {
    font-size: 14px;
    color: #564be8;
}

#comment-author-info {
    display: flex;
    flex-direction: row;
    column-gap: 7px;
}

#comment-author-info input {
    padding: 8px;
    border-radius: 5px;
    width: 100%;
    background: #f6f7ff;
    border-color: #d9d3ff;
    font-size: 14px;
    outline: none;
    height: 100%;
}

div#ava-content {
    margin-bottom: 10px;
}

.visitor-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #474176;
}

.visitor-title a {
    color: #5447fc;
}

#comment-author-info-wrap {
    display: none;
}

nav.commentnav {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
}

nav.commentnav a , nav.commentnav span {
    padding: 3px 10px;
    background: #d9dbe8;
    margin: 0 2px;
    font-size: 15px;
    color: #7a78ab;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.commentnav span.page-numbers.current {
    background: #3f40ff;
    color: #ffffff;
}

.commentmore {
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

a.commentmore-btn {
    font-size: 14px;
    padding: 8px 20px;
    border: 2px solid #4c50ff;
    border-radius: 5px;
    color: #2d38fa;
}

.com-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.emoji-box , .img-box-drop {
    width: 320px;
    border-radius: 5px;
}

.emoji-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 6px;
    justify-content: center;
}

a.add-smily {
    width: 35px;
    height: 35px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    margin-bottom: 4px;
}

a.add-smily:hover {
    background: #eeecff;
    transition: all .2s;
}

img.wp-smiley {
    width: 24px;
    height: auto;
    line-height: 1;
    margin: 0 2px;
}

.com-footer-btn {
    font-size: 18px;
    display: flex;
    color: #4d4e86;
    width: 32px;
    height: 32px;
    justify-content: center;
    border-radius: 5px;
    margin-right: 5px;
    align-items: center;
    line-height: 1;
}

.com-footer-btn:hover {
    background: #f2efff;
    transition: all .2s;
    color: #092dff;
}

.comment-tools {
    display: flex;
    align-items: center;
}

.img-box-drop , .emoji-box , .code-box-drop {
    position: absolute;
    left: -20px;
    top: 40px;
    padding: 0px;
    background: #fff;
    border-radius: 8px;
    display: none;
    box-shadow: 0px 7px 20px 1px #bcb4e07d;
    font-size: 14px;  
}

.emoji-box {
    padding: 10px;
}

.com-img-box , .com-emoji-box , .com-code-box {
    position: relative;
}

.comt-upload-box > div {
    margin: 0;
}

.comt-input-box {
    padding: 20px 0;
    cursor: pointer;
    border: 2px dashed rgb(194, 205, 218);
    background: #f6f7ff;
    border-radius: 10px;
}

.comt-upload-icon {
    margin-bottom: 10px;
}

.comt-upload-icon i {
    font-size: 32px;
    color: #294fff;
}

.comt-input-box .fileuploader-input-inner {
    text-align: center;
}

.comt-input-box span.or {
    padding: 0 2px;
}

span.comt-up-btn {
    text-decoration: underline;
    color: #3230fd;
}

span.comt-img-wrap {
    display: flex;
    column-gap: 5px;
    margin: 8px 0px;
}

.comt-img-wrap .fancy-box {
    height: 140px;
    width: 100%;
    max-width: 60%;
}

.user-index .comt-img-wrap {
    display: inline-block;
    margin: 0;
}

.user-index .comt-img-wrap .fancy-box {
    height: auto;
    margin: 0;
    width: auto;
}

.comt-img-wrap .fancy-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.comt-code-wrap {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

textarea.form-code.input-textarea {
    width: 240px;
    resize: none;
    font-size: 12px;
    border-radius: 5px;
    outline: none;
    padding: 5px;
    border-color: #d8dbff;
    background: #f5f5ff;
}

.form-code:focus {
    border-color:#092dff;
}

.comt-code-wrap span {
    margin-bottom: 6px;
}

a.insert-code {
    width: 100%;
    text-align: center;
    background: #3c2aff;
    color: #fff;
    border-radius: 5px;
    padding: 8px 10px;
    margin-top: 10px;
}


 /**
 * 片刻
 */
.mo-form-main {
    padding: 40px;
}

input#moment-title {
    width: 100%;
    border: 0;
    padding: 8px;
    font-size: 14px;
    outline: none;
    border-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

textarea#moment_content {
    resize: none;
    padding: 8px 10px;
    font-size: 14px;
    outline: none;
    height: 40px;
    border: none;
    background: transparent;
}

.mo-title-form {
    border-bottom: 1px solid #e3dcff;
}

.mo-form-within {
    border: 1px solid #e3dcff;
    border-radius: 8px;
    background: #f5f5ff;
}

.mo-form-within:focus-within {
    border: 1px solid #092dff;
}

.mo-content-form {
    display: flex;
    background: #f5f5ff;
    border-radius: 0 0 8px 8px;
}

.mo-tool-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
}

.left-tool {
    display: flex;
    align-items: center;
}

.left-tool a.mo-btn , .right-tool a.mo-btn {
    margin-right: 18px;
    color: #7b76be;
    font-size: 17px;
}

.left-tool a.mo-btn:hover {
    color: #092dff;
}

span.fenge {
    margin-right: 18px;
    color: #9a9ad7;
}

.right-tool {
    display: flex;
    align-items: center;
}

.right-tool a.mo-btn {
    display: flex;
    align-items: center;
    color: #2c3186;
    background: #e8e9ff;
    padding: 0 7px;
    border-radius: 3px;
    font-size: 15px;
    margin-right: 5px;
}

.right-tool a.mo-btn i {
    margin-right: 3px;
}

.mo-toggle-box {
    display: none;
    margin-top: 15px;
    background: #f9fafc;
    border-radius: 6px;
    padding: 10px 15px;
    position: relative;
}

.mo-num {
    font-size: 14px;
    color: #6a6a9b;
}

a.mo-btn.active {
    color: #092dff;
}

.bottom-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 15px;
}

a.mo-tag-btn , a.mo-cir-btn {
    font-size: 13px;
    display: flex;
    align-items: center;
    padding: 3px 12px;
    background: #f1f3ff;
    color: #7287cb;
    border-radius: 20px;
    margin-right: 5px;
    border: 1px solid #e4e5ff;
}

a.mo-cir-btn:hover , a.mo-tag-btn:hover {
    border-color: #8f9fff;
    transition: all .2s;
}

a.mo-tag-btn i , .mo-cir-btn i{
    line-height: 1;
    border-radius: 20px;
    color: #2351ff;
    font-size: 14px;
    margin-right: 3px;
}

a.mo-cir-btn.active {
    border-color: #4e5aff;
}

.mo-cir-btn i {
    margin-right: 0px;
}

.mo-cir-btn .cat-thum {
    display: flex;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    justify-content: center;
    align-items: center;
}

.mo-cir-btn .cat-thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

a.push-mo-btn {
    font-size: 14px;
    background: #3152ff;
    color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    min-width: 78px;
    height: 32px;
    align-items: center;
}

.cancel-toggle-box {
    position: absolute;
    right: 0;
    top: 0;
    color: #6a69a6;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    background: #e2dfff;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.cancel-toggle-box i {
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cancel-toggle-box i:hover {
    color: #003dff;
}

.push-box {
    display: flex;
    align-items: center;
}

a.mo-setting {
    font-size: 20px;
    color: #9ba0d2;
    margin-right: 12px;
}

.mo-cat {
    display: flex;
    align-items: center;
}

/* ul.mo-switcher.switcher-tab {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.mo-switcher li {
    margin-right: 5px;
}

.mo-switcher li a {
    font-size: 14px;
    color: #5e5a92;
    padding: 5px;
}

.mo-switcher li.uk-active a {
    border-bottom: 2px solid #092dff;
    color: #092dff;
} */

.video-upload-btn {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 10px 15px;
    background: #edecfa;
    width: fit-content;
    border-radius: 5px;
    cursor: pointer;
    color: #645e8b;
    border: 2px dashed #cccaf0;
    margin-bottom: 5px;
    margin-left: -16px;
}

.video-upload-btn i {
    font-size: 18px;
    margin-right: 5px;
}

input.video_mo_input {
    padding: 6px 8px;
    width: 75%;
    background: #f5f5ff;
    border-radius: 5px;
    border-color: #d6d6ff;
    outline: none;
    font-size: 15px;
    color: #5e5e5e;
}

.mo-toggle-box .fileuploader {
    margin: 0;
}

span.mo-tips {
    font-size: 13px;
    color: #76769f;
    display: flex;
    align-items: center;
}

span.mo-tips i {
    font-size: 14px;
    color: #7c83ff;
    margin-right: 3px;
}

.video-poster-inner {
    width: 180px;
    height: 100px;
    margin-top: 15px;
}

.video-poster-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

#mo-video-poster {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #6b75a9;
    cursor: pointer;
    vertical-align: top;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-right: 12px;
}

.video-poster {
    padding: 0 16px;
}

button.edit-poster {
    color: #6b75a9;
}

input#upload-movideo-poster {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    z-index: 2;
}

button.edit-poster i {
    font-size: 20px;
}

.mo-card-content {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.mo-card-content input {
    width: 80%;
    border-radius: 5px;
    font-size: 14px;
    padding: 6px 8px;
    outline: none;
    border-color: #d6dbff;
    background: #f5f5ff;
}

.mo-card-content .push_card {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: auto;
    background: #6672b1;
    color: #fff;
    border-radius: 5px;
    margin-left: 8px;
}

.mo-smile-drop {
    border-radius: 8px;
    padding: 10px;
    width: 320px;
    box-shadow: 0px 7px 20px 1px #9289bd30;
    border: 1px solid #eee8ff;
}

.mo-smile-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 6px;
    justify-content: center;
}

.mo-link-inner {
    display: flex;
    flex-direction: column;
}

.mo-link-inner input {
    font-size: 14px;
    padding: 5px 8px;
    margin-bottom: 5px;
    border-color: #e2ddff;
    background: #f5f5ff;
    outline: none;
}

.mo-link-inner a {
    font-size: 14px;
    text-align: center;
    padding: 7px 8px;
    background: #6672b1;
    color: #fff;
    border-radius: 5px;
}

.mo-link-drop {
    border-radius: 8px;
    padding: 10px;
    width: 240px;
    box-shadow: 0px 7px 20px 1px #9289bd30;
    border: 1px solid #eee8ff;
}

.mo-cat-drop {
    padding: 15px;
    width: 340px;
    border-radius: 8px;
    box-shadow: 0px 7px 20px 1px #9289bd30;
    border: 1px solid #eee8ff;
}

.moment-tags-nav {
    display: flex;
    padding: 15px 5px;
    flex-direction: row;
    margin-bottom: 10px;
    border-bottom: 1px solid #f3f3ff;
    overflow: hidden;
}

.moment-tags-nav li {
    cursor: pointer;
}

.moment-tags-item {
    font-size: 15px;
    color: #484848;
    display: flex;
    flex: 1 0 auto;
    margin-right: 18px;
    user-select: none;
}

span.moment-tags-item.active {
    color: #242cff;
}

.mo-tag-s {
    display: flex;
    position: relative;
    align-items: center;
}

.mo-tag-s i {
    position: absolute;
    left: 8px;
}

.mo-tag-s input {
    width: 100%;
    font-size: 14px;
    padding: 7px;
    border-radius: 7px;
    background: #f1efff;
    border-color: #ebebff;
    outline: none;
    padding-left: 28px;
}

.mo-circle-content {
    height: 250px;
    overflow-y: auto;
}

.mo-circle-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}

.mo-circle-item:hover {
    background-color: #f0f2ff;
}

.mo-circle-content {
    display: flex;
    flex-direction: column;
}

.mo-circle-item .left {
    width: 42px;
    height: 42px;
}

.mo-circle-item .right {
    margin-left: 8px;
}

.mo-circle-item .title {
    font-size: 14px;
}

.mo-circle-item .count-mo {
    font-size: 12px;
    color: #9391b7;
}

.empty-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.empty-content img {
    height: 120px;
}


/* input & items size */
.fileuploader-theme-thumbnails .fileuploader-thumbnails-input,
.fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item {
    position: relative;
	display: inline-block;
    margin: 16px 0 0 10px;
    padding: 0;
	vertical-align: top;
    
    width: 20%;
    width: calc(20% - 10px);
    padding-top: 18%;
}

.fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner,
.fileuploader-theme-thumbnails .fileuploader-item-inner {
    position: absolute;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;  
    border-radius: 6px;
}

/* input */
.fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner {
    background: #e6ebf4;
    border: 2px dashed #92a7bf;
    text-align: center;
    font-size: 30px;
    color: #90a0bc;
	cursor: pointer;
    opacity: 0.5;
	-webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
	-webkit-transition: all 0.2s ease;
	        transition: all 0.2s ease;
}
.fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner:hover {
	opacity: 1;
}
.fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner:active,
.fileuploader-theme-thumbnails .fileuploader-dragging .fileuploader-thumbnails-input-inner {
	background: #f6f6fb;
}
.fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner i {
    position: absolute;
    font-style: normal;
    left: 0;
    top: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

/* items */
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-items-list {
	margin: -16px 0 0 -16px;
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item {
	border-bottom: 0;
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item:last-child {
    margin-bottom: 0;
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item-inner {
	background: rgba(0, 0, 0, 0.02);
	overflow: hidden;
	z-index: 1;
}
.fileuploader-theme-thumbnails .fileuploader-item-inner .thumbnail-holder,
.fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item-image {
    width: 100%;
	height: 100%;
}
.fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item-image {
	position: relative;
    background: #ffff;
	text-align: center;
	overflow: hidden;
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item .fileuploader-item-icon {
    background-size: 30%;   
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item .fileuploader-item-icon i {
    display: none;
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item .fileuploader-action-popup {
    border-radius: 6px;
    z-index: 1;
}
.fileuploader-theme-thumbnails .fileuploader-item .type-holder {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    z-index: 2;
}
.fileuploader-theme-thumbnails .fileuploader-item .actions-holder {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    height: 20px;
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item .fileuploader-action {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item .fileuploader-action + .fileuploader-action {
    margin-left: 8px;
}
.fileuploader-theme-thumbnails .fileuploader-item .content-holder {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
       background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    z-index: 2;
}
.fileuploader-theme-thumbnails .fileuploader-item .content-holder h5 {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fileuploader-theme-thumbnails .fileuploader-item .content-holder span {
    display: block;
    font-size: 11px;   
    color: rgba(255, 255, 255, 0.8);
}

/* uploading */
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item.upload-failed .fileuploader-item-inner {
	background: #db6868;
}
.fileuploader-theme-thumbnails .fileuploader-item .progress-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background: #fff;
    display: none;
    z-index: 1;
}
.fileuploader-theme-thumbnails .fileuploader-item .progress-holder .fileuploader-progressbar {
	position: relative;
    top: 50%;
	width: 80%;
    height: 6px;
	margin: 0 auto;
    margin-top: -6px;
	background: #dde4f6;
}

/* sorter */
.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-item.sorting {
    padding-top: 0;
    margin: 0;
}
.fileuploader-theme-thumbnails .fileuploader-sorter-placeholder {
    background: #f0f3f9;
    border-radius: 6px;
}

/* responsive */
@media all and (max-width: 768px) {
    .fileuploader-theme-thumbnails .fileuploader-thumbnails-input,
    .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item {
        width: 33.33333333%;
        width: calc(33.33333333% - 16px);
        padding-top: 30%;
    }
}
@media all and (max-width: 480px) {
    .fileuploader-theme-thumbnails .fileuploader-thumbnails-input,
    .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item {
        width: 50%;
        width: calc(50% - 16px);
        padding-top: 40%;
    }
}

/* dragging state */
.fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner > * {
    -webkit-transition: 500ms cubic-bezier(0.17, 0.67, 0, 1.01);
            transition: 500ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.fileuploader-theme-dragdrop .fileuploader-input.fileuploader-dragging .fileuploader-input-inner > * {
	transform: translateY(18px);
	opacity: 0;
}
.fileuploader-theme-dragdrop .fileuploader-input.fileuploader-dragging .fileuploader-icon-main {
    transform: translateY(30px) scale(1.2);
	opacity: 0.6;
}
.fileuploader-theme-dragdrop .fileuploader-input.fileuploader-dragging .fileuploader-input-caption {
    transform: translateY(30px);
	opacity: 0.6;
}

/* moment loop */

.moment-single-inner {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: nowrap;
}

.moment-avatar {
    display: block;
    margin-right: 12px;
}

.moment-avatar a {
    width: 48px;
    height: 48px;
    display: block;
}

.moment-avatar a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.moment-content-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
}

.mo-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.mo-meta .nickname a {
    color: #31417e;
}

a.mo-cat {
    line-height: 1;
    font-size: 13px;
    color: #8283c1;
    padding: 4px 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

a.mo-cat:hover {
    background: #f1f1ff;
    color: #442fff;
    transition: all .2s;
}

a.mo-cat:hover i {
    color: #fff;
    background: #442fff;
    
}

a.mo-cat i {
    margin-right: 5px;
    background: #e8eaff;
    font-size: 12px;
    display: flex;
    padding: 2px;
    border-radius: 50%;
    transition: all .2s;
}

.mosub-meta .timeago {
    font-size: 13px;
    color: #9292bd;
}

.post-content.mos-content p {
    color: #3b3b3b;
    display: inline;
}

.post-content.mos-content .rm-toggle {
    font-size: 15px;
}

.post-content.mos-content .rm-toggle:hover {
    border-bottom: 1px solid #1e68ff;
    opacity: 0.8;
}

  /**
 * vip页面
 */

.vip-content {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

.vip-page {
    display: inline-block;
    width: 100%;
}

.vip-warp {
    position: relative;
}

body.custom .vip-warp {
    position: unset;
}

.vipbg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.vip-page-title {
    padding: 40px 0;
    margin-top: 40px;
}

.vip_item_wrap {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-direction: row;
    padding: 40px 0;
    column-gap: 15px;
}

.vip_show_item {
    width: 33.333%;
    display: flex;
    justify-content: flex-start;
    background: #fff;
    padding: 30px;
    flex: auto;
    border-radius: 12px;
    box-shadow: 0px 3px 8px rgb(218 220 238 / 29%);
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    transition: all .2s;
    padding-bottom: 140px;
}

.item_info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item_info .title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.item_info .title img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item_info .title .vip-icon {
    width: 24px;
    height: 24px;
    display: flex;
    margin-right: 5px;
}

.item_info .title h4 {
    margin: 0;
    font-weight: 600;
}

.item_info .des {
    font-size: 15px;
    color: #6a6f93;
}

.vip_show_item .vip-price {
    display: flex;
    align-items: baseline;
    padding: 20px 0;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid #efefff;
}

.vip-price h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    color: #3640ff;
    line-height: 1;
}

.vip-price span {
    margin-left: 4px;
    color: #6a6f93;
}

.vip-price span.unit {
    font-weight: 600;
    color: #3640ff;
    margin-right: 3px;
}

.limits-item {
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 5px 0;
    color: #474869;
}

.limits-item i {
    margin-right: 3px;
    color: #888eff;
    border-radius: 100%;
    font-size: 16px;
}

.limits-item.no {
    color: #c4c2d9;
}

.limits-item.no i {
    color: #dac8e9;
}

.limits-item span.num {
    padding: 0 2px;
    color: #474bff;
}

.vip_show_item.hot {
    background: linear-gradient(220deg, #ffe9e9 10%, #ffffff 50%);
}

.vip_show_item.hot .vip_hot {
    position: absolute;
    right: 0;
    top: -12px;
    background: linear-gradient(220deg, #fe4242, #ffa585);
    padding: 8px 28px;
    color: #fff;
    font-size: 13px;
    border-radius: 30px;
    display: flex;
    border-bottom-right-radius: 0;
}

.vip_show_item.hot .vip_hot i {
    margin-right: 5px;
}

.vip_show_item:hover {
    transform: translateY(-10px);
    transition: all .2s;
}

.vip_buy {
    padding: 40px 0;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 20px;
}

a.vip_update {
    border-radius: 10px;
    color: #ddd;
    background: linear-gradient(90deg, #2344ff, #9eb3ff);
    padding: 10px;
    max-width: 200px;
    width: 100%;
    display: inline-block;
    color: #fff;
    transition: all .2s;
}

a.vip_update:hover {
    box-shadow: 4px 5px 0px rgb(47 79 255);
    transition: all .2s;
}

.vip-limits {
    display: block;
    width: 100%;
}

.vipmore:hover , .vipless:hover {
    color: #092dff;
}

a.vipmore , a.vipless {
    font-size: 14px;
    text-align: center;
    color: #8184c2;
    padding-top: 15px;
}

.vipmore i , .vipless i {
    vertical-align: bottom;
    margin-right: 2px;
}

span.price-n {
    margin-left: 15px;
    text-decoration: line-through;
    color: #c4c5ed;
    font-size: 20px;
}

.vip-qawrap {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 100px;
    box-shadow: 0px 3px 8px rgb(218 220 238 / 29%);
}

.qa-content {
    display: flex;
}

.qa-content .left {
    width: 40%;
    flex: 0 0 auto;
    padding: 15px;
}

.qa-content .right {
    width: 60%;
    flex: 0 0 auto;
    padding-left: 20px;
}

.qa-content .right .uk-accordion-title {
    background: linear-gradient(90deg, #eeebff, #f6f6ff);
    padding: 20px;
    border-radius: 7px;
    box-shadow: 0px 3px 8px rgb(218 220 238 / 29%);
}

.qa-content .right .uk-accordion-title span {
    display: flex;
    font-size: 18px;
    color: #343159;
}

.qa-content .right .uk-accordion-title span i {
    color: #4951e1;
    margin-right: 5px;
}

.qa-content .right .uk-accordion-content {
    padding: 0 20px;
    color: #6c7191;
}

.vip-pay-modal {
    border-radius: 10px;
    width: 800px;
    padding: 0;
    overflow: hidden;
}

.vip-pay-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 10px;
}

.vip-pay-box .left {
    width: 65%;
    flex: 1 0 auto;
}

.vip-pay-box .right {
    width: 35%;
    flex: 1 0 auto;
}

.vip-pay-box .header {
    padding: 20px;
    background-image: linear-gradient(135deg, #f5e1ff, #fcd3e3, #ffecc4);
    padding-bottom: 32px;
    border-radius: 10px 10px 0 0;
}

.vip-pay-box .user-info {
    display: flex;
    align-items: center;
}

.vip-pay-modal .avatar {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

.vip-pay-modal .avatar img {
    border-radius: 50%;
}

.vip-pay-modal .user-info .name {
    font-weight: 600;
    color: #785142;
    display: flex;
    flex-direction: column;
}

.vip-pay-modal .user-info .des {
    font-weight: 400;
    font-size: 13px;
    color: #987d68;
}

.vip-pay-tab {
    display: flex;
    justify-content: space-evenly;
    background-color: #fdf2dc;
    margin-top: -12px;
    border-radius: 15px 15px 0px 0px;
}

.vip-pay-tab li {
    flex: 1 0 auto;
    text-align: center;
}

.vip-pay-tab li.uk-active a {
    border-radius: 15px 15px 0px 0px;
    background-color: #fff;
}

.vip-pay-tab li a {
    width: 100%;
    padding: 18px 0;
    color: #4c251e;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.vip-pay-tab li.uk-active a h4 {
    font-size: 16px;
}

.vip-pay-tab li a h4 {
    margin: 0;
    font-size: 14px;
}

.vip-pay-tab .vip-icon {
    width: 20px;
    height: 20px;
    margin-right: 3px;
    line-height: 1;
}

.vip-pay-limits {
    background: #fff;
}

.vip-pay-limits li {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 20px;
    column-gap: 10px;
}

.vip-pay-limits li > div {
    flex: 1 0 auto;
    display: flex;
    padding: 20px;
    background: #faf3f0;
    border-radius: 8px;
    border: 1px solid #faebe4;
    box-shadow: 0px 5px 8px rgb(183 164 148 / 19%);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vp-price {
    font-size: 18px;
    font-weight: 600;
    color: #73402b;
    position: relative;
}

.vp-price.active {
    background: #ffe6b4;
    border-color: #ff8f3f;
}

.vip-pay-limits li .vp-time {
    font-weight: 400;
}

.vp-price .vp-p {
    font-size: 28px;
}

.vp-price .vp-p small {
    font-size: 16px;
    margin-right: 3px;
}

.vip-pay-limits .normal {
    text-decoration: line-through;
    color: #c6baac;
    font-size: 16px;
    font-weight: 400;
}

.vp-price .vp-tips {
    position: absolute;
    top: -8px;
    left: 0px;
    font-size: 12px;
    font-weight: 400;
    background: linear-gradient(135deg, #ff4141, #ff8640);
    color: #fff;
    padding: 1px 8px;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
}

.vip-pay-info li {
    padding: 20px;
    padding-top: 35px;
}

.vip-pay-info li h4 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #7b4631;
}

.vip-pay-info li .limits-item {
    font-size: 14px;
}

.vip-pay-box .vip-pay-info {
    overflow-y: scroll;
    height: 550px;
}

.vip-pay-box .vip-info {
    background-color: #fffaf5;
}

h4.vp-title {
    font-size: 15px;
    padding: 0 20px;
    margin: 0;
    margin-top: 20px;
    color: #72544b;
}

.vip-pay-box .vip-pay-info::-webkit-scrollbar {
    width: 0;
  }


 /**
 * 支付按钮
 */

.pay-type-box {
    padding: 20px;
}

.pay-type-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 8px;
}

.pay-type-box .pay-type-btn {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #f8f8ff;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid #ece9ff;
    border-radius: 7px;
}

.pay-type-box .pay-type-btn i {
    font-size: 18px;
    margin-right: 3px;
}

.pay-type-btn[type-data="alipay"] i {
    color: #092dff;
}

.pay-type-btn[type-data="wepay"] i {
    color: #03c67d;
}

.pay-type-btn[type-data="balance"] i {
    color: #ff6b41;
}

.pay-push-btn {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: flex-end;
    flex-direction: row;
} 

.pay-type-btn:hover {
    border-color: #ff9459;
}

.pay-type-btn.active {
    border-color: #ff9459;
    background: #ffe6b4;
}

a.pay-sure-btn {
    font-size: 15px;
    background: linear-gradient(135deg, #ff4141, #ff8640);
    max-width: 150px;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 7px;
}

a.pay-sure-btn.protect {
    background: #4f4a68;
    cursor: no-drop;
}

.agree-price {
    color: #5f3017dd;
    display: flex;
    align-items: baseline;
    font-size: 15px;
}

.agree-price span {
    font-size: 28px;
    font-weight: 600;
    color: #ff4848;
    line-height: 1;
}

.agree-price span small {
    font-size: 20px;
    margin-right: 3px;
}

div#pay-return-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#pay-return-page .pay-return-icon {
    font-size: 46px;
    display: flex;
    background: linear-gradient(45deg, #ff2424, #ff7d53);
    color: #fff;
    padding: 10px;
    border-radius: 50%;
}

#pay-return-page .pay-return-icon.success {
    background: linear-gradient(45deg, #27d632, #00bba1);
}

#pay-return-page .pay-return-icon i {
    line-height: 1;
}

#pay-return-page .success-title , #pay-return-page .fail-title {
    font-size: 22px;
    margin-top: 40px;
}

#pay-return-page .btn-group {
    display: flex;
    column-gap: 20px;
    margin-top: 25px;
}

#pay-return-page .btn-group a {
    padding: 12px 30px;
    background: #131313;
    border-radius: 30px;
    font-size: 15px;
    color: #fff;
}

#pay-return-page .btn-group a:hover {
    opacity: .8;
    transition: all .2s;
}

#pay-return-page a.jump-order-page {
    background: linear-gradient(45deg, #234afa, #62a6ff);
}

#pay-return-page a.back-page {
    background: linear-gradient(45deg, #9323fa, #6762ff);
}

/**
 * 下载框
 */
.dd-box-inner {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.left.dd_thum {
    display: flex;
    flex-wrap: wrap;
    width: 48%;
} 

.dd-thum-inner {
    width: 100%;
    margin-right: 15px;
}

.dd-thum-inner .feature a {
    width: 100%;
    height: 240px;
    display: block;
    cursor: zoom-in;
}

.dd-thum-inner .feature a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.dd_content {
    flex: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    width: 52%;
}

.bt-thum {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 8px;
    column-gap: 5px;
}

.bt-thum a {
    width: 45px;
    height: 45px;
    display: block;
    margin-bottom: 5px;
}

.bt-thum a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

a.dd-box-gals.picked img {
    border: 2px solid #003dff;
}

.dd-title {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80%;
}

.dd-des {
    font-size: 14px;
    color: #9d9ab3;
}

.dd-price {
    margin: 5px 0;
}

.dd-price-inner {
    display: flex;
    align-items: baseline;
    margin-top: 10px;
}

.dd-price-inner .n-price {
    font-size: 18px;
    display: flex;
    color: #dacab7;
    margin-right: 8px;
    line-height: 1;
    align-items: flex-end;
}

.dd-price-inner .n-price.line {
    text-decoration: line-through;
}

.dd-price-inner .s-price {
    font-size: 25px;
    font-weight: 600;
    color: #f55;
    display: flex;
    align-items: flex-end;
}

.s-price small {
    font-size: 12px;
    font-weight: 400;
    background: linear-gradient(220deg, #404040, #453a74);
    color: #ffca8d;
    padding: 2px 5px;
    border-radius: 5px;
    vertical-align: text-top;
    margin-left: 5px;
    border-bottom-left-radius: 0px;
}

.s-price small.red {
    background: linear-gradient(220deg, #fe4242, #ffa585);
    color: #fff;
}

.dd-price-inner .value {
    line-height: 1;
    position: relative;
    top: 2px;
}

span.p-icon {
    font-size: 18px;
    margin-right: 2px;
    line-height: 1;
}

.n-price span.p-icon {
    font-size: 14px;
    margin-right: 1px;
}

.n-price span.p-icon i {
    font-size: 14px;
}

.n-price span.p-icon img {
    height: 14px;
}

.p-icon i {
    font-size: 16px;
    font-weight: 400;
}

.dd-price .vip-notice {
    display: flex;
    background: #f0f3ff;
    padding: 10px 12px;
    border-radius: 5px;
    margin-top: 20px;
    flex-direction: column;
}

.dd-price .vip-notice .tips {
    font-size: 12px;
    margin-bottom: 3px;
    color: #6a718f;
}

.dd-price .vip-notice-inner {
    display: flex;
    justify-content: space-between;
}

.dd-price .vip-notice-inner .list {
    display: flex;
    flex: auto;
    flex-direction: row;
    justify-content: flex-start;
    width: 80%;
    position: relative;
}

.dd-price .vip-notice .item {
    font-size: 13px;
    cursor: pointer;
    width: 31%;
}

.dd-price .vip-notice .item .vip-lv {
    display: block;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #723319;
}

.dd-price .vip-notice .item .v-price {
    font-size: 17px;
    font-weight: 400;
    color: #d48b59;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    line-height: 1;
    padding-top: 5px;
}

.dd-price .vip-notice .item .v-price span.p-icon {
    font-size: 12px;
    font-weight: 400;
    margin-right: 2px;
}

.dd-price .vip-notice .item .v-price span.p-icon img {
    height: 14px;
}

.dd-price .vip-notice .item .v-price span.p-icon i {
    font-size: 14px;
}

.dd-price .vip-notice-inner .buy-vip a {
    font-size: 12px;
    background: #d6c0a4;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    color: #9b591f;
    border-radius: 20px;
}

.dd-price .vip-notice-inner .list::-webkit-scrollbar {
    display: none;
}

.dd-price .uk-slider-container {
    width: 100%;
    margin-right: 10px;
}

.dd-price .buy-vip {
    width: 20%;
    display: flex;
}

.dd-buy-btn {
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
}

.dd-buy-btn .dd-buy-now , .dd-buy-btn .dd-buy-pass , .dd-buy-btn .dd-buy-login , .dd-buy-btn .dd-buy-nolimits , .dd-buy-btn .dd-buy-pwd , .dd-buy-btn .dd-buy-cmt{
    font-size: 14px;
    background: linear-gradient(220deg, #ff2f2f, #ff7747);
    color: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    flex: 1 0 auto;
}

.dd-buy-btn.right a {
    flex: none;
    max-width: 200px;
    width: 100%;
}

.dd-buy-btn .dd-buy-nolimits {
    background: linear-gradient(220deg, #d37272, #b99082);
    cursor: no-drop;
    color: #fff;
}

.dd-buy-btn .dd-buy-now i , .dd-buy-btn i {
    margin-right: 2px;
}

.type-notice {
    position: absolute;
    font-size: 12px;
    background: #2e2e2e;
    padding: 2px 7px;
    color: #ffcc98;
    border-radius: 5px;
    top: -8px;
    left: 10px;
    border-bottom-left-radius: 0px;
}

.type-notice.right {
    right: 0;
    left: unset;
    top: 0;
}

.download-box {
    position: relative;
    margin-bottom: 40px;
}

.dd-info {
    margin-top: 15px;
    background: #f6f7ff;
    padding: 15px;
    border-radius: 7px;
}

.dd-info  h4 {
    font-size: 15px;
    font-weight: 600;
    color: #4f4d77;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eae9ff;
}

.dd-info-inner {
    display: flex;
    flex-direction: column;
}

.dd-info-inner li {
    font-size: 14px;
    padding-bottom: 12px;
}

.dd-info-inner li span {
    margin-right: 15px;
    color: #7b7e9f;
}

.dd-pay-modal .pay-info {
    position: relative;
    padding: 18px 12px;
    background: linear-gradient(90deg, #ffe6e6, #fff9f4);
    border-radius: 8px;
    margin: 15px 0;
    z-index: 1;
    border: 1px solid #ffe8e8;
    overflow: hidden;
}

.dd-pay-modal .credit-info {
    font-size: 13px;
    background: #f2f3ff;
    border-radius: 5px;
    padding: 8px 15px;
    box-shadow: inset 0 0 10px #dfdeff;
    color: #4e5193;
    display: flex;
    justify-content: space-between;
}

.dd-pay-modal .credit-info .value {
    display: flex;
    align-items: center;
}

.dd-pay-modal .credit-info .value i {
    margin: 0 2px;
}

.dd-pay-modal .credit-info .value img {
    height: 14px !important;
    margin: 0 2px;
}

.dd-pay-modal .credit-info a {
    color: #3f5bc6;
}

.balance-left {
    font-size: 13px;
    background: #f2f3ff;
    border-radius: 5px;
    padding: 8px 15px;
    box-shadow: inset 0 0 10px #dfdeff;
    color: #4e5193;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
}

.balance-left .value {
    display: flex;
    align-items: center;
}

.balance-left .value i {
    margin: 0 2px;
}

.balance-left img {
    height: 14px !important;
    margin: 0 2px;
}

.dd-pay-modal .pay-info::after {
    content: "";
    position: absolute;
    background: #fff5f2;
    width: 96%;
    height: 8px;
    display: block;
    bottom: -8.5px;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.dd-pay-modal .pay-email {
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0 12px;
}

.dd-pay-modal .pay-email i {
    font-size: 18px;
    color: #999;
    flex-shrink: 0;
}

.dd-pay-modal .order-email-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
}

.dd-pay-modal .pt-title {
    font-size: 15px;
    text-align: center;
    color: #74301d;
    margin-bottom: 5px;
}

.dd-pay-modal .need-pay {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.dd-pay-modal .need-price {
    margin-right: 15px;
    color: #74301d;
}

.dd-pay-modal .price-info {
    color: #ff5454;
    font-weight: 600;
    font-size: 20px;
}

.dd-pay-modal .price-info .icon {
    font-size: 16px;
    font-weight: 400;
    vertical-align: middle;
    line-height: 1;
}

.dd-pay-modal .price-info .icon img {
    height: 16px !important;
    vertical-align: baseline;
}

.dd-pay-modal .price-info .price {
    font-size: 28px;
    margin-left: 2px;
}

.pay-type-box.dd-pay {
    padding: 0;
    margin-top: 40px;
}

.pay-type-box.dd-pay .pay-type-btn {
    padding: 7px 10px;
}

.pay-type-box.dd-pay a.pay-sure-btn {
    max-width: 100%;
    border-radius: 30px;
}

img.ppo-pay-icon {
    height: 18px;
}

.bottom-tips {
    font-size: 14px;
    color: #9d9ab3;
    text-align: left;
    margin-top: 5px;
    position: relative;
}

.lv-allow {
    display: inline-block;
    margin-left: 5px;
}

.lv-allow-hover {
    color: #a15a39;
    display: flex;
}

.lv-allow-hover:hover {
    color: #fb6e27;
}

.allow-drop-pannel.uk-drop.uk-open {
    width: 100%;
    background: #fff;
    box-shadow: 0px 7px 20px 1px #bcb4e042;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #eeebff;
}

.allow-drop-pannel ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 5px;
    flex-wrap: wrap;
}

.allow-drop-pannel ul li {
    color: #936146;
    padding: 3px 8px;
    background: #fff2eb;
    font-size: 13px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: calc((100% - 10px) / 3);
    justify-content: center;
    margin-bottom: 5px;
}

.login-down , .cmt-down , .limits-down, .pwd-down , .pass-down {
    padding: 10px 12px;
    background: #ffefe0;
    border-radius: 5px;
    width: 100%;
    font-size: 14px;
    color: #9d5c2f;
    display: flex;
}

.pass-down {
    background: linear-gradient(220deg, #d5ffe5, #9ff1bb);
    color: #22813a;
    overflow: hidden;
    position: relative;
}

.pass-down .unlock-icon {
    position: absolute;
    right: -5px;
    bottom: -3px;
    transform: rotate(15deg);
    opacity: .2;
}

.dd_content:hover .pass-down .unlock-icon img {
    transform: scale(1.3);
    transition: all .3s;
}

.pass-down .unlock-icon img {
    width: 52px;
    transition: all .3s;
}

.login-down i , .cmt-down i , .limits-down i , .pwd-down i , .pass-down i {
    margin-right: 2px;
}

.allow-limits-pannel ul {
    display: flex;
    column-gap: 5px;
}

.allow-limits-pannel ul li {
    font-size: 12px;
    background: #fcd6ad;
    padding: 2px 8px;
    border-radius: 3px;
    color: #863510;
}

.limits-down {
    flex-direction: column;
}

.dd-price-inner .t {
    display: flex;
}

.limits-down .t {
    margin-bottom: 8px;
}

.allow-limits-pannel {
    margin-bottom: 5px;
}

.alipay-scan-box-open .jconfirm-box {
    background: linear-gradient(180deg, #759eff, #3068ec);
}

.pay_scan_modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.scan-title {
    margin-bottom: 20px;
}

.scan-qrcode {
    padding: 25px;
    background: #fff;
    border-radius: 8px;
    width: 210px;
    height: 210px;
}

.scan-price {
    margin: 18px 0;
    padding: 3px 20px;
    background: #1748dc;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
}

.scan-price .icon {
    margin-right: 3px;
}

.alipay-scan-box-open .scan-qrcode img {
    width: 160px;
}

.jconfirm .jconfirm-box .jconfirm-title-c.scan-top-title {
    font-size: 16px !important;
    color: #fff;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding: 15px 15px;
}

.jconfirm-title-c.scan-top-title .jconfirm-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-tips {
    font-size: 13px;
}

.pay-countdown {
    font-size: 13px;
    display: flex;
    padding-top: 15px;
}

.pay-countdown .left-time {
    padding: 0 5px;
}

.alipay-scan-box-open .jconfirm .jconfirm-box div.jconfirm-closeIcon {
    font-size: 24px !important;
    color: #fff;
    top: 15px;
    right: 15px;
}

.ppo-pay-modal {
    border-radius: 8px;
    width: 380px;
    min-height: 400px;
    background: linear-gradient(20deg, #ffffff 70%, #ffdfdf);
    display: flex;
    align-items: center;
}

.ppo-pay-modal .inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.dd-pay-modal {
    width: 100%;
}

.dd-pay-modal .pay-info img.icon {
    position: absolute;
    width: 96px;
    top: -30px;
    right: -20px;
    transform: rotate(15deg);
    z-index: -1;
    opacity: .3;
    filter: hue-rotate(150deg);
}

.dd-pay-title {
    text-align: center;
}

.alipay-scan-box-open .ppo-scan-modal , .wepay-scan-box-open .ppo-scan-modal {
    border-radius: 8px;
    width: 320px;
    min-height: 460px;
    background: linear-gradient(180deg, #759eff, #3068ec);
}

.wepay-scan-box-open .ppo-scan-modal {
    background: linear-gradient(180deg, #28e691, #00b294);
}

.wepay-scan-box-open .ppo-scan-modal .scan-price {
    background: #00a26a;
}

.scan-title {
    margin-bottom: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
}

.pay-modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    flex-direction: column;
    backdrop-filter: blur(2px);
}

.pay-modal-overlay > div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: #fc4d23;
}

.load-qrcode {
    padding-top: 15px;
}

.pay-modal-overlay i.pay-error {
    color: #f43c3c;
    font-size: 42px;
}

i.ri-cup-line.wait-pay-icon {
    font-size: 35px;
    color: #4d6edc;
}

.wait-pay {
    color: #4d6edc !important;
}

.wait-pay-time {
    padding-top: 15px;
    font-size: 15px;
    color: #4d6edc !important;
}

.wait-pay-time b {
    font-weight: 400;
    margin: 0 3px;
}

a.cancel-pay {
    font-size: 14px;
    background: linear-gradient(45deg, #ff2a2a, #fc7f48);
    padding: 7px 28px;
    margin-top: 15px;
    color: #fff;
    border-radius: 7px;
}

.ppo-down-modal {
    border-radius: 8px;
    width: 650px;
    min-height: 400px;
    padding: 0;
}

.ppo-down-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: linear-gradient(45deg, #eaedff, #f2f2ff);
    border-radius: 7px;
    border: 1px solid #e2e6ff;
    margin-bottom: 15px;
}
.ppo-down-item .left {
    display: flex;
    align-items: center;
}

.ppo-down-item .left .down-icon {
    font-size: 28px;
    background: linear-gradient(45deg, #3863ff, #66b1ff);
    display: flex;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
} 

.ppo-down-item .left .down-icon i {
    line-height: 1;
}

.down-info {
    margin-left: 15px;
}

.ppo-down-item .left .title {
    font-weight: 600;
    color: #2c2d5e;
} 

.ppo-down-item .down-code {
    font-size: 13px;
    display: flex;
    padding-top: 5px;
}

.ppo-down-item .down-code a {
    border-radius: 3px;
    display: flex;
    align-items: center;
    margin-right: 15px;
    color: #5f6aa2;
    background: #fefefe;
    padding: 2px 10px;
}

.ppo-down-item .down-code a span {
    border-radius: 3px;
    color: #3b2db9;
    margin-left: 5px;
}

.ppo-down-item .right {
    display: flex;
}

.ppo-down-item .right a {
    padding: 8px 40px;
    background: #343eff;
    border-radius: 7px;
    color: #fff;
    font-size: 15px;
}

.ppo-down-content .ppo-downc-title {
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0eeff;
}

.ppo-down-content .list-item {
    margin-top: 15px;
}

.down-item-html {
    border: 1px solid #e9e8ff;
    margin-top: 20px;
    background: #f7f7ff;
    border-radius: 7px;
    padding: 15px;
}

.ppo-down-content .vip_downnum_box .inner {
    color: #813517;
    padding: 15px;
    background: linear-gradient(45deg, #ffd9bf, #ffeed4);
}

.ppo-down-content .vip_downnum_box .inner span {
    color: #ff3900;
    font-weight: 600;
}

.down-item-html p {
    font-size: 15px;
}

.down-item-html img {
    width: 100%;
}

.down-item-html h1 {
    margin: 10px 0;
    font-size: 25px;
}

.down-item-html h2 {
    margin: 10px 0;
    font-size: 23px;
}

.down-item-html h3 {
    margin: 10px 0;
    font-size: 20px;
}

.down-item-html h4 {
    margin: 10px 0;
    font-size: 18px;
}

.down-item-html a {
    color: #092dff;
}

.hide-info-box {
    border: 1px solid #c8e6c9;
    background: #eeffeb;
    border-radius: 7px;
    padding: 15px;
    margin-top: 15px;
    font-size: 14px;
}

.down-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 15px;
}

.down-empty i {
    display: block;
    font-size: 48px;
    margin-bottom: 10px;
    color: #ccc;
}

.ppo-down-modal .inner {
    word-wrap: break-word;
}

.ppo-down-content {
    padding: 30px;
}

.vip_downnum_box {
    font-size: 13px;
}

.vip_downnum_box .inner {
    color: #83452c;
    padding: 10px;
    background: #fffaf5;
    border-radius: 5px;
    border: 1px solid #f1d8be;
    margin-top: 10px;
}

.vip_downnum_box .inner span {
    padding: 0 3px;
    color: #ff680c;
}

.downpage-wrap {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    margin-top: 40px;
}

.dp-content {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 7px 20px 1px #d7ceff30;
}

.downpage-wrap .vip_downnum_box .inner {
    color: #813517;
    padding: 15px;
    background: linear-gradient(45deg, #ffd9bf, #ffeed4);
    margin-bottom: 20px;
    font-size: 15px;
}

.downpage-wrap .vip_downnum_box .inner span {
    color: #ff3900;
    font-weight: 600;
}

.downpage-wrap .down-item-html {
    padding: 0;
    background: transparent;
    border: none;
}

.downpage-wrap .dp-title {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #2f345f;
    border-bottom: 1px solid #eff1ff;
    padding-bottom: 20px;
}

.dp-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.dp-logo img {
    height: 48px;
}

.dp-error {
    display: flex;
    color: red;
    justify-content: center;
}

.dp-error i {
    margin-right: 5px;
}

 /**
 * 隐藏内容
 */

.ppo-hide-box , .ppo-show-box {
    margin-left: -40px;
    margin-right: -40px;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

.ppo-hide-box .hide-inner {
    padding: 30px 40px;
    background: linear-gradient(45deg, #ffeae0, #fff8f1);
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.ppo-show-box .show-inner {
    padding: 30px 40px;
    background: linear-gradient(45deg, #f2e9ff, #f2f7fd);
}

.ppo-hide-box .title {
    color: #7f0b00;
    font-size: 18px;
    display: flex;
}

.ppo-hide-box .title i {
    margin-right: 5px;
}

.ppo-hide-box .dd-price-inner {
    margin-top: 15px;
}

.ppo-hide-box .limits-down , .ppo-hide-box .pwd-down , .ppo-hide-box .login-down , .ppo-hide-box .cmt-down{
    padding: 0;
    background: transparent;
}

.ppo-hide-box .pass-down {
    position: absolute;
    background: transparent;
    width: auto;
    top: 20px;
    right: 20px;
}

.ppo-hide-box .pass-down .unlock-icon {
    display: none;
}

.ppo-hide-box .pass-down span {
    display: none;
}

.ppo-show-box .show-tips {
    position: absolute;
    top: -10px;
    font-size: 12px;
    right: 40px;
    background: linear-gradient(45deg, #2a38ff, #80aeff);
    padding: 2px 8px;
    color: #fff;
    border-radius: 7px;
    border-bottom-left-radius: 0px;
    display: flex;
}

.ppo-show-box .show-tips i {
    margin-right: 3px;
}

.ppo-hide-box .right-btn {
    width: 25%;
}

.ppo-hide-box .left-info {
    flex: 1 0 auto;
    padding-right: 20px;
}

a.dd-up-vip {
    font-size: 14px;
    background: linear-gradient(220deg, #ff2f2f, #ff7747);
    color: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    flex: 1 0 auto;
}

.ppo-hide-box .right-btn {
    display: flex;
    align-items: flex-end;
}

.ppo-hide-box .right-btn .dd-buy-btn {
    width: 100%;
    margin: 0;
}

.ppo-hide-box .hide_img {
    position: absolute;
    right: -25px;
    top: -25px;
    opacity: .2;
    filter: hue-rotate(90deg);
}

.ppo-hide-box .hide_img img {
    height: 120px;
}

.ppo-hide-box .dd-price .vip-notice {
    background: #fff6eb;
    box-shadow: -1px 1px 15px 1px #ffc1b430;
    padding: 15px;
}

.ppo-hide-box .dd-price {
    margin-bottom: 0;
}

.ppo-hide-box .dd-price .vip-notice-inner .list {
    margin-right: 15px;
}

.ppo-hide-box .dd-price .vip-notice .item {
    width: 31%;
}

.hide-content .hide-title {
    display: none;
}

/**
 * 密码下载
 */

.pwd-modal {
    border-radius: 8px;
    width: 320px;
    min-height: 400px;
}

.pwd-code .verify-item {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.verify-item::before,
.verify-item::after {
    content: ' ';
    display: block;
    clear: both;
}

.verify-item .code-input-item {
    display: inline-block;
    height: 42px;
    width: 42px;
    margin-right: 8px;
}

.verify-item .code-input-item:last-child {
    margin-right: 0;
}

.verify-item .code-input-item input[type="text"] {
    width: 100%;
    height: 100%;
    border: 1px solid #e2e1ff;
    border-radius: 3.5px;
    outline: 0;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 16px;
    font-weight: 600;
    color: #5949d3;
    background: #e9e2ff;
}

.verify-wrap {
    width: 500px;
    margin: 100px auto;
}

.verify-wrap ul {
    width: auto;
    display: flex;
    justify-content: center;
}

.verify-wrap ul .code-input-item {
    margin-right: 15px;
}

.pwd-qrcode {
    display: flex;
    justify-content: center;
}

.pwd-qrcode img {
    width: 160px;
    padding: 10px;
    background: #ffffff;
    border-radius: 5px;
}

.pwd-tips {
    font-size: 14px;
    color: #41436e;
    margin-top: 15px;
}

.pwd-content {
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pwd-modal .title {
    display: flex;
}

.pwd-modal {
    background: linear-gradient(45deg, #f5f4ff 60%, #f9d3ff);
}

.pwd-modal .title i {
    margin-right: 3px;
}

a.check_pwd_code {
    width: 100%;
    display: flex;
    height: 42px;
    justify-content: center;
    margin-top: 25px;
    background: #2c27ff;
    border-radius: 7px;
    color: #fff;
    align-items: center;
}


 /**
 * 片刻上传图片
 */
.ppo-short-holder {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
    height: 20px;
}

/**
 * 片刻列表
 */
.img_list .list_inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
}

.img_list a {
    padding: 3px;
    position: relative;
    width: 25%;
    margin: 3px;
}

.img_list .list_inner a:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.img_list a img {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 /**
 * 通用分页
 */
.ppo-custom-pagination {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.ppo-custom-pagination > a , .ppo-custom-pagination .current {
    padding: 4px 12px;
    display: flex;
    background: #f4f7ff;
    border: 1px solid #e0e0ff;
    border-radius: 7px;
    height: 32px;
    min-width: 32px;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    color: #33386b;
    font-size: 13px;
}

.ppo-custom-pagination .current {
    background: #364dff;
    color: #fff;
}

.ppo-custom-pagination > a:hover {
    background: #d0d8f2;
}

.ppo-custom-pagination .next , .ppo-custom-pagination .prev {
    width: auto;
    padding: 4px 20px;
}


 /**
 * 用户面板下拉
 */
.user-drop-pannel {
    width: 320px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.user-pannel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.user-pannel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-pannel-info {
    flex: 1;
    min-width: 0;
}

.user-pannel-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.user-pannel-lv-icon {
    height: 16px;
    object-fit: contain;
}

.user-pannel-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #868abd;
}

.user-pannel-uid {
    color: #554bda;
    font-weight: 500;
}

.user-pannel-desc {
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-pannel-vip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: linear-gradient(135deg, #EFF8FF 0%, #FBECFF 100%);
    border-radius: 10px;
    margin-bottom: 12px;
}

.user-pannel-vip-none {
    background: #f8f9fa;
}

.user-pannel-vip-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-pannel-vip-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.user-pannel-vip-left > i {
    font-size: 24px;
    color: #ff9f43;
}

.user-pannel-vip-none .user-pannel-vip-left > i {
    color: #c5ae9a;
    padding: 0 8px;
}

.user-pannel-vip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-pannel-vip-name {
    font-size: 14px;
    font-weight: 600;
    color: #554bda;
}

.user-pannel-vip-none .user-pannel-vip-name {
    color: #666;
}

.user-pannel-vip-end {
    font-size: 11px;
    color: #868abd;
}

.user-pannel-vip-none .user-pannel-vip-end {
    color: #aaa;
}

a.user-pannel-vip-link {
    font-size: 12px;
    color: #868abd;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: color 0.2s;
}

.tools-box a.user-pannel-vip-link i {
    color: #868abd;
}

.user-pannel-vip-link:hover {
    color: #554bda;
}

a.user-pannel-vip-btn {
    padding: 6px 14px;
    background: #2a53ff;
    color: #fff;
    font-size: 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.user-pannel-vip-btn:hover {
    background: #4338ca;
}

.user-pannel-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.user-pannel-stat {
    flex: 1;
    padding: 12px;
    background: #f8f9ff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #eaecff;   
    position: relative;
    overflow: hidden;
}

.user-pannel-stat:hover {
    border-color: #d0d1ff;
}

.user-pannel-stat img {
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: 0.25;
    filter: blur(1.5px);
    transition: transform 0.2s;
}

.user-pannel-stat:hover img {
    transform: scale(1.1);
    transition: transform 0.2s;
}

.user-pannel-stat-label {
    font-size: 14px;
    color: #868abd;
}

.user-pannel-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #5C84EB;
}

.user-pannel-stat-credit {
    color: #ffa269;
}

.user-pannel-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

a.user-pannel-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    transition: background 0.2s;
}

.user-pannel-menu-item:hover {
    background: #f4f5ff;
    color: #554bda;
}

.user-pannel-menu-item > i:first-child {
    font-size: 18px;
    color: #868abd;
    width: 20px;
    text-align: center;
}

.user-pannel-menu-item:hover > i:first-child {
    color: #554bda;
}

.user-pannel-menu-item > span {
    flex: 1;
}

.user-pannel-menu-item > i:last-child {
    font-size: 16px;
    color: #ccc;
}

.user-pannel-logout {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    display: flex;
    gap: 8px;
}

.user-pannel-logout a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
    transition: background 0.2s;
}

.user-pannel-logout a:hover {
    background: #fff5f5;
    color: #e74c3c;
}

.user-pannel-logout a:hover > i {
    color: #e74c3c;
}

.user-pannel-logout i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

/**
 * 页脚
 */
footer#colophon {
    position: relative;
    padding: 40px;
}

 /**
 * cursor 光标特效
 */

/* Custom Cursor */
.custom-cursor, .custom-cursor-dot {
    position:fixed; z-index:999; top:0; left:0;
    transform:translate(-50%, -50%);
    pointer-events:none; opacity:0;
}

/* decorative */
.custom-cursor {
    width:32px; 
    height:32px; 
    border:1px solid #1c1c1c; 
    border-radius:50%;
}
.custom-cursor-dot {
    width:7px; 
    height:7px; 
    border-radius:50%; 
    background-color:#4410ff;
}  

/* ===========[页面加载动画1]=========== */
.pix-page-loader {
    display: flex;
    justify-content: center;
    padding: 60px 0;
    width: 100%;
  }
  

/* ===========[页面加载动画2]=========== */  
@keyframes bouncing-loader {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0.1;
      transform: translateY(-1rem);
    }
  }
  .bouncing-loader {
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .bouncing-loader > div {
    width: 0.6rem;
    height: 0.6rem;
    margin: 1rem 0.2rem;
    background: #3741ff;
    border-radius: 50%;
    animation: bouncing-loader 0.6s infinite alternate;
  }
  .bouncing-loader > div:nth-child(2) {
    animation-delay: 0.2s;
  }
  .bouncing-loader > div:nth-child(3) {
    animation-delay: 0.4s;
  }

/* ===========[placeholder文字颜色]=========== */ 
  ::-webkit-input-placeholder {
    color: #9c9bba; /* 修改为你想要的颜色 */
  }
  
  :-moz-placeholder {
    color: #9c9bba; /* 修改为你想要的颜色 */
  }
  
  ::-moz-placeholder {
    color: #9c9bba; /* 修改为你想要的颜色 */
  }
  
  :-ms-input-placeholder {
    color: #9c9bba; /* 修改为你想要的颜色 */
  }  

  .artplayer-app {
    height: 600px;
    width: 800px;
}

/* ===== UIkit 弹窗通用样式优化 ===== */
#card-redeem-modal .uk-modal-dialog,
#charge-modal .uk-modal-dialog,
.uk-modal-dialog.user-edit-modal,
.uk-modal-dialog.user-safe-modal,
.uk-modal-dialog.user-repass-modal {
    border-radius: 16px;
    overflow: hidden;
}

#card-redeem-modal .uk-modal-title,
#charge-modal .uk-modal-title {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

#card-redeem-modal .uk-modal-title i,
#charge-modal .uk-modal-title i {
    font-size: 20px;
}

/* ===== 卡密充值弹窗 ===== */
#card-redeem-modal .uk-modal-dialog {
    border-radius: 16px;
    padding: 28px 24px 20px;
}

#card-redeem-modal .card-redeem-title {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

#card-redeem-modal .card-redeem-title i {
    font-size: 20px;
    color: #1352ff;
}

#card-redeem-modal .uk-input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
    height: 46px;
    flex: 1;
}

#card-redeem-modal .uk-input:focus {
    border-color: #1352ff;
    box-shadow: 0 0 0 3px rgba(19, 82, 255, .1);
    outline: none;
}

#card-redeem-modal .uk-button-primary {
    background: #1352ff;
    color: #fff;
    border: none;
    border-radius: 10px;
    height: 46px;
    line-height: 46px;
    padding: 0 24px;
    font-weight: 500;
    transition: all .2s;
}

#card-redeem-modal .uk-button-primary:hover {
    background: #0f42cc;
}

#card-redeem-modal .uk-button-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

#card-redeem-modal .redeem-tips {
    display: flex;
    gap: 2px;
}

/* ===== 充值弹窗 ===== */
.charge-modal {
    border-radius: 16px !important;
}

.charge-modal .charge-inner-html input,
.charge-modal .charge-inner-html .uk-input {
    border-radius: 8px;
    border: 1px solid #ddd;
}

.charge-modal .charge-inner-html .charge-input-form input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ffdcdc;
    background: #ffffff;
    padding-left: 40px;
}

.charge-modal .charge-inner-html input:focus,
.charge-modal .charge-inner-html .uk-input:focus {
    border-color: #1352ff;
    box-shadow: 0 0 0 3px rgba(19, 82, 255, .1);
    outline: none;
}