@import url(../lib/swiper/swiper-bundle.min.css);
@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto-condensed.css");
html, body {
  padding: 0;
  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: #e4190f
}
#hd * ::-moz-selection {
  background: #1d2124;
  color: #e4190f
}
#hd ul, #hd li, #hd figure {
  margin: 0;
  padding: 0
}
#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li {
  font: inherit;
  padding: 0;
  margin: 0
}
#hd img {
  display: block;
  height: auto;
  border: none;
  max-width: 100% !important;
  margin: 0
}
#hd img.lazyload {
  opacity: 0;
  transition: opacity 0.5s ease
}
#hd iframe, #hd video {
  max-width: 100%
}
#hd button {
  display: block;
  font: inherit;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  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: 2px solid #e4190f;
  outline-offset: -1px
}
#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 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
  }
}
#hd .fadeIn {
  animation-delay: 0s;
  animation-duration: .25s;
  animation-name: fadeIn;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-ms-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-ms-keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-ms-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
@-webkit-keyframes slideProgress {
  0% {
    transform: scale(0, 1)
  }
  100% {
    transform: scale(1, 1)
  }
}
@-moz-keyframes slideProgress {
  0% {
    transform: scale(0, 1)
  }
  100% {
    transform: scale(1, 1)
  }
}
@-ms-keyframes slideProgress {
  0% {
    transform: scale(0, 1)
  }
  100% {
    transform: scale(1, 1)
  }
}
@-o-keyframes slideProgress {
  0% {
    transform: scale(0, 1)
  }
  100% {
    transform: scale(1, 1)
  }
}
@keyframes slideProgress {
  0% {
    transform: scale(0, 1)
  }
  100% {
    transform: scale(1, 1)
  }
}
@font-face {
  font-family: 'TradeGothicLTPro';
  src: url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}
@font-face {
  font-family: 'ROGFonts';
  src: url("../fonts/ROGFonts-Regular_ES.otf") format("embedded-opentype"), url("../fonts/ROGFonts-Regular_ES.ttf") format("opentype"), url("../fonts/ROGFonts-Regular_ES.woff"), url("../fonts/ROGFonts-Regular_ES.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap
}
#hd {
  font-family: "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 16px
}
#hd h2, #hd .h2 {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 3.5em;
  letter-spacing: -.018em;
  line-height: 1.25;
  color: #ffffff !important;
  word-break: normal;
  word-wrap: normal;
  margin-bottom: .13em
}
#hd h2.title-smaller, #hd .h2.title-smaller {
  font-family: "TTNormsProNormal", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: 2.5em;
  margin-bottom: 0.5em
}
#hd h3, #hd .h3 {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 2.25em;
  color: #ffffff !important;
  letter-spacing: .01em;
  line-height: 1.25;
  margin-bottom: .5em
}
#hd h4, #hd .h4 {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  color: #ffffff !important;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 0
}
#hd h5, #hd .h5 {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 1.25em;
  letter-spacing: .04em;
  font-weight: 400;
  line-height: 1.25
}
#hd h6, #hd .h6 {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5
}
#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-family: "TTNormsProRegular", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: .018em;
  font-weight: 300
}
#hd b, #hd strong {
  font-weight: bold
}
#hd small {
  font: inherit;
  font-size: .875em
}
#hd .txt-larger {
  font-size: 1.25em
}
#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
}
#hd a.txt-link:hover, #hd a.txt-link:focus-visible {
  color: #e4190f !important
}
#hd .color-primary {
  color: #e4190f !important
}
#hd .color-info {
  color: #05fffa !important
}
#hd .color-grey {
  color: #707070 !important
}
#hd .color-light-grey {
  color: #a4a4a4 !important
}
#hd .color-white {
  color: white !important
}
#hd .color-black {
  color: black !important
}
#hd .color-gradient {
  display: inline-block;
  color: white !important;
  background-color: #fff 9%;
  background-image: -moz-linear-gradient(180deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
  background-image: -webkit-linear-gradient(180deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
  background-image: linear-gradient(180deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
  background-clip: text;
  background-size: 130% auto;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
#hd .color-gradient::selection, #hd .color-gradient > *::selection {
  color: white;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: white
}
#hd .color-gradient::-moz-selection, #hd .color-gradient > *::-moz-selection {
  color: white;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: white
}
#hd .font-rog {
  font-family: "ROGFonts", "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
}
#hd .font-title {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: bold
}
#hd .hd-uppercase {
  text-transform: uppercase
}
@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, #hd .h2 {
    font-size: 3em
  }
  #hd h2.title-smaller, #hd .h2.title-smaller {
    font-size: 2em
  }
  #hd h3, #hd .h3 {
    font-size: 2em
  }
}
@media screen and (max-width: 1280px) {
  #hd .txt-larger {
    font-size: 1.125em
  }
  #hd h5, #hd .h5 {
    font-size: 1.125em;
    letter-spacing: .04em
  }
}
@media screen and (max-width: 1024px) {
  #hd h2, #hd .h2 {
    font-size: 2.5em;
    line-height: 1.1
  }
  #hd h2.title-smaller, #hd .h2.title-smaller {
    font-size: 2em
  }
  #hd h3, #hd .h3 {
    font-size: 1.75em
  }
  #hd h4, #hd .h4 {
    font-size: 1.25em
  }
}
@media screen and (max-width: 480px) {
  #hd h2, #hd .h2 {
    font-size: 2em;
    line-height: 1.25
  }
  #hd h2.title-smaller, #hd .h2.title-smaller {
    font-size: 1.5em
  }
  #hd h3, #hd .h3 {
    font-size: 1.25em;
    line-height: 1.2
  }
  #hd h5, #hd .h5 {
    font-size: 1em;
    letter-spacing: .02em
  }
  #hd p {
    font-size: 1em;
    line-height: 1.5
  }
}
#hd .w95 {
  width: 94%;
  margin: 0 auto;
  position: relative
}
#hd .hd-w900, #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1366, #hd .hd-w1520, #hd .hd-w1680 {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative
}
#hd .hd-w900 {
  max-width: 900px
}
#hd .hd-w1000 {
  max-width: 1000px
}
#hd .hd-w1100 {
  max-width: 1100px
}
#hd .hd-w1366 {
  width: 90%;
  max-width: 1366px
}
#hd .hd-w1520 {
  width: 90%;
  max-width: 1520px
}
#hd .hd-w1680 {
  width: 90%;
  max-width: 1680px
}
#hd .hd-w2560 {
  max-width: 2560px;
  margin: 0 auto;
  position: relative
}
#hd .hd-mw900 {
  max-width: 900px
}
#hd .hd-mw1000 {
  max-width: 1000px
}
#hd .hd-mw700 {
  max-width: 700px
}
#hd .hd-col20 {
  width: 20%
}
#hd .hd-col25 {
  width: 25%
}
#hd .hd-col30 {
  width: 30%
}
#hd .hd-col33 {
  width: 33.3333%
}
#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-ib {
  display: inline-block
}
#hd .mx-auto {
  margin-left: auto;
  margin-right: auto
}
@media screen and (min-width: 2560px) {
  #hd .hd-w900, #hd .hd-w1000 {
    max-width: 1400px
  }
  #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1366 {
    max-width: 1600px
  }
  #hd .hd-w1520, #hd .hd-w1680 {
    width: 90%;
    max-width: 2000px
  }
  #hd .hd-mw1000 {
    max-width: 1200px
  }
  #hd .hd-mw900 {
    max-width: 1100px
  }
  #hd .hd-mw700 {
    max-width: 1000px
  }
}
@media screen and (min-width: 3000px) {
  #hd .hd-w900, #hd .hd-w1000 {
    max-width: 1800px
  }
  #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1366 {
    max-width: 2560px
  }
  #hd .hd-w1520, #hd .hd-w1680 {
    width: 90%;
    max-width: 3000px
  }
}
@media screen and (max-width: 1023px) {
  #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200 {
    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
  }
  #hd .hd-d-768-flex {
    display: flex
  }
}
@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-btn {
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  padding: .5em 1em;
  margin: 2em 0 1em;
  color: white;
  border: 1px solid white;
  border-radius: 2em;
  transition: transform 0.25s ease
}
#hd .hd-btn p {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
}
#hd .hd-btn:hover, #hd .hd-btn:focus-visible {
  background: white;
  color: black
}
#hd .hd-btn:active {
  transform: translate(0, 1px)
}
#btn-cta {
  width: 6%;
  min-width: 110px;
  max-width: 260px;
  position: fixed;
  right: 4%;
  bottom: 5%;
  z-index: 10;
  display: none
}
#btn-cta span {
  display: block;
  padding: .75em .5em .5em;
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1.125;
  letter-spacing: .06em;
  color: white;
  background: #e4190f;
  text-shadow: 0 0 2px black, 0 0 5px black;
  text-align: center;
  transition: transform 0.25s ease
}
#btn-cta span:before {
  content: '';
  display: block;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  position: absolute;
  inset: 0;
  margin: -7px;
  border: 2px solid #e4190f
}
#btn-cta:hover span, #btn-cta:focus-visible span {
  transform: translate(0, -5%)
}
#btn-cta.hd-show {
  display: block;
  animation-delay: 0s;
  animation-duration: .4s;
  animation-name: fadeInUp;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}
