@import url(../lib/swiper/swiper-bundle.min.css);
@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto-condensed.css");
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


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: #76b900
}

#hd * ::-moz-selection {
    background: #1d2124;
    color: #76b900
}

#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 #76b900;
    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 fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeInMedia {
    0% {
        opacity: 0;
        transform: scale(0.8)
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes fadeInMedia {
    0% {
        opacity: 0;
        transform: scale(0.8)
    }

    100% {
        opacity: 1
    }
}

@-ms-keyframes fadeInMedia {
    0% {
        opacity: 0;
        transform: scale(0.8)
    }

    100% {
        opacity: 1
    }
}

@-o-keyframes fadeInMedia {
    0% {
        opacity: 0;
        transform: scale(0.8)
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInMedia {
    0% {
        opacity: 0;
        transform: scale(0.8)
    }

    100% {
        opacity: 1
    }
}

@-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,"Kanit";
    font-size: 16px
}

#hd h2,
#hd .h2 {
    font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif ,"Kanit";
    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,"Kanit";
    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,"Kanit";
    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,"Kanit";
    font-size: 1.5em;
    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,"Kanit",;
    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,"Kanit";
    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,"Kanit"
}

#hd p {
    font-family: "TTNormsProRegular", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif,"Kanit";
    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: #76b900 !important
}

#hd .color-primary {
    color: #76b900 !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% 120%;
    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
}

#hd .nobr {
    white-space: nowrap
}

@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:hover span.color-gradient,
#hd .hd-btn:focus-visible span.color-gradient {
    color: black !important;
    background: black;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#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: #76b900;
    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 #76b900
}

#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: calc(100% - 100px);
    position: absolute;
    top: 100px;
    left: 3.5%;
    z-index: 11;
    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: #76b900
}

#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 {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0
}

#hd .hd-lightbox .hd-box {
    width: 60%;
    max-height: calc(100% - 100px);
    max-width: 1200px;
    background: black;
    position: absolute;
    inset: 0;
    margin: 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: #76b900
}

@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
}

#hd .list-info>li {
    padding: 20px 30px
}

#hd .list-info .hd-frame {
    height: 100%;
    padding: 54px 40px;
    border-radius: 20px;
    background: black;
    border: 1px solid white
}

#hd .list-info .hd-img-container {
    margin-bottom: 50px
}

#hd .list-info h3 {
    margin-bottom: 0.5em
}

@media screen and (max-width: 1280px) {
    #hd .list-info>li {
        padding-inline: 20px
    }

    #hd .list-info .hd-frame {
        padding: 40px 30px
    }
}

@media screen and (max-width: 1024px) {
    #hd .list-info>li {
        padding-inline: 16px
    }

    #hd .list-info .hd-frame {
        padding: 30px 24px
    }
}

@media screen and (max-width: 1023px) {
    #hd .list-square>li {
        line-height: 1.25
    }
}

@media screen and (max-width: 620px) {
    #hd .list-info>li {
        width: 100%
    }

    #hd .list-info .hd-frame {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 20px
    }

    #hd .list-info .hd-img-container {
        width: 40%;
        flex-shrink: 0;
        margin-bottom: 0
    }

    #hd .list-info .hd-txt {
        padding-left: 20px
    }
}

@media screen and (max-width: 480px) {
    #hd .list-info>li {
        padding: 0;
        margin-bottom: 10px
    }

    #hd .list-info .hd-frame {
        flex-direction: column;
        padding: 30px 20px
    }

    #hd .list-info .hd-img-container {
        width: 100%;
        margin-bottom: 20px
    }

    #hd .list-info .hd-txt {
        padding-left: 0
    }
}

#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: #76b900;
    border-color: #76b900;
    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: 80%;
    height: 80%;
    position: absolute;
    inset: 0;
    margin: auto
}

#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: 44px;
    height: 44px;
    color: #76b900;
    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: .5;
    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;
    padding-left: 0.5em;
    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,
#hd .swiper-pagination-wrapper.is-paused .swiper-pagination-bullet:after {
    animation-play-state: paused
}

#hd .swiper-controls.is-paused .play,
#hd .swiper-pagination-wrapper.is-paused .play {
    display: block
}

#hd .swiper-controls.is-paused .pause,
#hd .swiper-pagination-wrapper.is-paused .pause {
    display: none
}

#hd .swiper-pause-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
    z-index: 2
}

#hd .swiper-pause-btn .play,
#hd .swiper-pause-btn .pause {
    width: 100%;
    height: 100%;
    position: relative
}

#hd .swiper-pause-btn .play {
    display: none
}

@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
    }

    #hd .swiper-pagination-bullet {
        margin: 0 .25em
    }
}

#hd .swiper-card {
    width: 126%;
    margin: 0 -13%
}

#hd .swiper-card .swiper-pagination-wrapper {
    width: 100%
}

#hd .swiper-card .swiper-pagination {
    flex-wrap: nowrap;
    justify-content: center;
    padding: 6px 4px
}

#hd .swiper-card .custom-dot {
    font-size: 1em;
    line-height: 1;
    width: auto;
    height: auto;
    color: white;
    background: black;
    padding: 1em 1.25em 1.25em;
    position: relative
}

#hd .swiper-card .custom-dot:before {
    content: '';
    width: 100%;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none
}

#hd .swiper-card .custom-dot:after {
    display: none
}

#hd .swiper-card .custom-dot.swiper-pagination-bullet-active {
    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)
}

#hd .swiper-card .custom-dot.swiper-pagination-bullet-active:before {
    background: white
}

#hd .swiper-card .custom-dot-name {
    font-family: "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 1.5em
}

#hd .swiper-card .hd-txt {
    max-width: 46em;
    padding: 30px 0 0;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden
}

#hd .swiper-card .swiper-slide {
    transform-origin: 50% center;
    transition: transform-origin, transform
}

#hd .swiper-card .swiper-slide.swiper-slide-prev {
    transform-origin: 85% center
}

#hd .swiper-card .swiper-slide.swiper-slide-next {
    transform-origin: 15% center
}

#hd .swiper-card .swiper-slide.swiper-slide-active .hd-txt {
    opacity: 1;
    visibility: visible;
    animation-delay: .6s;
    animation-duration: .4s;
    animation-name: fadeInUp;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: both
}

@media screen and (max-width: 1440px) {
    #hd .swiper-card {
        width: 170%;
        margin-inline: -35%
    }

    #hd .swiper-card .swiper-pagination-wrapper {
        width: 140%;
        margin-left: -20%;
        margin-top: 1em
    }

    #hd .swiper-card .custom-dot-name {
        font-size: 1.25em
    }

    #hd .swiper-card .hd-txt {
        padding: 40px 0
    }
}

@media screen and (max-width: 1280px) {
    #hd .swiper-card .custom-dot {
        font-size: 0.875em
    }
}

@media screen and (max-width: 1024px) {
    #hd .swiper-card {
        width: 180%;
        margin-inline: -40%
    }

    #hd .swiper-card .custom-dot {
        font-size: 0.75em
    }

    #hd .swiper-card .hd-txt {
        padding: 20px 0 30px
    }
}

@media screen and (max-width: 1023px) {
    #hd .swiper-card {
        width: 240%;
        margin-inline: -70%
    }
}

@media screen and (max-width: 768px) {
    #hd .swiper-card {
        margin-bottom: 60px
    }

    #hd .swiper-card .custom-dot {
        padding: 1em
    }

    #hd .swiper-card .custom-dot:before {
        height: 4px
    }
}

@media screen and (max-width: 620px) {
    #hd .swiper-card {
        width: 260%;
        margin-inline: -80%
    }

    #hd .swiper-card .swiper-pagination-wrapper {
        width: 120%;
        margin-left: -10%;
        margin-top: 0
    }

    #hd .swiper-card .swiper-pagination {
        width: auto;
        max-width: 100vw;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding-inline: 0;
        margin-inline: auto;
        overflow-x: auto;
        overflow-y: hidden
    }

    #hd .swiper-card .custom-dot {
        flex-shrink: 0;
        padding: 1.25em .875em 1em
    }

    #hd .swiper-card .custom-dot-name {
        font-size: 1.125em
    }
}

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(118, 185, 0, 0.25);
    box-shadow: 0px 4px 16px rgba(118, 185, 0, 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: #76b900;
    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: black;
    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: #518000
}

@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 {
    position: relative;
    z-index: 2
}

#hd .sec-kv #pageContent-slider-kv {
    margin-top: -5%
}

#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 {
    position: relative;
    z-index: 2;
    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:hover,
#hd .sec-intro nav a:focus-visible {
    background: black
}

#hd .sec-intro .hd-title {
    padding: 4em 0 2em
}

#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% 6em;
    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: #76b900
}

#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: #76b900;
    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: 1024px) {
    #hd .sec-intro .hd-award-container {
        padding: 0;
        padding-bottom: 2em
    }

    #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 1em
    }

    #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-media {
    padding: 4em 0 0;
    position: relative;
    z-index: 2
}

#hd .sec-media .hd-container.hd-w1200 {
    margin-bottom: 40px
}

#hd .sec-media .filter-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    font-size: 1.25em
}

#hd .sec-media .filter-wrapper .title {
    display: block;
    flex-shrink: 0;
    font-size: 1em;
    font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    padding: .4em 1.5em .25em 0
}

#hd .sec-media .filter-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border: none;
    position: relative;
    overflow-x: auto;
    margin-bottom: 1em
}

#hd .sec-media .filter-container label {
    display: block;
    flex-shrink: 0;
    font-size: 1em;
    font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    padding: .5em 1.5em .25em;
    border-radius: 1.5em;
    background: #4d4e4f;
    color: white;
    margin-right: 4px;
    margin-bottom: 4px;
    position: relative;
    cursor: pointer
}

#hd .sec-media .filter-container label:has(input:checked) {
    background: #518000
}

#hd .sec-media .filter-container label:has(input:checked) i {
    transform: rotate(0deg) scale(1)
}

#hd .sec-media .filter-container label:hover i:before,
#hd .sec-media .filter-container label:hover i:after {
    background: black
}

#hd .sec-media .filter-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

#hd .sec-media .filter-container i {
    display: inline-block;
    vertical-align: middle;
    width: .75em;
    height: .75em;
    margin-bottom: 0.25em;
    margin-right: -0.5em;
    margin-left: 0.25em;
    position: relative;
    transform: rotate(45deg) scale(0.7);
    transition: transform 0.4s
}

#hd .sec-media .filter-container i:before,
#hd .sec-media .filter-container i:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

#hd .sec-media .filter-container i:before {
    transform: translate(0, 0) rotate(-45deg)
}

#hd .sec-media .filter-container i:after {
    transform: translate(0, 0) rotate(45deg)
}

#hd .sec-media .list-vid {
    margin-left: -1em;
    margin-right: -1em;
    text-align: center
}

#hd .sec-media .list-vid.collapsed~.btn-container .btn-more span.on {
    display: block
}

#hd .sec-media .list-vid.collapsed~.btn-container .btn-more span.off {
    display: none
}

#hd .sec-media .list-vid.no-result li.no-result {
    display: block;
    animation: fadeIn .4s ease
}

#hd .sec-media .list-vid li {
    padding: 0 1em;
    margin-bottom: 2em
}

#hd .sec-media .list-vid li.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    animation: fadeInMedia .4s ease
}

#hd .sec-media .list-vid li.is-visible.show-limited {
    display: none
}

#hd .sec-media .list-vid li.is-hidden {
    display: none
}

#hd .sec-media .list-vid li.no-result {
    flex: 1 1 100%;
    text-align: center;
    padding: 40px 10px;
    display: none;
    transition: opacity 0.3s ease
}

#hd .sec-media .list-vid li.hd-col50 .icon-play {
    width: 80px;
    height: 80px
}

#hd .sec-media .list-vid li.hd-col50 .icon-play:before {
    border-width: 18px 0 18px 26px
}

#hd .sec-media .list-vid h3 {
    padding: .75em 0 0
}

#hd .sec-media .btn-more span.on {
    display: none
}

#hd .sec-media .btn-more span.off {
    display: block
}

#hd .sec-media .cover-container .icon-play {
    background: none;
    border: 1px solid white;
    opacity: 1
}

