.widget-side {
    float: right;
    width: 335px;
    margin-top: 20px;
}

.widget-side-absolute {
    position: absolute;
    left: calc(50% + 500px);
    top: 197px;
    float: initial;
}

.widget-side-main {
    padding: 20px;
    background-color: var(--color-background-main-area);
}

.widget-side-comment-one {
    margin-bottom: 30px
}

.widget-side-container {
    box-sizing: border-box !important;
    flex: none !important;
    float: none !important;
    overflow: hidden !important;
}

.widget-side-container .widget-side-container-title {
    cursor: pointer;
    height: 40px;
    background-color: var(--color-background-header);
    margin: -20px -20px 20px -20px;
    padding: 20px 15px 0 15px;
    color: var(--color-header-text);
}

.widget-side-container .widget-side-container-title.is-default-expand {
    background-color: var(--color-background-main-area);
    color: var(--color-main-text);
}

.widget-side-container-title:hover {
    text-decoration: underline;
}

.widget-side-comment-avatar {
    margin-right: 15px;
    margin-bottom: 10px;
    position: relative;
    top: 4px;
    flex-shrink: 0;
    width: 30px;
    display: block;
}

.widget-side-comment-avatar img {
    width: 30px;
    position: relative;
    bottom: 6px;
    vertical-align: middle;
}

.widget-side-container .widget-side-comment-date {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: -5px;
}

.widget-side-container .widget-side-comment-name {
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 8px;
    margin-bottom: 9px;
}

.widget-side-container .widget-side-comment-city {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-bottom: 17px;
    margin-right: 8px;
    position: relative;
    top: 3px;
}

.widget-side-comment-content {
    width: calc(100% - 30px);
}

.widget-side-comment-content > span {
    word-wrap: break-word;
    word-break: normal;
    color: var(--color-article-tab-date-preview);
}

.widget-side-container-button {
    cursor: pointer;
    background-color: var(--color-background-header);
    color: var(--color-header-text);
    border-radius: 20px;
    padding: 10px;
    width: 21px;
}

.widget-side-container-button i {
    position: relative;
    left: 1px;
    font-size: 20px;
}

.widget-side-container-button:hover {
    color: var(--color-header-text);
    background-color: var(--color-background-header);
}

.widget-side-container-button-goto-top {
    position: fixed;
    bottom: 80px;
    left: calc(50% + 500px);
}


@media screen and (max-width: 500px) {
    .widget-side-container-button-goto-top {
        display: none;
    }
}

.widget-side-container-button-goto-top-hide {
    display: none;
}

.widget-side-comment-logo {
    text-align: center;
}


.widget-side-comment-logo img {
    width: 100px;
    height: 100px;
    border-radius: 60px;
    border: 1px solid var(--color-article-tab-date-preview);
    padding: 10px;
    background-color: white;
}

.widget-side-comment-statistic {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 10px;
    padding-left: 70px;
}

.widget-side-comment-statistic > div {
    margin-top: 10px;
    color: var(--color-main-text);
    font-size: var(--font-size-18px);
}

.widget-side-comment-statistic > div > i {
    margin-right: 5px;
}

.widget-side-container .article-one-title {
    cursor: pointer;
    color: var(--color-main-text);
    margin-bottom: 15px;
    font-size: var(--font-size-16px);
    display: block;
}

.widget-side-container .article-one-title:hover {
    color: var(--color-article-link);
    text-decoration: underline;
}

.widget-markdown-css {
    line-height: 180%;
    color: var(--color-main-text);
}

.widget-markdown-css a {
    color: var(--color-article-link);
    text-underline-offset: 2px;
}

.widget-markdown-css a:hover {
    color: var(--color-main-text);
}

.widget-markdown-css p {
    text-indent: 2em;
}

.widget-blog-skin {
    color: var(--color-main-text);
    margin-top: 20px;
}

.widget-blog-skin > div {
    margin: 10px 0;
}

.widget-side-article-summary {
}

.article-summary-list {
    position: relative;
}

.article-summary-list li:hover {
    font-weight: bold;
    cursor: pointer;
}

.widget-side-container-article-summary-affix-border-bottom {
    border-bottom: 20px solid var(--color-background-body);
}

.widget-side-main .markdown-css ul {
    padding-inline-start: 0;
}

.article-summary-list.markdown-css ul li {
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: var(--font-size-16px);
    margin: 0;
    padding: 8px 0;
    line-height: 130%;
}

.article-summary-list-active {
    background-color: var(--color-background-article-ol-comment);
    border-radius: 6px;
    padding-left: 10px !important;
    text-decoration: none !important;
}

.widget-side-container .comment-header {
    display: flex;
    align-items: center;
    width: 100%;
}
.comment-one {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 500px) {
    .comment-one {
        margin: 20px 0 0 0;
        z-index: 1;
        overflow: visible;
    }
}

.comment-left {
    display: inline-block;
    width: 70px;
    color: var(--color-main-text);
    text-decoration: none;
    position: relative;
    top: 3px;
    vertical-align: top;
}

@media screen and (max-width: 500px) {
    .comment-left {
        top: 0;
    }
}

@media screen and (max-width: 500px) {
    .comment-left {
        width: 60px;
    }
}

.comment-left-margin {
    margin-left: 70px;
    width: 100%;
}

@media screen and (max-width: 500px) {
    .comment-left-margin {
        margin-left: 60px;
    }
}

.comment-left > img {
    width: 55px;
    border-radius: 4px;
}

@media screen and (max-width: 500px) {
    .comment-left > img {
        width: 45px;
    }
}


.comment-right {
    display: inline-block;
    width: calc(100% - 70px)
}

@media screen and (max-width: 500px) {
    .comment-right {
        width: calc(100% - 60px)
    }
}

.comment-name {
    margin-bottom: 10px;
    font-size: var(--font-size-18px);
    display: inline-block;
    color: var(--color-main-text);
    text-decoration: none;
    font-weight: bold;
}

.comment-name :hover {
    text-decoration: underline;
}

.comment-name .el-tag {
    padding: 0 6px;
    position: relative;
    bottom: 1px;
    line-height: 22px;
    height: 22px;
}

@media screen and (max-width: 500px) {
    .comment-name .el-tag {
        bottom: initial;
        top: 1px;
    }
}

.comment-city {
    color: var(--color-article-link);
    font-size: var(--font-size-16px);
    margin-left: 10px;
    font-weight: initial;
}

.comment-content {
    color: var(--color-main-text);
    line-height: 180%;
    font-size: var(--font-size-16px);
    background-color: var(--color-background-article-ol-comment);
    padding: 15px 15px;
    border-radius: 6px;
}

@media screen and (max-width: 500px) {
    .comment-content {
        font-size: var(--font-size-14px);
    }
}

.comment-content a {
    color: var(--color-article-link);
}

.comment-content-edit {
    color: var(--color-main-text);
    background-color: var(--color-background-comment-edit);
}

.comment-content-at {
    color: var(--color-article-tab-date-preview);
    margin-right: 10px;
}

