@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto.css");

@charset "UTF-8";

@font-face{
    font-family: 'DIN-Condensed-Bold';
    src:local("DIN Condensed Bold");
    src:local("DIN-Condensed-Bold");
    src:url(https://dlcdnwebimgs.asus.com/files/media/7d05cc17-7496-4ce3-90b1-15562cd64225/v2/wcbGEcMyX41wChbf/css/font/DIN-Condensed-Bold.ttf) format("truetype");font-display:swap
    }
    #fixASUSWrapper div,#fixASUSWrapper span,#fixASUSWrapper applet,#fixASUSWrapper object,#fixASUSWrapper iframe,#fixASUSWrapper h1,#fixASUSWrapper h2,#fixASUSWrapper h3,#fixASUSWrapper h4,#fixASUSWrapper h5,#fixASUSWrapper h6,#fixASUSWrapper p,#fixASUSWrapper blockquote,#fixASUSWrapper pre,#fixASUSWrapper a,#fixASUSWrapper abbr,#fixASUSWrapper acronym,#fixASUSWrapper address,#fixASUSWrapper big,#fixASUSWrapper cite,#fixASUSWrapper code,#fixASUSWrapper del,#fixASUSWrapper dfn,#fixASUSWrapper em,#fixASUSWrapper img,#fixASUSWrapper ins,#fixASUSWrapper kbd,#fixASUSWrapper q,#fixASUSWrapper s,#fixASUSWrapper samp,#fixASUSWrapper small,#fixASUSWrapper strike,#fixASUSWrapper strong,#fixASUSWrapper sub,#fixASUSWrapper sup,#fixASUSWrapper tt,#fixASUSWrapper var,#fixASUSWrapper b,#fixASUSWrapper u,#fixASUSWrapper i,#fixASUSWrapper center,#fixASUSWrapper dl,#fixASUSWrapper dt,#fixASUSWrapper dd,#fixASUSWrapper ol,#fixASUSWrapper ul,#fixASUSWrapper li,#fixASUSWrapper fieldset,#fixASUSWrapper form,#fixASUSWrapper label,#fixASUSWrapper legend,#fixASUSWrapper table,#fixASUSWrapper caption,#fixASUSWrapper tbody,#fixASUSWrapper tfoot,#fixASUSWrapper thead,#fixASUSWrapper tr,#fixASUSWrapper th,#fixASUSWrapper td,#fixASUSWrapper article,#fixASUSWrapper aside,#fixASUSWrapper canvas,#fixASUSWrapper details,#fixASUSWrapper embed,#fixASUSWrapper figure,#fixASUSWrapper figcaption,#fixASUSWrapper footer,#fixASUSWrapper header,#fixASUSWrapper hgroup,#fixASUSWrapper menu,#fixASUSWrapper nav,#fixASUSWrapper output,#fixASUSWrapper ruby,#fixASUSWrapper section,#fixASUSWrapper summary,#fixASUSWrapper time,#fixASUSWrapper mark,#fixASUSWrapper audio,#fixASUSWrapper video{
        font-family: "Roboto", "Arial", "sans-serif";
    }

.ratio-16-9 {

    position: relative

}



.ratio-16-9:before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 56.25%

}



.ratio-16-9>* {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    overflow: hidden

}



.ratio-1-1 {

    position: relative

}



.ratio-1-1:before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 100%

}



.ratio-1-1>* {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    overflow: hidden

}



#fixASUSWrapper .container-inner-1200,

#fixASUSWrapper .container-inner-1440,

#fixASUSWrapper .container-inner-1920,

#fixASUSWrapper .container-inner-2560 {

    margin-left: auto !important;

    margin-right: auto !important

}



@font-face {

    font-family: xolonium;

    src: url(font/xolonium.eot);

    src: url(font/xolonium.eot?#iefix) format("embedded-opentype"), url(font/xolonium.otf) format("opentype"), url(font/xolonium.woff) format("woff"), url(font/xolonium.ttf) format("truetype"), url(font/xolonium.svg#rogfont) format("svg");

    font-weight: 400;

    font-style: normal

}



@font-face {

    font-family: rog;

    src: url(font/rogfont.eot);

    src: url(font/rogfont.eot?#iefix) format("embedded-opentype"), url(font/rogfont.otf) format("opentype"), url(font/rogfont.woff) format("woff"), url(font/rogfont.ttf) format("truetype"), url(font/rogfont.svg#rogfont) format("svg");

    font-weight: 400;

    font-style: normal

}



@font-face {

    font-family: 'jerseym54';

    src: url("font/Jersey-M54.eot");

    src: url("font/Jersey-M54.eot?#iefix") format("embedded-opentype"), url("font/Jersey-M54.otf") format("opentype"), url("font/Jersey-M54.woff") format("woff"), url("font/Jersey-M54.ttf") format("truetype"), url("font/Jersey-M54.svg#rogfont") format("svg");

    font-weight: normal;

    font-style: normal;

}



#fixASUSWrapper .f-f-rog {

    font-family: DIN-Condensed-Bold, Roboto, sans-serif !important;

}



#fixASUSWrapper .f-f-xolonium,#fixASUSWrapper .f-f-xolonium span,#fixASUSWrapper a.f-f-xolonium,#fixASUSWrapper p.info-label {

    font-family: DIN-Condensed-Bold, Roboto, sans-serif !important;

}



#fixASUSWrapper .gradient-title {

    position: relative;

    color: #f8b942 !important;

    /*background: transparent;

background: linear-gradient(to right, #3e5eff 0%, #8c9fff 20%, #e59bb8 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;*/

}



#fixASUSWrapper .gradient-title:after {

    content: '';

    display: block;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    z-index: -2;

}



#fixASUSWrapper .gradient-title .super {

    font-size: 70%;

    vertical-align: super

}



@media (-ms-high-contrast:active),

(-ms-high-contrast:none) {

    #fixASUSWrapper .gradient-title {

        position: relative;

        color: #3e5eff;

        background: transparent

    }



    #fixASUSWrapper .gradient-title:after {

        content: none

    }

}



#fixASUSWrapper :root .gradient-title,

#fixASUSWrapper _:-ms-fullscreen {

    position: relative;

    color: #3e5eff;

    background: transparent

}



#fixASUSWrapper :root .gradient-title:after,

#fixASUSWrapper _:-ms-fullscreen:after {

    content: none

}



@supports (-ms-accelerator:true) {

    #fixASUSWrapper .gradient-title {

        position: relative;

        color: #3e5eff;

        background: transparent;

        -webkit-background-clip: text;

        -webkit-text-fill-color: #3e5eff

    }



    #fixASUSWrapper .gradient-title:after {

        content: none

    }

}



#fixASUSWrapper h1,

#fixASUSWrapper h2,

#fixASUSWrapper h3,

#fixASUSWrapper h4,

#fixASUSWrapper p {

    margin: 0 !important;

    padding: 0 !important

}



#fixASUSWrapper h2 {

    font-size: 24px !important;

    line-height: normal !important;

}



#fixASUSWrapper h4 {

    font-size: 24px !important;

    line-height: normal !important;

    letter-spacing: 0.1em

}



#fixASUSWrapper p {

    font-size: 15px !important;

    line-height: 24px !important;

    font-weight: 300 !important

}



@media (min-width:768px) {

    #fixASUSWrapper h2 {

        font-size: 60px !important;

        line-height: normal !important

    }



    #fixASUSWrapper h4 {

        font-size: 36px !important;

        line-height: normal !important

    }



    #fixASUSWrapper p {

        font-size: 20px !important;

        line-height: 32px !important;

        font-weight: 300 !important

    }

}



@media (min-width:1920px) and (max-width:2560px) {

    #fixASUSWrapper h2 {

        font-size: 3.125vw !important

    }



    #fixASUSWrapper h4 {

        font-size: 1.875vw !important

    }



    #fixASUSWrapper p {

        font-size: 1.04167vw !important;

        line-height: 1.66667vw !important

    }

}



@media (min-width:2561px) {

    #fixASUSWrapper h2 {

        font-size: 80px !important

    }



    #fixASUSWrapper h4 {

        font-size: 48px !important

    }



    #fixASUSWrapper p {

        font-size: 26.6667px !important;

        line-height: 42.6667px !important

    }

}



.owl-carousel {

    display: none;

    width: 100%;

    -webkit-tap-highlight-color: transparent;

    position: relative;

    z-index: 1

}



.owl-carousel .owl-stage {

    position: relative;

    -ms-touch-action: pan-Y;

    touch-action: manipulation;

    -moz-backface-visibility: hidden

}



.owl-carousel .owl-stage:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0

}



.owl-carousel .owl-stage-outer {

    position: relative;

    overflow: hidden;

    -webkit-transform: translateZ(0)

}



.owl-carousel .owl-item,

.owl-carousel .owl-wrapper {

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0)

}



.owl-carousel .owl-item {

    position: relative;

    min-height: 1px;

    float: left;

    -webkit-backface-visibility: hidden;

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none

}



.owl-carousel .owl-item img {

    display: block;

    width: 100%

}



.owl-carousel .owl-dots.disabled,

.owl-carousel .owl-nav.disabled {

    display: none

}



.owl-carousel .owl-dot,

.owl-carousel .owl-nav .owl-next,

.owl-carousel .owl-nav .owl-prev {

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}



.owl-carousel .owl-nav button.owl-next,

.owl-carousel .owl-nav button.owl-prev,

.owl-carousel button.owl-dot {

    background: none;

    color: inherit;

    border: none;

    padding: 0 !important;

    font: inherit

}



.owl-carousel.owl-loaded {

    display: block

}



.owl-carousel.owl-loading {

    opacity: 0;

    display: block

}



.owl-carousel.owl-hidden {

    opacity: 0

}



.owl-carousel.owl-refresh .owl-item {

    visibility: hidden

}



.owl-carousel.owl-drag .owl-item {

    -ms-touch-action: pan-y;

    touch-action: pan-y;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}



.owl-carousel.owl-grab {

    cursor: move;

    cursor: -webkit-grab;

    cursor: -moz-grab;

    cursor: grab

}



