.blog-breadcrumb {
    align-items: center;
    color: rgba(var(--color-text));
    display: inline-flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.blog-breadcrumb-separator {
    margin: 0 10px;
}

/* 
.blogslist__title {
  margin-bottom: 60px;
}

@media (max-width: 959px) {
  .blogslist__title {
    margin-bottom: 30px;
  }
} */

.blogslist__list {
    display: grid;
    column-gap: 22px;
    row-gap: 50px;
    grid-template-columns: 1fr 1fr;
}

.blogslist__list .blogslist__item {
    grid-column: span 2;
}

@media (max-width: 959px) {
    .blogslist__list .blogslist__item {
        grid-column: span 2 !important;
    }
}

.blogslist__list--grid .blogslist__item {
    grid-column: span 1;
}

@media (min-width: 960px) {
    .blogslist__list--grid {
        grid-template-columns: repeat(var(--blog-list-columns, 2), 1fr);
    }
}

.blog-item-grid-list .blogslist__item {
    grid-column: span 2;
}

.blog-item-grid-list .blogslist__item:nth-child(3n - 1),
.blog-item-grid-list .blogslist__item:nth-child(3n) {
    grid-column: span 1;
}

/* blog dropdown */
.blog-drop {
    display: flex;
    width: 100%;
    margin-bottom: 40px;
}

.blog-dropdown>details {
    position: relative;
}

.blog-dropdown .blog-dropdown__container {
    border-radius: 10px;
    background: #F5F5F5;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.10);
    margin-top: 8px;
}


.blog-dropdown details>summary svg {
    transition: transform .2s ease;
}

.blog-dropdown details[open]>summary svg {
    transform: rotate(-180deg);
}

.blog-dropdown summary {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 16px;
    font-weight: 400;
}

.blog-dropdown details[open] {
    transition: all .4s ease;
}

.blog-dropdown details .container-box {
    /* animation: modalFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); */
    /* --modal-animation-name: modalFadeIn; */
    transition: all .4s ease;
    padding: 0px 16px;
}

.blog-dropdown details[open] .container-box {
    padding: 16px;
    /* transition: all .4s ease; */
}

.blog-dropdown .container-box .container-item a {
    display: block;
    width: 100%;
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    padding: 10px;
    border-radius: 8px;
}

@media (min-width:960px) {
    .blog-drop {
        justify-content: flex-end;
    }

    .blog-drop .blogslist__title {
        display: none;
    }

    .blog-dropdown.show-mobile {
        display: none;
    }

    .blog-dropdown {
        min-width: 268px;
        width: fit-content;
    }

    .blog-dropdown>details {
        position: relative;
    }

    .blog-dropdown summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #000;
        font-size: 16px;
        font-weight: 400;
        border: 1px solid #E1E3E6;
        background: #F5F5F5;
        padding: 14px 16px;
        border-radius: 10px;
    }

    .blog-dropdown .blog-dropdown__container {
        position: absolute;
        width: 100%;
        z-index: 2;
        border-radius: 10px;
        background: #F5F5F5;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.10);
        margin-top: 8px;
    }

    .blog-dropdown .container-box .container-item:hover {
        background: #FFF;
        border-radius: 8px;
    }

}

@media (max-width:959px) {
    .blog-drop {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .blog-dropdown.show-pc {
        display: none;
    }

    .blog-dropdown .container-box .container-item:active,
    .blog-dropdown .container-box .container-item.active {
        background: #FFF;
        border-radius: 8px;
    }

    .blog-dropdown summary>span {
        padding-right: 10px;
    }

    .blog-dropdown details .blog-drop-dialog.modal__content {
        background: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(2px);
    }

    .blog-dropdown .blog-dropdown__container {
        position: relative;
        width: 80%;
    }

    .blog-dropdown .blog-dropdown__container .modify-info__close {
        position: absolute;
        right: 0;
        top: -50px;
        background: transparent;
        border: none;
    }

    .blog-dropdown details[open] .modal__overlay::after {
        background-color: transparent;
    }
}

/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */