@import url("https://dlcdnimgs.junchengjj.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; 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; }
#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; }
#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%; 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%; max-width: 40%; position: absolute; }
#hd .tab-cooling li:nth-child(1) { top: 16.5%; }
#hd .tab-cooling li:nth-child(2) { top: 56.5%; }
#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 .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; }
#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 { 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 { color: #fff; text-decoration: none; }
#intel-abt .table-bios td a:visited { text-decoration: none; }
#intel-abt .table-bios td a:hover { text-decoration: underline; }
#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; }
  #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 */