.owl-carousel.owl-rtl {

    direction: rtl

}



.owl-carousel.owl-rtl .owl-item {

    float: right

}



.no-js .owl-carousel {

    display: block

}



.owl-carousel .animated {

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    -moz-animation-fill-mode: both;

    -o-animation-fill-mode: both;

    animation-fill-mode: both

}



.owl-carousel .owl-animated-in {

    z-index: 0

}



.owl-carousel .owl-animated-out {

    z-index: 1

}



.owl-carousel .fadeOut {

    -webkit-animation-name: fadeOut;

    -moz-animation-name: fadeOut;

    -o-animation-name: fadeOut;

    animation-name: fadeOut

}



@-webkit-keyframes fadeOut {

    0% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



@-moz-keyframes fadeOut {

    0% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



@-o-keyframes fadeOut {

    0% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



@keyframes fadeOut {

    0% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



.owl-height {

    -webkit-transition: height .5s ease-in-out;

    -o-transition: height .5s ease-in-out;

    -moz-transition: height .5s ease-in-out;

    transition: height .5s ease-in-out

}



.owl-carousel .owl-item .owl-lazy {

    opacity: 0;

    -webkit-transition: opacity .4s ease;

    -o-transition: opacity .4s ease;

    -moz-transition: opacity .4s ease;

    transition: opacity .4s ease

}



.owl-carousel .owl-item .owl-lazy:not([src]),

.owl-carousel .owl-item .owl-lazy[src^=""] {

    max-height: 0

}



.owl-carousel .owl-item img.owl-lazy {

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    transform-style: preserve-3d

}



.owl-carousel .owl-video-wrapper {

    position: relative;

    height: 100%;

    background: #000

}



.owl-carousel .owl-video-play-icon {

    position: absolute;

    height: 80px;

    width: 80px;

    left: 50%;

    top: 50%;

    margin-left: -40px;

    margin-top: -40px;

    background: url(~owl.carousel/src/img/owl.video.play.png) no-repeat;

    cursor: pointer;

    z-index: 1;

    -webkit-backface-visibility: hidden;

    -webkit-transition: -webkit-transform .1s ease;

    transition: -webkit-transform .1s ease;

    -o-transition: -o-transform .1s ease;

    -moz-transition: transform .1s ease, -moz-transform .1s ease;

    transition: transform .1s ease;

    transition: transform .1s ease, -webkit-transform .1s ease, -moz-transform .1s ease, -o-transform .1s ease

}



.owl-carousel .owl-video-play-icon:hover {

    -webkit-transform: scale(1.3);

    -moz-transform: scale(1.3);

    -ms-transform: scale(1.3);

    -o-transform: scale(1.3);

    transform: scale(1.3)

}



.owl-carousel .owl-video-playing .owl-video-play-icon,

.owl-carousel .owl-video-playing .owl-video-tn {

    display: none

}



.owl-carousel .owl-video-tn {

    opacity: 0;

    height: 100%;

    background-position: 50%;

    background-repeat: no-repeat;

    -webkit-background-size: contain;

    -moz-background-size: contain;

    background-size: contain;

    -webkit-transition: opacity .4s ease;

    -o-transition: opacity .4s ease;

    -moz-transition: opacity .4s ease;

    transition: opacity .4s ease

}



.owl-carousel .owl-video-frame {

    position: relative;

    z-index: 1;

    height: 100%;

    width: 100%

}



.owl-theme .owl-nav {

    margin-top: 10px;

    text-align: center;

    -webkit-tap-highlight-color: transparent

}



.owl-theme .owl-nav [class*=owl-] {

    color: #fff;

    font-size: 14px;

    margin: 5px;

    padding: 4px 7px;

    background: #d6d6d6;

    display: inline-block;

    cursor: pointer;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px

}



.owl-theme .owl-nav [class*=owl-]:hover {

    background: #869791;

    color: #fff;

    text-decoration: none

}



.owl-theme .owl-nav .disabled {

    opacity: .5;

    cursor: default

}



.owl-theme .owl-nav.disabled+.owl-dots {

    margin-top: 10px

}



.owl-theme .owl-dots {

    text-align: center;

    -webkit-tap-highlight-color: transparent

}



.owl-theme .owl-dots .owl-dot {

    display: inline-block;

    zoom: 1;

    *display: inline

}



.owl-theme .owl-dots .owl-dot span {

    width: 10px;

    height: 10px;

    margin: 5px 7px;

    background: #d6d6d6;

    display: block;

    -webkit-backface-visibility: visible;

    -webkit-transition: opacity .2s ease;

    -o-transition: opacity .2s ease;

    -moz-transition: opacity .2s ease;

    transition: opacity .2s ease;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    border-radius: 30px

}



.owl-theme .owl-dots .owl-dot.active span,

.owl-theme .owl-dots .owl-dot:hover span {

    background: #869791

}



.farbtastic {

    position: relative

}



.farbtastic * {

    position: absolute;

    cursor: crosshair

}



.farbtastic,

.farbtastic .wheel {

    width: 195px;

    height: 195px

}



.farbtastic .color,

.farbtastic .overlay {

    top: 47px;

    left: 47px;

    width: 101px;

    height: 101px

}



.farbtastic .wheel {

    background: url(../img/farbtastic/wheel.png) no-repeat;

    width: 195px;

    height: 195px

}



.farbtastic .overlay {

    background: url(../img/farbtastic/mask.png) no-repeat

}



.farbtastic .marker {

    width: 17px;

    height: 17px;

    margin: -8px 0 0 -8px;

    overflow: hidden;

    background: url(../img/farbtastic/marker.png) no-repeat

}



.jarallax {

    position: relative;

    z-index: 0

}



.jarallax>.jarallax-img {

    position: absolute;

    -o-object-fit: cover;

    object-fit: cover;

    font-family: "object-fit: cover;";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1

}



html #overview #sectionOverview {

    padding-top: 0

}



html #overview img {

    max-width: none !important

}



html #overview #sectionOverview,

html #overview #special-sectionOverview {

    width: 100% !important;

    padding-right: 0 !important;

    padding-left: 0 !important;

    padding-bottom: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    float: none !important

}



#overview #sectionOverview {

    line-height: inherit

}



::-moz-selection {

    background: #888;

    color: #ddd

}



::selection {

    background: #888;

    color: #ddd

}



body,

html {

    overflow-x: hidden;

    -webkit-overflow-scrolling: touch

}



#fixASUSWrapper,

body,

html {

    position: relative;

    width: 100%

}



#fixASUSWrapper {

    position: relative;

    width: 100%;

    color: white;

    background-color: #000;

    font-family: Roboto, "\5FAE\8EDF\6B63\9ED1\9AD4", "Microsoft JhengHei", sans-serif;

    vertical-align: baseline !important;

}



#fixASUSWrapper * {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box

}



#fixASUSWrapper img {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto

}



#fixASUSWrapper a {

    display: inline-block;

    color: #fff

}



#fixASUSWrapper ol,

#fixASUSWrapper ul {

    list-style: none;

    margin: 0 !important;

    padding: 0 !important

}



#fixASUSWrapper .matrix-view {

    position: relative;

    width: 100%;

    padding-top: 40px;

    overflow: hidden

}



#fixASUSWrapper .matrix-view .introCon {

    text-align: center;

    margin-bottom: 20px

}



#fixASUSWrapper .matrix-view .introCon .view-title {

    display: inline-block;

    letter-spacing: 2.5vw;

    margin-right: -2.5vw !important;

    padding: 0 20px !important;

    text-transform: uppercase;

    text-align: center

}



@media (min-width:768px) {

    #fixASUSWrapper .matrix-view {

        padding-top: 60px

    }



    #fixASUSWrapper .matrix-view .introCon {

        margin-bottom: 40px

    }



    #fixASUSWrapper .matrix-view .introCon .view-title {

        font-size: 60px !important;

        letter-spacing: 3.125vw;

        margin-right: -3.125vw !important

    }

}



@media (min-width:992px) {

    #fixASUSWrapper .matrix-view {

        padding-top: 80px

    }



    #fixASUSWrapper .matrix-view .introCon {

        margin-bottom: 40px

    }



    #fixASUSWrapper .matrix-view .introCon .view-title {

        letter-spacing: 3.125vw;

        margin-right: -3.125vw !important

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper .matrix-view {

        padding-top: 140px

    }



    #fixASUSWrapper .matrix-view .introCon .view-title {

        font-size: 60px !important;

        letter-spacing: 60px;

        padding: 0 !important;

        margin-right: -60px !important

    }

}



@media (min-width:1920px) and (max-width:2560px) {

    #fixASUSWrapper .matrix-view .introCon .view-title {

        font-size: 3.125vw !important;

        letter-spacing: 3.125vw

    }

}



@media (min-width:2561px) {

    #fixASUSWrapper .matrix-view .introCon .view-title {

        font-size: 80px !important;

        letter-spacing: 80px

    }

}



#fixASUSWrapper .videoBtn {

    position: relative;

    pointer-events: none

}



#fixASUSWrapper .videoBtn .btn-icon {

    display: none;

    position: absolute;

    width: 10%;

    max-width: 80px;

    min-width: 60px;

    height: auto;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



#fixASUSWrapper .videoBtn:hover .btn-icon {

    opacity: .5

}



#fixASUSWrapper .videoBtn.active {

    pointer-events: all

}



#fixASUSWrapper .videoBtn.active .btn-icon {

    display: block

}



#fixASUSWrapper .view-glow:before {

    position: absolute;

    display: block;

    content: '';

    width: 100%;

    height: 600px;

    top: -400px;

    left: 50%;

    -webkit-transform: translate(-50%, 0);

    transform: translate(-50%, 0);

    background: radial-gradient(ellipse at center, #4f4f4f 0%, rgba(0, 0, 0, 0) 70%);

    z-index: 0;

}



#fixASUSWrapper .container-inner-1200 {

    position: relative;

    width: 100%;

    max-width: 1200px

}



#fixASUSWrapper .container-inner-1440 {

    position: relative;

    width: 100%;

    max-width: 1440px

}