#hd .sec-media figure {
    position: relative
}

#hd .sec-media figure .hd-tag {
    font-size: 1rem;
    font-weight: bold;
    padding: 0 1.5em 0 .5em;
    background: #76b900;
    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-media .hd-txt {
    width: 100%;
    height: 100%;
    background-color: #76b900;
    background-image: -moz-linear-gradient(180deg, #76b900, #000);
    background-image: -webkit-linear-gradient(180deg, #76b900, #000);
    background-image: linear-gradient(180deg, #76b900, #000);
    position: absolute;
    top: 0;
    left: 0
}

#hd .sec-media .hd-txt img {
    width: 100%
}

#hd .sec-media .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: 1440px) {
    #hd .sec-media .filter-container label {
        padding-left: 1em
    }
}

@media screen and (max-width: 1280px) {
    #hd .sec-media .filter-wrapper {
        font-size: 1.125em
    }
}

@media screen and (max-width: 1024px) {
    #hd .sec-media .list-vid {
        margin-left: -.5em;
        margin-right: -.5em
    }

    #hd .sec-media .list-vid li {
        padding: 0 .5em
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-media .filter-wrapper {
        flex-direction: column;
        justify-content: center;
        text-align: center
    }

    #hd .sec-media .filter-wrapper .title {
        padding-left: 1em;
        padding-right: 1em
    }

    #hd .sec-media .filter-container {
        justify-content: center
    }

    #hd .sec-media .filter-container label {
        font-size: 0.9em;
        padding-block: .75em .5em
    }

    #hd .sec-media .list-vid li {
        padding: 0 .25em
    }

    #hd .sec-media .hd-txt p {
        font-size: 2.5vw
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-media {
        padding: 2em 0
    }

    #hd .sec-media .list-vid li {
        width: 50%;
        margin-bottom: 1em
    }

    #hd .sec-media .list-vid li.hd-col50 {
        width: 100%
    }

    #hd .sec-media .list-vid h3 {
        font-size: .9em
    }
}

#hd .sec-article {
    padding: 4em 0;
    position: relative;
    z-index: 2
}

#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-rtx {
    padding: 40px 0;
    background: black;
    position: relative;
    overflow: hidden;
    z-index: 2
}

#hd .sec-rtx .hd-bg {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    user-select: none
}

#hd .sec-rtx .hd-bg:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 10%;
    position: absolute;
    top: 0;
    left: 0;
    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);
    z-index: 2
}

#hd .sec-rtx .hd-bg img {
    width: 100%
}

#hd .sec-rtx h2 {
    margin-bottom: 0
}

#hd .sec-rtx p {
    line-height: 1.5
}

#hd .sec-rtx .hd-title {
    margin-bottom: 2.5em
}

#hd .sec-rtx .hd-content {
    margin-bottom: 2em
}

#hd .sec-rtx .hd-content img {
    width: 100%;
    max-width: 390px !important;
    margin-left: auto;
    margin-right: auto
}

#hd .sec-rtx .hd-content li {
    margin-bottom: 1.75em
}

#hd .sec-rtx .hd-content .h4 {
    margin-bottom: 0
}

#hd .sec-rtx .list-ksp li {
    padding: 18px
}

#hd .sec-rtx .list-ksp .hd-frame {
    height: 100%;
    padding: 30px 16px;
    background: #1a1a1a
}

#hd .sec-rtx .list-ksp img {
    width: 35%;
    margin: 0 auto 1em
}

@media screen and (min-width: 2560px) {
    #hd .sec-rtx .hd-content img {
        width: 60%;
        max-width: none !important
    }
}

@media screen and (max-width: 1280px) {
    #hd .sec-rtx {
        padding: 100px 0
    }

    #hd .sec-rtx .hd-title {
        margin-bottom: 1.5em
    }

    #hd .sec-rtx .hd-content {
        margin-bottom: 1em
    }

    #hd .sec-rtx .list-ksp img {
        width: 40%
    }
}

@media screen and (max-width: 1024px) {
    #hd .sec-rtx .list-ksp li {
        padding: 8px
    }

    #hd .sec-rtx .list-ksp .hd-frame {
        padding: 20px 8px
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-rtx .hd-bg img {
        width: 140%;
        max-width: none !important;
        margin-left: -20%
    }

    #hd .sec-rtx .list-ksp p {
        font-size: 0.875em
    }
}

@media screen and (max-width: 620px) {
    #hd .sec-rtx .list-ksp li {
        width: 33.3333%
    }
}

@media screen and (max-width: 480px) {
    #hd .sec-rtx {
        padding: 40px 0
    }

    #hd .sec-rtx .hd-bg img {
        width: 300%;
        margin-left: -150%
    }

    #hd .sec-rtx .hd-title {
        margin-bottom: .5em
    }

    #hd .sec-rtx .hd-content {
        flex-direction: column;
        align-items: center
    }

    #hd .sec-rtx .hd-content figure {
        width: 100%
    }

    #hd .sec-rtx .hd-content .hd-txt {
        width: auto;
        max-width: 100%
    }

    #hd .sec-rtx .hd-content img {
        margin: 0 auto
    }

    #hd .sec-rtx .list-ksp li {
        width: 100%
    }

    #hd .sec-rtx .list-ksp .hd-frame {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        text-align: left
    }

    #hd .sec-rtx .list-ksp img {
        width: 4.5em;
        flex-shrink: 0
    }

    #hd .sec-rtx .list-ksp .hd-txt {
        width: 100%;
        padding-top: 4%;
        padding-left: 1em
    }

    #hd .sec-rtx .list-ksp .h4 {
        font-size: 1.125em
    }
}

#hd .sec-features {
    padding: 4em 0
}

#hd .sec-features h2 {
    margin-bottom: 0.5em
}

#hd .sec-features .tab-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    background: black;
    position: sticky;
    top: 50px;
    padding-bottom: 6px;
    z-index: 10
}

#hd .sec-features .tab-container button {
    display: block;
    flex-shrink: 0;
    font-size: 1.5em;
    font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    padding: .5em 1.5em .25em;
    border-radius: 20px 0 20px 0;
    color: white;
    margin: 5px;
    position: relative;
    z-index: 3
}

