@media (orientation: portrait) {

    #KeyFeature,
    .KeyFeature {
        padding: calc(4dvw + 4dvh) calc(3dvw + 3dvh);
    }

    .KeyFeature>div {
        flex-direction: column;
        gap: 1rem;
    }

    .KeyFeature>div section {
        width: 100%;
    }

    .KeyFeature>div .text {
        width: 100%;
        gap: 1rem;
    }

    #BrandPromo,
    .BrandPromo {
        padding: 0 10vw;
    }

    .BrandPromo .PDPF {
        min-height: unset;
    }

    .BrandPromo .PDPF>img {
        opacity: .3;
    }

    .BrandPromo .PDPF>div .text {
        margin: 0;
    }

    .BrandPromo .YT>div {
        flex-direction: column;
    }

    .BrandPromo .YT>div .text {
        padding: 0;
    }

    .BrandPromo .CVI>div {
        margin: 0;
        flex-direction: column;
    }

    .BrandPromo .NGPAVD {
        flex-direction: column;
        padding: 0;
    }

    #bs,
    .bs {
        padding: 15vw 10vw;
    }

    .bs>img.bg {
        width: unset;
        height: 100%;
    }

    .bs>div {
        display: flex;
        flex-direction: column;
        gap: 5vw;
    }

    .bs aside {
        align-items: flex-start;
        gap: 2.5vw;
    }

    #psu,
    .psu {
        padding: calc(2vw * 2vh) calc(2vw + 2vh);
    }

    .psu .psugrid {
        flex-direction: column;
    }

    .gcc>div img {
        max-width: unset;
        width: 150%;
    }

    #brand,
    .brand {
        margin: 10vw 0 0 0;
    }

    .brand>div {
        margin: 10vw 0 0 0;
        gap: 50px;
    }

    .brand>div img {
        align-self: center;
    }

    .brand>section .content {
        grid-template-columns: 1fr 1fr;
    }

    .InnerGIGABYTEContent .dots {
        display: none;
    }
}

@media screen and (max-width:1920px) {
    .KeyFeature>div {
        max-width: 1320px;
    }
}

@media screen and (max-width:1600px) {
    .KeyFeature>div{
        gap: 10px;
    }
}

@media screen and (max-width:1440px) {
    .KeyFeature>div .imgs img{
        width: 640px;
    }
    
    .Aitop>div .text {
        max-width: 900px;
    }

    .BrandPromo .YT>div .imgs  {
        max-width: 640px;
    }
}

