:root {
    --shadow: 0 7px 10px rgba(0,0,0,0.6);
}
.adopter-content-box {
    overflow: visible;
}
    .adopter-content-box .adopter-content {
        position: relative;
        z-index: 2;
    }
.adopter-title {
    color: var(--bg-yxzx-txt-color);
}
.banner {
    aspect-ratio: 1300/492;
    position: relative;
/*    background: url('/imgs/adoptdetails/banner.png') no-repeat;
    background-size: cover;*/
    overflow: hidden;
    border-radius: 20px;
    color: var(--bs-saietpublid) !important;
}
.banner-bg {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 160%; /* 根据图片和视觉需要调整 130%~200% */
    bottom: 0; /* 初始显示图片底部 */
    transform: translateY(0); /* 动态用 GSAP 改 y（像素或 yPercent） */
    background-image: url('/imgs/adoptdetails/banner.png');
    background-size: cover;
    background-position: center bottom;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

/* 内容层放在背景之上 */
.banner > .d-flex {
    position: relative;
    z-index: 1;
}
.msfc-left-box {
    width: 27.1%;
}
.adopt-message-content-box {
    --min-col-width: 250px;
    --gap-size: 5.6%;
    column-gap: var(--gap-size);
    row-gap: clamp(14px, 2.8vw, 40px);
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.play_btn {
    width: 8.2%;
}
@media (max-width: 747px) {
    .adopt-message-content-box {
        grid-template-columns: 1fr;
    }
}

.card_list {
    box-shadow: 0px 4px 25px 1px rgba(140,85,24,0.19);
    border: 2px solid var(--bg-yxzx-txt-color);
}
    .card_list::before {
        content: "";
        position: absolute;
        left: -5px;
        top: -5px;
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        pointer-events: none;
        z-index: 10;
        background-repeat: no-repeat;
        background: radial-gradient(circle 5px at 5px 5px, var(--bg-yxzx-txt-color) 100%, transparent 0), radial-gradient(circle 5px at calc(100% - 5px) 5px, var(--bg-yxzx-txt-color) 100%, transparent 0), radial-gradient(circle 5px at 5px calc(100% - 5px), var(--bg-yxzx-txt-color) 100%, transparent 0), radial-gradient(circle 5px at calc(100% - 5px) calc(100% - 5px), var(--bg-yxzx-txt-color) 100%, transparent 0);
    }
.card-item-left{
    width:48.76% !important;
}
.card-item-right {
    width: 45% !important;
    color: var(--bg-adopt-message-color);
}


.content-3 {
    width: 100%;
    height: 942px;
    background: url('/imgs/adoptdetails/background-5.png') no-repeat;
    background-size: 100% 942px;
    overflow: hidden;
    position: relative;
    z-index: 9;
}

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

.fy-box {
    position: relative;
    transform: scale(0.8) !important;
    transition: all 600ms ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .fy-box .swiper-show-img {
        width: 100%;
/*        aspect-ratio: 370/348;*/
        border-radius: 1rem;
        -webkit-user-drag: none;
/*        height: 100%;*/
/*        object-fit: cover;*/
/*        object-position: center;*/
    }
.active-slide {
    transform: scale(1) !important;
}
.money {
}

.banner_top {
}

    .banner_top div {
        margin: 0 10px;
    }

.banner_img {
    width: 100%;
    position: absolute;
    bottom: -1px;
}

.yinauspicious {
    width: 57px;
    height: 36px;
}

.elegance {
    width: 100%;
    height: 48em;
    background: url('/imgs/adoptdetails/background-6.png') no-repeat;
    background-size: 100% 48em;
    display: flex;
    align-items: center;
}

#pauseImg {
    /*    height: 90%;*/
}
#videoContainer {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.lefthover {
    width: 3.8125em;
    height: 3.8125em;
}

.righthover {
    width: 3.8125em;
    height: 3.8125em;
}

.lefthover_ {
    width: 3.8125em;
    height: 3.8125em;
    border-radius: 50%;
    padding: 5px;
    background-color: #666;
    /*    margin: 0 20px;*/
}

.righthover_ {
    width: 3.8125em;
    height: 3.8125em;
    border-radius: 50%;
    padding: 5px;
    background-color: #666;
    /*    margin: 0 20px;*/
}

.footer_img img {
    width: 364px;
    margin: 0 9px;
    /*    object-fit: contain;*/
}

.tab {
    position: relative;
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    background: url('/imgs/adoptdetails/btn-bg.png') no-repeat;
    background-size: 100% 100%;
    justify-content: center;
    align-items: center;
    color: var(--bs-saietpublid)!important;
}

    .tab:hover {
        transition: opacity 0.3s ease;
        background: url('/imgs/adoptdetails/btn-bg-hover.png') no-repeat;
        background-size: 100% 100%;
    }

        .tab:hover a {
            color: var(--bs-saietpublid) !important;
        }

/*        .tab:hover::before {
            content: '';
            position: absolute;
            left: 40px;
            width: 21px;
            height: 14px;
            background: url('/imgs/cypresscontent/tab.png') no-repeat;
            background-size: 21px 14px;
            z-index: 10;
        }

        .tab:hover::after {
            content: '';
            position: absolute;
            background: url('/imgs/cypresscontent/tab.png') no-repeat;
            background-size: 21px 14px;
            right: 40px;
            width: 21px;
            height: 14px;
            z-index: 10;
        }*/

#tabs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #F9F4E7;
    white-space: nowrap;
    overflow-x: auto;
    flex-flow: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: wrap;
}

.btn-img {
    width: 56px;
    height: 56px;
    display: inline-block;
    background-color: #000000;
    border-radius: 50%;
}

    .btn-img img {
        width: 56px;
        height: 56px;
    }

    .btn-img.disabled {
        width: 56px;
        height: 56px;
        background-color: #999999;
        border-radius: 50%;
    }

.gubai {
    position: relative;
    width: 100%;
    height: 676px;
    background: url('/imgs/handplantedcypress/border-2.png') no-repeat;
    background-size: 100% 676px;
    display: flex;
    padding: 50px;
    align-items: center;
    justify-content: space-between;
}

#content3 {
    /*    background: url('/imgs/adoptdetails/background-5.png') no-repeat;
    background-size: cover;*/
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(var(--bs-page-link-bg-base), 0.9);
}
.rights_bg {
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    inset: 0;
}

@media (max-width: 1150px) {
    .gushupng {
        width: 824px;
        height: 406px;
    }

    .gubai {
        position: relative;
        width: 100%;
        height: 506px;
        background: url('/imgs/handplantedcypress/border-2.png') no-repeat;
        background-size: 100% 506px;
        display: flex;
        padding: 20px;
        align-items: center;
        justify-content: space-around;
    }



    .lefthover {
        width: 30px;
        height: 30px;
    }

    .righthover {
        width: 30px;
        height: 30px;
    }

    .banner{
        aspect-ratio:auto;
        padding:30px 0;
    }
}
@media(max-width: 786px) {
    .msfc-left-box {
        width: 50%;
    }
}