#hd .sec-features .tab-container button:before,
#hd .sec-features .tab-container button:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    inset: 0
}

#hd .sec-features .tab-container button:before {
    background-color: #fff 9%;
    background-image: -moz-linear-gradient(-45deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
    background-image: -webkit-linear-gradient(-45deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
    background-image: linear-gradient(-45deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
    background-size: 150% 100%;
    background-position: 0% 0;
    background-repeat: repeat-x;
    z-index: -2;
    transition: background .4s, opacity .4s;
    opacity: 0.5
}

#hd .sec-features .tab-container button:after {
    background: black;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: auto;
    z-index: -1
}

#hd .sec-features .tab-container button:hover:before,
#hd .sec-features .tab-container button:focus-visible:before {
    background-position: 100% 0;
    opacity: 1
}

#hd .sec-features .tab-container button[aria-selected="true"] {
    pointer-events: none
}

#hd .sec-features .tab-container button[aria-selected="true"]:before {
    opacity: 1
}

#hd .sec-features .tab-container button[aria-selected="true"]:after {
    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)
}

#hd .sec-features .swiper-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

#hd .sec-features .swiper-pagination-wrapper .vid-control {
    position: relative;
    margin: 0
}

@media screen and (max-width: 1440px) {
    #hd .sec-features .tab-container button {
        font-size: 1.25em
    }
}

@media screen and (max-width: 1280px) {
    #hd .sec-features .tab-container button {
        font-size: 1.125em;
        margin: 2px
    }
}

@media screen and (max-width: 1023px) {
    #hd .sec-features .tab-container {
        max-width: none;
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding-inline: 1em;
        overflow-x: auto
    }

    #hd .sec-features .tab-container::-webkit-scrollbar {
        heigth: 5px
    }

    #hd .sec-features .tab-container::-webkit-scrollbar-track {
        background: #f1f1f1
    }

    #hd .sec-features .tab-container::-webkit-scrollbar-thumb {
        background: #888
    }

    #hd .sec-features .tab-container::-webkit-scrollbar-thumb:hover {
        background: #555
    }

    #hd .sec-features .tab-container button {
        font-size: 1em;
        padding-block: .75em .5em;
        border-width: 1px
    }

    #hd .sec-features .tab-container button:first-child {
        margin-left: auto
    }

    #hd .sec-features .tab-container button:last-child {
        margin-right: auto
    }
}

#hd .tab-cooling {
    padding: 40px 0;
    background: black;
    position: relative;
    overflow: hidden
}

#hd .tab-cooling .hd-container {
    position: relative;
    z-index: 2
}

#hd .tab-cooling h2 {
    margin-bottom: 0
}

#hd .tab-cooling .hd-img-main {
    margin-top: -16%;
    margin-bottom: -13%;
    position: relative
}

#hd .tab-cooling .hd-img-main img {
    width: 100%
}

#hd .tab-cooling .hd-img-main img.hd-pd {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

#hd .tab-cooling .hd-frame {
    background: black;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.75)
}

#hd .tab-cooling .swiper-container {
    overflow: visible
}

#hd .tab-cooling .swiper {
    overflow: visible
}

#hd .tab-cooling .swiper-slide {
    height: auto;
    padding: 2px 30px
}

#hd .tab-cooling .swiper-slide .hd-frame {
    height: 100%;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    z-index: 2
}

#hd .tab-cooling .swiper-slide .hd-img-container {
    margin-left: -1px;
    margin-right: 1px;
    position: relative;
    overflow: hidden;
    z-index: 2
}

#hd .tab-cooling .swiper-slide .vid-container {
    position: relative;
    overflow: hidden
}

#hd .tab-cooling .swiper-slide .vid-container video {
    display: block;
    width: 100%
}

#hd .tab-cooling .swiper-slide .hd-content {
    padding: 30px 20px 30px 5%;
    z-index: 3
}

#hd .tab-cooling .swiper-button-prev,
#hd .tab-cooling .swiper-button-next {
    width: 78px;
    height: 78px;
    border-radius: 40px;
    margin-inline: -68px;
    background: #16042d;
    border: 1px solid #e400ff
}

#hd .tab-cooling .swiper-button-prev:before,
#hd .tab-cooling .swiper-button-next:before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #FFFFFF;
    margin-right: -5px;
    transition: 0.4s ease
}

#hd .tab-cooling .swiper-button-prev:after,
#hd .tab-cooling .swiper-button-next:after {
    display: none
}

#hd .tab-cooling .swiper-button-prev:hover:before,
#hd .tab-cooling .swiper-button-prev:focus-visible:before,
#hd .tab-cooling .swiper-button-next:hover:before,
#hd .tab-cooling .swiper-button-next:focus-visible:before {
    transform: scale(1.4, 1.4)
}

#hd .tab-cooling .swiper-button-prev.swiper-button-disabled,
#hd .tab-cooling .swiper-button-next.swiper-button-disabled {
    opacity: 0
}

#hd .tab-cooling .swiper-button-prev:before {
    transform: scale(-1, 1);
    margin-right: 0;
    margin-left: -5px
}

#hd .tab-cooling .swiper-button-prev:hover:before,
#hd .tab-cooling .swiper-button-prev:focus-visible:before {
    transform: scale(-1.4, 1.4)
}

#hd .tab-cooling .deco-hr {
    width: 24%;
    margin: -3% auto -8%;
    pointer-events: none;
    user-select: none;
    z-index: -1
}

@media screen and (max-width: 1280px) {
    #hd .tab-cooling {
        padding: 20px 0
    }

    #hd .tab-cooling .swiper-slide {
        padding: 2px 20px
    }

    #hd .tab-cooling .swiper-slide .hd-content {
        padding: 30px
    }

    #hd .tab-cooling .swiper-button-prev,
    #hd .tab-cooling .swiper-button-next {
        width: 60px;
        height: 60px;
        margin-inline: -48px
    }
}

@media screen and (max-width: 1024px) {
    #hd .tab-cooling .swiper-slide {
        padding: 2px 16px
    }

    #hd .tab-cooling .swiper-button-prev,
    #hd .tab-cooling .swiper-button-next {
        width: 60px;
        height: 60px;
        margin-inline: -48px
    }
}

