img,
video {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%
}

.common_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

body .home .banner .text {
    bottom: 6.25vw
}

body .home .solutions1 {
    padding: 5.52083vw 10.41667vw
}

body .home .solutions1 .title {
    color: #000;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

body .home .solutions1 .content {
    margin: 4.01042vw 0 0 0;
    display: flex;
    justify-content: space-between;
    /* height: 34.0625vw */
}

body .home .solutions1 .content .right {
    width: 51.92708vw;
    /* height: 100%; */
    /* height: 34.0625vw */
}

body .home .solutions1 .content .right .swiper1 {
    height: 100%
}

body .home .solutions1 .content .right .swiper-slide {
    border-radius: 1.04167vw;
    overflow: hidden
}

body .home .solutions1 .content .right .swiper-slide.swiper-slide-active img,
body .home .solutions1 .content .right .swiper-slide.swiper-slide-active video {
    opacity: 1
}

body .home .solutions1 .content .right .swiper-slide:hover img,
body .home .solutions1 .content .right .swiper-slide:hover video {
    transform: scale(1.05)
}

body .home .solutions1 .content .right .swiper-slide img,
body .home .solutions1 .content .right .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
    opacity: 0
}

body .home .solutions1 .content .left {
    width: 25.41667vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5vw;
    /* height: 100% */
}

body .home .solutions1 .content .left .item {
    width: 25.41667vw;
    min-height: 10vw;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
    padding: 3px;
    overflow: hidden;
    border-radius: 20px;
    border: 3px solid #EFF1F3;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

body .home .solutions1 .content .left .item.on .color {
    background: rgba(26, 26, 26, 0.9)
}

body .home .solutions1 .content .left .item.on .color .num {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2.5px);
    color: #fff
}

body .home .solutions1 .content .left .item.on .text {
    opacity: 1
}

body .home .solutions1 .content .left .item .color {
    width: 5.26042vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .88542vw .20833vw .20833vw .88542vw;
    backdrop-filter: blur(3px);
    transition: .6s ease
}

body .home .solutions1 .content .left .item .color .num {
    color: rgba(0, 0, 0, 0.6);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 50%;
    width: 2.60417vw;
    height: 2.60417vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .6s ease
}

body .home .solutions1 .content .left .item .text {
    width: 17.76042vw;
    text-align: right;
    opacity: .6;
    transition: .6s ease;
    margin: 0 1.19792vw 0 0
}

body .home .solutions1 .content .left .item .text .p1 {
    color: #101010;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 .52083vw
}

body .home .solutions1 .content .left .item .text .p2 {
    color: #101010;
    text-align: justify;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 1.6px
}

body .home .solutions2 {
    position: relative;
    z-index: 52
}

