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

    #oled,
    .oled {
        padding: 15rem;
    }

    .oled>img {
        position: absolute;
        height: 100%;
    }

    .oled .text {
        position: relative;
        width: 100%;
        transform: unset;
        grid-template-columns: unset;
    }

    .oled .text1 {
        display: grid;
    }

    .oled .text1 h3.h32 {
        font-size: 4rem;
    }

    .visual .vslider {
        max-width: 1100px;
    }

    .visual .vslider .texts {
        padding: 7.5rem 3rem 0;
    }

    .visual .vslider .pgsbar {
        padding: 0 2rem;
    }

    #color,
    .color {
        padding: 12rem 0 18rem;
    }

    .color>div .sec1 {
        transform: translate(5rem, -7rem);
    }

    .color>div .sec2 {
        transform: translate(-5rem, -5rem);
    }

    .color>div .sec3 {
        transform: translate(1rem, 8rem);
    }

    .color>div .sec1 article {
        max-width: 40vw;
    }

    .color>div .sec2 article {
        max-width: 38vw;
    }

    .color>div .sec3 article {
        max-width: 45vw;
    }

    #cpu,
    .cpu {
        padding: 12vw 5vw;
    }

    .gpu .items>div {
        width: 33vw;
    }

    .mux .slide {
        padding: 0;
    }

    .mux .slide article {
        padding: 0 0 0 2rem;
    }

    .design .timeline .spacer .text div {
        max-width: 35vw;
    }

    .design .timeline .spacer .text1 {
        transform: translate(60%, -109%);
    }

    .design .timeline .spacer .text2 {
        transform: translate(-68%, 30%);
    }

    .design .timeline .spacer .text3 {
        transform: translate(68%, 40%);
    }

    .design .timeline .spacer .text4 {
        transform: translate(73%, 33%);
    }

    .design .timeline .spacer .text5 {
        transform: translate(0%, -40%);
    }

    .design .timeline .spacer .text6 {
        transform: translate(-42%, -78%);
    }

    #porta,
    .porta {
        padding: 1rem 1rem 5rem;
    }

    .battery .spacer>div {
        height: 95%;
    }

    .battery .cntnt .text {
        padding: 0;
    }

    .battery aside img {
        opacity: 0;
    }

    #soft,
    .soft {
        padding: 0 2rem;
    }

    .soft .text {
        padding: 5rem 2rem 3rem;
    }

    #cool,
    .cool {
        padding: 5rem 2.5rem;
    }

    .cool .text h3,
    .cool .text p {
        max-width: 650px;
    }

    .cool .grid3 .gbp {
        gap: 0;
        padding: 0;
    }

    .cool .grid3 .gbp>div {
        padding: 2rem;
    }

    .cool .grid3 .gbp aside img {
        width: 100%;
        height: unset;
    }
}