@media screen and (max-width: 1023px) {
    #hd .tab-cooling .hd-img-main {
        width: 120%;
        margin-left: -10%
    }

    #hd .tab-cooling .hd-scroller .hd-content {
        width: 60%
    }
}

@media screen and (max-width: 768px) {
    #hd .tab-cooling .hd-img-main {
        margin-top: -10%
    }

    #hd .tab-cooling .hd-scroller .hd-content {
        width: 100%
    }

    #hd .tab-cooling .swiper-slide .hd-frame {
        flex-direction: column;
        padding: 20px 0
    }

    #hd .tab-cooling .swiper-slide .hd-content {
        width: 100%
    }

    #hd .tab-cooling .swiper-slide .hd-img-container {
        width: 100%;
        margin: 0
    }
}

@media screen and (max-width: 480px) {
    #hd .tab-cooling {
        padding-top: 60px;
        padding-bottom: 60px
    }

    #hd .tab-cooling .deco-hr {
        width: 60%;
        margin-top: -10%
    }

    #hd .tab-cooling .swiper-slide {
        padding: 2px 4px
    }

    #hd .tab-cooling .swiper-slide.swiper-slide-active .hd-content {
        animation-name: none
    }

    #hd .tab-cooling .swiper-slide .hd-content {
        padding: 20px 16px;
        position: relative
    }

    #hd .tab-cooling .swiper-slide .hd-img-container {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        position: relative
    }

    #hd .tab-cooling .swiper-button-prev,
    #hd .tab-cooling .swiper-button-next {
        width: 44px;
        height: 44px;
        margin-inline: -38px;
        top: auto;
        bottom: -36px
    }

    #hd .tab-cooling .swiper-button-prev:before,
    #hd .tab-cooling .swiper-button-next:before {
        border-width: 6px 0 6px 10px
    }

    #hd .tab-cooling .swiper-button-prev:hover:before,
    #hd .tab-cooling .swiper-button-prev:focus-visible:before,
    #hd .tab-cooling .swiper-button-next:hover:before,
    #hd .tab-cooling .swiper-button-next:focus-visible:before {
        transform: scale(1, 1)
    }

    #hd .tab-cooling .swiper-button-prev:hover:before,
    #hd .tab-cooling .swiper-button-prev:focus-visible:before {
        transform: scale(-1, 1)
    }
}

#hd .tab-reliability {
    padding: 40px 0;
    position: relative;
    overflow: hidden
}

#hd .tab-reliability .swiper-container {
    overflow: visible
}

#hd .tab-reliability .swiper-slide {
    height: auto;
    padding: 2px 30px
}

#hd .tab-reliability .hd-frame {
    height: 100%;
    padding: 60px 0;
    border: 1px solid rgba(255, 255, 255, 0.75);
    position: relative;
    overflow: hidden;
    z-index: 2
}

#hd .tab-reliability .hd-content {
    padding: 30px 8% 30px 20px;
    position: relative;
    z-index: 2
}

#hd .tab-reliability .hd-img-container {
    position: relative;
    overflow: hidden
}

#hd .tab-reliability .hd-img-container video {
    display: block;
    width: 100%
}

#hd .tab-reliability .hd-img-container>img {
    width: 100%;
    max-width: 400px !important;
    margin: 0 auto
}

@media screen and (max-width: 1280px) {
    #hd .tab-reliability {
        padding: 20px 0
    }

    #hd .tab-reliability .swiper-slide {
        padding: 2px 20px
    }

    #hd .tab-reliability .hd-content {
        padding: 30px
    }
}

@media screen and (max-width: 1024px) {
    #hd .tab-reliability .swiper-slide {
        padding: 2px 16px
    }
}

@media screen and (max-width: 768px) {
    #hd .tab-reliability .hd-frame {
        flex-direction: column;
        padding: 0
    }

    #hd .tab-reliability .hd-content,
    #hd .tab-reliability .hd-img-container {
        width: 100%;
        margin: 0
    }
}

@media screen and (max-width: 620px) {
    #hd .tab-reliability p {
        font-size: 0.875em;
        line-height: 1.25
    }
}

@media screen and (max-width: 480px) {
    #hd .tab-reliability {
        padding-top: 60px;
        padding-bottom: 60px
    }

    #hd .tab-reliability .swiper-slide {
        padding: 2px 4px
    }

    #hd .tab-reliability .hd-content {
        padding: 20px 16px
    }
}

#hd .tab-software {
    padding: 40px 0 0;
    position: relative;
    overflow: hidden
}

#hd .tab-software h2 {
    margin-bottom: .5em
}

#hd .tab-software .swiper-slide {
    padding-top: 20px
}

#hd .tab-software .swiper-slide .vid-control {
    display: none
}

#hd .tab-software .swiper-slide img.hd-d-none {
    display: block !important
}

#hd .tab-software .swiper-slide.swiper-slide-active .vid-control {
    display: block
}

#hd .tab-software .swiper-slide.swiper-slide-active img.hd-d-none {
    display: none !important
}

#hd .tab-software .swiper-slide.swiper-slide-active .is-reduced-motion img.hd-d-none {
    display: block !important
}

#hd .tab-software .hd-img-container {
    border-radius: 20px;
    position: relative;
    overflow: hidden
}

#hd .tab-software .hd-img-container img {
    width: 100%
}

#hd .tab-software .custom-dot {
    min-width: 15.5em;
    text-align: center
}

#hd .tab-software .hd-btn-container .hd-btn {
    margin-inline: .5em
}

@media screen and (max-width: 1440px) {
    #hd .tab-software h2 {
        margin-bottom: 0
    }

    #hd .tab-software .swiper-slide {
        padding-top: 40px
    }
}

@media screen and (max-width: 1280px) {
    #hd .tab-software {
        padding: 20px 0
    }
}

@media screen and (max-width: 1024px) {
    #hd .tab-software .swiper-slide {
        padding-top: 20px
    }
}

@media screen and (max-width: 768px) {
    #hd .tab-software .swiper-card {
        margin-bottom: 0
    }

    #hd .tab-software .custom-dot {
        min-width: 0
    }
}

#hd .tab-psu {
    position: relative;
    overflow: hidden
}

