/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
html, body { padding: 0; margin: 0; background: #000000; color: #ffffff; }

/* ---------- RESET ---------- */
#hd { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; background: black; color: white; font-size: 16px; margin: 0; padding: 0; }
#hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; }
#hd * ::selection { background: #1d2124; color: #76d4fe; }
#hd * ::-moz-selection { background: #1d2124; color: #76d4fe; }
#hd ul, #hd li, #hd figure { margin: 0; padding: 0; }
#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; padding: 0; margin: 0; }
#hd img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0 auto; }
#hd img.lazyload { opacity: 0; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
#hd img.lazyload.lazyloaded { height: auto; opacity: 1; }
#hd video { max-width: 100%; }

/* ---------- ANIMATIONS ---------- */
@-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 fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-moz-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-ms-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-o-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
.fadeOut { -webkit-animation-delay: 0s; -webkit-animation-duration: 0s; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0s; -moz-animation-name: fadeOut; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0s; -o-animation-name: fadeOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0s; animation-name: fadeOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

@-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; } }
.fadeIn { -webkit-animation-delay: 0s; -webkit-animation-duration: 0s; -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: 0s; -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: 0s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

@-webkit-keyframes dotGrowing { 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); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-moz-keyframes dotGrowing { 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); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-ms-keyframes dotGrowing { 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); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-o-keyframes dotGrowing { 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); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@keyframes dotGrowing { 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); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-webkit-keyframes zoomOut { 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); }
  100% { -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); } }
@-moz-keyframes zoomOut { 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); }
  100% { -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); } }
@-ms-keyframes zoomOut { 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); }
  100% { -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); } }
@-o-keyframes zoomOut { 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); }
  100% { -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); } }
@keyframes zoomOut { 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); }
  100% { -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); } }
@-webkit-keyframes triggerable { 0% { border-width: 1em; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; }
  40% { opacity: .9; }
  90%,100% { border-width: 1px; -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); opacity: 0; } }
@-moz-keyframes triggerable { 0% { border-width: 1em; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; }
  40% { opacity: .9; }
  90%,100% { border-width: 1px; -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); opacity: 0; } }
@-ms-keyframes triggerable { 0% { border-width: 1em; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; }
  40% { opacity: .9; }
  90%,100% { border-width: 1px; -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); opacity: 0; } }
@-o-keyframes triggerable { 0% { border-width: 1em; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; }
  40% { opacity: .9; }
  90%,100% { border-width: 1px; -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); opacity: 0; } }
@keyframes triggerable { 0% { border-width: 1em; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; }
  40% { opacity: .9; }
  90%,100% { border-width: 1px; -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); opacity: 0; } }
@-webkit-keyframes pressed { 50% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  100% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -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); } }
@-moz-keyframes pressed { 50% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  100% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -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); } }
@-ms-keyframes pressed { 50% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  100% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -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); } }
@-o-keyframes pressed { 50% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  100% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -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); } }
@keyframes pressed { 50% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  100% { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -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); } }
@-webkit-keyframes darken { 100% { filter: brightness(50%); } }
@-moz-keyframes darken { 100% { filter: brightness(50%); } }
@-ms-keyframes darken { 100% { filter: brightness(50%); } }
@-o-keyframes darken { 100% { filter: brightness(50%); } }
@keyframes darken { 100% { filter: brightness(50%); } }
#hd .hd-btn { display: flex; justify-content: center; align-items: center; width: 141px; height: 42px; margin: 0 40px; background-image: url(../img/btn-border.png); background-size: 100% auto; color: #fff; position: relative; cursor: pointer; }
#hd .hd-btn p { font-size: 16px !important; font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; padding-top: .2em; position: absolute; z-index: 2; }
#hd .hd-btn .border-full { width: 0; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#hd .hd-btn:hover .border-full { width: 100%; background-image: url(../img/border-full.png); background-repeat: no-repeat; background-size: cover; }
#hd .hd-btn:before, #hd .hd-btn:after { content: ''; height: 100%; width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: absolute; }
#hd .hd-btn:before { background-image: url(../img/border-light-bottom.png); top: 1px; left: -5px; }
#hd .hd-btn:after { background-image: url(../img/border-light-left.png); background-size: 100% auto; top: 0; left: -6px; }

