* {
    margin: 0;
    padding: 0;
}
html,body {
    font: normal 100% Tahoma, Helvetica, Arial, sans-serif;
}
body {
    --pc-width: 60%;
    --footer-height: 1rem;
    --main-color: #e11d48;
    /* --font-color: #303030; */
    --font-color: #24292f;
    /* --grey-color: #828a92; */
    --grey-color: #666;
    --nav-bg-color: #ffe4e6;
}
h1 {
    font-size: 1.5rem;
}
.clear-float {
    clear: both;
    height: 1px;
    border: none;
    background-color: none;
}

/* 面包屑 */
.breadcrumb {
    list-style: none;
    margin-bottom: 1.5rem;

    display: inline-flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.breadcrumb li {
    font-size: 0.875rem;
    color: var(--grey-color);

    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 0.4rem;
}
.breadcrumb a {
    font-size: 0.875rem;
    color: var(--main-color);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

header {
    width: 100%;
    height: var(--header-height);
    /* background: #3F3F3F; */
    /* background: #393D49; */
    /* border-bottom: 1px solid #eee; */
}
#header-center {
    height: var(--header-height);
    margin: 0 auto;
}

/* header nav {
    height: var(--header-height);
    float: right;
    /* background-color: aqua; */
/* }  */
/* header nav a {
    display: inline-block;
    line-height: var(--header-height);
    text-decoration: none;
    color: #ccc;
}
header nav a:hover {
    color: #fff;
} */
/* .nav-checked {
    color: #fff;
} */
.header-right {
    display: none;
}

#main {
    min-height: 50rem;
    height: auto;
}
#main main {
    height: 100%;
    float: left;
    min-height: 50rem;
    height: auto;
}
#main aside {
    height: 100%;
    float: right;
}
#main aside .aside-main {
    width: 100%;
    min-height: 5rem;
    max-height: 50rem;
    overflow-y: auto;
}

footer {
    width: 100%;
    min-height: var(--footer-height);
}
#footer-center {
    min-height: var(--footer-height);
    margin: 0 auto;
}
#footer-logo {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 6rem;
    margin-bottom: 2rem;
}
#footer-logo img {
    width: 8rem;
}
.languages {
    width: 100%;
    text-align: center;
}
.languages a {
    display: inline-block;
    padding: 0 0.5rem;
    text-decoration: none;
    color: var(--grey-color);
    font-size: 0.75rem;
}
.languages .current-lang {
    color: #bbb;
}
.languages a:hover {
    color: var(--main-color);
}
.more-info {
    width: 100%;
    text-align: center;
    margin: 1rem auto;
}
.more-info a {
    display: inline-block;
    text-decoration: none;
    color: var(--grey-color);
    font-size: 0.75rem;
}
.more-info a:hover {
    /* text-decoration: underline; */
    color: var(--main-color);
}
.copyright {
    width: 100%;
    text-align: center;
    color: var(--grey-color);
    font-size: 0.75rem;
}
.copyright-nocookie {
    margin-bottom: 1.5rem;
}
#accept-cookie {
    width: 100%;
    min-height: 1rem;
    display: none;
    background-color: #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
#accept-cookie p {
    padding-left: 1rem;
    padding-right: 1rem;
    color: #3f4246;
}
#accept-cookie p a {
    color: var(--main-color);
}
#accept-cookie div a {
    background: var(--main-color);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
}
.explore-articles h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
}
.explore-articles h2 {
    font-size: 1rem;
    margin-bottom: 0.875rem;
}
.explore-articles ul {
    font-size: 0.875rem;
    margin-bottom: 2rem;
    margin-left: 2rem;
}
.explore-articles li {
    margin-bottom: 0.5rem;
}
.explore-articles a {
    color: var(--main-color);
    text-decoration: none;
}
.explore-articles a:hover {
    text-decoration: underline;
}

/************ 首页 main 区块 start *************/
.article-tag-name {
    margin: 0 auto;
    margin-bottom: 2rem;
}
/* .article-item { */
    /* min-height: var(--article-item-height); */
    /* background-color: #bbb; */
/* } */
.article-item-a {
    /* color: var(--font-color); */
    text-decoration: none;
}
.article-item-left {
    /* width: 70%; */
    float: left;
    /* min-height: var(--article-item-height); */
    /* background-color: pink; */
}

.article-item-title-default {
    color: var(--font-color);
}
.article-item-title-mouseover {
    color: var(--main-color);
}

.article-item-more-info {
    width: 96%;
    font-size: 0.75rem;
    color: var(--grey-color);
}
.article-item-more-info span {
    display: block;
    float: left;
}

/* .article-item-created-at { */
    /* line-height: 3rem; */
    /* width: 96%;
    font-size: 0.75rem;
    color: var(--grey-color); */