#hd .tab-psu .hd-img-container {
    width: 100%;
    height: 0;
    padding-bottom: 38.671875%;
    position: relative
}

#hd .tab-psu .hd-img-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: 95% center
}

#hd .tab-psu .hd-container {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 3;
    pointer-events: none
}

#hd .tab-psu .hd-content {
    padding: 40px 0;
    pointer-events: all
}

#hd .tab-psu .hd-content h2 {
    margin-bottom: 0.25em
}

#hd .tab-psu .hd-content h3 {
    margin-bottom: 1em
}

#hd .tab-psu .hd-content p {
    max-width: 36em
}

#hd .tab-psu .btn-frame {
    margin-top: 20px
}

#hd .tab-psu .hd-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto 20px;
    z-index: 4
}

#hd .tab-psu .swiper-button-prev,
#hd .tab-psu .swiper-button-next {
    width: 44px;
    height: 44px;
    left: 0;
    right: 0;
    background: #949494;
    margin: 0 8px;
    position: relative;
    transform: none
}

#hd .tab-psu .swiper-button-prev:after,
#hd .tab-psu .swiper-button-next:after {
    font-size: 20px;
    color: white;
    margin-top: 2px
}

#hd .tab-psu .swiper-pagination {
    display: none;
    margin-top: 0
}

#hd #pageContent-lightbox-psu .hd-close {
    width: 44px;
    height: 44px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    margin: 10px auto
}

#hd #pageContent-lightbox-psu .hd-close:before,
#hd #pageContent-lightbox-psu .hd-close:after {
    width: 70%
}

#hd #pageContent-lightbox-psu .hd-box {
    height: 700px;
    max-height: calc(100% - 200px)
}

#hd #pageContent-lightbox-psu .hd-content {
    max-height: 100%;
    padding: 40px;
    position: relative;
    overflow-y: auto
}

#hd #pageContent-lightbox-psu .hd-content::-webkit-scrollbar {
    width: 10px
}

#hd #pageContent-lightbox-psu .hd-content::-webkit-scrollbar-track {
    background: #000000
}

#hd #pageContent-lightbox-psu .hd-content::-webkit-scrollbar-thumb {
    background: #888
}

#hd #pageContent-lightbox-psu .hd-content::-webkit-scrollbar-thumb:hover {
    background: #555
}

#hd #pageContent-lightbox-psu .hd-scroller {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow-x: auto
}

#hd #pageContent-lightbox-psu .hd-box {
    background: none
}

#hd #pageContent-lightbox-psu h2 {
    margin-bottom: 0.5em
}

#hd #pageContent-lightbox-psu table {
    width: 100%;
    max-width: 70em;
    margin: 0 auto;
    font-size: 0.9em;
    background: black;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-top: 6px solid white;
    border-collapse: collapse
}

#hd #pageContent-lightbox-psu table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.75)
}

#hd #pageContent-lightbox-psu table thead th {
    padding-block: 10px;
    font-size: 1.4em
}

#hd #pageContent-lightbox-psu table thead th:nth-child(1) {
    min-width: 15em;
    position: relative
}

#hd #pageContent-lightbox-psu table thead th:nth-child(1):before {
    content: '';
    display: block;
    width: 6px;
    height: 80%;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -1px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 0 100%, 0 100%)
}

#hd #pageContent-lightbox-psu table thead img {
    width: 85%;
    margin: 0 auto
}

#hd #pageContent-lightbox-psu table tbody tr:nth-child(2n-1) {
    background: #343434
}

#hd #pageContent-lightbox-psu table th {
    font-weight: normal;
    text-align: left;
    padding: 14px 10px;
    padding-left: 2rem
}

#hd #pageContent-lightbox-psu table td {
    padding: 14px 10px;
    text-align: center
}

#hd #pageContent-lightbox-psu table td:nth-child(2) {
    color: #55f7ff
}

#hd #pageContent-lightbox-psu table td:nth-child(2) i.hd-check {
    background-image: url(../img/features/psu/check-thor.svg)
}

#hd #pageContent-lightbox-psu table td:nth-child(2) i.hd-dash {
    background-image: url(../img/features/psu/dash-thor.svg)
}

#hd #pageContent-lightbox-psu table td:nth-child(3) {
    color: #ff83f9
}

#hd #pageContent-lightbox-psu table td:nth-child(3) i.hd-check {
    background-image: url(../img/features/psu/check-strix.svg)
}

#hd #pageContent-lightbox-psu table td:nth-child(3) i.hd-dash {
    background-image: url(../img/features/psu/dash-strix.svg)
}

#hd #pageContent-lightbox-psu table td:nth-child(4) {
    color: #ff9e1b
}

#hd #pageContent-lightbox-psu table td:nth-child(4) i.hd-check {
    background-image: url(../img/features/psu/check-tuf.svg)
}

#hd #pageContent-lightbox-psu table td:nth-child(4) i.hd-dash {
    background-image: url(../img/features/psu/dash-tuf.svg)
}

#hd #pageContent-lightbox-psu table i {
    display: block;
    width: 1em;
    height: 1em;
    margin: 0 auto;
    background: center no-repeat;
    background-size: contain
}

@media screen and (max-width: 1280px) {
    #hd .tab-psu .hd-img-container {
        padding-bottom: 45%
    }
}

@media screen and (max-width: 1024px) {
    #hd .tab-psu .hd-container {
        width: 90%
    }

    #hd .tab-psu .hd-content {
        width: 40%
    }
}

@media screen and (max-width: 1023px) {
    #hd .tab-psu .hd-img-container {
        padding-bottom: 75%
    }

    #hd .tab-psu .hd-container {
        position: relative
    }

    #hd .tab-psu .hd-content {
        width: 100% !important
    }

    #hd .tab-psu .hd-content p {
        max-width: none
    }

    #hd #pageContent-lightbox-psu table {
        min-width: 55em;
        border-top: 4px solid white
    }

    #hd #pageContent-lightbox-psu table thead th {
        font-size: 1.25em
    }

    #hd #pageContent-lightbox-psu table thead th:nth-child(1) {
        min-width: 10em
    }

    #hd #pageContent-lightbox-psu table thead th:nth-child(1):before {
        width: 4px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), 0 100%, 0 100%)
    }

    #hd #pageContent-lightbox-psu table thead img {
        width: 90%
    }

    #hd #pageContent-lightbox-psu table th {
        padding: 12px 8px;
        padding-left: 1.5rem
    }
}