.comment-option {
    margin-top: 10px;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.comment-date {
    float: right;
    font-size: var(--font-size-14px);
    color: var(--color-article-tab-date-preview);
    margin-top: 3px;
}

.comment-button-reply {
    float: right;
    margin-left: 20px;
}

.comment-button-reply .el-tag.el-tag--info {
    padding: 0 6px;
    height: 22px;
    position: relative;
    bottom: 2px;
    cursor: pointer;
    margin-top: 2px;
}

.comment-button-reply .el-tag.el-tag--info i.fa {
    position: relative;
    top: 2px;
}

.comment-button-reply .el-tag.el-tag--info:hover {
    background-color: var(--color-background-small-button);
    border: 1px solid var(--color-background-small-button-border);
    color: var(--color-middle-button-text);
}

.comment-button-reply .el-link {
    font-size: var(--font-size-14px);
    position: relative;
    bottom: 5px;
}

.comment-reply-list {
    margin-left: 0;
    width: 100%;
}

.comment-content .article-emotion {
    position: relative;
    top: 5px;
    margin: 0 5px;
}

.component-form-comment-reply {
    margin-top: 30px;
    width: calc(100% - 140px);
    margin-left: 140px;
}

@media screen and (max-width: 500px) {
    .component-form-comment-reply {
        width: calc(100%);
        margin-left: 0;
    }
}

.component-form-comment-reply-short {
    width: calc(100% - 70px);
    margin-left: 70px;
}

@media screen and (max-width: 500px) {
    .component-form-comment-reply-short {
        width: calc(100%);
        margin-left: 0;
    }
}

.comment-tabs .el-tabs__item {
    color: var(--color-article-tab-date-preview);
}

.comment-edit-link {
    color: var(--color-article-tab-date-preview);
    border-bottom: 1px solid var(--color-article-tab-date-preview);
    height: 23px;
}

.comment-edit-link:hover {
    color: var(--color-background-comment-edit);
    border-bottom: 1px solid var(--color-background-comment-edit);
}

@keyframes slideDown {
    from {
        top: -200px;
    }
    to {
        top: 0;
    }
}

.comment-one-slide-container {
    position: relative;
    overflow: hidden;
    padding-top: 1px;
}

.comment-one.slide-down {
    animation: slideDown 1s ease forwards;
}


@keyframes opacityFade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.comment-form-fade-container.opacity-fade {
    animation: opacityFade 1s ease forwards;
}

.comment-admin {
    top: -2px !important;
    bottom: initial !important;
}
.textarea-comment {
    font-size: var(--font-size-16px);
}

.form-email {
    width: 30%;
    margin-right: 5%;
    display: inline-block;
}

@media screen and (max-width: 500px) {
    .form-email {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px !important;
    }
}

.form-email:nth-child(3) {
    margin-right: 0;
}

.el-textarea__inner, .el-input__inner {
    font-size: var(--font-size-14px);
}
.comment-tabs .el-tabs__item {
  padding: 0 10px;
}

.comment-tabs .el-tabs__header {
  width: 200px;
}

.comment-tabs.comment-tabs-upload .el-tabs__header {
  width: 250px;
}

.comment-tabs .el-tabs__content {
  overflow: visible;
}

.tab-emotion-one {
  padding: 0 10px;
  display: inline-block;
  cursor: pointer;
  color: var(--color-main-text);
}

.tab-emotion-one:hover {
  color: var(--color-article-tab-date-preview);
  text-decoration: underline;
}

.tab-alu-one {
  padding: 0 5px;
  display: inline-block;
  cursor: pointer;
}

.content-album {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    flex-wrap: wrap;
    text-indent: 0;
    line-height: initial;
    background-color: var(--color-background-article-ol-comment);
    border-radius: 4px;
    padding: 10px 0;
}

.content-album-one {
    width: calc(21%);
    margin: 12px 2%;
}

@media screen and (max-width: 500px) {
    .content-album-one {
        width: calc(41%);
        aspect-ratio: 1 / 1;
        margin: 10px calc(1% + 11px);
    }
}

.content-album-desc {
    margin: 12px 8px 0;
    text-align: center;
    font-size: var(--font-size-12px);
    color: var(--color-main-text);
}

.content-album-image .el-skeleton__image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.content-album-image img {
    border-radius: 4px;
}

.content-album-image-cover {
    width: 190px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}


.markdown-css .content-album .page-header {
    text-align: center;
    width: 100%;
    margin: 10px;
}

.markdown-css .content-album .page-header h1 {
    font-size: var(--font-size-18px);
    color: var(--color-main-text);
}

:root {
    --primary-color: #4361ee;
    --secondary-color: #3a0ca3;
    --text-dark: #2b2d42;
    --text-medium: #4a4e69;
    --text-light: #8e9aaf;
    --bg-light: #f8f9fa;
    --card-shadow: 0 4px 20px var(--color-background-shadow);
    --card-shadow-hover: 0 10px 15px var(--color-background-shadow);
}

.markdown-css .content-friend {
    text-indent: initial;
}

.markdown-css .content-friend h3:before {
    content: initial;
}

.markdown-css .content-friend h3 {
    color: initial;
    padding: initial;
    background-color: initial;
    font-weight: initial;
    margin-top: initial;
    margin-bottom: initial;
    border-radius: initial;
}

.markdown-css .content-friend h3:before {
    color: initial;
    padding: initial;
    background-color: initial;
    font-weight: initial;
    margin-top: initial;
    margin-bottom: initial;
    border-radius: initial;
}

.markdown-css .content-friend {
    margin: 60px 0;
}

.markdown-css .content-friend * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.markdown-css .content-friend .page-header {
    text-align: center;
    margin-bottom: 50px;
}

.markdown-css .content-friend .page-header h1 {
    font-size: 2.2rem;
    color: var(--color-title-text);
    margin-bottom: 10px;
}

.markdown-css .content-friend .page-header p {
    color: var(--color-article-tab-date-preview);
    font-size: 1.1rem;
}

.markdown-css .content-friend .links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

@media screen and (max-width: 500px) {
    .markdown-css .content-friend .links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

.markdown-css .content-friend .link-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--card-shadow);
}

.markdown-css .content-friend .link-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

.markdown-css .content-friend .card-simple {
    padding: 25px;
    text-align: center;
    text-decoration: none;
}

@media screen and (max-width: 500px) {
    .markdown-css .content-friend .card-simple {
        padding: 15px;
    }
}

.markdown-css .content-friend .card-simple .logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 2px solid #f0f0f0;
}

.markdown-css .content-friend .card-simple .name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.markdown-css .content-friend .card-simple .desc {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
}


.compare[data-v-63b8c0c9] {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-flow: wrap;
  justify-content: center;
}
.margin[data-v-63b8c0c9] {
  margin: 10px !important;
}
.image[data-v-63b8c0c9] {
  max-width: 200px;
  max-height: 200px;
}
p[data-v-63b8c0c9] {
  line-height: 200%;
}


