/*!
 *
 * Strix Fusion 500 main.css
 * @version 20180427
 *
 */

@import url("http://fonts.googleapis.com/css?family=Roboto:300,600&subset=latin");
.mwrap {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
.mwrap div, .mwrap span, .mwrap applet, .mwrap object, .mwrap iframe, .mwrap h1, .mwrap h2, .mwrap h3, .mwrap h4, .mwrap h5, .mwrap h6, .mwrap p, .mwrap blockquote, .mwrap pre, .mwrap a, .mwrap abbr, .mwrap acronym, .mwrap address, .mwrap big, .mwrap cite, .mwrap code, .mwrap del, .mwrap dfn, .mwrap em, .mwrap img, .mwrap ins, .mwrap kbd, .mwrap q, .mwrap s, .mwrap samp, .mwrap small, .mwrap strike, .mwrap strong, .mwrap sub, .mwrap sup, .mwrap tt, .mwrap var, .mwrap b, .mwrap u, .mwrap i, .mwrap center, .mwrap dl, .mwrap dt, .mwrap dd, .mwrap ol, .mwrap ul, .mwrap li, .mwrap fieldset, .mwrap form, .mwrap label, .mwrap legend, .mwrap table, .mwrap caption, .mwrap tbody, .mwrap tfoot, .mwrap thead, .mwrap tr, .mwrap th, .mwrap td, .mwrap article, .mwrap aside, .mwrap canvas, .mwrap details, .mwrap embed, .mwrap figure, .mwrap figcaption, .mwrap footer, .mwrap header, .mwrap hgroup, .mwrap menu, .mwrap nav, .mwrap output, .mwrap ruby, .mwrap section, .mwrap summary, .mwrap time, .mwrap mark, .mwrap audio, .mwrap video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}
.mwrap table {
    border-collapse: collapse;
    border-spacing: 0
}
.mwrap caption, .mwrap th, .mwrap td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}
.mwrap q, .mwrap blockquote {
    quotes: none
}
.mwrap q:before, .mwrap q:after, .mwrap blockquote:before, .mwrap blockquote:after {
    content: "";
    content: none
}
.mwrap a img {
    border: none
}
.mwrap *:focus {
    outline: 0
}
.mwrap * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent
}
.mwrap img {
    display: block;
    height: auto;
    image-rendering: optimizeQuality;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic
}
.mwrap a {
    color: #fff;
    text-decoration: none
}
.no-mobile .mwrap a {
    -moz-transition: color .2s ease-out;
    -o-transition: color .2s ease-out;
    -webkit-transition: color .2s ease-out;
    transition: color .2s ease-out
}
.mwrap p {
    margin: 0 0 1em;
    padding: 0
}
.mwrap p:last-child {
    margin-bottom: 0
}
.mwrap b {
    font-weight: normal
}
.mwrap small {
    font-size: inherit
}
.mwrap h1 img, .mwrap h2 img, .mwrap h3 img, .mwrap h4 img, .mwrap h5 img, .mwrap h6 img {
    margin: 0;
    vertical-align: bottom
}
.mwrap blockquote {
    margin: 0;
    padding: 0;
    border: none
}
.mwrap ul, .mwrap ol {
    list-style: none;
    display: block
}
::-moz-selection {
    background: #888;
    color: #ddd
}
::selection {
    background: #888;
    color: #ddd
}
html #main-zone {
    overflow: visible !important;
    padding-right: 0 !important;
    padding-left: 0 !important
}
html #asus-api-header {
    position: relative !important
}
html #overview #sectionOverview {
    padding-top: 0
}
html #overview #special-sectionOverview, html #overview #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
}
html #overview #special-sectionOverview img, html #overview #sectionOverview img {
    max-width: none !important
}
html #product_content_area img {
    max-width: none
}
@media (max-width: 959px) {
    .m-wrap img {
        max-width: none !important
    }
}
#product_content_area p {
    margin: 0
}
#sectionOverview p, #special-sectionOverview p {
    margin-bottom: 1em
}
#sectionOverview p:last-child, #special-sectionOverview p:last-child {
    margin-bottom: 0
}
#overview #sectionOverview {
    line-height: inherit
}
.outer-wrapper[style] {
    width: auto !important
}
#mWrap #mContent .bigtitle h2, #mWrap #mContent .heading h2, #mWrap #mContent .subtitle h3 {
    display: inline;
    width: auto !important;
    height: auto !important;
    vertical-align: baseline !important;
    font: inherit !important;
    font-size: 100% !important;
    color: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #e2001d !important
}
#mWrap #mContent .subtitle h3{
    color: #fff !important;
    font-weight: 700 !important;
}
#mWrap #mContent .bigtitle h2{
    color: #fff !important;
    font-size: 60px !important;
}
html, body {
    overflow-x: hidden
}
#mWrap {
    background: black
}
#mContent {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-left: auto !important;
    margin-right: auto !important
}
#mContent:before, #mContent:after {
    content: "";
    display: table
}
#mContent:after {
    clear: both
}
#mContent {
    zoom: 1
}
.mwrap .msect {
    position: relative
}
.mwrap .msect-inner {
    position: relative;
    z-index: 2;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto
}
.mwrap .msect-inner:before, .mwrap .msect-inner:after {
    content: "";
    display: table
}
.mwrap .msect-inner:after {
    clear: both
}
.mwrap .msect-inner {
    zoom: 1
}
@font-face {
    font-family: 'xolonium';
    src: url("../css/font/xolonium.eot");
    src: url("../css/font/xolonium.eot?#iefix") format("embedded-opentype"), url("../css/font/xolonium.otf") format("opentype"), url("../css/font/xolonium.woff") format("woff"), url("../css/font/xolonium.ttf") format("truetype"), url("../css/font/xolonium.svg#rogfont") format("svg");
    font-weight: normal;
    font-style: normal
}
.mwrap {
    position: relative;
    margin: 0 auto;
    background: black;
    line-height: 1.55556;
    font-family: "Roboto", Helvetica Neue, Helvetica, Arial, \5FAE\8EDF\6B63\9ED1\9AD4, "Microsoft JhengHei", sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #fff
}
.mwrap a:hover, .mwrap a:active {
    color: inherit;
    text-decoration: none
}
.mwrap .heading{
    display: block;
    margin-bottom: .625em;
    font-family: "xolonium";
    font-size: 2.22222em;
    line-height: 1;
    color: white
}
.mwrap .bigtitle {
    display: block;
    margin-bottom: 1.625em;
    font-family: "xolonium";
    font-size: 2.22222em;
    line-height: 1;
    color: white;
    text-align: center;
}
.mwrap .subtitle {
    margin-top: 1.54167em !important;
    margin-bottom: 0.54167em;
    line-height: 1.3;
    font-size: 1.2em;
    font-weight: 300;
    color: #fff003
}
.mwrap .heading+.subtitle {
    margin-top: -.4em
}
.mwrap .morelink {
    margin-top: -.5em
}
.mwrap .morelink a {
    color: white
}
.mwrap .morelink a:hover {
    color: inherit
}
.mwrap br.m {
    display: none
}
@media (max-width: 640px) {
    .mwrap br.pc {
        display: none
    }
    .mwrap br.m {
        display: block
    }
}
@media (max-width: 1024px) {
    .mwrap .heading {
        font-size: 2.11111em
    }
}
@media (max-width: 960px) {
    .mwrap .heading {
        font-size: 2em
    }
}
@media (max-width: 768px) {
    .mwrap .heading {
        font-size: 1.77778em
    }
}
@media (max-width: 640px) {
    .mwrap {
        font-size: 16px
    }
    .mwrap .heading {
        font-size: 2em;
        line-height: 1.1
    }
    .mwrap .subtitle {
        font-size: 1.125em
    }
}
@media (max-width: 520px) {
    .mwrap {
        font-size: 15px
    }
    .mwrap .heading {
        font-size: 1.86667em
    }
    .mwrap .subtitle {
        font-size: 1.13333em
    }
}
@media (max-width: 360px) {
    .mwrap .heading {
        font-size: 1.8em
    }
}
@media (max-width: 360px) {
    .mwrap .heading {
        font-size: 1.73333em
    }
}
.mwrap sup {
    font-size: 60%;
    position: relative;
    top: -.5em
}
.mwrap a.link-underline {
    text-decoration: underline
}
.mwrap a.link-theme {
    color: #e2001d
}
.mwrap a.link-theme:hover, .mwrap a.link-theme:active {
    color: #90f7ff
}
.mwrap .color-theme {
    color: #e2001d
}
.mwrap .notes {
    color: #aaa;
    font-size: 77%
}
.mwrap .badgerow {
    margin-top: 1.92308em
}
.mwrap .badgerow:before, .mwrap .badgerow:after {
    content: "";
    display: table
}
.mwrap .badgerow:after {
    clear: both
}
.mwrap .badgerow {
    zoom: 1
}
.mwrap .badgerow .featicon {
    display: inline-block;
    vertical-align: top;
    margin-right: 1.15385em;
    margin-bottom: .76923em
}
.mwrap .badgerow .featicon:first-child {
    margin-top: 0
}
.mwrap .badgerow .featicon:last-child {
    margin-right: 0;
    margin-bottom: 0
}
.mwrap .badgerow .featicon img {
    width: 100%;
    height: auto
}
.mwrap .XXXXX {
    margin-top: 15px;
    font-size: 12px;
    color: #aaa
}
#videoplayer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 199999;
    width: 100%;
    height: 100%;
    background: black;
    background: rgba(0, 0, 0, 0.6);
    animation: videoplayer-in 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.36s;
    animation-fill-mode: backwards
}
#videoplayer iframe.player {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    background: black
}
#videoplayer .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
    height: 52px;
    overflow: hidden;
    opacity: .6;
    transition: opacity .15s;
    color: white;
    cursor: pointer
}
#videoplayer .close:hover {
    opacity: 1
}
#videoplayer .close:active {
    opacity: .82
}
#videoplayer .close:focus {
    opacity: .82;
    box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.8);
    outline: none
}
#videoplayer .close:before {
    display: block;
    width: 52px;
    height: 52px;
    line-height: 52px;
    font-size: 52px;
    content: "\00D7";
    font-family: 'arial', sans-serif;
    text-align: center;
    vertical-align: middle;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased
}
@keyframes videoplayer-in {
    0% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(1)
    }
}
#backtop {
    display: none;
    float: left;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 31;
    width: 44px;
    height: 44px;
    cursor: pointer;
    -webkit-animation: fadeIn 0.5s;
    -moz-animation: fadeIn 0.5s;
    -ms-animation: fadeIn 0.5s;
    -o-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