#fixASUSWrapper .container-inner-1920 {

    position: relative;

    width: 100%;

    max-width: 1920px

}



#fixASUSWrapper .container-inner-2560 {

    position: relative;

    width: 100%;

    max-width: 2560px

}



#fixASUSWrapper .flexCon {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



#fixASUSWrapper .flexCon.flex-reverse {

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -webkit-flex-direction: row;

    -moz-box-orient: horizontal;

    -moz-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row

}



#fixASUSWrapper .flexCon.flex-50-50>.flex-item {

    position: relative;

    width: 100%;

    padding: 20px 0

}



@media (min-width:992px) {

    #fixASUSWrapper .flexCon.flex-reverse {

        -webkit-box-orient: horizontal;

        -webkit-box-direction: reverse;

        -webkit-flex-direction: row-reverse;

        -moz-box-orient: horizontal;

        -moz-box-direction: reverse;

        -ms-flex-direction: row-reverse;

        flex-direction: row-reverse

    }



    #fixASUSWrapper .flexCon.flex-50-50>.flex-item {

        position: relative;

        width: 50%;

        padding: 0 20px

    }



    #fixASUSWrapper .flexCon.flex-50-50>.flex-item:first-child {

        padding: 0

    }

}



#fixASUSWrapper .tabCon {

    position: relative;

    width: 100%

}



#fixASUSWrapper .tabCon .tabnavCon {

    position: relative;

    width: 100%;

    border-bottom: 1px solid #f8b942;

    text-align: center

}



#fixASUSWrapper .tabnav {

    position: relative;

    display: -webkit-inline-box;

    display: -webkit-inline-flex;

    display: -moz-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-flex-wrap: nowrap;

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -moz-box-align: end;

    -ms-flex-align: end;

    align-items: flex-end;

    overflow-x: auto;

    overflow-y: hidden;

    -ms-overflow-style: none

}



#fixASUSWrapper .tabnav::-webkit-scrollbar {

    display: none

}



#fixASUSWrapper .tabnav .tabnav-item {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 auto;

    -moz-box-flex: 0;

    -ms-flex: 0 0 auto;

    flex: 0 0 auto;

    padding-left: 40px

}



#fixASUSWrapper .tabnav .tabnav-item:first-child {

    padding-left: 20px !important

}



#fixASUSWrapper .tabnav .tabnav-item:last-child {

    padding-right: 20px !important

}



#fixASUSWrapper .tabnav .tabnav-link {

    display: block;

    position: relative;

    padding: 0 0 25px 0;

    letter-spacing: 0.1em

}



#fixASUSWrapper .tabnav .tabnav-link .text {

    font-size: 18px !important;

    line-height: normal;

    color: #fff;

    pointer-events: none

}



#fixASUSWrapper .tabnav .tabnav-link .text .super {

    font-size: 70%;

    vertical-align: super

}



#fixASUSWrapper .tabnav .tabnav-link .gradient-link {

    position: relative

}



#fixASUSWrapper .tabnav .tabnav-link .isover {

    color: #f8b942;

    /*background: #3e5eff;

background: linear-gradient(to right, #3e5eff, #8c9fff, #e59bb8, #8c9fff, #3e5eff);*/

    background-size: 200% 300%;

    -webkit-animation: KeyTabLink 2s ease-out forwards;

    animation: KeyTabLink 2s ease-out forwards;

    /*-webkit-background-clip: text;*/

    /*-webkit-text-fill-color: transparent;*/

}



#fixASUSWrapper .tabnav .tabnav-link .isover:after {

    content: '';

    display: block;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    z-index: -2;

}



@media (-ms-high-contrast:active),

(-ms-high-contrast:none) {

    #fixASUSWrapper .tabnav .tabnav-link .isover {

        color: #f8b942;

        background: transparent

    }



    #fixASUSWrapper .tabnav .tabnav-link .isover:after {

        content: none

    }

}



#fixASUSWrapper .tabnav .tabnav-link :root .gradient-title,

#fixASUSWrapper .tabnav .tabnav-link _:-ms-fullscreen {

    position: relative;

    color: #3e5eff;

    background: transparent

}



#fixASUSWrapper .tabnav .tabnav-link :root .gradient-title:after,

#fixASUSWrapper .tabnav .tabnav-link _:-ms-fullscreen:after {

    content: none

}



@supports (-ms-accelerator:true) {

    #fixASUSWrapper .tabnav .tabnav-link .isover {

        color: #f8b942;

        background: transparent

    }



    #fixASUSWrapper .tabnav .tabnav-link .isover:after {

        content: none

    }

}



#fixASUSWrapper .tabnav .tabnav-link.active {

    pointer-events: none

}



#fixASUSWrapper .tabnav .tabnav-link.active .text {

    color: #f8b942

}



#fixASUSWrapper .tabnav .tabnav-link.active:before {

    position: absolute;

    display: block;

    content: '';

    width: 120%;

    height: 5px;

    left: -10%;

    bottom: 0;

    background-color: #f8b942;

}



@-webkit-keyframes KeyTabLink {

    0% {

        background-position: 0 0

    }



    to {

        background-position: 100% 0

    }

}



@-moz-keyframes KeyTabLink {

    0% {

        background-position: 0 0

    }



    to {

        background-position: 100% 0

    }

}



@-o-keyframes KeyTabLink {

    0% {

        background-position: 0 0

    }



    to {

        background-position: 100% 0

    }

}



@keyframes KeyTabLink {

    0% {

        background-position: 0 0

    }



    to {

        background-position: 100% 0

    }

}



#fixASUSWrapper .tabnav .tabnav-link .fix-text-position {

    position: relative;

    -webkit-transform: translateY(25%);

    -moz-transform: translateY(25%);

    -ms-transform: translateY(25%);

    -o-transform: translateY(25%);

    transform: translateY(25%)

}



#fixASUSWrapper .tabcontentCon {

    position: relative

}



#fixASUSWrapper .tabcontentCon .tabcontent-item {

    position: absolute;

    top: 0;

    left: 0;

    display: none;

    opacity: 0;

    padding: 20px 0

}



#fixASUSWrapper .tabcontentCon .tabcontent-item.active {

    position: relative;

    display: block

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .videoCon .cover {

    position: relative;

    display: none

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .videoCon .cover.active {

    display: block

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .videoCon .video {

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .coverCon {

    position: relative;

    width: 100%;

    margin: 0 auto

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .coverCon.cover-gap {

    padding: 0 20px

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .content-info {

    width: 100%;

    margin: 0 auto;

    padding: 0 20px

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-title {

    display: inline-block

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-label,

#fixASUSWrapper #kvView .content-info .info-label {

    font-size: 20px !important;

    line-height: 24px !important;

    /*font-style: italic;*/

    font-weight: 400 !important;

    margin-bottom: 20px !important;

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .warning {

    display: block;

    font-size: 15px;

    line-height: 22px;

    color: #a8a8a8

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .desc-launch {

    font-size: 15px;

    line-height: 22px;

    color: #8195ff !important

}



#fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .desc-launch span {

    text-decoration: underline

}



@media (min-width:768px) {

    #fixASUSWrapper .tabnav .tabnav-item {

        display: inline-block;

        padding-left: 60px

    }



    #fixASUSWrapper .tabnav .tabnav-link {

        position: relative;

        font-size: 20px !important;

        color: #fff;

        padding: 0 0 40px

    }



    #fixASUSWrapper .tabcontentCon {

        position: relative

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item {

        padding: 40px 0

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .coverCon {

        width: 100%;

        margin: 0 auto

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .coverCon.cover-gap {

        padding: 0 20px

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info {

        width: 100%;

        padding: 0 20px

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-title {

        display: inline-block

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-label,

    #fixASUSWrapper #kvView .content-info .info-label {

        font-size: 24px !important;

        line-height: 36px !important;

        margin-bottom: 20px !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .warning {

        font-size: 16px;

        line-height: 24px

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .desc-launch {

        font-size: 18px;

        line-height: 26px;

        color: #8195ff !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .desc-launch span {

        text-decoration: underline

    }

}



@media (min-width:992px) {

    #fixASUSWrapper .tabcontentCon {

        position: relative

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item {

        padding: 80px 0

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .coverCon {

        width: 100%;

        margin: 0 auto

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .coverCon.cover-gap {

        padding: 0 20px

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info {

        width: 85%;

        margin: 0 auto;

        padding: 0

    }

}



@media (min-width:1920px) and (max-width:2560px) {

    #fixASUSWrapper .tabnav .tabnav-link .text {

        font-size: .9375vw !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info {

        width: 90%

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-label,

    #fixASUSWrapper #kvView .content-info .info-label {

        font-size: 1.25vw !important;

        line-height: 1.875vw !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .warning {

        font-size: .83333vw !important;

        line-height: 1.25vw !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .desc-launch {

        font-size: .9375vw !important;

        line-height: 1.35417vw !important

    }

}



@media (min-width:2561px) {

    #fixASUSWrapper .tabnav .tabnav-link .text {

        font-size: 24px !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info {

        width: 90%

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-label,

    #fixASUSWrapper #kvView .content-info .info-label {

        font-size: 32px !important;

        line-height: 48px !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .warning {

        font-size: 22px !important;

        line-height: 32px !important

    }



    #fixASUSWrapper .tabcontentCon .tabcontent-item .content-info .info-desc .desc-launch {

        font-size: 24px !important;

        line-height: 35px !important

    }

}



#fixASUSWrapper .parallax-ratio {

    position: relative

}



#fixASUSWrapper .parallax-ratio:before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 26.04167%

}



#fixASUSWrapper .parallax-ratio>* {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    overflow: hidden

}



#fixASUSWrapper .glowOuter {

    position: relative

}



#fixASUSWrapper .glowOuter:before {

    position: absolute;

    display: block;

    content: '';

    width: 100%;

    height: 120px;

    top: -120px;

    left: 0;

    pointer-events: none;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.2) 100%);

}



#fixASUSWrapper .parallaxCon {

    position: relative;

    width: 100%;

    height: 300px;

    overflow: hidden

}



#fixASUSWrapper .parallaxCon img {

    width: 100% !important;

    height: auto

}



#fixASUSWrapper .parallaxCon.isie,

#fixASUSWrapper .parallaxCon.iswebkit {

    display: none

}



#fixASUSWrapper .parallaxCon.isie.active,

#fixASUSWrapper .parallaxCon.iswebkit.active {

    display: block

}



#fixASUSWrapper .jarallax {

    position: relative;

    z-index: 0

}



#fixASUSWrapper .jarallax .jarallax-img {

    position: absolute;

    -o-object-fit: cover;

    object-fit: cover;

    font-family: "object-fit: cover;";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1

}



#fixASUSWrapper .jarallax.iswebkit.active.webstyle {

    display: block !important;

}



#fixASUSWrapper .jarallax.iswebkit.active.mobile {

    display: none !important;

}



@media (max-width: 768px) {



    #fixASUSWrapper .jarallax.iswebkit.active.webstyle {

        display: none !important;

    }



    #fixASUSWrapper .jarallax.iswebkit.active.mobile {

        display: block !important;

    }



    #fixASUSWrapper .jarallax .jarallax-img {

        width: 100% !important;

        margin-top: -10% !important;

        height: auto !important;

    }

}



