@charset "UTF-8";
.mizige_container {
    display: flex;
    width: 100%;
}

.mizige_left {
    position: relative;
    flex: 0 0 98px;
    height: 98px;
}

    .mizige_left .background {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .mizige_left .foreground {
        position: absolute;
        width: 100%;
        height: auto;
        max-width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .mizige_left img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mizige_right {
    flex: 1;
    padding: 0px 0px 0px 15px;
}

    .mizige_right p {
        font-size: 17px;
        margin-bottom: 5px;
    }


.tongyin-wrapper {
    max-width: 100%;
    margin: 0px 0px 10px 0px;
}

.tongyin_ul {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: flex-start;
}

.tongyin_li {
    box-sizing: border-box;
    width: 70px;
    padding: 8px 0px 5px 0px;
    border: 1px solid #c1bebe;
    border-radius: 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

    .tongyin_li .character {
        padding: 5px 0px 10px 0px;
        font-size: 2.5rem;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tongyin_li .stroke-count {
        font-size: 1.2rem;
        padding-top: 5px;
    }

    .tongyin_li .character a,
    .tongyin_li .character span {
        display: block;
        width: 100%;
        height: 100%;
    }


.ziti-wrapper {
    max-width: 100%;
}

.ziti-list {
    display: flex;
    gap: 20px;
}

.ziti-txt {
    padding-top: 10px;
}

.ziti-item {
    width: 100px;
    text-align: center;
    background: url("https://cisuo.com/zidian/image/mizige2.jpg") no-repeat center top;
    list-style: none;
}

.ziti-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .ziti-content img {
        max-height: 90px;
        object-fit: contain;
    }

.zi_container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

.zi_column {
    flex: 1;
    min-width: 300px;
    box-sizing: border-box;
}

.zi_item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

@media (max-width: 700px) {
    .zi_column {
        min-width: 100%;
    }
}