p, span {
    word-wrap: break-word;
}
:root {
    --shadow: 0 7px 10px rgba(0,0,0,0.2);
}
.detail-content-box {
    overflow: visible;
}

    .detail-content-box .details-content {
        position: relative;
        z-index: 2;
        padding: clamp(15px, 3.5vw, 60px) clamp(20px, 6vw, 120px) clamp(20px, 6vw, 120px);
    }
.artwork-title {
    margin: 5.56rem 0 4.8rem 0;
}

.article-title {
    color: var(--bg-yxzx-txt-color);
}


.title_tet {
    color: var(--bs-culturehome-xszs-color);
    text-align: center;
    position: relative;
}

.lefttop_ {
    width: 3px;
    height: 80px;
    background: #8C5518;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.relatedlist {
    display: flex;
    background-color: #fff;
    align-items: center;
    position: relative;
    z-index: 2;
    margin: 5px 0;
}

.relatedtitle {
    padding-left: 40px;
    border-left: #EEEEEE 1px solid;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #333333;
}

.left_ {
    width: 5px;
    height: 5px;
    background-color: var(--bs-saiet-corol);
    position: absolute;
    left: 0;
    bottom: 0;
}

.right_ {
    width: 5px;
    height: 5px;
    background-color: var(--bs-saiet-corol);
    position: absolute;
    bottom: 0;
    right: 0;
}

.hidden {
    display: none
}

.referral_ {
    /*    background-image: var(--bg-image-url7);*/
    background-color: #f9f4e7;
}

.tab_2 {
    display: flex;
    justify-content: space-between;
    /*    padding: 15px;*/
    /*    border-bottom: 1px solid var(--bs-color-details);*/
}

    .tab_2:hover {
        /*        background-color: var(--bs-color-details);*/
    }

.relatedlist:hover .lefttop_ {
    width: 3px;
    height: 80px;
    background: #8C5518;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.relatedlist:hover .relatedtitle {
    font-weight: 700;
    font-size: 16px;
    color: #000;
}

.list_content:hover .text-muted {
    color: #333333 !important;
}



.arrowright_ {
    background-color: #A27541;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 5px;
    width: 44px;
    height: 44px;
}

    .arrowright_:hover {
        background-color: #8C5518;
    }

.arrowright :hover {
    background-color: var(--bs-color-details);
}

.content_img {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 绝对居中 */
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    content: url('/imgs/remains/grays.png');
}



.details_earphones {
    position: fixed;
    right: 20px;
    bottom: 196px;
    z-index: 10;
}

.contents_ {
    width: 60px;
    height: 60px;
    background-color: var(--bs-color-l);
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bs-whites);
    border-radius: 50%;
    word-wrap: break-word;
    font-size: 14px;
    text-align: center;
}
.bi-person-circle {
    transition:all 0.3s ease-in-out;
}
.content_ {
    width: 42px;
    height: 42px;
    background-color: var(--bs-color-l);
    margin-top: 15px;
    display: block;
    line-height: 42px;
    text-align: center;
    color: var(--bs-whites);
    border-radius: 50%;
    position: relative; /* 确保子元素绝对定位 */
}
    .content_ .bi-person-circle {
        color: var(--bs-saietpublid);
    }
    .content_:hover {
        width: 42px;
        height: 42px;
        background-color: var(--bs-whites);
        margin-top: 15px;
        color: var(--bs-color-g);
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加空白阴影 */
    }

        .content_:hover .text_ {
            color: var(--bs-color-l);
        }
        .content_:hover .bi-person-circle {
            color: var(--bs-page-link-bg);
        }

        .content_:hover .content_img_ {
            width: 24px;
            height: 24px;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 绝对居中 */
        }

        .content_:hover .content_img {
            display: none;
        }


.artwork-list-img {
    width: 100%;
    height: 35.16rem;
    margin-bottom: 2.69rem;
}

.PublicStyle_ {
    position: relative;
}

.PublicStyleab_ {
    width: 100%;
    position: absolute;
    bottom: 0px;
}

.carousel-indicators .active {
    transition: transform 0.3s;
    transform: scale(1.05);
    box-shadow: 0 0 0rem 0.3rem var(--bs-public);
}

.saient-artwork-item {
    overflow-x: visible;
    overflow-y: auto;
}

    .saient-artwork-item::-webkit-scrollbar {
        display: none;
    }

.carousel-control-prev-icon-custom {
    clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}

.carousel-control-next-icon-custom {
    clip-path: polygon(50% 50%, 0 0, 0 100%);
}

.carousel-control-next-icon-custom,
.carousel-control-prev-icon-custom {
    width: 4.19rem;
    height: 4.19rem;
    background: #AAAAAA;
}

.artwork-btn {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4.3rem;
}

.artwork-btn-right,
.artwork-btn-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .artwork-btn-left > button {
        width: 7.75rem;
        height: 2.88rem;
    }

        .artwork-btn-left > button:first-child {
            margin-right: 1.44rem;
        }

    .artwork-btn-right img {
        width: 2.25rem;
        height: 2.25rem;
    }

.artwork-btn-digit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 2.5rem;
}

.artwork-content-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--bs-link-color);
    margin-bottom: 1.5rem;
}

    .artwork-content-title span {
        font-weight: 400 !important;
    }

/* 作品简介 */
.artwork-content-intro {
    text-indent: 2rem;
    flex: 1;
}

/* 评论 */
.artwork-comment,
.user-comment-send {
    display: flex;
    flex-direction: column;
}

.user-comment-send {
    width: 100%;
    margin-bottom: 3.75rem;
}