@media (min-width:992px) {

    #fixASUSWrapper .parallaxCon {

        height: 500px

    }

}



@media (min-width:1921px) {

    #fixASUSWrapper .parallaxCon {

        height: 800px

    }

}



#fixASUSWrapper .container-inner-carousel {

    position: relative;

    width: 100%;

    max-width: 1200px

}



@media (min-width:1921px) {

    #fixASUSWrapper .container-inner-carousel {

        position: relative;

        width: 62.5%;

        max-width: 1440px

    }

}



#fixASUSWrapper .carouselCon {

    padding: 40px 0;

    background-color: #000

}



#fixASUSWrapper .carouselCon>.inner {

    position: relative;

    width: 100%;

    margin: 0 auto;

    padding: 0

}



@media (min-width:992px) {

    #fixASUSWrapper .carouselCon {

        padding: 80px 0 100px

    }

}



#fixASUSWrapper .carousel-controls {

    position: relative;

    width: 100%;

    top: 0;

    -webkit-transform: translate(0);

    -moz-transform: translate(0);

    -ms-transform: translate(0);

    -o-transform: translate(0);

    transform: translate(0);

    padding: 0 20px;

    margin-bottom: 20px

}



#fixASUSWrapper .carousel-controls .carousel-control-next,

#fixASUSWrapper .carousel-controls .carousel-control-prev {

    position: relative;

    width: 60px;

    top: 0;

    bottom: auto;

    display: block;

    -webkit-border-radius: 99em;

    -moz-border-radius: 99em;

    border-radius: 99em

}



#fixASUSWrapper .carousel-controls .carousel-control-next .icon,

#fixASUSWrapper .carousel-controls .carousel-control-prev .icon {

    opacity: 1

}



#fixASUSWrapper .carousel-controls .carousel-control-next .icon.rotate,

#fixASUSWrapper .carousel-controls .carousel-control-prev .icon.rotate {

    -webkit-transform: rotate(-180deg);

    -ms-transform: rotate(-180deg);

    -moz-transform: rotate(-180deg);

    -o-transform: rotate(-180deg);

    transform: rotate(-180deg)

}



#fixASUSWrapper .carousel-controls .carousel-control-next:active .icon,

#fixASUSWrapper .carousel-controls .carousel-control-next:hover .icon,

#fixASUSWrapper .carousel-controls .carousel-control-prev:active .icon,

#fixASUSWrapper .carousel-controls .carousel-control-prev:hover .icon {

    opacity: .5

}



#fixASUSWrapper .carousel-controls .carousel-control-next {

    position: absolute;

    right: 20px

}



@media (min-width:992px) {

    #fixASUSWrapper .carousel-controls {

        position: absolute;

        top: 50%;

        -webkit-transform: translateY(-50%);

        -moz-transform: translateY(-50%);

        -ms-transform: translateY(-50%);

        -o-transform: translateY(-50%);

        transform: translateY(-50%)

    }

}



#fixASUSWrapper .owl-theme .owl-dots {

    position: absolute;

    top: 0;

    margin: 0 !important;

    left: 50%;

    -webkit-transform: translate(-50%, -275%);

    -moz-transform: translate(-50%, -275%);

    -ms-transform: translate(-50%, -275%);

    -o-transform: translate(-50%, -275%);

    transform: translate(-50%, -275%)

}



#fixASUSWrapper .owl-theme .owl-dots .owl-dot span {

    width: 10px;

    height: 10px;

    margin: 5px 4px;

    background-color: #4b4b4b

}



#fixASUSWrapper .owl-theme .owl-dots .owl-dot:hover span {

    background-color: #4b4b4b

}



#fixASUSWrapper .owl-theme .owl-dots .owl-dot.active span {

    background-color: #f8b942

}



@media (min-width:576px) {

    #fixASUSWrapper .owl-theme .owl-dots .owl-dot span {

        width: 15px;

        height: 15px;

        margin: 5px 7px

    }

}



@media (min-width:992px) {

    #fixASUSWrapper .owl-theme .owl-dots {

        position: absolute;

        top: auto;

        bottom: -40px;

        -webkit-transform: translate(-50%);

        -ms-transform: translate(-50%);

        -moz-transform: translate(-50%);

        -o-transform: translate(-50%);

        transform: translate(-50%)

    }

}



@media (min-width:2048px) {

    #fixASUSWrapper .owl-theme .owl-dots .owl-dot span {

        width: .7vw;

        height: .7vw;

        margin: 5px 7px

    }

}



#fixASUSWrapper .owl-carousel {

    position: relative;

    width: 100%;

    margin: 0 auto

}



#fixASUSWrapper .owl-carousel .owl-stage {

    width: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -moz-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start

}



@media (min-width:992px) {

    #fixASUSWrapper .owl-carousel {

        position: relative;

        width: -webkit-calc(100% - 200px);

        width: -moz-calc(100% - 200px);

        width: calc(100% - 200px)

    }



    #fixASUSWrapper .owl-carousel .owl-stage {

        -webkit-box-align: center;

        -webkit-align-items: center;

        -moz-box-align: center;

        -ms-flex-align: center;

        align-items: center

    }

}



@media (min-width:2048px) {

    #fixASUSWrapper .owl-carousel {

        position: relative;

        width: 80%

    }

}



#fixASUSWrapper .carousel-item>.flexCon {

    -webkit-flex-wrap: wrap !important;

    -ms-flex-wrap: wrap !important;

    flex-wrap: wrap !important;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -moz-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



#fixASUSWrapper .carousel-item>.flexCon>.flex-item:first-child {

    width: 100%;

    padding: 0

}



#fixASUSWrapper .carousel-item>.flexCon>.flex-item:nth-child(2) {

    width: 100%;

    padding: 20px

}



@media (min-width:992px) {

    #fixASUSWrapper .carousel-item>.flexCon>.flex-item:first-child {

        width: 36%;

        padding: 0 20px

    }



    #fixASUSWrapper .carousel-item>.flexCon>.flex-item:nth-child(2) {

        width: 64%;

        padding: 0 20px

    }

}



#fixASUSWrapper .carousel-item .carousel-item-title {

    font-size: 20px !important;

    color: #f8b942;

    margin-bottom: 20px !important

}



#fixASUSWrapper .carousel-item .carousel-item-desc {

    color: #fff;

    font-size: 18px !important;

    line-height: 30px !important

}



@media (min-width:1920px) and (max-width:2560px) {

    #fixASUSWrapper .carousel-item .carousel-item-title {

        font-size: 1.04167vw !important

    }



    #fixASUSWrapper .carousel-item .carousel-item-desc {

        font-size: .9375vw !important;

        line-height: 1.5625vw !important

    }

}



@media (min-width:2561px) {

    #fixASUSWrapper .carousel-item .carousel-item-title {

        font-size: 26.6667px !important;

        line-height: 42.6667px !important

    }



    #fixASUSWrapper .carousel-item .carousel-item-desc {

        font-size: 24px !important;

        line-height: 40px !important

    }

}



#fixASUSWrapper #kvView {

    padding-top: 0 !important

}



#fixASUSWrapper #kvView .content-info {

    position: absolute;

    width: 35%;

    left: 60%;

    top: 35%;

}



@media (min-width: 768px) {

    #fixASUSWrapper #kvView .content-info {}

}



#fixASUSWrapper #kvView .content-info h4 {

    color: #f8b942

}



#fixASUSWrapper #kvView>.inner {

    position: relative

}



#fixASUSWrapper #kvView .bgCon {

    position: relative;

    margin: 0 !important;

    left: 50%;

    width: 145%;

    -webkit-transform: translate(-53%);

    -moz-transform: translate(-53%);

    -ms-transform: translate(-53%);

    -o-transform: translate(-53%);

    transform: translate(-53%)

}



#fixASUSWrapper #kvView .bgCon .cover {

    position: absolute;

    width: 100%;

    top: 0;

    left: 0

}



#fixASUSWrapper #kvView .bgCon .cover .product {

    position: relative;

    opacity: 0

}



#fixASUSWrapper #kvView .bgCon .cover .colorBlock {

    display: none;

    position: absolute;

    width: 45%;

    height: 44%;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-45%, -85%) rotate(-10deg);

    transform: translate(-45%, -85%) rotate(-10deg);

    background-color: #ff0000;

    opacity: 0;

}



#fixASUSWrapper #kvView .bgCon .cover img.webstyle {

    display: block;

}



#fixASUSWrapper #kvView .bgCon .cover img.mobile {

    display: none;

}



@media (max-width: 768px) {

    #fixASUSWrapper #kvView .bgCon .cover img.webstyle {

        display: none;

    }



    #fixASUSWrapper #kvView .bgCon .cover img.mobile {

        display: block;

    }



    #fixASUSWrapper #kvView .bgCon {

        width: 100%;

        left: inherit;

        transform: translate(0, 0);

    }



    #fixASUSWrapper #kvView .bgCon img.view-bg {

        display: none

    }



    #fixASUSWrapper #kvView .bgCon .cover {

        position: relative;

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper #kvView .bgCon {

        position: relative;

        width: 1920px;

        -webkit-transform: translate(-50%);

        -moz-transform: translate(-50%);

        -ms-transform: translate(-50%);

        -o-transform: translate(-50%);

        transform: translate(-50%)

    }

}



