body {
    --header-height: 4.5rem;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 1px 1px 3px #eee;
}
#header-center {
    width: var(--pc-width);
}
.header-left {
    display: none;
}
#logo {
    width: 14%;
    height: var(--header-height);
    float: left;
    text-align: left;
}
#logo img {
    width: 94%;
    margin-top: 0.63rem;
}
/* #logo {
    width: 100%;
    height: var(--header-height);
    text-align: center;
}
#logo img {
    width: 10rem;
    margin-top: 0.9rem;
} */
.header-nav {
    width: 85%;
    height: var(--header-height);
    float: right;
}
.header-nav nav {
    margin-top: 1.1rem;
}
.header-nav nav a {
    display: inline-block;
    width: auto;
    padding: 0.5rem 0.8rem 0.5rem 0.8rem;
    text-align: center;
    border-radius: 2px;
    color: #333;
    font-size: 1rem;
    text-decoration: none;
}
.header-nav nav a:hover {
    background: var(--nav-bg-color);
    color: var(--main-color);
}
.nav-checked {
    background: var(--nav-bg-color);
    color: var(--main-color) !important;
}
/***** 以上是头部 *****/


/***** main区块 start *****/
#main {
    width: var(--pc-width);
    margin: 8rem auto 3rem auto;
}
#main main {
    width: 70%;
}
#main aside {
    width: 26%;
}
html {
    --article-item-height: 10.25rem;
}
.article-tag-name {
    width: 100%;
}
.article-item {
    width: 100%;
    /* min-height: var(--article-item-height); */
}
.article-item-left {
    width: 70%;
    /* min-height: var(--article-item-height); */
    /* background-color: pink; */
}
.article-item-title-div {
    width: 100%;
    height: 5rem;
    /* background-color: #eee; */
}
.article-item-title {
    width: 96%;
    line-height: 1.6rem;
    /* height: 3.25rem; */
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.article-item-abstract {
    /* line-height: 3rem; */
    width: 96%;
    /* height: 3.8rem; */
    font-size: 0.875rem;
    color: var(--grey-color);
    margin-top: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.article-item-more-info {
    margin-top: 0.6rem;
    height: 1.5rem;
}
.article-item-author-avatar img {
    width: 1.5rem;
    border-radius: 1rem;
}
.article-item-more-info span {
    line-height: 1.5rem;
}
.article-item-author-avatar {
    margin-right: 0.5rem;
}
.article-item-author {
    margin-right: 1.5rem;
}
/* .article-item-created-at { */
    /* line-height: 3rem; */
    /* margin-top: 0.8rem; */
/* } */
.article-item-right {
    width: 30%;
    /* min-height: var(--article-item-height); */
    /* background-color: goldenrod; */
}
.article-item-right img {
    width: 100%;
    /* margin-top: 0.9rem; */
    /* height: 9rem; */
}
.article-item-hr {
    width: 100%;
    margin: 2rem auto 2rem auto;
}
.no-more-articles {
    margin-top: 6rem;
}
/***** main区块 finish *****/


/***** 文章详情 start *****/
.article-detail {
    width: 100%;
    margin-top: 0.3rem;
}
.article-title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
}
.article-info {
    margin-bottom: 1rem;
    margin-top: 1.4rem;
    height: 2rem;
}
.article-info span {
    font-size: 0.875rem;
    height: 2rem;
    line-height: 2rem;
}
.article-author-avatar img {
    width: 2rem;
}
.article-created-at {
    margin-left: 1.5rem;
}
.article-read-time {
    margin-left: 1.5rem;
}
.article-other-langs {
    font-size: 0.875rem;
    margin-bottom: 1.2rem;
}
.article-other-langs a {
    font-size: 0.875rem;
}
.article-cover-image {
    margin: 1rem auto 1.5rem auto;
}
.article-abstract {
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.simple-article-heading a {
    font-size: 0.875rem;
}
.article-content h2 {
    padding-bottom: 0.6rem;
    font-size: 1.5rem;
    border-bottom: 1px solid #d8dee4;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}
.article-content h3 {
    font-size: 1.2rem;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}
.article-content h4 {
    font-size: 1rem;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}
.article-content ul {
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    line-height: 1.7;
}
.article-content ol {
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    line-height: 1.7;
}
.article-tags-list {
    margin: 2rem auto 1rem auto;
}
.article-tags-list a {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}
/***** 文章详情 finish *****/


/***** 右边卡片 start *****/
.right-card {
    width: 100%;
    min-height: 6rem;
    /* border: 1px solid #eee; */
}
.right-card-header {
    width: 100%;
    /* height: 3rem; */
    text-align: left;
    /* line-height: 3rem; */
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
    /* text-indent: 0.5rem; */
    /* border-bottom: 1px solid #eee; */
}
.card-articles li {
    list-style-type: none;
    margin-bottom: 0.6rem;
}
.card-articles a {
    color: var(--font-color);
    text-decoration: none;
    font-size: 0.875rem;
}
.card-articles a:hover {
    color: var(--main-color);
}
.article-heading-header {
    margin-bottom: 0 !important;
}
.article-heading-header h4 {
    font-weight: 500;
}
.article-heading p {
    /* font-size: 1.2rem; */
    /* line-height: 1.5rem; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article-heading .heading-li-2 {
    /* text-indent: 1rem; */
    margin-top: 1rem;
}
.article-heading .heading-li-3 {
    padding-left: 1rem;
    margin-top: 0.5rem;
}
.article-heading .heading-li-4 {
    padding-left: 2rem;
    margin-top: 0.5rem;
}
.article-heading .heading-li-5 {
    padding-left: 3rem;
    margin-top: 0.5rem;
}
.article-heading .heading-li-6 {
    padding-left: 4rem;
    margin-top: 0.5rem;
}
.article-heading li {
    list-style-type: none;
    margin-bottom: 0.5rem;
}
.article-heading a {
    text-decoration: none;
    font-size: 0.875rem;
}
.article-heading-a-unclicked {
    color: var(--font-color);
}
.article-heading-a-clicked {
    color: var(--main-color);
}
.article-heading a:hover {
    color: var(--main-color);
}
/***** 右边卡片 finish *****/


/***** footer start *****/
footer {
    margin-top: 10rem;
}
#footer-center {
    width: var(--pc-width);
}
.more-info a {
    padding: 0 1rem;
}
.copyright-cookie {
    margin-bottom: 4rem;
}
#accept-cookie p {
    width: auto;
    float: left;
    font-size: 0.875rem;
    /* height: 2rem; */
    line-height: 2rem;
}
#accept-cookie div {
    width: 10%;
    float: left;
    margin-left: 1rem;
}
#accept-cookie div a {
    display: block;
    width: 5rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.875rem;
}
/***** footer finish *****/

/************ 关于我们等页面 start *************/
.service-info {
    width: 100%;
}
.service-info div {
    margin-top: 2rem;
}
.service-info-content h2 {
    padding-bottom: 0.6rem;
    font-size: 1.5rem;
    border-bottom: 1px solid #d8dee4;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}
.service-info-content h3 {
    font-size: 1.2rem;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}
.service-info-content h4 {
    font-size: 1rem;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}
.service-info-content ul {
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    line-height: 1.7;
}
/************ 关于我们等页面 finish *************/

.loading-icon {
    margin-top: 6rem;
    margin-bottom: 3rem;
}
.loading-icon img {
    width: 3rem;
}