/*    background: no-repeat 50% 50% url("../img/backtop.png")*/
}
#backtop:hover, #backtop:active {
    opacity: .7
}
@media (max-width: 640px) {
    #backtop {
        right: 7px;
        bottom: 25px
    }
}
#mNav {
    position: fixed;
    z-index: 30;
    right: 0;
    top: 0;
    width: 36px;
    height: 100%;
    user-select: none;
    animation: fadeIn 1s ease 1s;
    animation-fill-mode: both
}
#mNav .inner {
    display: table;
    width: 100%;
    height: 100%
}
#mNav ul {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    list-style: none
}
#mNav li {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) no-repeat;
    transition: .1s
}
#mNav li a {
    display: block;
    width: 20px;
    height: 8px;
    padding: 7px 8px;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent
}
#mNav li a:focus {
    outline: 0
}
#mNav li div {
    width: 8px;
    height: 8px;
    overflow: hidden;
    margin-left: auto;
    margin-right: 5px;
    background: #eee;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    transition: .1s
}
#mNav li b {
    display: none;
    position: absolute;
    top: 50%;
    right: 32px;
    height: 12px;
    line-height: 12px;
    margin-top: -6px;
    white-space: nowrap;
    color: #e2001d;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 700;
    text-shadow: 0 0 2px black
}
#mNav li.on a {
    height: 30px;
    line-height: 30px
}
#mNav li.on div {
    height: 30px
}
#mNav li:hover b, #mNav li:active b {
    display: block !important;
    -webkit-animation: fadeIn 0.3s ease-out;
    -moz-animation: fadeIn 0.3s ease-out;
    -ms-animation: fadeIn 0.3s ease-out;
    -o-animation: fadeIn 0.3s ease-out;
    animation: fadeIn 0.3s ease-out
}
#mNav li:hover div, #mNav li.on div {
    background: #e2001d
}
#mMobiNavToggle {
    display: none;
    float: left;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 20;
    width: 44px;
    height: 44px;
    background-color: #b0190b;
    background-image: -webkit-linear-gradient(bottom, #e2001d 0%, #74000f 100%);
    background-image: linear-gradient(to top, #e2001d 0%, #74000f 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5)
}
#mMobiNavToggle div {
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAQMAAAC032DuAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABtJREFUKM9jGAXEAvn/YPCDCsxBB4az3wYVAADMo2Lvq/ZAqwAAAABJRU5ErkJggg==') 50% 50% no-repeat;
    background-color: #b0190b;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto
}
#mMobiNavToggle:active {
    background: #00b4bb
}
#mMobiNavToggle:active div {
    opacity: .7
}
#mMobiNav {
    visibility: hidden;
    float: left;
    position: fixed;
    top: 0px;
    left: 100.5%;
    z-index: 19;
    width: 100%;
    height: 100%;
    background: #313131;
    -moz-transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    user-select: none;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
#mMobiNav .inner {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom: 50px
}
#mMobiNav ul, #mMobiNav li {
    padding: 0;
    margin: 0;
    list-style: none
}
#mMobiNav li a {
    display: block;
    border-top: 1px solid #555;
    border-bottom: 1px solid black;
    padding: 1em .25em 1em;
    background: #313131;
    font-size: 20px;
    font-family: "xolonium", "Roboto", Helvetica Neue, Helvetica, Arial, \5FAE\8EDF\6B63\9ED1\9AD4, "Microsoft JhengHei", sans-serif;
    line-height: .85;
    color: white;
    text-align: center;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent
}
@media (max-width: 520px) {
    #mMobiNav li a {
        font-size: 18px
    }
}
@media (max-width: 432px) {
    #mMobiNav li a {
        font-size: 17px
    }
}
#mMobiNav li a:active {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background: black;
    color: #999
}
#mMobiNav li b {
    font-weight: 400
}
#mMobiNav li:last-child a {
    border-bottom: 0
}
#mMobiNavOverlay {
    visibility: hidden;
    opacity: 0;
    float: left;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 18;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s
}
html.nav-open #mMobiNav {
    visibility: visible;
    left: 0
}
html.nav-open #mMobiNavOverlay {
    visibility: visible;
    opacity: 1
}
#strix-intro {
    background: #000 url(../img/kv_bg.jpg) center top/1920px no-repeat;
    min-height: 836px;
    text-align: center;
    padding: 100px 0 0px;
}
#strix-intro .pic {
    width: 188.23529%;
    margin-left: -44.11765%
}
#strix-intro .pic img {
    width: 100%
}
#strix-intro .text {
    width: 92.15686%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 550px;
    text-align: center
}
#strix-intro .webstyle{
    display: inline-block;
}
#strix-intro .mobilestyle{
    display: none;
    width: 100%
}
/*手機*/
@media (max-width: 1000px) {
    #strix-intro{
        background: none;
        min-height: inherit;
        padding: 0;
    }
    #strix-intro .text{
        margin: 0 auto 100px
    }
    #strix-intro .webstyle{
        display: none;
    }
    #strix-intro .mobilestyle{
        display: inline-block;
        width: 150%;
        margin-left: -25% !important
    }
}
#strix-video {
    overflow: hidden
}
#strix-video .ribbon {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 158px
}
#strix-video .clip {
    position: relative;
    width: 1920px;
    height: 680px;
    left: 50%;
    margin-left: -960px
}
#strix-video .video {
    display: block;
    width: 100%;
    height: 100%
}
#strix-video .video img {
    width: 100%;
    height: 100%
}
#strix-video .static {
    display: none;/*影片放置後屬性改none*/
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}
#strix-video .play {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    -moz-transition: .2s;
    -o-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s
}
#strix-video .play .icon {
    position: absolute;
    left: 0;
    top: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 111px;
    height: 111px;
    -moz-transition: .2s;
    -o-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s
}
#strix-video .play:hover {
    background-color: rgba(0, 0, 0, 0.3)
}
#strix-video .play:hover .icon, #strix-video .play:active .icon {
    opacity: .7
}
@media (max-width: 1920px) {
    #strix-video .ribbon {
        width: 1920px;
        left: 50%;
        margin-left: -960px
    }
}
@media (max-width: 640px) {
    #strix-video .ribbon {
        width: 640px;
        height: 53px;
        margin-left: -320px
    }
    #strix-video .clip {
        width: 1468px;
        height: 520px;
        margin-left: -734px
    }
    #strix-video .video {
        display: none
    }
    #strix-video .static {
        display: block
    }
    #strix-video .play .icon {
        width: 75px;
        height: 75px;
        left: calc(50% - 38px);
        top: calc(50% - 38px);
        margin: 0
    }
    #strix-video .play:hover {
        background: transparent
    }
}
@media (max-width: 432px) {
    #strix-video .clip {
        width: 1129px;
        height: 400px;
        margin-left: -564.5px
    }
}
/*video-static*/
#strix-video-static {
    background: #000 url(../img/video-static-bg.jpg) center top/1920px no-repeat;
    min-height: 910px;
    text-align: center;
    padding: 0;
}
#strix-video-static .msect-inner{
    /*position: absolute;*/
        max-width: 100%;
        padding-top: 100px
}
#strix-video-static .mobilestyle {
    display: none;
    width: 100%;
}
#strix-video-static .text {
    position: relative;
    padding: 175px 0 0;
    width: 46%;
    margin-left: 50%;
    max-width: 680px;
    text-align: left;
}
#strix-video-static .text img{
    margin-bottom: 35px
}
#strix-video-static .pic {
    float: left;
    position: relative;
    z-index: 1;
    width: 45%;
    height: 0;
    margin-left: 0%;
    margin-top: 0%;
}
#strix-video-static .pic img{
    float: right;
}
@media (max-width: 719px) {
    #strix-video-static {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 100px
    }
    #strix-video-static .msect-inner{
        padding-top: 0
    }
    #strix-video-static .pic{
        float: inherit;
        width: 96%;
        margin: 0 auto
    }
    #strix-video-static .pic img{
        width: 100%;
    }
    #strix-video-static .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-video-static .text img{
        margin: 0 auto 35px !important
    }
    #strix-video-static .webstyle{
        display: none;
        width: 100%
    }
    #strix-video-static .mobilestyle{
        display: inline-block;
        width: 100%
    }
}
@media (max-width: 640px) {
    #strix-video-static {
        padding: 40px 0 20px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-video-static .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-video-static .text img{
        margin: 0 auto 35px !important
    }
}
/*multiplatform*/
#strix-multiplatform {
    background: #000 ;
    text-align: center;
    padding: 100px 0 100px;
}
#strix-multiplatform .msect-inner{
    /*position: absolute;*/
        max-width: 1360px;
        padding-top: 0px
}
#strix-multiplatform .mobilestyle {
    display: none;
    width: 100%;
}
#strix-multiplatform .text {
    position: relative;
    padding: 130px 0 0;
    width: 55%;
    margin-left: 44%;
    max-width: 720px;
    text-align: left;
}
html #overview #strix-multiplatform .msect-inner .text img.img{
    margin-top: 80px;
    margin-bottom: 35px;
    width: 100%;
    max-width: 602px !important
}
#strix-multiplatform .pic{
    float: left;
    position: relative;
    z-index: 1;
    width: 43%;
    height: 0;
    margin-left: 0%;
    margin-top: 0%;
}
#strix-multiplatform .pic img{
    float: right;
}
@media (max-width: 719px) {
    #strix-multiplatform {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 100px
    }
    #strix-multiplatform .msect-inner{
        padding-top: 0
    }
    #strix-multiplatform .pic{
        float: inherit;
        width: 96%;
        margin: 0 auto
    }
    #strix-multiplatform .pic img{
        width: 100%;
    }
    #strix-multiplatform .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-multiplatform .mobilestyle{
        margin: 50px auto 35px !important
    }
    #strix-multiplatform .webstyle{
        display: none;
        width: 100%
    }
    #strix-multiplatform .mobilestyle{
        display: inline-block;
        width: 100%
    }
}
@media (max-width: 640px) {
    #strix-multiplatform {
        padding: 40px 0 20px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-multiplatform .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-multiplatform .text img{
        margin: 0 auto 35px !important
    }
}
/*crafted*/
#strix-crafted {
    background: #000 url(../img/crafted-bg.jpg) center top/1920px no-repeat;
    min-height: 857px;
    text-align: center;
    padding: 0px 0 0px;
}
#strix-crafted .mobilestyle {
    display: none;
    width: 100%;
}
#strix-crafted .text {
    width: 84.31373%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 650px;
    padding-bottom: 150px;
}
@media (max-width: 719px) {
    #strix-crafted {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 80px
    }
    #strix-crafted .text {
        width: 92%;
        margin-top: 0px;
        padding-top: 0;
        padding-bottom: 0
    }
    #strix-crafted .mobilestyle{
        display: inline-block;
        width: 100%
    }
}
@media (max-width: 640px) {
    #strix-crafted {
        padding: 40px 0 20px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-crafted .text {
        width: 92%;
        padding-top: 0
    }
}
/*angled*/
#strix-angled {
    background: #000 url(../img/angled-bg.jpg) center bottom/1920px no-repeat;
    min-height: 692px;
    text-align: center;
    padding: 0;
}
#strix-angled .msect-inner{
    /*position: absolute;*/
        max-width: 100%;
}
#strix-angled .mobilestyle {
    display: none;
    width: 100%;
}
#strix-angled .text {
        position: relative;
    padding: 240px 55% 0 0;
    width: 43%;
    max-width: 600px;
    margin: 0;
    text-align: right;
    float: right;
}
#strix-angled .text img{
    margin-bottom: 35px
}
@media (max-width: 719px) {
    #strix-angled {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 80px
    }
    #strix-angled .text {
        width: 92%;
        margin: 0px auto;
        padding: 0;
        text-align: center;
        float: initial;
    }
    #strix-angled .mobilestyle{
        display: inline-block;
        width: 100%;
        margin-top: 50px !important;
    }
}
@media (max-width: 640px) {
    #strix-angled {
        padding: 40px 0 20px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-angled .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-angled .text img{
        margin: 0 auto 35px !important
    }
}
/*twotypes*/
#strix-twotypes {
    background: #000;
    text-align: center;
    padding: 100px 0 0px;
}
#strix-twotypes .text {
    width: 84.31373%;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}
#strix-twotypes ul{
    display: inline-block;
    width: 98%;
    padding: 0 1%;
    margin-top: 100px
}
#strix-twotypes ul li{
    display: inline-block;
    width: 49%;
    padding: 0 0.5%;
    float: left;
}
#strix-twotypes ul li img{
    width: 100%
}
@media (max-width: 719px) {
    #strix-twotypes {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 80px
    }
    #strix-twotypes .text {
        width: 92%;
        margin-top: 0px
    }
    #strix-twotypes ul{
        margin: 50px auto 0
    }
    #strix-twotypes ul li{
        width: 100%;
        padding: 0
    }
}
@media (max-width: 640px) {
    #strix-twotypes {
        padding: 40px 0 0px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-twotypes .text {
        width: 92%
    }
}
/*instant*/
#strix-instant {
    background: #000 url(../img/instant-bg.jpg) center top/1920px no-repeat;
    min-height: 893px;
    text-align: center;
    padding: 0;
}
#strix-instant .msect-inner{
    /*position: absolute;*/
        max-width: 100%;
}
#strix-instant .mobilestyle {
    display: none;
    width: 100%;
}
#strix-instant .text {
    position: relative;
    padding: 255px 0 0;
    width: 43%;
    margin-left: 55%;
    max-width: 560px;
    text-align: left;
}
#strix-instant .text img{
    margin-bottom: 35px
}
@media (max-width: 719px) {
    #strix-instant {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 0px
    }
    #strix-instant .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-instant .text img{
        margin: 0 auto 35px !important
    }
    #strix-instant .mobilestyle{
        display: inline-block;
        width: 100%
    }
}
@media (max-width: 640px) {
    #strix-instant {
        padding: 40px 0 20px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-instant .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-instant .text img{
        margin: 0 auto 35px !important
    }
}
/*certifiably*/
#strix-certifiably {
    background: #000 url(../img/certifiably-bg.jpg) center bottom/1920px no-repeat;
    min-height: 655px;
    text-align: center;
    padding: 0;
}
#strix-certifiably .msect-inner{
    /*position: absolute;*/
        max-width: 100%;
}
#strix-certifiably .mobilestyle {
    display: none;
    width: 100%;
}
#strix-certifiably .text {
    position: relative;
    padding: 130px 0 0 90px;
    width: 65%;
    max-width: 750px;
    margin: 0;
    text-align: left;
}
#strix-certifiably .text img{
    margin-bottom: 35px
}
@media (max-width: 719px) {
    #strix-certifiably {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 0px
    }
    #strix-certifiably .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-certifiably .text img{
        margin: 0 auto 35px !important
    }
    #strix-certifiably .mobilestyle{
        display: inline-block;
        width: 100%
    }
}
@media (max-width: 640px) {
    #strix-certifiably {
        padding: 40px 0 20px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-certifiably .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-certifiably .text img{
        margin: 0 auto 35px !important
    }
}
#strix-certifiably-pics img{
    width: 100%
}
#strix-certifiably-pics .mobilestyle{
        display: none;
    }
/*平板*/
@media (min-width: 719px) and (max-width: 959px) {
    #strix-certifiably-pics .webstyle{
        display: none;
    }
    #strix-certifiably-pics .mobilestyle{
        display: block;
    }
}
/*手機*/
@media (max-width: 719px) {
    #strix-certifiably-pics .webstyle{
        display: none;
    }
    #strix-certifiably-pics .mobilestyle{
        display: block;
    }
}
#strix-lighting {
    padding: 120px 0;
    background: black no-repeat 40% -150px
}
#strix-lighting .text {
    float: left;
    position: relative;
    z-index: 2;
    width: 45.92157%;
    margin-left: 2%
}
#strix-lighting .aurasync {
    margin-bottom: 20px;
    margin-left: -8px
}
#strix-lighting .list {
    margin: 60px auto;
    clear: both;
    max-width: 850px
}
#strix-lighting .list .item {
    display: inline-block;
    vertical-align: top;
    width: 14.285%;
    text-align: center;
}
#strix-lighting .list .item .icon {
    position: relative;
    width: 96px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5em;
    cursor: pointer;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}
#strix-lighting .list .item .icon .nm {
    width: 100%
}
#strix-lighting .list .item .icon .ov {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}
#strix-lighting .list .item .tt {
    font-weight: 400;
    line-height: 1.3
}
#strix-lighting .list .item:hover .icon, #strix-lighting .list .item:active .icon {
    opacity: .7
}
#strix-lighting .list .item.on:hover .icon, #strix-lighting .list .item.on:active .icon {
    opacity: 1
}
#strix-lighting .list .item.on .icon .ov {
    opacity: 1
}
#strix-lighting .picker {
    position: relative;
    margin-top: 20px
}
#strix-lighting .picker .farbtastic>* {
    left: 0;
    top: 0
}
#strix-lighting .pic {
    float: right;
    position: relative;
    z-index: 1;
    width: 31.88235%;
    height: 0;
    padding-top: 63.43137%;
    margin-right: 10%;
    margin-top: -20px
}
#strix-lighting .pic .img {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%
}
#strix-lighting .color {
    position: absolute;
    z-index: -1;
    background-color: #fff003
}
#strix-lighting .pic .color {
    position: absolute;
    z-index: 1;
    background-color: #fff003
}
#strix-lighting .pic .color.n1 {
        left: 15.91908%;
    top: 33.88563%;
    width: 30.44316%;
    height: 25.83771%;
}
#strix-lighting .pic .color.n2 {
        left: 25.43353%;
    top: 47.1051%;
    width: 31.21387%;
    height: 36.53014%;
}
#strix-lighting .pic .color.n3 {
    left: 32.17726%;
    top: 80.17156%;
    width: 16.18497%;
    height: 3.40031%
}
@media (max-width: 960px) {
    #strix-lighting {
        background-position: 50% -300px
    }
    #strix-lighting .text {
        float: none;
        width: 92%;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
    #strix-lighting .aurasync {
        margin-left: auto;
        margin-right: auto
    }
    #strix-lighting .list {
        width: 75%;
        margin-left: auto;
        margin-right: auto
    }
    #strix-lighting .picker {
        position: absolute;
        right: 0;
        top: 100%;
        margin-right: 5%;
        margin-left: 0
    }
    #strix-lighting .pic {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px
    }
}
@media (max-width: 640px) {
    #strix-lighting {
        padding: 40px 0;
        background-position: 50% 0;
        -moz-background-size: 150% auto;
        -o-background-size: 150% auto;
        -webkit-background-size: 150% auto;
        background-size: 150% auto
    }
    #strix-lighting .list {
        width: 100%;
        margin-top: 30px
    }
    #strix-lighting .list .item .icon {
        width: 60px
    }
    #strix-lighting .pic {
        left: -7%;
        width: 66.14706%;
        height: 0;
        padding-top: 82.46078%
    }
}
@media (max-width: 432px) {
    #strix-lighting .picker {
        margin-right: 2%
    }
}
#strix-battlefield {
    background: black no-repeat 50% 50%;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover
}
#strix-battlefield .text {
    position: relative;
    height: 550px
}
#strix-battlefield .heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 1em;
    text-align: center
}
@media (min-width: 1025px) {
    #strix-battlefield {
        background-attachment: fixed
    }
}
@media (max-width: 640px) {
    #strix-battlefield {
        background-attachment: scroll
    }
    #strix-battlefield .text {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
        height: 480px
    }
    #strix-battlefield .heading {
        line-height: 1.4
    }
}

#strix-sync {
    overflow: hidden;
    padding: 0;
    padding-top: 100px;
    background: black
}
#strix-sync .text {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    padding-top: 2%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}
#strix-sync .pic {
    position: relative;
    z-index: 1;
    width: 188.23529%;
    margin-left: -44.11765%;
    background: black no-repeat 50% 0
}
#strix-sync .pic img {
    width: 100%
}
#strix-sync .pic .img {
    position: relative;
    z-index: 3
}
#strix-sync .pic .color {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    visibility: hidden
}
#strix-sync .pic .color.n1 {
    visibility: visible
}
@media (max-width: 1280px) {
    #strix-sync .text {
        padding-top: 0
    }
    #strix-sync .pic {
        width: 150%;
        margin-left: -25%
    }
}
@media (max-width: 960px) {
    #strix-sync .pic {
        -moz-background-size: auto 100%;
        -o-background-size: auto 100%;
        -webkit-background-size: auto 100%;
        background-size: auto 100%;
        margin-top: -50px
    }
}
@media (max-width: 768px) {
    #strix-sync {
        padding: 40px 0 50px;
        background-image: none !important
    }
    #strix-sync .text {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        padding-top: 0;
        width: 92%;
        margin-bottom: 0
    }
}

#strix-ess {
    background: #000 url(../img/ess_bg.jpg) center bottom/1920px no-repeat;
    min-height: 1000px;
    text-align: center;
    padding: 100px 0 0px;
}
#strix-ess .pic {
    width: 235.29412%;
    margin-left: -67.64706%
}
#strix-ess .pic img {
    width: 100%
}
#strix-ess .text {
    width: 92.15686%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center
}
#strix-ess .icon {
    width: 90px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px
}
#strix-ess .mobilestyle {
    display: none;
    width: 100%;
}
@media (max-width: 1280px) {
    #strix-ess {
        padding-bottom: 100px
    }
    #strix-ess .pic {
        width: 196.07843%;
        margin-left: -48.03922%
    }
}
@media (max-width: 960px) {
    #strix-ess {
        padding-bottom: 60px
    }
    #strix-ess .pic {
        width: 180%;
        margin-left: -36%
    }
}
@media (max-width: 640px) {
    #strix-ess .mobilestyle{
        display: inline-block;
        width: 100%;
        margin-top: 50px !important
    }
    #strix-ess {
        padding-bottom: 40px;
        background: none;
        min-height: inherit;
    }
    #strix-ess .text {
        width: 92%;
    }
    #strix-ess .icon {
        width: 60px
    }
    #strix-ess img{
        width: 100%
    }
}

/*highsnr*/
#strix-highsnr {
    background: #000;
    text-align: center;
    padding: 0px 0 0px;
}
#strix-highsnr .text {
    width: 84.31373%;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}
#strix-highsnr img.highsnr_pic {
    width: calc(100% - 20px);
    display: inline-block;
    padding: 0 10px;
    max-width: 1902px !important;
    margin-top: 60px;
}
@media (max-width: 719px) {
    #strix-highsnr {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 80px
    }
    #strix-highsnr .text {
        width: 92%;
        margin-top: 0px
    }
    #strix-highsnr img.highsnr_pic {
        width: calc(100% - 20px) !important;
        display: inline-block;
        padding: 0 10px !important;
        max-width: 1902px !important;
        margin-top: 60px !important;
    }
}
@media (max-width: 640px) {
    #strix-highsnr {
        padding: 40px 0 0px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-highsnr .text {
        width: 92%
    }
}

#strix-video_drivers {
    overflow: hidden
}
#strix-video_drivers .msect-inner{
    margin-top: -900px;
    margin-bottom: 300px
}
#strix-video_drivers .text {
    float: right;
    position: relative;
    z-index: 2;
    width: 56.2%;
    margin-right: 2%;
    margin-top: 350px;
}
#strix-video_drivers .pic {
    float: left;
    position: relative;
    z-index: 1;
    width: 51.88235%;
    height: 0;
    margin-left: -8.82353%;
    margin-top: -5%;
}
#strix-video_drivers .pic img{
    float: right;
}
#strix-video_drivers .mobilestyle{
    display: none;
    width: 100%
}
#strix-video_drivers .clip {
    position: relative;
    width: 1920px;
    height: 1080px;
    left: 50%;
    margin-left: -960px;
}
#strix-video_drivers .video_drivers {
    display: block;
    width: 100%;
    height: 100%;
}
#strix-video_drivers .video_drivers img {
    width: 100%;
    height: 100%
}
#strix-video_drivers .static {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}
@media (max-width: 960px) {
    #strix-video_drivers .text {
        float: none;
        width: 92%;
        margin-top: 500px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
    #strix-video_drivers .pic{
        width: 100%;
        margin-left: -5%;
        padding: 100px 0 100px 0;
        height: auto
    }
    #strix-video_drivers .msect-inner{
        margin-bottom: 0px
    }
}
@media (max-width: 640px) {
    #strix-video_drivers .text {
        float: none;
        width: 92%;
        margin-top: 0px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
    #strix-video_drivers .mobilestyle {
        display: inline-block;
        width: 100%
    }
    #strix-video_drivers .clip {
        display: none
    }
    #strix-video_drivers .video_drivers {
        display: none
    }
    #strix-video_drivers .static {
        display: block
    }
    #strix-video_drivers .msect-inner{
        margin-top: 50px;
        margin-bottom: 0
    }
    #strix-video_drivers .pic{
        width: 100%;
        margin-left: 0%;
        padding: 50px 0 0px 0;
    }
    #strix-video_drivers .pic img{
        width: 100%;
    }
}
@media (max-width: 432px) {
    #strix-video_drivers .clip {
        width: 1129px;
        height: 400px;
        margin-left: -564.5px
    }
}

/*hyper-grounding*/
#strix-hyper-grounding {
    background: #000 url(../img/hyper-grounding-bg.jpg) center top/1920px no-repeat;
    min-height: 655px;
    text-align: center;
    padding: 0;
}
#strix-hyper-grounding .msect-inner{
    /*position: absolute;*/
        max-width: 100%;
}
#strix-hyper-grounding .mobilestyle {
    display: none;
    width: 100%;
}
#strix-hyper-grounding .text {
    position: relative;
    padding: 150px 0 0 90px;
    width: 35%;
    max-width: 590px;
    margin: 0;
    text-align: left;
}
#strix-hyper-grounding .text img{
    margin-bottom: 35px
}
@media (max-width: 719px) {
    #strix-hyper-grounding {
        padding-top: 0px;
        background: none;
        min-height: inherit;
        padding-bottom: 0px
    }
    #strix-hyper-grounding .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-hyper-grounding .text img{
        margin: 0 auto 35px !important
    }
    #strix-hyper-grounding .mobilestyle{
        display: inline-block;
        width: 100%;
        margin-top: 50px !important
    }
}
@media (max-width: 640px) {
    #strix-hyper-grounding {
        padding: 40px 0 20px;
        -moz-background-size: 360% auto;
        -o-background-size: 360% auto;
        -webkit-background-size: 360% auto;
        background-size: 360% auto
    }
    #strix-hyper-grounding .text {
        width: 92%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    #strix-hyper-grounding .text img{
        margin: 0 auto 35px !important
    }
}

#strix-compare {
    padding: 85px 0 100px;
    background: #191919 no-repeat 50% 0
}
#strix-compare .msect-inner{
    max-width: 940px
}
#strix-compare .sheet {
    margin-left: 1em;
    margin-right: 1em
}
#strix-compare .sheet table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0
}
#strix-compare .sheet thead th {
    padding: 0 0 2em 2em;
    text-align: center
}
#strix-compare .sheet thead th p{
        display: block;
    margin-top: 1em;
    font-family: "xolonium";
    font-size: 1.2em;
    line-height: 1;
    color: white;
    text-align: left;
}
#strix-compare .sheet thead img {
    margin-left: auto;
    margin-right: auto
}
html #overview #special-sectionOverview #strix-compare .sheet thead img, html #overview #sectionOverview #strix-compare .sheet thead img {
    max-width: 100% !important
}
#strix-compare .sheet tbody td, #strix-compare .sheet tbody th {
    position: relative;
    padding: 1em 2em;
    font-weight: 300
}
#strix-compare .sheet tbody td:before {
    /*content: '';
    display: block;
    width: 1px;
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    border-left: 1px solid #363636*/
}
#strix-compare .sheet tbody tr td,
#strix-compare .sheet tbody tr th{
    border-bottom: 1px #343434 solid;
}
#strix-compare .sheet tbody tr:last-child td,
#strix-compare .sheet tbody tr:last-child th{
    border-bottom: none
}
#strix-compare .sheet tbody tr:nth-child(odd) {
    /*background: #191919*/
}
@media (min-width: 1025px) {
    #strix-compare .parentheses {
        font-size: 85%
    }
}
@media (max-width: 960px) {
    #strix-compare .sheet {
        margin: 0;
        line-height: 1.3;
        font-size: 85%
    }
    #strix-compare .sheet tbody td, #strix-compare .sheet tbody th {
        padding: .75em .5em .7em 1.2em
    }
}
@media (max-width: 640px) {
    #strix-compare {
        padding: 40px 0 40px
    }
}
#strix-compare .saving_table{
    padding-top: 40px;
    width: calc(100% - 20px);
    overflow-y: auto;
    margin: 0 10px;
    padding-bottom: 10px
}
#strix-compare .saving_table table{
  /*border: #1f1f1f 1px solid;*/
  min-width: 830px;
      border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 5px;
}
#strix-compare .saving_table::-webkit-scrollbar{
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}
#strix-compare .saving_table::-webkit-scrollbar-thumb{
    border-radius: 8px;
    /*border: 3px solid #000;
    background-color: rgba(255, 255, 255, .3);*/
    top: 10px;
}
/* Custom scrollbar */

.saving_table::-webkit-scrollbar {
  width: 8px;
}

.saving_table::-webkit-scrollbar-track {
  border:1px solid #fef200;
  border-radius: 10px;

}

.saving_table::-webkit-scrollbar-thumb {
  background: #fef200;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(254, 254, 0, 1) inset;

}


svg:not(:root) {
    overflow: hidden;
}
.iphone-line-drawing {
    position: relative;
    z-index: 10;
    height: 263px;
    width: auto
}
@media(min-width: 768px) {
    .iphone-line-drawing {
        height: 300px
    }
}
.proposition-phone-screen {
    content: "";
    position: absolute;
    z-index: 1;
    height: 263px;
    width: 725px;
    text-align: left;
    top: 35px;
    left: 100px;
    background-size: cover;
    background-position-y: 0;
    overflow: hidden;
   -webkit-animation: swipeApp 9s linear infinite;
    animation: swipeApp 9s linear infinite
}
@media(min-width: 768px) {
    .proposition-phone-screen {
        top: 35px;
        left: 100px;
    }
}
.proposition-phone-screen img {
    display: inline-block;
    width: auto;
    height: 263px;
   -webkit-animation: growApp 3s ease-in-out infinite;
    animation: growApp 3s ease-in-out infinite;
   -webkit-transform-origin: center;
    transform-origin: center
}
@media(min-width: 768px) {
    .proposition-phone-screen img {
        height: 263px
    }
}

@-webkit-keyframes rotateDevices {
    0% {
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }
    10% {
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }
    15% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%)
    }
    35% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%)
    }
    40% {
        -webkit-transform: translate(-50%, -40%);
        transform: translate(-50%, -40%)
    }
    60% {
        -webkit-transform: translate(-50%, -40%);
        transform: translate(-50%, -40%)
    }
    65% {
        -webkit-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%)
    }
    80% {
        -webkit-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%)
    }
    85% {
        -webkit-transform: translate(-50%, -80%);
        transform: translate(-50%, -80%)
    }
    to {
        -webkit-transform: translate(-50%, -80%);
        transform: translate(-50%, -80%)
    }
}
@keyframes rotateDevices {
    0% {
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }
    10% {
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }
    15% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%)
    }
    35% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%)
    }
    40% {
        -webkit-transform: translate(-50%, -40%);
        transform: translate(-50%, -40%)
    }
    60% {
        -webkit-transform: translate(-50%, -40%);
        transform: translate(-50%, -40%)
    }
    65% {
        -webkit-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%)
    }
    80% {
        -webkit-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%)
    }
    85% {
        -webkit-transform: translate(-50%, -80%);
        transform: translate(-50%, -80%)
    }
    to {
        -webkit-transform: translate(-50%, -80%);
        transform: translate(-50%, -80%)
    }
}
@-webkit-keyframes swipeApp {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        -webkit-transform: translateX(-20.3%);
        transform: translateX(-20.3%)
    }
    45% {
        -webkit-transform: translateX(-20.3%);
        transform: translateX(-20.3%)
    }
    50% {
        -webkit-transform: translateX(-40.9%);
        transform: translateX(-40.9%)
    }
    80% {
        -webkit-transform: translateX(-40.9%);
        transform: translateX(-40.9%)
    }
    85% {
        -webkit-transform: translateX(-61.8%);
        transform: translateX(-61.8%)
    }
    to {
        -webkit-transform: translateX(-61.8%);
        transform: translateX(-61.8%)
    }
}
@keyframes swipeApp {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        -webkit-transform: translateX(-20.3%);
        transform: translateX(-20.3%)
    }
    45% {
        -webkit-transform: translateX(-20.3%);
        transform: translateX(-20.3%)
    }
    50% {
        -webkit-transform: translateX(-40.9%);
        transform: translateX(-40.9%)
    }
    80% {
        -webkit-transform: translateX(-40.9%);
        transform: translateX(-40.9%)
    }
    85% {
        -webkit-transform: translateX(-61.8%);
        transform: translateX(-61.8%)
    }
    to {
        -webkit-transform: translateX(-61.8%);
        transform: translateX(-61.8%)
    }
}
/*@-webkit-keyframes growApp {*/

@keyframes growApp {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    30%, 70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    75% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

#strix-dominate .maintitle.lefttxt .info_left, #strix-dominate .maintitle.righttxt .info_right {
    position: relative;
    z-index: 2;
}
#strix-dominate .maintitle.lefttxt .info_right, #strix-dominate .maintitle.righttxt .info_left {
    position: relative;
    z-index: 1;
}
#strix-dominate .mainsize{
    max-width: 1650px;
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 0px 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
#strix-dominate .color {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
#strix-dominate .color.n1 {
    visibility: visible
}

#strix-dominate .pic {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    /*display: none*/
}
#strix-dominate .pic .img {
    position: relative;
    z-index: 3
}
#strix-dominate .pic .color {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
#strix-dominate .pic .color.n1{
    background: url(../img/rainbow_bg.jpg);
    left: 55%;
    top: 180px;
    width: 500px;
    height: 500px;
    background-size: cover;
}
#strix-dominate .pic .color.n2{
    left: 68%;
    top: 370px;
    width: 8%;
    height: 7%;
    min-width: 170px;
    min-height: 120px;
}
/*平板*/
@media (min-width: 719px) and (max-width: 959px) {
    #strix-dominate .pic .color.n1{
        left: 48%;
    }
    #strix-dominate .pic .color.n2{
        left: 70%
    }
    #strix-dominate .hdau_container{
        margin-top: 100px !important
    }
}
/*手機*/
@media (max-width: 719px) {
    #strix-dominate .mainsize .maintitle{
        width: 100% !important ;
        margin: 0px auto 40px;
    }
    #strix-dominate .pic .color.n1{
        left: 10%;
        top: 5%;
    }
    #strix-dominate .pic .color.n2{
        left: 280px;
        top: 250px;
        width: 17%;
        height: 80px;
        min-width: 118px;
        min-height: 68px;
    }
    /*#strix-dominate .qqq img.mobilestyle{
        width: 150%
    }*/
}
/* 左文右圖 */
.maintitle.lefttxt {
    display: inline-block;
    width: 100%;
    margin: 0;
}
.maintitle.lefttxt .info_left {
    float: left;
    margin: 0px -100% 0px 0px;
    position: relative;
    width: 45%;
    text-align: left !important;
    padding-left: 50px;
    padding-top: 150px
}
.maintitle.lefttxt .info_left .mtitle p,
.maintitle.lefttxt .info_right .mtitle p, 
.maintitle.lefttxt .info_left .info {
    text-align: left !important;
    padding: 0 0 20px !important;
    width: 100% !important;
    margin: 0 auto;
}
.maintitle.lefttxt .info_right {
    margin: 0px 0px 0px 45%;
    position: relative;
    /*width: 100%;*/
}
.maintitle.lefttxt .info_left .stitle p,
.maintitle.lefttxt .info_left .info{
    text-align: left !important;
    margin-left: 0 !important;
}
/* 左圖右文 */
.maintitle.righttxt {
    display: inline-block;
    width: 100%;
    margin: 0;
}
.maintitle.righttxt .info_left {
    float: left;
    margin: 0px -100% 0px 0px;
    position: relative;
    width: 50%;
}
.maintitle.righttxt .info_left .mtitle p,
.maintitle.righttxt .info_right .mtitle p,
.maintitle.righttxt .info_left .info {
    text-align: left !important;
    padding: 0 0 20px !important;
    width: 100% !important;
    margin: 0 auto;
}
.maintitle.righttxt .info_right {
    margin: 0px 0px 0px 51%;
    position: relative;
    text-align: left;
    /*width: 100%;*/
}
.maintitle.righttxt .info_right .stitle p,
.maintitle.righttxt .info_right .info{
    text-align: left !important;
    margin-left: 0 !important;
}
/*平板*/
@media (min-width: 719px) and (max-width: 959px) {
    #strix-dominate .mainsize .maintitle{
        width: 100% !important ;
        margin: -40px auto 40px;
    }
}
/*手機*/
@media (max-width: 719px) {
    #strix-dominate .mainsize .maintitle{
        width: 100% !important ;
        margin: 0px auto 40px;
    }
}
/* ---------- ROG_gladiusii-dominate ---------- */
#strix-dominate{
    position: relative;
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto
}
#strix-dominate .qqq{
    height: 940px;
    position: absolute;
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
}
#strix-dominate p.note{
    line-height: 1.5;
    text-align: left;
}
#strix-dominate .mobilestyle{
    display: none;
    position: relative;
}
#strix-dominate .webstyle{
    display: block;
    position: relative;
}
#strix-dominate .maintitle.lefttxt .info_left{
    width: 50%
}

#strix-dominate .info_right{
    overflow: hidden;
    margin: 0 0 0 40%;
    
}
#strix-dominate .info_right .reactive_ap{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
}
#strix-dominate .info_right .reactive_btn{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5%;
    left: 5%;
    background: #fff;
    z-index: 1
}
#strix-dominate .info_right img.img_4pin{
    position: relative;
    width: 100%;
    max-width: 96px !important;
    float: left;
}
@media (min-width: 719px) and (max-width: 959px) {
    #strix-dominate .info_right img.img_4pin{
        margin-top: 0px;
    }
}
@media (max-width: 719px) {
    #strix-dominate .info_right img.img_4pin{
        margin: 0px;
    }
    #strix-dominate .mobilestyle{
        display: block;
    }
    #strix-dominate .webstyle{
        display: none;
    }
}