@media screen and (max-width: 768px) {
    #hd #pageContent-lightbox-psu .hd-box {
        width: 100%;
        max-width: none
    }

    #hd #pageContent-lightbox-psu .hd-content::-webkit-scrollbar {
        width: 6px
    }
}

@media screen and (max-width: 620px) {
    #hd .tab-psu .hd-controls {
        position: relative;
        margin-top: 20px
    }

    #hd #pageContent-lightbox-psu .hd-content {
        padding: 40px 16px
    }

    #hd #pageContent-lightbox-psu table {
        min-width: 45em
    }

    #hd #pageContent-lightbox-psu table thead th {
        font-size: 1.125em
    }

    #hd #pageContent-lightbox-psu table thead th:nth-child(1) {
        min-width: 8em
    }

    #hd #pageContent-lightbox-psu table th {
        padding-left: 1rem
    }
}

#hd .sec-products {
    padding: 4em 0;
    position: relative;
    z-index: 2
}

#hd .sec-products .tab-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center
}

#hd .sec-products .tab-container button {
    display: block;
    flex-shrink: 0;
    font-size: 1.5em;
    font-family: "TradeGothicLTPro", "Roboto Condensed", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    padding: .5em 1.5em .25em;
    border-radius: 20px 0 20px 0;
    color: white;
    margin: 5px;
    position: relative;
    z-index: 3
}

#hd .sec-products .tab-container button:before,
#hd .sec-products .tab-container button:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    inset: 0
}

#hd .sec-products .tab-container button:before {
    background-color: #fff 9%;
    background-image: -moz-linear-gradient(-45deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
    background-image: -webkit-linear-gradient(-45deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
    background-image: linear-gradient(-45deg, #fff 9%, #969696 12%, #fff 50%, #e4e4e4 90%);
    background-size: 150% 100%;
    background-position: 0% 0;
    background-repeat: repeat-x;
    z-index: -2;
    transition: background .4s, opacity .4s;
    opacity: 0.5
}

#hd .sec-products .tab-container button:after {
    background: black;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: auto;
    z-index: -1
}

#hd .sec-products .tab-container button:hover:before,
#hd .sec-products .tab-container button:focus-visible:before {
    background-position: 100% 0;
    opacity: 1
}

#hd .sec-products .tab-container button[aria-selected="true"] {
    pointer-events: none
}

#hd .sec-products .tab-container button[aria-selected="true"]:before {
    opacity: 1
}

#hd .sec-products .tab-container button[aria-selected="true"]:after {
    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)
}

#hd .sec-products #pageContent-tab-recommendation .tab-list>li[aria-selected="true"],
#hd .sec-products #pageContent-tab-chipset .tab-list>li[aria-selected="true"] {
    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)
}

#hd .sec-products #pageContent-tab-recommendation .tab-list>li[aria-selected="true"]:after,
#hd .sec-products #pageContent-tab-chipset .tab-list>li[aria-selected="true"]:after {
    background: white
}

#hd .sec-products #pageContent-tab-recommendation .tab-list h3,
#hd .sec-products #pageContent-tab-chipset .tab-list h3 {
    font-size: 1.25em;
    margin-top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%
}

#hd .sec-products #pageContent-tab-recommendation .hd-tag,
#hd .sec-products #pageContent-tab-chipset .hd-tag {
    color: black
}

#hd .sec-products #pageContent-tab-recommendation .hd-tag:before,
#hd .sec-products #pageContent-tab-chipset .hd-tag:before {
    background: #eeeeee
}

#hd .sec-products #pageContent-tab-recommendation .hd-tag:after,
#hd .sec-products #pageContent-tab-chipset .hd-tag:after {
    background-color: #fff;
    background-image: -moz-linear-gradient(90deg, #fff, #eee);
    background-image: -webkit-linear-gradient(90deg, #fff, #eee);
    background-image: linear-gradient(90deg, #fff, #eee)
}

#hd .sec-products.bg-astral #pageContent-tab-pd .tab-list {
    background-image: url(../img/product/bg-astral.png)
}

#hd .sec-products.bg-astral [aria-controls="pageContent-tab-rogastral"] {
    background-image: url(../img/product/bg-astral-active.png);
    background-size: cover
}

#hd .sec-products.bg-astral [aria-controls="pageContent-tab-rogastral"]:after {
    background-color: #1f24e6;
    background-image: -moz-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: -webkit-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: linear-gradient(90deg, #1f24e6, #8c35ef)
}

#hd .sec-products.bg-rog #pageContent-tab-pd .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 #pageContent-tab-pd .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 #pageContent-tab-pd .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 #pageContent-tab-pd .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.bg-prime #pageContent-tab-pd .tab-list {
    background-image: url(../img/product/bg-prime.png)
}

#hd .sec-products.bg-prime [aria-controls="pageContent-tab-prime"] {
    background-image: url(../img/product/bg-prime-active.png)
}

#hd .sec-products.bg-prime [aria-controls="pageContent-tab-prime"]:after {
    background-color: #00dccd;
    background-image: -moz-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: -webkit-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: linear-gradient(90deg, #00dccd, #22c8ea)
}

#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: 33.3333%;
    font-size: 1em;
    padding: 1.75em 1em 1em;
    text-align: center;
    position: relative;
    background-size: cover;
    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[data-bg="bg-proart"] .hd-img-container img {
    height: 1.8em
}

#hd .sec-products .tab-list li[data-bg="bg-prime"] .hd-img-container img {
    height: 1.3em
}

#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: 2.5em;
    position: relative
}

#hd .sec-products .tab-list .hd-img-container img {
    width: 100%;
    max-width: none !important;
    height: 2.5em;
    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: #76b900;
    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 !important;
    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: #76b900
}

#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-astral .hd-btn {
    background-color: #1f24e6;
    background-image: -moz-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: -webkit-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: linear-gradient(90deg, #1f24e6, #8c35ef)
}

#hd #pageContent-tab-astral .hd-tag:before {
    background: #8c35ef
}

