.toc-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.toc-container-title-name {
    font-family: var(--font-family-headline);
    font-size: 1.5rem;
    line-height: 100%;
}

.toc-item>ul {
    list-style: none;
    padding: 0;
}

.toc-item.toc-open>ul {
    max-height: none;
}

.toc-container ul {

    max-height: 0;
    list-style: none;
    overflow: hidden;
    transition: max-height 200ms ease-in-out;
}

.toc-level-2 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toc-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin: 0;
}

.toc-ul-level-2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toc-item-name {
    position: relative;
    display: flex;
    color: #666;
}

.toc-level-2 {
    margin-left: 1.75rem;
}

.hw-blog-cx .toc-item-name-level-2 a {
    color: #666;
}

.hw-blog-tech .toc-item-name-level-2 a,
.hw-blog-media .toc-item-name-level-2 a {
    color: #ffffff80;
}

.toc-item-name-level-3 a {
    color: var(--main-text-color);
}

.toc-item-name-level-2 a,
.toc-item-name-level-3 a {
    line-height: 140%;
}

.hw-blog-cx .toc-item.toc-active>div a {
    color: #0053D9;
}

.hw-blog-tech .toc-item.toc-active>div a,
.hw-blog-media .toc-item.toc-active>div a {
    color: #2377FF;
}

.toc-more {
    position: absolute;
    right: 100%;
    margin-right: 0.5rem;
}

.toc-more-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.3125rem;
    transition: transform 0.3s;
}

.toc-item.toc-open>div>div.toc-more .toc-more-container {
    transform: rotate(180deg);
}

@media (max-width: 992px) {
    .toc-container-title-name {
        font-size: 1.25rem;
    }

    .toc-item-name {
        font-size: 0.875rem;
    }


    .toc-item-name-level-3 a {
        font-size: 0.75rem;
    }
}