@media screen and (min-width: 2560px) {
  #btn-cta {
    font-size: 1.5em
  }
}
@media screen and (max-width: 1440px) {
  #btn-cta {
    right: 7px
  }
}
@media screen and (max-width: 1280px) {
  #hd .hd-btn {
    font-size: 1.25em
  }
}
@media screen and (max-width: 1024px) {
  #btn-cta span {
    font-size: 1.125em
  }
}
@media screen and (max-width: 1023px) {
  #hd .hd-btn {
    min-width: 6em;
    font-size: 1.125em;
    padding-left: 1em;
    padding-right: 1em;
    margin: 1px
  }
}
@media screen and (max-width: 768px) {
  #btn-cta {
    min-width: 100px;
    bottom: 1em
  }
  #btn-cta span {
    font-size: 1em
  }
}
@media screen and (max-width: 480px) {
  #hd .hd-btn {
    font-size: 1.125em
  }
}
#hd .bg-dark {
  background: #141313
}
#hd .bg-right {
  position: relative
}
#hd .bg-right:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/bg-right-bottom.png) right bottom no-repeat;
  background-size: 30%;
  background-attachment: fixed;
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none
}
#hd .hd-deco-scroller {
  width: 100%;
  clip-path: inset(0);
  position: relative
}
#hd .deco-left, #hd .deco-right {
  height: 100%;
  position: absolute;
  top: 100px;
  left: 3.5%;
  z-index: 10;
  pointer-events: none
}
#hd .deco-left img, #hd .deco-right img {
  height: calc(90vh - 100px);
  margin-top: 0;
  margin-left: auto;
  position: sticky;
  -webkit-position: sticky;
  top: 100px;
  left: 0
}
#hd .deco-right {
  left: auto;
  right: 15px;
  opacity: 0.25
}
#hd .deco-right img {
  height: 150px;
  top: calc(100vh - 300px)
}
@media screen and (max-width: 1440px) {
  #hd .deco-left, #hd .deco-right {
    left: 2%
  }
  #hd .deco-right {
    display: none
  }
}
@media screen and (max-width: 1280px) {
  #hd .deco-left, #hd .deco-right {
    display: none
  }
}
#hd .tab-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: 24px;
  padding-top: 0.25em
}
#hd .tab-container li {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: bold;
  font-size: 1em;
  letter-spacing: .02em;
  line-height: 1.1;
  padding: .25em .5em 0;
  background: #757575;
  color: white;
  text-align: center;
  position: relative;
  cursor: pointer;
  transform: scale(.9, .9);
  transition: transform 0.25s
}
#hd .tab-container li:before {
  content: '';
  display: block;
  width: 1em;
  height: .775em;
  background-image: url(../img/deco-arrow-white.svg);
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
  margin-top: -0.25em
}
#hd .tab-container li:first-child {
  padding-right: 1em;
  clip-path: polygon(0 0, calc(100% - .5em) 0%, 100% 100%, 0% 100%);
  transform-origin: right bottom
}
#hd .tab-container li:last-child {
  padding-left: .75em;
  margin-left: -0.4em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.5em 100%);
  transform-origin: 10% bottom
}
#hd .tab-container li:last-child[aria-current="true"]:before {
  margin-left: .25em
}
#hd .tab-container li[aria-current="true"] {
  background: white;
  color: black;
  transform: translate(0, -2px)
}
#hd .tab-container li[aria-current="true"]:before {
  width: .25em;
  height: .25em;
  background-image: url(../img/deco-arrow-black.svg);
  position: absolute;
  top: 0;
  left: 0;
  margin: .125em;
  animation-delay: 0s;
  animation-duration: .25s;
  animation-name: fadeInLeft;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both
}
#hd .tab-container li:hover, #hd .tab-container li:focus-visible {
  transform: translate(0, -4px)
}
#hd .tab-container li:focus-visible {
  outline-offset: -5px
}
#hd .tab-container.is-animated li:not([aria-current="true"]):before {
  animation-delay: 0s;
  animation-duration: 1.5s;
  animation-name: hintArrow;
  animation-timing-function: ease;
  animation-iteration-count: 3.3333;
  animation-fill-mode: both
}
#hd .subtab-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 50px 0
}
#hd .subtab-container li {
  min-width: 14em;
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: bold;
  font-size: 1.3em;
  letter-spacing: .4em;
  line-height: 1.1;
  padding: .75em 1em .5em 1.5em;
  margin: 0 .5em;
  text-align: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.25s
}
#hd .subtab-container li:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  clip-path: polygon(0 0, calc(100% - .3em) 0, 100% 0.3em, 100% 100%, 0.3em 100%, 0 calc(100% - .3em), 0 0, 1px 1px, 1px calc(100% - .3em - 0.41px), calc(.3em + 0.41px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(.3em + 0.41px), calc(100% - .3em - 0.41px) 1px, 1px 1px);
  transform: skew(-15deg, 0deg);
  z-index: -1
}
#hd .subtab-container li:after {
  content: '';
  width: 0.5em;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  transform: skew(-15deg, 0deg);
  clip-path: polygon(0 0, calc(100% - .3em) 0, calc(100% - .3em) calc(100% - .3em), 100% 100%, 0.3em 100%, 0 calc(100% - .3em));
  z-index: -1
}
#hd .subtab-container li[aria-current="true"] {
  color: black
}
#hd .subtab-container li[aria-current="true"]:before {
  background: white;
  clip-path: polygon(0 0, calc(100% - .3em) 0, 100% 0.3em, 100% 100%, 0.3em 100%, 0 calc(100% - .3em))
}
#hd .subtab-container li[aria-current="true"]:after {
  width: 0.6em;
  background: #e4190f
}
#hd .subtab-container li:hover, #hd .subtab-container li:focus-visible {
  transform: translate(0, -2px)
}
#hd .subtab-container li:focus-visible {
  outline-offset: -5px
}
#hd .tab-content > div, #hd .subtab-content > div {
  display: none
}
#hd .tab-content > div[aria-current="true"], #hd .subtab-content > div[aria-current="true"] {
  display: block
}
@media screen and (max-width: 1280px) {
  #hd .tab-container {
    margin-bottom: 20px
  }
  #hd .subtab-container {
    margin: 25px 0
  }
  #hd .subtab-container li {
    min-width: 12em;
    font-size: 1.25em;
    letter-spacing: .2em
  }
}
@media screen and (max-width: 1024px) {
  #hd .subtab-container li {
    min-width: 10em;
    letter-spacing: .1em;
    padding: .5em .75em .25em 1em;
    margin: 0 .25em
  }
}
@media screen and (max-width: 768px) {
  #hd .subtab-container li {
    min-width: 4em
  }
}
@media screen and (max-width: 620px) {
  #hd .tab-container li {
    font-size: 1.25em
  }
  #hd .subtab-container {
    justify-content: flex-start;
    overflow-x: auto;
    width: 110%;
    margin-left: -5%;
    padding: 0 1em
  }
  #hd .subtab-container li {
    flex-shrink: 0;
    min-width: 8em;
    font-size: 1em;
    padding-top: 1em;
    padding-bottom: 0.65em
  }
}
#hd .hd-nav {
  font-size: 14px;
  position: fixed;
  z-index: 9;
  top: 50%;
  right: 30px;
  opacity: 1;
  transform: translate3d(0, -50%, 0);
  visibility: visible !important;
  transition: transform 0.6s, opacity 0.6s
}
#hd .hd-nav.is-hidden:not(:focus-within) {
  transform: translate(100%, 0);
  opacity: 0
}
#hd .hd-nav .hd-deco {
  width: 2em;
  max-width: none !important;
  height: 1.5em;
  object-fit: contain;
  position: absolute;
  right: -.75em
}
#hd .hd-nav .deco-top {
  bottom: 100%
}
#hd .hd-nav .deco-bottom {
  top: 100%
}
#hd .hd-nav .main-nav {
  margin: 0;
  padding: 0
}
#hd .hd-nav .main-nav:before {
  content: '';
  display: block;
  width: 1px;
  height: calc(100% - 5em);
  background: #9B9B9B;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 3px;
  z-index: -1
}
#hd .hd-nav .main-nav > li {
  display: block;
  margin: 2.5em 0;
  position: relative
}
#hd .hd-nav .main-nav a {
  text-decoration: none;
  display: block;
  z-index: 1;
  cursor: pointer
}
#hd .hd-nav .main-nav a:before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  background: #9B9B9B;
  margin-left: auto;
  transition: transform 0.1s ease-in-out, background 0.6s ease;
  position: relative;
  z-index: 2
}
#hd .hd-nav .main-nav a:after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #9B9B9B;
  position: absolute;
  top: 0;
  right: 0;
  margin: -5px;
  background: black;
  z-index: 0;
  transform: scale(0, 0);
  transition: transform 0.25s ease
}
#hd .hd-nav .main-nav a:hover:before, #hd .hd-nav .main-nav a:focus-visible:before {
  background: white
}
#hd .hd-nav .main-nav a:hover .hd-tooltip, #hd .hd-nav .main-nav a:focus-visible .hd-tooltip {
  opacity: 1;
  color: white
}
#hd .hd-nav .main-nav a.hd-active:before {
  background-color: #05fffa
}
#hd .hd-nav .main-nav a.hd-active:after {
  border-color: #05fffa;
  transform: scale(1, 1)
}
#hd .hd-nav .main-nav a.hd-active .hd-tooltip {
  color: #05fffa
}
#hd .hd-nav .main-nav a.hd-active + .sub-nav button {
  color: #727171
}
#hd .hd-nav .main-nav .hd-tooltip {
  display: block;
  max-width: 220px;
  height: 1.5em;
  font-family: "TTNormsProRegular", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: normal;
  font-size: .875rem;
  color: #9B9B9B;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  position: absolute;
  top: -.6em;
  right: 20px
}
#hd .hd-nav .sub-nav {
  padding: .5em 0 0;
  position: relative
}
#hd .hd-nav .sub-nav button {
  display: block;
  width: 100%;
  max-width: 15em;
  color: white;
  font-size: .9em;
  padding: .25em 0;
  padding-right: 1.5em;
  text-align: right;
  position: relative
}
#hd .hd-nav .sub-nav button:after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: white;
  position: absolute;
  top: .75em;
  right: .25em
}
@media screen and (min-width: 2560px) {
  #hd .hd-nav {
    font-size: 16px;
    right: 50px
  }
}
@media screen and (max-width: 1440px) {
  #hd .hd-nav {
    right: 15px;
    font-size: .8em
  }
  #hd .hd-nav .sub-nav {
    padding-bottom: 0
  }
}
@media screen and (max-width: 1280px) {
  #hd .hd-nav {
    right: 1.5em
  }
  #hd .hd-nav .main-nav > li {
    margin: 1em 0
  }
  #hd .hd-nav .main-nav > li:hover .hd-tooltip {
    opacity: 1;
    transition: opacity 0.4s ease-in-out
  }
  #hd .hd-nav .main-nav > li:hover button {
    color: white !important;
    transition: color 0.6s ease-in-out
  }
  #hd .hd-nav .hd-tooltip {
    color: transparent;
    white-space: nowrap;
    opacity: 0;
    transition: none
  }
  #hd .hd-nav .sub-nav button {
    padding-top: 0;
    padding-bottom: 0;
    color: transparent !important;
    white-space: nowrap;
    transition: none
  }
}
@media screen and (max-width: 1024px) {
  #hd .hd-nav {
    display: none !important
  }
  #hd .hd-nav .hd-tooltip {
    display: none !important
  }
}
#hd .hd-lightbox {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11
}
#hd .hd-lightbox.hd-active {
  display: flex;
  animation-delay: 0s;
  animation-duration: .4s;
  animation-name: fadeIn;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}