#hd #pageContent-tab-astral .hd-tag:after {
    background-color: #1f24e6;
    background-image: -moz-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: -webkit-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: linear-gradient(90deg, #1f24e6, #8c35ef)
}

#hd #pageContent-tab-astral .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #1f24e6;
    background-image: -moz-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: -webkit-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: linear-gradient(90deg, #1f24e6, #8c35ef)
}

#hd #pageContent-tab-astrallc .hd-btn {
    background-color: #1f24e6;
    background-image: -moz-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: -webkit-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: linear-gradient(90deg, #1f24e6, #8c35ef)
}

#hd #pageContent-tab-astrallc .hd-tag:before {
    background: #8c35ef
}

#hd #pageContent-tab-astrallc .hd-tag:after {
    background-color: #1f24e6;
    background-image: -moz-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: -webkit-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: linear-gradient(90deg, #1f24e6, #8c35ef)
}

#hd #pageContent-tab-astrallc .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #1f24e6;
    background-image: -moz-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: -webkit-linear-gradient(90deg, #1f24e6, #8c35ef);
    background-image: linear-gradient(90deg, #1f24e6, #8c35ef)
}

#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%)
}

#hd #pageContent-tab-prime .hd-btn {
    color: black;
    background-color: #00dccd;
    background-image: -moz-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: -webkit-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: linear-gradient(90deg, #00dccd, #22c8ea)
}

#hd #pageContent-tab-prime .hd-tag {
    color: black
}

#hd #pageContent-tab-prime .hd-tag:before {
    background: #00dccd
}

#hd #pageContent-tab-prime .hd-tag:after {
    background-color: #00dccd;
    background-image: -moz-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: -webkit-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: linear-gradient(90deg, #00dccd, #22c8ea)
}

#hd #pageContent-tab-prime .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #00dccd;
    background-image: -moz-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: -webkit-linear-gradient(90deg, #00dccd, #22c8ea);
    background-image: linear-gradient(90deg, #00dccd, #22c8ea)
}

@media screen and (max-width: 1440px) {
    #hd .sec-products .tab-container button {
        font-size: 1.25em
    }

    #hd .sec-products .tab-list .hd-img-container img {
        height: 1.75em
    }

    #hd .sec-products .tab-list li {
        padding-top: 1.25em
    }

    #hd .sec-products .tab-list li[data-bg="bg-proart"] .hd-img-container img {
        height: 1.5em
    }

    #hd .sec-products .tab-list li[data-bg="bg-prime"] .hd-img-container img {
        height: 1em
    }

    #hd .sec-products .hd-content p {
        font-size: 0.875em;
        line-height: 1.5
    }
}

@media screen and (max-width: 1280px) {
    #hd .sec-products .tab-container button {
        font-size: 1.125em;
        margin: 2px
    }

    #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 .tab-container {
        width: 100%;
        max-width: 40em;
        margin-inline: auto
    }

    #hd .sec-products .tab-container button {
        min-width: calc(33.3333% - 4px)
    }

    #hd .sec-products .hd-wrapper {
        flex-direction: column
    }

    #hd .sec-products .tab-panel {
        background: black
    }

    #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-astral .hd-bg img {
        margin: 0 0 0 -50%
    }

    #hd #pageContent-tab-astrallc .hd-bg img {
        margin: 0 0 0 -50%
    }

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

    #hd #pageContent-tab-prime .hd-bg img {
        margin: 0 0 0 -48%
    }
}

@media screen and (max-width: 768px) {
    #hd .sec-products .tab-list .hd-img-container img {
        height: 1.4em
    }

    #hd .sec-products .tab-list li {
        padding: 1em .25em
    }

    #hd .sec-products .tab-list li[data-bg="bg-proart"] .hd-img-container img {
        height: 1em
    }

    #hd .sec-products .tab-list li[data-bg="bg-prime"] .hd-img-container img {
        height: .875em
    }

    #hd .sec-products #pageContent-tab-chipset .tab-list {
        padding: 1.25em 1em
    }

    #hd .sec-products #pageContent-tab-chipset .tab-list>li:after {
        height: 4px
    }
}

@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 .tab-container {
        max-width: none
    }

    #hd .sec-products .tab-container button {
        font-size: 1em;
        padding-block: .75em .5em;
        border-width: 1px
    }

    #hd .sec-products #pageContent-tab-shipset .tab-list h3 {
        font-size: 1.25em
    }

    #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-container button {
        min-width: calc(40% - 4px)
    }

    #hd .sec-products .tab-container button:first-child {
        width: 80%;
        margin-bottom: 2px
    }

    #hd .sec-products .tab-list {
        flex-wrap: wrap
    }

    #hd .sec-products .tab-list .hd-img-container img {
        height: 1.4em
    }

    #hd .sec-products .tab-list li {
        min-width: 33.3333%
    }

    #hd .sec-products .tab-list li:before {
        display: none
    }

    #hd .sec-products .tab-list li[data-bg="bg-proart"] .hd-img-container img,
    #hd .sec-products .tab-list li[data-bg="bg-prime"] .hd-img-container img {
        height: 1em
    }

    #hd .sec-products .hd-wrapper:before,
    #hd .sec-products .hd-wrapper:after {
        margin: 10px 5px
    }

    #hd .sec-products #pageContent-tab-chipset .tab-list {
        justify-content: center
    }

    #hd .sec-products #pageContent-tab-chipset .tab-list li {
        width: 43%;
        min-width: 30%
    }

    #hd .sec-products #pageContent-tab-chipset .tab-list li:first-child {
        min-width: 4em;
        width: 10%
    }

    #hd .sec-products #pageContent-tab-chipset .tab-list h3 {
        font-size: 1em
    }
}

#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 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 {
    display: block;
    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: #76b900;
    font-weight: 600;
    cursor: default
}

#hd header .menu a:hover,
#hd header .menu a:focus-visible {
    color: #76b900
}

@media screen and (max-width: 1024px) {
    #hd header {
        font-size: 14px
    }
}

@media screen and (max-width: 480px) {
    #hd header {
        font-size: 12px
    }

    #hd header .menu a {
        padding: .75em .5em
    }
}

/*# sourceMappingURL=hd-style.css.map */