@media screen and (max-width:1366px) {
    .Aitop>video {
        min-height: 30vw;
        width: unset;
    }

    .Aitop>div {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: calc(2vw + 2vh) 0;
    }

    .Aitop>div .text {
        align-items: center;
        max-width: 768px;
    }

    .Aitop>div .text h3,
    .Aitop>div .text p {
        text-align: center;
    }

    .Aitop>div .spec {
        display: flex;
        column-gap: 5vw;
    }

    .Aitop>div .spec>div {
        place-items: center;
        padding-top: 2rem;
    }

    #Cool,
    .Cool {
        padding: 0 calc(2vw + 2vh);
    }

    .Cool .slideGroup>div {
        min-height: unset;
    }

    .Cool .slideGroup {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }

    .Cool .slideGroup section {
        position: relative;
        max-width: 100%;
        max-height: unset;
    }

    .Cool .slideGroup section aside {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .Cool .slideGroup section aside>div {
        min-width: 100%;
    }

    .Cool .system .text {
        max-width: 768px;
        ;
    }

    .Cool .Excellent{
        max-width: 768px;
    }

    .Cool .Excellent>div:nth-child(odd),
    .Cool .Excellent>div:nth-child(even) {
        flex-direction: column-reverse;
    }

    .Cool .Excellent>div .text {
        padding: 0 0 1rem;
    }

    .Cool .Excellent>div .img,
    .Cool .Excellent>div .text {
        width: 100%;
    }
    .utility>div .imgs {
        max-width: 768px;
    }
    .BrandPromo .YT>div{
        flex-flow: column;
        gap: 45px;
    }
    .BrandPromo .YT>div .imgs {
        max-width: 768px;
    }
    .BrandPromo .NGPAVD{
        flex-direction: column;
    }
    .BrandPromo .NGPAVD aside .imgs,.BrandPromo .NGPAVD aside .text {
        max-width: 768px;
    }
}

@media screen and (max-width: 1200px) {
    .KeyFeature>div{
        flex-direction: column;
        max-width: 900px;
        gap: 30px;
    }
    .KeyFeature>div section {
        width: 100%;        
        flex-direction: row;
        gap: 50px;
    }
    .KeyFeature>div .imgs img{
        width: 100%;
    }

    .psu>div {
        width: 800px;
    }

    .psu .psugrid {
        flex-direction: column;
        flex-flow: wrap;
        width: 100%;
    }

    .psu .psugrid aside {
        width: 50%;
    }

    .psu .psugrid aside img {
        width: 100%;
    }
    .BrandPromo .PDPF>img{
        right: -50%;
    }
    .BrandPromo .PDPF>div{
        max-width: 600px;
    }
    .BrandPromo .PDPF>div .text {
        width: 100%;
        padding: 0;
    }
    .BrandPromo .PDPF>div .text h3,.BrandPromo .PDPF>div .text p{
        text-align: center;
    }
    .BrandPromo .CVI>div {
        flex-direction: column;
        margin: 0 auto;
        max-width: 768px;
        gap: 100px;
    }
    .BrandPromo .CVI aside{
        max-width: 600px;
        margin: 0 auto;
    }
}

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

@media screen and (max-width: 960px) {
    .InnerGIGABYTEContent h3 {
        font-size: 44px;
        line-height: 40px;
    }

    .InnerGIGABYTEContent h3 {
        font-size: 32px;
        line-height: 28px;
    }

    .InnerGIGABYTEContent p,
    .InnerGIGABYTEContent a,
    .InnerGIGABYTEContent ul,
    .InnerGIGABYTEContent li {
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0;
    }

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

    .KeyFeature>div .text h3 {
        font-size: 32px;
    }

    #Aitop,
    .Aitop {
        gap: 1rem;
    }

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

    .Aitop>video {
        width: 140%;
    }
    #Cool, .Cool{
        padding: 0;
    }
    .Cool .Excellent{
        max-width:600px
    }
    .Cool .system .text {
        max-width: 600px;
    }

    .Cool .slideGroup {
        max-width: 600px;
    }

    .Cool>section:has(.Excellent){
        margin: 0;
    }

    #bs,
    .bs {
        padding: 8rem 0;
    }

    .bs>div {
        grid-template-columns: 2fr;
        gap: 5rem;
        max-width: 600px;
        margin-top: 0;
    }

    .psu>div {
        width: 600px;
    }

    .gcc>div {
        width: 600px;
    }

    .gcc>div img {
        max-width: 150%;
    }

    .utility>div .text h3, .utility>div .text p{
        max-width: 600px;
    }
    .utility>div .imgs{
        max-width: 600px;
    }
    .brand>section{
        padding: 130px 0;
    }
    .BrandPromo .YT>div .imgs{
        max-width: 600px;
    }
    .BrandPromo .YT>div .text{
        max-width: 600px;
    }
    .BrandPromo .CVI>div{
        max-width: 600px;
    }
    .BrandPromo .NGPAVD aside .imgs, .BrandPromo .NGPAVD aside .text{
        max-width: 600px;
    }
    .brand>section .content{
        max-width: 600px;
        grid-template-columns: 1fr 1fr;
    }
    .brand>section .brandbg>img{
        width: 200%;
    }
    .brand>div{
        padding: 50px 0;
    }
}

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