#strix-dominate .hdau_color,
/*#strix-dominate .hdau_filter,*/
#strix-dominate .hdau_bg{
    position: absolute;
    top: 0;
    right: 0;
}
#strix-dominate .hdau_color{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
#strix-dominate .hdau_bg{
    width: 100%;
    max-width: 1920px;
    height: 100%;
    background: 65% center no-repeat;
    background-image:url(../img/aura_sync.png);
    background-size: cover;
}
#strix-dominate .hdau_container{
    width: 100%;
    max-width: 1020px;
    padding: 0;
    margin: 250px auto 50px;
}
#strix-dominate .hdau_controls{
    position: relative;
    width: 100%;
    margin-left: auto;
}
#strix-dominate .info_right .info{
    display: inline-block;
    float: left;
    text-align: left;
    width: 72%;
    margin-left: 10px;
    font-size: 13px;
    line-height: 1.5;
    padding-top: 10px;
}
#strix-dominate h2{
    text-align: left;
    padding: 0;
    text-transform: none;
    color: #ffffff;
    font-size: 17px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px
}
#strix-dominate ul{
    width: 100%;
    margin:25px 0 0;
}
#strix-dominate li{
    display: inline-block;
    vertical-align: top;
    width: 16.66%;
    margin-left: -4px;
    padding:10px 0;
    cursor:pointer;
    opacity: .6;
    text-align: center;
    max-width: 130px;
    -webkit-transition: .4s ease;
       -moz-transition: .4s ease;
        -ms-transition: .4s ease;
         -o-transition: .4s ease;
            transition: .4s ease;
}
#strix-dominate li a{
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto
}
#strix-dominate li a.btn_01{
    background: url(../img/static.png) center center no-repeat;
}
#strix-dominate li.hdau_active a.btn_01{
    background: url(../img/static_active.png) center center no-repeat;
}
#strix-dominate li a.btn_02{
    background: url(../img/breathing.png) center center no-repeat;
}
#strix-dominate li.hdau_active a.btn_02{
    background: url(../img/breathing_active.png) center center no-repeat;
}
#strix-dominate li a.btn_03{
    background: url(../img/strobing.png) center center no-repeat;
}
#strix-dominate li.hdau_active a.btn_03{
    background: url(../img/strobing_active.png) center center no-repeat;
}
#strix-dominate li a.btn_04{
    background: url(../img/color_cycle.png) center center no-repeat;
}
#strix-dominate li.hdau_active a.btn_04{
    background: url(../img/color_cycle_active.png) center center no-repeat;
}
#strix-dominate li a.btn_05{
    background: url(../img/rainbow.png) center center no-repeat;
}
#strix-dominate li.hdau_active a.btn_05{
    background: url(../img/rainbow_active.png) center center no-repeat;
}
#strix-dominate li a.btn_06{
    background: url(../img/music_effect.png) center center no-repeat;
}
#strix-dominate li.hdau_active a.btn_06{
    background: url(../img/music_effect_active.png) center center no-repeat;
}
#strix-dominate li:hover{
    opacity: 1;
    /*background:rgba(0,0,0,.5);*/
    /*box-shadow: 0 0 50px rgba(0,0,0,.9) inset;*/
}
#strix-dominate li.hdau_active{
    opacity: 1;
}
#strix-dominate li.hdau_active h4,
#strix-dominate li.hdau_active p{
    color: #db0831;
    font-weight: 700
}
#strix-dominate li img{
    width: 90px;
    height: 90px;
    margin: 0 auto
}
#strix-dominate h4{
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: .5px;
    padding:10px 0;
    color: #ddd
}
#strix-dominate h4.closer{
    letter-spacing: 0px;
}
#colorpicker{
    width: 130px;
    margin: 0 80px 0 0;
    float: right;
}
#colorpicker .farbtastic{
    margin-top: -150px;
}
#colorpicker .farbtastic .farbtastic-solid{
        left: 31px !important;
    top: 31px !important;
}
@media screen and (max-width: 1366px) {

    #strix-dominate .hdau_container{
        width: 100%;
    }
}
@media screen and (max-width: 1200px) {
    #strix-dominate {
        background-position:40% center;
    }
    #strix-dominate .hdau_container{
        width: 100%;
        padding:40px 0 0px;
        margin-top: 100px
    }
    #strix-dominate h2{
        
    }
    #strix-dominate .hdau_controls{
        
    }
    #colorpicker{
        margin-right: 5%
    }
    #strix-dominate ul {
        margin: 35px 0 0;
        max-width: 75%;
    }
    #strix-dominate li{
        width: 16.66%;
    }
    
    #strix-dominate h4,
    #strix-dominate p{
        text-shadow: 0 0 8px black;
    }
}
@media (min-width: 719px) and (max-width: 959px) {
    #strix-dominate li{
        max-width: inherit;
    }
}
@media screen and (max-width: 719px) {
    #strix-dominate{
        height: auto;   
    }
    #strix-dominate .qqq{
        position: relative;
        height: auto
    }
    #strix-dominate .maintitle.lefttxt .info_left{
        width: 100%;
        padding: 0
    }
    #strix-dominate .hdau_bg{
            height: auto;
    position: relative;
    background: #000;
    }
    #strix-dominate .hdau_color{
        height: 100%
    }
    #strix-dominate .hdau_container{
        width: 100%;
        padding:0;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
        margin-top: -50px
    }
    #strix-dominate .hdau_controls{
        width: 100%;
        margin:0 auto;
        display: inline-block;
    }
    #strix-dominate ul{
        margin:25px 0 0;
        max-width: 100%
    }
    #strix-dominate li{
        width: 33.33%;
        float: left;
    }
    #strix-dominate li img{
        margin: 0 auto !important;
    }
    #strix-dominate h4{
        font-size: .95rem;
    }
    #colorpicker{
        position: absolute;
        left: 0;
        right: inherit;
        top: -120px;
    }
    #strix-dominate h2{
        margin-top: 0;
    }
}
@media screen and (max-width: 480px) {
    #strix-dominate li{
        width: 33.3%;
    }
    #colorpicker{
        position: absolute;
    left: 0;
    right: inherit;
    top: -120px;
    }
}
/* ---------- END ROG_gladiusii-dominate ---------- */
/* ---------- color effect ---------- */