@media screen and (max-width: 1366px) and (orientation: portrait) {
    .kfsum .video {
        grid-auto-flow: row;
        grid-template-areas: unset;
        padding: 0 2rem;
    }

    #oled,
    .oled {
        padding: 30vw 10vw;
    }

    .oled>img {
        position: absolute;
    }

    .oled .text {
        position: relative;
        grid-template-columns: 1fr;
        grid-template-areas:
            'text1'
            'text2'
        ;
    }

    .visual>img {
        position: absolute;
        height: 100%;
    }

    .visual .vslider {
        position: relative;
        max-height: unset;
        height: unset;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .visual .vslider .texts {
        padding: 7.5rem 2rem 0;
        display: flex;
        order: 1;
    }

    .visual .vslider .texts div {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .visual .vslider .pgsbar {
        order: 2;
    }

    .visual .vslider .imgs {
        padding: 6rem 0;
        order: 3;
    }

    .visual .vslider .imgs .inner div p span.co2 {
        font-size: 1.1rem;
    }

    .visual .vslider .imgs .inner div p span.kg {
        font-size: 5rem;
    }

    .cpu>div {
        gap: 2rem;
    }

    .cpu>img {
        filter: brightness(0.7);
    }

    .cpu .logos {
        position: relative;
    }

    .gpu .text {
        padding: 0 2rem;
    }

    .gpu .items>div {
        width: 55vw;
    }

    .design .aero img {
        max-width: 80%;
    }

    .design .timeline .spacer canvas {
        position: relative;
        width: 100%;
        height: unset;
        object-fit: cover;
    }

    .design .timeline .spacer .text {
        position: relative;
        align-items: flex-start;
    }

    .design .timeline .spacer .text div {
        max-width: unset;
        width: calc(100% - 2rem);
        height: calc(100% - 1rem);
    }

    .design .timeline .spacer .text1,
    .design .timeline .spacer .text2,
    .design .timeline .spacer .text3,
    .design .timeline .spacer .text4,
    .design .timeline .spacer .text5,
    .design .timeline .spacer .text6 {
        transform: unset;
    }

    #battery,
    .battery,
    .battery .spacer {
        position: relative;
        height: unset;
    }

    .battery .spacer>div {
        padding: 1rem;
    }

    .battery aside {
        opacity: 0;
    }

    .battery .cntnt {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: unset;
        gap: 2rem;
    }

    .battery .cntnt .img {
        padding: 0 0 4rem;
    }

    .battery .cntnt .img img {
        position: relative;
        transform: scale(1);
        width: 100%;
        height: unset;
        object-fit: unset;
    }

    #connect,
    .connect {
        gap: 2rem;
    }

    .connect .text {
        padding: 0 1rem;
    }

    .connect .text h3 {
        text-align: center;
    }

    .connect .rowgrid {
        grid-template-columns: 1fr;
        grid-template-areas: '.''.''.''.''.''.';
        gap: 0rem;
    }

    .connect .rowgrid div {
        gap: 0;
    }

    .connect .rowgrid div:nth-child(odd) {
        margin: 2rem 0 0 0;
    }

    .connect .rowgrid div p {
        max-width: 75vw;
    }

    .connect .img {
        width: 100%;
        height: 120.43vw;
        background-image: url(../innergigabyteimages/connect-m.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .connect .img img {
        height: 100%;
        opacity: 0;
    }

    .effects .timeline .spacer div {
        background-color: black;
    }

    .effects .timeline .spacer div>img {
        opacity: .5;
        width: auto;
        right: -50vw;
    }

    .effects .timeline .spacer article {
        padding: 20vh 0 0 6rem;
        max-width: 65vw;
    }

    .effects .timeline .spacer article h3 span {
        transform: unset;
    }

    .cool .grid3 .gbp {
        flex-direction: column-reverse;
    }

    .cool .grid3 .gbp>div {
        flex-direction: row;
    }

    div.dots {
        display: none;
    }
}

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

    #kv,
    .kv {
        height: 153.64583333333333vw;
        background-image: url(../innergigabyteimages/kv-m.jpg);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .kv img {
        opacity: 0;
    }

    #kfsum,
    .kfsum {
        padding: 2rem;
    }

    .kfsum .text .logo {
        width: 100%;
        height: unset;
        flex-wrap: wrap;
    }

    .kfsum .text .logo img {
        max-height: 70px;
        height: 100%;
        object-fit: contain;
    }

    .oled .text1 h3.h31 {
        font-size: 1.1rem;
    }

    .color>div {
        padding: 0 2rem;
        gap: 2rem;
    }

    .color>div>img {
        width: 250%;
    }

    .color>div .sec1,
    .color>div .sec2,
    .color>div .sec3 {
        transition: transform .5s;
    }

    .color>div .sec1 {
        transform: translate(9rem, -10rem);
    }

    .color>div .sec2 {
        transform: translate(-9rem, -8rem);
    }

    .color>div .sec3 {
        transform: translate(-1rem, 2rem);
    }

    .color>div .sec1.active,
    .color>div .sec2.active,
    .color>div .sec3.active {
        transform: translate(-40vw, -20vh);
        z-index: 1;
    }

    .color>div .sec1 article,
    .color>div .sec2 article,
    .color>div .sec3 article {
        max-width: 80vw;
        transform: translate(50%, 50%);
        border-radius: 15px;
        padding: 1rem;
    }

    .color>div article h4,
    .color>div article p,
    .color>div article span {
        scale: 1;
    }

    #cpu,
    .cpu {
        padding: 15vw 2rem;
    }

    .cpu h3 span {
        font-size: 1.1rem;
    }

    #mux,
    .mux {
        display: flex;
        flex-direction: column;
    }

    .mux .slide {
        padding: 0;
        justify-content: space-between;
        flex-direction: column;
    }

    .mux .slide article {
        padding: 2rem;
    }

    .design .aero h3 span {
        font-size: 1.1rem;
    }

    .porta .text {
        padding: 5rem 0 2rem;
    }

    .porta .text h3 span {
        font-size: 1.1rem;
    }

    .porta .grid3 {
        grid-template-columns: 1fr;
        grid-template-areas:
            'glt'
            'grt'
            'gbp'
        ;
    }

    .porta .grid3 .glt {
        grid-template-columns: 1fr;
    }

    .porta .grid3 .glt aside {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .porta .grid3 article>div {
        align-items: center;
    }

    .porta .grid3 .glt aside img {
        width: 60%;
        height: 100%;
        transform: scale(1);
        object-fit: contain;
        transform-origin: right center;
    }

    .porta .grid3 article>div h4,
    .porta .grid3 article>div p {
        text-align: center;
    }

    .porta .grid3 .grt aside {
        padding: 2rem 0;
    }

    .porta .grid3 .gbp>img.wifi6 {
        position: relative;
        transform: unset;
    }

    .porta .grid3 .gbp .spec {
        flex-wrap: wrap;
    }

    .porta .grid3 .gbp .spec div {
        width: 40%;
    }

    #battery,
    .battery {
        padding: 5rem 1rem;
    }

    .battery .cntnt .text h3 span {
        font-size: 1.1rem;
    }

    .battery .cntnt {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: unset;
        gap: 2rem;
    }

    .battery .cntnt .img {
        padding: 0 0 4rem;
    }

    .battery .cntnt .img img {
        position: relative;
        transform: scale(1);
        width: 100%;
        height: unset;
        object-fit: unset;
    }

    #soft,
    .soft {
        padding: 0 1rem;
    }

    .soft .text {
        padding: 5rem 2rem 3rem;
    }

    .soft .grid3 {
        display: flex;
        flex-direction: column;
    }

    .soft .grid3 .grt div {
        padding: 5rem 3rem;
    }

    .soft .grid3 .gbp {
        flex-direction: column;
    }

    .soft .grid3 .gbp aside {
        padding: 0;
    }

    .soft .grid3 .gbp aside img {
        width: 100%;
    }

    .soft .grid3 .gbp div h4,
    .soft .grid3 .gbp div p {
        text-align: center;
    }

    .soft .grid3 article {
        align-items: center;
    }

    .soft .grid3 .gbp div {
        align-items: center;
    }

    .soft .grid3 .gcc aside>img {
        display: none;
    }

    .soft .grid3 .gcc ul {
        grid-template-columns: unset;
    }

    .soft .text h3 span {
        font-size: 1.1rem;
    }

    .connect .text h3 span {
        font-size: 1.1rem;
    }

    #cool,
    .cool {
        padding: 5rem 1rem;
    }

    .cool .grid3 {
        display: flex;
        flex-direction: column;
    }

    .cool .text h3 span {
        font-size: 1.1rem;
    }

    .effects .timeline .spacer article h3 span {
        font-size: 1.1rem;
    }

    .effects .timeline .spacer article {
        padding: 15vh 0 0 3rem;
        max-width: 85vw;
    }

    .effects .timeline .spacer div>img {
        right: -90vw;
    }
}

@media screen and (min-width:960px) {
    #model-header {
        padding: 0.5% 0;
        position: unset;
        left: unset;
        top: unset
    }

    #model-header .header-sub-title {
        display: block
    }

    .model-content {
        margin-top: 120px;
        display: none;
    }

    .Content-TopArea .breadcrumb {
        margin-right: 0;
        margin-left: 0;
    }

    #PageMainContent .container {
        max-width: 90%;
        min-width: 90%;
    }

    .main-content .model-header>.header-sub-title {
        margin: 5px 0;
    }
}

@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;
    }
}

.event-icon-wrapper,
#divGoTop,
.EnterpriseButton {
    display: none !important;
}