:root {
    --site-main-background-color: #ecebeb;
    --site-second-background-color: #dcdcdc;
    --site-main-color: #48474f;
    --site-second-color: #bd1932;
    --site-third-color: #656467;
}

.iconfont {
    font-size: inherit;
}

.site-link,
.site-link:hover {
    color: inherit;
    text-decoration: none;
}

.site-button {
    display: inline-block;
    padding: 4px 15px;
    border-radius: 15px / 50%;
    font-family: var(--site-sans-font-family);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
}

.en .site-button {
    letter-spacing: 0;
}

.site-button.site-button-default {
    background-color: var(--site-main-color);
    color: var(--site-main-background-color);
}

.site-button.site-button-secondary {
    background-color: var(--site-second-color);
    color: var(--site-main-background-color);
}

.site-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.site-panel,
.site-article {
    position: relative;
    padding: 40px 70px;
    background-color: var(--site-main-background-color);
    color: var(--site-main-color);
}

.site-panel.site-m-panel,
.site-article.site-m-article {
    padding: 20px 28px;
}

.site-panel-title {
    line-height: 1.5;
    font-family: var(--site-serif-font-family);
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
}

.en .site-panel-title {
    font-size: 32px;
    letter-spacing: 0;
}

.en .site-panel.site-m-panel .site-panel-title {
    font-size: 28px;
}

.site-panel-subtitle {
    line-height: 1.5;
    font-family: var(--site-serif-font-family);
    font-size: 25px;
    font-weight: 700;
}

.site-article .title {
    line-height: 1.5;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.en .site-article .title {
    font-size: 24px;
}

.site-article .subtitle {
    margin-top: 10px;
    line-height: 1.5;
    font-size: 20px;
    text-align: center;
}

.site-article.site-m-article .title {
    font-size: 25px;
}

.en .site-article.site-m-article .title {
    font-size: 22px;
}

.site-article .issue-date-and-source {
    margin-top: 10px;
    line-height: 1.5;
    font-size: 14px;
    text-align: center;
}

.site-article p {
    margin: 20px 0;
    line-height: 1.7;
    text-align: justify;
}

.site-article p img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

.site-article .attach-list {
    margin: 20px 0;
}

.site-article .attach-list li {
    margin: 5px 0;
    line-height: 1.5;
}

.site-article .attach-list .icon-download {
    color: var(--site-second-color);
}

.site-article .attach-list .site-link:hover {
    text-decoration: underline;
}

.site-article .relation-list {
    margin: 20px 0;
}

.site-article .relation-list li {
    margin: 5px 0;
    line-height: 1.5;
}

.site-article .relation-list li:first-child {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 500;
}

.site-article .relation-list .site-link:hover {
    text-decoration: underline;
}

.site-article .relation-list .issue-date {
    margin-left: 10px;
    white-space: nowrap;
}

.site-box {
    display: block;
    position: relative;
}

.site-box::before {
    content: '';
    float: left;
}

.site-box::after {
    content: '';
    display: table;
    clear: both;
}

.site-box .site-box-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.site-box.site-box-3-1::before {
    padding-top: calc(100% * 1 / 3);
}

.site-box.site-box-16-7::before {
    padding-top: calc(100% * 7 / 16);
}

.site-box.site-box-16-9::before {
    padding-top: calc(100% * 9 / 16);
}

.site-box.site-box-16-10::before {
    padding-top: calc(100% * 10 / 16);
}

.site-box.site-box-1-1::before {
    padding-top: 100%;
}

.site-box.site-box-magazine::before {
    padding-top: calc(100% * 285 / 210);
}

.site-box.site-box-9-16::before {
    padding-top: calc(100% * 16 / 9);
}

.site-box.site-box-1-3::before {
    padding-top: calc(100% * 3 / 1);
}

.site-status {
    position: relative;
    padding: 20px 0;
}

.site-status.site-m-status {
    padding: 10px 0;
}

.site-status .spinner {
    text-align: center;
}

.site-status .trigger {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 30px;
    transform: translate(-50%, -50%);
}

.site-status .no-more {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 14px;
    color: var(--site-third-color);
    transform: translate(-50%, -50%);
}

.site-status .no-more.show {
    display: block;
}

.site-section-nav {
    display: flex;
    justify-content: center;
    background-color: var(--site-main-background-color);
    font-size: 20px;
    color: var(--site-main-color);
}

.site-section-nav.site-m-section-nav {
    font-size: 16px;
}

.site-section-nav li {
    padding: 15px 30px;
}

.site-section-nav.site-m-section-nav li {
    padding: 8px;
}

.site-section-nav li.active,
.site-section-nav li:hover {
    background-color: var(--site-second-background-color);
    color: var(--site-second-color);
}

.site-wall-sizer,
.site-brick {
    width: calc((100% - var(--gutter-width) * (var(--columns) - 1)) / var(--columns));
}

.site-wall-gutter-sizer {
    width: var(--gutter-width);
}

.site-brick {
    margin-bottom: var(--gutter-width);
}

.site-loader {
    display: inline-block;
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid var(--site-second-color); /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: site-loader-spin 2s linear infinite;
}

@keyframes site-loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.jwz {
    display: inline !important;
    height: 1.5em !important;
    vertical-align: middle;
}

#antique-pagination-bar {
    text-align: center;
}

#antique-pagination-bar .layui-laypage a:hover {
    color: var(--site-second-color);
}

.add-to-my-art-trigger,
.add-to-my-art-trigger:hover {
    color: var(--site-second-color);
}

#my-art-box .site-dialog-content {
    min-width: 300px;
}

#my-art-box .title {
    padding: 15px 20px;
    background-color: #a28a6e;
    font-size: 16px;
    color: #fff;
}

#my-art-box .site-list {
    padding: 20px;
}

#my-art-box .site-list li {
    margin-bottom: 20px;
    font-size: 16px;
}

#my-art-box .site-list li:last-child {
    margin-bottom: 0;
}