.table-beautiful-color[data-v-600c4e8a] {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table-beautiful-color th[data-v-600c4e8a], .table-beautiful-color tr[data-v-600c4e8a] {
  height: 60px;
}

html, body {
    margin: 0;
    padding: 0;
}

.height-100 {
    height: 100px;
}

.height-100pct {
    height: 100%;
}

.max-width-100pct {
    max-width: 100%;
}

.height-100pct-sub110 {
    height: calc(100% - 110px);
}

.width-100pct-sub60 {
    width: calc(100% - 60px) !important;
}

.right {
    float: right;
}

.left {
    float: left;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 10px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.padding-lr-20 {
    padding: 0 20px;
}

.padding-tb-4 {
    padding: 4px 0 !important;
}

.padding-r-40 {
    padding-right: 40px;
}

.padding-l-40 {
    padding-left: 40px;
}

.overflow-hidden {
    overflow: hidden !important;
}

.max-width-1200 {
    max-width: 1200px;
}

.max-width-800 {
    max-width: 800px;
}

.max-width-600 {
    max-width: 600px;
}

.width-200 {
    width: 200px;
    max-width: 100%;
}

.width-100-pct {
    width: 100%;
}

.width-50-pct-desktop-100-pct-mobile {
    width: 50%;
    max-width: 100%;
}

@media screen and (max-width: 500px) {
    .width-50-pct-desktop-100-pct-mobile {
        width: 100%;
    }
}

.width-100 {
    width: 100px;
    max-width: 100%;
}

.width-150 {
    width: 150px;
    max-width: 100%;
}

.width-300 {
    width: 300px;
    max-width: 100%;
}

.width-400 {
    width: 400px;
    max-width: 100%;
}

.width-600 {
    width: 600px;
    max-width: 100%;
}

.width-800 {
    width: 800px;
    max-width: 100%;
}

.width-8 {
    width: 8px;
}

.width-180 {
    width: 180px;
}

.font-18 {
    font-size: 18px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-12 {
    font-size: 12px !important;
}

.red {
    color: red !important;
}

.clear {
    clear: both;
}

.hide {
    display: none !important;
}

.inline-block {
    display: inline-block !important;
}

.block {
    display: block !important;
}

.small {
    font-size: 12px;
}

.exceed-dot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exceed-dot-2-line {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.exceed-dot-4-line {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.exceed-dot-8-line {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
}

.exceed-dot-6-line {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
}

.text-decoration-none {
    text-decoration: none !important;
}

.text-decoration-none:hover {
    text-decoration: none !important;
}

.text-decoration-underline {
    text-decoration: underline;
}

.cursor-pointer {
    cursor: pointer;
}

.text-decoration-hover:hover {
    text-decoration: underline;
}

.mobile-none-desktop-inline {
    display: inline-block !important;
}

@media screen and (max-width: 500px) {
    .mobile-none-desktop-inline {
        display: none !important;
    }
}

.mobile-inline-desktop-none {
    display: none !important;
}

@media screen and (max-width: 500px) {
    .mobile-inline-desktop-none {
        display: inline-block !important;
    }
}

.mobile-block-desktop-none {
    display: none !important;
}

@media screen and (max-width: 500px) {
    .mobile-block-desktop-none {
        display: block !important;
        clear: both;
        margin-bottom: 10px;
        height: 15px;
    }
}

.top-1 {
    position: relative;
    top: 1px !important;
}

.top-0 {
    position: relative;
    top: initial !important;
    bottom: initial !important;
}

.top-2 {
    position: relative;
    top: 2px !important;
}

.bottom-1 {
    position: relative;
    bottom: 1px !important;
}

.bottom-2 {
    position: relative;
    bottom: 2px !important;
}

.bottom-3 {
    position: relative;
    bottom: 3px !important;
}

.bottom-5 {
    position: relative;
    bottom: 5px !important;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.margin-auto {
    margin: 0 auto;
}

.max-two-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.height-32 {
    height: 32px;
}

.margin-tb-20 {
    margin: 20px 0;
}

.margin-b-20 {
    margin-bottom: 20px;
}

.margin-t-10 {
    margin-top: 10px;
}

.margin-t-20 {
    margin-top: 20px;
}

.margin-tb-20 {
    margin: 20px 0;
}

.line-height-190 {
    line-height: 190%;
}

.banner-minus-margin-minus-top {
    margin: -20px var(--margin-minus-framework) 0 var(--margin-minus-framework);
}

@media screen and (max-width: 500px) {
    .banner-minus-margin-minus-top {
        margin: -20px var(--margin-minus-framework-mobile) 0 var(--margin-minus-framework-mobile);
    }
}

.banner-margin-minus-top {
    margin: 20px var(--margin-minus-framework) 0 var(--margin-minus-framework);
}

@media screen and (max-width: 500px) {
    .banner-margin-minus-top {
        margin: 20px var(--margin-minus-framework-mobile) 0 var(--margin-minus-framework-mobile);
    }
}
:root {
    --color-tag-blue: #457B9D;
    --color-tag-blue-border: #1D3557;
    --color-tag-white: #ececec;
    --color-tag-white-gray: #a4a4a4;
    --color-tag-white-light: white;
    --color-tag-white-border: #c7c7c7;
    --color-tag-darkcyan: #67D3CC;
    --color-tag-darkcyan-light: #D7F2F0;
    --color-tag-darkcyan-border: #36BCB3;
    --color-tag-purple: #9099FD;
    --color-tag-purple-light: #ced4ff;
    --color-tag-purple-border: #5765ff;
    --color-tag-orange: #ffac54;
    --color-tag-orange-light: #ffcd98;
    --color-tag-orange-border: #fb8500;
    --color-tag-yellow: #ffdc2c;
    --color-tag-yellow-light: #f8da45;
    --color-tag-yellow-border: #e7c200;
    --color-tag-bluegreen: #95cec9;
    --color-tag-bluegreen-light: #b1ded9;
    --color-tag-bluegreen-border: #1a8d98;
    --color-tag-green: #7fb80e;
    --color-tag-green-light: #a3cf62;
    --color-tag-green-border: #5c7a29;
    --color-tag-pink: #FC81B0;
    --color-tag-pink-light: #FCD7E5;
    --color-tag-pink-border: #F2377F;
    --color-tag-red: #ef4136;
    --color-tag-red-light: #ff817b;
    --color-tag-red-border: #c71d12;
    --color-tag-gray: #989898;
    --color-tag-gray-light: #E1E3E7;
    --color-tag-gray-border: #5d5d5d;
    --color-tag-dark-gray: #333333;

    --color-gray: #74787c;
    --color-dark-gray: #484848;

    --font-size-52px: 52px;
    --font-size-48px: 48px;
    --font-size-44px: 44px;
    --font-size-40px: 40px;
    --font-size-36px: 36px;
    --font-size-34px: 34px;
    --font-size-32px: 32px;
    --font-size-30px: 30px;
    --font-size-28px: 28px;
    --font-size-26px: 26px;
    --font-size-24px: 24px;
    --font-size-22px: 22px;
    --font-size-20px: 20px;
    --font-size-18px: 18px;
    --font-size-16px: 16px;
    --font-size-14px: 14px;
    --font-size-12px: 12px;
    --font-size-10px: 10px;
    --font-size-8px: 8px;

    --height-button-large: 32px;
    --height-button-middle: 28px;
    --height-button-small: 16px;
    --height-tag-small: 24px;
    --height-tag-large: 30px;
    --height-tag-card: 60px;
    --height-tag-middle: 26px;

    --border-radius-message: 20px;

    --box-shadow-gray-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    --box-shadow-gray: 0 2px 12px 0 rgba(0, 0, 0, 0.5);

    --padding-framework: 35px;
    --padding-framework-mobile: 20px;

    --margin-minus-framework: -35px;
    --margin-minus-framework-mobile: -20px;
}

.tag-skin {
    border: 1px solid var(--color-background-small-button-border);
    background-color: var(--color-background-small-button);
    color: var(--color-small-button-text);
}

.tag-skin:hover, .tag-skin:focus {
    color: var(--color-article-tab-date-preview);
    background-color: var(--color-background-comment-edit);
    border: 1px solid var(--color-background-comment-edit);
}

.tag-skin-light {
    border: 1px solid var(--color-background-article-ol-comment);
    background-color: var(--color-background-article-ol-comment);
    color: var(--color-article-tab-date-preview);
}

.tag-skin-light:hover, .tag-skin-light:focus {
    border: 1px solid var(--color-background-main-area);
    background-color: var(--color-background-main-area);
    color: var(--color-middle-button-text) !important;
}

.tag-skin-transparent {
    border: 0;
    background-color: transparent;
    color: var(--color-main-text) !important;
}

.tag-skin-reverse {
    border: 1px solid var(--color-background-reverse-button);
    background-color: var(--color-background-reverse-button);
    color: var(--color-reverse-button-text);
}

.tag-skin-reverse:hover, .tag-skin-reverse:focus {
    background-color: var(--color-main-text);
    border: 1px solid var(--color-main-text);
    color: var(--color-background-main-area);
}

.text-black {
    color: #1D1D1D;
}

.el-button.el-button--small {
    height: var(--height-button-large);
    font-size: var(--font-size-14px);
    padding: 0 12px;
}

.tag-radius {
    height: calc(var(--height-tag-small));
    font-size: var(--font-size-14px) !important;
    padding: 0 10px 0 10px !important;
    border-radius: 20px;
    line-height: 24px;
}

.tag-radius:hover {
    text-decoration: none;
}

.tag-block {
    height: calc(var(--height-tag-small));
    font-size: var(--font-size-14px) !important;
    padding: 0 10px 0 10px !important;
    border-radius: 4px;
    line-height: 25px !important;
}

.tag-radius-large {
    height: calc(var(--height-tag-large));
    font-size: var(--font-size-16px) !important;
    padding: 4px 15px 0 15px !important;
    border-radius: 20px;
    line-height: 26px !important;
}

.tag-radius-middle {
    height: calc(var(--height-tag-middle)) !important;
    font-size: var(--font-size-14px);
    padding: 3px 12px 0 12px !important;
    border-radius: 20px;
    line-height: 20px !important;
}

.tag-block:hover {
    text-decoration: none;
}

.tag-block-large {
    height: calc(var(--height-tag-large));
    font-size: var(--font-size-16px);
    padding: 0 10px 0 10px !important;
    border-radius: 4px;
    line-height: 20px;
}

.tag-block-card {
    height: calc(var(--height-tag-card));
    font-size: var(--font-size-18px);
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    margin: 10px;
    padding-top: 30px;
}

.tag-block-large:hover {
    text-decoration: none;
}

.tag-white {
    border: 1px solid var(--color-tag-white);
    background-color: var(--color-tag-white-light);
    color: var(--color-tag-white-gray) !important;
}

.tag-white:hover, .tag-white:focus {
    background-color: var(--color-tag-white);
    border: 1px solid var(--color-tag-white-border);
}

.tag-blue {
    border: 1px solid var(--color-tag-blue);
    background-color: var(--color-tag-blue);
    color: var(--color-tag-white) !important;
}

.tag-blue:hover, .tag-blue:focus {
    background-color: var(--color-tag-blue-border);
    border: 1px solid var(--color-tag-blue-border);
}

.tag-gray {
    border: 1px solid var(--color-tag-gray);
    background-color: var(--color-tag-gray);
    color: var(--color-tag-dark-gray) !important;
}

.tag-gray:hover, .tag-gray:focus {
    background-color: var(--color-tag-gray-border);
    border: 1px solid var(--color-tag-gray-border);
}

.tag-darkcyan {
    border: 1px solid var(--color-tag-darkcyan);
    background-color: var(--color-tag-darkcyan);
    color: var(--color-tag-dark-gray) !important;
}

.tag-darkcyan:hover, .tag-darkcyan:focus {
    background-color: var(--color-tag-darkcyan-border);
    border: 1px solid var(--color-tag-darkcyan-border);
}

.tag-orange {
    border: 1px solid var(--color-tag-orange);
    background-color: var(--color-tag-orange);
    color: var(--color-tag-white) !important;
}

.tag-orange:hover, .tag-orange:focus {
    background-color: var(--color-tag-orange-border);
    border: 1px solid var(--color-tag-orange-border);
}

.tag-purple {
    border: 1px solid var(--color-tag-purple);
    background-color: var(--color-tag-purple);
    color: var(--color-tag-white) !important;
}

.tag-purple:hover, .tag-purple:focus {
    background-color: var(--color-tag-purple-border);
    border: 1px solid var(--color-tag-purple-border);
}

.tag-yellow {
    border: 1px solid var(--color-tag-yellow);
    background-color: var(--color-tag-yellow);
    color: var(--color-tag-dark-gray) !important;
}

.tag-yellow:hover, .tag-yellow:focus {
    background-color: var(--color-tag-yellow-border);
    border: 1px solid var(--color-tag-yellow-border);
}

.tag-green {
    border: 1px solid var(--color-tag-green);
    background-color: var(--color-tag-green);
    color: var(--color-tag-white) !important;
}

.tag-green:hover, .tag-green:focus {
    background-color: var(--color-tag-green-border);
    border: 1px solid var(--color-tag-green-border);
}

.tag-bluegreen {
    border: 1px solid var(--color-tag-bluegreen);
    background-color: var(--color-tag-bluegreen);
    color: var(--color-tag-dark-gray) !important;
}

.tag-bluegreen:hover, .tag-bluegreen:focus {
    background-color: var(--color-tag-bluegreen-border);
    border: 1px solid var(--color-tag-bluegreen-border);
}

.tag-pink {
    border: 1px solid var(--color-tag-pink);
    background-color: var(--color-tag-pink);
    color: var(--color-tag-white) !important;
}

.tag-pink:hover, .tag-pink:focus {
    background-color: var(--color-tag-pink-border);
    border: 1px solid var(--color-tag-pink-border);
}

.tag-red {
    border: 1px solid var(--color-tag-red);
    background-color: var(--color-tag-red);
    color: var(--color-tag-white) !important;
}

.tag-red:hover, .tag-pink:focus {
    background-color: var(--color-tag-red-border);
    border: 1px solid var(--color-tag-red-border);
}

.el-button--info {
    color: #909399;
    background-color: #EBEDF2;
    border-color: #EBEDF2;
}

.el-button--info:focus,
.el-button--info:hover {
    background-color: #d8dadf;
    border-color: #d8dadf;
    color: #909399;
}

.el-button--info:active {
    color: #909399;
    background-color: #c6c9d3;
    border-color: #c6c9d3;
}

::-webkit-scrollbar-track-piece {
    background-color: #fff;
    -webkit-border-radius: 0
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #b8b8b8;
    -webkit-border-radius: 6px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5
}

::-webkit-scrollbar-thumb:hover {
    height: 50px;
    background-color: #878987;
    -webkit-border-radius: 6px
}

.tag-radius i {
    position: relative;
    top: 1px;
}

.tag-block i {
    position: relative;
    top: 0;
}

.tag-block span {
    position: relative;
}

table img {
    max-width: 150px;
    max-height: 120px;
}
* {
    font-family: Mona-Regular-2, Microsoft-YaHei-UI-Light, "Microsoft YaHei", "微软雅黑", "Helvetica Neue", serif;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    overflow-y: scroll;
    margin: 0 0 0 0;
    padding: 0;
    height: 100%;
}

img {
    vertical-align: bottom; /* 也可以用 top / middle */
}

.body:before {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-size: cover;
}

@media screen and (max-width: 500px) {
    .body:before {
        width: 0;
        height: 0;
        display: none;
    }
}

.framework {
    padding: 0;
    width: 960px;
    margin: 0 auto;
    overflow: visible;
}

@media screen and (max-width: 500px) {
    .framework {
        padding: 0 0 0 0;
        width: 100%;
        max-width: initial;
    }
}

.main {
    float: left;
    width: 100%;
    margin-top: 20px;
    background-color: var(--color-background-main-area);
    min-height: 1400px;
    padding: 20px var(--padding-framework) 0 var(--padding-framework);
}

@media screen and (max-width: 500px) {
    .main {
        width: 100%;
        margin-top: 0;
        padding: 10px var(--padding-framework-mobile) 0 var(--padding-framework-mobile);
        min-height: 800px;
    }
}

.el-header {
    padding: 10px var(--padding-framework) 20px var(--padding-framework);
    color: var(--color-header-text);
    background-color: var(--color-background-header);
    height: initial;
}

@media screen and (max-width: 500px) {
    .el-header {
        padding: 10px var(--padding-framework-mobile) 30px var(--padding-framework-mobile);
        margin: initial;
        min-height: 205px;
    }
}

.header {
    position: relative;
    margin-top: 15px;
}

@media screen and (max-width: 500px) {
    .header {
        margin-top: 15px;
        min-height: initial;
    }
}

.header-title {
    min-height: 52px;
}

.header-title-text {
    color: var(--color-header-text);
    font-size: var(--font-size-40px);
    text-decoration: none;
    display: flex;
    align-items: start;
    justify-content: start;
}

@media screen and (max-width: 500px) {
    .header-title-text {
        font-size: var(--font-size-36px);
        max-width: calc(100% - 65px);
    }
}

.header-title-text a:hover {
    text-decoration: underline;
}

.header-title-icon {
    margin-top: 8px;
    margin-right: 4px;
}

.header-title-text-link {
    display: block;
}

@media screen and (max-width: 500px) {
    .header-title-text-link {
        background-color: var(--color-background-header);
        border-radius: 24px;
        padding: 0 2px;
        max-width: calc(100% - 55px);
    }
}

.header-menu {
    position: absolute;
    right: 0;
    top: 5px;
}

.header .button-dashboard {
    position: absolute;
    right: 90px;
    top: 7px;
    width: 55px;
}

.header .button-dashboard a {
    color: var(--color-header-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.header .button-dashboard a:hover {
    color: var(--color-article-link);
}

.header .button-dashboard-read {
    right: 60px;
}

.header-intro {
    color: var(--color-header-text);
    margin-left: 25px;
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: var(--font-size-20px);
}

@media screen and (max-width: 500px) {
    .header-intro {
        height: 42px;
        margin-top: 15px;
        margin-bottom: 25px;
        font-size: var(--font-size-16px);
    }
}

.button-more {
    color: var(--color-small-button-text);
    background-color: var(--color-background-small-button);
    border: 1px solid var(--color-background-small-button-border);
    padding: 4px 10px;
    border-radius: 6px;
}

.header-dropdown {
    font-size: var(--font-size-18px);
}

.header-dropdown > i:last-child {
    font-size: var(--font-size-16px);
    vertical-align: center;
    margin-left: 8px;
    position: relative;
    bottom: 2px;
}

.header-dropdown-item {
    font-size: var(--font-size-18px);
    cursor: pointer;
}

.header-dropdown-item-background {
    color: var(--color-background-header);
    background-color: var(--color-header-text);
    margin: -5px 0;
    border-bottom-left-radius: var(--el-border-radius-base);
    border-bottom-right-radius: var(--el-border-radius-base);
}

.column {
    font-size: var(--font-size-20px);
    width: 100%;
    height: 31px;
}

.column-search {
    float: right;
    width: 208px;
    text-align: right;
    position: relative;
}

@media screen and (max-width: 500px) {
    .column-search {
        width: 190px;
    }
}

.column-search a {
    font-size: var(--font-size-20px);
}

.column-search .el-link--inner {
    font-size: 18px;
}

.column-search-group {
    width: 210px;
    float: right;
    margin-right: 1px;
}

@media screen and (max-width: 500px) {
    .column-search-group {
        width: 150px;
    }
}

.column-search-tag {
    float: right;
    margin-right: 15px;
    color: var(--color-header-text);
}

.column-search-tag .fa {
    font-size: var(--font-size-24px);
}

.column-index {
    float: right;
    text-align: right;
    margin-top: 3px;
    display: flex;
    align-items: center;
}

.column-title {
    float: left;
    font-size: var(--font-size-20px);
    color: var(--color-main-text);
}

.column-comment {
    float: right;
    width: 200px;
    text-align: right;
}

.column-comment a {
    font-size: var(--font-size-20px);
}

.column-comment .el-link--inner {
    font-size: 18px;
}

.el-footer {
    margin-top: 0;
    padding: 0;
}

.footer {
    display: block;
    height: 32px;
    background-color: var(--color-background-footer);
    overflow: hidden;
    padding: 20px var(--padding-framework) 10px var(--padding-framework);
}

@media screen and (max-width: 500px) {
    .footer {
        padding: 20px var(--padding-framework-mobile) 10px var(--padding-framework-mobile);
    }
}

.footer-left {
    float: left;
}

.footer-left .footer-bei-an {
    color: var(--color-footer-text);
    text-decoration: none;
}

.footer-right {
    float: right;
    overflow: hidden;
}

.footer-left .footer-footprint, .footer-right .footer-footprint {
    float: right;
    color: var(--color-footer-text);
    position: relative;
    top: 0;
}

.footer-right .footer-copyright {
    float: right;
    width: 380px;
    color: var(--color-footer-text);
    text-align: right;
}

.footer-right .footer-copyright * {
    color: var(--color-footer-text);
}

.footer-power-by {
    text-decoration: underline;
    margin-left: 10px;
}

.footer-power-by:hover {
    text-decoration: none;
}

.footer-version {
    font-size: var(--font-size-8px);
}

.footer-desc {
    position: relative;
    bottom: 0;
    text-decoration: none;
}

.footer-desc:hover {
    text-decoration: underline;
}

.search-result {
    margin: 10px 0 30px 0;
}

.comment {
    margin-top: 40px;
    margin-bottom: 40px;
}

.is-user {
    margin-left: 5px;
    padding-top: 1px !important;
}

.form-reply-tips {
    color: var(--color-article-link);
}

.duck-image {
    position: absolute;
    right: 10px;
    bottom: 20px;
    transition: all .1s ease-in;
}

@media screen and (max-width: 500px) {
    .duck-image {
        bottom: 19px;
    }
}

.duck-image:hover {
    transform: translateY(-14px);
}

@media screen and (max-width: 500px) {
    .duck-image:hover {
        transform: translateY(-12px);
    }
}

.duck-image img {
    max-width: 70px;
    max-height: 70px;
    -o-object-fit: cover;
       object-fit: cover;
}

@media screen and (max-width: 500px) {
    .duck-image img {
        width: 60px;
    }
}

.link-dashboard {
    text-decoration: underline;
    font-size: var(--font-size-16px);
}

.column-search .el-input-group__append {
    display: none;
}

@media screen and (max-width: 500px) {
    .column-search .el-input-group__append {
        display: table-cell;
    }
}

.pagination {
    margin-top: 30px;
}

.dialog-small {
    margin: 0 auto;
}

.dialog-small .el-dialog {
    max-width: 400px;
    width: 90%;
    margin: 25% auto 0 auto;
}

.site-download {
    margin: 20px auto;
    text-align: center;
}

.page-header {
    margin-bottom: 40px;
}

.page-header .el-page-header__icon {
    color: var(--color-title-text);
}

.page-header .el-page-header__title {
    color: var(--color-title-text);
}

.page-header .el-page-header__content {
    color: var(--color-title-text);
}

.page-header .el-page-header__main {
    border-top: 1px dashed var(--color-title-text) !important;
}

.page-header .page-header-content {
    margin-top: 10px;
    color: var(--color-title-text);
}

.flex-row {
    display: flex;
    flex-flow: row wrap;
    margin-top: 10px;
}

.article-top-tag-list-container {
    width: 550px;
    max-width: 100%;
    float: right;
}

.article-top-tag-list {
    float: right;
    min-width: 270px;
    max-width: 100%;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--color-header-text) !important;
    background-color: transparent;
    height: 40px;
    justify-content: flex-end;
}

@media screen and (max-width: 500px) {
    .article-top-tag-list {
        margin-top: 5px;
        border-bottom: 0 dashed transparent !important;
    }
}

.el-menu.article-top-tag-list li {
    height: 40px;
    color: var(--color-header-text);
}

@media screen and (max-width: 500px) {
    .el-menu.article-top-tag-list li {
        height: 30px;
        padding: 0 10px;
    }
}

.el-menu.article-top-tag-list .el-menu--horizontal {
    height: 40px;
}

.el-menu.article-top-tag-list .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: var(--color-background-body);
    color: var(--color-header-text);
    border-bottom: 2px solid var(--color-background-small-button);
}

.el-menu--horizontal > .el-menu-item.is-active {
    background-color: var(--color-background-body) !important;
    color: var(--color-header-text) !important;
    border-bottom: 2px solid var(--color-header-text) !important;
}

.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
    background-color: var(--color-background-body) !important;
    color: var(--color-header-text) !important;
    border-bottom: 2px solid var(--color-header-text) !important;
}

.el-sub-menu.el-sub-menu__hide-arrow .el-sub-menu__title {
    padding: 0;
    position: relative;
    top: 1px;
}
.article-frame {
    margin-top: 10px;
    margin-bottom: 50px;
    overflow: hidden;
}

.article-title {
}

.article-title a {
    font-size: var(--font-size-28px);
    color: var(--color-title-text);
    text-decoration: none;
    cursor: pointer;
}

.article-title .article-title-link:hover {
    text-decoration: underline;
}

.article-title-back {
    cursor: pointer;
    float: right;
    margin-left: 20px;
}

.article-content {
    font-size: var(--font-size-16px);
    text-indent: 2em;
    line-height: 180%;
    margin-top: 20px;
    color: var(--color-article-tab-date-preview);
    margin-left: 40px;
}

.article-content.article-list-content {
    margin-left: 0;
    min-height: 50px;
}

@media screen and (max-width: 500px) {
    .article-content {
        margin-left: 0;
        margin-top: 15px;
    }
}

.article-date {
    font-size: var(--font-size-14px);
    color: var(--color-article-tab-date-preview);
    float: right;
    margin-top: 15px;
    text-align: right;
}

.article-date a {
    display: block;
}

.article-one-date {
    font-size: var(--font-size-16px);
    color: var(--color-article-tab-date-preview);
    float: right;
    margin-top: 15px;
    text-align: right;
}

.article-frame-logo .article-frame .article-image {
    margin: 20px 0 10px 0;
    text-align: left;
    overflow: hidden;
    max-width: 100%;
}

@media screen and (max-width: 500px) {
    .article-frame-logo .article-frame .article-image {
        margin: 20px 0 0 0;
    }
}

.article-frame-logo .article-frame .article-image .el-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.article-frame-thumb .article-frame .article-image {
    margin-right: 20px;
    margin-top: 20px;
    height: 120px;
    width: 160px;
    float: left;
}

.article-frame-thumb .article-frame .article-image .el-image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.article-frame .article-image.article-list-image-logo {
    height: 231px;
}

@media screen and (max-width: 500px) {
    .article-frame .article-image.article-list-image-logo {
        max-height: 95px;
    }
}

.article-frame .article-image.article-list-image-cover {
    height: 500px;
}

@media screen and (max-width: 500px) {
    .article-frame .article-image.article-list-image-cover {
        max-height: 250px;
    }
}

@media screen and (max-width: 500px) {
    .article-frame .article-image.article-list-image-thumb {
        width: 120px;
    }
}

.article-tag {
    margin-top: 35px;
    margin-bottom: 40px;
    float: left;
    height: 41px;
    line-height: 29px;
}

@media screen and (max-width: 500px) {
    .article-tag {
        height: 20px;
        margin-top: 10px;
        margin-bottom: 0;
    }
}

.article-tag-text {
    color: var(--color-article-tab-date-preview);
}

.article-tag > div {
    padding-top: 5px;
}

.article-tag a {
    display: block;
}

.article-next {
    margin-top: 35px;
    margin-bottom: 40px;
    overflow: hidden;
    float: right;
}

@media screen and (max-width: 500px) {
    .article-next {
        margin-top: 0;
        margin-bottom: 20px;
    }
}

.article-next > a {
    padding: 5px 20px;
    background-color: var(--color-background-middle-button);
    border: 1px solid var(--color-background-middle-button-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-middle-button-text);
    text-decoration: none;
    margin-bottom: 10px;
}

.article-next > a:hover {
    background-color: var(--color-background-header);
    border: 1px solid var(--color-background-header);
    color: var(--color-header-text);
    cursor: pointer;
}

.article-next > a.article-next-next {
    float: left;
}

.article-next > a.article-next-prev {
    float: right;
}

.article-list-next {
    margin-top: 35px;
    margin-bottom: 40px;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    flex-wrap: wrap;
    float: right;
    overflow: visible;
}

@media screen and (max-width: 500px) {
    .article-list-next {
        margin-top: 0;
        margin-bottom: 20px;
    }
}

.article-list-next > a {
    padding: 4px 20px;
    background-color: var(--color-background-middle-button);
    border: 1px solid var(--color-background-middle-button-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-middle-button-text);
    text-decoration: none;
    margin-bottom: 10px;
}

.article-list-next > a:hover {
    background-color: var(--color-background-middle-button);
    cursor: pointer;
}

.article-list-next > a.article-next-next {
    float: left;
}

.article-list-next > a.article-next-prev {
    float: right;
}

.article-page-content {
    font-size: var(--font-size-18px);
    text-indent: 2em;
    line-height: 180%;
    margin-top: 20px;
}

.dropdown-pagination-jump .el-button {
    background-color: var(--color-background-middle-button);
    border: 1px solid var(--color-background-middle-button-border);
    color: var(--color-middle-button-text);
    position: relative;
    top: 0;
}

.article {
    margin-top: 10px;
    overflow-x: hidden;
}

.article-say {
    position: relative;
}

.article-say-title {
    margin-top: 25px;
    margin-bottom: 15px;
    cursor: pointer;
}

.article-say-title:hover {
    text-decoration: underline;
}

.article-say-text {
    width: calc(100% - 50px);
    padding: 10px 25px;
    font-size: var(--font-size-16px);
}

.article-say-text a {
    font-size: var(--font-size-16px);
}

.article-say-text-underline {
    color: var(--color-main-text);
    border-bottom: 1px dashed var(--color-article-tab-date-preview);
    line-height: 230%;
    padding-bottom: 2px;
}

.article-say-quote {
    font-size: var(--font-size-20px);
    color: var(--color-main-text);
}

.article-say-quote-left {
    position: absolute;
    top: 0;
    left: 0;
}

.article-say-quote-right {
    position: absolute;
    bottom: 0;
    right: 0;
}
.center {
    margin-top: 20px;
}

.skin-center-container {

}

.skin-center-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

@media screen and (max-width: 500px) {
    .skin-center-list {
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 500px) {
    .skin-center-list .el-card__body {
        padding: 15px;
    }
}

.skin-center-card {
    position: relative;
}

.skin-center-card-author {
    font-size: var(--font-size-14px);
    color: var(--color-gray);
    margin-bottom: 20px;
}

.skin-center-card-color {
    height: 50px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 12px;
    overflow: hidden;
}

@media screen and (max-width: 500px) {
    .skin-center-card-color {
        grid-template-columns: repeat(5, 1fr);
    }
}

.skin-center-card-use {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: var(--color-tag-green);
}

.skin-center-card-color > span {
    place-self: center;
    align-self: start;
    margin-bottom: 12px;
}

.skin-center-list-image {
    height: 115px;
}

@media screen and (max-width: 500px) {
    .skin-center-list-image {
        max-width: 100%;
        max-height: 100px;
    }
}

.config-skin-color-list {
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid var(--color-dark-gray);
}

.skin-center-color-list {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 1px solid var(--color-dark-gray);
}

@media screen and (max-width: 500px) {
    .skin-center-color-list {
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
}

.skin-center-card-install {
    overflow: hidden;
    margin-top: 10px;
}

.skin-center-card-preview {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
}

@media screen and (max-width: 500px) {
    .note-list .el-table .cell {
        padding-right: 0;
        padding-left: 0;
    }
}

.el-button + .el-button {
    margin-left: initial;
}

.article-form .el-tabs__nav-wrap {
    width: 220px;
}

.article-form .el-tabs__item {
    padding: 0 15px;
}

.article-form-title, .article-form-content .el-textarea__inner {
    font-size: var(--font-size-14px);
}

.article-form-title .el-input__inner {
    height: 35px;
}

.article-form .el-upload-dragger .el-icon-upload {
    margin-top: 20px;
}

.article-form .el-upload__tip {
    margin-top: 0;
}

.el-tabs__active-bar {
    background-color: var(--color-background-article-ol-comment);
}

body.body .el-link.is-underline::after {
    border-bottom: 0;
}

.el-link.el-link--primary {
    color: #409eff;
}

.el-link.el-link--warning {
    color: #ebb563;
}

.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon {
    display: initial;
}

*:focus {
    outline: 0 !important;
}

.el-link.is-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid var(--el-color-info);;
}

.el-link.el-link--primary.is-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid var(--el-color-primary);;
}

.el-link.el-link--info.is-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid var(--el-color-info);;
}

.el-link.el-link--success.is-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid var(--el-color-success);;
}

.el-link.el-link--warning.is-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid var(--el-color-warning);;
}

.el-link.el-link--danger.is-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid var(--el-color-danger);;
}

@media screen and (max-width: 500px) {
    .el-form-item__content {
        max-width: 100%;
    }
}

.el-message-box {
    max-width: 90%;
    width: 500px;
}

.el-message {
    max-width: 90%;
}

@media screen and (max-width: 500px) {
    .el-message {
        min-width: 320px;
    }
}

.hack-tag-block-text-button {
    position: relative;
    top: -2px;
}

.el-form-item__label {
    color: var(--color-main-text);
}

.el-radio__label {
    color: var(--color-main-text);
}

.el-radio.el-radio--large {
    height: 31px;
}

.el-input-group--append > .el-input__wrapper {
    border-bottom-right-radius: var(--el-input-border-radius);
    border-top-right-radius: var(--el-input-border-radius);
}

.el-badge__content {
    height: calc(var(--el-badge-size) + 2px);
}

.el-badge__content.is-fixed {
    top: 1px;
}

.el-pagination button, .el-pagination li {
    background-color: var(--color-background-middle-button) !important;
    color: var(--color-middle-button-text) !important;
}

.el-pagination button:hover, .el-pagination li:hover {
    background-color: var(--color-background-header) !important;
    color: var(--color-header-text) !important;
    cursor: pointer;
}
@-moz-document url-prefix() {
    :root {
        --height-tag-small: 25px;
    }

    .duck-image {
        bottom: 17px;
    }

    .comment-date {
        margin-top: 1px;
    }
    .comment-button-reply .el-tag.el-tag--info i.fa {
        top: 0;
    }
    .comment-name {
        height: 22px;
    }

    .hack-tag-block-text-button {
        top: -4px;
    }

    .tag-radius.el-button {
        line-height: 24px;
        padding: 1px 10px 1px 10px !important;
    }

    .comment-name .el-tag {
        bottom: 2px;
    }

    .markdown-css h3 {
        padding: 17px 5px 14px 15px !important;
    }

    @media screen and (max-width: 500px) {
        .markdown-css h3 {
            padding: 17px 5px 12px 15px !important;
        }
    }

    .markdown-css h3:before {
        top: -2px !important;
    }

    .markdown-css h3:before {
        background-position: 0 1px !important;
    }
    @media screen and (max-width: 500px) {
        .markdown-css h3:before {
            background-position: 0 -2px !important;
        }
    }

    .el-input-group--prepend > .el-input__wrapper, .el-input-group__append {
        padding: 1px 11px 0 11px;
    }

    .tag-radius i {
        position: relative;
        top: 0;
    }
}

.markdown-css {
    font-size: var(--font-size-18px);
    color: var(--color-main-text);
}

@media screen and (max-width: 500px) {
    .markdown-css {
        margin-left: 0;
        margin-top: 15px;
    }
}

.markdown-css > p {
    color: var(--color-main-text);
    text-indent: 2em;
    line-height: 190%;
    font-size: var(--font-size-18px);
}

@media screen and (max-width: 500px) {
    .markdown-css > p {
        font-size: var(--font-size-16px);
    }
}

.markdown-css ol {
    background-color: var(--color-background-article-ol-comment);
    *white-space: normal;
    line-height: 30%;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 6px;
    padding: 20px 0 15px 25px;
    border-left: 6px solid var(--color-article-code-area-border-left);
}

.markdown-css ol li {
    font-size: var(--font-size-18px);
    color: var(--color-main-text);
    border-radius: 6px;
    margin-left: 15px;
    padding: 0 15px 8px 0;
    line-height: 160%;
}

@media screen and (max-width: 500px) {
    .markdown-css ol li {
        font-size: var(--font-size-16px);
    }
}

.markdown-css pre {
    margin-left: 0;
    margin-top: 25px;
    margin-bottom: 25px;
    background-color: var(--color-background-article-ol-comment);
    color: var(--color-main-text);
    padding: 20px 15px 20px 25px;
    border-left: 6px solid var(--color-article-code-area-border-left);
    *white-space: normal;
    line-height: 190%;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 6px;
    font-size: var(--font-size-18px);
}

@media screen and (max-width: 500px) {
    .markdown-css pre {
        font-size: var(--font-size-16px);
    }
}

.markdown-css pre code[class] {
    font-size: var(--font-size-14px);
}

@media screen and (max-width: 500px) {
    .markdown-css pre code[class] {
        margin: 0;
        padding: 15px 5px 15px 15px;
        font-size: var(--font-size-12px);
    }
}

.markdown-css .article-emotion {
    position: relative;
    top: 8px;
}

.markdown-css a {
    color: var(--color-article-link);
    text-underline-offset: 2px;
}

.markdown-css a:hover {
    color: var(--color-main-text);
}

.markdown-css ul {
    color: var(--color-main-text);
    list-style: none;
    padding-inline-start: 1em;
    line-height: 180%;
}

.markdown-css ul li {
    margin: 10px 0;
    line-height: 180%;
}

.markdown-css li::marker {
    margin-left: 5px;
}


.markdown-css ul input:disabled {
    margin-right: 10px;
}

.markdown-css ul li p {
    margin: 0;
    font-size: var(--font-size-16px);
}

.markdown-css > p > code {
    border-radius: 15px;
    background-color: var(--color-background-article-tag);
    color: var(--color-background-main-area);
    font-size: var(--font-size-16px);
    padding: 3px 15px 3px 15px;
    margin: 0 10px;
}

.markdown-css > p > div.article-image-light-box {
    width: calc(100%);
    margin-top: 20px;
    margin-bottom: 20px;
}

@media screen and (max-width: 500px) {
    .markdown-css > p > div.article-image-light-box {
        margin-top: 10px;
        margin-bottom: 5px;
        width: calc(100%);
    }
}

.markdown-css > p > div.article-image-light-box > img {
    width: initial;
    max-width: 100%;
    max-height: 700px;
    border-radius: 4px;
}

.markdown-css > p:has(img:not(.article-emotion)) {
    text-indent: 0;
}

.markdown-css > p > img:not(.article-emotion) {
    width: initial;
    max-width: 100%;
    max-height: 700px;
    border-radius: 4px;
}

.markdown-css > p:has(div.article-image-light-box) {
    text-indent: 0;
}

.markdown-css tr, .markdown-css td, .markdown-css th {
    text-align: left;
    border: 1px solid var(--color-main-text);
    padding: 8px;
    min-width: 120px;
    border-left: 1px solid var(--color-main-text);
    border-bottom: 1px solid var(--color-main-text);
    font-size: var(--font-size-16px);
    margin: 0;
    overflow: visible;
}

.markdown-css .table {
    overflow-x: auto;
}

.markdown-css table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
    margin-top: 25px;
    margin-bottom: 10px;
}