@media (min-width:1920px) {

    #fixASUSWrapper #kvView .bgCon {

        width: 100%

    }

}



#fixASUSWrapper #kvView .titleCon {

    position: absolute;

    width: 100%;

    height: 100%;

    max-height: 100%;

    left: 0;

    top: 0

}



#fixASUSWrapper #kvView .titleCon>.title-info {

    width: 100%;

    position: absolute;

    top: 50%;

    -webkit-transform: translateY(120%);

    -moz-transform: translateY(120%);

    -ms-transform: translateY(120%);

    -o-transform: translateY(120%);

    transform: translateY(120%)

}



@media (min-width:768px) {

    #fixASUSWrapper #kvView .titleCon>.title-info {

        top: 50%;

        -webkit-transform: translateY(115%);

        -moz-transform: translateY(115%);

        -ms-transform: translateY(115%);

        -o-transform: translateY(115%);

        transform: translateY(115%)

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper #kvView .titleCon>.title-info {

        top: 50%;

        -webkit-transform: translateY(150%);

        -moz-transform: translateY(150%);

        -ms-transform: translateY(150%);

        -o-transform: translateY(150%);

        transform: translateY(150%)

    }

}



@media (min-width:1920px) {

    #fixASUSWrapper #kvView .titleCon>.title-info {

        top: 50%;

        -webkit-transform: translateY(150%);

        -moz-transform: translateY(150%);

        -ms-transform: translateY(150%);

        -o-transform: translateY(150%);

        transform: translateY(150%)

    }

}



@media (max-width: 768px) {

    #fixASUSWrapper #kvView .content-info {

        position: relative;

        width: 100%;

        left: inherit;

        top: inherit;

        margin: 0 auto;

        padding: 20px;

    }

}



@-webkit-keyframes KeyKVTitle {

    0% {

        letter-spacing: .10417vw;

        opacity: 0

    }



    to {

        letter-spacing: 2.5vw;

        opacity: 1

    }

}



@-moz-keyframes KeyKVTitle {

    0% {

        letter-spacing: .10417vw;

        opacity: 0

    }



    to {

        letter-spacing: 2.5vw;

        opacity: 1

    }

}



@-o-keyframes KeyKVTitle {

    0% {

        letter-spacing: .10417vw;

        opacity: 0

    }



    to {

        letter-spacing: 2.5vw;

        opacity: 1

    }

}



@keyframes KeyKVTitle {

    0% {

        letter-spacing: .10417vw;

        opacity: 0

    }



    to {

        letter-spacing: 2.5vw;

        opacity: 1

    }

}



@media (min-width:768px) {

    @-webkit-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 15.5px;

            opacity: 1

        }

    }



    @-moz-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 15.5px;

            opacity: 1

        }

    }



    @-o-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 15.5px;

            opacity: 1

        }

    }



    @keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 15.5px;

            opacity: 1

        }

    }

}



@media (min-width:1200px) {

    @-webkit-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @-moz-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @-o-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }

}



@media (min-width:1920px) and (max-width:2560px) {

    @-webkit-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @-moz-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @-o-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }

}



@media (min-width:2561px) {

    @-webkit-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @-moz-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @-o-keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }



    @keyframes KeyKVTitle {

        0% {

            letter-spacing: 2px;

            opacity: 0

        }



        to {

            letter-spacing: 30px;

            opacity: 1

        }

    }

}



#fixASUSWrapper #kvView .titleCon .kv-title {

    color: #fff !important;

    text-align: center;

    margin-top: 5px !important;

    font-size: 7.2vw !important;

    letter-spacing: 2.5vw;

    margin-right: -2.5vw !important;

    opacity: 0

}



#fixASUSWrapper #kvView .titleCon .kv-title.active {

    opacity: 0;

    -webkit-animation: KeyKVTitle 2s ease-out forwards;

    -moz-animation: KeyKVTitle 2s ease-out forwards;

    -o-animation: KeyKVTitle 2s ease-out forwards;

    animation: KeyKVTitle 2s ease-out forwards

}



#fixASUSWrapper #kvView .titleCon .product-name {

    font-size: 4.25vw !important;

    letter-spacing: 1vw;

    margin-right: -1vw !important;

    color: #fff !important;

    text-align: center;

    opacity: 0

}



#fixASUSWrapper #kvView .titleCon .product-name .super {

    display: inline-block;

    font-size: 50%;

    vertical-align: super;

    -webkit-transform: translateY(20%);

    -moz-transform: translateY(20%);

    -ms-transform: translateY(20%);

    -o-transform: translateY(20%);

    transform: translateY(20%)

}



@media (min-width:768px) {

    #fixASUSWrapper #kvView .titleCon .product-name {

        font-size: 42px !important;

        letter-spacing: 3px;

        margin-right: -3px !important

    }



    #fixASUSWrapper #kvView .titleCon .kv-title {

        margin-top: 10px !important;

        font-size: 60px !important;

        letter-spacing: 15.5px;

        margin-right: -15.5px !important

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper #kvView .titleCon .product-name {

        font-size: 38px !important;

        letter-spacing: 10.8px;

        margin-right: -10.8px !important

    }



    #fixASUSWrapper #kvView .titleCon .kv-title {

        font-size: 60px !important;

        letter-spacing: 30px;

        margin-right: -30px !important

    }

}



@media (min-width:1920px) and (max-width:2560px) {

    #fixASUSWrapper #kvView .titleCon .product-name {

        font-size: 1.97917vw !important

    }



    #fixASUSWrapper #kvView .titleCon .kv-title {

        font-size: 3.125vw !important

    }

}



@media (min-width:2561px) {

    #fixASUSWrapper #kvView .titleCon .product-name {

        font-size: 50.6667px !important

    }



    #fixASUSWrapper #kvView .titleCon .kv-title {

        font-size: 80px !important

    }

}



#fixASUSWrapper #kvView .introCon {

    width: 100%;

    margin-top: 0;

    margin-bottom: 0 !important;

    padding: 20px !important;

    background-color: #180e30

}



#fixASUSWrapper #kvView .introCon>.flex-50-50>.flex-item {

    width: 100% !important

}



#fixASUSWrapper #kvView .introCon .content-info {

    width: 100%;

    margin: 0 auto

}



#fixASUSWrapper #kvView .introCon .content-info .info-title {

    color: #43b4ff;

    text-align: left;

    margin-bottom: 30px !important;

    text-transform: uppercase

}



#fixASUSWrapper #kvView .introCon .content-info .info-desc {

    text-align: left

}



#fixASUSWrapper #kvView .introCon .content-info .info-marker {

    width: 160px;

    margin-top: 40px

}



@media (min-width:992px) {

    #fixASUSWrapper #kvView .introCon>.flex-50-50>.flex-item:nth-child(2) {

        padding: 20px

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper #kvView .introCon {

        margin-top: -5%;

        padding: 0 20px !important

    }



    #fixASUSWrapper #kvView .introCon>.inner {

        padding: 60px 0 80px

    }



    #fixASUSWrapper #kvView .introCon>.inner>.flex-item {

        width: 50% !important

    }



    #fixASUSWrapper #kvView .introCon .content-info {

        width: 85%;

        margin: 0 auto;

        padding: 0 20px

    }



    #fixASUSWrapper #kvView .introCon .content-info .info-title {

        color: #43b4ff;

        text-align: left;

        margin-bottom: 30px !important

    }



    #fixASUSWrapper #kvView .introCon .content-info .info-desc {

        text-align: left

    }



    #fixASUSWrapper #kvView .introCon .content-info .info-marker {

        width: 160px;

        margin-top: 40px

    }

}



@media (min-width:1920px) and (max-width:2560px) {

    #fixASUSWrapper #kvView .introCon {

        margin-top: -80px

    }

}



#fixASUSWrapper #kvView .video-ratio {

    position: relative

}



#fixASUSWrapper #kvView .video-ratio:before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 31.25%

}



#fixASUSWrapper #kvView .video-ratio>* {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    overflow: hidden

}



#fixASUSWrapper #kvView .videoMask {

    position: relative;

    width: 200%;

    left: 50%;

    -webkit-transform: translate(-50%);

    -moz-transform: translate(-50%);

    -ms-transform: translate(-50%);

    -o-transform: translate(-50%);

    transform: translate(-50%);

    background-color: #000

}



@media (min-width:768px) {

    #fixASUSWrapper #kvView .videoMask {

        position: relative;

        width: 150%

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper #kvView .videoMask {

        position: relative;

        width: 100%

    }

}



#fixASUSWrapper #kvView .videoCon {

    display: none;

    position: absolute !important;

    width: 100%;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    background-color: #000;

    pointer-events: none

}



#fixASUSWrapper #kvView #ytPlayer-loop,

#fixASUSWrapper #kvView #ytPlayer-loop iframe {

    width: 100%;

    height: 100%

}



#fixASUSWrapper #kvView .coverBtn {

    display: block;

    position: absolute;

    width: 100%;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



#fixASUSWrapper #kvView .coverBtn.video-playing {

    display: block

}



@media (min-width:992px) {

    #fixASUSWrapper #kvView .videoCon {

        display: block

    }



    #fixASUSWrapper #kvView .coverBtn.video-playing {

        display: none

    }

}



#fixASUSWrapper #kvView .exploreCon {

    position: relative;

    width: 80%;

    max-width: 500px;

    padding: 0;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -28%);

    -moz-transform: translate(-50%, -28%);

    -ms-transform: translate(-50%, -28%);

    -o-transform: translate(-50%, -28%);

    transform: translate(-50%, -28%)

}



#fixASUSWrapper #kvView .exploreCon>.inner {

    position: relative;

    width: 100%;

    height: 100%

}