#hd .hd-lightbox .hd-filter {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 150px 0 20px;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto
}
#hd .hd-lightbox .hd-filter::-webkit-scrollbar {
  width: 4px
}
#hd .hd-lightbox .hd-filter::-webkit-scrollbar-track {
  background: transparent
}
#hd .hd-lightbox .hd-filter::-webkit-scrollbar-thumb {
  background: #707070
}
#hd .hd-lightbox .hd-filter::-webkit-scrollbar-thumb:hover {
  background: #e4190f
}
#hd .hd-lightbox .hd-box {
  width: 60%;
  max-width: 1200px;
  background: black;
  position: relative;
  margin: 0 auto;
  z-index: 2
}
#hd .hd-lightbox .hd-box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
#hd .hd-lightbox .hd-content {
  padding: 3em 2em
}
#hd .hd-lightbox .hd-content h2 {
  margin-bottom: .25em
}
#hd .hd-lightbox .hd-content p {
  font-size: 1em
}
#hd .hd-lightbox .vid-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.26%;
  position: relative;
  overflow: hidden
}
#hd .hd-lightbox .hd-close {
  font-size: 1em;
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  bottom: 100%;
  right: 0;
  margin: .75em;
  pointer-events: all;
  cursor: pointer
}
#hd .hd-lightbox .hd-close:before, #hd .hd-lightbox .hd-close:after {
  content: '';
  display: block;
  width: 2.25em;
  height: 2px;
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: all 0.4s ease
}
#hd .hd-lightbox .hd-close:before {
  transform: translate(0, 0) rotate(-45deg)
}
#hd .hd-lightbox .hd-close:after {
  transform: translate(0, 0) rotate(45deg)
}
#hd .hd-lightbox .hd-close:hover:before, #hd .hd-lightbox .hd-close:hover:after {
  background: #e4190f
}
@media screen and (min-width: 2560px) {
  #hd .hd-lightbox .hd-box {
    max-width: 1020px
  }
}
@media screen and (min-width: 3000px) {
  #hd .hd-lightbox .hd-box {
    max-width: 1400px
  }
}
@media screen and (max-width: 1024px) {
  #hd .hd-lightbox .hd-filter {
    padding: 50px 0 20px
  }
}
@media screen and (max-width: 768px) {
  #hd .hd-lightbox .hd-filter {
    padding: 50px 0 0
  }
  #hd .hd-lightbox .hd-box {
    width: 100%
  }
  #hd .hd-lightbox .hd-close {
    top: 0;
    bottom: auto
  }
}
@media screen and (max-width: 480px) {
  #hd .hd-lightbox .hd-content {
    padding: 3em 1em;
    font-size: .9em
  }
}
#hd .list-square > li {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  padding-left: 1em;
  margin-bottom: .25em
}
#hd .list-square > li:before {
  content: '';
  display: block;
  width: .25em;
  height: .25em;
  background: white;
  position: absolute;
  top: .55em;
  left: 0
}
#hd .list-square sup {
  display: inline-block;
  margin-top: -0.25em
}
@media screen and (max-width: 1023px) {
  #hd .list-square > li {
    line-height: 1.25
  }
}
#hd .cover-container {
  position: relative;
  cursor: pointer
}
#hd .cover-container:hover figure img, #hd .cover-container:focus-visible figure img {
  opacity: .75
}
#hd .cover-container.trigger-video:hover .icon-play, #hd .cover-container.trigger-video:focus-visible .icon-play {
  background: #e4190f;
  border-color: #e4190f;
  opacity: 1;
  transform: scale(1.25, 1.25)
}
#hd .cover-container figure {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  transition: opacity 0.25s ease
}
#hd .cover-container figure img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.25s ease
}
#hd .cover-container .icon-play {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #707070;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: .5;
  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: 50px;
  height: 50px;
  background: none;
  border: none;
  box-shadow: none;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease-out;
  z-index: 2
}
#hd .vid-control img, #hd .vid-control svg {
  width: 50%;
  height: 50%
}
#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
}
@media screen and (max-width: 768px) {
  #hd .vid-control {
    width: 44px;
    height: 44px
  }
}
#hd .swiper-container {
  position: relative;
  overflow: hidden
}
#hd .swiper-button-prev, #hd .swiper-button-next {
  width: 3.875em;
  height: 3.875em;
  color: #e4190f;
  border-radius: 50%;
  margin: 0 0 3em;
  transform: translate(0, -50%);
  opacity: 1;
  transition: all 0.25s ease
}
#hd .swiper-button-prev:after, #hd .swiper-button-next:after {
  font-size: 2.25em;
  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 {
  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: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto .5em;
  z-index: 2
}
#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;
  right: 0;
  bottom: 0;
  left: 0
}
#hd .swiper-pagination-bullet {
  width: 3em;
  height: 5px;
  border-radius: 0;
  margin: 0 .5em;
  background: #a4a4a4;
  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;
  animation-delay: 0s;
  animation-duration: 3.6s;
  animation-name: slideProgress;
  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%;
  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%;
  transform: translate(-50%, -50%)
}
#hd .swiper-control .hd-pause:before {
  margin-left: -.5em
}
@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
  }
}
@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
  }
}
@media screen and (max-width: 480px) {
  #hd .swiper-button-prev, #hd .swiper-button-next {
    display: none
  }
}
html[dir=rtl] #hd .promotionBanner.corner {
  left: 32px;
  right: initial
}
html[dir=rtl] #hd .promotionBanner.corner .PB_colse {
  left: 16px;
  right: initial
}
#hd .promotionBanner.corner {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 320px;
  background-color: black;
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-box-shadow: 0px 4px 16px rgba(228, 25, 15, 0.25);
  box-shadow: 0px 4px 16px rgba(228, 25, 15, 0.25);
  border-radius: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 32px 28px;
  z-index: 11800
}
#hd .promotionBanner.corner * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
#hd .promotionBanner.corner .PB_colse {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDFMMSAxM00xIDFMMTMgMTMiIHN0cm9rZT0iIzY2NjY2NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=") no-repeat center;
  width: 12px;
  height: 12px;
  display: inline-block;
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  border: 0
}
#hd .promotionBanner.corner .PB_title {
  margin: 8px 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 125%;
  color: #181818;
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}
#hd .promotionBanner.corner .PB_depiction {
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  font-family: "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}
#hd .promotionBanner.corner .PB_picture {
  margin: 16px 0 0
}
#hd .promotionBanner.corner .PB_picture iframe, #hd .promotionBanner.corner .PB_picture img {
  width: 100%;
  aspect-ratio: 1/.888;
  display: block;
  border: 0
}
#hd .promotionBanner.corner .PB_link {
  margin: 16px 0 0;
  font-size: 16px;
  background: #e4190f;
  border-radius: 8px;
  text-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 6px 16px;
  color: #fff;
  font-family: "TTNormsProRegular", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  line-height: 130%;
  font-weight: 500;
  height: 32px;
  outline: none;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap
}
#hd .promotionBanner.corner .PB_link:focus, #hd .promotionBanner.corner .PB_link:hover {
  background: #b50900
}
@media screen and (max-width: 1279px) {
  #hd .promotionBanner.corner {
    right: 20px;
    bottom: 20px
  }
}
@media screen and (min-width: 568px) and (max-width: 730px) {
  #hd .promotionBanner.corner {
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    padding: 40px 0 32px
  }
  #hd .promotionBanner.corner .PB_body {
    width: 512px;
    margin: 0 auto;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 216px 16px 1fr;
    grid-template-columns: 216px 1fr;
    grid-gap: 16px
  }
  #hd .promotionBanner.corner .PB_content {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1
  }
  #hd .promotionBanner.corner .PB_picture {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3
  }
  #hd .promotionBanner.corner .PB_title {
    margin: 0 0 8px 0;
    font-size: 18px
  }
  #hd .promotionBanner.corner .PB_depiction {
    font-size: 14px;
    line-height: 135%
  }
  #hd .promotionBanner.corner .PB_picture {
    margin: 0
  }
  #hd .promotionBanner.corner .PB_picture img {
    max-width: 216px
  }
  #hd .promotionBanner.corner .PB_link {
    margin: 0;
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 2;
    grid-row-start: 2
  }
  #hd .promotionBanner.corner .PB_notPicture .PB_content, #hd .promotionBanner.corner .PB_notPicture .PB_link {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 2;
    grid-column-end: 3
  }
}
@media screen and (max-width: 567px) {
  #hd .promotionBanner.corner {
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    padding: 40px 28px 32px
  }
  #hd .promotionBanner.corner .PB_title {
    font-size: 18px
  }
  #hd .promotionBanner.corner .PB_depiction {
    font-size: 14px;
    line-height: 135%
  }
  #hd .promotionBanner.corner .PB_picture img {
    max-width: unset
  }
}
#hd .sec-kv .swiper-slide img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: 777px
}
@media screen and (max-width: 1279px) {
  #hd .sec-kv .swiper-slide img {
    height: 698px
  }
}
@media screen and (max-width: 731px) {
  #hd .sec-kv .swiper-slide img {
    height: 548px
  }
}
#hd .sec-intro {
  padding-bottom: 6em;
  position: relative;
  overflow: hidden
}
#hd .sec-intro .hd-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  object-position: center top
}
#hd .sec-intro nav {
  width: 100%;
  background-color: #000;
  background-image: -moz-linear-gradient(90deg, #000, #4d4d4d, #000);
  background-image: -webkit-linear-gradient(90deg, #000, #4d4d4d, #000);
  background-image: linear-gradient(90deg, #000, #4d4d4d, #000);
  position: relative;
  overflow: hidden
}
#hd .sec-intro nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  font-family: "TTNormsProNormal", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: normal;
  font-size: 1.25em;
  line-height: 1;
  width: 25%;
  color: white;
  text-align: center;
  padding: .5em 1em
}
#hd .sec-intro nav a.bg-proart img {
  width: 2.75em;
  margin-top: -.1em;
  margin-bottom: .1em
}
#hd .sec-intro nav a:hover.bg-strix, #hd .sec-intro nav a:focus-visible.bg-strix {
  background-color: #4d22af;
  background-image: -moz-linear-gradient(90deg, #4d22af, #7b26c2);
  background-image: -webkit-linear-gradient(90deg, #4d22af, #7b26c2);
  background-image: linear-gradient(90deg, #4d22af, #7b26c2)
}
#hd .sec-intro nav a:hover.bg-tuf, #hd .sec-intro nav a:focus-visible.bg-tuf {
  background-color: #835806;
  background-image: -moz-linear-gradient(90deg, #835806, #de9a26);
  background-image: -webkit-linear-gradient(90deg, #835806, #de9a26);
  background-image: linear-gradient(90deg, #835806, #de9a26)
}
#hd .sec-intro nav a:hover.bg-dual, #hd .sec-intro nav a:focus-visible.bg-dual {
  background-color: #096585;
  background-image: -moz-linear-gradient(90deg, #096585, #1eaccd);
  background-image: -webkit-linear-gradient(90deg, #096585, #1eaccd);
  background-image: linear-gradient(90deg, #096585, #1eaccd)
}
#hd .sec-intro nav a:hover.bg-proart, #hd .sec-intro nav a:focus-visible.bg-proart {
  background-color: #756147;
  background-image: -moz-linear-gradient(90deg, #756147, #a58a6a);
  background-image: -webkit-linear-gradient(90deg, #756147, #a58a6a);
  background-image: linear-gradient(90deg, #756147, #a58a6a)
}
#hd .sec-intro .hd-title {
  padding: 8em 0
}
#hd .sec-intro .hd-title h2 {
  margin-bottom: .5em
}
#hd .sec-intro .hd-title p {
  max-width: 65em;
  margin: 0 auto
}
#hd .sec-intro .hd-award-container {
  width: 100%;
  padding: 0 5%;
  margin: 0 auto;
  position: relative
}
#hd .sec-intro .hd-award-container .swiper-wrapper {
  align-items: stretch
}
#hd .sec-intro .hd-award-container .swiper-slide {
  max-width: 360px;
  height: auto;
  padding: 20px
}
#hd .sec-intro .hd-award-container a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white
}
#hd .sec-intro .hd-award-container a:hover, #hd .sec-intro .hd-award-container a:focus-visible {
  color: #e4190f
}
#hd .sec-intro .hd-award-container a:hover h3:after, #hd .sec-intro .hd-award-container a:focus-visible h3:after {
  transform: scale(1, 1)
}
#hd .sec-intro .hd-award-container .hd-img-container {
  max-width: 250px;
  height: 150px;
  display: flex;
  align-items: center;
  margin: 0 auto 15px
}
#hd .sec-intro .hd-award-container .hd-img-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
#hd .sec-intro .hd-award-container h3 {
  font-size: 1.125em;
  line-height: 1.25;
  text-transform: uppercase;
  color: inherit !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  position: relative;
  overflow: hidden;
  margin: 0 auto 10px
}
#hd .sec-intro .hd-award-container h3:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #e4190f;
  transform: scale(0, 1);
  transition: transform 0.3s ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto
}
#hd .sec-intro .hd-award-container p {
  font-size: .875em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  position: relative;
  overflow: hidden
}
@media screen and (max-width: 1440px) {
  #hd .sec-intro .hd-title {
    padding: 6em 0
  }
}
@media screen and (max-width: 1280px) {
  #hd .sec-intro .hd-title {
    padding: 4em 0
  }
}
@media screen and (max-width: 1024px) {
  #hd .sec-intro {
    padding-bottom: 2em
  }
  #hd .sec-intro .hd-award-container {
    padding: 0
  }
  #hd .sec-intro .hd-award-container .swiper-button-prev, #hd .sec-intro .hd-award-container .swiper-button-next {
    display: none !important
  }
}
@media screen and (max-width: 768px) {
  #hd .sec-intro nav .hd-container {
    width: 100%
  }
  #hd .sec-intro nav a {
    font-size: 1.125em;
    padding: 1em .25em .75em
  }
  #hd .sec-intro .hd-title {
    padding: 3em 0
  }
  #hd .sec-intro .hd-award-container .swiper-slide {
    width: calc(50vw - 80px)
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-intro nav a {
    font-size: 1em
  }
  #hd .sec-intro .hd-award-container .swiper-slide {
    width: 240px;
    padding: 10px
  }
}
#hd .sec-video {
  padding: 4em 0 0
}
#hd .sec-video .main-video .cover-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%
}
#hd .sec-video .main-video .cover-container:hover .icon-play, #hd .sec-video .main-video .cover-container:focus-visible .icon-play {
  background: #e4190f;
  border-color: #e4190f;
  opacity: 1;
  transform: scale(1.25, 1.25)
}
#hd .sec-video .main-video .cover-container.is-playing img {
  opacity: 0;
  pointer-events: none
}
#hd .sec-video .main-video .cover-container.is-playing iframe {
  opacity: 1
}
#hd .sec-video .main-video .cover-container.is-playing .icon-play {
  opacity: 0
}
#hd .sec-video .main-video img, #hd .sec-video .main-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  transition: opacity 0.25s ease
}
#hd .sec-video .main-video iframe {
  opacity: 0
}
#hd .sec-video .main-video img {
  z-index: 2;
  object-fit: contain
}
#hd .sec-video .main-video .icon-play {
  z-index: 2;
  pointer-events: none
}
#hd .sec-video .hd-container.hd-w1200 {
  margin-bottom: 40px
}
#hd .sec-video .list-vid {
  margin-left: -1em;
  margin-right: -1em;
  text-align: center
}
#hd .sec-video .list-vid.collapse li:nth-child(n+7) {
  display: none
}
#hd .sec-video .list-vid li {
  padding: 0 1em;
  margin-bottom: 2em
}
#hd .sec-video .list-vid li.hd-col50 .icon-play {
  width: 80px;
  height: 80px
}
#hd .sec-video .list-vid li.hd-col50 .icon-play:before {
  border-width: 18px 0 18px 26px
}
#hd .sec-video .list-vid h3 {
  padding: .75em 0 0
}
#hd .sec-video .cover-container .icon-play {
  background: none;
  border: 1px solid white;
  opacity: 1
}
#hd .sec-video figure {
  position: relative
}
#hd .sec-video figure .hd-tag {
  font-size: 1rem;
  font-weight: bold;
  padding: 0 1.5em 0 .5em;
  background: #e4190f;
  color: black;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 100%, 0% 100%);
  z-index: 2
}
#hd .sec-video .hd-txt {
  width: 100%;
  height: 100%;
  background-color: #e4190f;
  background-image: -moz-linear-gradient(180deg, #e4190f, #000);
  background-image: -webkit-linear-gradient(180deg, #e4190f, #000);
  background-image: linear-gradient(180deg, #e4190f, #000);
  position: absolute;
  top: 0;
  left: 0
}
#hd .sec-video .hd-txt img {
  width: 100%
}
#hd .sec-video .hd-txt p {
  font-size: 2vw;
  font-style: italic;
  color: #a4a4a4;
  opacity: .7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}
