@media screen and (max-width:1600px) {
    .hero-img .t1t2 div {
        height: 8vw;
    }

    .arm .text2 h3,
    .arm .text4 h3 {
        font-size: 5rem;
        letter-spacing: 5px;
    }

    .arm .text3 h4,
    .arm .text5 h4 {
        font-size: 2.5rem;
    }

    .arm .text2 {
        transform: translate(-60%, 55%);
    }

    .arm .text3 {
        transform: translate(145%, 195%);
    }

    .arm .text4 {
        transform: translate(-55%, 40%);
    }

    .techs>div {
        padding: 0 10vw;
        gap: 5vw;
    }

    .techs .spacer>img {
        width: 50%;
    }

    .ergo {
        padding: 0 2.5vw;
    }

    .ergo>div {
        max-width: 600px;
    }

    .forward .ani {
        max-width: 600px;
        max-height: 600px;
    }
}

@media screen and (max-width:1200px) {
    .hero h2 {
        font-size: 4rem;
        padding: 5vw;
    }

    .hero-img .spacer .col {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-img .col img {
        width: unset;
        height: 100%;
    }

    .hero-img .t1t2 {
        display: none;
    }

    .keyfeature>h3,
    .keyfeature>p {
        display: none;
    }

    .scrolldown {
        display: none;
    }

    .features {
        margin: 0;
        gap: 5vw;
    }

    .features h3,
    .features p {
        line-height: normal;
        letter-spacing: unset;
    }

    .features .p1 {
        font-size: 2.5rem;
        font-weight: 500;
    }

    #slidecard .kf-spacers {
        display: none;
    }

    #slidecard .camera {
        gap: 5vw;
        height: unset;
        position: relative;
        padding: 10vw 0;
    }

    .kf-sliders {
        width: 90vw;
        flex-direction: column;
        align-items: center;
    }

    .kf-slider {
        padding: 10vw 5vw;
    }

    .kf-text {
        padding: 0;
        min-width: unset;
    }

    .kf-text span {
        display: none;
    }

    .armTL {
        opacity: 1;
    }

    .armTL>div:nth-child(1),
    .armTL>div:nth-child(2),
    .armTL>div:nth-child(3),
    .armTL>div:nth-child(4),
    .armTL>div:nth-child(5) {
        height: unset;
    }

    .armTL>div img {
        width: 100%;
    }

    #v {
        opacity: 0;
        pointer-events: none;
    }

    .arm .text1 {
        transform: translate(0, -70%);
    }

    .arm .text2,
    .arm .text4 {
        transform: translate(-30%, 0);
    }

    .arm .text3,
    .arm .text5 {
        transform: translate(-80%, 200%);
        gap: 10px;
    }

    .arm .text2 h3,
    .arm .text4 h3 {
        font-size: 4rem;
        font-weight: 900;
    }

    .arm .text3 h4,
    .arm .text5 h4 {
        font-size: 2rem;
    }

    .arm .text3 p,
    .arm .text5 p {
        transform: translateX(0);
    }

    .osd {
        padding: 25vw 0;
    }

    .osdbg {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .osdbg>img {
        position: absolute;
        width: unset;
        height: 100%;
        margin: unset;
        inset: unset;
    }

    .osd .content {
        max-width: 1200px;
        width: 100%;
        flex-direction: column;
        padding: 0 5vw;
        gap: 3vw;
        grid-template-areas:
            'ok ok ok ok'
            ' be be be be'
            'ass ass ass ass'
            ' dash dash autoU autoU'
            'axis axis axis axis';
    }

    .osd .content>div {
        padding: 5vw;
        position: relative;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
    }

    .osd .content>div>div,
    .osd .content>div>img {
        position: relative;
    }

    .osd .content .btns {
        display: none;
    }

    .osd .content p {
        margin: 2vw 0;
    }

    .osd .content .ass .imgs p {
        margin: 0;
    }

    #pictures .spacer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #pictures .spacer div:nth-child(1) {
        grid-area: leftbig;
    }

    #pictures .spacer div:nth-child(2) {
        grid-area: righttop;
        background-color: #121313;
    }

    #pictures .spacer div:nth-child(3) {
        grid-area: rightbottom;
    }

    #pictures .spacer div:nth-child(2) img:nth-child(1) {
        width: 110%;
    }

    #designConcept {
        flex-direction: column-reverse;
        justify-content: center;
        padding: 10%;
        gap: 3vw;
    }

    #designConcept .text {
        margin: 0;
        gap: 3vw;
    }

    #designConcept h4,
    #designConcept h3,
    #designConcept p {
        text-align: center;
    }

    #designConcept .imgs img {
        transform: scale(2);
        width: 100%;
        height: unset;
    }

    #designConcept>img,
    #designConcept .imgs .dcbg,
    #designConcept .imgs .dccover {
        opacity: 0;
    }

    .techs {
        height: unset;
        padding: 25vw 0;
        gap: 15vw;
    }

    .techs .text {
        gap: 3vw;
    }

    .techs>img {
        height: 100%;
        width: unset;
        margin: unset;
        inset: unset
    }

    .techs .items {
        grid-template-columns: 1fr;
    }

    .techs .items>div {
        gap: 4vw;
    }

    #ergo {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 15vw 5vw;
    }

    #ergo>img {
        width: unset;
        height: 100%;
    }

    #ergo .text {
        height: unset;
        align-items: center;
        text-align: center;
        gap: 3vw;
    }

    #ergo .text h3,
    #ergo .text h4,
    #ergo .text p {
        text-align: center;
    }

    #ergo .imgs {
        align-items: start;
    }

    :root {
        --frdw: 90vw;
    }

    .io {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .io img {
        max-width: unset;
        width: 100%;
        height: unset;
        transform: translate(3%, 0%) scale(0.9);
        opacity: 1;
        clip-path: unset;
    }

    img.io-bg {
        position: absolute;
    }

    .io>div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(0deg, black, transparent 10%, transparent 90%, black);
    }

    .dots {
        display: none;
    }
}