@media screen and (max-width: 600px) {
    .InnerGIGABYTEContent h3 {
        font-size: 34px;
        line-height: 32px;
    }

    .InnerGIGABYTEContent h4 {
        font-size: 22px;
        line-height: 28px;
    }

    .InnerGIGABYTEContent p,
    .InnerGIGABYTEContent a,
    .InnerGIGABYTEContent ul,
    .InnerGIGABYTEContent li {
        font-size: 13px;
        line-height: 16px;
    }

    #KeyFeature,
    .KeyFeature {
        padding: 20vw 10vw;
    }

    .KeyFeature>div {
        max-width: 375px;
    }
    .KeyFeature>div section {
        flex-direction: column;
        gap: 20px;
    }
    .KeyFeature>div .text h3 {
        font-size: 32px;
    }

    .Aitop>video {
        width: 300%;
    }

    .Aitop>div {
        padding: 0 10vw;
    }
    .Aitop>div .text {
        max-width: 375px;
    }

    .Aitop>div .spec {
        display: grid;
        width: 100%;
    }

    .Aitop>div .spec>div {
        place-items: flex-start;
        padding-top: 0px;
    }

    .Aitop>div .spec h4 {
        font-size: 36px;
    }

    .Aitop>div .spec h5 {
        font-size: 12px;
    }

    .Aitop>div .text h3,
    .Aitop>div .text p {
        text-align: left;
    }

    #Cool,
    .Cool {
        padding: 0 10vw;
    }

    .Cool .system .imgs {
        width: 125%;
    }

    .Cool .system .text h3,
    .Cool .system .text p {
        text-align: left;
    }
    .Cool .system .text{
        max-width: 375px;
    }

    .Cool .slideGroup section aside>div {
        padding: 20px;
    }

    .Cool .slideGroup section aside>div .text h4 {
        font-size: 22px;
        line-height: 28px;
    }

    .Cool .Excellent{
        max-width: 375px;
    }
    .Excellent>section>div {
        margin-bottom: 0rem;
    }

    #bs,
    .bs {
        padding: 20vw 10vw;
    }

    .bs>div {
        margin-top: 0;
    }

    #psu,
    .psu {
        padding: 20vw 10vw;
    }

    .psu>div {
        width: 400px;
        align-items: flex-start;
    }

    .psu .psugrid h4 {
        font-size: 18px;
        line-height: 18px;
        text-align: center;
    }
    .psu>div h3, .psu>div p{
        text-align: left;
    }
    .utility>div{
        width: 400px;
    }
    .utility>div .text{
        align-items: flex-start;
    }
    .utility>div .text h3, .utility>div .text p, .utility>div .imgs{
        text-align: left;
    }

    #gcc,
    .gcc {
        padding: 20vw 10vw 0;
    }

    .gcc>div {
        width: 100%;
        align-items: flex-start;
    }

    .gcc>div h3,
    .gcc>div p {
        text-align: left;
    }

    .gcc>div img {
        align-self: center;
    }

    #brand,
    .brand {
        padding: 0vw 10vw 10vw;
    }

    .brand>div {
        flex-direction: column;
    }

    .brand h4 {
        font-size: 14px;
        line-height: 16px;
    }

    #footNote p,
    .footNote p {
        font-size: 10px;
        line-height: 10px;
    }

    #footNote,
    .footNote {
        padding: 0 10vw 10vw;
        align-items: flex-start;
    }

    .footNote p {
        width: auto;
    }

    .utility>div .text h3, .utility>div .text p,.utility>div .imgs{
        max-width: 400px;
    }

    #BrandPromo, .BrandPromo{
        padding: 0;
    }
    .BrandPromo .PDPF{
        min-height: 300px;
    }
    .BrandPromo .PDPF>div{
        max-width: 400px;
    }
    .BrandPromo .PDPF>div .text h3, .BrandPromo .PDPF>div .text p{
        text-align: left;
    }
    .BrandPromo .YT>div{
        margin: 100px 0;
        max-width: 400px;
    }
    .BrandPromo .CVI{
        width: 400px;
    }
    .BrandPromo .NGPAVD{
        width: 400px;
        margin-top: 100px;
        margin-bottom: 60px;    
        gap: 100px;
    }
    .brand>section .content{
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 20px;
    }
    .brand>section{
        padding: 100px 0;
    }
    .brand>section .content>div{
        gap: 10px;
        padding: 25px 15px;
    }
}
@media screen and (max-width: 375px) {
    .BrandPromo .NGPAVD{
        width: 350px;
    }
    .psu>div,.utility>div,.utility>div .text h3, .utility>div .text p,.utility>div .imgs,.BrandPromo .PDPF>div,.BrandPromo .YT>div,.BrandPromo .CVI,.BrandPromo .NGPAVD,.brand>section .content{
        max-width: 320px;
    }

}