.top{
    border-bottom: 1px solid #F3F3F3;
    background: url(../../assets/img/sptopbg.png) no-repeat center,var(--white);
    background-size: cover;
    padding: 5.06rem 0;
}

.top .text{
    max-width: 768px;
    margin: 0 auto;
}

.gallery{
    background: url(../../assets/img/spgalbg.svg) no-repeat top left;
    padding: 4rem 0;
}

.gallery .bigimg,
.gallery .owl-carousel{
    width: clamp(10px,100%,980px);
    margin: 0 auto;
}

.gallery .bigimg{
    aspect-ratio: 1/.35714;
    margin-bottom: 10px;
}

.gallery .bigimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 20px;
}

.gallery .owl-carousel .img{
    position: relative;
    cursor: pointer;
}

.gallery .owl-carousel .img::before{
    content: '';
    position: absolute;
    inset: 0;
    max-height: calc(100% - 5px);
    border-radius: 10px;
    background: url('data:image/svg+xml;utf8,<svg width="33" height="40" viewBox="0 0 33 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.70852L7.08333 15.3991V3.98206C7.08333 3.98206 10.5587 3.43245 12.8333 3.04484H14.1667C15.9167 3.47085 17.2051 4.11874 18.375 5.6861C19.5833 7.30493 20.0833 8.66816 20.3333 10.6278C20.3796 10.9907 20.3537 11.1996 20.3333 11.565C20.1978 13.9944 19.4874 15.572 17.7083 17.1883C15.8116 18.9116 11.5 19.148 11.5 19.148H9.66667L24 39H31L16 20.426C21.4167 19.4037 26.2257 16.7624 26.6667 11.139C26.7161 10.5088 26.7134 10.1506 26.6667 9.52018C26.25 3.89694 19.75 1 15 1H1V6.70852Z" stroke="white" stroke-opacity="0.4"/></svg>') no-repeat center,#0000007d;
    background-size: 38px;
    opacity: 0;
    -webkit-opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.gallery .owl-carousel .img.active::before{
    opacity: 100%;
    -webkit-opacity: 100%;
}

.gallery .owl-carousel img{
    max-width: 238px;
    aspect-ratio: 1/.42857;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 10px;
    border-bottom: 5px solid transparent;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.gallery .owl-carousel .img.active img{
    border-color: var(--main);
}

.vants{
    border: 1px solid #F3F3F3;
    border-radius: 10px;
    background: url(../../assets/img/spvantsbg.png) no-repeat center,var(--white);
    background-size: cover;
    background-blend-mode: multiply;
    margin: 0 4.2rem 4rem;
    padding: 3.26rem 0;
}

.vants .df{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    grid-gap: 1rem;
    width: 100%;
    margin-bottom: 2.4rem;
}

.vants .df::before,
.vants .df::after{
    content: '';
    width: 100%;
    max-width: 368px;
    height: 1px;
    background-color: #e6e7e999;
}

.vants .sectitle::before{
    background-color: #F9F9F9;
}

.vants .owl-carousel{
    margin-bottom: 2.33rem;
}

.vants .item{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    grid-gap: 1rem;
    border: 1px solid #E6E7E9;
    border-radius: 10px;
    background: url(../../assets/img/boxbggg.png) no-repeat center,var(--white);
    background-size: cover;
    padding: 37px 41px 37px 25px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.vants .item:hover{
    background: url(../../assets/img/boxbggg.png) no-repeat center,var(--main);
}

.vants .item::before{
    content: url('data:image/svg+xml;utf8,<svg width="28" height="36" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.69561L5.57895 13.4909V3.25004C5.57895 3.25004 8.76617 2.75705 10.8522 2.40937H12.075C13.6799 2.79149 14.8615 3.37263 15.9344 4.77852C17.0426 6.23057 17.5011 7.45336 17.7304 9.21111C17.7728 9.53665 17.7491 9.72401 17.7304 10.0518C17.6061 12.2309 16.9546 13.6459 15.323 15.0958C13.5835 16.6415 9.62943 16.8535 9.62943 16.8535H7.9481L21.093 35.4246L27.5126 34.6603L13.7563 17.9999C18.7239 17.0829 23.1342 14.7137 23.5386 9.66965C23.5839 9.10441 23.5814 8.78304 23.5386 8.2176C23.1565 3.17369 17.1954 0.575195 12.8392 0.575195H0V5.69561Z" fill="rgb(237,118,14)"/></svg>');
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.vants .item:hover::before{
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    -ms-filter: brightness(0) invert(1);
}

.vants .item .title{
    text-transform: uppercase;
    color: var(--main);
    font-family: var(--roboto);
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 1px;
    border-left: 1px solid var(--main);
    margin-right: -1rem;
    padding-left: 1rem;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.vants .item:hover .title{
    color: var(--white);
    border-color: var(--white);
}

.vants .dbtn{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

@media(max-width:992px){
    .top,
    .gallery,
    .vants{
        padding: 2rem 0;
    }   
}

@media(max-width:768px){
    .vants{
        margin: 0 20px 20px;
    }
    .vants .item{
        padding: 2rem 1rem;
    }
}

@media(max-width:475px){
    .vants .item{
        flex-direction: column;
        -ms-flex-direction: column;
        padding: 1rem;
    }
    .vants .item .title{
        text-align: center;
        border-left: unset;
        border-top: 1px solid var(--main);
        margin: 0;
        padding: 1rem 0 0;
    }
}