@font-face { font-family: 'TradeGothicLTPro'; src: url("../font/TradeGothicLTPro-Bold.ttf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
#hd { font-size: 16px; }
#hd h1 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 4.5em; letter-spacing: 0.2em; line-height: 1.25; color: #ffffff; }
#hd h2 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 3em; letter-spacing: 0; line-height: 1; color: #ffffff; margin-bottom: 1em; }
#hd h2 span { display: inline-block; }
#hd h2 span::selection, #hd h2 span ::selection { -webkit-text-fill-color: white; }
#hd h3 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.75em; letter-spacing: 0; line-height: 1.25; color: #ffffff; margin-bottom: .125em; }
#hd h3.color-primary { color: #76d4fe; }
#hd h4 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; font-weight: bold; letter-spacing: .26em; line-height: 1.25; margin-bottom: 1.35em; color: #ffffff; opacity: .6; }
#hd h5 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ffffff; }
#hd h6 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ffffff; }
#hd p, #hd small, #hd a, #hd li { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd p { font-size: 1em; line-height: 1.5; letter-spacing: .018em; 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-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 .font-rog { font-family: "ROGFonts", "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd .font-title { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd .hd-uppercase { text-transform: uppercase; }
#hd .text-larger { font-size: 1.25em; }
#hd .color-primary { color: #76d4fe; }
#hd .color-white { color: white; }
#hd .color-grey { color: #727272; }
#hd .color-gradient { display: inline-block; color: #76d4fe; background-color: #4DD0FF; background-image: -moz-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .line-clamp { display: block; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
#hd .line-clamp.line-1 { display: block; -webkit-box-orient: initial; white-space: nowrap; text-overflow: ellipsis; }
#hd .line-clamp.line-2 { -webkit-line-clamp: 2; }
#hd .line-clamp.line-3 { -webkit-line-clamp: 3; }

/*ie11 above fixed*/
_:-ms-fullscreen, :root #hd .color-gradient { background: transparent !important; }

@media screen and (min-width: 2000px) { #hd { font-size: 20px; } }
@media screen and (max-width: 1440px) { #hd h1 { font-size: 3.5em; }
  #hd h2 { font-size: 2.5em; } }
@media screen and (max-width: 1024px) { #hd { font-size: 14px; }
  #hd h3 { font-size: 1.75em; }
  #hd p { font-size: 1em; line-height: 1.66; }
  #hd .text-larger { font-size: 1.125em; } }
@media screen and (max-width: 768px) { #hd h3 { font-size: 1.5em; } }
@media screen and (max-width: 620px) { #hd h1 { font-size: 2.5em; letter-spacing: .15em; }
  #hd h2 { font-size: 2.25em; }
  #hd h3 { font-size: 1.35em; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w900, #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1400 { width: 80%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w900 { max-width: 900px; }
#hd .hd-w1000 { max-width: 1000px; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1400 { max-width: 1400px; }
#hd .hd-mw1000 { max-width: 1000px; }
#hd .hd-mw850 { max-width: 850px; }
#hd .mx-auto { margin-left: auto; margin-right: auto; }
#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 .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }
#hd .align-items-center { align-items: center; }
#hd .align-items-start { align-items: flex-start; }
#hd .align-items-end { align-items: flex-end; }
#hd .justify-content-center { justify-content: center; }
#hd .justify-content-start { justify-content: flex-start; }
#hd .justify-content-end { justify-content: flex-end; }
#hd .justify-content-between { justify-content: space-between; }
#hd .justify-content-around { justify-content: space-around; }
#hd .flex-row-reverse { flex-direction: row-reverse; }
#hd .hd-d-none { display: none; }
#hd .hd-d-ib { display: inline-block; }

@media screen and (min-width: 2000px) { #hd .hd-w900 { max-width: 1200px; }
  #hd .hd-w1000 { max-width: 1400px; }
  #hd .hd-w1200 { max-width: 1600px; }
  #hd .hd-w1400 { max-width: 1800px; } }
@media screen and (max-width: 1023px) { #hd .hd-w900, #hd .hd-w1000, #hd .hd-w1200, #hd .hd-w1400 { 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 .owl-carousel .owl-nav { width: 100%; height: 2em; position: absolute; top: 0; bottom: 0; margin: auto 0; }
#hd .owl-carousel .owl-prev, #hd .owl-carousel .owl-next { width: 3em; height: 3em; background: url(../img/ai-overclocking/arrow-right.svg) center no-repeat; background-size: 30%; position: absolute; top: 0; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#hd .owl-carousel .owl-prev:hover, #hd .owl-carousel .owl-next:hover { background-image: url(../img/ai-overclocking/arrow-right-hover.svg); }
#hd .owl-carousel .owl-prev.disabled, #hd .owl-carousel .owl-next.disabled { pointer-events: none; opacity: .5; }
#hd .owl-carousel .owl-prev { right: 100%; -moz-transform: translate3d(0, 0, 0) scaleX(-1); -o-transform: translate3d(0, 0, 0) scaleX(-1); -ms-transform: translate3d(0, 0, 0) scaleX(-1); -webkit-transform: translate3d(0, 0, 0) scaleX(-1); transform: translate3d(0, 0, 0) scaleX(-1); }
#hd .owl-carousel .owl-next { left: 100%; }

@media screen and (max-width: 768px) { #hd .owl-carousel .owl-prev { right: calc(100% - 1em); }
  #hd .owl-carousel .owl-next { left: calc(100% - 1em); } }
@media screen and (max-width: 620px) { #hd .owl-carousel .owl-prev { right: calc(100% - 1.5em); }
  #hd .owl-carousel .owl-next { left: calc(100% - 1.5em); } }
#hd { background: #010021; margin-top: -98px; position: relative; overflow: hidden; }
#hd .hd-title h2 { margin-bottom: .125em; }
#hd .hd-title p { margin-bottom: 4em; }
#hd .sec-kv { position: relative; overflow: hidden; }
#hd .sec-kv .hd-container { flex-direction: column; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#hd .sec-kv h1 { padding-left: .02em; margin-bottom: .125em; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
#hd .sec-kv h1 span { display: inline-block; position: relative; z-index: 2; }
#hd .sec-kv h1 span:before { content: ''; display: block; width: 1.3em; height: 1.125em; position: absolute; top: -.05em; left: -.125em; background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); z-index: -1; }
#hd .sec-kv p { padding: 0 1em; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); }
#hd .sec-feature, #hd .sec-vid, #hd .sec-usage, #hd .sec-more { padding: 6.25em 0; }
#hd .sec-feature { background: url(../img/ai-overclocking/bg-feature.jpg) center top no-repeat; background-size: cover; }
#hd .sec-feature .feature-container { margin: 5em 0 0; }
#hd .sec-feature .feature-container li { padding: 0 1em; }
#hd .sec-feature .feature-container img { width: 70%; max-width: 200px !important; margin: 0 auto 1.5em; mix-blend-mode: lighten; }
#hd .sec-feature .feature-container p { line-height: 1.4; padding: 0 1.5em; }
#hd .sec-vid .vid-container { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; }
#hd .sec-vid .vid-container .trigger-play { background: url(../img/ai-overclocking/vid-cover.jpg) center no-repeat; background-size: cover; }
#hd .sec-vid .vid-container.is-playing .trigger-play { opacity: 0; }
#hd .sec-vid video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#hd .sec-vid .trigger-play { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
#hd .sec-vid .trigger-play:hover .icon-play { background-color: #4DD0FF; background-image: -moz-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(135deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); -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 .sec-vid .trigger-play:hover .icon-play:before { -webkit-animation-delay: 0s; -webkit-animation-duration: 1.5s; -webkit-animation-name: hint; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 1.5s; -moz-animation-name: hint; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 1.5s; -o-animation-name: hint; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1.5s; animation-name: hint; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-vid .icon-play { width: 4em; height: 4em; border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -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-vid .icon-play:before, #hd .sec-vid .icon-play:after { content: ''; display: block; position: absolute; margin: auto; }
#hd .sec-vid .icon-play:before { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #ffffff; box-sizing: border-box; }
#hd .sec-vid .icon-play:after { width: 0; height: 0; border-style: solid; border-width: 1em 0 1em 1.5em; border-color: transparent transparent transparent #ffffff; top: 0; right: 0; bottom: 0; left: 10%; }
#hd .sec-vid .num-container { padding: 3em 0; }
#hd .sec-vid .num-container p { font-size: 1.25em; }
#hd .sec-vid .num-container h2 { margin: .45em 0 .125em; line-height: 1; white-space: nowrap; }
#hd .sec-vid .num-container h2 .text-larger { font-size: 2em; text-align: right; }
#hd .sec-vid .num-container li:nth-child(1) .text-larger { min-width: 3.1em; }
#hd .sec-vid .num-container li:nth-child(2) .text-larger, #hd .sec-vid .num-container li:nth-child(3) .text-larger { min-width: 2.5em; }
#hd .sec-instruction { background-color: #0d1337; background-image: -moz-linear-gradient(180deg, #0d1337, transparent 40vh); background-image: -webkit-linear-gradient(180deg, #0d1337, transparent 40vh); background-image: linear-gradient(180deg, #0d1337, transparent 40vh); background-color: transparent; }
#hd .sec-instruction .filter-tab { width: 70%; max-width: 38.25em; margin: 0 auto; z-index: 2; }
#hd .sec-instruction .filter-tab > li { width: 100%; font-size: 2em; font-weight: bold; line-height: 1; letter-spacing: .018em; text-align: center; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); padding: .5em 1em .3em; background: rgba(255, 255, 255, 0.15); cursor: pointer; }
#hd .sec-instruction .filter-tab > li.hd-active { background-color: #4DD0FF; background-image: -moz-linear-gradient(90deg, #4DD0FF, #00B6EC 10%, #236BF6 40%, #A201FF); background-image: -webkit-linear-gradient(90deg, #4DD0FF, #00B6EC 10%, #236BF6 40%, #A201FF); background-image: linear-gradient(90deg, #4DD0FF, #00B6EC 10%, #236BF6 40%, #A201FF); cursor: default; pointer-events: none; }
#hd .sec-instruction .filter-content > li { display: none; padding: 2em 0; }
#hd .sec-instruction .filter-content > li.hd-active { display: block; }
#hd .sec-steps { padding: 2em 0; }
#hd .sec-steps figure { max-width: 1088px; margin: 0 auto; position: relative; }
#hd .sec-steps figure .hd-base { position: relative; }
#hd .sec-steps figure img { width: 100%; position: absolute; top: 0; left: 0; }
#hd .sec-steps figure img.hd-base { position: relative; }
#hd .sec-steps figure .frame { display: block; border: 2px solid #02C2FF; position: absolute; opacity: 0; }
#hd .sec-steps figure .click { opacity: 0; position: absolute; }
#hd .sec-steps figure .click:before { content: ''; display: block; width: 3em; height: 3em; border-radius: 50%; border: 2px solid #02C2FF; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-animation-delay: 0.4s; -webkit-animation-duration: 1.2s; -webkit-animation-name: triggerable; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 1.2s; -moz-animation-name: triggerable; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 1.2s; -o-animation-name: triggerable; -o-animation-timing-function: ease-out; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 1.2s; animation-name: triggerable; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-steps figure .hd-note { width: 100%; padding: 1.25em 2em; background: rgba(0, 0, 0, 0.6); position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; margin: 0 auto; }
#hd .sec-steps figure .hd-note i { font-style: italic; }
#hd .sec-steps .owl-item { left: 0 !important; margin-left: 0 !important; }
#hd .sec-steps .owl-nav { display: none; }
#hd .hd-key-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4em; position: absolute; top: 0; bottom: 0; right: 4%; text-align: center; white-space: nowrap; }
#hd .hd-key-container .hd-key { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; font-weight: bold; letter-spacing: 0; min-width: 2.65em; border: 2px solid white; border-radius: 5px; padding: .65em .45em .35em .5em; margin: .25em auto; }
#hd .hd-key-container p { font-size: 1em; line-height: 1.25; }
#hd .fig-step-1 img.hd-focus, #hd .fig-step-3 img.hd-focus, #hd .fig-step-5 img.hd-focus { opacity: 0; }
#hd .fig-step-4 img.hd-ui { transform-origin: 0 0; }
#hd .fig-step-4 img.hd-focus { opacity: 0; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-transition: none !important; -o-transition: none !important; -webkit-transition: none !important; transition: none !important; }
#hd .fig-step-4 .hd-ui-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
#hd .fig-step-4 .frame { width: 8%; height: 0; padding-bottom: 8%; top: 13%; left: 0; }
#hd .fig-step-4 .click { top: 22%; left: 3%; }
#hd .start-anim-active .owl-item.active .hd-key { -webkit-animation-delay: 1s; -webkit-animation-duration: 0.6s; -webkit-animation-name: pressed; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 1s; -moz-animation-duration: 0.6s; -moz-animation-name: pressed; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 1s; -o-animation-duration: 0.6s; -o-animation-name: pressed; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 1s; animation-duration: 0.6s; animation-name: pressed; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .start-anim-active .owl-item.active .fig-step-1 img.hd-ui, #hd .start-anim-active .owl-item.active .fig-step-5 img.hd-ui { -webkit-animation-delay: 1.1s; -webkit-animation-duration: 0.6s; -webkit-animation-name: darken; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 1.1s; -moz-animation-duration: 0.6s; -moz-animation-name: darken; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 1.1s; -o-animation-duration: 0.6s; -o-animation-name: darken; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 1.1s; animation-duration: 0.6s; animation-name: darken; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .start-anim-active .owl-item.active .fig-step-1 img.hd-focus, #hd .start-anim-active .owl-item.active .fig-step-3 img.hd-focus { -webkit-animation-delay: 1.5s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 1.5s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 1.5s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 1.5s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .start-anim-active .owl-item.active .fig-step-4 img.hd-ui { -webkit-animation-delay: 0.25s; -webkit-animation-duration: 0.6s; -webkit-animation-name: zoomOut; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.25s; -moz-animation-duration: 0.6s; -moz-animation-name: zoomOut; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.25s; -o-animation-duration: 0.6s; -o-animation-name: zoomOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.25s; animation-duration: 0.6s; animation-name: zoomOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .start-anim-active .owl-item.active .fig-step-4 img.hd-focus { -webkit-animation-delay: 2.5s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 2.5s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 2.5s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 2.5s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .start-anim-active .owl-item.active .fig-step-4 .frame { -webkit-animation-delay: 0.8s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.8s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.8s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.8s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .start-anim-active .owl-item.active .fig-step-4 .click { -webkit-animation-delay: 0.8s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.8s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.8s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.8s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .start-anim-active .owl-item.active .fig-step-5 img.hd-focus { -webkit-animation-delay: 1s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 1s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 1s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 1s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .fig-oneclick .hd-ui-container { width: 82%; height: 100%; margin: 0 auto; position: absolute; overflow: hidden; top: 0; left: 0; right: 0; }
#hd .fig-oneclick .hd-ui-container .frame { width: 73%; height: 0; padding-bottom: 20%; top: 8%; left: 6%; }
#hd .fig-oneclick .hd-ui-container .click { top: 24%; left: 11.5%; }
#hd .fig-oneclick .hd-ui-container.hd-focus .click { top: 51%; left: 49%; }
#hd .fig-oneclick img.hd-ui { transform-origin: 0 0; }
#hd .fig-oneclick img.hd-focus { opacity: 0; }
#hd .fig-oneclick.is-animated img.hd-ui { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.6s; -webkit-animation-name: zoomOut; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.6s; -moz-animation-name: zoomOut; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.6s; -o-animation-name: zoomOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.6s; animation-name: zoomOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .fig-oneclick.is-animated img.hd-focus { -webkit-animation-delay: 2s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 2s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 2s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 2s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .fig-oneclick.is-animated .hd-ui-container .frame { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .fig-oneclick.is-animated .hd-ui-container .click { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .fig-oneclick.is-animated .hd-ui-container.hd-focus .click { -webkit-animation-delay: 3s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 3s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 3s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 3s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .slider-steps-dots { width: 90%; margin: 2em auto 0; text-align: center; }
#hd .slider-steps-dots .owl-dot { width: 100%; cursor: pointer; overflow: hidden; position: relative; }
#hd .slider-steps-dots .owl-dot:after { content: ""; position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; }
#hd .slider-steps-dots .owl-dot.complete .custom-dot .custom-dot-name { opacity: 1; }
#hd .slider-steps-dots .owl-dot.complete .custom-dot .custom-dot-progress-line { background: #fff; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#hd .slider-steps-dots .owl-dot.active .custom-dot .custom-dot-name { opacity: 1; }
#hd .slider-steps-dots .owl-dot .custom-dot { text-align: center; padding: 0 3px; }
#hd .slider-steps-dots .owl-dot .custom-dot .custom-dot-name { font-weight: 400; line-height: 1.2; padding-bottom: 14px; opacity: .6; }
#hd .slider-steps-dots .owl-dot .custom-dot .custom-dot-progress { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; position: relative; overflow: hidden; }
#hd .slider-steps-dots .owl-dot .custom-dot .custom-dot-progress-line { width: 100%; height: 2px; border-radius: 2px; overflow: hidden; will-change: transform; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); background-color: #4DD0FF; background-image: -moz-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); }
#hd .sec-usage { padding-bottom: 3em !important; }
#hd .sec-usage figure { position: relative; }
#hd .sec-usage .filter-tab { width: 70%; max-width: 38.25em; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 2; }
#hd .sec-usage .filter-tab > li { width: 100%; font-size: 2em; font-weight: bold; line-height: 1; letter-spacing: .018em; text-align: center; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); padding: .5em 1em .3em; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); cursor: pointer; }
#hd .sec-usage .filter-tab > li.hd-active { background-color: #4DD0FF; background-image: -moz-linear-gradient(90deg, #4DD0FF, #00B6EC 10%, #236BF6 40%, #A201FF); background-image: -webkit-linear-gradient(90deg, #4DD0FF, #00B6EC 10%, #236BF6 40%, #A201FF); background-image: linear-gradient(90deg, #4DD0FF, #00B6EC 10%, #236BF6 40%, #A201FF); cursor: default; }
#hd .sec-usage .filter-content > li { display: none; }
#hd .sec-usage .filter-content > li.hd-active { display: block; }
#hd .sec-usage .filter-content > li:last-child .hd-content { padding-left: 4%; padding-bottom: 8%; }
#hd .sec-usage .hd-container { width: 90%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-usage .hd-content { font-size: 2.125em; }
#hd .sec-usage .hd-content h2 { font-size: 2em; margin: .5em 0 0; }
#hd .sec-usage .hd-content h2 .text-larger { display: inline-block; font-size: 2.5em; }
#hd .sec-usage .hd-content p { font-size: 1em; line-height: 1.25; margin-bottom: 1em; }
#hd .sec-advance { padding: 2em 0; }
#hd .sec-advance figure { max-width: 1088px; margin: 0 auto; position: relative; }
#hd .sec-advance figure img { width: 100%; position: absolute; top: 0; left: 0; -moz-transition: opacity 0.4s 0.25s ease, margin 0.8s 0.4s ease, filter 0.4s 0s ease; -o-transition: opacity 0.4s 0.25s ease, margin 0.8s 0.4s ease, filter 0.4s 0s ease; -webkit-transition: opacity 0.4s 0.25s ease, margin 0.8s 0.4s ease, filter 0.4s 0s ease; transition: opacity 0.4s 0.25s ease, margin 0.8s 0.4s ease, filter 0.4s 0s ease; }
#hd .sec-advance figure img.hd-base { position: relative; }
#hd .sec-advance figure img.hd-focus { opacity: 0; }
#hd .sec-advance figure.is-animated img.hd-ui { filter: brightness(50%); }
#hd .sec-advance figure.is-animated img.hd-focus { opacity: 1; margin-top: -2%; }
#hd .sec-more .item { display: block; padding: .5em 2.5em; }
#hd .sec-more .item:hover figure { box-shadow: 0 3px 0.5em rgba(118, 212, 254, 0.5); }
#hd .sec-more .item:hover figure img { -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 .sec-more .item figure { box-shadow: 0 0 0.5em rgba(118, 212, 254, 0.5); position: relative; overflow: hidden; -moz-transition: box-shadow 0.25s ease; -o-transition: box-shadow 0.25s ease; -webkit-transition: box-shadow 0.25s ease; transition: box-shadow 0.25s ease; }
#hd .sec-more .item figure img { width: 100%; -moz-transition: transform 0.8s ease; -o-transition: transform 0.8s ease; -webkit-transition: transform 0.8s ease; transition: transform 0.8s ease; }
#hd .sec-more .item .hd-content { padding: 1.5em 0; }
#hd .sec-table { padding: 2em 0 8em; }
#hd .sec-table h2 { margin-bottom: .5em; }
#hd .sec-table .filter-tab { justify-content: center; margin-bottom: 3em; }
#hd .sec-table .filter-tab > li { font-size: 1.75em; font-weight: bold; padding: .5em; opacity: .6; position: relative; cursor: pointer; -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-table .filter-tab > li:after { content: ''; display: block; width: 2.25em; height: 2px; background: #ffffff; position: absolute; bottom: .45em; left: 0; right: 0; margin: 0 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-table .filter-tab > li:hover { opacity: .75; }
#hd .sec-table .filter-tab > li.hd-active { opacity: 1; cursor: default; pointer-events: none; }
#hd .sec-table .filter-tab > li.hd-active:after { background-color: #4DD0FF; background-image: -moz-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); }
#hd .sec-table .filter-content { font-size: 1.125em; }
#hd .sec-table .filter-content > li { display: none; }
#hd .sec-table .filter-content > li.hd-active { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.6s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.6s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.6s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.6s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-table table { width: 100%; border: none; border-collapse: collapse; }
#hd .sec-table table tr:last-child th, #hd .sec-table table tr:last-child td { border-bottom: none; }
#hd .sec-table table tr:hover td:nth-child(-n+2) { background: rgba(255, 255, 255, 0.1); }
#hd .sec-table table th, #hd .sec-table table td { font-weight: 400; line-height: 1.5; padding: .5em 1em; border-bottom: 2px solid rgba(114, 114, 114, 0.5); }
#hd .sec-table table th { font-size: 1.125em; }
#hd .sec-table table thead { background-color: #4DD0FF; background-image: -moz-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-color: transparent; background-size: 100% 2px; background-position: 0 bottom; background-repeat: no-repeat; }
#hd .sec-table table thead th, #hd .sec-table table thead td { background: none; border-bottom: none; }
#hd .sec-table table thead th:nth-child(1) { width: 10em; }
#hd .sec-table table tbody { position: relative; }
#hd .sec-table table tbody:after { content: ''; display: block; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; background-color: #4DD0FF; background-image: -moz-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: -webkit-linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-image: linear-gradient(90deg, #4DD0FF, #00B6EC 25%, #236BF6 60%, #A201FF); background-color: transparent; background-size: 100% 2px; background-position: 0 bottom; background-repeat: no-repeat; }
#hd .sec-table table tbody th { vertical-align: top; }
#hd .sec-table table tbody td { vertical-align: middle; }
#hd .sec-table a { color: white; }
#hd .sec-table a:hover { text-decoration: underline; }

@media screen and (min-width: 2000px) { #hd .sec-advance figure { max-width: 1400px; } }
@media screen and (max-width: 1440px) { #hd .sec-more .item { padding: .5em 1.5em; } }
@media screen and (max-width: 1280px) { #hd .sec-kv img { width: 130%; max-width: none !important; margin-left: -15%; }
  #hd .sec-feature .feature-container { margin: 4em 0 6em; }
  #hd .sec-feature .feature-container li { padding: 0 1em; }
  #hd .sec-feature .feature-container small { padding: 0; }
  #hd .sec-usage .filter-tab li { font-size: 1.75em; }
  #hd .sec-usage .hd-content { font-size: 1.65em; }
  #hd .sec-usage .hd-content h2 { font-size: 1.875em; }
  #hd .sec-table .filter-tab li { font-size: 1.75em; } }
@media screen and (max-width: 1024px) { #hd .sec-feature, #hd .sec-vid, #hd .sec-usage, #hd .sec-more { padding: 6em 0; }
  #hd .sec-feature .feature-container { margin: 4em 0 6em; }
  #hd .sec-feature .feature-container li { padding: 0 1em; }
  #hd .sec-feature .feature-container small { padding: 0; }
  #hd .sec-usage .filter-content li:first-child img { width: 120%; max-width: none !important; margin-left: -5%; margin-right: -15%; }
  #hd .sec-usage .filter-content li:last-child img { width: 120%; max-width: none !important; margin-left: -15%; margin-right: -5%; }
  #hd .sec-usage .filter-content li:last-child .hd-content { padding-left: 0; }
  #hd .sec-usage .hd-content { font-size: 1.5em; }
  #hd .sec-more .hd-container { width: 90%; }
  #hd .sec-more .item { padding: .5em .75em; } }
@media screen and (max-width: 800px) { #hd { margin-top: 40px; } }
@media screen and (max-width: 768px) { #hd .sec-kv img { width: 170%; max-width: none !important; margin-left: -35%; }
  #hd .sec-kv p { font-size: 1em; max-width: 38em; margin: 0 auto; }
  #hd .sec-feature, #hd .sec-vid, #hd .sec-usage, #hd .sec-more { padding: 5em 0; }
  #hd .sec-feature { position: relative; }
  #hd .sec-feature:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 130%; background-color: #010021; background-image: -moz-linear-gradient(0deg, #010021, transparent); background-image: -webkit-linear-gradient(0deg, #010021, transparent); background-image: linear-gradient(0deg, #010021, transparent); background-color: transparent; position: absolute; bottom: 0; left: 0; }
  #hd .sec-feature .feature-container { margin: 3em 0 4em; }
  #hd .sec-feature .feature-container li { width: 100%; max-width: 400px; padding: 0; margin: 0 auto 2em; }
  #hd .sec-feature .feature-container img { margin-bottom: .5em; }
  #hd .sec-vid .hd-container { width: 100%; }
  #hd .sec-vid .num-container p { font-size: 1.125em; }
  #hd .sec-vid .num-container h2 { margin: .45em 0 .125em; line-height: 1; }
  #hd .sec-vid .num-container h2 .text-larger { font-size: 1.5em; }
  #hd .sec-instruction .filter-tab { width: 90%; max-width: none; }
  #hd .sec-instruction .filter-tab li { padding-left: .5em; padding-right: .5em; }
  #hd .sec-steps .item { position: relative; overflow: hidden; }
  #hd .sec-steps figure { width: 120%; margin-left: -10%; margin-bottom: 8em; }
  #hd .sec-steps figure .hd-note { padding-left: 20%; padding-right: 20%; }
  #hd .sec-steps .fig-step-4 { margin-left: 0; }
  #hd .sec-steps .fig-step-4 .hd-note { margin-left: -10%; }
  #hd .sec-steps .fig-oneclick { margin-bottom: 0; }
  #hd .slider-steps-dots { width: 100%; margin-top: .5em; }
  #hd .hd-key-container { width: 100%; top: 100%; bottom: auto; left: 0; right: 0; margin: 1em auto; }
  #hd .hd-key-container .hd-key { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; font-weight: bold; letter-spacing: 0; min-width: 2.65em; border: 2px solid white; border-radius: 5px; padding: .65em .45em .35em .5em; margin: .25em auto; }
  #hd .hd-key-container p { font-size: 1em; line-height: 1.25; }
  #hd .sec-usage .hd-container { position: relative; width: 100%; }
  #hd .sec-usage .hd-container:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 10%; position: absolute; bottom: 100%; left: 0; background-color: #010021; background-image: -moz-linear-gradient(0deg, #010021, transparent); background-image: -webkit-linear-gradient(0deg, #010021, transparent); background-image: linear-gradient(0deg, #010021, transparent); background-color: transparent; }
  #hd .sec-usage .hd-content { width: 100%; }
  #hd .sec-usage .filter-content li:first-child img { width: 150%; margin-left: -5%; margin-right: -40%; }
  #hd .sec-usage .filter-content li:last-child img { width: 150%; margin-left: -47%; margin-right: -3%; }
  #hd .sec-table .filter-tab { margin-bottom: 1em; }
  #hd .sec-table table thead th:nth-child(1) { width: 8em; } }
@media screen and (max-width: 620px) { #hd .sec-kv .hd-container { padding: 4em 0 2em; position: relative; }
  #hd .sec-kv p { padding: 0; }
  #hd .sec-feature, #hd .sec-vid, #hd .sec-usage, #hd .sec-more { padding: 4em 0; }
  #hd .sec-feature .feature-container { margin: 2em 0 3em; }
  #hd .sec-feature .feature-container li { max-width: 300px; }
  #hd .sec-feature .feature-container img { max-width: 160px !important; }
  #hd .sec-vid .num-container h2 { font-size: 1.5em; }
  #hd .sec-vid .num-container h2 .text-larger { font-size: 1.75em; }
  #hd .sec-instruction .filter-tab { width: 100%; }
  #hd .sec-instruction .filter-tab li { font-size: 1.5em; }
  #hd .slider-steps-dots .owl-dot .custom-dot .custom-dot-name { font-size: .75em; padding-bottom: .5em; }
  #hd .sec-more .item { padding: .5em 1.5em; } }
@media screen and (max-width: 480px) { #hd .sec-feature { background: none; padding-bottom: 0; }
  #hd .sec-feature:before { display: none; }
  #hd .sec-feature .feature-container { padding: 2em 0; margin: 0; background: url(../img/ai-overclocking/bg-feature.jpg) center top no-repeat; background-size: cover; position: relative; }
  #hd .sec-feature .feature-container:before { content: ''; display: block; width: 100%; height: 100%; background-color: black; background-image: -moz-linear-gradient(0deg, black, #010021 5%, rgba(0, 0, 0, 0.25) 50%, transparent); background-image: -webkit-linear-gradient(0deg, black, #010021 5%, rgba(0, 0, 0, 0.25) 50%, transparent); background-image: linear-gradient(0deg, black, #010021 5%, rgba(0, 0, 0, 0.25) 50%, transparent); background-color: transparent; position: absolute; bottom: 0; left: 0; }
  #hd .sec-vid .num-container { padding: 2em 0; margin: 0; background: url(../img/ai-overclocking/bg-feature.jpg) center top no-repeat; background-size: cover; position: relative; }
  #hd .sec-vid .num-container:before { content: ''; display: block; width: 100%; height: 100%; background-color: black; background-image: -moz-linear-gradient(0deg, black, #010021 5%, rgba(0, 0, 0, 0.25) 50%, transparent); background-image: -webkit-linear-gradient(0deg, black, #010021 5%, rgba(0, 0, 0, 0.25) 50%, transparent); background-image: linear-gradient(0deg, black, #010021 5%, rgba(0, 0, 0, 0.25) 50%, transparent); background-color: transparent; position: absolute; bottom: 0; left: 0; }
  #hd .sec-vid .num-container { position: relative; }
  #hd .sec-vid .num-container:before { background-color: #010021; background-image: -moz-linear-gradient(0deg, #010021, rgba(1, 0, 33, 0.25) 50%); background-image: -webkit-linear-gradient(0deg, #010021, rgba(1, 0, 33, 0.25) 50%); background-image: linear-gradient(0deg, #010021, rgba(1, 0, 33, 0.25) 50%); background-color: transparent; }
  #hd .sec-vid .num-container li { width: 100%; margin-bottom: 2em; }
  #hd .sec-vid .num-container p { font-size: 1.25em; }
  #hd .sec-vid .num-container h2 { font-size: 2.5em; }
  #hd .sec-instruction .filter-tab { width: 100%; }
  #hd .sec-steps figure { width: 140%; margin-left: -20%; }
  #hd .sec-steps .fig-step-4 { margin-left: 0; }
  #hd .sec-usage .filter-tab { width: 100%; max-width: none; position: relative; }
  #hd .sec-usage .filter-tab li { background: rgba(255, 255, 255, 0.4); backdrop-filter: none; -webkit-backdrop-filter: none; }
  #hd .sec-table .filter-tab li { font-size: 1.5em; }
  #hd .sec-table .filter-content { font-size: 1em; }
  #hd .sec-table table thead th:nth-child(1) { width: 6em; }
  #hd .sec-table table th, #hd .sec-table table td { padding: .5em; } }

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