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

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

#hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; }

::selection { background: #1d2124; color: #CE0000; }

::-moz-selection { background: #1d2124; color: #ffffff; }

#hd { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; background: black; color: white; font-size: 16px; margin: 0; padding: 0; }

#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 fadeInDown { 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 fadeInDown { 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 fadeInDown { 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 fadeInDown { 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 fadeInDown { 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); } }
/* ---------- color effect ---------- */
@-webkit-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-moz-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-ms-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-o-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-webkit-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-moz-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-ms-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-o-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-webkit-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-moz-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-ms-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-o-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-webkit-keyframes flashStrobing { 2%, 12% { opacity: 1; }
  0%, 4%, 11%, 13%, 100% { opacity: .6; } }
@-moz-keyframes flashStrobing { 2%, 12% { opacity: 1; }
  0%, 4%, 11%, 13%, 100% { opacity: .6; } }
@-ms-keyframes flashStrobing { 2%, 12% { opacity: 1; }
  0%, 4%, 11%, 13%, 100% { opacity: .6; } }
@-o-keyframes flashStrobing { 2%, 12% { opacity: 1; }
  0%, 4%, 11%, 13%, 100% { opacity: .6; } }
@keyframes flashStrobing { 2%, 12% { opacity: 1; }
  0%, 4%, 11%, 13%, 100% { opacity: .6; } }
@-webkit-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-moz-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-ms-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-o-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-webkit-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-moz-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-ms-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-o-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-webkit-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-moz-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-ms-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-o-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-webkit-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@-moz-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@-ms-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@-o-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@font-face { font-family: 'ROGFontsv'; src: url("../fonts/ROGFontsv1.5-Regular.otf"), url("../fonts/ROGFontsv1.5-Regular.otf") format("embedded-opentype"), url("../fonts/ROG Fonts v1.6.1.ttf") format("opentype"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Xolonium'; src: url("../fonts/xolonium-Regular.ttf") format("opentype"), url("../fonts/xolonium-regular.eot"); font-weight: normal; font-style: normal; }
#hd { font-size: 16px; }
#hd h1 { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 38px; line-height: 1; font-weight: normal; color: #fff !important; }
#hd h2 { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2.75em; line-height: 1; color: #ffffff !important; text-shadow: 2px 2px 10px #8ca0b8; letter-spacing: .018em; margin-bottom: 1em; word-break: normal; word-wrap: normal; text-transform: uppercase; }
#hd h3 { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.75em; line-height: 1; color: #ffffff; }
#hd h4 { font-family: "Roboto", "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", "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", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd a { color: white; }
#hd p { font-size: 1em; line-height: 1.5; letter-spacing: .04em; font-weight: 300; }
#hd p.color-primary { font-weight: 400; }
#hd b { font-weight: bold; }
#hd small { font-size: 12px; font-weight: 300; letter-spacing: 0.5px; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#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: #ff0054; }
#hd .color-white { color: white; }
#hd .color-grey { color: #aaaaaa; }
#hd .hd-uppercase { text-transform: uppercase; }
#hd .font-rog { font-family: "ROGFontsv", "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }

@media screen and (max-width: 1440px) { #hd h2 { font-size: 2.5em; }
  #hd p { font-size: 14px; } }
@media screen and (max-width: 1280px) { #hd h3 { font-size: 1.5em; }
  #hd h4 { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd h2 { font-size: 2em; } }
@media screen and (max-width: 768px) { #hd h2 { font-size: 1.75em; }
  #hd h3 { font-size: 1.25em; }
  #hd h4 { font-size: 1.125em; } }
@media screen and (max-width: 480px) { #hd { font-size: 14px; }
  #hd h2 { font-size: 1.5em; } }
#hd .hd-w90 { width: 90%; margin: 0 auto; position: relative; }
#hd .hd-w800 { max-width: 800px; margin-left: auto; margin-right: auto; }
#hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400 { width: 80%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w1000 { max-width: 1000px; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1300 { max-width: 1300px; }
#hd .hd-w1400 { max-width: 1400px; }
#hd .hd-col20 { width: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col66 { width: 66.6666%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col100 { width: 100%; }
#hd .fleft { float: left; }
#hd .fright { float: right; }
#hd .clear { display: table; clear: both; }
#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 .hd-d-none { display: none; }

@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; } }
@media screen and (max-width: 1023px) { #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400 { width: 90%; }
  #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", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: 400; letter-spacing: .018em; line-height: 1.5; font-size: 1rem; padding: .25em 1em; margin: 0 auto; color: white; position: relative; z-index: 2; -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:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #ff0054; z-index: -1; border-radius: 3px; }
#hd .hd-btn.hd-btn-skew { font-weight: bold; }
#hd .hd-btn.hd-btn-skew:before { border-radius: 0; -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-icon-plus { display: inline-block; vertical-align: top; width: 1.25em; height: 1.25em; border-radius: 1em; border: 1px solid #ff0054; 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: #ff0054; 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 .hd-nav { position: fixed; z-index: 999999; top: 50%; opacity: 1; -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.left { left: 17px; }
#hd .hd-nav.right { right: 17px; }
#hd .hd-nav ul { margin: 0; padding: 0; }
#hd .hd-nav ul li { display: block; margin: 9px 7px; position: relative; }
#hd .hd-nav ul li a { height: 12px; width: 12px; display: block; z-index: 1; cursor: pointer; text-decoration: none; position: relative; }
#hd .hd-nav ul li a span { width: 6px; height: 6px; display: block; border-radius: 6px; background: #aaaaaa; opacity: .5; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 1; -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; }
#hd .hd-nav ul li a:hover span { background: #c00000; }
#hd .hd-nav ul li a.active span { height: 12px; width: 12px; background: #c00000; opacity: 1; }
#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; color: #ff0054; overflow: hidden; display: block; margin: auto 0; opacity: 0; position: absolute; top: 0; bottom: 0; pointer-events: none; }
#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 { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; }
#hd .hd-nav.fp-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: 2px solid #c00000; opacity: 0; -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: #c00000; -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: #c00000; }
#hd .scroll-up:hover svg { fill: white; }

@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; border-radius: 50%; background: #ff0054; position: absolute; top: 30px; right: 30px; cursor: pointer; z-index: 2; }
#hd .hd-lightbox .hd-close:hover, #hd .step-lightbox .hd-close:hover { background: #ee2f92; }
#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 .trigger-play { cursor: pointer; }
#hd .step-lightbox img { width: 1024px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .step-lightbox .hd-close { background: #ff7614; }
#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 .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: #ff0054; border-color: #ff0054; }
#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 .owl-carousel { display: -ms-grid; display: grid; }
#hd .owl-carousel .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 .owl-nav .owl-prev, #hd .owl-carousel .owl-nav .owl-next { width: 2.625em; height: 2.625em; border-radius: 2em; background: #ff0054; pointer-events: all; position: absolute; top: 0; }
#hd .owl-carousel .owl-nav .owl-prev:before, #hd .owl-carousel .owl-nav .owl-next:before { content: ''; display: block; width: 20%; height: 20%; border: 2px solid black; 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 .owl-nav .owl-prev:hover, #hd .owl-carousel .owl-nav .owl-next:hover { background: #ee2f92; }
#hd .owl-carousel .owl-nav .owl-prev.disabled, #hd .owl-carousel .owl-nav .owl-next.disabled { filter: grayscale(100%) brightness(3); pointer-events: none; }
#hd .owl-carousel .owl-nav .owl-prev { right: calc(100% + 2em); -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 .owl-nav .owl-next { left: calc(100% + 2em); }
#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: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background: #4d4e4f; }
#hd .owl-carousel .owl-dots .owl-dot:hover { background: #aaaaaa; }
#hd .owl-carousel .owl-dots .owl-dot.active { background: #ff0054; }

@media screen and (max-width: 1023px) { #hd .owl-carousel { padding: 0 1em; }
  #hd .owl-carousel .owl-nav { height: 2.25em; }
  #hd .owl-carousel .owl-nav .owl-prev, #hd .owl-carousel .owl-nav .owl-next { width: 2.25em; height: 2.25em; }
  #hd .owl-carousel .owl-nav .owl-prev { right: calc(100% - 2em); }
  #hd .owl-carousel .owl-nav .owl-next { left: calc(100% - 2em); } }
#hd { padding-top: 46px; }
#hd header { width: 100%; position: fixed; top: 0; left: 0; background: #151515; z-index: 9; }
#hd header .logo-rog { width: 160px; margin: 10px auto 10px 0; }
#hd header .logo-rog img { width: 100%; }
#hd header .menu { text-align: center; }
#hd header .menu a { font-size: .875em; font-weight: 600; letter-spacing: .018em; color: white; padding: .25em 1em; -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: #c00000; }

#hamburger { display: none; }

@media screen and (max-width: 1023px) { #hd header .menu a { padding-left: .5em; padding-right: .5em; } }
@media screen and (max-width: 768px) { #hd header .hd-container { width: 100%; padding-left: 5%; }
  #hd header .logo-rog { margin-top: 8px; margin-bottom: 8px; }
  #hd header .menu { display: none; width: 100%; background: #303030; position: absolute; top: 100%; left: 0; z-index: -1; }
  #hd header .menu a { display: block; font-size: 1em; padding: 1em 0; border-bottom: 1px solid #505050; }
  #hamburger span, #hamburger:before, #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; }
  #hamburger { order: 3; display: block; width: 46px; height: 46px; background: #c00000; margin-left: 1em; position: relative; cursor: pointer; }
  #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); }
  #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); }
  #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); }
  #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); }
  #hamburger.hd-active span { opacity: 0; }
  #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 .color-amd { color: #c00000; }
#hd .amd-title { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: 400; font-size: 32px; line-height: 1.2; padding-bottom: 10px; position: relative; color: #fff !important; text-transform: uppercase; font-weight: normal; }
#hd .sec-amd-hero { position: relative; }
#hd .sec-amd-hero .inner { margin: 0 auto; padding: 0 40px; max-width: 1200px; box-sizing: border-box; }
#hd .sec-amd-hero .text { text-align: center; padding-top: 50px; padding-bottom: 50px; }
#hd .sec-amd-hero .banner-text { position: absolute; left: 10vw; top: 13vw; width: 42%; }
#hd .sec-amd-hero .banner-text .series { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; line-height: 1em; font-size: 2vw; font-weight: normal; letter-spacing: 1px; margin: 0 0 15px 0; }
#hd .sec-amd-hero .banner-text h2 { line-height: 1em; font-size: 2.8vw; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; margin: 0; background: -webkit-linear-gradient(0deg, #bda79d, #ffffff, #815d4c); background-clip: border-box; background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
#hd .sec-amd-hero .banner-text img { margin-left: 0; }
#hd .sec-amd-hero .banner-text .feature { font-style: italic; margin: 20px 0; }
#hd .sec-amd-hero .banner-text .feature span { margin-right: 12px; display: inline-block; }
#hd .sec-amd-hero .banner-text .feature span:before { content: '/'; display: inline-block; color: #fcdd30; font-weight: bold; padding-right: 4px; }
#hd .sec-amd-hero .banner-text .note { font-size: 0.8em; margin: 20px 0 20px 0; }
#hd .sec-amd-zen3 .inner { margin: 0 auto; padding: 0 40px; max-width: 1200px; box-sizing: border-box; display: flex; align-items: center; flex-direction: row-reverse; flex-wrap: wrap; }
#hd .sec-amd-zen3 .text { width: 50%; box-sizing: border-box; }
#hd .sec-amd-zen3 .image { width: 50%; }
#hd .sec-amd-list { padding: 20px 0 50px; }
#hd .sec-amd-list .inner { margin: 0 auto; padding: 0 40px; max-width: 1800px; box-sizing: border-box; }
#hd .sec-amd-list .text { text-align: center; margin-top: 50px; margin-bottom: 50px; }
#hd .sec-amd-list .table-wrapper { text-align: center; border-top: 4px solid #bc0929; padding-top: 6px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#hd .sec-amd-list table { width: 100%; border-collapse: collapse; min-width: 1400px; margin-bottom: 20px; }
#hd .sec-amd-list th { background: #444; text-align: center; font-weight: normal; padding: 10px 8px; font-size: 0.9em; border: 1px solid #000; }
#hd .sec-amd-list th:first-child { border-bottom: 1px solid #555; }
#hd .sec-amd-list th:last-child { border-right: 1px solid #555; }
#hd .sec-amd-list th.blank { background: #000; }
#hd .sec-amd-list th span { font-size: 0.8em; display: block; margin-top: 8px; }
#hd .sec-amd-list td { text-align: center; padding: 8px; border: 1px solid #555; color: #fff; }
#hd .sec-amd-list .name { text-align: left; display: block; font-family: 'xolonium', sans-serif; font-weight: 400; font-size: 1em; line-height: 1.2em; }
#hd .sec-amd-list .note { font-size: 0.9em; }
#hd .sec-amd-choose { padding: 40px 0 100px; }
#hd .sec-amd-choose .inner { margin: 0 auto; padding: 0 40px; max-width: 1400px; box-sizing: border-box; }
#hd .sec-amd-choose .text { text-align: center; margin-bottom: 20px; }
#hd .sec-amd-choose .tab-nav { display: flex; flex-wrap: no-wrap; align-items: stretch; background: #141414; max-width: 1400px; margin: 0 auto 50px; }
#hd .sec-amd-choose .tab-nav .entry { width: 25%; height: 100%; text-align: center; border-top: 4px solid #555; transition: all 0.3s; }
#hd .sec-amd-choose .tab-nav .entry:nth-child(1).active { border-color: #e70029; }
#hd .sec-amd-choose .tab-nav .entry:nth-child(2).active { border-color: #c30f9b; }
#hd .sec-amd-choose .tab-nav .entry:nth-child(3).active { border-color: #d79323; }
#hd .sec-amd-choose .tab-nav .entry span, #hd .sec-amd-choose .tab-nav .entry a { width: 100%; height: 100%; color: #666; font-family: 'xolonium', sans-serif; font-weight: 400; font-size: 1.8em; line-height: 1.2em; padding: 25px 8px; display: block; box-sizing: border-box; transition: all 0.3s; cursor: pointer; }
#hd .sec-amd-choose .tab-nav .entry span:hover, #hd .sec-amd-choose .tab-nav .entry a:hover { color: white; }
#hd .sec-amd-choose .tab-nav .entry a { font-size: 1.2em; }
#hd .sec-amd-choose .tab-nav .entry.active span, #hd .sec-amd-choose .tab-nav .entry.active a { color: white; }
#hd .sec-amd-choose .tab { display: none; }
#hd .sec-amd-choose .tab.active { display: block; }
#hd .sec-amd-choose .preface { max-width: 1050px; margin: 0 auto 20px; padding: 0 40px; box-sizing: border-box; text-align: center; }
#hd .sec-amd-choose .main { position: relative; max-width: 1200px; margin: 100px auto 0; }
#hd .sec-amd-choose .main img { width: 100%; position: absolute; right: 0%; top: -100px; width: 36%; z-index: 2; }
#hd .sec-amd-choose .main .text { width: 90%; min-height: 320px; margin-left: 5%; position: relative; display: flex; align-items: center; text-align: left; }
#hd .sec-amd-choose .main .text:after { content: ''; display: block; position: absolute; width: 90%; height: 100%; left: 0; top: 0; background-image: linear-gradient(to right, #6f0003 0%, #d73034 60%); background: #bc0929; z-index: 0; transform: skewX(10deg); }
#hd .sec-amd-choose .main .text .text-inner { width: 65%; box-sizing: border-box; padding: 3% 0% 3% 5%; position: relative; z-index: 1; }
#hd .sec-amd-choose .main .text h4 { position: relative; z-index: 1; font-family: "Xolonium", sans-serif; line-height: 1em; font-size: 1.5em; font-weight: normal; letter-spacing: 1px; }
#hd .sec-amd-choose .main .text p { margin-bottom: 20px; position: relative; z-index: 1; line-height: 1.4em; }
#hd .sec-amd-choose .main .text a { border: 1px solid #fff; color: #fff; font-size: 0.9em; padding: 10px 50px 10px 20px; display: inline-block; background: url(../img/amd/arrow.png) calc(100% - 15px) center no-repeat; background-size: 20px; transition: all 0.3s; position: relative; }
#hd .sec-amd-choose .main .text a:hover { background-color: rgba(0, 0, 0, 0.1); background-position: calc(100% - 10px) center; }
#hd .sec-amd-choose .tab-2 .main img { top: -80px; width: 55%; right: -20%; }
#hd .sec-amd-choose .tab-2 .main .text:after { background: #8c056e; }
#hd .sec-amd-choose .tab-3 .main img { top: -120px; width: 55%; right: -20%; }
#hd .sec-amd-choose .tab-3 .main .text:after { background: #d79323; }
#hd .sec-amd-records { padding: 40px 0 50px; }
#hd .slider-pd figure { width: 385px; margin: 0 auto 10px; }
#hd .slider-pd .hd-content { width: 300%; margin-left: -100%; font-style: italic; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.8s; -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.8s; -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.8s; -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.8s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .slider-pd .hd-content ul { display: flex; flex-wrap: nowrap; justify-content: center; }
#hd .slider-pd .hd-content li { padding: 0 5px; }
#hd .slider-pd .hd-content h4, #hd .slider-pd .hd-content h5, #hd .slider-pd .hd-content h6, #hd .slider-pd .hd-content p { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: normal; line-height: 1em; }
#hd .slider-pd .hd-content h4 { font-size: 24px; text-transform: uppercase; margin-bottom: 20px; }
#hd .slider-pd .hd-content h5 { font-size: 20px; margin-bottom: 8px; color: #63dbd2; background: -webkit-linear-gradient(0deg, #63dbd2, #2da8f7); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .slider-pd .hd-content h6 { font-size: 14px; color: #fff; margin-bottom: 8px; }
#hd .slider-pd .hd-content p { font-size: 12px; color: #555; margin-bottom: 8px; }
#hd .slider-pd .owl-item { -moz-transition: transform 0.8s ease; -o-transition: transform 0.8s ease; -webkit-transition: transform 0.8s ease; transition: transform 0.8s ease; }
#hd .slider-pd .owl-item:not(.center) { -moz-transform: scale(0.5, 0.5) translateY(20%); -o-transform: scale(0.5, 0.5) translateY(20%); -ms-transform: scale(0.5, 0.5) translateY(20%); -webkit-transform: scale(0.5, 0.5) translateY(20%); transform: scale(0.5, 0.5) translateY(20%); }
#hd .slider-pd .owl-item:not(.center) .hd-content { display: none; }
#hd .slider-pd .owl-nav { width: 100%; height: 40px; position: absolute; top: 0; right: 0; bottom: 5%; left: 0; margin: auto; }
#hd .slider-pd .owl-nav.disabled { display: block; }
#hd .slider-pd .owl-nav .owl-prev, #hd .slider-pd .owl-nav .owl-next { background: #c00000; }
#hd .slider-pd .owl-nav .owl-prev:hover, #hd .slider-pd .owl-nav .owl-next:hover { background: #ed0000; }
#hd .slider-pd .owl-dots { position: relative; width: 100%; margin-top: 80px; text-align: center; }
#hd .slider-pd .owl-dots.disabled { display: block; }
#hd .slider-pd .owl-dots .owl-dot { width: 40px; height: 7px; border-radius: 0; }
#hd .slider-pd .owl-dots .owl-dot.active { background: #ed0000; }
#hd .sec-amd-bios { padding: 50px 0 100px; }
#hd .sec-amd-bios img { display: block; margin: 0 auto; }
#hd .sec-amd-bios .inner { margin: 0 auto; padding: 0 40px; max-width: 1300px; }
#hd .sec-amd-bios .text { text-align: center; margin: 0 auto; max-width: 1000px; }
#hd .sec-amd-bios .text a { color: #01aeff; text-decoration: underline; font-weight: normal; font-size: inherit; }
#hd .sec-amd-bios .main { position: relative; }
#hd .sec-amd-bios .video-img { box-sizing: border-box; position: absolute; width: 38%; left: 50%; top: 15%; cursor: pointer; transition: all 0.3s; }
#hd .sec-amd-bios .video-img:hover img { opacity: .8; }
#hd .sec-amd-bios .video-img:hover .icon-play { background: #c00000; }
#hd .sec-amd-bios .video-img .icon-play { width: 50px; height: 50px; border-radius: 50%; background: #aaaaaa; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -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-amd-bios .video-img .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 .sec-amd-bios .note { margin-left: 10%; margin-top: -10%; margin-bottom: 10%; color: #aaa; font-size: 0.9em; position: relative; }

@media screen and (max-width: 1500px) { #hd .sec-amd-hero .banner-text { left: 10vw; top: 9vw; } }
@media screen and (max-width: 1440px) { #hd .amd-title { font-size: 28px; }
  #hd .sec-amd-records .hd-w1400 { max-width: 1200px; }
  #hd .slider-pd .owl-nav .owl-prev { right: calc(100% - 2em); }
  #hd .slider-pd .owl-nav .owl-next { left: calc(100% - 2em); } }
@media screen and (max-width: 1100px) { #hd .sec-amd-choose .tab-3 .main img { top: -80px; }
  #hd .slider-pd figure { margin-left: -50px; } }
@media screen and (max-width: 1024px) { #hd .amd-title { font-size: 24px; }
  #hd .sec-amd-hero .banner-text .feature { font-size: 0.8em; }
  #hd .sec-amd-choose .tab-nav .entry span { font-size: 1.2em; }
  #hd .sec-amd-choose .tab-nav .entry a { font-size: 1em; }
  #hd .sec-amd-choose .main { margin-top: 50px; }
  #hd .sec-amd-choose .main img { top: -50px; }
  #hd .sec-amd-choose .main .text .text-inner { padding-right: 0; }
  #hd .sec-amd-bios .video-img { width: 45%; left: 45%; top: 10%; } }
@media screen and (max-width: 850px) { #hd .sec-amd-hero .banner-text { left: 5vw; top: 5vw; width: 48%; }
  #hd .slider-pd figure { margin-left: -60px; } }
@media screen and (max-width: 768px) { #hd .sec-amd-hero { background: #1b191a; overflow: hidden; }
  #hd .sec-amd-hero .banner-text { left: auto; top: auto; width: 90%; position: relative; margin: -31vw auto 30px auto; }
  #hd .sec-amd-hero .banner-text .series { font-size: 3vw; }
  #hd .sec-amd-hero .banner-text h2 { font-size: 6vw; }
  #hd .sec-amd-hero .banner-text .text { padding-top: 0px; padding-bottom: 20px; }
  #hd .sec-amd-choose .tab-nav .entry { width: 33.33%; }
  #hd .sec-amd-choose .download-mobile { margin: 20px 0 50px; }
  #hd .sec-amd-choose .download-mobile a { color: #e70029; font-size: 1em; font-weight: normal; }
  #hd .sec-amd-choose .main { margin-top: 0; background: #bc0929; }
  #hd .sec-amd-choose .main img { position: relative; right: auto !important; top: auto !important; width: 75% !important; max-width: 450px; margin: 0 auto; }
  #hd .sec-amd-choose .main .text { width: 100%; margin-left: 0; }
  #hd .sec-amd-choose .main .text:after { display: none; }
  #hd .sec-amd-choose .main .text .text-inner { width: 100%; padding: 20px 20px 0 20px; }
  #hd .sec-amd-choose .tab-2 .main { background: #8c056e; }
  #hd .sec-amd-choose .tab-3 .main { background: #d79323; }
  #hd .slider-pd figure { width: 288px; margin-left: -20px; }
  #hd .slider-pd .hd-content h4 { font-size: 18px; margin-bottom: 10px; }
  #hd .slider-pd .hd-content h5 { font-size: 16px; }
  #hd .slider-pd .hd-content h6 { font-size: 12px; }
  #hd .slider-pd .hd-content p { font-size: 12px; }
  #hd .slider-pd .owl-nav .owl-prev { right: calc(100% - 5em); }
  #hd .slider-pd .owl-nav .owl-next { left: calc(100% - 5em); } }
@media screen and (max-width: 767px) { #hd .sec-amd-zen3 .text { width: 100%; text-align: center; }
  #hd .sec-amd-zen3 .image { width: 100%; } }
@media screen and (max-width: 620px) { #hd .amd-title { font-size: 20px; }
  #hd .sec-amd-records { position: relative; overflow: hidden; }
  #hd .slider-pd { width: 120%; margin-left: -10%; }
  #hd .slider-pd figure { margin-left: -50px; }
  #hd .slider-pd .hd-content ul { flex-wrap: wrap; min-height: 9em; }
  #hd .slider-pd .hd-content li { width: 40%; }
  #hd .slider-pd .owl-dots .owl-dot { width: 10px; height: 10px; margin: 0 4px; } }
@media screen and (max-width: 480px) { #hd .sec-amd-zen3 .inner, #hd .sec-amd-list .inner, #hd .sec-amd-choose .inner, #hd .sec-amd-bios .inner { padding: 0 20px; }
  #hd .sec-amd-choose .preface { padding: 0 20px; }
  #hd .slider-pd .owl-item:not(.center) { -moz-transform: scale(0.35, 0.35) translateY(10%); -o-transform: scale(0.35, 0.35) translateY(10%); -ms-transform: scale(0.35, 0.35) translateY(10%); -webkit-transform: scale(0.35, 0.35) translateY(10%); transform: scale(0.35, 0.35) translateY(10%); }
  #hd .slider-pd .owl-nav { bottom: 40%; } }
@media screen and (max-width: 375px) { #hd .slider-pd { width: 150%; margin-left: -25%; }
  #hd .slider-pd figure { width: 220px; margin-left: -30px; }
  #hd .slider-pd .hd-content { width: 200%; margin-left: -50%; }
  #hd .slider-pd .hd-content li { width: 50%; }
  #hd .slider-pd .owl-nav .owl-prev { right: calc(100% - 7.5em); }
  #hd .slider-pd .owl-nav .owl-next { left: calc(100% - 7.5em); } }
#hd .filter-bios li, #hd .filter-model li { font-size: 1.6em; font-weight: 700; letter-spacing: .04em; padding: 15px 10px; color: #aaaaaa; border: 1px solid #ff7614; background: url(../img/bios/deco-cooling.png) center top no-repeat; cursor: pointer; }
#hd .filter-bios li.hd-active, #hd .filter-model li.hd-active { background: #ff7614; color: white; }

#hd .bios-title { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2.5em; font-weight: 700; text-align: center; text-transform: uppercase; padding: .5em 1em; background: #ff7614; color: #151515; }
#hd .filter-bios { padding: 4em 0; }
#hd .filter-bios sup { display: inline-block; margin-top: -.5em; }
#hd .sec-bios-hero { background: black; }
#hd .sec-bios-hero .banner-text { width: 80%; top: 55%; left: 0; right: 0; bottom: 0; margin: auto; -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
#hd .sec-bios-hero .banner-text h3 { display: inline-block; position: relative; }
#hd .sec-bios-hero .banner-text h3:after { content: ''; width: 110%; height: 1px; background-color: black; background-image: -moz-linear-gradient(90deg, black, #ff7614 40%, #ff7614 40%, #ffb200, #ff7614 60%, transparent); background-image: -webkit-linear-gradient(90deg, black, #ff7614 40%, #ff7614 40%, #ffb200, #ff7614 60%, transparent); background-image: linear-gradient(90deg, black, #ff7614 40%, #ff7614 40%, #ffb200, #ff7614 60%, transparent); background-color: transparent; position: absolute; bottom: -.5em; left: -10%; }
#hd .sec-bios-hero .banner-text h2 { margin: .5em 0 1em; }
#hd .sec-bios-hero .bios-icon-container li { padding: 0 1.5em 0 .5em; padding-right: 3em; margin-bottom: 1em; position: relative; }
#hd .sec-bios-hero .bios-icon-container li:first-child:after { content: ''; display: block; width: 1px; height: calc(100% - 5em); background: #4d4e4f; position: absolute; top: 1em; right: 1.5em; }
#hd .sec-bios-hero .bios-icon-container img { margin: 0 auto 10px; border: 2px solid #ff7614; border-radius: 50%; }
#hd .sec-bios-steps, #hd .sec-bios-list { margin-top: -50px; padding-top: 50px; }
#hd .sec-bios-steps { padding-bottom: 5em; }
#hd .sec-bios-steps .hd-w1200 { width: 90%; }
#hd .bios-content { max-width: 960px; margin: 0 auto; }
#hd .bios-content > li { display: none; }
#hd .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; }
#hd .system-requirements { max-width: 320px; margin-left: 20px; }
#hd .system-requirements h3 { font-family: "Roboto", "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: #ff7614; }
#hd .checklist { background: white; border-radius: 8px; padding-bottom: 5px; margin-top: 20px; position: relative; }
#hd .checklist ul { padding-right: 20px; margin: 10px 10px 10px 25px; }
#hd .checklist li { font-size: 14px; list-style-type: disc; padding: 2px 0; color: black; }
#hd .checklist h4 { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.2em; text-transform: inherit; background: #ff7614; border-bottom: 2px solid #ffb200; color: #000; padding: 10px 0 10px 50px; margin: 0; border-top-right-radius: 8px; }
#hd .checklist h4:before { content: ''; display: block; width: 60px; height: 60px; border-radius: 60px; background: #ff7614 url(../img/icon/computer.png) center center no-repeat; background-size: 35px; border-bottom: 2px solid #ffb200; position: absolute; top: -12px; left: -20px; }
#hd .step-example { width: 200px; cursor: pointer; }
#hd .step-example .bios-title { font-weight: bold; font-size: 1.2em; }
#hd .step-example .btn-look { width: 180px; display: block; border: 3px solid #fff; border-radius: 8px; position: relative; overflow: hidden; }
#hd .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; }
#hd .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); }
#hd .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); }
#hd .steps { display: flex; flex-wrap: nowrap; margin-bottom: 4em; }
#hd .steps h2 { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; letter-spacing: 0; text-shadow: none; text-transform: none; color: #ff7614 !important; margin-bottom: 1em; }
#hd .steps h2 b { display: block; font-size: 2.125em; line-height: 1.2em; }
#hd .steps h2 span { display: none; }
#hd .steps p { line-height: 1.25; }
#hd .steps a { color: #ff7614; }
#hd .steps a:hover { text-decoration: underline; }
#hd .steps a:visited { color: #c00000; }
#hd .steps .hd-content { background-repeat: no-repeat; }
#hd .steps.step-1 .hd-content { background-image: url(../img/bios/n1.png); }
#hd .steps.step-2 .hd-content { background-image: url(../img/bios/n2.png); }
#hd .steps.step-3 .hd-content { background-image: url(../img/bios/n3.png); }
#hd .steps.step-4 .hd-content { background-image: url(../img/bios/n4.png); }
#hd .update-by-usb .step-1 .hd-content { padding-left: 10%; margin-left: 1em; background-position: left center; }
#hd .update-by-usb .step-2 .hd-content { padding: 2.5% 0; padding-left: 17%; background-position: left center; }
#hd .update-by-usb .step-3 .hd-content { padding: 4% 0; padding-right: 15%; background-position: right center; }
#hd .update-by-usb .step-3 img { margin-right: 2em; position: relative; z-index: -1; }
#hd .update-by-usb .step-4 .hd-content { padding-left: 17%; background-position: left top; }
#hd .update-by-usb .step-4 .hd-content h2 { margin-top: -.5em; }
#hd .update-by-usb .step-4 .hd-content p { margin-right: -12%; position: relative; z-index: 2; }
#hd .update-by-ez .step-1 .hd-content { padding-left: 10%; margin-left: 1em; background-position: left center; }
#hd .update-by-ez .step-2, #hd .update-by-ez .step-3 { align-items: center; justify-content: flex-end; }
#hd .update-by-ez .step-2 .hd-content, #hd .update-by-ez .step-3 .hd-content { padding: 2.5% 0; padding-left: 17%; padding-right: 2em; background-position: left center; }
#hd .update-by-ez .step-2 .step-example, #hd .update-by-ez .step-3 .step-example { margin-right: 5%; }
#hd .update-by-ez .step-3 .hd-content { margin-left: auto; }
#hd .update-by-ez .step-4 .hd-content { padding-left: 17%; padding-bottom: 5%; background-position: left top; }
#hd .sec-bios-list .modal-container { background: #242424; padding: 3em 0 5em; }
#hd .sec-bios-list .intro { display: block; padding: 1em 10px; }
#hd .sec-bios-list .intro a { color: #777; text-decoration: underline; }
#hd .sec-bios-list .intro a:hover { color: #aaa; }
#hd .filter-model { margin-bottom: 2em; }
#hd .model-content > li { display: none; }
#hd .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; }
#hd .table-bios { width: 100%; font-size: 14px; background: #000; border-collapse: collapse; margin: 0 auto !important; box-sizing: border-box; }
#hd .table-bios th { background: #686868; border-right: 1px solid #000; text-align: center; padding: 8px; color: #fff; }
#hd .table-bios th.align-left { text-align: left; }
#hd .table-bios td { padding: 8px; color: #fff; text-align: center; }
#hd .table-bios td.align-left { text-align: left; }
#hd .table-bios td a { color: #fff; text-decoration: none; }
#hd .table-bios td a:visited { text-decoration: none; }
#hd .table-bios td a:hover { text-decoration: underline; }
#hd .table-bios tr:nth-child(2n) { background: #333; }
#hd .table-bios .chipset, #hd .table-bios .chipset-alt { background: #000; }
#hd .table-bios .gap { border-top: 2px solid #555; }
#hd .table-bios .yes { background: url(../img/icon/yes.png); background-size: 100%; width: 15px; height: 15px; text-indent: -9999px; display: block; margin: 0 auto; }
#hd .sec-bios-footer { padding: 30px 0; }
#hd .sec-bios-footer .hd-container { width: 90%; max-width: 1380px; margin: 0 auto; }
#hd .sec-bios-footer .logo-asus { display: inline-block; vertical-align: middle; width: 200px; }
#hd .sec-bios-footer h3 { font-family: "Roboto", "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; }
#hd .sec-bios-footer p { margin-top: 1em; }
#hd .sec-bios-footer p a { color: #ff7614; }

@media screen and (max-width: 1440px) { #hd .sec-bios-hero .banner-text { width: 90%; top: 50%; }
  #hd .sec-bios-hero .bios-icon-container li { padding-right: 1em; }
  #hd .sec-bios-hero .bios-icon-container li:first-child:after { right: .5em; }
  #hd .sec-bios-footer .logo-asus { width: 150px; }
  #hd .sec-bios-footer h3 { font-size: 1.5em; } }
@media screen and (max-width: 1280px) { #hd .sec-bios-footer img { display: block; }
  #hd .sec-bios-footer h3 { width: 100%; display: block; margin: .5em 0 0; padding: 0; white-space: break-spaces; } }
@media screen and (max-width: 1100px) { #hd .sec-bios-hero .banner-text { width: 95%; align-items: center; }
  #hd .sec-bios-hero .bios-icon-container li { font-size: 12px; } }
@media screen and (max-width: 1024px) { #hd .sec-bios-hero h3 { font-size: 1em; }
  #hd .sec-bios-hero .banner-text .series { margin-bottom: 5px; }
  #hd .sec-bios-hero .bios-icon-container li { width: 120px; }
  #hd .sec-bios-hero .bios-icon-container img { margin-bottom: 3px; }
  #hd .sec-bios-hero .bios-icon-container a { font-size: 12px; } }
@media screen and (max-width: 1023px) { #hd .filter-bios li, #hd .filter-model li { font-size: 1.25em; }
  #hd .sec-bios-hero .bios-icon-container li { padding-right: 2em; }
  #hd .sec-bios-hero .bios-icon-container li:first-child:after { right: .75em; }
  #hd .system-requirements { max-width: 600px; margin-bottom: 2em; }
  #hd .step-example { margin-left: 0; margin-right: auto !important; }
  #hd .steps { flex-direction: column; margin-bottom: 1.5em; }
  #hd .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; }
  #hd .steps img { order: 3; margin-left: 0; margin-right: auto !important; }
  #hd .steps h2 { font-size: 1.25em; }
  #hd .update-by-usb .step-3 { flex-direction: row; }
  #hd .update-by-usb .step-3 .hd-content { padding-right: 0; }
  #hd .update-by-ez .step-2, #hd .update-by-ez .step-3 { flex-direction: row; }
  #hd .update-by-ez .step-2 .hd-content, #hd .update-by-ez .step-3 .hd-content { padding-right: 2em; } }
@media screen and (max-width: 768px) { #hd .sec-bios-hero .logo-asus, #hd .sec-bios-hero .logo-rog { margin: 1em 1em 1em; }
  #hd .sec-bios-hero .logo-asus { max-width: 15% !important; }
  #hd .sec-bios-hero .logo-rog { max-width: 15% !important; }
  #hd .sec-bios-hero .banner-text { width: 85%; top: 0; margin: -31vw auto 50px auto; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  #hd .update-by-usb .step-3 { flex-direction: column; }
  #hd .update-by-usb .step-3 img { margin-top: -8%; margin-left: 50px; }
  #hd .update-by-usb .step-4 .hd-content div { flex-wrap: wrap; }
  #hd .update-by-usb .step-4 .hd-content p { width: 100%; margin-right: 0; }
  #hd .update-by-usb .step-4 .hd-content img { margin-top: 1em; width: auto; }
  #hd .table-bios { font-size: .8em; } }
@media screen and (max-width: 620px) { #hd .bios-title { font-size: 2em; }
  #hd .filter-bios { padding: 2em 0; }
  #hd .system-requirements { width: 90%; }
  #hd .sec-bios-list .modal-container { padding-top: 2em; }
  #hd .table-bios { font-size: 12px; }
  #hd .table-bios th, #hd .table-bios td { padding: 8px 2px; font-weight: normal; } }
@media screen and (max-width: 480px) { #hd .filter-bios, #hd .filter-model { flex-direction: column; }
  #hd .filter-bios li, #hd .filter-model li { width: 100%; }
  #hd .sec-bios-hero .banner-text { flex-direction: column-reverse; }
  #hd .sec-bios-hero .bios-icon-container { flex-direction: row; }
  #hd .sec-bios-hero .bios-icon-container img { margin-bottom: 10px; }
  #hd .steps .hd-content { background-size: auto 50px !important; padding-top: 60px !important; padding-left: 0 !important; }
  #hd .step-example { margin-top: 1em; }
  #hd .update-by-usb .step-3 img { margin-left: 0; }
  #hd .update-by-ez .step-2, #hd .update-by-ez .step-3 { flex-direction: column; }
  #hd .update-by-ez .step-2 .hd-content, #hd .update-by-ez .step-3 .hd-content { padding-right: 0; }
  #hd .table-bios { font-size: 10px; }
  #hd .table-bios thead th:nth-child(1) { width: 5em; word-break: normal; } }
#hd .sec-vid, #hd .sec-guide, #hd .sec-article, #hd .sec-gallery, #hd .sec-gleam, #hd .sec-component, #hd .sec-build { padding: 5em 0; }
#hd .sec-intro { padding: 50px 0; }
#hd .sec-vid { padding-bottom: 0 !important; }
#hd .sec-build-hero { position: relative; overflow: hidden; }
#hd .sec-build-hero .banner-text { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-build-hero .banner-text:before { content: ''; display: block; width: 150%; height: 22vw; position: absolute; top: 10%; right: 0; bottom: 0; left: -25%; margin: auto; background: -moz-radial-gradient(center, ellipse cover, black 0%, rgba(0, 0, 0, 0) 50%); background: -webkit-radial-gradient(center, ellipse cover, black 0%, rgba(0, 0, 0, 0) 50%); background: radial-gradient(ellipse at center, black 0%, rgba(0, 0, 0, 0) 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); }
#hd .sec-build-hero .banner-text h3 { font-size: 6.1vw; letter-spacing: .12em; line-height: 1; padding-left: .12em; margin: .875em 0 -.65em; -moz-transform: skewX(-15deg) scaleX(1.3); -o-transform: skewX(-15deg) scaleX(1.3); -ms-transform: skewX(-15deg) scaleX(1.3); -webkit-transform: skewX(-15deg) scaleX(1.3); transform: skewX(-15deg) scaleX(1.3); position: relative; color: black; text-shadow: -4px -4px 12px rgba(0, 0, 0, 0.75); }
#hd .sec-build-hero .banner-text h3 span { padding-left: .12em; position: absolute; top: 0; left: 0; color: #ff002a !important; background-color: #ffb400; background-image: -moz-linear-gradient(90deg, #ffb400, #ff002a); background-image: -webkit-linear-gradient(90deg, #ffb400, #ff002a); background-image: linear-gradient(90deg, #ffb400, #ff002a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
#hd .sec-build-hero .banner-text h2 { font-size: 8.5vw; letter-spacing: .04em; line-height: 1; padding-left: .04em; -moz-transform: skewX(-15deg) scaleX(1.1); -o-transform: skewX(-15deg) scaleX(1.1); -ms-transform: skewX(-15deg) scaleX(1.1); -webkit-transform: skewX(-15deg) scaleX(1.1); transform: skewX(-15deg) scaleX(1.1); text-shadow: -4px -4px 10px rgba(0, 0, 0, 0.75); }
#hd .slider-vid .trigger-play:hover figure img, #hd .sec-guide .trigger-play:hover figure img { opacity: .5; }
#hd .slider-vid .trigger-play:hover .icon-play, #hd .sec-guide .trigger-play:hover .icon-play { background: #ff0054; -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); }
#hd .slider-vid .trigger-play:hover p, #hd .sec-guide .trigger-play:hover p { -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 .slider-vid figure, #hd .sec-guide figure { width: 100%; height: 0; padding-bottom: 70%; margin-bottom: 1em; position: relative; overflow: hidden; }
#hd .slider-vid figure img, #hd .sec-guide 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 .slider-vid .icon-play, #hd .sec-guide .icon-play { width: 50px; height: 50px; border-radius: 50%; background: #aaaaaa; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .slider-vid .icon-play:before, #hd .sec-guide .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 .slider-vid p, #hd .sec-guide p { padding: 0 .5em; line-height: 1.25; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .slider-vid .owl-nav .owl-prev, #hd .sec-guide .owl-nav .owl-prev { right: calc(100% - 1em); }
#hd .slider-vid .owl-nav .owl-next, #hd .sec-guide .owl-nav .owl-next { left: calc(100% - 1em); }
#hd .sec-guide { background: url(../img/amd/bios-bg.jpg) center no-repeat; background-size: contain; padding-bottom: 2em; }
#hd .sec-guide .trigger-play { padding: 0 1em; }
#hd .sec-guide figure { position: relative; }
#hd .sec-article { padding-top: 2em; }
#hd .sec-article .hd-w1200 { width: 100%; }
#hd .hd-post { padding: 3px; position: relative; flex-shrink: 0; }
#hd .hd-post figure { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; }
#hd .hd-post figure:after { content: ''; display: block; width: 100%; height: 80%; background-color: rgba(0, 0, 0, 0.9); background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); background-color: transparent; position: absolute; bottom: 0; left: 0; pointer-events: none; }
#hd .hd-post figure img { -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
#hd .hd-post:hover img { opacity: .75; -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); }
#hd .hd-post .post-content { width: 100%; padding: 1em; position: absolute; bottom: 0; left: 0; }
#hd .hd-post .post-category { font-size: 10px; padding: .125em .5em; }
#hd .hd-post .post-meta-container { font-size: 12px; }
#hd .hd-post .post-author a { font-weight: 500; }
#hd .hd-post h3 { font-weight: 500; line-height: 1.25; margin: .25em 0 .5em; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
#hd .hd-post a { color: white; }
#hd .post-scroller { width: 100%; overflow-x: auto; }
#hd .post-scroller::-webkit-scrollbar { height: 3px; }
#hd .post-scroller::-webkit-scrollbar-track { background: #353535; }
#hd .post-scroller::-webkit-scrollbar-thumb { background: #c00000; }
#hd .post-scroller::-webkit-scrollbar-thumb:hover { background: #ff0054; }
#hd .post-scroller .hd-post { width: 23%; }
#hd .post-scroller .hd-post figure { padding-bottom: 65%; }
#hd .post-scroller .hd-post .post-content { padding: .75em; }
#hd .post-scroller .hd-post h3 { font-size: 14px; margin: 5px 0 0; }
#hd .post-scroller .hd-post .post-meta-container { display: none; }
#hd .sec-gallery { padding-top: 3em; }
#hd .sec-gallery .hd-container { width: 90%; max-width: 1000px; margin: 0 auto; }
#hd .sec-gallery p { padding: 1em .5em; }
#hd .sec-gallery .owl-nav .owl-prev { right: calc(100% - 1em); }
#hd .sec-gallery .owl-nav .owl-next { left: calc(100% - 1em); }
#hd .sec-gleam .gleam-widget-container { max-width: 540px; margin: 0 auto; }
#hd .sec-gleam .e-widget-wrapper { width: 100%; display: block; margin: 0 auto; }
#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: #ff0054; }
#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 tr:hover th:nth-child(-n+3), #hd .sec-component .hd-table table tr:hover td:nth-child(-n+3) { background: #151515; }
#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; }
#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/amd/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; }
#hd .slider-banner { max-width: 970px; margin: 0 auto; }
#hd .sec-build { padding-bottom: 10em !important; }
#hd .sec-build ul { margin: 0 -.5em 5em; }
#hd .sec-build li { padding: 0 .5em; margin-bottom: 2em; }
#hd .sec-build a { color: white; }
#hd .sec-build a h4 { margin-bottom: .125em; }
#hd .sec-build a p { margin-bottom: 1em; }
#hd .sec-build a:hover figure:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-shadow: 0 0 150px rgba(0, 0, 0, 0.5) inset, 0 0 100px rgba(0, 0, 0, 0.75) inset, 0 0 20px black inset; -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 .sec-build a:hover .hd-btn { -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 .sec-build a:active .hd-btn { -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 .sec-build figure { width: 100%; position: relative; overflow: hidden; margin-bottom: .75em; }

/*ie11 above fixed*/
_:-ms-fullscreen, :root #hd .sec-build-hero .banner-text h3 span { background: transparent !important; }

@media screen and (max-width: 1024px) { #hd .sec-guide { padding-bottom: 0 !important; } }
@media screen and (max-width: 1023px) { #hd .slider-vid .owl-nav .owl-prev, #hd .sec-guide .owl-nav .owl-prev, #hd .sec-gallery .owl-nav .owl-prev { right: calc(100% - 2em); }
  #hd .slider-vid .owl-nav .owl-next, #hd .sec-guide .owl-nav .owl-next, #hd .sec-gallery .owl-nav .owl-next { left: calc(100% - 2em); } }
@media screen and (max-width: 768px) { #hd .sec-vid, #hd .sec-guide, #hd .sec-article, #hd .sec-gallery, #hd .sec-gleam, #hd .sec-component, #hd .sec-build { padding: 3em 0; }
  #hd .sec-build-hero .banner-text:before { width: 150%; height: 50vw; top: 5%; left: -25%; }
  #hd .sec-build-hero .banner-text h3 { font-size: 11.5vw; letter-spacing: 0em; padding-left: .5em; margin: .5em 0 -.5em; -moz-transform: skewX(-15deg) scaleX(1.1); -o-transform: skewX(-15deg) scaleX(1.1); -ms-transform: skewX(-15deg) scaleX(1.1); -webkit-transform: skewX(-15deg) scaleX(1.1); transform: skewX(-15deg) scaleX(1.1); }
  #hd .sec-build-hero .banner-text h3 span { padding-left: .5em; }
  #hd .sec-build-hero .banner-text h2 { font-size: 13vw; padding-left: .2em; -moz-transform: skewX(-15deg); -o-transform: skewX(-15deg); -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); }
  #hd .slider-vid .owl-nav .owl-prev, #hd .sec-guide .owl-nav .owl-prev { right: calc(100% - 2em); }
  #hd .slider-vid .owl-nav .owl-next, #hd .sec-guide .owl-nav .owl-next { left: calc(100% - 2em); }
  #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: 767px) { #hd .post-scroller .hd-post { width: 30%; } }
@media screen and (max-width: 620px) { #hd .sec-vid, #hd .sec-guide, #hd .sec-article, #hd .sec-gallery, #hd .sec-gleam, #hd .sec-component, #hd .sec-build { padding: 2em 0; }
  #hd .sec-build { padding: 3em 0; }
  #hd .sec-build ul { flex-direction: column; }
  #hd .sec-build li { width: 100%; margin-bottom: 2em; }
  #hd .sec-article .hd-post.hd-col50 { width: 100%; }
  #hd .post-scroller .hd-post { width: 65%; } }
@media screen and (max-width: 480px) { #hd .sec-gleam .e-widget-preloader, #hd .sec-gleam iframe.e-embed-frame { min-width: 280px !important; }
  #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: 12px; padding: .5em; } }

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