/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* OUTER */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");
#special-sectionOverview { margin-bottom: 100px; }

.width-line-gray { background: none; }

/* ---------- RESET ---------- */
#hd { font-family: "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", 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: #FFA800; }
#hd * ::-moz-selection { background: #1d2124; color: #FFA800; }
#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 colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-moz-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-ms-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-o-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
.hd-colorrun { -webkit-animation-delay: 0s; -webkit-animation-duration: 4s; -webkit-animation-name: colorrun; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 4s; -moz-animation-name: colorrun; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 4s; -o-animation-name: colorrun; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 4s; animation-name: colorrun; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; }

@-webkit-keyframes triggerable { 0% { border-width: 3px; -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: 3px; -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: 3px; -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: 3px; -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: 3px; -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 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); } }
/* ---------- 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 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 smart { 0% , 28% { background-color: red; }
  30%, 58% { background-color: yellow; }
  60%, 88% { background-color: #42ca42; }
  90%, 98% { background-color: yellow; }
  100% { background-color: red; } }
@-moz-keyframes smart { 0% , 28% { background-color: red; }
  30%, 58% { background-color: yellow; }
  60%, 88% { background-color: #42ca42; }
  90%, 98% { background-color: yellow; }
  100% { background-color: red; } }
@-ms-keyframes smart { 0% , 28% { background-color: red; }
  30%, 58% { background-color: yellow; }
  60%, 88% { background-color: #42ca42; }
  90%, 98% { background-color: yellow; }
  100% { background-color: red; } }
@-o-keyframes smart { 0% , 28% { background-color: red; }
  30%, 58% { background-color: yellow; }
  60%, 88% { background-color: #42ca42; }
  90%, 98% { background-color: yellow; }
  100% { background-color: red; } }
@keyframes smart { 0% , 28% { background-color: red; }
  30%, 58% { background-color: yellow; }
  60%, 88% { background-color: #42ca42; }
  90%, 98% { background-color: yellow; }
  100% { background-color: red; } }
@-webkit-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); }
  100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } }
@-moz-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); }
  100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } }
@-ms-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); }
  100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } }
@-o-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); }
  100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } }
@keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); }
  100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } }
@font-face { font-family: 'MachineBT'; src: url("../fonts/MachineBT.woff"), url("../fonts/MachineBT.ttf"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'DINCondensed'; src: url("../fonts/D-DINCondensed-Bold.woff"), url("../fonts/D-DINCondensed-Bold.ttf"); font-weight: bold; font-style: bold; }
@font-face { font-family: 'MyriadPro'; src: url("../fonts/MyriadPro-Light.woff"), url("../fonts/MyriadPro-Light.ttf"); font-weight: normal; font-style: normal; }
#hd { font-size: 16px; }
#hd h2 { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 7em; letter-spacing: 0; line-height: 1; color: #ffffff !important; margin-bottom: 0; word-break: normal; word-wrap: normal; }
#hd h3 { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 3em; letter-spacing: .06em; line-height: 1.25; color: #FFA800; margin-bottom: .5em; text-transform: uppercase; }
#hd h4 { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 1.75em; font-weight: bold; letter-spacing: .26em; line-height: 1.25; margin-bottom: .5em; color: #FFA800; text-transform: uppercase; opacity: .6; }
#hd h5 { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 1.5em; font-weight: 400; line-height: 1.5; color: #ffffff; text-transform: uppercase; }
#hd h6 { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 1em; font-weight: 400; line-height: 1.5; color: #ffffff; }
#hd p, #hd small, #hd a, #hd li { font-family: "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; }
#hd p { font-size: 1.25em; line-height: 1.6; 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-tuf { font-family: "MachineBT", "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; }
#hd .color-primary { color: #FFA800; }
#hd .color-grey { color: #727272; }

/*ie11 above fixed*/
@media screen and (max-width: 1440px) { #hd p { font-size: 1.125em; } }
@media screen and (max-width: 1024px) { #hd { font-size: 14px; }
  #hd h3 { font-size: 2em; }
  #hd h4 { font-size: 1.25em; margin-bottom: 1em; }
  #hd p { font-size: 1em; line-height: 1.66; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w1000, #hd .hd-w1200 { width: 80%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w1000 { max-width: 1000px; }
#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 (max-width: 1023px) { #hd .hd-w1000, #hd .hd-w1200 { width: 90%; } }
@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; }
  #hd .hd-d-1023-block { display: block; }
  #hd .hd-d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; }
  #hd .hd-d-768-block { display: block; } }
@media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none; }
  #hd .hd-d-620-block { display: block; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none; }
  #hd .hd-d-480-block { display: block; } }
#hd .hd-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: 48px; }
#hd .hd-nav.right { right: 48px; }
#hd .hd-nav ul { margin: 0; padding: 0; }
#hd .hd-nav ul li { display: block; margin: 12px 0; position: relative; }
#hd .hd-nav ul li a { display: block; z-index: 1; cursor: pointer; text-decoration: none; }
#hd .hd-nav ul li a span { display: block; height: 3.8vh; width: 8px; border: 1px solid #FFA800; opacity: .5; z-index: 1; -moz-transform: skew(0deg, 320deg); -o-transform: skew(0deg, 320deg); -ms-transform: skew(0deg, 320deg); -webkit-transform: skew(0deg, 320deg); transform: skew(0deg, 320deg); -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, #hd .hd-nav ul li a.active span { background: #FFA800; 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: #FFA800; overflow: hidden; display: block; margin: auto 0; opacity: 0; position: absolute; top: 0; bottom: 0; }
#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 #FFA800; 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: #FFA800; -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: #FFA800; }
#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 .sec-shroud .hd-content, #hd .sec-back .hd-content { max-width: 770px; margin: 0 auto 1em; }

