.show-desktop{
    display: block;
}
.show-desktop-flex{
    display: flex;
}
.show-mobile{
    display: none !important;
}
.show-mobile-none{
    display: flex;
}
.mobile-menu{
    display: none;
}
.show-mobile-flex{
    display: none;
}

@media screen and (max-width: 660px) {
    .show-desktop{
        display: none !important;
    }
    .show-mobile-flex{
        display: flex;
    }
    .show-mobile{
        display: block !important;
    }
    .show-desktop-flex{
        display: none;
    }   

    /* === */

    /* title convert size */
    :root{
        --heading-size: 7vw;
        --paragraph-size: 3.8vw;
    }

    .slide-counter,
    .ox-gx-detail{
        font-size: 3.8vw;
    }

    /* ===== */
    .ex-title-head{
        font-size: 9vw;
        font-weight: 500;
    }
    .ex-short-desc{
        font-size: 3.8vw;
        width: 100%;
    }
    .ex-grindtext{
        padding-bottom: 30%;
    }
    .btn-to-swiper{
        transform: translateY(-5.5rem);
    }
    .btn-to-swiper .swiper-button-prev, .btn-to-swiper .swiper-button-next{
        height: 10vw;
        width: 10vw;
    }

    .method-ox .title{
        margin-bottom: 2.5rem;
    }
    section.method-ox{
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
    section.ox-about{
        padding-top: 6rem;
        padding-bottom: 0;
    }
    .method-ox .col-md-4{
        margin-bottom: 2rem;
    }
    .ox-a-oxi.pe-5{
        padding-right: 0 !important;
        margin-bottom: 5rem;
    }
    .ox-gs-grid{
        display: block;
    }
    .ox-items-o-g{
        margin-bottom: 2rem;
    }
    .ox-is-2{
        height: auto;
    }
    .ox-gx-title{
        font-size: 7vw;
    }
    section.ox-comport{
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
    section.ox-case-art{
        padding-top: 0rem;
        padding-bottom: 2rem;
    }
    .custom-slide img{
        height: 175px;
    }
    .ox-art-title{
        font-size: 3.4vw;
        margin-bottom: 2px;
    }
    .ox-art-more{
       font-size: 2.7vw; 
    }
    .slide-content{
        padding: 0 20px 13px 17px;
    }
    .ox-top-5 {
        margin-top: 2.5rem;
    }
    .ox-title-sider{
        margin-bottom: 1rem;
    }
    .Gallery .swiper-slide img{
        height: 175px;
    }
    .Gallery {
        padding-top: 2rem;
    }
    .ox-j-straps{
        width: 88%;
        margin-top: 4rem;
    }
    .ox-j-s-title{
        font-size: var(--heading-size);
    }
    .ox-j-s-detail{
        font-size: 3.5vw;
    }
    .ox-j-s-link{
        font-size: 2.7vw;
    }
    section.ox-join{
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 40px;
        padding-top: 5rem;
        padding-bottom: 4rem;
    }
    .ox-wrap-glassy{
        width: 91%;
        padding: 35px 24px;
    }
    .ox-list-contact{
        margin-bottom: 30px;
    }
    ul.ox-list-contact{
        margin-top: 20px !important;
    }
    .ox-list-contact li{
        margin-right: 0;
        border:0;
        /* display: block; */
        text-align: center;
        margin-bottom: 8px;
    }
    .ox-list-contact li a{
        /* justify-content: center; */
    }
    .copyright-ox{
        text-align: center;
        color: #F9FBFF;
        font-size: var(--paragraph-size) !important;
        font-weight: 200;
        margin-top: 10vw;
    }
    .unx{
        margin-bottom: 10px;
    }
    ._icon-foot{
        width: 4.5vw;
    }
    section.ox-team{
        width: 100%;
        overflow: hidden;
        padding-top: 3rem;
        padding-bottom: 4rem;
    }
    .spinner-play{
        top: 1%;
        left: -16%;
        height: 32vw;
    }
    .ox-switz-text{
        font-size: 3.8vw;
    }
    .ox-list-contact li a,
    .copyright-ox{
        font-size: 12px !important;
    }
    .ox-d-memberlist {
        height: 16rem !important;
        object-fit: cover;
        border-radius: 16px;
    }
    .ox-fritz-scroll{
        display: flex;
        column-gap: 15px;
        white-space: nowrap;
        width: 2200px !important;
    }
    .unx-scroll{
        overflow-x: auto;
        /* overflow-y: hidden; */
    }
    .ox-hg-list {
        width: 300px;
    }
    .ox-m-name{
        font-size: 3.8vw;
    }
    .ox-m-position{
        font-size: 3.5vw;
    }
    .ox-lt-nm{
        margin-top: 10px;
    }

    /* .unx-scroll {
        scrollbar-width: thin;
        scrollbar-color: #3E2F84 #D9D9D9;
    } */

    .unx-scroll::-webkit-scrollbar {
        height: 10px;
    }

    .unx-scroll::-webkit-scrollbar-track {
        background: #D9D9D9;
    }

    .unx-scroll::-webkit-scrollbar-thumb {
        background: #3E2F84;
        border-radius: 100px;
    }
    nav.nav-mobile {
        position: fixed;
        z-index: 999;
        width: 100%;
        padding: 22px 0;
    }
    .bs-logo {
        width: 150px;
    }
    .coxplo{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    button.btn-barmenu {
        background: none;
        color: white;
        border: 1px solid white;
        padding: 8px;
        height: 40px;
        width: 40px;
        border-radius: 100px;
    }
    .nav-mobile.scrolled-color{
        background-color: white;
        padding: 15px 0;
    }
    .nav-mobile.scrolled-color ._icon-color{
        opacity: 1;
    }
    .nav-mobile.scrolled-color ._icon-white{
        opacity: 0;
    }
    .nav-mobile.scrolled-color button.btn-barmenu{
        color: #3d2f84;
        border: 1px solid #3d2f84;
    }
    .oxi-full-banner{
        height: 300px !important;
    }
    .to-back{
        font-size: 15px;
    }
    .cot-5 {
        padding-top: 2.5rem;
    }
    .oxi-cs-title{
        margin-top: 0rem;
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 1.5rem;
    }
    .oxi-cs-category span,
    .oxi-grp-title,
    .oxi-grp-detail,
    .ox-gg-detail,
    .ox-bung-detail{
        font-size: 15px;
    }
    .oxi-cs-category img{
        width: 20px;
        height: 20px;
    }
    .oxi-thrs{
        margin-top: 0;
        width: 100%;
    }
    .ox-th-title{
        font-size: 18px;
    }
    .ox-sub-f-foot{
        font-size: 20px;
    }
    section.ox-connected-ts {
        padding-top: 28%;
    }
    .btn-contact{
        margin-top: 1rem;
        padding: 9px 27px;
    }
    .footer-logo{
        width: 161px;
    }
    .ox-join .ox-sub-f-foot{
        margin-bottom: 0rem !important;
    }
    .ox-bung-img {
        height: 200px !important;
        border-radius: 16px !important;
    }
    .caseart-nav{
        padding: 15px 0 !important;
    }
    .caseart-nav .btn-barmenu{
        color: #3d2f84;
        border-color: #3d2f84;
    }
    .wrapper-bzt .ex-grd-scp{
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .mobile-menu {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        z-index: 995;
        text-align: center;
        background-color: #3d2f84;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .grow-flex{
        align-items: center;
        justify-content: center;
        height: 100vh;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .nav-listed{
        padding: 0;
        margin: 0;
    }
    .nav-listed li{
        list-style: none;
        margin-bottom: 20px;
    }
    .nav-listed li a{
        text-decoration: none;
        font-size: 6vw;
        color: white !important;
    }
    div.menu-active{
        display: flex !important;
    }

        /* Menu Button 1 */
    .menu-btn-1 {
        height: 30px;
        width: 38px;
        cursor: pointer;
        display: flex;
        justify-content: end;
    }

        .menu-btn-1 span,
        .menu-btn-1 span::before,
        .menu-btn-1 span::after {
            background: white;
            border-radius: 3px;
            content: '';
            position: absolute;
            width: 28px;
            height: 4px;         
            margin-top: 13px; 

            -webkit-transition: .3s ease-in-out;
            -moz-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }

        .menu-btn-1 span::before {
            margin-top:-8px;
        }

        .menu-btn-1 span::after {
            margin-top:8px;
        }

        .menu-btn-1.active span {
            background: transparent;
        }

        .menu-btn-1.active span::before {
            margin-top: 0;

            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .menu-btn-1.active span::after {
            margin-top: 0;

            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .scrolled-color .menu-btn-1 span,
        .scrolled-color .menu-btn-1 span::before,
        .scrolled-color .menu-btn-1 span::after{
            background: #3d2f84;
        }
        .scrolled-color .menu-btn-1.active span{
            background-color: transparent !important;
        }
        .menu-btn-1{
            position: relative;
            z-index: 9999;
        }
        .great-show{
            background: none !important;
            padding: 22px 0 !important;
        }
        .great-show ._icon-color{
            opacity: 0 !important;
        }
        .great-show ._icon-white{
            opacity: 1 !important;
        } 
        .great-show .menu-btn-1 span::before, 
        .great-show .menu-btn-1 span::after {
            background: white !important;
        }

        .caseart-nav .menu-btn-1 span,
        .caseart-nav .menu-btn-1 span::before,
        .caseart-nav .menu-btn-1 span::after{
            background: #3d2f84;
        }
        .ox-group-srv:hover .ox-g-sr-title{
            font-size: 21px;
        }
        .ox-group-srv:hover .ox-g-sr-detail{
            font-size: 15px;
        }
        .ox-g-sr-title{
            font-size: 20px;
        }
        .ox-g-sr-detail{
            font-size: 14px;
        }
        .ox-g-sr-detail p{
            margin-bottom: 0;
        }
        .ox-list-contact li{
            display: flex;
            text-align: center;
            justify-content: center;
            margin-right: 0;
            padding-right: 0;
            margin-bottom: 15px;
        }
        .ox-list-contact li a{
            font-size: var(--paragraph-size);
        }
        img.img-fluid._icon-foot.linkedfoot {
            width: 33px;
        }
        .ox-call-addrs {
            width: 100%;
            margin: 0 auto;
        }
        .mySwiperDetail{
            margin-top: 10%;
        }
        .popup-fix{
            padding-right: 15px;
            padding-left: 15px;
        }
        .ox-img-ox-x{
            height: 40vh !important;
        }
        .ox-slide-ox-x{
            width: 95%;
            height: 75vh !important;
            background-position: center right;
        }
        .head-named{
            padding: 10px 15px;
            margin-bottom: 5px;
            padding-top: 0;
        }
        .ox-sl-detail{
            font-size: 14px;
            padding: 0 15px;
            height: 20vh;
        }
        .ox-sl-detail::-webkit-scrollbar {
            width: 5px;
            border-radius: 100px;
        }

        /* Track */
        .ox-sl-detail::-webkit-scrollbar-track {
            background: #D9D9DB; 
            border-radius: 100px
        }
        
        /* Handle */
        .ox-sl-detail::-webkit-scrollbar-thumb {
            background: #3E2F84;
            background: linear-gradient(180deg,rgba(62, 47, 132, 1) 0%, rgba(255, 255, 255, 0) 100%);
            border-radius: 100px
        }


        .head-named span:first-child{
            font-size: 18px;
        }
        .head-named span:last-child{
            font-size: 14px;
        }
        .swiper-qnext{
            top: 46%;
            right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .swiper-qprev{
            top: 46%;
            left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .swiba{
            height: 45px;
            width: 48px;
        }
        button.close-x{
            right: 24px;
            top: 9px;
        }
        .ox-slug-img{
            height: 14rem !important;
        }
        .ur-categories {
            font-size: 8px;
        }
        .ur-categories::before{
            width: 10px;
            height: 10px;
        }
        nav.scrolled-color{
            padding-top: 15px !important;
            padding-bottom: 15px !important;
        }

        /* IOS Support */
        @supports (-webkit-touch-callout: none) {
            /* .ox-great-bg {
                background: url(../image/Section-bg.webp) no-repeat;
                min-height: 130vh;
            } */

            /* .ox-great-bg {
                position: relative;
                --y-parallax: 0px;
                min-height: 100vh;
                overflow: hidden;
            } */

            .ox-great-bg::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 130%;
                background: url(../image/bg-ios-xx.webp) no-repeat;
                background-size: cover !important;
                background-position: center center !important;
                transform: translateY(0);
                z-index: -1;
                will-change: transform;
                transform: translateY(var(--y-parallax, 0px));
            }

            .scroll-wrapper {
                position: relative;
                width: 100%;
                overflow: hidden;
            }

            .scroll-content {
                overflow-x: scroll;
                scrollbar-width: none;    
                -ms-overflow-style: none; 
            }

            .scroll-content::-webkit-scrollbar {
                display: none;           
            }

            .scrollbar-track {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 6px;
                background: #D9D9D9;
                border-radius: 100px;
            }

            .scrollbar-thumb {
                height: 100%;
                width: 40px; 
                background: #3E2F84;
                border-radius: 100px;
                position: relative;
            }
            /* .ox-great-bg{
                position: unset !important;
            } */
             .ox-sl-detail{
                height: 14vh;
             }
             .ox-slide-ox-x{
                height: 70vh !important;
             }
        }
        /* end element ios */

         /* section.ox-connected-ts{
            position: sticky !important;
            overflow: hidden;
            bottom: 0;
            left: 0;
        } */

            
        .oxi-case-study{
            padding-bottom: 3rem;
        }
        .oxi-thrs{
            position: relative;
            top: unset;
        }
        .ox-call-addrs p br{
            display: none;
        }
        .oxs-cp-m {
            font-size: 12px;
            font-weight: 300;
            margin-bottom: 14px;
        }
        .ox-light-ms{
            margin: 0;
            padding: 0;
            margin-top: 8px;
        }
        .ox-light-ms li{
            list-style: none;
            display: inline-block;
            margin-right: 10px;
        }
        .ox-light-ms li:last-child{
            margin-right: 0;
        }
        .ox-light-ms li a{
            text-decoration: none;
            font-size: 12px;
            font-weight: 300;
            color: white;
        }
        .ox-mo-m{
            margin-top: 24%;
        }
        section.ox-connected-ts{
            display: flex;
            align-items: center;
        }
        li.df-adress a{
            display: flex;
            align-items: flex-start;
            margin-left: -14px;
        }
        li.df-adress{
            margin-bottom: 10%;
        }
        img.ic_addressd{
            width: 7vw;
            margin-top: 3px;
            margin-right: 0;
        }
        .ox-w-g-detail{
            font-size: 12px;
        }

}