.markdown-css table td p {
    margin: 0;
}

.markdown-css table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.markdown-css table thead {
    text-align: left;
    vertical-align: bottom;
}

@keyframes hover-color {
    from {
        border-color: #c0c0c0;
    }
    to {
        border-color: #29A176;
    }
}

.markdown-css h1 {
    color: var(--color-main-text);
}

.markdown-css h2 {
    color: var(--color-main-text);
}

.markdown-css h3 {
    color: var(--color-main-text);
    padding: 15px 5px 14px 15px;
    background-color: var(--color-background-article-ol-comment);
    font-weight: 400;
    margin-top: 60px;
    margin-bottom: 30px;
    border-radius: 4px;
}

@media screen and (max-width: 500px) {
    .markdown-css h3 {
        padding: 16px 5px 10px 15px;
    }
}

.markdown-css h3:before {
    display: inline-block;
    background-repeat: no-repeat;
    content: "";
    background-image: url(data:image/png;base64,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);
    background-position: 0 1px;
    background-size: 32px 32px;
    margin-top: -2px;
    width: 32px;
    height: 32px;
    font-size: 26px;
    margin-right: 10px;
    vertical-align: top;
}

@media screen and (max-width: 500px) {
    .markdown-css h3:before {
        background-position: 0 -2px;
        margin-top: -2px;
    }
}