#hd .hd-shroud-pd, #hd .hd-back-pd { max-width: 910px; height: auto !important; position: relative; margin: 0 auto !important; -moz-transition: opacity 1s 0.25s ease; -o-transition: opacity 1s 0.25s ease; -webkit-transition: opacity 1s 0.25s ease; transition: opacity 1s 0.25s ease; }

.hd-frame, #hd .hd-back-pd .hd-tag, #hd .sec-front .hd-frame, #hd .sec-front .hd-tag { padding: 1.25em 1em; margin: 0 0 0 2.5em; 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; }
.hd-frame:before, #hd .hd-back-pd .hd-tag:before, #hd .sec-front .hd-frame:before, #hd .sec-front .hd-tag:before, .hd-frame:after, #hd .hd-back-pd .hd-tag:after, #hd .sec-front .hd-frame:after, #hd .sec-front .hd-tag:after { content: ''; display: block; width: 1px; height: calc(100% - .75em + 3px); position: absolute; z-index: 2; }
.hd-frame:before, #hd .hd-back-pd .hd-tag:before, #hd .sec-front .hd-frame:before, #hd .sec-front .hd-tag:before { top: 0; left: 0; background: #FFA800; }
.hd-frame:after, #hd .hd-back-pd .hd-tag:after, #hd .sec-front .hd-frame:after, #hd .sec-front .hd-tag:after { bottom: 0; right: 0; background: #FFA800; }
.hd-frame > span, #hd .hd-back-pd .hd-tag > span, #hd .sec-front .hd-frame > span, #hd .sec-front .hd-tag > span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; }
.hd-frame > span:before, #hd .hd-back-pd .hd-tag > span:before, #hd .sec-front .hd-frame > span:before, #hd .sec-front .hd-tag > span:before, .hd-frame > span:after, #hd .hd-back-pd .hd-tag > span:after, #hd .sec-front .hd-frame > span:after, #hd .sec-front .hd-tag > span:after { content: ''; display: block; width: calc(100% - 2px); height: calc(.75em + 1px); border: 1px solid; border-image: linear-gradient(to right, #FFA800, #FFA800) 1 100%; border-image-slice: 1; -moz-transform: skew(45deg, 0deg); -o-transform: skew(45deg, 0deg); -ms-transform: skew(45deg, 0deg); -webkit-transform: skew(45deg, 0deg); transform: skew(45deg, 0deg); position: absolute; }
.hd-frame > span:before, #hd .hd-back-pd .hd-tag > span:before, #hd .sec-front .hd-frame > span:before, #hd .sec-front .hd-tag > span:before { top: 0; right: 1px; border-left-width: 0; border-bottom-width: 0; border-right: 2px solid #FFA800; }
.hd-frame > span:after, #hd .hd-back-pd .hd-tag > span:after, #hd .sec-front .hd-frame > span:after, #hd .sec-front .hd-tag > span:after { bottom: 0; left: 1px; border-right-width: 0; border-top-width: 0; border-left: 2px solid #FFA800; }

#hd section, #hd .sec-intro { min-height: 100vh; padding: 3em 0; }