@media screen and (max-width: 960px) {
    .model-content {
        margin-top: 120px;
        display: none;
    }

    .Rwd #PageMainContent.NotCoverHeader {
        padding-top: 0;
    }

    .topBg #header-bar.new-header-bar,
    .topBg #header-bar.scrolling {
        position: relative;
    }

    #hdmi {
        background-position: 80%;
    }
}

@media screen and (max-width:760px) {

    .features .p1 {
        font-size: 1.7rem;
        font-weight: 700;
    }

    .kf-slider {
        width: 100%;
        gap: 2.5vw;
    }

    .kf-text {
        gap: 5vw;
    }

    #smart {
        padding: 20vw 0 10vw 0;
    }

    .sound .text {
        justify-content: flex-end;
    }

    .arm .text2,
    .arm .text4 {
        transform: translate(0%, 0);
        gap: 3vw;
    }

    .arm .text3,
    .arm .text5 {
        transform: translate(0%, 200%);
        gap: 10px;
    }

    .arm .text2 h3,
    .arm .text4 h3 {
        font-size: 2rem;
        font-weight: 900;
    }

    .arm .text3 h4,
    .arm .text3 p,
    .arm .text5 h4,
    .arm .text5 p {
        font-size: 1.5rem;
    }

    .arm .skew div {
        width: 80px;
        height: 5px;
    }

    .KVM {
        gap: 12vw;
    }

    .KVM-img-bg {
        top: -84%;
    }

    .osd {
        padding: 60vw 0;
    }

    .osd .content {
        max-width: 1200px;
        width: 100%;
        flex-direction: column;
        display: flex;
        padding: 0 5vw;
        gap: 3vw;
        grid-template-areas:
            'ok ok ok ok'
            ' be be be be'
            'ass ass ass ass'
            ' dash dash autoU autoU'
            'axis axis axis axis';
    }

    #designConcept {
        padding: 20% 10% 10% 10%;
        gap: 10vw;
    }

    #designConcept .text {
        gap: 5vw;
    }

    #techs h3 {
        text-align: center;
    }

    .techs .text {
        gap: 5vw;
    }

    .techs-text {
        gap: 15vw;
        padding: 0;
    }

    .techs-text>div {
        grid-template-columns: 20% 1fr;
        gap: 5vw;
    }

    .techs .items {
        gap: 12vw;
    }

    .ergo {
        gap: 10vw;
    }

    #ergo .text {
        gap: 5vw;
    }

    .ergo .imgs {
        gap: 4vw;
    }

    .io img {
        width: 130%;
    }
}