.banner {
    margin-bottom: 35px
}

.article {
    border-top: 1px solid var(--bg-light1);
    height: auto;
    margin-top: 30px;
    padding-top: 30px;
    display: flex
}

.article .left-container {
    width: 70%;
    height: auto;
    margin-bottom: 35px
}

.article .right-container {
    width: 30%;
    height: auto;
    margin-top: 80px;
    position: relative;
    margin-left: 35px
}

.article .left-container .post-container, .article .right-container .post-container {
    position: relative;
    width: 100%;
    border-bottom: 1px dashed var(--bg-light1);
    margin-bottom: 5px
}

.article .left-container .date-time, .article .right-container .date-time {
    font-size: .9rem
}
.article .left-container .post-container a{
    color:var(--textGreen)
}
.article .left-container .post-container a:hover{
    color:var(--mainColor)
}
.article .right-container .content h2 {
    font-size: 1.6rem
}

.article .left-container .content h3, .article .right-container .content h4 {
    font-size: 1.4rem
}

.article .left-container .image {
    display: block;
    margin: auto
}

.article .left-container table {
    width: 100%
}

.article .left-container table th {
    background: var(--mainColor);
    padding: 8px;
    text-align: left;
    color:#fff
}

.article .left-container table td {
    border: 1px solid var(--mainColor2);
    padding: 8px;
    font-size: 1rem
}

.article .right-container .widget {
    border: 1px solid var(--bg-light2);
    background: #fff
}

.article .right-container .widget h3 {
    text-align: center;
    font-weight: 300
}

.article .right-container .widget .content {
    padding: 0 20px;
    border-top: 1px solid var(--mainColor)
}

.article .right-container .widget .content p, .article .right-container .widget .content ul li {
    font-size: 1rem
}

.article .left-container .related-links, .article .left-container .table-contents {
    border: 1px solid var(--bg-light2);
    background: var(--bg-light3);
    display: block;
    position: relative;
    width: 100%;
    margin: 15px 0
}

.article .left-container .related-links h2, .article .left-container .table-contents h2 {
    margin-left: 2rem
}

.article .left-container .related-links ul, .article .left-container .table-contents ul {
    list-style-type: none
}

.article .left-container .related-links ul li::before, .article .left-container .table-contents ul li::before {
    color: inherit;
    content: "→";
    left: 0;
    margin-right: 5px;
    position: relative
}

.article .left-container .related-links ul li a, .article .left-container .table-contents ul li a {
    color: inherit;
    font-size: .98rem
}

@media screen and (max-width: 767px) {
    .article {
        display: block
    }

    .article .left-container, .article .right-container {
        width: auto
    }

    .article .right-container {
        margin-top: 0;
        margin-bottom: 35px;
        position: relative;
        margin-left: 0
    }

    h1 {
        font-size: 2rem
    }
}

.article .left-container .post-container img{ max-width: 100%; }