#fixASUSWrapper #kvView .exploreCon .split-1,

#fixASUSWrapper #kvView .exploreCon .split-2,

#fixASUSWrapper #kvView .exploreCon .split-3,

#fixASUSWrapper #kvView .exploreCon .split-4,

#fixASUSWrapper #kvView .exploreCon .split-5 {

    position: absolute;

    width: -webkit-calc(90% - 45px);

    width: -moz-calc(90% - 45px);

    width: calc(90% - 45px);

    height: 100%;

    top: 50%;

    left: 50%;

    opacity: 0

}



#fixASUSWrapper #kvView .exploreCon .split-1 {

    -webkit-transform: translate(-10%, -30%);

    -moz-transform: translate(-10%, -30%);

    -ms-transform: translate(-10%, -30%);

    -o-transform: translate(-10%, -30%);

    transform: translate(-10%, -30%)

}



#fixASUSWrapper #kvView .exploreCon .split-2 {

    -webkit-transform: translate(-30%, -40%);

    -moz-transform: translate(-30%, -40%);

    -ms-transform: translate(-30%, -40%);

    -o-transform: translate(-30%, -40%);

    transform: translate(-30%, -40%)

}



#fixASUSWrapper #kvView .exploreCon .split-3 {

    -webkit-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



#fixASUSWrapper #kvView .exploreCon .split-4 {

    -webkit-transform: translate(-70%, -60%);

    -moz-transform: translate(-70%, -60%);

    -ms-transform: translate(-70%, -60%);

    -o-transform: translate(-70%, -60%);

    transform: translate(-70%, -60%)

}



#fixASUSWrapper #kvView .exploreCon .split-5 {

    -webkit-transform: translate(-90%, -80%);

    -moz-transform: translate(-90%, -80%);

    -ms-transform: translate(-90%, -80%);

    -o-transform: translate(-90%, -80%);

    transform: translate(-90%, -80%)

}



@media (min-width:376px) {

    #fixASUSWrapper #kvView .exploreCon {

        position: relative;

        width: 76%;

        -webkit-transform: translate(-49%, -32%);

        -moz-transform: translate(-49%, -32%);

        -ms-transform: translate(-49%, -32%);

        -o-transform: translate(-49%, -32%);

        transform: translate(-49%, -32%)

    }

}



@media (min-width:536px) {

    #fixASUSWrapper #kvView .exploreCon {

        position: relative;

        width: 70%;

        -webkit-transform: translate(-50%, -40%);

        -moz-transform: translate(-50%, -40%);

        -ms-transform: translate(-50%, -40%);

        -o-transform: translate(-50%, -40%);

        transform: translate(-50%, -40%)

    }

}



@media (min-width:768px) {

    #fixASUSWrapper #kvView .exploreCon {

        position: relative;

        width: 60%;

        -webkit-transform: translate(-50%, -40%);

        -moz-transform: translate(-50%, -40%);

        -ms-transform: translate(-50%, -40%);

        -o-transform: translate(-50%, -40%);

        transform: translate(-50%, -40%)

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper #kvView .exploreCon {

        -webkit-transform: translate(-40%, -45%);

        -moz-transform: translate(-40%, -45%);

        -ms-transform: translate(-40%, -45%);

        -o-transform: translate(-40%, -45%);

        transform: translate(-40%, -45%)

    }

}



#fixASUSWrapper #coolingView .parallaxCon.isie>.inner {

    background: url(../img/cooling/parallax-bg-cooling.jpg) top no-repeat;

    background-attachment: fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    background-size: cover

}



@media (-ms-high-contrast:active),

(-ms-high-contrast:none) {

    #fixASUSWrapper #coolingView .parallaxCon.isie>.inner {

        background: url(../img/cooling/parallax-bg-cooling.jpg) top no-repeat;

        background-attachment: scroll;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        background-size: cover

    }

}



#fixASUSWrapper #coolingView :root .parallaxCon.isie>.inner,

#fixASUSWrapper #coolingView _:-ms-fullscreen>.inner {

    background: url(../img/cooling/parallax-bg-cooling.jpg) top no-repeat;

    background-attachment: scroll;

    background-size: cover

}



#fixASUSWrapper #coolingView .tabCon .tabnavCon .tabnav {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex

}



@media (min-width:993px) {

    #fixASUSWrapper #coolingView .tabCon .tabnavCon .tabnav {

        display: -webkit-inline-box;

        display: -webkit-inline-flex;

        display: -moz-inline-box;

        display: -ms-inline-flexbox;

        display: inline-flex

    }

}



#fixASUSWrapper #coolingView .overview-item .coverCon {

    max-width: 880px

}



#fixASUSWrapper #coolingView .spreader-item .coverCon {

    max-width: 720px

}



#fixASUSWrapper #coolingView .spreader-item .coverCon .cover-labels {

    position: relative;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: nowrap;

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;

    width: 100%

}



#fixASUSWrapper #coolingView .spreader-item .coverCon .cover-labels>.label-item {

    font-size: 3.5vw;

    line-height: normal;

    text-align: center;

    padding: 10px 0

}



#fixASUSWrapper #coolingView .spreader-item .coverCon .cover-labels>.label-item:first-child {

    width: 65%

}



#fixASUSWrapper #coolingView .spreader-item .coverCon .cover-labels>.label-item:nth-child(2) {

    width: 35%;

    margin-top: -13%

}



@media (min-width:576px) {

    #fixASUSWrapper #coolingView .spreader-item .coverCon .cover-labels>.label-item {

        font-size: 14px

    }

}



@media (min-width:768px) {

    #fixASUSWrapper #coolingView .spreader-item .coverCon .cover-labels>.label-item {

        font-size: 20px

    }

}



#fixASUSWrapper #coolingView .db0-item .coverCon {

    max-width: 960px

}



#fixASUSWrapper #engineeringView .parallaxCon.isie>.inner {

    background: url(../img/engineering/parallax-bg-engineering.jpg) top no-repeat;

    background-attachment: fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    background-size: cover

}



@media (-ms-high-contrast:active),

(-ms-high-contrast:none) {

    #fixASUSWrapper #engineeringView .parallaxCon.isie>.inner {

        background: url(../img/engineering/parallax-bg-engineering.jpg) top no-repeat;

        background-attachment: scroll;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        background-size: cover

    }

}



#fixASUSWrapper #engineeringView :root .parallaxCon.isie>.inner,

#fixASUSWrapper #engineeringView _:-ms-fullscreen>.inner {

    background: url(../img/engineering/parallax-bg-engineering.jpg) top no-repeat;

    background-attachment: scroll;

    background-size: cover

}



#fixASUSWrapper #engineeringView .tabCon .tabnavCon .tabnav {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex

}



@media (min-width:805px) {

    #fixASUSWrapper #engineeringView .tabCon .tabnavCon .tabnav {

        display: -webkit-inline-box;

        display: -webkit-inline-flex;

        display: -moz-inline-box;

        display: -ms-inline-flexbox;

        display: inline-flex

    }

}



#fixASUSWrapper #engineeringView .frame-item .coverCon {

    max-width: 780px

}



#fixASUSWrapper #softwareView .parallaxCon.isie>.inner {

    background: url(../img/software/parallax-bg-software.jpg) top no-repeat;

    background-attachment: fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    background-size: cover

}



@media (-ms-high-contrast:active),

(-ms-high-contrast:none) {

    #fixASUSWrapper #softwareView .parallaxCon.isie>.inner {

        background: url(../img/software/parallax-bg-software.jpg) top no-repeat;

        background-attachment: scroll;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        background-size: cover

    }

}



#fixASUSWrapper #softwareView :root .parallaxCon.isie>.inner,

#fixASUSWrapper #softwareView _:-ms-fullscreen>.inner {

    background: url(../img/software/parallax-bg-software.jpg) top no-repeat;

    background-attachment: scroll;

    background-size: cover

}



#fixASUSWrapper #softwareView .tabCon .tabnavCon .tabnav {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex

}



@media (min-width:852px) {

    #fixASUSWrapper #softwareView .tabCon .tabnavCon .tabnav {

        display: -webkit-inline-box;

        display: -webkit-inline-flex;

        display: -moz-inline-box;

        display: -ms-inline-flexbox;

        display: inline-flex

    }

}



#fixASUSWrapper #softwareView .overview-item .coverCon {

    max-width: 590px

}



#fixASUSWrapper #softwareView .quantumcloud-item .coverCon {

    max-width: 307px

}



@media (max-width: 768px) {

    #fixASUSWrapper #softwareView .quantumcloud-item .coverCon {

        max-width: 240px; 

    }

}



#fixASUSWrapper #softwareView .xsplit-item .coverCon {

    max-width: 532px

}



#fixASUSWrapper #softwareView .wtfast-item .coverCon {

    max-width: 520px

}



#fixASUSWrapper #experienceView .tabCon .tabnavCon .tabnav {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex

}



@media (min-width:1310px) {

    #fixASUSWrapper #experienceView .tabCon .tabnavCon .tabnav {

        display: -webkit-inline-box;

        display: -webkit-inline-flex;

        display: -moz-inline-box;

        display: -ms-inline-flexbox;

        display: inline-flex

    }

}



/*#fixASUSWrapper #experienceView .aura-item>.flex-50-50>.flex-item {

    width: 100%

}*/



@media (min-width:1900px) {

    /*#fixASUSWrapper #experienceView .aura-item>.flex-50-50>.flex-item {

        width: 50%

    }*/

}



#fixASUSWrapper #experienceView .aura-item .content-info {

    width: 100% !important;

    padding: 20px !important

}



@media (min-width:1900px) {

    #fixASUSWrapper #experienceView .aura-item .content-info {

        width: 85% !important;

        padding: 0 !important

    }

}



#fixASUSWrapper #experienceView .aura-item .coverCon {

    position: relative;

    width: 100%;

    max-width: 920px;

    margin: 0 auto;

    margin-bottom: 20px !important

}