.user-comment-item-left img,
.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-right: 1.6rem;
}

.user-send-btn > button {
    width: 6.13rem;
    height: 2.188rem;
    border-radius: .313rem;
    background-color: var(--bs-public);
    border: 0 !important;
    color: var(--bs-whites);
    font-size: 1rem;
    font-weight: 400;
}

.user-send-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.artwork-comment-list {
    display: flex;
    flex-direction: column;
}

    .artwork-comment-list p {
        margin-bottom: 0 !important;
    }

.user-comment-item {
    justify-content: space-between;
    padding-bottom: 2rem;
}

.user-comment-item,
.user-comment-item-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}


    .user-comment-item-left img {
    }

.user-comment-first {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    font-weight: 400;
}

    .user-comment-first .user-self {
        color: #2266CB;
    }

    .user-comment-first .user-info {
        color: #AAAAAA !important;
        font-size: .88rem !important;
    }

    .user-comment-first .user-self > span {
        color: var(--bs-link-color) !important;
    }

.user-comment-item-btn img {
    width: 1.38rem;
    height: 1.38rem;
    margin-left: 1rem;
}

.user-comment-second {
    margin-left: 5.25rem;
}

/* 海报 */
.modal-canvas-custom { /* position: relative; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.canvas-closed-custom {
    width: 2rem;
    height: 2rem;
    z-index: 1;
    margin: -.4rem -.4rem 0 auto;
    position: absolute;
    top: 1.375rem;
    right: 1.375rem;
}

.artworkCanvas {
    width: 36.6rem;
    height: 45.6rem;
}

.canvas-btns {
    position: absolute;
    bottom: -5rem;
    right: .63rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .canvas-btns .canvas-btn-item {
        width: 4.4rem;
        height: 4.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 50%;
        margin-left: .75rem;
    }

        .canvas-btns .canvas-btn-item img {
            width: 2.5rem;
            height: 2.5rem;
        }


/* 定义小于等于991.98px的样式，即：0~991.98px范围内 */
@media (max-width: 991.98px) {
    .artwork-list-detail {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .carousel-slide-custom {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .artwork-list-img-pc-h5 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 50rem;
    }

    .artwork-list-img .artwork-img-large {
        width: 100%;
        height: 35.16rem; /* border-radius: .63rem; */
    }

    /* 滚动图 */
    .carousel-inner {
        display: flex;
        flex-direction: row;
        width: 50rem;
        overflow: hidden;
    }

    .carousel-row-custom {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .carousel-inner > .carousel-row-custom {
        transition: transform 0.5s ease;
        width: 100%; /* 3张图片 */
    }

        .carousel-inner > .carousel-row-custom > .col {
            flex: 0 0 33.333%; /* 每张图片占33.33% */
            padding: 0 1rem;
        }

    /* 滚动图 */
    .artwork-content-padding-pc-h5 {
        padding: 0 2rem;
    }

    /* 评论 */
    .artwork-comment {
        width: 100%;
        padding: 0 2rem;
        margin-top: 3.75rem;
    }
}

/* 定义某一区间: 大于991.98px的样式*/
@media (min-width: 991.98px) {
    .artwork-list-detail {
        display: flex;
        flex-direction: column;
    }

    .carousel-slide-custom {
        max-width: 16.25rem;
    }

    .artwork-list-img-pc-h5 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .artwork-list-img .artwork-img-large {
        width: 62.5rem;
        height: 35.16rem;
        border-radius: .63rem;
    }

    /* 滚动图 */
    .carousel-inner {
        display: flex;
        flex-direction: column;
        max-height: 28.6rem;
    }

    .carousel-row-custom {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .carousel-inner > .carousel-row-custom {
        transition: transform 0.5s ease;
        height: 100%; /* 3张图片 */
    }

        .carousel-inner > .carousel-row-custom > .col {
            flex: 33.333% 0 0; /* 每张图片占33.33% */
            padding: .7rem 0;
        }

    .carousel-control-next-custom,
    .carousel-control-prev-custom {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    .carousel-control-prev-custom {
        top: -2.7rem;
    }

    .carousel-control-next-custom {
        bottom: -2.7rem;
    }

    .carousel-control-prev-icon-custom {
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .carousel-control-next-icon-custom {
        clip-path: polygon(100% 0%, 50% 100%, 0% 0%);
    }

    .carousel-control-next-icon-custom,
    .carousel-control-prev-icon-custom {
        width: 4.19rem;
        height: 2.1rem;
        background: #AAAAAA;
    }

    /* 评论 */
    .artwork-comment {
        width: 64rem;
        margin-top: 3.75rem;
    }
}

@media (max-width: 800px) {
    .content_img {
        width: 24px;
        height: 24px;
    }

    .details_earphones {
        position: fixed;
        right: 20px;
        bottom: 136px;
    }

    .content_ {
        width: 2.75rem;
        height: 2.75rem;
        background-color: var(--bs-color-l);
        margin-top: 15px;
        display: block;
        line-height: 2.75rem;
        text-align: center;
        color: var(--bs-whites);
        border-radius: 50%;
        position: relative; /* 确保子元素绝对定位 */
    }

        .content_:hover {
            width: 2.75rem;
            height: 2.75rem;
            background-color: var(--bs-whites);
            margin-top: 15px;
            color: var(--bs-color-g);
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加空白阴影 */
        }

            .content_:hover .text_ {
                color: var(--bs-color-l);
            }

            .content_:hover .content_img_ {
                width: 24px;
                height: 24px;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); /* 绝对居中 */
            }

            .content_:hover .content_img {
                display: none;
            }
}