.banner {
    width: 100%;
    height: auto;
}

.banner img {
    width: 100%;
}

.about-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 20px 0;
}

.about-container .list-container {
    width: 220px;
}

.about-container .list {
    width: 100%;
    background: #ffffff;
}

.about-container .list .title {
    width: 100%;
    padding: 20px;
    background-image: url("/static/assets/about-list-bg.png");
    background-size: 100% 100%; /* 撑开铺满，允许变形 */
    background-repeat: no-repeat; /* 背景图不重复 */
    background-position: center center; /* 背景图居中对齐 */
}

.about-container .list .title .cn {
    font-size: 1.2rem;
    font-weight: bold;
}

.about-container .list .title .en {
    font-size: .9rem;
    font-weight: bold;
    margin: 5px 0;
}

.about-container .list .list-box {
    width: 100%;
    border: 1px solid #dedede;
}

.about-container .list .list-box .list-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid #dedede;
}

.about-container .list .list-box .list-item .right-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #dedede;
}

.about-container .list .list-box .list-item {
    background: #ffffff;
    transition: all .2s ease-in-out;
}

.about-container .list .list-box .list-item:hover {
    background: #f9f9f9;
}

.about-container .list .list-box .list-item.active {
    background: #f6f6f6;
}

.about-container .list .list-box .list-item.active .right-icon {
    border-color: var(--global-primary-color);
}

.about-container .list .list-box .list-item .right-icon i {
    font-size: 10px;
}

.about-container .list .list-box .list-item.active .right-icon i {
    color: var(--global-primary-color);
}

.about-container .content-container {
    flex: 1;
    margin-left: 10px;
    border: 1px solid #dadada;
}

.about-container .content-container .crumbs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #dadada;
}

.about-container .content-container .crumbs .title {
    color: var(--global-primary-color);
    font-weight: bold;
    font-size: 1.3rem;
    position: relative;
}

.about-container .content-container .crumbs .title::after {
    content: "";
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -15px;
    left: 0;
    background-color: var(--global-primary-color);
}

.about-container .content-container .crumbs-contain img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.about-container .content-container .crumbs-contain {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-container .content-container .crumbs-contain a {
    transition: all .2s;
}

.about-container .content-container .crumbs-contain a:hover {
    color: var(--global-primary-color);
}

.about-container .content-container .crumbs-contain .crumbs-text .crumbs-text-text:not(:last-child)::after {
    content: ">>";
    margin: 0 3px;
}

.about-container .content-container .crumbs-contain .crumbs-text .crumbs-text-text:last-child {
    color: var(--global-primary-light-color);
    cursor: pointer;
}

.about-container .content-container .content {
    padding: 20px;
    box-sizing: border-box;
}

.about-container .content-container .content .title-container {
    border-bottom: 1px dashed #999999;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.about-container .content-container .content .title-container .title {
    color: #666666;
    font-size: 1.6rem;
}

.about-container .content-container .content .title-container .time {
    color: #999999;
    margin: 15px 0;
}

.about-container .content-container .content .content-text {
    padding: 30px 5px 5px 5px;
}

.about-container .list .list-box.contact-box {
    padding: 15px 0;
}

.about-container .list .list-box.contact-box img {
    width: 80%;
    margin: 10px 10%;
}

@media (max-width: 600px) {
    .about-container {
        flex-direction: column-reverse;
    }

    .about-container .content-container {
        width: 100%;
        margin: 0;
    }

    .about-container .content-container .crumbs {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-container .list-container {
        width: 100%;
        margin: 15px 0;
    }


    .about-container .content-container .crumbs .title::after {
        display: none;
    }


    .about-container .content-container .crumbs .title a::after {
        display: none;
    }
}