#fixASUSWrapper #experienceView .aura-item .coverCon .colorBlock {

    position: absolute;

    width: 80%;

    height: 84%;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-42%, -49%);

    -moz-transform: translate(-42%, -49%);

    -ms-transform: translate(-42%, -49%);

    -o-transform: translate(-42%, -49%);

    transform: translate(-42%, -49%);

    background-color: red

}



#fixASUSWrapper #experienceView .aura-item .coverCon .product {

    position: relative;

    width: 100%

}



#fixASUSWrapper #experienceView .aura-item .auranavCon {

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    width: 100%;

    max-width: 920px;

    margin: 0 auto !important;

    padding: 0 20px

}



#fixASUSWrapper #experienceView .aura-item .auranavCon>.flex-item {

    position: relative;

    width: 100%

}



#fixASUSWrapper #experienceView .aura-item .auranavCon .colorPickerCon {

    -webkit-box-sizing: content-box !important;

    -moz-box-sizing: content-box !important;

    box-sizing: content-box !important;

    position: relative;

    width: 150px;

    height: 150px;

    left: 50%;

    -webkit-transform: translate(-50%);

    -moz-transform: translate(-50%);

    -ms-transform: translate(-50%);

    -o-transform: translate(-50%);

    transform: translate(-50%);

    margin-bottom: 20px

}



#fixASUSWrapper #experienceView .aura-item .auranavCon .colorPickerCon #colorPicker {

    position: relative;

    -webkit-transform: translate(-15px, -22px) scale(.7);

    -moz-transform: translate(-15px, -22px) scale(.7);

    -ms-transform: translate(-15px, -22px) scale(.7);

    -o-transform: translate(-15px, -22px) scale(.7);

    transform: translate(-15px, -22px) scale(.7)

}



@media (min-width:768px) {

    #fixASUSWrapper #experienceView .aura-item .auranavCon {

        margin-top: 0 !important

    }



    #fixASUSWrapper #experienceView .aura-item .auranavCon>.flex-item {

        width: 100%

    }

}



@media (min-width:992px) {

    #fixASUSWrapper #experienceView .aura-item .auranavCon {

        -webkit-flex-wrap: nowrap;

        -ms-flex-wrap: nowrap;

        flex-wrap: nowrap;

        margin-top: 0 !important

    }



    #fixASUSWrapper #experienceView .aura-item .auranavCon>.flex-item:first-child {

        width: 150px

    }



    #fixASUSWrapper #experienceView .aura-item .auranavCon>.flex-item:nth-child(2) {

        width: -webkit-calc(100% - 150px);

        width: -moz-calc(100% - 150px);

        width: calc(100% - 150px)

    }



    #fixASUSWrapper #experienceView .aura-item .auranavCon .colorPickerCon {

        padding: 0;

        left: 0;

        -webkit-transform: translate(0);

        -moz-transform: translate(0);

        -ms-transform: translate(0);

        -o-transform: translate(0);

        transform: translate(0);

        margin-bottom: 0

    }

}



#fixASUSWrapper #experienceView .aura-item .auraNav {

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -moz-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



#fixASUSWrapper #experienceView .aura-item .auraNav>.flex-item {

    width: 33.333333%

}



@media (min-width:576px) {

    #fixASUSWrapper #experienceView .aura-item .auraNav>.flex-item {

        width: 25%

    }

}



@media (min-width:768px) {

    #fixASUSWrapper #experienceView .aura-item .auraNav>.flex-item {

        width: 16.6667%

    }

}



@media (min-width:992px) {

    #fixASUSWrapper #experienceView .aura-item .auraNav>.flex-item {

        width: 16.6667%

    }

}



@media (min-width:1200px) {

    #fixASUSWrapper #experienceView .aura-item .auraNav>.flex-item {

        width: 16.6667%

    }

}



@media (min-width:1900px) {

    #fixASUSWrapper #experienceView .aura-item .auraNav>.flex-item {

        width: 16.6667%

    }

}



#fixASUSWrapper #experienceView .aura-item .filterBtn {

    display: block;

    margin: 0 auto !important;

    padding: 12px 10px !important

}



#fixASUSWrapper #experienceView .aura-item .filterBtn .icons {

    display: block;

    width: 100%;

    max-width: 80px;

    margin: 0 auto 10px

}



#fixASUSWrapper #experienceView .aura-item .filterBtn .icons .icon {

    display: block

}



#fixASUSWrapper #experienceView .aura-item .filterBtn .icons .icon-active {

    display: none

}



#fixASUSWrapper #experienceView .aura-item .filterBtn .btn-text {

    width: 100%;

    line-height: 24px !important;

    text-align: center

}



#fixASUSWrapper #experienceView .aura-item .filterBtn .btn-text .btn-label {

    font-size: 16px !important

}



#fixASUSWrapper #experienceView .aura-item .filterBtn.active .icons .icon {

    display: none

}



#fixASUSWrapper #experienceView .aura-item .filterBtn.active .icons .icon-active {

    display: block

}



#fixASUSWrapper #experienceView .aura-item .filterBtn.disabled {

    pointer-events: none

}



#fixASUSWrapper #experienceView .overview-item .coverCon,

#fixASUSWrapper #experienceView .stealth-item .coverCon {

    position: relative;

    width: 110% !important;

    left: -10%

}



#fixASUSWrapper #experienceView .overview-item .coverCon {

    max-width: 500px;

    width: 100% !important;

    left: inherit !important;

}



#fixASUSWrapper #experienceView .bios-item .coverCon {

    position: relative;

    width: 120% !important;

    left: -20%

}



#fixASUSWrapper #experienceView .fanconnect-item .coverCon {

    position: relative;

    width: 110% !important;

    left: 0

}



#fixASUSWrapper #experienceView .gsync-item .coverCon {

    position: relative;

    width: 130% !important;

    left: -30%

}



#fixASUSWrapper .colorBlock.kvCycleFilter {

    -webkit-animation: KeyKVCycle 3s linear infinite;

    -moz-animation: KeyKVCycle 3s linear infinite;

    -o-animation: KeyKVCycle 3s linear infinite;

    animation: KeyKVCycle 3s linear infinite

}



#fixASUSWrapper .colorBlock.rainbowFilter {

    background: -webkit-linear-gradient(90deg, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d) !important;

    background: -o-linear-gradient(90deg, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d) !important;

    background: -webkit-gradient(linear, left top, right top, from(#fd118d), color-stop(#fc0613), color-stop(#fe580e), color-stop(#ffd832), color-stop(#d0f945), color-stop(#53fe3d), color-stop(#2ffe3e), color-stop(#2cfea7), color-stop(#23f6ff), color-stop(#007dfb), color-stop(#0023f9), color-stop(#6a1cfb), color-stop(#f01cfa), color-stop(#fd118d), color-stop(#fc0613), color-stop(#fe580e), color-stop(#ffd832), color-stop(#d0f945), color-stop(#53fe3d), color-stop(#2ffe3e), color-stop(#2cfea7), color-stop(#23f6ff), color-stop(#007dfb), color-stop(#0023f9), color-stop(#6a1cfb), color-stop(#f01cfa), to(#fd118d)) !important;

    background: -webkit-linear-gradient(left, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d) !important;

    background: -moz-linear-gradient(left, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d) !important;

    background: -o-linear-gradient(left, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d) !important;

    background: linear-gradient(90deg, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d, #fc0613, #fe580e, #ffd832, #d0f945, #53fe3d, #2ffe3e, #2cfea7, #23f6ff, #007dfb, #0023f9, #6a1cfb, #f01cfa, #fd118d) !important;

    -webkit-background-size: 200% 100% !important;

    -moz-background-size: 200% 100% !important;

    background-size: 200% 100% !important;

    background-position: 0 0 !important;

    -webkit-animation: KeyRainbow 2s linear infinite;

    -moz-animation: KeyRainbow 2s linear infinite;

    -o-animation: KeyRainbow 2s linear infinite;

    animation: KeyRainbow 2s linear infinite

}



#fixASUSWrapper .colorBlock.staticFilter {

    opacity: 0;

    -webkit-animation: KeyStatic 3s linear;

    -moz-animation: KeyStatic 3s linear;

    -o-animation: KeyStatic 3s linear;

    animation: KeyStatic 3s linear;

    -webkit-animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    animation-fill-mode: forwards

}



#fixASUSWrapper .colorBlock.strobingFilter {

    opacity: 0;

    -webkit-animation: KeyStrobing 1.5s ease-in infinite;

    -moz-animation: KeyStrobing 1.5s ease-in infinite;

    -o-animation: KeyStrobing 1.5s ease-in infinite;

    animation: KeyStrobing 1.5s ease-in infinite

}



#fixASUSWrapper .colorBlock.breathingFilter {

    opacity: 0;

    -webkit-animation: KeyStrobing 4s linear infinite;

    -moz-animation: KeyBreathing 4s linear infinite;

    -o-animation: KeyBreathing 4s linear infinite;

    animation: KeyBreathing 4s linear infinite

}



#fixASUSWrapper .colorBlock.cycleFilter {

    -webkit-animation: KeyStrobingDIV 4s linear infinite;

    -moz-animation: KeyStrobingDIV 4s linear infinite;

    -o-animation: KeyStrobingDIV 4s linear infinite;

    animation: KeyStrobingDIV 4s linear infinite

}



#fixASUSWrapper .colorBlock.musicFilter {

    -webkit-animation: KeyMusic 4s ease-out infinite;

    -moz-animation: KeyMusic 4s ease-out infinite;

    -o-animation: KeyMusic 4s ease-out infinite;

    animation: KeyMusic 4s ease-out infinite

}



#fixASUSWrapper .colorBlock.block-back.rainbowFilter {

    -webkit-animation: KeyStrobingDIV 4s linear infinite;

    -moz-animation: KeyStrobingDIV 4s linear infinite;

    -o-animation: KeyStrobingDIV 4s linear infinite;

    animation: KeyStrobingDIV 4s linear infinite

}



@-webkit-keyframes KeyStatic {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    to {

        opacity: 1

    }

}



@-moz-keyframes KeyStatic {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    to {

        opacity: 1

    }

}



@-o-keyframes KeyStatic {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    to {

        opacity: 1

    }

}



