@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap");
.bg-dark { background: #2b2b2b; }

/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* ---------- RESET ---------- */
html, body { margin: 0; }

#hd { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; background: black; color: white; font-size: 16px; margin: 0; padding: 0; }
#hd ::selection { background: #1d2124; color: #02aee5; }
#hd ::-moz-selection { background: #1d2124; color: #ffffff; }
#hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; }
#hd ul, #hd li, #hd figure, #hd p { margin: 0; padding: 0; }
#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; }
#hd img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0 auto; }
#hd 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 { 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 { font-size: 16px; }
#hd h1 { 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; }
#hd h2 { font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 3.25em; line-height: 1; color: #ffffff !important; letter-spacing: .018em; margin-bottom: .25em; text-transform: uppercase; }
#hd h2 + p { margin-bottom: 3em; }
#hd 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 { 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 { 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 { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd p { font-size: 1.25em; line-height: 1.75; font-weight: 300; }
#hd p.color-primary { font-weight: 400; }
#hd b { font-weight: bold; }
#hd small { font-size: 14px; font-weight: 300; letter-spacing: 0.5px; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#hd .align-right { text-align: right; }
#hd .align-italic { font-style: italic; }
#hd a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; }
#hd a.txt-link:hover { color: white; }
#hd .color-primary { color: #67cfff; }
#hd .color-grey { color: #aaaaaa; }
#hd .color-white { color: white; }
#hd .hd-uppercase { text-transform: uppercase; }
#hd .font-rog { font-family: "ROGFontsv", "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }

@media screen and (min-width: 2560px) { #hd { font-size: 20px; } }
@media screen and (min-width: 3000px) { #hd { font-size: 28px; } }
@media screen and (max-width: 1440px) { #hd h1 { font-size: 3em; }
  #hd h2 { font-size: 2.75em; }
  #hd h4 { font-size: 1.25em; }
  #hd p { font-size: 14px; } }
@media screen and (max-width: 1280px) { #hd h3 { font-size: 1.75em; }
  #hd p { font-size: 1.125em; } }
@media screen and (max-width: 1024px) { #hd h1 { font-size: 2.75em; }
  #hd h1 + p { margin-bottom: 1.5em; }
  #hd h2 { font-size: 2.5em; } }
@media screen and (max-width: 768px) { #hd h1 { font-size: 2.5em; }
  #hd h4 { font-size: 1.125em; }
  #hd p { line-height: 1.5; } }
@media screen and (max-width: 480px) { #hd h1 { font-size: 1.875em; }
  #hd h2 { font-size: 1.875em; }
  #hd h3 { font-size: 1.5em; margin-bottom: 10px; }
  #hd h4 { font-size: 1.1em; margin-bottom: 10px; }
  #hd h5 { font-size: 14px; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w800 { max-width: 800px; margin-left: auto; margin-right: auto; }
#hd .hd-w900 { width: 80%; max-width: 900px; margin-left: auto; margin-right: auto; }
#hd .hd-w1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
#hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400, #hd .hd-w1500 { width: 90%; margin: 0 auto; position: relative; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1200 { max-width: 1200px; }
#hd .hd-w1300 { max-width: 1300px; }
#hd .hd-w1400 { max-width: 1400px; }
#hd .hd-w1500 { max-width: 1500px; }
#hd .hd-mw900 { max-width: 900px; }
#hd .hd-col20 { width: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col35 { width: 35%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col100 { width: 100%; }
#hd .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }
#hd .align-items-center { align-items: center; }
#hd .align-items-start { align-items: flex-start; }
#hd .align-items-end { align-items: flex-end; }
#hd .justify-content-center { justify-content: center; }
#hd .justify-content-start { justify-content: flex-start; }
#hd .justify-content-end { justify-content: flex-end; }
#hd .justify-content-between { justify-content: space-between; }
#hd .justify-content-around { justify-content: space-around; }
#hd .flex-row-reverse { flex-direction: row-reverse; }
#hd .mx-auto { margin-left: auto; margin-right: auto; }
#hd .hd-d-none { display: none; }

@media screen and (min-width: 2560px) { #hd .hd-w1000 { max-width: 1300px; }
  #hd .hd-w1200 { max-width: 1500px; }
  #hd .hd-w1300 { max-width: 1600px; }
  #hd .hd-w1400 { max-width: 1800px; }
  #hd .hd-w1600 { width: 90%; max-width: 2000px; }
  #hd .hd-mw900 { max-width: 1200px; } }
@media screen and (min-width: 3000px) { #hd .hd-w1000 { max-width: 1800px; }
  #hd .hd-w1200 { max-width: 2560px; }
  #hd .hd-w1300 { max-width: 2650px; }
  #hd .hd-w1400 { max-width: 2700px; }
  #hd .hd-w1600 { width: 90%; max-width: 3000px; }
  #hd .hd-mw900 { max-width: 1500px; } }
@media screen and (max-width: 1024px) { #hd .hd-d-1024-none { display: none; }
  #hd .hd-d-1024-block { display: block; }
  #hd .hd-d-1024-inline-block { display: inline-block; }
  #hd .hd-w900 { width: 90%; } }
@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; }
  #hd .hd-d-1023-block { display: block; }
  #hd .hd-d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; }
  #hd .hd-d-768-block { display: block; } }
@media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none; }
  #hd .hd-d-620-block { display: block; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none; }
  #hd .hd-d-480-block { display: block; } }
#hd .hd-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 0; 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 { -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 { -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 { background: none; border-radius: 0; }
#hd .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 { 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 { -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: 768px) { #hd .hd-btn { padding: .5em 1em; margin: 1em 0 0; } }
#hd .hd-icon-plus { display: inline-block; vertical-align: top; width: 1.25em; height: 1.25em; border-radius: 1em; border: 1px solid #02aee5; margin: .125em .5em -.125em 0; position: relative; }
#hd .hd-icon-plus:before, #hd .hd-icon-plus:after { content: ''; display: block; width: .65em; height: 1px; background: #02aee5; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-icon-plus:after { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
#hd .hd-active > .hd-icon-plus:after { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }

#hd .tab-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 { 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 { margin-left: auto; }
#hd .tab-filter li:last-child { margin-right: auto; }
#hd .tab-filter li:hover { color: #aaaaaa; }
#hd .tab-filter li.hd-active { color: white; }
#hd .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 { display: inline-flex; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; margin: -1em auto 2em; }
#hd .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 { margin-left: auto; }
#hd .tab-filter-block li:last-child { margin-right: auto; }
#hd .tab-filter-block li:hover { color: white; border-color: white; }
#hd .tab-filter-block li.hd-active { color: white; background: #02aee5; border-color: #02aee5; }
#hd .content-el { display: none; }
#hd .content-el.hd-active { display: block; }
#hd .hd-filter-list { margin: 0 auto; padding-left: 5%; position: relative; z-index: 2; }
#hd .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 { color: #aaaaaa; }
#hd .hd-filter-list li.hd-active b, #hd .hd-filter-list li.hd-active p { color: white; }
#hd .hd-filter-list li.hd-active .hd-icon { background-position: 100% 0; }
#hd .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 { width: calc(100% - 120px); }
#hd .hd-filter-list b, #hd .hd-filter-list p { line-height: 1.25; color: #4d4e4f; }
#hd .hd-filter-list b { display: block; margin-bottom: .5em; }
#hd .hd-filter-list p { font-weight: normal; }
#hd .hd-filter-icon { margin: 0 auto 2em; }
#hd .hd-filter-icon li { cursor: pointer; }
#hd .hd-filter-icon li:hover p { color: #aaaaaa; }
#hd .hd-filter-icon li.hd-active p { color: white; }
#hd .hd-filter-icon p { line-height: 1.25; margin: 1em 0; color: #4d4e4f; }

@media screen and (max-width: 1440px) { #hd .tab-filter li { font-size: 1em; padding: 1em 1em; }
  #hd .hd-filter-list li { padding: .5em 0; }
  #hd .hd-filter-list .hd-icon { width: 50px; height: 50px; } }
@media screen and (max-width: 1024px) { #hd .tab-filter li { padding: .75em; } }
@media screen and (max-width: 1023px) { #hd .tab-filter { overflow-x: auto; overflow-y: visible; }
  #hd .tab-filter li { flex-shrink: 0; }
  #hd .tab-filter-block li { margin: 0 .25em; }
  #hd .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 { display: none; text-align: center; }
  #hd .hd-filter-list li { width: 25%; max-width: 100px; }
  #hd .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 { width: 70px; height: 70px; margin: 0 auto; } }
@media screen and (max-width: 480px) { #hd .hd-filter-list { padding-bottom: 7em; }
  #hd .hd-filter-list li.hd-active .hd-content { top: 75px; }
  #hd .hd-filter-list .hd-icon { width: 50px; height: 50px; } }
#hd .hd-nav { position: fixed; z-index: 999999; top: 50%; opacity: 0; pointer-events: none; -moz-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
#hd .hd-nav.hd-show { opacity: 1; pointer-events: all; }
#hd .hd-nav.left { left: 20px; }
#hd .hd-nav.right { right: 20px; }
#hd .hd-nav ul { margin: 0; padding: 0; }
#hd .hd-nav ul li { display: block; margin: 18px 0; position: relative; }
#hd .hd-nav ul li span { background: #aaaaaa; }
#hd .hd-nav ul li a { display: block; z-index: 1; cursor: pointer; text-decoration: none; }
#hd .hd-nav ul li a span { display: block; width: 4px; height: 4px; border-radius: 4px; z-index: 1; -moz-transition: transform 0.1s ease-in-out; -o-transition: transform 0.1s ease-in-out; -webkit-transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out; }
#hd .hd-nav ul li a:hover span, #hd .hd-nav ul li a.active span { -moz-transform: scale(3, 3); -o-transform: scale(3, 3); -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); transform: scale(3, 3); background: #02aee5; }
#hd .hd-nav ul li .hd-tooltip { height: 1.5em; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; margin: auto 0; position: absolute; top: 4px; bottom: 0; text-align: right; cursor: pointer; color: white; }
#hd .hd-nav ul li .hd-tooltip.right { right: 20px; }
#hd .hd-nav ul li .hd-tooltip .left { left: 20px; }
#hd .hd-nav ul li:hover .hd-tooltip { color: #02aee5; font-weight: bold; }
#hd .hd-nav.hd-show-active a.active + .hd-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; }
#hd .scroll-up { position: fixed; right: 30px; bottom: 30px; width: 45px; height: 45px; text-align: center; cursor: pointer; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 2px solid #02aee5; opacity: 0; z-index: 99999; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd .scroll-up.hd-show { opacity: 1; }
#hd .scroll-up svg { display: block; position: absolute; margin: auto; top: 0; right: 0; bottom: 5px; left: 0; fill: #02aee5; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); }
#hd .scroll-up:hover { background-color: #02aee5; }
#hd .scroll-up:hover svg { fill: white; }

@media screen and (max-width: 1440px) { #hd .hd-nav ul li .hd-tooltip { opacity: 0; }
  #hd .hd-nav ul li:hover .hd-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; opacity: 1; } }
@media screen and (max-width: 1024px) { #hd .hd-nav.left { left: 20px; }
  #hd .hd-nav.right { right: 20px; } }
@media screen and (max-width: 768px) { #hd .hd-nav { display: none; }
  #hd .hd-nav ul li .hd-tooltip { display: none; } }
@media screen and (max-width: 480px) { #hd .scroll-up { bottom: 15px; right: 15px; } }
#hd .hd-lightbox, #hd .step-lightbox { width: 100%; height: 100vh; padding: 20px; position: fixed; top: 0; left: 0; display: none; z-index: 10; }
#hd .hd-lightbox .hd-filter, #hd .step-lightbox .hd-filter { width: 100%; height: 100%; background: black; position: absolute; top: 0; left: 0; }
#hd .hd-lightbox .hd-box, #hd .step-lightbox .hd-box { width: 100%; height: 100%; background: black; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; box-sizing: border-box; }
#hd .hd-lightbox .hd-box iframe, #hd .step-lightbox .hd-box iframe { width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-lightbox .hd-close, #hd .step-lightbox .hd-close { width: 60px; height: 60px; background: #02aee5; position: absolute; top: 0; right: 0; cursor: pointer; z-index: 2; }
#hd .hd-lightbox .hd-close:hover, #hd .step-lightbox .hd-close:hover { background: #67cfff; }
#hd .hd-lightbox .hd-close > span, #hd .step-lightbox .hd-close > span { display: block; width: 24px; height: 2px; background: white; -webkit-border-radius: 1.5px; -moz-border-radius: 1.5px; border-radius: 1.5px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-lightbox .hd-close > span:first-child, #hd .step-lightbox .hd-close > span:first-child { -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
#hd .hd-lightbox .hd-close > span:last-child, #hd .step-lightbox .hd-close > span:last-child { -moz-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
#hd .step-lightbox img { width: 1024px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .step-lightbox .hd-close { background: #02aee5; }
#hd .step-lightbox .hd-close:hover { background: #4d4e4f; }

@media screen and (max-width: 1024px) { #hd .hd-lightbox .hd-close, #hd .step-lightbox .hd-close { width: 40px; height: 40px; top: 16px; right: 16px; }
  #hd .hd-lightbox .hd-close > span, #hd .step-lightbox .hd-close > span { width: 20px; height: 2px; } }
#hd .owl-carousel { display: -ms-grid; display: grid; }
#hd .owl-carousel .owl-dots { text-align: center; margin: 1em auto; }
#hd .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 { background: #aaaaaa; }
#hd .owl-carousel .owl-dots .owl-dot.active { background: #02aee5; }
#hd .owl-carousel.nav-arrow { padding: 0 2em; }
#hd .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 { 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 { 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 { border-color: #67cfff; }
#hd .owl-carousel.nav-arrow .owl-nav .owl-prev.disabled, #hd .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 { 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 { left: calc(100% + 1em); }
#hd .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 { opacity: 1; }
#hd .owl-carousel.item-fade .owl-item.active + .active .item { opacity: .3; }

@media screen and (max-width: 1023px) { #hd .owl-carousel.nav-arrow { padding: 0 1em; }
  #hd .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 { width: 2.25em; height: 2.25em; }
  #hd .owl-carousel.nav-arrow .owl-nav .owl-prev { right: calc(100% - 1.25em); }
  #hd .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 { right: calc(100% - 1.75em); }
  #hd .owl-carousel.nav-arrow .owl-nav .owl-next { left: calc(100% - 1.75em); } }
body { background: #000000; }

#hd header { width: 100%; position: fixed; top: 0; left: 0; background: #151515; z-index: 9; }
#hd header .logo-asus { width: 140px; margin: 10px auto 10px 0; }
#hd header .logo-asus img { width: 100%; }
#hd header .menu { text-align: center; }
#hd header .menu a { font-size: 1em; font-weight: 400; letter-spacing: .018em; color: white; padding: .25em 1em; cursor: pointer; -moz-transition: color 0.25s ease; -o-transition: color 0.25s ease; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; }
#hd header .menu a:hover { color: #02aee5; }
#hd header .menu a.hd-active { color: #02aee5; font-weight: bold; cursor: default; }
#hd .hamburger { display: none; }
#hd .scroll-up { position: fixed; right: 30px; bottom: 30px; width: 45px; height: 45px; background: rgba(255, 255, 255, 0.5) url(../img/backtop.png) center no-repeat; border: 1px solid #aaaaaa; text-align: center; cursor: pointer; opacity: 0; z-index: 999; }
#hd .scroll-up.hd-show { opacity: 1; }
#hd .scroll-up:hover { background-color: rgba(255, 255, 255, 0.75); }
#hd .hd-header-tabs li { width: 100%; padding: 0 1px; }
#hd .hd-header-tabs a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1em .5em .75em; font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; text-align: center; color: white; border-bottom: 2px solid #aaaaaa; }
#hd .hd-header-tabs a:hover { background: #1e1e1e; color: white; border-bottom-color: #02aee5; }

#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: 1024px) { #hd .hd-header-tabs a { font-size: 1em; padding: .5em .25em; } }
@media screen and (max-width: 1023px) { #hd header .menu a { padding-left: .5em; padding-right: .5em; } }
@media screen and (max-width: 768px) { #hd .hamburger span, #hd .hamburger:before, #hd .hamburger:after { 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 { min-height: 46px; }
  #hd header .logo-asus { width: 100px; margin-top: 8px; margin-bottom: 8px; }
  #hd .hamburger { order: 3; display: none; width: 46px; height: 46px; background: #02aee5; margin-left: 1em; position: relative; cursor: pointer; }
  #hd .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 { -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 { opacity: 1; -moz-transform: translate(0, 0) rotate(-45deg); -o-transform: translate(0, 0) rotate(-45deg); -ms-transform: translate(0, 0) rotate(-45deg); -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); }
  #hd .hamburger.hd-active:after { opacity: 1; -moz-transform: translate(0, 0) rotate(45deg); -o-transform: translate(0, 0) rotate(45deg); -ms-transform: translate(0, 0) rotate(45deg); -webkit-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); }
  #hd .hamburger.hd-active span { opacity: 0; }
  #hd .hamburger.hd-active ~ .menu { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 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 .hd-header-tabs ul { flex-wrap: wrap; }
  #hd .hd-header-tabs li { width: 25%; }
  #hd .hd-header-tabs a { font-size: 1.125em; padding: .5em .25em; } }
@media screen and (max-width: 620px) { #fp-nav { display: none; } }
@media screen and (max-width: 480px) { #hd .scroll-up { right: 10px; bottom: 10px; }
  #hd .hd-header-tabs li { width: 100%; }
  #hd .hd-header-tabs a { font-size: 1em; padding: .5em .25em; } }
#hd .cover-container { position: relative; cursor: pointer; }
#hd .cover-container:hover figure img { opacity: .75; }
#hd .cover-container.trigger-video:hover .icon-play { background: #02aee5; opacity: 1; -moz-transform: scale(1.25, 1.25); -o-transform: scale(1.25, 1.25); -ms-transform: scale(1.25, 1.25); -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25); }
#hd .cover-container figure { width: 100%; height: 0; padding-bottom: 75%; margin-bottom: 1em; position: relative; overflow: hidden; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
#hd .cover-container figure img { width: 100%; position: absolute; top: 0; left: 0; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .cover-container .icon-play { width: 50px; height: 50px; border-radius: 50%; background: #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 { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 15px; border-color: transparent transparent transparent #ffffff; position: absolute; top: 0; right: 0; bottom: 0; left: 5px; margin: auto; }
#hd .trigger-video { cursor: pointer; }

#hd #banner-vga { position: relative; overflow: hidden; }
#hd #banner-vga a { display: block; }
#hd #banner-vga h1, #hd #banner-vga h2 { opacity: 0; visibility: hidden; text-indent: -100em; position: absolute; top: -100%; left: -100%; }

#hd .sec-intro { padding: 6em 0; background: url(../img/bg-style.jpg) center top no-repeat; background-size: 70% auto; }
#hd .sec-awards a { display: block; -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-awards a:hover { -moz-transform: translate(0, -5%); -o-transform: translate(0, -5%); -ms-transform: translate(0, -5%); -webkit-transform: translate(0, -5%); transform: translate(0, -5%); }
#hd .sec-awards img { -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }

@media screen and (max-width: 768px) { #hd .sec-intro { padding: 4em 0; }
  #hd .sec-awards ul { flex-wrap: wrap; }
  #hd .sec-awards li { order: 9; max-width: 20%; }
  #hd .sec-awards li:nth-child(5) { order: 1; max-width: 25%; }
  #hd .sec-awards li:nth-child(6) { order: 2; max-width: 18%; } }
@media screen and (max-width: 480px) { #hd .sec-intro { padding: 3em 0; }
  #hd .sec-awards li { max-width: 30%; position: relative; overflow: hidden; }
  #hd .sec-awards li:nth-child(4) { max-width: 20%; margin: -15% 0 -20%; }
  #hd .sec-awards li:nth-child(5) { max-width: 45%; margin-left: auto; }
  #hd .sec-awards li:nth-child(6) { max-width: 30%; margin-left: 3%; margin-right: auto; }
  #hd .sec-awards li img { margin-bottom: -20%; } }
#hd .sec-features { padding: 2em 0; }
#hd .sec-features .hd-container { padding: 2em 0; }
#hd .sec-features .hd-container.flex-wrap .hd-content { padding-right: 5%; }
#hd .sec-features .hd-container.flex-wrap:nth-child(2n) .hd-content { padding-right: 0; padding-left: 5%; }

@media screen and (max-width: 620px) { #hd .sec-features { padding-top: 0; }
  #hd .sec-features .hd-container.flex-wrap { flex-direction: column-reverse; }
  #hd .sec-features .hd-container.flex-wrap:nth-child(n) .hd-content { width: 100%; padding: 2em 0; text-align: center; }
  #hd .sec-features .hd-container.flex-wrap:nth-child(n) figure { width: 100%; }
  #hd .sec-features .hd-img { position: relative; overflow: hidden; }
  #hd .sec-features .hd-img img { width: 120%; max-width: none !important; margin-left: -10%; } }
@media screen and (max-width: 480px) { #hd .sec-features .hd-container:last-child { width: 100%; }
  #hd .sec-features .hd-container:last-child .content { width: 90%; margin: 0 auto; }
  #hd .sec-features .hd-img img { width: 140%; margin-left: -20%; } }
#hd .sec-series { padding-top: 3em; background: url(../img/bg-style.jpg) center top no-repeat; background-size: 70% auto; }
#hd .filter-tab { width: 100%; position: relative; overflow-x: auto; overflow-y: visible; -ms-overflow-style: none; z-index: 3; }
#hd .filter-tab::-webkit-scrollbar { height: 3px; }
#hd .filter-tab::-webkit-scrollbar-track { background: transparent; }
#hd .filter-tab::-webkit-scrollbar-thumb { background: transparent; }
#hd .filter-tab::-webkit-scrollbar-thumb:hover { background: transparent; }
#hd .filter-tab ul { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; text-align: center; white-space: nowrap; }
#hd .filter-tab li { width: 100%; padding: .75em 1.125em; font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.125em; font-weight: normal; opacity: .8; -moz-transition: opacity 0.4s ease-out; -o-transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; position: relative; cursor: pointer; }
#hd .filter-tab li:after { content: ''; display: block; width: 100%; height: 4px; 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); z-index: 2; }
#hd .filter-tab li:nth-child(1):after { background: #00c7cc; }
#hd .filter-tab li:nth-child(2):after { background: #43107c; }
#hd .filter-tab li:nth-child(3):after { background: #f3b21b; }
#hd .filter-tab li:nth-child(4):after { background: #02c5e4; }
#hd .filter-tab li:hover { opacity: 1; }
#hd .filter-tab li.hd-active { opacity: 1; pointer-events: none; }
#hd .filter-tab 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 .filter-tab h3 { font-size: 2em; margin-bottom: 0; }
#hd .tab-target > div { display: none; }
#hd .tab-target > div.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; }
#hd .tab-target > div.tab-strix-lc .hd-banner .hd-content { background: #00c7cc; background-color: #00c7cc; background-image: -moz-linear-gradient(90deg, #00c7cc 20%, #16acc0 60%, #2e88c7); background-image: -webkit-linear-gradient(90deg, #00c7cc 20%, #16acc0 60%, #2e88c7); background-image: linear-gradient(90deg, #00c7cc 20%, #16acc0 60%, #2e88c7); }
#hd .tab-target > div.tab-strix .hd-banner .hd-content { background: #43107c; background-color: #880f4b; background-image: -moz-linear-gradient(90deg, #880f4b 0%, #6a2893 50%, #262ed4 125%); background-image: -webkit-linear-gradient(90deg, #880f4b 0%, #6a2893 50%, #262ed4 125%); background-image: linear-gradient(90deg, #880f4b 0%, #6a2893 50%, #262ed4 125%); }
#hd .tab-target > div.tab-tuf .hd-banner .hd-content { background: #f3b21b; background-color: #da9b0a; background-image: -moz-linear-gradient(90deg, #da9b0a, #f3b21b); background-image: -webkit-linear-gradient(90deg, #da9b0a, #f3b21b); background-image: linear-gradient(90deg, #da9b0a, #f3b21b); }
#hd .tab-target > div.tab-dual .hd-banner .hd-content { background: #02c5e4; background-color: #259bf1; background-image: -moz-linear-gradient(90deg, #259bf1, #02c5e4); background-image: -webkit-linear-gradient(90deg, #259bf1, #02c5e4); background-image: linear-gradient(90deg, #259bf1, #02c5e4); }
#hd .tab-target > div.tab-dual .hd-banner figure .hd-pd { left: -30%; }
#hd .hd-banner { position: relative; z-index: 2; }
#hd .hd-banner .hd-container { position: relative; overflow: hidden; }
#hd .hd-banner .hd-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 7% 10% 2em 10%; }
#hd .hd-banner .hd-content p { margin-bottom: 1em; }
#hd .hd-banner .btn-container .hd-btn { background: transparent; border: 1px solid white; border-radius: 2em; padding: .75em 2em; margin-right: .5em; }
#hd .hd-banner .btn-container .hd-btn i { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; background: url(../img/icon-play.png) center no-repeat; background-size: contain; margin: -.25em -.25em 0 .25em; }
#hd .hd-banner figure { position: relative; }
#hd .hd-banner figure .hd-bg { width: 100%; margin: -5% 0; }
#hd .hd-banner figure .hd-pd { width: 95%; position: absolute; bottom: 1%; left: -35%; }

@media screen and (max-width: 1440px) { #hd .hd-banner .hd-content { padding: 5% 10% 2em 10%; } }
@media screen and (max-width: 1280px) { #hd .filter-tab h3 { font-size: 1.75em; }
  #hd .hd-banner .hd-content { padding: 5% 10% 2em 5%; }
  #hd .hd-banner .hd-content p { line-height: 1.5; } }
@media screen and (max-width: 1024px) { #hd .hd-banner .hd-content { width: 55%; padding: 2em 10% 2em 2.5%; }
  #hd .hd-banner .btn-container .hd-btn { padding: .65em 1.5em; }
  #hd .hd-banner figure { width: 45%; }
  #hd .hd-banner figure .hd-pd { width: 90%; } }
@media screen and (max-width: 768px) { #hd .filter-tab li { font-size: 1.125em; }
  #hd .tab-target > div.tab-dual .hd-banner figure .hd-pd { left: -7%; }
  #hd .hd-banner .hd-content { width: 100%; padding: 2em 5%; }
  #hd .hd-banner figure { width: 100%; }
  #hd .hd-banner figure .hd-pd { width: 80%; left: -5%; } }
@media screen and (max-width: 620px) { #hd .sec-series { padding-top: 0; }
  #hd .tab-target > div { display: block !important; padding-bottom: 1em; } }
#hd .sec-psu, #hd .sec-motherboard { min-height: 0; position: relative; overflow: hidden; }
#hd .sec-psu img, #hd .sec-motherboard img { width: 100%; }
#hd .sec-psu p, #hd .sec-motherboard p { margin-bottom: 2em; }
#hd .sec-psu .hd-container, #hd .sec-motherboard .hd-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2em 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-psu .hd-btn, #hd .sec-motherboard .hd-btn { background: transparent; border: 1px solid white; border-radius: 2em; padding: .75em 2em; margin-right: .5em; }
#hd .sec-motherboard .hd-content { margin-left: auto; }
#hd .sec-motherboard .hd-content h3 { font-size: 1.25em; letter-spacing: .15em; margin-bottom: .75em; }
#hd .sec-motherboard .hd-content ul { font-size: 1.5em; font-style: italic; margin-bottom: 1em; }
#hd .sec-motherboard .hd-content li { display: inline-block; font-family: "TradeGothicLTPro", "Xolonium", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd .sec-motherboard .hd-content li:after { content: ''; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 4px; background: #67cfff; margin: -2px .1em 2px .75em; }
#hd .sec-motherboard .hd-content li:last-child:after { display: none; }

@media screen and (max-width: 1280px) { #hd .sec-motherboard .hd-content h2 { white-space: nowrap; }
  #hd .sec-motherboard .hd-content ul { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd .sec-motherboard .hd-content ul { font-size: 1.125em; } }
@media screen and (max-width: 1023px) { #hd .sec-psu img, #hd .sec-motherboard img { width: 180%; max-width: none !important; margin-left: -80%; }
  #hd .sec-psu .hd-container, #hd .sec-motherboard .hd-container { position: relative; width: 100%; }
  #hd .sec-psu .hd-container:before, #hd .sec-motherboard .hd-container:before { content: ''; display: block; width: 100%; height: 20%; background-color: black; background-image: -moz-linear-gradient(0deg, black, transparent); background-image: -webkit-linear-gradient(0deg, black, transparent); background-image: linear-gradient(0deg, black, transparent); background-color: transparent; position: absolute; bottom: 100%; left: 0; }
  #hd .sec-psu .hd-container .hd-content, #hd .sec-motherboard .hd-container .hd-content { width: 90%; margin: 0 auto; }
  #hd .sec-motherboard img { margin-left: 0; margin-right: -80%; }
  #hd .sec-motherboard .hd-content h2 { white-space: normal; }
  #hd .sec-motherboard .hd-content ul { font-size: 1.25em; } }
@media screen and (max-width: 480px) { #hd .sec-motherboard .hd-content ul { font-size: 1em; } }

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