.carousel {
    position: relative;
    width: 100%;
    border-radius:5px;
    overflow: hidden; 
        box-shadow: 0 0 10px var(--main-shadow);
}

/* 轮播图右边伪类new */

 
.model-title-spx {
    width: 100%;
    height: 100%;
padding-left: 14px;
}
/* .ti-ul{
  background-color: var(--sizeColor);
  width: 100%;
  height: 100%; 
} */
.model-title-spx .ti-ul
.iobox{
 position: relative;
    border-radius: 5px;
    overflow: hidden;
    height:152px;
} 

/* 这个是一段标题，需要悬浮图片上方 */
 .textbox-title {
 color: #fff;
    line-height: 22px;
    font-size: 14px;
    position: absolute;
    height: 46px;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#10151a));
    background: linear-gradient(180deg, transparent, #10151a);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-line-clamp: 2;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    bottom: 0;
    padding: 0 12px 8px;
}

/* 图片父级元素 */
.model-title-spx .ti-ul .linenodeio {
    display: block;
    background-color: #769fff;
    width: 100%;
    height: 100%;
    vertical-align: top;
    -webkit-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.model-title-spx .ti-ul .linenodeio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}

.model-title-spx .ti-ul .linenodeio:hover img {
    transform: scale(1.5);
}

/* 轮播图右边end */ 
.carousel-container {
    display: flex;
}

.carousel-item {
    flex: 0 0 100%;
    position: relative;
    min-height: 320px;
}

.carousel-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}

.carousel-item .banner-container .banner-img:hover img {
    /* transform: scale(1.1); */
}

.carousel-caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    border-radius: 4px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    padding: 15px;
    transform: translateY(30px);
    opacity: 0;
    transition: all .6s cubic-bezier(.25, .46, .45, .94)
}

.carousel-caption.active {
    transform: translateY(0);
    opacity: 1
}

.carousel-caption h3 {
    margin-bottom: 10px;
    font-size: 2em;
    transform: translateX(-20px);
    transition: transform .4s .2s
}

.carousel-caption p {
    transform: translateX(20px);
    transition: transform .4s .3s
}

.carousel-caption.active h3,
.carousel-caption.active p {
    transform: translateX(0)
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(60 60 60 / 39%);
    color: #ffffff;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10;
    /* display: none; */
    opacity: 0;
    transition: opacity .3s
}

.carousel:hover .carousel-control {
    display: block;
    /* background: #fff; */
    opacity: 1;
    transform: translateY(-50%)scale(1.1)
}

.carousel-control.prev {
    left: 5px;
}

.carousel-control.next {
    right: 5px;
}

.carousel-indicators {
    position: absolute;
    bottom: 11px;
    right: -1px;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    align-items: center
}

.carousel-indicator {
    height: 4px;
    width: 4px;
    /* margin: 0 3px!important; */
    border-radius: 6px !important;
   backdrop-filter: saturate(180%) blur(16px);
    background-color: rgba(255, 255, 255, .8);
    vertical-align: top
}

.carousel-indicator:hover {

    background: var(--sizeColor);
}

.carousel-indicator.active {
    width: 8px;
    background-color: var(--sizeColor);
    -webkit-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s
}

.carousel-indicator:active {
    transform: scale(.9)
}

@media screen and (max-width: 500px) {
    .carousel-item {
        min-height: 0
    }

    .carousel-item img {
        height: 210px;
        border-radius: 0;
    }
    .carousel-control,.carousel:hover .carousel-control{
        display: none;
    } 
        /* 因为响应的时候不能保证所有图片的宽高所以自适应宽度，给个固定的高度 */
     .iobox{
        width:100%;
            height: 122px !important;
    }
    
    
    /**/
    /**/
     /* 伪类响应头 */
    /* 取消在移动端的时候，左边填充带来的边界 */
    .model-title-spx{
        padding-left: 0;
        margin-top: 20px;
    }
    /* 从一行一列变成一行 */
    .ti-ul{
        /* padding: 7px; */
        flex-direction: row;
    }
}