@keyframes KeyStatic {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    to {

        opacity: 1

    }

}



@-webkit-keyframes KeyStrobing {

    0% {

        display: block;

        opacity: 0

    }



    20% {

        display: block;

        opacity: 1

    }



    65% {

        display: block;

        opacity: 1

    }



    to {

        display: block;

        opacity: 0

    }

}



@-moz-keyframes KeyStrobing {

    0% {

        display: block;

        opacity: 0

    }



    20% {

        display: block;

        opacity: 1

    }



    65% {

        display: block;

        opacity: 1

    }



    to {

        display: block;

        opacity: 0

    }

}



@-o-keyframes KeyStrobing {

    0% {

        display: block;

        opacity: 0

    }



    20% {

        display: block;

        opacity: 1

    }



    65% {

        display: block;

        opacity: 1

    }



    to {

        display: block;

        opacity: 0

    }

}



@keyframes KeyStrobing {

    0% {

        display: block;

        opacity: 0

    }



    20% {

        display: block;

        opacity: 1

    }



    65% {

        display: block;

        opacity: 1

    }



    to {

        display: block;

        opacity: 0

    }

}



@-webkit-keyframes KeyBreathing {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    70% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



@-moz-keyframes KeyBreathing {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    70% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



@-o-keyframes KeyBreathing {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    70% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



@keyframes KeyBreathing {

    0% {

        opacity: 0

    }



    30% {

        opacity: 1

    }



    70% {

        opacity: 1

    }



    to {

        opacity: 0

    }

}



@-webkit-keyframes KeyRainbow {

    0% {

        background-position: 0

    }



    to {

        background-position: -100%

    }

}



@-moz-keyframes KeyRainbow {

    0% {

        background-position: 0

    }



    to {

        background-position: -100%

    }

}



@-o-keyframes KeyRainbow {

    0% {

        background-position: 0

    }



    to {

        background-position: -100%

    }

}



@keyframes KeyRainbow {

    0% {

        background-position: 0

    }



    to {

        background-position: -100%

    }

}



@-webkit-keyframes KeyMusic {

    0% {

        opacity: 0

    }



    10% {

        opacity: 1

    }



    15% {

        opacity: 1

    }



    17% {

        opacity: 0

    }



    27% {

        opacity: 1

    }



    32% {

        opacity: 1

    }



    34% {

        opacity: 0

    }



    44% {

        opacity: 1

    }



    49% {

        opacity: 1

    }



    52% {

        opacity: 0

    }



    62% {

        opacity: 1

    }



    68% {

        opacity: 1

    }



    85% {

        opacity: 0

    }



    to {

        opacity: 0

    }

}



@-moz-keyframes KeyMusic {

    0% {

        opacity: 0

    }



    10% {

        opacity: 1

    }



    15% {

        opacity: 1

    }



    17% {

        opacity: 0

    }



    27% {

        opacity: 1

    }



    32% {

        opacity: 1

    }



    34% {

        opacity: 0

    }



    44% {

        opacity: 1

    }



    49% {

        opacity: 1

    }



    52% {

        opacity: 0

    }



    62% {

        opacity: 1

    }



    68% {

        opacity: 1

    }



    85% {

        opacity: 0

    }



    to {

        opacity: 0

    }

}



@-o-keyframes KeyMusic {

    0% {

        opacity: 0

    }



    10% {

        opacity: 1

    }



    15% {

        opacity: 1

    }



    17% {

        opacity: 0

    }



    27% {

        opacity: 1

    }



    32% {

        opacity: 1

    }



    34% {

        opacity: 0

    }



    44% {

        opacity: 1

    }



    49% {

        opacity: 1

    }



    52% {

        opacity: 0

    }



    62% {

        opacity: 1

    }



    68% {

        opacity: 1

    }



    85% {

        opacity: 0

    }



    to {

        opacity: 0

    }

}



@keyframes KeyMusic {

    0% {

        opacity: 0

    }



    10% {

        opacity: 1

    }



    15% {

        opacity: 1

    }



    17% {

        opacity: 0

    }



    27% {

        opacity: 1

    }



    32% {

        opacity: 1

    }



    34% {

        opacity: 0

    }



    44% {

        opacity: 1

    }



    49% {

        opacity: 1

    }



    52% {

        opacity: 0

    }



    62% {

        opacity: 1

    }



    68% {

        opacity: 1

    }



    85% {

        opacity: 0

    }



    to {

        opacity: 0

    }

}



@-webkit-keyframes KeyStrobingDIV {

    0% {

        background: #fc0613

    }



    8.3% {

        background: #fd118d

    }



    16.6% {

        background: #6a1cfb

    }



    24.9% {

        background: #0023f9

    }



    33.2% {

        background: #007dfb

    }



    41.5% {

        background: #23f6ff

    }



    49.8% {

        background: #2cfea7

    }



    58.1% {

        background: #2ffe3e

    }



    66.4% {

        background: #53fe3d

    }



    74.7% {

        background: #d0f945

    }



    83.0% {

        background: #ffd832

    }



    91.3% {

        background: #fe580e

    }



    to {

        background: #fc0613

    }

}



@-moz-keyframes KeyStrobingDIV {

    0% {

        background: #fc0613

    }



    8.3% {

        background: #fd118d

    }



    16.6% {

        background: #6a1cfb

    }



    24.9% {

        background: #0023f9

    }



    33.2% {

        background: #007dfb

    }



    41.5% {

        background: #23f6ff

    }



    49.8% {

        background: #2cfea7

    }



    58.1% {

        background: #2ffe3e

    }



    66.4% {

        background: #53fe3d

    }



    74.7% {

        background: #d0f945

    }



    83.0% {

        background: #ffd832

    }



    91.3% {

        background: #fe580e

    }



    to {

        background: #fc0613

    }

}



@-o-keyframes KeyStrobingDIV {

    0% {

        background: #fc0613

    }



    8.3% {

        background: #fd118d

    }



    16.6% {

        background: #6a1cfb

    }



    24.9% {

        background: #0023f9

    }



    33.2% {

        background: #007dfb

    }



    41.5% {

        background: #23f6ff

    }



    49.8% {

        background: #2cfea7

    }



    58.1% {

        background: #2ffe3e

    }



    66.4% {

        background: #53fe3d

    }



    74.7% {

        background: #d0f945

    }



    83.0% {

        background: #ffd832

    }



    91.3% {

        background: #fe580e

    }



    to {

        background: #fc0613

    }

}



@keyframes KeyStrobingDIV {

    0% {

        background: #fc0613

    }



    8.3% {

        background: #fd118d

    }



    16.6% {

        background: #6a1cfb

    }



    24.9% {

        background: #0023f9

    }



    33.2% {

        background: #007dfb

    }



    41.5% {

        background: #23f6ff

    }



    49.8% {

        background: #2cfea7

    }



    58.1% {

        background: #2ffe3e

    }



    66.4% {

        background: #53fe3d

    }



    74.7% {

        background: #d0f945

    }



    83.0% {

        background: #ffd832

    }



    91.3% {

        background: #fe580e

    }



    to {

        background: #fc0613

    }

}



@-webkit-keyframes KeyKVCycle {

    0% {

        background: #3e5eff

    }



    33.3333% {

        background: #8c9fff

    }



    66.6666% {

        background: #e59bb8

    }



    to {

        background: #3e5eff

    }

}



@-moz-keyframes KeyKVCycle {

    0% {

        background: #3e5eff

    }



    33.3333% {

        background: #8c9fff

    }



    66.6666% {

        background: #e59bb8

    }



    to {

        background: #3e5eff

    }

}



@-o-keyframes KeyKVCycle {

    0% {

        background: #3e5eff

    }



    33.3333% {

        background: #8c9fff

    }



    66.6666% {

        background: #e59bb8

    }



    to {

        background: #3e5eff

    }

}



@keyframes KeyKVCycle {

    0% {

        background: #3e5eff

    }



    33.3333% {

        background: #8c9fff

    }



    66.6666% {

        background: #e59bb8

    }



    to {

        background: #3e5eff

    }

}



#fixASUSWrapper .popupView {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background-color: #090f1c;

    z-index: 998

}



#fixASUSWrapper #youtubeView {

    opacity: 0;

    display: none;

    z-index: 199999;

    background-color: rgba(0, 0, 0, .9)

}



#fixASUSWrapper #youtubeView #ytPlayer {

    position: relative;

    width: 100%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%)

}



#fixASUSWrapper .closeBtn {

    z-index: 9994;

    width: 50px;

    height: 50px;

    position: fixed;

    right: 0;

    top: 0;

    -webkit-appearance: none;

    cursor: pointer;

    font-size: 50px;

    line-height: 50px

}



#fixASUSWrapper .closeBtn,

#fixASUSWrapper .closeBtn:active,

#fixASUSWrapper .closeBtn:focus,

#fixASUSWrapper .closeBtn:hover,

#fixASUSWrapper .closeBtn:visited {

    text-decoration: none;

    text-align: center;

    padding: 0;

    color: #fff;

    font-style: normal;

    font-family: "Roboto", "Arial", "sans-serif";

    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);

    border: 0;

    background: none;

    outline: none;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none

}



#fixASUSWrapper .closeBtn:active,

#fixASUSWrapper .closeBtn:focus,

#fixASUSWrapper .closeBtn:hover,

#fixASUSWrapper .closeBtn:visited {

    font-size: 35px;

    line-height: 35px

}



#fixASUSWrapper #loadingView {

    position: fixed;

    width: 100vw;

    height: 100vh;

    top: 0;

    left: 0;

    z-index: 199999;

    background-color: #000

}



#fixASUSWrapper #loadingView .progress {

    display: none;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center

}



#fixASUSWrapper #loadingView .progress .percent {

    font-family: Roboto, 微軟正黑體, Microsoft JhengHei, sans-serif;

    font-size: 40px !important;

    color: #fff !important;

    text-align: center

}



#fixASUSWrapper #loadingView .preload-icon {

    position: relative;

    width: 40px;

    height: 40px;

    margin: 10px auto

}



/*# sourceMappingURL=app.bundle.2e0545.css.map*/