@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto-condensed.css");
 .bg-dark {
     background: #2b2b2b;
}
/* Box Sizing */
/* Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* ---------- RESET ---------- */
 html, body {
     margin: 0;
}
 #hd, #intel-abt {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     background: black;
     color: white;
     font-size: 16px;
     margin: 0;
     padding: 0;
}
/*
 #hd ::selection, #intel-abt ::selection {
     background: #1d2124;
     color: #02aee5;
}
 #hd ::-moz-selection, #intel-abt ::-moz-selection {
     background: #1d2124;
     color: #ffffff;
}
*/
 #hd *, #intel-abt * {
     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 ul, #hd li, #hd figure, #hd p, #intel-abt ul, #intel-abt li, #intel-abt figure, #intel-abt p {
     margin: 0;
     padding: 0;
}
 #hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li, #intel-abt h1, #intel-abt h2, #intel-abt h3, #intel-abt h4, #intel-abt p, #intel-abt a, #intel-abt li {
     font: inherit;
}
 #hd img, #intel-abt img {
     display: block;
     height: auto;
     border: none;
     max-width: 100% !important;
     margin: 0 auto;
}
 #hd img.lazyLoad, #intel-abt img.lazyLoad {
     opacity: 0;
     -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -ms-transition: all .5s ease;
     -o-transition: all .5s ease;
     transition: all .5s ease;
     height: 50vh;
}
 #hd img.lazyLoad.lazyLoaded, #intel-abt img.lazyLoad.lazyLoaded {
     height: auto;
     opacity: 1;
}
/* ---------- ANIMATIONS ---------- */
 @-webkit-keyframes zoomIn {
     0% {
         -moz-transform: scale(1.1);
         -o-transform: scale(1.1);
         -ms-transform: scale(1.1);
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
         opacity: 0;
    }
     100% {
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
    }
}
 @-moz-keyframes zoomIn {
     0% {
         -moz-transform: scale(1.1);
         -o-transform: scale(1.1);
         -ms-transform: scale(1.1);
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
         opacity: 0;
    }
     100% {
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
    }
}
 @-ms-keyframes zoomIn {
     0% {
         -moz-transform: scale(1.1);
         -o-transform: scale(1.1);
         -ms-transform: scale(1.1);
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
         opacity: 0;
    }
     100% {
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
    }
}
 @-o-keyframes zoomIn {
     0% {
         -moz-transform: scale(1.1);
         -o-transform: scale(1.1);
         -ms-transform: scale(1.1);
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
         opacity: 0;
    }
     100% {
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
    }
}
 @keyframes zoomIn {
     0% {
         -moz-transform: scale(1.1);
         -o-transform: scale(1.1);
         -ms-transform: scale(1.1);
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
         opacity: 0;
    }
     100% {
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
    }
}
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-moz-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-ms-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-o-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-webkit-keyframes fadeInUp {
     0% {
         opacity: 0;
         -moz-transform: translateY(30px);
         -o-transform: translateY(30px);
         -ms-transform: translateY(30px);
         -webkit-transform: translateY(30px);
         transform: translateY(30px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
         -o-transform: translateY(0);
         -ms-transform: translateY(0);
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @-moz-keyframes fadeInUp {
     0% {
         opacity: 0;
         -moz-transform: translateY(30px);
         -o-transform: translateY(30px);
         -ms-transform: translateY(30px);
         -webkit-transform: translateY(30px);
         transform: translateY(30px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
         -o-transform: translateY(0);
         -ms-transform: translateY(0);
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @-ms-keyframes fadeInUp {
     0% {
         opacity: 0;
         -moz-transform: translateY(30px);
         -o-transform: translateY(30px);
         -ms-transform: translateY(30px);
         -webkit-transform: translateY(30px);
         transform: translateY(30px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
         -o-transform: translateY(0);
         -ms-transform: translateY(0);
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @-o-keyframes fadeInUp {
     0% {
         opacity: 0;
         -moz-transform: translateY(30px);
         -o-transform: translateY(30px);
         -ms-transform: translateY(30px);
         -webkit-transform: translateY(30px);
         transform: translateY(30px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
         -o-transform: translateY(0);
         -ms-transform: translateY(0);
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         -moz-transform: translateY(30px);
         -o-transform: translateY(30px);
         -ms-transform: translateY(30px);
         -webkit-transform: translateY(30px);
         transform: translateY(30px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
         -o-transform: translateY(0);
         -ms-transform: translateY(0);
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @-webkit-keyframes fader {
     50% {
         opacity: 1;
    }
}
 @-moz-keyframes fader {
     50% {
         opacity: 1;
    }
}
 @-ms-keyframes fader {
     50% {
         opacity: 1;
    }
}
 @-o-keyframes fader {
     50% {
         opacity: 1;
    }
}
 @keyframes fader {
     50% {
         opacity: 1;
    }
}
 @-webkit-keyframes hint {
     0% {
         opacity: 1;
         border-width: 1px;
    }
     100% {
         opacity: 0;
         border-width: 0;
    }
}
 @-moz-keyframes hint {
     0% {
         opacity: 1;
         border-width: 1px;
    }
     100% {
         opacity: 0;
         border-width: 0;
    }
}
 @-ms-keyframes hint {
     0% {
         opacity: 1;
         border-width: 1px;
    }
     100% {
         opacity: 0;
         border-width: 0;
    }
}
 @-o-keyframes hint {
     0% {
         opacity: 1;
         border-width: 1px;
    }
     100% {
         opacity: 0;
         border-width: 0;
    }
}
 @keyframes hint {
     0% {
         opacity: 1;
         border-width: 1px;
    }
     100% {
         opacity: 0;
         border-width: 0;
    }
}
 @font-face {
     font-family: 'ROGFontsv';
     src: url("../fonts/ROGFonts-Regular.otf"), url("../fonts/ROGFonts-Regular.ttf"), url("../fonts/ROGFonts-Regular.woff"), url("../fonts/ROGFonts-Regular.woff2");
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'TradeGothicLTPro';
     src: url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype");
     font-weight: 600;
     font-style: normal;
     font-display: swap;
}
 #hd, #intel-abt {
     font-size: 16px;
}
 #hd h2, #intel-abt h2 {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 3.75em;
     line-height: 1;
     color: #ffffff !important;
     letter-spacing: .018em;
     margin-bottom: .25em;
     text-transform: uppercase;
     word-break: normal;
     word-wrap: normal;
}
 #hd h2 + p, #intel-abt h2 + p {
     margin-bottom: 3em;
}
 #hd h3, #intel-abt h3 {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 2.25em;
     line-height: 1;
     color: #ffffff;
     margin-bottom: .5em;
}
 #hd h4, #intel-abt h4 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.5em;
     font-weight: bold;
     line-height: 1.25;
     margin-bottom: .5em;
     color: #ffffff;
}
 #hd h5, #intel-abt h5 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.125em;
     font-weight: 300;
     color: #ffffff;
     margin: 5px 0 10px;
}
 #hd p, #hd small, #hd a, #hd li, #intel-abt p, #intel-abt small, #intel-abt a, #intel-abt li {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
}
 #hd p, #intel-abt p {
     font-size: 1em;
     line-height: 1.75;
     font-weight: 300;
}
 #hd p.color-primary, #intel-abt p.color-primary {
     font-weight: 400;
}
 #hd b, #intel-abt b {
     font-weight: bold;
}
 #hd small, #intel-abt small {
     font-size: 14px;
     font-weight: 300;
     letter-spacing: 0.5px;
}
 #hd .align-center, #intel-abt .align-center {
     text-align: center;
}
 #hd .align-left, #intel-abt .align-left {
     text-align: left;
}
 #hd .align-italic, #intel-abt .align-italic {
     font-style: italic;
}
 #hd a.txt-link, #intel-abt a.txt-link {
     display: inline-block;
     text-decoration: underline;
     font-weight: 400;
     margin-top: .5em;
}
 #hd a.txt-link:hover, #intel-abt a.txt-link:hover {
     color: white;
}
 #hd .color-primary, #intel-abt .color-primary {
     color: #67cfff;
}
 #hd .color-grey, #intel-abt .color-grey {
     color: #aaaaaa;
}
 #hd .color-white, #intel-abt .color-white {
     color: white;
}
 #hd .hd-uppercase, #intel-abt .hd-uppercase {
     text-transform: uppercase;
}
 #hd .font-rog, #intel-abt .font-rog {
     font-family: "ROGFontsv", "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
}
 @media screen and (max-width: 1440px) {
     #hd h2, #intel-abt h2 {
         font-size: 3em;
    }
     #hd h4, #intel-abt h4 {
         font-size: 1.25em;
    }
     #hd p, #intel-abt p {
         font-size: 14px;
    }
}
 @media screen and (max-width: 1280px) {
     #hd h3, #intel-abt h3 {
         font-size: 1.75em;
    }
}
 @media screen and (max-width: 1024px) {
     #hd h2, #intel-abt h2 {
         font-size: 2.75em;
    }
     #hd h2 + p, #intel-abt h2 + p {
         margin-bottom: 1.5em;
    }
}
 @media screen and (max-width: 768px) {
     #hd h2, #intel-abt h2 {
         font-size: 2.15em;
    }
     #hd h4, #intel-abt h4 {
         font-size: 1.125em;
    }
     #hd p, #intel-abt p {
         line-height: 1.5;
    }
}
 @media screen and (max-width: 480px) {
     #hd h2, #intel-abt h2 {
         font-size: 1.875em;
    }
     #hd h3, #intel-abt h3 {
         font-size: 1.5em;
         margin-bottom: 10px;
    }
     #hd h4, #intel-abt h4 {
         font-size: 1.1em;
         margin-bottom: 10px;
    }
     #hd h5, #intel-abt h5 {
         font-size: 14px;
    }
}
 #hd .w95, #intel-abt .w95 {
     width: 94%;
     margin: 0 auto;
     position: relative;
}
 #hd .hd-w800, #intel-abt .hd-w800 {
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
}
 #hd .hd-w900, #intel-abt .hd-w900 {
     width: 80%;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
}
 #hd .hd-w1000, #intel-abt .hd-w1000 {
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
}
 #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400, #hd .hd-w1500, #intel-abt .hd-w1100, #intel-abt .hd-w1200, #intel-abt .hd-w1300, #intel-abt .hd-w1400, #intel-abt .hd-w1500 {
     width: 90%;
     margin: 0 auto;
     position: relative;
}
 #hd .hd-w1100, #intel-abt .hd-w1100 {
     max-width: 1100px;
}
 #hd .hd-w1200, #intel-abt .hd-w1200 {
     max-width: 1200px;
}
 #hd .hd-w1300, #intel-abt .hd-w1300 {
     max-width: 1300px;
}
 #hd .hd-w1400, #intel-abt .hd-w1400 {
     max-width: 1400px;
}
 #hd .hd-w1500, #intel-abt .hd-w1500 {
     max-width: 1500px;
}
 #hd .hd-col20, #intel-abt .hd-col20 {
     width: 20%;
}
 #hd .hd-col25, #intel-abt .hd-col25 {
     width: 25%;
}
 #hd .hd-col33, #intel-abt .hd-col33 {
     width: 33.3333%;
}
 #hd .hd-col35, #intel-abt .hd-col35 {
     width: 35%;
}
 #hd .hd-col40, #intel-abt .hd-col40 {
     width: 40%;
}
 #hd .hd-col45, #intel-abt .hd-col45 {
     width: 45%;
}
 #hd .hd-col50, #intel-abt .hd-col50 {
     width: 50%;
}
 #hd .hd-col55, #intel-abt .hd-col55 {
     width: 55%;
}
 #hd .hd-col60, #intel-abt .hd-col60 {
     width: 60%;
}
 #hd .hd-col65, #intel-abt .hd-col65 {
     width: 65%;
}
 #hd .hd-col70, #intel-abt .hd-col70 {
     width: 70%;
}
 #hd .hd-col75, #intel-abt .hd-col75 {
     width: 75%;
}
 #hd .hd-col80, #intel-abt .hd-col80 {
     width: 80%;
}
 #hd .hd-col100, #intel-abt .hd-col100 {
     width: 100%;
}
 #hd .ib-top, #intel-abt .ib-top {
     display: inline-block;
     vertical-align: top;
}
 #hd .ib-bottom, #intel-abt .ib-bottom {
     display: inline-block;
     vertical-align: bottom;
}
 #hd .flex-wrap, #intel-abt .flex-wrap {
     display: flex;
     flex-wrap: wrap;
}
 #hd .flex-nowrap, #intel-abt .flex-nowrap {
     display: flex;
     flex-wrap: nowrap;
}
 #hd .align-items-center, #intel-abt .align-items-center {
     align-items: center;
}
 #hd .align-items-start, #intel-abt .align-items-start {
     align-items: flex-start;
}
 #hd .align-items-end, #intel-abt .align-items-end {
     align-items: flex-end;
}
 #hd .justify-content-center, #intel-abt .justify-content-center {
     justify-content: center;
}
 #hd .justify-content-start, #intel-abt .justify-content-start {
     justify-content: flex-start;
}
 #hd .justify-content-end, #intel-abt .justify-content-end {
     justify-content: flex-end;
}
 #hd .justify-content-between, #intel-abt .justify-content-between {
     justify-content: space-between;
}
 #hd .justify-content-around, #intel-abt .justify-content-around {
     justify-content: space-around;
}
 #hd .hd-d-none, #intel-abt .hd-d-none {
     display: none;
}
 @media screen and (max-width: 1024px) {
     #hd .hd-d-1024-none, #intel-abt .hd-d-1024-none {
         display: none;
    }
     #hd .hd-d-1024-block, #intel-abt .hd-d-1024-block {
         display: block;
    }
     #hd .hd-d-1024-inline-block, #intel-abt .hd-d-1024-inline-block {
         display: inline-block;
    }
     #hd .hd-w900, #intel-abt .hd-w900 {
         width: 90%;
    }
}
 @media screen and (max-width: 1023px) {
     #hd .hd-d-1023-none, #intel-abt .hd-d-1023-none {
         display: none;
    }
     #hd .hd-d-1023-block, #intel-abt .hd-d-1023-block {
         display: block;
    }
     #hd .hd-d-1023-inline-block, #intel-abt .hd-d-1023-inline-block {
         display: inline-block;
    }
}
 @media screen and (max-width: 768px) {
     #hd .hd-d-768-none, #intel-abt .hd-d-768-none {
         display: none;
    }
     #hd .hd-d-768-block, #intel-abt .hd-d-768-block {
         display: block;
    }
}
 @media screen and (max-width: 620px) {
     #hd .hd-d-620-none, #intel-abt .hd-d-620-none {
         display: none;
    }
     #hd .hd-d-620-block, #intel-abt .hd-d-620-block {
         display: block;
    }
}
 @media screen and (max-width: 480px) {
     #hd .hd-d-480-none, #intel-abt .hd-d-480-none {
         display: none;
    }
     #hd .hd-d-480-block, #intel-abt .hd-d-480-block {
         display: block;
    }
}
 #hd .hd-btn, #intel-abt .hd-btn {
     display: inline-block;
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-weight: bold;
     /*font-size: 1rem;*//*20211026*/
     border-radius: 3px;
     background: #02aee5;
     padding: .5em 1.5em;
     margin: 1em auto;
     color: white;
     position: relative;
     z-index: 2;
     cursor: pointer;
     -moz-transition: transform 0.25s ease;
     -o-transition: transform 0.25s ease;
     -webkit-transition: transform 0.25s ease;
     transition: transform 0.25s ease;
}
 #hd .hd-btn:hover, #intel-abt .hd-btn:hover {
     -moz-transform: translate(0, -2px);
     -o-transform: translate(0, -2px);
     -ms-transform: translate(0, -2px);
     -webkit-transform: translate(0, -2px);
     transform: translate(0, -2px);
}
 #hd .hd-btn:active, #intel-abt .hd-btn:active {
     -moz-transform: translate(0, -1px);
     -o-transform: translate(0, -1px);
     -ms-transform: translate(0, -1px);
     -webkit-transform: translate(0, -1px);
     transform: translate(0, -1px);
}
 #hd .hd-btn.hd-btn-skew, #intel-abt .hd-btn.hd-btn-skew {
     background: none;
     border-radius: 0;
}
 #hd .hd-btn.hd-btn-skew:before, #intel-abt .hd-btn.hd-btn-skew:before {
     content: '';
     display: block;
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background: #02aee5;
     z-index: -1;
     -moz-transform: skew(-15deg, 0deg);
     -o-transform: skew(-15deg, 0deg);
     -ms-transform: skew(-15deg, 0deg);
     -webkit-transform: skew(-15deg, 0deg);
     transform: skew(-15deg, 0deg);
}
 #hd .hd-btn.hd-btn-frame, #intel-abt .hd-btn.hd-btn-frame {
     border-radius: 0;
     border: 1px solid #02aee5;
     color: #02aee5;
     background: transparent;
     -moz-transition: color 0.25s ease;
     -o-transition: color 0.25s ease;
     -webkit-transition: color 0.25s ease;
     transition: color 0.25s ease;
}
 #hd .hd-btn.hd-btn-frame:hover, #intel-abt .hd-btn.hd-btn-frame:hover {
     -moz-transform: translate(0, 0);
     -o-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     -webkit-transform: translate(0, 0);
     transform: translate(0, 0);
     color: white;
}
 @media screen and (max-width: 1023px) {
     #hd .hd-btn, #intel-abt .hd-btn {
         margin: 1em auto;
    }
}
 #hd .hd-icon-plus, #intel-abt .hd-icon-plus {
     display: inline-block;
     vertical-align: top;
     width: 1.25em;
     height: 1.25em;
     border-radius: 1em;
     border: 1px solid #02aee5;
     margin: .125em .5em -.125em 0;
     position: relative;
}
 #hd .hd-icon-plus:before, #hd .hd-icon-plus:after, #intel-abt .hd-icon-plus:before, #intel-abt .hd-icon-plus:after {
     content: '';
     display: block;
     width: .65em;
     height: 1px;
     background: #02aee5;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd .hd-icon-plus:after, #intel-abt .hd-icon-plus:after {
     -moz-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
}
 #hd .hd-active > .hd-icon-plus:after, #intel-abt .hd-active > .hd-icon-plus:after {
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}
 #hd .tab-filter, #intel-abt .tab-filter {
     display: inline-flex;
     flex-wrap: nowrap;
     align-items: flex-end;
     justify-content: flex-start;
     margin: 0 auto 2em;
     border-bottom: 1px solid #4d4e4f;
}
 #hd .tab-filter li, #intel-abt .tab-filter li {
     font-size: 1.125em;
     font-weight: bold;
     padding: 1em 1.25em;
     line-height: 1;
     color: #4d4e4f;
     position: relative;
     cursor: pointer;
}
 #hd .tab-filter li:first-child, #intel-abt .tab-filter li:first-child {
     margin-left: auto;
}
 #hd .tab-filter li:last-child, #intel-abt .tab-filter li:last-child {
     margin-right: auto;
}
 #hd .tab-filter li:hover, #intel-abt .tab-filter li:hover {
     color: #aaaaaa;
}
 #hd .tab-filter li.hd-active, #intel-abt .tab-filter li.hd-active {
     color: white;
}
 #hd .tab-filter li.hd-active:after, #intel-abt .tab-filter li.hd-active:after {
     content: '';
     display: block;
     width: 100%;
     height: 2px;
     background: white;
     position: absolute;
     bottom: 0;
     left: 0;
}
 #hd .tab-filter-block, #intel-abt .tab-filter-block {
     display: inline-flex;
     flex-wrap: nowrap;
     align-items: flex-end;
     justify-content: flex-start;
     margin: -1em auto 2em;
}
 #hd .tab-filter-block li, #intel-abt .tab-filter-block li {
     min-width: 6em;
     font-size: 1.125em;
     font-weight: bold;
     letter-spacing: .04em;
     line-height: 1;
     text-align: center;
     padding: .45em .5em;
     margin: 0 1em;
     color: #4d4e4f;
     border: 1px solid #4d4e4f;
     cursor: pointer;
}
 #hd .tab-filter-block li:first-child, #intel-abt .tab-filter-block li:first-child {
     margin-left: auto;
}
 #hd .tab-filter-block li:last-child, #intel-abt .tab-filter-block li:last-child {
     margin-right: auto;
}
 #hd .tab-filter-block li:hover, #intel-abt .tab-filter-block li:hover {
     color: white;
     border-color: white;
}
 #hd .tab-filter-block li.hd-active, #intel-abt .tab-filter-block li.hd-active {
     color: white;
     background: #02aee5;
     border-color: #02aee5;
}
 #hd .content-el, #intel-abt .content-el {
     display: none;
}
 #hd .content-el.hd-active, #intel-abt .content-el.hd-active {
     display: block;
}
 #hd .hd-filter-list, #intel-abt .hd-filter-list {
     margin: 0 auto;
     padding-left: 5%;
     position: relative;
     z-index: 2;
}
 #hd .hd-filter-list li, #intel-abt .hd-filter-list li {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     cursor: pointer;
     padding: 1em 0;
     font-size: 15px;
}
 #hd .hd-filter-list li:hover p, #intel-abt .hd-filter-list li:hover p {
     color: #aaaaaa;
}
 #hd .hd-filter-list li.hd-active b, #hd .hd-filter-list li.hd-active p, #intel-abt .hd-filter-list li.hd-active b, #intel-abt .hd-filter-list li.hd-active p {
     color: white;
}
 #hd .hd-filter-list li.hd-active .hd-icon, #intel-abt .hd-filter-list li.hd-active .hd-icon {
     background-position: 100% 0;
}
 #hd .hd-filter-list .hd-icon, #intel-abt .hd-filter-list .hd-icon {
     width: 70px;
     height: 70px;
     margin: 0 1.5em 0 0;
     background-repeat: no-repeat;
     background-size: 200%;
     background-position: 0 0;
}
 #hd .hd-filter-list .hd-content, #intel-abt .hd-filter-list .hd-content {
     width: calc(100% - 120px);
}
 #hd .hd-filter-list b, #hd .hd-filter-list p, #intel-abt .hd-filter-list b, #intel-abt .hd-filter-list p {
     line-height: 1.25;
     color: #4d4e4f;
}
 #hd .hd-filter-list b, #intel-abt .hd-filter-list b {
     display: block;
     margin-bottom: .5em;
}
 #hd .hd-filter-list p, #intel-abt .hd-filter-list p {
     font-weight: normal;
}
 #hd .hd-filter-icon, #intel-abt .hd-filter-icon {
     margin: 0 auto 2em;
}
 #hd .hd-filter-icon li, #intel-abt .hd-filter-icon li {
     cursor: pointer;
}
 #hd .hd-filter-icon li:hover p, #intel-abt .hd-filter-icon li:hover p {
     color: #aaaaaa;
}
 #hd .hd-filter-icon li.hd-active p, #intel-abt .hd-filter-icon li.hd-active p {
     color: white;
}
 #hd .hd-filter-icon p, #intel-abt .hd-filter-icon p {
     line-height: 1.25;
     margin: 1em 0;
     color: #4d4e4f;
}
 @media screen and (max-width: 1440px) {
     #hd .tab-filter li, #intel-abt .tab-filter li {
         font-size: 1em;
         padding: 1em 1em;
    }
     #hd .hd-filter-list li, #intel-abt .hd-filter-list li {
         padding: .5em 0;
    }
     #hd .hd-filter-list .hd-icon, #intel-abt .hd-filter-list .hd-icon {
         width: 50px;
         height: 50px;
    }
}
 @media screen and (max-width: 1024px) {
     #hd .tab-filter li, #intel-abt .tab-filter li {
         padding: .75em;
    }
}
 @media screen and (max-width: 1023px) {
     #hd .tab-filter, #intel-abt .tab-filter {
         overflow-x: auto;
         overflow-y: visible;
    }
     #hd .tab-filter li, #intel-abt .tab-filter li {
         flex-shrink: 0;
    }
     #hd .tab-filter-block li, #intel-abt .tab-filter-block li {
         margin: 0 .25em;
    }
     #hd .hd-filter-list, #intel-abt .hd-filter-list {
         display: flex;
         flex-wrap: nowrap;
         align-items: flex-start;
         justify-content: center;
         padding-bottom: 6em;
         padding-left: 0;
    }
     #hd .hd-filter-list .hd-content, #intel-abt .hd-filter-list .hd-content {
         display: none;
         text-align: center;
    }
     #hd .hd-filter-list li, #intel-abt .hd-filter-list li {
         width: 25%;
         max-width: 100px;
    }
     #hd .hd-filter-list li.hd-active .hd-content, #intel-abt .hd-filter-list li.hd-active .hd-content {
         width: 100%;
         display: block;
         position: absolute;
         top: 60%;
         left: 0;
         right: 0;
         margin: 0 auto;
    }
     #hd .hd-filter-list .hd-icon, #intel-abt .hd-filter-list .hd-icon {
         width: 70px;
         height: 70px;
         margin: 0 auto;
    }
}
 @media screen and (max-width: 480px) {
     #hd .hd-filter-list, #intel-abt .hd-filter-list {
         padding-bottom: 7em;
    }
     #hd .hd-filter-list li.hd-active .hd-content, #intel-abt .hd-filter-list li.hd-active .hd-content {
         top: 75px;
    }
     #hd .hd-filter-list .hd-icon, #intel-abt .hd-filter-list .hd-icon {
         width: 50px;
         height: 50px;
    }
}
 #hd .hd-lightbox, #hd .step-lightbox, #intel-abt .hd-lightbox, #intel-abt .step-lightbox {
     width: 100%;
     height: 100vh;
     padding: 20px;
     position: fixed;
     top: 0;
     left: 0;
     display: none;
     z-index: 10;
}
 #hd .hd-lightbox .hd-filter, #hd .step-lightbox .hd-filter, #intel-abt .hd-lightbox .hd-filter, #intel-abt .step-lightbox .hd-filter {
     width: 100%;
     height: 100%;
     background: black;
     position: absolute;
     top: 0;
     left: 0;
}
 #hd .hd-lightbox .hd-box, #hd .step-lightbox .hd-box, #intel-abt .hd-lightbox .hd-box, #intel-abt .step-lightbox .hd-box {
     width: 100%;
     height: 100%;
     background: black;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     box-sizing: border-box;
}
 #hd .hd-lightbox .hd-box iframe, #hd .step-lightbox .hd-box iframe, #intel-abt .hd-lightbox .hd-box iframe, #intel-abt .step-lightbox .hd-box iframe {
     width: calc(100% - 40px);
     height: calc(100% - 40px);
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd .hd-lightbox .hd-close, #hd .step-lightbox .hd-close, #intel-abt .hd-lightbox .hd-close, #intel-abt .step-lightbox .hd-close {
     width: 60px;
     height: 60px;
     background: #02aee5;
     position: absolute;
     top: 0;
     right: 0;
     cursor: pointer;
     z-index: 2;
}
 #hd .hd-lightbox .hd-close:hover, #hd .step-lightbox .hd-close:hover, #intel-abt .hd-lightbox .hd-close:hover, #intel-abt .step-lightbox .hd-close:hover {
     background: #67cfff;
}
 #hd .hd-lightbox .hd-close > span, #hd .step-lightbox .hd-close > span, #intel-abt .hd-lightbox .hd-close > span, #intel-abt .step-lightbox .hd-close > span {
     display: block;
     width: 24px;
     height: 2px;
     background: white;
     -webkit-border-radius: 1.5px;
     -moz-border-radius: 1.5px;
     border-radius: 1.5px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd .hd-lightbox .hd-close > span:first-child, #hd .step-lightbox .hd-close > span:first-child, #intel-abt .hd-lightbox .hd-close > span:first-child, #intel-abt .step-lightbox .hd-close > span:first-child {
     -moz-transform: rotateZ(45deg);
     -o-transform: rotateZ(45deg);
     -ms-transform: rotateZ(45deg);
     -webkit-transform: rotateZ(45deg);
     transform: rotateZ(45deg);
}
 #hd .hd-lightbox .hd-close > span:last-child, #hd .step-lightbox .hd-close > span:last-child, #intel-abt .hd-lightbox .hd-close > span:last-child, #intel-abt .step-lightbox .hd-close > span:last-child {
     -moz-transform: rotateZ(-45deg);
     -o-transform: rotateZ(-45deg);
     -ms-transform: rotateZ(-45deg);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
}
 #hd .step-lightbox img, #intel-abt .step-lightbox img {
     width: 1024px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd .step-lightbox .hd-close, #intel-abt .step-lightbox .hd-close {
     background: #02aee5;
}
 #hd .step-lightbox .hd-close:hover, #intel-abt .step-lightbox .hd-close:hover {
     background: #4d4e4f;
}
 @media screen and (max-width: 1024px) {
     #hd .hd-lightbox .hd-close, #hd .step-lightbox .hd-close, #intel-abt .hd-lightbox .hd-close, #intel-abt .step-lightbox .hd-close {
         width: 40px;
         height: 40px;
         top: 16px;
         right: 16px;
    }
     #hd .hd-lightbox .hd-close > span, #hd .step-lightbox .hd-close > span, #intel-abt .hd-lightbox .hd-close > span, #intel-abt .step-lightbox .hd-close > span {
         width: 20px;
         height: 2px;
    }
}
 #hd .owl-carousel, #intel-abt .owl-carousel {
     display: -ms-grid;
     display: grid;
}
 #hd .owl-carousel .owl-dots, #intel-abt .owl-carousel .owl-dots {
     text-align: center;
     margin: 1em auto;
}
 #hd .owl-carousel .owl-dots .owl-dot, #intel-abt .owl-carousel .owl-dots .owl-dot {
     display: inline-block;
     vertical-align: top;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     margin: 0 6px;
     background: #4d4e4f;
}
 #hd .owl-carousel .owl-dots .owl-dot:hover, #intel-abt .owl-carousel .owl-dots .owl-dot:hover {
     background: #aaaaaa;
}
 #hd .owl-carousel .owl-dots .owl-dot.active, #intel-abt .owl-carousel .owl-dots .owl-dot.active {
     background: #02aee5;
}
 #hd .owl-carousel.nav-arrow, #intel-abt .owl-carousel.nav-arrow {
     padding: 0 2em;
}
 #hd .owl-carousel.nav-arrow .owl-nav, #intel-abt .owl-carousel.nav-arrow .owl-nav {
     width: 100%;
     height: 2.625em;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     pointer-events: none;
}
 #hd .owl-carousel.nav-arrow .owl-nav .owl-prev, #hd .owl-carousel.nav-arrow .owl-nav .owl-next, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next {
     width: 2.625em;
     height: 2.625em;
     border-radius: 2em;
     pointer-events: all;
     position: absolute;
     top: 0;
}
 #hd .owl-carousel.nav-arrow .owl-nav .owl-prev:before, #hd .owl-carousel.nav-arrow .owl-nav .owl-next:before, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev:before, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next:before {
     content: '';
     display: block;
     width: 50%;
     height: 50%;
     border: 2px solid #02aee5;
     border-left: none;
     border-bottom: none;
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     position: absolute;
     top: 0;
     right: 10%;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd .owl-carousel.nav-arrow .owl-nav .owl-prev:hover:before, #hd .owl-carousel.nav-arrow .owl-nav .owl-next:hover:before, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev:hover:before, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next:hover:before {
     border-color: #67cfff;
}
 #hd .owl-carousel.nav-arrow .owl-nav .owl-prev.disabled, #hd .owl-carousel.nav-arrow .owl-nav .owl-next.disabled, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev.disabled, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next.disabled {
     filter: grayscale(100%) brightness(3);
     pointer-events: none;
}
 #hd .owl-carousel.nav-arrow .owl-nav .owl-prev, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev {
     right: calc(100% + 1em);
     -moz-transform: scale(-1, 1);
     -o-transform: scale(-1, 1);
     -ms-transform: scale(-1, 1);
     -webkit-transform: scale(-1, 1);
     transform: scale(-1, 1);
}
 #hd .owl-carousel.nav-arrow .owl-nav .owl-next, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next {
     left: calc(100% + 1em);
}
 #hd .owl-carousel.item-fade .item, #intel-abt .owl-carousel.item-fade .item {
     opacity: .3;
     -moz-transition: opacity 0.5s ease;
     -o-transition: opacity 0.5s ease;
     -webkit-transition: opacity 0.5s ease;
     transition: opacity 0.5s ease;
}
 #hd .owl-carousel.item-fade .owl-item.active .item, #intel-abt .owl-carousel.item-fade .owl-item.active .item {
     opacity: 1;
}
 #hd .owl-carousel.item-fade .owl-item.active + .active .item, #intel-abt .owl-carousel.item-fade .owl-item.active + .active .item {
     opacity: .3;
}
 @media screen and (max-width: 1023px) {
     #hd .owl-carousel.nav-arrow, #intel-abt .owl-carousel.nav-arrow {
         padding: 0 1em;
    }
     #hd .owl-carousel.nav-arrow .owl-nav, #intel-abt .owl-carousel.nav-arrow .owl-nav {
         height: 2.25em;
    }
     #hd .owl-carousel.nav-arrow .owl-nav .owl-prev, #hd .owl-carousel.nav-arrow .owl-nav .owl-next, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next {
         width: 2.25em;
         height: 2.25em;
    }
     #hd .owl-carousel.nav-arrow .owl-nav .owl-prev, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev {
         right: calc(100% - 1.25em);
    }
     #hd .owl-carousel.nav-arrow .owl-nav .owl-next, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next {
         left: calc(100% - 1.25em);
    }
}
 @media screen and (max-width: 480px) {
     #hd .owl-carousel.nav-arrow .owl-nav .owl-prev, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-prev {
         right: calc(100% - 1.75em);
    }
     #hd .owl-carousel.nav-arrow .owl-nav .owl-next, #intel-abt .owl-carousel.nav-arrow .owl-nav .owl-next {
         left: calc(100% - 1.75em);
    }
}
 body {
     background: #000000;
}
 #hd, #intel-abt {
     padding-top: 46px;
}
 #hd header, #intel-abt header {
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background: #151515;
     z-index: 9;
}
 #hd header .logo-rog, #intel-abt header .logo-rog {
     width: 160px;
     margin: 10px auto 10px 0;
     width: 120px; /*20211021 RCD*/
}
 #hd header .logo-rog img, #intel-abt header .logo-rog img {
     width: 100%;
}
 #hd header .menu, #intel-abt header .menu {
     text-align: center;
}
 #hd header .menu a, #intel-abt header .menu a {
     font-size: 1em;
     font-weight: 400;
     letter-spacing: .018em;
     color: white;
     padding: .25em 1em;
     cursor: pointer;
     -moz-transition: color 0.25s ease;
     -o-transition: color 0.25s ease;
     -webkit-transition: color 0.25s ease;
     transition: color 0.25s ease;
}
 #hd header .menu a:hover, #intel-abt header .menu a:hover {
     color: #02aee5;
}
 #hd header .menu a.hd-active, #intel-abt header .menu a.hd-active {
     color: #02aee5;
     font-weight: bold;
     cursor: default;
}
 #hd .hamburger, #intel-abt .hamburger {
     display: none;
}
 #hd .hd-sec, #intel-abt .hd-sec {
     position: relative;
}
 #hd .sec-filter, #intel-abt .sec-filter {
     width: 100%;
     border-bottom: 1px solid #02aee5;
     position: relative;
     overflow-x: auto;
     overflow-y: visible;
     -ms-overflow-style: none;
     z-index: 3;
}
 #hd .sec-filter::-webkit-scrollbar, #intel-abt .sec-filter::-webkit-scrollbar {
     height: 3px;
}
 #hd .sec-filter::-webkit-scrollbar-track, #intel-abt .sec-filter::-webkit-scrollbar-track {
     background: transparent;
}
 #hd .sec-filter::-webkit-scrollbar-thumb, #intel-abt .sec-filter::-webkit-scrollbar-thumb {
     background: transparent;
}
 #hd .sec-filter::-webkit-scrollbar-thumb:hover, #intel-abt .sec-filter::-webkit-scrollbar-thumb:hover {
     background: transparent;
}
 #hd .sec-filter ul, #intel-abt .sec-filter ul {
     width: 100%;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     text-align: center;
     margin-bottom: -1px;
     white-space: nowrap;
}
 #hd .sec-filter ul.hd-triggered li, #intel-abt .sec-filter ul.hd-triggered li {
     color: #525252;
}
 #hd .sec-filter ul.hd-triggered li.hd-active, #intel-abt .sec-filter ul.hd-triggered li.hd-active {
     color: #02aee5;
}
 #hd .sec-filter ul.hd-triggered li.hd-active:after, #intel-abt .sec-filter ul.hd-triggered li.hd-active:after {
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -webkit-transform: scale(1, 1);
     transform: scale(1, 1);
}
 #hd .sec-filter li, #intel-abt .sec-filter li {
     width: 100%;
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.25em;
     font-weight: normal;
     position: relative;
     cursor: pointer;
}
 #hd .sec-filter li:first-child, #intel-abt .sec-filter li:first-child {
     margin-left: auto;
}
 #hd .sec-filter li:last-child, #intel-abt .sec-filter li:last-child {
     margin-right: auto;
}
 #hd .sec-filter li:after, #intel-abt .sec-filter li:after {
     content: '';
     display: block;
     width: 100%;
     height: 4px;
     background: black;
     position: absolute;
     bottom: 0;
     left: 0;
     -moz-transform: scale(0, 1);
     -o-transform: scale(0, 1);
     -ms-transform: scale(0, 1);
     -webkit-transform: scale(0, 1);
     transform: scale(0, 1);
     -moz-transition: transform 0.4s ease-out;
     -o-transition: transform 0.4s ease-out;
     -webkit-transition: transform 0.4s ease-out;
     transition: transform 0.4s ease-out;
}
 #hd .sec-filter li:hover, #intel-abt .sec-filter li:hover {
     color: rgba(255, 255, 255, 0.8);
}
 #hd .sec-filter li.hd-active, #intel-abt .sec-filter li.hd-active {
     pointer-events: none;
}
 #hd .sec-filter h3, #intel-abt .sec-filter h3 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-weight: 300;
     font-size: 1em;
     padding: .75em 1.125em;
     margin-bottom: 0;
}
 #hd .sec-filter.filter-feature, #intel-abt .sec-filter.filter-feature {
     margin: 2em 0 -3px;
     border-bottom: none;
     position: relative;
}
 #hd .sec-filter.filter-feature:before, #hd .sec-filter.filter-feature:after, #intel-abt .sec-filter.filter-feature:before, #intel-abt .sec-filter.filter-feature:after {
     content: '';
     display: block;
     width: 100%;
     max-width: 1700px;
     height: 2px;
     background-color: rgba(182, 182, 182, 0.205);
     background-image: -moz-linear-gradient(90deg, rgba(182, 182, 182, 0.205) 0%, rgba(206, 206, 206, 0.562) 3%, #cecece 15%, transparent 20%, transparent 50%, transparent 75%, #cecece 90%, rgba(206, 206, 206, 0.562) 97%, rgba(182, 182, 182, 0.205) 100%);
     background-image: -webkit-linear-gradient(90deg, rgba(182, 182, 182, 0.205) 0%, rgba(206, 206, 206, 0.562) 3%, #cecece 15%, transparent 20%, transparent 50%, transparent 75%, #cecece 90%, rgba(206, 206, 206, 0.562) 97%, rgba(182, 182, 182, 0.205) 100%);
     background-image: linear-gradient(90deg, rgba(182, 182, 182, 0.205) 0%, rgba(206, 206, 206, 0.562) 3%, #cecece 15%, transparent 20%, transparent 50%, transparent 75%, #cecece 90%, rgba(206, 206, 206, 0.562) 97%, rgba(182, 182, 182, 0.205) 100%);
     background-color: transparent;
     background-repeat: no-repeat;
     position: absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
}
 #hd .sec-filter.filter-feature:before, #intel-abt .sec-filter.filter-feature:before {
     top: 0;
     right: 10%;
}
 #hd .sec-filter.filter-feature:after, #intel-abt .sec-filter.filter-feature:after {
     bottom: 0;
     left: 2.5%;
}
 #hd .sec-filter.filter-feature ul, #intel-abt .sec-filter.filter-feature ul {
     width: 90%;
     margin-bottom: 0;
}
 #hd .sec-filter.filter-feature li, #intel-abt .sec-filter.filter-feature li {
     font-size: 1.45em;
     margin-right: -2px;
}
 #hd .sec-filter.filter-feature li:hover h3, #intel-abt .sec-filter.filter-feature li:hover h3 {
     color: white;
}
 #hd .sec-filter.filter-feature li.hd-active h3, #intel-abt .sec-filter.filter-feature li.hd-active h3 {
     color: white;
}
 #hd .sec-filter.filter-feature li.hd-active h3:after, #intel-abt .sec-filter.filter-feature li.hd-active h3:after {
     opacity: .875;
}
 #hd .sec-filter.filter-feature h3, #intel-abt .sec-filter.filter-feature h3 {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     padding-top: 1em;
     color: #aaaaaa;
     position: relative;
     z-index: 2;
}
 #hd .sec-filter.filter-feature h3:before, #hd .sec-filter.filter-feature h3:after, #intel-abt .sec-filter.filter-feature h3:before, #intel-abt .sec-filter.filter-feature h3:after {
     content: '';
     display: block;
     border-top-right-radius: 1em;
     -moz-transform: skew(30deg, 0deg);
     -o-transform: skew(30deg, 0deg);
     -ms-transform: skew(30deg, 0deg);
     -webkit-transform: skew(30deg, 0deg);
     transform: skew(30deg, 0deg);
     position: absolute;
     top: 0;
     left: 0;
}
 #hd .sec-filter.filter-feature h3:before, #intel-abt .sec-filter.filter-feature h3:before {
     width: 100%;
     height: 100%;
     background-color: #777;
     background-image: -moz-linear-gradient(90deg, #777 0%, #ddd 20%, #777 50%, #ddd 80%, #777 100%);
     background-image: -webkit-linear-gradient(90deg, #777 0%, #ddd 20%, #777 50%, #ddd 80%, #777 100%);
     background-image: linear-gradient(90deg, #777 0%, #ddd 20%, #777 50%, #ddd 80%, #777 100%);
     z-index: -2;
}
 #hd .sec-filter.filter-feature h3:after, #intel-abt .sec-filter.filter-feature h3:after {
     width: calc(100% - 5px);
     height: calc(100% - 5px);
     margin: 2px;
     background: #4d4e4f;
     background-color: #222;
     background-image: -moz-linear-gradient(90deg, #222 0%, #202020 90%, #232323 95%, #141414 100%);
     background-image: -webkit-linear-gradient(90deg, #222 0%, #202020 90%, #232323 95%, #141414 100%);
     background-image: linear-gradient(90deg, #222 0%, #202020 90%, #232323 95%, #141414 100%);
     z-index: -1;
}
 #hd .sec-filter.filter-model, #intel-abt .sec-filter.filter-model {
     margin: 2.5em 0 0;
     border-bottom-color: #4d4e4f;
     position: relative;
}
 #hd .sec-filter.filter-model ul, #intel-abt .sec-filter.filter-model ul {
     width: 90%;
     margin-bottom: 0;
}
 #hd .sec-filter.filter-model li, #intel-abt .sec-filter.filter-model li {
     font-size: 1.45em;
     margin-right: -2px;
}
 #hd .sec-filter.filter-model li:hover, #intel-abt .sec-filter.filter-model li:hover {
     background: rgba(255, 255, 255, 0.1);
}
 #hd .sec-filter.filter-model li:hover h3, #intel-abt .sec-filter.filter-model li:hover h3 {
     color: white;
}
 #hd .sec-filter.filter-model li.hd-active h3, #intel-abt .sec-filter.filter-model li.hd-active h3 {
     color: white;
}
 #hd .sec-filter.filter-model li.hd-active h3:after, #intel-abt .sec-filter.filter-model li.hd-active h3:after {
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -webkit-transform: scale(1, 1);
     transform: scale(1, 1);
}
 #hd .sec-filter.filter-model h3, #intel-abt .sec-filter.filter-model h3 {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.75em;
     padding: .75em .5em .25em .5em;
     color: #aaaaaa;
     position: relative;
     z-index: 2;
}
 #hd .sec-filter.filter-model h3:after, #intel-abt .sec-filter.filter-model h3:after {
     content: '';
     display: block;
     width: 100%;
     height: 3px;
     background: #02aee5;
     position: absolute;
     bottom: 0;
     left: 0;
     -moz-transform: scale(0, 1);
     -o-transform: scale(0, 1);
     -ms-transform: scale(0, 1);
     -webkit-transform: scale(0, 1);
     transform: scale(0, 1);
     -moz-transition: transform 0.25s ease;
     -o-transition: transform 0.25s ease;
     -webkit-transition: transform 0.25s ease;
     transition: transform 0.25s ease;
}
 #hd .sec-content > div, #intel-abt .sec-content > div {
     display: none;
     flex-wrap: wrap;
     flex-direction: column;
     align-items: center;
     width: 100%;
     padding: 6em 0;
     padding: 0;/*20211021 RCD*/
}
 #hd .sec-content > div.hd-active, #intel-abt .sec-content > div.hd-active {
     display: flex;
     -webkit-animation-delay: 0s;
     -webkit-animation-duration: 0.4s;
     -webkit-animation-name: fadeIn;
     -webkit-animation-timing-function: ease-out;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-delay: 0s;
     -moz-animation-duration: 0.4s;
     -moz-animation-name: fadeIn;
     -moz-animation-timing-function: ease-out;
     -moz-animation-iteration-count: 1;
     -moz-animation-fill-mode: forwards;
     -o-animation-delay: 0s;
     -o-animation-duration: 0.4s;
     -o-animation-name: fadeIn;
     -o-animation-timing-function: ease-out;
     -o-animation-iteration-count: 1;
     -o-animation-fill-mode: forwards;
     animation-delay: 0s;
     animation-duration: 0.4s;
     animation-name: fadeIn;
     animation-timing-function: ease-out;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
}
 #hd .bg-top, #intel-abt .bg-top {
     background: url(../img/title-bg.jpg) center top no-repeat;
     background-size: 100% auto;
}
 #hd .scroll-up, #intel-abt .scroll-up {
     position: fixed;
     right: 30px;
     bottom: 30px;
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.5) url(../img/backtop.png) center no-repeat;
     border: 1px solid #aaaaaa;
     text-align: center;
     cursor: pointer;
     opacity: 0;
     z-index: 999;
}
 #hd .scroll-up.hd-show, #intel-abt .scroll-up.hd-show {
     opacity: 1;
}
 #hd .scroll-up:hover, #intel-abt .scroll-up:hover {
     background-color: rgba(255, 255, 255, 0.75);
}
 #fp-nav ul li:hover a span {
     background: #02aee5;
}
 #fp-nav ul li:hover a.active span {
     background: #02aee5;
}
 #fp-nav ul li a.active span {
     background: #02aee5;
}
 #fp-nav ul li .fp-tooltip {
     color: #02aee5;
}
 @media screen and (max-width: 1440px) {
     #hd .sec-filter li, #intel-abt .sec-filter li {
         font-size: 1.25em;
    }
     #hd .sec-content > div, #intel-abt .sec-content > div {
         padding: 5em 0;
    }
}
 @media screen and (max-width: 1280px) {
     #hd .sec-filter.filter-feature li, #intel-abt .sec-filter.filter-feature li {
         font-size: 1.25em;
    }
}
 @media screen and (max-width: 1024px) {
     #hd .sec-filter.filter-feature li, #intel-abt .sec-filter.filter-feature li {
         font-size: 1.125em;
    }
     #hd .sec-content > div, #intel-abt .sec-content > div {
         padding: 4em 0;
    }
     #hd .bg-top, #intel-abt .bg-top {
         background-size: 150% auto;
    }
}
 @media screen and (max-width: 1023px) {
     #hd header .menu a, #intel-abt header .menu a {
         padding-left: .5em;
         padding-right: .5em;
    }
}
 @media screen and (max-width: 768px) {
     #hd .hamburger span, #intel-abt .hamburger span, #hd .hamburger:before, #intel-abt .hamburger:before, #hd .hamburger:after, #intel-abt .hamburger:after {
         content: '';
         display: block;
         width: 24px;
         height: 3px;
         background: white;
         border-radius: 2px;
         position: absolute;
         top: 20px;
         left: 0;
         right: 0;
         margin: 0 auto;
         -moz-transition: all 0.1s ease;
         -o-transition: all 0.1s ease;
         -webkit-transition: all 0.1s ease;
         transition: all 0.1s ease;
    }
     #hd header .hd-container, #intel-abt header .hd-container {
         width: 100%;
         padding-left: 5%;
    }
     #hd header .logo-rog, #intel-abt header .logo-rog {
         margin-top: 8px;
         margin-bottom: 8px;
    }
     #hd header .menu, #intel-abt header .menu {
         display: none;
         width: 100%;
         background: #303030;
         position: absolute;
         top: 100%;
         left: 0;
         z-index: -1;
    }
     #hd header .menu a, #intel-abt header .menu a {
         display: block;
         font-size: 1em;
         padding: 1em 0;
         border-bottom: 1px solid #505050;
    }
     #hd .hamburger, #intel-abt .hamburger {
         order: 3;
         display: block;
         width: 46px;
         height: 46px;
         background: #02aee5;
         margin-left: 1em;
         position: relative;
         cursor: pointer;
    }
     #hd .hamburger:before, #intel-abt .hamburger:before {
         -moz-transform: translate(0, -0.5em);
         -o-transform: translate(0, -0.5em);
         -ms-transform: translate(0, -0.5em);
         -webkit-transform: translate(0, -0.5em);
         transform: translate(0, -0.5em);
    }
     #hd .hamburger:after, #intel-abt .hamburger:after {
         -moz-transform: translate(0, 0.5em);
         -o-transform: translate(0, 0.5em);
         -ms-transform: translate(0, 0.5em);
         -webkit-transform: translate(0, 0.5em);
         transform: translate(0, 0.5em);
    }
     #hd .hamburger.hd-active:before, #intel-abt .hamburger.hd-active:before {
         opacity: 1;
         -moz-transform: translate(0, 0) rotate(-45deg);
         -o-transform: translate(0, 0) rotate(-45deg);
         -ms-transform: translate(0, 0) rotate(-45deg);
         -webkit-transform: translate(0, 0) rotate(-45deg);
         transform: translate(0, 0) rotate(-45deg);
    }
     #hd .hamburger.hd-active:after, #intel-abt .hamburger.hd-active:after {
         opacity: 1;
         -moz-transform: translate(0, 0) rotate(45deg);
         -o-transform: translate(0, 0) rotate(45deg);
         -ms-transform: translate(0, 0) rotate(45deg);
         -webkit-transform: translate(0, 0) rotate(45deg);
         transform: translate(0, 0) rotate(45deg);
    }
     #hd .hamburger.hd-active span, #intel-abt .hamburger.hd-active span {
         opacity: 0;
    }
     #hd .hamburger.hd-active ~ .menu, #intel-abt .hamburger.hd-active ~ .menu {
         display: block;
         -webkit-animation-delay: 0s;
         -webkit-animation-duration: 0.4s;
         -webkit-animation-name: fadeInDown;
         -webkit-animation-timing-function: ease;
         -webkit-animation-iteration-count: 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-delay: 0s;
         -moz-animation-duration: 0.4s;
         -moz-animation-name: fadeInDown;
         -moz-animation-timing-function: ease;
         -moz-animation-iteration-count: 1;
         -moz-animation-fill-mode: forwards;
         -o-animation-delay: 0s;
         -o-animation-duration: 0.4s;
         -o-animation-name: fadeInDown;
         -o-animation-timing-function: ease;
         -o-animation-iteration-count: 1;
         -o-animation-fill-mode: forwards;
         animation-delay: 0s;
         animation-duration: 0.4s;
         animation-name: fadeInDown;
         animation-timing-function: ease;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
    }
     #hd .sec-filter li, #intel-abt .sec-filter li {
         font-size: 1.125em;
    }
     #hd .sec-filter.filter-feature:before, #intel-abt .sec-filter.filter-feature:before {
         display: none;
    }
     #hd .sec-filter.filter-feature li, #intel-abt .sec-filter.filter-feature li {
         font-size: 1em;
    }
     #hd .sec-filter.filter-feature h3:after, #intel-abt .sec-filter.filter-feature h3:after {
         width: calc(100% - 4px);
         height: calc(100% - 4px);
    }
}
 @media screen and (max-width: 620px) {
     #hd .sec-content > div, #intel-abt .sec-content > div {
         padding: 3em 0;
    }
     #hd .bg-top, #intel-abt .bg-top {
         background-size: 200% auto;
    }
     #fp-nav {
         display: none;
    }
}
 @media screen and (max-width: 480px) {
     #hd .bg-top, #intel-abt .bg-top {
         background-size: 300% auto;
    }
     #hd .scroll-up, #intel-abt .scroll-up {
         right: 10px;
         bottom: 10px;
    }
}
 #hd .cover-container, #intel-abt .cover-container {
     position: relative;
     cursor: pointer;
}
 #hd .cover-container:hover figure img, #intel-abt .cover-container:hover figure img {
     opacity: .75;
}
 #hd .cover-container.trigger-video:hover .icon-play, #intel-abt .cover-container.trigger-video:hover .icon-play {
     background: #02aee5;
     opacity: 1;
     -moz-transform: scale(1.25, 1.25);
     -o-transform: scale(1.25, 1.25);
     -ms-transform: scale(1.25, 1.25);
     -webkit-transform: scale(1.25, 1.25);
     transform: scale(1.25, 1.25);
}
 #hd .cover-container figure, #intel-abt .cover-container figure {
     width: 100%;
     height: 0;
     padding-bottom: 75%;
     margin-bottom: 1em;
     position: relative;
     overflow: hidden;
     -moz-transition: opacity 0.25s ease;
     -o-transition: opacity 0.25s ease;
     -webkit-transition: opacity 0.25s ease;
     transition: opacity 0.25s ease;
}
 #hd .cover-container figure img, #intel-abt .cover-container figure img {
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     -moz-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
}
 #hd .cover-container .icon-play, #intel-abt .cover-container .icon-play {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: #aaaaaa;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     opacity: .5;
     -moz-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
}
 #hd .cover-container .icon-play:before, #intel-abt .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, #intel-abt .trigger-video {
     cursor: pointer;
}
 #hd #banner-z590 {
     position: relative;
}
 #hd #banner-z590 .hd-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     width: 42%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 55%;
     margin: auto 0;
}
 #hd #banner-z590 .hd-content h3 {
     font-size: 1.5vw;
     letter-spacing: .15em;
     margin-bottom: 1.5em;
}
 #hd #banner-z590 .hd-content h2 {
     font-size: 4.9vw;
     letter-spacing: -.03em;
     margin-bottom: .2em;
     -moz-transform: scale(1, 1.2);
     -o-transform: scale(1, 1.2);
     -ms-transform: scale(1, 1.2);
     -webkit-transform: scale(1, 1.2);
     transform: scale(1, 1.2);
}
 #hd #banner-z590 .hd-content ul {
     font-size: 1.5vw;
     font-style: italic;
     white-space: nowrap;
     -moz-transform: scale(0.8, 1);
     -o-transform: scale(0.8, 1);
     -ms-transform: scale(0.8, 1);
     -webkit-transform: scale(0.8, 1);
     transform: scale(0.8, 1);
}
 #hd #banner-z590 .hd-content ul li {
     display: inline-block;
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
}
 #hd #banner-z590 .hd-content ul li:after {
     content: '';
     display: inline-block;
     vertical-align: middle;
     width: 7px;
     height: 7px;
     border-radius: 4px;
     background: #67cfff;
     margin: -2px .1em 2px .75em;
}
 #hd #banner-z590 .hd-content ul li:last-child:after {
     display: none;
}
 #hd #banner-z590 .hd-tag {
     font-size: 1.5vw;
     letter-spacing: .1em;
     color: #dcdddd;
     position: absolute;
     top: 1em;
     right: 20px;
}
 #hd #banner-z590 .hd-icon {
     width: 45%;
     max-width: 365px !important;
     position: absolute;
     bottom: 20px;
     right: 0;
}
 @media screen and (max-width: 1024px) {
     #hd #banner-z590 {
         position: relative;
    }
     #hd #banner-z590 .hd-content {
         width: 90%;
         position: absolute;
         left: 0;
         right: 0;
         top: auto;
         bottom: 0;
         margin: 2em auto;
    }
     #hd #banner-z590 .hd-content h3 {
         font-size: 3.3vw;
         margin-bottom: 1em;
    }
     #hd #banner-z590 .hd-content h2 {
         font-size: 8.2vw;
         margin-bottom: 0;
    }
     #hd #banner-z590 .hd-content ul {
         font-size: 2.5vw;
    }
     #hd #banner-z590 .hd-tag {
         font-size: 2.8vw;
         letter-spacing: .04em;
         color: #dcdddd;
         position: absolute;
         top: 10px;
         right: 20px;
    }
     #hd #banner-z590 .hd-icon {
         position: relative;
         bottom: 0;
         margin: 2em auto 0;
    }
}
 @media screen and (max-width: 480px) {
     #hd #banner-z590 {
         position: relative;
    }
     #hd #banner-z590 .hd-content {
         margin: .5em auto;
    }
     #hd #banner-z590 .hd-content h3 {
         font-size: 3.3vw;
    }
     #hd #banner-z590 .hd-content h2 {
         font-size: 10vw;
         margin-bottom: 0;
    }
     #hd #banner-z590 .hd-content ul {
         font-size: 3.3vw;
    }
     #hd #banner-z590 .hd-tag {
         font-size: 3vw;
         top: 5px;
         right: 10px;
    }
     #hd #banner-z590 .hd-icon {
         margin: 1em auto 0;
    }
}
 #intro {
     padding: 4em 0;
}
 #intro p {
     margin-bottom: 2em;
}
 #intro .hd-content {
     padding-left: 2em;
}
 @media screen and (max-width: 768px) {
     #intro .hd-container {
         flex-direction: column-reverse;
    }
     #intro .hd-container .hd-col50 {
         width: 100%;
         text-align: center;
    }
     #intro .hd-container .hd-content {
         padding-left: 0;
    }
}
 @media screen and (max-width: 480px) {
     #intro {
         padding: 3em 0;
    }
}
 #choose-your-z590 {
     padding-bottom: 5em;
}
 #choose-your-z590 .pd-item {
     display: flex;
     flex-direction: column;
     padding: 0 .75em;
}
 #choose-your-z590 .pd-item .hd-frame {
     display: inline-block;
     border: 2px #2f2f2f solid;
     border-radius: 10px;
     background: linear-gradient(to bottom, #0d0d0d 0%, #292929 100%);
     width: 100%;
     height: 100%;
     padding: 1.25em 10px;
     margin-top: 30%;
}
 #choose-your-z590 .pd-item .btn-container {
     margin-top: auto;
}
 #choose-your-z590 .pd-item img {
     width: 80%;
     max-width: 250px !important;
     margin-top: -30%;
     margin-bottom: 1em;
}
 #choose-your-z590 .pd-item .hd-content {
     font-size: .9em;
     min-height: 4.5em;
     margin-bottom: 1em;
}
 #choose-your-z590 .pd-item .hd-content h4 {
     font-size: 1.25em;
}
 #choose-your-z590 .pd-item .hd-content p {
     line-height: 1.2;
}
 #choose-your-z590 .pd-item li {
     border-bottom: 1px #4d4e4f solid;
     padding: 5px 5px 5px 35px;
     position: relative;
}
 #choose-your-z590 .pd-item li:before {
     content: '';
     width: 6px;
     height: 6px;
     border: 2px #02aee5 solid;
     border-radius: 5px;
     position: absolute;
     left: 13px;
     top: 10px;
}
 #choose-your-z590 .pd-item li p {
     font-weight: 400;
     line-height: 1.2;
}
 @media screen and (max-width: 1280px) {
     #choose-your-z590 {
         padding-bottom: 4em;
    }
}
 @media screen and (max-width: 1024px) {
     #choose-your-z590 {
         padding-bottom: 3em;
    }
}
 @media screen and (max-width: 1023px) {
     #choose-your-z590 .pd-item {
         width: 50%;
    }
}
 @media screen and (max-width: 768px) {
     #choose-your-z590 .pd-item .hd-frame {
         padding: 1.25em 0 .25em;
    }
     #choose-your-z590 .pd-item img {
         margin-bottom: .5em;
    }
     #choose-your-z590 .pd-item .hd-content {
         padding: 0 .75em;
    }
     #choose-your-z590 .pd-item li:last-child {
         border-bottom: none;
    }
}
 @media screen and (max-width: 620px) {
     #choose-your-z590 .pd-item {
         width: 100%;
         max-width: 500px;
         margin-left: auto;
         margin-right: auto;
    }
}
 #hd .tab-cooling {
     flex-direction: column;
     padding-bottom: 3em;
}
 #hd .tab-cooling figure {
     display: block;
     margin: 0 auto;
     position: relative;
}
 #hd .tab-cooling figure > img {
     width: 56%;
     width: 51%;/*20211021 RCD*/
     max-width: 835px !important;
     margin-left: 0;
}
 #hd .tab-cooling ol {
     display: block;
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     counter-reset: mycounter;
}
 #hd .tab-cooling li {
     left: 56%;
     left: 53%;/*20211021 RCD*/
     max-width: 40%;
     max-width: 45%;/*20211021 RCD*/
     position: absolute;
}
 #hd .tab-cooling li:nth-child(1) {
     top: 16.5%;
     top: 10%;/*20211021 RCD*/
}
 #hd .tab-cooling li:nth-child(2) {
     top: 56.5%;
     top: 58%;/*20211021 RCD*/
}
 #hd .tab-cooling li p {
     margin-bottom: .75em;
     color: #d6d6d6;
}
 #hd .tab-networking {
     padding-bottom: 0;
     background: url(../img/keyfeature/bg-connectivity.jpg) center top no-repeat;
     background-size: contain;
}
 #hd .tab-networking .hd-container {
     flex-direction: column;
}
 #hd .tab-networking ul {
     margin-top: 1em;
}
 #hd .tab-networking li {
     padding-right: 1em;
}
 #hd .tab-networking li h3 small {
     font: inherit;
     font-size: .875em;
}
 #hd .tab-networking li p {
     padding-right: 2em;
}
 #hd #wifi6e {
     display: none;
}
 #hd #wifi6e.hd-active {
     display: block;
     -webkit-animation-delay: 0s;
     -webkit-animation-duration: 0.4s;
     -webkit-animation-name: fadeInUp;
     -webkit-animation-timing-function: ease;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-delay: 0s;
     -moz-animation-duration: 0.4s;
     -moz-animation-name: fadeInUp;
     -moz-animation-timing-function: ease;
     -moz-animation-iteration-count: 1;
     -moz-animation-fill-mode: forwards;
     -o-animation-delay: 0s;
     -o-animation-duration: 0.4s;
     -o-animation-name: fadeInUp;
     -o-animation-timing-function: ease;
     -o-animation-iteration-count: 1;
     -o-animation-fill-mode: forwards;
     animation-delay: 0s;
     animation-duration: 0.4s;
     animation-name: fadeInUp;
     animation-timing-function: ease;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
}
 #hd .tab-diy .hd-container {
     background: #13202c;
}
 #hd .tab-diy .hd-container figure {
     position: relative;
     overflow: hidden;
}
 #hd .tab-diy .hd-container figure:after {
     content: '';
     display: block;
     width: 50%;
     height: 100%;
     position: absolute;
     bottom: 0;
     right: 0;
     background-color: rgba(19, 32, 44, 0);
     background-image: -moz-linear-gradient(90deg, rgba(19, 32, 44, 0), #13202c);
     background-image: -webkit-linear-gradient(90deg, rgba(19, 32, 44, 0), #13202c);
     background-image: linear-gradient(90deg, rgba(19, 32, 44, 0), #13202c);
     background-color: transparent !important;
}
 #hd .tab-diy .hd-container figure img {
     width: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     margin: auto 0;
}
 #hd .tab-diy .hd-content {
     padding: 10% 5% 10% 2em;
}
 #hd .tab-diy .hd-content p {
     margin-bottom: 0;
}
 #hd .tab-ai {
     padding-bottom: 0 !important;
}
 #hd #ai-noise-cancelation {
     margin-top: 4em;
     padding: 6em 0;
     position: relative;
     overflow: hidden;
}
 #hd #ai-noise-cancelation h2 + p {
     margin-bottom: 1em;
}
 #hd #ai-noise-cancelation .hd-feature {
     width: 100%;
     max-width: 1200px;
     margin: 4em auto 2em;
}
 #hd #ai-noise-cancelation .hd-feature li {
     padding: 0 2em;
}
 #hd #ai-noise-cancelation .hd-feature li h3 {
     font-size: 3em;
     letter-spacing: -.04em;
     text-transform: none;
     margin-bottom: 0;
}
 #hd #ai-noise-cancelation .hd-feature li p {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.5em;
     line-height: 1.25;
     font-weight: 600;
     margin-bottom: 0;
}
 #hd #ai-noise-cancelation a.hd-btn {
     font-size: 1.125em;
     padding: .75em 2em;
     margin-top: 1.75em;
}
 #hd #ai-noise-cancelation .chart-container .hd-content {
     position: relative;
     z-index: 2;
}
 #hd #ai-noise-cancelation .chart-container > figure {
     margin-right: -20%;
}
 #hd #ai-noise-cancelation .chart-container .hd-chart {
     display: flex;
     flex-wrap: nowrap;
     margin: 2em 0;
}
 #hd #ai-noise-cancelation .chart-container .hd-title {
     display: flex;
     flex-direction: column;
     padding-right: 1em;
}
 #hd #ai-noise-cancelation .chart-container .hd-title p {
     line-height: 1;
     margin: auto 0;
}
 #hd #ai-noise-cancelation .chart-container .bar-container {
     min-width: 20em;
     padding-right: 2em;
     border-left: 1px solid white;
     position: relative;
     overflow: hidden;
}
 #hd #ai-noise-cancelation .chart-container .bar-container ul {
     margin: .5em 0;
}
 #hd #ai-noise-cancelation .chart-container .bar-container ul:first-child {
     margin-bottom: 1em;
}
 #hd #ai-noise-cancelation .chart-container .bar-container ul:first-child li:first-child {
     width: 98.3%;
}
 #hd #ai-noise-cancelation .chart-container .bar-container ul:last-child li:first-child {
     width: 74.6%;
}
 #hd #ai-noise-cancelation .chart-container .hd-bar {
     width: 80%;
     height: 1.25em;
     margin: .35em 0 .35em -1em;
     background: #aaaaaa;
     color: black;
     -moz-transform: skew(30deg, 0deg);
     -o-transform: skew(30deg, 0deg);
     -ms-transform: skew(30deg, 0deg);
     -webkit-transform: skew(30deg, 0deg);
     transform: skew(30deg, 0deg);
     position: relative;
}
 #hd #ai-noise-cancelation .chart-container .hd-bar.hd-bar-primary {
     background: #02aee5;
     color: white;
}
 #hd #ai-noise-cancelation .chart-container .hd-bar.hd-bar-white {
     background: white;
}
 #hd #ai-noise-cancelation .chart-container .hd-bar small {
     display: block;
     font-weight: 500;
     line-height: 1.75;
     text-align: right;
     padding-right: 1em;
     -moz-transform: skew(-30deg, 0deg);
     -o-transform: skew(-30deg, 0deg);
     -ms-transform: skew(-30deg, 0deg);
     -webkit-transform: skew(-30deg, 0deg);
     transform: skew(-30deg, 0deg);
}
 #hd #ai-noise-cancelation .chart-container .hd-bar p {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.25em;
     white-space: nowrap;
     position: absolute;
     left: 100%;
     top: -.25em;
     bottom: 0;
     margin: auto .5em;
     -moz-transform: skew(-30deg, 0deg);
     -o-transform: skew(-30deg, 0deg);
     -ms-transform: skew(-30deg, 0deg);
     -webkit-transform: skew(-30deg, 0deg);
     transform: skew(-30deg, 0deg);
}
 #hd #ai-noise-cancelation .chart-container .hd-tag {
     width: 7em;
     align-self: flex-start;
     text-align: center;
     color: #02aee5;
     margin-top: 1em;
     position: relative;
}
 #hd #ai-noise-cancelation .chart-container .hd-tag h4 {
     color: #02aee5 !important;
     margin-bottom: 0;
}
 #hd #ai-noise-cancelation .chart-container .hd-tag p {
     line-height: 1;
     font-weight: 500;
}
 #hd #ai-noise-cancelation .chart-container .hd-tag:before {
     content: '';
     display: block;
     width: 100%;
     height: 100%;
     box-sizing: padding-box;
     padding: .75em .5em;
     border: 1px solid #02aee5;
     -moz-transform: skew(25deg, 0deg);
     -o-transform: skew(25deg, 0deg);
     -ms-transform: skew(25deg, 0deg);
     -webkit-transform: skew(25deg, 0deg);
     transform: skew(25deg, 0deg);
     position: absolute;
     top: -.75em;
     left: -.5em;
}
 #hd #ai-audio {
     margin: 1em 0 3em;
     position: relative;
     overflow: hidden;
}
 #hd #ai-audio h2 small {
     font: inherit;
     font-size: .875em;
}
 #hd #ai-audio .player {
     width: 100%;
     height: 0;
     padding-bottom: 45.4918%;
     background: url("../img/audio/wave.jpg") center no-repeat;
     background-size: 100% auto;
     position: relative;
}
 #hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound {
     width: 13%;
     position: absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
}
 #hd #ai-audio .player .icon-mic {
     bottom: 60%;
}
 #hd #ai-audio .player .icon-sound {
     top: 57%;
}
 #hd #ai-audio .player ul {
     width: 100%;
     max-width: none;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     margin: 0 auto;
}
 #hd #ai-audio .player li {
     width: 18%;
     padding: 0;
     text-align: center;
     position: absolute;
     white-space: nowrap;
}
 #hd #ai-audio .player li:nth-child(1) {
     left: -2%;
     top: 7%;
}
 #hd #ai-audio .player li:nth-child(2) {
     left: -2%;
     top: 50%;
}
 #hd #ai-audio .player li:nth-child(3) {
     right: 0;
     top: 7%;
}
 #hd #ai-audio .player li:nth-child(4) {
     right: 0;
     top: 50%;
}
 #hd #ai-audio .player li img {
     margin-bottom: -10%;
}
 #hd #ai-audio .player li h3 {
     font-size: 2.75em;
     margin-bottom: -.125em;
}
 #hd #ai-audio .player li p {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-weight: 400;
     color: #ff9e19;
}
 #hd #ai-audio .player .hd-btn {
     font-size: 1.5em;
     padding: .35em .75em;
     cursor: default;
}
 #hd #ai-audio .player .hd-btn.color-primary {
     color: #02aee5;
}
 #hd #ai-audio .player .hd-btn.color-grey {
     color: #aaaaaa;
     border-color: #aaaaaa;
}
 #hd #ai-audio .trigger-play {
     width: 136px;
     height: 136px;
     cursor: pointer;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd #ai-audio .trigger-play:before, #hd #ai-audio .trigger-play:after {
     content: '';
     display: block;
     height: 0;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd #ai-audio .trigger-play:before {
     width: 100%;
     padding-bottom: 100%;
     background: white;
     border-radius: 50%;
}
 #hd #ai-audio .trigger-play:after {
     width: calc(100% - 10px);
     padding-bottom: calc(100% - 10px);
     border-radius: 100%;
     overflow: hidden;
     background: rgba(0, 0, 0, 0.78) url("../img/audio/play-icon-play.png") center no-repeat;
     background-size: 190%;
}
 #hd #ai-audio .trigger-play.is-playing:after {
     background-image: url("../img/audio/play-icon-pause.png");
}
 #hd #ai-audio .switch-container {
     margin: 0 auto;
}
 #hd #ai-audio .switch-btn {
     width: 80%;
     max-width: 280px;
     border: 3px solid white;
     border-radius: 5px;
     margin: 2em auto 0;
}
 #hd #ai-audio .switch-btn div {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.5em;
     padding: .5em .75em .25em;
     cursor: pointer;
}
 #hd #ai-audio .switch-btn div.active {
     background: white;
     color: black;
     cursor: default;
}
 #hd #ai-audio .caption {
     max-width: 800px;
     margin: 2em auto;
}
 #hd #ai-audio .caption li {
     font-weight: lighter;
     position: relative;
}
 #hd #ai-audio .caption li:before {
     content: '';
     display: inline-block;
     vertical-align: middle;
     width: 50px;
     height: 5px;
     margin-right: 20px;
}
 #hd #ai-audio .caption li.background:before {
     background: #aaaaaa;
}
 #hd #ai-audio .caption li.voice:before {
     background: #a200ff;
}
 #hd #ai-audio .caption li.speech:before {
     background: #70e2ff;
}
 #slider-ai {
     margin-top: 2em;
}
 #slider-ai .hd-left {
     padding-right: 2em;
}
 #slider-ai .hd-right {
     padding-top: 5%;
}
 #slider-ai .hd-right .hd-btn {
     margin: 3em auto 2em 0;
}
 @media screen and (max-width: 1440px) {
     #hd #ai-noise-cancelation .hd-feature li h3 {
         font-size: 2.5em;
    }
     #hd #ai-noise-cancelation .chart-container > figure {
         width: 60%;
         margin-right: -10%;
    }
     #hd #ai-noise-cancelation .chart-container .bar-container {
         min-width: 18em;
    }
     #hd #ai-noise-cancelation .chart-container .hd-tag {
         width: 6em;
    }
     #hd #ai-audio .switch-btn {
         max-width: 18vw;
         margin: 2em auto 0;
    }
     #hd #ai-audio .switch-btn div {
         font-size: 1.75vw;
    }
     #hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound {
         width: 12%;
    }
     #hd #ai-audio .player li {
         width: 20%;
    }
     #hd #ai-audio .player li img {
         width: 12vw;
         max-width: none !important;
         margin-bottom: -10%;
    }
     #hd #ai-audio .player li h3 {
         font-size: 3vw;
    }
     #hd #ai-audio .player li p {
         font-size: 1.75vw;
    }
     #hd #ai-audio .player .hd-btn {
         font-size: 1.75vw;
         margin-top: .5em;
    }
     #hd #ai-audio .trigger-play {
         width: 8vw;
         height: 8vw;
    }
}
 @media screen and (max-width: 1280px) {
     #hd #ai-noise-cancelation .chart-container {
         padding: 2em 0;
    }
     #hd #ai-noise-cancelation .chart-container h3 {
         font-size: 2em;
    }
     #hd #ai-noise-cancelation .chart-container > figure {
         width: 70%;
         margin-left: -7%;
         margin-right: -15%;
    }
     #hd #ai-noise-cancelation .chart-container .bar-container {
         min-width: 18em;
    }
     #hd #ai-noise-cancelation .chart-container .hd-tag {
         width: 6em;
    }
     #hd .tab-cooling li {
         max-width: 55%;
    }
     #hd .tab-cooling li h3 {
         margin-bottom: .25em;
    }
     #hd .tab-cooling li p {
         line-height: 1.35;
         margin-bottom: .5em;
    }
}
 @media screen and (max-width: 1024px) {
     #hd .tab-networking li p {
         padding-right: 1em;
    }
     #hd #ai-audio .trigger-play:after {
         width: calc(100% - 6px);
         padding-bottom: calc(100% - 6px);
    }
     #hd #ai-audio .caption li {
         padding: 0 1em;
    }
     #hd #ai-noise-cancelation {
         padding: 4em 0;
    }
     #hd #ai-noise-cancelation .hd-feature {
         font-size: 14px;
         margin: 3em auto 1em;
    }
     #hd #ai-noise-cancelation .hd-feature li {
         padding: 0 1em;
    }
     #hd #ai-noise-cancelation .hd-feature li h3 {
         font-size: 2.5em;
    }
     #hd #ai-noise-cancelation .hd-feature li p {
         font-size: 1.125em;
    }
     #slider-ai .hd-right .hd-btn {
         margin: 2em auto 1em 0;
    }
}
 @media screen and (max-width: 1023px) {
     #hd #ai-noise-cancelation .chart-container .hd-content {
         width: 100%;
    }
     #hd #ai-noise-cancelation .chart-container > figure {
         width: 100%;
         margin: 0;
    }
     #hd #ai-noise-cancelation .chart-container .hd-chart {
         margin: 1em 0;
    }
     #hd #ai-noise-cancelation .chart-container .bar-container {
         width: 60%;
    }
     #hd .tab-cooling ol {
         position: relative;
         top: 0;
         left: 0;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         justify-content: flex-start;
         margin-top: 2em;
    }
     #hd .tab-cooling li {
         width: 100%;
         max-width: none;
         padding: 10px 0 10px 40px;
         margin-bottom: 1.5em;
         position: relative;
    }
     #hd .tab-cooling li:before {
         counter-increment: mycounter;
         content: counter(mycounter);
         display: block;
         width: 24px;
         height: 24px;
         line-height: 24px;
         text-align: center;
         border-radius: 15px;
         background: #02aee5;
         position: absolute;
         top: 5px;
         left: 0;
         z-index: 2;
    }
     #hd .tab-cooling li:nth-child(n) {
         top: 0 !important;
         left: 0 !important;
    }
     #hd .tab-cooling li p {
         margin-bottom: 0;
    }
     #hd .tab-cooling figure > img {
         width: auto;
         max-width: 100% !important;
    }
     #hd .tab-networking li {
         margin-bottom: 2em;
    }
}
 @media screen and (max-width: 768px) {
     #hd .tab-diy .hd-content {
         padding: 2em 5% 2em 2em;
    }
     #hd #ai-noise-cancelation .hd-feature li h3 {
         font-size: 2.25em;
    }
     #hd #ai-audio .switch-btn {
         max-width: 200px;
         margin: 1em auto;
    }
     #hd #ai-audio .switch-btn div {
         font-size: 1.25em;
    }
     #hd #ai-audio .player {
         width: 100%;
         padding-bottom: 60%;
    }
     #hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound {
         width: 16%;
    }
     #hd #ai-audio .player li {
         width: 20%;
    }
     #hd #ai-audio .player li:nth-child(1) {
         left: -5%;
         top: 15%;
    }
     #hd #ai-audio .player li:nth-child(2) {
         left: -5%;
         top: 52%;
    }
     #hd #ai-audio .player li:nth-child(3) {
         right: 0;
         top: 15%;
    }
     #hd #ai-audio .player li:nth-child(4) {
         right: 0;
         top: 52%;
    }
     #hd #ai-audio .player li img {
         width: 14vw;
    }
     #hd #ai-audio .player li h3 {
         font-size: 4vw;
    }
     #hd #ai-audio .player li p {
         font-size: 2.5vw;
    }
     #hd #ai-audio .player .hd-btn {
         font-size: 2.5vw;
    }
     #hd #ai-audio .trigger-play {
         width: 10vw;
         height: 10vw;
    }
     #hd #ai-audio .caption li:before {
         margin-right: 1em;
    }
     #slider-ai .hd-left, #slider-ai .hd-right {
         width: 90%;
         max-width: 600px;
         padding: 0;
         margin: 0 auto;
    }
     #slider-ai .hd-left {
         margin-bottom: 2em;
    }
}
 @media screen and (max-width: 620px) {
     #hd .tab-networking {
         position: relative;
         overflow: hidden;
    }
     #hd .tab-networking .hd-container {
         flex-direction: column-reverse;
    }
     #hd .tab-networking li {
         width: 100%;
         padding-right: 0;
    }
     #hd .tab-networking li p {
         padding-right: 0;
    }
     #hd .tab-networking .hd-pd {
         width: 120%;
         max-width: none !important;
         margin-top: 2em;
         margin-right: -20%;
    }
     #hd .tab-networking .hd-bottom {
         flex-direction: column;
    }
     #hd .tab-networking .hd-bottom figure, #hd .tab-networking .hd-bottom .hd-content {
         width: 100%;
    }
     #hd .tab-networking .hd-bottom figure {
         margin: 2em 0;
    }
     #hd .tab-diy .hd-container {
         flex-direction: column;
    }
     #hd .tab-diy .hd-container figure, #hd .tab-diy .hd-container .hd-content {
         width: 100%;
    }
     #hd .tab-diy .hd-container figure:after {
         width: 100%;
         height: 50%;
         background-color: rgba(19, 32, 44, 0);
         background-image: -moz-linear-gradient(180deg, rgba(19, 32, 44, 0), #13202c);
         background-image: -webkit-linear-gradient(180deg, rgba(19, 32, 44, 0), #13202c);
         background-image: linear-gradient(180deg, rgba(19, 32, 44, 0), #13202c);
    }
     #hd .tab-diy .hd-container figure img {
         position: relative;
    }
     #hd #ai-noise-cancelation {
         padding: 3em 0;
    }
     #hd #ai-noise-cancelation .hd-feature {
         font-size: 14px;
    }
     #hd #ai-noise-cancelation .hd-feature li {
         width: 100%;
         padding: 0 .5em;
         margin-bottom: 1.5em;
    }
     #hd #ai-noise-cancelation .hd-feature li p {
         font-size: 1.25em;
    }
     #hd #ai-noise-cancelation .hd-feature li p br {
         display: none;
    }
     #hd #ai-noise-cancelation .chart-container {
         font-size: 12px;
    }
     #hd #ai-noise-cancelation .chart-container > figure {
         width: 120%;
         margin-left: -10%;
         margin-right: -10%;
    }
     #hd #ai-noise-cancelation .chart-container .hd-title {
         padding-right: .5em;
    }
     #hd #ai-noise-cancelation .chart-container .hd-title p {
         font-size: 10px;
    }
     #hd #ai-noise-cancelation .chart-container .bar-container {
         min-width: 14em;
    }
     #hd #ai-noise-cancelation .chart-container .hd-bar small {
         font-size: 10px;
    }
     #hd #ai-noise-cancelation .chart-container .hd-tag p {
         font-size: 10px;
    }
     #hd #ai-audio .player {
         width: 100%;
         padding-bottom: 60%;
    }
     #hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound {
         width: 16%;
    }
     #hd #ai-audio .player .icon-mic {
         bottom: 65%;
    }
     #hd #ai-audio .player .icon-sound {
         top: 60%;
    }
     #hd #ai-audio .player li {
         width: 25%;
    }
     #hd #ai-audio .player li:nth-child(1) {
         left: -5%;
         top: 5%;
    }
     #hd #ai-audio .player li:nth-child(2) {
         left: -5%;
         top: 50%;
    }
     #hd #ai-audio .player li:nth-child(3) {
         right: -5%;
         top: 5%;
    }
     #hd #ai-audio .player li:nth-child(4) {
         right: -5%;
         top: 50%;
    }
     #hd #ai-audio .player li img {
         width: 16vw;
    }
     #hd #ai-audio .player li h3 {
         font-size: 4.5vw;
    }
     #hd #ai-audio .player li p {
         font-size: 3.5vw;
    }
     #hd #ai-audio .player li p br {
         display: block;
    }
     #hd #ai-audio .player .hd-btn {
         font-size: 2.5vw;
    }
     #hd #ai-audio .trigger-play {
         width: 15vw;
         height: 15vw;
    }
     #hd #ai-audio .caption {
         max-width: 220px;
         flex-direction: column;
         align-items: flex-start;
         text-align: left;
    }
}
 #hd .sec-component{/*20211021 RCD*/
     margin-top: 80px;
}
 #hd .sec-component .hd-w1000 {
     width: 90%;
}
 #hd .sec-component .hd-filter {
     margin: 0 -.5em 1em;
}
 #hd .sec-component .hd-filter li {
     padding: 0 .5em 1em;
     position: relative;
     cursor: pointer;
}
 #hd .sec-component .hd-filter li figure {
     width: 80%;
     margin: 0 auto;
     opacity: .5;
     margin-bottom: -.75em;
     -moz-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
     position: relative;
     overflow: hidden;
}
 #hd .sec-component .hd-filter li img {
     width: 200%;
     max-width: none !important;
}
 #hd .sec-component .hd-filter li:hover figure {
     opacity: .75;
     -moz-transform: translate(0, -5px);
     -o-transform: translate(0, -5px);
     -ms-transform: translate(0, -5px);
     -webkit-transform: translate(0, -5px);
     transform: translate(0, -5px);
}
 #hd .sec-component .hd-filter li.hd-active {
     background-color: transparent;
     background-image: -moz-linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent);
     background-image: -webkit-linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent);
     background-image: linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent);
     position: relative;
     overflow: hidden;
     pointer-events: none;
}
 #hd .sec-component .hd-filter li.hd-active figure {
     opacity: 1;
}
 #hd .sec-component .hd-filter li.hd-active figure img {
     margin-left: -100%;
}
 #hd .sec-component .hd-filter li.hd-active p {
     font-weight: bold;
     color: #02aee5;
}
 #hd .sec-component .hd-filter p {
     line-height: 1.25;
}
 #hd .sec-component .hd-table > li {
     display: none;
}
 #hd .sec-component .hd-table > li.hd-active {
     display: block;
}
 #hd .sec-component .hd-table table {
     width: 100%;
     border: none;
     border-collapse: collapse;
}
 #hd .sec-component .hd-table table.table-motherboards td:nth-last-child(2) {
     text-transform: uppercase;
}
 #hd .sec-component .hd-table table tr:hover th:nth-child(-n+3), #hd .sec-component .hd-table table tr:hover td:nth-child(-n+3) {
     background: #2b2b2b;
}
 #hd .sec-component .hd-table table th, #hd .sec-component .hd-table table td {
     font-weight: 300;
     line-height: 1.5;
     padding: .5em 1em;
     border-bottom: 1px solid #aaaaaa;
}
 #hd .sec-component .hd-table table th:last-child, #hd .sec-component .hd-table table td:last-child {
     text-align: center;
}
 #hd .sec-component .hd-table table th {
     font-weight: bold;
}
 #hd .sec-component .hd-table table thead th:nth-child(1) {
     width: 10em;
}
 #hd .sec-component .hd-table table thead th:nth-child(3) {
     width: 11em;
}
 #hd .sec-component .hd-table table tbody th {
     vertical-align: top;
}
 #hd .sec-component .hd-table table tbody td {
     vertical-align: middle;
}
 #hd .sec-component .hd-table .hd-btn {
     line-height: 1.25;
     padding: .25em 1em;
     margin: 0;
}
 #hd .sec-component .hd-table img {
     margin: 0 auto;
}
 #hd .sec-component .btn-container {
     margin: 2em auto;
}
 #hd .sec-component .btn-container .hd-btn {
     font-size: 1.25em;
     padding-right: 3em;
}
 #hd .sec-component .btn-container .hd-btn:before {
     background-image: url(../img/icon/arrow.png);
     background-position: calc(100% - 15px) center;
     background-repeat: no-repeat;
     -moz-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
}
 #hd .sec-component .btn-container .hd-btn:hover:before {
     background-position: calc(100% - 13px) center;
}
 @media screen and (max-width: 768px) {
     #hd .sec-component .hd-filter {
         margin: 0 -.5em .5em;
    }
     #hd .sec-component .hd-filter li {
         padding: 0 .25em;
    }
     #hd .sec-component .hd-filter li figure {
         margin-bottom: -.25em;
    }
     #hd .sec-component .hd-table table {
         font-size: 14px;
    }
}
 @media screen and (max-width: 480px) {
     #hd .sec-component .hd-filter li {
         padding-top: .5em;
         padding-bottom: 1em;
         margin-bottom: 1px;
    }
     #hd .sec-component .hd-filter li figure {
         width: 90%;
         margin-bottom: 0;
    }
     #hd .sec-component .hd-filter li p {
         font-size: 12px;
    }
     #hd .sec-component .hd-table table thead th {
         font-size: 14px;
    }
     #hd .sec-component .hd-table table thead th:nth-child(1) {
         width: 5em;
    }
     #hd .sec-component .hd-table table thead th:nth-child(3) {
         width: 8em;
    }
     #hd .sec-component .hd-table table th, #hd .sec-component .hd-table table td {
         font-size: 14px;
         padding: .5em;
    }
}
 #gallery {
     padding: 3em 0 0;
}
 #gallery .owl-stage {
     transition-timing-function: linear !important;
}
 #gallery .slider-gallery {
     margin-bottom: 1em;
}
 #gallery a {
     display: block;
     color: white;
     position: relative;
}
 #gallery a span {
     padding: .25em .75em;
     background: rgba(0, 0, 0, 0.5);
     border: 1px solid #02aee5;
     border-radius: 3px;
     position: absolute;
     bottom: 0;
     right: 0;
     margin: 5px;
     display: none;
}
 #gallery a:hover span {
     display: block;
     -webkit-animation-delay: 0s;
     -webkit-animation-duration: 0.4s;
     -webkit-animation-name: fadeInUp;
     -webkit-animation-timing-function: ease;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-delay: 0s;
     -moz-animation-duration: 0.4s;
     -moz-animation-name: fadeInUp;
     -moz-animation-timing-function: ease;
     -moz-animation-iteration-count: 1;
     -moz-animation-fill-mode: forwards;
     -o-animation-delay: 0s;
     -o-animation-duration: 0.4s;
     -o-animation-name: fadeInUp;
     -o-animation-timing-function: ease;
     -o-animation-iteration-count: 1;
     -o-animation-fill-mode: forwards;
     animation-delay: 0s;
     animation-duration: 0.4s;
     animation-name: fadeInUp;
     animation-timing-function: ease;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
}
 @media screen and (max-width: 480px) {
     #gallery {
         padding: 2em 0 0;
    }
}
 #footer .media-container {
     padding: 3em 0;
}
 #footer .media-container a {
     display: block;
     margin: .25em .5em;
}
 #footer .media-container a img {
     -moz-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
}
 #footer .media-container a:hover img {
     filter: brightness(180%);
}
 #footer .hd-container {
     width: 90%;
     max-width: 1380px;
     padding: 30px 0;
     margin: 0 auto;
}
 #footer .logo-asus {
     display: inline-block;
     vertical-align: middle;
     width: 200px;
}
 #footer h3 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 2em;
     line-height: 1.25;
     text-transform: none;
     white-space: nowrap;
     display: inline-block;
     vertical-align: middle;
     width: calc(100% - 230px);
     margin-right: -5px;
     margin-bottom: 0;
     padding-left: 20px;
}
 #footer p {
     margin-top: 1em;
}
 #footer p a {
     color: #02aee5;
}
 @media screen and (max-width: 1440px) {
     #footer .logo-asus {
         width: 150px;
    }
     #footer h3 {
         font-size: 1.5em;
    }
}
 @media screen and (max-width: 1280px) {
     #footer img {
         display: block;
    }
     #footer h3 {
         width: 100%;
         display: block;
         margin: .5em 0 0;
         padding: 0;
         white-space: break-spaces;
    }
}
 @media screen and (max-width: 480px) {
     #footer .media-container {
         padding: 2em 0;
    }
     #footer .media-container a {
         margin: .25em;
    }
}
 #intel-abt .filter-bios li, #intel-abt .filter-model li {
     font-size: 1.6em;
     font-weight: 700;
     letter-spacing: .04em;
     padding: 15px 10px;
     color: #aaaaaa;
     border: 1px solid #02aee5;
     background: url(../img/bios/deco-cooling.png) center top no-repeat;
     cursor: pointer;
}
 #intel-abt .filter-bios li.hd-active, #intel-abt .filter-model li.hd-active {
     background: #02aee5;
     color: white;
}
 #intel-abt .bios-title {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 2.5em;
     font-weight: 700;
     text-align: center;
     text-transform: uppercase;
     padding: .5em 1em;
     margin-bottom: 0;
     background: #02aee5;
     color: #2b2b2b;
}
 #intel-abt .filter-bios {
     padding: 4em 0;
}
 #intel-abt .filter-bios sup {
     display: inline-block;
     margin-top: -.5em;
}
 #intel-abt .sec-bios-hero {
     background: black;
     position: relative;
     overflow: hidden;
}
 #intel-abt .sec-bios-hero .inner {
     margin: 0 auto;
     padding: 0 40px;
     max-width: 1200px;
     box-sizing: border-box;
}
 #intel-abt .sec-bios-hero .text {
     text-align: center;
     padding-top: 50px;
     padding-bottom: 50px;
}
 #intel-abt .sec-bios-hero .banner-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 45%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 57%;
     margin: auto 0;
}
 #intel-abt .sec-bios-hero .banner-text .series {
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     line-height: 1em;
     font-size: 1.5vw;
     font-weight: normal;
     letter-spacing: 1px;
     margin: 0 0 15px 0;
}
 #intel-abt .sec-bios-hero .banner-text h3 {
     display: inline-block;
     position: relative;
     padding-right: 1em;
     margin-right: auto;
}
 #intel-abt .sec-bios-hero .banner-text h3:after {
     content: '';
     width: 125%;
     height: 1px;
     background-color: transparent;
     background-image: -moz-linear-gradient(90deg, transparent, #02aee5 40%, #02aee5 40%, #67cfff, #02aee5 60%, transparent);
     background-image: -webkit-linear-gradient(90deg, transparent, #02aee5 40%, #02aee5 40%, #67cfff, #02aee5 60%, transparent);
     background-image: linear-gradient(90deg, transparent, #02aee5 40%, #02aee5 40%, #67cfff, #02aee5 60%, transparent);
     background-color: transparent;
     position: absolute;
     bottom: -.5em;
     left: -10%;
}
 #intel-abt .sec-bios-hero .banner-text h2 {
     line-height: 1em;
     font-size: 4vw;
     font-weight: normal;
     letter-spacing: 1px;
     text-transform: uppercase;
     padding-top: .125em;
     margin: .5em 0 .25em;
     background: -webkit-linear-gradient(0deg, #9daebd, #ffffff, #4c5a81);
     background-clip: border-box;
     background-clip: border-box;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: none;
}
 #intel-abt .sec-bios-hero .banner-text img {
     margin-left: 0;
}
 #intel-abt .sec-bios-hero .banner-text .feature {
     font-style: italic;
     margin: 20px 0;
}
 #intel-abt .sec-bios-hero .banner-text .feature span {
     margin-right: 12px;
     display: inline-block;
}
 #intel-abt .sec-bios-hero .banner-text .feature span:before {
     content: '/';
     display: inline-block;
     color: #fcdd30;
     font-weight: bold;
     padding-right: 4px;
}
 #intel-abt .sec-bios-hero .banner-text .note {
     font-size: 0.8em;
     margin: 20px 0 20px 0;
}
 #intel-abt .sec-bios-hero .bios-icon-container li {
     padding: 0 1.5em 0 .5em;
     padding-right: 3em;
     margin-bottom: 1em;
     position: relative;
}
 #intel-abt .sec-bios-hero .bios-icon-container li:first-child:after {
     content: '';
     display: block;
     width: 1px;
     height: calc(100% - 5em);
     background: #aaaaaa;
     position: absolute;
     top: 1em;
     right: 1.5em;
}
 #intel-abt .sec-bios-hero .bios-icon-container img {
     margin: 0 auto 10px;
     border: 2px solid #02aee5;
     border-radius: 50%;
}
 #intel-abt .sec-bios-steps, #intel-abt .sec-bios-list {
     margin-top: -50px;
     padding-top: 50px;
}
 #intel-abt .sec-bios-steps {
     padding-bottom: 5em;
}
 #intel-abt .sec-bios-steps .hd-w1200 {
     width: 90%;
}
 #intel-abt .bios-content {
     max-width: 960px;
     margin: 0 auto;
     margin-top: 50px;/*20220712*/
}
 #intel-abt .bios-content > li {
     display: none;
}
 #intel-abt .bios-content > li.hd-active {
     display: block;
     -webkit-animation-delay: 0s;
     -webkit-animation-duration: 0.4s;
     -webkit-animation-name: fadeIn;
     -webkit-animation-timing-function: ease;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-delay: 0s;
     -moz-animation-duration: 0.4s;
     -moz-animation-name: fadeIn;
     -moz-animation-timing-function: ease;
     -moz-animation-iteration-count: 1;
     -moz-animation-fill-mode: forwards;
     -o-animation-delay: 0s;
     -o-animation-duration: 0.4s;
     -o-animation-name: fadeIn;
     -o-animation-timing-function: ease;
     -o-animation-iteration-count: 1;
     -o-animation-fill-mode: forwards;
     animation-delay: 0s;
     animation-duration: 0.4s;
     animation-name: fadeIn;
     animation-timing-function: ease;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
}
 #intel-abt .system-requirements {
     max-width: 320px;
     margin-left: 20px;
}
 #intel-abt .system-requirements h3 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 2em;
     font-weight: normal;
     letter-spacing: 0;
     text-shadow: none;
     text-transform: uppercase;
     padding: 0;
     margin: 0 0 .75em;
     color: #02aee5;
}
 #intel-abt .checklist {
     background: white;
     border-radius: 8px;
     padding-bottom: 5px;
     margin-top: 20px;
     position: relative;
}
 #intel-abt .checklist ul {
     padding-right: 20px;
     margin: 10px 10px 10px 25px;
}
 #intel-abt .checklist li {
     font-size: 14px;
     list-style-type: disc;
     padding: 2px 0;
     color: black;
}
 #intel-abt .checklist h4 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.2em;
     text-transform: inherit;
     background: #02aee5;
     border-bottom: 2px solid #67cfff;
     color: #000;
     padding: 10px 0 10px 50px;
     margin: 0;
     border-top-right-radius: 8px;
}
 #intel-abt .checklist h4:before {
     content: '';
     display: block;
     width: 60px;
     height: 60px;
     border-radius: 60px;
     background: #02aee5 url(../img/icon/computer.png) center center no-repeat;
     background-size: 35px;
     border-bottom: 2px solid #67cfff;
     position: absolute;
     top: -12px;
     left: -20px;
}
 #intel-abt .step-example {
     width: 200px;
     cursor: pointer;
}
 #intel-abt .step-example .bios-title {
     font-weight: bold;
     font-size: 1.2em;
}
 #intel-abt .step-example .btn-look {
     width: 180px;
     display: block;
     border: 3px solid #fff;
     border-radius: 8px;
     position: relative;
     overflow: hidden;
}
 #intel-abt .step-example .btn-look:after {
     content: '';
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 180px;
     height: 100%;
     background: rgba(0, 0, 0, 0.4) url(../img/icon/look.png) center center no-repeat;
     background-size: 50px;
     border-radius: 6px;
     -moz-transition: all 0.2s ease;
     -o-transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}
 #intel-abt .step-example .btn-look:hover:after {
     background-color: rgba(0, 0, 0, 0.5);
     -moz-transform: scale(1.1, 1.1);
     -o-transform: scale(1.1, 1.1);
     -ms-transform: scale(1.1, 1.1);
     -webkit-transform: scale(1.1, 1.1);
     transform: scale(1.1, 1.1);
}
 #intel-abt .step-example .btn-look:active:after {
     background-color: rgba(0, 0, 0, 0.6);
     -moz-transform: scale(1.5, 1.5);
     -o-transform: scale(1.5, 1.5);
     -ms-transform: scale(1.5, 1.5);
     -webkit-transform: scale(1.5, 1.5);
     transform: scale(1.5, 1.5);
}
 #intel-abt .steps {
     display: flex;
     flex-wrap: nowrap;
     margin-bottom: 4em;
}
 #intel-abt .steps h2 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1.5em;
     letter-spacing: 0;
     text-shadow: none;
     text-transform: none;
     color: #02aee5 !important;
     margin-bottom: 1em;
}
 #intel-abt .steps h2 b {
     display: block;
     font-size: 2.125em;
     line-height: 1.2em;
}
 #intel-abt .steps h2 span {
     display: none;
}
 #intel-abt .steps p {
     line-height: 1.25;
}
 #intel-abt .steps a {
     color: #02aee5;
}
 #intel-abt .steps a:hover {
     text-decoration: underline;
}
 #intel-abt .steps a:visited {
     color: #ff000;
}
 #intel-abt .steps .hd-content {
     background-repeat: no-repeat;
}
 #intel-abt .steps.step-1 .hd-content {
     background-image: url(../img/bios/n1.png);
}
 #intel-abt .steps.step-2 .hd-content {
     background-image: url(../img/bios/n2.png);
}
 #intel-abt .steps.step-3 .hd-content {
     background-image: url(../img/bios/n3.png);
}
 #intel-abt .steps.step-4 .hd-content {
     background-image: url(../img/bios/n4.png);
}
 #intel-abt .update-by-usb .step-1 .hd-content {
     padding-left: 10%;
     margin-left: 1em;
     background-position: left center;
}
 #intel-abt .update-by-usb .step-2 .hd-content {
     padding: 2.5% 0;
     padding-left: 17%;
     background-position: left center;
}
 #intel-abt .update-by-usb .step-3 .hd-content {
     padding: 4% 0;
     padding-right: 15%;
     background-position: right center;
}
 #intel-abt .update-by-usb .step-3 img {
     margin-right: 2em;
     position: relative;
     z-index: -1;
}
 #intel-abt .update-by-usb .step-4 .hd-content {
     padding-left: 17%;
     background-position: left top;
}
 #intel-abt .update-by-usb .step-4 .hd-content h2 {
     margin-top: -.5em;
}
 #intel-abt .update-by-usb .step-4 .hd-content p {
     margin-right: -12%;
     position: relative;
     z-index: 2;
}
 #intel-abt .update-by-ez .step-1 .hd-content {
     padding-left: 10%;
     margin-left: 1em;
     background-position: left center;
}
 #intel-abt .update-by-ez .step-2, #intel-abt .update-by-ez .step-3 {
     align-items: center;
     justify-content: flex-end;
}
 #intel-abt .update-by-ez .step-2 .hd-content, #intel-abt .update-by-ez .step-3 .hd-content {
     padding: 2.5% 0;
     padding-left: 17%;
     padding-right: 2em;
     background-position: left center;
}
 #intel-abt .update-by-ez .step-2 .step-example, #intel-abt .update-by-ez .step-3 .step-example {
     margin-right: 5%;
}
 #intel-abt .update-by-ez .step-3 .hd-content {
     margin-left: auto;
}
 #intel-abt .update-by-ez .step-4 .hd-content {
     padding-left: 17%;
     padding-bottom: 5%;
     background-position: left top;
}
 #intel-abt .sec-bios-list .modal-container {
     background: #242424;
     padding: 3em 0 5em;
}
 #intel-abt .sec-bios-list .intro-title { /*20220711*/
     display: block;
     padding: 0 10px;
     font-weight: bold;
     font-size: 2em;
     margin-bottom: 0;
}
 @media screen and (max-width: 767px) { /*20220711*/
 #intel-abt .sec-bios-list .intro-title {
     font-size: 1.4em;
}
}
 #intel-abt .sec-bios-list .intro {
     display: block;
     padding: 1em 10px;
}
 #intel-abt .sec-bios-list .intro a {
     color: #777;
     text-decoration: underline;
}
 #intel-abt .sec-bios-list .intro a:hover {
     color: #aaa;
}
 #intel-abt .filter-model {
     margin-bottom: 2em;
}
 #intel-abt .model-content > li {
     display: none;
}
 #intel-abt .model-content > li.hd-active {
     display: block;
     -webkit-animation-delay: 0s;
     -webkit-animation-duration: 0.4s;
     -webkit-animation-name: fadeIn;
     -webkit-animation-timing-function: ease;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-delay: 0s;
     -moz-animation-duration: 0.4s;
     -moz-animation-name: fadeIn;
     -moz-animation-timing-function: ease;
     -moz-animation-iteration-count: 1;
     -moz-animation-fill-mode: forwards;
     -o-animation-delay: 0s;
     -o-animation-duration: 0.4s;
     -o-animation-name: fadeIn;
     -o-animation-timing-function: ease;
     -o-animation-iteration-count: 1;
     -o-animation-fill-mode: forwards;
     animation-delay: 0s;
     animation-duration: 0.4s;
     animation-name: fadeIn;
     animation-timing-function: ease;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
}
 #intel-abt .table-bios {
     width: 100%;
     font-size: 14px;
     background: #000;
     border-collapse: collapse;
     margin: 0 auto !important;
     box-sizing: border-box;
}
 #intel-abt .table-bios th {
     background: #686868;
     border-right: 1px solid #000;
     text-align: center;
     padding: 8px;
     color: #fff;
}
 #intel-abt .table-bios th.align-left {
     text-align: left;
}
 #intel-abt .table-bios td {
     padding: 8px;
     color: #fff;
     text-align: center;
}
 #intel-abt .table-bios td.align-left {
     text-align: left;
}
 #intel-abt .table-bios td a {
     text-decoration: none;
     background: #02aee5;
     color: #fff;
     padding: 5px 8px;
     border-radius: 4px;
     display: inline-block;
     transition: all 0.2s;
}
 #intel-abt .table-bios td a:visited {
     text-decoration: none;
}
 #intel-abt .table-bios td a:hover {
     background: #008bb8;
}
 #intel-abt .table-bios tr:nth-child(2n) {
     background: #333;
}
 #intel-abt .table-bios .chipset, #intel-abt .table-bios .chipset-alt {
     background: #000;
}
 #intel-abt .table-bios .gap {
     border-top: 2px solid #555;
}
 #intel-abt .table-bios .yes {
     background: url(../img/icon/yes.png);
     background-size: 100%;
     width: 15px;
     height: 15px;
     text-indent: -9999px;
     display: block;
     margin: 0 auto;
}
 #intel-abt .sec-bios-footer {
     padding: 30px 0;
}
 #intel-abt .sec-bios-footer .hd-container {
     width: 90%;
     max-width: 1380px;
     margin: 0 auto;
}
 #intel-abt .sec-bios-footer .logo-asus {
     display: inline-block;
     vertical-align: middle;
     width: 200px;
}
 #intel-abt .sec-bios-footer h3 {
     font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 2em;
     line-height: 1.25;
     text-transform: none;
     white-space: nowrap;
     display: inline-block;
     vertical-align: middle;
     width: calc(100% - 230px);
     margin-right: -5px;
     padding-left: 20px;
}
 #intel-abt .sec-bios-footer p {
     margin-top: 1em;
}
 #intel-abt .sec-bios-footer p a {
     color: #02aee5;
}
 @media screen and (max-width: 1440px) {
     #intel-abt .sec-bios-hero .banner-text {
         width: 47%;
         left: 55%;
    }
     #intel-abt .sec-bios-hero .bios-icon-container li {
         padding-right: 1em;
    }
     #intel-abt .sec-bios-hero .bios-icon-container li:first-child:after {
         right: .5em;
    }
     #intel-abt .sec-bios-footer .logo-asus {
         width: 150px;
    }
     #intel-abt .sec-bios-footer h3 {
         font-size: 1.5em;
    }
}
 @media screen and (max-width: 1280px) {
     #intel-abt .sec-bios-footer img {
         display: block;
    }
     #intel-abt .sec-bios-footer h3 {
         width: 100%;
         display: block;
         margin: .5em 0 0;
         padding: 0;
         white-space: break-spaces;
    }
}
 @media screen and (max-width: 1100px) {
     #intel-abt .sec-bios-hero .bios-icon-container li {
         font-size: 12px;
    }
}
 @media screen and (max-width: 1024px) {
     #intel-abt .sec-bios-hero h3 {
         font-size: 1.5em;
    }
     #intel-abt .sec-bios-hero h2 {
         font-size: 2em;
    }
     #intel-abt .sec-bios-hero .banner-text .series {
         font-size: 1.5em;
         margin-bottom: 5px;
    }
     #intel-abt .sec-bios-hero .bios-icon-container li {
         width: 120px;
    }
     #intel-abt .sec-bios-hero .bios-icon-container img {
         margin-bottom: 3px;
    }
     #intel-abt .sec-bios-hero .bios-icon-container a {
         font-size: 12px;
    }
}
 @media screen and (max-width: 1023px) {
     #intel-abt .filter-bios li, #intel-abt .filter-model li {
         font-size: 1.25em;
    }
     #intel-abt .sec-bios-hero .bios-icon-container li {
         padding-right: 2em;
    }
     #intel-abt .sec-bios-hero .bios-icon-container li:first-child:after {
         right: .75em;
    }
     #intel-abt .system-requirements {
         max-width: 600px;
         margin-bottom: 2em;
    }
     #intel-abt .step-example {
         margin-left: 0;
         margin-right: auto !important;
    }
     #intel-abt .steps {
         flex-direction: column;
         margin-bottom: 1.5em;
    }
     #intel-abt .steps .hd-content {
         width: 100% !important;
         min-height: 150px;
         padding-top: 0 !important;
         padding-bottom: 0 !important;
         background-position: left top !important;
         background-size: auto 90px;
         padding-left: 90px !important;
         margin-left: 0 !important;
    }
     #intel-abt .steps img {
         order: 3;
         margin-left: 0;
         margin-right: auto !important;
    }
     #intel-abt .steps h2 {
         font-size: 1.25em;
    }
     #intel-abt .update-by-usb .step-3 {
         flex-direction: row;
    }
     #intel-abt .update-by-usb .step-3 .hd-content {
         padding-right: 0;
    }
     #intel-abt .update-by-ez .step-2, #intel-abt .update-by-ez .step-3 {
         flex-direction: row;
    }
     #intel-abt .update-by-ez .step-2 .hd-content, #intel-abt .update-by-ez .step-3 .hd-content {
         padding-right: 2em;
    }
}
 @media screen and (max-width: 768px) {
     #intel-abt .sec-bios-hero {
         background-color: #01072b;
         background-image: -moz-linear-gradient(90deg, #01072b, #010e52, #020f53);
         background-image: -webkit-linear-gradient(90deg, #01072b, #010e52, #020f53);
         background-image: linear-gradient(90deg, #01072b, #010e52, #020f53);
    }
     #intel-abt .sec-bios-hero .banner-text {
         width: 100%;
         top: 0;
         left: 0;
         right: 0;
         margin: -31vw auto 50px auto;
         text-align: center;
         position: relative;
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -webkit-transform: translate(0, 0);
         transform: translate(0, 0);
    }
     #intel-abt .sec-bios-hero .banner-text .series {
         font-size: 1.5em;
    }
     #intel-abt .sec-bios-hero .banner-text h3 {
         font-size: 1.5em;
         padding: 0 1em;
         margin-left: auto;
    }
     #intel-abt .sec-bios-hero .banner-text h2 {
         font-size: 10vw;
    }
     #intel-abt .sec-bios-hero .banner-text .text {
         padding-top: 0px;
         padding-bottom: 20px;
    }
     #intel-abt .sec-bios-hero .banner-text .bios-icon-container {
         justify-content: center;
    }
     #intel-abt .update-by-usb .step-3 {
         flex-direction: column;
    }
     #intel-abt .update-by-usb .step-3 img {
         margin-top: -8%;
         margin-left: 50px;
    }
     #intel-abt .update-by-usb .step-4 .hd-content div {
         flex-wrap: wrap;
    }
     #intel-abt .update-by-usb .step-4 .hd-content p {
         width: 100%;
         margin-right: 0;
    }
     #intel-abt .update-by-usb .step-4 .hd-content img {
         margin-top: 1em;
         width: auto;
    }
     #intel-abt .table-bios {
         font-size: .8em;
    }
}
 @media screen and (max-width: 620px) {
     #intel-abt .bios-title {
         font-size: 2em;
    }
     #intel-abt .filter-bios {
         padding: 2em 0;
    }
     #intel-abt .system-requirements {
         width: 90%;
    }
     #intel-abt .sec-bios-list .modal-container {
         padding-top: 2em;
    }
     #intel-abt .table-bios {
         font-size: 12px;
    }
     #intel-abt .table-bios th, #intel-abt .table-bios td {
         padding: 8px 2px;
         font-weight: normal;
    }
}
 @media screen and (max-width: 480px) {
     #intel-abt .filter-bios, #intel-abt .filter-model {
         flex-direction: column;
    }
     #intel-abt .filter-bios li, #intel-abt .filter-model li {
         width: 100%;
    }
     #intel-abt .sec-bios-hero .bios-icon-container {
         flex-direction: row;
    }
     #intel-abt .sec-bios-hero .bios-icon-container img {
         margin-bottom: 10px;
    }
     #intel-abt .steps .hd-content {
         background-size: auto 50px !important;
         padding-top: 60px !important;
         padding-left: 0 !important;
    }
     #intel-abt .step-example {
         margin-top: 1em;
    }
     #intel-abt .update-by-usb .step-3 img {
         margin-left: 0;
    }
     #intel-abt .update-by-ez .step-2, #intel-abt .update-by-ez .step-3 {
         flex-direction: column;
    }
     #intel-abt .update-by-ez .step-2 .hd-content, #intel-abt .update-by-ez .step-3 .hd-content {
         padding-right: 0;
    }
     #intel-abt .table-bios {
         /*font-size: 10px;*//*20220711*/
    }
     #intel-abt .table-bios thead th:nth-child(1) {
         width: 5em;
         word-break: normal;
    }
}
 #hd #banner-roglive {
     position: relative;
}
 #hd #banner-roglive figure {
     position: relative;
}
 #hd #banner-roglive figure .logo-intel {
     width: 9%;
     min-width: 120px;
     position: absolute;
     bottom: 1.5em;
     right: 2%;
}
 #hd #banner-roglive .hd-container {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     width: 90%;
     max-width: 1550px;
     height: 100%;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
 #hd #banner-roglive .hd-content {
     width: 50%;
     max-width: 35.5vw;
     margin-left: auto;
}
 #hd #banner-roglive h1 {
     font-size: 4.1vw;
     letter-spacing: .09em;
}
 #hd #banner-roglive h1 span {
     letter-spacing: .06em;
}
 #hd #banner-roglive .hd-date {
     display: block;
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 3em;
     font-weight: bold;
     line-height: 1;
     letter-spacing: .04em;
     color: black;
     margin: 1.25em 0 .75em;
     position: relative;
}
 #hd #banner-roglive .hd-date sup {
     font-size: .5em;
}
 #hd #banner-roglive .hd-date:before, #hd #banner-roglive .hd-date:after {
     content: '';
     display: block;
     width: calc(50% - 4.5em);
     height: .125em;
     background: black;
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto 0;
}
 #hd #banner-roglive .hd-date:before {
     left: 2.75%;
}
 #hd #banner-roglive .hd-date:after {
     right: 2.75%;
}
 #hd #banner-roglive .hd-btn {
     display: inline-block;
     font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif;
     font-size: 1em;
     letter-spacing: .018em;
     border-radius: 3px;
     background: #eb0029;
     padding: .5em .875em .35em;
     margin: 1em auto;
     color: white;
     position: relative;
     z-index: 2;
     cursor: pointer;
     -moz-transition: transform 0.25s ease;
     -o-transition: transform 0.25s ease;
     -webkit-transition: transform 0.25s ease;
     transition: transform 0.25s ease;
}
 #hd #banner-roglive .hd-btn:hover {
     -moz-transform: translate(0, -2px);
     -o-transform: translate(0, -2px);
     -ms-transform: translate(0, -2px);
     -webkit-transform: translate(0, -2px);
     transform: translate(0, -2px);
}
 #hd #banner-roglive .hd-btn:active {
     -moz-transform: translate(0, -1px);
     -o-transform: translate(0, -1px);
     -ms-transform: translate(0, -1px);
     -webkit-transform: translate(0, -1px);
     transform: translate(0, -1px);
}
 #hd #banner-roglive .hd-btn.hd-btn-skew {
     font-size: 1.5em;
     background: none;
     border-radius: 0;
}
 #hd #banner-roglive .hd-btn.hd-btn-skew:before {
     content: '';
     display: block;
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background: #eb0029;
     z-index: -1;
     -moz-transform: skew(-10deg, 0deg);
     -o-transform: skew(-10deg, 0deg);
     -ms-transform: skew(-10deg, 0deg);
     -webkit-transform: skew(-10deg, 0deg);
     transform: skew(-10deg, 0deg);
}
 #hd #banner-roglive .hd-btn.hd-btn-skew.hd-btn-black:before {
     background: black;
}
 #hd #banner-roglive .hd-btn.hd-btn-dialog {
     font-size: 2.75em;
     padding: .35em 1em .125em;
     margin: 0 0 .25em;
     letter-spacing: 0;
     background: #eb0029;
     color: black;
     border-radius: 0;
}
 #hd #banner-roglive .hd-btn.hd-btn-dialog:after {
     content: '';
     display: block;
     width: 15%;
     height: 80%;
     position: absolute;
     top: 30%;
     right: 5%;
     background: #eb0029;
     z-index: -1;
     -moz-transform: skew(0deg, 25deg);
     -o-transform: skew(0deg, 25deg);
     -ms-transform: skew(0deg, 25deg);
     -webkit-transform: skew(0deg, 25deg);
     transform: skew(0deg, 25deg);
}
 #hd #banner-roglive .hd-btn.hd-btn-dialog.hd-btn-white {
     background: white;
     color: black;
}
 #hd #banner-roglive .hd-btn.hd-btn-dialog.hd-btn-white:after {
     background: white;
}
 @media screen and (min-width: 2000px) {
     #hd #banner-roglive .hd-container {
         max-width: none;
    }
     #hd #banner-roglive .hd-content {
         max-width: 46.75em;
    }
     #hd #banner-roglive h1 {
         font-size: 5.25em;
    }
}
 @media screen and (max-width: 1440px) {
     #hd #banner-roglive .hd-date {
         font-size: 2.25em;
    }
     #hd #banner-roglive .hd-btn.hd-btn-dialog {
         font-size: 2em;
         margin-bottom: 0;
    }
}
 @media screen and (max-width: 1280px) {
     #hd #banner-roglive figure .logo-intel {
         bottom: .5em;
         right: 2%;
    }
     #hd #banner-roglive .hd-content {
         max-width: 41vw;
    }
     #hd #banner-roglive h1 {
         font-size: 4.65vw;
    }
}
 @media screen and (max-width: 1024px) {
     #hd #banner-roglive {
         background: #eb0029;
    }
     #hd #banner-roglive figure {
         overflow: hidden;
    }
     #hd #banner-roglive figure .hd-bg {
         width: 180%;
         max-width: none !important;
    }
     #hd #banner-roglive .hd-container {
         position: relative;
    }
     #hd #banner-roglive .hd-content {
         width: 100%;
         padding-bottom: 2em;
         max-width: 52vw;
         margin: -10% auto 0;
    }
     #hd #banner-roglive .hd-content .logo-intel {
         width: 33%;
         max-width: 178px !important;
         min-width: 140px;
         margin: 0 auto;
    }
     #hd #banner-roglive h1 {
         font-size: 6vw;
    }
     #hd #banner-roglive .hd-date {
         font-size: 2em;
         margin-top: 1em;
         margin-bottom: .5em;
    }
     #hd #banner-roglive .hd-date:before, #hd #banner-roglive .hd-date:after {
         width: calc(50% - 4.5em);
    }
     #hd #banner-roglive .hd-btn.hd-btn-dialog {
         font-size: 1.75em;
    }
}
 @media screen and (max-width: 620px) {
     #hd #banner-roglive .hd-content {
         padding-bottom: .5em;
         max-width: none;
    }
     #hd #banner-roglive .hd-content .logo-intel {
         width: 25%;
         min-width: 120px;
    }
     #hd #banner-roglive h1 {
         font-size: 10vw;
    }
}
/*# sourceMappingURL=hd-style.css.map */