@media (orientation: portrait) {

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

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

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

    #nvslide,
    .nvslide {
        padding: calc(var(--vwvh) * 7.5) calc(var(--vwvh) * 2.5);
    }

    .nvslide .nv-slider {
        gap: 5vw;
        justify-content: center;
    }

    .nvslide .nv-slider-prev-btn,
    .nvslide .nv-slider-next-btn {
        display: none;
    }

    .nvslide .ada .img {
        width: 50%;
        height: 100%;
    }

    .nvslide .adagrid {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--vwvh) * 2);
    }

    .nvslide .adagrid>div {
        gap: calc(var(--vwvh) * .5);
    }

    .nvslide .adagrid>div>div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nvslide .adagrid h4,
    .nvslide .adagrid p {
        letter-spacing: 0px;
    }

    .nvslide .nv-slider .imgs {
        height: unset;
        justify-content: flex-start;
    }

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

    .Excellent>img:nth-child(1) {
        width: unset;
        left: -40%;
    }

    .Excellent>img:nth-child(2) {
        width: unset;
        opacity: .5;
        right: -30%;
    }

    .Excellent>section {
        gap: 5rem;
        padding: 0;
    }

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

    .Excellent>section>div .img,
    .Excellent>section>div .text {
        width: 100%;
    }

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

    .Excellent>section>div:nth-child(odd) .text h4,
    .Excellent>section>div:nth-child(odd) .text li,
    .Excellent>section>div:nth-child(odd) .text p {
        text-align: left;
    }

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

    .InnerGIGABYTEContent .dots {
        display: none;
    }
}

@media screen and (max-width:1920px) {
    #nvslide, .nvslide {
        padding: 100px 0;
    }

    .nvslide .nv-slider .title {
        max-width: 960px;
    }

    .nvslide .adagrid>div>div {
        gap:15px
    }

    .Excellent>section {
        max-width: 1120px;
    }
}

@media screen and (max-width:1600px) {
    .Excellent>section {
        max-width: 960px;
    }
}

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

    .nvslide .nv-slider .title {
        max-width: 800px;
    }

    .nvslide h3{
        font-size: 40px;
        line-height: 44px;
    }
    
    .nvslide h4{
        font-size: 22px;
        line-height: 22px;        
    }

    .nvslide .text p {
        font-size: 14px;
        line-height: 16px;    
    }

    .nvslide .adagrid h4 {        
        font-size: 16px;
        line-height: 18px;   
    }
    .nvslide .adagrid p {        
        font-size: 13px;
        line-height: 15px;   
    }

    .nvslide .adagrid>div>div {
        gap:7px
    }
}

@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: calc(3vw + 20vh) calc(2vw + 2vh);
        background-image: linear-gradient(180deg, #05142b 0%, #04142b 50%, #1c466d 100%);
    }

    .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 .imgs img:first-child {
        width: 120vw;
    }

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

    .Excellent>section {
        max-width: 768px;
    }
}

@media screen and (max-width:1200px) {
    .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%;
    }
}

@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 {
        flex-direction: column;
        max-width: 768px;
        gap: 4rem;
    }

    .KeyFeature>div .text {
        max-width: 600px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

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

    .nvslide .nv-slider .title {
        max-width: 600px;
    }

    .nvslide h3{
        font-size: 32px;
        line-height: 34px;
    }
    
    .nvslide h4{
        font-size: 22px;
        line-height: 22px;        
    }

    .nvslide .text p {
        font-size: 13px;
        line-height: 15px;    
    }

    .nvslide .adagrid{
        padding:0 20px;
        max-width: 600px;
    }

    .nvslide .ada {
        padding:0 20px;
    }

    .nvslide .ada .img{
        width: 100%;
    }

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

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

    .Aitop>video {
        width: 140%;
    }

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

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

    .Excellent>section>div {
        margin-bottom: 3rem;
    }

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

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

    .psu>div {
        width: 600px;
    }

    .gcc>div {
        width: 600px;
    }

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

@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: 320px;
    }

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

    .nvslide .nv-slider .title {
        max-width: 300px;
    }

    .nvslide .nv-slider .title h3, .nvslide .nv-slider .title h4 {
        text-align: left;
    }

    .nvslide .nv-slider .title h4 {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 10px;
    }

    .nvslide h3{
        font-size: 32px;
        line-height: 34px;
    }
    
    .nvslide h4{
        font-size: 22px;
        line-height: 22px;        
    }

    .nvslide .text p {
        font-size: 13px;
        line-height: 15px;    
    }

    .nvslide .adagrid{
        padding:0 20px;
        max-width: 320px;
        margin-top: 50px;
    }

    .nvslide .adagrid img{
        max-width: 60px;
    }

    .nvslide .ada{
        flex-direction:column;
        max-width: 320px;
    }


    .Aitop>video {
        width: 300%;
    }

    .Aitop>div {
        padding: 0 10vw;
    }

    .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: 20vw 10vw;
    }

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

    .Cool .system .text h3,
    .Cool .system .text p {
        text-align: left;
    }

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

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

    .Excellent>section>div {
        margin-bottom: 0rem;
    }

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

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

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

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

    .psu>div h3,
    .psu>div p {
        max-width: 400px;
        text-align: left;
    }

    .psu .psugrid h4 {
        font-size: 18px;
        line-height: 18px;
        text-align: center;
    }

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

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

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

    .footNote p {
        width: auto;
    }
}