#hd .hd-col40, #hd .hd-col50, #hd .hd-col75 { padding: 0 15px; }
#hd .hd-scroller { height: 600vh !important; position: relative; }
#hd .hd-scroller.hd-active .sec-reveal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
#hd .hd-scroller.hd-active .sec-reveal:first-child { opacity: 1 !important; visibility: visible !important; }
#hd .hd-scroller.hd-active .sec-reveal:nth-child(n+1) { opacity: 0; visibility: hidden; }
#hd .hd-scroller.hd-active .main-kv figure { width: 100%; position: fixed; top: 0; left: 0; }
#hd .main-kv { width: 100%; padding-top: 1px; padding-bottom: 0; position: relative; z-index: 2; }
#hd .main-kv figure.hd-active { background-color: #fd46a6; background-image: -moz-linear-gradient(90deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6); background-image: -webkit-linear-gradient(90deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6); background-image: linear-gradient(90deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6); -webkit-animation-delay: 0s; -webkit-animation-duration: 13s; -webkit-animation-name: rainbow; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 13s; -moz-animation-name: rainbow; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 13s; -o-animation-name: rainbow; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 13s; animation-name: rainbow; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; background-size: 320%; }
#hd .main-kv figure img { width: 100%; }
#hd .hd-title-container { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin: auto 0; position: absolute; top: 8%; bottom: 0; left: 57%; z-index: 2; }
#hd .hd-title-container h2 { width: 100%; font-size: 4.45vw; letter-spacing: .05em; }
#hd .hd-title-container p { width: 100%; font-size: 2.25vw; letter-spacing: .1em; }
#hd .hd-title-container .font-fjalla { font-family: "Fjalla One", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: .5em; font-weight: bold; }
#hd .hd-title-container.hd-d-none { display: none; }
#hd .hd-title-container.hd-d-none h2, #hd .hd-title-container.hd-d-none p { opacity: 0; }
#hd .sec-intro { padding: 0 !important; z-index: 2; }
#hd .sec-intro .bg-cover { width: 100%; height: 100%; position: relative; z-index: 2; background-color: rgba(0, 0, 0, 0); background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.8) 80%, #111111); background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.8) 80%, #111111); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.8) 80%, #111111); background-color: transparent !important; }
#hd .sec-intro .hd-content { align-content: center; }
#hd .bg-black { background: black; position: relative; z-index: 2; }
#hd .sec-bg { background: black; position: relative; z-index: 2; }
#hd .sec-bg .hd-bg { background: black center center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd .sec-axial-tech .hd-bg { background-image: url(../img/bg_axial-tech.jpg); }
#hd .sec-axial-tech .hd-video { margin-top: .5em; }
#hd .sec-new-directions .hd-bg { background-image: url(../img/bg_new-directions.jpg); z-index: 2; mix-blend-mode: screen; }
#hd .sec-new-directions .hd-content { max-width: 780px; margin: 0 auto; }
#hd .sec-new-directions .hd-video { margin: 30px auto 0; }
#hd .sec-maxcontact .hd-bg { background-image: url(../img/bg_maxcontact.jpg); }
#hd .sec-maxcontact figure { width: 56%; position: absolute; top: 10%; right: 0; bottom: 0; margin: auto 0; }
#hd .sec-slot-design .hd-bg { background-image: url(../img/bg_slot-design.jpg); }
#hd .sec-slot-design figure { width: 100%; max-width: 1920px; margin: 0 auto; position: relative; z-index: 2; }
#hd .sec-slot-design figure img { width: 100%; }
#hd .sec-slot-design figure .hd-arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 21% 70%; -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }
#hd .sec-slot-design figure .hd-arrow.hd-active { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .sec-slot-design figure .hd-note { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 1vw; letter-spacing: .1em; text-transform: uppercase; transform-origin: 0 0; -moz-transform: rotate(83deg); -o-transform: rotate(83deg); -ms-transform: rotate(83deg); -webkit-transform: rotate(83deg); transform: rotate(83deg); position: absolute; left: 24.9%; top: 138%; 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 .sec-slot-design figure .hd-note:after { content: ''; display: block; width: 20vw; height: 1px; background-color: #FFA800; background-image: -moz-linear-gradient(90deg, #FFA800, #FFA800); background-image: -webkit-linear-gradient(90deg, #FFA800, #FFA800); background-image: linear-gradient(90deg, #FFA800, #FFA800); position: absolute; bottom: 0; right: 0; -moz-transform: translate(20px, 20px); -o-transform: translate(20px, 20px); -ms-transform: translate(20px, 20px); -webkit-transform: translate(20px, 20px); transform: translate(20px, 20px); -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }
#hd .sec-slot-design figure .hd-note.hd-active { opacity: 1; }
#hd .sec-slot-design figure .hd-note.hd-active:after { -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 .sec-slot-design .hd-content { padding-left: 21%; margin: 0 auto; }
#hd .sec-slot-design .hd-vram { position: relative; max-width: 373px; margin-top: 1.5em; padding-right: 0; }
#hd .sec-slot-design .hd-vram img { width: 100%; }
#hd .sec-slot-design .hd-vram h5 { font-size: 1.25em; line-height: 1; letter-spacing: .08em; margin: .75em; position: absolute; bottom: 0; right: 0; }
#hd .sec-pcb { position: relative; overflow: hidden; padding-left: 15px; padding-right: 15px; }
#hd .sec-pcb .owl-stage-outer { overflow: visible; }
#hd .sec-pcb .owl-item { opacity: .3; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd .sec-pcb .owl-item figure { 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 .sec-pcb .owl-item .hd-content { margin-left: 10%; }
#hd .sec-pcb .owl-item.center { opacity: 1; }
#hd .sec-pcb .owl-item.center figure { opacity: 1; }
#hd .sec-pcb .owl-item.center .hd-content { margin: 0; }
#hd .sec-pcb .owl-item.center + .owl-item { opacity: .3; pointer-events: none; }
#hd .sec-pcb .owl-item.center + .owl-item figure { opacity: 0; }
#hd .sec-pcb .owl-item.center + .owl-item .hd-content { margin: 0; }
#hd .sec-pcb .owl-nav { width: 100%; height: 2em; position: absolute; top: 0; bottom: 0; margin: auto 0; pointer-events: none; }
#hd .sec-pcb .owl-nav .owl-prev, #hd .sec-pcb .owl-nav .owl-next { width: 2em; height: 2em; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; pointer-events: all; opacity: 0.8; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd .sec-pcb .owl-nav .owl-prev.disabled, #hd .sec-pcb .owl-nav .owl-next.disabled { opacity: 0; pointer-events: none; }
#hd .sec-pcb .owl-nav .owl-prev:hover, #hd .sec-pcb .owl-nav .owl-next:hover { opacity: 1; }
#hd .sec-pcb .owl-nav .owl-prev { right: 100%; border-left: 3px solid #FFA800; border-bottom: 3px solid #FFA800; }
#hd .sec-pcb .owl-nav .owl-next { left: 100%; border-top: 3px solid #FFA800; border-right: 3px solid #FFA800; }
#hd .sec-pcb .owl-dots { width: 90vw; max-width: 1200px; margin: 2em auto 0; position: relative; z-index: 2; }
#hd .sec-pcb .owl-dots .owl-dot { display: inline-block; width: 60px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.3); margin: 0 10px; }
#hd .sec-pcb .owl-dots .owl-dot:first-child { margin-left: 0; }
#hd .sec-pcb .owl-dots .owl-dot.active { background-color: #FFA800; background-image: -moz-linear-gradient(90deg, #FFA800, #FFA800); background-image: -webkit-linear-gradient(90deg, #FFA800, #FFA800); background-image: linear-gradient(90deg, #FFA800, #FFA800); }
#hd .sec-pcb .hd-item { width: 100%; }
#hd .sec-pcb figure { width: 70%; margin-left: 10%; margin-top: -5%; margin-bottom: -25%; position: relative; }
#hd .sec-pcb figure .hd-trigger-hover { background: pink; opacity: 0; position: absolute; z-index: 2; }
#hd .sec-pcb figure .hd-trigger-hover.hd-component { width: 44%; height: 79%; top: 10%; left: 25%; -moz-transform: rotate(153deg) skew(10deg, 7deg); -o-transform: rotate(153deg) skew(10deg, 7deg); -ms-transform: rotate(153deg) skew(10deg, 7deg); -webkit-transform: rotate(153deg) skew(10deg, 7deg); transform: rotate(153deg) skew(10deg, 7deg); }
#hd .sec-pcb figure .hd-trigger-hover:hover + .hd-hover { opacity: 1 !important; }
#hd .sec-pcb figure .hd-hover { width: 100%; position: absolute; top: 0; left: 0; opacity: 0 !important; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; pointer-events: none; }
#hd .sec-pcb .hd-content { width: 72%; max-width: 860px; position: relative; z-index: 2; }
#hd .hd-sticky-container .hd-bg { background-image: url(../img/bg_shroud-and-back.jpg); background-attachment: fixed; }
#hd .hd-sticky-container .hd-sticky { position: relative; z-index: 2; }
#hd .hd-sticky-container .trigger-sticky { position: relative; margin: 0 auto !important; width: 100%; height: auto !important; }
#hd .hd-sticky-container .trigger-sticky figure:last-child { width: 100%; position: absolute; top: 0; left: 0; right: 0; }
#hd .sec-shroud { min-height: 0; padding: 5em 0 0; }
#hd .hd-shroud-pd .hd-colorrun { position: absolute; top: 0; left: 0; width: 100%; visibility: inherit !important; }
#hd .sec-back { min-height: 0; padding: 5em 0; }
#hd .sec-back .hd-content { max-width: 980px; margin: -1em auto 0; }
#hd .hd-back-pd { margin-top: -20%; z-index: 2; }
#hd .hd-back-pd .hd-glow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#hd .hd-back-pd .hd-glow-container li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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 .hd-back-pd .hd-glow-container li.hd-active { opacity: 1; }
#hd .hd-back-pd .hd-glow-container li.hd-active img { visibility: visible !important; }
#hd .hd-back-pd .hd-tag-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#hd .hd-back-pd .hd-tag-container li { position: absolute; }
#hd .hd-back-pd .hd-tag-container li:nth-child(1) { top: 65%; left: 6%; }
#hd .hd-back-pd .hd-tag-container li:nth-child(2) { top: 89.8%; left: 58.1%; }
#hd .hd-back-pd .hd-tag-container li:nth-child(3) { top: 42%; left: 82%; }
#hd .hd-back-pd .hd-tag-container li:nth-child(3) .hd-tag { width: 10em; position: absolute; top: 0; right: 0; }
#hd .hd-back-pd .hd-tag-container li .hd-tag { opacity: 0; pointer-events: none; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd .hd-back-pd .hd-tag-container li.hd-active .hd-tag { opacity: 1; }
#hd .hd-back-pd .hd-trigger-tag { cursor: pointer; position: absolute; left: 0; top: 0; }
#hd .hd-back-pd .hd-trigger-tag:before, #hd .hd-back-pd .hd-trigger-tag:after { content: ''; display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #FFA800; 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; }
#hd .hd-back-pd .hd-trigger-tag:before { -webkit-animation-delay: -1s; -webkit-animation-duration: 2s; -webkit-animation-name: triggerable; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -1s; -moz-animation-duration: 2s; -moz-animation-name: triggerable; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -1s; -o-animation-duration: 2s; -o-animation-name: triggerable; -o-animation-timing-function: ease-out; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -1s; animation-duration: 2s; animation-name: triggerable; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .hd-back-pd .hd-trigger-tag:after { -webkit-animation-delay: -2s; -webkit-animation-duration: 2s; -webkit-animation-name: triggerable; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -2s; -moz-animation-duration: 2s; -moz-animation-name: triggerable; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -2s; -o-animation-duration: 2s; -o-animation-name: triggerable; -o-animation-timing-function: ease-out; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -2s; animation-duration: 2s; animation-name: triggerable; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .hd-back-pd .hd-tag { padding: .5em 0; background: none; z-index: 2; }
#hd .hd-back-pd .hd-tag span:before, #hd .hd-back-pd .hd-tag span:after { background: rgba(0, 0, 0, 0.85); }
#hd .hd-back-pd .hd-tag p { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 1.25em; font-weight: 400; padding: 0 1em; position: relative; }
#hd .hd-back-pd .hd-tag p:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.85); z-index: -1; }
#hd .sec-front .hd-content p { font-size: 1em; }
#hd .sec-front .hd-frame, #hd .sec-front .hd-tag { padding: .5em 1em; margin-top: 4em; margin-left: 0; }
#hd .sec-front .hd-back-pd .hd-tag > div, #hd .sec-front .hd-frame > div, #hd .sec-front .hd-tag > div { padding: .5em 0; }
#hd .sec-front .hd-colorpicker-container { min-width: 120px; border-right: 1px solid rgba(255, 255, 255, 0.25); margin-right: .5em; }
#hd .sec-front .hd-colorpicker-container + div { max-width: calc(100% - 120px - .5em); }
#hd .sec-front .hd-colorpicker { width: 110px; margin: 1.25em auto 0; }
#hd .sec-front .hd-controls { padding: 0 .5em; position: relative; z-index: 2; }
#hd .sec-front .hd-controls li { width: 25%; padding: .5em; cursor: pointer; }
#hd .sec-front .hd-controls li:hover .hd-icon, #hd .sec-front .hd-controls li.hd-active .hd-icon { background-position: 0 0; }
#hd .sec-front .hd-controls .hd-icon { width: 100%; max-width: 50px; height: 0; padding-bottom: 100%; margin: 0 auto; background-size: 200%; background-repeat: no-repeat; background-position: 100% 0; }
#hd .sec-front .hd-controls .hd-icon.hd-icon-static { background-image: url(../img/aura/static.png); }
#hd .sec-front .hd-controls .hd-icon.hd-icon-breathing { background-image: url(../img/aura/breathing.png); }
#hd .sec-front .hd-controls .hd-icon.hd-icon-strobing { background-image: url(../img/aura/strobing.png); }
#hd .sec-front .hd-controls .hd-icon.hd-icon-cycle { background-image: url(../img/aura/cycle.png); }
#hd .sec-front .hd-controls .hd-icon.hd-icon-smart { background-image: url(../img/aura/smart.png); }
#hd .sec-front .hd-controls .hd-icon.hd-icon-starry { background-image: url(../img/aura/starry.png); }
#hd .sec-front .hd-controls .hd-icon.hd-icon-rainbow { background-image: url(../img/aura/rainbow.png); }
#hd .sec-front .hd-controls .hd-icon.hd-icon-dark { background-image: url(../img/aura/dark.png); }
#hd .sec-front .hd-controls-name { padding: 0 0 0 1em; }
#hd .sec-front .hd-controls-name li { display: none; }
#hd .sec-front .hd-controls-name li.hd-active { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.4s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-front .hd-controls-name p { font-size: 14px; }
#hd .sec-front .hd-img-container { width: 100%; margin: 0 auto; }
#hd .sec-front .hd-img-container figure { width: 100%; height: 0; padding-bottom: 35.8242%; position: relative; overflow: hidden; }
#hd .sec-front .hd-pd, #hd .sec-front .hd-color, #hd .sec-front .hd-greybg { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#hd .sec-front .hd-color, #hd .sec-front .hd-greybg { width: 98%; height: 98%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: -1; }
#hd .sec-front .hd-greybg { background-color: #353535; z-index: -2; }
#hd .sec-front .hd-tag-container li { position: absolute; top: 26%; }
#hd .sec-front .hd-tag-container li:nth-child(1) { left: 7%; }
#hd .sec-front .hd-tag-container li:nth-child(1) .hd-tag { right: auto; left: 100%; margin-left: 1.25em; margin-bottom: .5em; }
#hd .sec-front .hd-tag-container li:nth-child(2) { left: 54%; }
#hd .sec-front .hd-tag-container li:nth-child(2) .hd-tag { margin-right: -.5em; margin-bottom: -.125em; }
#hd .sec-front .hd-tag-container li:nth-child(3) { left: 93%; }
#hd .sec-front .hd-tag-container li:nth-child(3) .hd-tag { margin-right: -.5em; margin-bottom: -.125em; }
#hd .sec-front .hd-tag { width: 13em; position: absolute; bottom: 0%; right: 100%; padding: .5em 0; margin-top: 0; background: none; z-index: 2; opacity: 0; }
#hd .sec-front .hd-tag span:before, #hd .sec-front .hd-tag span:after { background: rgba(0, 0, 0, 0.85); }
#hd .sec-front .hd-tag p { font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; font-size: 1.25em; font-weight: 400; padding: 0 1em; position: relative; }
#hd .sec-front .hd-tag p:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.85); z-index: -1; }
#hd .sec-front .hd-trigger-tag { cursor: pointer; z-index: 3; }
#hd .sec-front .hd-trigger-tag:before, #hd .sec-front .hd-trigger-tag:after { content: ''; display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #FFA800; 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; }
#hd .sec-front .hd-trigger-tag:before { -webkit-animation-delay: -1s; -webkit-animation-duration: 2s; -webkit-animation-name: triggerable; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -1s; -moz-animation-duration: 2s; -moz-animation-name: triggerable; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -1s; -o-animation-duration: 2s; -o-animation-name: triggerable; -o-animation-timing-function: ease-out; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -1s; animation-duration: 2s; animation-name: triggerable; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-front .hd-trigger-tag:after { -webkit-animation-delay: -2s; -webkit-animation-duration: 2s; -webkit-animation-name: triggerable; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -2s; -moz-animation-duration: 2s; -moz-animation-name: triggerable; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -2s; -o-animation-duration: 2s; -o-animation-name: triggerable; -o-animation-timing-function: ease-out; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -2s; animation-duration: 2s; animation-name: triggerable; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-front .hd-trigger-tag:hover ~ .hd-tag { opacity: 1; }
#hd .sec-front .hd-pd-hover { opacity: 0; -moz-transition: opacity 0.8s ease; -o-transition: opacity 0.8s ease; -webkit-transition: opacity 0.8s ease; transition: opacity 0.8s ease; }
#hd .sec-front .hd-pd-hover.hd-active { opacity: 1; }
#hd .sec-front .hd-rainbow { background-color: #fd46a6; background-image: -moz-linear-gradient(25deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6); background-image: -webkit-linear-gradient(25deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6); background-image: linear-gradient(25deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6); background-size: 280% 100%; }
#hd .sec-front .hd-dark { opacity: 0; }
#hd .sec-front .hd-starryNight .starry_night { display: block; }
#hd .sec-front .starry_night { display: none; }
#hd .sec-front .starry_night li { width: 10%; height: 0; padding-bottom: 10%; background-color: #FFF; background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); position: absolute; top: 18%; -webkit-animation-delay: 0s; -webkit-animation-duration: 3s; -webkit-animation-name: breathing; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 3s; -moz-animation-name: breathing; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 3s; -o-animation-name: breathing; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 3s; animation-name: breathing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-front .starry_night li:nth-child(1) { left: 75%; }
#hd .sec-front .starry_night li:nth-child(2) { left: 71%; top: 30%; -webkit-animation-delay: -1s; -webkit-animation-duration: 3s; -webkit-animation-name: breathing; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -1s; -moz-animation-duration: 3s; -moz-animation-name: breathing; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -1s; -o-animation-duration: 3s; -o-animation-name: breathing; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -1s; animation-duration: 3s; animation-name: breathing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-front .starry_night li:nth-child(3) { left: 85%; top: 30%; -webkit-animation-delay: -2s; -webkit-animation-duration: 3s; -webkit-animation-name: breathing; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -2s; -moz-animation-duration: 3s; -moz-animation-name: breathing; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -2s; -o-animation-duration: 3s; -o-animation-name: breathing; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -2s; animation-duration: 3s; animation-name: breathing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .smart-control h5 { font-size: 1.25em; white-space: nowrap; }
#hd .hd-smartcolor { text-align: left; }
#hd .hd-smartcolor ul { margin: 1em 0; }
#hd .hd-smartcolor li { padding: .25em 0; }
#hd .hd-smartcolor li > span { display: inline-block; vertical-align: top; width: 10px; height: 10px; border-radius: 5px; margin-top: 5px; margin-right: 5px; }
#hd .hd-smartcolor li > p { display: inline-block; vertical-align: top; max-width: calc(100% - 24px); font-size: 14px; white-space: nowrap; }
#hd .hd-smartcolor li:first-child > span { background: green; }
#hd .hd-smartcolor li:last-child > span { background: yellow; }
#hd .noUi-horizontal { width: 90%; border: none; border-radius: 0; box-shadow: none; }
#hd .noUi-horizontal .noUi-connects { border-radius: 0; }
#hd .noUi-horizontal .noUi-connect:nth-child(1) { background: green; }
#hd .noUi-horizontal .noUi-connect:nth-child(2) { background: yellow; }
#hd .noUi-horizontal .noUi-connect:nth-child(3) { background: red; }
#hd .noUi-horizontal .noUi-handle { width: 5px; height: 18px; right: -2px; top: 0; border: none; border-radius: 0; box-shadow: none; outline: #727272 auto 1px; }
#hd .noUi-horizontal .noUi-handle:before, #hd .noUi-horizontal .noUi-handle:after { display: none; }
#hd .noUi-horizontal .noUi-handle:focus { outline-color: #FFA800; }
#hd .noUi-horizontal .noUi-tooltip { bottom: auto; top: 100%; padding: 0; margin: 0; background: none; border: none; border-radius: 0; color: white; }
#hd .noUi-horizontal .noUi-tooltip:before { content: ''; display: block; width: 1px; height: 8px; background: white; margin: 2px auto 0; }
#hd .noUi-horizontal .noUi-marker-large { width: 1px; height: 8px; margin: 2px 0; }
#hd .sec-software .hd-bg { background-image: url(../img/bg_software.jpg); }
#hd .sec-software figure { margin-top: 1.5em; }
#hd .sec-software ul { margin: 3.5em 0 0; }
#hd .sec-software ul li { padding: 0 1em; }
#hd .sec-software ul img { width: 70%; max-width: 200px !important; margin-bottom: 1.25em; }
#hd .sec-software ul p { font-size: 16px; margin-bottom: 1em; }
#hd .sec-software ul a { font-size: 16px; font-weight: bold; }
#hd .sec-software ul a:after { content: ''; display: inline-block; vertical-align: middle; width: 1.5em; height: 1.5em; background: url(../img/ic_arrow@2x.png) center center no-repeat; background-size: contain; margin-top: -.25em; }
#hd .sec-nvidia { min-height: 0; padding-right: 50px; padding-bottom: 6em; }
#hd .sec-nvidia .hd-bg { background-image: url(../img/bg_software.jpg); }
#hd .sec-nvidia .owl-item { height: 0; }
#hd .sec-nvidia .owl-item.active { height: auto; }
#hd .sec-nvidia .hd-item figure { max-width: 300px; margin: 0 auto; }
#hd .sec-nvidia .hd-item .hd-content { padding-left: 2.5em; }
#hd .sec-nvidia .hd-item .hd-content h3 { font-size: 1.75em; }
#hd .sec-nvidia .hd-item .hd-content p { font-size: 16px; }
#hd .sec-nvidia .owl-nav { width: 100%; height: 3.75em; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 2; pointer-events: none; }
#hd .sec-nvidia .owl-nav .owl-prev, #hd .sec-nvidia .owl-nav .owl-next { pointer-events: all; width: 3.75em; height: 3.75em; background: url(../img/arrow.svg); position: absolute; top: 0; }
#hd .sec-nvidia .owl-nav .owl-prev { -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); right: calc(100% + 1.5em); }
#hd .sec-nvidia .owl-nav .owl-next { left: calc(100% + 1.5em); }
#hd .sec-nvidia .owl-dots { width: 100%; position: absolute; top: 100%; left: 0; right: 0; margin: 2em auto 0; text-align: center; }
#hd .sec-nvidia .owl-dots .owl-dot { display: inline-block; vertical-align: top; width: 1em; height: 1em; border-radius: 50%; margin: 5px; background: #4b4b4b; }
#hd .sec-nvidia .owl-dots .owl-dot.active { background: #FFA800; }
#hd .hd-footnotes { font-size: 14px; padding: 100px 5%; position: relative; }
#hd .hd-footnotes li { margin-bottom: .5em; list-style-position: outside; }
#hd .hd-footnotes ol { padding-left: 10px; }
#hd .hd-footnotes ol li { list-style-type: decimal; }
#hd .hd-footnotes ul { padding-left: 10px; }
#hd .hd-footnotes ul li { list-style-type: disc; }

