@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap");
#hd .bg-black { background: #000000; color: white; }
#hd .bg-black h2, #hd .bg-black h3 { color: white !important; }
#hd .bg-dark { background: #5e5e5e; }

/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* OUTER */
#special-sectionOverview { margin-bottom: 100px; }

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

/* ---------- RESET ---------- */
html, body { margin: 0; overflow: visible; }

#hd { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; background: #000000; color: white; margin: 0; margin-left: 0 !important; padding: 0; /* ---------- SCREEN READER ---------- */ }
#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: #fe34e7; }
#hd ::-moz-selection { background: #1d2124; color: #fe34e7; }
#hd button, #hd a { outline: none; }
#hd ul, #hd li, #hd figure, #hd p { margin: 0; padding: 0; }
#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; }
#hd img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0 auto; }
#hd .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#hd a:focus-visible, #hd button:focus-visible, #hd input:focus-visible, #hd select:focus-visible, #hd textarea:focus-visible, #hd [role="button"]:focus-visible, #hd [tabindex="0"]:focus-visible { outline: 1px solid #fe34e7; }
#hd a:focus:not(:focus-visible), #hd button:focus:not(:focus-visible), #hd input:focus:not(:focus-visible), #hd select:focus:not(:focus-visible), #hd textarea:focus:not(:focus-visible), #hd [role="button"]:focus:not(:focus-visible), #hd [tabindex="0"]:focus:not(:focus-visible) { outline: none; }

/* ---------- ANIMATIONS ------------ */
@-webkit-keyframes glitch { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  12% { left: 0; clip-path: inset(0 0 0 0); }
  18% { left: 2px; clip-path: inset(6% 0 18% 0); }
  20%,
  22% { left: 0; clip-path: inset(0 0 0 0); }
  22.5% { left: 4px; clip-path: inset(18% 0 30% 0); }
  21%,
  25% { left: 0; clip-path: inset(0 100% 0 0); }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-moz-keyframes glitch { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  12% { left: 0; clip-path: inset(0 0 0 0); }
  18% { left: 2px; clip-path: inset(6% 0 18% 0); }
  20%,
  22% { left: 0; clip-path: inset(0 0 0 0); }
  22.5% { left: 4px; clip-path: inset(18% 0 30% 0); }
  21%,
  25% { left: 0; clip-path: inset(0 100% 0 0); }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-ms-keyframes glitch { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  12% { left: 0; clip-path: inset(0 0 0 0); }
  18% { left: 2px; clip-path: inset(6% 0 18% 0); }
  20%,
  22% { left: 0; clip-path: inset(0 0 0 0); }
  22.5% { left: 4px; clip-path: inset(18% 0 30% 0); }
  21%,
  25% { left: 0; clip-path: inset(0 100% 0 0); }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-o-keyframes glitch { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  12% { left: 0; clip-path: inset(0 0 0 0); }
  18% { left: 2px; clip-path: inset(6% 0 18% 0); }
  20%,
  22% { left: 0; clip-path: inset(0 0 0 0); }
  22.5% { left: 4px; clip-path: inset(18% 0 30% 0); }
  21%,
  25% { left: 0; clip-path: inset(0 100% 0 0); }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@keyframes glitch { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  12% { left: 0; clip-path: inset(0 0 0 0); }
  18% { left: 2px; clip-path: inset(6% 0 18% 0); }
  20%,
  22% { left: 0; clip-path: inset(0 0 0 0); }
  22.5% { left: 4px; clip-path: inset(18% 0 30% 0); }
  21%,
  25% { left: 0; clip-path: inset(0 100% 0 0); }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-webkit-keyframes glitch2 { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); filter: hue-rotate(50deg); z-index: 5; }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); -moz-transform: translate(-3%, 0); -o-transform: translate(-3%, 0); -ms-transform: translate(-3%, 0); -webkit-transform: translate(-3%, 0); transform: translate(-3%, 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  25% { left: 0; clip-path: inset(0 0 0 0); -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); filter: hue-rotate(50deg) brightness(120%); }
  21%,
  25% { left: 0; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); z-index: 0; }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-moz-keyframes glitch2 { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); filter: hue-rotate(50deg); z-index: 5; }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); -moz-transform: translate(-3%, 0); -o-transform: translate(-3%, 0); -ms-transform: translate(-3%, 0); -webkit-transform: translate(-3%, 0); transform: translate(-3%, 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  25% { left: 0; clip-path: inset(0 0 0 0); -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); filter: hue-rotate(50deg) brightness(120%); }
  21%,
  25% { left: 0; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); z-index: 0; }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-ms-keyframes glitch2 { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); filter: hue-rotate(50deg); z-index: 5; }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); -moz-transform: translate(-3%, 0); -o-transform: translate(-3%, 0); -ms-transform: translate(-3%, 0); -webkit-transform: translate(-3%, 0); transform: translate(-3%, 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  25% { left: 0; clip-path: inset(0 0 0 0); -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); filter: hue-rotate(50deg) brightness(120%); }
  21%,
  25% { left: 0; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); z-index: 0; }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-o-keyframes glitch2 { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); filter: hue-rotate(50deg); z-index: 5; }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); -moz-transform: translate(-3%, 0); -o-transform: translate(-3%, 0); -ms-transform: translate(-3%, 0); -webkit-transform: translate(-3%, 0); transform: translate(-3%, 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  25% { left: 0; clip-path: inset(0 0 0 0); -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); filter: hue-rotate(50deg) brightness(120%); }
  21%,
  25% { left: 0; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); z-index: 0; }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@keyframes glitch2 { 0%,
  to { left: 0; clip-path: inset(0 0 0 0); filter: hue-rotate(50deg); z-index: 5; }
  2.5% { left: -2px; clip-path: inset(5% 0 30% 0); -moz-transform: translate(-3%, 0); -o-transform: translate(-3%, 0); -ms-transform: translate(-3%, 0); -webkit-transform: translate(-3%, 0); transform: translate(-3%, 0); }
  1%,
  5% { left: 0; clip-path: inset(0 0 0 0); }
  10% { left: 1px; clip-path: inset(38% 0 6% 0); }
  8%,
  25% { left: 0; clip-path: inset(0 0 0 0); -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); filter: hue-rotate(50deg) brightness(120%); }
  21%,
  25% { left: 0; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); z-index: 0; }
  26% { left: -1px; clip-path: inset(38% 0 38% 0); }
  27%,
  29% { left: 0; clip-path: inset(0 0 0 0); } }
@-webkit-keyframes fadeInKv { 0% { opacity: 0; -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); }
  100% { opacity: .45; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-moz-keyframes fadeInKv { 0% { opacity: 0; -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); }
  100% { opacity: .45; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-ms-keyframes fadeInKv { 0% { opacity: 0; -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); }
  100% { opacity: .45; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-o-keyframes fadeInKv { 0% { opacity: 0; -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); }
  100% { opacity: .45; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@keyframes fadeInKv { 0% { opacity: 0; -moz-transform: translate(5%, 0); -o-transform: translate(5%, 0); -ms-transform: translate(5%, 0); -webkit-transform: translate(5%, 0); transform: translate(5%, 0); }
  100% { opacity: .45; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-webkit-keyframes fadeOutKv { 0% { opacity: .45; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  100% { opacity: 0; -moz-transform: translateX(-3%); -o-transform: translateX(-3%); -ms-transform: translateX(-3%); -webkit-transform: translateX(-3%); transform: translateX(-3%); } }
@-moz-keyframes fadeOutKv { 0% { opacity: .45; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  100% { opacity: 0; -moz-transform: translateX(-3%); -o-transform: translateX(-3%); -ms-transform: translateX(-3%); -webkit-transform: translateX(-3%); transform: translateX(-3%); } }
@-ms-keyframes fadeOutKv { 0% { opacity: .45; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  100% { opacity: 0; -moz-transform: translateX(-3%); -o-transform: translateX(-3%); -ms-transform: translateX(-3%); -webkit-transform: translateX(-3%); transform: translateX(-3%); } }
@-o-keyframes fadeOutKv { 0% { opacity: .45; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  100% { opacity: 0; -moz-transform: translateX(-3%); -o-transform: translateX(-3%); -ms-transform: translateX(-3%); -webkit-transform: translateX(-3%); transform: translateX(-3%); } }
@keyframes fadeOutKv { 0% { opacity: .45; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  100% { opacity: 0; -moz-transform: translateX(-3%); -o-transform: translateX(-3%); -ms-transform: translateX(-3%); -webkit-transform: translateX(-3%); transform: translateX(-3%); } }
@-webkit-keyframes moving { 0%,
  5% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  5%,
  6% { opacity: 1; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  6%,
  10% { opacity: 0; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  10%,
  11% { opacity: 1; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  11%,
  100% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); } }
@-moz-keyframes moving { 0%,
  5% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  5%,
  6% { opacity: 1; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  6%,
  10% { opacity: 0; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  10%,
  11% { opacity: 1; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  11%,
  100% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); } }
@-ms-keyframes moving { 0%,
  5% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  5%,
  6% { opacity: 1; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  6%,
  10% { opacity: 0; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  10%,
  11% { opacity: 1; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  11%,
  100% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); } }
@-o-keyframes moving { 0%,
  5% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  5%,
  6% { opacity: 1; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  6%,
  10% { opacity: 0; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  10%,
  11% { opacity: 1; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  11%,
  100% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); } }
@keyframes moving { 0%,
  5% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  5%,
  6% { opacity: 1; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); }
  6%,
  10% { opacity: 0; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  10%,
  11% { opacity: 1; -moz-transform: translate(-5%, 0%); -o-transform: translate(-5%, 0%); -ms-transform: translate(-5%, 0%); -webkit-transform: translate(-5%, 0%); transform: translate(-5%, 0%); }
  11%,
  100% { opacity: 0; -moz-transform: translate(1%, 0%); -o-transform: translate(1%, 0%); -ms-transform: translate(1%, 0%); -webkit-transform: translate(1%, 0%); transform: translate(1%, 0%); } }
@-webkit-keyframes markIn { 0% { -moz-transform: scale(0) rotate(-60deg); -o-transform: scale(0) rotate(-60deg); -ms-transform: scale(0) rotate(-60deg); -webkit-transform: scale(0) rotate(-60deg); transform: scale(0) rotate(-60deg); opacity: 0; }
  100% { -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } }
@-moz-keyframes markIn { 0% { -moz-transform: scale(0) rotate(-60deg); -o-transform: scale(0) rotate(-60deg); -ms-transform: scale(0) rotate(-60deg); -webkit-transform: scale(0) rotate(-60deg); transform: scale(0) rotate(-60deg); opacity: 0; }
  100% { -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } }
@-ms-keyframes markIn { 0% { -moz-transform: scale(0) rotate(-60deg); -o-transform: scale(0) rotate(-60deg); -ms-transform: scale(0) rotate(-60deg); -webkit-transform: scale(0) rotate(-60deg); transform: scale(0) rotate(-60deg); opacity: 0; }
  100% { -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } }
@-o-keyframes markIn { 0% { -moz-transform: scale(0) rotate(-60deg); -o-transform: scale(0) rotate(-60deg); -ms-transform: scale(0) rotate(-60deg); -webkit-transform: scale(0) rotate(-60deg); transform: scale(0) rotate(-60deg); opacity: 0; }
  100% { -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes markIn { 0% { -moz-transform: scale(0) rotate(-60deg); -o-transform: scale(0) rotate(-60deg); -ms-transform: scale(0) rotate(-60deg); -webkit-transform: scale(0) rotate(-60deg); transform: scale(0) rotate(-60deg); opacity: 0; }
  100% { -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } }
@-webkit-keyframes dotHint { 0% { opacity: 1; -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% { opacity: 0; -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); } }
@-moz-keyframes dotHint { 0% { opacity: 1; -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% { opacity: 0; -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); } }
@-ms-keyframes dotHint { 0% { opacity: 1; -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% { opacity: 0; -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); } }
@-o-keyframes dotHint { 0% { opacity: 1; -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% { opacity: 0; -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); } }
@keyframes dotHint { 0% { opacity: 1; -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% { opacity: 0; -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); } }
@-webkit-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-moz-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-ms-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-o-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  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(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  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(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  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(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  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(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-8%); -o-transform: translateY(-8%); -ms-transform: translateY(-8%); -webkit-transform: translateY(-8%); transform: translateY(-8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-8%); -o-transform: translateY(-8%); -ms-transform: translateY(-8%); -webkit-transform: translateY(-8%); transform: translateY(-8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-8%); -o-transform: translateY(-8%); -ms-transform: translateY(-8%); -webkit-transform: translateY(-8%); transform: translateY(-8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-8%); -o-transform: translateY(-8%); -ms-transform: translateY(-8%); -webkit-transform: translateY(-8%); transform: translateY(-8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-8%); -o-transform: translateY(-8%); -ms-transform: translateY(-8%); -webkit-transform: translateY(-8%); transform: translateY(-8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(8%); -o-transform: translateX(8%); -ms-transform: translateX(8%); -webkit-transform: translateX(8%); transform: translateX(8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(8%); -o-transform: translateX(8%); -ms-transform: translateX(8%); -webkit-transform: translateX(8%); transform: translateX(8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(8%); -o-transform: translateX(8%); -ms-transform: translateX(8%); -webkit-transform: translateX(8%); transform: translateX(8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(8%); -o-transform: translateX(8%); -ms-transform: translateX(8%); -webkit-transform: translateX(8%); transform: translateX(8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(8%); -o-transform: translateX(8%); -ms-transform: translateX(8%); -webkit-transform: translateX(8%); transform: translateX(8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(-8%); -o-transform: translateX(-8%); -ms-transform: translateX(-8%); -webkit-transform: translateX(-8%); transform: translateX(-8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(-8%); -o-transform: translateX(-8%); -ms-transform: translateX(-8%); -webkit-transform: translateX(-8%); transform: translateX(-8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(-8%); -o-transform: translateX(-8%); -ms-transform: translateX(-8%); -webkit-transform: translateX(-8%); transform: translateX(-8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(-8%); -o-transform: translateX(-8%); -ms-transform: translateX(-8%); -webkit-transform: translateX(-8%); transform: translateX(-8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(-8%); -o-transform: translateX(-8%); -ms-transform: translateX(-8%); -webkit-transform: translateX(-8%); transform: translateX(-8%); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes blink { 0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@-moz-keyframes blink { 0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@-ms-keyframes blink { 0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@-o-keyframes blink { 0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes blink { 0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
/* ---------- heatsink -------------- */
@-webkit-keyframes heatsinkText { 0% { -moz-transform: translate(-20%, 0); -o-transform: translate(-20%, 0); -ms-transform: translate(-20%, 0); -webkit-transform: translate(-20%, 0); transform: translate(-20%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-moz-keyframes heatsinkText { 0% { -moz-transform: translate(-20%, 0); -o-transform: translate(-20%, 0); -ms-transform: translate(-20%, 0); -webkit-transform: translate(-20%, 0); transform: translate(-20%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-ms-keyframes heatsinkText { 0% { -moz-transform: translate(-20%, 0); -o-transform: translate(-20%, 0); -ms-transform: translate(-20%, 0); -webkit-transform: translate(-20%, 0); transform: translate(-20%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-o-keyframes heatsinkText { 0% { -moz-transform: translate(-20%, 0); -o-transform: translate(-20%, 0); -ms-transform: translate(-20%, 0); -webkit-transform: translate(-20%, 0); transform: translate(-20%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@keyframes heatsinkText { 0% { -moz-transform: translate(-20%, 0); -o-transform: translate(-20%, 0); -ms-transform: translate(-20%, 0); -webkit-transform: translate(-20%, 0); transform: translate(-20%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-webkit-keyframes heatsinkLine { 0% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-moz-keyframes heatsinkLine { 0% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-ms-keyframes heatsinkLine { 0% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-o-keyframes heatsinkLine { 0% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@keyframes heatsinkLine { 0% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); opacity: 0; }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }
@-webkit-keyframes innovationBase { 0% { opacity: 1; }
  100% { opacity: .5; } }
@-moz-keyframes innovationBase { 0% { opacity: 1; }
  100% { opacity: .5; } }
@-ms-keyframes innovationBase { 0% { opacity: 1; }
  100% { opacity: .5; } }
@-o-keyframes innovationBase { 0% { opacity: 1; }
  100% { opacity: .5; } }
@keyframes innovationBase { 0% { opacity: 1; }
  100% { opacity: .5; } }
@-webkit-keyframes cpu1 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(3%, -9%); -o-transform: translate(3%, -9%); -ms-transform: translate(3%, -9%); -webkit-transform: translate(3%, -9%); transform: translate(3%, -9%); } }
@-moz-keyframes cpu1 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(3%, -9%); -o-transform: translate(3%, -9%); -ms-transform: translate(3%, -9%); -webkit-transform: translate(3%, -9%); transform: translate(3%, -9%); } }
@-ms-keyframes cpu1 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(3%, -9%); -o-transform: translate(3%, -9%); -ms-transform: translate(3%, -9%); -webkit-transform: translate(3%, -9%); transform: translate(3%, -9%); } }
@-o-keyframes cpu1 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(3%, -9%); -o-transform: translate(3%, -9%); -ms-transform: translate(3%, -9%); -webkit-transform: translate(3%, -9%); transform: translate(3%, -9%); } }
@keyframes cpu1 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(3%, -9%); -o-transform: translate(3%, -9%); -ms-transform: translate(3%, -9%); -webkit-transform: translate(3%, -9%); transform: translate(3%, -9%); } }
@-webkit-keyframes cpu2 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(-6%, -20%); -o-transform: translate(-6%, -20%); -ms-transform: translate(-6%, -20%); -webkit-transform: translate(-6%, -20%); transform: translate(-6%, -20%); } }
@-moz-keyframes cpu2 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(-6%, -20%); -o-transform: translate(-6%, -20%); -ms-transform: translate(-6%, -20%); -webkit-transform: translate(-6%, -20%); transform: translate(-6%, -20%); } }
@-ms-keyframes cpu2 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(-6%, -20%); -o-transform: translate(-6%, -20%); -ms-transform: translate(-6%, -20%); -webkit-transform: translate(-6%, -20%); transform: translate(-6%, -20%); } }
@-o-keyframes cpu2 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(-6%, -20%); -o-transform: translate(-6%, -20%); -ms-transform: translate(-6%, -20%); -webkit-transform: translate(-6%, -20%); transform: translate(-6%, -20%); } }
@keyframes cpu2 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(-6%, -20%); -o-transform: translate(-6%, -20%); -ms-transform: translate(-6%, -20%); -webkit-transform: translate(-6%, -20%); transform: translate(-6%, -20%); } }
@-webkit-keyframes m21 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -6%); -o-transform: translate(0, -6%); -ms-transform: translate(0, -6%); -webkit-transform: translate(0, -6%); transform: translate(0, -6%); } }
@-moz-keyframes m21 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -6%); -o-transform: translate(0, -6%); -ms-transform: translate(0, -6%); -webkit-transform: translate(0, -6%); transform: translate(0, -6%); } }
@-ms-keyframes m21 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -6%); -o-transform: translate(0, -6%); -ms-transform: translate(0, -6%); -webkit-transform: translate(0, -6%); transform: translate(0, -6%); } }
@-o-keyframes m21 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -6%); -o-transform: translate(0, -6%); -ms-transform: translate(0, -6%); -webkit-transform: translate(0, -6%); transform: translate(0, -6%); } }
@keyframes m21 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -6%); -o-transform: translate(0, -6%); -ms-transform: translate(0, -6%); -webkit-transform: translate(0, -6%); transform: translate(0, -6%); } }
@-webkit-keyframes m22 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -10%); -o-transform: translate(0, -10%); -ms-transform: translate(0, -10%); -webkit-transform: translate(0, -10%); transform: translate(0, -10%); } }
@-moz-keyframes m22 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -10%); -o-transform: translate(0, -10%); -ms-transform: translate(0, -10%); -webkit-transform: translate(0, -10%); transform: translate(0, -10%); } }
@-ms-keyframes m22 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -10%); -o-transform: translate(0, -10%); -ms-transform: translate(0, -10%); -webkit-transform: translate(0, -10%); transform: translate(0, -10%); } }
@-o-keyframes m22 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -10%); -o-transform: translate(0, -10%); -ms-transform: translate(0, -10%); -webkit-transform: translate(0, -10%); transform: translate(0, -10%); } }
@keyframes m22 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -10%); -o-transform: translate(0, -10%); -ms-transform: translate(0, -10%); -webkit-transform: translate(0, -10%); transform: translate(0, -10%); } }
@-webkit-keyframes m23 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -13%); -o-transform: translate(0, -13%); -ms-transform: translate(0, -13%); -webkit-transform: translate(0, -13%); transform: translate(0, -13%); } }
@-moz-keyframes m23 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -13%); -o-transform: translate(0, -13%); -ms-transform: translate(0, -13%); -webkit-transform: translate(0, -13%); transform: translate(0, -13%); } }
@-ms-keyframes m23 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -13%); -o-transform: translate(0, -13%); -ms-transform: translate(0, -13%); -webkit-transform: translate(0, -13%); transform: translate(0, -13%); } }
@-o-keyframes m23 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -13%); -o-transform: translate(0, -13%); -ms-transform: translate(0, -13%); -webkit-transform: translate(0, -13%); transform: translate(0, -13%); } }
@keyframes m23 { 0% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -moz-transform: translate(0, -13%); -o-transform: translate(0, -13%); -ms-transform: translate(0, -13%); -webkit-transform: translate(0, -13%); transform: translate(0, -13%); } }
/* ---------- 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: .3; } }
@-moz-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: .3; } }
@-ms-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: .3; } }
@-o-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: .3; } }
@keyframes strobing { 0% { opacity: 1; }
  50% { opacity: .3; } }
@-webkit-keyframes music { 0% { opacity: 1; }
  10% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { opacity: 0.3; } }
@-moz-keyframes music { 0% { opacity: 1; }
  10% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { opacity: 0.3; } }
@-ms-keyframes music { 0% { opacity: 1; }
  10% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { opacity: 0.3; } }
@-o-keyframes music { 0% { opacity: 1; }
  10% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { opacity: 0.3; } }
@keyframes music { 0% { opacity: 1; }
  10% { opacity: 0.3; }
  40% { opacity: 1; }
  60% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { opacity: 0.3; } }
@-webkit-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-moz-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-ms-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-o-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-webkit-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-moz-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-ms-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-o-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-webkit-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@-moz-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@-ms-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@-o-keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@keyframes cpu { 0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  90% { background-color: yellow; } }
@-webkit-keyframes adaptive { 0% { background-color: white; }
  30% { background-color: #fe34e7; }
  45% { background-color: #07A9FF; }
  60% { background-color: #42ca42; }
  75% { background-color: #1044FF; }
  90% { background-color: yellow; }
  100% { background-color: white; } }
@-moz-keyframes adaptive { 0% { background-color: white; }
  30% { background-color: #fe34e7; }
  45% { background-color: #07A9FF; }
  60% { background-color: #42ca42; }
  75% { background-color: #1044FF; }
  90% { background-color: yellow; }
  100% { background-color: white; } }
@-ms-keyframes adaptive { 0% { background-color: white; }
  30% { background-color: #fe34e7; }
  45% { background-color: #07A9FF; }
  60% { background-color: #42ca42; }
  75% { background-color: #1044FF; }
  90% { background-color: yellow; }
  100% { background-color: white; } }
@-o-keyframes adaptive { 0% { background-color: white; }
  30% { background-color: #fe34e7; }
  45% { background-color: #07A9FF; }
  60% { background-color: #42ca42; }
  75% { background-color: #1044FF; }
  90% { background-color: yellow; }
  100% { background-color: white; } }
@keyframes adaptive { 0% { background-color: white; }
  30% { background-color: #fe34e7; }
  45% { background-color: #07A9FF; }
  60% { background-color: #42ca42; }
  75% { background-color: #1044FF; }
  90% { background-color: yellow; }
  100% { background-color: white; } }
@-webkit-keyframes dark { 0% { background-color: #757575; }
  100% { background-color: #757575; } }
@-moz-keyframes dark { 0% { background-color: #757575; }
  100% { background-color: #757575; } }
@-ms-keyframes dark { 0% { background-color: #757575; }
  100% { background-color: #757575; } }
@-o-keyframes dark { 0% { background-color: #757575; }
  100% { background-color: #757575; } }
@keyframes dark { 0% { background-color: #757575; }
  100% { background-color: #757575; } }
@font-face { font-family: 'ROGFonts'; src: url("../fonts/ROGFonts-Regular.otf") format("embedded-opentype"), url("../fonts/ROGFonts-Regular.ttf") format("opentype"), url("../fonts/ROGFonts-Regular.woff"), url("../fonts/ROGFonts-Regular.woff2"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TradeGothicLTPro'; src: url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype"); font-style: normal; font-display: swap; }
#hd { font-size: 16px; }
#hd h2 { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 3em; line-height: 1; color: #ffffff !important; letter-spacing: .018em; margin-bottom: .5em; text-transform: uppercase; text-align: center; word-break: normal; word-wrap: normal; }
#hd h3 { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2.5em; font-weight: normal; line-height: 1.25; color: #ffffff; margin: 0 0 .5em; text-transform: uppercase; }
#hd h3.txt-smaller { font-size: 2.2em; }
#hd h3.txt-larger { font-size: 3em; }
#hd h4 { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; font-weight: bold; line-height: 1.25; margin-bottom: .5em; color: #ffffff; text-transform: uppercase; }
#hd h5 { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; font-weight: bold; color: #ffffff; margin: 0 0 10px; }
#hd p, #hd small, #hd a, #hd li { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd p { font-size: 1em; line-height: 1.5; font-weight: 300; }
#hd p.color-grey, #hd p.color-primary { font-weight: 400; }
#hd b { font-weight: bold; }
#hd small { font-size: .875em; font-weight: 400; letter-spacing: 0.5px; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#hd .align-right { text-align: right; }
#hd .align-italic { font-style: italic; }
#hd a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; }
#hd a.txt-link:hover { color: white; }
#hd a.color-primary, #hd a.color-primary-dark { font-weight: normal; }
#hd .color-primary { color: #fe34e7; }
#hd .color-primary-dark { color: #9c27b0; }
#hd .color-black { color: black; }
#hd .color-white { color: white; }
#hd .color-grey { color: #818181; }
#hd .color-light-grey { color: #888888; }
#hd .color-link { color: #02aee5; }
#hd .hd-uppercase { text-transform: uppercase; }
#hd .hd-notransform { text-transform: none; }
#hd .hd-underline { text-decoration: underline; }
#hd .font-rog { font-family: "ROGFonts", "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }

@media screen and (min-width: 2560px) { #hd { font-size: 20px; } }
@media screen and (min-width: 3000px) { #hd { font-size: 28px; } }
@media screen and (max-width: 1440px) { #hd p { font-size: .875em; } }
@media screen and (max-width: 1366px) { #hd h2 { font-size: 2em; } }
@media screen and (max-width: 1024px) { #hd h2 { font-size: 2em; }
  #hd h3 { font-size: 1.875em; }
  #hd h3.txt-smaller { font-size: 1.5em; }
  #hd h3.txt-larger { font-size: 2.25em; } }
@media screen and (max-width: 768px) { #hd h5 { font-size: 1em; } }
@media screen and (max-width: 480px) { #hd h2 { font-size: 1.65em; }
  #hd h3 { font-size: 1.5em; }
  #hd h3.txt-smaller { font-size: 1.25em; }
  #hd h3.txt-larger { font-size: 1.75em; }
  #hd h4 { font-size: 1.1em; margin-bottom: 10px; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w800 { max-width: 800px; margin-left: auto; margin-right: auto; }
#hd .hd-mw1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
#hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400 { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1300 { max-width: 1300px; }
#hd .hd-w1400 { max-width: 1400px; }
#hd .hd-col20 { width: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col66 { width: 66.6666%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col100 { width: 100%; }
#hd .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .fleft { float: left; }
#hd .fright { float: right; }
#hd .cf:after { content: ''; display: table; clear: both; }
#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 .row-reverse { flex-direction: row-reverse; }
#hd .hd-d-none { display: none; }
#hd .hd-d-block { display: block; }
#hd .hd-d-inline-block { display: inline-block; }

@media screen and (min-width: 2560px) { #hd .hd-mw740 { max-width: 900px; }
  #hd .hd-mx900 { max-width: 1200px; }
  #hd .hd-mw1000 { max-width: 1400px; }
  #hd .hd-w1200 { max-width: 1500px; }
  #hd .hd-w1300 { max-width: 1600px; }
  #hd .hd-w1400 { max-width: 1800px; } }
@media screen and (min-width: 3000px) { #hd .hd-mw740 { max-width: 1280px; }
  #hd .hd-mx900 { max-width: 1600px; }
  #hd .hd-mw1000 { max-width: 1800px; }
  #hd .hd-w1200 { max-width: 2200px; }
  #hd .hd-w1300 { max-width: 2400px; }
  #hd .hd-w1400 { max-width: 2800px; } }
@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; }
  #hd .hd-d-1023-block { display: block; }
  #hd .hd-d-1023-flex { display: flex; }
  #hd .hd-d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; }
  #hd .hd-d-768-block { display: block; } }
@media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none; }
  #hd .hd-d-620-block { display: block; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none; }
  #hd .hd-d-480-block { display: block; } }
#hd .hd-btn { display: inline-block; font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: bold; font-size: 1rem; border-radius: 3px; background: #fe34e7; padding: .5em 1.5em; margin: 1em auto; color: white; position: relative; z-index: 2; cursor: pointer; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
#hd .hd-btn:hover { -moz-transform: translate(0, -2px); -o-transform: translate(0, -2px); -ms-transform: translate(0, -2px); -webkit-transform: translate(0, -2px); transform: translate(0, -2px); }
#hd .hd-btn:active { -moz-transform: translate(0, -1px); -o-transform: translate(0, -1px); -ms-transform: translate(0, -1px); -webkit-transform: translate(0, -1px); transform: translate(0, -1px); }
#hd .hd-btn.hd-btn-skew { background: none; border-radius: 0; }
#hd .hd-btn.hd-btn-skew:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fe34e7; z-index: -1; -moz-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); }
#hd .hd-btn.hd-btn-frame { border-radius: 0; border: 1px solid #fe34e7; color: #fe34e7; background: transparent; -moz-transition: color 0.25s ease; -o-transition: color 0.25s ease; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; }
#hd .hd-btn.hd-btn-frame:hover { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); color: white; }

@media screen and (max-width: 1023px) { #hd .hd-btn { margin: 1em auto; } }
#hd .hd-icon-plus { display: inline-block; vertical-align: top; width: 1.25em; height: 1.25em; border-radius: 1em; border: 1px solid #fe34e7; margin: .125em .5em -.125em 0; position: relative; }
#hd .hd-icon-plus:before, #hd .hd-icon-plus:after { content: ''; display: block; width: .65em; height: 1px; background: #fe34e7; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-icon-plus:after { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
#hd .hd-active > .hd-icon-plus:after { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }

#hd { /* ---------- SCREEN READER ---------- */ }
#hd .hd-sec-hidden { min-height: 40vw; display: none; }
#hd .hd-sec-hidden.hd-active { display: flex; flex-direction: column; justify-content: center; -webkit-animation-delay: 0; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0; -moz-animation-duration: 0.8s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0; -o-animation-duration: 0.8s; -o-animation-name: fadeInUp; -o-animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 0.8s; animation-name: fadeInUp; animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .hd-cp { cursor: pointer; }
#hd .border-dark { border: 20px solid #5e5e5e; }
#hd .hd-trigger-dot { width: 1.5em; height: 1.5em; border-radius: 1.5em; cursor: pointer; position: absolute; z-index: 2; }
#hd .hd-trigger-dot:before, #hd .hd-trigger-dot:after { content: ''; display: block; width: 70%; height: 70%; border-radius: 4em; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-trigger-dot:before { background: rgba(255, 255, 255, 0.5); -webkit-animation-delay: 0s; -webkit-animation-duration: 1s; -webkit-animation-name: dotHint; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 1s; -moz-animation-name: dotHint; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 1s; -o-animation-name: dotHint; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1s; animation-name: dotHint; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .hd-trigger-dot:after { background: #fe34e7; }
#hd .hd-trigger-dot:hover:after, #hd .hd-trigger-dot.hd-active:after { background: white; }
#hd .hd-dots { display: flex; flex-wrap: nowrap; text-align: left; padding: 0 3.75em; margin: 1em 0; }
#hd .hd-dots .hd-dot { width: 4.25em; height: .75em; border: 1px solid rgba(255, 255, 255, 0.75); background: transparent; margin: .25em .5em; position: relative; cursor: pointer; }
#hd .hd-dots .hd-dot:before { content: ''; display: block; width: 100%; height: 100%; background: white; position: absolute; top: 0; left: 0; transform-origin: left; -moz-transform: scale(0, 1); -o-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
#hd .hd-dots .hd-dot.hd-active:before { -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-transition: transform 0.8s ease-in-out; -o-transition: transform 0.8s ease-in-out; -webkit-transition: transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out; }
#hd .trigger-close { width: 3.5em; height: 3.5em; position: absolute; top: 0; right: 0; pointer-events: all; cursor: pointer; }
#hd .trigger-close:before, #hd .trigger-close:after { content: ''; display: block; width: 2.5em; height: 1px; background: white; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
#hd .trigger-close:before { -moz-transform: translate(0, 0) rotate(-45deg); -o-transform: translate(0, 0) rotate(-45deg); -ms-transform: translate(0, 0) rotate(-45deg); -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); }
#hd .trigger-close:after { -moz-transform: translate(0, 0) rotate(45deg); -o-transform: translate(0, 0) rotate(45deg); -ms-transform: translate(0, 0) rotate(45deg); -webkit-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); }
#hd .trigger-close:hover:before, #hd .trigger-close:hover:after { background: #fe34e7; }
#hd .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media screen and (max-width: 1024px) { #hd .border-dark { border-width: 12px; }
  #hd .hd-trigger-dot { width: 3em; height: 3em; margin-left: -1.5em; margin-top: -1.5em; }
  #hd .hd-trigger-dot:after { width: 30%; height: 30%; }
  #hd .hd-dots { padding: 0 2.75em; }
  #hd .hd-dots .hd-dot { width: 3em; margin: .25em; }
  #hd .trigger-close { width: 2.5em; height: 2.5em; }
  #hd .trigger-close:before, #hd .trigger-close:after { width: 1.5em; } }