.markdown-css h4 {
    color: var(--color-main-text);
}

.markdown-css h5 {
    color: var(--color-main-text);
}

.markdown-css h6 {
    color: var(--color-main-text);
}

.markdown-css .checkbox {

}

.markdown-css hr {
    padding: 10px 0 20px 0;
    border: 0;
    border-bottom: 1px dashed var(--color-main-text);
    margin-bottom: 50px;
}

.markdown-css .article-markdown {
    font-size: var(--font-size-18px);
    line-height: 180%;
    color: var(--color-main-text);
}

@media screen and (max-width: 500px) {
    .markdown-css .article-markdown {
        font-size: var(--font-size-16px);
    }
}

.markdown-css.article-summary {
    font-size: var(--font-size-18px);
    line-height: 180%;
    color: var(--color-main-text);
    background-color: var(--color-background-article-ol-comment);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.markdown-css.article-summary > code {
    border-radius: 4px;
    background-color: var(--color-background-article-tag);
    color: var(--color-background-main-area);
    font-size: var(--font-size-16px);
    padding: 3px 15px 3px 15px;
    margin: 0 10px;
}

@media screen and (max-width: 500px) {
    .markdown-css pre code[class] {
        padding: 0;
    }
}

.markdown-css .article-bili {
    margin-top: 30px;
    margin-bottom: 10px;
}

.markdown-css {
    font-size: var(--font-size-18px) !important;
}

@media screen and (max-width: 500px) {
    .markdown-css {
        font-size: var(--font-size-16px) !important;
    }
}

.body-export .el-popper.is-pure.is-light.el-dropdown__popper {
    inset: 74px auto auto calc(50% + 280px) !important;
    display: none;
}

@media screen and (max-width: 1050px) {
    .body-export .el-popper.is-pure.is-light.el-dropdown__popper {
        inset: 74px auto auto calc(100% - 195px) !important;
    }
}

@font-face {
  font-family: 'Mona-Regular-2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/staticDir/fonts/Mona-Regular-2.1bd25692.ttf) format('ttf');
}

:root {
  --color-site-rice: #FFFDF7;
  --color-site-orange: #99D6EA;
  --color-site-darkblue: #6798C0;
  --color-site-graygreen: #FDD85D;
  --color-site-rice-dark: #FDC921;
}


.site-friend-link {
    margin-bottom: 20px;
    overflow: hidden;
    line-height: 175%;
}

.site-friend-link div {
    position: relative;
    float: left;
    width: 27%;
    margin: 12px 2.1% !important;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #d1c7b7;
    background-color: #fffef9;
    overflow: visible;
    min-height: 60px;
}

@media screen and (max-width: 500px) {
    .site-friend-link div {
        width: 88%;
    }
}

.site-friend-link-others {
    margin-bottom: 20px;
    overflow: hidden;
    line-height: 175%;
}

.site-friend-link-others div {
    position: relative;
    float: left;
    width: 228px;
    margin: 12px 12px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #d1c7b7;
    background-color: #fffef9;
    overflow: visible;
    min-height: 60px;
}

@media screen and (max-width: 500px) {
    .site-friend-link-others div {
        width: 90%;
    }
}

.site-friend-link-image {
    float: left;
    width: 50px;
    height: 50px !important;
    border-radius: 25px;
    margin-top: 5px;
}

.site-friend-link-name {
    float: left;
    width: calc(100% - 65px);
    text-align: left;
    padding-left: 15px;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333;
    text-decoration: none;
    text-indent: 0em;
}

.site-friend-link-into {
    float: left;
    width: calc(100% - 65px);
    text-align: left;
    padding-left: 15px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    text-indent: 0em;
}

.site-friend-link-count {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 8px;
    height: 14px;
    border-radius: 15px;
    background-color: #ff7d1e;
    color: white !important;
    font-size: 10px;
    padding-left: 5px;
}

.favorite-site a {
    color: var(--color-article-link);
    text-decoration: none;
}

.favorite-site a:hover {
    color: #666;
    text-decoration: underline;
}

.favorite-site p {
    color: var(--color-main-text);
    text-indent: 2em;
}

.article-page-content hr {
    border-bottom: 1px solid #ddd;
    border-top: 0;
    margin-bottom: 20px;
}