/* } */
.article-item-right {
    /* width: 30%; */
    float: left;
    overflow: hidden;
	text-align: center;
    /* min-height: var(--article-item-height); */
    /* background-color: goldenrod; */
}
.article-item-right img {
    width: 100%;
    transition: all 0.6s; /* 设置动画执行的时间为0.6s */
    cursor: pointer;
    /* margin-top: 0.9rem; */
    /* height: 9rem; */
}
.article-item-right img:hover {
    transform: scale(1.2); /*设置图片按照比例放大1.2倍*/
}
.article-item-hr {
    background-color: #eee;
    height: 1px;
    border: none;
}
.no-more-articles {
    display: none;
    width: 100%;
    margin-bottom: 4rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--grey-color);
}
/************ 首页 main 区块 finish *************/


/************ tags main 区块 start *************/
.article-tags {
    width: 100%;
    height: auto;
}
.article-tags a {
    color: var(--font-color);
    text-decoration: none;
    display: inline-block;
    padding: 0 2rem;
    line-height: 3rem;
}
.article-tags a:hover {
    color: var(--main-color);
    /* text-decoration: underline; */
}
/************ tags main 区块 finish *************/


/***** 文章详情 start *****/
.article-detail {
    height: auto;
}
.article-title {
    color: var(--font-color);
    font-weight: 500;
}
.article-info {
    width: 100%;
}
.article-info span {
    display: block;
    float: left;
    color: var(--grey-color);
}
.article-author-avatar img {
    border-radius: 2rem;
}
.article-author {
    margin-left: 0.5rem;
}
.article-author a {
    color: var(--grey-color);
    text-decoration: none;
}
.article-author a:hover {
    color: var(--main-color);
    text-decoration: underline;
}
.article-other-langs {
    color: var(--grey-color);
}
.article-other-langs a {
    text-decoration: none;
    color: var(--main-color);
}
.article-other-langs a:hover {
    text-decoration: underline;
}
.article-cover-image {
    margin: 1rem auto 1.5rem auto;
}
.article-cover-image img {
    width: 100%;
}
.article-abstract {
    color: var(--grey-color);
    text-align: left;
}
.article-content {
    color: var(--font-color);
    text-align: left;
    word-wrap: break-word;
}
.article-content p {
    line-height: 1.5;
    word-wrap: break-word;
    margin-bottom: 1rem;
}
.article-content img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.article-content a {
    color: var(--main-color);
    text-decoration: none;
}
.article-content a:hover {
    text-decoration: underline;
}
.article-content .simple-article-heading {
    margin-bottom: 2rem;
}
.article-content .simple-article-heading p {
    margin-bottom: 0.001rem !important;
}
.simple-article-heading .c-heading-li-3 {
    text-indent: 1.2rem;
}
.simple-article-heading .c-heading-li-4 {
    text-indent: 2.4rem;
}
.simple-article-heading .c-heading-li-5 {
    text-indent: 3.6rem;
}
.simple-article-heading .c-heading-li-6 {
    text-indent: 4.8rem;
}
.article-tags-list a {
    display: inline-block;
    color: var(--main-color);
    background-color: #fef2f2;
    text-decoration: none;
    border-radius: 2px;
}
.article-tags-list a:hover {
    background-color: var(--nav-bg-color)
}
.article-share-buttons {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}
.statement-note-button {
    text-align: center;
    color: #666;
    margin-top: 2rem;
}
.statement-note-button span {
    cursor: pointer;
}
.statement-note {
    text-align: center;
    font-size: 0.75rem;
    color: #666;
    display: none;
}
/***** 文章详情 finish *****/


/************ aside 区块 start *************/
aside .aside-card {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}
/* aside .first-card { */
    /* margin-top: 0.9rem; */
/* } */
.aside-card-img {
    width: 100%;
}
/************ aside 区块 finish *************/


/************ 作者页面 区块 start *************/
.author-info {
    width: 100%;
    height: auto;
    margin-bottom: 3rem;
}
.author-info .author-avatar {
    text-align: center;
    margin-bottom: 0.6rem;
}
.author-avatar img {
    width: 4rem;
    border-radius: 2rem;
}
.author-info .author-name {
    font-size: 1.5rem;
    color: #333;
    text-align: center;
}
/************ 作者页面 区块 finish *************/


/************ 关于我们等页面 start *************/
.service-info {
    height: auto;
    margin: 0 auto;
}
.service-info h1 {
    color: var(--font-color);
    text-align: center;
    line-height: 3rem;
    font-weight: 500;
}
.service-info-content {
    color: var(--font-color);
    text-align: left;
    word-wrap: break-word;
}
.service-info-content p {
    line-height: 1.5;
    word-wrap: break-word;
    margin-bottom: 1rem;
}
/************ 关于我们等页面 finish *************/


.loading-icon {
    display: none;
    text-align: center;
}