@media screen and (max-width: 1024px) {
  #hd .sec-video .list-vid {
    margin-left: -.5em;
    margin-right: -.5em
  }
  #hd .sec-video .list-vid li {
    padding: 0 .5em
  }
}
@media screen and (max-width: 768px) {
  #hd .sec-video .list-vid li {
    padding: 0 .25em
  }
  #hd .sec-video .hd-txt p {
    font-size: 2.5vw
  }
}
@media screen and (max-width: 480px) {
  #hd .sec-video {
    padding: 2em 0
  }
  #hd .sec-video .list-vid li {
    width: 50%;
    margin-bottom: 1em
  }
  #hd .sec-video .list-vid li.hd-col50 {
    width: 100%
  }
  #hd .sec-video .list-vid h3 {
    font-size: .9em
  }
}
#hd .sec-article {
  padding: 4em 0
}
#hd .sec-article h2 {
  margin-bottom: 1em
}
#hd .sec-article .list-article li {
  width: 33.3333%;
  padding: 0 1em
}
#hd .sec-article .list-article h3 {
  margin-top: 0.75em
}
#hd .sec-article a {
  display: block;
  text-align: center
}
#hd .sec-article a:hover img, #hd .sec-article a:focus-visible img {
  transform: scale(1.1, 1.1)
}
#hd .sec-article .hd-img-container {
  position: relative;
  overflow: hidden
}
#hd .sec-article .hd-img-container img {
  width: 100%;
  transition: transform 0.8s ease
}
@media screen and (max-width: 1024px) {
  #hd .sec-article .list-article li {
    padding: 0 .5em
  }
}
@media screen and (max-width: 768px) {
  #hd .sec-article .list-article li {
    padding: 0 .25em
  }
}
@media screen and (max-width: 480px) {
  #hd .sec-article {
    padding: 2em 0
  }
  #hd .sec-article .list-article li {
    width: 50%;
    margin-bottom: 1em
  }
  #hd .sec-article .list-article li.hd-col50 {
    width: 100%
  }
  #hd .sec-article .list-article h3 {
    font-size: .9em
  }
}
#hd .sec-explosion {
  position: relative;
  overflow: hidden
}
#hd .sec-explosion .hd-scroller {
  padding: 6em 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center
}
#hd .sec-explosion .hd-scroller:before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 10%;
  background-color: rgba(20, 19, 19, 0);
  background-image: -moz-linear-gradient(180deg, rgba(20, 19, 19, 0), #141313 30%);
  background-image: -webkit-linear-gradient(180deg, rgba(20, 19, 19, 0), #141313 30%);
  background-image: linear-gradient(180deg, rgba(20, 19, 19, 0), #141313 30%);
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1
}
#hd .sec-explosion .hd-bg {
  width: 120%;
  margin-left: -10%;
  filter: invert(1);
  position: absolute;
  overflow: hidden
}
#hd .sec-explosion .hd-bg img {
  width: 100%;
  opacity: 0.1
}
#hd .sec-explosion .hd-bg .bg-cover {
  width: 71.5%;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 1
}
#hd .sec-explosion figure {
  width: 70%;
  margin: auto;
  position: relative;
  pointer-events: none
}
#hd .sec-explosion figure .hd-part {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0
}
#hd .sec-explosion figure .hd-part img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0
}
#hd .sec-explosion figure .hd-part img:first-child {
  position: relative
}
#hd .sec-explosion figure canvas {
  width: 100%;
  height: 100%;
  position: absolute
}
#hd .sec-explosion figure canvas#pageContent-singleFan {
  top: 0;
  left: 19%;
  object-fit: cover
}
#hd .sec-explosion figure canvas#pageContent-tripleFan {
  width: 157%;
  height: 157%;
  top: -33.3%;
  left: -7.3%;
  object-fit: contain
}
#hd .sec-explosion figure canvas#pageContent-heatsink {
  width: 157%;
  height: 157%;
  top: -28.5%;
  left: -18.1%;
  object-fit: contain
}
#hd .sec-explosion figure .single-fan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
#hd .sec-explosion figure .hd-full {
  width: 100%;
  position: relative
}
#hd .sec-explosion figure .hd-cover {
  width: 130%;
  height: 110%;
  position: absolute;
  top: -5%;
  right: -45%;
  background-color: rgba(20, 19, 19, 0);
  background-image: -moz-linear-gradient(90deg, rgba(20, 19, 19, 0) 60%, #141313 70%);
  background-image: -webkit-linear-gradient(90deg, rgba(20, 19, 19, 0) 60%, #141313 70%);
  background-image: linear-gradient(90deg, rgba(20, 19, 19, 0) 60%, #141313 70%)
}
#hd .sec-explosion figure .deco-arrow {
  width: 5%;
  position: absolute
}
#hd .sec-explosion figure .deco-arrow.arrow-left {
  top: -5%;
  left: 0
}
#hd .sec-explosion figure .deco-arrow.arrow-right {
  bottom: 0;
  right: 2%
}
#hd .sec-explosion .part-container .hd-overlay {
  width: 100%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: 0;
  background: rgba(20, 19, 19, 0.82)
}
#hd .sec-explosion .part-container .hd-right-cover {
  width: 10%;
  height: 140%;
  background-color: rgba(20, 19, 19, 0);
  background-image: -moz-linear-gradient(90deg, rgba(20, 19, 19, 0), #141313);
  background-image: -webkit-linear-gradient(90deg, rgba(20, 19, 19, 0), #141313);
  background-image: linear-gradient(90deg, rgba(20, 19, 19, 0), #141313);
  background-color: transparent;
  position: absolute;
  top: 0;
  right: -30%;
  z-index: 2
}
#hd .sec-explosion .hd-container {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
#hd .sec-explosion .hd-container .hd-content {
  height: 100%;
  position: relative;
  margin-left: auto;
  z-index: 2
}
#hd .sec-explosion .hd-container .hd-txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0
}
#hd .sec-explosion .hd-container .hd-txt h2, #hd .sec-explosion .hd-container .hd-txt p {
  position: relative
}
#hd .sec-explosion .hd-container .hd-txt p strong {
  font-weight: 600
}
#hd .sec-explosion #pageContent-flowSeq {
  width: 120%;
  height: 120%;
  position: absolute;
  top: -10%;
  left: -10%;
  z-index: 3;
  object-fit: cover
}
#hd .sec-explosion .hd-bottom {
  width: 90%;
  max-width: 56em;
  margin: 0 auto;
  position: absolute;
  top: 80%;
  left: 0;
  right: 0;
  z-index: 3
}
#hd .sec-explosion .hd-bottom p {
  font-size: 1.25em
}
@media screen and (max-width: 1024px) and (orientation: portrait), (max-width: 1023px) {
  #hd .sec-explosion .hd-scroller {
    justify-content: flex-start
  }
  #hd .sec-explosion figure {
    width: 90%;
    margin: 5% auto 0
  }
  #hd .sec-explosion .hd-container {
    align-items: flex-start;
    position: relative;
    margin: 15% auto 0
  }
  #hd .sec-explosion .hd-container .hd-content {
    width: 100%
  }
  #hd .sec-explosion .hd-container .hd-txt {
    bottom: auto
  }
  #hd .sec-explosion .hd-bottom {
    top: auto;
    bottom: 0;
    text-align: left;
    position: relative
  }
  #hd .sec-explosion #pageContent-flowSeq {
    width: 100%;
    height: 90vw;
    top: -12%;
    left: 0
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-explosion #pageContent-flowSeq {
    height: 100vw
  }
}
@media screen and (max-width: 480px) {
  #hd .sec-explosion .hd-scroller {
    padding: 4em 0
  }
  #hd .sec-explosion figure {
    margin-top: 0
  }
  #hd .sec-explosion h2 {
    font-size: 2em
  }
  #hd .sec-explosion p {
    line-height: 1.25
  }
}
#hd .sec-gtiii {
  padding: 140px 0;
  position: relative;
  overflow: hidden
}
#hd .sec-gtiii .hd-bg {
  width: 30%;
  position: absolute;
  bottom: 0;
  right: 0
}
#hd .sec-gtiii .hd-content {
  padding: 1em 0 1em 8%
}
#hd .sec-gtiii .btn-container {
  margin-top: 1em
}
#hd .sec-gtiii .btn-container .hd-btn {
  margin-right: 1em
}
@media screen and (max-width: 1440px) {
  #hd .sec-gtiii {
    padding: 100px 0
  }
}
@media screen and (max-width: 1280px) {
  #hd .sec-gtiii {
    padding: 60px 0
  }
  #hd .sec-gtiii .hd-content {
    padding-left: 5%
  }
}
@media screen and (max-width: 1023px) {
  #hd .sec-gtiii .hd-container {
    flex-direction: column-reverse
  }
  #hd .sec-gtiii figure {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2em
  }
  #hd .sec-gtiii .hd-content {
    width: 100%;
    padding: 0
  }
}
#hd .sec-products {
  padding: 4em 0;
  position: relative
}
#hd .sec-products.bg-rog .tab-list {
  background-image: url(../img/product/bg-rog.png)
}
#hd .sec-products.bg-rog [aria-controls="pageContent-tab-rog"] {
  background-image: url(../img/product/bg-rog-active.png)
}
#hd .sec-products.bg-rog [aria-controls="pageContent-tab-rog"]:after {
  background-color: #453088;
  background-image: -moz-linear-gradient(90deg, #453088, #692785);
  background-image: -webkit-linear-gradient(90deg, #453088, #692785);
  background-image: linear-gradient(90deg, #453088, #692785)
}
#hd .sec-products.bg-tuf .tab-list {
  background-image: url(../img/product/bg-tuf.png)
}
#hd .sec-products.bg-tuf [aria-controls="pageContent-tab-tuf"] {
  background-image: url(../img/product/bg-tuf-active.png)
}
#hd .sec-products.bg-tuf [aria-controls="pageContent-tab-tuf"]:after {
  background-color: #ffd600;
  background-image: -moz-linear-gradient(90deg, #ffd600, #fbab00);
  background-image: -webkit-linear-gradient(90deg, #ffd600, #fbab00);
  background-image: linear-gradient(90deg, #ffd600, #fbab00)
}
#hd .sec-products.bg-dual .tab-list {
  background-image: url(../img/product/bg-dual.png)
}
#hd .sec-products.bg-dual [aria-controls="pageContent-tab-dual"] {
  background-image: url(../img/product/bg-dual-active.png)
}
#hd .sec-products.bg-dual [aria-controls="pageContent-tab-dual"]:after {
  background: #0bb8fb
}
#hd .sec-products.bg-proart .tab-list {
  background-image: url(../img/product/bg-proart.png)
}
#hd .sec-products.bg-proart [aria-controls="pageContent-tab-proart"] {
  background-image: url(../img/product/bg-proart-active.png)
}
#hd .sec-products.bg-proart [aria-controls="pageContent-tab-proart"]:after {
  background-color: #c09d6e;
  background-image: -moz-linear-gradient(90deg, #c09d6e, #c8a780);
  background-image: -webkit-linear-gradient(90deg, #c09d6e, #c8a780);
  background-image: linear-gradient(90deg, #c09d6e, #c8a780)
}
#hd .sec-products .tab-list {
  width: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0 auto;
  background: black center no-repeat;
  background-size: cover
}
#hd .sec-products .tab-list li {
  width: 25%;
  font-size: 1em;
  padding: 1.75em 1em 1em;
  text-align: center;
  position: relative;
  cursor: pointer
}
#hd .sec-products .tab-list li:before {
  content: '';
  display: block;
  width: 1px;
  height: 70%;
  background: rgba(255, 255, 255, 0.25);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
  pointer-events: none
}
#hd .sec-products .tab-list li:after {
  content: '';
  width: 100%;
  height: 6px;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none
}
#hd .sec-products .tab-list li:nth-child(4) .hd-img-container img {
  height: 2.6em
}
#hd .sec-products .tab-list li:last-child {
  padding-right: 2%
}
#hd .sec-products .tab-list li:last-child:before {
  display: none
}
#hd .sec-products .tab-list li:hover .hd-img-container img, #hd .sec-products .tab-list li:focus-visible .hd-img-container img {
  opacity: 1
}
#hd .sec-products .tab-list li:hover h3, #hd .sec-products .tab-list li:focus-visible h3 {
  opacity: 1
}
#hd .sec-products .tab-list li[aria-current="true"]:before, #hd .sec-products .tab-list li[aria-selected="true"]:before {
  display: none
}
#hd .sec-products .tab-list li[aria-current="true"] h3, #hd .sec-products .tab-list li[aria-selected="true"] h3 {
  opacity: 1
}
#hd .sec-products .tab-list li[aria-current="true"] .hd-img-container img, #hd .sec-products .tab-list li[aria-selected="true"] .hd-img-container img {
  opacity: 1
}
#hd .sec-products .tab-list .hd-img-container {
  display: flex;
  align-items: center;
  height: 4em;
  position: relative
}
#hd .sec-products .tab-list .hd-img-container img {
  width: 100%;
  max-width: none !important;
  height: 4em;
  margin-left: 0;
  -o-object-fit: contain;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.25s ease
}
#hd .sec-products .tab-list h3 {
  font-family: "TTNormsProNormal", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.125;
  margin-top: 1em;
  opacity: 0.75;
  transition: opacity 0.25s ease
}
#hd .sec-products .tab-content > div {
  display: none;
  position: relative
}
#hd .sec-products .tab-content > div[aria-current="true"] {
  display: block
}
#hd .sec-products .hd-wrapper {
  position: relative;
  overflow: hidden
}
#hd .sec-products .hd-wrapper:before, #hd .sec-products .hd-wrapper:after {
  content: '';
  display: block;
  width: 25%;
  height: calc(100% - 20px);
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 10px;
  pointer-events: none;
  z-index: 2
}
#hd .sec-products .hd-wrapper:before {
  background-image: url(../img/product/frame-left.svg);
  background-position: left bottom;
  bottom: 0;
  left: 0
}
#hd .sec-products .hd-wrapper:after {
  background-image: url(../img/product/frame-right.svg);
  background-position: right top;
  top: 0;
  right: 0
}
#hd .sec-products .subtab-list {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  position: relative
}
#hd .sec-products .subtab-list:before {
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  background-image: -moz-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.5));
  background-image: -webkit-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.5));
  background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none
}
#hd .sec-products .subtab-list li {
  width: 50%;
  padding: 1.5em .5em .5em;
  text-align: center;
  background: #3e3a39;
  cursor: pointer
}
#hd .sec-products .subtab-list li[aria-current="true"], #hd .sec-products .subtab-list li[aria-selected="true"] {
  background: #5503fa;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5)
}
#hd .sec-products .subtab-list li[aria-current="true"] h4, #hd .sec-products .subtab-list li[aria-selected="true"] h4 {
  color: white !important
}
#hd .sec-products .subtab-list h4 {
  color: #a4a4a4 !important;
  position: relative;
  z-index: 2
}
#hd .sec-products .hd-bg {
  width: 100%
}
#hd .sec-products .hd-bg img {
  width: 100%
}
#hd .sec-products .hd-content {
  position: absolute;
  left: 8%
}
#hd .sec-products .hd-content h3 {
  font-family: "TTNormsProNormal", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: bold
}
#hd .sec-products .hd-content h4 {
  font-family: "TTNormsProRegular", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: normal;
  text-transform: uppercase
}
#hd .sec-products .hd-content p {
  line-height: 1.5
}
#hd .sec-products .hd-btn-container {
  margin-top: 2em
}
#hd .sec-products .hd-btn {
  border-radius: 0;
  border: none;
  background: #e4190f;
  margin: 0
}
#hd .sec-products .hd-btn:first-child {
  padding-right: 1.25em;
  clip-path: polygon(0 0, calc(100% - .5em) 0, 100% 100%, 0% 100%)
}
#hd .sec-products .hd-btn:last-child {
  padding-left: 1.25em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.5em 100%)
}
#hd .sec-products .hd-btn:hover, #hd .sec-products .hd-btn:focus-visible {
  color: white;
  background-size: 200% 100%
}
#hd .sec-products .pd-container {
  display: none;
  position: relative;
  overflow: hidden
}
#hd .sec-products .pd-container .swiper-pd {
  margin-top: 60px
}
#hd .sec-products .pd-container .swiper-container {
  padding-left: 1px
}
#hd .sec-products .pd-container .pd-card {
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 24px 24px 14px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.25)
}
#hd .sec-products .pd-container .hd-tag {
  padding: .125em .25em 0 .5em;
  margin: 24px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2
}
#hd .sec-products .pd-container .hd-tag:before, #hd .sec-products .pd-container .hd-tag:after {
  content: '';
  display: block;
  height: 100%;
  background: inherit;
  position: absolute;
  top: 0;
  z-index: -1
}
#hd .sec-products .pd-container .hd-tag:before {
  width: 2em;
  transform: skewX(-25deg);
  right: -.5em
}
#hd .sec-products .pd-container .hd-tag:after {
  width: 100%;
  left: 0
}
#hd .sec-products .pd-container .img-container {
  display: block;
  width: 100%
}
#hd .sec-products .pd-container .img-container img {
  width: 185px;
  height: 185px;
  object-fit: contain;
  margin: 0 auto
}
#hd .sec-products .pd-container .swiper-button-prev, #hd .sec-products .pd-container .swiper-button-next {
  color: white;
  width: 1em;
  height: 1em;
  margin: 0;
  position: absolute;
  top: 50%
}
#hd .sec-products .pd-container .swiper-button-prev:after, #hd .sec-products .pd-container .swiper-button-next:after {
  font-size: 0.25em
}
#hd .sec-products .pd-container .swiper-pagination {
  margin: 20px auto 0;
  justify-content: center
}
#hd .sec-products .pd-container .swiper-pagination-bullet {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  line-height: 1.5;
  border-radius: 1em;
  white-space: nowrap;
  text-align: center;
  background: none
}
#hd .sec-products .pd-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #e4190f
}
#hd .sec-products .pd-container .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  display: none
}
#hd .sec-products .pd-container .logo-container {
  height: 32px;
  margin: 8px auto 32px
}
#hd .sec-products .pd-container .logo-container a {
  display: block;
  height: 100%
}
#hd .sec-products .pd-container .logo-container img {
  height: 100%;
  width: auto;
  max-width: none !important;
  object-fit: contain;
  margin: 0 .25em
}
#hd .sec-products .pd-container .hd-txt {
  margin-bottom: auto
}
#hd .sec-products .pd-container .hd-txt a:hover h4, #hd .sec-products .pd-container .hd-txt a:focus-visible h4 {
  text-decoration: underline;
  text-decoration-thickness: 1px
}
#hd .sec-products .pd-container h4 {
  margin-bottom: 0
}
#hd .sec-products .pd-container p {
  font-size: .875em;
  line-height: 1.4em;
  padding: 12px 3px 20px
}
#hd .sec-products .pd-container .hd-btn {
  display: block;
  width: 100%;
  clip-path: none;
  margin: 1em auto 0;
  text-align: center
}
#hd #pageContent-tab-matrix .hd-btn {
  background-color: #542cc6;
  background-image: -moz-linear-gradient(90deg, #542cc6, #37117a);
  background-image: -webkit-linear-gradient(90deg, #542cc6, #37117a);
  background-image: linear-gradient(90deg, #542cc6, #37117a)
}
#hd #pageContent-tab-matrix .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #542cc6;
  background-image: -moz-linear-gradient(90deg, #542cc6, #37117a);
  background-image: -webkit-linear-gradient(90deg, #542cc6, #37117a);
  background-image: linear-gradient(90deg, #542cc6, #37117a)
}
#hd #pageContent-tab-strix .hd-btn {
  background-color: #D000D2;
  background-image: -moz-linear-gradient(90deg, #D000D2, #023bf4);
  background-image: -webkit-linear-gradient(90deg, #D000D2, #023bf4);
  background-image: linear-gradient(90deg, #D000D2, #023bf4)
}
#hd #pageContent-tab-strix .hd-tag:before {
  background: #023bf4
}
#hd #pageContent-tab-strix .hd-tag:after {
  background-color: #D000D2;
  background-image: -moz-linear-gradient(90deg, #D000D2, #023bf4);
  background-image: -webkit-linear-gradient(90deg, #D000D2, #023bf4);
  background-image: linear-gradient(90deg, #D000D2, #023bf4)
}
#hd #pageContent-tab-strix .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #D000D2;
  background-image: -moz-linear-gradient(90deg, #D000D2, #023bf4);
  background-image: -webkit-linear-gradient(90deg, #D000D2, #023bf4);
  background-image: linear-gradient(90deg, #D000D2, #023bf4)
}
#hd #pageContent-tab-tuf .hd-content {
  left: auto;
  right: 8%
}
#hd #pageContent-tab-tuf .hd-btn {
  background-color: #A97700;
  background-image: -moz-linear-gradient(90deg, #A97700, #A96700);
  background-image: -webkit-linear-gradient(90deg, #A97700, #A96700);
  background-image: linear-gradient(90deg, #A97700, #A96700)
}
#hd #pageContent-tab-tuf .hd-tag:before {
  background: #A96700
}
#hd #pageContent-tab-tuf .hd-tag:after {
  background-color: #A97700;
  background-image: -moz-linear-gradient(90deg, #A97700, #A96700);
  background-image: -webkit-linear-gradient(90deg, #A97700, #A96700);
  background-image: linear-gradient(90deg, #A97700, #A96700)
}
#hd #pageContent-tab-tuf .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #A97700;
  background-image: -moz-linear-gradient(90deg, #A97700, #A96700);
  background-image: -webkit-linear-gradient(90deg, #A97700, #A96700);
  background-image: linear-gradient(90deg, #A97700, #A96700)
}
#hd #pageContent-tab-dual .hd-btn {
  background-color: #0078CF;
  background-image: -moz-linear-gradient(90deg, #0078CF, #006698);
  background-image: -webkit-linear-gradient(90deg, #0078CF, #006698);
  background-image: linear-gradient(90deg, #0078CF, #006698)
}
#hd #pageContent-tab-dual .hd-tag:before {
  background: #006698
}
#hd #pageContent-tab-dual .hd-tag:after {
  background-color: #0078CF;
  background-image: -moz-linear-gradient(90deg, #0078CF, #006698);
  background-image: -webkit-linear-gradient(90deg, #0078CF, #006698);
  background-image: linear-gradient(90deg, #0078CF, #006698)
}
#hd #pageContent-tab-dual .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #0078CF;
  background-image: -moz-linear-gradient(90deg, #0078CF, #006698);
  background-image: -webkit-linear-gradient(90deg, #0078CF, #006698);
  background-image: linear-gradient(90deg, #0078CF, #006698)
}
#hd #pageContent-tab-proart .hd-btn {
  background-color: #8E6C46;
  background-image: -moz-linear-gradient(90deg, #8E6C46, #8c6e4e 25%);
  background-image: -webkit-linear-gradient(90deg, #8E6C46, #8c6e4e 25%);
  background-image: linear-gradient(90deg, #8E6C46, #8c6e4e 25%)
}
#hd #pageContent-tab-proart .hd-tag:before {
  background: #8c6e4e
}
#hd #pageContent-tab-proart .hd-tag:after {
  background-color: #8E6C46;
  background-image: -moz-linear-gradient(90deg, #8E6C46, #8c6e4e 25%);
  background-image: -webkit-linear-gradient(90deg, #8E6C46, #8c6e4e 25%);
  background-image: linear-gradient(90deg, #8E6C46, #8c6e4e 25%)
}
#hd #pageContent-tab-proart .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #8E6C46;
  background-image: -moz-linear-gradient(90deg, #8E6C46, #8c6e4e 25%);
  background-image: -webkit-linear-gradient(90deg, #8E6C46, #8c6e4e 25%);
  background-image: linear-gradient(90deg, #8E6C46, #8c6e4e 25%)
}
@media screen and (max-width: 1440px) {
  #hd .sec-products .tab-list .hd-img-container img {
    height: 3em
  }
  #hd .sec-products .tab-list li {
    padding-top: 1.25em
  }
  #hd .sec-products .tab-list li:nth-child(4) .hd-img-container img {
    height: 2.25em
  }
  #hd .sec-products .hd-content p {
    font-size: 0.875em;
    line-height: 1.5
  }
}
@media screen and (max-width: 1280px) {
  #hd .sec-products .tab-list li {
    font-size: 0.875em
  }
  #hd .sec-products .hd-bg img {
    width: 110%;
    max-width: none !important;
    margin: 0 -5%
  }
  #hd .sec-products .hd-content {
    left: 5%
  }
  #hd .sec-products .hd-btn-container {
    margin-top: 1em
  }
  #hd .sec-products .hd-btn {
    font-size: 1em
  }
  #hd .sec-products .pd-container {
    width: 95%
  }
  #hd #pageContent-tab-matrix .hd-content {
    width: 35%
  }
  #hd #pageContent-tab-strix .hd-bg img {
    margin: 0 -2% 0 -8%
  }
  #hd #pageContent-tab-tuf .hd-bg img {
    margin: 0 -10% 0 0
  }
  #hd #pageContent-tab-tuf .hd-content {
    right: 5%
  }
  #hd #pageContent-tab-dual .hd-bg img {
    margin: 0 -10% 0 0
  }
  #hd #pageContent-tab-dual .hd-content {
    width: 33.3333%
  }
}
@media screen and (max-width: 1024px) {
  #hd .sec-products {
    padding-top: 2em
  }
  #hd .sec-products .tab-list li {
    min-width: 0;
    padding: 1em 2%;
    font-size: 0.75em
  }
  #hd .sec-products .tab-list h3 {
    margin-top: 0.25em
  }
  #hd .sec-products .subtab-list li {
    padding-top: 1em;
    padding-bottom: 0.25em
  }
  #hd .sec-products .pd-container {
    width: 100%
  }
  #hd .sec-products .pd-container .swiper-pd {
    margin-top: 30px
  }
}
@media screen and (max-width: 1023px) {
  #hd .sec-products .hd-wrapper {
    flex-direction: column
  }
  #hd .sec-products .hd-bg {
    position: relative
  }
  #hd .sec-products .hd-bg:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 20%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: transparent;
    background-image: -moz-linear-gradient(180deg, transparent, #000);
    background-image: -webkit-linear-gradient(180deg, transparent, #000);
    background-image: linear-gradient(180deg, transparent, #000)
  }
  #hd .sec-products .hd-bg img {
    width: 145%;
    margin: 0
  }
  #hd .sec-products .hd-content {
    width: 100% !important;
    padding: 0 8% 4em;
    position: relative;
    left: 0 !important;
    right: 0 !important
  }
  #hd .sec-products .pd-container .swiper-pd {
    margin-top: 20px
  }
  #hd #pageContent-tab-matrix .hd-bg img {
    margin: 0 0 0 -45%
  }
  #hd #pageContent-tab-strix .hd-bg img {
    margin: 0 0 0 -45%
  }
  #hd #pageContent-tab-tuf .hd-bg img {
    margin: 0 -45% 0 0
  }
  #hd #pageContent-tab-dual .hd-bg img {
    margin: 0 -15% 0 -30%
  }
  #hd #pageContent-tab-proart .hd-bg img {
    margin: 0 0 0 -45%
  }
}
@media screen and (max-width: 768px) {
  #hd .sec-products .tab-list li {
    padding: 1em .25em
  }
}
@media screen and (max-width: 731px) {
  #hd .sec-products .pd-container .swiper-pd {
    margin-top: 30px
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-products {
    padding: 0
  }
  #hd .sec-products .hd-container {
    width: 100%
  }
  #hd .sec-products .pd-container {
    padding: 0 10px
  }
  #hd .sec-products .pd-container .pd-card {
    padding: 20px 20px 14px
  }
  #hd .sec-products .pd-container .swiper-button-prev, #hd .sec-products .pd-container .swiper-button-next {
    display: block;
    top: auto;
    bottom: 0
  }
  #hd .sec-products .pd-container .swiper-pagination {
    display: block;
    transform: translateX(0)
  }
  #hd .sec-products .pd-container .swiper-pagination-bullet {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 10px;
    margin: 2px;
    background: #707070;
    position: relative;
    overflow: hidden
  }
  #hd .sec-products .pd-container p {
    padding-inline: 0
  }
}
@media screen and (max-width: 480px) {
  #hd .sec-products .tab-list .hd-img-container img {
    height: 2em
  }
  #hd .sec-products .tab-list li:nth-child(4) .hd-img-container img {
    height: 1.5em
  }
  #hd .sec-products .hd-wrapper:before, #hd .sec-products .hd-wrapper:after {
    margin: 10px 5px
  }
}
#hd .sec-gallery {
  padding: 4em 0 6em
}
#hd .sec-gallery h2 {
  margin-bottom: 1em
}
#hd .sec-gallery .hd-wrapper {
  position: relative;
  overflow: hidden
}
#hd .sec-gallery .hd-wrapper:before, #hd .sec-gallery .hd-wrapper:after {
  content: '';
  display: block;
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: 2
}
#hd .sec-gallery .hd-wrapper:before {
  left: 0;
  background-color: transparent;
  background-image: -moz-linear-gradient(270deg, transparent, #000);
  background-image: -webkit-linear-gradient(270deg, transparent, #000);
  background-image: linear-gradient(270deg, transparent, #000)
}
#hd .sec-gallery .hd-wrapper:after {
  right: 0;
  background-color: transparent;
  background-image: -moz-linear-gradient(90deg, transparent, #000);
  background-image: -webkit-linear-gradient(90deg, transparent, #000);
  background-image: linear-gradient(90deg, transparent, #000)
}
#hd .sec-gallery #pageContent-swiper-gallery-1 {
  height: 56vh;
  margin-bottom: 6em
}
#hd .sec-gallery #pageContent-swiper-gallery-2 {
  height: 42vh
}
#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
}
@media screen and (max-width: 1440px) {
  #hd .sec-gallery {
    padding-bottom: 4em
  }
  #hd .sec-gallery #pageContent-swiper-gallery-1 {
    margin-bottom: 4em
  }
}
@media screen and (max-width: 1023px) {
  #hd .sec-gallery #pageContent-swiper-gallery-1 {
    height: 40vh
  }
  #hd .sec-gallery #pageContent-swiper-gallery-2 {
    height: 30vh
  }
}
@media screen and (max-width: 620px) {
  #hd .sec-gallery {
    padding-bottom: 2em
  }
  #hd .sec-gallery .hd-wrapper:before, #hd .sec-gallery .hd-wrapper:after {
    display: none
  }
  #hd .sec-gallery #pageContent-swiper-gallery-1 {
    height: 30vh;
    margin-bottom: 2em
  }
  #hd .sec-gallery #pageContent-swiper-gallery-2 {
    height: 20vh
  }
}
#hd .sec-psu {
  position: relative;
  overflow: hidden
}
#hd .sec-psu img {
  width: 100%
}
#hd .sec-psu .hd-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 4em 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
#hd .sec-psu .hd-container p {
  max-width: 34em
}
#hd .sec-psu .hd-btn {
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  padding: .5em 1em;
  margin: 2em 0 1em;
  color: white;
  border: 1px solid white;
  border-radius: 2em;
  transition: transform 0.25s ease
}
#hd .sec-psu .hd-btn p {
  font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
}
#hd .sec-psu .hd-btn:hover, #hd .sec-psu .hd-btn:focus-visible {
  background: white;
  color: black
}
#hd .sec-psu .hd-btn:active {
  transform: translate(0, 1px)
}
@media screen and (max-width: 1023px) {
  #hd .sec-psu img {
    width: 170%;
    max-width: none !important;
    margin-left: -65%
  }
  #hd .sec-psu .hd-container {
    padding-top: 0;
    position: relative;
    width: 100%
  }
  #hd .sec-psu .hd-container:before {
    content: '';
    display: block;
    width: 100%;
    height: 20%;
    background-color: #000;
    background-image: -moz-linear-gradient(0deg, #000, transparent);
    background-image: -webkit-linear-gradient(0deg, #000, transparent);
    background-image: linear-gradient(0deg, #000, transparent);
    background-color: transparent;
    position: absolute;
    bottom: 100%;
    left: 0
  }
  #hd .sec-psu .hd-container .hd-content {
    width: 90%;
    margin: 0 auto
  }
  #hd .sec-psu .hd-container p {
    max-width: none
  }
}
@media screen and (max-width: 480px) {
  #hd .sec-psu h2.txt-larger {
    font-size: 2.75em
  }
}
#hd header {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  background: #151515;
  z-index: 9
}
#hd header .align-items-center {
  align-items: center
}
#hd header .flex-nowrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  height: 50px
}
#hd header .hd-w1300 {
  max-width: 1300px;
  width: 90%;
  margin: 0 auto;
  position: relative
}
#hd header .menu {
  text-align: center;
  align-items: center;
  display: flex;
  flex-wrap: nowrap
}
#hd header .menu a {
  font-family: "TTNormsProRegular", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: .018em;
  color: white;
  padding: 0.25em 1em;
  cursor: pointer;
  transition: color 0.25s ease
}
#hd header .menu a[aria-current="page"] {
  color: #e4190f;
  font-weight: 600;
  cursor: default
}
#hd header .menu a:hover, #hd header .menu a:focus-visible {
  color: #e4190f
}
@media screen and (max-width: 1024px) {
  #hd header {
    font-size: 14px
  }
}
/*# sourceMappingURL=hd-style.css.map */