_:-ms-fullscreen, :root #hd .sec-new-directions .hd-bg { z-index: 0; }

@media screen and (min-width: 1921px) { #hd .sec-slot-design figure .hd-note { font-size: 1.125em; top: 123%; }
  #hd .sec-slot-design figure .hd-note:after { width: 360px; } }
@media screen and (max-width: 1440px) { #hd .sec-slot-design figure .hd-note { font-size: 1vw; left: 24.7%; top: 125%; }
  #hd .sec-slot-design .hd-content { padding-left: 24%; }
  #hd .sec-shroud { padding: 3em 0 0; }
  #hd .sec-back { padding: 3em 0 3em; padding-top: 35%; margin-top: calc(-35% + 3em); } }
@media screen and (max-width: 1280px) { #hd .sec-front .hd-controls .hd-icon { width: 50px; height: 50px; padding-bottom: 0; } }
@media screen and (max-width: 1024px) { #hd .main-kv figure { position: relative; overflow: hidden; }
  #hd .main-kv figure img { max-width: none !important; width: 120%; margin-left: -8%; }
  #hd .hd-title-container { top: 10%; left: 65%; }
  #hd .sec-slot-design figure .hd-note { font-size: 1.25vw; top: 111%; } }
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { #hd .main-kv figure img { width: 150%; }
  #hd .hd-title-container { width: 100%; top: 40vw; right: 0; bottom: 0; left: 0; margin-bottom: 5em; }
  #hd .sec-intro .hd-w1200 { width: 50%; min-width: 200px; margin-top: 50%; } }
@media screen and (max-width: 1023px) { #hd .hd-col40, #hd .hd-col50, #hd .hd-col75 { padding: 0 10px; }
  #hd .main-kv figure img { width: 150%; }
  #hd .hd-title-container { width: 100%; top: 0; right: 0; bottom: 0; left: 0; align-content: flex-end; margin-bottom: 5em; }
  #hd .sec-axial-tech .hd-container { flex-direction: column; }
  #hd .sec-axial-tech .hd-video { width: 65%; margin: 0 auto; }
  #hd .sec-axial-tech .hd-content { width: 100%; padding-top: 2em; }
  #hd .sec-slot-design { display: flex; flex-wrap: wrap; align-content: center; }
  #hd .sec-pcb { padding-left: 10px; padding-right: 10px; }
  #hd .sec-pcb .owl-nav .owl-prev { right: auto; left: 0; }
  #hd .sec-pcb .owl-nav .owl-next { left: auto; right: 0; }
  #hd .hd-sticky-container .hd-bg { background-image: url(../img/mobile/bg_shroud-and-back.jpg); background-size: contain; background-attachment: initial; }
  #hd .sec-front .hd-container { flex-direction: column-reverse; }
  #hd .sec-front .hd-container > .hd-col50 { width: 100%; }
  #hd .sec-front .hd-frame, #hd .sec-front .hd-tag { max-width: 500px; margin: 0 auto 2em; }
  #hd .sec-front .hd-colorpicker-container { border-right: none; text-align: left; }
  #hd .sec-front .hd-colorpicker-container + div { text-align: left; }
  #hd .sec-front .hd-controls li { padding-left: 0; }
  #hd .sec-front .hd-controls .hd-icon { margin-left: 0; }
  #hd .sec-front .hd-controls-name { text-align: left; }
  #hd .sec-nvidia { padding-left: 4em; padding-right: calc(4em + 50px); } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { #hd .hd-title-container { top: 77vw; align-content: flex-start; }
  #hd .sec-intro .hd-w1200 { width: 80%; min-width: 200px; margin-top: 30%; } }
@media screen and (max-width: 768px) { #hd .hd-title-container h2 { font-size: 6em; }
  #hd .hd-title-container p { font-size: 2.875em; padding-right: .2em; }
  #hd .sec-intro .hd-content { min-height: 0; padding: 3em 0; margin-top: 35%; justify-content: center; text-align: center; }
  #hd .sec-maxcontact { display: flex; flex-direction: column-reverse; justify-content: center; }
  #hd .sec-maxcontact .hd-content { width: 100%; }
  #hd .sec-maxcontact figure { width: 100%; top: auto; margin: 0 0 1em auto; position: relative; overflow: hidden; }
  #hd .sec-maxcontact figure img { width: 600px; max-width: none !important; margin: -5% auto; }
  #hd .sec-slot-design .hd-bg { display: none; }
  #hd .sec-slot-design figure { margin-bottom: -10%; position: relative; overflow: hidden; }
  #hd .sec-slot-design figure img, #hd .sec-slot-design figure .hd-arrow { max-width: none !important; width: 190%; margin-left: -55%; }
  #hd .sec-slot-design .hd-content { width: 100%; align-items: flex-end; padding-left: 15px; position: relative; z-index: 2; }
  #hd .sec-slot-design .hd-content .hd-note { display: inline-block; font-family: "DINCondensed", "MyriadPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", "Helvetica", sans-serif; text-transform: uppercase; margin-bottom: 10%; padding-left: 12%; }
  #hd .sec-pcb .owl-item.cloned { display: none !important; }
  #hd .sec-pcb .owl-stage { transform: none !important; transition: none !important; width: auto !important; }
  #hd .sec-pcb .owl-item { width: auto !important; opacity: 1 !important; }
  #hd .sec-pcb figure { width: 100%; margin-left: 0; margin-bottom: -20%; opacity: 1 !important; }
  #hd .sec-pcb .hd-content { width: 100%; }
  #hd .sec-software { background: url(../img/bg_software.jpg) center top no-repeat; background-size: contain; }
  #hd .sec-software .hd-container { flex-direction: column-reverse; margin-bottom: 2em; position: relative; overflow: hidden; }
  #hd .sec-software .hd-container .hd-content { width: 100%; }
  #hd .sec-software .hd-container figure { width: 110%; padding: 0; margin: 0 -1em; }
  #hd .sec-software ul { flex-direction: column; max-width: 600px; margin: 0 auto; }
  #hd .sec-software ul li { width: 100%; margin: 2em 0; }
  #hd .sec-nvidia { padding-left: 0; padding-right: 0; }
  #hd .sec-nvidia .slider-nvidia { margin-bottom: 7em; }
  #hd .sec-nvidia .owl-nav { top: 100%; bottom: auto; margin: 1em 0 0; }
  #hd .sec-nvidia .owl-nav .owl-prev { right: auto; left: 0; }
  #hd .sec-nvidia .owl-nav .owl-next { left: auto; right: 0; } }
@media screen and (max-width: 767px) { #hd section, #hd .sec-intro { min-height: 0; } }
@media screen and (max-width: 620px) { #hd .hd-scroller { height: auto !important; }
  #hd .hd-scroller .main-kv { padding-top: 100%; position: relative; }
  #hd .hd-scroller .main-kv figure { position: absolute; top: 57px; }
  #hd .hd-scroller .sec-reveal:nth-child(n+1) { opacity: 1; visibility: visible; }
  #hd .hd-scroller.hd-active .main-kv figure { position: fixed; width: 100%; top: 57px; left: 0; }
  #hd .hd-scroller.hd-active .sec-reveal { position: relative; height: auto; }
  #hd .hd-scroller.hd-active .sec-reveal:nth-child(n+1) { opacity: 1; visibility: visible; }
  #hd .hd-title-container { position: relative; margin-top: 0; margin-bottom: 3.5em; }
  #hd .hd-title-container h2 { font-size: 4.5em; }
  #hd .hd-title-container p { font-size: 2.125em; padding-right: .2em; }
  #hd .hd-title-container.hd-d-620-none { display: none; }
  #hd .hd-title-container.hd-d-620-block { display: block; }
  #hd .hd-title-container.hd-d-620-block h2, #hd .hd-title-container.hd-d-620-block p { opacity: 1; }
  #hd .sec-intro .bg-cover { background-color: rgba(0, 0, 0, 0); background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), #111111, #111111, #111111); background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), #111111, #111111, #111111); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #111111, #111111, #111111); }
  #hd .sec-intro .hd-content { margin-top: 0; }
  #hd .hd-video video { opacity: 1 !important; visibility: visible !important; }
  #hd .sec-axial-tech .hd-video { width: 100%; }
  #hd .sec-slot-design .hd-content { flex-direction: column; align-items: flex-start; padding-left: 0; }
  #hd .sec-slot-design .hd-content > div { width: 100%; }
  #hd .sec-slot-design .hd-content .hd-note { padding-left: 12%; }
  #hd .sec-slot-design .hd-content .hd-vram { padding-left: 0; margin: 1.5em 0 0; }
  #hd .sec-front { position: relative; overflow: hidden; }
  #hd .sec-front .hd-frame, #hd .sec-front .hd-tag { margin-top: -10%; }
  #hd .sec-front .hd-img-container { width: 120%; margin-left: -10%; }
  #hd .sec-front .hd-img-container figure { padding-bottom: 53.8%; }
  #hd .sec-front .hd-pd { max-width: none !important; width: 150%; height: auto; margin-left: -50%; }
  #hd .sec-front .hd-tag-container li:nth-child(1) { display: none; }
  #hd .sec-front .hd-tag-container li:nth-child(2) { left: 30.7%; }
  #hd .sec-front .hd-tag-container li:nth-child(3) { left: 89%; }
  #hd .sec-nvidia .hd-item figure, #hd .sec-nvidia .hd-item .hd-content { width: 100%; margin-bottom: 1em; }
  #hd .sec-nvidia .owl-nav { height: 3em; }
  #hd .sec-nvidia .owl-nav .owl-prev, #hd .sec-nvidia .owl-nav .owl-next { width: 3em; height: 3em; }
  #hd .sec-nvidia .owl-dots { margin-top: 1.5em; } }
@media screen and (max-width: 480px) { #hd section, #hd .sec-intro { padding: 2em 0; }
  #hd .hd-scroller { height: auto !important; position: relative; }
  #hd .hd-scroller.hd-active { height: auto !important; }
  #hd .hd-scroller .sec-reveal { height: auto; position: relative; }
  #hd .hd-scroller .sec-reveal:nth-child(n+1) { opacity: 1 !important; visibility: visible !important; }
  #hd .hd-title-container h2 { font-size: 15vw; }
  #hd .hd-title-container p { font-size: 7vw; }
  #hd .sec-new-directions .hd-container { display: flex; flex-direction: column-reverse; text-align: left; }
  #hd .sec-new-directions .hd-video { padding-top: 55%; margin-bottom: 3em; }
  #hd .sec-new-directions .hd-video video { height: 50vw; width: auto; max-width: none; transform-origin: top center; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  #hd .sec-maxcontact figure img { width: 150%; }
  #hd .sec-slot-design figure { margin-bottom: -15%; }
  #hd .sec-slot-design figure img, #hd .sec-slot-design figure .hd-arrow { width: 280%; margin-left: -87%; }
  #hd .sec-shroud, #hd .sec-back { padding: 2em 0; margin: 0; }
  #hd .sec-shroud figure, #hd .sec-back figure { opacity: 1 !important; margin: 0 -1.5em 1em !important; }
  #hd .sec-shroud .hd-content, #hd .sec-back .hd-content { text-align: left; margin-top: 0; }
  #hd .sec-front .hd-img-container { width: 150%; margin-left: -25%; }
  #hd .sec-front .hd-frame, #hd .sec-front .hd-tag { margin-left: -1em; margin-right: -1em; padding-right: 0; }
  #hd .sec-front .hd-controls .hd-icon { width: 40px; height: 40px; }
  #hd .sec-front .hd-tag-container li:nth-child(2) .hd-tag { right: auto; left: 100%; margin-top: 0; margin-bottom: 1em; }
  #hd .sec-front .hd-tag-container li:nth-child(3) { display: none; } }
@media screen and (max-width: 360px) { #hd .sec-front .hd-controls li { width: 33.3333%; } }

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