body .home .solutions2 .fix {
    height: 100vh;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

body .home .solutions2 .wrap {
    width: 90vw
}

body .home .solutions2 .title {
    text-align: center;
    color: #000;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

body .home .solutions2 .content {
    margin: 2.70833vw 0 0 0
}

body .home .solutions2 .content .x {
    display: flex;
    width: max-content;
    gap: 1.77083vw
}

body .home .solutions2 .content .x .img {
    /* width: 78.02083vw; */
    /* width: 66.02083vw;
    height: 37.96875vw; */
        width: 34.02083vw;
    /* height: 20.96875vw; */
    border-radius: 1.04167vw;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
    overflow: hidden
}

body .home .solutions2 .content .x .img img,
body .home .solutions2 .content .x .img video {
    width: 100%;
    height: 100%
}

body .home .solutions4 {
    height: 23.95833vw;
    position: relative;
    z-index: 1;
    padding: 0 0 0 10.41667vw;
    display: flex;
    align-items: center;
    overflow: hidden
}

body .home .solutions4 .bg {
    position: absolute;
    left: -.46875vw;
    top: -5.20833vw;
    height: 100%;
    z-index: -1;
    max-height: unset;
    max-width: unset;
    width: 47.8125vw
}

body .home .solutions4 .left .p1 {
    color: #182A87;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 .67708vw
}

body .home .solutions4 .left .p2 {
    color: rgba(0, 0, 0, 0.6);
    font-style: normal;
    font-weight: 500;
    margin: 0 0 1.04167vw
}

body .home .solutions4 .left .more {
    width: 13.75vw;
    height: 3.59375vw;
    border-radius: .41667vw;
    border: 1px solid #182A87;
    background: #182A87;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: all 600ms
}

body .home .solutions4 .left .more:hover {
    background: #000
}

body .home .solutions4 .right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%
}

@media screen and (max-width: 768px) {
    body .home .banner .text {
        bottom: 60px
    }

    body .home .solutions1 {
        padding: 30px 5%
    }

    body .home .solutions1 .content {
        margin: 30px 0 0 0;
        flex-direction: column;
        height: auto;
        gap: 20px
    }

    body .home .solutions1 .content .right {
        width: 100%;
        height: 200px
    }

    body .home .solutions1 .content .right .swiper-slide {
        border-radius: 10px
    }

    body .home .solutions1 .content .left {
        width: 100%;
        height: auto
    }

    body .home .solutions1 .content .left .item {
        width: 100%;
        height: auto;
        padding: 13px;
        flex-direction: column;
        align-items: unset;
        gap: 20px
    }

    body .home .solutions1 .content .left .item.on .color .num {
        background: #838383 !important;
        color: #fff !important
    }

    body .home .solutions1 .content .left .item:not(:last-child) {
        margin: 0 0 15px
    }

    body .home .solutions1 .content .left .item .color {
        width: 50px;
        height: auto;
        background: transparent !important
    }

    body .home .solutions1 .content .left .item .color .num {
        color: #111 !important;
        width: 50px;
        height: 50px
    }

    body .home .solutions1 .content .left .item .text {
        width: 100%;
        text-align: left
    }

    body .home .solutions1 .content .left .item .text .p1 {
        margin: 0 0 10px
    }

    body .home .solutions2 {
        padding: 30px 0;
        height: auto !important
    }

    body .home .solutions2 .fix {
        height: auto
    }

    body .home .solutions2 .sj_content {
        display: block !important;
        width: 100%;
        margin: 30px auto 0
    }

    body .home .solutions2 .sj_content .demoSwiper .swiper-slide img {
        width: 100%;
        height: 222px;
        border-radius: 15px
    }

    body .home .solutions2 .content {
        margin: 30px auto 0;
        width: 100%;
        display: none
    }

    body .home .solutions2 .content .x {
        width: 100%;
        transform: none !important;
        flex-direction: column;
        gap: 20px
    }

    body .home .solutions2 .content .x .img {
        height: 220px;
        border-radius: 15px;
        width: 100%
    }

    body .home .solutions4 {
        height: auto;
        padding: 60px 5%;
        flex-direction: column-reverse;
        align-items: unset
    }

    body .home .solutions4 .bg {
        display: none
    }

    body .home .solutions4 .left {
        margin: 30px 0 0 0
    }

    body .home .solutions4 .left .p1 {
        margin: 0 0 10px
    }

    body .home .solutions4 .left .p2 {
        margin: 0 0 10px
    }

    body .home .solutions4 .left .more {
        width: 140px;
        height: 45px;
        padding: 0 25px
    }

    body .home .solutions4 .right {
        position: static
    }
}

body .home .solutions3 {
    padding: 11.97917vw 10.41667vw;
}

body .home .solutions3 .content {
    display: flex;
    gap: .9375vw;
    padding-top: 3vw;
}

body .home .solutions3 .content .item {
    flex: 1;
    height: 36.14583vw;
    border-radius: .52083vw;
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.05) 0%, rgba(42, 42, 42, 0.5) 70%, rgba(42, 42, 42, 0.5) 100%);
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: 1s
}

body .home .solutions3 .content .item:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.05) 0%, rgba(42, 42, 42, 0.5) 70%, rgba(42, 42, 42, 0.5) 100%);
    z-index: 2
}

body .home .solutions3 .content .item.on {
    flex: 3.17
}

body .home .solutions3 .content .item.on .text {
    opacity: 1;
    transition-delay: .6s
}

body .home .solutions3 .content .item.on .position {
    opacity: 0
}

body .home .solutions3 .content .item .img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

body .home .solutions3 .content .item .position {
    width: 100%;
    height: 360px;
    padding: 2.34375vw 1.04167vw;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    background: #2A2A2A;
    transition: .6s ease
}

body .home .solutions3 .content .item .position .pick .p1 {
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0 10px
}

body .home .solutions3 .content .item .position .pick .p2 {
    color: #FFF;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

body .home .solutions3 .content .item .text {
    position: absolute;
    bottom: 5.20833vw;
    left: 0;
    padding: 0 2.08333vw;
    z-index: 5;
    width: 38.80208vw;
    opacity: 0;
    transition: 1s
}

body .home .solutions3 .content .item .text .pick .p1 {
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 .26042vw
}

body .home .solutions3 .content .item .text .pick .p2 {
    color: #FFF;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

body .home .solutions3 .content .item .text .p3 {
    margin: 1.82292vw 0 0 0;
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 160%
}

@media screen and (max-width: 768px) {
    body .home .solutions3 {
        padding: 30px 5%
    }

    body .home .solutions3 .content {
        margin: 30px 0 0 0;
        flex-direction: column;
        gap: 20px
    }

    body .home .solutions3 .content .item {
        flex: unset !important;
        width: 100%;
        height: auto;
        padding: 60px 5%
    }

    body .home .solutions3 .content .item .position {
        display: none
    }

    body .home .solutions3 .content .item .text {
        position: relative;
        z-index: 6;
        bottom: unset;
        left: 0;
        width: 100%;
        opacity: 1 !important
    }

    body .home .solutions3 .content .item .text .p3 {
        margin: 20px 0 0 0;
        font-size: 16px
    }
}