@media screen and (max-width: 620px) { #hd .border-dark { border-width: 8px; } }
@media screen and (max-width: 480px) { #hd .hd-dots { padding: 0 1.5em; margin: 0; } }
#hd .fp-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 .fp-nav.left { left: 30px; }
#hd .fp-nav.right { right: 30px; }
#hd .fp-nav ul { margin: 0; padding: 0; }
#hd .fp-nav ul li { display: block; margin: 18px 0; position: relative; }
#hd .fp-nav ul li span { background: #888888; }
#hd .fp-nav ul li a { display: block; z-index: 1; cursor: pointer; text-decoration: none; }
#hd .fp-nav ul li a span { display: block; width: 6px; height: 6px; border-radius: 6px; z-index: 1; -moz-transition: transform 0.1s ease-in-out; -o-transition: transform 0.1s ease-in-out; -webkit-transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out; }
#hd .fp-nav ul li a span:before { content: ''; display: block; width: 1.25em; height: 1.25em; background: url(../img/mark.svg) center no-repeat; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%) rotateZ(-60deg) scale(0, 0); -o-transform: translate(-50%, -50%) rotateZ(-60deg) scale(0, 0); -ms-transform: translate(-50%, -50%) rotateZ(-60deg) scale(0, 0); -webkit-transform: translate(-50%, -50%) rotateZ(-60deg) scale(0, 0); transform: translate(-50%, -50%) rotateZ(-60deg) 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 .fp-nav ul li a:hover span { -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); background: white; }
#hd .fp-nav ul li a.active span { background: none; }
#hd .fp-nav ul li a.active span:before { -moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(1, 1); -o-transform: translate(-50%, -50%) rotateZ(0deg) scale(1, 1); -ms-transform: translate(-50%, -50%) rotateZ(0deg) scale(1, 1); -webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(1, 1); transform: translate(-50%, -50%) rotateZ(0deg) scale(1, 1); }
#hd .fp-nav ul li a.active:hover span { -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 .fp-nav ul li .fp-tooltip { height: 1.5em; font-size: 14px; white-space: nowrap; text-transform: uppercase; max-width: 220px; overflow: hidden; display: block; margin: auto 0; opacity: 0; position: absolute; top: 4px; bottom: 0; pointer-events: none; color: white; }
#hd .fp-nav ul li .fp-tooltip.right { right: 20px; }
#hd .fp-nav ul li .fp-tooltip .left { left: 20px; }
#hd .fp-nav ul li:hover .fp-tooltip { -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; width: auto; opacity: 1; }
#hd .fp-nav.fp-show-active a.active + .fp-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; }
#hd .scroll-up { position: fixed; right: 30px; bottom: 30px; width: 45px; height: 45px; text-align: center; cursor: pointer; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 2px solid #fe34e7; 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; z-index: 9999; pointer-events: none; }
#hd .scroll-up.hd-show { opacity: 1; pointer-events: all; }
#hd .scroll-up svg { display: block; position: absolute; margin: auto; top: 0; right: 0; bottom: 5px; left: 0; fill: #fe34e7; -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: #fe34e7; }
#hd .scroll-up:hover svg { fill: black; }

@media screen and (max-width: 1024px) { #hd .fp-nav.left { left: 20px; }
  #hd .fp-nav.right { right: 20px; } }
@media screen and (max-width: 768px) { #hd .fp-nav { display: none; }
  #hd .fp-nav ul li .fp-tooltip { display: none; } }
@media screen and (max-width: 480px) { #hd .scroll-up { bottom: 15px; right: 15px; } }
#hd .hd-section { overflow: hidden; }
#hd .sec-title { display: flex; flex-direction: column; justify-content: center; min-height: 17.5vw; background-image: linear-gradient(90deg, #fe9537, #ed7d8b, #e172ea); background: url(../img/nav/bg.jpg) center top no-repeat; background-size: cover; padding: 3em 0 2em; margin-bottom: -1px; text-align: center; position: relative; z-index: 10; }
#hd .sec-title .hd-container { padding: 50px 0 30px; }
#hd .sec-title:before, #hd .sec-title:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#hd .sec-title:before { background: url(../img/nav/slash.png) right center no-repeat; background-size: cover; }
#hd .sec-title:after { background: url(../img/nav/pattern-rog.png) left center no-repeat; background-size: cover; }
#hd .sec-title .deco-left { width: 4%; height: 100%; position: absolute; left: 2%; top: 0; }
#hd .sec-title .deco-left img { position: absolute; top: 0; bottom: 0; margin: auto -50% auto 50%; }
#hd .sec-title .deco-left:before, #hd .sec-title .deco-left:after { content: ''; display: block; width: 1.5em; height: 1.5em; background: url(../img/nav/plus.svg) center no-repeat; background-size: contain; position: absolute; left: 0; }
#hd .sec-title .deco-left:before { top: 15%; }
#hd .sec-title .deco-left:after { bottom: 15%; }
#hd .sec-title .pin-spacer { inset: auto !important; }
#hd .title-tab { position: relative; position: sticky; top: 0; z-index: 10; transform: none !important; }
#hd .title-tab.hd-active { top: 100px !important; background-color: #fe9537; background-image: -moz-linear-gradient(90deg, #fe9537, #ed7d8b, #e172ea); background-image: -webkit-linear-gradient(90deg, #fe9537, #ed7d8b, #e172ea); background-image: linear-gradient(90deg, #fe9537, #ed7d8b, #e172ea); }
#hd .title-tab ul { display: flex; justify-content: space-around; vertical-align: middle; align-items: stretch; max-width: 1200px; padding: 10px; margin: 0 auto; text-align: center; }
#hd .title-tab ul li { padding: 10px 10px 5px; width: 30%; font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.4em; line-height: 1; color: white; cursor: pointer; position: relative; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#hd .title-tab ul li:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../img/nav/title-tab-active.svg) center no-repeat; opacity: 0; -moz-transform: scale(0.5, 1); -o-transform: scale(0.5, 1); -ms-transform: scale(0.5, 1); -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); -moz-transition: opacity 0.25s ease, transform 0.4s ease; -o-transition: opacity 0.25s ease, transform 0.4s ease; -webkit-transition: opacity 0.25s ease, transform 0.4s ease; transition: opacity 0.25s ease, transform 0.4s ease; }
#hd .title-tab ul li:hover { color: white; }
#hd .title-tab ul li.hd-active { color: white; }
#hd .title-tab ul li.hd-active:before { opacity: .25; -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 .section-content { background: url(../img/bg.jpg) 0 0 no-repeat; background-size: 100% auto; position: relative; }
#hd .section-content:before { content: ''; display: block; width: 7%; height: 0; padding-bottom: 7%; background: url(../img/mark-rog.svg) 0 0 no-repeat; opacity: .15; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); position: absolute; top: 2em; left: 2em; z-index: 2; }
#hd .sub-tab, #hd .list { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; padding: 110px 10px 1.5em; position: relative; z-index: 2; }
#hd .sub-tab li, #hd .list li { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; line-height: 1; text-transform: uppercase; padding: 0 .5em; margin: 0 1em; color: #888888; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; cursor: pointer; }
#hd .sub-tab li span, #hd .list li span { display: inline-block; border-bottom: 1px solid #888888; padding: .3em 0 0; position: relative; }
#hd .sub-tab li span:before, #hd .list li span:before { content: ''; display: block; width: 100%; height: 100%; background: url(../img/active.png) left center no-repeat; background-size: auto 100%; position: absolute; top: 0; left: -1.5em; z-index: -1; opacity: 0; -moz-transform: translate(2em, 0); -o-transform: translate(2em, 0); -ms-transform: translate(2em, 0); -webkit-transform: translate(2em, 0); transform: translate(2em, 0); -moz-transition: transform 0.4s ease-in-out, opacity 0.25s ease; -o-transition: transform 0.4s ease-in-out, opacity 0.25s ease; -webkit-transition: transform 0.4s ease-in-out, opacity 0.25s ease; transition: transform 0.4s ease-in-out, opacity 0.25s ease; }
#hd .sub-tab li:hover, #hd .list li:hover { color: white; }
#hd .sub-tab li:hover span, #hd .list li:hover span { border-color: white; }
#hd .sub-tab li.hd-active, #hd .list li.hd-active { color: white; }
#hd .sub-tab li.hd-active span, #hd .list li.hd-active span { border-color: transparent; }
#hd .sub-tab li.hd-active span:before, #hd .list li.hd-active span:before { opacity: 1; -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 .tab-content > div { display: none; }
#hd .tab-content > div.hd-active { display: block; -webkit-animation-delay: 0; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0; -moz-animation-duration: 0.8s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0; -o-animation-duration: 0.8s; -o-animation-name: fadeInUp; -o-animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 0.8s; animation-name: fadeInUp; animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .list.style-block { padding-left: 0; padding-right: 0; }
#hd .list.style-block li { border: 1px solid white; padding: .125em 1em; margin: 0 1em 0 0; }
#hd .list.style-block li span { border-bottom: none; }
#hd .list.style-block li span:before { display: none; }

@media screen and (max-width: 1440px) { #hd .sec-title { min-height: 15vw; padding: 2em 0 1em; }
  #hd .sec-title .deco-left { width: 3%; }
  #hd .sec-title .deco-left:before, #hd .sec-title .deco-left:after { width: 1em; height: 1em; }
  #hd .sec-title .deco-left img { margin: auto 20% auto -20%; }
  #hd .title-tab ul li { font-size: 1.4em; } }
@media screen and (max-width: 1280px) { #hd .title-tab ul li { font-size: 1em; }
  #hd .sub-tab, #hd .list { padding: 10px; margin-bottom: 10px; padding-top: 50px; }
  #hd .sub-tab li, #hd .list li { margin: 0 20px 0 10px; font-size: 1.1em; }
  #hd .sub-tab li:not(:last-child):after, #hd .list li:not(:last-child):after { width: 10px; right: -20px; } }
@media screen and (max-width: 1024px) { #hd #sticky-wrapper .title-tab { margin-top: -12px; }
  #hd .title-tab.hd-active { background-size: 120%; top: 50px !important; } }
@media screen and (max-width: 768px) { #hd .sec-title { min-height: 15vw; padding: 2em 0 1em; }
  #hd .sec-title .deco-left { width: 100%; height: 2em; left: 0; position: relative; margin-top: 1em; margin-bottom: -1em; }
  #hd .sec-title .deco-left:before, #hd .sec-title .deco-left:after { top: 5%; left: 5%; }
  #hd .sec-title .deco-left:after { top: 5%; left: auto; right: 5%; }
  #hd .sec-title .deco-left img { width: 2em; left: 0; right: 0; margin: 0 auto; }
  #hd .sec-title .hd-container { padding: 30px 0 20px; }
  #hd .title-tab.hd-active { background-size: 150%; }
  #hd .title-tab .container { padding: 30px 20px; }
  #hd .title-tab ul { padding: 6px 0; }
  #hd .title-tab ul li { font-size: 0.8em; width: auto; }
  #hd .sub-tab li, #hd .list li { margin: 0 .5em; } }
@media screen and (max-width: 480px) { #hd .sec-title .container { padding: 30px 0; }
  #hd .title-tab ul { padding: 3px; }
  #hd .title-tab ul li { font-size: 14px; padding: 5px; word-break: initial; }
  #hd #style .title-tab li, #hd #more .title-tab li { font-size: 12px; }
  #hd .sub-tab, #hd .list { padding-top: 30px; }
  #hd .sub-tab li, #hd .list li { display: block; width: 100%; margin: 0 0 1px; padding: .25em; }
  #hd .sub-tab li:not(:last-child):after, #hd .list li:not(:last-child):after { display: none; }
  #hd .list.style-block li { margin: .25em; } }
#hd .owl-carousel { display: -ms-grid; display: grid; }
#hd .owl-carousel .item { opacity: .3; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
#hd .owl-carousel .owl-item.active .item { opacity: 1; }
#hd .owl-carousel .owl-item.active + .active .item { opacity: .3; }

#hd .ui-3d { position: relative; max-width: 1500px; min-height: 600px; padding: 60px 0 30px; margin: 0 auto; overflow: hidden; }
#hd .ui-3d .ui-3d-inner { min-height: 520px; }
#hd .ui-3d .box { position: absolute; left: calc(50% - 400px); top: 0; width: 800px; border: 1px solid #777; background: #333; background-image: linear-gradient(45deg, #000000 0%, #2f2f2f 100%); height: 500px; -moz-transform: translateX(0%) rotateY(0deg); -o-transform: translateX(0%) rotateY(0deg); -ms-transform: translateX(0%) rotateY(0deg); -webkit-transform: translateX(0%) rotateY(0deg); transform: translateX(0%) rotateY(0deg); -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; z-index: 2; }
#hd .ui-3d .leftbox { left: 0; -moz-transform: perspective(3000px) translateX(-57%) rotateY(-55deg); -o-transform: perspective(3000px) translateX(-57%) rotateY(-55deg); -ms-transform: perspective(3000px) translateX(-57%) rotateY(-55deg); -webkit-transform: perspective(3000px) translateX(-57%) rotateY(-55deg); transform: perspective(3000px) translateX(-57%) rotateY(-55deg); transform-origin: right center; z-index: 0; }
#hd .ui-3d .rightbox { -moz-transform: perspective(4000px) translateX(101%) rotateY(55deg); -o-transform: perspective(4000px) translateX(101%) rotateY(55deg); -ms-transform: perspective(4000px) translateX(101%) rotateY(55deg); -webkit-transform: perspective(4000px) translateX(101%) rotateY(55deg); transform: perspective(4000px) translateX(101%) rotateY(55deg); transform-origin: left center; z-index: 1; }
#hd .ui-3d .inner { display: flex; align-items: center; height: 100%; }
#hd .ui-3d .inner .img { width: 60%; padding: 20px; }
#hd .ui-3d .inner .text { width: 40%; padding: 20px; color: white; }
#hd .ui-3d .inner .text h4 { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: normal; text-transform: uppercase; }
#hd .ui-3d .control { text-align: center; }
#hd .ui-3d .control a { display: inline-block; width: 40px; height: 40px; margin: 0 10px; 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 .ui-3d .control a:before { display: block; content: ''; width: 20px; height: 2px; background: #fe34e7; position: absolute; left: 10px; top: 13px; -moz-transform: rotate(-45deg) translateX(0px) translateY(0px); -o-transform: rotate(-45deg) translateX(0px) translateY(0px); -ms-transform: rotate(-45deg) translateX(0px) translateY(0px); -webkit-transform: rotate(-45deg) translateX(0px) translateY(0px); transform: rotate(-45deg) translateX(0px) translateY(0px); }
#hd .ui-3d .control a:after { display: block; content: ''; width: 20px; height: 2px; background: #fe34e7; position: absolute; left: 10px; top: 26px; -moz-transform: rotate(45deg) translateX(0px) translateY(0px); -o-transform: rotate(45deg) translateX(0px) translateY(0px); -ms-transform: rotate(45deg) translateX(0px) translateY(0px); -webkit-transform: rotate(45deg) translateX(0px) translateY(0px); transform: rotate(45deg) translateX(0px) translateY(0px); }
#hd .ui-3d .control a:hover { opacity: .7; }
#hd .ui-3d .control a.right { -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#hd .ui-3d .more { text-align: center; margin: 40px; }
#hd .ui-3d .more a { display: inline-block; background: #fff; padding: 6px 15px; color: #000; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; text-transform: uppercase; }
#hd .ui-3d .more a:hover { background: #ccc; }
#hd .ui-3d .note { text-align: center; color: #777; padding: 0 25px; margin: 0 auto 100px auto; max-width: 1200px; }

@media screen and (min-width: 3000px) { #hd .ui-3d { max-width: 2000px; }
  #hd .ui-3d .ui-3d-inner { min-height: 580px; }
  #hd .ui-3d .box { width: 1130px; height: 620px; left: calc(50% - 500px); }
  #hd .ui-3d .box.leftbox { left: 0; } }
@media screen and (max-width: 1480px) { #hd .ui-3d .rightbox { margin-left: -20px; } }
@media screen and (max-width: 1366px) { #hd .ui-3d .rightbox { -moz-transform: perspective(4000px) translateX(101%) rotateY(55deg) scale(90%); -o-transform: perspective(4000px) translateX(101%) rotateY(55deg) scale(90%); -ms-transform: perspective(4000px) translateX(101%) rotateY(55deg) scale(90%); -webkit-transform: perspective(4000px) translateX(101%) rotateY(55deg) scale(90%); transform: perspective(4000px) translateX(101%) rotateY(55deg) scale(90%); } }
@media screen and (max-width: 1023px) { #hd .ui-3d { padding-top: 0; }
  #hd .ui-3d .ui-3d-inner { min-height: auto; }
  #hd .ui-3d .box { position: relative; left: auto; top: auto; width: 90%; height: auto; margin: 0 auto; -moz-transform: none !important; -o-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  #hd .ui-3d .box .inner .img { width: 40%; padding: 10px; }
  #hd .ui-3d .box .inner .text { width: 60%; }
  #hd .ui-3d .leftbox, #hd .ui-3d .rightbox { display: none; }
  #hd .ui-3d .control { margin-top: 10px; } }
@media screen and (max-width: 768px) { #hd .ui-3d .box { min-height: 250px; }
  #hd .ui-3d .box .inner .text h4 { font-size: 1em; margin-bottom: 5px; }
  #hd .ui-3d .box .inner .text p { font-size: 0.9em; } }
@media screen and (max-width: 480px) { #hd .ui-3d .box { width: 95%; }
  #hd .ui-3d .box .inner { display: block; }
  #hd .ui-3d .box .inner .img { width: 90%; margin: 0 auto; }
  #hd .ui-3d .box .inner .text { width: 100%; padding: 0 15px 15px 15px; } }
#hd .main-kv { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 50vw; background: url("../img/kv/bg.jpg") left bottom no-repeat; background-size: cover; position: relative; overflow: hidden; z-index: 4; }
#hd .main-kv:before, #hd .main-kv:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
#hd .main-kv:before { background: url(../img/kv/pattern-left.png) left top no-repeat; background-size: contain; -moz-transition: opacity 1.5s 0.4s ease; -o-transition: opacity 1.5s 0.4s ease; -webkit-transition: opacity 1.5s 0.4s ease; transition: opacity 1.5s 0.4s ease; }
#hd .main-kv:after { background: url(../img/kv/pattern-right.png) right top no-repeat; background-size: contain; -moz-transition: opacity 0.4s 0.25s ease; -o-transition: opacity 0.4s 0.25s ease; -webkit-transition: opacity 0.4s 0.25s ease; transition: opacity 0.4s 0.25s ease; }
#hd .main-kv .hd-mark { width: 5em; height: 5em; position: absolute; left: 3%; bottom: 5%; opacity: 0; }
#hd .main-kv .hd-mark img { width: 100%; }
#hd .main-kv h2 { font-size: 5em; line-height: 1; font-style: italic; }
#hd .main-kv .hd-container { width: 80%; padding: 1em 0; position: relative; z-index: 2; }
#hd .main-kv figure { position: relative; }
#hd .main-kv figure img { width: 100%; }
#hd .main-kv figure .hd-shadow { position: absolute; top: 0; left: 0; opacity: 0; mix-blend-mode: screen; z-index: 2; }
#hd .main-kv figure .hd-shadow.shadow-front { margin-left: 8%; margin-right: -8%; }
#hd .main-kv figure .hd-pd { opacity: 0; position: relative; z-index: 2; }
#hd .main-kv figure .hd-glitch { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; }
#hd .main-kv.is-animated:before { opacity: 1; }
#hd .main-kv.is-animated:after { opacity: 1; }
#hd .main-kv.is-animated .hd-pd { animation: fadeIn 1s .25s ease 1 forwards; }
#hd .main-kv.is-animated .shadow-back { filter: hue-rotate(120deg); animation: fadeInKv .8s .8s ease 1 forwards, glitch 3s 1.2s linear infinite forwards, fadeOutKv .4s 1.2s ease-out 1 forwards; }
#hd .main-kv.is-animated .shadow-front { animation: fadeInKv .4s 1.2s ease 1 forwards, glitch2 2s 1.2s linear infinite forwards, fadeOutKv .6s 1.7s ease-out 1 forwards; }
#hd .main-kv.is-animated .hd-glitch.glitch-1 { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 5s; -webkit-animation-name: moving; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 5s; -moz-animation-name: moving; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 5s; -o-animation-name: moving; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 5s; animation-name: moving; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .main-kv.is-animated .hd-glitch.glitch-2 { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 5s; -webkit-animation-name: moving; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 5s; -moz-animation-name: moving; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 5s; -o-animation-name: moving; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 5s; animation-name: moving; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .main-kv.is-animated .hd-mark { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: markIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: markIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: markIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: markIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .main-kv .hd-icon { margin-top: 1em; }
#hd .main-kv .hd-icon img { width: 60%; max-width: 464px !important; margin-left: 0; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }

@media screen and (min-width: 2560px) { #hd .title-tab ul { max-width: 1500px; } }
@media screen and (min-width: 3000px) { #hd .title-tab ul { max-width: 2200px; } }
@media screen and (max-width: 1440px) { #hd .main-kv h2 { font-size: 4em; }
  #hd .main-kv .hd-mark { width: 3em; height: 3em; } }
@media screen and (max-width: 1280px) { #hd .main-kv .hd-container { width: 85%; }
  #hd .main-kv h2 { font-size: 3.5em; } }
@media screen and (max-width: 1024px) { #hd .main-kv .hd-container { width: 90%; }
  #hd .main-kv h2 { font-size: 3.25em; }
  #hd .main-kv .hd-mark { width: 3em; height: 3em; left: 5%; bottom: 0; } }
@media screen and (max-width: 768px) { #hd .main-kv { background-size: 300% auto; background-position: center top; }
  #hd .main-kv:before { background-size: 200% auto; background-position: left top; }
  #hd .main-kv:after { background-size: 120% auto; }
  #hd .main-kv .hd-mark { width: 3em; height: 3em; left: 5%; bottom: auto; top: 90vw; }
  #hd .main-kv .hd-container { flex-direction: column-reverse; }
  #hd .main-kv .hd-container .hd-content, #hd .main-kv .hd-container figure { width: 100%; }
  #hd .main-kv .hd-container figure { margin-bottom: 2em; } }
@media screen and (max-width: 620px) { #hd .main-kv h2 { font-size: 2.5em; }
  #hd .main-kv .hd-mark { width: 2em; height: 2em; top: 95vw; } }
@media screen and (max-width: 480px) { #hd .main-kv .hd-icon img { width: 100%; max-width: 300px !important; } }
#hd .sec-spec { padding: 6em 0; background: #000000; position: relative; z-index: 2; }
#hd .sec-spec h3 { text-transform: uppercase; text-align: center; margin: 0 0 .25em; }
#hd .sec-spec .sub-tab, #hd .sec-spec .list { margin-top: 0; }
#hd .sec-spec .spec-control a { width: 51px; height: 114px; display: block; background: url("../img/spec/spec-arrow.png") center; background-size: cover; position: absolute; top: 45%; cursor: pointer; transition: all 0.2s; z-index: 2; }
#hd .sec-spec .spec-control a:hover { opacity: 0.8; }
#hd .sec-spec .spec-control a.prev { left: 5%; }
#hd .sec-spec .spec-control a.next { right: 5%; -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#hd .sec-spec figure { display: block; min-height: 60vh; margin: 0 auto; position: relative; }
#hd .sec-spec figure img { width: 80%; max-width: 835px !important; }
#hd .sec-spec ol { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; counter-reset: mycounter; }
#hd .sec-spec ol > li { max-width: 30%; position: absolute; text-align: left; }
#hd .sec-spec ol > li b { display: block; font-weight: 400; line-height: 1.5; letter-spacing: 0; margin-bottom: .25em; }
#hd .sec-spec ol > li i { font-style: italic; }
#hd .sec-spec ol > li ul { font-size: .9em; margin-left: 20px; margin-top: 5px; color: white; }
#hd .sec-spec ol > li ul li { margin-bottom: 3px; list-style-type: disc; }
#hd .sec-spec .hd-note { width: 90%; margin: 2em auto 0; }
#hd .sec-spec .tab-content > div.hd-active { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; }
#hd .sec-spec .tab-performance ol > li { left: 6%; }
#hd .sec-spec .tab-performance ol > li:nth-child(1) { top: 42.25%; max-width: 19%; }
#hd .sec-spec .tab-performance ol > li:nth-child(2) { top: 61.75%; }
#hd .sec-spec .tab-performance ol > li:nth-child(n+3) { left: 79%; }
#hd .sec-spec .tab-performance ol > li:nth-child(3) { top: 24%; }
#hd .sec-spec .tab-performance ol > li:nth-child(4) { top: 41.5%; }
#hd .sec-spec .tab-performance ol > li:nth-child(5) { top: 56.5%; }
#hd .sec-spec .tab-cooling ol > li { left: 8%; }
#hd .sec-spec .tab-cooling ol > li:nth-child(1) { top: 24%; max-width: 20%; }
#hd .sec-spec .tab-cooling ol > li:nth-child(2) { top: 51.5%; }
#hd .sec-spec .tab-cooling ol > li:nth-child(n+3) { left: 79%; }
#hd .sec-spec .tab-cooling ol > li:nth-child(3) { top: 23.5%; }
#hd .sec-spec .tab-cooling ol > li:nth-child(4) { top: 60.2%; }
#hd .sec-spec .tab-cooling ol > li:nth-child(5) { top: 83%; }
#hd .sec-spec .tab-immersion ol > li { left: 5%; }
#hd .sec-spec .tab-immersion ol > li:nth-child(1) { top: 61%; }
#hd .sec-spec .tab-immersion ol > li:nth-child(n+2) { left: 79%; }
#hd .sec-spec .tab-immersion ol > li:nth-child(2) { top: 9.5%; }
#hd .sec-spec .tab-immersion ol > li:nth-child(3) { top: 72%; }
#hd .sec-spec .tab-connectivity ol > li { left: 0; width: 24%; max-width: none; text-align: right; }
#hd .sec-spec .tab-connectivity ol > li ul { display: inline-block; margin-top: 0; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(1) { top: 12.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(2) { top: 16.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(3) { top: 22.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(4) { top: 26.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(5) { top: 30%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(6) { top: 36.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(7) { top: 43.2%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(8) { top: 52%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(9) { top: 60%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(10) { top: 65.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(11) { top: 72.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(12) { top: 78.5%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(n+13) { left: 79%; width: auto; max-width: 18%; text-align: left; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(13) { top: 42%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(14) { top: 49%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(15) { top: 66.2%; }
#hd .sec-spec .tab-connectivity ol > li:nth-child(16) { top: 87.2%; }

@media screen and (min-width: 2560px) { #hd .sec-spec figure { min-height: none; }
  #hd .sec-spec figure img { width: 60%; max-width: none !important; } }
@media screen and (max-width: 1440px) { #hd .sec-spec figure img { width: 70%; max-width: 755px !important; }
  #hd .sec-spec .spec-control a { width: 30px; height: 60px; }
  #hd .sec-spec .spec-control a.prev { left: 20px; }
  #hd .sec-spec .spec-control a.next { right: 20px; }
  #hd .sec-spec .tab-immersion ol > li { left: 2%; } }
@media screen and (max-width: 1280px) { #hd .sec-spec figure img { width: 64.5%; }
  #hd .sec-spec ol > li b { line-height: 1.25; }
  #hd .sec-spec ol > li p { line-height: 1.25; }
  #hd .sec-spec .tab-performance ol > li { left: 3%; }
  #hd .sec-spec .tab-cooling ol > li { left: 6%; }
  #hd .sec-spec .tab-immersion ol > li { left: -3%; } }
@media screen and (max-width: 1023px) { #hd .sec-spec figure img { width: auto; max-width: 100% !important; }
  #hd .sec-spec ol { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; position: relative; top: 0; left: 0; padding: 30px 0; }
  #hd .sec-spec ol > li { width: 50% !important; max-width: none !important; padding: 10px 0 10px 40px; position: relative; }
  #hd .sec-spec ol > li:before { counter-increment: mycounter; content: counter(mycounter); display: block; width: 30px; height: 30px; font-weight: bold; line-height: 30px; text-align: center; border-radius: 16px; background: #fe34e7; color: black; position: absolute; top: 5px; left: 0; z-index: 2; }
  #hd .sec-spec ol > li:nth-child(n) { top: 0 !important; left: 0 !important; }
  #hd .sec-spec .tab-performance ol > li:nth-child(1) { order: 1; }
  #hd .sec-spec .tab-performance ol > li:nth-child(2) { order: 3; }
  #hd .sec-spec .tab-performance ol > li:nth-child(3) { order: 5; }
  #hd .sec-spec .tab-performance ol > li:nth-child(4) { order: 2; }
  #hd .sec-spec .tab-performance ol > li:nth-child(5) { order: 4; }
  #hd .sec-spec .tab-cooling ol > li:nth-child(1) { order: 1; }
  #hd .sec-spec .tab-cooling ol > li:nth-child(2) { order: 3; }
  #hd .sec-spec .tab-cooling ol > li:nth-child(3) { order: 5; }
  #hd .sec-spec .tab-cooling ol > li:nth-child(4) { order: 2; }
  #hd .sec-spec .tab-cooling ol > li:nth-child(5) { order: 4; }
  #hd .sec-spec .tab-immersion ol > li:nth-child(1) { order: 1; }
  #hd .sec-spec .tab-immersion ol > li:nth-child(2) { order: 3; }
  #hd .sec-spec .tab-immersion ol > li:nth-child(3) { order: 2; }
  #hd .sec-spec .tab-immersion ol > li:nth-child(4) { order: 4; }
  #hd .sec-spec .tab-connectivity ol > li { text-align: left; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(1) { order: 1; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(2) { order: 3; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(3) { order: 5; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(4) { order: 7; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(5) { order: 9; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(6) { order: 11; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(7) { order: 13; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(8) { order: 15; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(9) { order: 2; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(10) { order: 4; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(11) { order: 6; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(12) { order: 8; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(13) { order: 10; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(14) { order: 12; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(15) { order: 14; }
  #hd .sec-spec .tab-connectivity ol > li:nth-child(16) { order: 16; }
  #hd .sec-spec .spec-control a { top: 65vw; } }
@media screen and (max-width: 768px) { #hd .sec-spec .spec-control a { width: 20px; height: 40px; }
  #hd .sec-spec .spec-control a.prev { left: 5px; }
  #hd .sec-spec .spec-control a.next { right: 5px; } }
@media screen and (max-width: 620px) { #hd .sec-spec ol > li { width: 100% !important; }
  #hd .sec-spec ol > li:nth-child(n) { order: initial !important; } }
@media screen and (max-width: 480px) { #hd .sec-spec .spec-control a { top: 130vw; } }
#hd #connectivity { background: #000000; position: relative; z-index: 2; }
#hd .tab-storage { padding: 2em 0; }
#hd .tab-storage.is-open .storage-scroller, #hd .tab-storage.is-open > .hd-container { opacity: .25; }
#hd .tab-storage.hd-active { display: block; animation: none !important; }
#hd .tab-storage .hd-content:first-child small { margin-bottom: .5em; }
#hd .tab-storage .hd-content:first-child h3 { margin-bottom: 0; }
#hd .tab-storage .hd-content ul { margin: 1em; }
#hd .tab-storage .hd-content li { list-style-type: disc; list-style-position: outside; font-weight: 300; margin-bottom: .5em; }
#hd .tab-storage .hd-content .trigger-memoryLightbox { display: inline-block; margin: .5em 0 1em; cursor: pointer; }
#hd .tab-storage .hd-content .trigger-memoryLightbox:hover { color: white; }
#hd .tab-storage h3 { margin-bottom: .25em; line-height: 1; }
#hd .tab-storage h3 small { font-family: inherit; font-size: .5em; line-height: 1; display: block; }
#hd .tab-storage .storage-scroller .hd-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding-top: 15%; }
#hd .tab-storage .storage-scroller figure { position: relative; }
#hd .tab-storage .storage-scroller figure img { width: 100%; margin-top: 10%; }
#hd .tab-storage .storage-scroller figure .hd-cover { position: absolute; top: 0; left: 0; opacity: 0; }
#hd .tab-storage .storage-scroller .hd-content { padding: 8em 4em 0; opacity: 0; }
#hd .tab-storage .storage-scroller .hd-content.content-memory { opacity: 1; }
#hd .tab-networking, #hd .tab-supremefx { padding: 2em 0; }
#hd .tab-networking .entry:first-child, #hd .tab-supremefx .entry:first-child { margin-bottom: 4em; }
#hd .tab-networking h3 small, #hd .tab-supremefx h3 small { font-family: inherit; font-size: .75em; }
#hd .tab-networking figure, #hd .tab-supremefx figure { width: 95%; margin-right: -20%; position: relative; }
#hd .tab-networking figure .hd-wrap, #hd .tab-supremefx figure .hd-wrap { position: relative; }
#hd .tab-networking figure .hd-cover li, #hd .tab-supremefx figure .hd-cover li { opacity: 0; -moz-transition: opacity 0.8s 0.25s ease; -o-transition: opacity 0.8s 0.25s ease; -webkit-transition: opacity 0.8s 0.25s ease; transition: opacity 0.8s 0.25s ease; }
#hd .tab-networking figure .hd-cover li.hd-active, #hd .tab-supremefx figure .hd-cover li.hd-active { opacity: 1; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
#hd .tab-networking figure .hd-cover img, #hd .tab-supremefx figure .hd-cover img { width: 100%; position: absolute; top: 0; left: 0; }
#hd .tab-networking figure .trigger-container .hd-trigger-dot:nth-child(1), #hd .tab-supremefx figure .trigger-container .hd-trigger-dot:nth-child(1) { top: 22%; left: 20%; }
#hd .tab-networking figure .trigger-container .hd-trigger-dot:nth-child(2), #hd .tab-supremefx figure .trigger-container .hd-trigger-dot:nth-child(2) { top: 81%; left: 23%; }
#hd .tab-networking figure .trigger-container .hd-trigger-dot:nth-child(3), #hd .tab-supremefx figure .trigger-container .hd-trigger-dot:nth-child(3) { top: 83%; left: 14%; }
#hd .tab-networking figure .hd-content, #hd .tab-supremefx figure .hd-content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; right: 10%; margin: 0 !important; pointer-events: none; }
#hd .tab-networking figure .hd-content li, #hd .tab-supremefx figure .hd-content li { width: 80%; max-width: 36em; padding: 5em !important; background: rgba(49, 87, 135, 0.6); margin: auto 0 auto auto; cursor: default; display: none; }
#hd .tab-networking figure .hd-content li.hd-active, #hd .tab-supremefx figure .hd-content 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 .tab-networking figure .hd-content h3, #hd .tab-supremefx figure .hd-content h3 { margin-bottom: .125em; }
#hd .tab-supremefx { padding-top: 0; }
#hd .tab-supremefx figure { width: 86.6666%; margin-right: -20%; overflow: hidden; }
#hd .tab-supremefx figure .hd-wrap { margin-top: -5%; }
#hd .tab-supremefx figure .trigger-container .hd-trigger-dot:nth-child(1) { top: 68%; left: 16%; }
#hd .tab-supremefx figure .trigger-container .hd-trigger-dot:nth-child(2) { top: 38%; left: 26.3%; }
#hd .tab-supremefx figure .trigger-container .hd-trigger-dot:nth-child(3) { top: 69%; left: 28%; }
#hd .tab-supremefx figure .trigger-container .hd-trigger-dot:nth-child(4) { top: 55%; left: 26%; }
#hd .tab-supremefx aside { margin-bottom: 10%; }

#pageContent-memoryLightbox { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#pageContent-memoryLightbox .hd-container { width: 80%; max-width: 1200px; padding: 4em; background: #13202c; position: relative; opacity: 1 !important; }
#pageContent-memoryLightbox .hd-content { padding-left: 2em; }
#pageContent-memoryLightbox .hd-content p { margin-bottom: 0; }
#pageContent-memoryLightbox .trigger-close { font-size: 1.25em; }

@media screen and (max-width: 1440px) { #hd .tab-networking figure, #hd .tab-supremefx figure { width: 85%; margin-right: -10%; }
  #hd .tab-networking figure .hd-content, #hd .tab-supremefx figure .hd-content { right: 15%; }
  #hd .tab-networking figure .hd-content li, #hd .tab-supremefx figure .hd-content li { width: 60%; padding: 5em 3em !important; }
  #hd .tab-supremefx figure { width: 76.6666%; margin-right: -10%; }
  #hd .tab-supremefx figure .hd-wrap { margin-top: -8%; }
  #hd .tab-supremefx figure .hd-content li { width: 50%; }
  #hd .tab-supremefx aside { margin-bottom: 10%; } }
@media screen and (max-width: 1280px) { #hd .tab-storage .storage-scroller .hd-content { padding-left: .5em; padding-right: .5em; } }
@media screen and (max-width: 1024px) { #hd .tab-networking .entry:first-child, #hd .tab-supremefx .entry:first-child { margin-bottom: 2em; }
  #hd .tab-networking figure .hd-content li, #hd .tab-supremefx figure .hd-content li { padding: 4em 2.53em !important; } }
@media screen and (max-width: 1023px) { #hd .tab-networking aside, #hd .tab-supremefx aside { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  #hd .tab-networking aside .entry, #hd .tab-supremefx aside .entry { width: 48%; }
  #hd .tab-networking figure, #hd .tab-supremefx figure { width: 100%; margin: 0; }
  #hd .tab-networking figure .hd-content, #hd .tab-supremefx figure .hd-content { right: 0; }
  #hd .tab-supremefx { padding-top: 2em; }
  #hd .tab-supremefx aside { position: relative; z-index: 2; }
  #hd .tab-supremefx aside .entry { width: 100%; }
  #hd .tab-supremefx figure { margin-top: -15% !important; }
  #hd .tab-storage .hd-col50 { width: 100%; max-width: 600px; margin: 0 auto; padding: 1em 0; }
  #hd .tab-storage .hd-content { text-align: left; }
  #hd .tab-storage figure { width: 100%; height: 0; padding-bottom: 90%; margin: 0 auto 1em; position: relative; overflow: hidden; }
  #hd .tab-storage figure img { width: 100%; max-width: none !important; position: absolute; }
  #hd .tab-storage .hd-memory figure img { width: 140%; top: 0; right: 0; }
  #hd .tab-storage .hd-storage figure img { width: 90%; bottom: 0; left: 0; right: 0; margin: 0 auto; }
  #pageContent-memoryLightbox { top: 100px; bottom: 50px; }
  #pageContent-memoryLightbox .hd-container { width: 90%; flex-direction: column; }
  #pageContent-memoryLightbox .hd-col66, #pageContent-memoryLightbox .hd-content { width: 100%; }
  #pageContent-memoryLightbox .hd-content { padding: 2em 0; } }
@media screen and (max-width: 620px) { #hd .tab-networking figure, #hd .tab-supremefx figure { width: 100%; margin: 0; }
  #hd .tab-networking figure .hd-content, #hd .tab-supremefx figure .hd-content { position: relative; }
  #hd .tab-networking figure .hd-content li, #hd .tab-supremefx figure .hd-content li { width: 100%; padding: 2em !important; } }
@media screen and (max-width: 480px) { #hd .tab-networking aside .entry, #hd .tab-supremefx aside .entry { width: 100%; }
  #hd .tab-networking figure, #hd .tab-supremefx figure { overflow: hidden; }
  #hd .tab-networking figure .hd-wrap, #hd .tab-supremefx figure .hd-wrap { width: 130%; }
  #hd .tab-networking figure .hd-content li, #hd .tab-supremefx figure .hd-content li { padding: 2em 1em !important; }
  #hd .tab-supremefx figure { margin-top: -30% !important; }
  #hd .tab-supremefx figure .hd-wrap { width: 200%; } }
#hd .performance-power.hd-active { display: block; animation: none !important; }
#hd .performance-power .power-scroller { position: relative; }
#hd .performance-power .hd-main-title { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }
#hd .performance-power .hd-main-title h2 { font-size: 6.5em; margin-bottom: .125em; }
#hd .performance-power .hd-main-title p { max-width: 44em; margin: 0 auto; }
#hd .performance-power .hd-container { padding: 7em 0 4em; }
#hd .performance-power figure { width: 55%; margin-left: -5%; position: relative; }
#hd .performance-power figure .hd-base { position: relative; }
#hd .performance-power figure img { width: 100%; position: absolute; top: 0; left: 0; }
#hd .performance-power figure .hd-shadow { position: absolute; width: 100%; height: 0; padding-bottom: 100%; bottom: 0; left: 0; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, black 80%); background-image: -webkit-linear-gradient(180deg, transparent, black 80%); background-image: linear-gradient(180deg, transparent, black 80%); background-color: transparent; opacity: 0; }
#hd .performance-power figure li { display: none; }
#hd .performance-power figure li.hd-active { display: block; }
#hd .performance-power .hd-content { padding-left: 2em; position: relative; }
#hd .performance-power .hd-content li { min-height: 14em; padding: 2em 4em; display: none; }
#hd .performance-power .hd-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 .performance-power .hd-control a { width: 1.5em; height: 3em; display: block; background: url("../img/spec/spec-arrow.png") center; background-size: cover; position: absolute; top: 50%; -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); 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; z-index: 2; }
#hd .performance-power .hd-control a:hover { opacity: 0.8; }
#hd .performance-power .hd-control a.prev { left: 5%; }
#hd .performance-power .hd-control a.next { right: 5%; -moz-transform: scale(-1, 1) translate(-100%, -50%); -o-transform: scale(-1, 1) translate(-100%, -50%); -ms-transform: scale(-1, 1) translate(-100%, -50%); -webkit-transform: scale(-1, 1) translate(-100%, -50%); transform: scale(-1, 1) translate(-100%, -50%); }
#hd .performance-power figure { opacity: .25; left: 50%; -moz-transform: scale(0.8, 0.8) translate(-50%, 0); -o-transform: scale(0.8, 0.8) translate(-50%, 0); -ms-transform: scale(0.8, 0.8) translate(-50%, 0); -webkit-transform: scale(0.8, 0.8) translate(-50%, 0); transform: scale(0.8, 0.8) translate(-50%, 0); }
#hd .performance-power figure ul { opacity: 0; }
#hd .performance-power .hd-content { opacity: 0; }
#hd .tab-heatsink { padding-bottom: 2em; }
#hd .tab-heatsink .hd-content { position: absolute; left: 67%; top: 8%; }
#hd .tab-heatsink .hd-content h2 .txt-smaller { font-size: .875em; }
#hd .tab-heatsink .hd-content .list { padding-top: 0; justify-content: flex-start; }
#hd .tab-heatsink .hd-content .list li { width: auto; }
#hd .tab-heatsink figure { padding-top: 1px; margin-left: -8%; margin-top: -2%; position: relative; }
#hd .tab-heatsink figure.pos-1 .hd-text li { -webkit-animation-delay: 0.2s; -webkit-animation-duration: 0.8s; -webkit-animation-name: heatsinkText; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.2s; -moz-animation-duration: 0.8s; -moz-animation-name: heatsinkText; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.2s; -o-animation-duration: 0.8s; -o-animation-name: heatsinkText; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.2s; animation-duration: 0.8s; animation-name: heatsinkText; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-heatsink figure.pos-1 .hd-text li:nth-child(n+3) { opacity: 0; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -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: 0.4s; -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: 0.4s; -o-animation-name: fadeOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-heatsink figure.pos-1 .hd-cpu .pd-line { -webkit-animation-delay: 0.1s; -webkit-animation-duration: 0.8s; -webkit-animation-name: heatsinkLine; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.1s; -moz-animation-duration: 0.8s; -moz-animation-name: heatsinkLine; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.1s; -o-animation-duration: 0.8s; -o-animation-name: heatsinkLine; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.1s; animation-duration: 0.8s; animation-name: heatsinkLine; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-heatsink figure.pos-1 .hd-m2 li { filter: brightness(50%); }
#hd .tab-heatsink figure.pos-1 .hd-m2 .pd-line { opacity: 0; }
#hd .tab-heatsink figure.pos-2 .hd-text li { -webkit-animation-delay: 0.2s; -webkit-animation-duration: 0.8s; -webkit-animation-name: heatsinkText; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.2s; -moz-animation-duration: 0.8s; -moz-animation-name: heatsinkText; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.2s; -o-animation-duration: 0.8s; -o-animation-name: heatsinkText; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.2s; animation-duration: 0.8s; animation-name: heatsinkText; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-heatsink figure.pos-2 .hd-text li:nth-child(-n+2) { opacity: 0; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -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: 0.4s; -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: 0.4s; -o-animation-name: fadeOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-heatsink figure.pos-2 .hd-cpu li { filter: brightness(50%); }
#hd .tab-heatsink figure.pos-2 .hd-cpu .pd-line { opacity: 0; }
#hd .tab-heatsink figure.pos-2 .hd-m2 .pd-line { -webkit-animation-delay: 0.1s; -webkit-animation-duration: 0.8s; -webkit-animation-name: heatsinkLine; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.1s; -moz-animation-duration: 0.8s; -moz-animation-name: heatsinkLine; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.1s; -o-animation-duration: 0.8s; -o-animation-name: heatsinkLine; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.1s; animation-duration: 0.8s; animation-name: heatsinkLine; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-heatsink .img-wrapper { width: 70%; position: relative; }
#hd .tab-heatsink .img-wrapper img { width: 100%; margin-left: -6%; }
#hd .tab-heatsink .img-wrapper li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin-left: 0; -moz-transition: opacity 0.4s 0.4s ease, transform 0.4s 0.4s ease; -o-transition: opacity 0.4s 0.4s ease, transform 0.4s 0.4s ease; -webkit-transition: opacity 0.4s 0.4s ease, transform 0.4s 0.4s ease; transition: opacity 0.4s 0.4s ease, transform 0.4s 0.4s ease; }
#hd .tab-heatsink .pd-heatsink { -moz-transform: translate(5%, 5%); -o-transform: translate(5%, 5%); -ms-transform: translate(5%, 5%); -webkit-transform: translate(5%, 5%); transform: translate(5%, 5%); }
#hd .tab-heatsink .pd-line { opacity: 0; }
#hd .tab-heatsink .hd-text { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#hd .tab-heatsink .hd-text li { width: 38%; position: absolute; left: 67%; opacity: 0; }
#hd .tab-heatsink .hd-text li:nth-child(1) { top: 22%; }
#hd .tab-heatsink .hd-text li:nth-child(2) { top: 44.5%; }
#hd .tab-heatsink .hd-text li:nth-child(3) { top: 53%; }
#hd .tab-heatsink .hd-text li:nth-child(4) { top: 73%; }
#hd .tab-heatsink .hd-text h3 { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.3em; font-weight: 400; margin-bottom: .5em; text-transform: none; }
#hd .tab-cooling.hd-active .sub-tab, #hd .tab-cooling.hd-active .list { z-index: 2; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .pd-base { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: innovationBase; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: innovationBase; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: innovationBase; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: innovationBase; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .hd-cpu li { -moz-transition: filter 0.4s ease; -o-transition: filter 0.4s ease; -webkit-transition: filter 0.4s ease; transition: filter 0.4s ease; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .hd-cpu li:nth-child(1) { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: cpu1; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: cpu1; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: cpu1; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: cpu1; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .hd-cpu li:nth-child(2) { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: cpu2; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: cpu2; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: cpu2; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: cpu2; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .hd-m2 li { -moz-transition: filter 0.4s ease; -o-transition: filter 0.4s ease; -webkit-transition: filter 0.4s ease; transition: filter 0.4s ease; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .hd-m2 li:nth-child(1) { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: m21; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: m21; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: m21; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: m21; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .hd-m2 li:nth-child(2) { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: m22; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: m22; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: m22; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: m22; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-cooling.hd-active .tab-heatsink.hd-active .hd-m2 li:nth-child(3) { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: m23; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: m23; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: m23; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: m23; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-cooler { padding: 20px 0 20px; }
#hd .tab-cooler h3 + p { margin: 0 auto 1em; }
#hd .tab-cooler .spec-content { max-width: 1500px; position: relative; margin: 0 auto; }
#hd .tab-cooler .hd-container { padding: 0 40px 0 20px; display: flex; flex-direction: row-reverse; }
#hd .tab-cooler .hd-container .graph { width: 50%; position: relative; }
#hd .tab-cooler .hd-container .script { width: 50%; }
#hd .tab-cooler .hd-container .list { margin-bottom: 50px; }
#hd .tab-cooler .hd-container .list li { width: calc(33.33% - 2em); padding-left: 0; padding-right: 0; }
#hd .tab-cooler .hd-container .context .entry:not(.active) { display: none; }
#hd .tab-cooler .hd-container .context .lineup { display: flex; justify-content: center; }
#hd .tab-cooler .hd-container .context .lineup .item { width: 80%; max-width: 400px; margin: 0 10px; text-align: center; }
#hd .tab-cooler .hd-container .context .lineup .item img { margin: 0 auto 15px auto; display: block; }
#hd .tab-cooler .hd-container .context .lineup .item h5 { color: #fe34e7; min-height: 2.5em; margin-bottom: 10px; }
#hd .tab-cooler .hd-container .context .lineup .item .note { color: #fe34e7; display: block; margin-top: 5px; }
#hd .tab-cooler .hd-container .graph img { width: 90%; }
#hd .tab-cooler .hd-container .graph .bubble img { position: absolute; left: 0; right: 0; top: 0; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#hd .tab-cooler .hd-container .graph .bubble:not(.active) { display: none; }
#hd .tab-cooler .hd-container .graph .bubble .add-img { width: 62%; height: 0; padding-bottom: 11%; position: absolute; top: 48%; left: 10%; background: #fe34e7; opacity: 0; cursor: pointer; }
#hd .tab-cooler .hd-container .graph .bubble .add-img:hover + img, #hd .tab-cooler .hd-container .graph .bubble .add-img:focus + img { opacity: 1; }
#hd .tab-cooler .hd-container .graph .bubble .add-img + img { opacity: 0; pointer-events: none; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
#hd .tab-cancelation { padding: 20px 0 0; position: relative; overflow: hidden; }
#hd .tab-cancelation h2 { text-transform: uppercase; }
#hd .tab-cancelation h2 + p { margin-bottom: 1em; }
#hd .tab-cancelation .hd-feature { width: 100%; max-width: 1200px; margin: 4em auto 2em; }
#hd .tab-cancelation .hd-feature li { padding: 0 2em; }
#hd .tab-cancelation .hd-feature li h3 { font-size: 2.5em; text-transform: none; margin-bottom: 0; }
#hd .tab-cancelation .hd-feature li p { margin-bottom: 0; }
#hd .tab-cancelation a.hd-btn { font-size: 1.125em; padding: .75em 2em; margin-top: 1.75em; }
#hd .tab-cancelation .chart-container .hd-content { min-width: 34em; flex-shrink: 0; position: relative; z-index: 2; }
#hd .tab-cancelation .chart-container > figure { margin-right: -20%; }
#hd .tab-cancelation .chart-container .hd-chart { display: flex; flex-wrap: nowrap; margin: 2em 0; }
#hd .tab-cancelation .chart-container .hd-title { display: flex; flex-direction: column; padding-right: 1em; }
#hd .tab-cancelation .chart-container .hd-title p { line-height: 1; font-weight: 400; margin: auto 0; }
#hd .tab-cancelation .chart-container .bar-container { min-width: 20em; padding-right: 2em; border-left: 1px solid white; position: relative; overflow: hidden; }
#hd .tab-cancelation .chart-container .bar-container ul { margin: .5em 0; }
#hd .tab-cancelation .chart-container .bar-container ul:first-child { margin-bottom: 1em; }
#hd .tab-cancelation .chart-container .bar-container ul:first-child li:first-child { width: 98.3%; }
#hd .tab-cancelation .chart-container .bar-container ul:last-child li:first-child { width: 74.6%; }
#hd .tab-cancelation .chart-container .hd-bar { width: 80%; height: 1.25em; margin: .35em 0 .35em -1em; background: #818181; color: black; -moz-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); position: relative; }
#hd .tab-cancelation .chart-container .hd-bar.hd-bar-primary { background: #fe34e7; color: black; }
#hd .tab-cancelation .chart-container .hd-bar.hd-bar-white { background: white; }
#hd .tab-cancelation .chart-container .hd-bar small { display: block; font-weight: 500; line-height: 1.75; text-align: right; padding-right: 1em; -moz-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); }
#hd .tab-cancelation .chart-container .hd-bar p { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; white-space: nowrap; position: absolute; left: 100%; top: -.25em; bottom: 0; margin: auto .5em; -moz-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); }
#hd .tab-cancelation .chart-container .hd-tag { width: 7em; align-self: flex-start; text-align: center; color: #fe34e7; margin-top: 1em; position: relative; }
#hd .tab-cancelation .chart-container .hd-tag h4 { color: #fe34e7 !important; margin-bottom: 0; }
#hd .tab-cancelation .chart-container .hd-tag p { line-height: 1; font-weight: 500; }
#hd .tab-cancelation .chart-container .hd-tag:before { content: ''; display: block; width: 100%; height: 100%; box-sizing: padding-box; padding: .75em .5em; border: 1px solid #fe34e7; -moz-transform: skew(25deg, 0deg); -o-transform: skew(25deg, 0deg); -ms-transform: skew(25deg, 0deg); -webkit-transform: skew(25deg, 0deg); transform: skew(25deg, 0deg); position: absolute; top: -.75em; left: -.5em; }
#hd .ai-audio { padding: 1em 0; position: relative; overflow: hidden; }
#hd .ai-audio h2 small { font: inherit; font-size: .875em; }
#hd .ai-audio .player { width: 100%; height: 0; padding-bottom: 45.4918%; background: url("../img/performance/cancelation/wave.jpg") center no-repeat; background-size: 100% auto; position: relative; }
#hd .ai-audio .player .icon-mic, #hd .ai-audio .player .icon-sound { width: 13%; position: absolute; left: 0; right: 0; margin: 0 auto; }
#hd .ai-audio .player .icon-mic { bottom: 60%; }
#hd .ai-audio .player .icon-sound { top: 57%; }
#hd .ai-audio .player ul { width: 100%; max-width: none; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; }
#hd .ai-audio .player li { width: 18%; padding: 0; text-align: center; position: absolute; white-space: nowrap; }
#hd .ai-audio .player li:nth-child(1) { left: -2%; top: 7%; }
#hd .ai-audio .player li:nth-child(2) { left: -2%; top: 50%; }
#hd .ai-audio .player li:nth-child(3) { right: 0; top: 7%; }
#hd .ai-audio .player li:nth-child(4) { right: 0; top: 50%; }
#hd .ai-audio .player li img { margin-bottom: -10%; }
#hd .ai-audio .player li h3 { font-size: 2.75em; margin-bottom: -.125em; }
#hd .ai-audio .player li p { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: 400; color: #ff9e19; }
#hd .ai-audio .player .hd-btn { font-size: 1.5em; padding: .35em .75em; }
#hd .ai-audio .player .hd-btn.color-primary { color: #02aee5; border-color: #02aee5; }
#hd .ai-audio .player .hd-btn.color-grey { color: #888888; border-color: #888888; }
#hd .ai-audio .trigger-play { width: 136px; height: 136px; cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .ai-audio .trigger-play:before, #hd .ai-audio .trigger-play:after { content: ''; display: block; height: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .ai-audio .trigger-play:before { width: 100%; padding-bottom: 100%; background: white; border-radius: 50%; }
#hd .ai-audio .trigger-play:after { width: calc(100% - 10px); padding-bottom: calc(100% - 10px); border-radius: 100%; overflow: hidden; background: rgba(0, 0, 0, 0.78) url("../img/performance/cancelation/play-icon-play.png") center no-repeat; background-size: 190%; }
#hd .ai-audio .trigger-play.is-playing:after { background-image: url("../img/performance/cancelation/play-icon-pause.png"); }
#hd .ai-audio .switch-container { margin: 0 auto; }
#hd .ai-audio .switch-btn { width: 80%; max-width: 280px; border: 3px solid white; border-radius: 5px; margin: 2em auto 0; }
#hd .ai-audio .switch-btn div { font-family: "TradeGothicLTPro", "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; padding: .5em .75em .25em; cursor: pointer; }
#hd .ai-audio .switch-btn div.active { background: white; color: black; cursor: default; }
#hd .ai-audio .caption { max-width: 800px; margin: 2em auto; }
#hd .ai-audio .caption li { font-weight: lighter; position: relative; }
#hd .ai-audio .caption li:before { content: ''; display: inline-block; vertical-align: middle; width: 50px; height: 5px; margin-right: 20px; }
#hd .ai-audio .caption li.background:before { background: #818181; }
#hd .ai-audio .caption li.voice:before { background: #a200ff; }
#hd .ai-audio .caption li.speech:before { background: #70e2ff; }
#hd .tab-ainetworking, #hd .tab-aioverclocking, #hd .tab-aicooling { padding: 20px 0 50px; }
#hd .tab-ainetworking .hd-row, #hd .tab-aioverclocking .hd-row, #hd .tab-aicooling .hd-row { align-items: center; padding: 0 30px; margin: 100px auto; }
#hd .tab-ainetworking .hd-row:last-child, #hd .tab-aioverclocking .hd-row:last-child, #hd .tab-aicooling .hd-row:last-child { margin-bottom: 0; }
#hd .tab-ainetworking .hd-row .hd-container, #hd .tab-aioverclocking .hd-row .hd-container, #hd .tab-aicooling .hd-row .hd-container { width: 100%; justify-content: space-between; margin-top: 50px; }
#hd .tab-ainetworking .hd-row .list, #hd .tab-aioverclocking .hd-row .list, #hd .tab-aicooling .hd-row .list { padding-top: 0; }
#hd .tab-ainetworking .hd-row li, #hd .tab-aioverclocking .hd-row li, #hd .tab-aicooling .hd-row li { width: 31%; }
#hd .tab-ainetworking .hd-row .img, #hd .tab-aioverclocking .hd-row .img, #hd .tab-aicooling .hd-row .img { flex-shrink: 0; }
#hd .tab-ainetworking .hd-row h5, #hd .tab-aioverclocking .hd-row h5, #hd .tab-aicooling .hd-row h5 { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; font-weight: normal; margin: .65em 0 .85em; }
#hd .tab-aicooling .list li { max-width: 12em; font-size: 1.45em; }
#hd .tab-aicooling .context .entry { display: none; }
#hd .tab-aicooling .context .entry.hd-active { display: block; }
#hd .tab-aicooling .context .entry .hd-content { padding-left: 2em; }
#hd .tab-aicooling .context h4 { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: 400; text-transform: none; }

@media screen and (min-width: 2560px) { #hd .tab-cancelation .hd-feature { max-width: 1400px; }
  #hd .tab-cooler .hd-container .context .lineup .item { max-width: 580px; }
  #hd .tab-cooler .hd-container .context .lineup .item img { width: 80%; }
  #hd .ai-audio .switch-btn { max-width: 360px; } }
@media screen and (max-width: 1440px) { #hd .performance-power figure { width: 50%; margin-left: 0; }
  #hd .performance-power .hd-content { width: 45%; margin-left: 5%; }
  #hd .tab-heatsink figure { margin-left: -5%; }
  #hd .tab-heatsink .hd-content { top: 6%; }
  #hd .tab-heatsink .hd-text li { width: 30%; }
  #hd .tab-cancelation .hd-feature li h3 { font-size: 2.5em; }
  #hd .tab-cancelation .chart-container > figure { width: 60%; margin-right: -10%; }
  #hd .tab-cancelation .chart-container .bar-container { min-width: 18em; }
  #hd .tab-cancelation .chart-container .hd-tag { width: 6em; }
  #hd .ai-audio .switch-btn { max-width: 18vw; margin: 2em auto 0; }
  #hd .ai-audio .switch-btn div { font-size: 1.75vw; }
  #hd .ai-audio .player .icon-mic, #hd .ai-audio .player .icon-sound { width: 12%; }
  #hd .ai-audio .player li { width: 20%; }
  #hd .ai-audio .player li img { width: 12vw; max-width: none !important; margin-bottom: -10%; }
  #hd .ai-audio .player li h3 { font-size: 3vw; }
  #hd .ai-audio .player li p { font-size: 1.75vw; }
  #hd .ai-audio .player .hd-btn { font-size: 1.75vw; margin-top: .5em; }
  #hd .ai-audio .trigger-play { width: 8vw; height: 8vw; } }
@media screen and (max-width: 1280px) { #hd .tab-heatsink .hd-text h3 { font-size: 1em; margin-bottom: .25em; }
  #hd .tab-cooler .hd-container .list { margin-bottom: 20px; }
  #hd .tab-cancelation .chart-container { padding: 2em 0; }
  #hd .tab-cancelation .chart-container h3 { font-size: 2em; }
  #hd .tab-cancelation .chart-container > figure { width: 70%; margin-left: -7%; margin-right: -15%; }
  #hd .tab-cancelation .chart-container .bar-container { min-width: 18em; }
  #hd .tab-cancelation .chart-container .hd-tag { width: 6em; }
  #hd .tab-ainetworking .hd-row .img, #hd .tab-aioverclocking .hd-row .img, #hd .tab-aicooling .hd-row .img { flex-shrink: 0.5; } }
@media screen and (max-width: 1024px) { #hd .performance-power .hd-content { padding-left: 1em; }
  #hd .performance-power .hd-content li { padding: 2em 3em; }
  #hd .performance-power .hd-control a { width: 1em; height: 2em; }
  #hd .tab-cancelation .hd-feature { font-size: 14px; margin: 3em auto 1em; }
  #hd .tab-cancelation .hd-feature li { padding: 0 1em; }
  #hd .tab-cancelation .hd-feature li h3 { font-size: 2.5em; }
  #hd .tab-cancelation .hd-feature li p { font-size: 1.125em; }
  #hd .ai-audio .trigger-play:after { width: calc(100% - 6px); padding-bottom: calc(100% - 6px); }
  #hd .ai-audio .caption li { padding: 0 1em; } }
@media screen and (max-width: 1023px) { #hd .tab-cooler .hd-container { padding: 0; }
  #hd .tab-cooler .hd-container .graph, #hd .tab-cooler .hd-container .script { width: 100%; }
  #hd .tab-heatsink { padding: 20px 0; }
  #hd .tab-heatsink .hd-content { width: 100%; position: relative; top: 0; left: 0; margin-top: 0; }
  #hd .tab-heatsink .hd-content .list { justify-content: center; display: none; }
  #hd .tab-heatsink .hd-cpu, #hd .tab-heatsink .hd-m2 { display: none; }
  #hd .tab-heatsink .pd-base { animation: none !important; }
  #hd .tab-heatsink .img-wrapper { width: 100%; max-width: 700px; margin: 0 auto; }
  #hd .tab-heatsink .img-wrapper img { margin-left: 0; }
  #hd .tab-heatsink figure { width: 100%; margin: 0 auto 0; }
  #hd .tab-heatsink figure img { width: 100%; }
  #hd .tab-heatsink figure .pd-line { display: none; }
  #hd .tab-heatsink figure .hd-text li { opacity: 1 !important; animation: none !important; }
  #hd .tab-heatsink h2 { text-align: center; position: relative; left: 0; }
  #hd .tab-heatsink .hd-text { max-width: 700px; padding: 1em 0 3em; margin: 0 auto; position: relative; counter-reset: mycounter; }
  #hd .tab-heatsink .hd-text li { top: 0; left: 0; padding: 10px 0 10px 40px; }
  #hd .tab-heatsink .hd-text li:before { counter-increment: mycounter; content: counter(mycounter); display: block; width: 30px; height: 30px; font-weight: bold; line-height: 30px; text-align: center; border-radius: 16px; background: #fe34e7; color: black; position: absolute; top: 5px; left: 0; z-index: 2; }
  #hd .tab-heatsink .hd-text li:nth-child(n) { width: 100%; height: auto; position: relative; top: 0; left: 0; }
  #hd .tab-heatsink .hd-text h3 { font-size: 1.2em; }
  #hd .tab-cancelation .chart-container { flex-direction: column; }
  #hd .tab-cancelation .chart-container .hd-content { width: 100%; min-width: 0; }
  #hd .tab-cancelation .chart-container > figure { width: 100%; margin: 10% 0 -10%; }
  #hd .tab-cancelation .chart-container .hd-chart { margin: 1em 0; }
  #hd .tab-cancelation .chart-container .bar-container { width: 60%; } }
@media screen and (max-width: 768px) { #hd .performance-power .hd-main-title h2 { font-size: 12vw; }
  #hd .performance-power .hd-main-title p { max-width: 90%; margin: 0 auto; }
  #hd .performance-power .hd-container { flex-direction: column; }
  #hd .performance-power figure { width: 100%; max-width: 600px; margin: 0 auto; margin-bottom: -40%; left: 0; -moz-transform: scale(0.8, 0.8) translate(0, 0); -o-transform: scale(0.8, 0.8) translate(0, 0); -ms-transform: scale(0.8, 0.8) translate(0, 0); -webkit-transform: scale(0.8, 0.8) translate(0, 0); transform: scale(0.8, 0.8) translate(0, 0); }
  #hd .performance-power .hd-content { width: 100%; padding-left: 0; margin-left: 0; }
  #hd .performance-power .hd-content li { min-height: 0; padding: 2em 3em; }
  #hd .performance-power .hd-control a { width: 1em; height: 2em; }
  #hd .performance-power .hd-control a.prev { left: 0; }
  #hd .performance-power .hd-control a.next { right: 5%; }
  #hd .tab-cooler .hd-container { flex-wrap: wrap; }
  #hd .tab-cooler .hd-container .context .lineup .item h5 { min-height: 0; margin-bottom: 0; }
  #hd .tab-cancelation .hd-feature li h3 { font-size: 2.25em; }
  #hd .ai-audio .switch-btn { max-width: 200px; margin: 1em auto; }
  #hd .ai-audio .switch-btn div { font-size: 1.25em; }
  #hd .ai-audio .player { width: 100%; padding-bottom: 60%; }
  #hd .ai-audio .player .icon-mic, #hd .ai-audio .player .icon-sound { width: 16%; }
  #hd .ai-audio .player li { width: 20%; }
  #hd .ai-audio .player li:nth-child(1) { left: -5%; top: 15%; }
  #hd .ai-audio .player li:nth-child(2) { left: -5%; top: 52%; }
  #hd .ai-audio .player li:nth-child(3) { right: 0; top: 15%; }
  #hd .ai-audio .player li:nth-child(4) { right: 0; top: 52%; }
  #hd .ai-audio .player li img { width: 14vw; }
  #hd .ai-audio .player li h3 { font-size: 4vw; }
  #hd .ai-audio .player li p { font-size: 2.5vw; }
  #hd .ai-audio .player .hd-btn { font-size: 2.5vw; }
  #hd .ai-audio .trigger-play { width: 10vw; height: 10vw; }
  #hd .ai-audio .caption li:before { margin-right: 1em; }
  #hd .tab-ainetworking, #hd .tab-aioverclocking, #hd .tab-aicooling { padding: 50px 0 50px; }
  #hd .tab-ainetworking .hd-row, #hd .tab-aioverclocking .hd-row, #hd .tab-aicooling .hd-row { padding: 0 20px; margin: 50px auto; }
  #hd .tab-ainetworking .hd-row .hd-container, #hd .tab-aioverclocking .hd-row .hd-container, #hd .tab-aicooling .hd-row .hd-container { margin-top: 30px; }
  #hd .tab-ainetworking .hd-row li, #hd .tab-aioverclocking .hd-row li, #hd .tab-aicooling .hd-row li { width: 100%; margin-bottom: 20px; }
  #hd .tab-ainetworking .hd-row .img, #hd .tab-aioverclocking .hd-row .img, #hd .tab-aicooling .hd-row .img { flex-shrink: 0; }
  #hd .tab-aicooling .context .entry .hd-content { padding-left: 1em; } }
@media screen and (max-width: 620px) { #hd .tab-cancelation .hd-feature { font-size: 14px; }
  #hd .tab-cancelation .hd-feature li { width: 100%; padding: 0 .5em; margin-bottom: 1.5em; }
  #hd .tab-cancelation .hd-feature li p { font-size: 1.25em; }
  #hd .tab-cancelation .hd-feature li p br { display: none; }
  #hd .tab-cancelation .chart-container { font-size: 12px; }
  #hd .tab-cancelation .chart-container > figure { width: 120%; margin-left: -10%; margin-right: -10%; }
  #hd .tab-cancelation .chart-container .hd-title { padding-right: .5em; }
  #hd .tab-cancelation .chart-container .hd-title p { font-size: 10px; }
  #hd .tab-cancelation .chart-container .bar-container { min-width: 14em; }
  #hd .tab-cancelation .chart-container .hd-bar small { font-size: 10px; }
  #hd .tab-cancelation .chart-container .hd-tag p { font-size: 10px; }
  #hd .ai-audio .player { width: 100%; padding-bottom: 60%; }
  #hd .ai-audio .player .icon-mic, #hd .ai-audio .player .icon-sound { width: 16%; }
  #hd .ai-audio .player .icon-mic { bottom: 65%; }
  #hd .ai-audio .player .icon-sound { top: 60%; }
  #hd .ai-audio .player li { width: 25%; }
  #hd .ai-audio .player li:nth-child(1) { left: -5%; top: 5%; }
  #hd .ai-audio .player li:nth-child(2) { left: -5%; top: 50%; }
  #hd .ai-audio .player li:nth-child(3) { right: -5%; top: 5%; }
  #hd .ai-audio .player li:nth-child(4) { right: -5%; top: 50%; }
  #hd .ai-audio .player li img { width: 16vw; }
  #hd .ai-audio .player li h3 { font-size: 4.5vw; }
  #hd .ai-audio .player li p { font-size: 3.5vw; }
  #hd .ai-audio .player li p br { display: block; }
  #hd .ai-audio .player .hd-btn { font-size: 2.5vw; }
  #hd .ai-audio .trigger-play { width: 15vw; height: 15vw; }
  #hd .ai-audio .caption { max-width: 220px; flex-direction: column; align-items: flex-start; text-align: left; }
  #hd .tab-aicooling .list { flex-wrap: wrap; margin-bottom: 20px; }
  #hd .tab-aicooling .list li { width: 50%; font-size: .9em; padding: 5px; margin: 0 0 10px; }
  #hd .tab-aicooling .context .entry figure { width: 100%; }
  #hd .tab-aicooling .context .entry .hd-content { width: 100%; padding: 2em 0 0; } }
@media screen and (max-width: 480px) { #hd .performance-power .hd-content li { padding: 0 1.75em 2em; }
  #hd .tab-cooler .hd-container .list li { width: calc(33.3333% - .5em); }
  #hd .tab-aicooling .list li { width: 100%; margin-bottom: 10px; } }
#hd .tab-lighting { padding-bottom: 2em; position: relative; overflow: hidden; }
#hd .tab-lighting.is-open .hd-container { opacity: .35; }
#hd .tab-lighting .hd-container { width: 80%; }
#hd .tab-lighting .hd-content { margin-right: auto; }
#hd .tab-lighting .hd-content h3 { margin-right: -1em; }
#hd .tab-lighting .hd-content .hd-logo { margin: 2em 0; }
#hd .tab-lighting .hd-content button { background: none; border: none; cursor: pointer; }
#hd .tab-lighting .hd-content button:hover h4 { color: white; }
#hd .tab-lighting .hd-lighting { max-width: 643px; margin: 0 2em; position: relative; overflow: hidden; }
#hd .tab-lighting .hd-lighting img { width: 100%; }
#hd .tab-lighting .hd-control-container { max-width: 20em; margin-top: -4em; margin-left: auto; position: relative; }
#hd .tab-lighting .hd-controls { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: -5%; position: relative; }
#hd .tab-lighting .hd-controls li { width: 33.3333%; cursor: pointer; opacity: .75; }
#hd .tab-lighting .hd-controls li img { display: block; width: 65px; height: 65px; margin: 20px auto 10px; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .5 !important; }
#hd .tab-lighting .hd-controls li:hover, #hd .tab-lighting .hd-controls li:focus, #hd .tab-lighting .hd-controls li.hd-active { opacity: 1; -webkit-filter: grayscale(0%); filter: grayscale(0%); }
#hd .tab-lighting .hd-controls li:hover img, #hd .tab-lighting .hd-controls li:focus img, #hd .tab-lighting .hd-controls li.hd-active img { opacity: 1 !important; -webkit-filter: grayscale(0%); filter: grayscale(0%); }
#hd .tab-lighting .hd-controls b { display: block; font-size: 16px; font-weight: 400; margin: 5px 0; }
#hd .tab-lighting .hd-controls small { width: 113px; height: 65px; margin: 0 auto; }

#pageContent-rgb { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#pageContent-rgb .hd-container { width: 80%; padding: 4em; background: #13202c; position: relative; opacity: 1 !important; }
#pageContent-rgb div { padding-right: 2em; }
#pageContent-rgb div p { margin-bottom: 0; }
#pageContent-rgb .trigger-close { font-size: 1.25em; }

#colorpicker { width: 120px; height: 120px; position: absolute; top: 80%; right: 5%; margin: 2em auto; }
#colorpicker .farbtastic, #colorpicker canvas { width: 100% !important; height: 100% !important; }
#colorpicker .farbtastic-solid { width: 51% !important; height: 51% !important; left: 0 !important; top: 0 !important; right: 0; bottom: 0; margin: auto; }
#colorpicker .farbtastic-solid, #colorpicker .farbtastic-mask, #colorpicker .farbtastic-overlay { left: 0; }

#color, #greybg { width: 17.5%; height: 0; padding-bottom: 10%; position: absolute; top: 82%; left: 73%; z-index: -1; }

#greybg { background-color: #757575; z-index: -2; }

/* ---------- color effect -------- */
#hd .hd-rainbow { 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); 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); 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); background-size: 1000%; /* IE6-9 */ }
#hd .hd-rainbow:before { content: ''; display: block; width: 100%; height: 5%; position: absolute; top: 86%; left: 0; background: #333333; }
#hd .hd-rainbow:after { content: ''; display: block; width: 100%; height: 4%; position: absolute; top: 86%; left: 0; background-color: #fd46a6; background-image: -moz-linear-gradient(135deg, #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(135deg, #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(135deg, #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); }
#hd .hd-cycle:before { content: ''; display: block; width: 100%; height: 5%; position: absolute; top: 86%; left: 0; background: #333333; }
#hd .hd-cycle:after { content: ''; display: block; width: 100%; height: 5%; position: absolute; top: 86%; left: 0; background: #ff0000; -webkit-animation-delay: 0; -webkit-animation-duration: 8s; -webkit-animation-name: cycle; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: reverse; -moz-animation-delay: 0; -moz-animation-duration: 8s; -moz-animation-name: cycle; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: reverse; -o-animation-delay: 0; -o-animation-duration: 8s; -o-animation-name: cycle; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: reverse; animation-delay: 0; animation-duration: 8s; animation-name: cycle; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: reverse; }
#hd .hd-starryNight .starry_night { display: block; }
#hd .starry_night_back { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 86%; left: 0; background: #fff; display: none; }
#hd .starry_night_color { content: ''; display: block; width: 100%; height: 5%; position: absolute; top: 86%; left: 0; background: #ff0000; -webkit-animation-delay: 0; -webkit-animation-duration: 5s; -webkit-animation-name: flashStrobing; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0; -moz-animation-duration: 5s; -moz-animation-name: flashStrobing; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0; -o-animation-duration: 5s; -o-animation-name: flashStrobing; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 5s; animation-name: flashStrobing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .starry_night { display: none; }
#hd .starry_night li { width: 45%; height: 0; padding-bottom: 45%; background-color: #FFF; background: radial-gradient(circle, white, rgba(255, 255, 255, 0) 50%); position: absolute; z-index: 2; -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 .starry_night li:nth-child(2) { left: 8%; top: 3%; }
#hd .starry_night li:nth-child(3) { left: 27%; top: 13%; -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 .starry_night li:nth-child(4) { left: 30%; top: 10%; -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 .starry_night li:nth-child(5) { left: 45%; top: -1%; -webkit-animation-delay: -1.5s; -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: -1.5s; -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: -1.5s; -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: -1.5s; animation-duration: 3s; animation-name: breathing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }

#pageContent-style-customization { background: black; }

#hd .tab-design { padding: 2em 0 4em; }
#hd .tab-design .hd-content { padding-right: 2em; }
#hd .tab-design .list { justify-content: flex-start; padding-top: 0; }
#hd .tab-design .list li { max-width: calc(50% - .5em); }
#hd .tab-design figure { width: 75%; margin-right: -15%; position: relative; }
#hd .tab-design figure img { width: 100%; }
#hd .tab-design figure .pd-front { width: 92%; position: relative; z-index: 2; }
#hd .tab-design figure .pd-back { width: 92%; position: absolute; top: 0; left: 0; right: 0; opacity: 0; }
#hd .tab-design figure .pd-gif { margin: 4.6% 0; }
#hd .tab-design figure .pos-1, #hd .tab-design figure .pos-2 { display: none; }
#hd .tab-design figure .pos-1.hd-active, #hd .tab-design figure .pos-2.hd-active { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.8s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.8s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.8s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-design figure.is-animated .pd-back { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeInRight; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.8s; -moz-animation-name: fadeInRight; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.4s; -o-animation-duration: 0.8s; -o-animation-name: fadeInRight; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.4s; animation-duration: 0.8s; animation-name: fadeInRight; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .tab-diy { padding: 4em 0 6em; }
#hd .tab-diy .hd-container { width: 80%; }
#hd .tab-diy figure { margin-bottom: 4em; }
#hd .tab-diy figure li { width: calc(25% - 2.5em); cursor: pointer; }
#hd .tab-diy figure li:hover .img-container img { filter: brightness(100%); }
#hd .tab-diy figure li.hd-active .img-container { background-color: #fe9537; background-image: -moz-linear-gradient(0deg, #fe9537, #ed7d8b, #e172ea); background-image: -webkit-linear-gradient(0deg, #fe9537, #ed7d8b, #e172ea); background-image: linear-gradient(0deg, #fe9537, #ed7d8b, #e172ea); }
#hd .tab-diy figure li.hd-active .img-container img { filter: brightness(100%); }
#hd .tab-diy .img-container { background: #0e0e0e; -moz-transition: background 0.8s ease; -o-transition: background 0.8s ease; -webkit-transition: background 0.8s ease; transition: background 0.8s ease; position: relative; overflow: hidden; }
#hd .tab-diy .img-container:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: transparent; background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 7.5em 7.5em, 7.5em 7.5em, 1.5em 1.5em, 1.5em 1.5em; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; opacity: 0.2; }
#hd .tab-diy .img-container img { width: 100%; filter: brightness(50%); -moz-transition: filter 0.4s ease; -o-transition: filter 0.4s ease; -webkit-transition: filter 0.4s ease; transition: filter 0.4s ease; position: relative; z-index: 2; }
#hd .tab-diy .hd-content li { display: none; }
#hd .tab-diy .hd-content 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 .tab-compatibility .hd-container { padding-top: 100px; }
#hd .tab-compatibility .compatibility-1 { display: flex; max-width: 1900px; margin: 0 auto 50px; flex-direction: row-reverse; align-items: center; }
#hd .tab-compatibility .compatibility-1 .img { width: 40%; }
#hd .tab-compatibility .compatibility-1 .text { width: 60%; padding: 0 15% 0 8%; }
#hd .tab-compatibility a { -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#hd .tab-compatibility a:hover { color: #9cf2ff; }
#hd .tab-compatibility .compatibility-2 { position: relative; }
#hd .tab-compatibility .compatibility-2 img { width: 100%; }
#hd .tab-compatibility .compatibility-2 .text { position: absolute; left: 50%; top: 20%; width: 35%; max-width: 600px; transform: translateX(-130%); }
#hd .tab-compatibility .compatibility-2 .text p { width: 80%; }

@media screen and (min-width: 2560px) { #hd .tab-lighting .hd-control-container { max-width: 22em; }
  #hd .tab-compatibility .compatibility-1 { max-width: 2400px; }
  #hd .tab-compatibility .compatibility-2 .text { top: 40%; left: 40%; } }
@media screen and (min-width: 3000px) { #hd .tab-lighting .hd-lighting { max-width: 1100px; }
  #hd .tab-lighting .hd-controls li img { width: 100px; height: 100px; }
  #hd .tab-compatibility .compatibility-1 { max-width: 3000px; } }
@media screen and (max-width: 1550px) { #hd .tab-compatibility .compatibility-2 .text { top: 10%; } }
@media screen and (max-width: 1440px) { #hd .tab-design { padding: 2em 0 4em; }
  #hd .tab-design figure { width: 60%; }
  #hd .tab-lighting .hd-control-container { margin-bottom: 2em; }
  #hd #colorpicker { width: 100px; height: 100px; }
  #hd .style-diy-content .entry .text { width: 40%; }
  #hd .style-diy-content .entry:nth-child(2n-1) .text { margin-right: -20%; }
  #hd .style-diy-content .entry.entry-4 .text { width: 50%; margin-right: -30%; } }
@media screen and (max-width: 1366px) { #hd .tab-compatibility .compatibility-1 .img { width: 50%; }
  #hd .tab-compatibility .compatibility-1 .text { width: 50%; padding: 0 50px 0 20px; } }
@media screen and (max-width: 1280px) { #hd .tab-lighting .hd-content { width: 30%; }
  #hd .tab-lighting .hd-lighting { width: 45%; }
  #hd .tab-lighting .hd-control-container { align-self: start; max-width: 18em; }
  #hd .tab-lighting .hd-controls li img { width: 50px; height: 50px; } }
@media screen and (max-width: 1024px) { #hd .tab-lighting .hd-container { width: 90%; }
  #hd .tab-diy figure li { width: calc(25% - 1.5em); } }
@media screen and (max-width: 1023px) { #hd .tab-lighting .hd-container { flex-wrap: wrap; flex-direction: column; }
  #hd .tab-lighting .hd-content { width: 100%; margin: 0; }
  #hd .tab-lighting .hd-content .hd-logo { margin: 1em 0; }
  #hd .tab-lighting .hd-lighting { width: 100%; max-width: 400px; margin: 0 auto 2em; }
  #hd .tab-lighting .hd-control-container { width: 100%; max-width: 400px; margin: 0 auto; }
  #hd .tab-lighting .hd-controls li { width: 25%; }
  #hd .tab-compatibility .compatibility-2 .img { margin-left: -50%; }
  #hd .tab-compatibility .compatibility-2 .text { position: relative; left: auto; top: auto; width: 100%; max-width: 100%; padding: 50px 30px 0 30px; transform: translateX(0%); background-image: linear-gradient(90deg, #120d61, #281163, #511457, #6c1133); }
  #hd .tab-compatibility .compatibility-2 .text p { width: 100%; }
  #colorpicker { position: relative; margin-right: 0; margin-top: -20%; }
  #pageContent-rgb { width: 90%; }
  #pageContent-rgb .hd-container { padding: 3em 2em; } }
@media screen and (max-width: 768px) { #hd .tab-design .hd-content { width: 100%; padding-right: 0; margin-bottom: 2em; }
  #hd .tab-design figure { width: 100%; }
  #hd .tab-diy .hd-container { width: 90%; }
  #hd .tab-diy figure li { width: calc(25% - 1em); }
  #hd .tab-compatibility .compatibility-1 { display: block; }
  #hd .tab-compatibility .compatibility-1 .img { width: 100%; }
  #hd .tab-compatibility .compatibility-1 .text { width: 100%; padding: 0 30px; }
  #pageContent-rgb .hd-col50 { width: 100%; }
  #pageContent-rgb div { padding-right: 0; margin-bottom: 2em; } }
@media screen and (max-width: 480px) { #hd .tab-lighting .hd-controls b { font-size: .875em; }
  #hd .tab-diy figure li { width: 100%; margin-bottom: 2em; }
  #hd .tab-diy figure li:nth-child(1) .img-container img { margin-top: -65%; margin-bottom: -55%; }
  #hd .tab-diy figure li:nth-child(2) .img-container img { margin-top: -35%; margin-bottom: -80%; }
  #hd .tab-diy figure li:nth-child(3) .img-container img { margin-top: -20%; margin-bottom: -90%; }
  #hd .tab-diy figure li:nth-child(4) .img-container img { margin-top: -5%; margin-bottom: -10%; }
  #hd .tab-diy figure .img-container { display:flex; padding: 1px 0;margin: 0 auto 1em; background-color: #fe9537; background-image: -moz-linear-gradient(0deg, #fe9537, #ed7d8b, #e172ea); background-image: -webkit-linear-gradient(0deg, #fe9537, #ed7d8b, #e172ea); background-image: linear-gradient(0deg, #fe9537, #ed7d8b, #e172ea); }
  #hd .tab-diy figure .img-container img { filter: brightness(100%); }
  #hd .tab-design figure .pd-front { width: 100%; }
  #hd .tab-design figure .pd-back { width: 100%; }
  #pageContent-rgb .hd-container { width: 100% !important; padding: 3em 1em 1em; }
  #pageContent-rgb .trigger-close { top: 0; right: 0; } }
#hd #more .list { margin-bottom: 2em; }
#hd .more-optimization { padding-top: 100px; }
#hd .more-optimization p { margin-bottom: 30px; }
#hd .more-optimization .list-wrapper { padding: 50px 0 100px; }
#hd .more-optimization .list-wrapper .list { max-width: 1260px; margin-left: auto; margin-right: auto; padding: 0 20px; }
#hd .more-optimization .entry:not(.active) { display: none; }
#hd .tab-bios .list li { width: auto; min-width: 250px; }
#hd .tab-bios .list span { text-transform: uppercase; }
#hd .tab-bios .hd-hint { width: 250px; font-size: .6em; font-weight: 500; position: absolute; top: -1.5em; left: 0; right: 0; margin: 0 auto; color: #fe34e7; text-align: center; -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: blink; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 2s; -moz-animation-name: blink; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 2s; -o-animation-name: blink; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 2s; animation-name: blink; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .tab-bios .mode-wrapper { display: flex; flex-wrap: wrap; background: #13202c; }
#hd .tab-bios .mode-adv-2 { display: none; }
#hd .tab-bios .mode-img { width: 45%; }
#hd .tab-bios .mode-img img { width: 100%; }
#hd .tab-bios .mode-text { width: 55%; position: relative; }
#hd .tab-bios .mode-text .brief { height: 100%; padding: 50px; }
#hd .tab-bios .mode-text .details { height: 27vw; max-height: 320px; margin: 2.5vw 50px; overflow: hidden; display: none; }
#hd .tab-bios .mode-text .details-content-wrapper { height: 100%; overflow-y: scroll; padding-right: 10px; -webkit-overflow-scrolling: touch; }
#hd .tab-bios .mode-text .details-content-wrapper::-webkit-scrollbar { width: 3px; height: 3px; }
#hd .tab-bios .mode-text .details-content-wrapper::-webkit-scrollbar-track { background: #13202c; }
#hd .tab-bios .mode-text .details-content-wrapper::-webkit-scrollbar-thumb { background: #fe9537; }
#hd .tab-bios .mode-text .details-content-wrapper::-webkit-scrollbar-thumb:hover { background: #fe34e7; }
#hd .tab-bios .mode-text .details-content-wrapper h4 { font-size: 1em; font-weight: normal; margin: 0; color: #fe34e7; text-transform: none; }
#hd .tab-bios .more-btn { display: inline-block; width: auto; padding: 10px; font-size: 0.9em; text-transform: uppercase; background: white; color: black; cursor: pointer; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#hd .tab-bios .more-btn:hover { background-color: #ccc; }
#hd .tab-bios .more-btn.btn-primary { background: transparent; color: white; border: 1px solid white; }
#hd .tab-bios .more-btn.btn-primary:hover { color: #fe34e7; }
#hd .tab-bios .back-btn { background: #fe34e7; color: black; padding: 3px 8px; font-size: 0.8em; margin-left: 10px; display: inline-block; width: auto; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }
#hd .tab-bios .close-btn { display: block; width: 21px; height: 21px; background: url("../img/more/close.png") center no-repeat; position: absolute; top: 15px; right: 15px; cursor: pointer; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
#hd .tab-bios .close-btn:hover { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
#hd .more-audio { padding-top: 1px; }
#hd .tab-studio, #hd .tab-dts { padding-top: 30px; }
#hd .tab-studio h3 + p, #hd .tab-dts h3 + p { margin: 0 auto 2em; }
#hd .tab-dts { padding-bottom: 50px; }
#hd .tab-dts li { padding: 0 30px; }
#hd .tab-dts li img { margin: 10px auto; }
#hd .tab-dts .hd-w1400 { background: #000000; }
#hd .more-aida, #hd .more-armoury { padding: 100px 0; }
#hd .more-aida small.color-grey, #hd .more-armoury small.color-grey { font-weight: 400; }
#hd .more-aida .sub-tab, #hd .more-aida .list { margin-top: 2em; padding-top: 2em; }
#hd .more-armoury-ui { margin: 80px auto 0; position: relative; }
#hd .more-armoury-ui .list { display: flex; flex-wrap: wrap; align-items: flex-start; width: 30%; padding: 0; padding-right: 5px; margin-bottom: 2em; }
#hd .more-armoury-ui .list ul { width: 100%; margin-bottom: 2em; }
#hd .more-armoury-ui .list li { width: 100%; justify-content: flex-start; text-align: left; margin-bottom: .75em; background: none; }
#hd .more-armoury-ui .screenshot { width: 70%; }
#hd .more-armoury-ui .screenshot .img { display: none; }
#hd .more-armoury-ui .screenshot .img.active { display: block; }
#hd .more-armoury-ui .screenshot .img img { width: 100%; border: 1px solid #555; }
#hd .more-armoury-ui a { margin-top: auto; padding: 8px 15px; color: black; background: white; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; text-transform: uppercase; }
#hd .more-armoury-ui a:hover { background-color: #ccc; }
#hd .more-ramcache { padding: 100px 0; }
#hd .more-ramcache h3 + p { margin: 0 auto 20px; }
#hd .more-ramcache .inner { background: url("../img/more/ramcache-bg.jpg") left top no-repeat; }
#hd .more-ramcache .inner:after { content: ''; display: block; clear: both; }
#hd .more-ramcache-ui { width: 500px; float: right; margin-right: 50px; margin-top: 50px; }
#hd .more-ramcache-ui .hd-container { width: 400px; margin: 0 auto; position: relative; }
#hd .more-ramcache-ui .entry { display: none; }
#hd .more-ramcache-ui .entry.active { display: block; }
#hd .more-ramcache-ui .entry p { margin-bottom: 10px; min-height: 3.5em; }
#hd .more-ramcache-ui .control { position: relative; }
#hd .more-ramcache-ui .control a { display: block; width: 40px; height: 40px; margin: 0; position: absolute; top: 200px; cursor: pointer; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#hd .more-ramcache-ui .control a:before { display: block; content: ''; width: 20px; height: 2px; background: white; position: absolute; left: 10px; top: 13px; -moz-transform: rotate(-45deg) translateX(0px) translateY(0px); -o-transform: rotate(-45deg) translateX(0px) translateY(0px); -ms-transform: rotate(-45deg) translateX(0px) translateY(0px); -webkit-transform: rotate(-45deg) translateX(0px) translateY(0px); transform: rotate(-45deg) translateX(0px) translateY(0px); }
#hd .more-ramcache-ui .control a:after { display: block; content: ''; width: 20px; height: 2px; background: white; position: absolute; left: 10px; top: 26px; -moz-transform: rotate(45deg) translateX(0px) translateY(0px); -o-transform: rotate(45deg) translateX(0px) translateY(0px); -ms-transform: rotate(45deg) translateX(0px) translateY(0px); -webkit-transform: rotate(45deg) translateX(0px) translateY(0px); transform: rotate(45deg) translateX(0px) translateY(0px); }
#hd .more-ramcache-ui .control a:hover { opacity: 0.7; }
#hd .more-ramcache-ui .control a.left { right: 90%; }
#hd .more-ramcache-ui .control a.right { -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); left: 90%; }

@media screen and (min-width: 2560px) { #hd .tab-bios .hd-hint { font-size: .5em; }
  #hd .more-optimization .list-wrapper .list { max-width: none; } }
@media screen and (min-width: 3000px) { #hd .tab-bios .mode-text .details { max-height: 520px; } }
@media screen and (max-width: 1200px) { #hd .tab-bios .mode-img { width: 50%; }
  #hd .tab-bios .mode-text { width: 50%; }
  #hd .tab-bios .mode-text .brief { padding: 20px; }
  #hd .tab-bios .mode-text .details { height: 30vw; margin: 2.5vw 50px 2.5vw 50px; }
  #hd .tab-bios .more-btn { padding: 5px 10px; } }
@media screen and (max-width: 1023px) { #hd .tab-bios .mode-img { width: 100%; }
  #hd .tab-bios .mode-text { width: 100%; }
  #hd .tab-bios .mode-text .details { height: 50vw; margin: 2.5vw 50px; } }
@media screen and (max-width: 768px) { #hd .more-optimization { padding-top: 50px; }
  #hd .tab-dts li { width: 100%; padding: 0px 0px 20px; }
  #hd .tab-dts p { padding: 0; }
  #hd .more-aida img.hd-col75 { width: 100%; }
  #hd .more-armoury-ui { display: block; margin-top: 0; text-align: center; }
  #hd .more-armoury-ui .list { width: 100%; padding-top: 30px; margin-bottom: 0; }
  #hd .more-armoury-ui .list ul { margin-bottom: 0; }
  #hd .more-armoury-ui .list li { margin-bottom: .5em; }
  #hd .more-armoury-ui .screenshot { width: 100%; }
  #hd .more-armoury-ui > a { display: inline-block; margin: 1em auto 0; }
  #hd .more-ramcache-ui { float: none; margin: 50px auto 0 auto; } }
@media screen and (max-width: 620px) { #hd .more-optimization .list-wrapper .list { flex-wrap: wrap; margin-bottom: 20px; }
  #hd .more-optimization .list-wrapper .list li { width: 50%; }
  #hd .tab-bios .mode-text .details { margin-left: 10px; }
  #hd .more-ramcache .inner { background: none; }
  #hd .more-ramcache-ui { width: 100%; }
  #hd .more-ramcache-ui .hd-container { width: 80%; } }
@media screen and (max-width: 480px) { #hd .more-optimization .list-wrapper .list li { width: 100%; }
  #hd .more-armoury-ui .list li { margin-bottom: .125em; } }

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