@import url(../lib/swiper/swiper-bundle.min.css);
@import url("https://dlcdnimgs.stzgcm.com/vendor/public/fonts/css/roboto-condensed.css");
.bg-dark {
  background:#292929
}
html,
body {
  margin:0
}
#hd {
  font-family:"Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  background:black;
  color:white;
  font-size:16px;
  margin:0;
  padding:0
}
#hd * {
  margin:0;
  padding:0;
  text-decoration:none;
  list-style-type:none;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  word-wrap:break-word;
  word-break:break-word
}
#hd * ::selection {
  background:#1d2124;
  color:#02aee5
}
#hd * ::-moz-selection {
  background:#1d2124;
  color:#ffffff
}
#hd ul,
#hd li,
#hd figure,
#hd p {
  margin:0;
  padding:0
}
#hd h1,
#hd h2,
#hd h3,
#hd h4,
#hd p,
#hd a,
#hd li,
#hd button {
  font:inherit;
  padding:0;
  margin:0
}
#hd img {
  display:block;
  height:auto;
  border:none;
  max-width:100% !important;
  margin:0 auto
}
#hd iframe,
#hd video {
  display:block;
  max-width:100%
}
#hd a:focus-visible,
#hd button:focus-visible,
#hd input:focus-visible,
#hd select:focus-visible,
#hd textarea:focus-visible,
#hd [role="button"]:focus-visible,
#hd [tabindex="0"]:focus-visible {
  outline:1px solid #02aee5
}
#hd a:focus:not(:focus-visible),
#hd button:focus:not(:focus-visible),
#hd input:focus:not(:focus-visible),
#hd select:focus:not(:focus-visible),
#hd textarea:focus:not(:focus-visible),
#hd [role="button"]:focus:not(:focus-visible),
#hd [tabindex="0"]:focus:not(:focus-visible) {
  outline:none
}
#hd button {
  border:none;
  outline:none;
  background:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer
}
#hd .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0
}
#hd a:focus-visible,
#hd button:focus-visible,
#hd input:focus-visible,
#hd select:focus-visible,
#hd textarea:focus-visible,
#hd [role="button"]:focus-visible,
#hd [tabindex="0"]:focus-visible {
  outline:1px solid #02aee5
}
#hd a:focus:not(:focus-visible),
#hd button:focus:not(:focus-visible),
#hd input:focus:not(:focus-visible),
#hd select:focus:not(:focus-visible),
#hd textarea:focus:not(:focus-visible),
#hd [role="button"]:focus:not(:focus-visible),
#hd [tabindex="0"]:focus:not(:focus-visible) {
  outline:none
}
@-webkit-keyframes dotCounter {
  0% {
    -moz-transform:scale(0, 1);
    -o-transform:scale(0, 1);
    -ms-transform:scale(0, 1);
    -webkit-transform:scale(0, 1);
    transform:scale(0, 1)
  }
  100% {
    -moz-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    -ms-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
}
@-moz-keyframes dotCounter {
  0% {
    -moz-transform:scale(0, 1);
    -o-transform:scale(0, 1);
    -ms-transform:scale(0, 1);
    -webkit-transform:scale(0, 1);
    transform:scale(0, 1)
  }
  100% {
    -moz-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    -ms-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
}
@-ms-keyframes dotCounter {
  0% {
    -moz-transform:scale(0, 1);
    -o-transform:scale(0, 1);
    -ms-transform:scale(0, 1);
    -webkit-transform:scale(0, 1);
    transform:scale(0, 1)
  }
  100% {
    -moz-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    -ms-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
}
@-o-keyframes dotCounter {
  0% {
    -moz-transform:scale(0, 1);
    -o-transform:scale(0, 1);
    -ms-transform:scale(0, 1);
    -webkit-transform:scale(0, 1);
    transform:scale(0, 1)
  }
  100% {
    -moz-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    -ms-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
}
@keyframes dotCounter {
  0% {
    -moz-transform:scale(0, 1);
    -o-transform:scale(0, 1);
    -ms-transform:scale(0, 1);
    -webkit-transform:scale(0, 1);
    transform:scale(0, 1)
  }
  100% {
    -moz-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    -ms-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
  }
}
@-webkit-keyframes zoomIn {
  0% {
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    opacity:0
  }
  100% {
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    opacity:1
  }
}
@-moz-keyframes zoomIn {
  0% {
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    opacity:0
  }
  100% {
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    opacity:1
  }
}
@-ms-keyframes zoomIn {
  0% {
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    opacity:0
  }
  100% {
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    opacity:1
  }
}
@-o-keyframes zoomIn {
  0% {
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    opacity:0
  }
  100% {
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    opacity:1
  }
}
@keyframes zoomIn {
  0% {
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    opacity:0
  }
  100% {
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    opacity:1
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@keyframes fadeIn {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity:0;
    -moz-transform:translateY(30px);
    -o-transform:translateY(30px);
    -ms-transform:translateY(30px);
    -webkit-transform:translateY(30px);
    transform:translateY(30px)
  }
  100% {
    opacity:1;
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity:0;
    -moz-transform:translateY(30px);
    -o-transform:translateY(30px);
    -ms-transform:translateY(30px);
    -webkit-transform:translateY(30px);
    transform:translateY(30px)
  }
  100% {
    opacity:1;
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@-ms-keyframes fadeInUp {
  0% {
    opacity:0;
    -moz-transform:translateY(30px);
    -o-transform:translateY(30px);
    -ms-transform:translateY(30px);
    -webkit-transform:translateY(30px);
    transform:translateY(30px)
  }
  100% {
    opacity:1;
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity:0;
    -moz-transform:translateY(30px);
    -o-transform:translateY(30px);
    -ms-transform:translateY(30px);
    -webkit-transform:translateY(30px);
    transform:translateY(30px)
  }
  100% {
    opacity:1;
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@keyframes fadeInUp {
  0% {
    opacity:0;
    -moz-transform:translateY(30px);
    -o-transform:translateY(30px);
    -ms-transform:translateY(30px);
    -webkit-transform:translateY(30px);
    transform:translateY(30px)
  }
  100% {
    opacity:1;
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}
@-webkit-keyframes fader {
  50% {
    opacity:1
  }
}
@-moz-keyframes fader {
  50% {
    opacity:1
  }
}
@-ms-keyframes fader {
  50% {
    opacity:1
  }
}
@-o-keyframes fader {
  50% {
    opacity:1
  }
}
@keyframes fader {
  50% {
    opacity:1
  }
}
@-webkit-keyframes hint {
  0% {
    opacity:1;
    border-width:1px
  }
  100% {
    opacity:0;
    border-width:0
  }
}
@-moz-keyframes hint {
  0% {
    opacity:1;
    border-width:1px
  }
  100% {
    opacity:0;
    border-width:0
  }
}
@-ms-keyframes hint {
  0% {
    opacity:1;
    border-width:1px
  }
  100% {
    opacity:0;
    border-width:0
  }
}
@-o-keyframes hint {
  0% {
    opacity:1;
    border-width:1px
  }
  100% {
    opacity:0;
    border-width:0
  }
}
@keyframes hint {
  0% {
    opacity:1;
    border-width:1px
  }
  100% {
    opacity:0;
    border-width:0
  }
}
@-webkit-keyframes showMark {
  0% {
    -moz-transform:translate(-2%, 0);
    -o-transform:translate(-2%, 0);
    -ms-transform:translate(-2%, 0);
    -webkit-transform:translate(-2%, 0);
    transform:translate(-2%, 0);
    opacity:0
  }
  100% {
    -moz-transform:translate(0, 0);
    -o-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    opacity:1
  }
}
@-moz-keyframes showMark {
  0% {
    -moz-transform:translate(-2%, 0);
    -o-transform:translate(-2%, 0);
    -ms-transform:translate(-2%, 0);
    -webkit-transform:translate(-2%, 0);
    transform:translate(-2%, 0);
    opacity:0
  }
  100% {
    -moz-transform:translate(0, 0);
    -o-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    opacity:1
  }
}
@-ms-keyframes showMark {
  0% {
    -moz-transform:translate(-2%, 0);
    -o-transform:translate(-2%, 0);
    -ms-transform:translate(-2%, 0);
    -webkit-transform:translate(-2%, 0);
    transform:translate(-2%, 0);
    opacity:0
  }
  100% {
    -moz-transform:translate(0, 0);
    -o-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    opacity:1
  }
}
@-o-keyframes showMark {
  0% {
    -moz-transform:translate(-2%, 0);
    -o-transform:translate(-2%, 0);
    -ms-transform:translate(-2%, 0);
    -webkit-transform:translate(-2%, 0);
    transform:translate(-2%, 0);
    opacity:0
  }
  100% {
    -moz-transform:translate(0, 0);
    -o-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    opacity:1
  }
}
@keyframes showMark {
  0% {
    -moz-transform:translate(-2%, 0);
    -o-transform:translate(-2%, 0);
    -ms-transform:translate(-2%, 0);
    -webkit-transform:translate(-2%, 0);
    transform:translate(-2%, 0);
    opacity:0
  }
  100% {
    -moz-transform:translate(0, 0);
    -o-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    opacity:1
  }
}
@font-face {
   font-family:ROGFonts;
 src:local(ROGFonts),
 local(ROGFonts),
 url(https://dlcdnwebimgs.stzgcm.com/files/media/C36322DF-3723-4BDE-820E-D69E5E52940B/font/ROGFonts-Regular_PL.otf?#iefix) format("opentype"),
 url(../font/rogfonts-regular_es.woff2) format("woff2"),
 url(../font/rogfonts-regular_es.woff) format("woff"),
 url(../font/rogfonts-regular_es.ttf) format("truetype");  font-weight:normal;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:'TradeGothicLTPro';
  src:url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap
}
#hd {
  font-size:16px
}
#hd h1 {
  font-family:"TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-size:6vw;
  font-weight:bold;
  margin-bottom:0
}
#hd h2 {
  font-family:"TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-size:3.75em;
  line-height:1;
  color:#ffffff !important;
  letter-spacing:.018em;
  margin-bottom:.25em;
  text-transform:uppercase;
  word-break:normal;
  word-wrap:normal
}
#hd h3 {
  font-family:"TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-size:2.25em;
  line-height:1;
  color:#ffffff;
  margin-bottom:.5em
}
#hd h4,
#hd .h4 {
  font-family:"Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-size:1.7em;
  font-weight:bold;
  line-height:1.25;
  margin-bottom:.5em;
  color:#ffffff
}
#hd h5 {
  font-family:"Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-size:1.125em;
  font-weight:300;
  color:#ffffff;
  margin:5px 0 10px
}
#hd p,
#hd small,
#hd a,
#hd li {
  font-family:"Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif
}
#hd p {
  font-size:1em;
  line-height:1.75;
  font-weight:400
}
#hd p.txt-larger {
  font-size:1.25em
}
#hd b,
#hd strong {
  font-weight:bold
}
#hd small {
  font-size:.875em;
  font-weight:400;
  letter-spacing:0.5px
}
#hd .align-center {
  text-align:center
}
#hd .align-left {
  text-align:left
}
#hd .align-right {
  text-align:right
}
#hd .align-italic {
  font-style:italic
}
#hd a.txt-link {
  display:inline-block;
  text-decoration:underline;
  font-weight:400;
  margin-top:.5em
}
#hd a.txt-link:hover {
  color:white
}
#hd .color-primary {
  color:#67cfff
}
#hd .color-grey {
  color:#aaa
}
#hd .color-rog {
  color:#f51928
}
#hd .color-strix {
  color:#f5197b
}
#hd .color-tuf {
  color:#ff9e1b
}
#hd .color-proart {
  color:#c9a87f
}
#hd .color-white {
  color:white
}
#hd .hd-uppercase {
  text-transform:uppercase
}
#hd .font-rog {
  font-family:"ROGFonts","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif
}
@media screen and (min-width: 2560px) {
  #hd {
    font-size:20px
  }
}
@media screen and (min-width: 3000px) {
  #hd {
    font-size:28px
  }
}
@media screen and (max-width: 1440px) {
  #hd h2 {
    font-size:3em
  }
  #hd h4,
  #hd .h4 {
    font-size:1.25em
  }
}
@media screen and (max-width: 1280px) {
  #hd h3 {
    font-size:1.75em
  }
  #hd p.txt-larger {
    font-size:1.125em
  }
}
@media screen and (max-width: 1024px) {
  #hd h1 {
    font-size:3em
  }
  #hd h2 {
    font-size:2.75em
  }
  #hd small {
    font-size:.75em
  }
}
@media screen and (max-width: 768px) {
  #hd h1 {
    font-size:2.5em
  }
  #hd h2 {
    font-size:2.15em
  }
  #hd h4,
  #hd .h4 {
    font-size:1.125em
  }
  #hd p {
    line-height:1.5
  }
  #hd p.txt-larger {
    font-size:1em
  }
}
@media screen and (max-width: 480px) {
  #hd h2 {
    font-size:1.875em
  }
  #hd h3 {
    font-size:1.5em;
    margin-bottom:10px
  }
  #hd h4,
  #hd .h4 {
    font-size:1.1em;
    margin-bottom:10px
  }
  #hd h5 {
    font-size:14px
  }
}
#hd .w95 {
  width:94%;
  margin:0 auto;
  position:relative
}
#hd .hd-w800 {
  max-width:800px;
  margin-left:auto;
  margin-right:auto
}
#hd .hd-w900 {
  width:80%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto
}
#hd .hd-w1000 {
  max-width:1000px;
  margin-left:auto;
  margin-right:auto
}
#hd .hd-w1000,
#hd .hd-w1100,
#hd .hd-w1200,
#hd .hd-w1300,
#hd .hd-w1400,
#hd .hd-w1600 {
  width:90%;
  margin:0 auto;
  position:relative
}
#hd .hd-w1000 {
  max-width:1000px
}
#hd .hd-w1100 {
  max-width:1100px
}
#hd .hd-w1200 {
  max-width:1200px
}
#hd .hd-w1300 {
  max-width:1300px
}
#hd .hd-w1400 {
  max-width:1400px
}
#hd .hd-w1600 {
  max-width:1600px
}
#hd .hd-col20 {
  width:20%
}
#hd .hd-col25 {
  width:25%
}
#hd .hd-col33 {
  width:33.3333%
}
#hd .hd-col35 {
  width:35%
}
#hd .hd-col40 {
  width:40%
}
#hd .hd-col45 {
  width:45%
}
#hd .hd-col50 {
  width:50%
}
#hd .hd-col55 {
  width:55%
}
#hd .hd-col60 {
  width:60%
}
#hd .hd-col65 {
  width:65%
}
#hd .hd-col66 {
  width:66.6666%
}
#hd .hd-col70 {
  width:70%
}
#hd .hd-col75 {
  width:75%
}
#hd .hd-col80 {
  width:80%
}
#hd .hd-col100 {
  width:100%
}
#hd .ib-top {
  display:inline-block;
  vertical-align:top
}
#hd .ib-bottom {
  display:inline-block;
  vertical-align:bottom
}
#hd .flex-wrap {
  display:flex;
  flex-wrap:wrap
}
#hd .flex-nowrap {
  display:flex;
  flex-wrap:nowrap
}
#hd .align-items-center {
  align-items:center
}
#hd .align-items-start {
  align-items:flex-start
}
#hd .align-items-end {
  align-items:flex-end
}
#hd .justify-content-center {
  justify-content:center
}
#hd .justify-content-start {
  justify-content:flex-start
}
#hd .justify-content-end {
  justify-content:flex-end
}
#hd .justify-content-between {
  justify-content:space-between
}
#hd .justify-content-around {
  justify-content:space-around
}
#hd .flex-row-reverse {
  flex-direction:row-reverse
}
#hd .hd-d-none {
  display:none
}
#hd .hd-d-block {
  display:block
}
#hd .hd-d-ib {
  display:inline-block
}
#hd .mx-auto {
  margin-left:auto;
  margin-right:auto
}
@media screen and (min-width: 2560px) {
  #hd .hd-w1000 {
    max-width:1300px
  }
  #hd .hd-w1100 {
    max-width:1500px
  }
  #hd .hd-w1200 {
    max-width:1600px
  }
  #hd .hd-w1366 {
    max-width:1900px
  }
  #hd .hd-w1400 {
    max-width:1800px
  }
  #hd .hd-w1600 {
    width:90%;
    max-width:2000px
  }
}
@media screen and (min-width: 3000px) {
  #hd .hd-w1000 {
    max-width:1800px
  }
  #hd .hd-w1100 {
    max-width:2000px
  }
  #hd .hd-w1200 {
    max-width:2560px
  }
  #hd .hd-w1366 {
    max-width:2900px
  }
  #hd .hd-w1400 {
    max-width:2700px
  }
  #hd .hd-w1600 {
    width:90%;
    max-width:3000px
  }
}
@media screen and (max-width: 1024px) {
  #hd .hd-d-1024-none {
    display:none
  }
  #hd .hd-d-1024-block {
    display:block
  }
  #hd .hd-d-1024-inline-block {
    display:inline-block
  }
  #hd .hd-w900 {
    width:90%
  }
}
@media screen and (max-width: 1023px) {
  #hd .hd-d-1023-none {
    display:none
  }
  #hd .hd-d-1023-block {
    display:block
  }
  #hd .hd-d-1023-inline-block {
    display:inline-block
  }
}
@media screen and (max-width: 768px) {
  #hd .hd-d-768-none {
    display:none
  }
  #hd .hd-d-768-block {
    display:block
  }
}
@media screen and (max-width: 620px) {
  #hd .hd-d-620-none {
    display:none
  }
  #hd .hd-d-620-block {
    display:block
  }
}
@media screen and (max-width: 480px) {
  #hd .hd-d-480-none {
    display:none
  }
  #hd .hd-d-480-block {
    display:block
  }
}
#hd .hd-icon-plus {
  display:inline-block;
  vertical-align:top;
  width:1.25em;
  height:1.25em;
  border-radius:1em;
  border:1px solid #02aee5;
  margin:.125em .5em -.125em 0;
  position:relative
}
#hd .hd-icon-plus:before,
#hd .hd-icon-plus:after {
  content:'';
  display:block;
  width:.65em;
  height:1px;
  background:#02aee5;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto
}
#hd .hd-icon-plus:after {
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg)
}
#hd .hd-active>.hd-icon-plus:after {
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg)
}
#hd .tab-list {
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:flex-end;
  justify-content:flex-start;
  margin:0 auto 2em
}
#hd .tab-list li {
  font-family:"TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-size:2.25em;
  font-weight:bold;
  line-height:1;
  padding:.25em .25em 0;
  position:relative;
  cursor:pointer
}
#hd .tab-content>div {
  display:none
}
#hd .tab-content>div[aria-current="true"] {
  display:block
}
@media screen and (max-width: 1440px) {
  #hd .tab-list li {
    font-size:2em
  }
}
@media screen and (max-width: 1023px) {
  #hd .tab-list li {
    font-size:1.5em;
    padding:.5em 1em .125em 1em
  }
}
@media screen and (max-width: 768px) {
  #hd .tab-list {
    overflow-x:auto;
    overflow-y:visible
  }
  #hd .tab-list li {
    flex-shrink:0;
    white-space:nowrap
  }
}
#hd .hd-lightbox,
#hd .step-lightbox {
  width:100%;
  height:100vh;
  padding:20px;
  position:fixed;
  top:0;
  left:0;
  display:none;
  z-index:10
}
#hd .hd-lightbox .hd-filter,
#hd .step-lightbox .hd-filter {
  width:100%;
  height:100%;
  background:#000;
  position:absolute;
  top:0;
  left:0
}
#hd .hd-lightbox .hd-box,
#hd .step-lightbox .hd-box {
  width:100%;
  height:100%;
  background:black;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  box-sizing:border-box
}
#hd .hd-lightbox .hd-box iframe,
#hd .step-lightbox .hd-box iframe {
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto
}
#hd .hd-lightbox .hd-close,
#hd .step-lightbox .hd-close {
  width:60px;
  height:60px;
  background:#02aee5;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
  z-index:2
}
#hd .hd-lightbox .hd-close:hover,
#hd .step-lightbox .hd-close:hover {
  background:#67cfff
}
#hd .hd-lightbox .hd-close>span,
#hd .step-lightbox .hd-close>span {
  display:block;
  width:24px;
  height:2px;
  background:white;
  -webkit-border-radius:1.5px;
  -moz-border-radius:1.5px;
  border-radius:1.5px;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto
}
#hd .hd-lightbox .hd-close>span:first-child,
#hd .step-lightbox .hd-close>span:first-child {
  -moz-transform:rotateZ(45deg);
  -o-transform:rotateZ(45deg);
  -ms-transform:rotateZ(45deg);
  -webkit-transform:rotateZ(45deg);
  transform:rotateZ(45deg)
}
#hd .hd-lightbox .hd-close>span:last-child,
#hd .step-lightbox .hd-close>span:last-child {
  -moz-transform:rotateZ(-45deg);
  -o-transform:rotateZ(-45deg);
  -ms-transform:rotateZ(-45deg);
  -webkit-transform:rotateZ(-45deg);
  transform:rotateZ(-45deg)
}
#hd .step-lightbox img {
  width:1024px;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto
}
#hd .step-lightbox .hd-close {
  background:#02aee5
}
#hd .step-lightbox .hd-close:hover {
  background:#4d4e4f
}
@media screen and (max-width: 1024px) {
  #hd .hd-lightbox .hd-close,
  #hd .step-lightbox .hd-close {
    width:40px;
    height:40px;
    top:16px;
    right:16px
  }
  #hd .hd-lightbox .hd-close>span,
  #hd .step-lightbox .hd-close>span {
    width:20px;
    height:2px
  }
}
#hd .swiper-container {
  position:relative;
  overflow:hidden
}
#hd .swiper-button-prev,
#hd .swiper-button-next {
  width:44px;
  height:44px;
  color:#aaa;
  border-radius:50%;
  margin:0 0 3em;
  -moz-transform:translate(0, -50%);
  -o-transform:translate(0, -50%);
  -ms-transform:translate(0, -50%);
  -webkit-transform:translate(0, -50%);
  transform:translate(0, -50%);
  opacity:1;
  -moz-transition:all 0.25s ease;
  -o-transition:all 0.25s ease;
  -webkit-transition:all 0.25s ease;
  transition:all 0.25s ease
}
#hd .swiper-button-prev:after,
#hd .swiper-button-next:after {
  font-size:1.5em;
  font-weight:bold
}
#hd .swiper-button-prev:hover,
#hd .swiper-button-prev:focus-visible,
#hd .swiper-button-next:hover,
#hd .swiper-button-next:focus-visible {
  color:white
}
#hd .swiper-button-prev:active,
#hd .swiper-button-next:active {
  -moz-transform:translateY(-50%) scale(0.9);
  -o-transform:translateY(-50%) scale(0.9);
  -ms-transform:translateY(-50%) scale(0.9);
  -webkit-transform:translateY(-50%) scale(0.9);
  transform:translateY(-50%) scale(0.9)
}
#hd .swiper-button-prev.swiper-button-disabled,
#hd .swiper-button-next.swiper-button-disabled {
  opacity:0;
  pointer-events:none
}
#hd .swiper-button-prev:after {
  margin-right:.125em
}
#hd .swiper-button-next:after {
  margin-left:.125em
}
#hd .swiper-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin:1em auto
}
#hd .swiper-pagination {
  width:auto;
  max-width:calc(100% - 2.5em);
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  margin-right:.5em;
  position:relative;
  top:0;
  left:0;
  right:0
}
#hd .swiper-pagination-bullet {
  width:166px;
  height:4px;
  border-radius:0;
  margin:0 .25em;
  border:1px solid rgba(255,255,255,0.5);
  background:black;
  opacity:1;
  position:relative
}
#hd .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  content:'';
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:white;
  transform-origin:0 0;
  -webkit-animation-delay:0s;
  -webkit-animation-duration:3.6s;
  -webkit-animation-name:dotCounter;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count:1;
  -webkit-animation-fill-mode:both;
  -moz-animation-delay:0s;
  -moz-animation-duration:3.6s;
  -moz-animation-name:dotCounter;
  -moz-animation-timing-function:linear;
  -moz-animation-iteration-count:1;
  -moz-animation-fill-mode:both;
  -o-animation-delay:0s;
  -o-animation-duration:3.6s;
  -o-animation-name:dotCounter;
  -o-animation-timing-function:linear;
  -o-animation-iteration-count:1;
  -o-animation-fill-mode:both;
  animation-delay:0s;
  animation-duration:3.6s;
  animation-name:dotCounter;
  animation-timing-function:linear;
  animation-iteration-count:1;
  animation-fill-mode:both
}
#hd .swiper-controls.is-paused .swiper-pagination-bullet:after {
  animation-play-state:paused
}
#hd .swiper-controls.is-paused .hd-play {
  display:block
}
#hd .swiper-controls.is-paused .hd-pause {
  display:none
}
#hd .swiper-control {
  flex-shrink:0;
  position:relative;
  z-index:2
}
#hd .swiper-control .hd-play,
#hd .swiper-control .hd-pause {
  font-size:1em;
  width:2em;
  height:2em;
  position:relative
}
#hd .swiper-control .hd-play {
  display:none
}
#hd .swiper-control .hd-play:before {
  content:'';
  display:block;
  width:0;
  height:0;
  border-style:solid;
  border-width:.5em 0 .5em .75em;
  border-color:transparent transparent transparent white;
  position:absolute;
  top:50%;
  left:50%;
  -moz-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%)
}
#hd .swiper-control .hd-pause:before,
#hd .swiper-control .hd-pause:after {
  content:'';
  width:.3em;
  height:.875em;
  background:white;
  position:absolute;
  top:50%;
  left:50%;
  -moz-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%)
}
#hd .swiper-control .hd-pause:before {
  margin-left:-.25em
}
#hd .swiper-control .hd-pause:after {
  margin-left:.25em
}
@media screen and (max-width: 1280px) {
  #hd .swiper-pagination-bullet {
    width:100px
  }
}
@media screen and (max-width: 1024px) {
  #hd .swiper-button-prev,
  #hd .swiper-button-next {
    width:3.5em;
    height:3.5em
  }
  #hd .swiper-button-prev:after,
  #hd .swiper-button-next:after {
    font-size:2em
  }
  #hd .swiper-pagination-bullet {
    width:80px
  }
}
@media screen and (max-width: 768px) {
  #hd .swiper-button-prev,
  #hd .swiper-button-next {
    width:3.14em;
    height:3.14em;
    margin:0
  }
  #hd .swiper-button-prev:after,
  #hd .swiper-button-next:after {
    font-size:2em
  }
  #hd .swiper-controls {
    position:relative;
    margin:.5em 0
  }
  #hd .swiper-pagination-bullet {
    width:50px
  }
}
@media screen and (max-width: 480px) {
  #hd .swiper-button-prev,
  #hd .swiper-button-next {
    display:none
  }
}
#hd .hd-scroller {
  width:100%;
  position:relative
}
#hd .hd-aside {
  position:absolute;
  height:100%;
  top:0;
  right:3.5%;
  z-index:3
}
#hd .hd-aside .aside-container {
  display:flex;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  height:calc(90vh - 100px);
  margin-top:0;
  margin-left:auto;
  position:sticky;
  -webkit-position:sticky;
  top:100px;
  right:0;
  pointer-events:none
}
#hd .hd-aside ul {
  flex-shrink:0
}
#hd .hd-aside li {
  display:none
}
#hd .hd-aside li[aria-current="true"] {
  display:block
}
#hd .hd-aside p {
  font-size:1.25em;
  font-weight:400;
  line-height:.75;
  letter-spacing:.18em;
  pointer-events:all;
  flex-shrink:0;
  text-shadow:0 0 2px black, 0 0 5px black
}
#hd .hd-aside p span {
  display:inline-block;
  font:inherit;
  margin-bottom:1.25em;
  padding-right:0.05em
}
#hd .hd-aside p span:after {
  content:'';
  display:inline-block;
  width:2px;
  height:5em;
  background:white;
  margin-top:1.25em
}
#hd .hd-aside p.color-grey span:after {
  background:#aaa
}
@media screen and (max-width: 1280px) {
  #hd .hd-aside p {
    font-size:1.25em
  }
}
@media screen and (max-width: 1024px) {
  #hd .hd-aside .aside-container {
    right:2%
  }
  #hd .hd-aside p {
    font-size:1em
  }
}
@media screen and (max-width: 768px) {
  #hd .hd-aside {
    display:none
  }
}
body {
  background:#000000
}
#hd header {
  width:100%;
  position:fixed;
  top:0;
  left:0;
  background:#171717;
  z-index:9
}
#hd header .logo-rog {
  width:160px;
  margin:10px auto 10px 0
}
#hd header .logo-rog img {
  width:100%
}
#hd header .menu {
  text-align:center
}
#hd header .menu a {
  font-size:1em;
  font-weight:400;
  letter-spacing:.018em;
  color:white;
  padding:.25em 1em;
  cursor:pointer;
  -moz-transition:color 0.25s ease;
  -o-transition:color 0.25s ease;
  -webkit-transition:color 0.25s ease;
  transition:color 0.25s ease
}
#hd header .menu a:hover {
  color:#02aee5
}
#hd header .menu a.hd-active {
  color:#02aee5;
  font-weight:bold;
  cursor:default
}
#hd .hamburger {
  display:none
}
#hd .scroll-up {
  position:fixed;
  right:30px;
  bottom:30px;
  width:45px;
  height:45px;
  background:rgba(255,255,255,0.5) url(../img/backtop.png) center no-repeat;
  border:1px solid #aaa;
  text-align:center;
  cursor:pointer;
  opacity:0;
  z-index:999
}
#hd .scroll-up.hd-show {
  opacity:1
}
#hd .scroll-up:hover {
  background-color:rgba(255,255,255,0.75)
}
#fp-nav ul li:hover a span {
  background:#02aee5
}
#fp-nav ul li:hover a.active span {
  background:#02aee5
}
#fp-nav ul li a.active span {
  background:#02aee5
}
#fp-nav ul li .fp-tooltip {
  color:#02aee5
}
@media screen and (max-width: 1023px) {
  #hd header .menu a {
    padding-left:.5em;
    padding-right:.5em
  }
}
@media screen and (max-width: 768px) {
  #hd .hamburger span,
  #hd .hamburger:before,
  #hd .hamburger:after,
  #hamburger span,
  #hamburger:before,
  #hamburger:after {
    content:'';
    display:block;
    width:24px;
    height:3px;
    background:white;
    border-radius:2px;
    position:absolute;
    top:20px;
    left:0;
    right:0;
    margin:0 auto;
    -moz-transition:all 0.1s ease;
    -o-transition:all 0.1s ease;
    -webkit-transition:all 0.1s ease;
    transition:all 0.1s ease
  }
  #hd header .hd-container {
    width:100%;
    padding-left:5%
  }
  #hd header .logo-rog {
    margin-top:8px;
    margin-bottom:8px
  }
  #hd header .menu {
    display:none;
    width:100%;
    background:#303030;
    position:absolute;
    top:100%;
    left:0;
    z-index:-1
  }
  #hd header .menu a {
    display:block;
    font-size:1em;
    padding:1em 0;
    border-bottom:1px solid #505050
  }
  #hd .hamburger {
    order:3;
    display:block;
    width:46px;
    height:46px;
    background:#02aee5;
    margin-left:1em;
    position:relative;
    cursor:pointer
  }
  #hd .hamburger:before {
    -moz-transform:translate(0, -.5em);
    -o-transform:translate(0, -.5em);
    -ms-transform:translate(0, -.5em);
    -webkit-transform:translate(0, -.5em);
    transform:translate(0, -.5em)
  }
  #hd .hamburger:after {
    -moz-transform:translate(0, .5em);
    -o-transform:translate(0, .5em);
    -ms-transform:translate(0, .5em);
    -webkit-transform:translate(0, .5em);
    transform:translate(0, .5em)
  }
  #hd .hamburger.hd-active:before {
    opacity:1;
    -moz-transform:translate(0, 0) rotate(-45deg);
    -o-transform:translate(0, 0) rotate(-45deg);
    -ms-transform:translate(0, 0) rotate(-45deg);
    -webkit-transform:translate(0, 0) rotate(-45deg);
    transform:translate(0, 0) rotate(-45deg)
  }
  #hd .hamburger.hd-active:after {
    opacity:1;
    -moz-transform:translate(0, 0) rotate(45deg);
    -o-transform:translate(0, 0) rotate(45deg);
    -ms-transform:translate(0, 0) rotate(45deg);
    -webkit-transform:translate(0, 0) rotate(45deg);
    transform:translate(0, 0) rotate(45deg)
  }
  #hd .hamburger.hd-active span {
    opacity:0
  }
  #hd .hamburger.hd-active ~ .menu {
    display:block;
    -webkit-animation-delay:0s;
    -webkit-animation-duration:.4s;
    -webkit-animation-name:fadeInDown;
    -webkit-animation-timing-function:ease;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-delay:0s;
    -moz-animation-duration:.4s;
    -moz-animation-name:fadeInDown;
    -moz-animation-timing-function:ease;
    -moz-animation-iteration-count:1;
    -moz-animation-fill-mode:forwards;
    -o-animation-delay:0s;
    -o-animation-duration:.4s;
    -o-animation-name:fadeInDown;
    -o-animation-timing-function:ease;
    -o-animation-iteration-count:1;
    -o-animation-fill-mode:forwards;
    animation-delay:0s;
    animation-duration:.4s;
    animation-name:fadeInDown;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:forwards
  }
}
@media screen and (max-width: 620px) {
  #fp-nav {
    display:none
  }
}
@media screen and (max-width: 480px) {
  #hd .scroll-up {
    right:10px;
    bottom:10px
  }
}
#hd .cover-container {
  position:relative;
  cursor:pointer
}
#hd .cover-container:hover figure img {
  opacity:.75
}
#hd .cover-container.trigger-video:hover .icon-play {
  background:#02aee5;
  opacity:1;
  -moz-transform:scale(1.25, 1.25);
  -o-transform:scale(1.25, 1.25);
  -ms-transform:scale(1.25, 1.25);
  -webkit-transform:scale(1.25, 1.25);
  transform:scale(1.25, 1.25)
}
#hd .cover-container figure {
  width:100%;
  height:0;
  padding-bottom:75%;
  margin-bottom:1em;
  position:relative;
  overflow:hidden;
  -moz-transition:opacity 0.25s ease;
  -o-transition:opacity 0.25s ease;
  -webkit-transition:opacity 0.25s ease;
  transition:opacity 0.25s ease
}
#hd .cover-container figure img {
  width:100%;
  position:absolute;
  top:0;
  left:0;
  -moz-transition:all 0.25s ease;
  -o-transition:all 0.25s ease;
  -webkit-transition:all 0.25s ease;
  transition:all 0.25s ease
}
#hd .cover-container .icon-play {
  width:50px;
  height:50px;
  border-radius:50%;
  background:#aaa;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  opacity:.5;
  -moz-transition:all 0.25s ease;
  -o-transition:all 0.25s ease;
  -webkit-transition:all 0.25s ease;
  transition:all 0.25s ease
}
#hd .cover-container .icon-play:before {
  content:'';
  display:block;
  width:0;
  height:0;
  border-style:solid;
  border-width:12px 0 12px 15px;
  border-color:transparent transparent transparent #ffffff;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:5px;
  margin:auto
}
#hd .trigger-video {
  cursor:pointer
}
#hd .vid-control {
  width:44px;
  height:44px;
  background:none;
  border:none;
  box-shadow:none;
  position:absolute;
  right:0;
  bottom:0;
  -moz-transition:all 0.3s ease-out;
  -o-transition:all 0.3s ease-out;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
  z-index:2
}
#hd .vid-control img,
#hd .vid-control svg {
  width:40%;
  height:40%
}
#hd .vid-control .play {
  display:none
}
#hd .vid-control.hd-active .play,
#hd .vid-control[aria-pressed="true"] .play {
  display:block
}
#hd .vid-control.hd-active .pause,
#hd .vid-control[aria-pressed="true"] .pause {
  display:none
}
#hd .gif-container {
  position:relative;
  overflow:hidden
}
#hd .gif-container img.hd-d-none {
  position:absolute !important;
  top:0;
  left:0
}
#hd .gif-container .vid-control img {
  margin:auto !important
}
#hd .gif-container.is-reduced-motion img.hd-d-none {
  display:block !important
}
#hd {
  padding-top:46px
}
#hd header {
  width:100%;
  position:fixed;
  top:0;
  left:0;
  background:black;
  z-index:9
}
#hd header .logo-asus {
  width:130px;
  margin:10px auto 10px 0
}
#hd header .logo-asus img {
  width:100%
}
#hd header .menu {
  text-align:center
}
#hd header .menu a {
  font-size:1em;
  font-weight:600;
  letter-spacing:.018em;
  color:white;
  padding:.25em 1em;
  -moz-transition:color 0.25s ease;
  -o-transition:color 0.25s ease;
  -webkit-transition:color 0.25s ease;
  transition:color 0.25s ease
}
#hd header .menu a.hd-active {
  color:#02aee5
}
#hd header .menu a:hover {
  color:#02aee5
}
#hamburger {
  display:none
}
@media screen and (max-width: 1023px) {
  #hd header .menu a {
    padding-left:.5em;
    padding-right:.5em
  }
}
@media screen and (max-width: 768px) {
  #hd header .hd-container {
    width:100%;
    padding-left:5%
  }
  #hd header .logo-rog {
    margin-top:8px;
    margin-bottom:8px
  }
  #hd header .menu {
    display:none;
    width:100%;
    background:#303030;
    position:absolute;
    top:100%;
    left:0;
    z-index:-1
  }
  #hd header .menu a {
    display:block;
    font-size:1em;
    padding:1em 0;
    border-bottom:1px solid #505050
  }
  #hd .hamburger span,
  #hd .hamburger:before,
  #hd .hamburger:after,
  #hamburger span,
  #hamburger:before,
  #hamburger:after {
    content:'';
    display:block;
    width:24px;
    height:3px;
    background:white;
    border-radius:2px;
    position:absolute;
    top:20px;
    left:0;
    right:0;
    margin:0 auto;
    -moz-transition:all 0.1s ease;
    -o-transition:all 0.1s ease;
    -webkit-transition:all 0.1s ease;
    transition:all 0.1s ease
  }
  #hamburger {
    order:3;
    display:block;
    width:46px;
    height:46px;
    background:#02aee5;
    margin-left:1em;
    position:relative;
    cursor:pointer
  }
  #hamburger:before {
    -moz-transform:translate(0, -.5em);
    -o-transform:translate(0, -.5em);
    -ms-transform:translate(0, -.5em);
    -webkit-transform:translate(0, -.5em);
    transform:translate(0, -.5em)
  }
  #hamburger:after {
    -moz-transform:translate(0, .5em);
    -o-transform:translate(0, .5em);
    -ms-transform:translate(0, .5em);
    -webkit-transform:translate(0, .5em);
    transform:translate(0, .5em)
  }
  #hamburger.hd-active:before {
    opacity:1;

    -moz-transform:translate(0, 0) rotate(-45deg);
    -o-transform:translate(0, 0) rotate(-45deg);
    -ms-transform:translate(0, 0) rotate(-45deg);
    -webkit-transform:translate(0, 0) rotate(-45deg);
    transform:translate(0, 0) rotate(-45deg)
  }
  #hamburger.hd-active:after {
    opacity:1;
    -moz-transform:translate(0, 0) rotate(45deg);
    -o-transform:translate(0, 0) rotate(45deg);
    -ms-transform:translate(0, 0) rotate(45deg);
    -webkit-transform:translate(0, 0) rotate(45deg);
    transform:translate(0, 0) rotate(45deg)
  }
  #hamburger.hd-active span {
    opacity:0
  }
  #hamburger.hd-active ~ .menu {
    display:block;
    -webkit-animation-delay:0s;
    -webkit-animation-duration:.4s;
    -webkit-animation-name:fadeInDown;
    -webkit-animation-timing-function:ease;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-delay:0s;
    -moz-animation-duration:.4s;
    -moz-animation-name:fadeInDown;
    -moz-animation-timing-function:ease;
    -moz-animation-iteration-count:1;
    -moz-animation-fill-mode:forwards;
    -o-animation-delay:0s;
    -o-animation-duration:.4s;
    -o-animation-name:fadeInDown;
    -o-animation-timing-function:ease;
    -o-animation-iteration-count:1;
    -o-animation-fill-mode:forwards;
    animation-delay:0s;
    animation-duration:.4s;
    animation-name:fadeInDown;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:forwards
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-banner picture {
    display:block;
    position:relative;
    overflow:hidden
  }
  #hd .sec-banner picture img {
    width:130%;
    max-width:none !important;
    margin-left:-15%
  }
}
#hd .sec-kv {
  height:200vh;
  position:relative
}
#hd .sec-kv .hd-sticky {
  position:sticky;
  top:46px
}
#hd .sec-kv .hd-intro {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  padding:1em 0 4em;
  z-index:2;
  opacity:0;
  -moz-transition:opacity 0.8s 0s ease;
  -o-transition:opacity 0.8s 0s ease;
  -webkit-transition:opacity 0.8s 0s ease;
  transition:opacity 0.8s 0s ease
}
#hd .sec-kv .hd-intro h1,
#hd .sec-kv .hd-intro p {
  opacity:0
}
#hd .sec-kv .hd-intro.is-animated {
  opacity:1 !important;
  -moz-transition:opacity 0.8s 0.8s ease;
  -o-transition:opacity 0.8s 0.8s ease;
  -webkit-transition:opacity 0.8s 0.8s ease;
  transition:opacity 0.8s 0.8s ease
}
#hd .sec-kv .hd-intro.is-animated h1 {
  -webkit-animation-delay:.6s;
  -webkit-animation-duration:.4s;
  -webkit-animation-name:fadeInUp;
  -webkit-animation-timing-function:ease;
  -webkit-animation-iteration-count:1;
  -webkit-animation-fill-mode:both;
  -moz-animation-delay:.6s;
  -moz-animation-duration:.4s;
  -moz-animation-name:fadeInUp;
  -moz-animation-timing-function:ease;
  -moz-animation-iteration-count:1;
  -moz-animation-fill-mode:both;
  -o-animation-delay:.6s;
  -o-animation-duration:.4s;
  -o-animation-name:fadeInUp;
  -o-animation-timing-function:ease;
  -o-animation-iteration-count:1;
  -o-animation-fill-mode:both;
  animation-delay:.6s;
  animation-duration:.4s;
  animation-name:fadeInUp;
  animation-timing-function:ease;
  animation-iteration-count:1;
  animation-fill-mode:both
}
#hd .sec-kv .hd-intro.is-animated p {
  -webkit-animation-delay:.8s;
  -webkit-animation-duration:.4s;
  -webkit-animation-name:fadeInUp;
  -webkit-animation-timing-function:ease;
  -webkit-animation-iteration-count:1;
  -webkit-animation-fill-mode:both;
  -moz-animation-delay:.8s;
  -moz-animation-duration:.4s;
  -moz-animation-name:fadeInUp;
  -moz-animation-timing-function:ease;
  -moz-animation-iteration-count:1;
  -moz-animation-fill-mode:both;
  -o-animation-delay:.8s;
  -o-animation-duration:.4s;
  -o-animation-name:fadeInUp;
  -o-animation-timing-function:ease;
  -o-animation-iteration-count:1;
  -o-animation-fill-mode:both;
  animation-delay:.8s;
  animation-duration:.4s;
  animation-name:fadeInUp;
  animation-timing-function:ease;
  animation-iteration-count:1;
  animation-fill-mode:both
}
#hd .sec-kv .vid-container {
  width:100%;
  height:100vh;
  max-height:80vw;
  position:relative
}
#hd .sec-kv .vid-container:before,
#hd .sec-kv .vid-container:after {
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:8%;
  background-repeat:no-repeat;
  background-size:100% auto;
  position:absolute;
  left:0;
  z-index:2;
  pointer-events:none
}
#hd .sec-kv .vid-container:before {
  background-image:url(../img/vid-top.png);
  background-position:right top;
  top:0
}
#hd .sec-kv .vid-container:after {
  background-image:url(../img/vid-bottom.png);
  background-position:left bottom;
  bottom:0
}
#hd .sec-kv .vid-container video {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  object-fit:cover
}
#hd .sec-kv h1 {
  margin:0 auto .25em;
  text-align:center;
  z-index:3
}
#hd .sec-kv .vid-control {
  bottom:5%;
  z-index:5
}
@media screen and (max-width: 1024px) {
  #hd .sec-kv .hd-intro {
    padding-bottom:2em
  }
  #hd .sec-kv .vid-container:before,
  #hd .sec-kv .vid-container:after {
    background-size:120% auto
  }
}
@media screen and (max-width: 1023px) {
  #hd .sec-kv {
    height:auto
  }
  #hd .sec-kv .hd-sticky {
    position:relative
  }
  #hd .sec-kv .hd-intro {
    position:relative;
    padding-top:4em;
    padding-bottom:2em
  }
  #hd .sec-kv .vid-container {
    height:0;
    padding-bottom:56.25%
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-kv .hd-intro {
    padding-top:2em
  }
  #hd .sec-kv h1 {
    position:relative;
    margin-top:0.25em
  }
  #hd .sec-kv .vid-container {
    clip-path:polygon(0 0, 75% 0, 77.5% 5%, 93.5% 5%, 95% 0, 100% 0, 100% 100%, 20% 100%, 17.25% 92%, 0 92%)
  }
}
@media screen and (max-width: 480px) {
  #hd .sec-kv .vid-container:before,
  #hd .sec-kv .vid-container:after {
    background-size:220% auto
  }
}
#hd .sec-intro {
  padding:4em 0
}
#hd .sec-intro p {
  margin-bottom:2em
}
#hd .sec-intro .hd-col50 {
  padding:0 1em
}
#hd .sec-intro .vid-container {
  width:100%;
  height:0;
  padding-bottom:56.25%;
  position:relative;
  overflow:hidden
}
#hd .sec-intro .vid-container iframe {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0
}
@media screen and (max-width: 480px) {
  #hd .sec-intro {
    padding:3em 0
  }
}
#hd .sec-series {
  padding-top:3em;
  padding-bottom:1px;
  position:relative
}
#hd .sec-series .deco-blocks {
  width:4em;
  margin-left:5%;
  margin-bottom:4em
}
#hd .sec-series:before {
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:10%;
  position:absolute;
  bottom:0;
  left:0;
  pointer-events:none;
  z-index:0
}
#hd .sec-series.bg-rog:before {
  background-color:rgba(245,25,40,0);
  background-image:-moz-linear-gradient(180deg, rgba(245,25,40,0),rgba(245,25,40,0.3));
  background-image:-webkit-linear-gradient(180deg, rgba(245,25,40,0),rgba(245,25,40,0.3));
  background-image:linear-gradient(180deg, rgba(245,25,40,0),rgba(245,25,40,0.3))
}
#hd .sec-series.bg-strix:before,
#hd .sec-series.bg-strix:after {
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:10%;
  position:absolute;
  bottom:0;
  left:0;
  pointer-events:none;
  z-index:0
}
#hd .sec-series.bg-strix:before {
  opacity:0.3;
  background-color:#f5197b;
  background-image:-moz-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:-webkit-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:linear-gradient(90deg, #f5197b,#1c51fd)
}
#hd .sec-series.bg-strix:after {
  background-color:transparent;
  background-image:-moz-linear-gradient(0deg, transparent,#000);
  background-image:-webkit-linear-gradient(0deg, transparent,#000);
  background-image:linear-gradient(0deg, transparent,#000)
}
#hd .sec-series.bg-tuf:before {
  background-color:rgba(255,158,27,0);
  background-image:-moz-linear-gradient(180deg, rgba(255,158,27,0),rgba(255,158,27,0.3));
  background-image:-webkit-linear-gradient(180deg, rgba(255,158,27,0),rgba(255,158,27,0.3));
  background-image:linear-gradient(180deg, rgba(255,158,27,0),rgba(255,158,27,0.3))
}
#hd .sec-series.bg-proart:before {
  background-color:rgba(201,168,127,0);
  background-image:-moz-linear-gradient(180deg, rgba(201,168,127,0),rgba(201,168,127,0.3));
  background-image:-webkit-linear-gradient(180deg, rgba(201,168,127,0),rgba(201,168,127,0.3));
  background-image:linear-gradient(180deg, rgba(201,168,127,0),rgba(201,168,127,0.3))
}
#hd .sec-series.bg-prime:before {
  background-color:rgba(58,232,250,0);
  background-image:-moz-linear-gradient(180deg, rgba(58,232,250,0),rgba(58,232,250,0.3));
  background-image:-webkit-linear-gradient(180deg, rgba(58,232,250,0),rgba(58,232,250,0.3));
  background-image:linear-gradient(180deg, rgba(58,232,250,0),rgba(58,232,250,0.3))
}
#hd .sec-series .hd-container {
  padding-bottom:6em;
  z-index:2
}
#hd .sec-series .tab-list {
  width:100%;
  justify-content:space-between;
  border-bottom:1px solid rgba(170,170,170,0.5);
  margin-bottom:2em
}
#hd .sec-series .tab-list li {
  font-size:1em;
  padding:2em 4%;
  position:relative
}
#hd .sec-series .tab-list li:after {
  content:'';
  width:100%;
  height:1em;
  position:absolute;
  bottom:0;
  left:0;
  border-right:1px solid #aaa;
  opacity:0.5
}
#hd .sec-series .tab-list li:nth-child(1) {
  padding-left:2%
}
#hd .sec-series .tab-list li:nth-child(1) .hd-tag {
  background:#f51928;
  color:black
}
#hd .sec-series .tab-list li:nth-child(2) .hd-tag {
  background:#43107c;
  color:white
}
#hd .sec-series .tab-list li:nth-child(3) .hd-tag {
  background:#ff9e1b;
  color:black
}
#hd .sec-series .tab-list li:nth-child(4) .hd-tag {
  background:#c9a87f;
  color:black
}
#hd .sec-series .tab-list li:nth-child(5) .hd-tag {
  background:#3ae8fa;
  color:black
}
#hd .sec-series .tab-list li:nth-child(3) .hd-img-container img,
#hd .sec-series .tab-list li:nth-child(4) .hd-img-container img {
  height:2.6em
}
#hd .sec-series .tab-list li:last-child {
  padding-right:2%
}
#hd .sec-series .tab-list li:last-child:after {
  display:none
}
#hd .sec-series .tab-list li[aria-current="true"] p {
  color:white
}
#hd .sec-series .tab-list li[aria-current="true"] .hd-img-container img:last-child {
  opacity:1
}
#hd .sec-series .tab-list li.is-animated .hd-tag {
  clip-path:polygon(0 0, 100% 0, calc(100% - 1em) 100%, 0% 100%)
}
#hd .sec-series .tab-list .hd-img-container {
  position:relative
}
#hd .sec-series .tab-list .hd-img-container img {
  width:100%;
  max-width:none !important;
  height:2.25em;
  margin-left:0;
  -o-object-fit:contain;
  object-fit:contain;
  -o-object-position:left bottom;
  object-position:left bottom
}
#hd .sec-series .tab-list .hd-img-container img:last-child {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -moz-transition:opacity 0.25s;
  -o-transition:opacity 0.25s;
  -webkit-transition:opacity 0.25s;
  transition:opacity 0.25s
}
#hd .sec-series .tab-list p {
  font-size:.875em;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:1.125;
  margin-top:1em;
  color:#aaa
}
#hd .sec-series .tab-list .hd-tag {
  font-family:"TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-size:.9em;
  font-weight:bold;
  padding:.25em 1.25em 0 .5em;
  position:absolute;
  top:0;
  left:0;
  clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);
  -moz-transition:all 0.4s ease;
  -o-transition:all 0.4s ease;
  -webkit-transition:all 0.4s ease;
  transition:all 0.4s ease
}
#hd .sec-series .tab-content>div[aria-current="true"] {
  -webkit-animation-delay:0s;
  -webkit-animation-duration:.6s;
  -webkit-animation-name:fadeInUp;
  -webkit-animation-timing-function:ease;
  -webkit-animation-iteration-count:1;
  -webkit-animation-fill-mode:both;
  -moz-animation-delay:0s;
  -moz-animation-duration:.6s;
  -moz-animation-name:fadeInUp;
  -moz-animation-timing-function:ease;
  -moz-animation-iteration-count:1;
  -moz-animation-fill-mode:both;
  -o-animation-delay:0s;
  -o-animation-duration:.6s;
  -o-animation-name:fadeInUp;
  -o-animation-timing-function:ease;
  -o-animation-iteration-count:1;
  -o-animation-fill-mode:both;
  animation-delay:0s;
  animation-duration:.6s;
  animation-name:fadeInUp;
  animation-timing-function:ease;
  animation-iteration-count:1;
  animation-fill-mode:both
}
#hd .sec-series .hd-intro {
  max-width:64em;
  margin:0 auto 4em
}
#hd .sec-series .hd-intro p {
  line-height:1.5
}
#hd .sec-series .swiper-wrapper {
  align-items:stretch
}
#hd .sec-series .swiper-slide {
  height:auto;
  padding:1px
}
#hd .sec-series .swiper-button-prev {
  left:0;
  right:100%;
  margin-left:-60px
}
#hd .sec-series .swiper-button-next {
  right:0;
  left:100%;
  margin-left:16px
}
#hd .sec-series .pd-item {
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0 2em 2em;
  position:relative;
  border-top:14px solid #aaa
}
#hd .sec-series .pd-item:before {
  content:'';
  position:absolute;
  inset:0;
  background:white;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 2em), calc(100% - 2em) 100%, 0 100%, 0 0, 1px 1px, 1px calc(100% - 1px), calc(100% - 2em - 0.41px) calc(100% - 1px), calc(100% - 1px) calc(100% - 2em - 0.41px), calc(100% - 1px) 0, 0 0)
}
#hd .sec-series .pd-item img {
  aspect-ratio:800/464
}
#hd .sec-series .list-ksp {
  margin:16px 0
}
#hd .sec-series .list-ksp>li {
  font-size:1.3em;
  line-height:1.125;
  padding-left:1em;
  margin-bottom:0.5em;
  position:relative
}
#hd .sec-series .list-ksp>li:before {
  content:'';
  display:block;
  width:0.5em;
  height:1em;
  background:#aaa;
  position:absolute;
  top:0;
  left:0
}
#hd .sec-series .list-ksp p {
  line-height:1.25;
  margin-left:-1em;
  margin-top:0.25em;
  margin-bottom:1em
}
#hd .sec-series .title-more {
  font-size:1em;
  margin-top:auto;
  margin-bottom:0.5em;
  position:relative
}
#hd .sec-series .title-more:after {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin-left:0.25em;
  width:0;
  height:0;
  border-style:solid;
  border-width:0.2em 0 0.2em .3em;
  border-color:transparent transparent transparent #aaa
}
#hd .sec-series .hd-btn {
  display:inline-block;
  font-weight:normal;
  color:white;
  padding:.25em 1em;
  margin-right:16px;
  position:relative;
  z-index:2
}
#hd .sec-series .hd-btn:before,
#hd .sec-series .hd-btn:after {
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  clip-path:polygon(0.6em 0.125em, calc(100% - 1.5em) 0.125em, calc(100% - 1.125em) 0%, 100% 0, 100% 100%, 0 100%, 0 0.5em);
  z-index:-1
}
#hd .sec-series .hd-btn:before {
  width:calc(100% + 2px);
  height:calc(100% + 2px);
  margin:-1px;
  background:white
}
#hd .sec-series .hd-btn:after {
  width:100%;
  height:100%;
  background:black
}
#hd .sec-series .hd-btn:hover,
#hd .sec-series .hd-btn:focus-visible {
  color:black
}
#hd .sec-series .hd-btn:hover:after,
#hd .sec-series .hd-btn:focus-visible:after {
  background:#aaa
}
#hd #pageContent-tab-rog .pd-item {
  border-top-color:#f51928
}
#hd #pageContent-tab-rog h4 {
  font-family:"ROGFonts","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-weight:normal
}
#hd #pageContent-tab-rog .list-ksp>li:before {
  background:#f51928
}
#hd #pageContent-tab-rog .hd-btn {
  font-family:"ROGFonts","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif
}
#hd #pageContent-tab-rog .hd-btn:hover,
#hd #pageContent-tab-rog .hd-btn:focus-visible {
  color:black
}
#hd #pageContent-tab-rog .hd-btn:hover:before,
#hd #pageContent-tab-rog .hd-btn:focus-visible:before {
  background:#f51928
}
#hd #pageContent-tab-rog .hd-btn:hover:after,
#hd #pageContent-tab-rog .hd-btn:focus-visible:after {
  background:#f51928
}
#hd #pageContent-tab-strix .pd-item {
  border-top-color:#f5197b
}
#hd #pageContent-tab-strix .pd-item:after {
  content:'';
  display:block;
  width:100%;
  height:14px;
  background-color:#f5197b;
  background-image:-moz-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:-webkit-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:linear-gradient(90deg, #f5197b,#1c51fd);
  position:absolute;
  left:0;
  bottom:100%
}
#hd #pageContent-tab-strix h4 {
  font-family:"ROGFonts","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-weight:normal
}
#hd #pageContent-tab-strix .list-ksp>li:before {
  background:#f5197b
}
#hd #pageContent-tab-strix .hd-btn {
  font-family:"ROGFonts","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif
}
#hd #pageContent-tab-strix .hd-btn:hover,
#hd #pageContent-tab-strix .hd-btn:focus-visible {
  color:black
}
#hd #pageContent-tab-strix .hd-btn:hover:before,
#hd #pageContent-tab-strix .hd-btn:focus-visible:before {
  background:#f5197b
}
#hd #pageContent-tab-strix .hd-btn:hover:after,
#hd #pageContent-tab-strix .hd-btn:focus-visible:after {
  background:#f5197b
}
#hd #pageContent-tab-tuf .pd-item {
  border-top-color:#ff9e1b
}
#hd #pageContent-tab-tuf h4 {
  font-family:"KairosSansCondensedBold","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-weight:normal
}
#hd #pageContent-tab-tuf .list-ksp>li:before {
  background:#ff9e1b
}
#hd #pageContent-tab-tuf .hd-btn {
  font-family:"KairosSansCondensedBold","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif
}
#hd #pageContent-tab-tuf .hd-btn:hover,
#hd #pageContent-tab-tuf .hd-btn:focus-visible {
  color:black
}
#hd #pageContent-tab-tuf .hd-btn:hover:before,
#hd #pageContent-tab-tuf .hd-btn:focus-visible:before {
  background:#ff9e1b
}
#hd #pageContent-tab-tuf .hd-btn:hover:after,
#hd #pageContent-tab-tuf .hd-btn:focus-visible:after {
  background:#ff9e1b
}
#hd #pageContent-tab-proart .pd-item,
#hd #pageContent-tab-prime .pd-item {
  border-top-color:#c9a87f
}
#hd #pageContent-tab-proart h4,
#hd #pageContent-tab-prime h4 {
  font-family:"CenturyGothicRegular","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  font-weight:normal;
  margin-bottom:1em
}
#hd #pageContent-tab-proart .list-ksp>li:before,
#hd #pageContent-tab-prime .list-ksp>li:before {
  background:#c9a87f
}
#hd #pageContent-tab-proart .hd-btn,
#hd #pageContent-tab-prime .hd-btn {
  font-family:"CenturyGothicRegular","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  padding:.5em 1em;
  background:#c9a87f;
  color:black
}
#hd #pageContent-tab-proart .hd-btn:before,
#hd #pageContent-tab-prime .hd-btn:before,
#hd #pageContent-tab-proart .hd-btn:after,
#hd #pageContent-tab-prime .hd-btn:after {
  display:none
}
#hd #pageContent-tab-proart .hd-btn:hover,
#hd #pageContent-tab-prime .hd-btn:hover,
#hd #pageContent-tab-proart .hd-btn:focus-visible,
#hd #pageContent-tab-prime .hd-btn:focus-visible {
  background:#d6d6d6
}
#hd #pageContent-tab-proart .pd-wrapper,
#hd #pageContent-tab-prime .pd-wrapper {
  max-width:70em;
  margin:0 auto
}
#hd #pageContent-tab-proart .hd-content,
#hd #pageContent-tab-prime .hd-content {
  padding:0 5%
}
#hd #pageContent-tab-proart .hd-content .txt-larger,
#hd #pageContent-tab-prime .hd-content .txt-larger {
  font-size:1.25em
}
#hd #pageContent-tab-proart figure,
#hd #pageContent-tab-prime figure {
  margin-right:-5%
}
#hd #pageContent-tab-prime .pd-item {
  border-top-color:#3ae8fa
}
#hd #pageContent-tab-prime h4 {
  font-family:"TTNormsProMedium","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif
}
#hd #pageContent-tab-prime .list-ksp>li:before {
  background:#3ae8fa
}
#hd #pageContent-tab-prime .hd-btn {
  font-family:"TTNormsProMedium","TradeGothicLTPro","Xolonium","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  background:#3ae8fa
}
#hd #pageContent-download-spec {
  display:block;
  width:24em;
  font-size:1.5em;
  text-transform:uppercase;
  color:white;
  text-align:center;
  background:#f51928;
  padding:.5em 1em;
  border-radius:2em;
  border:4px solid black;
  margin:0 auto -1.25em;
  -moz-transition:border-color 0.25s;
  -o-transition:border-color 0.25s;
  -webkit-transition:border-color 0.25s;
  transition:border-color 0.25s;
  position:relative;
  z-index:2
}
#hd #pageContent-download-spec img {
  display:inline-block;
  width:0.5em;
  margin-left:0.25em
}
#hd #pageContent-download-spec:hover,
#hd #pageContent-download-spec:focus-visible {
  border-color:#aaa
}
@media screen and (max-width: 1440px) {
  #hd .sec-series .hd-w1400 {
    max-width:1200px
  }
  #hd .sec-series .tab-list .hd-img-container img {
    height:1.75em
  }
  #hd .sec-series .tab-list li {
    padding:1.75em 3% 1.5em
  }
  #hd .sec-series .tab-list li:nth-child(3) .hd-img-container img,
  #hd .sec-series .tab-list li:nth-child(4) .hd-img-container img {
    height:2em
  }
}
@media screen and (max-width: 1280px) {
  #hd .sec-series .hd-container {
    padding-right:3%
  }
  #hd .sec-series .hd-intro {
    margin-bottom:2em
  }
  #hd .sec-series .swiper-button-prev {
    margin-left:-44px
  }
  #hd .sec-series .swiper-button-next {
    margin-left:0
  }
  #hd .sec-series .swiper-pagination {
    justify-content:center;
    margin:2em auto
  }
  #hd .sec-series .swiper-pagination-bullet {
    width:40px
  }
  #hd .sec-series .tab-list li {
    font-size:0.875em;
    min-width:180px
  }
  #hd .sec-series .tab-list li:first-child {
    padding-left:0
  }
  #hd .sec-series .list-ksp>li {
    font-size:1.125em
  }
}
@media screen and (max-width: 1024px) {
  #hd .sec-series {
    padding-top:2em
  }
  #hd .sec-series .deco-blocks {
    margin-bottom:2em
  }
  #hd .sec-series .hd-container {
    padding-bottom:2em
  }
  #hd .sec-series .swiper-button-prev,
  #hd .sec-series .swiper-button-next {
    display:none !important
  }
  #hd .sec-series .tab-list li {
    min-width:0;
    padding:1.75em 2% 1em;
    font-size:0.75em
  }
  #hd .sec-series .tab-list li p {
    margin-top:0.5em
  }
  #hd .sec-series .pd-item {
    padding:0 1em 1.5em
  }
  #hd .sec-series .list-ksp>li {
    font-size:.875em
  }
  #hd #pageContent-tab-proart .pd-wrapper,
  #hd #pageContent-tab-prime .pd-wrapper {
    max-width:none
  }
  #hd #pageContent-tab-proart .hd-content,
  #hd #pageContent-tab-prime .hd-content {
    padding:0 40px 0 0
  }
  #hd #pageContent-tab-proart .hd-content .txt-larger,
  #hd #pageContent-tab-prime .hd-content .txt-larger {
    font-size:1.125em
  }
  #hd #pageContent-download-spec {
    width:80%
  }
}
@media screen and (max-width: 768px) {
  #hd .sec-series:before {
    padding-bottom:20%
  }
  #hd .sec-series.bg-strix:before,
  #hd .sec-series.bg-strix:after {
    padding-bottom:20%
  }
  #hd .sec-series .hd-container {
    padding-right:0
  }
  #hd .sec-series .tab-list li {
    padding:1.75em 2em 1em
  }
  #hd .sec-series .tab-list li:first-child {
    padding-left:1em
  }
  #hd .sec-series .tab-list li:last-child {
    padding-right:1em
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-series:before {
    padding-bottom:30%
  }
  #hd .sec-series.bg-strix:before,
  #hd .sec-series.bg-strix:after {
    padding-bottom:30%
  }
  #hd #pageContent-tab-proart .pd-wrapper,
  #hd #pageContent-tab-prime .pd-wrapper {
    flex-direction:column
  }
  #hd #pageContent-tab-proart figure,
  #hd #pageContent-tab-prime figure {
    width:100%;
    margin:0 0 1em
  }
  #hd #pageContent-tab-proart .hd-content,
  #hd #pageContent-tab-prime .hd-content {
    width:100%;
    padding:0
  }
}
#hd .sec-compatibility {
  padding:10em 0 6em;
  position:relative;
  overflow:hidden
}
#hd .sec-compatibility .hd-title {
  margin-bottom:4em
}
#hd .sec-compatibility .hd-title.is-animated h2 span:before,
#hd .sec-compatibility .hd-title.is-animated h2 span:after {
  opacity:1
}
#hd .sec-compatibility .hd-title.is-animated h2 span:before {
  -moz-transform:translate(0, 0);
  -o-transform:translate(0, 0);
  -ms-transform:translate(0, 0);
  -webkit-transform:translate(0, 0);
  transform:translate(0, 0)
}
#hd .sec-compatibility .hd-title.is-animated h2 span:after {
  -moz-transform:translate(0, 0) scale(-1, 1);
  -o-transform:translate(0, 0) scale(-1, 1);
  -ms-transform:translate(0, 0) scale(-1, 1);
  -webkit-transform:translate(0, 0) scale(-1, 1);
  transform:translate(0, 0) scale(-1, 1)
}
#hd .sec-compatibility h2 {
  position:relative
}
#hd .sec-compatibility h2 span {
  display:inline-block;
  position:relative;
  z-index:2
}
#hd .sec-compatibility h2 span:before,
#hd .sec-compatibility h2 span:after {
  content:'';
  display:block;
  width:4em;
  height:.75em;
  background:url(../img/title-deco.svg) center no-repeat;
  background-size:contain;
  position:absolute;
  top:0;
  opacity:0;
  -moz-transition:opacity 0.25s 0.25s ease,transform 1s 0.25s ease-in-out;
  -o-transition:opacity 0.25s 0.25s ease,transform 1s 0.25s ease-in-out;
  -webkit-transition:opacity 0.25s 0.25s ease,transform 1s 0.25s ease-in-out;
  transition:opacity 0.25s 0.25s ease,transform 1s 0.25s ease-in-out
}
#hd .sec-compatibility h2 span:before {
  right:100%;
  -moz-transform:translate(-100%, 0);
  -o-transform:translate(-100%, 0);
  -ms-transform:translate(-100%, 0);
  -webkit-transform:translate(-100%, 0);
  transform:translate(-100%, 0)
}
#hd .sec-compatibility h2 span:after {
  left:100%;
  -moz-transform:translate(100%, 0) scale(-1, 1);
  -o-transform:translate(100%, 0) scale(-1, 1);
  -ms-transform:translate(100%, 0) scale(-1, 1);
  -webkit-transform:translate(100%, 0) scale(-1, 1);
  transform:translate(100%, 0) scale(-1, 1)
}
#hd .sec-compatibility .tab-list {
  width:calc(100% + 8px);
  margin:0 -4px 6px
}
#hd .sec-compatibility .tab-list li {
  width:25%;
  background:#878787;
  color:black;
  margin:0 4px
}
#hd .sec-compatibility .tab-list li:hover,
#hd .sec-compatibility .tab-list li:focus-visible {
  color:black
}
#hd .sec-compatibility .tab-list li[aria-current="true"]:nth-child(1) {
  background:#f51928;
  color:white
}
#hd .sec-compatibility .tab-list li[aria-current="true"]:nth-child(2) {
  background-color:#f5197b;
  background-image:-moz-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:-webkit-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:linear-gradient(90deg, #f5197b,#1c51fd);
  color:white
}
#hd .sec-compatibility .tab-list li[aria-current="true"]:nth-child(3) {
  background:#ff9e1b;
  color:black
}
#hd .sec-compatibility .tab-list li[aria-current="true"]:nth-child(4) {
  background:#c9a87f;
  color:black
}
#hd .sec-compatibility .tab-list li[aria-current="true"]:nth-child(5) {
  background:#3ae8fa;
  color:black
}
#hd .sec-compatibility .scroller-x {
  position:relative;
  overflow-x:auto
}
#hd .sec-compatibility .scroller-x::-webkit-scrollbar {
  height:16px
}
#hd .sec-compatibility .scroller-x::-webkit-scrollbar-track {
  background:#575757
}
#hd .sec-compatibility .scroller-x::-webkit-scrollbar-thumb {
  background:#2c2c2c
}
#hd .sec-compatibility .scroller-x::-webkit-scrollbar-thumb:hover {
  background:#aaa
}
#hd .sec-compatibility table {
  width:100%;
  border-collapse:collapse;
  color:black
}
#hd .sec-compatibility table th,
#hd .sec-compatibility table td {
  padding:.75em 1em;
  text-align:center
}
#hd .sec-compatibility table th {
  font-weight:normal;
  min-width:9em;
  text-align:left
}
#hd .sec-compatibility table th:first-child {
  min-width:11em
}
#hd .sec-compatibility table i {
  display:inline-block;
  width:2em;
  height:1.5em;
  background:url(../img/check.svg) center no-repeat;
  background-size:contain
}
#hd .sec-compatibility thead {
  background:#878787
}
#hd .sec-compatibility thead th {
  vertical-align:bottom
}
#hd .sec-compatibility tbody th,
#hd .sec-compatibility tbody td {
  border-bottom:1px solid black
}
#hd .sec-compatibility tbody th {
  padding-left:2.5em
}
#hd .sec-compatibility tbody tr:last-child th,
#hd .sec-compatibility tbody tr:last-child td {
  border-bottom:none
}
#hd .sec-compatibility .align-center {
  text-align:center !important
}
#hd .sec-compatibility .bg-intel {
  background:#6591a5
}
#hd .sec-compatibility .bg-amd {
  background:#a57165
}
#hd #pageContent-table-rog thead th {
  background:#f51928;
  color:white
}
#hd #pageContent-table-strix thead {
  background-color:#f5197b;
  background-image:-moz-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:-webkit-linear-gradient(90deg, #f5197b,#1c51fd);
  background-image:linear-gradient(90deg, #f5197b,#1c51fd)
}
#hd #pageContent-table-strix thead th {
  background:transparent;
  color:white
}
#hd #pageContent-table-tuf thead th {
  background:#ff9e1b
}
#hd #pageContent-table-proart thead th {
  background:#c9a87f
}
#hd #pageContent-table-prime thead th {
  background:#3ae8fa
}
@media screen and (max-width: 1280px) {
  #hd .sec-compatibility {
    padding:6em 0 4em;
    padding-right:3%
  }
  #hd .sec-compatibility table i {
    width:2.25em;
    height:2em
  }
}
@media screen and (max-width: 1024px) {
  #hd .sec-compatibility .hd-title {
    margin-bottom:2em
  }
}
@media screen and (max-width: 768px) {
  #hd .sec-compatibility {
    padding-right:0
  }
  #hd .sec-compatibility .tab-list {
    width:100%;
    margin-left:0;
    margin-right:0
  }
  #hd .sec-compatibility .tab-list li {
    width:auto;
    min-width:25%;
    margin-left:0
  }
  #hd .sec-compatibility .tab-list li:last-child {
    margin-right:0
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-compatibility table th {
    min-width:8em
  }
  #hd .sec-compatibility table th:first-child {
    min-width:9em
  }
  #hd .sec-compatibility table th,
  #hd .sec-compatibility table td {
    padding-left:0.5em;
    padding-right:0.5em
  }
  #hd .sec-compatibility table i {
    width:1.5em;
    height:1em
  }
  #hd .sec-compatibility tbody th {
    padding-left:1.5em
  }
}
@media screen and (max-width: 480px) {
  #hd .sec-compatibility table {
    font-size:0.875em
  }
}
#hd .sec-motherboard {
  position:relative;
  overflow:hidden
}
#hd .sec-motherboard figure {
  position:relative;
  overflow:hidden
}
#hd .sec-motherboard figure img {
  width:100%
}
#hd .sec-motherboard figure .hd-cover {
  position:absolute;
  left:0;
  top:0;
  opacity:0
}
#hd .sec-motherboard figure.is-animated .hd-cover {
  -webkit-animation-delay:.25s;
  -webkit-animation-duration:.4s;
  -webkit-animation-name:showMark;
  -webkit-animation-timing-function:ease;
  -webkit-animation-iteration-count:1;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-delay:.25s;
  -moz-animation-duration:.4s;
  -moz-animation-name:showMark;
  -moz-animation-timing-function:ease;
  -moz-animation-iteration-count:1;
  -moz-animation-fill-mode:forwards;
  -o-animation-delay:.25s;
  -o-animation-duration:.4s;
  -o-animation-name:showMark;
  -o-animation-timing-function:ease;
  -o-animation-iteration-count:1;
  -o-animation-fill-mode:forwards;
  animation-delay:.25s;
  animation-duration:.4s;
  animation-name:showMark;
  animation-timing-function:ease;
  animation-iteration-count:1;
  animation-fill-mode:forwards
}
#hd .sec-motherboard .hd-deco {
  position:absolute;
  bottom:1em;
  left:0;
  display:block;
  font-size:1.25em;
  letter-spacing:.1em;
  margin-top:1em;
  opacity:0.7
}
#hd .sec-motherboard .hd-deco:before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:4em;
  height:.75em;
  border:1px solid #aaa;
  border-left:none;
  margin-top:-0.125em;
  margin-right:0.4em
}
#hd .sec-motherboard .hd-container {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:2em 0;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  text-shadow:0 0 5px black;
  pointer-events:none
}
#hd .sec-motherboard .hd-container h2 {
  margin-right:-1em
}
#hd .sec-motherboard .hd-container p {
  margin-bottom:1em
}
#hd .sec-motherboard .hd-container small {
  font-size:0.875rem
}
#hd .sec-motherboard .hd-content {
  pointer-events:all
}
#hd .sec-motherboard .txt-larger {
  font-size:1.25em
}
#hd .sec-motherboard .swiper-pagination-wrapper {
  display:flex;
  align-items:center;
  position:absolute;
  bottom:5%;
  right:5%
}
#hd .sec-motherboard .swiper-pause-btn {
  position:relative
}
@media screen and (max-width: 1280px) {
  #hd .sec-motherboard .hd-deco {
    font-size:1em
  }
  #hd .sec-motherboard .txt-larger {
    font-size:1.125em
  }
  #hd .sec-motherboard .hd-content {
    width:58%
  }
  #hd .sec-motherboard .hd-content h2 {
    margin-right:-2em
  }
  #hd .sec-motherboard figure {
    width:115%;
    margin-left:-5%
  }
  #hd .sec-motherboard .swiper-pagination-wrapper {
    right:15%
  }
}
@media screen and (max-width: 1024px) {
  #hd .sec-motherboard .hd-container {
    padding:3em 3% 4em 0;
    position:relative
  }
  #hd .sec-motherboard .hd-content {
    width:100%
  }
  #hd .sec-motherboard .hd-content h2 {
    margin-right:0
  }
  #hd .sec-motherboard figure {
    width:150%;
    margin-left:-50%
  }
  #hd .sec-motherboard .swiper-pagination-wrapper {
    justify-content:center;
    left:40%;
    right:0;
    bottom:0;
    margin:10px auto 0
  }
}
@media screen and (max-width: 768px) {
  #hd .sec-motherboard .hd-container {
    padding-top:2em;
    padding-right:0
  }
  #hd .sec-motherboard .txt-larger {
    font-size:1em
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-motherboard figure img {
    width:150%;
    max-width:none !important;
    margin-left:-30%
  }
}
#hd .sec-temperature {
  position:relative;
  overflow:hidden
}
#hd .sec-temperature .hd-bg {
  position:relative;
  overflow:hidden
}
#hd .sec-temperature .hd-bg:after {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-color:transparent;
  background-image:-moz-linear-gradient(270deg, transparent 50%,#000);
  background-image:-webkit-linear-gradient(270deg, transparent 50%,#000);
  background-image:linear-gradient(270deg, transparent 50%,#000);
  pointer-events:none;
  z-index:2
}
#hd .sec-temperature .hd-container {
  display:flex;
  align-items:center;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  z-index:2
}
#hd .sec-temperature .hd-content {
  max-width:40em
}
#hd .sec-temperature h2 {
  margin-bottom:0.6em
}
#hd .sec-temperature .hd-frame {
  padding:4em 2em;
  background:#171717
}
#hd .sec-temperature .hd-frame:before,
#hd .sec-temperature .hd-frame:after {
  content:'';
  display:block;
  width:6em;
  height:8px;
  background:white;
  position:absolute;
  transform-origin:0 0;
  -moz-transform:translateX(-20%) scaleX(0);
  -o-transform:translateX(-20%) scaleX(0);
  -ms-transform:translateX(-20%) scaleX(0);
  -webkit-transform:translateX(-20%) scaleX(0);
  transform:translateX(-20%) scaleX(0)
}
#hd .sec-temperature .hd-frame:before {
  top:0;
  right:0;
  -moz-transition:transform 0.4s ease;
  -o-transition:transform 0.4s ease;
  -webkit-transition:transform 0.4s ease;

  transition:transform 0.4s ease
}
#hd .sec-temperature .hd-frame:after {
  bottom:0;
  left:0;
  -moz-transition:transform 0.4s 0.25s ease;
  -o-transition:transform 0.4s 0.25s ease;
  -webkit-transition:transform 0.4s 0.25s ease;
  transition:transform 0.4s 0.25s ease
}
#hd .sec-temperature .hd-frame.is-animated:before,
#hd .sec-temperature .hd-frame.is-animated:after {
  -moz-transform:translateX(0) scaleX(1);
  -o-transform:translateX(0) scaleX(1);
  -ms-transform:translateX(0) scaleX(1);
  -webkit-transform:translateX(0) scaleX(1);
  transform:translateX(0) scaleX(1)
}
@media screen and (max-width: 1024px) {
  #hd .sec-temperature .hd-bg:after {
    background-color:transparent;
    background-image:-moz-linear-gradient(180deg, transparent 50%,#000 90%);
    background-image:-webkit-linear-gradient(180deg, transparent 50%,#000 90%);
    background-image:linear-gradient(180deg, transparent 50%,#000 90%)
  }
  #hd .sec-temperature .hd-container {
    position:relative
  }
  #hd .sec-temperature .hd-content {
    width:100%;
    max-width:none
  }
  #hd .sec-temperature .hd-frame:before,
  #hd .sec-temperature .hd-frame:after {
    height:6px
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-temperature .hd-bg img {
    width:150%;
    max-width:none !important;
    margin-left:-30%
  }
  #hd .sec-temperature .hd-frame {
    padding:2em 1em
  }
  #hd .sec-temperature .hd-frame:before,
  #hd .sec-temperature .hd-frame:after {
    height:4px
  }
}
#hd .sec-gallery {
  padding-top:2em;
  padding-bottom:6em;
  position:relative;
  z-index:3
}
#hd .sec-gallery .swiper-container {
  height:50vh
}
#hd .sec-gallery .swiper-container#pageContent-swiper-gallery-2 {
  height:40vh
}
#hd .sec-gallery .swiper-container.is-paused .swiper-wrapper {
  transition:none !important
}
#hd .sec-gallery .swiper-wrapper {
  transition-timing-function:linear
}
#hd .sec-gallery .swiper-slide {
  width:auto
}
#hd .sec-gallery img {
  height:100%;
  width:auto
}
#hd .sec-gallery .swiper-controls {
  margin:0
}
#hd .sec-gallery .swiper-control {
  background:black;
  position:absolute;
  bottom:0;
  right:0
}
/*# sourceMappingURL=hd-style.css.map */