.hdau_rainbow{
    background: -webkit-linear-gradient(bottom, #8f00ff,#4B0082,#0000FF,#00FF00,#FFFF00,#FF7F00,#FF0000);
    background: -o-linear-gradient(bottom, #8f00ff,#4B0082,#0000FF,#00FF00,#FFFF00,#FF7F00,#FF0000);
    background: -moz-linear-gradient(bottom, #8f00ff,#4B0082,#0000FF,#00FF00,#FFFF00,#FF7F00,#FF0000);
    background: linear-gradient(to top, #8f00ff,#4B0082,#0000FF,#00FF00,#FFFF00,#FF7F00,#FF0000);
}
.hdau_comet{
    // background: -moz-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(84,84,84,1) 39%, rgba(255,0,0,1) 54%, rgba(255,0,0,1) 60%, rgba(84,84,84,1) 73%, rgba(84,84,84,1) 100%);
    // background: -webkit-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(84,84,84,1) 39%, rgba(255,0,0,1) 54%, rgba(255,0,0,1) 60%, rgba(84,84,84,1) 73%, rgba(84,84,84,1) 100%);
    // background: -o-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(84,84,84,1) 39%, rgba(255,0,0,1) 54%, rgba(255,0,0,1) 60%, rgba(84,84,84,1) 73%, rgba(84,84,84,1) 100%);
    // background: -ms-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(84,84,84,1) 39%, rgba(255,0,0,1) 54%, rgba(255,0,0,1) 60%, rgba(84,84,84,1) 73%, rgba(84,84,84,1) 100%);
    // background: linear-gradient(135deg, rgba(84,84,84,1) 0%, rgba(84,84,84,1) 39%, rgba(255,0,0,1) 54%, rgba(255,0,0,1) 60%, rgba(84,84,84,1) 73%, rgba(84,84,84,1) 100%);
    background: url(../img/wavespectrum-h2000.jpg) repeat;
}
.hdau_flash{
    background: -moz-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(255,0,0,1) 15%, rgba(84,84,84,1) 27%, rgba(255,0,0,1) 40%, rgba(84,84,84,1) 53%, rgba(255,0,0,1) 63%, rgba(84,84,84,1) 78%, rgba(255,0,0,1) 90%, rgba(84,84,84,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(255,0,0,1) 15%, rgba(84,84,84,1) 27%, rgba(255,0,0,1) 40%, rgba(84,84,84,1) 53%, rgba(255,0,0,1) 63%, rgba(84,84,84,1) 78%, rgba(255,0,0,1) 90%, rgba(84,84,84,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(255,0,0,1) 15%, rgba(84,84,84,1) 27%, rgba(255,0,0,1) 40%, rgba(84,84,84,1) 53%, rgba(255,0,0,1) 63%, rgba(84,84,84,1) 78%, rgba(255,0,0,1) 90%, rgba(84,84,84,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(255,0,0,1) 15%, rgba(84,84,84,1) 27%, rgba(255,0,0,1) 40%, rgba(84,84,84,1) 53%, rgba(255,0,0,1) 63%, rgba(84,84,84,1) 78%, rgba(255,0,0,1) 90%, rgba(84,84,84,1) 100%);
    background: linear-gradient(135deg, rgba(84,84,84,1) 0%, rgba(255,0,0,1) 15%, rgba(84,84,84,1) 27%, rgba(255,0,0,1) 40%, rgba(84,84,84,1) 53%, rgba(255,0,0,1) 63%, rgba(84,84,84,1) 78%, rgba(255,0,0,1) 90%, rgba(84,84,84,1) 100%);
}
@keyframes static{
    0% {opacity: 1}
    50%{opacity: 1}
}
@-webkit-keyframes static{
    0% {opacity: 1}
    50%{opacity: 1}
}
@keyframes breathing{
    0% {opacity: 1}
    50%{opacity: .3}
}
@-webkit-keyframes breathing{
    0% {opacity: 1}
    50%{opacity: .3}
}
@keyframes strobing{
    0% {opacity: 1}
    50%{opacity: .3}
}
@-webkit-keyframes strobing{
    0% {opacity: 1}
    50%{opacity: .3}
}
@keyframes music{
    0%  {opacity: 1}
    10% {opacity: .3}
    40% {opacity: 1}
    60% {opacity: .3}
    70% {opacity: 1}
    100%{opacity: .3}
}
@-webkit-keyframes music{
    0%  {opacity: 1}
    10% {opacity: .3}
    40% {opacity: 1}
    60% {opacity: .3}
    70% {opacity: 1}
    100%{opacity: .3}
}
@keyframes cycle{
    0%     {background-color: #14ff00}
    15%      {background-color: #fff600}
    34%     {background-color: #ff0101}
    50%     {background-color: #fc00ff}
    70%     {background-color: #000cff}
    83%     {background-color: #01fff7}
    100%     {background-color: #14ff00}
}
@-webkit-keyframes cycle{
    0%     {background-color: #14ff00}
    15%      {background-color: #fff600}
    34%     {background-color: #ff0101}
    50%     {background-color: #fc00ff}
    70%     {background-color: #000cff}
    83%     {background-color: #01fff7}
    100%     {background-color: #14ff00}
}
@keyframes rainbow{
    0%  {-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}
    100%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}
}
@-webkit-keyframes rainbow{
    0%  {-webkit-filter:hue-rotate(359deg)}
    100%{-webkit-filter:hue-rotate(0deg)}
}
// @keyframes opacitya{
//     0%  { opacity: 1}
//     50% { opacity: 0}
//     100%{ opacity: 1}
// }
// @-webkit-keyframes opacitya{
//     0%  { opacity: 1}
//     50% { opacity: 0}
//     100%{ opacity: 1}
// }
@-webkit-keyframes opacitya {
  from {opacity:0;}
  to {opacity:1;}
}
@-webkit-keyframes opacityb {
  from {opacity:0;}
  to {opacity:1;}
}

@keyframes opacitya {
  from {opacity:0;}
  to {opacity:1;}
}
@keyframes opacityb {
  from {opacity:0;}
  to {opacity:1;}
}
@keyframes cpu{
    0%      {background-color: red}
    30%     {background-color: yellow}
    60%     {background-color: green}
    90%     {background-color: yellow;}
}
@-webkit-keyframes cpu{
    0%      {background-color: red}
    30%     {background-color: yellow}
    60%     {background-color: green}
    90%     {background-color: yellow;}
}
@keyframes comet{
    0%  {
        z-index: 0;
        width: 150%;
        transform: translateX(-50%);
    }
    100%{
        z-index: 0;
        width: 150%;
        transform: translateX(50%);
    }
}
@-webkit-keyframes comet{
    0%  {
        z-index: 0;
        width: 150%;
        transform: translateX(-50%);
    }
    100%{
        z-index: 0;
        width: 150%;
        transform: translateX(50%);
    }
}
@keyframes flash{
    0%  {
        z-index: 0;
        width: 200%;
        transform: translateX(0%);
    }
    100%{
        z-index: 0;
        width: 200%;
        transform: translateX(50%);
    }
}
@-webkit-keyframes flash{
    0%  {
        z-index: 0;
        width: 150%;
        transform: translateX(0%);
    }
    100%{
        z-index: 0;
        width: 150%;
        transform: translateX(50%);
    }
}
/* ---------- END color effect ---------- */


#strix-dominate .hdau_color.rainbow_wrapper { 
    height: 100%;
    width: 100%;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400);
    background-size: 500% 500%;
    padding: 0;
    -webkit-animation: rainbowwrapper 10s ease-out infinite;
    -z-animation: rainbowwrapper 10s ease-out infinite;
    -o-animation: rainbowwrapper 10s ease-out infinite;
    animation: rainbowwrapper 10s ease-out infinite;
}
#strix-dominate .hdau_color .rainbow_c{
    /*background: url(../img/sync-pic-color1.png) repeat;*/
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
}
 @-ms-keyframes rainbow_rotate {
    from {
        -ms-transform: rotate(0deg);
    } to {
        -ms-transform: rotate(360deg);
    }
}
@-moz-keyframes rainbow_rotate {
    from {
        -moz-transform: rotate(0deg);
    } to {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes rainbow_rotate {
    from {
        -webkit-transform: rotate(0deg);
    } to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rainbow_rotate {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}

@keyframes cometstyle {
    0% {
         background-position: 100% 0%;
    }
    100% {
        background-position: -50% 0%;
    }
}

@-webkit-keyframes cometstyle {
    0% {
         background-position: 100% 0%;
    }
    100% {
        background-position: -50% 0%;
    }
}
@-webkit-keyframes rainbowwrapper {
    0%{
        background-position:0% 100%
    }
    100%{
        background-position:125% 0%
    }
}
@-moz-keyframes rainbowwrapper {
    0%{
        background-position:0% 100%
    }
    100%{
        background-position:125% 0%
    }
}
@-o-keyframes rainbowwrapper {
    0%{
        background-position:0% 100%
    }
    100%{
        background-position:125% 0%
    }
}
@keyframes rainbowwrapper { 
    0%{
        background-position:0% 100%
    }
    100%{
        background-position:125% 0%
    }
}
@keyframes picmov{
    0%  {
        // transform: translate(10%, 20%);
        opacity: 0;
    }
    10%{
        // transform: translate(-60%, -70%);
        opacity: 1
    }
    40%{
        // transform: translate(-60%, -70%);
        opacity: 1
    }
    60%  {
        // transform: translate(10%, 20%);
        opacity: 0;
    }
    100%  {
        // transform: translate(10%, 20%);
        opacity: 0;
    }
}
@-webkit-keyframes picmov{
    0%  {
        // transform: translate(10%, 20%);
        opacity: 0;
    }
    10%{
        // transform: translate(-60%, -70%);
        opacity: 1
    }
    40%{
        // transform: translate(-60%, -70%);
        opacity: 1
    }
    60%  {
        // transform: translate(10%, 20%);
        opacity: 0;
    }
    100%  {
        // transform: translate(10%, 20%);
        opacity: 0;
    }
}
@keyframes picmovbg{
    0%  {
        opacity: 0;
    }
    15%{
        opacity: 1
    }
    40%  {
        opacity: 1;
    }
    60%  {
        opacity: 0;
    }
    100%  {
        opacity: 0;
    }
}
@-webkit-keyframes picmovbg{
    0%  {
        opacity: 0;
    }
    15%{
        opacity: 1
    }
    40%  {
        opacity: 1;
    }
    60%  {
        opacity: 0;
    }
    100%  {
        opacity: 0;
    }
}