/* 边距（Margin） */
.m0 { margin: 0 !important; }
.mg-t { margin-top: 16px; }
.mg-b { margin-bottom: 16px; }
.ml-l { margin-left: 40px; }
.mr3 { margin-right: 3px; }
.mr5 { margin-right: 5px; }
.mr6 {margin-right: 6px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mt0 {margin-top: 0 !important;}
.mt20 { margin-top: 20px; }
.mt10 { margin-top: 7px; }
.mt8 { margin-top: 8px; }
.mt6 { margin-top: 6px; }
.mt5 { margin-top: 5px !important; }
.mb20 { margin-bottom: 20px; }
.mb10 { margin-bottom: 10px; }
.mb3 { margin-bottom: 3px; }
.mb5 { margin-bottom: 5px !important; }
.ml3 { margin-left: 3px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
/* 内边距（Padding） */
.p0 { padding: 0 !important; }
.pt-l { padding-top: 30px; }
.pl30 { padding-top: 30px; }
/* 字体大小（Font Size） */
.fz12 { font-size: 12px !important; }
.fz14 { font-size: 14px; }
.fz16 { font-size: 16px; }
.fz20 { font-size: 20px; }
.px12 { font-size: 12px; }
.fs12 { font-size: 12px; }
/* 字体粗细（Font Weight） */
.fb { font-weight: bold; }
/* 显示状态（Display） */
.hide { display: none; }
.hidei { display: none !important; }
.show { display: block !important; }
/* 透明度（Opacity） */
.opacity5 { opacity: .5; }
.opacity8 { opacity: .8;}
.opacity8 { opacity: .8; }
.ta-left { text-align: left;}
.ta-center { text-align: center;}
.ta-right { text-align: right;}
.scroll-x, .scroll-y { -webkit-overflow-scrolling: touch; overflow: hidden; overflow-x: auto}
.scroll-x { white-space: nowrap}
.scroll-y { overflow-x: hidden; overflow-y: auto}
.fixeds { position: fixed;}
.show {display: block !important;}
.hide-i {display: none !important;}
.row1 { overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}
.z90 { transform: rotate(90deg);}
.z180 { transform: rotate(180deg);}
.z270 { transform: rotate(270deg);}
body { margin: 0; overflow: overlay;position: relative}
.userselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.dan { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
::-webkit-scrollbar { background-color: transparent; width: 10px;height: 10px;}
::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 8px; background-clip: content-box; border: 2px solid transparent;}
body[scroll]::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5);}
.qcx_modal .popup-set-left, .qcx_modal .popup-set-right {display: inline-block; vertical-align: top;font-size: 14px;}
.qcx_modal .popup-set-left {width: 20%; margin-right: 20px; text-align: right; padding-top: 6px; color: var(--qcs-color-999, #b1b1b1);}
.qcx_modal .popup-set-right {width: calc(80% - 25px); overflow: hidden;}
.qcx_modal textarea::placeholder, .qcx_modal input::placeholder {color: #909090; font-size: 12px; }
.qc-avatar {position: relative; width: var(--this-size); height: var(--this-size); --this-size: 48px;}
.qc-avatar img {width: var(--this-size); min-width: var(--this-size); height: var(--this-size); min-height: var(--this-size); border-radius: 50%;}
.separators {text-align: center; display: flex; justify-content: center; align-items: center}
.separators::after, .separators::before {content: ''; background: var(--qcs-color-555); max-width: 20%; height: 1px; margin: 0 1em; flex: 1}
.qc-username {display: inline-flex; align-items: center;}
.qc-username > a {line-height: 16px;}
.qc-username img {height: 12px !important;width: unset !important;}
.qc-username.fold { flex-direction: row; flex-wrap: wrap;}
.qc-username.fold > a:first-of-type { width: 100%; margin-bottom: 4px;}
.qc-username.fold > img:first-of-type { margin-left: 0 !important;}
.qc-userbtns { position: absolute; right: 10px; top: 8px; font-size: 12px;}
.qc-userbtns .user-follow { display: flex; align-items: center; font-weight: bold;}
.shortcode-box {}
.shortcode-list {}
.shortcode-item {display: inline-flex;width: calc(33.3333% - 15px);height: 50px;border: 1px solid #ddd;margin: 5px;border-radius: 5px;cursor: pointer;align-items: center;}
.shortcode-item:hover {background: #f1f1f1;}
.shortcode-item.active {width: calc(100% - 10px);background: #f1f1f1;}
.shortcode-item i {font-size: 30px;padding: 5px 10px;}
.shortcode-item img {width: 24px; height: 24px; padding: 0 10px;}
.shortcode-item > div {display: flex;flex-direction: column;line-height: 14px;}
.shortcode-item > div > span {}
.shortcode-item > div > p {font-size: 12px;opacity: .6;}
.shortcode-opts {display: flex;justify-content: center;white-space: nowrap;margin-top: 20px;flex-direction: column;align-items: center;}
.shortcode-input {display: flex;width: 80%;}
.shortcode-input span {margin-right: 5px;line-height: 30px;min-width: 60px;}
.shortcode-input textarea {height: unset !important;padding: 4px;}
.empty-cht { display: flex; justify-content: center; align-items: center; flex-direction: column;}
.empty-cht p { font-size: 12px; opacity: .6; margin: 10px 0;}
.empty-cht img { width: 100%;width: 100%;}
@media (max-width: 768px) {
    .hide768 {display: none !important;}
}
@media (max-width: 480px) {
    .hide-sm, .hide480 {display: none !important;}
}
#load ~ * { display: none;}
/*配置*/
.background-shape .circle1 { width: 2200px; height: 2200px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); position: absolute; z-index: -30; top: -1100px; right: -1100px;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .background-shape .circle1 { width: 1700px; height: 1700px; top: -850px; right: -850px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .background-shape .circle1 { width: 1700px; height: 1700px; top: -850px; right: -850px; }
}
@media only screen and (max-width: 767px) {
    .background-shape .circle1 { width: 1700px; height: 1700px; top: -850px; right: -850px; }
}
.background-shape .circle2 { width: 1700px; height: 1700px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); position: absolute; z-index: -20; top: -850px; right: -850px;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .background-shape .circle2 { width: 1200px; height: 1200px; top: -600px; right: -600px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .background-shape .circle2 { width: 1200px; height: 1200px; top: -600px; right: -600px; }
}
@media only screen and (max-width: 767px) {
    .background-shape .circle2 { width: 1200px; height: 1200px; top: -600px; right: -600px; }
}
.background-shape .circle3 { width: 1200px; height: 1200px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); position: absolute; z-index: -10; top: -600px; right: -600px;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .background-shape .circle3 { width: 700px; height: 700px; top: -350px; right: -350px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .background-shape .circle3 { width: 700px; height: 700px; top: -350px; right: -350px; }
}
@media only screen and (max-width: 767px) {
    .background-shape .circle3 { width: 700px; height: 700px; top: -350px; right: -350px; }
}
.background-shape .circle4 { width: 700px; height: 700px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); position: absolute; z-index: -10; top: -350px; right: -350px;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .background-shape .circle4 { width: 200px; height: 200px; top: -100px; right: -100px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .background-shape .circle4 { width: 200px; height: 200px; top: -100px; right: -100px; }
}
@media only screen and (max-width: 767px) {
    .background-shape .circle4 { width: 200px; height: 200px; top: -100px; right: -100px; }
}
.background-animation { position: absolute; z-index: -1; top: 0; left: 0; width: 70%; height: 100%;}
.background-animation .star-ani {
    position: absolute;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    top: 15%;
    left: 45%;
    z-index: -1;
    -webkit-animation: rotateAnimation linear 39s infinite;
    animation: rotateAnimation linear 39s infinite;
}
.background-animation .star-ani::after {
    position: absolute;
    content: "☆";
    top: 10%;
    left: 10%;
    z-index: -1;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.26);
    font-size: 22px;
}
.background-animation .cloud-ani {
    position: absolute;
    border-radius: 50%;
    width: 240px;
    height: 240px;
    top: 50%;
    left: 60%;
    z-index: -1;
    -webkit-animation: rotateAnimation linear 46s infinite;
    animation: rotateAnimation linear 46s infinite;
}
.background-animation .cloud-ani::after {
    position: absolute;
    content: "◇";
    top: 10%;
    left: 10%;
    z-index: -1;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.26);
    font-size: 2.5rem;
}
.background-animation .circle-ani {
    position: absolute;
    border-radius: 50%;
    -webkit-animation: rotateAnimation linear 34s infinite;
    animation: rotateAnimation linear 34s infinite;
    width: 180px;
    height: 180px;
    left: 10%;
    top: 10%;
    z-index: -1;
}
.background-animation .circle-ani::after {
    width: 20px;
    height: 20px;
    position: absolute;
    content: "";
    top: 10%;
    left: 10%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    z-index: -1;
    border-radius: 50%;
}
.background-animation .triangle-ani {
    position: absolute;
    border-radius: 50%;
    -webkit-animation: rotateAnimation linear 40s infinite;
    animation: rotateAnimation linear 40s infinite;
    width: 20%;
    height: 20%;
    left: 30%;
    top: 50%;
    z-index: -1;
}
.background-animation .triangle-ani::after {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    border-top: 14px solid rgba(255, 255, 255, 0.16);
    border-bottom: 14px solid transparent;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    z-index: -1;
}
.background-animation .box-ani {
    position: absolute;
    border-radius: 50%;
    -webkit-animation: rotateAnimation linear 37s infinite;
    animation: rotateAnimation linear 37s infinite;
    width: 15%;
    height: 18%;
    left: 7%;
    top: 70%;
    z-index: -1;
}
.background-animation .box-ani::after {
    width: 26px;
    height: 26px;
    position: absolute;
    content: "";
    z-index: -1;
    background-color: transparent;
    border-radius: 4px;
    border: 3px solid rgba(255, 255, 255, 0.2);
}
.background-animation .line-ani {
    position: absolute;
    border-radius: 50%;
    -webkit-animation: rotateAnimation linear 43s infinite;
    animation: rotateAnimation linear 43s infinite;
    width: 10%;
    height: 12%;
    left: 7%;
    top: 30%;
    z-index: -1;
}
.background-animation .line-ani::after {
    width: 30px;
    height: 3px;
    position: absolute;
    content: "";
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.17);
}
@-webkit-keyframes rotateAnimation {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotateAnimation {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}
.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}
/*加载中*/
@keyframes huan-rotate {
    0% {transform: rotate(0)}
    to {transform: rotate(360deg)}
}
.qcx_absolute {position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: calc(100% - 2px); height: calc(100% - 2px);display: flex;background: var(--qcs-color-333, #fff);z-index: 99;align-items: center;justify-content: center; border: 1px solid var(--qcs-color-333, #f1f1f1);}
.qcx_absolute > div { display: flex; align-items: center; justify-content: center;}
.qcx_absolute .qcx_opacity5 {font-size: 28px;opacity: .5}
.qcx_loading {content: "";width: .7em;height: .7em;display: inline-block;border: .1em solid transparent;border-radius: 50%;border-top-color: #b1b1b1;border-bottom-color: #b1b1b1;-webkit-animation: huan-rotate 1s cubic-bezier(.7, .1, .31, .9) infinite;animation: huan-rotate 1s cubic-bezier(.7, .1, .31, .9) infinite}
.qcx_absolute .qcx_loading_text { font-size: 14px; margin-top: 60px; position: absolute; color: #b1b1b1;}
.qcx-loading .qcx_loading { font-size: 22px; border-top-color: #fffdfd; border-bottom-color: #ffffff; margin-right: 10px; margin-left: -5px;}
.qcx-loading { font-size: 16px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; background-color: #ffffff70;}
.qcx-loading .qcpup-bclose { font-size: 18px; line-height: 16px; margin-right: 10px; margin-left: -5px; width: 0.7em; height: 0.7em; display: inline-block;}
.qcx-loading .qcpup-b .con { max-width: unset;}
.qcx-loadings { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99998; background-color: #ffffff70;}
@keyframes huan-rotate {
    0% {transform: rotate(0)}
    to {transform: rotate(360deg)}
}
/*上下文菜单*/
.basicContext, .basicContext * {box-sizing: border-box}
.basicContextContainer {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100000;-webkit-tap-highlight-color: transparent}
.basicContext {position: absolute;opacity: 0;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none}
.basicContext__item {cursor: pointer}
.basicContext__item--separator {float: left;width: 100%;height: 1px;cursor: default}
.basicContext__item--disabled {cursor: default}
.basicContext__data {min-width: 140px;padding-right: 20px;text-align: left;white-space: nowrap}
.basicContext__icon {display: inline-block}
.basicContext--scrollable {height: 100%;-webkit-overflow-scrolling: touch;overflow-y: auto}
.basicContext--scrollable .basicContext__data {min-width: 160px}
.basicContext {padding: 6px;background-color: #fff;box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 1px rgba(0, 0, 0, .2);border-radius: 3px}
.basicContext__item {margin-bottom: 2px}
.basicContext__item--separator {margin: 4px 0;background-color: rgba(0, 0, 0, .1)}
.basicContext__item--disabled {opacity: .5}
.basicContext__item:last-child {margin-bottom: 0}
.basicContext__data {padding: 6px 8px;color: #333;border-radius: 2px}
.basicContext__item:not(.basicContext__item--disabled):hover .basicContext__data {color: #fff;background-color: #4393e6}
.basicContext__item:not(.basicContext__item--disabled):active .basicContext__data {background-color: #1d79d9}
.basicContext__icon {margin-right: 10px;width: 12px;text-align: center}